/* ==========================================================================
   AMSP FASCIA — Draft 04.48 (2026-09-11)

   Single consolidated stylesheet for /fascia/. Replaces the stacked
   04.45c / 04.46 / 04.47 layers, which had accumulated three generations of
   interaction CSS: a definition dialog, a hover-primed definition card with
   its own lemon cluster and lead note, and then the 04.47 contract-and-reveal
   title. Only one interaction ships now:

       REST  →  OPEN  →  CLOSE

   The governing change is COLOUR, not SIZE. The giant word never shrinks, so
   nothing needs a negative margin to sit under it, and nothing overlaps.
   Released lemons render behind the reading column and can never cover text
   or controls.
   ========================================================================== */

/* --- page shell ---------------------------------------------------------- */
.fascia-page{background:#070807;color:#f3eee4}
.fascia-page .amsp-nav{background:#080908;border-bottom-color:rgba(255,255,255,.16)}
.fascia-page .amsp-title-menu summary,.fascia-page .nav-radio{color:#f3eee4}
.fascia-page .nav-radio[aria-current="page"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.fascia-identity{
  position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;
  min-height:calc(100svh - 58px);background:#070807;color:#f3eee4;border-bottom:0
}
.fascia-identity::after{
  content:"";position:absolute;z-index:-3;left:0;right:0;bottom:0;height:min(22svh,220px);
  background:linear-gradient(to top,rgba(4,33,18,.56),rgba(4,24,14,.26) 48%,transparent);pointer-events:none
}
.fascia-grid{
  position:absolute;z-index:-2;inset:0;opacity:.18;
  background-image:linear-gradient(to right,#292b27 1px,transparent 1px),linear-gradient(to bottom,#292b27 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%)
}
.fascia-identity__in{
  position:relative;z-index:2;min-height:inherit;display:grid;align-content:center;
  gap:clamp(18px,2.5vw,32px);padding-top:clamp(58px,8vh,96px);padding-bottom:clamp(96px,14vh,160px)
}
.fascia-identity__locator{margin:0;font:600 9px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#aaa89f}
.fascia-identity__return{
  width:max-content;min-height:38px;display:inline-flex;align-items:center;color:#f3eee4;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);font:600 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase
}
.fascia-identity__return:hover,.fascia-identity__return:focus-visible{color:var(--signal);border-color:var(--signal)}
/* The title block owns its own stacking context (z-index + isolation). That is
   what makes the lemon field's z-index:-1 safe: a negative-z child paints above
   its stacking context's own background and below the block's in-flow content,
   so the lemons sit behind the reading layer but in front of the black FASCIA
   section and the grid (z-index:-2). isolation:isolate keeps that true even if
   the z-index below is ever changed. */
.fascia-identity__title-block{position:relative;isolation:isolate;z-index:3;max-width:1180px}
.fascia-identity__role{margin:0 0 14px;color:var(--signal);font:600 10px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase}

/* --- REST: the giant word ------------------------------------------------ */
.fascia-title-stage{position:relative;display:grid;justify-items:start;gap:clamp(10px,1.4vw,16px)}
.fascia-identity h1[data-fascia-title]{
  width:max-content;max-width:100%;margin:0;cursor:pointer;
  font-family:var(--display);font-size:clamp(86px,18vw,260px);font-weight:500;line-height:.78;letter-spacing:-.07em;
  color:#f3eee4;text-decoration:none;
  transition:color .24s ease,text-shadow .24s ease
}
.fascia-identity h1[data-fascia-title]:hover{
  color:var(--signal);text-shadow:0 0 28px rgba(74,170,93,.16),0 0 46px rgba(255,225,0,.08)
}

/* --- controls ------------------------------------------------------------ */
.fascia-disclosure,.fascia-inline-close{
  appearance:none;border:0;background:transparent;color:var(--signal);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;width:max-content;
  padding:10px 14px 10px 0;font:600 clamp(11px,1.05vw,13px)/1.3 var(--mono);
  letter-spacing:.11em;text-transform:uppercase;text-align:left
}
.fascia-disclosure{border-bottom:1px solid rgba(255,225,0,.55)}
.fascia-inline-close{margin-top:clamp(26px,3vw,40px);border-top:1px solid rgba(255,225,0,.42);padding-top:14px}
.fascia-disclosure:hover,.fascia-disclosure:focus-visible,
.fascia-inline-close:hover,.fascia-inline-close:focus-visible{color:#fff4a3}
.fascia-disclosure:focus-visible,.fascia-inline-close:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* --- OPEN: the explanation ---------------------------------------------- */
.fascia-definition-inline{
  position:relative;width:min(780px,92%);margin-top:clamp(28px,3.6vw,52px);color:#eee9df
}
.fascia-definition-inline[hidden]{display:none}
.fascia-definition-inline__heading{
  margin:0 0 clamp(20px,2.4vw,30px);color:var(--signal);
  font:600 clamp(15px,1.9vw,25px)/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase
}
.fascia-definition-inline__term{display:grid;gap:10px}
.fascia-definition-inline__rule{display:block;width:clamp(72px,8vw,108px);height:1px;background:rgba(255,225,0,.6)}
.fascia-definition-inline strong{color:var(--signal);font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.fascia-definition-inline :where(p){max-width:40em;margin:0;font:400 clamp(15px,1.3vw,19px)/1.62 var(--body);color:#e9e4da}
.fascia-definition-inline__body{
  display:grid;gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,3.2vw,42px);
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid rgba(255,255,255,.2)
}
.fascia-definition-inline__lead{
  max-width:16em;font-family:var(--display);
  font-size:clamp(26px,3.1vw,44px);line-height:1.06;color:#f3eee4
}
.fascia-definition-inline__principle{font-family:var(--display);font-style:italic;color:#d8d2c8}

.fascia-identity__deck{
  max-width:760px;margin:clamp(28px,3.4vw,44px) 0 0;font-family:var(--display);
  font-size:clamp(20px,2.1vw,32px);line-height:1.2;font-style:italic;color:#d8d2c8;
  transition:opacity .24s ease
}

/* 04.64e's boxed pronunciation cards were retired in 04.64g. The section moved
   below the opening and lost its native-control chrome; the replacement rules
   are under "04.64g — pronunciation" further down. */

/* OPEN state: colour change on the word, no size change. */
body[data-fascia="open"] .fascia-identity h1[data-fascia-title]{
  color:var(--signal);text-shadow:0 0 28px rgba(74,170,93,.14),0 0 46px rgba(255,225,0,.07)
}
body[data-fascia="open"] .fascia-identity__in{align-content:start}
body[data-fascia="open"] .fascia-identity__deck{opacity:.5}

/* --- lower FASCIA material ---------------------------------------------- */
.fascia-entry{display:grid;gap:clamp(20px,2.6vw,34px);margin-top:clamp(12px,1.6vw,22px)}
.fascia-routes{
  display:flex;flex-wrap:wrap;gap:10px 26px;max-width:980px;color:rgba(243,238,228,.66);
  font:600 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase
}
.fascia-enter{
  appearance:none;background:transparent;border:0;border-bottom:1px solid rgba(255,225,0,.5);
  width:max-content;min-height:44px;display:inline-flex;align-items:center;padding:0;cursor:pointer;
  color:var(--signal);text-decoration:none;font:600 clamp(11px,1.05vw,13px)/1.3 var(--mono);
  letter-spacing:.12em;text-transform:uppercase
}
.fascia-enter:hover,.fascia-enter:focus-visible{color:#fff4a3;border-color:var(--signal)}
.fascia-enter:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* --- lemon field --------------------------------------------------------
   z-index:-1 inside the title block: the released lemons paint behind the
   reading column, so they cannot cover the definition, the controls or the
   route links at any viewport. Travel is upward and outward only. */
.fascia-lemon-field{
  position:absolute;z-index:-1;left:-4vw;right:-4vw;top:clamp(24px,6vw,80px);
  height:clamp(110px,18vw,260px);pointer-events:none;overflow:visible
}
.fascia-lemon-field img{
  position:absolute;left:var(--ox);top:var(--oy);width:clamp(40px,4.6vw,74px);height:auto;
  opacity:0;filter:brightness(.97) drop-shadow(0 0 8px rgba(255,225,0,.12));
  transform:translate(-50%,-50%) scale(.34);transform-origin:50% 50%;
  transition:opacity 200ms ease var(--d),transform 760ms cubic-bezier(.18,.72,.2,1) var(--d)
}
.fascia-lemon-field img:nth-child(4){width:clamp(50px,5.6vw,92px)}
body[data-fascia="open"] .fascia-lemon-field img{
  opacity:.9;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(var(--s))
}

/* --- lead lemon ---------------------------------------------------------- */
.fascia-orbit{position:absolute;z-index:1;inset:22% 2% 10% 58%;pointer-events:none}
.fascia-orbit img{
  position:absolute;left:8%;top:16%;width:clamp(30px,3.3vw,52px);height:auto;
  filter:brightness(.94) drop-shadow(0 0 8px rgba(255,225,0,.18))
}
@media(prefers-reduced-motion:no-preference){
  .fascia-orbit img{animation:fascia-orbit-x 15s ease-in-out infinite alternate,fascia-orbit-y 15s ease-in-out -3.75s infinite alternate,fascia-orbit-depth 15s ease-in-out -3.75s infinite alternate}
}
@keyframes fascia-orbit-x{from{left:8%}to{left:84%}}
@keyframes fascia-orbit-y{from{top:12%}to{top:78%}}
@keyframes fascia-orbit-depth{from{scale:.88;filter:brightness(.92) drop-shadow(0 0 4px rgba(255,225,0,.12))}to{scale:1.08;filter:brightness(1.07) drop-shadow(0 0 12px rgba(255,225,0,.25))}}
body[data-fascia="open"] .fascia-orbit img{animation-play-state:paused}

/* --- notes / glossary / footer ------------------------------------------ */
.fascia-notes{background:linear-gradient(to bottom,#0a2115 0%,#07180f 38%,#050c08 72%,#070807 100%);color:#e8e3d9;border-bottom:0}
.fascia-notes__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.8fr) minmax(240px,.7fr);
  gap:clamp(34px,6vw,90px);padding-top:clamp(54px,7vw,92px);padding-bottom:clamp(56px,7vw,96px)
}
.fascia-notes .eyebrow{color:var(--signal)}
.fascia-principle{max-width:20em;margin:0;font-family:var(--display);font-size:clamp(26px,3vw,44px);line-height:1.05;font-style:italic}
.fascia-glossary summary{
  min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;
  font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#e8e3d9;list-style:none
}
.fascia-glossary summary::-webkit-details-marker{display:none}
.fascia-glossary summary::marker{content:""}
.fascia-glossary summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.fascia-glossary dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:14px 0 0;font-size:11px;line-height:1.5}
.fascia-glossary dt{font:600 9px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.fascia-glossary dd{margin:0;color:#aaa89f}
.fascia-status{font-size:12px;line-height:1.6;color:#aaa89f}
.fascia-status p:last-child{margin:0}
.fascia-footer{background:transparent;color:#9d9a93}
.fascia-footer .wrap{min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:26px;padding-bottom:26px}
.fascia-footer p{max-width:760px;margin:0;font-family:var(--display);font-size:11px;font-style:italic}
.fascia-footer img{display:block;width:118px;height:auto}

/* --- Notion layer (unchanged behaviour) --------------------------------- */
html.fascia-layer-open{overflow:hidden}
.fascia-dialog{padding:0;border:0;max-width:none;max-height:none;height:100dvh;margin:0 0 0 auto;box-shadow:-18px 0 50px rgba(0,0,0,.38)}
.fascia-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(2px)}
.fascia-dialog--notion{width:min(64vw,1080px);background:#090b09;color:#f3eee4}
.fascia-dialog__panel{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.fascia-dialog__head{
  min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 14px;
  border-bottom:1px solid rgba(127,127,127,.28);font:600 9px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.fascia-dialog__head a{color:inherit}
.fascia-dialog__return{
  appearance:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;
  border:1px solid currentColor;background:transparent;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;cursor:pointer
}
.fascia-dialog__return:hover,.fascia-dialog__return:focus-visible{background:var(--signal);color:#0a0a0a;border-color:var(--signal)}
.fascia-notion-frame{position:relative;min-height:0;height:100%;overflow:hidden;overscroll-behavior:contain;background:#090b09}
.fascia-notion-frame iframe{display:block;width:100%;height:100%;border:0;position:relative;z-index:1;opacity:0;background:#fff;transition:opacity .18s ease}
.fascia-notion-frame.is-loaded iframe{opacity:1}
.fascia-notion-frame.is-loaded .fascia-notion-loading{display:none}
.fascia-notion-loading{
  position:absolute;z-index:0;inset:0;display:grid;place-items:center;padding:30px;color:#aaa89f;background:#090b09;
  font:600 9px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase
}
.fascia-notion-loading span{padding-top:44px;background:radial-gradient(circle at 50% 12px,var(--signal) 0 4px,transparent 5px) no-repeat}
.fascia-notion-fallback{
  position:absolute;z-index:2;left:16px;right:16px;bottom:16px;margin:0;padding:10px 12px;
  border:1px solid rgba(255,225,0,.28);background:rgba(9,11,9,.96);color:#d8d2c8;font:500 10px/1.45 var(--mono)
}
.fascia-notion-fallback a{color:var(--signal)}

/* --- responsive --------------------------------------------------------- */
@media(max-width:820px){
  .fascia-orbit{inset:32% -2% 10% 44%}
  .fascia-notes__grid{grid-template-columns:1fr 1fr}
  .fascia-status{grid-column:1 / -1}
  .fascia-definition-inline{width:min(780px,100%)}
  .fascia-dialog--notion{width:92vw}
}
@media(max-width:620px){
  .fascia-identity{min-height:calc(100svh - 52px)}
  .fascia-identity__in{align-content:start;padding-top:52px;padding-bottom:112px}
  .fascia-identity h1[data-fascia-title]{font-size:clamp(72px,22vw,112px)}
  .fascia-orbit{inset:auto -10% 6% 30%;height:120px}
  .fascia-orbit img{width:28px}
  .fascia-routes{gap:9px 18px;max-width:30em}
  .fascia-notes__grid{grid-template-columns:1fr;gap:34px}
  .fascia-status{grid-column:auto}
  .fascia-footer .wrap{align-items:flex-end}
  .fascia-footer img{width:96px}
  .fascia-definition-inline{width:100%}
  .fascia-lemon-field{left:0;right:0;height:clamp(96px,26vw,170px)}
  .fascia-lemon-field img{width:clamp(30px,10vw,52px)}
  .fascia-lemon-field img:nth-child(4){width:clamp(40px,13vw,64px)}
  .fascia-lemon-field img:nth-child(n+7){display:none}
  .fascia-dialog--notion{width:100vw}
  .fascia-dialog__head{min-height:54px;padding:6px 10px;flex-wrap:wrap}
  .fascia-dialog__head>span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .fascia-identity h1[data-fascia-title],.fascia-identity__deck,.fascia-lemon-field img,.fascia-notion-frame iframe{transition:none}
  .fascia-orbit img{left:auto;right:5%;top:auto;bottom:7%;scale:1;filter:none;animation:none}
}

/* =============================================================================
   04.64g — FASCIA opening, pronunciation, and contained research
   ========================================================================== */

/* --- the asymmetric opening ---------------------------------------------
   Source order is the mobile order: title, metadata, connective-field label,
   proposition, doorway. Above 900px grid-template-areas lifts the metadata
   into a narrow left column and the word into a wide right one — roughly
   30/70. The columns are declared in fr units against the same gap, so the
   break happens before they can collide rather than at a width guessed from
   the title's rendered size. */

@media (min-width: 900px) {
  .fascia-identity__in {
    grid-template-columns: minmax(0, .3fr) minmax(0, .7fr);
    grid-template-areas:
      "meta  title"
      "deck  door";
    column-gap: clamp(32px, 5vw, 88px);
    row-gap: clamp(40px, 7vh, 96px);
    align-content: center;
  }
  .fascia-open__title { grid-area: title; align-self: center; }
  .fascia-open__meta  { grid-area: meta;  align-self: center; }
  .fascia-open__deck  { grid-area: deck;  align-self: start; margin-top: 0; }
  .fascia-open__door  { grid-area: door;  align-self: start; justify-self: start; margin-top: 0; }
}

/* The word stays the loudest thing on the page. It is not allowed to settle
   into a normal page heading at any width — only the leading and the tracking
   tighten as it grows. */
.fascia-identity h1[data-fascia-title] { font-size: clamp(76px, 16vw, 300px); }

@media (min-width: 900px) {
  .fascia-identity h1[data-fascia-title] { font-size: clamp(120px, 13.5vw, 300px); }
}

.fascia-open__meta { display: grid; justify-items: start; gap: 12px; align-content: center; }
.fascia-open__meta .fascia-identity__role { margin: 4px 0 0; }

/* --- pronunciation, quieter ---------------------------------------------
   Was a pair of bordered cards with 40px of native audio chrome inside the
   opening. It is now a two-row list further down: a small circular play
   control, the written form, the IPA, and the reference label. Same two
   pronunciations, same recordings, same refusal to pick one. */

.fascia-say {
  background: #0b0c0b;
  color: #ebe7dc;
  border-top: 1px solid rgba(235, 231, 220, .14);
}

.fascia-say__in {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding-top: clamp(36px, 6vh, 72px);
  padding-bottom: clamp(36px, 6vh, 72px);
}

.fascia-say__eyebrow {
  margin: 0;
  font: 600 9px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(235, 231, 220, .5);
}

.fascia-say__heading {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.2;
  color: #f3eee4;
}

.fascia-say__note {
  margin: 8px 0 0;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .04em;
  color: rgba(235, 231, 220, .58);
}

.fascia-say__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.fascia-say__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: clamp(13px, 1.8vw, 18px) 0;
  border-top: 1px solid rgba(235, 231, 220, .16);
}

.fascia-say__row:last-child { border-bottom: 1px solid rgba(235, 231, 220, .16); }

.fascia-say__play {
  appearance: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(235, 231, 220, .45);
  border-radius: 50%;
  background: transparent;
  color: #f3eee4;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.fascia-say__glyph {
  width: 0; height: 0;
  margin-left: 2px;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* Playing state: the triangle becomes a pause bar pair, so the control reports
   what it will do next rather than only what it did. */
.fascia-say__play[data-playing="true"] .fascia-say__glyph {
  width: 9px; height: 10px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(to right,
    currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}

.fascia-say__play:hover,
.fascia-say__play:focus-visible { background: var(--signal); color: #0b0c0b; border-color: var(--signal); }
.fascia-say__play:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.fascia-say__written {
  font: 400 clamp(20px, 2.4vw, 30px)/1.1 var(--display);
  letter-spacing: -.015em;
  color: #f3eee4;
}

.fascia-say__ipa {
  grid-column: 2;
  font: 500 clamp(12px, 1.2vw, 14px)/1.4 var(--mono);
  letter-spacing: .03em;
  color: var(--signal);
}

.fascia-say__ref {
  grid-column: 3; grid-row: 1;
  font: 600 9px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235, 231, 220, .55);
}

/* Shown only when the buttons are not: no-JS, or audio that will not play. */
.fascia-say__fallback {
  grid-column: 1 / -1;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
}

.fascia-say__row:has(.fascia-say__play:not([hidden])) .fascia-say__fallback { display: none; }

.fascia-say__source {
  margin: 0;
  font: 400 9px/1.55 var(--mono);
  letter-spacing: .04em;
  color: rgba(235, 231, 220, .55);
}

.fascia-say__source a { color: var(--signal); }

@media (min-width: 900px) {
  .fascia-say__in { grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); column-gap: clamp(32px, 5vw, 88px); }
  .fascia-say__label { grid-column: 1; }
  .fascia-say__list { grid-column: 2; grid-row: 1; }
  .fascia-say__source { grid-column: 2; }
}

/* --- contained research -------------------------------------------------- */

.fascia-research { background: #0b0c0b; color: #ebe7dc; }
.fascia-research__in { padding-top: clamp(8px, 2vh, 20px); padding-bottom: clamp(44px, 7vh, 90px); }

.fascia-research__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 2vw, 18px) 0;
  border-top: 1px solid rgba(235, 231, 220, .16);
  border-bottom: 1px solid rgba(235, 231, 220, .16);
  font: 600 11px/1.4 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #f3eee4;
}

.fascia-research__summary::-webkit-details-marker { display: none; }
.fascia-research__summary::marker { content: ""; }
.fascia-research__summary::after { content: "+"; margin-left: auto; font-size: 15px; line-height: 1; }
.fascia-research__drawer[open] > .fascia-research__summary::after { content: "\2212"; }
.fascia-research__summary:hover { color: var(--signal); }
.fascia-research__summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.fascia-research__sub { color: rgba(235, 231, 220, .5); font-weight: 400; }

.fascia-research__panel { padding: clamp(24px, 4vw, 40px) 0 0; max-width: 76ch; }

.fascia-research__standfirst {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.42;
  color: #f3eee4;
}

.fascia-research__terms {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  margin: clamp(24px, 3.4vw, 36px) 0 0;
}

.fascia-research__term { border-left: 2px solid var(--signal); padding-left: clamp(14px, 2vw, 20px); }

.fascia-research__term-name {
  margin: 0 0 7px;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
}

.fascia-research__term p {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.62;
  color: rgba(235, 231, 220, .88);
}

.fascia-research__sub-heading {
  margin: clamp(28px, 4vw, 42px) 0 clamp(12px, 1.6vw, 16px);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(235, 231, 220, .55);
}

.fascia-research__timeline { list-style: none; margin: 0; padding: 0; display: grid; }

.fascia-research__timeline li {
  display: grid;
  grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr);
  gap: 4px 18px;
  padding: 11px 0;
  border-top: 1px solid rgba(235, 231, 220, .14);
}

.fascia-research__timeline li:last-child { border-bottom: 1px solid rgba(235, 231, 220, .14); }

.fascia-research__when {
  font: 600 10px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
}

.fascia-research__what {
  font-family: var(--body);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.55;
  color: rgba(235, 231, 220, .86);
}

.fascia-research__source,
.fascia-research__caveat {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  font: 400 10px/1.65 var(--mono);
  letter-spacing: .04em;
  color: rgba(235, 231, 220, .58);
}

.fascia-research__caveat { margin-top: 12px; }

@media (max-width: 560px) {
  .fascia-say__row { grid-template-columns: auto minmax(0, 1fr); }
  .fascia-say__ref { grid-column: 2; grid-row: 3; }
  .fascia-research__timeline li { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fascia-say__play { transition: none; }
}

/* 04.64j — Current-research doorway. The route words remain quiet context;
   the Notion layer receives one clear, substantial action at the far edge. */
.fascia-enter{
  justify-self:end;
  min-height:58px;
  padding:15px clamp(18px,2vw,28px);
  border:1px solid var(--signal);
  background:rgba(240,226,15,.04);
  color:var(--signal);
  font-size:clamp(12px,1.15vw,15px);
  line-height:1.35;
  text-align:center;
  transition:background .16s ease,color .16s ease;
}
.fascia-enter:hover,
.fascia-enter:focus-visible{
  border-color:var(--signal);
  background:var(--signal);
  color:#070807;
}

@media(min-width:900px){
  .fascia-open__door{width:100%;justify-self:stretch}
}

@media(max-width:620px){
  .fascia-enter{
    justify-self:stretch;
    justify-content:center;
    width:100%;
    min-height:56px;
  }
}

@media(prefers-reduced-motion:reduce){
  .fascia-enter{transition:none}
}

/* =============================================================================
   04.64m-p2 — shorter opening + Lemon Juice ecosystem switchboard
   ============================================================================= */

/* Bring pronunciation into view sooner without shrinking the FASCIA word or
   changing the open/close contract. Content can still grow naturally when the
   definition is open. */
.fascia-identity{min-height:clamp(540px,68svh,720px)}
.fascia-identity__in{
  padding-top:clamp(46px,6vh,70px);
  padding-bottom:clamp(58px,8vh,88px);
}
.fascia-say__in{
  padding-top:clamp(28px,4vh,48px);
  padding-bottom:clamp(30px,4.5vh,52px);
}
@media(min-width:900px){
  .fascia-identity__in{row-gap:clamp(28px,4.5vh,58px)}
}
@media(max-width:620px){
  .fascia-identity{min-height:620px}
  .fascia-identity__in{padding-top:38px;padding-bottom:58px}
}

.fascia-switchboard{
  position:relative;
  overflow:hidden;
  background:#0b0c0b;
  color:#ebe7dc;
  border-top:1px solid rgba(235,231,220,.14);
  border-bottom:1px solid rgba(235,231,220,.14);
}
.fascia-switchboard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background-image:
    linear-gradient(to right,#3b3d37 1px,transparent 1px),
    linear-gradient(to bottom,#3b3d37 1px,transparent 1px);
  background-size:72px 72px;
}
.fascia-switchboard__in{
  position:relative;
  padding-top:clamp(46px,6vw,82px);
  padding-bottom:clamp(52px,7vw,94px);
}
.fascia-switchboard__head{
  display:grid;
  grid-template-columns:minmax(180px,.38fr) minmax(0,1fr);
  gap:10px clamp(28px,5vw,76px);
  align-items:end;
  margin-bottom:clamp(30px,4vw,52px);
}
.fascia-switchboard__head .eyebrow{
  grid-row:1 / span 2;
  align-self:start;
  margin:8px 0 0;
  color:var(--signal);
}
.fascia-switchboard__head h2{
  margin:0;
  font:500 clamp(42px,5.2vw,78px)/.98 var(--display);
  letter-spacing:-.035em;
  text-wrap:balance;
}
.fascia-switchboard__head>p:last-child{
  max-width:56ch;
  margin:6px 0 0;
  color:rgba(235,231,220,.68);
  font:400 clamp(14px,1.15vw,17px)/1.55 var(--body);
}
.fascia-switchboard__layout{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);
  gap:clamp(32px,6vw,92px);
  align-items:start;
}
.fascia-switchboard__images{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.8vw,24px);
}
.fascia-switchboard__images figure{margin:0;min-width:0}
.fascia-switchboard__images figure:nth-child(2){margin-top:clamp(42px,7vw,96px)}
.fascia-switchboard__images img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(240,226,15,.62);
  background:#fff;
}
.fascia-switchboard__images figcaption{
  margin-top:9px;
  color:rgba(235,231,220,.6);
  font:600 10px/1.45 var(--mono);
  letter-spacing:.075em;
  text-transform:uppercase;
}
.fascia-switchboard__panel{
  position:relative;
  display:grid;
  gap:10px;
  padding:clamp(16px,2.3vw,28px);
  border:1px solid rgba(240,226,15,.62);
  background:rgba(4,5,4,.88);
}
.fascia-switchboard__panel::before{
  content:"LINES OPEN";
  display:block;
  margin:0 0 4px;
  color:rgba(235,231,220,.48);
  font:600 9px/1.4 var(--mono);
  letter-spacing:.16em;
}
.fascia-switchboard__panel a{
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 30px;
  gap:12px;
  align-items:center;
  min-height:62px;
  padding:9px 12px 9px 8px;
  border:1px solid rgba(235,231,220,.24);
  background:#101210;
  color:#ebe7dc;
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.fascia-switchboard__panel a::after{
  content:"";
  position:absolute;
  left:-17px;
  top:50%;
  width:16px;
  border-top:1px solid rgba(240,226,15,.72);
}
.fascia-switchboard__jack{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--signal);
  border-radius:50%;
  color:var(--signal);
  font:600 10px/1 var(--mono);
}
.fascia-switchboard__panel a>span:nth-child(2){display:grid;gap:2px}
.fascia-switchboard__panel strong{
  font:600 clamp(12px,1.15vw,15px)/1.3 var(--mono);
  letter-spacing:.075em;
  text-transform:uppercase;
}
.fascia-switchboard__panel small{
  color:rgba(235,231,220,.58);
  font:400 10px/1.4 var(--mono);
  letter-spacing:.04em;
}
.fascia-switchboard__lemon{
  justify-self:end;
  font-size:20px;
  line-height:1;
  transform:rotate(-8deg);
}
.fascia-switchboard__panel a:hover{
  border-color:var(--signal);
  background:#181a16;
  transform:translateX(4px);
}
.fascia-switchboard__panel a:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
}

@media(max-width:900px){
  .fascia-switchboard__head{grid-template-columns:1fr;gap:10px}
  .fascia-switchboard__head .eyebrow{grid-row:auto;margin:0}
  .fascia-switchboard__layout{grid-template-columns:1fr;gap:34px}
  .fascia-switchboard__images{width:min(100%,620px)}
}
@media(max-width:520px){
  .fascia-switchboard__images{gap:10px}
  .fascia-switchboard__images figure:nth-child(2){margin-top:32px}
  .fascia-switchboard__panel{padding:13px}
  .fascia-switchboard__panel a{grid-template-columns:38px minmax(0,1fr) 26px;gap:9px;min-height:60px}
  .fascia-switchboard__images figcaption{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .fascia-switchboard__panel a{transition:none}
}

/* =============================================================================
   04.64m-r2 — switchboard wayfinding + Letters footer
   ============================================================================= */

.fascia-switchboard-cue{
  position:relative;
  display:grid;
  place-items:center;
  min-height:clamp(150px,19vw,250px);
  overflow:hidden;
  background:#070807;
  color:var(--signal);
}
.fascia-switchboard-cue::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  pointer-events:none;
  background-image:
    linear-gradient(to right,#3b3d37 1px,transparent 1px),
    linear-gradient(to bottom,#3b3d37 1px,transparent 1px);
  background-size:72px 72px;
}
.fascia-switchboard-cue a{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(54px,1fr) auto;
  justify-items:center;
  min-width:210px;
  min-height:124px;
  padding:18px 24px 12px;
  color:var(--signal);
  font:600 clamp(11px,1vw,14px)/1.35 var(--mono);
  letter-spacing:.13em;
  text-decoration:none;
  text-transform:uppercase;
}
.fascia-switchboard-cue i{
  width:1px;
  height:100%;
  margin:9px 0 5px;
  background:currentColor;
  transform-origin:50% 0;
}
.fascia-switchboard-cue strong{font:400 26px/1 var(--mono)}
.fascia-switchboard-cue a:hover i{transform:scaleY(1.13)}
.fascia-switchboard-cue a:focus-visible{outline:3px solid var(--signal);outline-offset:5px}

.fascia-switchboard{scroll-margin-top:70px}
.fascia-switchboard__head h2{color:var(--signal)}

.fascia-footer .fascia-footer__in{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.9fr) auto;
  gap:clamp(26px,4vw,60px);
  align-items:start;
  min-height:0;
  padding-top:clamp(38px,5vw,64px);
  padding-bottom:clamp(34px,4vw,52px);
}
.fascia-footer__principle{padding-top:4px}
.fascia-footer__letters{display:grid;gap:8px}
.fascia-footer .fascia-footer__letters .eyebrow{
  margin:0;
  color:var(--signal);
  font:600 10px/1.35 var(--mono);
  font-style:normal;
  letter-spacing:.12em;
}
.fascia-footer .fascia-footer__letters>p:not(.eyebrow){
  max-width:42ch;
  color:#c7c4bb;
  font:400 13px/1.55 var(--body);
  font-style:normal;
}
.fascia-footer__letters a{
  width:max-content;
  max-width:100%;
  color:var(--signal);
  font:500 12px/1.45 var(--mono);
  overflow-wrap:anywhere;
  text-underline-offset:4px;
}
.fascia-footer__logo{justify-self:end}
.fascia-footer__credit{
  grid-column:1 / -1;
  max-width:none!important;
  padding-top:20px;
  border-top:1px solid rgba(235,231,220,.16);
  color:#9d9a93;
  font:400 10px/1.5 var(--mono)!important;
  font-style:normal!important;
  letter-spacing:.035em;
}
@media(max-width:820px){
  .fascia-footer .fascia-footer__in{grid-template-columns:1fr auto}
  .fascia-footer__letters{grid-column:1 / -1;grid-row:2}
  .fascia-footer__logo{grid-column:2;grid-row:1}
  .fascia-footer__credit{grid-row:3}
}
@media(max-width:520px){
  .fascia-switchboard-cue{min-height:150px}
  .fascia-switchboard-cue a{min-width:180px;min-height:116px;padding-inline:14px}
  .fascia-footer .fascia-footer__in{grid-template-columns:1fr;gap:24px;align-items:start}
  .fascia-footer__principle,
  .fascia-footer__letters,
  .fascia-footer__logo,
  .fascia-footer__credit{grid-column:1;grid-row:auto}
  .fascia-footer__logo{justify-self:start}
}
@media(prefers-reduced-motion:no-preference){
  .fascia-switchboard-cue i{transition:transform .2s ease}
}
@media(prefers-reduced-motion:reduce){
  .fascia-switchboard-cue i{transition:none}
}