/* Doina — night blue ink, embroidery thread. Semantic tokens, light + dark. */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/fraunces-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF;
}
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-FFFF;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-FFFF;
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/source-serif-4-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF;
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/source-serif-4-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-FFFF;
}
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:400 600;font-display:swap;
  src:url("fonts/source-serif-4-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF;
}
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:400 600;font-display:swap;
  src:url("fonts/source-serif-4-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-FFFF;
}

:root{
  --paper:#f5eedd; --paper-soft:#efe4cb; --ink:#17203a; --ink-soft:#3d4763;
  --thread:#8e1f30; --thread-gold:#7c6116; --thread-teal:#0d5f59;
  --line:#c9b995; --card:#fbf6e9; --field:#fffdf4;
  --skeleton:#8b93ad; --stitch:#8e1f30;
  --focus:#0d5f59; --topbar-h:3rem;
  --shadow:0 1px 0 rgba(23,32,58,.08),0 8px 28px -18px rgba(23,32,58,.45);
}
html[data-theme="dark"]{
  --paper:#0b1425; --paper-soft:#101c33; --ink:#ece2cb; --ink-soft:#b9c0d6;
  --thread:#e0707f; --thread-gold:#e2b44e; --thread-teal:#63c2b6;
  --line:#2c3a5c; --card:#111d36; --field:#0e1830;
  --skeleton:#5f6d94; --stitch:#e0707f;
  --focus:#8fd8cd;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:1.075rem;line-height:1.65;
}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.15;letter-spacing:.002em}
h1{font-size:clamp(2rem,4.6vw,3.1rem);margin:.4em 0 .3em}
h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:2.2em 0 .6em}
h3{font-size:1.15rem;margin:1.4em 0 .4em}
p{max-width:38rem}
a{color:var(--thread);text-underline-offset:.14em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
section{scroll-margin-top:calc(var(--topbar-h) + .75rem)}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.25rem}
.prose p,.prose li{max-width:38rem}

/* Topbar: one line, house pattern */
.topbar{
  position:sticky;top:0;z-index:50;min-height:var(--topbar-h);
  display:flex;align-items:center;gap:.75rem;
  padding:0 .9rem;padding-top:env(safe-area-inset-top);
  background:var(--paper);border-bottom:1px dashed var(--line);
  white-space:nowrap;
}
.topbar .home{font-family:Fraunces,serif;font-weight:700;color:var(--ink);text-decoration:none}
.topnav{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.topnav a[aria-current="true"]{color:var(--thread);font-weight:600}
.spacer{flex:0 0 auto}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;
  color:var(--ink);text-decoration:none;font-size:.9rem;flex:0 0 auto;
}
.icon-btn{
  width:2.25rem;height:2.25rem;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}

/* Hero */
.kicker{
  display:inline-block;margin:1.6rem 0 0;color:var(--thread);
  font-size:.92rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.deck{font-size:1.2rem;max-width:36rem;color:var(--ink-soft)}
.stitch-rule{border:0;border-top:2px dashed var(--thread);opacity:.55;margin:1.6rem 0;max-width:38rem}
.byline{color:var(--ink-soft);font-size:.95rem;max-width:38rem}

/* Share row (hero) */
.share{border:1px dashed var(--line);border-radius:.6rem;background:var(--card);padding:.8rem 1rem;max-width:38rem;margin:1.2rem 0}
.share p{margin:.2rem 0 .6rem;font-size:.95rem}
.share-row{display:flex;flex-wrap:wrap;gap:.5rem}
.share-row a,.share-row button{
  min-height:2.75rem;display:inline-flex;align-items:center;padding:.4rem .9rem;
  border:1px solid var(--line);border-radius:999px;background:var(--field);
  color:var(--ink);text-decoration:none;font-size:.95rem;cursor:pointer;
}
.share-note{font-size:.9rem;color:var(--ink-soft)}

/* Player */
.player{
  border:1px solid var(--line);border-radius:.9rem;background:var(--card);
  box-shadow:var(--shadow);padding:1rem 1rem 1.2rem;margin:1rem 0;max-width:56rem;
}
.phrase-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
.phrase-pick label{
  border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;cursor:pointer;
  background:var(--field);min-height:2.75rem;display:inline-flex;align-items:center;gap:.45rem;
}
.phrase-pick input{accent-color:var(--thread);width:1.1rem;height:1.1rem}
.phrase-pick label:has(input:checked){border:2px solid var(--thread);padding:calc(.45rem - 1px) calc(1rem - 1px)}
.phrase-pick label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.canvas-holder{position:relative}
canvas#contour{width:100%;height:auto;display:block;border-radius:.5rem;background:var(--field);border:1px dashed var(--line)}
.playhead-fallback{font-size:.9rem;color:var(--ink-soft)}
.controls{display:grid;gap:.9rem;margin-top:1rem}
.control label{display:block;font-weight:600;margin-bottom:.15rem}
.control .hint{font-weight:400;font-size:.9rem;color:var(--ink-soft)}
.control output{font-weight:600;color:var(--thread)}
input[type="range"]{width:100%;min-height:2.75rem;accent-color:var(--thread)}
.button-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.btn{
  min-height:2.75rem;padding:.5rem 1.3rem;border-radius:999px;cursor:pointer;
  border:2px solid var(--thread);font-size:1rem;font-weight:600;
}
.btn.primary{background:var(--thread);color:#fff}
html[data-theme="dark"] .btn.primary{color:#141021}
.btn.ghost{background:transparent;color:var(--thread)}
.readout{border-left:3px solid var(--thread);padding:.4rem 0 .4rem .9rem;margin-top:1rem;max-width:38rem}
.audio-note{font-size:.92rem;color:var(--ink-soft);max-width:38rem}

/* Skeleton cards */
.trio{display:grid;gap:.9rem;grid-template-columns:1fr;margin:1rem 0}
@media (min-width:44rem){.trio{grid-template-columns:repeat(3,1fr)}}
.stitch-card{
  border:1px dashed var(--line);border-radius:.7rem;background:var(--card);padding:.9rem 1rem;
}
.stitch-card h3{margin-top:.2rem}
.stitch-card svg{width:100%;height:auto;display:block;margin:.4rem 0}
.fact-grid{display:grid;gap:.7rem;grid-template-columns:1fr;margin:1rem 0;max-width:56rem}
@media (min-width:44rem){.fact-grid{grid-template-columns:1fr 1fr}}
.fact{border:1px solid var(--line);border-radius:.6rem;background:var(--card);padding:.7rem .95rem}
.fact strong{font-family:Fraunces,serif}
.sources li{margin-bottom:.5rem}
footer{border-top:1px dashed var(--line);margin-top:3rem;padding:1.4rem 0 2.4rem;color:var(--ink-soft);font-size:.92rem}
footer p{max-width:44rem}
.skip{position:absolute;left:-999px;top:0;background:var(--thread);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}