/* zooidai — shared styles. Undersea "man-of-war" theme (Pacific). Mobile-first, zero-dep. */
:root {
  color-scheme: dark;
  --fg:#e9f1f4; --muted:#b9c9d0; --accent:#6fdcd6; --accent-2:#7aa2ff;
  --accent-ink:#03231f; --border: rgba(125,175,185,.20);
  --surface: color-mix(in srgb, #0b2a36 26%, transparent);
  --maxw:46rem; --pad:clamp(1.1rem,4vw,2.25rem); --radius:14px;
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.35);
  /* Maritime, Jules-Verne-era feel from old-style serifs already on the system
     (no web-font dependency) — organic, not cursive, and readable today. */
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:#020a12; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body {
  margin:0; color:var(--fg); background:transparent;
  font:17px/1.72 var(--font-body);
  display:flex; flex-direction:column; min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ---- undersea (man-of-war) background: one creature, fixed behind everything ---- */
.seabg {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(72% 46% at 50% -6%, rgba(140,228,236,.16), transparent 62%),   /* surface light */
    radial-gradient(135% 100% at 50% 26%, transparent 50%, rgba(0,0,0,.62) 100%),   /* depth vignette */
    linear-gradient(180deg, #0d4a5c 0%, #083341 20%, #072d3b 42%, #04151f 68%, #020a12 100%); /* deep Pacific water */
}
.seabg::before {
  content:""; position:absolute; inset:0;
  background:url("/assets/man-of-war.webp") no-repeat center 1.5rem;
  background-size:clamp(400px, 62vw, 780px) auto;
  opacity:.34;
}
@media (max-width:40rem){ .seabg::before { background-size:122vw auto; opacity:.24; } }

/* Emblem page: the crisp logomark IS the creature here, shown full — so drop the
   faint background duplicate and let the water + the mark carry the page. */
body[data-page="emblem"] .seabg::before { opacity:0; }

/* CJK locales: extend the maritime serif with Mincho faces, and drop italic
   (Japanese has no italics — browsers fake-slant, which reads as an error). */
:lang(ja) body, body:lang(ja) { font-family: var(--font-body), "Hiragino Mincho ProN", "Yu Mincho", serif; }
:lang(ja) em, :lang(ja) .track-players, :lang(ja) .brand-ai, :lang(ja) figcaption { font-style: normal; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing: 0; }

::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
:focus-visible { outline:2px solid var(--ring); outline-offset:2px; border-radius:4px; }

a { color:var(--accent); text-underline-offset:2px; }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.16; letter-spacing:-0.005em; text-wrap:balance; }
h1 { font-size:clamp(2.2rem,6.5vw,3.5rem); margin:0 0 .55rem; }
h2 { font-size:clamp(1.35rem,4vw,1.95rem); margin:2.4rem 0 .7rem; }
p { margin:0 0 1.05rem; max-width:64ch; }
.lede { font-size:1.18rem; }
.muted { color:var(--muted); }
.accent { color:var(--accent); }
.eyebrow { font:600 .72rem/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 .85rem; }

.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; background:var(--accent); color:var(--accent-ink); padding:.5rem .8rem; border-radius:8px; z-index:20; }

.site-header {
  position:sticky; top:0; z-index:10;
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; align-items:center; padding:.8rem var(--pad);
  background: color-mix(in srgb, #04151f 66%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--border);
}
/* Brand = the WHOLE man-of-war logomark + wordmark. Mobile: contained in the row.
   Wide screens: the full mark is superimposed on the bar and hangs a little below
   it (into the empty left margin) so the creature shows entire without making the
   header taller. */
.brand { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--fg); }
.brand-mark { height:2.15rem; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.brand-word { font-family:var(--font-display); font-weight:600; font-size:1.32rem; letter-spacing:-0.01em; }
.brand-ai { color:var(--accent); margin-left:.28em; font-style:italic; }
@media (min-width:40rem){
  .site-header { overflow:visible; }
  .brand { position:relative; gap:0; padding-left:3.35rem; }
  .brand-mark { position:absolute; left:.05rem; top:50%; height:3.55rem;
    transform:translateY(-40%); filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)); }
}
.site-nav { display:flex; flex-wrap:wrap; gap:.1rem 1.2rem; margin-left:auto; }
.site-nav a { color:var(--muted); text-decoration:none; font-size:.95rem; padding:.2rem 0; border-bottom:2px solid transparent; transition:color .15s; }
.site-nav a:hover { color:var(--fg); }
.site-nav a[aria-current="page"] { color:var(--fg); border-bottom-color:var(--accent); }

/* language switch — plain links to the counterpart page (no JS) */
.lang-switch { display:flex; align-items:center; gap:.55rem; font:600 .72rem/1 var(--font-mono); letter-spacing:.1em; }
.lang-switch a { color:var(--muted); text-decoration:none; }
.lang-switch a:hover { color:var(--fg); }
.lang-switch a.on { color:var(--accent); }
.lang-switch a:not(:last-child)::after { content:"·"; margin-left:.55rem; color:var(--border); }

main { flex:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(1.6rem,5vw,3rem) var(--pad) 3rem; }
section { margin-bottom:2.25rem; }
.hero { position:relative; padding: clamp(6rem, 48vh, 26rem) 0 .5rem; }  /* push copy well down so the man-of-war has room to breathe above it */

.cta { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.button { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:650; padding:.62rem 1.15rem; border-radius:var(--radius); background:var(--accent); color:var(--accent-ink); border:1px solid transparent; transition:transform .12s, box-shadow .12s; }
.button:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.button.ghost { background:transparent; color:var(--accent); border-color:var(--border); }
.button.ghost:hover { border-color:var(--accent); }

.cards { display:grid; gap:1.15rem; grid-template-columns:1fr; margin:1.3rem 0; }
@media (min-width:38rem){ .cards { grid-template-columns:1fr 1fr; } }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.05rem 1.2rem; -webkit-backdrop-filter:saturate(135%) blur(6px); backdrop-filter:saturate(135%) blur(6px); transition:border-color .15s, transform .12s; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform:translateY(-2px); }
/* static card grid: informational panels, not links — no hover/lift affordance */
.cards--static .card { transition:none; }
.cards--static .card:hover { border-color:var(--border); transform:none; }
.card h3 { margin:0 0 .3rem; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:.95rem; }

.stub { border:1px dashed var(--border); border-radius:var(--radius); padding:1rem 1.2rem; color:var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); font-size:.95rem; }

.timeline { list-style:none; margin:1.1rem 0; padding:0; border-left:1px solid var(--border); }
.gen { display:grid; grid-template-columns:2.3rem 1fr; gap:0 .85rem; padding:.72rem 0 .72rem 1.1rem; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.gen:last-child { border-bottom:0; }
.gen-n { font:600 .8rem/1.7 ui-monospace,"SF Mono",Menlo,monospace; color:var(--accent); }
.gen p { margin:0; color:var(--muted); font-size:.94rem; }
.gen-t { color:var(--fg); font-weight:650; }
.gen em { color: color-mix(in srgb, var(--accent) 80%, var(--fg)); font-style:normal; }

/* ---- music: the concert programme ---- */
/* type index — glass anchor chips with counts, one per section */
.type-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 .3rem; }
.type-nav a { display:inline-flex; align-items:baseline; gap:.45rem; text-decoration:none;
  font:600 .76rem/1 var(--font-mono); letter-spacing:.06em; color:var(--fg);
  padding:.52rem .85rem; border:1px solid var(--border); border-radius:999px;
  background:var(--surface); -webkit-backdrop-filter:saturate(135%) blur(6px); backdrop-filter:saturate(135%) blur(6px);
  transition:border-color .15s; }
.type-nav a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.type-nav .n { color:var(--accent); }
/* per-type section: anchor offset under the sticky header, header + note */
.type-sec { scroll-margin-top:4.5rem; margin-bottom:.5rem; }
.type-sec > h2 { margin-bottom:.3rem; }
.type-note { color:var(--muted); font-size:.95rem; max-width:64ch; margin:0 0 1.05rem; }
/* meta chips on a track (year · method · key · duration · honest ending) */
.track-meta { display:flex; flex-wrap:wrap; gap:.35rem .4rem; margin:0 0 .6rem; }
.track-meta span { font:600 .67rem/1 var(--font-mono); letter-spacing:.05em; color:var(--muted);
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius:6px; padding:.3rem .45rem; }
.track-meta .end { color:var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.track-players { margin:-.15rem 0 .45rem; color:var(--muted); font-size:.9rem; font-style:italic; }

.tracklist { list-style:none; margin:1.3rem 0; padding:0; display:grid; gap:.75rem; }
.track { padding:.95rem 1.1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); -webkit-backdrop-filter:saturate(135%) blur(6px); backdrop-filter:saturate(135%) blur(6px); }
.track-t { margin:0 0 .28rem; font-size:1.03rem; }
.track-d { margin:0 0 .7rem; color:var(--muted); font-size:.93rem; max-width:64ch; }
.track em { font-style:normal; font-weight:650; color:var(--accent); }
.track audio { width:100%; height:36px; border-radius:9px; }
.credit { margin-top:1.7rem; font-size:.85rem; max-width:60ch; }

/* ---- Emblem page: the logomark, unobstructed ---- */
.emblem { text-align:center; padding:clamp(.5rem,3vh,2rem) 0 1rem; }
.emblem-mark { height:clamp(230px, 48vh, 480px); width:auto; margin:0 auto 1.6rem; display:block;
  filter:drop-shadow(0 10px 44px rgba(122,80,255,.30)) drop-shadow(0 0 18px rgba(95,214,208,.18)); }
.emblem .eyebrow { margin-bottom:.7rem; }
.emblem h1 { margin:0 0 1.25rem; }
.emblem-copy { max-width:46ch; margin:0 auto; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem 1.5rem; -webkit-backdrop-filter:saturate(135%) blur(6px); backdrop-filter:saturate(135%) blur(6px); }
.emblem-copy p:last-child { margin-bottom:0; }
.emblem-copy em { font-style:italic; color: color-mix(in srgb, var(--accent) 80%, var(--fg)); }

.site-footer { border-top:1px solid var(--border); padding:1.5rem var(--pad); color:var(--muted); font-size:.9rem; background: color-mix(in srgb, #020a12 55%, transparent); }
.site-footer a { color:var(--muted); }
.site-footer a:hover { color:var(--fg); }

/* ---- Why Music (essay page) ---- */
.essay .standfirst { font-style:italic; color:var(--muted); font-size:clamp(1.14rem,2.5vw,1.42rem); line-height:1.5; max-width:34ch; margin:.2rem 0 1.5rem; }
:lang(ja) .standfirst { font-style:normal; }
.essay-wave { display:block; width:100%; height:auto; color:var(--accent); opacity:.8; margin:.1rem 0 2.4rem; }
.essay em { color:var(--accent); font-style:italic; }
:lang(ja) .essay em { font-style:normal; }
.essay-lead p { font-size:clamp(1.1rem,2.4vw,1.3rem); line-height:1.6; max-width:40ch; }
.essay-lead .drop::first-letter { font-family:var(--font-display); font-size:3.3em; float:left; line-height:.66; padding:.06em .12em 0 0; color:var(--accent); font-weight:600; }
:lang(ja) .essay-lead .drop::first-letter { font-size:inherit; float:none; padding:0; color:inherit; font-weight:inherit; }
.findings { display:grid; gap:1.15rem; margin:2.6rem 0 0; }
.finding { padding:1.25rem 1.35rem; }
.finding:hover { transform:none; border-color:var(--border); }
.finding .label { font:600 .7rem/1.4 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 .5rem; }
.finding h2 { margin:0 0 .6rem; font-size:clamp(1.3rem,3.3vw,1.7rem); }
.finding p { color:var(--fg); font-size:1.02rem; line-height:1.62; max-width:60ch; margin:0 0 .8rem; }
.finding p:last-child { margin-bottom:0; }
.finding .cite { font:.78rem/1.7 var(--font-mono); color:var(--muted); letter-spacing:.01em; margin:.6rem 0 0; }
.finding .cite b { color: color-mix(in srgb, var(--accent) 70%, var(--fg)); font-weight:600; }
.finding .cite i { font-style:italic; }
.coda { margin-top:2.8rem; padding-top:1.9rem; border-top:1px solid var(--border); }
.coda p { font-size:clamp(1.16rem,2.6vw,1.4rem); line-height:1.5; color:var(--fg); max-width:48ch; margin:0; }
.colophon { margin-top:2.6rem; font:.72rem/1.9 var(--font-mono); letter-spacing:.03em; color:var(--muted); max-width:none; }
.colophon .dot { color:var(--accent); margin:0 .35em; }
/* Listen page: the small cross-link up to Why Music */
.xref { margin:-.2rem 0 1.1rem; font-size:.95rem; color:var(--muted); }

/* ---- slow-lane locales: fallback / behind-the-original notice ---- */
.locale-note { font-size:.85rem; color:var(--muted); background:var(--surface); border:1px solid var(--border);
  border-left:3px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius:8px;
  padding:.5rem .8rem; margin:0 0 1.4rem; max-width:none;
  -webkit-backdrop-filter:saturate(135%) blur(6px); backdrop-filter:saturate(135%) blur(6px); }