/* ============================================================
   V2 — "A year of evenings"
   Layers on top of styles.css (tokens, nav, buttons, type).
   ============================================================ */

.v2-hero{
  background:
    radial-gradient(110% 80% at 22% 10%, rgba(240,169,60,.14) 0%, transparent 55%),
    linear-gradient(178deg,var(--night) 0%,var(--dusk) 100%);
  color:var(--paper);
  padding:clamp(56px,9vw,110px) 0 clamp(44px,6vw,72px);
}
.v2-hero h1{color:var(--paper);margin:18px 0 22px;max-width:15ch}
.v2-hero .lede{color:var(--light-60);max-width:52ch}
.v2-hero-note{
  margin-top:28px;font-size:13.5px;color:var(--light-35);
  display:flex;align-items:center;gap:9px;
}

/* ============================================================
   THE YEAR — signature widget
   ============================================================ */
.year-sec{background:var(--night);color:var(--paper);padding:clamp(46px,6vw,80px) 0 clamp(60px,8vw,104px)}

.year{
  border:1px solid var(--light-line);border-radius:26px;
  background:rgba(255,255,255,.02);overflow:hidden;
}

/* ---- setup controls ---- */
.year-set{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,34px);
  padding:clamp(22px,3vw,32px);
  border-bottom:1px solid var(--light-line);
  background:rgba(255,255,255,.025);
}
@media(max-width:820px){.year-set{grid-template-columns:1fr}}
/* grid items default to min-width:auto, which lets the pill rows push the
   card wider than the screen — let them shrink and wrap instead */
.year-set > div{min-width:0}
#regions{flex-wrap:wrap}
#regions .seg-b{flex:1 1 auto;text-align:center}
.set-lab{
  display:block;font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--light-35);margin-bottom:14px;
}
.year-run{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  padding-top:6px;border-top:1px solid var(--light-line);margin-top:2px;
}
.year-run .btn:disabled{opacity:.5;cursor:default}
.run-note{font-size:13.5px;color:var(--light-35)}

/* ---- the grid ---- */
.year-body{padding:clamp(22px,3vw,32px)}
.year-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:16px;margin-bottom:20px;
}
.year-title{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.9vw,1.35rem);letter-spacing:-.025em;color:var(--paper)}
.year-sub{font-size:13.5px;color:var(--light-35);margin:-8px 0 18px}

/* ---- which service am I looking at ---- */
.view-switch{
  display:inline-flex;gap:5px;padding:5px;flex-wrap:wrap;
  border-radius:100px;background:rgba(244,246,245,.06);
  border:1px solid var(--light-line);
}
.view-b{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:100px;white-space:nowrap;
  font-size:14.5px;font-weight:500;color:var(--light-60);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.view-b svg{width:17px;height:17px;flex:none}
.view-b:hover{color:var(--paper)}
.view-b.on{font-weight:600}
.view-b.on[data-view="dish"]{
  background:rgba(214,76,60,.22);color:#F3A99C;
  box-shadow:inset 0 0 0 1.5px rgba(214,76,60,.5);
}
.view-b.on[data-view="ours"]{background:var(--lamp);color:var(--dusk)}
@media(max-width:540px){
  .view-switch{width:100%}
  .view-b{flex:1 1 auto;justify-content:center;padding:11px 14px}
}

.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--light-35)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px;display:block}
.sw-clean{background:#4FB587}
.sw-rough{background:#E9A63C}
.sw-lost{background:#D6544A}

.grid-scroll{overflow-x:auto;padding-bottom:6px}
.grid-inner{min-width:680px}

.yr-months{
  display:grid;grid-template-columns:repeat(53,1fr);gap:3px;
  font-size:10.5px;color:var(--light-35);margin-bottom:7px;
  letter-spacing:.04em;
}
.yr-months span{grid-row:1;white-space:nowrap}

.yr-rows{display:flex;gap:8px}
.yr-days{
  display:grid;grid-template-rows:repeat(7,1fr);gap:3px;
  font-size:10px;color:var(--light-35);flex:none;padding-top:1px;
}
.yr-days span{display:grid;align-items:center;height:100%}

.yr-grid{
  display:grid;grid-template-rows:repeat(7,1fr);
  grid-auto-flow:column;grid-auto-columns:1fr;
  gap:3px;flex:1;
}
.cell{
  aspect-ratio:1;border-radius:2.5px;
  background:rgba(244,246,245,.055);
  transition:background .35s ease;
}
.cell.blank{background:none}
.cell.s0{background:#4FB587}
.cell.s1{background:#E9A63C}
.cell.s2{background:#D6544A}
.cell.pulse{animation:cellPop .4s ease}
@keyframes cellPop{0%{transform:scale(.55)}100%{transform:scale(1)}}

/* ---- tallies + log ---- */
.year-out{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(22px,3.5vw,44px);
  margin-top:clamp(26px,3.5vw,36px);
  padding-top:clamp(24px,3vw,30px);
  border-top:1px solid var(--light-line);
}
@media(max-width:860px){.year-out{grid-template-columns:1fr}}

.tallies{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.tally{
  border:1px solid var(--light-line);border-radius:16px;
  padding:16px 16px 14px;background:rgba(255,255,255,.02);
}
.tally b{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;
  line-height:1;display:block;margin-bottom:6px;
}
.tally.lost b{color:#F08A7C}
.tally.rough b{color:#F3B665}
.tally.clean b{color:#7FD3A6}
.tally span{font-size:12.5px;color:var(--light-35);line-height:1.35;display:block}

.verdict-line{
  font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.42;
  color:var(--light-60);
}
.verdict-line b{color:var(--paper);font-weight:600}

.log-head{
  font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--light-35);margin-bottom:14px;
}
.log{list-style:none;display:flex;flex-direction:column}
.log li{
  display:flex;gap:14px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--light-line);
  font-size:14.8px;line-height:1.42;
}
.log li:first-child{border-top:none}
.log .when{
  font-size:12.5px;font-weight:600;color:var(--light-35);
  flex:none;width:5.4em;letter-spacing:.02em;
}
.log .what{color:var(--light-60)}
.log li.lost .what{color:#F0A99C}
.log li.ok .what{color:#9FD9BC}
.log-empty{font-size:14.5px;color:var(--light-35);font-style:italic}
@media(max-width:460px){
  .log li{flex-direction:column;gap:3px}
  .log .when{width:auto}
}

/* ---- the flip ---- */
.flip{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:clamp(20px,2.6vw,26px) clamp(22px,3vw,32px);
  border-top:1px solid var(--light-line);
  background:rgba(240,169,60,.07);
}
.flip p{font-size:15.5px;line-height:1.5;color:var(--light-60);max-width:60ch;flex:1 1 320px}
.flip b{color:var(--paper);font-weight:600}

/* ============================================================
   VALUE BEATS
   ============================================================ */
.worth{background:var(--paper);padding:clamp(60px,8vw,104px) 0}
.worth-head{max-width:52ch;margin-bottom:clamp(34px,5vw,54px)}
.worth-head h2{margin:16px 0 16px}
.worth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.worth-grid{grid-template-columns:1fr}}
.worth-card{
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,2.8vw,32px);background:var(--paper);
}
.worth-card .num{
  font-family:var(--display);font-weight:700;font-size:2.3rem;
  letter-spacing:-.035em;line-height:1;color:var(--ember);
  display:block;margin-bottom:12px;
}
.worth-card h3{
  font-family:var(--display);font-weight:700;font-size:1.2rem;
  letter-spacing:-.02em;margin-bottom:10px;
}
.worth-card p{font-size:15px;line-height:1.5;color:var(--ink-60)}

/* split table */
.split{
  margin-top:clamp(34px,4.5vw,50px);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.split-row{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;
  border-top:1px solid var(--line);font-size:15px;
}
.split-row:first-child{border-top:none}
.split-row > div{padding:15px 18px;display:flex;align-items:center;gap:9px}
.split-row.head{background:rgba(22,40,58,.04);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-35)}
.split-row .what{color:var(--ink);font-weight:500}
.split .yes{color:var(--ink-60)}
.split .no{color:var(--ink-35)}
.split .ic{width:17px;height:17px;flex:none}
@media(max-width:700px){
  .split-row{grid-template-columns:1fr;gap:0}
  .split-row > div{padding:9px 16px}
  .split-row.head{display:none}
  .split-row .what{padding-top:16px;font-weight:600}
  .split-row > div:last-child{padding-bottom:16px}
}

/* ============================================================
   CLOSE
   ============================================================ */
.v2-close{background:var(--dusk);color:var(--paper);padding:clamp(56px,8vw,96px) 0 40px}
.v2-close-in{text-align:center;max-width:40ch;margin:0 auto clamp(40px,5vw,58px)}
.v2-close h2{color:var(--paper);margin-bottom:16px}
.v2-close .lede{margin:0 auto 30px}