/* ============================================================
   TIMBREL — Voices showroom + landing teaser.
   Rides on timbrel.css tokens (colors, nav, footer, buttons).
   Shared by voices.html and the #voices teaser on index.html.
   ============================================================ */

/* ---------- showroom hero ---------- */
.vh{padding:150px 0 26px;text-align:center}
.vh .wrap{max-width:880px}
.vh h1{font-size:clamp(2.4rem,5.2vw,3.9rem);font-weight:300;margin:16px 0 18px;line-height:1.04}
.vh .lead{max-width:54ch;margin:0 auto}

/* ---------- the shared brief band ---------- */
.brief-band{max-width:760px;margin:38px auto 0;background:var(--ink);color:var(--on-ink);
  border-radius:var(--r-lg);padding:30px 34px;box-shadow:var(--sh-lg);text-align:left;
  display:grid;grid-template-columns:auto 1fr;gap:8px 22px;align-items:center}
.brief-band .tag{grid-column:1;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint);white-space:nowrap;align-self:start;padding-top:6px}
.brief-band .txt{grid-column:2;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.3;color:var(--on-ink)}
.brief-band .sub{grid-column:2;font-size:.86rem;color:var(--on-ink-2);margin-top:2px}
@media(max-width:620px){.brief-band{grid-template-columns:1fr;gap:10px}
  .brief-band .tag,.brief-band .txt,.brief-band .sub{grid-column:1}}

/* ============================================================
   VOICEPRINT CHIP  (name · role · fingerprint · mini-dials)
   ============================================================ */
.chip-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 20px;box-shadow:var(--sh-sm)}
.chip-name{font-family:var(--serif);font-size:1.4rem;color:var(--ink);line-height:1.05}
.chip-role{font-size:.9rem;color:var(--t2);margin:6px 0 2px;line-height:1.45}
.chip-fp{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--gold-deep);margin-top:10px}
.chip-fp .k{color:var(--t3)}

.dials{margin-top:16px;display:grid;gap:11px}
.dial{display:grid;grid-template-columns:84px 1fr 58px;gap:11px;align-items:center}
.dial-name{font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.dial-track{position:relative;height:5px;border-radius:var(--pill);
  background:linear-gradient(90deg,rgba(6,35,31,.06),rgba(6,35,31,.13))}
.dial-node{position:absolute;top:50%;left:var(--pos,50%);width:12px;height:12px;border-radius:50%;
  background:var(--mint-deep);border:2px solid var(--white);box-shadow:0 1px 4px rgba(6,35,31,.25);
  transform:translate(-50%,-50%)}
.dial-read{font-size:.72rem;color:var(--t2);font-weight:600;text-align:right;line-height:1.1}

/* ============================================================
   WRITER BLOCK  (chip + baseline + Timbrel output + real file)
   ============================================================ */
.writer{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;
  max-width:var(--w);margin:0 auto;padding:64px var(--gut);border-top:1px solid var(--line)}
.writer .chip-col{position:sticky;top:96px}
.writer-body{min-width:0}

.lab-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-deep);display:block;margin-bottom:10px}

/* baseline — "in their own words" */
.baseline{background:var(--sage);border-radius:var(--r-md);padding:20px 24px;margin-bottom:26px}
.baseline p{font-family:var(--serif);font-size:1.05rem;font-style:italic;line-height:1.55;color:var(--t1)}

/* the engine-driven output */
.output{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);overflow:hidden}
.output-top{display:flex;align-items:center;gap:10px;padding:13px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(233,244,234,.6),transparent)}
.output-top .seal{width:9px;height:9px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px rgba(138,240,168,.26);flex:none}
.output-top .lbl{font-family:var(--mono);font-size:.74rem;color:var(--t2);letter-spacing:.02em}
.output-top .lbl b{color:var(--ink);font-weight:600}
.output-body{padding:24px 26px;font-size:1.04rem;line-height:1.66;color:var(--t1)}
.output-body p{margin:0 0 .95em}
.output-body p:last-child{margin-bottom:0}
.output-body .solo{margin:0 0 .95em;font-family:var(--serif);font-size:1.1rem;color:var(--ink)}

/* the "move" highlight + the footnote of moves */
mark.hl{background:linear-gradient(180deg,transparent 62%,rgba(138,240,168,.55) 0);
  color:inherit;padding:0 .04em;border-radius:2px}
.moves{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);
  font-size:.84rem;line-height:1.55;color:var(--t2)}
.moves b{color:var(--mint-deep);font-weight:600}

/* the real generated file, collapsed */
.filefold{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.filefold>summary{list-style:none;cursor:pointer;padding:13px 18px;font-family:var(--mono);font-size:.78rem;
  color:var(--t2);display:flex;align-items:center;gap:9px;transition:background .2s}
.filefold>summary::-webkit-details-marker{display:none}
.filefold>summary:hover{background:var(--sage)}
.filefold>summary .chev{color:var(--mint-deep);transition:transform .2s}
.filefold[open]>summary .chev{transform:rotate(90deg)}
.filefold>summary .fp{margin-left:auto;color:var(--gold-deep)}
.filefold pre{background:var(--ink);color:var(--on-ink);margin:0;padding:20px 22px;
  font-family:var(--mono);font-size:.74rem;line-height:1.7;overflow-x:auto;white-space:pre-wrap}
.filefold pre .h{color:var(--mint)}
.filefold pre .c{color:var(--on-ink-2)}
.filefold pre .gold{color:var(--gold)}

@media(max-width:840px){
  .writer{grid-template-columns:1fr;gap:24px;padding:40px var(--gut)}
  .writer .chip-col{position:static}
}

/* ============================================================
   CONTRAST PANEL  (generic AI vs Timbrel + Anti-AI filter)
   ============================================================ */
.contrast-wrap{max-width:var(--w);margin:0 auto;padding:30px var(--gut) 0}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.cpane{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--white);box-shadow:var(--sh-sm)}
.cpane-top{padding:13px 20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;
  display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}
.cpane.generic .cpane-top{background:#fbf4e9;color:var(--gold-deep)}
.cpane.timbrel .cpane-top{background:linear-gradient(180deg,rgba(233,244,234,.7),transparent);color:var(--mint-deep)}
.cpane-top b{font-weight:600}
.cpane-body{padding:22px 24px;font-size:1rem;line-height:1.62;color:var(--t1)}
.cpane-body p{margin:0 0 .85em}.cpane-body p:last-child{margin-bottom:0}
.cpane.generic .cpane-body{color:var(--t2)}
/* a flagged AI tell */
.tell{background:rgba(230,184,115,.26);color:var(--gold-deep);border-radius:3px;padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:500}
.contrast-note{max-width:var(--w);margin:18px auto 0;padding:0 var(--gut);
  font-size:.9rem;color:var(--t2);text-align:center}
.contrast-note a{color:var(--mint-deep);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.contrast{grid-template-columns:1fr}}

/* ============================================================
   LANDING TEASER  (#voices on index.html)
   ============================================================ */
.voices-teaser .brief-band{margin-top:0}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.vcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:24px 22px;display:flex;flex-direction:column;
  transition:transform .25s var(--e-out),box-shadow .25s}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.vcard .chip-name{font-size:1.22rem}
.vcard .chip-role{font-size:.84rem}
.vcard .dials{margin-top:13px}
.vcard .dial{grid-template-columns:74px 1fr 48px;gap:9px}
.vcard-out{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.96rem;line-height:1.55;color:var(--t1);flex:1}
.vcard-out .solo{font-family:var(--serif);font-style:italic;color:var(--ink);margin-bottom:.5em}
.voices-cta{text-align:center;margin-top:40px}
@media(max-width:900px){.vcards{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* end CTA reuse (matches blog .post-cta) */
.voices-end{text-align:center;padding:72px 0 96px}
.voices-end h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-bottom:14px}
.voices-end p{color:var(--t2);max-width:46ch;margin:0 auto 26px}
.voices-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.06em;color:var(--t3);margin-top:10px}
.voices-back:hover{color:var(--mint-deep)}