/* ============================================================ BITES BURGERS — shared stylesheet Direction: a butcher's broadsheet at midnight. Newspaper grid discipline, hairline rules, tabular figures, flame-lit photography, display type set far too large on purpose. Palette ink #080706 · orange #F3590C · ash #EDE7E1 · smoke #9A8F87 Type League Spartan (display) · Oswald (labels, figures) Newsreader (reading copy) ============================================================ */ :root{ --ink:#080706; --ink-2:#0E0C0A; --char:#151210; --ash:#EDE7E1; --smoke:#9A8F87; --orange:#F3590C; --ember:#FFB27A; --rule:rgba(237,231,225,.15); --rule-2:rgba(237,231,225,.30); --display:'League Spartan','Arial Black',Impact,sans-serif; --label:'Oswald','Haettenschweiler','Arial Narrow',Arial,sans-serif; --read:'Newsreader',Georgia,'Times New Roman',serif; --t-hero:clamp(2.85rem,9.4vw,9.9rem); --t-1:clamp(2.5rem,7vw,6.6rem); --t-2:clamp(1.75rem,3.4vw,3.1rem); --t-3:clamp(1.25rem,1.9vw,1.7rem); --t-read:clamp(1.06rem,.98rem + .42vw,1.36rem); --t-label:clamp(.68rem,.64rem + .12vw,.79rem); --gut:clamp(16px,2.1vw,34px); --pad:clamp(20px,5vw,80px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --sec:clamp(78px,10vw,168px); --ease:cubic-bezier(.22,.61,.36,1); --mast:clamp(64px,7vw,92px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0} ul,ol{list-style:none;padding:0} img,video{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--ink); color:var(--ash); font-family:var(--read); font-weight:300; font-size:var(--t-read); line-height:1.6; font-synthesis-weight:none; /* no overflow-x on : it turns the body into a scroll container and silently kills every position:sticky on the page. The clip lives on . */ hanging-punctuation:first last; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } ::selection{background:var(--orange);color:#000} :focus-visible{outline:2px solid var(--orange);outline-offset:3px} .grain{ position:fixed;inset:-120px;z-index:90;pointer-events:none; opacity:.055;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } @media (prefers-reduced-motion:reduce){.grain{opacity:.04}} /* ---------- layout ---------- */ .wrap{width:min(1580px,100% - (var(--pad) + var(--safe-l)) - (var(--pad) + var(--safe-r))); margin-inline:auto} .section{padding-block:var(--sec);position:relative} .rule{height:1px;background:var(--rule);border:0;margin:0} /* ---------- type ---------- */ .display{ font-family:var(--display);font-weight:900;line-height:.84;letter-spacing:-.042em; text-transform:uppercase;text-wrap:balance;margin-left:-.055em; } .display.outline{color:transparent;-webkit-text-stroke:1.6px var(--ash);paint-order:stroke fill} .h1{font-size:var(--t-1)} .h2{font-size:var(--t-2)} .label{ font-family:var(--label);font-weight:500;font-size:var(--t-label); letter-spacing:.32em;text-transform:uppercase;color:var(--smoke); } .label--orange{color:var(--orange)} .lede{ font-size:clamp(1.24rem,1.05rem + .7vw,1.72rem);line-height:1.45;font-weight:300; letter-spacing:-.011em;max-width:34ch;text-wrap:pretty; } .copy{max-width:62ch;color:#D8D0C8;text-wrap:pretty} .copy + .copy{margin-top:1.1em} .copy em{font-style:italic;color:var(--ash)} .amp{font-family:var(--read);font-style:italic;font-weight:300} .num{font-family:var(--label);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1} .edit{text-decoration:underline dotted rgba(243,89,12,.6);text-underline-offset:4px} .ln{ font-family:var(--label);font-weight:500;text-transform:uppercase;letter-spacing:.2em; font-size:var(--t-label);display:inline-flex;align-items:center;gap:.85em; min-height:44px;padding-block:.9em;position:relative;color:var(--ash); } .ln::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule-2); transform-origin:left;transition:transform .5s var(--ease),background .3s} .ln:hover::after,.ln:focus-visible::after{background:var(--orange)} .ln .arw{transition:transform .45s var(--ease);color:var(--orange)} .ln:hover .arw{transform:translateX(.4em)} /* ---------- masthead ---------- */ #prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left; background:var(--orange);z-index:95;will-change:transform} .mast{ position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;gap:var(--gut); padding:clamp(14px,1.6vw,22px) calc(var(--pad) + var(--safe-r)) clamp(14px,1.6vw,22px) calc(var(--pad) + var(--safe-l)); transition:background .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent; } .page-inner .mast{background:rgba(8,7,6,.66);backdrop-filter:blur(10px) saturate(1.1)} .mast.stuck,.page-inner .mast.stuck{background:rgba(8,7,6,.94);backdrop-filter:blur(18px) saturate(1.15);border-bottom-color:var(--rule)} .mast .mark{display:flex;align-items:center;gap:.7em;flex:0 0 auto;min-height:44px} .mast .mark svg{width:34px;height:34px} .mast .mark .wm{font-family:var(--display);font-weight:900;font-size:1.02rem;letter-spacing:.02em; text-transform:uppercase;line-height:1} .mast nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,34px)} .mast nav a{font-family:var(--label);font-weight:400;font-size:var(--t-label);letter-spacing:.24em; text-transform:uppercase;color:var(--smoke);transition:color .3s;position:relative} .mast nav a:hover{color:var(--ash)} .mast nav a .n{color:var(--orange);margin-right:.5em;font-size:.82em;vertical-align:.15em} .mast nav a[aria-current="page"]{color:var(--ash)} .mast nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.55em; height:1px;background:var(--orange)} .order{ font-family:var(--label);font-weight:500;font-size:var(--t-label);letter-spacing:.24em; text-transform:uppercase;border:1px solid var(--orange);color:var(--orange);padding:.72em 1.25em; transition:background .35s var(--ease),color .35s var(--ease); } .order:hover{background:var(--orange);color:#000} .order[aria-current="page"]{background:var(--orange);color:#000} .order[aria-current="page"]::after{display:none} .burger{display:none} @media (max-width:900px){ :root{--mast:74px} /* a backdrop-filter on the masthead would become the containing block for the fixed nav panel, trapping it inside the header — so drop it on phones */ .mast,.mast.stuck,.page-inner .mast,.page-inner .mast.stuck{backdrop-filter:none} .page-inner .mast{background:rgba(8,7,6,.88)} .burger{ display:inline-flex;align-items:center;gap:.7em;margin-left:auto;z-index:86;position:relative; min-height:44px; font-family:var(--label);font-weight:500;font-size:var(--t-label);letter-spacing:.24em; text-transform:uppercase;color:var(--ash);padding:.5em 0; } .burger .bars{display:inline-flex;flex-direction:column;gap:5px;width:26px} .burger .bars i{height:2px;background:var(--orange);transition:transform .4s var(--ease),opacity .3s} .burger[aria-expanded="true"] .bars i:first-child{transform:translateY(3.5px) rotate(11deg)} .burger[aria-expanded="true"] .bars i:last-child{transform:translateY(-3.5px) rotate(-11deg)} .mast nav{ position:fixed;inset:0;z-index:85;background:var(--ink); display:flex;flex-direction:column;justify-content:center;align-items:flex-start; gap:.15em;padding:var(--pad);margin:0; clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease); pointer-events:none; } .mast nav.open{clip-path:inset(0 0 0 0);pointer-events:auto} .mast nav a:not(.order){ display:block;font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:-.03em;font-size:clamp(2.1rem,11vw,3.4rem);line-height:1.06;color:var(--ash); } .mast nav a:not(.order) .n{font-family:var(--label);font-size:.72rem;letter-spacing:.28em; vertical-align:.9em;margin-right:.9em} .mast nav a[aria-current="page"]{color:var(--orange)} .mast nav a[aria-current="page"]::after{display:none} .mast nav .order{margin-top:1.6em;font-size:.8rem;padding:.9em 1.6em} body.nav-open{overflow:hidden} } .skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--orange);color:#000;padding:1em} .skip:focus{left:0} /* ---------- reveals ---------- */ .rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .is-in .rise,.rise.is-in{opacity:1;transform:none} .rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}.rise.d3{transition-delay:.24s} .rise.d4{transition-delay:.32s}.rise.d5{transition-delay:.4s} .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)} .is-in .wipe,.wipe.is-in{clip-path:inset(0 0 0 0)} .rv-line{display:block;overflow:hidden} .rv-line > span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease)} .is-in .rv-line > span{transform:translateY(0)} .rv-line:nth-child(2) > span{transition-delay:.09s} @media (max-width:700px){.px{transform:none!important}} @media (prefers-reduced-motion:reduce){ .rise,.wipe,.rv-line > span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important} } /* ---------- figures ---------- */ .fig{position:relative;overflow:hidden;background:#0B0908} .fig img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover} .fig--tall{aspect-ratio:3/4} .fig--wide{aspect-ratio:16/9} .fig figcaption{ position:absolute;left:0;bottom:0;padding:.9em 1.1em;font-family:var(--label); font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash); background:rgba(8,7,6,.7);backdrop-filter:blur(6px) } .px{transform:translate3d(0,0,0);will-change:transform} /* ---------- section headers ---------- */ .shead{display:flex;align-items:baseline;gap:1.2em;padding-bottom:clamp(18px,2vw,30px); border-bottom:1px solid var(--rule);margin-bottom:clamp(34px,5vw,74px)} .shead .idx{font-family:var(--label);font-weight:400;font-size:var(--t-label);letter-spacing:.28em;color:var(--orange)} .shead h2{font-size:var(--t-2)} .shead .aside{margin-left:auto;text-align:right;max-width:36ch;color:var(--smoke); font-size:.94rem;line-height:1.5;display:none} @media (min-width:1024px){.shead .aside{display:block}} /* ---------- ticker ---------- */ .tickerwrap{overflow:hidden} .ticker{background:var(--orange);color:#0A0704;overflow:hidden; transform:rotate(-1.1deg) scale(1.035);transform-origin:center;border-block:2px solid #0A0704} .ticker__row{display:flex;width:max-content;animation:slide 34s linear infinite} .ticker span{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.9rem); text-transform:uppercase;letter-spacing:-.02em;padding:.42em .5em;white-space:nowrap; display:flex;align-items:center;gap:.55em} .ticker i{font-style:normal;font-size:.52em;opacity:.62;transform:translateY(-.12em)} @keyframes slide{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker__row{animation:none}} /* ============================================================ HOME ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:clip} .hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#000} .hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover; transform:scale(1.06);will-change:transform;filter:saturate(1.05) contrast(1.04)} .hero__scrim{position:absolute;inset:0;z-index:-1; background: linear-gradient(to top,rgba(8,7,6,.96) 0%,rgba(8,7,6,.52) 34%,rgba(8,7,6,.18) 62%,rgba(8,7,6,.72) 100%), radial-gradient(120% 80% at 78% 42%,rgba(243,89,12,.16),transparent 60%)} .hero__top{padding:clamp(96px,12vh,168px) var(--pad) 0;display:flex;gap:var(--gut);align-items:baseline;flex-wrap:wrap} .hero__top .label{color:#BDB4AC} .hero__top .dot{width:7px;height:7px;background:var(--orange);border-radius:50%; display:inline-block;margin-inline:.2em .6em;animation:pulse 2.6s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .hero__type{margin-top:auto;padding:0 var(--pad)} .hero h1{font-size:var(--t-hero)} .hero h1 .l2{display:block;color:var(--orange)} .hero__foot{padding:clamp(26px,4vh,54px) var(--pad) clamp(26px,4vh,44px); display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gut) clamp(20px,4vw,80px); align-items:end;border-top:1px solid var(--rule);margin-top:clamp(28px,5vh,60px)} .hero__foot .lede{color:#E4DDD6} .hero__side{display:flex;flex-direction:column;gap:.9em;align-items:flex-start;min-width:min(280px,70vw)} .hero__side .row{display:flex;gap:1em;align-items:baseline;font-family:var(--label); font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)} .hero__side .row b{color:var(--ash);font-weight:500} @media (max-width:800px){.hero__foot{grid-template-columns:1fr}} @media (max-width:640px){ .hero__top .label:nth-child(2){display:none} .hero__top{padding-top:clamp(84px,11vh,120px)} .hero .lede{font-size:1.06rem;line-height:1.4} .hero__foot{margin-top:clamp(20px,3vh,30px);padding-top:clamp(18px,3vh,26px);gap:16px} .hero__side{gap:.45em} } /* three doors into the rest of the site */ .doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto auto auto auto;gap:var(--gut)} .door{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start;position:relative; border-top:1px solid var(--rule-2);padding-top:1.1em;transition:border-color .4s var(--ease)} .door:hover{border-top-color:var(--orange)} .door .fig{aspect-ratio:4/5;margin-top:1.2em} .door .fig img{transition:transform 1.2s var(--ease),filter .6s} .door:hover .fig img{transform:scale(1.05) translateY(-9%)} .door .no{font-family:var(--label);font-size:.72rem;letter-spacing:.3em;color:var(--orange)} .door h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em; font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:.95;margin-top:.42em;transition:color .35s} .door:hover h3{color:var(--orange)} .door p{margin-top:.85em;font-size:.98rem;color:#C6BEB6;max-width:34ch} .door .go{margin-top:1.1em;display:inline-flex;gap:.7em;align-items:center;font-family:var(--label); font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)} .door:hover .go{color:var(--ash)} .door .go span{color:var(--orange);transition:transform .45s var(--ease)} .door:hover .go span{transform:translateX(.4em)} @media (max-width:900px){ .doors{grid-template-columns:1fr;grid-template-rows:none} .door{grid-row:auto;grid-template-rows:none;display:block} .door + .door{margin-top:clamp(34px,7vw,58px)} } /* home strip: what you need to know without leaving the page */ .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut); border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule)} .strip > div{padding:clamp(22px,2.6vw,38px) clamp(16px,2vw,34px) clamp(22px,2.6vw,38px) 0} .strip > div + div{border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,34px)} .strip dt{font-family:var(--label);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--orange)} .strip dd{margin-top:.6em;font-family:var(--display);font-weight:700;letter-spacing:-.022em; text-transform:uppercase;font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.05} .strip dd small{display:block;margin-top:.55em;font-family:var(--read);font-weight:300;font-size:.86rem; letter-spacing:0;text-transform:none;color:var(--smoke);line-height:1.5} @media (max-width:900px){ .strip{grid-template-columns:1fr 1fr} .strip > div + div{border-left:0;padding-left:0} .strip > div:nth-child(2n){border-left:1px solid var(--rule);padding-left:clamp(16px,4vw,34px)} .strip > div:nth-child(n+3){border-top:1px solid var(--rule)} } /* ============================================================ PAGE HERO (every page but home) ============================================================ */ .phero{position:relative;min-height:clamp(58vh,64vh,760px);display:flex;align-items:flex-end; overflow:clip;isolation:isolate} .phero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0B0908} .phero__media img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover} .phero__scrim{position:absolute;inset:0;z-index:-1; background: linear-gradient(to top,rgba(8,7,6,.97) 2%,rgba(8,7,6,.5) 44%,rgba(8,7,6,.3) 100%), linear-gradient(to right,rgba(8,7,6,.86) 0%,rgba(8,7,6,.42) 46%,rgba(8,7,6,0) 78%)} .phero__in{width:100%;padding:calc(var(--mast) + 40px) var(--pad) clamp(30px,5vw,64px)} .phero h1{font-size:var(--t-1);margin-top:.28em} .phero .deck{margin-top:1.1em;max-width:44ch;color:#D8D0C8;font-size:clamp(1.06rem,1.3vw,1.28rem)} /* ============================================================ PROVISIONS ============================================================ */ .prov{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start} .prov__copy{grid-column:1 / span 5} .prov__fig{grid-column:7 / span 6} .prov__quote{grid-column:1 / span 5;margin-top:2.4em;padding-left:1.1em;border-left:2px solid var(--orange); font-size:clamp(1.1rem,1.4vw,1.34rem);font-style:italic;color:#CFC7BF;line-height:1.5} @media (max-width:900px){ .prov__copy,.prov__fig,.prov__quote{grid-column:1 / -1} .prov__fig{margin-top:2.4em} } .spec{margin-top:clamp(48px,7vw,110px);border-top:1px solid var(--rule-2)} .spec dl{display:grid;grid-template-columns:1fr;gap:0} @media (min-width:640px){.spec dl{grid-template-columns:1fr 1fr}} @media (min-width:1080px){.spec dl{grid-template-columns:repeat(3,1fr)}} .spec .cell{padding:clamp(20px,2.4vw,34px) clamp(18px,2.4vw,40px) clamp(20px,2.4vw,34px) 0; border-bottom:1px solid var(--rule)} @media (min-width:640px){.spec .cell:nth-child(2n){border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,40px)}} @media (min-width:1080px){ .spec .cell:nth-child(2n){border-left:0;padding-left:0} .spec .cell:not(:nth-child(3n+1)){border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,40px)} } .spec dt{font-family:var(--label);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--orange)} .spec dd{margin-top:.55em;font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.1vw,1.95rem); letter-spacing:-.025em;text-transform:uppercase;line-height:1.02} .spec dd small{display:block;margin-top:.7em;font-family:var(--read);font-weight:300;font-size:.86rem; letter-spacing:0;text-transform:none;color:var(--smoke);line-height:1.5} /* sourcing list — a ledger, not a card grid */ .ledger{border-top:1px solid var(--rule-2)} .ledger .row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) auto;gap:1em var(--gut); align-items:baseline;padding:clamp(1em,1.7vw,1.5em) 0;border-bottom:1px solid var(--rule)} .ledger .what{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em; font-size:clamp(1.15rem,1.8vw,1.5rem)} .ledger .where{color:#C6BEB6;font-size:.98rem} .ledger .when{font-family:var(--label);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase; color:var(--orange);white-space:nowrap} @media (max-width:760px){ .ledger .row{grid-template-columns:1fr auto} .ledger .where{grid-column:1 / -1;margin-top:.3em} } /* ============================================================ THE BUILD — four steps, alternating, sticky numerals ============================================================ */ .step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut); padding-block:clamp(56px,8vw,120px);border-top:1px solid var(--rule)} .step:first-of-type{border-top:0} .step__txt{grid-column:1 / span 4;position:sticky;top:calc(var(--mast) + 34px);align-self:start} .step__fig{grid-column:6 / span 7} .step:nth-child(even) .step__txt{grid-column:9 / span 4;order:2} .step:nth-child(even) .step__fig{grid-column:1 / span 7;order:1} .step__no{font-family:var(--display);font-weight:900;font-size:clamp(3rem,7vw,6.4rem);line-height:.8; letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px var(--orange)} .step h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.032em; font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:.95;margin-top:.34em} .step p{margin-top:1em;color:#C6BEB6;max-width:38ch} .step .meta{margin-top:1.6em;border-top:1px solid var(--rule);padding-top:.9em; font-family:var(--label);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke)} .step .meta b{color:var(--ash);font-weight:500} .step__fig .fig{aspect-ratio:4/3} @media (max-width:900px){ .step__txt,.step__fig,.step:nth-child(even) .step__txt,.step:nth-child(even) .step__fig{ grid-column:1 / -1;position:static;order:initial} .step__fig{margin-top:1.8em} .step__fig .fig{aspect-ratio:4/5} } /* ============================================================ THE BOARD (menu) ============================================================ */ .board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)} .board__rail{grid-column:1 / span 2;position:sticky;top:calc(var(--mast) + 34px);align-self:start} .board__rail a{display:block;padding:.55em 0;font-family:var(--label);font-size:.72rem;letter-spacing:.2em; text-transform:uppercase;color:var(--smoke);border-left:1px solid var(--rule);padding-left:1em; transition:color .3s,border-color .3s} .board__rail a:hover{color:var(--ash)} .board__rail a.on{color:var(--orange);border-left-color:var(--orange)} .board__list{grid-column:4 / span 5} .board__plate{grid-column:9 / span 4;position:sticky;top:calc(var(--mast) + 34px);align-self:start} .plate{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0B0908;border:1px solid var(--rule)} .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)} .plate img.on{opacity:1;transform:scale(1)} .plate__cap{position:absolute;left:0;right:0;bottom:0;padding:1em 1.15em; background:linear-gradient(transparent,rgba(8,7,6,.9));font-family:var(--label);font-size:.72rem; letter-spacing:.26em;text-transform:uppercase;color:var(--ash)} @media (max-width:1200px){ .board{display:block} .board__rail{display:none} .board__list{grid-column:1 / span 7} .board__plate{grid-column:9 / span 4} } @media (max-width:1000px){.board{display:block}.board__list{grid-column:1 / -1}.board__plate{display:none}} @media (max-width:1200px){ .board{display:block} .board__rail{ display:flex;grid-column:1 / -1;gap:.4em;overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky; top:calc(var(--mast) - 4px);z-index:60;background:var(--ink); margin:0 calc(var(--pad) * -1);padding:.7em var(--pad); border-block:1px solid var(--rule); } .board__rail::-webkit-scrollbar{display:none} .board__rail a{border-left:0;border:1px solid var(--rule);padding:.75em 1.1em;white-space:nowrap; min-height:44px;display:flex;align-items:center} .board__rail a.on{border-color:var(--orange)} .cat{scroll-margin-top:calc(var(--mast) + 86px)} } .cat{margin-top:clamp(40px,5vw,72px);scroll-margin-top:calc(var(--mast) + 30px)} .cat:first-of-type{margin-top:0} .cat > h2{font-family:var(--label);font-weight:400;font-size:.74rem;letter-spacing:.34em; text-transform:uppercase;color:var(--smoke);padding-bottom:.9em;border-bottom:1px solid var(--rule-2)} .cat__shot{display:none;position:relative;aspect-ratio:16/10;overflow:hidden;margin:1.4em 0 .4em;background:#0B0908} .cat__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media (max-width:1000px){.cat__shot{display:block}} .item{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 1em; padding:clamp(.7em,1vw,1em) 0;border-bottom:1px solid var(--rule); transition:padding-left .45s var(--ease),border-color .45s} .item:hover,.item:focus-within{padding-left:.7em;border-bottom-color:var(--rule-2)} .item .nm{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.022em; font-size:clamp(1.16rem,1.9vw,1.62rem);line-height:1.08;transition:color .35s} .item:hover .nm{color:var(--orange)} .item .pr{font-family:var(--label);font-weight:500;font-variant-numeric:tabular-nums; font-size:clamp(1rem,1.35vw,1.2rem);color:var(--ash)} .item .sub{grid-column:1 / -1;font-size:.86rem;color:var(--smoke);margin-top:.3em;letter-spacing:.01em} .item.alt .nm{font-family:var(--label);font-weight:300;font-size:clamp(.92rem,1.15vw,1.02rem); letter-spacing:.06em;color:#B7AFA8} .item.alt .pr{font-weight:300;color:#B7AFA8} .party{margin-top:clamp(34px,4vw,56px);border:1px solid var(--orange);padding:clamp(20px,2.6vw,34px); display:grid;grid-template-columns:1fr auto;gap:.4em 1.4em;align-items:baseline} .party h3{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em; font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1} .party .pr{font-family:var(--label);font-weight:500;font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--orange); font-variant-numeric:tabular-nums} .party p{grid-column:1 / -1;color:#C6BEB6;font-size:.98rem;margin-top:.4em} /* ============================================================ VISIT ============================================================ */ .visit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start} .visit__copy{grid-column:1 / span 6} .receipt{grid-column:8 / span 5;background:var(--ash);color:#14110F;padding:clamp(24px,3vw,40px); transform:rotate(-1.15deg);box-shadow:0 34px 70px rgba(0,0,0,.55);font-family:var(--label);position:relative} .receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:10px; background:repeating-linear-gradient(-45deg,var(--ash) 0 8px,transparent 8px 16px)} .receipt::before{top:-9px} .receipt::after{bottom:-9px;transform:scaleY(-1)} .receipt h2{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em; font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1} .receipt .rrow{display:flex;justify-content:space-between;gap:1.4em;padding:.72em 0; border-bottom:1px dashed rgba(20,17,15,.28);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase} .receipt .rrow span:last-child{font-variant-numeric:tabular-nums;text-align:right} .receipt .tot{display:flex;justify-content:space-between;padding-top:1em;font-size:1rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase} .receipt .stamp{position:absolute;right:clamp(16px,2vw,26px);top:clamp(22px,2.6vw,34px); border:2px solid var(--orange);color:var(--orange);padding:.5em .8em;transform:rotate(9deg); font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;opacity:.9} @media (max-width:900px){.visit__copy,.receipt{grid-column:1 / -1}.receipt{margin-top:2.6em;transform:none}} /* ============================================================ FOOTER ============================================================ */ .foot{padding-top:clamp(70px,9vw,140px);border-top:1px solid var(--rule)} .foot__wm{font-size:clamp(3.4rem,28.2vw,27rem);line-height:.76;letter-spacing:-.055em} .foot__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut); padding-block:clamp(40px,5vw,70px)} .foot__cols > div:nth-child(1){grid-column:1 / span 4} .foot__cols > div:nth-child(2){grid-column:6 / span 3} .foot__cols > div:nth-child(3){grid-column:10 / span 3} .foot h3{font-family:var(--label);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase; color:var(--orange);margin-bottom:1.1em} .foot li{padding:.32em 0;font-size:.95rem;color:#C6BEB6} .foot li a{display:inline-block;padding:.35em 0;min-height:40px} .foot li a:hover{color:var(--ash)} .legal{display:flex;flex-wrap:wrap;gap:1.4em;justify-content:space-between;padding-block:1.6em; border-top:1px solid var(--rule);font-family:var(--label);font-size:.68rem;letter-spacing:.22em; text-transform:uppercase;color:#6F6862} @media (max-width:860px){.foot__cols > div{grid-column:1 / -1 !important}} /* next-page pointer — the end of every page hands you the next one */ .next{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gut);flex-wrap:wrap; border-top:1px solid var(--rule-2);padding-top:clamp(20px,2.4vw,34px);margin-top:clamp(50px,7vw,100px)} .next .lbl{font-family:var(--label);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--smoke)} .next a{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em; font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.05;display:inline-flex;align-items:center;gap:.4em; min-height:44px;padding-block:.2em;transition:color .35s} .next a:hover{color:var(--orange)} .next a span{color:var(--orange);transition:transform .45s var(--ease)} .next a:hover span{transform:translateX(.22em)}