/* ============================================================
   BIDETVERDICT — "The Verdict Desk"
   An evidence journal for bidet seats & attachments.
   Design tokens (frozen names, tuned for WCAG AA on --paper):
     --paper    #FAF7F0  warm porcelain paper
     --paper-2  #F1EBDD  deeper band / inset panels
     --ink      #182420  deep green-black, primary text (14.9:1)
     --ink-soft #3E4C44  secondary text (8.6:1)
     --muted    #5D6B62  captions, metadata (5.4:1)
     --accent   #9C2B1F  verdict-seal red — stamps, key marks (7.1:1)
     --teal     #175448  porcelain teal — links, "recommended" (7.9:1)
     --bronze   #7A5210  "worth considering" (6.3:1)
     --line     #DCD3BE  hairline rules
     --dark     #101D17  dark band ground
   Type: Georgia serif display · system sans body · ui-monospace data.
   ============================================================ */

:root{
  --paper:#FAF7F0; --paper-2:#F1EBDD; --card:#FFFFFF;
  --ink:#182420; --ink-soft:#3E4C44; --muted:#5D6B62;
  --accent:#9C2B1F; --teal:#175448; --bronze:#7A5210;
  --line:#DCD3BE; --line-dark:#C9BFA4;
  --dark:#101D17; --dark-2:#16261E;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --measure:68ch; --wide:1180px;
  --radius:10px;
  --shadow:0 1px 2px rgba(24,36,32,.06);
  --shadow-lift:0 6px 18px rgba(24,36,32,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem; line-height:1.7; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:#FFF7EA}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman","Nimbus Roman",serif; font-weight:700; color:var(--ink)}
h1{font-size:clamp(2.3rem,1.55rem + 3.4vw,3.6rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 var(--s4)}
h2{font-size:clamp(1.55rem,1.3rem + 1.2vw,2rem); line-height:1.22; margin:0 0 var(--s4)}
h3{font-size:1.22rem; line-height:1.35; margin:0 0 var(--s2)}
p{margin:0 0 var(--s4); max-width:var(--measure)}
a{color:var(--teal); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{color:var(--accent)}
strong{font-weight:650}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s4); font-weight:600;
}
.eyebrow::after{content:""; flex:0 0 56px; height:2px; background:var(--accent)}
.lede{font-size:1.24rem; line-height:1.6; color:var(--ink-soft); max-width:60ch}
.small{font-size:.875rem; color:var(--muted); line-height:1.55}
.lead-answer{
  font-size:1.18rem; line-height:1.62; border-left:4px solid var(--accent);
  padding:var(--s2) 0 var(--s2) var(--s5); margin:0 0 var(--s6); max-width:64ch;
}
.lead-answer strong:first-child{color:var(--accent); text-transform:uppercase; font-size:.82rem; letter-spacing:.1em; display:block; margin-bottom:var(--s2); font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- layout ---------- */
.wrap{max-width:var(--wide); margin:0 auto; padding:0 var(--s5)}
.section{padding:var(--s8) 0}
.section.tight{padding:var(--s7) 0}
.band{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-dark{background:var(--dark); color:#EDE8DA}
.band-dark h2,.band-dark h3{color:#F5F1E4}
.band-dark p{color:#CFC9B8}
.band-dark .eyebrow{color:#E5A193}
.band-dark .eyebrow::after{background:#E5A193}
.prose{max-width:var(--measure)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} .section{padding:var(--s7) 0} }

/* ---------- masthead ---------- */
.masthead{border-bottom:3px double var(--ink); background:var(--paper)}
.masthead-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.masthead-main{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s5) 0 var(--s4); flex-wrap:wrap}
.wordmark{font-family:Georgia,serif; font-weight:700; font-size:2rem; letter-spacing:-.015em; color:var(--ink); text-decoration:none; line-height:1}
.wordmark em{font-style:normal; color:var(--accent)}
.wordmark:hover{color:var(--ink)}
.masthead-tag{font-size:.92rem; color:var(--muted); font-style:italic; font-family:Georgia,serif}
nav.mainnav{display:flex; gap:var(--s5); flex-wrap:wrap; padding:var(--s3) 0 var(--s4)}
nav.mainnav a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.98rem;
  min-height:44px; display:inline-flex; align-items:center; border-bottom:2px solid transparent;
}
nav.mainnav a:hover, nav.mainnav a[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:var(--s8) 0 var(--s7); border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s8); align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }
.hero-art{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--s5)}
.hero-art figcaption{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:var(--s3); display:flex; justify-content:space-between}
figure{margin:0}
svg text{font-family:ui-monospace,Menlo,Consolas,monospace}

/* docket stats strip */
.docket-strip{
  display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line);
  background:var(--card); border-radius:var(--radius); overflow:hidden; margin-top:var(--s7);
}
.docket-strip div{padding:var(--s4) var(--s5); border-left:1px solid var(--line)}
.docket-strip div:first-child{border-left:none}
.docket-strip .num{font-family:Georgia,serif; font-size:2rem; font-weight:700; line-height:1.1; display:block}
.docket-strip .lab{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
@media (max-width:900px){ .docket-strip{grid-template-columns:1fr 1fr} .docket-strip div:nth-child(3){border-left:none} .docket-strip div{border-top:1px solid var(--line)} .docket-strip div:nth-child(-n+2){border-top:none} }

/* ---------- verdict stamps ---------- */
.stamp{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 12px;
  border:2px solid currentColor; border-radius:4px; transform:rotate(-1.2deg); white-space:nowrap;
}
.stamp::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.stamp.rec{color:var(--teal)} .stamp.consider{color:var(--bronze)} .stamp.no{color:var(--accent)}
.stamp.big{font-size:.86rem; padding:9px 16px; border-width:2.5px}

/* ---------- score display ---------- */
.score-num{font-family:Georgia,serif; font-weight:700; font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums}
.score-num small{font-size:1rem; color:var(--muted); font-weight:400}
.bar{height:8px; background:var(--paper-2); border:1px solid var(--line); border-radius:99px; overflow:hidden; min-width:90px}
.bar i{display:block; height:100%; background:var(--teal)}
.bar.mid i{background:var(--bronze)} .bar.low i{background:var(--accent)}
.rubric-bars{display:grid; gap:var(--s3)}
.rubric-row{display:grid; grid-template-columns:170px 1fr 44px; align-items:center; gap:var(--s4); font-size:.95rem}
.rubric-row .crit{font-weight:600}
.rubric-row .val{font-family:ui-monospace,Menlo,Consolas,monospace; text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:640px){ .rubric-row{grid-template-columns:118px 1fr 40px; gap:var(--s3)} }

/* ---------- verdict table ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow)}
table.verdicts{border-collapse:collapse; width:100%; min-width:820px; font-size:.96rem}
table.verdicts th{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:var(--s4); border-bottom:2px solid var(--ink); white-space:nowrap; background:var(--paper);
}
table.verdicts td{padding:var(--s4); border-bottom:1px solid var(--line); vertical-align:middle}
table.verdicts tr:last-child td{border-bottom:none}
table.verdicts .model{font-family:Georgia,serif; font-weight:700; font-size:1.05rem}
table.verdicts .model a{color:var(--ink); text-decoration:none}
table.verdicts .model a:hover{color:var(--accent); text-decoration:underline}
table.verdicts .cls{font-size:.82rem; color:var(--muted); display:block; font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.04em}
.score-cell{display:flex; align-items:center; gap:var(--s3)}
.score-cell .score-num{font-size:1.5rem}
table.data{border-collapse:collapse; width:100%; font-size:.98rem; margin:0 0 var(--s5)}
table.data th, table.data td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
table.data th{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--ink)}
table.data td:first-child{font-weight:600; width:34%}
table.data{font-variant-numeric:tabular-nums}

/* ---------- scorecards ---------- */
.scorecard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--s6); margin:0 0 var(--s6);
}
.scorecard-head{display:flex; justify-content:space-between; gap:var(--s5); align-items:flex-start; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:var(--s4); margin-bottom:var(--s5)}
.docket-no{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700}
.scorecard .total{display:flex; align-items:center; gap:var(--s4)}
.wins-loses{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6)}
@media (max-width:760px){ .wins-loses{grid-template-columns:1fr} }
.wins-loses h4{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 var(--s3)}
.wins h4{color:var(--teal)} .loses h4{color:var(--accent)}
.wins-loses ul{margin:0; padding-left:1.15em}
.wins-loses li{margin-bottom:var(--s2)}

/* ---------- editorial bits ---------- */
.decision-num{
  font-family:Georgia,serif; font-size:3.2rem; font-weight:700; color:var(--accent); line-height:1;
  border-top:3px solid var(--ink); padding-top:var(--s3); display:block; margin-bottom:var(--s3);
}
.docket-list{border-top:2px solid var(--ink)}
.docket-item{
  display:grid; grid-template-columns:64px 1fr auto; gap:var(--s5); align-items:baseline;
  padding:var(--s5) 0; border-bottom:1px solid var(--line);
}
.docket-item .no{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--accent); font-weight:700; font-size:.9rem}
.docket-item h3{margin-bottom:var(--s1)}
.docket-item h3 a{color:var(--ink); text-decoration:none}
.docket-item h3 a:hover{color:var(--accent); text-decoration:underline}
.docket-item p{margin:0; color:var(--ink-soft); font-size:.98rem}
.docket-item .kind{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
@media (max-width:640px){ .docket-item{grid-template-columns:44px 1fr} .docket-item .kind{display:none} }
.pullquote{
  font-family:Georgia,serif; font-size:1.45rem; line-height:1.45; font-weight:700;
  border-left:4px solid var(--accent); padding-left:var(--s5); margin:var(--s6) 0; max-width:56ch;
}
.callout{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5) var(--s6); margin:0 0 var(--s6)}
.callout h3{margin-top:0}
.disclosure{
  border:1px dashed var(--line-dark); border-radius:var(--radius); padding:var(--s4) var(--s5);
  font-size:.9rem; color:var(--ink-soft); background:var(--card); margin:0 0 var(--s6);
}
.disclosure strong{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:var(--s1)}
ul.tight li, ol.tight li{margin-bottom:var(--s2)}
.checklist{list-style:none; padding:0; margin:0 0 var(--s5)}
.checklist li{padding:var(--s2) 0 var(--s2) 34px; position:relative; border-bottom:1px solid var(--line)}
.checklist li::before{
  content:""; position:absolute; left:2px; top:14px; width:16px; height:16px;
  border:2px solid var(--teal); border-radius:3px;
}
.steps{counter-reset:step; list-style:none; padding:0; margin:0}
.steps li{counter-increment:step; padding:0 0 var(--s5) 64px; position:relative}
.steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; color:var(--accent); font-size:1.05rem;
}
.steps h3{margin-bottom:var(--s1)}
.btn{
  display:inline-flex; align-items:center; min-height:48px; padding:10px 22px; border-radius:6px;
  background:var(--ink); color:#FFF9EC; text-decoration:none; font-weight:650; font-size:1rem;
}
.btn:hover{background:var(--accent); color:#FFF9EC}
.btn.ghost{background:transparent; color:var(--ink); border:2px solid var(--ink)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-row{display:flex; gap:var(--s4); flex-wrap:wrap; margin:var(--s5) 0}

/* ---------- footer ---------- */
footer.site{border-top:3px double var(--ink); margin-top:var(--s8); padding:var(--s7) 0 var(--s6); background:var(--paper)}
footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7)}
@media (max-width:760px){ footer.site .cols{grid-template-columns:1fr} }
footer.site h4{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s3)}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:var(--s2)}
footer.site a{color:var(--ink-soft); text-decoration:none}
footer.site a:hover{color:var(--accent); text-decoration:underline}
.colophon{border-top:1px solid var(--line); margin-top:var(--s6); padding-top:var(--s4); font-size:.85rem; color:var(--muted); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}

/* ---------- reveal on scroll (reduced-motion safe) ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease-out, transform .6s ease-out}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
}
@media (scripting: none){
  .reveal{opacity:1; transform:none}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}