/* Skarv Rock Light — base: reset, type, header, controls (owner: frontend-claude)
   Identity: 1890s Admiralty chart / keeper's logbook. Old Standard TT for text, Courier Prime for the typewritten parts.
   Controls are ruled and square: no pills, no glow, no shadows. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); background: var(--ink); }
body {
  margin: 0; min-width: 0; background: var(--ink); color: var(--foam);
  font-family: var(--font-display); font-size: var(--fs-md); line-height: var(--lh-body);
  overflow-x: clip; font-kerning: normal; text-rendering: optimizeLegibility;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brass); color: var(--ink); }

/* Courier Prime: the typewritten parts */
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-mono); text-transform: uppercase; line-height: 1.4; }
.eyebrow { color: var(--brass-ink); }

/* grain: static, painted once */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-theme="light"] body::after { opacity: 0.05; mix-blend-mode: multiply; }

/* focus: brass, 2 px */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
html[data-theme="dark"] :focus-visible { outline-color: var(--brass); }

/* skip link */
.skip-link {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5); background: var(--foam); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--track-mono);
  transform: translateY(-200%); text-decoration: none;
}
.skip-link:focus { transform: none; outline: 2px solid var(--brass-ink); outline-offset: 2px; }

/* header: a ruled masthead */
#site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5); padding-inline: var(--gutter);
  background: var(--ink);
  border-bottom: 1px solid var(--line-strong);
}
html:not(.is-scrolled) #site-header { background: transparent; border-bottom-color: transparent; }
#site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--brass); transform-origin: 0 50%; transform: scaleX(var(--scroll)); opacity: 0.8; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; min-height: 44px; }
.brand-name { font-size: var(--fs-md); letter-spacing: 0.01em; white-space: nowrap; }
.brand-lamp { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px var(--ink), 0 0 14px 2px var(--glow); flex: none; }
.brand-flash { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: 0; }

#site-nav { margin-inline-start: auto; display: flex; gap: var(--s-1); }
#site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-mono); text-transform: uppercase; text-decoration: none; color: var(--mist);
  transition: color var(--t-fast);
}
#site-nav a::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-med) var(--ease-out); }
#site-nav a:hover, #site-nav a[aria-current="true"] { color: var(--foam); }
#site-nav a:hover::after, #site-nav a[aria-current="true"]::after { transform: scaleX(1); }

/* theme: a text switch, the active watch underlined */
#theme-toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mist);
}
#theme-toggle .tw { padding-block: 2px; border-bottom: 1px solid transparent; }
#theme-toggle .tw-sep { white-space: pre; }
html[data-theme="dark"] #theme-toggle .tw-night, html[data-theme="light"] #theme-toggle .tw-day { color: var(--foam); border-bottom-color: var(--foam); }
#theme-toggle:hover { color: var(--foam); }

/* buttons: rectangular, 1 px rule in the text colour, rubber-stamp hover */
.cta, .cta-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-6);
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--track-mono); text-transform: uppercase; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--foam); border: 1px solid var(--foam); border-radius: 0;
}
.cta { border-bottom: 3px solid var(--brass-ink); }
.cta-fix { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.cta:hover, .cta-quiet:hover { background: var(--foam); color: var(--ink); }
.cta:active, .cta-quiet:active { transform: translate(1px, 1px); }

/* generic section scaffolding */
main { position: relative; z-index: var(--z-content); }
main > section { position: relative; }
main > section:not(#hero) { padding: clamp(var(--s-8), 9vw, 7.5rem) var(--gutter); }
.section-head { max-inline-size: var(--measure); margin-inline: auto; margin-block-end: var(--s-8); display: grid; gap: var(--s-4); }
.section-title { font-size: var(--fs-2xl); line-height: 1.02; font-weight: 400; letter-spacing: var(--track-display); text-wrap: balance; max-inline-size: 18ch; word-spacing: 0.02em; }
.lede { max-inline-size: var(--measure-text); font-size: var(--fs-lg); line-height: 1.4; color: var(--mist); text-wrap: pretty; }
main > section > *:not(.section-head):not(.hero-inner):not(canvas) { max-inline-size: var(--measure); margin-inline: auto; }

dl > div { display: grid; gap: var(--s-1); }
dt { color: var(--mist); }
dd { margin: 0; }
main > section[tabindex="-1"]:focus-visible { outline: none; }