/* FABRICA (004): a bespoke case study inside the AKINTADE shell (js/fabrica.js). The site keeps its nav, faces, focus,
   margins and gutters (tokens.css, base.css); this page brings Fabrica's own world: a night-green ground (never flat
   black), bone ivory, one copper, and an engraved condensed roman for the headlines. The demo's Adobe faces cannot load
   on the portfolio (its fonts are self-hosted, its privacy page says so), so the headlines use Noto Serif Display at its
   narrowest width (wdth 62.5, wght 400), self-hosted under the SIL Open Font License; text stays in the site's Geist.
   Every class is prefixed fb- and every rule sits under .fb (or html[data-fb] for the top bar), so nothing reaches the
   homepage or the other pages. Motion: the clips only, while seen; base.css turns animation off under reduced motion. */

@font-face { font-family: "Noto Serif Display Condensed"; src: url("/fonts/noto-serif-display/NotoSerifDisplay-Cond-400.latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }   /* SIL OFL 1.1: fontTools instance wght 400, wdth 62.5, Latin subset */

.fb {
  --fb-g: #111613; --fb-g2: #161D19; --fb-g3: #1C2420; --fb-hair: rgba(237, 230, 214, 0.12); --fb-hair2: rgba(237, 230, 214, 0.07);
  --fb-on: #EDE6D6; --fb-on2: #BDB6A6; --fb-on3: #9A9486; --fb-cu: #D0803F; --fb-cu-hi: #E3995A;
  --fb-disp: "Noto Serif Display Condensed", "Newsreader Display", Georgia, serif;
  --fb-ease: cubic-bezier(0.16, 1, 0.3, 1); --fb-index-h: 52px;
  position: relative; padding-top: var(--nav-h);
  background: radial-gradient(1400px 760px at 82% 0, #1A2420 0%, transparent 62%), var(--fb-g);
  color: var(--fb-on); font: 400 1.0625rem/1.6 var(--sans);
}
/* Safari tints its bars from the page; the site's top bar reads light over the dark ground */
html[data-fb], html[data-fb] body { background: #111613; }
html[data-fb] .nav { --ink: #EDE6D6; --ink-2: #BDB6A6; --ink-3: #9A9486; --paper: #111613; color: var(--ink); }
html[data-fb] .nav-rule { background: rgba(237, 230, 214, 0.12); }

.fb .fb-wrap { padding-inline: var(--m); max-width: calc(var(--page-max) + 2 * var(--m)); margin-inline: auto; }
.fb img, .fb video { display: block; width: 100%; height: auto; }
.fb a { color: inherit; }
.fb :focus-visible { outline: 2px solid var(--fb-on); outline-offset: 3px; }
.fb h2[tabindex="-1"] { outline: none; }
.fb p { margin: 0; }
.fb figure { margin: 0; }
.fb figcaption { margin-top: 10px; font: 400 0.8125rem/1.5 var(--sans); color: var(--fb-on3); }
.fb figcaption b { font: 400 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fb-cu); margin-right: 8px; }
.fb .fb-measure { max-width: 40rem; color: var(--fb-on2); margin-top: 22px; }
.fb .fb-small { font-size: 0.8125rem; color: var(--fb-on3); }
.fb .fb-label, .fb .fb-no { font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fb-on3); }
.fb .fb-label .src { color: var(--fb-cu); }

/* ---------- headlines: the engraved condensed roman, uppercase ---------- */
.fb h1, .fb .fb-head em, .fb .fb-word { font-family: var(--fb-disp); font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.004em; text-wrap: balance; }
.fb h1 { font-size: clamp(3.6rem, 1.6rem + 8.4vw, 11rem); line-height: 0.86; margin: 0; }
.fb h1 em { display: block; font-style: normal; color: var(--fb-cu); }
.fb .fb-head { margin-bottom: 26px; }
.fb .fb-head .fb-no { color: var(--fb-cu); margin-bottom: 10px; }
.fb .fb-head h2 { margin: 0; }
.fb .fb-head .fb-name { display: block; font: 400 0.8125rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fb-on3); margin-bottom: 12px; }
.fb .fb-head em { display: block; font-size: clamp(2.6rem, 1.4rem + 4.2vw, 6rem); line-height: 0.9; color: var(--fb-on); }

/* ---------- buttons ---------- */
.fb .fb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fb .fb-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 4px; text-decoration: none;
  font: 500 0.9375rem/1 var(--sans); background: var(--fb-cu); color: #1A120B; transition: transform 0.4s var(--fb-ease), background 0.3s var(--fb-ease); }
.fb .fb-btn:hover { background: var(--fb-cu-hi); }
.fb .fb-btn:active { transform: scale(0.98); }
.fb .fb-btn .fb-dim { font: 400 0.8125rem/1 var(--mono); opacity: 0.72; }
.fb .fb-ghost { background: transparent; color: var(--fb-on); box-shadow: inset 0 0 0 1px var(--fb-hair); }
.fb .fb-ghost:hover { background: rgba(237, 230, 214, 0.06); }

/* ---------- the index: chapter navigation, from 1180 px, once the opening has gone ---------- */
.fb-index { display: none; }
@media (min-width: 1180px) {
  .fb .fb-index { display: flex; position: sticky; top: 0; z-index: 20; height: var(--fb-index-h); align-items: center; gap: 28px;
    padding-inline: var(--m); background: rgba(17, 22, 19, 0.86); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 var(--fb-hair2);
    transition: opacity 0.4s var(--fb-ease); }
  .fb .fb-index.away:not(:focus-within) { opacity: 0; pointer-events: none; }   /* stays in the tab order; shows itself when a link takes focus */
  .fb .fb-index .fb-here { font: 400 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fb-cu); white-space: nowrap; }
  .fb .fb-index ol { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; overflow: hidden; }
  .fb .fb-index a { font: 400 0.8125rem/1 var(--sans); color: var(--fb-on3); text-decoration: none; white-space: nowrap; padding: 16px 0; }
  .fb .fb-index a:hover, .fb .fb-index a[aria-current="true"] { color: var(--fb-on); }
  .fb .fb-index a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--fb-cu); }
  .fb { padding-top: calc(var(--nav-h) - var(--fb-index-h)); }
}

/* ---------- the opening and the film ---------- */
.fb .fb-hero { padding-top: clamp(28px, 4vw, 64px); }
.fb .fb-lead { display: grid; gap: 28px; margin-top: 22px; }
.fb .fb-intro p { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--fb-on); max-width: 34rem; }
@media (min-width: 1100px) {
  .fb .fb-lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 64px; }
}
.fb .fb-film { margin-top: clamp(28px, 4vw, 56px); scroll-margin-top: 80px; }
/* the film always fits the window: never wider than the space under the chapter bar allows at 16:9 (David, 17 Oct: the top was cut) */
.fb .fb-frame { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((100svh - var(--fb-index-h) - 48px) * 16 / 9)); margin-inline: auto; border-radius: 6px; overflow: hidden; background: #0B0E0C; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--fb-hair2); }
.fb .fb-frame img, .fb .fb-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the film itself is never cropped, inline or full screen (David, 17 Oct: the sides were cut when expanded) */
.fb .fb-frame video { object-fit: contain; background: #0B0E0C; }
.fb video:fullscreen, .fb video:-webkit-full-screen { object-fit: contain; width: 100%; height: 100%; background: #000; }
.fb .fb-play { position: absolute; left: clamp(14px, 2.4vw, 36px); bottom: clamp(14px, 2.4vw, 32px); display: inline-flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 20px 8px 10px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(17, 22, 19, 0.84); color: var(--fb-on);
  box-shadow: inset 0 0 0 1px var(--fb-hair); font: 500 0.9375rem/1 var(--sans); backdrop-filter: blur(8px); transition: transform 0.4s var(--fb-ease); }
.fb .fb-play:hover { transform: translateY(-1px); }
.fb .fb-play .fb-tri { width: 36px; height: 36px; border-radius: 50%; background: var(--fb-cu); display: grid; place-items: center; }
.fb .fb-play .fb-tri::after { content: ''; border-left: 11px solid #1A120B; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.fb .fb-play .fb-dim { font: 400 0.8125rem/1 var(--mono); color: var(--fb-on3); }
.fb .fb-filmcap { margin-top: 14px; text-align: center; font-size: 0.875rem; color: var(--fb-on3); }
.fb .fb-beats-wrap { margin-top: 18px; border-top: 1px solid var(--fb-hair2); }
.fb .fb-beats-wrap summary { cursor: pointer; padding: 16px 0; min-height: 44px; font: 500 0.9375rem/1.3 var(--sans); color: var(--fb-on); }
.fb .fb-note { font-size: 0.8125rem; color: var(--fb-on3); margin-bottom: 8px; }
.fb .fb-beats { list-style: none; margin: 0; padding: 0; columns: 2 26rem; column-gap: 40px; }
.fb .fb-beats li { break-inside: avoid; }
.fb .fb-beats button { display: grid; grid-template-columns: 3.4rem 1fr; gap: 10px; width: 100%; text-align: left; padding: 9px 0; min-height: 44px; background: none; border: 0;
  border-top: 1px solid var(--fb-hair2); color: var(--fb-on2); font: 400 0.875rem/1.5 var(--sans); cursor: pointer; }
.fb .fb-beats button:hover, .fb .fb-beats button[aria-current="true"] { color: var(--fb-on); }
.fb .fb-beats time { font: 400 0.8125rem/1.6 var(--mono); color: var(--fb-cu); }
.fb .fb-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 28px 0 0; border-top: 1px solid var(--fb-hair); }
.fb .fb-meta div { padding: 16px 0; border-bottom: 1px solid var(--fb-hair2); }
.fb .fb-meta dt { font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fb-on3); margin-bottom: 4px; }
.fb .fb-meta dd { margin: 0; font-size: 0.9375rem; color: var(--fb-on); }
@media (min-width: 900px) { .fb .fb-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- chapters ---------- */
.fb .fb-ch { padding-top: clamp(80px, 9vw, 150px); scroll-margin-top: var(--fb-index-h); }
.fb .fb-split { display: grid; gap: 40px; }
.fb .fb-text p + p { margin-top: 16px; }
.fb .fb-text > p { color: var(--fb-on2); max-width: 36rem; }
@media (min-width: 1100px) {
  .fb .fb-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 72px; align-items: start; }
  .fb .fb-split.fb-wide { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.4fr); }
}
.fb .fb-pull { display: flex; align-items: flex-end; gap: 22px; margin-top: 36px; }
.fb .fb-big { font: 400 clamp(8rem, 5rem + 12vw, 17rem)/0.74 var(--fb-disp); color: var(--fb-cu); }
.fb .fb-pull p { max-width: 20rem; font-size: 0.9375rem; color: var(--fb-on2); }
.fb .fb-facts { margin: 0; border-top: 1px solid var(--fb-hair); align-self: center; }
.fb .fb-facts div { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--fb-hair2); }
.fb .fb-facts dt { font: 400 clamp(2.4rem, 1.6rem + 2vw, 3.6rem)/0.9 var(--fb-disp); color: var(--fb-on); white-space: nowrap; }
.fb .fb-facts dd { margin: 0; font-size: 1rem; color: var(--fb-on2); }
.fb .fb-facts small { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--fb-on3); }
.fb .fb-facts a, .fb .fb-credits a { text-decoration: underline; text-decoration-color: var(--fb-hair); text-underline-offset: 3px; }
.fb .fb-facts a:hover, .fb .fb-credits a:hover { text-decoration-color: var(--fb-cu); }

.fb .fb-pair { display: grid; gap: 32px; }
.fb .fb-pair-right { display: grid; gap: 16px; align-content: end; }
.fb .fb-pair-right > p { color: var(--fb-on2); max-width: 36rem; }
.fb .fb-pair-right figure { margin-top: 12px; }
.fb .fb-plate img { background: #ECE6D8; border-radius: 4px; }
@media (min-width: 900px) { .fb .fb-pair { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); gap: 40px; align-items: end; } }

.fb .fb-loop-frame { position: relative; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--fb-hair2); }
.fb .fb-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--fb-ease); }
.fb .fb-loop.fb-live video { opacity: 1; }
.fb .fb-pause { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 999px;
  background: rgba(17, 22, 19, 0.84); color: var(--fb-on); font: 500 0.8125rem/1 var(--sans); cursor: pointer; box-shadow: inset 0 0 0 1px var(--fb-hair); }
.fb .fb-pause .fb-ico { width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.fb .fb-pause[aria-pressed="true"] .fb-ico { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.fb .fb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.fb .fb-two img { border-radius: 4px; }
.fb .fb-big2 { gap: 22px; margin-top: 32px; }
@media (max-width: 699px) { .fb .fb-big2 { grid-template-columns: 1fr; } }

/* booking: the clip and the case sheet's five states get the room */
.fb .fb-sheetrow { display: grid; gap: 28px; margin-top: 34px; }
@media (min-width: 1100px) { .fb .fb-sheetrow .fb-loop { max-width: 72%; } .fb .fb-sheets ol { gap: 18px; } .fb .fb-sheets li span { font-size: 0.875rem; } }   /* the case sheet's five states get the full width (David, 17 Oct: more prominence) */
.fb .fb-sheets ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.fb .fb-sheets li img { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--fb-hair2); }
.fb .fb-sheets li span { display: block; margin-top: 8px; font: 400 0.75rem/1.3 var(--sans); color: var(--fb-on2); }
.fb .fb-sheets li b { font: 400 0.75rem/1 var(--mono); color: var(--fb-cu); margin-right: 4px; }
@media (max-width: 599px) {
  .fb .fb-sheets ol { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .fb .fb-sheets li { scroll-snap-align: start; }
}
.fb .fb-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 44px 0 0; padding: 0; }
.fb .fb-steps img, .fb .fb-done img { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--fb-hair2); }
@media (min-width: 900px) { .fb .fb-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fb .fb-done { margin-top: 28px; max-width: 70%; }
@media (max-width: 899px) { .fb .fb-done { max-width: none; } }

/* for everyone: four real phone screens */
.fb .fb-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); list-style: none; margin: 10px 0 0; padding: 0; }
.fb .fb-phones li { background: #0A0D0B; border-radius: clamp(22px, 3vw, 42px); padding: clamp(6px, 0.8vw, 10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.fb .fb-phones img { border-radius: clamp(16px, 2.4vw, 34px); }
@media (max-width: 599px) {
  .fb .fb-phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .fb .fb-phones li { scroll-snap-align: start; }
}
.fb .fb-list, .fb .fb-decisions { display: grid; gap: 0 32px; margin: 40px 0 0; border-top: 1px solid var(--fb-hair); }
.fb .fb-list div, .fb .fb-decisions div { padding: 20px 0; border-bottom: 1px solid var(--fb-hair2); }
.fb .fb-list dt, .fb .fb-decisions dt { font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fb-cu); margin-bottom: 8px; }
.fb .fb-list dd, .fb .fb-decisions dd { margin: 0; font-size: 0.9375rem; color: var(--fb-on2); max-width: 34rem; }
@media (min-width: 700px) { .fb .fb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fb .fb-decisions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fb .fb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* how it was made */
.fb .fb-load { display: grid; gap: 18px; margin-top: 40px; }
.fb .fb-load img { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--fb-hair2); }
@media (min-width: 700px) { .fb .fb-load { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fb .fb-credits { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--fb-hair); max-width: 52rem; }
.fb .fb-credits h3 { margin: 0 0 12px; font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fb-on3); }
.fb .fb-credits ul { margin: 0; padding-left: 18px; color: var(--fb-on2); font-size: 0.875rem; }
.fb .fb-credits li + li { margin-top: 6px; }
.fb .fb-ai { margin-top: 18px; font-size: 0.875rem; color: var(--fb-on2); }

/* the close */
.fb .fb-close { padding: clamp(110px, 12vw, 190px) 0 clamp(60px, 7vw, 100px); text-align: center; }
.fb .fb-word { font-size: clamp(5rem, 2rem + 12vw, 13rem); line-height: 0.84; margin: 0; color: var(--fb-on); }
.fb .fb-close p { max-width: 40rem; margin: 22px auto 0; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); color: var(--fb-on); }
.fb .fb-close .fb-ctas { justify-content: center; }

/* the shared ending reads on the dark ground */
.fb .c-end { --ink: #EDE6D6; --ink-2: #BDB6A6; --ink-3: #9A9486; color: var(--fb-on); }
.fb .c-end .rule-h { background: var(--fb-hair); }