/* Doors & Sets public site. Tokens follow brand/tokens.css. Desktop first. Breakpoints: desktop 1280+, tablet 768-1279 (compact layouts, 2-col grids), phone 767 and below. */
:root {
  --bg: #141214; --bg2: #0B0B0C; --cream: #F2ECDD; --print: #1E1A1C; --pink: #E0157A; --hot: #FF2E93;
  --muted: #CFC7B8; --dim: #8F8780; --label: #555555; --neon: #FFE3F1; --line: #3a3538; --perf: #8A8480;
  --gut: 80px; --shadow: 0 18px 44px rgba(0,0,0,.6);
  --paper: radial-gradient(ellipse at 40% 50%, transparent 55%, rgba(170,140,80,.16) 100%), #F2ECDD;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--cream); font-family: 'Share Tech Mono', monospace; font-size: 16px; line-height: 1.2; -webkit-text-stroke: .6px currentColor; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.page { max-width: 1440px; margin: 0 auto; position: relative; overflow-x: clip; }
.w { margin-left: var(--gut); margin-right: var(--gut); }
.sr { position: absolute; left: -9999px; }

/* type */
.a, .l, .mn { -webkit-text-stroke: 0; }
.a { font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: 1; font-size: var(--s, 16px); }
.l { font-family: 'Archivo Narrow', sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1.15; font-size: var(--s, 14px); letter-spacing: max(1px, calc(var(--s, 14px) / 8)); }
.m { font-size: var(--s, 16px); line-height: 1.3; }
.mn { font-family: 'Monoton', cursive; line-height: 1.05; font-size: var(--s, 40px); color: var(--neon); }
.b { display: block; }
.up { text-transform: uppercase; }
.nw { white-space: nowrap; }
.c-cream { color: var(--cream); } .c-pink { color: var(--pink); } .c-hot { color: var(--hot); } .c-muted { color: var(--muted); }
.c-dim { color: var(--dim); } .c-print { color: var(--print); } .c-label { color: var(--label); } .c-neon { color: var(--neon); } .c-ink { color: var(--bg); }
.neon { text-shadow: 0 0 6px #FF2E93, 0 0 18px #FF2E93, 0 0 42px #FF2E93, 0 0 80px #FF2E93; }
.neons { text-shadow: 0 0 4px #FF2E93, 0 0 12px #FF2E93, 0 0 28px #FF2E93; }
.neon-t { text-shadow: 0 0 8px #FF2E93; }
@media (max-width: 1279px) {
  :root { --gut: clamp(32px, 4.2vw, 56px); --shadow: 0 12px 28px rgba(0,0,0,.6); }
  /* tablet: halfway between the phone size (--sm) and the desktop size (--s) */
  .a, .l, .m, .mn { font-size: calc((var(--sm, var(--s, 16px)) + var(--s, 16px)) / 2); }
  .l { letter-spacing: max(1px, calc((var(--sm, var(--s, 14px)) + var(--s, 14px)) / 16)); }
}

/* header */
.hdr { height: 84px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; border-bottom: 2px dotted var(--line); }
.hdr-l { display: flex; align-items: center; gap: 56px; }
.logo { display: flex; align-items: baseline; gap: calc(var(--s) / 5); }
.nav { display: flex; gap: 34px; }
.nav a { padding: 6px 0; }
.nav a.on { box-shadow: 0 5px 0 var(--pink); }
.nav a.on .l { color: var(--cream); }
.nav a.cto.on .l { text-shadow: 0 0 10px var(--hot); }
.hdr-ig { display: flex; align-items: center; gap: 10px; }
.m-only { display: none; }
.chipc { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 48px; padding: 0 10px; border: 2px solid var(--cream); }
.chipc.on { background: var(--pink); border-color: var(--pink); }
.menu summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-text-stroke: 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 64px; z-index: 50; background: var(--bg2); border: 2px solid var(--line); padding: 8px 20px; min-width: 240px; }
.menu nav a { display: block; padding: 14px 0; border-bottom: 2px dotted var(--line); }
.menu nav a:last-child { border: 0; }
@media (max-width: 1279px) {
  .hdr { height: 64px; padding: 0 var(--gut); }
  .d-only { display: none !important; }
  .m-only { display: flex; }
  .hdr-m { display: flex; align-items: center; gap: 8px; position: relative; }
}

/* footer */
.ftr { margin: 0 var(--gut); border-top: 3px solid var(--pink); padding: 44px 0 52px; display: flex; justify-content: space-between; gap: 40px; }
.ftr-1 { width: 380px; display: flex; flex-direction: column; gap: 18px; }
.ftr-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 56px; align-content: start; }
.ftr-3 { width: 300px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hdl { display: flex; align-items: center; gap: 12px; }
.hdl > div { display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 1279px) {
  .ftr { flex-direction: column; gap: 16px; padding: 28px 0 40px; margin-top: 64px; }
  .ftr-1, .ftr-3 { width: auto; }
  .ftr-2 { grid-template-columns: 1fr; gap: 0; }
  .ftr-2 .hdl { height: 48px; border-top: 2px dotted var(--line); }
  .ftr-3 { gap: 8px; }
}

/* leader line */
.lead { display: flex; align-items: baseline; gap: 8px; line-height: 1.3; font-size: var(--s, 20px); }
.lead > span { white-space: nowrap; }
.lead .f { flex: 1; min-width: 10px; border-bottom: max(2px, calc(var(--s, 20px) / 10)) dotted currentColor; transform: translateY(calc(var(--s, 20px) * -.22)); }
.lead .t { text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1279px) { .lead { font-size: calc((var(--sm, var(--s, 20px)) + var(--s, 20px)) / 2); } }

/* thermal ticket */
.tk { position: relative; display: flex; background: var(--paper); box-shadow: var(--shadow); color: var(--print); }
.tk-band { width: 12px; background: var(--pink); flex: none; }
.perf { flex: none; border-left: 2px dotted var(--perf); position: relative; }
.perf::before, .perf::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--notch, var(--bg)); left: -12px; }
.perf::before { top: -11px; } .perf::after { bottom: -11px; }
.perfh { border-top: 2px dotted var(--perf); }

/* listing strip */
.strip { --notch: var(--bg); }
.strip .stub { width: 290px; flex: none; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.strip .stub-r { display: flex; justify-content: space-between; }
.strip .stub-v { font-size: 32px; line-height: 1.04; }
.strip .stub-v.long { font-size: 27px; }
.strip .stub-d { margin-top: auto; }
.strip .body { flex: 1; min-width: 0; padding: 20px 28px; display: flex; flex-direction: column; gap: 10px; }
.strip .body-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.strip .cols { display: flex; gap: 36px; }
.strip .cols > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.strip .big { width: 230px; flex: none; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; background: var(--pink); color: var(--cream); }
.strip .big .nm { display: none; }
.strip .big .tm { display: flex; align-items: baseline; gap: 6px; }
.strip .big.none .tm { opacity: .9; }
.strip-link { display: block; }
.strip.r1 { transform: rotate(.3deg); } .strip.r2 { transform: rotate(-.3deg); }
.noest { margin-top: 4px; }
@media (max-width: 1279px) {
  .strip { display: block; width: 100%; }
  .strip.r1, .strip.r2 { transform: none; }
  .strip .tk-band { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; }
  .strip .perf { border-left: 0; border-top: 2px dotted var(--perf); margin-left: 8px; }
  .strip .perf::before, .strip .perf::after { display: none; }
  .strip .stub { width: auto; padding: 16px 18px 0 24px; gap: 8px; }
  .strip .stub-v { font-size: 30px; } .strip .stub-v.long { font-size: 25px; }
  .strip .stub-d { margin-top: 0; }
  .strip .body { padding: 8px 18px 14px 24px; gap: 0; }
  .strip .body-h { display: none; }
  .strip .cols { flex-direction: column; gap: 3px; margin-top: 2px; }
  .strip .big { width: auto; padding: 12px 18px 12px 24px; flex-direction: row; align-items: center; justify-content: space-between; }
  .strip .big .nm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .strip .big .lb { display: none; }
}

/* sections */
.sh { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 20px; }
.sh-l { display: flex; flex-direction: column; gap: 12px; }
.more { display: flex; align-items: center; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 34px; }
.stack.g30 { gap: 30px; }
@media (max-width: 1279px) {
  .sh { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .sh-l { gap: 8px; }
  .stack, .stack.g30 { gap: 24px; }
  .sh .more.top { display: none; }
}
.allbtn { display: none; }
@media (max-width: 1279px) { .allbtn { display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--cream); height: 52px; padding: 0 16px; margin-top: 24px; } }

/* home hero: grid areas so the ticket can sit beside, below or after the headline */
.hero { --hs: clamp(140px, calc((100vw - 710px) / 3.6), 196px); padding-top: 60px; min-height: 640px; display: grid; grid-template-columns: minmax(0, 1fr) 520px; grid-template-areas: "k t" "h t" "p t"; grid-template-rows: auto auto 1fr; column-gap: 30px; align-items: start; }
.hero-k { grid-area: k; }
.hero-h { grid-area: h; margin: 20px 0 0; display: flex; flex-wrap: wrap; column-gap: calc(var(--hs) * .11); }
.hero-h .a { font-size: var(--hs); line-height: .86; letter-spacing: -1px; }
.hero-h .a:first-child { flex-basis: 100%; }
.hero-p { grid-area: p; margin-top: 24px; }
.hero-tix { grid-area: t; width: 100%; transform: rotate(2.5deg); margin-top: -4px; }
@media (min-width: 1440px) { .hero { --hs: 196px; grid-template-columns: minmax(0, 1fr) 570px; } }
.hero-tix .tk { --notch: var(--bg); display: flex; }
.hero-tix .s1 { width: 132px; flex: none; padding: 20px 14px; display: flex; flex-direction: column; gap: 5px; }
.hero-tix .s2 { flex: 1; min-width: 0; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 7px; }
.hero-tix .s3 { width: 104px; flex: none; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: var(--pink); }
.hero-tix .s2 .rows { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.hero-tix .s2 .ft { margin-top: auto; border-top: 2px dotted var(--perf); padding-top: 10px; }
.stamp { background: var(--bg); padding: 12px; transform: rotate(-3deg); display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.tk-mobile { display: none; }
.hero-tix .nr { display: flex; justify-content: space-between; }
.tk-foot .stamp { flex-direction: row; align-items: baseline; padding: 6px 10px; gap: 5px; }
@media (max-width: 1279px) {
  /* compact ticket. Rotation stays small: a wide rotated ticket drops its right edge by a full row of set times. */
  .hero { --hs: clamp(84px, 14.2vw, 150px); padding-top: 40px; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "k k" "h h" "p t"; grid-template-rows: auto; column-gap: 36px; row-gap: 0; align-items: center; }
  .hero-h { margin-top: 14px; flex-wrap: nowrap; }
  .hero-h .a:first-child { flex-basis: auto; }
  .hero-p { margin-top: 26px; }
  .hero-tix { transform: rotate(.9deg); margin-top: 26px; }
  .hero-tix .tk { display: block; }
  .hero-tix .tk-band { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; }
  .hero-tix .perf { border-left: 0; border-top: 2px dotted var(--perf); margin-left: 8px; }
  .hero-tix .perf::before, .hero-tix .perf::after { display: none; }
  .hero-tix .s1, .hero-tix .s3 { display: none; }
  .tk-mobile { display: flex; justify-content: space-between; padding: 14px 16px 12px 24px; }
  .tk-mobile > div { display: flex; flex-direction: column; gap: 2px; }
  .hero-tix .s2 { padding: 12px 16px 14px 24px; gap: 5px; }
  .hero-tix .s2 .ft, .hero-tix .s2 .nr { display: none; }
  .tk-foot { display: flex !important; }
  .hero-note { display: none; }
}
@media (max-width: 767px) {
  .hero { --hs: min(25vw, 150px); padding-top: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "h" "p" "t"; }
  .hero-h { flex-wrap: wrap; margin-top: 10px; }
  .hero-p { margin-top: 14px; }
  .hero-tix { margin-top: 22px; transform: rotate(.7deg); }
}
.tk-foot { display: none; background: var(--pink); padding: 10px 16px 10px 24px; align-items: center; justify-content: space-between; }
.hero-note { margin-top: 14px; text-align: right; }

/* city picker tiles */
.tiles { display: flex; gap: 40px; }
.tile { flex: none; position: relative; display: block; }
.tile.t1 { width: calc(58% - 20px); } .tile.t2 { width: calc(42% - 20px); }
.tile-box { position: relative; height: 360px; }
.tile-in { position: absolute; inset: 0; z-index: 5; padding: 26px 30px; display: flex; flex-direction: column; justify-content: space-between; }
.tile-top { display: flex; justify-content: space-between; }
.tile-bot { display: flex; align-items: flex-end; justify-content: space-between; }
.tile-info { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; background: var(--bg); padding: 14px 18px; }
.cap { margin-top: 8px; }
.tile .code { letter-spacing: -2px; line-height: .8; }
@media (max-width: 1279px) {
  .tiles { gap: 16px; padding-top: 30px; }
  .tile.t1, .tile.t2 { width: calc(50% - 8px); }
  .tile-box { height: 210px; }
  .tile-in { padding: 12px; }
  .tile-bot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tile-info { flex-direction: row; padding: 6px 8px; gap: 0; }
  .tile-info > :not(:first-child) { display: none; }
  .tile .code { letter-spacing: 0; }
  .tile-top .r { display: none; }
  .tile .cap { font-size: 10px; }
}

/* photos: duotone pink, halftone dots */
.ph { position: relative; overflow: hidden; background: var(--bg); flex: none; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25) brightness(1.05); }
.ph::after { content: ""; position: absolute; inset: 0; background: var(--pink); mix-blend-mode: multiply; opacity: .88; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: 2; background-image: radial-gradient(#141214 1.1px, transparent 1.6px); background-size: 5px 5px; opacity: .45; mix-blend-mode: multiply; }
.ph.bw::after { display: none; } .ph.bw::before { opacity: .3; }
.ph.fill { width: 100%; height: 100%; position: absolute; inset: 0; }

/* tonight alt row */
.alt { margin-top: 34px; display: flex; align-items: center; gap: 30px; border: 2px dashed var(--dim); padding: 22px 28px; flex-wrap: wrap; }
.alt .sp { flex: 1; }
@media (max-width: 1279px) { .alt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; margin-top: 24px; } .alt .sp { display: none; } }

/* catch the opener band (home) */
.ctob { margin-top: 130px; background: var(--bg2); padding: 90px var(--gut) 100px; }
.ctob-in { display: flex; gap: 70px; align-items: flex-start; }
.ctob-l { width: 660px; flex: none; display: flex; flex-direction: column; gap: 30px; }
.ctob-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 34px; }
.rule-pink { display: block; width: 60px; height: 3px; background: var(--hot); flex: none; }
.cto-one { border-top: 2px solid var(--hot); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cto-one .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tracks-note { transform: rotate(-.8deg); }
.tracks-note .tk-band { background: var(--hot); width: 14px; }
.tracks-note .in { flex: 1; padding: 22px 30px; display: flex; flex-direction: column; gap: 6px; }
.trow { display: flex; align-items: center; gap: 16px; }
.lbl-row { display: flex; align-items: center; gap: 16px; }
@media (max-width: 1279px) {
  .ctob { margin-top: 64px; padding: 44px var(--gut) 48px; }
  .ctob-in { flex-direction: column; gap: 20px; }
  .ctob-l { width: auto; gap: 20px; }
  .ctob-r { gap: 20px; width: 100%; }
  .ctob-l .desc, .ctob-l .allc, .ctob .cto-more { display: none; }
  .tracks-note .tk-band { width: 8px; }
  .tracks-note .in { padding: 14px 16px; gap: 4px; }
  .ctob .mobmore { display: flex !important; }
}
.mobmore { display: none; align-items: center; gap: 10px; height: 44px; }
.cto-more { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }

/* how it works */
.how { margin: 120px var(--gut) 0; display: flex; gap: 70px; align-items: flex-start; }
.how-l { width: 430px; flex: none; display: flex; flex-direction: column; gap: 22px; }
.how-t { flex: 1; padding: 22px 40px 30px; transform: rotate(.5deg); }
.step { display: flex; gap: 26px; padding: 22px 0; border-top: 2px dotted var(--perf); }
.step > div { display: flex; flex-direction: column; gap: 8px; }
.how-h { display: flex; justify-content: space-between; padding-bottom: 14px; }
@media (max-width: 1279px) {
  .how { margin: 64px var(--gut) 0; flex-direction: column; gap: 0; display: block; }
  .how-l { width: auto; margin-bottom: 20px; }
  .how-l .a { --s: 38px; }
  .how-t { transform: none; padding: 20px 20px 22px; }
  .step { gap: 14px; padding: 14px 0 0; margin-top: 14px; }
  .how-h { display: none; }
}

/* city page */
.mast { padding-top: 52px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.mast-l { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
.mast-h { display: flex; flex-direction: column; gap: 0; }
.mast-h .a { line-height: .84; }
.filters { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; box-sizing: border-box; border: 2px solid var(--cream); padding: 0 14px; height: 40px; gap: 10px; background: transparent; cursor: pointer; }
.chip.on { background: var(--cream); } .chip.on .l { color: var(--bg); }
.chip.on.pk { background: var(--pink); border-color: var(--pink); } .chip.on.pk .l { color: var(--cream); }
.chip.sm { height: 30px; padding: 0 10px; border-color: var(--dim); }
.chip select { background: transparent; border: 0; color: var(--cream); font: inherit; appearance: none; cursor: pointer; font-family: 'Archivo Narrow', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 15px; -webkit-text-stroke: 0; }
.chip select option { color: #000; }
.vsep { width: 2px; height: 28px; background: var(--line); margin: 0 6px; }
.box { width: 14px; height: 14px; border: 2px solid var(--cream); display: inline-block; flex: none; }
.chip.on .box { background: var(--bg); }
.mast-r { width: 340px; flex: none; margin-bottom: 6px; }
.key { margin: 50px var(--gut) 18px; border-top: 3px solid var(--cream); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.key > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.grp { display: flex; gap: 30px; margin-top: 6px; border-top: 4px solid var(--cream); padding-top: 4px; }
.grp-d { width: 170px; flex: none; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.grp-d .a { line-height: .85; }
.grp-r { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; padding: 24px 0; border-top: 2px dotted var(--line); }
.row:first-child { border-top: 0; }
.row-t { width: 215px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.row-t .tm { display: flex; align-items: baseline; gap: 6px; }
.row-n { width: 470px; flex: none; display: flex; flex-direction: column; gap: 9px; padding-right: 20px; min-width: 0; }
.row-v { width: 215px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.row-g { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.arrbox { width: 44px; height: 44px; border: 2px solid var(--cream); display: flex; align-items: center; justify-content: center; flex: none; }
.badge { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--hot); padding: 3px 10px; box-shadow: 0 0 12px rgba(255,46,147,.55), inset 0 0 8px rgba(255,46,147,.35); }
.later { margin: 44px 0 6px; display: flex; align-items: center; gap: 20px; }
.later .fl { flex: 1; border-top: 2px dotted var(--line); }
.empty { margin: 60px var(--gut); border: 2px dashed var(--dim); padding: 40px; }
@media (max-width: 1279px) {
  .mast { flex-direction: column; align-items: stretch; padding-top: 34px; gap: 20px; }
  .mast-r { width: 100%; margin: 0; }
  .filters { margin-top: 10px; gap: 8px; }
  .chip { height: 36px; padding: 0 10px; }
  .vsep { display: none; }
  .key { margin: 34px var(--gut) 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .grp { flex-direction: column; gap: 0; }
  .grp-d { width: auto; flex-direction: row; align-items: baseline; gap: 12px; padding-top: 14px; }
  .grp-d .a { --s: 60px; }
  .row { flex-wrap: wrap; padding: 16px 0; gap: 6px 14px; }
  .row-t { width: 100%; flex-direction: row; align-items: baseline; gap: 12px; }
  .row-t .l { order: 2; }
  .row-n { width: 100%; padding: 0; order: 3; }
  .row-v { width: auto; flex: 1; order: 4; }
  .row-g { order: 5; gap: 10px; }
  .empty { margin: 40px var(--gut); padding: 24px; }
}

/* show page */
.crumb { margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stitle { margin-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.stitle-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stitle-l .big { line-height: .86; overflow-wrap: anywhere; }
.with { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.buy-w { width: 420px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.buy { background: var(--pink); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 6px 6px 0 var(--cream); color: var(--cream); }
.buy .b1 { font-size: 44px; line-height: 1; font-weight: 700; -webkit-text-stroke: 1.4px currentColor; }
.buy .b2 { font-size: 22px; line-height: 1; font-weight: 700; -webkit-text-stroke: 1px currentColor; }
.buy > div { display: flex; flex-direction: column; gap: 8px; }
.buy-m { display: none; }
.stk { margin: 56px var(--gut) 0; position: relative; }
.stk .tk { transform: rotate(-.6deg); --notch: var(--bg); }
.stk .tk-band { width: 16px; }
.stk .s1 { width: 210px; flex: none; padding: 30px 22px; display: flex; flex-direction: column; gap: 6px; }
.stk .s2 { flex: 1; min-width: 0; position: relative; padding: 28px 44px 30px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.stk .s3 { width: 260px; flex: none; padding: 26px 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: var(--pink); color: var(--cream); }
.stk .wm { position: absolute; left: 120px; top: 40px; opacity: .14; pointer-events: none; }
.stk .wm .a { display: inline-block; transform: rotate(-5deg); }
.stk .rel { position: relative; }
.stk .lines { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.stk .cells { border-top: 2px dotted var(--perf); padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; position: relative; flex-wrap: wrap; }
.cell { display: flex; flex-direction: column; gap: 2px; }
.stk .foot { margin-top: 16px; display: flex; justify-content: space-between; gap: 30px; }
.tl { position: relative; height: 46px; margin: 8px 0 48px; border-bottom: 3px solid var(--print); }
.tl .tick { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--perf); }
.tl .tick span { position: absolute; left: 6px; bottom: -26px; white-space: nowrap; }
.tl .blk { position: absolute; top: 6px; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--print); overflow: hidden; }
.tl .blk.pk { background: var(--pink); }
.tl .blk span { white-space: nowrap; }
.tl .cf { position: absolute; top: -8px; bottom: 0; border-left: 3px dashed var(--pink); }
.s-cols { margin: 96px var(--gut) 0; display: flex; gap: 80px; align-items: flex-start; }
.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 46px; }
.s-side { width: 470px; flex: none; display: flex; flex-direction: column; gap: 30px; }
.tb { display: flex; flex-direction: column; gap: 14px; }
.tb-h { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 3px solid var(--cream); padding-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.tb-h .r { display: flex; gap: 14px; align-items: center; }
.tb-photo { display: flex; gap: 18px; align-items: flex-end; }
.pl { display: flex; align-items: center; gap: 18px; }
.pl .tt { flex: 1; display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.pbtn { width: 48px; height: 48px; flex: none; border: 0; padding: 0; background: var(--pink); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-text-stroke: 0; }
.pbtn.hot { background: var(--hot); }
.pbtn svg { display: block; }
.pbtn .pa { display: none; }
.pbtn.playing .pp { display: none; } .pbtn.playing .pa { display: block; }
.pbtn.err { opacity: .4; }
.ctobox { border: 2px solid var(--pink); padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.ctobox .nn { white-space: nowrap; display: flex; flex-direction: column; gap: 6px; }
.room { display: flex; flex-direction: column; gap: 12px; }
.room dl { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; border-top: 2px dotted var(--line); padding-top: 16px; }
.room dl > div { display: flex; gap: 14px; align-items: baseline; }
.room dt { width: 96px; flex: none; }
.room dd { margin: 0; }
.arch { margin: 90px var(--gut) 0; border-top: 3px solid var(--cream); padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.arch > div:first-child { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1279px) {
  .crumb { margin: 18px var(--gut) 0; gap: 10px; }
  .stitle { margin: 14px var(--gut) 0; flex-direction: column; align-items: stretch; gap: 22px; }
  .stitle-l { gap: 12px; }
  .stitle-l .big { --s: min(24.6vw, 96px); }
  .buy-w { display: none; }
  .buy-m { display: block; margin: 24px var(--gut) 0; }
  .buy { height: 84px; padding: 0 20px; box-shadow: 5px 5px 0 var(--cream); }
  .buy .b1 { font-size: 34px; -webkit-text-stroke: 1.2px currentColor; } .buy .b2 { font-size: 17px; }
  .buy > div { gap: 6px; }
  .stk { margin: 26px var(--gut) 0; }
  .stk .tk { display: block; transform: rotate(-.5deg); overflow: hidden; }
  .stk .tk-band { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; }
  .stk .s1, .stk .s3, .stk .perf { display: none; }
  .stk .s2 { padding: 18px 18px 8px 26px; overflow: visible; }
  .stk .wm { left: auto; right: -6px; top: 150px; opacity: .045; }
  .stk .wm .a { --s: 190px; }
  .stk .cells, .stk .tl { display: none; }
  .stk .foot { flex-direction: column; gap: 4px; }
  .tkm { display: flex !important; }
  .s-cols { margin: 52px 0 0; flex-direction: column; gap: 56px; align-items: stretch; }
  .s-main { gap: 34px; }
  .s-main > .hd, .s-side { padding: 0 var(--gut); }
  .s-side { width: auto; }
  .tb { margin: 0 var(--gut); gap: 6px; }
  .tb-h { margin-bottom: 6px; padding-bottom: 8px; }
  .pl { height: 56px; gap: 14px; }
  .pl .tt { flex-direction: column; gap: 3px; order: 2; }
  .pl .n { order: 3; }
  .ctobox { display: none; }
  .arch { margin: 48px var(--gut) 0; flex-direction: column; align-items: flex-start; gap: 10px; border-top: 0; padding-top: 0; }
}
.tkm { display: none; justify-content: space-between; align-items: flex-end; border-top: 2px dotted var(--perf); padding: 12px 18px 14px 26px; position: relative; }
.gobox { display: none; }
@media (max-width: 1279px) { .gobox { display: flex; margin: 22px var(--gut) 0; border: 2px solid var(--pink); padding: 14px 16px; flex-direction: column; gap: 4px; } }

/* cto page */
.cto-page { background: var(--bg2); --notch: var(--bg2); }
.cto-page .perf { --notch: var(--bg2); }
.chero { padding-top: 70px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.chero-l { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.chero-r { width: 300px; flex: none; display: flex; flex-direction: column; gap: 18px; padding-top: 30px; }
.chero-nn { display: flex; flex-direction: column; gap: 12px; }
.getearly { display: flex; align-items: center; gap: 18px; }
.getearly i { width: 90px; height: 3px; background: var(--hot); box-shadow: 0 0 10px var(--hot); display: block; }
.cfeat { margin: 80px var(--gut) 0; border-top: 2px solid var(--hot); padding-top: 56px; display: flex; gap: 56px; align-items: stretch; }
.cfeat-l { width: 560px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.cfeat-l .a { line-height: .82; }
.cfeat-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
.cfeat-r .tk { transform: rotate(.8deg); }
.cfeat-r .tk-band { background: var(--hot); width: 14px; }
.cfeat-r .in { flex: 1; padding: 26px 34px 28px; display: flex; flex-direction: column; gap: 8px; }
.cstamp { position: absolute; right: -14px; top: -14px; width: 84px; height: 84px; border-radius: 50%; background: var(--hot); display: flex; align-items: center; justify-content: center; transform: rotate(12deg); }
.cstamp.pk { background: var(--pink); width: 80px; height: 80px; right: -12px; }
.csec { margin: 96px var(--gut) 0; display: flex; flex-direction: column; gap: 30px; }
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.ocard { position: relative; display: flex; background: var(--paper); box-shadow: var(--shadow); color: var(--print); min-width: 0; }
.ocard .tk-band { width: 14px; }
.ocard .in { flex: 1; min-width: 0; padding: 26px 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.ocard .oh { display: flex; justify-content: space-between; align-items: center; padding-right: 70px; gap: 10px; }
.ocard .ob { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ocard .ot { border-top: 2px dotted var(--perf); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.floor { display: flex; flex-direction: column; gap: 20px; }
.floor-p { display: flex; gap: 20px; flex-wrap: wrap; }
.why { margin: 100px var(--gut) 0; display: flex; gap: 60px; border-top: 2px dotted var(--line); padding-top: 50px; align-items: flex-start; }
.why-g { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.why-g > div { border-top: 2px solid var(--hot); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1279px) {
  .chero { flex-direction: column; padding-top: 40px; gap: 24px; }
  .chero-l { gap: 20px; }
  .chero-r { width: auto; padding-top: 0; }
  .cfeat { margin: 40px var(--gut) 0; flex-direction: column; gap: 24px; padding-top: 30px; }
  .cfeat-l { width: auto; }
  .cfeat-l .a { --s: min(36vw, 160px); }
  .cfeat-r .in { padding: 20px; }
  .csec { margin: 56px var(--gut) 0; }
  .cgrid { grid-template-columns: 1fr; gap: 28px; }
  .ocard .in { padding: 20px 18px; }
  .ocard .oh { padding-right: 56px; }
  .mast-r .ph { height: 240px !important; }
  .why { margin: 56px var(--gut) 0; flex-direction: column; gap: 24px; padding-top: 30px; }
  .why-g { grid-template-columns: 1fr; gap: 24px; }
}

/* archive */
.ahead { padding-top: 52px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.ahead-l { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ahead-l .a { line-height: .84; }
.stats { display: flex; gap: 40px; margin-top: 14px; flex-wrap: wrap; }
.stats > div { display: flex; flex-direction: column; gap: 6px; }
.ahead-r { width: 420px; flex: none; margin-bottom: 8px; }
.afil { margin-top: 54px; border-top: 3px solid var(--cream); padding: 22px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acol { border-top: 2px solid var(--cream); border-bottom: 2px dotted var(--line); padding: 12px 0; display: flex; }
.arow { display: flex; align-items: center; padding: 22px 0; border-bottom: 2px dotted var(--line); }
.arow .d { width: 170px; flex: none; display: flex; align-items: baseline; gap: 12px; }
.arow .d > div { display: flex; flex-direction: column; gap: 4px; }
.arow .bill { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; row-gap: 8px; padding-right: 30px; }
.arow .bill > span { display: inline-flex; align-items: baseline; gap: 8px; margin-right: 26px; }
.arow .ev { width: 300px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.aspec { margin-top: 90px; display: flex; gap: 70px; align-items: center; }
.aspec-l { width: 430px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.aspec .tk { flex: 1; transform: rotate(-.8deg); }
.aspec .tk-band { width: 14px; }
.aspec .in { flex: 1; padding: 26px 36px 28px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aspec .th { display: flex; gap: 10px; padding: 8px 0; border-bottom: 2px dotted var(--perf); }
.aspec .tr { display: flex; gap: 10px; padding: 6px 0; }
.pager { margin: 30px 0 0; display: flex; justify-content: space-between; }
@media (max-width: 1279px) {
  .ahead { flex-direction: column; align-items: stretch; padding-top: 34px; gap: 24px; }
  .ahead-l .a.big { --s: min(36vw, 150px); }
  .stats { gap: 24px 36px; }
  .stats .a { --s: 54px; }
  .ahead-r { width: 100%; }
  .afil { margin-top: 30px; gap: 8px; }
  .acol { display: none; }
  .arow { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 0; }
  .arow .d { width: auto; }
  .arow .bill { padding-right: 0; }
  .arow .ev { width: auto; }
  .aspec { margin-top: 50px; flex-direction: column; gap: 24px; align-items: stretch; }
  .aspec-l { width: auto; }
  .aspec .tk { transform: none; }
  .aspec .in { padding: 20px 16px; }
  .aspec .tr .m, .aspec .th .m { --sm: 14px; }
}
.chip .l { white-space: nowrap; }
.filters { gap: 10px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--pink); color: #141214; padding: 10px 14px; font: 600 16px 'Archivo Narrow', sans-serif; }
.skip:focus { left: 8px; top: 8px; }

/* ===================================================================== responsive pass */
[id] { scroll-margin-top: 84px; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
.chip:focus-within { outline: 3px solid var(--hot); outline-offset: 3px; }
.chip select:focus-visible { outline: 0; }
.menu summary:focus-visible { outline-offset: -3px; }
.endpad { height: 100px; }
.city-ph { display: none; }
.fchips { display: contents; }
.room-sel { margin-left: auto; }
.ph img { aspect-ratio: auto; }

/* desktop 1280 to 1439: keep fixed-width rows from overflowing */
.row-n { width: auto; flex: 1 1 0; min-width: 0; }
@media (min-width: 1280px) { .ctob-l { width: clamp(560px, 52%, 660px); } }
@media (min-width: 1280px) and (max-width: 1439px) {
  .ctob-l .mn:first-child { font-size: 112px; }
  .row-t, .row-v { width: 190px; }
  .arow .ev { width: 260px; }
}

/* ---------- compact (tablet and phone) ---------- */
@media (max-width: 1279px) {
  .hdr { gap: 12px; }
  .hdr-l { min-width: 0; }
  .chipc { height: 44px; min-width: 44px; padding: 0 10px; }
  .hdr-m { gap: 6px; flex: none; }
  .mast-h .a { font-size: clamp(60px, 13vw, 150px); }
  .footer-fix { display: none; }
  .tiles { padding-top: 24px; }
  .sh { margin-bottom: 20px; }
  .chip { height: 44px; }
  .chip.sm { height: 32px; }
  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .fchips { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .fchips::-webkit-scrollbar { display: none; }
  .fchips > * { flex: none; }
  .room-sel { margin-left: 0; width: 100%; }
  .room-sel select { flex: 1; min-width: 0; width: 100%; }
  .room-sel::after { content: ""; width: 9px; height: 9px; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); flex: none; }
  .ftr-3 .hdl, .ftr a { min-height: 44px; }
  .ftr-3 a { display: inline-flex; align-items: center; }
}

/* ---------- tablet 768 to 1279 ---------- */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero { grid-template-columns: minmax(0, 1fr) clamp(340px, 44vw, 440px); }
  .stack, .stack.g30 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; align-items: stretch; }
  .strip-link { display: flex; }
  .strip-link .strip { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .strip .body { flex: 1; }
  .sh { flex-direction: row; align-items: flex-end; }
  .sh .more.top { display: flex; }
  .allbtn { display: none; }
  .alt { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
  .tile-box { height: clamp(250px, 32vw, 340px); }
  .tile-in { padding: 18px; }
  .tile-info { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; }
  .tile-info > :nth-child(2) { display: block; }
  .tile-bot { gap: 8px; }
  .tile .cap { font-size: 11px; }
  .tiles { gap: 24px; }
  .tile.t1, .tile.t2 { width: calc(50% - 12px); }
  /* catch the opener band */
  .ctob { padding: 56px var(--gut) 64px; }
  .ctob-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
  .ctob-l { width: auto; }
  .ctob-l .desc, .ctob-l .allc { display: block; }
  .ctob-l .allc { display: flex; }
  .ctob .cto-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .ctob .mobmore { display: none !important; }
  .ctob-l .mn:first-child { font-size: clamp(56px, 9vw, 112px); }
  .ctob-l .mn:last-child { font-size: clamp(28px, 4.4vw, 54px); }
  .cto-one .r1 { flex-wrap: wrap; row-gap: 4px; }
  /* how it works */
  .how { margin: 80px var(--gut) 0; }
  .how-t { max-width: 640px; }
  /* city */
  .mast { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 28vw, 260px); grid-template-areas: "l r" "f f"; column-gap: 28px; align-items: end; padding-top: 40px; }
  .mast-l { display: contents; }
  .mast-l > .l { grid-area: k; }
  .mast { grid-template-areas: "k r" "h r" "f f"; grid-template-rows: auto 1fr auto; }
  .mast-h { grid-area: h; }
  .filters { grid-area: f; margin-top: 24px; }
  .mast-r { grid-area: r; }
  .mast-r .ph { height: clamp(200px, 30vw, 300px) !important; }
  .row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px 110px; align-items: center; gap: 8px 24px; padding: 20px 0; }
  .row-t { width: auto; flex-direction: column; align-items: flex-start; gap: 6px; }
  .row-t .l { order: 0; }
  .row-n { width: auto; order: 0; }
  .row-v { width: auto; order: 0; }
  .row-g { order: 0; justify-self: end; }
  .fchips { flex-wrap: wrap; overflow: visible; }
  .grp-d { padding-top: 22px; }
  .key { flex-direction: row; align-items: flex-end; }
  /* show */
  .stk .tl { display: block; }
  .stk .cells { display: flex; }
  .buy-m { max-width: 560px; }
  .gobox { max-width: 560px; }
  .s-cols { margin-top: 64px; }
  .stitle-l .big { --s: min(18vw, 150px); }
  /* cto */
  .chero { flex-direction: row; align-items: flex-start; }
  .chero-r { width: clamp(240px, 30vw, 300px); padding-top: 24px; }
  .chero-l .mn:first-child { font-size: clamp(100px, 17vw, 190px); }
  .chero-l .mn:last-child { font-size: clamp(50px, 8.4vw, 94px); }
  .cfeat { gap: 36px; }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .why { flex-direction: column; gap: 28px; }
  .why-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .mast-r .ph { height: clamp(200px, 30vw, 300px) !important; }
  /* archive */
  .ahead { flex-direction: row; align-items: flex-end; gap: 32px; }
  .ahead-r { width: clamp(220px, 30vw, 300px); }
  .ahead-r .ph { height: clamp(240px, 36vw, 360px) !important; }
  .acol { display: flex; }
  .acol > div:first-child, .arow .d { width: 130px; }
  .arow { flex-direction: row; align-items: center; gap: 0; padding: 20px 0; }
  .arow .ev { width: 210px; }
  .arow .bill { padding-right: 20px; }
  .acol > div:last-child { width: 210px !important; }
  .afil { gap: 10px; }
  .aspec { flex-direction: column; align-items: stretch; gap: 28px; }
  .aspec-l { width: auto; max-width: 620px; }
  /* footer */
  .ftr { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 80px; }
  .ftr-1 { grid-column: 1 / -1; width: auto; max-width: 560px; }
  .ftr-3 { width: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .how { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
  .how-t { max-width: none; }
  .ctob .cto-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-cols { flex-direction: row; gap: 48px; align-items: flex-start; }
  .s-side { width: 340px; flex: none; padding: 0 var(--gut) 0 0; }
  .s-main > .hd { padding: 0 0 0 var(--gut); }
  .tb { margin: 0 0 0 var(--gut); }
  .cfeat { flex-direction: row; gap: 40px; }
  .cfeat-l { width: 44%; }
  .cfeat-l .a { font-size: clamp(110px, 12vw, 150px); }
  .aspec { flex-direction: row; align-items: center; gap: 48px; }
  .aspec-l { width: 360px; }
  .ahead-r { width: 300px; }
  .ftr { grid-template-columns: 1.1fr 1fr 1fr; }
  .ftr-1 { grid-column: auto; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root { --gut: 16px; }
  .a, .l, .m, .mn { font-size: var(--sm, var(--s, 16px)); }
  .l { letter-spacing: max(1px, calc(var(--sm, var(--s, 14px)) / 8)); }
  .lead { font-size: var(--sm, var(--s, 20px)); }
  .hdr .logo .a { font-size: clamp(23px, 7.4vw, 34px); }
  .hdr { gap: 10px; }
  .hdr-m { gap: 4px; }
  .chipc { padding: 0 8px; }
  .stack, .stack.g30 { gap: 20px; }
  .tile-box { height: 190px; }
  .section-tight { margin-top: 56px !important; }
  /* city */
  .mast { padding-top: 24px; gap: 12px; }
  .mast-l { gap: 12px; }
  .mast-h .a { font-size: min(22vw, 86px); }
  .mast-r { display: none; }
  .filters { margin-top: 4px; }
  .fchips { margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .city-ph { display: block; margin-top: 40px; }
  .city-ph .ph { height: 150px !important; }
  .key { margin-top: 22px; }
  .key .a { font-size: 30px; }
  .grp-d { padding-top: 12px; }
  .grp-d .a { font-size: 46px; }
  .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; align-items: center; }
  .row-t { grid-column: 1 / -1; width: auto; }
  .row-n { grid-column: 1 / -1; width: auto; gap: 5px; }
  .row-v { grid-column: 1; width: auto; flex: none; gap: 2px; }
  .row-g { grid-column: 2; justify-self: end; }
  .row-t .tm .a { font-size: 40px; }
  .later { margin: 28px 0 0; }
  /* show */
  .s-cols { margin-top: 40px; gap: 40px; }
  .arch { margin-top: 36px; }
  /* cto */
  .chero { padding-top: 28px; gap: 16px; }
  .chero-l { gap: 14px; }
  .chero-l .mn:first-child { font-size: min(19.5vw, 76px); }
  .chero-l .mn:last-child { font-size: min(9.5vw, 37px); }
  .cfeat { margin-top: 28px; padding-top: 22px; gap: 18px; }
  .csec { margin-top: 40px; gap: 18px; }
  .cgrid { gap: 14px; }
  .why { margin-top: 40px; padding-top: 24px; gap: 18px; }
  .why-g { gap: 18px; }
  /* archive */
  .ahead { padding-top: 24px; gap: 18px; }
  .ahead-r .ph { height: 190px !important; }
  .stats .a { font-size: 44px; }
  .afil { margin-top: 24px; flex-wrap: nowrap; overflow-x: auto; margin-left: 0; margin-right: 0; padding: 14px var(--gut); scrollbar-width: none; }
  .afil::-webkit-scrollbar { display: none; }
  .afil > * { flex: none; }
  .afil > span:empty { display: none; }
  .ftr { margin-top: 48px; padding-top: 24px; }
}
@media (max-width: 767px) {
  .arch .more, .mobmore, .allbtn, .more { min-height: 44px; }
}
.sec { margin-top: 110px; }
@media (max-width: 1279px) { .sec { margin-top: 80px; } }
@media (max-width: 767px) { .sec { margin-top: 52px; } .endpad { height: 56px; } }
@media (max-width: 767px) {
  .cfeat-l .a { font-size: min(24vw, 104px); }
  .cstamp, .cstamp.pk { width: 64px; height: 64px; right: -8px; top: -12px; }
  .cstamp .a { font-size: 14px; }
  .ocard .in { padding: 16px 16px 16px; gap: 10px; }
  .ocard .in > a .a { font-size: 38px; }
  .ocard .ob { gap: 6px 16px; }
  .ocard .ob .a { font-size: 44px; }
  .ocard .ot { padding-top: 10px; gap: 6px; }
  .ocard .trow { gap: 10px; }
  .ocard .trow .pbtn { width: 40px !important; height: 40px !important; }
  .cfeat-r .trow, .cfeat > div .trow { gap: 12px; }
}
.wsp { display: block; height: 20px; }
@media (max-width: 1279px) { .wsp { display: none; } }
@media (max-width: 767px) {
  .ocard .trow .m:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ocard .ot { gap: 4px; }
  .row-n .a { line-height: 1; }
}
@media (max-width: 767px) {
  .ahead-l .a.big { font-size: min(27vw, 118px); }
  .ahead-l > h1 + .stats, .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 6px; }
  .stats .a { font-size: 40px; }
  .arow { gap: 6px; padding: 12px 0; }
  .arow .bill > span { margin-right: 16px; }
  .arow .bill .a { font-size: 22px; }
}
@media (max-width: 767px) {
  .stk .lines .lead { font-size: 19px; }
  .pl { height: auto; min-height: 52px; }
  .pl .tt { flex-direction: row; align-items: baseline; gap: 10px; order: 0; }
  .stk .s2 { padding-right: 14px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .stk .lines .lead { font-size: clamp(24px, 3.6vw, 40px); }
  .pl .tt { flex-direction: row; align-items: baseline; gap: 12px; order: 0; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .chero-l .mn:first-child { font-size: min(12vw, 170px); }
  .chero-l .mn:last-child { font-size: min(5.9vw, 84px); }
  .cfeat { flex-direction: row; gap: 36px; }
  .cfeat-l { width: 42%; flex: none; }
  .cfeat-l .a { font-size: clamp(84px, 11.5vw, 150px); }
}
@media (max-width: 767px) {
  .ctob-l .mn:first-child { font-size: min(21vw, 76px); letter-spacing: 3px; }
  .ctob-l .mn:last-child { font-size: min(10vw, 37px); letter-spacing: 3px; }
}
.nav a .l { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1439px) { .hdr-l { gap: 36px; } .nav { gap: 24px; } .hdr-ig .l { letter-spacing: 1px; } }

/* ---------- art director pass ---------- */
.tkf-v { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfeat-slot { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-top: 12px; }
.arow .bill > span.act { margin-right: 0; }
.arow .bill > span.act + span.act::before { content: "\00b7"; color: var(--hot); font-family: 'Share Tech Mono', monospace; font-size: 20px; margin: 0 12px; -webkit-text-stroke: 0; }
@media (max-width: 1279px) {
  .tile-info > :nth-child(2) { display: block; }
  .strip .big .nm .a { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.02; }
  .strip .big .nm { flex: 1; min-width: 0; }
  .strip .big .tm { flex: 0 0 auto; }
  .strip .big .tm .a { font-size: clamp(32px, 10vw, 48px); }
  .strip .lead .t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .strip .lead { align-items: flex-end; }
}
@media (min-width: 768px) and (max-width: 1279px) { .strip .big .tm .a { font-size: clamp(40px, 6vw, 60px); } }
@media (max-width: 767px) {
  .tile-info { flex-direction: column; align-items: flex-start; padding: 8px 10px; gap: 2px; }
  .tile-info .m { font-size: 12px; line-height: 1.25; white-space: nowrap; }
  .tile-info > :nth-child(3) { display: none; }
}
@media (max-width: 479px) {
  .getearly { gap: 10px; }
  .getearly i { flex: 0 1 48px; width: auto; min-width: 12px; }
  .getearly .l { white-space: nowrap; letter-spacing: .12em; font-size: 15px; }
  .cgrid { grid-template-columns: 1fr; }
  .ocard .ob { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .cfeat-l .a { font-size: clamp(56px, 20vw, 96px); }
  .cfeat-slot .a { font-size: min(9vw, 36px); }
  .arow .bill { flex-direction: column; row-gap: 2px; }
  .arow .bill > span.act + span.act::before { display: none; }
}
@media (max-width: 767px) {
  .fchips, .afil { padding-right: 24px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .fchips > *, .afil > * { scroll-snap-align: start; }
  .cfeat-l .a { font-size: clamp(56px, 20vw, 96px); }
}
@media (max-width: 767px) { .cfeat-l .cfeat-slot .a { font-size: clamp(26px, 8.6vw, 44px); } .cfeat-l > a .a { line-height: .92; } }