/* Known: the series art is a desktop. Blue world map in a grey browser window, a white marble bust with a
   yellow offset outline, a white search pill over its eyes, alert windows with yellow warning triangles,
   all on a charcoal ground. Inter Tight stands in for the art's heavy grotesk. */
@view-transition{navigation:auto}
.kn{--char:#181615;--frame:#2b2a29;--chrome:#64615f;--blue:#5194ce;--yel:#e9bb2e;--paper2:#dddbd6;--pillw:#f3f1ec;--k-ink:#181615;background:var(--char)}
.kn .top{background:var(--char)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kn mark{background:none;color:inherit}

/* ---------- 1 · the desk ---------- */
.desk{--w:max(100vw,177.78vh);--col:min(480px,36vw);--dx:max(0px,calc(4vw + var(--col) + 28px - 50vw + var(--w) * .1992));position:relative;background:var(--char)}
.stage{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;background:var(--char)}
/* the art is laid out in its own pixels: 3840 x 2160, --u is one art pixel */
.art{--u:calc(var(--w) / 3840);position:absolute;width:var(--w);height:calc(var(--w) * .5625);left:calc(50% - var(--w) / 2 + var(--dx));top:calc(50% - var(--w) * .28125)}
.art-img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the window body changes like a page in the browser: map, then yellow, then charcoal */
.g{position:absolute;left:7.6%;top:8.24%;width:84.8%;height:90.4%;opacity:0;transition:opacity .7s ease}
.g2{background:var(--yel)}
.g3{background:#232120}
.desk[data-week="2"] .g2,.desk[data-week="3"] .g3{opacity:1}
.big{position:absolute;left:3vw;top:11vh;font:800 min(40vh,25vw)/.8 'Inter Tight',Manrope,sans-serif;letter-spacing:-.06em;color:var(--yel);pointer-events:none}
.big span{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.desk[data-week="1"] .big [data-n="1"],.desk[data-week="2"] .big [data-n="2"],.desk[data-week="3"] .big [data-n="3"]{opacity:1}
.desk[data-week="2"] .big{color:var(--char)}
.desk[data-week="3"] .big{color:var(--blue)}
.bust{position:absolute;left:29.479%;top:2.315%;width:46.719%;height:auto;display:block}
.fname{position:absolute;right:calc(8% + var(--dx));top:2.2%;height:5.6%;display:flex;align-items:center;font:600 calc(var(--u) * 88)/1 'Inter Tight',Manrope,sans-serif;color:var(--char);letter-spacing:-.01em}
/* the search pill sits exactly on the one in the art (white 1172-2630 x 756-1072) and grows for longer queries */
.pill{position:absolute;left:30.15%;top:34.35%;height:15.95%;width:max-content;min-width:38.7%;box-sizing:border-box;display:flex;align-items:center;gap:calc(var(--u) * 50);padding:0 calc(var(--u) * 110) 0 calc(var(--u) * 80);background:var(--pillw);border:calc(var(--u) * 11) solid var(--char);border-radius:999px;color:var(--char);font:800 calc(var(--u) * 300 * var(--fit,1))/1 'Inter Tight',Manrope,sans-serif;letter-spacing:-.015em;white-space:nowrap}
.pill .mag{flex:none;width:calc(var(--u) * 175);height:calc(var(--u) * 175)}
.pill .q{flex:1;text-align:left;padding-top:.04em}
.caret{display:inline-block;width:calc(var(--u) * 14);height:.82em;background:var(--char);margin-left:calc(var(--u) * 10);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* layering: art, window body, numerals, bust, file name, pill */
.art-img{z-index:0}.g{z-index:1}.big{z-index:2}.bust{z-index:3}.fname{z-index:4}.pill{z-index:5}

.flow{position:relative;z-index:6;pointer-events:none}
.flow a,.flow .win,.flow .resp{pointer-events:auto}
.intro{min-height:calc(100vh - 80px);min-height:calc(100svh - 80px);display:flex;flex-direction:column;padding-bottom:7vh;box-sizing:border-box}
.intro .crumbs{position:absolute;z-index:2;top:calc(50vh - var(--w) * .28125 + var(--w) * .0276 - 22px);left:calc(50vw - var(--w) / 2 + var(--dx) + var(--w) * .205);padding:0}
.intro{position:relative}
.kn .intro .crumbs a,.kn .intro .crumbs li{color:var(--pillw)}
.kn .crumbs [aria-current]{color:var(--pillw)}

/* windows: the art's dialogs */
.win{position:relative;background:var(--paper2);color:var(--k-ink);border:2px solid var(--char);border-radius:14px;overflow:hidden;box-shadow:0 26px 60px -18px rgba(0,0,0,.55);margin:0}
.bar{margin:0;height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--chrome);border-bottom:2px solid var(--char)}
.bar i{width:13px;height:13px;border-radius:50%;background:#e2483f;flex:none}
.bar i+i{background:var(--yel)}
.bar i+i+i{background:#3fc04a}
.bar span{margin-left:auto;font:600 16px/1 'Inter Tight',Manrope,sans-serif;color:var(--char);letter-spacing:-.01em}
.win-b{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:24px 26px 26px}
.warn{width:74px;height:65px;display:block}
.hero-win{width:var(--col);margin-left:4vw;margin-top:auto}
.say{margin:0;font:800 clamp(26px,2.3vw,34px)/1.08 'Inter Tight',Manrope,sans-serif;letter-spacing:-.02em}
.tag{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.tag span{font:600 12px/1 'Inter Tight',Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:7px 11px}
.tag span:first-child{background:var(--char);color:var(--pillw);border-color:var(--char)}
.win-f{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0 26px 24px}
.ok{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--char);color:var(--pillw);text-decoration:none;font:800 14px/1 'Inter Tight',Manrope,sans-serif;letter-spacing:.02em;transition:transform .12s,background .15s}
.ok:hover{transform:translateY(-2px);background:#000}
.ok.ghost{background:transparent;color:var(--char);box-shadow:inset 0 0 0 2px var(--char)}
.ok:focus-visible,.btn-buy:focus-visible,.next-a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* weeks */
.week{position:relative;padding-top:24vh}
.lead{width:var(--col);margin-left:4vw}
.lead-b{padding:30px 34px 34px}
.wk{margin:0;font:600 13px/1 'Inter Tight',Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.lead h2{margin:12px 0 0;font:800 clamp(44px,4.4vw,72px)/.92 'Inter Tight',Manrope,sans-serif;letter-spacing:-.035em}
.anchor{margin:14px 0 0;font:300 clamp(16px,1.2vw,19px)/1.3 'Inter Tight',Manrope,sans-serif;letter-spacing:.01em}
.anchor::before{content:'[';}.anchor::after{content:']'}
.mp{text-wrap:pretty;margin:22px 0 0;font:600 clamp(19px,1.5vw,24px)/1.3 'Inter Tight',Manrope,sans-serif;letter-spacing:-.01em}
.mp mark{background:var(--char);color:var(--pillw);padding:.04em .3em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the pile: each alert sticks a little lower and further right than the one before, like the slides */
.pile{list-style:none;margin:30vh 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:40vh}
/* gaps and the end spacer sit outside the alerts' margin boxes, so each one can stay stuck until the pile is complete */
.pile::after{content:'';flex:none;height:44vh}
.alert{position:sticky;top:calc(100vh - 300px + var(--i) * 20px);top:calc(100svh - 300px + var(--i) * 20px);width:calc(var(--col) - 84px);margin-left:calc(4vw + var(--i) * 28px)}
.alert:nth-child(1){--i:0}.alert:nth-child(2){--i:1}.alert:nth-child(3){--i:2}.alert:nth-child(4){--i:3}
.alert h3{margin:0;font:800 clamp(21px,1.6vw,26px)/1.08 'Inter Tight',Manrope,sans-serif;letter-spacing:-.02em}
.ref{margin:6px 0 0;font:300 17px/1.2 'Inter Tight',Manrope,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.ln{margin:12px 0 0;font:400 15px/1.45 Manrope,Arial,sans-serif}
.resp{position:relative;width:var(--col);box-sizing:border-box;margin:0 0 0 4vw;padding:18px 26px;background:var(--pillw);color:var(--char);border:2px solid var(--char);border-radius:34px;font:600 17px/1.4 'Inter Tight',Manrope,sans-serif}
.resp span{display:block;font:600 11px/1 'Inter Tight',Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;opacity:.75}
#w3{padding-bottom:30vh}

/* ---------- 2 · searched ---------- */
.searched{position:relative;overflow:clip;background:#4b8cca;color:#fff;padding:30vh 0 26vh}
.searched::before,.searched::after{content:'';position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.searched::before{top:0;height:34vh;background:linear-gradient(#232120,rgba(35,33,32,0))}
.searched::after{bottom:0;height:30vh;background:linear-gradient(rgba(233,187,46,0),var(--yel))}
.map{position:absolute;top:0;height:100%;width:auto;max-width:none}
.map.east{right:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.map.west{left:0;-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.searched-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:center;max-width:1600px;margin:0 auto}
.wall{margin:0}
.wall h2{margin:0;font:800 clamp(46px,6.6vw,118px)/1.04 'Inter Tight',Manrope,sans-serif;letter-spacing:-.045em;text-shadow:0 4px 40px rgba(16,30,60,.35)}
.wall mark{color:var(--char);background:var(--pillw);border:.045em solid var(--char);border-radius:999px;padding:0 .18em .02em;text-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wall cite{display:block;margin-top:28px;font:300 22px/1.2 'Inter Tight',Manrope,sans-serif;font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.wall cite::before{content:'['}.wall cite::after{content:']'}
.drop{background:var(--pillw);color:var(--char);border:3px solid var(--char);border-radius:36px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(10,20,40,.6)}
.dq{margin:0;display:flex;align-items:center;gap:16px;padding:20px 28px;font:800 clamp(30px,3vw,46px)/1 'Inter Tight',Manrope,sans-serif;letter-spacing:-.025em;border-bottom:3px solid var(--char)}
.dq .mag{width:.9em;height:.9em;flex:none}
.sugg{list-style:none;margin:0;padding:10px 0}
.sugg li{padding:9px 30px 9px 76px;font:300 clamp(19px,1.6vw,24px)/1.25 'Inter Tight',Manrope,sans-serif}
.sugg s{text-decoration-thickness:.09em;text-decoration-color:#d23b33;color:#5e5b58}
.sugg .hit{margin:8px 10px 0;padding:14px 20px 14px 66px;border-radius:20px;background:var(--char);color:var(--pillw);font-weight:800;letter-spacing:-.01em}
.drop-n{margin:0;padding:12px 30px 22px 76px;font:400 15px/1.45 Manrope,Arial,sans-serif;color:#3d3a38}

/* ---------- 3 · get ---------- */
.get{position:relative;overflow:clip;background:var(--yel);color:var(--char)}
.get-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:5vw;align-items:center;max-width:1600px;margin:0 auto;padding-top:6vh}
.objs{position:relative;aspect-ratio:1.25;margin-left:-64px}
.objs img{position:absolute;display:block;height:auto;border-radius:12px;box-shadow:0 40px 80px -24px rgba(40,26,0,.6),0 0 0 2px var(--char)}
.o-art{width:118%;left:0;top:6%;transform:rotate(-3deg)}
.o-s1{width:34%;left:6%;top:50%;transform:rotate(-7deg)}
.o-s2{width:34%;left:42%;top:56%;transform:rotate(4deg)}
.gwall{margin:16px 0 0;font:800 clamp(64px,8vw,140px)/.86 'Inter Tight',Manrope,sans-serif;letter-spacing:-.05em}
.gwall span{display:inline-block;background:var(--pillw);border:.04em solid var(--char);border-radius:999px;padding:.02em .22em .06em;margin-top:.08em}
.tag.ink span{border-color:var(--char)}
.offer{margin-top:34px}
.price{margin:0;display:flex;align-items:baseline;gap:12px}
.price strong{font:800 64px/1 'Inter Tight',Manrope,sans-serif;letter-spacing:-.04em}
.price span{color:var(--char);font:600 13px/1.2 'Inter Tight',Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.btn-buy{margin-top:18px;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:62px;width:100%;max-width:420px;box-sizing:border-box;padding:0 30px;border-radius:999px;background:var(--char);color:var(--pillw);text-decoration:none;font:800 17px/1 'Inter Tight',Manrope,sans-serif;letter-spacing:.02em;box-shadow:0 0 0 0 var(--lime);transition:transform .12s,box-shadow .2s}
.btn-buy span{color:var(--lime);font-size:20px}
.btn-buy:hover{transform:translateY(-2px);box-shadow:0 0 0 4px var(--lime)}
.buy-note{margin:14px 0 0;font:400 14px/1.5 Manrope,Arial,sans-serif;max-width:420px}
.facts{margin:34px 0 0;display:grid;gap:0;max-width:520px}
.facts div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-top:2px solid rgba(24,22,21,.85)}
.facts dt{font:600 11px/1.6 'Inter Tight',Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.facts dd{margin:0;font:600 15px/1.45 Manrope,Arial,sans-serif}
.next{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:110px;padding-bottom:72px;max-width:1600px;margin:0 auto}
.next-a{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--char);padding:22px 0;border-top:3px solid var(--char);min-height:44px}
.next-a .mono{font:600 11px/1 'Inter Tight',Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.next-t{font:800 clamp(30px,4vw,58px)/1 'Inter Tight',Manrope,sans-serif;letter-spacing:-.035em;transition:transform .15s}
.next-a:hover .next-t{transform:translateX(6px)}
.kn .foot{border-top:0}

/* ---------- laptops and tablets ---------- */
@media (max-width:1180px){
  .desk{--col:min(440px,42vw)}
}
/* ---------- phone: the art sits on the bottom of the screen, the window and alerts ride over it ---------- */
@media (max-width:760px){
  .desk{--w:240vw;--dx:0px;--col:calc(100vw - 32px)}
  .art{top:auto;bottom:-64px}
  .intro .crumbs{position:static;padding:16px 20px 0}
  .kn .intro .crumbs a{color:var(--mute)}
  .hero-win{margin-top:3vh}
  .big{left:5vw;top:96px;font-size:46vw}
  .desk[data-week="1"] .big{color:var(--blue)}
  .desk[data-week="2"] .big{color:var(--yel)}
  .desk[data-week="3"] .big{color:#fff}
  .intro{justify-content:flex-start;gap:4vh;padding-bottom:calc(135vw - 40px)}
  .hero-win{margin:0 auto;width:calc(100vw - 32px)}
  .win-b{gap:14px;padding:18px 18px 20px}
  .warn{width:48px;height:42px}
  .say{font-size:26px}
  .win-f{padding:0 18px 18px}
  .ok{flex:1 1 auto;justify-content:center}
  .week{padding-top:14vh}
  .lead{width:calc(100vw - 32px);margin:0 auto}
  .lead-b{padding:22px 20px 24px}
  .lead h2{font-size:44px}
  .mp{font-size:19px}
  .pile{margin-top:60vh;gap:46vh}
  .alert{width:calc(100vw - 32px - 3 * 12px);margin-left:calc(16px + var(--i) * 12px);top:calc(100svh - 296px + var(--i) * 12px)}
  .alert .win-b{gap:12px;padding:14px 16px 16px}
  .alert h3{font-size:20px}
  .ref{font-size:14px}
  .ln{font-size:14px;margin-top:8px}
  .bar{height:32px}
  .bar span{font-size:14px}
  .bar i{width:11px;height:11px}
  .resp{margin:0 16px;width:auto;font-size:16px}
  .map.east{display:none}
  .map.west{opacity:.9}
  .searched{padding:24vh 0 22vh}
  .searched-in{grid-template-columns:1fr;gap:48px}
  .wall h2{font-size:clamp(40px,12.4vw,60px)}
  .wall cite{font-size:16px}
  .dq{padding:16px 20px;font-size:30px}
  .sugg li{padding:8px 20px 8px 56px;font-size:19px}
  .sugg .hit{padding:12px 16px 12px 46px;margin:8px 8px 0}
  .drop-n{padding:10px 20px 18px 56px}
  .get-in{grid-template-columns:1fr;gap:20px;padding-top:40px}
  .objs{margin:0 -20px;aspect-ratio:.84}
  .o-art{width:150%;left:-6%;top:2%}
  .o-s1{width:48%;left:5%;top:40%}
  .o-s2{width:48%;left:49%;top:45%}
  .gwall{font-size:clamp(60px,20vw,90px)}
  .facts div{grid-template-columns:104px 1fr}
  .next{grid-template-columns:1fr;gap:0;padding-top:72px;padding-bottom:40px}
}

/* ---------- reduced motion: a still page; the weeks still switch, nothing animates ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .g,.big span,.pill,.ok,.btn-buy,.next-t{transition:none}
  .caret{animation:none}
}