/* firstlightfoundry.com site layer. Reads the Design System v2 tokens (tokens.css) and component
   styles (components.css), both copied unmodified from Claude_Design_Export. Only layout and
   page-level composition live here. No new colours, faces or radii. */

@font-face { font-family: Lora; src: url(/assets/fonts/Lora-Variable.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: Lora; src: url(/assets/fonts/Lora-Variable-Italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: Newsreader; src: url(/assets/fonts/Newsreader-Variable.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: Newsreader; src: url(/assets/fonts/Newsreader-Variable-Italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/assets/fonts/IBMPlexMono-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/assets/fonts/IBMPlexMono-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { font-size: 19px; } }
img, svg { max-width: 100%; height: auto; }
a { color: var(--text-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-control); }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--accent-hover); }
:focus-visible { outline: var(--border-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.skip { position: absolute; left: var(--space-3); top: -60px; background: var(--surface-page); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); z-index: 10; font-family: var(--font-mono); font-size: 14px; }
.skip:focus { top: var(--space-3); }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter-sm); }
@media (min-width: 768px) { .wrap { padding: 0 var(--gutter-lg); } }
.measure { max-width: var(--measure-text); }
.narrow { max-width: var(--measure-narrow); }

/* Header lock-up + no-JS mobile menu (details/summary) */
.ff-lockup svg { width: 32px; height: 32px; }
.ff-menu { position: relative; }
.ff-menu > summary { list-style: none; }
.ff-menu > summary::-webkit-details-marker { display: none; }
.ff-menu > summary { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; min-height: var(--target-min); padding: 0 var(--space-4); display: inline-flex; align-items: center; border: var(--border-control) solid var(--line-control); border-radius: var(--radius-1); cursor: pointer; }
.ff-menu[open] > .ff-nav-mobile { position: absolute; right: 0; top: calc(100% + var(--space-2)); background: var(--surface-cream); border: 1px solid var(--line-strong); min-width: 220px; z-index: 5; box-shadow: var(--shadow-overlay); }
@media (min-width: 768px) { .ff-menu { display: none; } }

/* Sections */
.section { padding: var(--space-8) 0; border-top: 1px solid var(--line-hairline); }
.section:first-of-type { border-top: 0; }
@media (min-width: 768px) { .section { padding: var(--space-9) 0; } }
.section--cream { background: var(--surface-cream); }
.eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-4); }
h1, h2, h3 { font-family: var(--font-display); color: var(--text-primary); font-weight: 500; text-wrap: balance; }
.h-section { font-size: 34px; line-height: 1.12; margin: 0 0 var(--space-5); }
@media (min-width: 768px) { .h-section { font-size: 47px; } }
.lead { font-family: var(--font-text); font-size: 19px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 var(--space-5); }
@media (min-width: 768px) { .lead { font-size: 22px; } }
.meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }

/* Home hero: the book's first line, set large */
.hero { padding: var(--space-8) 0 var(--space-8); }
@media (min-width: 768px) { .hero { padding: var(--space-10) 0 var(--space-9); } }
.hero__line { font-family: var(--font-display); font-weight: 400; font-size: 42px; line-height: 1.07; letter-spacing: -0.015em; margin: 0 0 var(--space-3); max-width: 14ch; }
@media (min-width: 768px) { .hero__line { font-size: 84px; } }
.hero__attr { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--text-secondary); margin: 0 0 var(--space-7); }
.hero .lead { max-width: 40ch; }

/* The model: series device beside a ledger (not a 3-up grid) */
.model { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) { .model { grid-template-columns: 280px 1fr; gap: var(--space-9); } }
.model__device { max-width: 280px; }
.model__device figcaption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); margin-top: var(--space-3); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li { border-top: 1px solid var(--line-hairline); padding: var(--space-5) 0; display: grid; gap: var(--space-2); }
.ledger > li:last-child { border-bottom: 1px solid var(--line-hairline); }
@media (min-width: 768px) { .ledger > li { grid-template-columns: 200px 1fr; gap: var(--space-6); } }
.ledger__k { font-family: var(--font-display); font-size: 22px; line-height: 1.3; margin: 0; }
.ledger__v { margin: 0; max-width: var(--measure-text); }
.fn-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* Reading Room list */
.rr { list-style: none; margin: 0; padding: 0; }
.rr > li { border-top: 1px solid var(--line-hairline); }
.rr > li:last-child { border-bottom: 1px solid var(--line-hairline); }
.rr a { display: grid; gap: var(--space-2); padding: var(--space-5) 0; text-decoration: none; }
@media (min-width: 768px) { .rr a { grid-template-columns: 220px 1fr; gap: var(--space-6); } }
.rr__title { font-family: var(--font-display); font-size: 27px; line-height: 1.2; margin: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-control); }
.rr a:hover .rr__title { text-decoration-thickness: 2px; text-decoration-color: var(--accent-hover); }
.rr__sf { margin: var(--space-2) 0 0; color: var(--text-secondary); }
.kind { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); }
.kind small { display: block; font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--text-muted); margin-top: var(--space-1); font-size: 12px; }

/* Book block: typographic, deliberately not a cover mock-up */
.book { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .book { grid-template-columns: 1.1fr 1fr; gap: var(--space-9); } }
.book__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 28px; line-height: 1.1; margin: 0; }
@media (min-width: 768px) { .book__title { font-size: 47px; letter-spacing: 0.14em; } }
.book__sub { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--text-secondary); margin: var(--space-4) 0 0; max-width: 34ch; }
@media (min-width: 768px) { .book__sub { font-size: 22px; } }
.book__author { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; font-size: 15px; margin: var(--space-5) 0 0; }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; }
.facts dt { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; }
.facts dd { margin: 0; }
.jacket p { margin: 0 0 1em; }
.jacket .coda { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.4; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc > li { border-top: 1px solid var(--line-hairline); padding: var(--space-4) 0; }
.toc h3 { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-2); }
.toc p { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.5; }
@media (min-width: 768px) { .toc > li { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); } }

/* Forms */
.notice { max-width: 560px; }
.notice__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.notice__row .ff-field { flex: 1 1 260px; }
.small { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Article additions */
.ff-article__body hr.break { border: 0; text-align: center; margin: 2em 0; height: auto; }
.ff-article__body hr.break::after { content: "\00B7\2003\00B7\2003\00B7"; color: var(--text-muted); font-family: var(--font-display); }
.ff-article__body blockquote { margin: 1.4em 0; padding: var(--space-4) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-hairline); }
.ff-article__body blockquote p { font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.38; margin: 0; }
.source { max-width: var(--measure-text); margin: var(--space-7) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--line-hairline); }
.draft { max-width: var(--measure-text); margin: 0 auto var(--space-5); padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-control); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 13px; }
.next { max-width: var(--measure-text); margin: var(--space-7) auto 0; }
.ff-figure--portrait { max-width: 480px; }
.ff-article .ff-figure { margin-top: 0; }

/* Website V2: an editorial opening and a reading-led catalogue. */
.home-opening { padding: 32px 0 0; background: var(--surface-cream); }
.edition-line, .opening-foot { display:flex; justify-content:space-between; gap:24px; font:11px/1.5 var(--font-mono); letter-spacing:.08em; }
.edition-line { padding-bottom:20px; border-bottom:1px solid var(--line-hairline); text-transform:uppercase; color:var(--text-muted); }
.opening-grid { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:48px; padding:64px 0 48px; }
.opening-title { font:400 clamp(56px,6.4vw,84px)/1.04 var(--font-display); letter-spacing:-.045em; margin:0 0 28px; }
.opening-title em { font-weight:400; }
.opening-copy .eyebrow { font-size:11px; letter-spacing:.12em; }
.opening-copy .lead { font-size:26px; color:var(--text-primary); line-height:1.3; margin-bottom:20px; }
.opening-intro { max-width:34ch; color:var(--text-secondary); margin:0; }
.studio { margin:0; }
.studio img { display:block; width:100%; height:auto; }
.studio figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; font:10px/1.6 var(--font-mono); color:var(--text-muted); margin-top:12px; }
.opening-foot { padding:20px 0; border-top:1px solid var(--line-hairline); color:var(--text-secondary); }
.opening-foot a { text-decoration:none; }
.recognition { background:var(--surface-page); color:var(--text-primary); }
.recognition-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; }
.recognition__quote { font:400 clamp(36px,4.2vw,56px)/1.16 var(--font-display); letter-spacing:-.025em; margin:32px 0 28px; }
.recognition__text { padding-top:32px; font-size:21px; line-height:1.55; }
.recognition__text p:first-child { margin-top:0; }
.recognition .text-link { color:var(--text-primary); display:inline-block; margin-top:16px; font:13px/1.7 var(--font-mono); }
.section-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:end; margin-bottom:48px; }
.section-heading .h-section { margin-bottom:0; }
.section-heading .lead { max-width:33ch; margin-bottom:0; }
.reading-cards { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:40px; }
.reading-card { display:block; text-decoration:none; border-bottom:1px solid var(--line-control); padding-bottom:28px; }
.reading-card__art { aspect-ratio:1.65; background:var(--surface-cream); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line-hairline); }
.reading-card__art img { height:100%; width:100%; object-fit:contain; }
.reading-card__quote { font:italic 400 clamp(25px,3vw,40px)/1.25 var(--font-display); text-align:center; }
.reading-card__mark { position:absolute; width:25px; height:25px; right:18px; bottom:16px; color:var(--text-muted); }
.reading-card__body { padding-top:24px; }
.reading-card__body .eyebrow { font-size:10px; letter-spacing:.1em; margin-bottom:14px; }
.reading-card :is(h2,h3) { font-size:28px; line-height:1.2; margin:0 0 16px; }
.reading-card__body>p:not(.eyebrow) { color:var(--text-secondary); margin:0 0 24px; max-width:42ch; }
.reading-card__link { font:12px/1.7 var(--font-mono); text-decoration:underline; text-underline-offset:5px; }
.reading-card:hover :is(h2,h3) { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.slow-reading { display:grid; grid-template-columns:1fr 2fr; gap:48px; }
.slow-reading>div { max-width:56ch; }
.slow-reading .h-section { font-size:clamp(34px,4.2vw,50px); }
.book__title { text-transform:none; font-size:clamp(44px,5.5vw,68px); font-weight:400; letter-spacing:-.035em; max-width:12ch; }
.book .studio { margin-bottom:28px; }
.facts { line-height:1.8; }
@media(max-width:899px) {
 .opening-grid { grid-template-columns:1fr 1fr; gap:28px; }
 .opening-title { font-size:58px; }
 .opening-copy .lead { font-size:23px; }
 .recognition-grid,.section-heading { gap:40px; }
 .recognition__quote { font-size:40px; }
 .reading-card :is(h2,h3) { font-size:25px; }
}
@media(max-width:650px) {
 .home-opening { padding-top:20px; }
 .edition-line { font-size:9px; gap:16px; }
 .edition-line span:last-child { max-width:12ch; text-align:right; }
 .opening-grid { grid-template-columns:1fr; gap:36px; padding:36px 0 28px; }
 .opening-title { font-size:68px; }
 .opening-intro { max-width:40ch; }
 .opening-copy .actions { gap:12px; }
 .opening-foot { font-size:10px; gap:16px; align-items:center; }
 .opening-foot span { max-width:18ch; }
 .opening-foot a { text-align:right; }
 .recognition-grid,.section-heading,.slow-reading,.reading-cards { grid-template-columns:1fr; gap:28px; }
 .recognition__text { padding-top:0; font-size:20px; }
 .recognition__quote { font-size:42px; margin:24px 0; }
 .section-heading { margin-bottom:32px; }
 .reading-cards { gap:40px; }
 .reading-card__quote { font-size:34px; }
 .reading-card :is(h2,h3) { font-size:28px; }
 .slow-reading .eyebrow { margin-bottom:0; }
 .book__title { font-size:52px; }
 .facts { grid-template-columns:1fr; gap:2px; }
 .facts dd { margin-bottom:14px; }
}

.toc .toc__chapters { font:15px/1.65 var(--font-text); color:var(--text-muted); margin-top:10px; }

/* Company introduction leads; books demonstrate the studio's work. */
.company-opening { padding:32px 0 0; background:var(--surface-cream); }
.company-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:72px; padding:80px 0 64px; align-items:start; }
.company-intro h1 { font:400 clamp(44px,5.2vw,68px)/1.1 var(--font-display); letter-spacing:-.035em; margin:0; }
.company-intro__text { padding-top:4px; }
.company-intro__text>p { max-width:43ch; }
.company-intro__text .lead { max-width:43ch; color:var(--text-primary); }
.company-promise { font:400 24px/1.4 var(--font-display); margin-top:28px; }
.company-folio { font:400 100px/1 var(--font-display); color:var(--text-muted); margin:32px 0 0; }
.business-questions { border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:28px 0; }
.business-questions>p:not(.eyebrow) { font:400 clamp(23px,2.4vw,32px)/1.3 var(--font-display); padding:24px 0; margin:0; border-bottom:1px solid var(--line-hairline); }
.business-questions .meta { display:block; margin-top:24px; }
.book .business-questions { margin-bottom:28px; }
@media(max-width:899px) { .company-intro { gap:36px; } .company-intro h1 { font-size:48px; } }
@media(max-width:650px) {
 .company-opening { padding-top:20px; }
 .company-intro { grid-template-columns:1fr; gap:32px; padding:40px 0; }
 .company-intro h1 { font-size:clamp(40px,10.8vw,60px); }
 .company-folio { display:none; }
 .company-intro__text .actions { gap:12px; }
 .business-questions { padding:24px 0; }
}

/* Chapter film: native playback, restrained channel invitation. */
.chapter-film__intro { max-width: 760px; margin-bottom: 32px; }
.chapter-film__player { aspect-ratio:16/9; background:#142e34; }
.chapter-film__player iframe { display:block; width:100%; height:100%; border:0; }
.chapter-film__footer { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-top:20px; }
.chapter-film__footer .actions { margin:0; flex-wrap:wrap; }
.chapter-film__footer p { margin:0; }
@media(max-width:640px) { .chapter-film__footer { align-items:flex-start; gap:12px; } .chapter-film__footer .actions { gap:16px; } }