/* ==========================================================================
   base.css
   Resets, typography defaults, .shell, .grain, .eyebrow, .ann, accessibility helpers.
   Mirrors design-source/design-system.html base rules verbatim.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}

html,body{
	background:var(--ivory);
	color:var(--charcoal);
	font-family:var(--f-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ─── grain noise — subtle film texture for dark surfaces ───────────────── */
.grain{position:relative;isolation:isolate}
.grain::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}
.grain > *{position:relative;z-index:1}

/* ─── shell ─────────────────────────────────────────────────────────────── */
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--s-7)}
@media(max-width:900px){.shell{padding:0 var(--s-3)}}

/* ─── topbar (design-system meta strip; live pages use .header instead) ─── */
.topbar{
	position:sticky;top:0;z-index:50;
	display:flex;align-items:center;justify-content:space-between;
	padding:20px var(--s-7);
	background:rgba(245,242,236,.85);
	backdrop-filter:saturate(140%) blur(10px);
	border-bottom:1px solid var(--stone);
	font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;
}
.topbar .crumbs{color:var(--ink);opacity:.7}
.topbar .meta{color:var(--ink);opacity:.7}
.topbar .meta b{color:var(--gold);font-weight:500;letter-spacing:.1em}

/* ─── section frames ────────────────────────────────────────────────────── */
.sec{padding:var(--s-9) var(--s-7);position:relative}
@media(max-width:900px){.sec{padding:var(--s-7) var(--s-3)}}
.sec--ivory{background:var(--ivory);color:var(--charcoal)}
.sec--bone {background:var(--bone); color:var(--charcoal)}
.sec--navy {background:var(--navy); color:var(--ivory)}
.sec--navyd{background:var(--navy-deep);color:var(--ivory)}
.sec--char {background:var(--charcoal);color:var(--ivory)}

/* ─── eyebrow ───────────────────────────────────────────────────────────── */
.eyebrow{
	font-family:var(--f-mono);font-size:12px;font-weight:500;
	text-transform:uppercase;letter-spacing:.14em;
	color:var(--ink);opacity:.7;
	display:inline-flex;align-items:center;gap:10px;
	margin-bottom:var(--s-5);
}
.sec--navy .eyebrow,.sec--navyd .eyebrow,.sec--char .eyebrow,.dark .eyebrow{color:var(--ivory);opacity:.55}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.5}

/* ─── section title / lede ──────────────────────────────────────────────── */
.sec-title{
	font-family:var(--f-display);font-weight:700;
	font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.03em;
	margin-bottom:var(--s-7);max-width:18ch;
}
.sec-title em{font-family:var(--f-edit);font-style:italic;font-weight:400;letter-spacing:-.02em}

.sec-lede{
	font-size:clamp(18px,1.5vw,22px);line-height:1.5;max-width:60ch;
	color:var(--ink);opacity:.8;margin-bottom:var(--s-7);
}
.sec--navy .sec-lede,.sec--navyd .sec-lede,.sec--char .sec-lede{color:var(--ivory);opacity:.7}

/* ─── annotation chip (design-system pages only) ────────────────────────── */
.ann{
	display:inline-flex;align-items:center;gap:8px;
	font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
	border:1px dashed var(--stone);padding:6px 10px;border-radius:2px;color:var(--ink);opacity:.75;
}
.sec--navy .ann,.sec--navyd .ann,.dark .ann{border-color:rgba(245,242,236,.3);color:var(--ivory);opacity:.7}
.ann::before{content:"\2192";opacity:.6}

/* ─── shadow utility ────────────────────────────────────────────────────── */
.shadow-1{box-shadow:0 1px 0 rgba(15,36,56,.06),0 24px 60px -32px rgba(15,36,56,.25)}

/* ─── accessibility helpers ─────────────────────────────────────────────── */
.skip-link{
	position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
	position:fixed;left:16px;top:16px;width:auto;height:auto;
	padding:12px 18px;background:var(--gold);color:var(--navy-deep);
	font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.04em;
	z-index:9999;border-radius:999px;
}
.screen-reader-text{
	position:absolute !important;clip:rect(1px,1px,1px,1px);
	width:1px;height:1px;overflow:hidden;
	border:0;padding:0;margin:-1px;
	clip-path:inset(50%);white-space:nowrap;
}

/* keyboard focus parity — gold accent in line with field underline */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.btn--ghost:focus-visible{outline-offset:4px}
.field .ctl:focus-visible{outline:0} /* field underline handles focus state */

/* preserve hover transforms on keyboard focus for parity */
.btn:focus-visible::before{transform:translateY(0)}
.btn:focus-visible{color:var(--ivory)}
.btn--sec-light:focus-visible{color:var(--ivory)}
.btn--sec-dark:focus-visible{color:var(--navy-deep)}
.btn:focus-visible .arr{transform:translateX(4px)}