/* About Hartii - the scroll-down section at the foot of the Biome home's first screen.

   Direction (2026-10-06)
   - Subject: Hartii as the home of decentralised finance, art and gaming on Quai.
   - Audience: a first-time visitor, partner or journalist deciding whether this is serious.
   - The section's one job: in one scroll, say what Hartii is, what is live, why it can be trusted, since when.
   - Mood: sober, exact, instrumented.
   - Signature moment: the timeline is a block-height ruler. The rail draws itself once, tick by tick, and ends
     at today's live block height, read from the chain.
   Surfaces: type on the page with hairlines, not boxed cards. Tokens come from biome/base.css; the LED glyphs
   from biome/product-glyphs.mjs. Spacing is 4/8; numbers are tabular. */

/* ---------- first screen + cue ---------- */
.biome-home .room-inner.room-inner--tall { display: block; padding: 0; min-height: 0; }
#entrance .swipe-hint { display: none; } /* superseded by the About cue below the scene */
.first-screen {
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(92px, 11vh, 112px) var(--pad) 0;
  display: grid; grid-template-rows: 1fr auto; align-items: center;
}
.first-screen > .scene { align-self: center; }
.about-cue {
  justify-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 20px; text-decoration: none; color: var(--fg-2);
  font: 500 13px/1.2 var(--body); letter-spacing: .04em; border-radius: 10px;
  transition: color .2s;
}
html.js-rooms .first-screen { padding-bottom: 84px; } /* clear of the fixed room HUD */
.first-screen { padding-bottom: 20px; }
.about-cue:hover { color: var(--fg); }
.about-cue-mark { display: grid; gap: 5px; justify-items: center; }
.about-cue-mark i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); }
.about-cue-mark i:first-child { background: var(--red-hi); } /* no-JS: the "you are here" dot */
/* about.mjs marks the cue live and lights one dot per stage of scrolling down (top, middle, bottom). */
.about-cue-mark[data-live] i { background: var(--fg-3); transition: background-color .25s ease, transform .25s ease; }
.about-cue-mark[data-live] i.is-on { background: var(--red-hi); transform: scale(1.3); }
/* Three dots light in order, three times, then rest. A cue, not a loop. */
.about-cue-mark i { animation: cue-dot 1.5s ease-in-out 1.2s 3 both; }
.about-cue-mark i:nth-child(2) { animation-delay: 1.4s; }
.about-cue-mark i:nth-child(3) { animation-delay: 1.6s; }
@keyframes cue-dot { 0%, 100% { opacity: 1; } 40% { opacity: .25; } }

/* ---------- section frame ---------- */
.about {
  position: relative; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7, 5, 5, 0) 0, rgba(7, 5, 5, .94) 140px, rgba(7, 5, 5, .97) 100%);
  padding: clamp(64px, 9vw, 120px) var(--pad) clamp(40px, 6vw, 72px);
  scroll-margin-top: 56px;
}
.ab-wrap { max-width: var(--max); margin: 0 auto; }
.ab-kicker { font: 500 11px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--red-hi); }
.about h2 { font-size: clamp(2rem, 4.8vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; margin-top: 16px; max-width: 21ch; }
.ab-statement { margin-top: 24px; max-width: 62ch; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.65; color: var(--fg-2); }
.ab-toc { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; }
.ab-toc a { font: 500 13px/1 var(--body); color: var(--fg-2); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .2s; }
.ab-toc a:hover { color: var(--fg); border-color: var(--red-hi); }

.ab-block { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px 48px; margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.ab-label { align-self: start; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; }
.ab-n { font-size: 12px; color: var(--red-hi); letter-spacing: .08em; }
.ab-label h3 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; }
.ab-lead { color: var(--fg); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; margin-bottom: 32px; }
.ab-body h4 { font: 700 1.05rem/1.25 var(--display); letter-spacing: -.01em; margin: 0; }

/* ---------- status marks (also in products.css) ---------- */
.st { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--fg-2); white-space: nowrap; }
.st-live { color: var(--ok); border-color: rgba(74, 222, 128, .4); }
.st-beta { color: var(--warn); border-color: rgba(255, 176, 32, .4); }

/* ---------- what we do ---------- */
.ab-pillar + .ab-pillar { margin-top: 48px; }
.ab-pillar-head { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 8px; }
.ab-glyph { --led: #F6ECE8; --pn-hot: var(--red-hi); display: block; width: 84px; height: 84px; }
.ab-pillar-head h4 { font-size: 1.5rem; letter-spacing: -.02em; }
.ab-pillar-line { color: var(--fg); margin-top: 4px; }
.ab-pillar-note { color: var(--fg-3); font-size: 13.5px; margin-top: 2px; }
.ab-rows { list-style: none; margin: 0; padding: 0; }
.ab-rows li { display: grid; grid-template-columns: 220px 72px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.ab-rowname { font: 600 15px/1.3 var(--display); color: var(--fg); text-decoration: none; }
a.ab-rowname:hover { color: var(--red-hi); }
.ab-rowtext { color: var(--fg-2); font-size: 14.5px; line-height: 1.55; }

/* ---------- why ---------- */
.ab-principles { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.ab-principles li { counter-increment: p; padding: 20px 0 24px; border-top: 1px solid var(--line); }
.ab-principles h4::before { content: counter(p, decimal-leading-zero); font: 500 11px/1 var(--mono); color: var(--red-hi); letter-spacing: .08em; display: block; margin-bottom: 10px; }
.ab-principles p { margin-top: 8px; color: var(--fg-2); font-size: 14.5px; line-height: 1.65; }

/* ---------- since when: the block-height ruler ---------- */
.ab-ruler { --rail: 196px; list-style: none; margin: 0; padding: 0; position: relative; }
.ab-ruler::before, .ab-ruler::after { content: ''; position: absolute; left: calc(var(--rail) + 13px); top: 14px; bottom: 14px; width: 2px; }
.ab-ruler::before { background: var(--line-2); }
.ab-ruler::after { background: linear-gradient(180deg, var(--red-hi), var(--red)); transform-origin: top; transform: scaleY(1); }
.ab-tick { position: relative; display: grid; grid-template-columns: var(--rail) 28px minmax(0, 1fr); grid-template-areas: "date . title" "block . text"; column-gap: 0; align-items: baseline; padding: 40px 0 0; }
.ab-tick:first-child { padding-top: 0; }
.ab-tick::before { content: ''; grid-area: 1 / 2; align-self: start; justify-self: center; margin-top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-900); border: 2px solid var(--red-hi); z-index: 1; }
.ab-tick:first-child::before { margin-top: 6px; }
.ab-tick:not(:first-child)::before { grid-row: 1; }
.ab-date { grid-area: date; justify-self: end; padding-right: 16px; font-size: 13px; color: var(--fg); white-space: nowrap; }
.ab-tick .ab-height { grid-area: block; justify-self: end; padding-right: 16px; font-size: 11.5px; color: var(--fg-3); }
.ab-tick h4 { grid-area: title; padding-left: 16px; }
.ab-tick p { grid-area: text; padding-left: 16px; margin-top: 4px; color: var(--fg-2); font-size: 14.5px; line-height: 1.6; max-width: 56ch; }
.ab-gap { position: absolute; left: 0; width: calc(var(--rail) - 16px); text-align: right; top: 12px; font: 400 11px/1 var(--mono); color: var(--fg-3); letter-spacing: .04em; }
.ab-now::before { background: var(--red-hi); box-shadow: 0 0 0 4px rgba(255, 78, 96, .18); }
.ab-now .ab-height { color: var(--fg); font-size: 13px; }
/* A new block landed: the height flashes the accent once (about.mjs; never under reduced motion). */
.ab-now .ab-height.ab-tickle { animation: ab-tickle 1.2s ease-out; }
@keyframes ab-tickle { 0% { color: var(--red-hi); } 100% { color: var(--fg); } }

/* ---------- live numbers ---------- */
.ab-readout { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; }
.ab-readout > div { padding: 4px 16px 4px 16px; border-left: 1px solid var(--line-2); min-width: 0; }
.ab-readout > div:first-child { padding-left: 0; border-left: 0; }
.ab-readout dt { font: 500 11px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.ab-readout dd { margin: 0; }
.ab-readout dd.mono { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -.02em; color: var(--fg); margin-top: 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ab-note { font-size: 12px; line-height: 1.45; color: var(--fg-3); margin-top: 8px; }
.ab-fresh { margin-top: 24px; font-size: 12.5px; color: var(--fg-3); }

/* ---------- how to start ---------- */
.ab-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.ab-steps li { padding-top: 20px; border-top: 1px solid var(--line); }
.ab-step-n { display: block; font-size: 2.5rem; line-height: 1; color: var(--fg-3); letter-spacing: -.04em; margin-bottom: 14px; }
.ab-steps p { margin-top: 8px; color: var(--fg-2); font-size: 14.5px; line-height: 1.6; }
.ab-step-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ab-step-links a { color: var(--fg); font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line-2); padding: 6px 0; }
.ab-step-links a:hover { border-color: var(--red-hi); color: var(--red-hi); }

/* ---------- foot ---------- */
.ab-foot { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.ab-disclosure { max-width: 72ch; color: var(--fg-2); font-size: 14px; line-height: 1.7; }
.ab-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; }
.ab-links a { color: var(--fg-2); font-size: 13.5px; text-decoration: none; border-bottom: 1px solid var(--line); padding: 8px 0; }
.ab-links a:hover { color: var(--fg); border-color: var(--red-hi); }
.ab-contact { margin-top: 24px; }

/* ---------- reveal: once, on scroll; absent without JS or under reduced motion ---------- */
.ab-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.2, 0, .2, 1), transform .6s cubic-bezier(.2, 0, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.ab-reveal.in { opacity: 1; transform: none; }
.ab-ruler.ab-draw::after { transform: scaleY(0); transition: transform 1.6s cubic-bezier(.3, 0, .2, 1); }
.ab-ruler.ab-draw.in::after { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .ab-reveal, .ab-ruler.ab-draw::after { opacity: 1 !important; transform: none !important; transition: none !important; }
  .about-cue-mark i { animation: none; }
  .about-cue-mark[data-live] i { transition: none; }
}

/* ---------- nav + home additions ---------- */
.nav-about { color: var(--fg); }
@media (max-width: 760px) {
  .nav .nav-links .nav-about { display: inline-flex; }
  .nav-chain { padding: 6px 9px; }
}
.pn-product { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); text-decoration: none; font: 600 13px/1 var(--body); padding: 10px 0; border-bottom: 1px solid var(--line-2); margin-right: 16px; }
.pn-product:hover { color: var(--red-hi); border-color: var(--red-hi); }
.pn-tasks .pn-task[data-about-link] { background: rgba(255, 255, 255, .02); }
@media (min-width: 1101px) {
  .pn-tasks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pn-tasks li:nth-child(n) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); grid-column: auto; }
  .pn-tasks li:nth-child(4n+1) { border-left: 0; }
  .pn-tasks li:nth-child(-n+4) { border-top: 0; }
  .pn-tasks li:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .pn-tasks li:last-child:nth-child(4n+2) { grid-column: span 3; }
  .pn-tasks li:last-child:nth-child(4n+3) { grid-column: span 2; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ab-block { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; padding-top: 32px; }
  .ab-label { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
  .ab-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .ab-readout > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ab-readout > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line-2); }
  .ab-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-principles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #entrance .mark-wrap { max-width: 190px; }
  .first-screen { padding-top: 84px; }
  .ab-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .ab-rows .ab-rowtext { grid-column: 1 / -1; }
  .ab-pillar-head { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .ab-glyph { width: 64px; height: 64px; }
  .ab-ruler { --rail: 0px; }
  .ab-ruler::before, .ab-ruler::after { left: 5px; }
  .ab-tick { grid-template-columns: 12px minmax(0, 1fr); grid-template-areas: "rail date" "rail block" "rail title" "rail text"; column-gap: 16px; align-items: start; }
  .ab-tick::before { grid-area: rail; margin-top: 4px; }
  .ab-date, .ab-tick .ab-height { justify-self: start; padding-right: 0; }
  .ab-tick h4, .ab-tick p { padding-left: 0; }
  .ab-tick h4 { margin-top: 6px; }
  .ab-gap { left: 28px; width: auto; text-align: left; top: 14px; }
  .ab-tick { padding-top: 48px; }
}