/* Year in Review: the year machine. The whole page is re-skinned by era (data-era on #yir):
   engraving 1860–1899, halftone 1900–1945, tinted 1946–1969, film 1970–1999, digital 2000–2026. */
@font-face{font-family:'GNN Serif';src:url(/home/assets/fonts/gnn-serif-var.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'GNN Serif';src:url(/home/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(/home/assets/fonts/inter-display-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Caslon Display';src:url(/players/assets/fonts/caslon-display.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Caslon Text';src:url(/players/assets/fonts/caslon-text.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Caslon Text';src:url(/players/assets/fonts/caslon-text-italic.woff2) format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:'Caslon Text';src:url(/players/assets/fonts/caslon-text-bold.woff2) format('woff2');font-weight:700;font-display:swap}

.yir-body{margin:0;background:#07110d}
.yir{
  --serif:'GNN Serif','Lora',Georgia,serif; --display:'Caslon Display','Caslon Text',Georgia,serif; --text:'Caslon Text',Georgia,serif; --label:'Inter Display','Helvetica Neue',Arial,sans-serif;
  /* the digital era is the default skin */
  --bg:#07110d; --bg2:#0c1d16; --ink:#f2efe4; --dim:#c9cfc6; --faint:#9eaaa2; --rule:rgba(242,239,228,.14);
  --hero-ink:#f4f1e6; --hero-dim:#d3dbd3; --hero-plate:rgba(5,14,11,.55);
  --card:rgba(255,255,255,.055); --card-edge:rgba(255,255,255,.16); --cink:#f4f1e6; --cdim:#c3cbc4; --cfaint:#a3ada6;
  --well:rgba(0,0,0,.28); --well-hi:rgba(255,255,255,.07); --well-lo:rgba(0,0,0,.5);
  --major:#f1c75b; --amateur:#8cc8ee; --cup:#ef7a62; --tour:#7fd8c3; --link:#f1c75b;
  --paper:#ece4cf; --pink:#1d1a16; --shadow:0 30px 60px -28px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.05) inset;
  --key-top:#2a3a33; --key-side:#121c18; --key-ink:#eef0e6;
  --stripe:rgba(255,255,255,.025);
  position:relative; color:var(--ink); background:var(--bg); font-family:var(--serif); overflow-x:clip;
  transition:background-color .6s ease, color .6s ease;
}
.yir *{box-sizing:border-box}
.yir a{color:inherit; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent); text-underline-offset:3px}
.yir a:hover{text-decoration-color:currentColor}
.yir :focus-visible{outline:2px solid var(--link); outline-offset:3px}

/* ---------- eras ---------- */
.yir[data-era="film"]{
  --bg:#0f1e17; --bg2:#14271e; --ink:#f3ede0; --dim:#d5cdbd; --faint:#b3aa98; --rule:rgba(243,237,224,.16);
  --card:#f3ecdf; --card-edge:rgba(255,255,255,.7); --cink:#1d2420; --cdim:#4b524c; --cfaint:#5f6660;
  --well:#e6ddcc; --well-hi:rgba(255,255,255,.9); --well-lo:rgba(90,70,40,.28);
  --major:#f0bd4f; --amateur:#7fbfe6; --cup:#ec7059; --tour:#74d0ba; --link:#f0bd4f;
  --cmajor:#8a5f0c; --camateur:#245f86; --ccup:#a33a26; --ctour:#1c6e5d;
  --shadow:0 34px 50px -26px rgba(0,0,0,.65),0 10px 18px -8px rgba(0,0,0,.35);
  --key-top:#efe6d4; --key-side:#b9a884; --key-ink:#1d2420;
}
.yir[data-era="tinted"]{
  --bg:#efe5cf; --bg2:#e7dcc2; --ink:#2b2a24; --dim:#4f4b40; --faint:#5f5a4c; --rule:rgba(43,42,36,.2);
  --hero-ink:#22231f; --hero-dim:#3c3b33; --hero-plate:rgba(244,236,218,.72);
  --card:#f7f0e0; --card-edge:#d9ccae; --cink:#26251f; --cdim:#4d493e; --cfaint:#5c574a;
  --well:#ebe1cb; --well-hi:rgba(255,255,255,.85); --well-lo:rgba(110,90,50,.3);
  --major:#b88a1c; --amateur:#3f7ea8; --cup:#b4482f; --tour:#2f8572; --link:#8a5f0c;
  --cmajor:#7f5a0c; --camateur:#2b5f84; --ccup:#9a3a24; --ctour:#1f6b5a;
  --shadow:0 22px 30px -22px rgba(70,50,20,.5),0 2px 4px rgba(70,50,20,.12);
  --key-top:#f8f1e1; --key-side:#cbb88f; --key-ink:#26251f; --stripe:rgba(80,60,20,.03);
}
.yir[data-era="halftone"]{
  --bg:#e8e1cd; --bg2:#dfd7c0; --ink:#1c1a16; --dim:#3d3a33; --faint:#4f4b42; --rule:rgba(28,26,22,.28);
  --hero-ink:#16140f; --hero-dim:#2f2c26; --hero-plate:rgba(236,228,208,.82);
  --card:#efe8d6; --card-edge:#bdb39b; --cink:#1a1814; --cdim:#3e3b33; --cfaint:#504c43;
  --well:#e4dcc6; --well-hi:rgba(255,255,255,.7); --well-lo:rgba(40,30,10,.28);
  --major:#8f6a12; --amateur:#2f5f80; --cup:#8f3424; --tour:#1f6656; --link:#1c1a16;
  --cmajor:#7a5a0e; --camateur:#28536f; --ccup:#86301f; --ctour:#1b5a4c;
  --shadow:0 1px 0 rgba(0,0,0,.08),0 14px 22px -18px rgba(40,30,10,.5);
  --key-top:#f1ebda; --key-side:#a99e83; --key-ink:#1c1a16; --stripe:rgba(0,0,0,.035);
}
.yir[data-era="engraving"]{
  --bg:#f1e8d4; --bg2:#e9dec6; --ink:#33251a; --dim:#523f2e; --faint:#5f4b38; --rule:rgba(51,37,26,.25);
  --hero-ink:#2c2016; --hero-dim:#4a3a2b; --hero-plate:rgba(243,234,214,.82);
  --card:#f6eedd; --card-edge:#c9b48f; --cink:#2f2218; --cdim:#54412f; --cfaint:#634e3b;
  --well:#ece1c9; --well-hi:rgba(255,255,255,.75); --well-lo:rgba(90,60,30,.28);
  --major:#8a6114; --amateur:#3a5e78; --cup:#8b3a24; --tour:#2a6152; --link:#5e2a14;
  --cmajor:#7a540f; --camateur:#33566e; --ccup:#80341f; --ctour:#245548;
  --shadow:0 1px 0 rgba(90,60,30,.18),0 16px 24px -20px rgba(70,45,20,.55);
  --key-top:#f7efdd; --key-side:#b49b72; --key-ink:#2f2218; --stripe:rgba(80,50,20,.035);
}

/* ---------- the stage: the year's world ---------- */
.yir-stage{position:relative; height:calc(100vh - 58px); height:calc(100svh - 58px); min-height:620px; max-height:980px; overflow:hidden; isolation:isolate; color:var(--hero-ink)}
.yir-world,.yir-print{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.yir-print{opacity:0; pointer-events:none}
.yir-printed .yir-print{opacity:1; animation:yir-roll .95s cubic-bezier(.6,.05,.25,1) both}
@keyframes yir-roll{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
.yir-stage::after{content:""; position:absolute; top:0; bottom:0; left:0; width:90px; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,250,235,.55) 70%,rgba(80,60,30,.35) 76%,rgba(255,255,255,0))}
.yir-printed .yir-stage::after{animation:yir-roller .95s cubic-bezier(.6,.05,.25,1) both}
@keyframes yir-roller{0%{opacity:1; transform:translateX(-90px)} 90%{opacity:1} 100%{opacity:0; transform:translateX(100vw)}}
/* while the ball moves the world is shown live, toned toward its era; it is printed properly when it stops */
.yir[data-live="engraving"] .yir-world{filter:sepia(.75) contrast(1.08) saturate(.6)}
.yir[data-live="halftone"] .yir-world{filter:grayscale(1) contrast(1.18) sepia(.12)}
.yir[data-live="tinted"] .yir-world{filter:sepia(.32) saturate(.72)}
.yir[data-live="film"] .yir-world{filter:saturate(1.12) contrast(1.04) sepia(.06)}

.yir-head{position:absolute; z-index:2; left:max(32px,4vw); top:clamp(28px,6vh,64px); width:min(470px,36vw); padding:0}
.yir-head::before{content:""; position:absolute; z-index:-1; inset:-40px -60px -40px -80px; border-radius:50%; background:radial-gradient(closest-side,var(--hero-plate),transparent); pointer-events:none}
.yir-kicker{margin:0 0 10px; font:600 12px/1.4 var(--label); letter-spacing:.24em; text-transform:uppercase; color:var(--hero-dim)}
.yir-h1{margin:0; font:400 clamp(40px,4.4vw,64px)/.98 var(--display); letter-spacing:-.01em; color:var(--hero-ink); text-wrap:balance}
.yir-h1-y{font-variant-numeric:lining-nums}
.yir-sum{margin:16px 0 0; font:italic 17px/1.55 var(--serif); color:var(--hero-dim); text-wrap:pretty}
.yir-era{position:absolute; z-index:4; left:max(32px,4vw); bottom:150px; padding:6px 10px 7px; border-radius:8px; background:var(--hero-plate); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); margin:0; max-width:min(440px,40vw); font:13.5px/1.45 var(--serif); color:var(--hero-dim)}
.yir-era::before{content:""; display:inline-block; width:18px; height:1px; margin:0 8px 4px 0; background:currentColor; vertical-align:middle; opacity:.6}

@media (hover:none){ .yir[data-era="digital"] .yir-era::after{content:""} }

/* the dial: the turf of history */
.yir-dial{position:absolute; z-index:3; left:0; right:0; bottom:0; padding:22px max(14px,2vw) 14px;
  background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 90%,transparent) 70%,transparent 100%)}
.yir-dial-track{position:relative; height:96px; cursor:grab; touch-action:pan-y; border-radius:12px; outline-offset:-2px}
.yir-dial-track:active{cursor:grabbing}
.yir-dial-track canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.yir-ball-y{position:absolute; left:0; top:-6px; min-width:58px; padding:4px 8px; text-align:center; font:600 15px/1 var(--label); letter-spacing:.06em; font-variant-numeric:tabular-nums;
  color:var(--hero-ink); background:var(--hero-plate); border-radius:6px; pointer-events:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.yir-dial-hint{margin:2px 8px 0; text-wrap:balance; font:600 10.5px/1.3 var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--hero-dim); text-align:center; opacity:.85}
.yir-type{position:absolute; z-index:4; left:50%; top:40%; transform:translate(-50%,-50%) scale(.96); margin:0; font:600 clamp(80px,14vw,200px)/1 var(--label); letter-spacing:.04em;
  color:var(--hero-ink); opacity:0; pointer-events:none; text-shadow:0 10px 40px rgba(0,0,0,.35); transition:opacity .2s, transform .2s}
.yir-typing .yir-type{opacity:.9; transform:translate(-50%,-50%) scale(1)}

/* the traced champion */
.yir-zone{display:none}
.yir-trace{position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:18px max(20px,4vw) 6px; font:15px/1.55 var(--serif); color:var(--dim)}
.yir-trace p{margin:0 0 8px}
.yir-trace b{font:400 22px/1.2 var(--display); color:var(--ink)}
.yir-trace ol{list-style:none; margin:0 0 10px; padding:0; columns:3 220px; column-gap:18px; font:14px/1.5 var(--serif)}
.yir-trace li a{display:inline-block; padding:3px 0}
.yir-untrace,.yir-reset,.yir-clear{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--rule); border-radius:10px; font:600 12px/1 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.yir-untrace:hover,.yir-reset:hover,.yir-clear:hover{border-color:var(--link)}

/* ---------- the deck: keycaps ---------- */
.yir-deck{position:relative; z-index:3; display:grid; grid-template-columns:auto auto minmax(240px,1fr); gap:22px 34px; align-items:start; max-width:1180px; margin:0 auto; padding:30px max(20px,4vw) 8px}
.yir-deck-h{grid-column:1/-1; margin:0; font:600 11px/1.3 var(--label); letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.yir-keys{display:grid; grid-template-columns:repeat(3,minmax(96px,124px)); gap:12px 10px; padding:14px; border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 90%,#000),var(--bg2)); box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.06)}
.yir-who{grid-template-columns:repeat(1,minmax(110px,128px))}
.yk{all:unset; box-sizing:border-box; position:relative; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; min-height:66px; padding:9px 10px 10px; border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--key-top) 100%,#fff 8%),var(--key-top)); color:var(--key-ink);
  box-shadow:0 6px 0 var(--key-side),0 9px 14px -4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateY(0); transition:transform .09s ease, box-shadow .09s ease, background .2s ease}
.yk:hover{transform:translateY(1px); box-shadow:0 5px 0 var(--key-side),0 8px 12px -4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.yk:active,.yk[aria-pressed="true"]{transform:translateY(5px); box-shadow:0 1px 0 var(--key-side),0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.yk-t{font:600 11.5px/1.2 var(--label); letter-spacing:.06em}
.yk-n{align-self:flex-end; font:600 20px/1 var(--label); font-variant-numeric:tabular-nums; opacity:.85}
.yk[data-fam="major"]{--fam:var(--major)} .yk[data-fam="amateur"]{--fam:var(--amateur)} .yk[data-fam="cup"]{--fam:var(--cup)} .yk[data-fam="tour"]{--fam:var(--tour)}
.yk[data-who]{--fam:var(--link)}
.yk::before{content:""; position:absolute; left:10px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--fam); opacity:.5; transform:translateX(0)}
.yk .yk-t{padding-left:13px}
.yk[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--fam) 85%,#fff 15%),var(--fam)); color:#141812}
.yk[aria-pressed="true"]::before{background:#141812; opacity:.6; box-shadow:0 0 0 3px rgba(20,24,18,.15)}
.yk.yk-zero{background:linear-gradient(180deg,color-mix(in srgb,var(--key-top) 82%,var(--bg2)),color-mix(in srgb,var(--key-top) 74%,var(--bg2)))}
.yk.yk-zero .yk-n{opacity:.55}
.yk-hit{animation:yk-hit .32s ease}
@keyframes yk-hit{40%{filter:brightness(1.25)}}
.yir-find{display:flex; flex-direction:column; gap:10px; min-width:0}
.yir-find label{font:600 11px/1.3 var(--label); letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.yir-slot{position:relative; border-radius:14px; padding:4px; background:var(--bg2); box-shadow:inset 0 2px 6px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.06)}
.yir-slot select{appearance:none; -webkit-appearance:none; width:100%; min-height:52px; padding:0 44px 0 16px; border:0; border-radius:11px; background:var(--key-top); color:var(--key-ink); font:16px/1.2 var(--serif); cursor:pointer;
  box-shadow:0 3px 0 var(--key-side),inset 0 1px 0 rgba(255,255,255,.3)}
.yir-slot::after{content:""; position:absolute; right:22px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--key-ink); border-bottom:2px solid var(--key-ink); transform:rotate(45deg); pointer-events:none; opacity:.7}
.yir-find-note{margin:0; font:italic 14px/1.5 var(--serif); color:var(--dim)}
.yir-shown{margin:0; font:600 11px/1.4 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

/* ---------- the ledger ---------- */
.yir-ledger{position:relative; max-width:1280px; margin:0 auto; padding:16px max(16px,3vw) 40px; transition:opacity .18s ease}
.yir-ledger.out{opacity:.25}
.yir-ch{position:relative; margin:56px 0 0}
.yir-ch-h{max-width:820px; margin:0 0 22px; padding:0 max(4px,1vw)}
.yir-ch-h h2{margin:0; font:400 clamp(34px,4vw,54px)/1 var(--display); color:var(--ink); letter-spacing:-.005em}
.yir-ch-note{margin:10px 0 0; font:italic 16px/1.5 var(--serif); color:var(--dim)}
.yir-lanes{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.yir-lanes[data-n="1"]{grid-template-columns:minmax(0,760px)}
.yir-lane,.yir-season{position:relative; min-width:0; padding:0 0 10px; border-radius:28px;
  background:repeating-linear-gradient(90deg,var(--stripe) 0 46px,transparent 46px 92px)}
.yir-solo{max-width:760px}
.yir-lane-h{position:relative; display:flex; align-items:flex-end; gap:14px; margin:0 0 6px; padding:6px 10px 0}
.yir-n{font:600 clamp(84px,9vw,140px)/.8 var(--label); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  color:transparent; background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 92%,transparent) 0%,color-mix(in srgb,var(--ink) 30%,transparent) 100%); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.18))}
.yir-lane-t{padding-bottom:6px; font:600 13px/1.25 var(--label); letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.yir-empty{margin:8px 10px 0; padding:22px 22px; border-radius:18px; background:var(--well); box-shadow:inset 0 2px 5px var(--well-lo),inset 0 -1px 0 var(--well-hi); font:italic 16px/1.55 var(--serif); color:var(--dim)}
.yir-cards{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:44px}
/* the cards run down their fairway like shots: each one a little off the line, a ball flight joining them */
.yir-cards>li{position:relative}
.yir-cards>li:nth-child(odd){margin-right:5%}
.yir-cards>li:nth-child(even){margin-left:5%}
.yir-cards>li+li::before{content:""; position:absolute; left:18%; right:18%; top:-42px; height:40px; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M10 2 C 70 2, 130 38, 190 38' fill='none' stroke='%23f1c75b' stroke-width='1.6' stroke-dasharray='2 5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.yir-cards>li:nth-child(odd)+li::before{transform:scaleX(1)}
.yir-cards>li:nth-child(even)+li::before{transform:scaleX(-1)}
.yir[data-era="halftone"] .yir-cards>li+li::before,.yir[data-era="engraving"] .yir-cards>li+li::before,.yir[data-era="tinted"] .yir-cards>li+li::before{filter:brightness(.45) sepia(.6)}
.yir-season-link{margin:6px 10px 0; padding:16px 18px; border-radius:16px; background:var(--well); box-shadow:inset 0 2px 5px var(--well-lo),inset 0 -1px 0 var(--well-hi); font:16px/1.5 var(--serif); color:var(--dim)}
.yir-season-link a{color:var(--ink); font-weight:600}
.yir-seasons{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.yir-none{margin:40px auto; max-width:700px; font:italic 18px/1.6 var(--serif); color:var(--dim); text-align:center}

/* ---------- the card ---------- */
.yc{--fam:var(--major); --cfam:var(--cmajor,var(--major)); position:relative; border-radius:22px; padding:22px 24px 16px; color:var(--cink); background:var(--card);
  box-shadow:var(--shadow); transform:perspective(1100px) rotate(var(--tilt,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s cubic-bezier(.2,.7,.2,1);
  animation:yc-in .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 45ms)}
@keyframes yc-in{from{opacity:0; transform:perspective(1100px) translateY(26px) rotate(calc(var(--tilt,0deg) * 3))}}
.yc[data-fam="amateur"]{--fam:var(--amateur); --cfam:var(--camateur,var(--amateur))}
.yc[data-fam="cup"]{--fam:var(--cup); --cfam:var(--ccup,var(--cup))}
.yc[data-fam="tour"]{--fam:var(--tour); --cfam:var(--ctour,var(--tour))}
.yir[data-era="digital"] .yc{-webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  background:radial-gradient(120% 70% at 0% 0%,color-mix(in srgb,var(--fam) 10%,transparent),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.12)}
.yir[data-era="digital"] .yc::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--fam) 70%,transparent),transparent 35%,transparent 70%,color-mix(in srgb,var(--fam) 40%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.yir[data-era="film"] .yc{background:radial-gradient(120% 90% at 30% 0%,#fbf6ec,#efe6d5 60%,#e7dcc7)}
.yir[data-era="tinted"] .yc{border:1px solid var(--card-edge)}
.yir[data-era="halftone"] .yc{border-radius:4px; border:1px solid var(--card-edge); background:var(--card) radial-gradient(rgba(0,0,0,.05) .6px,transparent .7px) 0 0/4px 4px}
.yir[data-era="engraving"] .yc{border-radius:6px; border:1px solid var(--card-edge); outline:1px solid var(--card-edge); outline-offset:-6px}
/* the grain of the stock it is printed on */
.yc::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.yir[data-era="digital"] .yc::after{display:none}

.yc-head{position:relative; padding:0 0 14px; border-bottom:1px solid color-mix(in srgb,var(--cink) 14%,transparent)}
.yc-kind{margin:0 0 6px; font:600 11px/1.3 var(--label); letter-spacing:.18em; text-transform:uppercase; color:var(--cfam)}
.yir[data-era="digital"] .yc-kind{color:var(--fam)}
.yc-kind::before{content:""; display:inline-block; width:22px; height:3px; margin:0 8px 3px 0; border-radius:2px; background:var(--fam); vertical-align:middle}
.yc-ev{margin:0; font:400 clamp(28px,3vw,38px)/1.02 var(--display); letter-spacing:-.005em; text-wrap:balance}
.yc-ev a{text-decoration:none}
.yc-ev a:hover{text-decoration:underline}
.yc-where{margin:6px 0 0; font:italic 15.5px/1.45 var(--serif); color:var(--cdim)}
.yc-depth{display:flex; align-items:center; gap:9px; margin:12px 0 0; font:600 10.5px/1 var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--cfaint)}
.yc-depth span{display:inline-flex; gap:4px}
.yc-depth i{display:block; width:10px; height:10px; border-radius:50%; background:var(--well); box-shadow:inset 0 1px 2px var(--well-lo),0 1px 0 var(--well-hi)}
.yc-depth i.on{background:var(--fam); box-shadow:0 0 0 1px color-mix(in srgb,var(--fam) 60%,#000 20%),0 0 8px color-mix(in srgb,var(--fam) 50%,transparent)}
.yc-null{font-style:italic; color:var(--cfaint)}
.yc-body{display:flex; flex-direction:column; gap:18px; padding:16px 0 4px}
.yc-lbl,.yc-h{margin:0 0 4px; font:600 10.5px/1.3 var(--label); letter-spacing:.2em; text-transform:uppercase; color:var(--cfaint)}
.yc-win{margin:0; font:400 clamp(32px,3.6vw,46px)/1.02 var(--display); letter-spacing:-.01em}
.yc-win a{text-decoration:none; background:linear-gradient(var(--fam),var(--fam)) 0 100%/100% 2px no-repeat; padding-bottom:2px}
.yc-trace{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:4px 0 0; padding:0 2px; font:600 11px/1.2 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--cfam)}
.yir[data-era="digital"] .yc-trace{color:var(--fam)}
.yc-trace svg{width:22px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-dasharray:3 2}
.yc-trace:hover{text-decoration:underline; text-underline-offset:4px}
.yc-trace:focus-visible{outline:2px solid currentColor}
.yc-nums{display:flex; flex-wrap:wrap; gap:6px 26px; margin:10px 0 0}
.yc-num{display:flex; flex-direction:column}
.yc-num b{font:600 34px/1 var(--label); text-transform:none; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.yc-num span{font:600 10px/1.3 var(--label); letter-spacing:.18em; text-transform:uppercase; color:var(--cfaint); margin-top:4px}
.yc-ru{margin:10px 0 0; font:15.5px/1.5 var(--serif); color:var(--cdim)}
.yc-result .yc-null{margin:8px 0 0; font-size:15px}
.yc-go{margin:10px 0 0; font:600 12px/1.3 var(--label); letter-spacing:.1em; text-transform:uppercase}
.yc-go a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--cfam)}
.yir[data-era="digital"] .yc-go a{color:var(--fam)}
.yc-go a:hover{text-decoration:underline}

/* the parts not yet researched: carved wells in the card */
.yc-wells{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.yc-full .yc-wells{display:none}
.yc-well{position:relative; padding:12px 12px 13px; border-radius:15px; background:var(--well); box-shadow:inset 0 2px 5px var(--well-lo),inset 0 -1px 0 var(--well-hi)}
.yc-well svg{display:block; width:40px; height:32px; margin:0 0 8px; opacity:.6}
.yc-well .i-fill{fill:none; stroke:var(--cfaint); stroke-width:1.2; stroke-dasharray:3 2.5}
.yc-well .i-line{fill:none; stroke:var(--cfaint); stroke-width:1.2; stroke-linecap:round; opacity:.6}
.yc-well .yc-h{margin:0 0 3px; color:var(--cdim)}
.yc-well p{margin:0; font:italic 13.5px/1.4 var(--serif); color:var(--cfaint)}
.yc-sparse .yc-well{background:linear-gradient(180deg,var(--well),color-mix(in srgb,var(--well) 85%,var(--card)))}

/* the clipping */
.yc-clips{display:flex; flex-direction:column; gap:16px}
.yc-clipping{position:relative; margin:4px -6px 4px 6px; padding:18px 22px 16px; background:#ece4cf radial-gradient(rgba(40,30,15,.09) .7px,transparent .8px) 0 0/3px 3px; color:#1d1a16;
  clip-path:var(--tear); transform:rotate(var(--rot,0deg)); filter:drop-shadow(0 10px 10px rgba(0,0,0,.25))}
.yc-clipping:nth-child(odd){margin:4px 6px 4px -6px}
.yc-mast{margin:0; padding:0 0 5px; text-align:center; font:700 20px/1 var(--text); letter-spacing:.02em; border-bottom:3px double #1d1a16}
.yc-dateline{margin:6px 0 10px; text-align:center; font:600 10px/1.2 var(--label); letter-spacing:.16em; text-transform:uppercase; color:#3d382f}
.yc-clipping blockquote{margin:0; font:16.5px/1.45 var(--text); text-align:justify; hyphens:auto}
.yc-clipping blockquote p{margin:0}
.yc-clipping blockquote p::first-letter{float:left; margin:2px 6px 0 0; font:700 44px/.8 var(--text)}
.yc-clipping figcaption{margin:10px 0 0; font:italic 13px/1.4 var(--serif); color:#3d382f}
.yc-clipping a{color:#1d1a16}
.yc-speaker{font-style:normal; font-weight:600}

/* the leaderboard: a hand-turned board of slats */
.yc-lb{width:100%; border-collapse:separate; border-spacing:0 4px; font:600 13.5px/1.2 var(--label); font-variant-numeric:tabular-nums}
.yc-lb thead th{padding:0 8px 2px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cfaint); text-align:left}
.yc-lb th.n,.yc-lb td.n,.yc-lb th.r,.yc-lb td.r{text-align:right}
.yc-lb tbody td,.yc-lb tbody th{padding:6px 8px; background:color-mix(in srgb,var(--card) 70%,#fff 30%); color:var(--cink); text-align:left; font-weight:600;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.yir[data-era="digital"] .yc-lb tbody td,.yir[data-era="digital"] .yc-lb tbody th{background:rgba(255,255,255,.07)}
.yc-lb tbody td:first-child{border-radius:7px 0 0 7px; width:46px; color:var(--cdim)}
.yc-lb tbody td:last-child{border-radius:0 7px 7px 0}
.yc-lb tbody th{font-weight:600; letter-spacing:.02em}
.yc-lb tbody tr.w td,.yc-lb tbody tr.w th{background:color-mix(in srgb,var(--fam) 32%,var(--card))}
.yc-lb .r{font-weight:500; color:var(--cdim); font-size:12px}

/* the golfer and the bag */
.yc-note{margin:0; font:17px/1.55 var(--serif)}
.yc-small{margin:6px 0 0; font:13.5px/1.4 var(--serif); color:var(--cdim)}
.yc-bag-in{display:grid; grid-template-columns:190px 1fr; gap:16px; align-items:end}
.yc-bag-art{width:100%; height:auto}
.yc-bag-art .b-body{fill:color-mix(in srgb,var(--fam) 55%,var(--card)); stroke:var(--cink); stroke-width:1.2}
.yc-bag-art .b-collar{fill:var(--cink); opacity:.85}
.yc-bag-art .b-pocket{fill:none; stroke:var(--cink); stroke-width:1; opacity:.5}
.yc-bag-art .b-strap{fill:none; stroke:var(--cink); stroke-width:4; opacity:.55; stroke-linecap:round}
.yc-bag-art .b-shaft{stroke:var(--cdim); stroke-width:1.6}
.yc-bag-art .b-head{fill:var(--cink)}
.yc-bag-art .b-cover{fill:var(--fam); stroke:var(--cink); stroke-width:.8}
.yc-bag-art .b-shadow{fill:rgba(0,0,0,.18)}
.yc-clubs{list-style:none; margin:0; padding:0; font:14.5px/1.45 var(--serif)}
.yc-clubs li{padding:4px 0; border-bottom:1px solid color-mix(in srgb,var(--cink) 10%,transparent)}
.yc-clubs span{display:inline-block; min-width:84px; font:600 10.5px/1 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--cfaint)}
.yc-clubs small{color:var(--cdim)}
.yc-src{margin:10px 0 0; padding:10px 0 0; border-top:1px solid color-mix(in srgb,var(--cink) 10%,transparent); font:12.5px/1.5 var(--serif); color:var(--cfaint)}
.yc-src a{display:inline-block; padding:6px 0}

/* in the full state the clipping lifts off the card a little */
.yc-full .yc-clipping{margin-right:-34px}
.yc-full .yc-clipping:nth-child(even){margin-left:-30px; margin-right:6px}

/* ---------- about, footer ---------- */
.yir-about{max-width:820px; margin:0 auto; padding:30px max(20px,4vw) 70px; font:16px/1.6 var(--serif); color:var(--dim)}
.yir-about h2{margin:0 0 12px; font:400 30px/1.1 var(--display); color:var(--ink)}
.yir-about p{margin:0 0 12px}
.yir-body .ua-foot{background:var(--bg,#07110d); color:#cfc6b1; border-top:1px solid rgba(239,207,134,.18); padding:24px 24px 36px; font:14px/1.5 'GNN Serif',Georgia,serif; text-align:center}
.yir-body .ua-foot ul{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 8px}
.yir-body .ua-foot a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:#f4d692; text-decoration:underline; text-underline-offset:3px}
.yir-body .ua-foot p{margin:0}

/* ---------- phone ---------- */
@media (max-width:1023px){
  .yir-lanes{grid-template-columns:1fr; gap:34px}
  .yir-deck{grid-template-columns:auto 1fr}
  .yir-find{grid-column:1/-1}
  .yir-seasons{grid-template-columns:1fr}
}
@media (max-width:760px){
  .yir-deck{grid-template-columns:1fr; gap:18px; padding:24px 14px 6px}
  .yir-keys{grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px 8px; padding:10px}
  .yir-who{grid-template-columns:repeat(3,minmax(0,1fr))}
  .yk{min-height:62px; padding:8px 8px 9px}
  .yk-t{font-size:10.5px; letter-spacing:.03em}
  .yk-n{font-size:18px}
  .yir-ledger{padding:8px 12px 30px}
  .yir-ch{margin-top:44px}
  .yc{padding:18px 16px 12px; border-radius:18px}
  .yc-wells{grid-template-columns:1fr 1fr}
  .yc-todo{flex-direction:column; align-items:flex-start; gap:6px; padding:10px 14px 11px}
  .yc-todo-i svg{width:22px; height:18px}
  .yc-bag-in{grid-template-columns:110px 1fr}
  .yc-full .yc-clipping,.yc-full .yc-clipping:nth-child(even){margin-left:-4px; margin-right:-4px}
  .yc-clipping blockquote{font-size:15.5px}
  .yir-n{font-size:92px}
  .yir-cards{gap:36px}
  /* on a phone the two lanes of a chapter are dealt together, one men's, one women's, so neither waits below the other */
  .yir-lanes[data-n="2"]{display:grid; grid-template-columns:1fr 1fr; gap:36px 12px}
  .yir-lanes[data-n="2"] .yir-lane,.yir-lanes[data-n="2"] .yir-cards{display:contents}
  .yir-lanes[data-n="2"] .yir-lane-h{order:-1; margin:0; padding:0 4px}
  .yir-lanes[data-n="2"] .yir-n{font-size:72px}
  .yir-lanes[data-n="2"] .yir-lane-t{font-size:11px; letter-spacing:.14em}
  .yir-lanes[data-n="2"] .yir-cards>li{grid-column:1/-1; order:var(--o,0); margin-left:0; margin-right:0}
  .yir-lanes[data-n="2"] .yir-cards>li:nth-child(n)::before{display:none}
  .yir-lanes[data-n="2"] .yir-empty{grid-column:1/-1; order:999}
  .yir-cards>li:nth-child(odd){margin-right:3%}
  .yir-cards>li:nth-child(even){margin-left:3%}
  .yir-cards>li+li::before{top:-34px; height:32px}
}

/* =====================================================================================================
   THE CASES (v2): every card is a moulded object lit in clay by yir.js; until it is lit (or without JS) it reads flat
   ===================================================================================================== */
.yc{position:relative; isolation:isolate}
.yc>*{position:relative; z-index:1}
.yc>.yc-clay{position:absolute; z-index:0; inset:0; width:100%; height:100%; border-radius:inherit; opacity:0; transition:opacity .6s ease; pointer-events:none}
.yc.clay-on>.yc-clay{opacity:1}
.yc.clay-on{background:none!important; border-color:transparent!important; outline-color:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  box-shadow:0 44px 60px -34px rgba(0,0,0,.75),0 16px 26px -14px rgba(0,0,0,.45)}
.yc.clay-on::before,.yc.clay-on::after{display:none}
.yir[data-era="halftone"] .yc.clay-on,.yir[data-era="engraving"] .yc.clay-on{box-shadow:0 26px 40px -30px rgba(60,40,15,.55),0 2px 4px rgba(60,40,15,.12)}
.yir[data-era="tinted"] .yc.clay-on{box-shadow:0 34px 50px -32px rgba(70,50,20,.6),0 6px 12px -6px rgba(70,50,20,.25)}
.yc-head{border-bottom:0; padding-bottom:16px}
.yc-result{padding:14px 0 6px}
.yc-depth i{width:11px; height:11px}
.clay-on .yc-depth i{background:none!important; box-shadow:none!important}
.yc>.yc-part{margin-top:18px}

/* the winner's name, standing up off the case */
.yc-win{font-size:clamp(34px,3.8vw,50px); line-height:1.04; margin:2px 0 4px}
.yc-win a{background:none; text-decoration:none}
.yir[data-era="film"] .yc-win{color:#2a231b; text-shadow:1px 1px 0 #c9b89a,2px 2px 0 #bfac8d,3px 3px 0 #b39f80,4px 4px 0 #a79373,7px 10px 12px rgba(70,45,15,.32)}
.yir[data-era="tinted"] .yc-win{color:#2a2620; text-shadow:1px 1px 0 #d2c3a3,2px 2px 0 #c4b393,3px 3px 0 #b6a483,6px 9px 10px rgba(80,60,25,.25)}
.yir[data-era="digital"] .yc-win{color:#fff; text-shadow:0 1px 0 #d4ddd7,0 2px 0 #bdc8c1,0 3px 0 #a5b2ab,0 4px 0 #8e9c95,0 5px 1px #76857d,0 0 28px rgba(190,255,215,.28),0 14px 20px rgba(0,0,0,.65)}
.yir[data-era="halftone"] .yc-win,.yir[data-era="engraving"] .yc-win{text-shadow:0 1.5px 0 rgba(255,255,255,.85),0 -1px 0 rgba(0,0,0,.18)}
.yc-win a:hover{text-decoration:underline; text-decoration-thickness:2px}

/* the numbers, each on a key */
.yc-nums{gap:16px 22px; margin:16px 4px 6px}
.yc-num{padding:2px 4px}
.yc-num b{font-size:30px}
.yc-num:not(:last-child){margin-right:6px}

/* the tray of places still empty */
.yc-tray{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0 6px; padding:10px; border-radius:18px; background:var(--well); box-shadow:inset 0 2px 6px var(--well-lo),inset 0 -1px 0 var(--well-hi)}
.yc-tray[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.yc-tray[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.yc-tray[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.yc-cav{display:flex; flex-direction:column; align-items:center; text-align:center; min-height:156px; padding:12px 8px 12px; border-radius:14px; background:color-mix(in srgb,var(--well) 80%,#000 6%); box-shadow:inset 0 3px 7px var(--well-lo)}
.yc-cav-art{display:block; width:100%; height:66px; margin:0 0 10px}
.yc-cav .yc-h{margin:0 0 3px; color:var(--cdim)}
.yc-cav p{margin:0; font:italic 13.5px/1.35 var(--serif); color:var(--cfaint)}
.clay-on .yc-tray,.clay-on .yc-cav{background:none; box-shadow:none}

/* the leaderboard slats */
.clay-on .yc-lb tbody td,.clay-on .yc-lb tbody th{background:none!important; box-shadow:none!important}
.yc-lb{border-spacing:0 6px}
.yc-lb tbody tr.w td,.yc-lb tbody tr.w th{color:#1a1612}
.clay-on .yc-lb tbody tr.w td,.clay-on .yc-lb tbody tr.w th{color:#1a1612}

/* the medallion */
.yc-gf{display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center}
.yc-medal{display:block; width:96px; height:96px; border-radius:50%; background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--fam) 60%,#fff),var(--fam)); box-shadow:0 8px 14px -6px rgba(0,0,0,.45)}
.clay-on .yc-medal{background:none; box-shadow:none}

/* the bag */
.yc-bagobj{width:100%; height:230px}
.yc-bagobj svg{width:100%; height:100%}
.clay-on .yc-bagobj svg{visibility:hidden}
.yc-bag-in{grid-template-columns:170px 1fr; align-items:center}

/* the clippings lie flat in the case once it is lit */
.clay-on .yc-clipping{background:none; clip-path:none; filter:none; transform:none}
.yc .yc-clipping,.yc .yc-clipping:nth-child(odd),.yc-full .yc-clipping,.yc-full .yc-clipping:nth-child(even){margin:10px 6px}
.yc-clipping{color:#1d1a16}
.yir[data-era="digital"] .clay-on .yc-clipping{color:#1d1a16}

/* the footer */
.yc-src{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 18px; margin-top:8px; border-top:0}

/* the turf the cases lie on (film and digital); paper years lie on paper */
.yir[data-era="digital"] .yir-ledger,.yir[data-era="film"] .yir-ledger{background:
  radial-gradient(80% 40% at 50% 0%,rgba(255,240,200,.07),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 78px,rgba(0,0,0,.05) 78px 156px)}
.yir-lane,.yir-season{background:none}

/* the lane counts: numerals standing on the grass, as in the world above */
.yir-n{color:var(--ink); background:none; -webkit-background-clip:border-box; background-clip:border-box; filter:none}
.yir[data-era="digital"] .yir-n{color:#fff; text-shadow:0 1px 0 #d4ddd7,0 2px 0 #b9c4bd,0 4px 0 #9aa79f,0 6px 0 #7c8a82,0 8px 1px #66746c,0 0 40px rgba(190,255,215,.35),0 22px 26px rgba(0,0,0,.6)}
.yir[data-era="film"] .yir-n{color:#f4ecdc; text-shadow:0 2px 0 #d6c8ad,0 4px 0 #c3b394,0 6px 0 #ad9c7c,0 8px 1px #988766,0 22px 24px rgba(0,0,0,.5)}
.yir[data-era="tinted"] .yir-n{color:#2a2620; text-shadow:2px 2px 0 #857b69,4px 4px 0 #a39882,10px 14px 16px rgba(80,60,25,.25)}
.yir[data-era="halftone"] .yir-n,.yir[data-era="engraving"] .yir-n{color:var(--ink); text-shadow:0 2px 0 rgba(255,255,255,.8),0 -1px 0 rgba(0,0,0,.25)}

@media (max-width:760px){
  .yc-tray{grid-template-columns:repeat(2,minmax(0,1fr))!important; padding:8px; gap:8px}
  .yc-tray[data-n="1"]{grid-template-columns:minmax(0,1fr)!important}
  .yc-cav{min-height:138px}
  .yc-cav-art{height:56px}
  .yc-gf{grid-template-columns:72px 1fr; gap:14px}
  .yc-medal{width:72px; height:72px}
  .yc-bag-in{grid-template-columns:120px 1fr}
  .yc-bagobj{height:180px}
  .yc-win{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .yir *,.yir *::before,.yir *::after{animation:none!important; transition:none!important}
  .yc{transform:rotate(var(--tilt,0deg))}
}

/* =====================================================================================================
   THE WORLD: the hero. One title, one thing to press, the world to play with; the words wait below.
   ===================================================================================================== */
.yir-stage{height:calc(100vh - 58px); height:calc(100svh - 58px); min-height:660px; max-height:1240px; touch-action:pan-y}
.ys-cv{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1}
.yir-head{z-index:3; width:auto; top:clamp(22px,4vh,40px); left:max(24px,3vw); pointer-events:none}
.yir-head::before{inset:-30px -50px -30px -60px}
.yir-kicker{margin-bottom:6px}
.yir-h1{font-size:clamp(34px,3.4vw,52px)}
.ys-y{color:var(--link)}
/* the shared look of a control on the sky: a solid, raised, obviously pressable thing */
.ys-go,.ys-filter-b,.ys-feature,.ys-ctl button{--plate:color-mix(in srgb,var(--bg) 78%,transparent); --edge:color-mix(in srgb,var(--hero-ink) 26%,transparent)}
/* go to: a round search button that opens into a line of type */
.ys-go{position:absolute; z-index:8; top:clamp(22px,4vh,40px); right:max(24px,3vw); width:46px; height:46px; border-radius:23px; border:1px solid var(--edge); background:var(--plate);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--hero-ink); box-shadow:0 8px 24px -10px rgba(0,0,0,.6); transition:width .28s cubic-bezier(.3,.7,.2,1), box-shadow .2s; cursor:pointer}
.ys-go:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 35%,transparent),0 8px 24px -10px rgba(0,0,0,.6)}
.ys-go:focus-within{width:min(400px,calc(100vw - 48px)); cursor:auto; box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 55%,transparent),0 8px 24px -10px rgba(0,0,0,.6)}
.ys-go-l{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ys-go-i{position:absolute; left:13px; top:13px; pointer-events:none}
.ys-go input{position:absolute; inset:0; width:100%; height:100%; padding:0 40px 0 42px; border:0; border-radius:23px; background:transparent; color:var(--hero-ink); font:400 16px var(--serif); cursor:pointer; outline:none}
.ys-go input::placeholder{color:transparent}
.ys-go:focus-within input{cursor:text}
.ys-go:focus-within input::placeholder{color:var(--hero-dim)}
.ys-go-k{position:absolute; right:12px; top:12px; display:none; padding:1px 6px; border:1px solid var(--edge); border-radius:5px; font:600 11px var(--label); color:var(--hero-dim)}
.ys-go:focus-within .ys-go-k{display:block}
@media (hover:none){ .ys-go:focus-within .ys-go-k{display:none} }
.ys-go ul{position:absolute; left:0; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none; background:var(--bg2); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); color:var(--ink)}
.ys-go li{padding:11px 12px; border-radius:9px; font:400 15px/1.3 var(--serif); cursor:pointer}
.ys-go li[aria-selected="true"],.ys-go li:hover{background:color-mix(in srgb,var(--link) 22%,transparent)}
/* the filter: one button that says what is showing; the switches live in its sheet */
.ys-filter{position:absolute; z-index:7; top:clamp(22px,4vh,40px); right:calc(max(24px,3vw) + 56px)}
.ys-filter-b{display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 16px 0 14px; border:1px solid var(--edge); border-radius:23px; background:var(--plate); color:var(--hero-ink);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:600 13.5px var(--label); cursor:pointer; box-shadow:0 8px 24px -10px rgba(0,0,0,.6); transition:box-shadow .2s}
.ys-filter-b:hover,.ys-filter-b[aria-expanded="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 40%,transparent),0 8px 24px -10px rgba(0,0,0,.6)}
.ys-filter-b.on{border-color:var(--link)}
.ys-filter-dots{display:inline-flex}
.ys-filter-dots i{width:11px; height:11px; margin-left:-3px; border-radius:50%; border:1.5px solid var(--bg); background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 42%,color-mix(in srgb,var(--c) 55%,#000) 100%)}
.ys-filter-dots i:first-child{margin-left:0}
.ys-sheet{position:absolute; right:0; top:calc(100% + 8px); width:max-content; min-width:260px; max-width:min(340px,calc(100vw - 24px)); padding:16px 14px 14px; border-radius:16px; background:var(--bg2); color:var(--ink); border:1px solid var(--rule); box-shadow:var(--shadow)}
.ys-sheet-h{margin:0 4px 8px; font:600 11px/1.3 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.ys-sheet-n{margin:10px 4px 0; font:italic 400 13px/1.4 var(--text); color:var(--dim)}
.ys-legend{display:flex; flex-direction:column; gap:10px}
.ys-tracks{display:flex; flex-direction:column; gap:2px}
.ys-tk{display:flex; align-items:center; gap:10px; min-height:38px; padding:4px 10px 4px 8px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:600 14px/1.15 var(--label); cursor:pointer; text-align:left}
.ys-tk i{flex:none; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 40%,color-mix(in srgb,var(--c) 55%,#000) 100%); box-shadow:0 1px 2px rgba(0,0,0,.4)}
.ys-tk span{flex:1}
.ys-tk b{font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums}
.ys-tk::after{content:""; flex:none; width:32px; height:18px; border-radius:9px; background:var(--link); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); transition:background .2s}
.ys-tk::before{content:""; position:absolute; right:12px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.4); transition:transform .2s}
.ys-tk{position:relative}
.ys-tk:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ys-tk[aria-pressed="false"]{color:var(--faint)}
.ys-tk[aria-pressed="false"]::after{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.ys-tk[aria-pressed="false"]::before{transform:translateX(-14px)}
.ys-tk[aria-pressed="false"] i{background:transparent; box-shadow:inset 0 0 0 1.5px var(--c)}
.yir[data-era="tinted"] .ys-tk i,.yir[data-era="halftone"] .ys-tk i,.yir[data-era="engraving"] .ys-tk i,.yir[data-era="tinted"] .ys-filter-dots i,.yir[data-era="halftone"] .ys-filter-dots i,.yir[data-era="engraving"] .ys-filter-dots i{--c:var(--ci)}
.ys-whos{display:flex; gap:6px; padding:8px 4px 0; border-top:1px solid var(--rule)}
.yir .ys-who{flex:1; min-height:36px; padding:0 10px; border:1px solid var(--rule); border-radius:10px; background:transparent; color:var(--ink); font:600 13px var(--label); cursor:pointer; display:inline-flex; gap:6px; align-items:center; justify-content:center; box-shadow:none; transform:none}
.yir .ys-who .yk-t{font:inherit; letter-spacing:.01em; text-transform:none}
.yir .ys-who .yk-n{font:600 11px var(--label); color:var(--faint)}
.yir .ys-who[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.yir .ys-who[aria-pressed="true"] .yk-n{color:inherit; opacity:.7}
.ys-all{margin:10px 4px 0; min-height:36px; padding:0 14px; border:0; border-radius:10px; background:var(--link); color:var(--on-link,#1a1408); font:600 13px var(--label); cursor:pointer}
/* the one thing to press: this week's championship, opening as its front page */
.ys-feature{position:absolute; z-index:5; left:max(24px,3vw); bottom:132px; display:grid; gap:3px; width:min(360px,30vw); padding:14px 18px 14px 34px; text-align:left;
  border:1px solid var(--edge); border-radius:18px; background:var(--plate); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--hero-ink); cursor:pointer;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7); transition:transform .18s, box-shadow .18s, border-color .18s}
.ys-feature::before{content:""; position:absolute; left:14px; top:19px; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c,#f3c95c) 42%,color-mix(in srgb,var(--c,#f3c95c) 55%,#000) 100%)}
.yir[data-era="tinted"] .ys-feature::before,.yir[data-era="halftone"] .ys-feature::before,.yir[data-era="engraving"] .ys-feature::before{--c:var(--ci)}
.ys-feature:hover{transform:translateY(-2px); border-color:var(--link); box-shadow:0 24px 48px -18px rgba(0,0,0,.75)}
.ys-feature:active{transform:translateY(1px)}
.ys-feature-k{font:600 11px/1.3 var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--hero-dim)}
.ys-feature-n{font:400 clamp(21px,1.8vw,26px)/1.12 var(--display)}
.ys-feature-w{font:600 14px/1.3 var(--label); color:var(--hero-dim)}
.ys-feature-w:empty{display:none}
.ys-feature-go{justify-self:start; margin-top:8px; padding:8px 14px; border-radius:999px; background:var(--link); color:var(--on-link,#1a1408); font:600 13px/1 var(--label); letter-spacing:.01em}
.ys-feature:hover .ys-feature-go span{display:inline-block; transform:translateX(3px); transition:transform .18s}
/* the week controls, on the orbit's edge */
.ys-ctl{position:absolute; z-index:5; left:50%; bottom:136px; transform:translateX(-50%); display:flex; align-items:center; gap:10px}
.ys-ctl button{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; min-width:46px; border:1px solid var(--edge); border-radius:23px; background:var(--plate);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--hero-ink); font:600 14px var(--label); cursor:pointer; box-shadow:0 8px 24px -10px rgba(0,0,0,.6); transition:transform .12s, box-shadow .2s}
.ys-ctl button:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 40%,transparent),0 8px 24px -10px rgba(0,0,0,.6)}
.ys-ctl button:active{transform:scale(.96)}
.ys-play{padding:0 18px 0 16px}
.ys-play .ys-i-pause{display:none}
.ys-play[aria-pressed="true"]{background:var(--link); color:var(--on-link,#1a1408); border-color:var(--link)}
.ys-play[aria-pressed="true"] .ys-i-pause{display:block}
.ys-play[aria-pressed="true"] .ys-i-play{display:none}
.ys-wk{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.ys-wk:focus{position:static; width:auto; height:auto; clip:auto; padding:6px 10px; border-radius:8px; font:600 11px var(--label); color:var(--hero-ink); background:var(--plate)}
/* how-to, once */
.ys-coach{position:absolute; z-index:4; left:50%; transform:translateX(-50%); margin:0; padding:8px 14px; border-radius:999px; background:var(--plate,rgba(0,0,0,.5)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:600 12.5px/1.3 var(--label); color:var(--hero-ink); white-space:nowrap; pointer-events:none; animation:ys-coach-in .6s .1s both; --plate:color-mix(in srgb,var(--bg) 70%,transparent)}
.ys-coach.out{opacity:0; transition:opacity .5s}
@keyframes ys-coach-in{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translate(-50%,0)}}
/* the tooltip that names whatever is under the pointer */
.ys-tip{position:absolute; z-index:9; left:0; top:0; display:grid; gap:2px; max-width:260px; padding:9px 12px; border-radius:12px; background:var(--bg2); color:var(--ink); border:1px solid var(--rule); box-shadow:var(--shadow); pointer-events:none}
.ys-tip b{font:400 17px/1.15 var(--display)}
.ys-tip span{font:600 12px/1.3 var(--label); color:var(--dim)}
.ys-tip em{font:italic 400 12px var(--text); color:var(--link)}
.ys-undated{display:none}
.yir-dial{background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,transparent 100%); padding-top:10px}
/* a ground: the history of one place */
.ys-place{position:absolute; z-index:9; right:max(24px,3vw); top:86px; width:min(380px,calc(100% - 32px)); max-height:calc(100% - 260px); overflow:auto; padding:18px 18px 12px; border-radius:16px;
  background:var(--bg2); color:var(--ink); border:1px solid var(--rule); box-shadow:var(--shadow)}
.ys-place-x{position:sticky; top:0; float:right; width:36px; height:36px; border:1px solid var(--rule); border-radius:50%; background:var(--bg2); color:var(--ink); font:400 20px/1 var(--label); cursor:pointer}
.ys-place-k{margin:0; font:600 11px/1.3 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.ys-place h3{margin:6px 0 4px; font:400 24px/1.12 var(--display)}
.ys-place-n{margin:0 0 10px; font:400 14px/1.45 var(--serif); color:var(--dim)}
.ys-place-n span{display:block; font-style:italic; font-size:12.5px}
.ys-place ol{margin:0; padding:0; list-style:none; border-top:1px solid var(--rule)}
.ys-place li button{display:grid; grid-template-columns:44px 1fr auto; gap:0 8px; width:100%; padding:9px 2px; border:0; border-bottom:1px solid var(--rule); background:none; color:var(--ink); text-align:left; font:400 15px/1.3 var(--serif); cursor:pointer}
.ys-place li button::after{content:"→"; grid-row:1/3; grid-column:3; align-self:center; color:var(--faint)}
.ys-place li button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ys-place li b{font:600 13px/1.6 var(--label); color:var(--link)}
.ys-place li small{grid-column:2; font:600 11.5px var(--label); color:var(--faint)}
/* below the world: the words */
.ys-panel{position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:30px max(20px,4vw) 8px}
.ys-intro{max-width:760px; margin:0 0 26px}
.ys-intro .yir-sum{margin:0; font:400 clamp(18px,1.6vw,21px)/1.5 var(--serif); color:var(--ink); display:block; -webkit-line-clamp:unset}
.ys-intro .yir-era{position:static; display:block; margin:8px 0 0; padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; max-width:none; font:italic 400 14px/1.45 var(--text); color:var(--dim)}
.ys-intro .yir-era::before{display:none}
.ys-h{margin:0; font:600 12px/1.3 var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.ys-h .ys-wkd{letter-spacing:.06em}
.ys-sun{margin:8px 0 0; max-width:760px; font:400 14.5px/1.5 var(--serif); color:var(--dim)}
.ys-sun b{color:var(--ink); font:600 1em var(--label)}
.ys-calc{font:italic 400 13px var(--text); color:var(--faint)}
.ys-lights{margin:6px 0 0; max-width:760px; font:italic 400 14px/1.45 var(--text); color:var(--dim)}
.ys-count{margin:14px 0 10px; font:600 11px var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.ys-list{margin:0; padding:0; list-style:none; border-top:1px solid var(--rule)}
.ys-list li{border-bottom:1px solid var(--rule)}
.ys-ev{display:grid; grid-template-columns:1fr auto; gap:2px 16px; width:100%; padding:14px 34px 14px 20px; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; position:relative; font:inherit}
.ys-ev::before{content:""; position:absolute; left:2px; top:19px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 40%,color-mix(in srgb,var(--c) 55%,#000) 100%)}
.ys-ev::after{content:"→"; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--faint); font:600 16px var(--label); transition:transform .15s, color .15s}
.ys-ev:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.ys-ev:hover::after{transform:translate(3px,-50%); color:var(--link)}
.ys-ev-t{grid-column:1/-1; font:600 11px/1.2 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.ys-ev-n{font:400 clamp(19px,1.7vw,24px)/1.2 var(--display)}
.ys-ev-w{font:600 15px/1.3 var(--label); text-align:right; align-self:end}
.ys-ev-w small{font-weight:600; color:var(--faint); margin-left:4px; font-size:11px; letter-spacing:.06em}
.ys-ev-w em,.ys-ev-p{font:italic 400 14px/1.35 var(--text); color:var(--dim)}
.ys-ev-p{grid-column:1/-1}
.ys-empty{padding:14px 0; font:italic 400 16px var(--text); color:var(--dim)}
.yir .ys-sub{padding:18px 0 6px; font:600 11px/1.3 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); border-bottom:0}
.yir-shown{margin:12px 0 0; font:600 11px var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
@media (max-width:760px){
  .yir-stage{display:flex; flex-direction:column; height:auto; min-height:0; max-height:none; padding:0 0 4px}
  .yir-head{position:relative; left:auto; top:auto; padding:16px 120px 0 16px}
  .yir-head::before{display:none}
  .yir-kicker{margin-bottom:2px; font-size:10.5px}
  .yir-h1{font-size:32px}
  .ys-go{top:16px; right:12px; width:44px; height:44px}
  .ys-go-i{left:12px; top:12px}
  .ys-go:focus-within{width:calc(100vw - 24px)}
  .ys-filter{top:16px; right:64px}
  .ys-filter-b{height:44px; padding:0 12px}
  .ys-filter-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .ys-sheet{right:-52px}
  .ys-feature{position:relative; left:auto; bottom:auto; width:auto; margin:min(98vw,400px) 14px 0}
  .ys-ctl{position:relative; left:auto; bottom:auto; transform:none; justify-content:center; margin:14px 0 0}
  .ys-coach{white-space:normal; width:max-content; max-width:calc(100% - 40px); text-align:center}
  .yir-dial{position:relative; padding-top:12px}
  .ys-place{left:10px; right:10px; width:auto; top:70px; max-height:540px}
  .ys-panel{padding:24px 14px 6px}
  .ys-ev{grid-template-columns:1fr}
  .ys-ev-w{text-align:left}
}
@media (prefers-reduced-motion:reduce){ .ys-ctl button,.ys-feature,.ys-go{transition:none} .ys-coach{animation:none} }

/* =====================================================================================================
   THE EDITION: the front page of a championship's final day
   ===================================================================================================== */
.yed-dlg{width:min(980px,100vw - 24px); max-height:calc(100dvh - 24px); padding:0; border:0; background:transparent; overflow:auto; color:#1d1a16}
.yed-dlg::backdrop{background:rgba(4,8,6,.72); backdrop-filter:blur(3px)}
.yed{position:relative; padding:clamp(18px,4vw,48px); background:
  radial-gradient(140% 90% at 30% 0%, #f6efdc 0%, #ebe1c7 60%, #ddd0b0 100%); border-radius:4px; font-family:'Caslon Text',Georgia,serif;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 120px rgba(120,90,40,.18)}
.yed::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:4px; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.yed[data-era="digital"]{background:radial-gradient(140% 90% at 30% 0%,#fbfaf6 0%,#efece4 100%)}
.yed[data-era="digital"]::after{opacity:.15}
.yed-x{position:sticky; top:0; float:right; margin:-6px -6px 0 12px; z-index:3; height:40px; padding:0 14px; border:1px solid rgba(29,26,22,.3); border-radius:20px; background:#f6efdc; color:#1d1a16; font:600 13px 'Inter Display',Arial,sans-serif; cursor:pointer}
.yed-x span{font-size:18px; margin-left:4px}
.yed-mast{text-align:center; border-bottom:3px double #1d1a16; padding-bottom:8px}
.yed-flag{margin:0; font:400 clamp(30px,6vw,64px)/1 'Caslon Display','Caslon Text',Georgia,serif; letter-spacing:-.01em}
.yed-line{display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin:10px 0 0; padding-top:6px; border-top:1px solid #1d1a16; font:600 11px/1.3 'Inter Display',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase}
.yed-hl{margin:20px 0 8px; font:400 clamp(32px,6.4vw,72px)/.98 'Caslon Display','Caslon Text',Georgia,serif; letter-spacing:-.015em; text-align:center; text-wrap:balance}
.yed-deck{margin:0 auto; max-width:46em; text-align:center; font:italic 400 clamp(16px,1.8vw,20px)/1.4 'Caslon Text',Georgia,serif}
.yed-q{font-style:normal; font-size:.85em; color:#5a5244}
.yed-hlnote{margin:8px 0 18px; text-align:center; font:600 10.5px/1.3 'Inter Display',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#5a5244}
.yed-cols{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid #1d1a16; border-bottom:1px solid #1d1a16}
.yed-col{padding:12px 14px 16px; border-left:1px solid rgba(29,26,22,.35)}
.yed-col:first-child{border-left:0; padding-left:0}
.yed-col h3{margin:0 0 8px; font:600 12px/1.2 'Inter Display',Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.yed-col p{margin:0 0 6px; font-size:15px; line-height:1.45}
.yed-big{font:400 34px/1 'Caslon Display','Caslon Text',Georgia,serif !important}
.yed-null{font-style:italic; color:#4f483c}
.yed-small{font-size:13px !important; color:#4f483c}
.yed-rounds{margin:8px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:4px}
.yed-rounds li{display:flex; gap:6px; align-items:baseline; padding:6px 8px; border:1px dashed rgba(29,26,22,.35); border-radius:4px; font-size:12px; font-style:italic; color:#4f483c}
.yed-rounds b{font:600 11px 'Inter Display',Arial,sans-serif; font-style:normal; color:#1d1a16}
.yed-names{margin:0; padding-left:1.2em; font-size:15px; line-height:1.5}
.yed-names [aria-current]{font-weight:700}
.yed-same{margin:0; padding:0; list-style:none}
.yed-go{display:block; width:100%; text-align:left; padding:6px 0 6px 14px; border:0; border-bottom:1px solid rgba(29,26,22,.2); background:none; font:400 15px/1.3 'Caslon Text',Georgia,serif; color:#1d1a16; cursor:pointer; position:relative}
.yed-go::before{content:""; position:absolute; left:0; top:12px; width:7px; height:7px; border-radius:50%; background:var(--c)}
.yed-go small{display:block; font:600 11px 'Inter Display',Arial,sans-serif; color:#4f483c}
.yed-go:hover{background:rgba(29,26,22,.06)}
.yed-case{margin:24px 0 8px; list-style:none}
.yed-case > .yc,.yed-case > li{list-style:none}
.yed-src{margin-top:14px; font:400 12px/1.5 'Inter Display',Arial,sans-serif; color:#4f483c}
.yed-src a{color:#1d1a16}
.yed :focus-visible{outline:2px solid #8a5f0c; outline-offset:2px}
@media (max-width:760px){
  .yed-dlg{width:100vw; max-width:100vw; max-height:100dvh; margin:0; height:100dvh}
  .yed{border-radius:0; min-height:100%}
  .yed-cols{grid-template-columns:1fr}
  .yed-col{border-left:0; border-top:1px solid rgba(29,26,22,.35); padding:12px 0 14px}
  .yed-col:first-child{border-top:0}
  .yed-line{justify-content:center}
}

/* the world in front is printed with its era too */
.yir[data-era="halftone"] .ys-cv{filter:grayscale(1) contrast(1.06)}
.yir[data-era="engraving"] .ys-cv{filter:sepia(.7) saturate(.55) contrast(1.05)}
.yir[data-era="tinted"] .ys-cv{filter:sepia(.25) saturate(.8)}

/* the front page arrives like a paper put down in front of you */
.yed-dlg[open]{animation:yed-in .42s cubic-bezier(.2,.8,.2,1) both}
.yed-dlg[open]::backdrop{animation:yed-fade .3s ease both}
@keyframes yed-in{from{opacity:0; transform:translateY(28px) rotate(-.6deg) scale(.97)}to{opacity:1; transform:none}}
@keyframes yed-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .yed-dlg[open],.yed-dlg[open]::backdrop{animation:none} }
.yir .ys-who{flex-direction:row; justify-content:center; min-height:36px; padding:0 10px; border:1px solid var(--rule); border-radius:10px; background:transparent; box-shadow:none !important; transform:none !important}
.yir .ys-who::before{display:none}
.yir .ys-who .yk-t{padding-left:0}
.yir .ys-who .yk-n{align-self:center; font-size:11px; opacity:1}
.yir .ys-who[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.yir .ys-who:focus-visible{outline:2px solid var(--link); outline-offset:2px}

/* =====================================================================================================
   BELOW THE WORLD: the bar, the year week by week, the week, the record
   ===================================================================================================== */
.ys-panel{max-width:none; padding:0}
.ys-bar{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule)}
.ys-bar-in{display:flex; align-items:center; gap:14px; max-width:1240px; margin:0 auto; padding:10px max(16px,3vw); overflow-x:auto; scrollbar-width:none}
.ys-bar-in::-webkit-scrollbar{display:none}
.ys-bar-y{flex:none; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border:1px solid var(--rule); border-radius:20px; background:transparent; color:var(--ink); font:400 22px/1 var(--display); cursor:pointer}
.ys-bar-y:hover{border-color:var(--link)}
.ys-chips{display:flex; gap:6px; flex:none}
.ys-chip{flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 11px; border:1px solid var(--rule); border-radius:18px; background:transparent; color:var(--ink); font:600 13px var(--label); white-space:nowrap; cursor:pointer; transition:background .15s, border-color .15s}
.ys-chip i{width:10px; height:10px; border-radius:50%; background:var(--c)}
.yir[data-era="tinted"] .ys-chip i,.yir[data-era="halftone"] .ys-chip i,.yir[data-era="engraving"] .ys-chip i{background:var(--ci)}
.ys-chip:hover{border-color:var(--link)}
.ys-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 9%,transparent); border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.ys-chip[aria-pressed="false"]{color:var(--faint)}
.ys-chip[aria-pressed="false"] i{background:transparent; box-shadow:inset 0 0 0 1.5px var(--c)}
.ys-chip-all{padding:0 14px}
.ys-chip-all[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.ys-bar-who{display:flex; gap:6px; flex:none; margin-left:auto; padding-left:14px; border-left:1px solid var(--rule)}
.ys-bar-who .ys-who{height:36px; min-height:36px; border-radius:18px !important}
.ys-intro{max-width:1240px; margin:0 auto; padding:34px max(16px,3vw) 0}
.ys-intro .yir-sum{max-width:820px}
.ys-intro .yir-era{max-width:820px}
/* the strip */
.ys-season{max-width:1240px; margin:0 auto; padding:34px max(16px,3vw) 0}
.ys-season-h h2{margin:0; font:400 clamp(26px,2.6vw,36px)/1.1 var(--display); color:var(--ink)}
.ys-season-k{margin:8px 0 18px; font:400 15px/1.5 var(--serif); color:var(--dim)}
.ys-season-k b{color:var(--ink); font:600 1em var(--label)}
.ys-strip-wrap{overflow-x:auto; margin:0 calc(-1 * max(16px,3vw)); padding:0 max(16px,3vw) 6px; scrollbar-width:thin}
.ys-strip{--lab:190px; position:relative; min-width:960px; border-top:1px solid var(--rule)}
.ys-st-row{position:relative; display:grid; grid-template-columns:var(--lab) 1fr; align-items:center; min-height:44px; border-bottom:1px solid var(--rule)}
.ys-st-maj{min-height:62px}
.ys-st-lab{position:sticky; left:0; z-index:3; display:flex; align-items:center; gap:8px; height:100%; padding:0 12px 0 0; background:var(--bg); font:600 13px/1.2 var(--label); color:var(--ink)}
.ys-st-lab i{flex:none; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 42%,color-mix(in srgb,var(--c) 55%,#000) 100%)}
.yir[data-era="tinted"] .ys-st-lab i,.yir[data-era="halftone"] .ys-st-lab i,.yir[data-era="engraving"] .ys-st-lab i{--c:var(--ci)}
.ys-st-lab b{margin-left:auto; font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums}
.ys-st-track{position:relative; height:100%; min-height:44px; cursor:pointer;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/53 - 1px),color-mix(in srgb,var(--ink) 5%,transparent) calc(100%/53 - 1px),color-mix(in srgb,var(--ink) 5%,transparent) calc(100%/53))}
.ys-st-head{min-height:30px}
.ys-st-head .ys-st-track{min-height:30px; background:none; cursor:default}
.ys-st-head .ys-st-track span{position:absolute; top:8px; padding-left:5px; border-left:1px solid var(--rule); font:600 11px var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.ys-st-today{position:absolute; top:4px; transform:translateX(-50%); padding:2px 7px; border-radius:6px; background:var(--link); color:var(--on-link,#1a1408); font:600 10px var(--label); font-style:normal; letter-spacing:.06em; text-transform:uppercase}
.ys-b{position:absolute; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 42%,color-mix(in srgb,var(--c) 55%,#000) 100%); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .15s}
.yir[data-era="tinted"] .ys-b,.yir[data-era="halftone"] .ys-b,.yir[data-era="engraving"] .ys-b{--c:var(--ci)}
.ys-b-maj{width:19px; height:19px; margin:-9.5px 0 0 -9.5px}
.ys-b-x{background:transparent; box-shadow:inset 0 0 0 2px var(--c)}
.ys-b:hover,.ys-b:focus-visible{transform:scale(1.35); z-index:4}
.ys-b-on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--link)}
.ys-b-l{position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); white-space:nowrap; font:600 11px var(--label); color:var(--ink); pointer-events:none}
.ys-b[data-tip]:hover::after,.ys-b[data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); z-index:6; width:max-content; max-width:260px; padding:7px 10px; border-radius:9px;
  background:var(--bg2); border:1px solid var(--rule); box-shadow:var(--shadow); color:var(--ink); font:600 12px/1.35 var(--label); white-space:normal; text-align:left; pointer-events:none}
.ys-st-now{position:absolute; top:0; bottom:0; left:calc(var(--lab) + (100% - var(--lab)) * var(--x,0)); width:calc((100% - var(--lab)) / 53); transform:translateX(-50%); z-index:1; pointer-events:none;
  background:color-mix(in srgb,var(--link) 14%,transparent); border-left:1px solid color-mix(in srgb,var(--link) 55%,transparent); border-right:1px solid color-mix(in srgb,var(--link) 55%,transparent)}
.ys-st-und{grid-template-columns:var(--lab) 1fr; padding:10px 0}
.ys-st-und .ys-st-lab{color:var(--faint)}
.ys-st-flow{display:flex; flex-wrap:wrap; gap:6px}
.ys-ub{display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:4px 12px 4px 10px; border:1px dashed color-mix(in srgb,var(--ink) 30%,transparent); border-radius:17px; background:transparent; color:var(--ink); font:600 12.5px var(--label); cursor:pointer}
.ys-ub i{width:9px; height:9px; border-radius:50%; background:var(--c)}
.ys-ub small{font-weight:600; color:var(--faint)}
.ys-ub:hover{border-style:solid; border-color:var(--link)}
.ys-strip-note{margin:10px 0 0; font:italic 400 13.5px/1.45 var(--text); color:var(--faint)}
.ys-strip-empty .ys-st-head,.ys-strip-empty .ys-st-now{display:none}
/* the week */
.ys-week{max-width:1240px; margin:0 auto; padding:36px max(16px,3vw) 0}
.ys-week .ys-h{font:400 clamp(22px,2vw,28px)/1.15 var(--display); letter-spacing:0; text-transform:none; color:var(--ink)}
.ys-week .ys-h .ys-wkd{font:italic 400 .62em var(--text); color:var(--dim); letter-spacing:0}
.ys-week .ys-list{margin-top:14px}
.ys-week .ys-lights{margin-top:14px}
/* the record */
.ys-record-h{max-width:1240px; margin:0 auto; padding:56px max(16px,3vw) 0}
.ys-record-h h2{margin:0; font:400 clamp(26px,2.6vw,36px)/1.1 var(--display); color:var(--ink)}
.ys-record-h .ys-count:empty{display:none}
.ys-record-h .yir-shown{margin-top:8px}
.ys-yearnav{display:flex; justify-content:space-between; gap:12px; max-width:1240px; margin:0 auto; padding:30px max(16px,3vw) 10px}
.ys-yn{display:grid; gap:2px; min-width:160px; padding:14px 20px; border:1px solid var(--rule); border-radius:16px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; transition:border-color .15s, transform .15s}
.ys-yn[data-d="1"]{text-align:right; margin-left:auto}
.ys-yn small{font:600 11px var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.ys-yn b{font:400 30px/1 var(--display)}
.ys-yn:hover{border-color:var(--link); transform:translateY(-2px)}
.ys-yn[data-d="-1"] b::before{content:"← "; color:var(--faint)}
.ys-yn[data-d="1"] b::after{content:" →"; color:var(--faint)}
@media (max-width:760px){
  .ys-bar-y{font-size:19px; height:36px}
  .ys-bar-who{margin-left:0}
  .ys-strip{--lab:132px; min-width:900px}
  .ys-st-lab{font-size:12px}
  .ys-yn{min-width:0; flex:1}
}
.ys-chip.ys-tk{position:relative; min-height:0; border-radius:18px; font-size:13px}
.ys-chip::before,.ys-chip::after{display:none !important}
.ys-chip.ys-tk i{width:10px; height:10px; box-shadow:none; background:var(--c)}
.ys-chip.ys-tk[aria-pressed="false"] i{background:transparent; box-shadow:inset 0 0 0 1.5px var(--c)}
.ys-b-dn .ys-b-l{bottom:auto; top:calc(100% + 4px)}
.ys-st-maj{min-height:74px}
.ys-und{margin-top:2px}
.ys-und .ys-st-und{border-bottom:1px solid var(--rule)}
@media (max-width:760px){ .ys-und .ys-st-und{grid-template-columns:1fr; gap:8px} }
.ys-und .ys-st-lab b{margin-left:8px}
.ys-und .ys-st-und{grid-template-columns:1fr; gap:8px}
.ys-und .ys-st-lab{position:static; background:none}

/* =====================================================================================================
   THE YEAR IN REVIEW: the written synopsis at the foot of the page
   ===================================================================================================== */
.yr{max-width:1240px; margin:40px auto 0; padding:44px max(16px,3vw) 20px; border-top:3px double var(--rule)}
.yr-head{max-width:820px}
.yr-k{margin:0 0 8px; font:600 12px/1.3 var(--label); letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.yr-head h2{margin:0; font:400 clamp(32px,3.6vw,52px)/1.04 var(--display); color:var(--ink); text-wrap:balance}
.yr-lede{margin:16px 0 0; font:400 clamp(18px,1.6vw,21px)/1.55 var(--serif); color:var(--ink)}
.yr-body{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 56px; margin-top:34px}
.yr-part{padding:22px 0 8px; border-top:1px solid var(--rule)}
.yr-part h3{margin:0 0 10px; font:400 clamp(21px,1.8vw,26px)/1.15 var(--display); color:var(--ink)}
.yr-part p{margin:0 0 10px; font:400 16px/1.6 var(--serif); color:var(--dim)}
.yr-part p b{color:var(--ink); font-weight:600}
.yr-list{margin:0 0 12px; padding:0; list-style:none}
.yr-list li{padding:6px 0; font:400 16px/1.5 var(--serif); color:var(--dim); border-bottom:1px dotted var(--rule)}
.yr-list b{color:var(--ink); font-weight:600}
.yr-list span{font-style:italic}
.yr-slot{position:relative; margin:12px 0 4px !important; padding:12px 14px 12px 14px; border:1px dashed color-mix(in srgb,var(--ink) 28%,transparent); border-radius:12px; font:italic 400 14.5px/1.5 var(--text) !important; color:var(--faint) !important}
.yr-slot span{display:inline-block; margin-right:6px; padding:2px 8px; border-radius:6px; background:color-mix(in srgb,var(--link) 20%,transparent); color:var(--ink); font:600 10.5px/1.5 var(--label); font-style:normal; letter-spacing:.1em; text-transform:uppercase; vertical-align:1px}
.yr-faq{grid-column:1/-1}
.yr-faq dl{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 56px}
.yr-faq dt{margin-top:12px; font:600 15px/1.4 var(--label); color:var(--ink)}
.yr-faq dd{margin:4px 0 0; font:400 15.5px/1.55 var(--serif); color:var(--dim)}
.yr-foot{margin:26px 0 0; font:italic 400 13.5px/1.5 var(--text); color:var(--faint)}
@media (max-width:860px){ .yr-body,.yr-faq dl{grid-template-columns:1fr} }
.yr-text p{margin:0 0 12px !important; font:400 16.5px/1.65 var(--serif) !important; color:var(--ink) !important}
.yr-head .yr-text p{font-size:19px !important}
.yed-wx span{display:grid; gap:2px; font-style:normal !important; color:#1d1a16 !important}
.yed-wx em{font-style:italic; color:#4f483c}
.yed-s{font:600 10.5px var(--label,Arial); color:#4f483c}
.yed-ru{margin:0 0 8px; padding:0; list-style:none}
.yed-ru li{padding:6px 0; border-bottom:1px solid rgba(29,26,22,.2); font-size:15px; line-height:1.4}
.yed-ru li span{display:block; font-style:italic; color:#4f483c; font-size:14px}
.yed-names small{margin-left:6px; font:600 11px 'Inter Display',Arial,sans-serif; color:#4f483c}
.yed-rounds-on{grid-template-columns:1fr}
.yed-rounds-on li{display:grid; grid-template-columns:28px 1fr; font-style:normal}
.yir[data-era="tinted"],.yir[data-era="halftone"],.yir[data-era="engraving"]{--on-link:#fbf6ea}
.yr-head .yr-text{margin-top:14px}
.ys-yn{text-decoration:none}
.ys-skip{position:absolute; left:-9999px; top:16px; z-index:50; padding:10px 16px; border-radius:10px; background:var(--link); color:var(--on-link,#1a1408) !important; font:600 14px var(--label); text-decoration:none}
.ys-skip:focus{left:16px; transform:none}
/* phones: no live blur behind the controls (it is recomputed every frame the world moves); a denser plate instead */
@media (max-width:760px), (hover:none){
  .ys-go,.ys-filter-b,.ys-feature,.ys-ctl button,.ys-coach,.ys-bar{-webkit-backdrop-filter:none !important; backdrop-filter:none !important}
  .ys-go,.ys-filter-b,.ys-feature,.ys-ctl button,.ys-coach{--plate:color-mix(in srgb,var(--bg) 92%,transparent)}
  .ys-bar{background:var(--bg)}
}
/* headings below the world clear the sticky bar when scrolled to */
#ysH,.ys-week .ys-h,.ys-record-h h2,#yrH,.ys-intro{scroll-margin-top:88px}
@media (max-width:760px){ #ysH,.ys-week .ys-h,.ys-record-h h2,#yrH,.ys-intro{scroll-margin-top:76px} }