/* ============================================================================
   Lumos Aesthetics & Wellness — Tarva BXD layout system
   Self-contained design system for the brand-book "slide" layouts.
   Two frame sizes: 1920×1080 (landscape) + 816×1056 / 8.5×11 (portrait).
   Tokens + type are the real baked Lumos values.
   ACCENT FENCE (CANON Res 2): --accent = action/priority only. Permitted on:
   the single hero display word, interactive links, card-hover border, active
   chips. NEVER on eyebrows, numerals, kickers, or decorative labels.
   --fg-muted is borders/dots/dividers ONLY — never text (fails AA contrast).
   ============================================================================ */

/* ---- fonts (self-hosted, real Lumos faces) ---- */
@font-face { font-family: "Editor's Note"; src: url("fonts/editorsnote-regular-webfont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Editor's Note"; src: url("fonts/editorsnote-italic-webfont.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/BeVietnamPro-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/BeVietnamPro-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Lumos tokens ---- */
:root {
  --bg-canvas: #efede0;     /* parchment-500 */
  --bg-surface: #ffffff;    /* white */
  --bg-surface-alt: #f0edea;
  --bg-sunken: #e2dcd7;
  --fg-primary: #1a191b;    /* obsidian-500 */
  --fg-secondary: #74685e;  /* driftwood-700 — AA body text */
  --fg-muted: #ab998a;      /* driftwood-500 — borders/dots/dividers ONLY */
  --border-subtle: #e2dcd7; /* driftwood-200 */
  --border-strong: #bdafa4;
  --accent: #a85522;        /* terracotta-500 — interactive / priority only */
  --accent-strong: #723a17; /* terracotta-700 */
  --accent-subtle: #efe0d7;
  --success: #67956f; --warn: #cb7f3f; --danger: #b55b52; --info: #5570a3;
  --font-display: "Editor's Note", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(64,32,13,.04), 0 8px 24px rgba(64,32,13,.06);
}

/* ---- desk / viewport ---- */
* { box-sizing: border-box; }
html, body { margin: 0; background: #cfccc1; font-family: var(--font-body); color: var(--fg-primary); -webkit-font-smoothing: antialiased; }
.desk { padding: 56px 56px 200px; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.deck-head { width: min(1920px, 92vw); color: #5d574c; font-size: 13px; letter-spacing: .04em; display: flex; justify-content: space-between; align-items: baseline; }
.deck-head b { color: #2b2722; font-weight: 600; }
.deck-head a { color: var(--accent); text-decoration: none; }
.frame-wrap { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.frame-tag { font-family: var(--font-mono); font-size: 12px; color: #5d574c; letter-spacing: .06em; text-transform: uppercase; }

/* ---- the frames (true Figma sizes) ---- */
.frame { position: relative; overflow: hidden; background: var(--bg-canvas); box-shadow: 0 30px 80px rgba(30,20,10,.22); }
.frame.landscape { width: 1920px; height: 1080px; }
.frame.portrait  { width: 816px;  height: 1056px; }
@media (max-width: 1980px) { .frame.landscape { transform: scale(calc((92vw) / 1920)); transform-origin: top center; margin-bottom: calc(-1080px * (1 - (92vw / 1920))); } }

/* ---- slide internals ---- */
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; }
.frame.landscape .slide { padding: 88px 104px; }
.frame.portrait  .slide { padding: 42px 56px 24px; }

/* on-frame breadcrumb (wayfinding survives Figma/PDF export — lives INSIDE the frame) */
.crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--fg-secondary); text-transform: uppercase; }
.frame.portrait .crumb { font-size: 10px; }
.crumb b { color: var(--fg-primary); font-weight: 600; }

.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-secondary); }
.frame.portrait .eyebrow { font-size: 10px; }
.display { font-family: var(--font-display); font-weight: 400; color: var(--fg-primary); letter-spacing: -.01em; line-height: .98; margin: 0; }
.frame.landscape .display { font-size: 92px; }
.frame.portrait  .display { font-size: 44px; }
.display .it { font-style: italic; color: var(--accent); } /* hero accent — ≥18pt, AA-large OK; one priority moment per slide */
.lead { font-size: 22px; line-height: 1.45; color: var(--fg-secondary); max-width: 60ch; }
.frame.portrait .lead { font-size: 15px; }
.body { font-size: 17px; line-height: 1.55; color: var(--fg-secondary); }
.frame.portrait .body { font-size: 12.5px; }

.brandbar { display: flex; align-items: center; gap: 14px; }
.brandbar .mark { height: 34px; }
.frame.portrait .brandbar .mark { height: 24px; }
.brandbar .chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--fg-secondary); padding: 5px 10px; border: 1px solid var(--border-subtle); border-radius: 999px; }
.spacer { flex: 1; }
.rule { height: 1px; background: var(--border-subtle); border: 0; margin: 0; }

.footer { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--fg-secondary); }

/* shared section-header + pager primitives (centralized — single source, no per-page drift) */
.col-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-secondary); margin-bottom: 14px; }
.pagenav { display: flex; align-items: center; gap: 10px; }
.pagenav a { font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-decoration: none; }
.pagedots { display: flex; gap: 5px; }
.pagedots i { width: 7px; height: 7px; border-radius: 999px; background: var(--border-strong); display: block; }
.pagedots i.on { background: var(--accent); }

/* ---- cards / grids ---- */
.grid { display: grid; gap: 24px; }
.frame.portrait .grid { gap: 9px; }
.card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; position: relative; }
.frame.portrait .card { padding: 12px 14px; border-radius: var(--r-md); }
.card .num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary); }
.card h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 2px 0 0; }
.frame.portrait .card h3 { font-size: 15px; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-secondary); }
.frame.portrait .card p { font-size: 11px; }
.card .meta { margin-top: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); letter-spacing: .04em; }
a.card { transition: border-color .12s; }
a.card:hover { border-color: var(--accent); }
/* coming-soon: built-vs-planned disambiguation (M6) */
.card.soon { opacity: .62; box-shadow: none; cursor: default; }
.card.soon:hover { border-color: var(--border-subtle); }
.card .planned { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 2px 7px; }
.frame.portrait .card .planned { top: 10px; right: 10px; font-size: 8px; }

/* ---- color swatches ---- */
.ramp { display: grid; grid-template-columns: repeat(10, 1fr); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.ramp .step { height: 64px; display: flex; align-items: flex-end; padding: 6px; }
.frame.portrait .ramp .step { height: 38px; }
.ramp .step span { font-family: var(--font-mono); font-size: 9px; opacity: .85; }
.ramp-row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.frame.portrait .ramp-row { grid-template-columns: 92px 1fr; gap: 10px; }
.ramp-name { font-family: var(--font-display); font-size: 19px; }
.frame.portrait .ramp-name { font-size: 13px; }
.ramp-name small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--fg-secondary); margin-top: 3px; }
.sem { display: flex; flex-direction: column; gap: 6px; }
.sem .row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sem .dot { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.08); flex: none; }
.sem .tok { font-family: var(--font-mono); font-size: 12.5px; }
.sem .ref { font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); margin-left: auto; }

/* ---- code blocks (Getting Started) ---- */
.code { background: #f6f4ec; border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.code .bar { background: #ece7dc; padding: 9px 15px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--fg-secondary); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; }
.code .bar .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--border-strong); display: block; }
.code pre { margin: 0; padding: 18px 22px; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.7; color: var(--fg-primary); white-space: pre-wrap; }
.frame.portrait .code pre { font-size: 11px; padding: 13px 15px; line-height: 1.6; }
.frame.portrait .code .bar { font-size: 9px; padding: 7px 12px; }
.code .cm { color: var(--fg-secondary); }       /* comment */
.code .st { color: #7b3d37; }                    /* string — rust-700 (non-accent warm, keeps accent fenced), AA */
.code .kw { color: var(--fg-primary); font-weight: 600; } /* keyword */

/* ---- numbered steps / feature rows ---- */
.steps { display: flex; flex-direction: column; gap: 16px; }
.frame.portrait .steps { gap: 10px; }
.step-row { display: flex; gap: 16px; align-items: flex-start; }
.step-row .n { font-family: var(--font-mono); font-size: 13px; color: var(--fg-secondary); background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); border-radius: 999px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex: none; }
.frame.portrait .step-row .n { width: 22px; height: 22px; font-size: 11px; }
.step-row .t b { font-size: 17px; font-weight: 600; } .step-row .t p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-secondary); }
.frame.portrait .step-row .t b { font-size: 13px; } .frame.portrait .step-row .t p { font-size: 11px; }
.feature { display: flex; flex-direction: column; gap: 6px; }
.feature b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.frame.portrait .feature b { font-size: 16px; }
.feature p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-secondary); }
.frame.portrait .feature p { font-size: 11px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; flex: 1; align-content: start; }
.frame.portrait .two { grid-template-columns: 1fr; gap: 20px; }

/* ---- color spec cards (Primary / Secondary / Status) ---- */
.spec-grid { display: grid; gap: 24px; flex: 1; align-content: start; }
.frame.portrait .spec-grid { gap: 13px; }
.spec-card { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-surface); }
.spec-card .chip-sw { height: 168px; position: relative; }
.frame.portrait .spec-card .chip-sw { height: 84px; }
.spec-card .chip-sw .step { position: absolute; right: 14px; top: 12px; font-family: var(--font-mono); font-size: 11px; opacity: .8; }
.spec-card .body { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; }
.frame.portrait .spec-card .body { padding: 11px 13px; gap: 6px; }
.spec-card .nm { font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1; }
.frame.portrait .spec-card .nm { font-size: 16px; }
.spec-card .tok { font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary); }
.frame.portrait .spec-card .tok { font-size: 10px; }
.spec-card .role { font-size: 13.5px; line-height: 1.4; color: var(--fg-secondary); }
.frame.portrait .spec-card .role { font-size: 11px; }
.spec-card .specs { display: grid; grid-template-columns: 42px 1fr; gap: 4px 12px; font-family: var(--font-mono); font-size: 12.5px; margin-top: 3px; }
.frame.portrait .spec-card .specs { font-size: 10px; grid-template-columns: 36px 1fr; gap: 2px 10px; }
.spec-card .specs dt { color: var(--fg-secondary); }
.spec-card .specs dd { margin: 0; color: var(--fg-primary); letter-spacing: .01em; }
.spec-card .aa { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); margin-top: 2px; }
.frame.portrait .spec-card .aa { font-size: 9px; }
.spec-card .aa b { color: var(--fg-primary); font-weight: 600; }

/* ---- typography specimens (Typefaces / Scale / Weights) ---- */
.face-card { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--bg-surface); overflow: hidden; display: flex; flex-direction: column; }
.face-card .big { padding: 22px 28px 8px; font-size: 116px; line-height: .92; color: var(--fg-primary); }
.frame.portrait .face-card .big { font-size: 60px; padding: 14px 16px 4px; }
.face-card .info { padding: 16px 28px 22px; display: flex; flex-direction: column; gap: 8px; }
.frame.portrait .face-card .info { padding: 10px 16px 14px; gap: 5px; }
.face-card .fname { font-family: var(--font-display); font-size: 26px; }
.frame.portrait .face-card .fname { font-size: 17px; }
.face-card .frole { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; }
.frame.portrait .face-card .frole { font-size: 10px; }
.face-card .fdesc { font-size: 14px; line-height: 1.45; color: var(--fg-secondary); }
.frame.portrait .face-card .fdesc { font-size: 11px; }
.face-card .fweights { font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary); }
.frame.portrait .face-card .fweights { font-size: 10px; }
.scale-col { display: flex; flex-direction: column; gap: 16px; }
.frame.portrait .scale-col { gap: 9px; }
.scale-row, .wt-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding-bottom: 13px; border-bottom: 1px solid var(--border-subtle); }
.frame.portrait .scale-row, .frame.portrait .wt-row { gap: 10px; padding-bottom: 7px; }
.scale-row .spec, .wt-row .spec { color: var(--fg-primary); line-height: 1.05; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scale-row .spec { font-size: var(--sz, 16px); }
.frame.portrait .scale-row .spec { font-size: calc(var(--sz, 16px) * 0.56); }
.scale-row .meta, .wt-row .meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; white-space: nowrap; }
.scale-row .meta .nm, .wt-row .meta .nm { font-family: var(--font-mono); font-size: 12px; color: var(--fg-primary); }
.frame.portrait .scale-row .meta .nm, .frame.portrait .wt-row .meta .nm { font-size: 10px; }
.scale-row .meta .px, .wt-row .meta .px { font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); }
.scale-row .meta .use, .wt-row .meta .use { font-size: 11px; color: var(--fg-secondary); }
.frame.portrait .scale-row .meta .px, .frame.portrait .scale-row .meta .use, .frame.portrait .wt-row .meta .px, .frame.portrait .wt-row .meta .use { font-size: 9px; }