/* ============================================================================
   ThreadLine site — additions to brand.css (Drew Professional).
   Only what brand.css lacks: skip link, focus ring, masthead fit on phones,
   the tab component, the map frame, and a few page-level layouts.
   Every value comes from brand.css tokens.
   ============================================================================ */

/* ---------- Accessibility ---------- */
.skip { position:absolute; left:var(--s3); top:-100px; z-index:100;
  background:var(--surface-raised); color:var(--text-strong); border:1px solid var(--accent-strong);
  border-radius:var(--radius-input); padding:var(--s2) var(--s3); font-weight:600; text-decoration:none; }
.skip:focus { top:var(--s3); }

/* one ring for both themes: --accent-strong is teal-deep in light, cyan in dark */
:focus { outline:none; }
:focus-visible { outline:2px solid var(--accent-strong); outline-offset:3px; border-radius:4px; }
.btn:focus-visible { outline-offset:3px; border-radius:var(--radius-input); }
iframe:focus-visible { outline-offset:2px; border-radius:var(--radius-card); }

[hidden] { display:none !important; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* arrows: Fraunces has no arrow glyph, so arrows always set in the body face */
.arrow { font-family:var(--font-body); font-style:normal; }

/* ---------- Touch targets + masthead fit ---------- */
.btn { min-height:44px; justify-content:center; }
.nav__links { display:flex; align-items:center; gap:var(--s4); }
.nav__cta { display:flex; align-items:center; gap:var(--s2); }
.wordmark { white-space:nowrap; }
@media (max-width:640px){
  .masthead__in { padding:var(--s2) var(--s3); }
  .nav__wide { display:none; }
}

/* ---------- Page rhythm ---------- */
main { display:block; }
.section--tight { padding:var(--s6) 0; }
.container--wide { max-width:1240px; }
.section__head .lead { margin-top:var(--s3); }
.section__head--center { text-align:center; }
.section__head--center p, .section__head--center .lead { margin-left:auto; margin-right:auto; }
.section__head--center .rule { margin-left:auto; margin-right:auto; }
.hero--landing .chips { margin-top:var(--s5); }
.hero--landing .meta { margin:var(--s4) 0 0; max-width:none; }
.hero .display { max-width:16ch; margin-left:auto; margin-right:auto; }
@media (max-width:640px){
  .section { padding:var(--s7) 0; }
  .hero--landing { padding:var(--s7) 0 var(--s6); }
  .container { padding:0 var(--s3); }
  .band { padding:var(--s6) var(--s4); }
}

/* ---------- Tabs (used by the demo and the genre gallery) ---------- */
.tabs { display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin:0 0 var(--s3);
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-input); }
.tab { flex:1 1 0; min-height:44px; padding:0 var(--s3); border:1px solid transparent; border-radius:6px;
  background:transparent; color:var(--text-muted); cursor:pointer;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  transition:color .15s, background-color .15s, border-color .15s; }
.tab:hover { color:var(--text-strong); }
.tab[aria-selected="true"] { background:var(--surface-raised); color:var(--accent-strong);
  border-color:var(--border); box-shadow:var(--shadow-sm); }
.tab__n { color:var(--text-muted); margin-right:6px; }
.tab[aria-selected="true"] .tab__n { color:var(--accent-strong); }
.tabs--small { display:inline-flex; }
.tabs--small .tab { flex:0 1 auto; }
@media (max-width:640px){
  .tabs { display:grid; grid-template-columns:1fr 1fr; }
  .tabs--small { display:grid; grid-template-columns:1fr; }
  .tab { padding:0 var(--s2); font-size:.66rem; letter-spacing:.08em; }
}

/* ---------- Map frame ---------- */
.frame { background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow); overflow:hidden; }
.frame__bar { display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:10px var(--s3); border-bottom:1px solid var(--border); background:var(--surface-sunken); }
.frame__title { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin:0; max-width:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frame__title b { color:var(--text-strong); font-weight:600; }
.frame__open { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-size:.85rem; font-weight:600; text-decoration:none; color:var(--accent-strong); }
.frame__open:hover { text-decoration:underline; }
.frame iframe { display:block; width:100%; height:640px; border:0; background:var(--surface-sunken); }
.frame--small iframe { height:600px; }
.frame--tall iframe { height:780px; }
.h2like { font-family:var(--font-display); font-weight:600; color:var(--text-strong); font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.15; margin:0; }
@media (max-width:640px){
  .frame iframe, .frame--small iframe { height:520px; }
  .frame--tall iframe { height:640px; }
  .frame__title span { display:none; }
}

/* captions under the demo frame */
.notes { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s4); }
.notes h3 { font-family:var(--font-mono); font-weight:400; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-strong); margin:0 0 var(--s2); }
.notes p { font-size:.95rem; margin:0; }
.notes .answer { font-family:var(--font-display); font-style:italic; font-size:1.15rem; line-height:1.35; color:var(--text-strong); }
.notes ol { margin:0; padding-left:1.2em; font-size:.95rem; }
.notes li + li { margin-top:4px; }
@media (max-width:820px){ .notes { grid-template-columns:1fr; gap:var(--s3); } }

/* ---------- What it reads ---------- */
.reads { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px var(--s3); }
.reads .kicker { margin:0 var(--s2) 0 0; }

/* ---------- Comparison table ---------- */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border);
  border-radius:var(--radius-card); background:var(--surface-raised); padding:var(--s2) var(--s3); }
.table-scroll table.tokens { min-width:640px; }
table.tokens td.is-map { color:var(--text-strong); }
table.tokens th:last-child { color:var(--accent-strong); }

/* ---------- Doors (numbered) ---------- */
.numbered .t a { color:inherit; text-decoration:none; }
.numbered .t a:hover { color:var(--accent-strong); }
.numbered li:first-child { border-top:1px solid var(--border); }

/* ---------- Features ---------- */
.feature__icon { color:var(--accent-strong); }
.feature__icon svg { width:24px; height:24px; }
.feature { padding:var(--s2) 0; }

/* ---------- Card lists, pricing ---------- */
.card--stack { display:flex; flex-direction:column; height:100%; }
.card--stack .card__body { flex:1 1 auto; }
.card__actions { margin-top:var(--s4); }
.card__actions .btn { width:100%; }
.price { font-family:var(--font-display); font-weight:600; color:var(--text-strong); font-size:2rem; line-height:1; margin:var(--s3) 0 var(--s2); }
.price small { font-family:var(--font-body); font-size:.85rem; font-weight:400; color:var(--text-muted); margin-left:6px; }
.ticks { list-style:none; margin:var(--s3) 0 0; padding:0; font-size:.92rem; }
.ticks li { position:relative; padding:6px 0 6px 22px; border-top:1px solid var(--border); color:var(--text); }
.ticks li::before { content:""; position:absolute; left:2px; top:13px; width:9px; height:5px;
  border-left:2px solid var(--accent-strong); border-bottom:2px solid var(--accent-strong); transform:rotate(-45deg); }
.terms { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em; color:var(--text-muted); margin:var(--s3) 0 0; }
.card--featured { border-color:var(--accent-strong); }
.meta-row { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }

/* ---------- Film placeholder ---------- */
.film { max-width:880px; margin:0 auto; }
.film .ph { flex-direction:column; gap:var(--s3); }
.film .ph svg { width:72px; height:72px; color:var(--accent-strong); }
.film video { width:100%; border-radius:var(--radius-card); border:1px solid var(--border); display:block; }

/* ---------- Dark band on a dark page: keep it visible ---------- */
[data-theme="dark"] .band--dark { background:var(--surface-sunken); border:1px solid var(--border); }
.band .chips { justify-content:center; margin-top:var(--s5); }
.band p { margin-left:auto; margin-right:auto; }

/* ---------- FAQ ---------- */
.faq { max-width:760px; }
.faq details { border-bottom:1px solid var(--border); }
.faq details:first-child { border-top:1px solid var(--border); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  min-height:44px; padding:var(--s3) 0; font-weight:600; color:var(--text-strong); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-mono); color:var(--accent-strong); font-size:1.1rem; flex:none; }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { margin:0 0 var(--s3); }

/* ---------- Sign-up ---------- */
.signup { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; margin-top:var(--s4); }
.signup label { flex:1 0 100%; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.input { flex:0 1 320px; min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--border);
  border-radius:var(--radius-input); background:var(--surface-raised); color:var(--text-strong);
  font-family:var(--font-body); font-size:1rem; }
.input:focus-visible { border-color:var(--accent-strong); outline-offset:1px; }
.signup__note { min-height:1.6em; margin:var(--s2) auto 0; font-family:var(--font-mono); font-size:.78rem; color:var(--accent-strong); }
@media (max-width:640px){ .input { flex:1 1 100%; } .signup .btn { flex:1 1 100%; } }

/* ---------- Footer ---------- */
.foot__links { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }
.foot__links a { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.foot__links a:hover { color:var(--accent-strong); }

@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
  .btn:hover { transform:none; }
}

/* ---------- Small helpers ---------- */
section[id] { scroll-margin-top:72px; }
.demo-note { margin:var(--s5) auto 0; }
.below { margin-top:var(--s3); }
.foot__copy { margin:var(--s2) 0 0; }

/* ---------- Specificity repairs over brand.css ----------
   brand.css styles every `.nav a` as a mono nav link and every dark-theme `a` cyan;
   both outrank the button and wordmark classes, so restate them here. */
.wordmark, [data-theme="dark"] .wordmark { color:var(--text-strong); }
.nav .btn { font-family:var(--font-body); font-size:.9rem; letter-spacing:0; text-transform:none; }
.nav .btn--accent { color:#04302f; }
[data-theme="dark"] .nav .btn--accent { color:var(--navy); }
.nav .btn--secondary, [data-theme="dark"] .btn--secondary { color:var(--text-strong); }
.nav .btn--secondary:hover, [data-theme="dark"] .btn--secondary:hover { color:var(--accent-strong); }
.nav .btn--accent:hover { color:#04302f; }
[data-theme="dark"] .nav .btn--accent:hover { color:var(--navy); }
[data-theme="dark"] .btn--primary { color:var(--navy); }
[data-theme="dark"] .btn--secondary { border-color:color-mix(in srgb, var(--text) 28%, transparent); }
[data-theme="dark"] .btn--secondary:hover { border-color:var(--accent); }
.split > .section__head { margin-bottom:0; }
@media (max-width:820px){ .split { gap:var(--s5); } }
.film .caption { text-align:center; margin-left:auto; margin-right:auto; }