/* Content pages (landing, saved, about, not found): cards on the dotted board, the same floating header as the workbench's pills. */
main{outline:none}
.section{width:min(1120px,100% - 32px);margin:0 auto;padding:56px 0 8px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-bottom:22px}
.section-head h2{font:800 clamp(24px,3vw,32px)/1.15 var(--sans);letter-spacing:-.01em}
.section-head p{max-width:56ch;color:var(--ink-2);font-size:16px}
.lead{max-width:44ch;margin-top:18px;color:var(--ink-2);font-size:clamp(17px,1.6vw,19px);line-height:1.6}

/* Hero: words on the left, the arena on the right, labelled like zones on a board */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:24px;width:min(1240px,100% - 32px);margin:0 auto;padding:clamp(16px,4vw,48px) 0 8px}
.hero-tag{margin-bottom:16px}
.hero h1{font:800 clamp(40px,6.2vw,76px)/1.04 var(--sans);letter-spacing:-.02em}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.facts div{display:grid;gap:2px;min-width:112px;padding:12px 16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1)}
.facts dt{order:2;color:var(--ink-3);font-size:13px;font-weight:600}
.facts dd{font:800 24px/1.1 var(--sans)}
.hero-art{position:relative;margin:0;aspect-ratio:1.25;min-width:0}
.arena{position:absolute;inset:6% 0 0;width:100%;height:94%;overflow:visible;filter:drop-shadow(0 18px 24px rgba(5,0,56,.12))}
.arena-labels{position:absolute;inset:6% 0 0}
.zone-label,.seat-label{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-2);font-size:14px;font-weight:700;white-space:nowrap}
.zone-label::after,.seat-label::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);box-shadow:3px 3px 4px rgba(5,0,56,.05)}
.swatch{width:12px;height:12px;border-radius:4px}
.swatch.stage{background:var(--ink)}.swatch.L1{background:var(--tier-L1)}.swatch.L4{background:var(--tier-L4)}.swatch.F{background:var(--tier-F)}
.seat-label{gap:10px;padding:8px 14px 8px 8px;transform:translate(-50%,calc(-100% - 10px))}
.seat-label b{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-xs);background:var(--a);font-size:15px;font-weight:800}
.seat-label span{display:grid;line-height:1.25}.seat-label small{color:var(--ink-3);font-weight:600}.seat-label strong{font-size:14px}
.deco{position:absolute;pointer-events:none}
.cloud{width:clamp(70px,9vw,120px);fill:#fff;stroke:var(--line-strong);stroke-width:2}
.cloud.c1{left:4%;top:2%}.cloud.c2{right:6%;top:14%;width:clamp(56px,6vw,84px)}
.star{width:22px;fill:var(--primary-soft);stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.star.s1{left:44%;top:0}.star.s2{right:2%;top:46%;width:16px}.star.s3{left:6%;top:56%;width:14px;fill:#fff}

/* How it works */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step-card{position:relative;padding:22px 22px 24px}
.step-card h3{margin:16px 0 6px;font:700 19px/1.3 var(--sans)}
.step-card p{color:var(--ink-2);font-size:15px;line-height:1.6}
.step-art{display:grid;place-items:center;width:56px;height:56px;border-radius:14px}
.step-art .ico{width:28px;height:28px;stroke-width:1.8}
.step-art{background:var(--surface-3);color:var(--ink)}
.step-no{position:absolute;right:20px;top:18px;color:var(--line-control);font:800 40px/1 var(--sans)}

/* Venues */
.venue-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);overflow:hidden}
.venue-thumb{display:grid;place-items:center;padding:20px;background:var(--surface-2);border-right:1px solid var(--line)}
.venue-thumb svg{width:100%;max-height:360px}
.venue-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(20px,3vw,36px)}
.venue-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--ink-3);font-size:13px;font-weight:600}
.venue-body h3{font:800 clamp(24px,2.6vw,30px)/1.15 var(--sans)}
.venue-body>p{color:var(--ink-2);line-height:1.6}
.venue-stats{list-style:none;display:flex;gap:28px;margin:4px 0 8px}
.venue-stats li{display:grid}.venue-stats b{font:800 26px/1.1 var(--sans)}.venue-stats span{color:var(--ink-3);font-size:13px;font-weight:600}
.venue-groups{display:grid;gap:24px;margin-top:28px}
.group-title{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:700 16px/1.3 var(--sans)}
.venue-cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.venue-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px var(--line)}
.venue-card strong{display:block;font-size:15px}.venue-card small{color:var(--ink-3);font-size:13px}
.venue-glyph{flex:0 0 40px;height:40px;border-radius:12px;background:var(--surface-3) center/24px no-repeat}
.venue-glyph.kind-arena{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364627f' stroke-width='1.7'%3E%3Cellipse cx='12' cy='12' rx='8.5' ry='6.5'/%3E%3Crect x='9' y='9.5' width='6' height='5' rx='1'/%3E%3C/svg%3E")}
.venue-glyph.kind-stadium{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364627f' stroke-width='1.7'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='5'/%3E%3Crect x='8' y='9' width='8' height='6'/%3E%3C/svg%3E")}
.venue-glyph.kind-hall{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364627f' stroke-width='1.7'%3E%3Cpath d='M4 19V10a8 8 0 0 1 16 0v9Z'/%3E%3Cpath d='M9 19v-5h6v5'/%3E%3C/svg%3E")}

/* Honesty */
.honesty{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px 40px;padding:clamp(22px,3vw,36px);background:var(--ink);color:#fff}
.honesty h2{font:800 clamp(22px,2.6vw,28px)/1.2 var(--sans)}
.honesty-list{list-style:none;display:grid;gap:12px}
.honesty-list li{position:relative;padding-left:28px;color:#e2e0f5;line-height:1.55}
.honesty-list li::before{content:"";position:absolute;left:4px;top:.45em;width:10px;height:10px;border-radius:3px;background:#b8b4e0}
.honesty .text-link{grid-column:2;color:#fff;justify-self:start}.honesty .text-link:hover{color:var(--a)}
.honesty :focus-visible{outline-color:var(--a)}
.site-footer{margin-top:64px}
.version-line{font-size:12px}

/* Saved comparisons: a grid of boards */
.saved-tools{display:flex;gap:8px;align-items:center}
.saved-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.saved-card{display:flex;flex-direction:column;overflow:hidden}
.saved-thumb{position:relative;display:grid;place-items:center;aspect-ratio:4/3;padding:12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.saved-thumb svg{width:100%;height:100%}
.saved-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.saved-pair{display:grid;gap:6px;font-size:14px;font-weight:600}
.saved-pair span{display:flex;align-items:center;gap:8px;min-width:0}
.saved-pair em{overflow:hidden;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.saved-meta{color:var(--ink-3);font-size:13px}
.saved-body .btn,.saved-body .badge{align-self:flex-start;margin-top:auto}
.saved-actions{display:flex;gap:8px;margin-top:10px}
.saved-card.old{opacity:.7}.saved-card.old .saved-thumb{filter:grayscale(1)}
.empty-state{display:grid;justify-items:center;gap:12px;padding:clamp(28px,6vw,64px) 24px;text-align:center}
.empty-state h2{font:800 22px/1.3 var(--sans)}
.empty-state p{max-width:46ch;color:var(--ink-2)}
.empty-art{display:grid;place-items:center;width:84px;height:84px;border-radius:24px;background:var(--a-soft)}
.empty-art .ico{width:40px;height:40px;stroke-width:1.6}
.note{margin-top:20px;color:var(--ink-3);font-size:13px}

/* About: a reading column with a contents card */
.about-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.toc{position:sticky;top:96px;padding:14px}
.toc p{padding:4px 10px 8px;color:var(--ink-2);font-size:13px;font-weight:700}
.toc ol{list-style:none;display:grid;gap:2px}
.toc a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px;font-weight:600;text-decoration:none}
.toc a:hover{background:var(--surface-3);color:var(--ink)}
.prose{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.prose section{padding:clamp(20px,3vw,32px);scroll-margin-top:96px}
.prose h2{margin-bottom:12px;font:800 22px/1.25 var(--sans)}
.prose h3{margin:18px 0 8px;font:700 16px/1.3 var(--sans)}
.prose p,.prose li{color:var(--ink-2);line-height:1.7}
.prose p+p{margin-top:10px}
.prose ul{display:grid;gap:6px;padding-left:20px}
.prose strong{color:var(--ink)}
.bands{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:6px;padding:0!important}
.bands li{display:grid;gap:4px;padding:14px;border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.bands b{color:var(--ink);font:800 20px/1.1 var(--sans)}.bands span{color:var(--ink-2);font-size:14px;font-weight:600}
.band-meter{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;margin-top:4px}.band-meter i{height:5px;border-radius:2px;background:var(--surface-3)}.band-meter i.on{background:var(--ink)}
.table-wrap{overflow-x:auto;margin-top:6px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--ink-3);font-size:12px;font-weight:700;letter-spacing:.04em}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;color:var(--ink)}
.version-box{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-3);font:500 12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-word}

/* Not found */
.lost{display:grid;justify-items:center;gap:14px;width:min(640px,100% - 32px);margin:clamp(24px,8vh,80px) auto;padding:clamp(28px,5vw,48px);text-align:center}
.lost-art{width:min(240px,60vw)}
.lost h1{font:800 clamp(26px,4vw,34px)/1.2 var(--sans)}
.lost p{color:var(--ink-2);max-width:42ch}
.lost .hero-actions{justify-content:center;margin-top:8px}

@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-art{max-width:640px;width:100%;justify-self:center}
  .steps{grid-template-columns:1fr}
  .venue-feature{grid-template-columns:1fr}.venue-thumb{border-right:0;border-bottom:1px solid var(--line)}.venue-thumb svg{max-height:240px}
  .honesty{grid-template-columns:1fr}.honesty .text-link{grid-column:1}
  .about-layout{grid-template-columns:minmax(0,1fr)}.toc{position:static}
  .bands{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .zone-label{padding:5px 8px;font-size:12px}.zone-label .swatch{width:9px;height:9px}
  .seat-label{padding:6px 10px 6px 6px}.seat-label b{width:22px;height:22px;font-size:13px}.seat-label strong{font-size:12px}
  .facts div{min-width:0;flex:1}
  .section{padding-top:40px}
}