/* MAANUKA — component layer, built on the tokens. Pill buttons, rounded surfaces, mono kickers — the brand's own choices layered onto the Modernist component set this system was templated from. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.6;font-weight:400}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-heading-weight);line-height:1.12;letter-spacing:-.01em;margin:0 0 var(--space-2)}
h1{font-size:44px}
h2{font-size:32px}
h3{font-size:22px}
h4{font-size:18px}
h5{font-size:15px}
h6{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
p{margin:0 0 var(--space-3)}
/* --text-link, not --color-accent: the primitive resolves to #8B7CF6, which measures 3.3:1 on
   white and is documented in semantic.css as illegal as text. --text-link is the ink-family role
   and is the only accent token that follows a theme or accent override. */
a{color:var(--text-link);text-decoration:none;text-underline-offset:3px}
/* hover shifts weight, not hue — every accent-fill value is tuned as a fill BEHIND text,
   so reusing one as text colour reintroduces the contrast failure on the hover state. */
a:hover{color:var(--text-link);text-decoration:underline}
img{display:block;max-width:100%}
.text-muted{color:var(--text-muted)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
/* --accent-fill, not the --color-accent primitive: the primitive is a single violet that does not
   change per theme or per accent override, so selection ink stayed violet on every ground. */
::selection{background:color-mix(in srgb, var(--accent-fill) 35%, transparent)}

/* — eyebrow / tagline utilities (brand-specific; not part of the Modernist base) — */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 var(--space-2)}
.tagline{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-faint);margin:0}
.hr{height:1px;border:0;margin:var(--space-4) 0;background:var(--color-divider)}

/* — buttons — */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;font-family:var(--font-body);font-weight:500;font-size:13px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:11px 20px;border-radius:var(--radius-control);transition:background .15s ease,border-color .15s ease}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent-fill);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-primary:active{background:var(--accent-fill-active)}
.btn-secondary{border-color:var(--border-strong);color:var(--color-text)}
.btn-secondary:hover{background:var(--surface-hover)}
.btn-secondary:active{background:var(--surface-pressed)}
.btn-ghost{color:var(--accent-ink);padding-inline:var(--space-2)}
.btn-ghost:hover{background:var(--color-signal-tint)}
.btn-ghost:active{background:var(--surface-pressed)}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-control)}
.btn-block{width:100%;margin-top:var(--space-2)}

/* — tags — */
.tag{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;padding:4px 9px;border-radius:var(--radius-sm)}
.tag-accent{background:var(--accent-chip-bg);color:var(--accent-chip-ink)}
.tag-neutral{background:var(--surface-chip);color:var(--text-quiet)}
.tag-outline{border:1px solid var(--accent-ink);color:var(--accent-ink)}

/* — forms — */
.field>label{display:block;font-size:12px;margin-bottom:6px;color:var(--text-muted)}
.input{width:100%;min-height:42px;padding:10px 14px;font:inherit;font-size:14px;color:var(--color-text);caret-color:var(--accent-ink);background:var(--surface-input);border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.input::placeholder{color:var(--text-faint)}
.input:hover{border-color:var(--border-strong)}
.input:focus-visible{border-color:var(--border-focus);outline-offset:0}
textarea.input{min-height:96px;resize:vertical}
.radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.radio input,.seg-opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.radio .dot{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--border-strong)}
.radio:hover .dot{border-color:var(--accent-ink)}
.radio input:checked+.dot{border-color:var(--accent-fill);background:var(--accent-fill);box-shadow:inset 0 0 0 4px var(--color-bg)}
.radio input:focus-visible+.dot{outline:2px solid var(--border-focus);outline-offset:2px}
.seg{flex:none;display:inline-flex;overflow:hidden;border:1px solid var(--color-divider);border-radius:var(--radius-control)}
.seg-opt{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;cursor:pointer}
.seg-opt+.seg-opt{border-left:1px solid var(--color-divider)}
.seg-opt:has(input:checked){background:var(--accent-fill);color:var(--text-on-accent)}
.seg-opt:not(:has(input:checked)):hover{background:var(--surface-hover)}
/* --border-focus like every other focus ring in this file; --color-accent made this the one
   ring that ignored the theme, so it rendered day violet on a nite ground. */
.seg-opt:has(input:focus-visible){outline:2px solid var(--border-focus);outline-offset:-2px}

/* — cards — */
.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--color-divider)}
.card-kicker{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);margin:0 0 var(--space-3)}
.card-title{font-family:var(--font-heading);font-weight:600;font-size:17px;line-height:1.2}
.card-body{margin:0;font-size:13px;line-height:1.6;color:var(--text-muted);flex:1}
.card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-faint)}
.elev-sm{box-shadow:var(--shadow-sm)}
.elev-md{box-shadow:var(--shadow-md)}
.elev-lg{box-shadow:var(--shadow-lg)}

/* — navigation — the nav floats over scrolling content, so it is a glass surface and takes
     the themed glass tokens. It used to hardcode rgba(14,11,26,.85): the dark ground baked in,
     which on the day ground left dark ink on a dark bar. — */
.nav{display:flex;align-items:center;gap:var(--space-4);padding:20px 48px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border)}
.nav-brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav-brand img{width:26px;height:26px;object-fit:contain}
.nav-brand-name{font-family:var(--font-heading);font-weight:600;font-size:14px;letter-spacing:.02em}
/* :not(.btn) matters — .nav a is specificity 0,1,1 and .btn-primary only 0,1,0, so without it
   an <a class="btn btn-primary"> in the nav loses its button ink and renders dark-on-violet. */
.nav a:not(.btn){color:var(--text-quiet);text-decoration:none;font-size:13px}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current='page']{color:var(--color-text)}

/* — tables — */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding:var(--space-3);border-bottom:1px solid var(--color-divider)}
.table td{padding:var(--space-3);border-bottom:1px solid var(--color-divider)}
.table tbody tr:hover{background:var(--surface-card)}

/* — dialog — */
.dialog-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:var(--space-4);background:var(--surface-scrim)}
.dialog{width:min(440px,100%);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);border-radius:var(--radius-lg);background:var(--surface-overlay);border:1px solid var(--border-hairline);box-shadow:var(--shadow-lg)}
.dialog-title{font-family:var(--font-heading);font-weight:600;font-size:20px}
.dialog-body{font-size:14px;color:var(--text-quiet)}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2)}

/* — brand artwork across the two grounds —

   Three cases, and the treatment depends on what the file actually contains. Using the wrong
   one does not look slightly off — it destroys the asset.

   Photographs get NO ground variant: one file, both grounds. Never inverted, never recoloured.

   .logo-invert   A luminance inversion (CSS filter), applied under [data-theme="nite"] in
                  tokens/theme.css. One file, and it preserves per-pixel value — which is what
                  TONAL or greyscale line art needs. The koru logomark is this case.
   .art-day /     Two real files. Ship <img class="art-day" src="x.png"> alongside
   .art-nite      <img class="art-nite" src="x-nite.png"> and the right one shows. Only for
                  SINGLE-COLOUR line art — the -nite file is made by filling the alpha channel
                  with #F4F2FA, which is lossless on flat art and flattens anything tonal into
                  a featureless blob. In this system that means the four philosophy glyphs and
                  nothing else. Worth the second file because it is the only treatment that
                  stays correct outside the browser — email, print, export. — */
/* — photography — a scrimmed photo is a NITE context whichever ground the page is on. The
     scrim is dark, so the ink over it must be light; mark the content wrapper
     data-theme="nite" data-bare and the text tokens flip without hiding the photo. Never a
     gradient scrim: a gradient fades to nothing somewhere in the middle, so contrast depends
     on where a line of text lands, whereas a flat scrim is one number you can verify. — */
.photo{position:relative;overflow:hidden;border-radius:var(--radius-lg)}
.photo>img{width:100%;height:100%;object-fit:cover}
.photo-scrim{position:absolute;inset:0;background:var(--photo-scrim)}
/* The accent is the one ink that cannot be guaranteed over a photograph — a scrim fixes the
   average, not the local contrast under a bright patch. Eyebrows over photography drop to
   light neutral ink; the accent stays for surfaces whose background you control. */
.photo .eyebrow{color:var(--text-quiet)}

.art-nite{display:none}
[data-theme="nite"] .art-day{display:none}
[data-theme="nite"] .art-nite{display:block}