/* MCRO — motion system for non-home pages (brief patterns 1–6), on the design system tokens. */

/* 1. route curtain: Deep Tide wipe with a gold edge, 200–450ms */
.curtain { position: fixed; inset: 0; z-index: 200; background: var(--blue); transform: translateY(101%); pointer-events: none; visibility: hidden; }
.curtain.is-out, .curtain.is-in { visibility: visible; }
.curtain::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--light); box-shadow: 0 0 24px rgba(251, 181, 42, .8); }
.curtain.is-out { transform: translateY(0); transition: transform .38s cubic-bezier(.7, 0, .2, 1); pointer-events: auto; }
.curtain.is-in { transform: translateY(0); animation: curtain-in .42s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes curtain-in { to { transform: translateY(-101%); } }
.curtain.is-in::before { top: auto; bottom: 0; }

/* 2. staggered section rise is .reveal in site.css; page heroes add the word reveal. */

/* 3. filter chips + result reflow: FLIP is driven by site.js; these are the transitions it animates */
.lc.is-flip { transition: transform .5s var(--ease); }
.lc.is-new { animation: lc-in .5s var(--ease) both; }
.chip { position: relative; }
.chip.is-on { box-shadow: 0 0 0 3px rgba(251, 181, 42, .25); }

/* 4. card -> detail shared element: the destination title arrives from the card's rectangle (site.js) */
.flip-from { transform-origin: 0 0; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s; }

/* 5. sticky TOC + gold progress rail (long pages) */
.longform { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); align-items: start; }
.longform > .sec { padding-left: 0; padding-right: 0; }
.longform .sec__inner { padding: 0; }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 2.5rem 0 2rem 1rem; border-left: 2px solid var(--line); }
.toc::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--light); transform: scaleY(var(--p, 0)); transform-origin: top; transition: transform .2s linear; box-shadow: 0 0 12px rgba(251, 181, 42, .6); }
.toc__label { margin: 0 0 1rem; font: 700 .6rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.toc a { display: block; padding: .38rem 0; font: 700 .68rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); text-decoration: none; transition: color .25s, transform .3s var(--ease); }
.toc a.is-on { color: var(--blue); transform: translateX(4px); }
.toc a:hover { color: var(--blue); }
.toc__pct { display: block; margin-top: 1.2rem; font: 600 1.6rem/1 var(--font-display); color: var(--light); }
@media (max-width: 1100px) { .longform { grid-template-columns: 1fr; } .toc { position: static; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; padding: 1.4rem 0 .4rem; border: 0; } .toc::before, .toc__label, .toc__pct { display: none; } }

/* 6. beacon micro-interactions: gold underline grow, gold focus rings, magnetic primary CTA */
.sec__body a:not(.btn), .phero__intro a, .addr a, .mail { background: linear-gradient(var(--light), var(--light)) no-repeat left bottom / 0 2px; padding-bottom: 1px; text-decoration: none; transition: background-size .35s var(--ease); }
.sec__body a:not(.btn):hover, .mail:hover { background-size: 100% 2px; }
:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; border-radius: 2px; }
.btn--primary { will-change: transform; }
.btn.is-magnet { transition: transform .15s ease-out; }

/* ---------- copy slots: content MCRO still has to supply (not invented, not hidden: a gap the shape of the content) ---------- */
.slot { display: block; min-height: 3.2rem; border: 1px dashed rgba(8, 51, 125, .28); border-radius: 4px; background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(8, 51, 125, .035) 8px 9px); }
.slot--line { min-height: 1.6rem; }
.slot--inline { display: inline-block; min-width: 4.5rem; min-height: 1.35em; margin: 0 .15em; vertical-align: middle; }
.slot--inline .slot__label { padding: .15rem .5rem; }
.slot--figure { min-height: 8rem; }
.slot--photo { aspect-ratio: 4 / 4.6; min-height: 0; }
.slot__label { display: block; padding: .5rem .7rem; font: 600 .66rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #7e8fa2; }
[data-switch="off"] { display: none !important; }   /* switched off until MCRO supplies content; flip the attribute on */

/* ---------- page-specific: research ---------- */
.topics { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 1.2rem; }
.topic { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font: 600 .9rem/1.2 var(--font-body); color: var(--blue); text-align: left; cursor: pointer; transition: transform .3s var(--ease), border-color .25s, box-shadow .3s; }
.topic:hover { transform: translateY(-2px); border-color: rgba(8, 51, 125, .35); box-shadow: 0 20px 30px -24px rgba(6, 38, 94, .5); }
.topic b { font: 600 1.15rem/1 var(--font-display); color: var(--light); }
.nothing { grid-column: 1 / -1; padding: 2rem; border: 1px dashed var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); }
.nothing form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.nothing input { flex: 1 1 16rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 999px; font: 400 .95rem/1 var(--font-body); }
.record__walk { display: grid; gap: .4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; font: 700 .64rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.record__walk li { display: flex; gap: .6rem; align-items: baseline; opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.is-in .record__walk li { opacity: 1; transform: none; }
.record__walk li::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--light); flex: 0 0 auto; }
.record__walk b { color: var(--blue); }

/* ---------- flagship study: chaptered longform ---------- */
.chapter { position: relative; }
.chapter__num { display: block; margin-bottom: .6rem; font: 600 .95rem/1 var(--font-display); color: var(--light); letter-spacing: .04em; }
.findings { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.finding { padding: 1.4rem; border-top: 3px solid var(--light); background: var(--paper); border: 1px solid var(--line); border-top-width: 3px; border-top-color: var(--light); }
.finding .slot { margin-top: 1rem; }
.asks { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ask { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; background: var(--paper); }
.ask strong { font: 600 1.5rem/1 var(--font-display); color: var(--ink); }
.ask .btn { margin-top: auto; width: max-content; }
.downloads { display: flex; flex-wrap: wrap; gap: .6rem; }
.downloads a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; font: 700 .78rem/1 var(--font-body); color: var(--blue); text-decoration: none; transition: border-color .25s, transform .25s var(--ease-spring); }
.downloads a:hover { border-color: var(--blue); transform: translateY(-2px); }
.covers { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.covers .slot { min-height: 2.2rem; }

/* ---------- about: what is on this site ---------- */
.onsite { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.onsite a { display: grid; gap: .5rem; padding: 1.5rem; background: var(--paper); text-decoration: none; color: inherit; transition: background .25s; }
.onsite a:hover { background: #edf4f9; }
.onsite strong { display: flex; align-items: center; justify-content: space-between; font: 600 1.45rem/1 var(--font-display); color: var(--ink); }
.onsite strong .ic { color: var(--light); transition: transform .3s var(--ease-spring); } .onsite a:hover .ic { transform: translate(3px, -3px); }
.onsite span { font-size: .92rem; line-height: 1.5; color: var(--muted); }

/* ---------- team: featured founder + off-state grid ---------- */
.founder-feature { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 800px) { .founder-feature { grid-template-columns: 1fr; } }
.founder-feature .person__photo { border-radius: 6px; aspect-ratio: 4 / 4.6; }
/* 2026-10-03: team page, Amira's layout for everyone, same photo size, equal spacing */
.team-list { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.team-list .founder-feature { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.team-list .founder-feature .person__photo { width: 100%; }
@media (max-width: 800px) { .team-list .founder-feature { grid-template-columns: 1fr; gap: 1.5rem; } }
.quote { margin: 1.6rem 0 0; padding-left: 1.2rem; border-left: 3px solid var(--light); }

/* ---------- partners / advisors off-states ---------- */
.walls { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.walls > div { aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--paper); }
.walls img { max-width: 70%; max-height: 60%; opacity: 0; animation: lc-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }

/* ---------- events ---------- */
.event { display: grid; gap: 1.4rem; grid-template-columns: 9rem 1fr auto; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { .event { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form__inline { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.cite { padding: 1rem 1.2rem; border-left: 3px solid var(--light); background: var(--cream); font-size: .95rem; line-height: 1.6; color: var(--body); }
.cite .ph, .cite .slot--inline { display: inline-block; min-width: 5rem; min-height: 1.2em; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; } .lc.is-flip, .flip-from, .toc a, .topic, .downloads a, .btn { transition: none !important; } .lc.is-new, .walls img { animation: none !important; opacity: 1; }
  .record__walk li { opacity: 1; transform: none; transition: none; }
}

/* ======================================================================================
   CHAPTERS — every section on a long (TOC) page is a full-screen stop with its own tone
   ====================================================================================== */
main { overflow-x: clip; overflow-clip-margin: 0; }   /* the chapter bands extend past the viewport; clip (not hidden) keeps sticky alive and stops sideways scroll */
.longform .sec { position: relative; z-index: 0; min-height: calc(100vh - var(--header-h)); display: grid; align-content: center; padding: clamp(4rem, 8vw, 7rem) 0; background: transparent; }
.longform .sec::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -2; background: var(--tone, var(--paper)); }
.longform .sec--paper { --tone: var(--paper); } .longform .sec--cream { --tone: var(--cream); }
.longform .sec--sea { --tone: linear-gradient(180deg, var(--night) 0%, var(--navy) 60%, var(--night) 100%); color: var(--paper); }
.sec__current { position: absolute; right: -8%; top: 8%; width: 46%; height: auto; fill: var(--sea-2); opacity: .14; pointer-events: none; z-index: -1; animation: drift 46s ease-in-out infinite alternate; }
/* the ghost numeral: big, gold, faint, drifting with the scroll where the browser can */
.longform .sec__head { position: relative; padding-top: 3.5rem; }
.longform .sec__title { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.longform .sec__title::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: 1.3rem; background: var(--light); box-shadow: 0 0 16px rgba(251, 181, 42, .55); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .35s; }
.longform .reveal.is-in .sec__title::after { transform: scaleX(1); }
.longform .sec__body { font-size: 1.12rem; line-height: 1.7; }
.longform .sec__inner { align-items: center; }
/* sea chapters: light type, light fields */
.sec--sea .sec__title, .sec--sea .vm__big { color: var(--paper); }
.sec--sea .sec__body { color: #bfd0df; } .sec--sea .sec__body strong { color: var(--paper); }
.sec--sea .note { color: var(--mist); }
.sec--sea .slot { border-color: rgba(219, 232, 242, .35); background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(219, 232, 242, .07) 8px 9px); } .sec--sea .slot__label { color: var(--mist); }
.sec--sea .btn--primary { background: var(--light); color: var(--ink); } .sec--sea .btn--primary:hover { background: var(--paper); }
.sec--sea .btn--ghost, .sec--sea .btn--ghost-blue { border-color: rgba(219, 232, 242, .5); color: var(--paper); } .sec--sea .btn--ghost:hover, .sec--sea .btn--ghost-blue:hover { border-color: var(--light); color: var(--light); }
.sec--sea .form input, .sec--sea .form select, .sec--sea .form textarea { border-bottom-color: rgba(219, 232, 242, .5); color: var(--paper); } .sec--sea .form select option { color: var(--body); }
.sec--sea .form__row label { color: var(--mist); }
.sec--sea .newsletter__form--inline input { background: rgba(255, 253, 249, .08); border-color: rgba(219, 232, 242, .3); color: var(--paper); }
.sec--sea .tags span { border-color: rgba(219, 232, 242, .3); color: var(--pale); }
.sec--sea .mail, .sec--sea .sec__body a:not(.btn) { color: var(--light); }
.sec--sea .onsite, .sec--sea .asks, .sec--sea .findings { background: rgba(219, 232, 242, .14); border-color: rgba(219, 232, 242, .14); }
.sec--sea .onsite a, .sec--sea .ask, .sec--sea .finding { background: rgba(5, 16, 45, .6); border-color: transparent; }
.sec--sea .onsite strong, .sec--sea .ask strong { color: var(--paper); } .sec--sea .onsite span { color: #bfd0df; } .sec--sea .onsite a:hover { background: rgba(11, 55, 121, .6); }
.sec--sea .covers .slot, .sec--sea .finding .slot { border-color: rgba(219, 232, 242, .35); }
.sec--sea .downloads a { border-color: rgba(219, 232, 242, .4); color: var(--paper); }
.sec--sea .tl__beam { background: rgba(219, 232, 242, .2); } .sec--sea .tl__dot { background: var(--night); border-color: rgba(219, 232, 242, .4); } .sec--sea .tl__step h3 { color: var(--paper); }
/* the rail becomes a plate so it reads on every tone */
.toc { z-index: 5; background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--line); border-radius: 6px; padding: 2rem 1.2rem 1.6rem; box-shadow: 0 24px 50px -36px rgba(6, 38, 94, .5); }
.toc::before { border-radius: 6px 0 0 6px; }
@media (max-width: 1100px) { .longform .sec { min-height: 0; } .toc { background: transparent; border: 0; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .longform .sec__title::after { transform: none; transition: none; } .sec__current { animation: none; } }

/* ---------- research: search block, organised ---------- */
.lib__tools--page { margin-top: .5rem; }
.lib__search--big { max-width: none; flex: 1 1 100%; }
.cats { margin-top: 2.6rem; }
.cats .lib__filter > span { display: block; margin-bottom: .8rem; }
.topics { margin-top: 0; gap: .8rem; }
.topic { padding: 1.1rem 1.2rem; font-size: .95rem; }
.filters { margin-top: 2.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); overflow: hidden; }
.filters__head { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.4rem; border-bottom: 1px solid var(--line); background: var(--cream); font: 700 .64rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.filters__clear { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 700 .66rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; }
.filters__clear:hover { color: var(--blue); border-color: var(--blue); }
.filters__row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .6rem 1.2rem; align-items: start; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.filters__row:last-child { border-bottom: 0; }
.filters__row > span { padding-top: .55rem; font: 700 .62rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
@media (max-width: 640px) { .filters__row { grid-template-columns: 1fr; } .filters__row > span { padding-top: 0; } }
.chips { gap: .45rem; }
.chip--more { border-style: dashed; color: var(--blue); }
.lib__results { display: flex; align-items: center; justify-content: space-between; margin: 2.2rem 0 0; }
.lib__results .lib__count--page { margin: 0; }
.lib__grid--page { margin-top: 1.2rem; }

/* chapter kicker: a small label above the title */
.sec__kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; font: 700 .68rem/1 var(--font-body); letter-spacing: .19em; text-transform: uppercase; color: var(--blue); }
.sec__kicker::before { content: ""; width: 2rem; height: 1px; background: var(--light); }
.sec--sea .sec__kicker { color: var(--light); }

/* ======================================================================================
   CHAPTER LOOK ON EVERY PAGE: short pages get the same bands, ghost numerals and gold rules as the long ones,
   at a lighter height (the .longform rules above still win on the long pages)
   ====================================================================================== */
.sec { position: relative; z-index: 0; min-height: 58vh; display: grid; align-content: center; padding: clamp(4.5rem, 9vw, 8rem) var(--gutter); background: transparent; }
.sec::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -2; background: var(--tone, var(--paper)); }
.sec--paper { --tone: var(--paper); } .sec--cream { --tone: var(--cream); }
.sec--sea { --tone: linear-gradient(180deg, var(--night) 0%, var(--navy) 60%, var(--night) 100%); color: var(--paper); }
.sec__inner { width: 100%; align-items: center; }
.sec__head { position: relative; padding-top: 3.5rem; }
.sec__title { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.sec__title::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: 1.3rem; background: var(--light); box-shadow: 0 0 16px rgba(251, 181, 42, .55); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .35s; }
.reveal.is-in .sec__title::after { transform: scaleX(1); }
.sec__body { font-size: 1.12rem; line-height: 1.7; }
.sec--sea .sec__body a:not(.btn), .sec--sea .mail { color: var(--light); }
.sec--sea .routes, .sec--sea .kit, .sec--sea .groups { color: var(--body); }
/* the anatomy of a case study: five beats, reusing the case-study chapter names */
.anat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: anat; }
.anat li { position: relative; padding: 1.4rem 1.2rem 1.3rem; border: 1px solid rgba(219, 232, 242, .18); border-radius: 8px; background: rgba(5, 16, 45, .55); counter-increment: anat; }
.anat li::before { content: "0" counter(anat); display: block; margin-bottom: .9rem; font: 600 .8rem/1 var(--font-display); letter-spacing: .06em; color: var(--light); }
.anat strong { display: block; font: 600 1.35rem/1.05 var(--font-display); color: var(--paper); }
.anat span { display: block; margin-top: .5rem; font-size: .9rem; line-height: 1.5; color: #bfd0df; }
.anat li + li::after { content: ""; position: absolute; left: -1rem; top: 50%; width: 1rem; height: 1px; background: rgba(251, 181, 42, .5); }
@media (max-width: 1000px) { .anat { grid-template-columns: repeat(2, 1fr); } .anat li + li::after { display: none; } }
@media (max-width: 600px) { .anat { grid-template-columns: 1fr; } .sec { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .sec__title::after { transform: none; transition: none; } }

/* 2026-10-04: a click in the "On this page" rail stops where the one-scroll flip stops (section top just under the header) */
@media (min-width: 1101px) { .longform .sec { scroll-margin-top: var(--header-h); } }