/* Section-specific layout: hero, thesis, pillars, method, stack, metrics,
   engagements, contact, footer. */

/* ---------- hero ---------- */
/* min-height was a full 100svh with the content centred inside it. That was
   sized for a 6.25rem hero; now the type is half that, centring left a band of
   empty ground above the eyebrow taller than the headline itself. The block is
   shorter and the top padding only has to clear the fixed top bar. */
.sec--hero {
  min-height: min(84svh, 760px); display: flex; align-items: center;
  padding-block: 4.5rem 3rem; border-top: 0;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--accent); }
.hero h1 {
  font-family: var(--font-display); font-size: var(--t-hero);
  line-height: .98; letter-spacing: -.028em; margin-bottom: 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lead { margin-bottom: 2.25rem; }

.drawing { width: 100%; height: auto; max-height: 76svh; display: block; margin-inline: auto; overflow: visible; }
@media (max-width: 940px) { .drawing { max-height: 54svh; margin-top: 1rem; } }

/* ---------- services: the three offers, as cards ----------

   Cards rather than the flat partitioned slab this started as. Three offers is
   a choice the reader has to make, and a choice wants separated objects with
   edges, not three regions of one surface. Each carries the bead and reel along
   its top edge, the same ornament the section rules use, so they read as part
   of the drawing rather than as a component library import. */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.8vw, 1.5rem); }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } }

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.offer:hover { transform: translateY(-4px); border-color: var(--accent); }

.offer-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: .3rem; }
.offer-n { font-size: var(--t-mono); letter-spacing: .2em; color: var(--accent); }
.offer-kind { font-size: var(--t-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.offer h3 { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; margin: .85rem 0 .6rem; }
.offer-lead { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; margin-bottom: 1.1rem; }
.offer ul { list-style: none; display: grid; gap: .45rem; margin-bottom: 1.4rem; }
.offer li {
  position: relative; padding-left: 1.1rem; font-size: var(--t-sm);
  line-height: 1.45; color: var(--ink-2);
}
.offer li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 1.4px; background: var(--accent); }

/* Pushed to the bottom edge so three cards of unequal copy still line up. */
.offer-go {
  margin-top: auto; align-self: start;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.offer-go span { margin-left: .5rem; }
.offer-go:hover { border-bottom-color: var(--accent); }

/* ---------- proof: a teaser here, the argument on its own page ---------- */
.proofstrip { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 1.8vw, 1.5rem); margin-top: 2rem; }
@media (max-width: 760px) { .proofstrip { grid-template-columns: 1fr; } }
.pcard {
  display: flex; flex-direction: column; gap: .6rem;
  border: 1px solid var(--rule); padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--bg-raised);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.pcard:hover { transform: translateY(-4px); border-color: var(--accent); }
.pcard-fig {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums;
}
.pcard-lab { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.pcard-go { margin-top: auto; padding-top: .6rem; font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pcard-go span { margin-left: .5rem; }
.pcard:hover .pcard-go { color: var(--accent); }

/* ---------- 404: a ruin, drawn in elevation ---------- */
/* The 404 is locked to a single screen: no scrollbar, everything visible at
   once. Below 600px of viewport height that lock is released, because trapping
   the button off-screen with overflow:hidden would leave a visitor stuck on the
   one page whose entire job is to get them somewhere else. */
@media (min-height: 600px) {
  .page-lost { height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
  .page-lost main { flex: 1 1 auto; min-height: 0; display: flex; }
  .page-lost .sec--lost { flex: 1 1 auto; min-height: 0; }
  .page-lost footer { flex: 0 0 auto; padding-block: 1.1rem; }
}

.sec--lost { display: flex; align-items: center; padding-block: 5.5rem 1.5rem; border-top: 0; }
.lost { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; min-height: 0; }
.lost-code {
  flex: 0 0 auto;
  letter-spacing: .28em; text-transform: uppercase; color: var(--ochre);
  border: 1px solid var(--ochre); padding: .4rem .85rem;
}

/* The numeral carries the message before a word is read. */
.lost-num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vh, 8rem);
  line-height: .82; letter-spacing: -.04em;
  color: var(--ink); margin: 1.1rem 0 .4rem;
  font-variant-numeric: lining-nums;
}

/* The engraving is 500x500 but its ink only occupies y128 to y343, so nearly
   half the file is empty margin. Cropping it in the box rather than shipping
   that whitespace is what lets the page fit one screen. object-position sits
   just above centre because the ink is not centred in the square either. */
.ruinfig {
  flex: 1 1 auto; min-height: 0;
  width: 100%; max-width: 32rem;
  aspect-ratio: 500 / 250;
  object-fit: cover;
  object-position: center 47%;
  display: block; margin-inline: auto;
}
/* The engraving is a mid green drawn for paper. On the slate ground it needs
   lifting, or it reads as a smudge rather than a drawing. */
:root[data-theme="dark"] .ruinfig { filter: brightness(1.45) saturate(1.15); }

.lost h1 { flex: 0 0 auto; font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.05; margin: .9rem 0 .6rem; }
.lost .lead { flex: 0 0 auto; max-width: 32rem; margin-bottom: 1.5rem; color: var(--ink-2); }
.lost .btn { flex: 0 0 auto; }

/* ---------- standalone pages ---------- */
.sec--page { padding-top: clamp(7rem, 12vw, 9rem); }
.sec--page .sec-head h1 { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.page-note { font-size: var(--t-sm); color: var(--ink-3); max-width: 42rem; margin-top: 1rem; }
.page-back { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }

.cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2.5rem; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }
/* Same card treatment as the offers, so the two pages read as one site. */
.case {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-raised);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.case:hover { transform: translateY(-4px); border-color: var(--accent); }
.case .case-src { margin-top: auto; padding-top: 1.25rem; }
.case-kind { font-size: var(--t-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.case h2,
.case h3 { font-family: var(--font-display); font-size: var(--t-h3); margin: .6rem 0 1rem; }
.case .case-body + .case-body { margin-top: 1rem; }
.case-body { font-size: var(--t-body); line-height: 1.65; color: var(--ink-2); }
.case-body strong { color: var(--ink); font-weight: 600; }

/* The caveat is set apart deliberately. Quoting someone else's win without the
   part that went wrong is the sort of thing this section exists not to do. */
.case-caveat {
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3);
  border-left: 2px solid var(--ochre); padding-left: 1rem; margin-top: 1.25rem;
}
.case-src { font-size: var(--t-mono); letter-spacing: .1em; color: var(--ink-3); margin-top: 1.25rem; }
.case-src a { color: var(--ink-2); }

/* ---------- thesis ---------- */
.def {
  border-left: 2px solid var(--accent);
  padding: .35rem 0 .35rem 1.5rem;
  margin-bottom: 2.75rem; max-width: 46rem;
}
.def-word { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: .02em; }
.def-pron { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); margin-left: .6rem; }
.def-body { color: var(--ink-2); font-size: var(--t-body); margin-top: .5rem; }
.def-body i { color: var(--ink); }

.thesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .thesis-grid { grid-template-columns: 1fr; } }

.pullquote {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  border-top: 1px solid var(--rule); padding-top: 1.75rem;
}
.pullquote span { color: var(--accent); }
.aside-note { margin-top: 1.5rem; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }

/* The chain: strain travels the run and takes hold at each joint. */
.chainfig { width: 100%; height: auto; max-width: 32rem; display: block; margin-top: 1.75rem; }
.chain-joint { fill: var(--bg-sunk); stroke: var(--accent); stroke-width: 1.4; }
.chainfig.is-in .chain-joint { animation: strain 4.5s var(--ease) infinite; }
.chainfig.is-in .j2 { animation-delay: .55s; }
.chainfig.is-in .j3 { animation-delay: 1.1s; }
@keyframes strain {
  0%, 46%, 100% { fill: var(--bg-sunk); stroke: var(--accent); }
  14%           { fill: var(--accent);  stroke: var(--accent); }
  30%           { fill: var(--ochre);   stroke: var(--ochre);  }
}

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.pillar { background: var(--bg); padding: clamp(1.75rem, 3.5vw, 3rem); transition: background-color .45s var(--ease); }
.pillar:hover { background: var(--bg-raised); }
.pillar-idx { font-family: var(--font-display); font-size: var(--t-sm); letter-spacing: .3em; color: var(--accent); }
.pillar h3 {
  font-family: var(--font-display); font-size: var(--t-h2);
  line-height: 1.05; letter-spacing: -.02em; margin: 1.1rem 0 .9rem;
}
.pillar-sub { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; margin-bottom: 1.5rem; max-width: 30rem; }

/* The claim, counted rather than described. */
.claim {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
  font-family: var(--font-display); font-size: var(--t-lead);
  margin-bottom: 1.75rem;
}
.claim-was { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.claim-arrow { color: var(--accent); font-family: var(--font-mono); }
.claim-now { color: var(--ink); font-style: italic; }
.claim-num { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }

.pillar ul { display: grid; gap: .8rem; border-top: 1px solid var(--rule-soft); padding-top: 1.6rem; }
.pillar li {
  display: grid; grid-template-columns: 14px 1fr; gap: .85rem; align-items: baseline;
  color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.pillar.is-in li { opacity: 1; transform: none; }
.pillar.is-in li:nth-child(1) { transition-delay: .10s; }
.pillar.is-in li:nth-child(2) { transition-delay: .18s; }
.pillar.is-in li:nth-child(3) { transition-delay: .26s; }
.pillar.is-in li:nth-child(4) { transition-delay: .34s; }
.pillar.is-in li:nth-child(5) { transition-delay: .42s; }
.pillar.is-in li:nth-child(6) { transition-delay: .50s; }
.pillar li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--accent); background: transparent;
  transition: background-color .3s var(--ease);
}
.pillar:hover li::before { background: var(--accent); }

/* ---------- method: a sticky figure that a joint gets cut into ---------- */
.method-grid {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 2.5rem;
}
@media (max-width: 900px) { .method-grid { grid-template-columns: 1fr; gap: 1rem; } }

.jointfig-wrap { position: sticky; top: 7.5rem; }
@media (max-width: 900px) {
  .jointfig-wrap {
    top: 4.25rem; z-index: 3;
    background: var(--bg); padding-block: .75rem .5rem;
    border-bottom: 1px solid var(--rule-soft);
  }
}
.jointfig { width: 100%; height: auto; max-height: 58svh; display: block; }
@media (max-width: 900px) { .jointfig { max-height: 27svh; } }
.fig-cap { display: flex; gap: .9rem; align-items: baseline; margin-top: .75rem; }
.fig-cap .step-live { color: var(--accent); }

/* Figure states: elements accumulate as the steps go by. */
.jointfig .w1, .jointfig .w2, .jointfig .w3, .jointfig .w4 {
  opacity: 0;
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.jointfig .w3 { transform: translateY(-64px); }
.jointfig[data-step="1"] .w1,
.jointfig[data-step="2"] .w1, .jointfig[data-step="2"] .w2,
.jointfig[data-step="3"] .w1, .jointfig[data-step="3"] .w2, .jointfig[data-step="3"] .w3,
.jointfig[data-step="4"] .w1, .jointfig[data-step="4"] .w2, .jointfig[data-step="4"] .w3, .jointfig[data-step="4"] .w4 {
  opacity: 1;
}
.jointfig[data-step="3"] .w3, .jointfig[data-step="4"] .w3 { transform: translateY(0); }

.steps { display: grid; }
.step {
  position: relative;
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  padding: clamp(2.25rem, 8svh, 4rem) 0 clamp(2.25rem, 8svh, 4rem) 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.step:last-child { border-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 0; background: var(--accent);
  transform: translateY(-50%);
  transition: height .55s var(--ease);
}
.step.is-active::before { height: 64%; }
.step-n {
  font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .18em;
  color: var(--ink-3); padding-top: .5em; font-variant-numeric: tabular-nums;
  transition: color .45s var(--ease);
}
.step.is-active .step-n { color: var(--accent); }
.step-body { display: grid; gap: .45rem; }
.step h3 { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: .01em; }
.step-when { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; color: var(--ink-3); }
.step p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; margin-top: .35rem; }

/* ---------- the stack: two marquees running against each other ---------- */
.marquee {
  position: relative; overflow: hidden;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.marquee-track {
  display: flex; align-items: center; gap: 2.75rem;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee--rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee-item {
  display: flex; align-items: center; gap: 2.75rem;
  font-family: var(--font-mono); font-size: .8125rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee:hover .marquee-item { color: var(--ink-3); }
.marquee-item:hover { color: var(--accent); }
/* A bead between entries, borrowing the astragal's own ornament. */
.marquee-item::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--accent); flex: none;
}
.stack-note { margin-top: 1.75rem; font-size: var(--t-sm); color: var(--ink-3); max-width: 42rem; }

/* ---------- metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }
.metric { background: var(--bg); padding: 1.75rem 1.5rem; display: grid; gap: .6rem; align-content: start; }
.metric-dir { font-family: var(--font-mono); font-size: 1.5rem; line-height: 1; color: var(--accent); display: inline-block; }
.metric--up.is-in   .metric-dir { animation: driftUp 3s ease-in-out infinite; }
.metric--down.is-in .metric-dir { animation: driftDown 3s ease-in-out infinite; }
.metric:nth-child(2).is-in .metric-dir { animation-delay: .25s; }
.metric:nth-child(3).is-in .metric-dir { animation-delay: .5s; }
.metric:nth-child(4).is-in .metric-dir { animation-delay: .75s; }
@keyframes driftUp   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes driftDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.metric-name { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; color: var(--ink); }
.metric-note { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.metric-bench { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--ochre); font-variant-numeric: tabular-nums; }
.footnote { margin-top: 1.5rem; font-size: var(--t-sm); color: var(--ink-3); max-width: 44rem; }
.footnote a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- engagements ---------- */
.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 900px) { .engagements { grid-template-columns: 1fr; } }
.eng {
  border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: .85rem; align-content: start;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.eng:hover { border-color: var(--accent); transform: translateY(-4px); }
.eng--feature { border-color: var(--ink); }
.eng h3 { font-family: var(--font-display); font-size: var(--t-h3); }
.eng-meta { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; color: var(--accent); }
.eng p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }
.eng-tag {
  justify-self: start; font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: .14em; padding: .3rem .6rem; border: 1px solid var(--ochre); color: var(--ochre);
}

/* ---------- contact ---------- */
.contact-h {
  font-family: var(--font-display); font-size: var(--t-h2);
  line-height: 1.02; letter-spacing: -.025em; margin-bottom: 1.25rem; max-width: 20ch;
}
.contact-h em { font-style: italic; color: var(--accent); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { display: grid; gap: 1rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 2rem; }
.contact-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--rule-soft); padding-bottom: .9rem; }
.contact-row a { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); text-decoration: none; transition: color .25s var(--ease); }
.contact-row a:hover { color: var(--accent); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .jointfig .w3 { transform: none; }
  .pillar li { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .offer:hover, .pcard:hover, .case:hover { transform: none; }
  .chainfig.is-in .chain-joint,
  .metric--up.is-in .metric-dir,
  .metric--down.is-in .metric-dir { animation: none; }
  .step:hover, .btn:hover, .eng:hover, .theme-btn:hover { transform: none; }
}