/* ============================================================
   TENORE & CO. — tenore.css  (production V2)
   Extracted from tenore-site.html (v6) — "The Instrument".
   Cormorant (voice) × IBM Plex Mono (data) · Charcoal ↔ Paper ·
   Oxblood once-per-screen · exposed grid · marginalia · colophon.
   No logo (wordmark only). No photographs (the engraving is the art).
   V2 changes vs v6: self-hosted fonts; WCAG-AA contrast lifts on
   dark-ground oxblood + light-ground stone; :focus-visible; skip-link;
   horizontal-overflow guard. No redesign. No TAB token.
   ============================================================ */

/* ── Self-hosted fonts (latin, woff2) ─────────────────────── */
@font-face{font-family:"Cormorant";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-v24-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-v24-latin-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-v24-latin-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-v24-latin-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-v24-latin-500italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-sc-v19-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-sc-v19-latin-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-sc-v19-latin-600.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/eb-garamond-v32-latin-regular.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/eb-garamond-v32-latin-500.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/eb-garamond-v32-latin-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2")}

/* ── Tokens (the styleguide :root — source of truth) ──────── */
:root{
  --charcoal:#16150F; --ink:#1F1B14; --paper:#F3EEE2; --paper-d:#EAE3D3;
  --warm-white:#F2ECE0; --warm-black:#1C1A17; --stone:#8A8275; --oxblood:#6B1F2A;
  --rule:rgba(138,130,117,.28); --rule-d:rgba(28,26,23,.18);
  --ease:cubic-bezier(.22,.61,.36,1); --gutter:clamp(1.4rem,5vw,5rem);
  /* V2 a11y lifts — same hue family, raised for legibility (no new accent) */
  --oxblood-d:#B5586A;     /* oxblood on charcoal grounds only (1.62→~4.0:1) */
  --stone-paper:#6F685C;   /* stone on paper grounds only (3.28→4.76:1) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden}                              /* V2: kill ghost-numeral 375px h-scroll */
body{background:var(--charcoal);color:var(--warm-white);font-family:"EB Garamond",Georgia,serif;font-size:20px;line-height:1.6}
.ox{color:var(--oxblood)}
a{color:inherit;text-decoration:none}
.tag{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}

/* grain + paper */
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.paper::before{opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.6'/%3E%3C/svg%3E")}
.grain>*{position:relative;z-index:1}

/* exposed column grid */
.gridlines{display:none;position:fixed;inset:0;z-index:1;pointer-events:none;margin:0 var(--gutter);
  background-image:repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),var(--rule) calc(25% - 1px),var(--rule) 25%);opacity:.45}

.rule2{border:0;border-top:1px solid var(--rule);box-shadow:0 3px 0 -2px var(--rule)}
.light .rule2{border-top-color:var(--rule-d);box-shadow:0 3px 0 -2px var(--rule-d)}

/* sections */
section{position:relative;padding:clamp(4.5rem,9vw,8.5rem) var(--gutter)}
.light{background:var(--paper);color:var(--warm-black)}
.dark{background:var(--charcoal);color:var(--warm-white)}
.wrap{max-width:1120px;margin:0 auto;position:relative;padding-top:clamp(7rem,13vw,11rem)}
.ghost{position:absolute;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:clamp(7rem,22vw,17rem);
  line-height:.8;color:currentColor;opacity:.14;z-index:0;top:0;left:-.02em;pointer-events:none}
.wrap>*{position:relative;z-index:1}
.kick{display:block;margin-bottom:1.4rem}
#def .kick{font-size:.6rem;letter-spacing:.1em;white-space:nowrap}   /* §01: long label stays one clean line, never orphans */

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.gridlines{display:none}html{scroll-behavior:auto}}

/* ---------- HERO (calm V5 + whispered precision) ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6rem var(--gutter);position:relative}
.crop{position:absolute;width:13px;height:13px;z-index:2}
.crop.tl{top:calc(var(--gutter) - 1px);left:calc(var(--gutter) - 1px);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.crop.tr{top:calc(var(--gutter) - 1px);right:calc(var(--gutter) - 1px);border-top:1px solid var(--rule);border-right:1px solid var(--rule)}
.crop.bl{bottom:calc(var(--gutter) - 1px);left:calc(var(--gutter) - 1px);border-bottom:1px solid var(--rule);border-left:1px solid var(--rule)}
.crop.br{bottom:calc(var(--gutter) - 1px);right:calc(var(--gutter) - 1px);border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.hero-wm{font-family:"Cormorant SC",serif;font-weight:500;letter-spacing:.16em;line-height:1;
  font-size:clamp(2.6rem,8vw,5.4rem);color:var(--warm-white)}
.hero-wm .amp{color:var(--stone);font-style:italic;font-family:"Cormorant",serif}
.hero-tag{margin-top:1.7rem}
.hero .cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;
  letter-spacing:.26em;text-transform:uppercase;font-size:.58rem;color:var(--stone)}
@keyframes breathe{0%,100%{opacity:.4}50%{opacity:.85}}
.hero .cue{animation:breathe 3.6s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){.hero .cue{animation:none;opacity:.7}}

/* ---------- shared editorial bits ---------- */
.statement{font-family:"Cormorant",serif;font-weight:500;line-height:1.1;letter-spacing:.004em;font-size:clamp(2.1rem,4.8vw,3.6rem)}
.statement .ox{color:var(--oxblood)}
.dark .statement .ox{color:var(--oxblood-d)}        /* V2: lift period on charcoal (1.62→~4.0:1, large text) */
.body{font-size:1.15rem;line-height:1.66;margin-top:1.5rem;max-width:58ch}
.body.muted{color:var(--stone)} .light .body.muted{color:var(--stone-paper)}
.br-d{display:inline}                                    /* desktop-only forced line break (hidden ≤760px) */

/* definition (the gotcha) */
.def{max-width:34rem;margin-top:0}
.def-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.def-word{font-family:"Cormorant",serif;font-size:clamp(2.6rem,6vw,4.2rem);font-weight:500;letter-spacing:.02em}
.def-ipa{font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--stone)}
.def-row{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.3rem;align-items:baseline}
.def-num{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--oxblood);padding-top:.5rem}
.def-sense{font-family:"Cormorant",serif;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.4;padding-bottom:1rem;border-bottom:1px solid var(--rule-d)}
.def-sense.last{border-bottom:0}
.def-sense .field{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-right:.7rem}
.def-coda{margin-top:1.7rem;font-family:"Cormorant",serif;font-style:italic;font-size:1.4rem}

/* claim + marginalia */
.claim{display:grid;grid-template-columns:1fr clamp(160px,24%,250px);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.margin{font-family:"IBM Plex Mono",monospace;font-size:.74rem;line-height:1.7;color:var(--stone);border-left:1px solid var(--oxblood);padding-left:1rem;margin-top:.5rem}
.dark .margin{border-left-color:var(--oxblood-d)}     /* V2: visible rule on charcoal */
.margin b{color:var(--warm-white);font-weight:500}
.light .margin b{color:var(--warm-black)}
@media (max-width:760px){.claim{grid-template-columns:1fr}}

/* two-column section: content + structural-eye marginalia */
.cols{padding-top:clamp(7rem,13vw,11rem)}                 /* block, padding matches .wrap so the ghost sits at the same height */
.cols-inner{display:grid;grid-template-columns:1fr clamp(170px,23%,250px);gap:clamp(1.5rem,4.5vw,4rem);align-items:start;position:relative;z-index:1}
.cols .ghost{position:relative}   /* in-flow normal block (like the .wrap ghost) → full 354px watermark + same kicker overlap as the single-column sections */
.cols .main{grid-column:1} .cols .aside{grid-column:2}
.cols .aside{font-family:"IBM Plex Mono",monospace;font-size:.73rem;line-height:1.78;color:var(--stone);
  border-left:1px solid var(--oxblood);padding-left:1.05rem;margin-top:.4rem}
.dark .cols .aside{border-left-color:var(--oxblood-d)}
.cols .aside .hd{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood);margin-bottom:.8rem}
.cols .aside b{font-weight:500;color:var(--warm-white)} .light .cols .aside b{color:var(--warm-black)}
@media (max-width:880px){.cols-inner{grid-template-columns:1fr}.cols .main,.cols .aside{grid-column:1}.cols .aside{margin-top:2.2rem}}

/* record (about) — removed; §03 now uses prose paragraphs */

/* work — the term sheet */
.terms{margin-top:0}
.terms-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:.8rem}
.tri{display:grid;grid-template-columns:repeat(3,1fr)}
.cell{padding:2rem 1.6rem 2.2rem 0;border-top:1px solid var(--rule)}
.cell+.cell{padding-left:1.6rem;border-left:1px solid var(--rule)}
.cell .no{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--stone);letter-spacing:.1em}  /* V2: stone (oxblood-on-dark small text failed AA) */
.cell .nm{font-family:"Cormorant",serif;font-size:1.7rem;line-height:1.1;margin:.7rem 0 .3rem}
.cell .ro{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.cell .ds{margin-top:1rem;color:var(--stone);font-size:1.02rem;line-height:1.5}
@media (max-width:760px){.tri{grid-template-columns:1fr}.cell+.cell{padding-left:0;border-left:0}}

/* writing meta */
.meta-row{margin-top:2.2rem;border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);
  display:flex;gap:1.4rem;flex-wrap:wrap;padding:1.1rem 0;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.meta-row b{color:inherit;font-weight:500}

/* ciseled action + drawing underline */
.act{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.2rem;font-family:"IBM Plex Mono",monospace;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;padding:.9rem 1.6rem;
  background:transparent;color:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.dark .act:hover,.dark .act:active{background:var(--oxblood);border-color:var(--oxblood);color:var(--warm-white)}
.light .act{color:var(--oxblood)} .light .act:hover,.light .act:active{background:var(--oxblood);color:var(--paper)}
.act .ar{transition:transform .3s var(--ease)} .act:hover .ar,.act:active .ar{transform:translateX(5px)}
.ul{position:relative}
.ul::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--oxblood);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.dark .ul::after{background:var(--oxblood-d)}        /* V2: visible hover underline on charcoal */
.ul:hover::after{transform:scaleX(1)}
.linkmono{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.1em}

/* right-margin index — the instrument needle-rail */
.index{position:fixed;right:clamp(1rem,2.4vw,2.1rem);top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:1.15rem;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
body.scrolled .index{opacity:1;pointer-events:auto}
.index:focus-within{opacity:1;pointer-events:auto}    /* V2: keyboard reveals the rail */
.index a{display:flex;align-items:center;gap:.7rem;line-height:1}
.index .rd{display:flex;align-items:baseline;gap:.5rem;font-family:"IBM Plex Mono",monospace;
  font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,236,224,.6);
  opacity:0;transform:translateX(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
body.over-light .index .rd{color:rgba(28,26,23,.55)}
.index .rd .nm-no{opacity:.5}
.index a:hover .rd,.index a:focus-visible .rd,.index a.active .rd{opacity:1;transform:none}
.index a.active .rd{color:var(--warm-white)} body.over-light .index a.active .rd{color:var(--warm-black)}
.index .mk{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;
  color:var(--warm-white);transition:height .35s var(--ease),width .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease),border-radius .35s var(--ease)}
body.over-light .index .mk{color:var(--warm-black)}
.index a:hover .mk{opacity:.6}
.index a.active .mk{width:3px;height:26px;border-radius:2px;background:var(--oxblood-d);opacity:1}   /* V2: lift over dark */
body.over-light .index a.active .mk{background:var(--oxblood)}                                       /* deep oxblood over paper */
@media(max-width:1180px){.index{display:none}}

/* colophon */
.colophon{background:var(--charcoal);color:var(--warm-white);padding:clamp(2.2rem,4vw,3.4rem) var(--gutter)}
.colophon .row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem;border-bottom:1px solid var(--rule);padding-bottom:1.4rem}
.colophon .fm{font-family:"Cormorant SC",serif;font-size:1.3rem;letter-spacing:.14em}
.colophon .lk{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;display:flex;gap:1.4rem;color:var(--stone)}
.colophon .set{margin-top:1.4rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.08em;color:var(--stone);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}

/* ── V2 a11y: light-ground stone lift (3.28→4.76:1) ──────── */
.light .tag,
.light .def-ipa,
.light .def-sense .field,
.light .cols .aside,
.light .meta-row{color:var(--stone-paper)}

/* ── V2 a11y: visible focus + skip-link ──────────────────── */
a:focus-visible,.act:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.light a:focus-visible,.light .act:focus-visible{outline-color:var(--oxblood)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--charcoal);color:var(--warm-white);
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.85rem 1.2rem}
.skip:focus{left:1rem;top:1rem;outline:2px solid var(--warm-white);outline-offset:2px}

/* ── V2 contact form (§06, dark ground) ─────────────────────── */
#contact{padding-bottom:clamp(2.4rem,4vw,3.6rem)}
.contact{margin-top:2.2rem;max-width:34rem;display:flex;flex-direction:column;gap:1.5rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.flabel{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.flabel .opt{opacity:.65}
.finput{background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--warm-white);
  font-family:"EB Garamond",Georgia,serif;font-size:1.05rem;padding:.5rem 0;transition:border-color .3s var(--ease)}
.finput::placeholder{color:var(--stone);opacity:.5}
.finput:focus{outline:none;border-bottom-color:var(--oxblood-d)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-family:"IBM Plex Mono",monospace;font-size:.64rem;line-height:1.6;color:var(--stone)}
.consent input{margin-top:.2rem;accent-color:var(--oxblood)}
.consent a{color:var(--warm-white)}
.contact .act{align-self:flex-start;margin-top:.2rem}
.fstatus{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.04em;color:var(--stone);min-height:1.1em;margin:0}
.fstatus.ok{color:var(--warm-white)}
.fstatus.err{color:var(--oxblood-d)}
.field-row{display:flex;gap:1.5rem}
.field-row .field{flex:1;min-width:0}
textarea.finput{width:100%;box-sizing:border-box;resize:vertical;min-height:3.2rem;line-height:1.5}

/* ── V2 legal pages (privacy / terms) ───────────────────────── */
body.legal{background:var(--paper);color:var(--warm-black)}
.legal-wrap{max-width:760px;margin:0 auto;padding:clamp(3rem,7vw,6rem) var(--gutter)}
.legal-home{display:inline-block;font-family:"Cormorant SC",serif;letter-spacing:.14em;font-size:1rem;color:var(--warm-black);margin-bottom:2.4rem}
.legal-wrap h1{font-family:"Cormorant",serif;font-weight:500;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin-bottom:.3rem}
.legal-updated{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-paper);margin-bottom:2.4rem}
.legal-wrap h2{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);margin:2.6rem 0 .8rem}
.legal-wrap p,.legal-wrap li{font-family:"EB Garamond",Georgia,serif;font-size:1.05rem;line-height:1.7;margin-bottom:.7rem}
.legal-wrap ul{padding-left:1.2rem;margin-bottom:.7rem}
.legal-wrap a{color:var(--oxblood);text-decoration:underline;text-underline-offset:2px}
.legal-todo{display:block;background:rgba(107,31,42,.06);border-left:2px solid var(--oxblood);padding:.5rem .85rem;margin:.3rem 0 .9rem;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;line-height:1.55;letter-spacing:.02em;color:#6f4a4f}
.legal-colophon{margin-top:3rem;border-top:1px solid var(--rule-d);padding-top:1.2rem;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.08em;color:var(--stone-paper);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}

/* ── Mobile pass (≤760px) ─────────────────────────────────── */
@media (max-width:760px){
  .contact .act{width:100%;justify-content:center;padding:1.05rem 1.6rem}   /* real tap target */
  .field-row{flex-direction:column;gap:1.5rem}           /* stack first/last name */
  .colo-type{display:none}                               /* drop the typeset note, keep © */
  .br-d{display:none}                                    /* let constrained lines flow naturally on mobile */
}