/* Golf Network News · Watch — the screening room.
   One stylesheet; every collection grows from data with no change here. */

@font-face{font-family:'GNN Serif';src:url(assets/fonts/gnn-serif-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'GNN Serif';src:url(assets/fonts/gnn-serif-italic-var.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Inter Display';src:url(assets/fonts/inter-display-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --rose:#3A1F17;--soot:#140B08;--ox:#5A1717;--bottle:#1F3A2E;--brass:#B89A5E;--amber:#F3C98A;
  --cream:#EFE6D2;--paper:#F4ECD9;--ink:#1E2333;
  --serif:'GNN Serif',Georgia,'Times New Roman',serif;--sans:'Inter Display',Arial,Helvetica,sans-serif;
  --brass-g:linear-gradient(180deg,#F6E3A8 0%,#D9B66C 45%,#C29A55 80%,#8A6A32 100%);
  --gut:clamp(16px,4vw,64px);
  --nw:clamp(150px,12.4vw,236px);                 /* wall niche width */
  --aw:clamp(120px,9.5vw,170px);                  /* archive niche width */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--soot);color:var(--cream);font-family:var(--serif);overflow-x:hidden}
img{max-width:100%}
img[data-src]{visibility:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--paper);color:var(--ink);padding:10px 14px;font:600 13px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
.ph{font:600 .8em/1.3 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--amber);background:rgba(20,11,8,.6);border:1px dashed rgba(243,201,138,.6);border-radius:3px;padding:.06em .4em}
.paper .ph{color:#5E4114;background:#F1E2BC;border-color:#A07E3E}
.when .ph,.credit .ph,.meta .ph,.star .ph,.links .ph{font-size:.95em}

/* ---------- the room: rosewood panelling on every section ---------- */
.hall,.archive,.corner,.foot{position:relative;isolation:isolate;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(10,5,3,.6) 100%),
    url(assets/room/panels.svg) 0 0/240px 100% repeat-x,
    url(assets/room/rosewood.webp) 0 0/256px 512px,
    var(--rose);
  background-blend-mode:normal,normal,multiply,normal}
.hall::after,.archive::after,.corner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(assets/room/grain.webp);mix-blend-mode:soft-light;opacity:.35}

/* ---------- masthead ---------- */
.mh{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 var(--gut);
  background:linear-gradient(180deg,#120906,#1E0F0A);border-bottom:1px solid rgba(201,164,92,.35)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 17px/1 var(--serif)}
.brand .logo{width:30px;height:30px;flex:none}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav a{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:rgba(239,230,210,.9);padding:8px 0}
.nav a:hover{color:var(--amber)}

/* ---------- the hall: H1 plaque, the line, the Shorts wall ---------- */
.hall{overflow:hidden;padding:clamp(22px,3vw,30px) 0 0;min-height:calc(100svh - 56px)}
.hall::before{content:"";position:absolute;left:-12%;bottom:4%;width:46%;aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(243,201,138,.3),rgba(243,201,138,.08) 45%,transparent 70%)}
.hall-top{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 var(--gut)}
.plaque{margin:0;display:inline-flex;align-items:center;gap:14px;padding:8px 26px 9px;background:var(--brass-g);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,246,214,.8),inset 0 -1px 0 rgba(40,24,8,.6),0 0 0 1px #3B2A12,0 6px 12px -4px rgba(0,0,0,.6);
  font:700 23px/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:#2A1D0C;text-shadow:0 1px 0 rgba(255,240,200,.55)}
.plaque::before,.plaque::after{content:"";width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF0C0,#7A5C28 70%);box-shadow:0 0 0 1px rgba(40,24,8,.5)}
.plaque span{margin-right:-.32em}
.line{margin:0;max-width:44ch;text-align:center;font:italic 400 clamp(16px,1.4vw,20px)/1.45 var(--serif);color:rgba(239,230,210,.92)}

.wall{position:relative;margin-top:8px}
.niches{display:flex;align-items:flex-start;gap:var(--gap,30px);margin:0;padding:calc(var(--nw) * .34) var(--gut) 22px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
.niches::-webkit-scrollbar{display:none}
.niches>:first-child{margin-left:auto}.niches>:last-child{margin-right:auto}   /* centred when they fit, scrolls when they don't */
.niche{position:relative;flex:none;width:var(--nw);scroll-snap-align:start}
.niche:nth-child(6n+2){margin-top:calc(var(--nw) * .24)}
.niche:nth-child(6n+3){margin-top:calc(var(--nw) * .07)}
.niche:nth-child(6n+4){margin-top:calc(var(--nw) * .3)}
.niche:nth-child(6n+5){margin-top:calc(var(--nw) * .02)}
.niche:nth-child(6n+6){margin-top:calc(var(--nw) * .2)}
.niche::before{content:"";position:absolute;left:50%;top:calc(var(--nw) * -.2);width:78%;aspect-ratio:300/70;transform:translateX(-50%);z-index:4;pointer-events:none;
  background:url(assets/room/picture-light.svg) center/contain no-repeat}
.niche::after{content:"";position:absolute;left:-40%;right:-40%;top:calc(var(--nw) * -.18);height:calc(var(--nw) * 1.5);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 30%,rgba(243,201,138,.24),transparent 70%)}
.cut{position:relative;z-index:2;padding:6px;border-radius:2px;background:linear-gradient(180deg,#0C0604,#22130C 30%,#160B07);
  box-shadow:inset 0 10px 14px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.8),0 0 0 2px #C9A45C,0 0 0 3px #3B2A12,0 1px 0 4px rgba(255,220,170,.1)}
.face{position:relative;display:block;aspect-ratio:9/16;color:var(--cream);text-decoration:none;transition:transform .35s ease,filter .35s ease}
/* the poster carries a transparent margin around the sheet (11.1% each side, 6.25% top and bottom) for the art that breaks out */
.face .art{position:absolute;left:-11.111%;top:-6.25%;width:122.222%;height:112.5%;max-width:none;display:block;pointer-events:none}
.face:hover,.face:focus-visible{transform:translateY(-6px);filter:brightness(1.07)}
.face:focus-visible{outline-offset:10px}
.pbadge{position:absolute;right:7%;bottom:4.5%;width:clamp(26px,16%,40px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;z-index:3;color:var(--cream);
  background:rgba(20,11,8,.78);box-shadow:0 0 0 1.5px var(--brass);transition:transform .25s ease}
.pbadge svg{width:52%;height:52%;margin-left:8%}
.face:hover .pbadge,.face:focus-visible .pbadge{transform:scale(1.15)}
.face iframe,.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.niche.playing .face{transform:none;filter:none;background:#000}
.nt{margin:16px 0 0;font:600 15px/1.25 var(--serif);text-wrap:balance}
.when{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font:600 10.5px/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(239,230,210,.82)}
.when .sep,.meta .sep{width:3px;height:3px;border-radius:50%;background:var(--brass)}
.credit{margin:6px 0 0;font:italic 400 13px/1.35 var(--serif);color:rgba(239,230,210,.8)}
.niches.peeks .niche .nt,.niches.peeks .niche .when,.niches.peeks .niche .credit{transition:opacity .3s ease}
.niches.peeks .niche.peek .nt,.niches.peeks .niche.peek .when,.niches.peeks .niche.peek .credit{visibility:hidden;opacity:0}

.wall-nav{position:absolute;top:calc(var(--nw) * .34 + var(--nw) * .7);z-index:6;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:#2A1D0C;background:var(--brass-g);box-shadow:0 0 0 1px #3B2A12,0 6px 14px rgba(0,0,0,.6)}
.wall-nav svg{width:22px;height:22px}
.wall-nav.prev{left:max(6px,calc(var(--gut) / 2 - 22px))}.wall-nav.next{right:max(6px,calc(var(--gut) / 2 - 22px))}
.wall-nav[disabled]{opacity:0;pointer-events:none}
.swipe{display:none}

.credenza{position:relative;z-index:3;margin:clamp(30px,3.4vw,48px) clamp(16px,3vw,40px) 0;padding:26px clamp(16px,3vw,48px) 30px;display:flex;align-items:center;justify-content:center;gap:28px 48px;flex-wrap:wrap;
  border-radius:3px 3px 0 0;background:linear-gradient(180deg,rgba(255,210,160,.1),rgba(0,0,0,.35)),url(assets/room/rosewood.webp) 0 0/256px 512px,#4A2A1B;background-blend-mode:normal,multiply,normal;
  box-shadow:0 -1px 0 #C9A45C,0 -12px 0 #3B2216,0 -13px 0 rgba(255,220,170,.3),0 -30px 40px -10px rgba(0,0,0,.5)}
.credenza::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:linear-gradient(180deg,#7A5136,#4A2C1C);border-radius:2px 2px 0 0}
.lamp{position:absolute;left:clamp(-30px,-1.5vw,-10px);bottom:calc(100% + 12px);width:clamp(54px,4.6vw,76px);height:auto;pointer-events:none}
.vols ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.vol{display:flex;align-items:center;gap:12px;min-height:34px;padding:6px 16px 6px 18px;text-decoration:none;border-radius:2px 5px 5px 2px;
  color:#F0D99C;font:600 11px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.65);
  background:linear-gradient(180deg,rgba(255,230,190,.2),transparent 30%,transparent 62%,rgba(0,0,0,.38)),url(assets/room/grain.webp),var(--c,#6B1E1E);background-blend-mode:normal,multiply,normal;
  box-shadow:inset 9px 0 0 -6px #C9A45C,inset -9px 0 0 -6px #C9A45C,0 2px 3px rgba(0,0,0,.5);transition:filter .2s}
.vol em{font:italic 400 13px/1 var(--serif);letter-spacing:.02em;text-transform:none;color:#F0D9A6}
.vol:hover{filter:brightness(1.15)}
.vol.majors{--c:#21402F}.vol.years{--c:#6B1E1E}.vol.shorts{--c:#6E4220}
.medal{display:flex;align-items:center;text-decoration:none;color:var(--cream)}
.medal svg{position:relative;z-index:2;flex:none;width:88px;height:88px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.medal .tab{display:flex;flex-direction:column;justify-content:center;gap:5px;height:46px;padding:0 18px 0 26px;margin-left:-18px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,rgba(255,230,190,.14),rgba(0,0,0,.3)),url(assets/room/grain.webp),#4E1616;background-blend-mode:normal,multiply,normal;box-shadow:0 0 0 1px #2A0B0B,0 6px 12px -6px rgba(0,0,0,.7)}
.medal .tab b{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#F0D99C}
.medal .tab em{font:italic 400 14.5px/1 var(--serif)}
.medal .ring{transform-origin:50% 50%;transition:transform .8s ease}
.medal:hover .ring,.medal:focus-visible .ring{transform:rotate(-40deg)}
.chair{position:absolute;bottom:-70px;z-index:4;width:clamp(220px,22vw,400px);height:auto;pointer-events:none;filter:drop-shadow(0 -10px 30px rgba(0,0,0,.6))}
.chair.l{left:clamp(-150px,-8vw,-70px)}.chair.r{right:clamp(-150px,-8vw,-70px);transform:scaleX(-1)}

/* ---------- section heads ---------- */
.archive,.corner{padding:clamp(44px,5vw,72px) 0 clamp(52px,6vw,90px);overflow-x:clip}
.sec-h{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:0 auto 10px;padding:0 var(--gut);max-width:1360px}
.sec-h h2{margin:0;font:600 clamp(28px,2.6vw,36px)/1.1 var(--serif)}
.sec-h .n{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);padding:6px 10px;border:1px solid rgba(201,164,92,.6);border-radius:2px}
.sec-h .rule,.evh .rule{flex:1;min-width:40px;height:1px;background:linear-gradient(90deg,rgba(201,164,92,.7),rgba(201,164,92,0))}
.sec-note{margin:0 auto 30px;padding:0 var(--gut);max-width:1360px;font:italic 400 16px/1.4 var(--serif);color:rgba(239,230,210,.82)}

/* ---------- the archive: a row per event, events side by side while they fit ---------- */
.events{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 64px;max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.ev{min-width:0;max-width:100%}
.evh{display:flex;align-items:center;gap:14px;margin:0}
.evh h3{margin:0;padding:7px 16px 8px;background:var(--brass-g);border-radius:2px;font:700 14px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#2A1D0C;box-shadow:inset 0 1px 0 rgba(255,246,214,.8),0 0 0 1px #3B2A12}
.evh .n{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.ev .row{margin:0 calc(var(--gut) * -1)}
.niches.arc{--nw:var(--aw);--gap:26px;padding:34px var(--gut) 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#8A6A32 transparent}
.niches.arc>:first-child{margin-left:0}.niches.arc>:last-child{margin-right:0}
.niches.arc .niche::before{display:none}
.niches.arc .niche:nth-child(6n+2){margin-top:22px}.niches.arc .niche:nth-child(6n+3){margin-top:6px}.niches.arc .niche:nth-child(6n+4){margin-top:26px}
.niches.arc .niche:nth-child(6n+5){margin-top:2px}.niches.arc .niche:nth-child(6n+6){margin-top:16px}
.niches.arc .cut{padding:5px}
.niches.arc .nt{font-size:14px;margin-top:12px}
.niches.arc .when{font-size:9.5px}
.niches.arc .credit{font-size:12px}

/* ---------- the long-film corners: a screen, its card, posters ---------- */
.screen-surround{position:relative;padding:clamp(8px,1vw,12px);border-radius:4px;
  background:linear-gradient(160deg,#6E4A31,#4A2C1C 40%,#2C190F);box-shadow:0 0 0 1px #1A0D07,0 30px 50px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,220,170,.18)}
.screen{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;color:var(--cream);text-decoration:none;background:#0B0C0E;
  box-shadow:0 0 0 3px #B89A5E,0 0 0 4px #5C4520,inset 0 0 40px rgba(0,0,0,.9)}
.screen .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.screen .glass{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%);pointer-events:none}
.play{position:absolute;left:50%;top:50%;width:clamp(56px,6vw,78px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;color:var(--cream);
  background:rgba(20,11,8,.78);box-shadow:0 0 0 2px var(--brass),0 0 0 6px rgba(20,11,8,.4),0 10px 24px rgba(0,0,0,.6);transition:transform .25s ease}
.play svg{width:42%;height:42%;margin-left:7%}
.screen:hover .play,.screen:focus-visible .play{transform:translate(-50%,-50%) scale(1.07)}
.screen.playing .play,.screen.playing .glass,.screen.playing .thumb{display:none}

.cards{margin-top:26px;display:grid;gap:22px}
.card{position:relative;display:flex;gap:20px;padding:18px 22px;border-radius:2px;box-shadow:0 0 0 1px #5C4520,0 0 0 3px #C9A45C,0 0 0 4px #5C4520,0 14px 24px -12px rgba(0,0,0,.8)}
.paper{background:var(--paper);color:var(--ink)}
.card-t{min-width:0;flex:1}
.card .k{margin:0 0 8px;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#7A2A20}
.card h3{margin:0;font:600 clamp(20px,1.7vw,24px)/1.18 var(--serif)}
.card .meta{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:600 11.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#574330}
.card .star{margin:8px 0 0;font:600 12px/1.4 var(--sans);letter-spacing:.06em;color:#2E2A26}
.card .d{margin:10px 0 0;font:400 15px/1.5 var(--serif);color:#2A2A33;max-width:62ch}
.card .links{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;font:600 12px/1.3 var(--sans);letter-spacing:.06em}
.card .links a,.card .star a{color:#1F3A2E;text-decoration:none;border-bottom:1px solid #A07E3E}
.card .links a:hover{color:#7A2A20}
.card .links .lt{color:#574330;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;align-self:center}
.card .credit{margin:12px 0 0;color:#574330}
.card .watch-on{margin:10px 0 0;font:600 12px/1.3 var(--sans);letter-spacing:.08em}
.card .watch-on a{color:#7A2A20}
.js .corner .card{display:none}
.js .corner .card.on{display:flex}
.js .card .watch-on{display:none}

.framed{position:relative;margin:0}
.frame{position:relative;display:block;padding:clamp(8px,1vw,12px);
  background:linear-gradient(135deg,#6E4F1F 0%,#E6C77E 18%,#9C7A3C 36%,#F2DA9C 56%,#8C6A2E 78%,#D9B86C 100%);
  box-shadow:0 0 0 1px #2A1A0C,inset 0 0 0 1px rgba(255,240,200,.5),0 28px 40px -22px rgba(0,0,0,.9)}
.frame::after{content:"";position:absolute;inset:clamp(8px,1vw,12px);box-shadow:inset 0 0 0 1px rgba(40,24,8,.8);pointer-events:none}
.frame .sheet{position:relative;display:block;aspect-ratio:2/3;overflow:visible}
.frame .art{position:absolute;left:-10%;top:-6.667%;width:120%;height:113.333%;max-width:none;display:block}

/* the Majors: a salon wall, the screen inset among the posters; a poster per cell, any number */
.salon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) minmax(0,1fr);grid-auto-flow:row dense;gap:56px clamp(24px,3vw,56px);align-items:start;
  max-width:1360px;margin:40px auto 0;padding:0 var(--gut)}
.salon .stage{grid-column:2;grid-row:1 / span 2}
.frames{display:contents;list-style:none}
.fr{position:relative;list-style:none;padding-top:40px}
.fr::before{content:"";position:absolute;left:50%;top:6px;width:72%;aspect-ratio:300/70;transform:translateX(-50%);z-index:3;background:url(assets/room/picture-light.svg) center/contain no-repeat;pointer-events:none}
.fr::after{content:"";position:absolute;left:-30%;right:-30%;top:-10px;height:110%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 35%,rgba(243,201,138,.2),transparent 70%)}
.fr:nth-child(4n+1){width:92%;justify-self:end}.fr:nth-child(4n+2){width:80%;margin-top:30px}
.fr:nth-child(4n+3){width:78%;justify-self:end;margin-top:20px}.fr:nth-child(4n+4){width:96%}
.frame-link{display:block;text-decoration:none;transition:transform .3s ease,filter .3s ease}
.frame-link:hover,.frame-link:focus-visible{transform:translateY(-4px);filter:brightness(1.07)}
.frame-link[aria-current="true"] .frame{box-shadow:0 0 0 1px #2A1A0C,inset 0 0 0 1px rgba(255,240,200,.5),0 28px 40px -22px rgba(0,0,0,.9),0 0 0 6px rgba(243,201,138,.45)}

/* Year in Review: the reading corner — the slipcase beside a chair and lamp, the chosen volume's film on the wall */
.reading{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px clamp(28px,4vw,64px);align-items:start;max-width:1360px;margin:30px auto 0;padding:0 var(--gut)}
.boxshelf{position:relative;display:flex;justify-content:center;padding-top:74px}
.boxshelf::before{content:"";position:absolute;left:0;right:0;top:-120px;height:640px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(243,201,138,.28),rgba(243,201,138,.07) 45%,transparent 70%)}
.boxshelf .plight{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:min(380px,80%);height:auto;z-index:3}
.slipcase{position:relative;display:flex;max-width:100%;padding:14px 12px 0 0;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(255,220,180,.12),rgba(0,0,0,.35)),url(assets/room/grain.webp),#4E1616;background-blend-mode:normal,multiply,normal;
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.35),inset 0 22px 30px -10px rgba(0,0,0,.7)}
.slipcase .side{flex:none;width:56px;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(201,164,92,.35);margin-right:10px}
.slipcase .side span{writing-mode:vertical-rl;transform:rotate(180deg);font:600 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#F0D99C}
.spines{display:flex;flex-wrap:wrap;gap:16px 6px;margin:0;padding:0;list-style:none;align-content:flex-end;padding-bottom:0}
.spine{position:relative;display:flex;flex-direction:column;align-items:center;width:clamp(92px,8.6vw,120px);height:clamp(300px,24vw,340px);padding:20px 8px 62px;text-align:center;text-decoration:none;border-radius:4px 4px 0 0;
  color:#F0D99C;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,230,190,.12) 22%,rgba(255,230,190,.04) 55%,rgba(0,0,0,.5)),url(assets/room/grain.webp),#1F3A2E;background-blend-mode:normal,multiply,normal;
  box-shadow:0 0 0 1px #0E1D16;transition:transform .3s ease,filter .3s ease}
.spines li:nth-child(3n+2) .spine{background-color:#2A3A52}.spines li:nth-child(3n+3) .spine{background-color:#4A2A1E}
.spine .band{display:block;width:100%;height:10px;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(255,230,190,.18) 40%,rgba(0,0,0,.45));border-top:1px solid rgba(201,164,92,.7);border-bottom:1px solid rgba(201,164,92,.7)}
.spine .yr{display:block;margin:18px 0 6px;font:700 clamp(28px,2.4vw,34px)/1 var(--serif);color:#F0D99C}
.spine .ti{display:block;font:italic 400 clamp(13px,1.05vw,14.5px)/1.3 var(--serif);color:#F2E1B6;text-wrap:balance}
.spine .rl{display:block;width:34px;height:1px;background:#C9A45C;margin:10px 0}
.spine .sp{flex:1}
.spine .mono{display:block;margin-top:14px;font:600 10px/1 var(--sans);letter-spacing:.3em;color:#D9BE7E}
.spine:hover,.spine:focus-visible,.spine[aria-current="true"]{transform:translateY(-20px);filter:brightness(1.12)}
.lip{position:absolute;left:0;right:0;bottom:0;height:50px;display:flex;align-items:center;justify-content:center;gap:12px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,220,180,.16),rgba(0,0,0,.3)),url(assets/room/grain.webp),#5A1A1A;background-blend-mode:normal,multiply,normal;
  box-shadow:inset 0 1px 0 rgba(255,220,180,.25),0 -8px 14px -6px rgba(0,0,0,.65);font:600 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#F0D99C}
.lip i{width:5px;height:5px;border-radius:50%;background:#C9A45C}
.ledge{position:absolute;left:-4%;right:-4%;bottom:-16px;height:16px;background:linear-gradient(180deg,#7A5136,#3B2216);box-shadow:0 -1px 0 #C9A45C,0 16px 30px rgba(0,0,0,.6)}
.seat{position:relative;height:clamp(220px,22vw,300px);margin-top:60px}
.seat::before{content:"";position:absolute;left:40%;top:-30px;width:60%;aspect-ratio:1;z-index:-1;background:radial-gradient(circle,rgba(243,201,138,.32),transparent 70%)}
.chairf{position:absolute;left:4%;bottom:0;width:66%;height:auto}
.stable{position:absolute;left:68%;bottom:0;width:22%;height:auto}
.slamp{position:absolute;left:69.5%;bottom:calc(22vw * .19);width:19%;height:auto}
.year .card .framed.small{flex:none;width:clamp(110px,12vw,170px)}
.year .card .frame{padding:7px}.year .card .frame::after{inset:7px}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(201,164,92,.35)}
.foot-in{max-width:1360px;margin:0 auto;padding:40px var(--gut) 34px;display:flex;flex-direction:column;gap:18px}
.fb{font:600 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--amber)}
.az{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none}
.az a{display:grid;place-items:center;width:34px;height:34px;font:600 13px/1 var(--sans);text-decoration:none;color:var(--cream);border:1px solid rgba(201,164,92,.3);border-radius:2px}
.az a:hover{background:rgba(243,201,138,.12)}
.frow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.foot .links{display:flex;gap:22px}
.foot .links a{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 0}
.foot small{font:400 13px/1 var(--serif);color:rgba(239,230,210,.75)}

/* ---------- tablet ---------- */
@media (max-width:899px){
  .salon{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .salon .stage{grid-column:1 / -1;grid-row:auto}
  .fr{width:80%!important;justify-self:center!important;margin-top:0!important}
  .reading{grid-template-columns:minmax(0,1fr)}
  .seat{max-width:520px;margin:50px auto 0}
  .slamp{bottom:56px}
}
/* ---------- phone: the wall becomes a swipe row, the first niche full height on the first screen ---------- */
@media (max-width:699px){
  :root{--nw:56vw;--aw:36vw}
  .mh{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .brand{justify-content:center;height:46px;font-size:15.5px}.brand .logo{width:26px;height:26px}
  .nav{justify-content:center;gap:22px;min-height:36px;border-top:1px solid rgba(201,164,92,.2)}
  .nav a{font-size:11px;letter-spacing:.12em}
  .hall{min-height:0;padding-top:18px}
  .plaque{font-size:19px;padding:7px 20px 8px}
  .line{font-size:16px}
  .niches{--gap:20px;padding-top:calc(var(--nw) * .26);padding-bottom:12px;padding-right:calc(44vw - 20px)}
  .niches>:first-child{margin-left:0}.niches>:last-child{margin-right:0}
  .niche:nth-child(n){margin-top:0}
  .niche:nth-child(even){margin-top:24px}
  .nt{font-size:16.5px;margin-top:12px}
  .wall-nav{display:none}
  .swipe{display:flex;align-items:center;gap:10px;margin:4px var(--gut) 0;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,230,210,.82)}
  .swipe i{flex:1;height:1px;background:linear-gradient(90deg,rgba(201,164,92,.7),rgba(201,164,92,0))}
  .credenza{margin:14px 0 0;padding:14px var(--gut) 26px;flex-direction:column;gap:18px}
  .medal{order:-1}
  .lamp,.chair{display:none}
  .vols ul{justify-content:center}
  .medal svg{width:58px;height:58px}
  .medal .tab{height:40px;margin-left:-14px;padding-left:22px}
  .events{flex-direction:column;gap:22px}
  .salon{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 18px}
  .fr{width:100%!important}
  .card{padding:16px;flex-direction:column}
  .year .card .framed.small{width:150px}
  .slipcase .side{width:36px;margin-right:6px}.slipcase .side span{font-size:10px;letter-spacing:.24em}
  .spine{width:23.5vw;height:290px;padding:18px 5px 56px}
  .spine .yr{font-size:28px}.spine .ti{font-size:13px}
  .lip{height:44px;font-size:9.5px;letter-spacing:.24em}
  .seat{height:240px;margin-top:40px}.slamp{bottom:46px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .face:hover,.face:focus-visible,.frame-link:hover,.frame-link:focus-visible,.spine:hover,.spine:focus-visible,.spine[aria-current="true"]{transform:none}
  .medal:hover .ring,.medal:focus-visible .ring{transform:none}
}

/* below the first screen: let the browser skip layout and image fetching until a section nears the viewport */
.archive,.corner{content-visibility:auto;contain-intrinsic-size:auto 1100px}

/* ================= round 2: the Shorts wall, opened up =================
   A staggered wall of true 9:16 frames in a brick rhythm: 4 across, then 5 nesting between them, then 4 …
   Position in wall_order sets the slot (nth-child of a 9-step period), so any number of Shorts works. */
.wall{--g:clamp(18px,1.7vw,26px);max-width:1290px;margin:10px auto 0;padding:0 var(--gut)}
.wall .niches{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--g);row-gap:clamp(70px,6vw,96px);
  overflow:visible;padding:62px 0 40px;scroll-snap-type:none}
.wall .niches>.niche{width:auto;margin:0!important;grid-column-end:span 2}
.wall .niche:nth-child(9n+1){grid-column-start:2}.wall .niche:nth-child(9n+2){grid-column-start:4}
.wall .niche:nth-child(9n+3){grid-column-start:6}.wall .niche:nth-child(9n+4){grid-column-start:8}
.wall .niche:nth-child(9n+5){grid-column-start:1}.wall .niche:nth-child(9n+6){grid-column-start:3}
.wall .niche:nth-child(9n+7){grid-column-start:5}.wall .niche:nth-child(9n+8){grid-column-start:7}
.wall .niche:nth-child(9n+9){grid-column-start:9}
.wall .niche{--nw:100%}
.wall .niche::before{top:-46px;width:74%}
.wall .niche::after{top:-40px;height:72%}
.wall .cut{padding:7px}
.wall .nt{font-size:clamp(16px,1.25vw,18px)}
.wall .pbadge{width:clamp(44px,20%,56px)}
/* tablet: 3 then 4 */
@media (max-width:1099px){
  .wall .niches{grid-template-columns:repeat(8,minmax(0,1fr))}
  .wall .niche:nth-child(n){grid-column-start:auto}
  .wall .niche:nth-child(7n+1){grid-column-start:2}.wall .niche:nth-child(7n+2){grid-column-start:4}.wall .niche:nth-child(7n+3){grid-column-start:6}
  .wall .niche:nth-child(7n+4){grid-column-start:1}.wall .niche:nth-child(7n+5){grid-column-start:3}.wall .niche:nth-child(7n+6){grid-column-start:5}.wall .niche:nth-child(7n+7){grid-column-start:7}
}
/* phone: 2 across, the right-hand frame stepped down half a frame */
@media (max-width:699px){
  .wall{--g:14px;padding:0 16px}
  .wall .niches{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px;padding:52px 0 calc(50vw + 20px)}
  .wall .niche:nth-child(n){grid-column:auto / span 1}
  .wall .niche:nth-child(even){transform:translateY(46%)}
  .wall .niche::before{top:-38px}
  .wall .nt{font-size:15.5px}
  .wall .when{font-size:10px;letter-spacing:.08em}
}
/* tap targets: 44px minimum with spacing (Lighthouse) */
.vol{min-height:44px}
.vols ul{gap:10px}
.az{gap:6px}.az a{width:44px;height:44px}
.foot .links{gap:28px}.foot .links a{display:inline-flex;align-items:center;min-height:44px}
.nav a{display:inline-flex;align-items:center;min-height:44px}

/* phones: the subscribe medallion moves up under the line, so it stays on the first screen */
.medal-top{display:none}
@media (max-width:699px){
  .medal-top{display:block}.medal-top .medal svg{width:58px;height:58px}.medal-top .medal .tab{height:40px;margin-left:-14px;padding-left:22px}
  .credenza .medal{display:none}
  .hall-top{gap:12px}
}
.card .links a,.card .watch-on a{display:inline-flex;align-items:center;min-height:44px}
.card .links{gap:4px 18px}
.card .star a{display:inline-flex;align-items:center;min-height:44px}
.brand{min-height:44px}
.fb{display:inline-flex;align-items:center;min-height:44px;align-self:flex-start}
.foot .links a{min-width:44px;justify-content:center}