/* Bowarr — Swiss-poster modular system. One saturated colour per sector (--c), ink on colour (--ci). */
:root{
  --ink:#111111; --paper:#ffffff; --grey:#f2f2ee; --mid:#6b6b66; --rule:#111111;
  --c:#1d3cff; --ci:#ffffff;
  --display:"Syne", "Arial Black", system-ui, sans-serif;
  --text:"Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --pad:16px; --max:1440px; --gap:2px;
}
@media (min-width:760px){ :root{ --pad:32px; } }
@media (min-width:1200px){ :root{ --pad:48px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--text); font-size:17px; line-height:1.6; font-feature-settings:"ss01"; overflow-x:hidden; }
@media (min-width:760px){ body{ font-size:18px; } }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); line-height:1.02; letter-spacing:-.02em; margin:0; }
p{ margin:0 0 1em; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 14px; z-index:9; }
.skip:focus{ left:8px; top:8px; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.ico{ display:inline-block; vertical-align:-3px; flex:none; }
.rot{ display:inline-block; transform:rotate(90deg); }

/* ---------- masthead ---------- */
.masthead{ border-bottom:2px solid var(--rule); background:var(--paper); position:relative; z-index:5; }
.masthead__bar{ display:flex; justify-content:space-between; gap:12px; padding:6px var(--pad); background:var(--ink); color:#fff; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; }
.masthead__count{ display:none; }
@media (min-width:760px){ .masthead__count{ display:inline; } }
.masthead__main{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px 20px; padding:14px var(--pad); max-width:var(--max); margin:0 auto; }
.brand{ grid-column:1; grid-row:1; display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand__mark{ width:36px; height:36px; }
.brand__word{ font-family:var(--display); font-weight:800; font-size:17px; line-height:.95; letter-spacing:-.01em; text-transform:uppercase; }
.masthead__about{ grid-column:3; grid-row:1; font-weight:600; font-size:15px; text-decoration:none; border:2px solid var(--ink); padding:6px 12px; }
.masthead__about:hover{ background:var(--ink); color:#fff; }
.sectorbar{ grid-column:1 / -1; }
.sectorbar ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(9,1fr); gap:var(--gap); }
.sectorbar__tile{ display:flex; flex-direction:column; justify-content:space-between; height:40px; padding:4px 6px; background:var(--c); color:var(--ci); text-decoration:none; position:relative; transition:transform .15s ease; }
.sectorbar__num{ font-family:var(--display); font-weight:800; font-size:13px; line-height:1; }
.sectorbar__name{ display:none; font-size:12px; font-weight:600; line-height:1.1; }
.sectorbar__tile:hover,.sectorbar__tile.is-on{ transform:translateY(-3px); box-shadow:0 3px 0 var(--ink); }
.sectorbar__tile.is-on::after{ content:""; position:absolute; left:50%; bottom:-11px; width:8px; height:8px; background:var(--ink); transform:translateX(-50%); }
@media (min-width:1000px){
  .masthead__main{ grid-template-columns:auto 1fr auto; }
  .sectorbar{ grid-column:2; grid-row:1; }
  .sectorbar__tile{ height:52px; padding:6px 8px; }
  .sectorbar__name{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------- shared blocks ---------- */
.kicker{ display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin:0 0 18px; }
.kicker__sq{ width:14px; height:14px; background:linear-gradient(90deg,#1d3cff 0 33%,#ff4b2b 33% 66%,#ffc21a 66%); }
.sec-head{ display:grid; grid-template-columns:1fr; gap:8px 32px; padding:48px var(--pad) 28px; max-width:var(--max); margin:0 auto; border-top:2px solid var(--rule); }
.sec-head__num{ font-family:var(--display); font-weight:800; font-size:15px; margin:0; }
.sec-head__title{ font-size:clamp(32px,4.2vw,58px); font-weight:800; line-height:1; }
.sec-head__lede{ color:#3a3a36; max-width:42ch; margin:0; align-self:end; }
@media (min-width:900px){ .sec-head{ grid-template-columns:120px 1fr minmax(260px,360px); padding-top:72px; } }
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; padding:14px 20px; text-decoration:none; font-weight:600; }
.btn:hover{ background:var(--c); color:var(--ci); }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 0; padding:0; margin:0 0 20px; font-size:13px; font-weight:500; letter-spacing:.02em; }
.crumbs li+li::before{ content:"/"; margin:0 8px; opacity:.6; }
.crumbs a{ text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- home hero ---------- */
.hero{ max-width:var(--max); margin:0 auto; padding:28px var(--pad) 0; }
.hero__head{ display:grid; gap:20px; padding-bottom:28px; }
.hero__title, .abouthero__title, .art__title{ overflow-wrap:break-word; hyphens:auto; }
.hero__title{ font-size:clamp(40px,6vw,88px); font-weight:800; line-height:.9; letter-spacing:-.035em; }
.hero__title span{ display:block; }
.hero__title span:nth-child(2){ color:transparent; -webkit-text-stroke:2px var(--ink); }
.hero__title span:nth-child(3){ color:#1d3cff; }
.hero__intro{ font-size:18px; max-width:46ch; }
.hero__pick{ display:flex; align-items:center; gap:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13px; margin:0; }
@media (min-width:1000px){
  .hero{ padding-top:44px; }
  .hero__head{ gap:0; padding-bottom:36px; }
  .hero__side{ display:grid; grid-template-columns:minmax(0,62ch) 1fr; align-items:end; gap:48px; margin-top:32px; padding-top:20px; border-top:2px solid var(--ink); }
  .hero__intro{ margin:0; max-width:none; font-size:19px; }
  .hero__pick{ justify-self:end; }
}
@media (min-width:1280px){ .hero__title{ font-size:min(6.1vw,100px); } .hero__head > *{ min-width:0; } .hero__title span{ white-space:nowrap; } }
@media (min-width:760px) and (max-width:999px){ .hero__title span:nth-child(2){ -webkit-text-stroke-width:1.6px; } }

.mosaic{ display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(168px,auto); gap:var(--gap); background:var(--paper); }
.mosaic a{ text-decoration:none; position:relative; overflow:hidden; }
.mosaic__tile{ background:var(--c); color:var(--ci); display:flex; flex-direction:column; padding:12px; min-height:168px; }
.mosaic__num{ font-family:var(--display); font-weight:800; font-size:14px; line-height:1; position:relative; z-index:2; }
.mosaic__art{ flex:1; position:relative; min-height:110px; margin:6px 0; }
.mosaic__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.mosaic__meta{ display:flex; flex-direction:column; gap:2px; position:relative; z-index:2; }
.mosaic__name{ font-family:var(--display); font-weight:800; font-size:17px; line-height:1.02; letter-spacing:-.01em; }
.mosaic__sub{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.mosaic__tile:hover .mosaic__art img{ transform:translateY(-6px) scale(1.04); }
.mosaic__tile::after{ content:""; position:absolute; inset:0; border:0 solid var(--ink); transition:border-width .15s; pointer-events:none; }
.mosaic__tile:hover::after{ border-width:4px; }
.mosaic .t9{ grid-column:1 / -1; }
.mosaic__core{ grid-column:1 / -1; background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; min-height:260px; }
.mosaic__art--core{ position:absolute; inset:0; margin:0; background:var(--ink) no-repeat center 22% / 78% auto; padding:0; }
.mosaic__art--core img{ width:100%; height:100%; max-height:none; object-fit:cover; }
.mosaic__core .mosaic__meta{ padding:14px; background:linear-gradient(0deg,rgba(17,17,17,.92),rgba(17,17,17,0)); }
.mosaic__core .mosaic__num{ color:#ffc21a; margin-bottom:6px; }
.mosaic__core .mosaic__name{ font-size:28px; }
@media (min-width:760px){
  .mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; grid-auto-flow:dense; }
  .mosaic__core{ grid-column:span 2; grid-row:span 2; min-height:0; }
  .mosaic__tile{ min-height:0; padding:16px; }
  .mosaic .t1,.mosaic .t3{ grid-row:span 2; }
  .mosaic__art img{ max-height:none; }
  .mosaic__name{ font-size:20px; }
}
@media (min-width:1200px){
  .mosaic{ grid-template-columns:repeat(6,1fr); grid-auto-rows:200px; grid-auto-flow:dense; }
  .mosaic__core{ grid-column:3 / span 2; grid-row:1 / span 2; }
  .mosaic .t1{ grid-column:1 / span 2; grid-row:1 / span 2; }
  .mosaic .t2{ grid-column:5 / span 2; grid-row:1; }
  .mosaic .t3{ grid-column:5; grid-row:2 / span 2; }
  .mosaic .t4{ grid-column:6; grid-row:2 / span 2; }
  .mosaic .t5{ grid-column:1; grid-row:3; }
  .mosaic .t6{ grid-column:2 / span 2; grid-row:3; }
  .mosaic .t7{ grid-column:4; grid-row:3; }
  .mosaic .t8{ grid-column:1 / span 2; grid-row:4; }
  .mosaic .t9{ grid-column:3 / span 4; grid-row:4; }
  .mosaic .t1 .mosaic__name{ font-size:34px; }
  .mosaic__core .mosaic__name{ font-size:38px; font-family:var(--display); font-weight:800; letter-spacing:-.03em; }
  .mosaic .t2,.mosaic .t6,.mosaic .t8,.mosaic .t9{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto 1fr; gap:0 12px; }
  .mosaic .t2 .mosaic__art,.mosaic .t6 .mosaic__art,.mosaic .t8 .mosaic__art,.mosaic .t9 .mosaic__art{ grid-column:2; grid-row:1 / span 2; margin:0; }
  .mosaic .t2 .mosaic__meta,.mosaic .t6 .mosaic__meta,.mosaic .t8 .mosaic__meta,.mosaic .t9 .mosaic__meta{ grid-column:1; grid-row:2; align-self:end; }
  .mosaic .t9 .mosaic__name{ font-size:34px; }
  .mosaic__name{ font-size:21px; }
  .mosaic__art{ min-height:50px; }
  .mosaic .t5 .mosaic__name,.mosaic .t7 .mosaic__name{ font-size:18px; }
}

/* ---------- decisions ---------- */
.decide{ margin-top:56px; }
.decide__row{ list-style:none; margin:0 auto; padding:0 var(--pad) 8px; max-width:var(--max); display:grid; grid-template-columns:1fr; gap:0; counter-reset:d; }
.decide__item{ border-top:2px solid var(--ink); padding:18px 0 22px; display:grid; grid-template-columns:64px 1fr; gap:0 16px; }
.decide__n{ grid-row:span 2; font-family:var(--display); font-weight:800; font-size:64px; line-height:.8; color:var(--c); -webkit-text-stroke:0; }
.decide__item:nth-child(1) .decide__n{ color:#1d3cff; } .decide__item:nth-child(2) .decide__n{ color:#ff4b2b; }
.decide__item:nth-child(3) .decide__n{ color:#6f7f14; } .decide__item:nth-child(4) .decide__n{ color:#6a2ee8; }
.decide__item:nth-child(5) .decide__n{ color:#00a67e; }
.decide__item h3{ font-size:24px; font-weight:800; margin:2px 0 6px; }
.decide__item p{ margin:0; font-size:16px; color:#33332f; }
@media (min-width:900px){
  .decide__row{ grid-template-columns:repeat(5,1fr); gap:0 2px; }
  .decide__item{ display:block; padding:22px 20px 28px 0; border-top-width:6px; }
  .decide__item + .decide__item{ padding-left:20px; border-left:0; }
  .decide__n{ display:block; font-size:120px; margin-bottom:18px; }
}
.is-cat .decide__n,.is-art .decide__n{ color:var(--c) !important; }
.decide--compact .decide__n{ font-size:64px; }
@media (min-width:900px){ .decide--compact .decide__n{ font-size:84px; } }

/* ---------- latest ---------- */
.latest{ margin-top:56px; }
.latest__grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1fr; gap:var(--gap); background:var(--paper); }
.play{ background:var(--grey); position:relative; }
.play__link{ display:flex; flex-direction:column; height:100%; padding:0 0 18px; text-decoration:none; }
.play__band{ display:flex; align-items:center; gap:10px; background:var(--c); color:var(--ci); padding:8px 16px; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.play__num{ font-family:var(--display); font-weight:800; font-size:15px; }
.play__title{ font-size:22px; font-weight:700; line-height:1.12; padding:16px 16px 0; margin-bottom:auto; letter-spacing:-.015em; }
.play__meta{ display:flex; align-items:center; gap:8px; padding:18px 16px 0; font-size:14px; font-weight:600; }
.play__link:hover .play__title{ text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--c); text-underline-offset:4px; }
.play--lead{ background:var(--c); color:var(--ci); }
.play--lead .play__band{ background:var(--ink); color:#fff; }
.play__art{ display:block; padding:18px 16px 0; }
.play__art img{ width:100%; max-width:420px; height:auto; aspect-ratio:4/3; object-fit:contain; margin:0 auto; }
.play--lead .play__title{ font-size:clamp(26px,3vw,40px); font-weight:800; line-height:1.02; }
.play__dek{ padding:14px 16px 0; margin:0; font-size:16px; }
@media (min-width:760px){ .latest__grid{ grid-template-columns:repeat(2,1fr); } .play--lead{ grid-column:1 / -1; } }
@media (min-width:1200px){
  .latest__grid{ grid-template-columns:repeat(4,1fr); }
  .play--lead{ grid-column:1 / span 2; grid-row:span 2; }
  .play--lead .play__link{ padding-bottom:26px; }
  .play__title{ font-size:21px; padding:18px 20px 0; }
  .play__meta,.play__dek,.play__art{ padding-left:20px; padding-right:20px; }
  .play__band{ padding:8px 20px; }
}

/* ---------- sector index ---------- */
.index{ margin-top:56px; }
.index__list{ list-style:none; margin:0 auto; padding:0 var(--pad); max-width:var(--max); }
.index__row a{ display:grid; grid-template-columns:52px 1fr 44px; gap:4px 14px; align-items:center; padding:16px 0; border-top:2px solid var(--ink); text-decoration:none; position:relative; }
.index__row:last-child a{ border-bottom:2px solid var(--ink); }
.index__num{ grid-row:span 2; width:52px; height:52px; display:grid; place-items:center; background:var(--c); color:var(--ci); font-family:var(--display); font-weight:800; font-size:18px; }
.index__name{ font-family:var(--display); font-weight:800; font-size:clamp(22px,2.3vw,32px); line-height:1; letter-spacing:-.02em; }
.index__desc{ grid-column:2; font-size:15px; color:#3a3a36; display:none; }
.index__count{ grid-column:2; grid-row:2; font-weight:600; font-size:14px; }
.index__count small{ font-size:inherit; margin-left:4px; font-weight:500; }
.index__go{ grid-column:3; grid-row:1 / span 2; width:44px; height:44px; display:grid; place-items:center; border:2px solid var(--ink); transition:background .15s, color .15s; }
.index__row a:hover .index__go{ background:var(--c); color:var(--ci); border-color:var(--c); }
.index__row a::before{ content:""; position:absolute; left:0; top:-2px; height:6px; width:0; background:var(--c); transition:width .3s ease; }
.index__row a:hover::before{ width:100%; }
@media (min-width:900px){
  .index__row a{ grid-template-columns:88px minmax(0,1.1fr) minmax(0,1.3fr) 90px 56px; gap:24px; padding:22px 0; }
  .index__num{ grid-row:auto; width:88px; height:88px; font-size:30px; }
  .index__desc{ display:block; grid-column:auto; }
  .index__count{ grid-column:auto; grid-row:auto; font-family:var(--display); font-weight:800; font-size:44px; line-height:1; display:flex; flex-direction:column; }
  .index__count small{ font-family:var(--text); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:4px 0 0; }
  .index__go{ grid-column:auto; grid-row:auto; width:56px; height:56px; }
}

/* ---------- colophon ---------- */
.colophon{ max-width:var(--max); margin:72px auto 0; padding:0 var(--pad) 72px; display:grid; gap:24px; }
.colophon__block{ background:var(--ink); color:#fff; padding:28px; background-image:linear-gradient(90deg,#1d3cff 0 11.1%,#6a2ee8 0 22.2%,#ff4b2b 0 33.3%,#6f7f14 0 44.4%,#00a67e 0 55.5%,#ffc21a 0 66.6%,#ff3d8b 0 77.7%,#161616 0 88.8%,#0aa2d9 0); background-size:100% 10px; background-repeat:no-repeat; background-position:bottom; }
.colophon__big{ font-family:var(--display); font-weight:800; font-size:clamp(30px,4.4vw,60px); line-height:.98; letter-spacing:-.02em; margin:0 0 10px; }
.colophon__text{ align-self:center; max-width:52ch; }
@media (min-width:900px){ .colophon{ grid-template-columns:1.3fr 1fr; gap:48px; } .colophon__block{ padding:44px; } }

/* ---------- category hero ---------- */
.cathero{ background:var(--c); color:var(--ci); display:grid; grid-template-columns:1fr; border-bottom:2px solid var(--ink); }
.cathero__text{ padding:28px var(--pad) 32px; max-width:820px; min-width:0; }
.cathero .crumbs a{ border-bottom-color:currentColor; }
.cathero__idx{ display:flex; align-items:baseline; gap:10px; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; }
.cathero__idx b{ font-family:var(--display); font-size:22px; letter-spacing:0; }
.cathero__title--long{ font-size:clamp(30px,4.2vw,62px) !important; line-height:.98 !important; }
.cathero__title{ overflow-wrap:break-word; font-size:clamp(32px,6.4vw,96px); font-weight:800; line-height:.92; letter-spacing:-.035em; margin-bottom:22px; }
.cathero__desc{ font-size:19px; max-width:44ch; font-weight:500; }
.cathero__facts{ display:grid; grid-template-columns:auto 1fr; gap:0; margin:26px 0 0; border-top:2px solid currentColor; }
.cathero__facts div{ padding:14px 22px 0 0; }
.cathero__facts div + div{ padding-left:22px; border-left:2px solid currentColor; }
.cathero__facts dt{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.cathero__facts dd{ margin:4px 0 0; font-family:var(--display); font-weight:800; font-size:40px; line-height:1; }
.cathero__watch dd{ font-family:var(--text); font-size:16px; font-weight:600; line-height:1.35; max-width:36ch; }
.cathero__art{ position:relative; min-height:320px; background:var(--paper) no-repeat center 30% / 66% auto; border-top:2px solid var(--ink); overflow:hidden; }
.cathero__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cathero__bignum{ position:absolute; right:12px; bottom:-10px; font-family:var(--display); font-weight:800; font-size:120px; line-height:.8; color:var(--c); -webkit-text-stroke:2px var(--ink); z-index:2; }
@media (min-width:900px){
  .cathero{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); min-height:560px; }
  .cathero__text{ padding:40px var(--pad) 48px; align-self:end; }
  .cathero__art{ border-top:0; border-left:2px solid var(--ink); min-height:0; background-size:64% auto; background-position:center 30%; }
  .cathero__bignum{ font-size:220px; right:24px; bottom:-18px; }
}

/* ---------- category plays ---------- */
.plays{ max-width:var(--max); margin:0 auto; padding:48px var(--pad) 8px; }
.plays__head{ display:grid; gap:10px 32px; margin-bottom:26px; }
.plays__head h2{ font-size:clamp(32px,4.6vw,60px); font-weight:800; }
.plays__head p{ max-width:46ch; color:#3a3a36; margin:0; align-self:end; }
@media (min-width:900px){ .plays__head{ grid-template-columns:1fr 380px; } }
.plays__grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:var(--gap); background:var(--ink); border:2px solid var(--ink); }
.pcard a{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; height:100%; padding:18px 16px; background:var(--paper); text-decoration:none; transition:background .15s; }
.pcard__n{ width:48px; height:48px; display:grid; place-items:center; background:var(--c); color:var(--ci); font-family:var(--display); font-weight:800; font-size:18px; }
.pcard__kick{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#55554f; margin-bottom:6px; }
.pcard__title{ font-size:21px; font-weight:700; line-height:1.12; letter-spacing:-.015em; margin-bottom:8px; }
.pcard__dek{ display:block; font-size:15px; color:#3a3a36; line-height:1.5; }
@media (max-width:759px){ .pcard a{ grid-template-columns:auto 1fr; } .pcard__go{ display:none !important; } }
.pcard__go{ align-self:end; width:40px; height:40px; display:grid; place-items:center; border:2px solid var(--ink); }
.pcard a:hover{ background:var(--grey); }
.pcard a:hover .pcard__go{ background:var(--c); color:var(--ci); border-color:var(--c); }
.pcard--lead a{ background:var(--ink); color:#fff; }
.pcard--lead .pcard__kick,.pcard--lead .pcard__dek{ color:#d8d8d2; }
.pcard--lead .pcard__go{ border-color:#fff; }
.pcard--lead a:hover{ background:#000; }
.pcard--lead .pcard__title{ font-size:clamp(24px,2.6vw,34px); font-weight:800; }
@media (min-width:760px){ .plays__grid{ grid-template-columns:repeat(2,1fr); } .pcard--lead{ grid-column:1 / -1; } .pcard--lead .pcard__n{ width:72px; height:72px; font-size:28px; } }
@media (min-width:1200px){ .plays__grid{ grid-template-columns:repeat(3,1fr); } .pcard--lead{ grid-column:span 2; grid-row:span 1; } .pcard a{ padding:24px 22px; } }
.plays__empty{ border:2px solid var(--ink); padding:24px; }

/* ---------- strip (sector nav) ---------- */
.strip{ max-width:var(--max); margin:64px auto 0; padding:0 var(--pad) 64px; }
.strip__label{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; }
.strip__row{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.strip__tile{ position:relative; display:flex; flex-direction:column; height:100%; min-height:132px; padding:10px; background:var(--c); color:var(--ci); text-decoration:none; overflow:hidden; }
.strip__num{ font-family:var(--display); font-weight:800; font-size:13px; }
.strip__tile img{ width:78%; height:auto; aspect-ratio:1; object-fit:contain; margin:4px auto; flex:1; min-height:0; transition:transform .3s; }
.strip__name{ font-weight:700; font-size:13px; line-height:1.15; }
.strip__tile:hover img{ transform:translateY(-4px); }
.strip__tile.is-on{ outline:4px solid var(--ink); outline-offset:-4px; }
.strip__tile.is-on::after{ content:"You are here"; position:absolute; top:8px; right:8px; background:var(--ink); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; }
@media (min-width:900px){ .strip__row{ grid-template-columns:repeat(9,1fr); } .strip__tile{ min-height:190px; } .strip__name{ font-size:14px; } }

/* ---------- article ---------- */
.art__band{ background:var(--c); color:var(--ci); padding:12px var(--pad); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 20px; border-bottom:2px solid var(--ink); }
.crumbs--band ol{ margin:0; }
.art__sector{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.art__sector b{ font-family:var(--display); font-size:16px; margin-right:4px; }
.art__titlewrap{ max-width:var(--max); margin:0 auto; padding:32px var(--pad) 30px; display:grid; gap:24px; border-bottom:2px solid var(--ink); }
.art__tile{ display:none; }
.art__kicker{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.art__kicker a{ text-decoration:none; border-bottom:3px solid var(--c); }
.art__title{ font-size:clamp(30px,4.4vw,62px); font-weight:800; line-height:1.02; letter-spacing:-.03em; max-width:22ch; margin-bottom:22px; }
.art__meta{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:0; }
.art__meta li{ padding:0 18px 0 0; margin-right:18px; border-right:2px solid var(--ink); font-weight:600; font-size:15px; line-height:1.3; }
.art__meta li:last-child{ border-right:0; }
.art__meta span{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); font-weight:600; }
@media (min-width:900px){
  .art__titlewrap{ grid-template-columns:260px 1fr; gap:48px; align-items:end; padding-top:48px; padding-bottom:40px; }
  .art__tile{ display:block; background:var(--c); aspect-ratio:1; padding:22px; border:2px solid var(--ink); }
  .art__tile img{ width:100%; height:100%; object-fit:contain; }
}
.art__grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1fr; }
.art__rail{ display:none; }
@media (min-width:1100px){
  .art__grid{ grid-template-columns:260px minmax(0,780px); gap:56px; }
  .art__rail{ display:block; padding-top:40px; }
  .railcard{ position:sticky; top:24px; border:2px solid var(--ink); }
  .railcard__label{ margin:0; padding:8px 14px; background:var(--ink); color:#fff; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .railcard__num{ margin:0; padding:14px 14px 0; font-family:var(--display); font-weight:800; font-size:72px; line-height:.9; color:var(--c); -webkit-text-stroke:1.5px var(--ink); }
  .railcard__name{ padding:6px 14px 14px; margin:0; font-family:var(--display); font-weight:800; font-size:20px; line-height:1.05; border-bottom:2px solid var(--ink); }
  .railcard__watch{ margin:0; padding:14px; font-size:14px; line-height:1.45; border-bottom:2px solid var(--ink); background:var(--c); color:var(--ci); }
  .railcard__watch b{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
  .railcard__jump{ list-style:none; margin:0; padding:8px 0; counter-reset:j; }
  .railcard__jump a{ display:flex; gap:10px; padding:7px 14px; font-weight:600; font-size:15px; text-decoration:none; }
  .railcard__jump a::before{ counter-increment:j; content:counter(j,decimal-leading-zero); font-family:var(--display); font-weight:800; color:var(--mid); }
  .railcard__jump a:hover{ background:var(--grey); }
}
.art__main{ padding:32px 0 0; min-width:0; }
@media (min-width:1100px){ .art__main{ padding-top:40px; } }

.tldr{ border:2px solid var(--ink); background:var(--ink); color:#fff; margin:0 0 40px; position:relative; }
.tldr__label{ margin:0; display:flex; align-items:center; gap:12px; padding:10px 18px; background:var(--c); color:var(--ci); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.tldr__label span{ font-family:var(--display); font-size:16px; letter-spacing:0; background:var(--ink); color:#fff; padding:2px 8px; }
.tldr__text{ margin:0; padding:20px 18px 24px; font-size:19px; line-height:1.55; font-weight:500; }
@media (min-width:760px){ .tldr__text{ padding:26px 28px 30px; font-size:21px; } .tldr__label{ padding:10px 28px; } }

/* prose: body from the writer */
.prose{ counter-reset:step; font-size:18px; line-height:1.7; }
@media (min-width:760px){ .prose{ font-size:19px; } }
.prose > p:first-child{ font-size:1.14em; line-height:1.55; font-weight:500; }
.prose p{ margin:0 0 1.15em; }
.prose a{ text-decoration:underline; text-decoration-color:var(--c); text-decoration-thickness:3px; text-underline-offset:3px; font-weight:600; }
.prose a:hover{ background:var(--c); color:var(--ci); text-decoration:none; }
.prose strong{ font-weight:700; }
.prose h2{ counter-increment:step; font-size:clamp(26px,3vw,36px); font-weight:800; line-height:1.08; margin:2.2em 0 .7em; padding-top:18px; border-top:6px solid var(--ink); position:relative; }
.prose h2::before{ content:"Step " counter(step,decimal-leading-zero); display:inline-block; font-family:var(--text); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--c); color:var(--ci); padding:4px 10px; margin-bottom:14px; }
.prose h2::after{ content:""; display:block; }
.prose h2::before{ display:table; }
.prose h3{ font-size:22px; font-weight:700; margin:1.7em 0 .5em; letter-spacing:-.01em; display:flex; gap:10px; align-items:baseline; }
.prose h3::before{ content:""; flex:none; width:12px; height:12px; background:var(--c); border:2px solid var(--ink); transform:translateY(-1px); }
.prose ul,.prose ol{ margin:0 0 1.4em; padding:0; list-style:none; }
.prose li{ position:relative; padding-left:30px; margin:0 0 .6em; }
.prose ul > li::before{ content:""; position:absolute; left:4px; top:.62em; width:10px; height:10px; background:var(--c); outline:2px solid var(--ink); outline-offset:0; }
.prose ol{ counter-reset:li; }
.prose ol > li{ counter-increment:li; padding-left:44px; }
.prose ol > li::before{ content:counter(li); position:absolute; left:0; top:.1em; width:30px; height:30px; display:grid; place-items:center; background:var(--ink); color:#fff; font-family:var(--display); font-weight:800; font-size:15px; line-height:1; }
.prose blockquote{ margin:1.8em 0; padding:22px 24px; background:var(--c); color:var(--ci); border-left:10px solid var(--ink); font-family:var(--display); font-weight:700; font-size:1.2em; line-height:1.3; }
.prose blockquote p:last-child{ margin:0; }
.prose table{ width:100%; border-collapse:collapse; margin:1.6em 0 2em; font-size:15px; line-height:1.45; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; border:2px solid var(--ink); }
.prose thead th{ background:var(--ink); color:#fff; text-align:left; font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:12px 14px; vertical-align:bottom; border-right:2px solid #333; }
.prose thead th:first-child{ box-shadow:inset 0 -6px 0 var(--c); }
.prose td{ padding:12px 14px; border-top:1px solid #cfcfc8; vertical-align:top; min-width:140px; }
.prose td:first-child{ font-weight:700; background:var(--grey); }
.prose tbody tr:hover td{ background:#fffbe6; }
.prose hr{ border:0; border-top:2px solid var(--ink); margin:2.4em 0; }
.prose code{ font-size:.9em; background:var(--grey); padding:2px 6px; }
@media (min-width:1000px){ .prose table{ display:table; } }

.faq{ margin:56px 0 0; border-top:6px solid var(--ink); padding-top:20px; }
.faq__title{ font-size:clamp(28px,3.4vw,44px); font-weight:800; margin-bottom:22px; }
.faq__item{ border:2px solid var(--ink); margin-bottom:-2px; }
.faq__item summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start; padding:16px; font-weight:700; font-size:18px; line-height:1.3; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__n{ font-family:var(--text); font-weight:700; font-size:13px; background:var(--c); color:var(--ci); padding:3px 7px; line-height:1.2; }
.faq__x{ width:22px; height:22px; position:relative; margin-top:2px; }
.faq__x::before,.faq__x::after{ content:""; position:absolute; left:2px; right:2px; top:9px; height:3px; background:var(--ink); transition:transform .2s; }
.faq__x::after{ transform:rotate(90deg); }
.faq__item[open] .faq__x::after{ transform:rotate(0); }
.faq__item[open] summary{ background:var(--grey); }
.faq__a{ padding:4px 16px 18px 64px; font-size:17px; line-height:1.6; }
.faq__a p{ margin:0; }
@media (max-width:560px){ .faq__a{ padding-left:16px; } }
.disclaimer{ margin:36px 0 0; font-size:14px; color:var(--mid); border-left:4px solid var(--c); padding-left:14px; }

.next{ max-width:var(--max); margin:72px auto 0; padding:0 var(--pad); }
.next__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:12px; border-top:6px solid var(--ink); padding-top:18px; margin-bottom:20px; }
.next__head h2{ font-size:clamp(28px,3.6vw,48px); font-weight:800; }
.next__all{ font-weight:700; text-decoration:none; display:inline-flex; gap:8px; align-items:center; border-bottom:3px solid var(--c); }
.next__grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:var(--gap); }
.ncard{ display:flex; flex-direction:column; height:100%; min-height:190px; padding:18px; background:var(--grey); text-decoration:none; border-top:10px solid var(--c); transition:background .15s, color .15s; }
.ncard__n{ font-family:var(--display); font-weight:800; font-size:15px; margin-bottom:12px; }
.ncard__title{ font-size:20px; font-weight:700; line-height:1.15; margin-bottom:auto; letter-spacing:-.01em; }
.ncard__meta{ display:flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; font-weight:600; }
.ncard:hover{ background:var(--c); color:var(--ci); }
@media (min-width:760px){ .next__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .next__grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- about ---------- */
.abouthero{ max-width:var(--max); margin:0 auto; padding:32px var(--pad) 40px; display:grid; gap:32px; border-bottom:2px solid var(--ink); }
.abou.hero__title, .abouthero__title, .art__title{ overflow-wrap:break-word; hyphens:auto; }
.hero__title{ font-size:clamp(42px,7vw,104px); font-weight:800; line-height:.92; letter-spacing:-.035em; margin-bottom:22px; }
.abouthero__lede{ font-size:20px; max-width:44ch; font-weight:500; }
.abouthero__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-self:end; }
.abouthero__tiles span{ aspect-ratio:1; display:flex; align-items:flex-end; padding:10px; font-family:var(--display); font-weight:800; font-size:clamp(20px,3vw,40px); }
@media (min-width:900px){ .abouthero{ grid-template-columns:1.4fr 1fr; align-items:end; padding-top:56px; } }
.aboutbody{ max-width:var(--max); margin:0 auto; padding:40px var(--pad) 0; }
.prose--about{ max-width:760px; counter-reset:none; }
.prose--about h2{ counter-increment:none; }
.prose--about h2::before{ content:"Note"; }

/* ---------- 404 ---------- */
.nf{ max-width:var(--max); margin:0 auto; padding:48px var(--pad) 24px; display:grid; gap:32px; align-items:center; }
.nf__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.nf__tiles span{ aspect-ratio:1; display:grid; place-items:center; background:#1d3cff; color:#fff; font-family:var(--display); font-weight:800; font-size:clamp(60px,12vw,180px); line-height:1; }
.nf__tiles span:nth-child(3){ background:#ffc21a; color:var(--ink); }
.nf__zero{ background:#ff4b2b !important; color:var(--ink) !important; }
.nf h1{ font-size:clamp(34px,5vw,64px); font-weight:800; margin-bottom:16px; }
@media (min-width:900px){ .nf{ grid-template-columns:1fr 1fr; padding-top:72px; } }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:#fff; margin-top:0; }
.foot__stripe{ display:grid; grid-template-columns:repeat(9,1fr); height:14px; }
.foot__grid{ max-width:var(--max); margin:0 auto; padding:44px var(--pad) 28px; display:grid; gap:32px; }
.foot__grid > *{ min-width:0; }
.foot__word{ font-family:var(--display); font-weight:800; font-size:clamp(36px,3.4vw,50px); line-height:.9; letter-spacing:-.035em; text-transform:uppercase; margin:0 0 16px; }
.foot__tag{ color:#cfcfc8; max-width:32ch; }
.foot__label{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9a9a93; margin:0 0 12px; }
.foot__nav ul{ list-style:none; padding:0; margin:0; }
.foot__nav a{ display:flex; align-items:center; gap:10px; padding:6px 0; text-decoration:none; font-weight:500; font-size:16px; border-bottom:1px solid #2c2c2a; }
.foot__nav a:hover{ color:#ffc21a; }
.foot__num{ width:28px; height:28px; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:12px; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.foot__about p{ color:#d8d8d2; font-size:16px; }
.foot__about a{ color:#fff; font-weight:600; }
.foot__fine{ font-size:13px !important; color:#9a9a93 !important; }
.foot__base{ max-width:var(--max); margin:0 auto; padding:16px var(--pad) 28px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:13px; color:#9a9a93; border-top:1px solid #2c2c2a; }
@media (min-width:900px){ .foot__grid{ grid-template-columns:1.2fr 1fr 1fr; gap:48px; } }

/* Syne is reserved for display sizes; working headings use the grotesk */
.mosaic__name,.play__title,.pcard__title,.ncard__title,.prose h2,.prose h3,.decide__item h3,.railcard__name,.faq__q{ font-family:var(--text); font-weight:700; letter-spacing:-.025em; }
.mosaic__name{ font-size:18px; line-height:1.08; }
.play--lead .play__title,.pcard--lead .pcard__title{ font-weight:700; letter-spacing:-.03em; }
.prose h2{ font-size:clamp(26px,2.8vw,34px); letter-spacing:-.03em; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }
main{ min-height:calc(100vh - 480px); }