/* Carry the One, the Sum: one sum, set clean. The carried 1 is the only thing that moves. */
@view-transition { navigation: auto; }
:root{
  color-scheme: light;
  --paper:#F2EFE7;
  --sheet:#F8F6F1;
  --ink:#161514;
  --rule:#D9D4C8;
  --mute:#6B675F;
  --carry:#E2432A;   /* the carried 1, and nothing else */
  --cast:rgba(22,21,20,.13);
  --soft:0 1px 0 #D9D4C8, 0 18px 40px -26px rgba(22,21,20,.4);
  --sans:"Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, -apple-system, sans-serif;
  --serif:"Newsreader", "Newsreader Fallback", Georgia, serif;
  --mono:"Fragment Mono", "Fragment Mono Fallback", ui-monospace, "SF Mono", monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --arrive:cubic-bezier(.16,1,.3,1);   /* arrivals: moving at once, gliding to a stop */
  --g:16px;
  --top:56px;
  --capr:.713;       /* Schibsted's figure height, as a share of the em; sum.js measures it */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px);background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"lnum" 1}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--g)}
.mute{color:var(--mute)}
.tf{font-feature-settings:"tnum" 1,"lnum" 1}

/* three tiers: Schibsted is structure, Newsreader upright is the accent, Newsreader italic is reserved */
.rm{font-family:var(--serif);font-style:normal;font-weight:400;font-variation-settings:"opsz" 18}
.it{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"opsz" 48;letter-spacing:-.01em}

/* ---------- the marks ---------- */
svg.wm{display:block;width:100%;height:auto;overflow:visible}
.wm .wm-l{fill:currentColor}
.c1{fill:var(--carry)}
svg.disc{display:block;overflow:visible}
svg.disc .d-f{fill:currentColor}
/* with the carry running, a 1 shows only where it rests; without it, every mark is whole */
.carrying .c1:not(.fix){opacity:0}
.carrying .c1.on{opacity:1}
.carrying .c1.d1:not(.on){opacity:0}
svg.disc .c1.d1{fill:var(--carry)}
html:not(.carrying) svg.disc .c1.d1{display:none}
html:not(.carrying) .c1[data-mode="manual"]:not(.on){opacity:0}

/* the flying 1: one path over everything, drawn in screen pixels */
.flyer{position:absolute;left:0;top:0;width:369.29px;height:802.5px;transform-origin:0 0;pointer-events:none;z-index:70;visibility:hidden;overflow:visible}   /* in the page: the scroll carries it */
.flyer path{fill:var(--carry)}

/* ---------- the bar ---------- */
.top{position:sticky;top:0;z-index:50;height:var(--top);background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .35s;view-transition-name:top}
.top.lined{border-bottom-color:var(--rule)}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;height:44px}
.brand .disc{width:24px;height:24px;color:var(--ink)}
.brand .wm{width:118px;transition:opacity .4s,transform .5s var(--ease)}
.top:not(.show-wm) .brand .wm{opacity:0;transform:translateY(5px)}
.nav{display:none;gap:30px;font-size:14.5px;font-weight:500}
.nav a{padding:10px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 1px no-repeat;transition:background-size .35s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 1px}
.menu-btn{height:44px;padding:0 2px 0 14px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}
.menu-btn i{position:relative;display:block;width:18px;height:9px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(3.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-3.75px) rotate(-45deg)}

/* the menu: a column, and the house under the line */
.menu{position:fixed;inset:0;z-index:45;background:var(--paper);padding:calc(var(--top) + 24px) var(--g) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
.menu.open{visibility:visible;opacity:1;transition:opacity .3s}
.menu ol{list-style:none;display:grid}
.menu li{border-top:1px solid var(--rule)}
.menu li a{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 12px;font-weight:620;font-size:clamp(34px,10vw,56px);line-height:1;letter-spacing:-.035em}
.menu li a small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--mute)}
.menu .m-rule{height:2px;background:var(--ink);margin-top:0}
.menu .m-drop .ar{width:20px;height:18px}
.menu .m-drop{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;margin-top:18px;padding:10px 0}
.menu .m-drop .cbox{width:56px}
.menu .m-drop b{display:block;font-weight:600;font-size:16px}
.menu .m-t span{display:block;font-size:15px;color:var(--mute)}
.menu .m-foot{margin-top:auto;font-size:14px;color:var(--mute)}

/* ---------- the corner box ---------- */
/* the corner box, as every cover carries it (r5's, and the shared issues module's): square, the disc, the number in the mono */
.cbox{display:grid;justify-items:center;align-content:center;background:var(--ic);color:var(--ion);aspect-ratio:1;container-type:inline-size}
.cbox .disc{width:53%;height:auto}
.cbox b{margin-top:9.6cqw;font:500 21.3cqw/1 var(--mono);letter-spacing:.06em}

/* the cast shadow: a hard block behind covers, light from the upper left */
.cast{--dx:12px;--dy:18px;position:relative;isolation:isolate;margin:0 var(--dx) var(--dy) 0}
.cast::before{content:"";position:absolute;left:0;top:0;z-index:-1;width:calc(100% + var(--dx));height:calc(100% + var(--dy));background:var(--cast);
  clip-path:polygon(0 0,calc(100% - var(--dx)) 0,100% var(--dy),100% 100%,var(--dx) 100%,0 calc(100% - var(--dy)))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 28px;border-radius:28px;background:var(--ink);color:var(--paper);font-size:16.5px;font-weight:600;transition:transform .3s var(--ease),background .3s}
.btn:hover{background:#000}
.btn{touch-action:manipulation}
.btn:focus-visible,.link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* the arrow: one path, the shaft ending exactly in the point of the head */
.ar{display:inline-block;flex:none;width:1.08em;height:.96em;overflow:visible;vertical-align:-.12em;transition:transform .35s var(--ease)}
.ar path{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;vector-effect:non-scaling-stroke}
a:hover > .ar,button:hover > .ar,a:focus-visible > .ar{transform:translateX(3px)}
.btn .ar{width:18px;height:16px;vertical-align:0}
.link{min-height:44px}

/* ---------- the first screen: 1 + 2 + 3 + 4, and the answer is the name ---------- */
.hero{position:relative;overflow:clip;height:calc(100vh - var(--top));height:calc(100svh - var(--top));min-height:560px}
.hero-in{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-top:22px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.hero-in .hsum{margin-top:auto}
.now-cover{display:none}
.hero-words{max-width:none}
/* two lines at any size: "Goods for the / obsessively curious." (the measure is in the motto's own em, so it holds as the type scales) */
.hero-words .motto{max-width:9.5em}
.motto .nw{white-space:nowrap}
.motto{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"opsz" 60;font-size:clamp(30px,8.6vw,52px);line-height:1.02;letter-spacing:-.022em}
.lede{margin-top:14px;font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:clamp(18px,4.8vw,21px);line-height:1.34;color:var(--mute);max-width:26ch}

.hsum{position:relative;container-type:inline-size;width:100%;--fs:calc(7.5072cqw / var(--capr))}
/* the units column: two hairlines, the width of the O, rising from the rule */
.hs-rows{position:relative;display:grid}
.hs-rows::before,.hs-rows::after{content:"";position:absolute;top:-100vh;bottom:calc(var(--fs) * -.14);width:1px;background:var(--rule)}
.hs-rows::before{right:calc(20.72cqw - 3.72cqw - 1px)}
.hs-rows::after{right:calc(20.72cqw + 3.72cqw)}
.hs-row{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs);font-weight:480;line-height:1.26;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0}
.hs-row b{font-weight:inherit;width:8cqw;margin-right:calc(20.72cqw - 4cqw);text-align:center}
.hs-row .op{font-weight:380;line-height:1}
.hs-rule{display:block;height:max(1.5px,calc(var(--fs) * .055));background:var(--ink);margin:calc(var(--fs) * .14) 0 calc(var(--fs) * .4)}
/* The 1's introduction: once the first screen has settled and held a beat, it comes out of the O taking a breath
   (a touch small, then full size as it clears), rises a little past its place, and comes down onto it with weight: it
   sinks just below, squashed a touch, and eases back up to rest. One curve, no gesture after. It's the one that travels. */
.carrying .wm-hero.out .c1{transform-box:fill-box;transform-origin:50% 100%;animation:c1-lift 1.15s both}
@keyframes c1-lift{
  0%{transform:translateY(2150px) scale(.94);animation-timing-function:cubic-bezier(.22,.8,.3,1)}
  50%{transform:translateY(-150px) scale(1);animation-timing-function:cubic-bezier(.5,0,.75,.6)}
  72%{transform:translateY(38px) scale(1.025,.955);animation-timing-function:cubic-bezier(.25,.6,.3,1)}
  100%{transform:none}}
.carrying .wm-hero:not(.out) .c1{transform:translateY(2150px)}

.now{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 18px;border-top:1px solid var(--rule);padding-top:12px;margin-top:22px}
.now .t{font-size:14px;color:var(--mute)}
.now .d{grid-column:1;font-size:17px;line-height:1.3}
.now .d .it{font-size:20px}
.now .ar{grid-column:2;grid-row:1/3;width:20px;height:18px}

/* ---------- sections ---------- */
.sec{padding-top:112px}
.sh{border-top:1.5px solid var(--ink);padding-top:14px;margin-bottom:34px;display:grid;gap:10px}
.sh h2,.sh h1{font-weight:650;font-size:clamp(40px,11.2vw,96px);line-height:.94;letter-spacing:-.045em}
.sh p{font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:18.5px;line-height:1.36;color:var(--mute);max-width:34ch}
.sh .more{justify-self:start}

/* ---------- the drops, in a column ---------- */
.ledger{list-style:none;--nw:3.1em}
.lg{border-top:1px solid var(--rule);padding:18px 0 22px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
.lg:last-child{border-bottom:1.5px solid var(--ink)}
.lg-no{font-size:clamp(64px,19vw,184px);font-weight:500;line-height:.78;letter-spacing:-.045em;font-feature-settings:"tnum" 1,"lnum" 1;min-width:1.72em;text-align:right;padding-top:.02em}
.lg-fig{grid-column:1/-1;margin-top:18px;max-width:560px}
.lg-fig figcaption{margin-top:12px;font-family:var(--serif);font-variation-settings:"opsz" 14;font-size:15px;line-height:1.35;color:var(--mute)}
.lg-cover{position:relative;display:block;background:var(--rule)}
.lg-cover img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lg-cover .cbox{position:absolute;left:0;top:0;width:18%;min-width:52px}
.lg-body{grid-column:1/-1;margin-top:18px;display:grid;gap:8px}
.lg-body h3{font-size:clamp(40px,11vw,64px);line-height:1;letter-spacing:-.025em}
.lg-body .where{font-size:16.5px;line-height:1.45}
.lg-body .state{font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:18px;line-height:1.35;color:var(--mute)}
.lg-body .btn{margin-top:12px}
.lg-rs{grid-template-columns:auto 76px minmax(0,1fr);align-items:end}
.lg-rs .lg-no{color:var(--mute)}
.lg-thumb{position:relative;width:76px;aspect-ratio:4/5;overflow:hidden;background:var(--rule);align-self:center}
.lg-thumb img{width:100%;height:100%;object-fit:cover}
.lg-rs .lg-t{font-family:var(--serif);font-variation-settings:"opsz" 24;font-size:20px;line-height:1.2;padding-bottom:4px}
.lg-note{margin-top:16px;font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:17px;line-height:1.4;color:var(--mute);max-width:40ch}
.lg-note .tf{font-family:var(--sans);font-size:15.5px;color:var(--ink);font-weight:500}

/* ---------- who, and the rules ---------- */
.who{display:grid;gap:22px}
.who blockquote{font-family:var(--serif);font-variation-settings:"opsz" 60;font-size:clamp(32px,8.6vw,64px);line-height:1.06;letter-spacing:-.024em;max-width:18ch}
.who blockquote::before{content:"\201C"}
.who blockquote::after{content:"\201D"}
.who figcaption{font-size:15.5px;color:var(--mute)}
.who figcaption b{color:var(--ink);font-weight:600}
.rules{list-style:none;margin-top:44px;border-top:1px solid var(--ink)}
.rules li{display:grid;gap:6px;padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.rules b{font-weight:640;font-size:clamp(23px,6.2vw,34px);line-height:1.08;letter-spacing:-.024em}
.rules span{font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:17px;line-height:1.42;color:var(--mute);max-width:46ch}
/* what we ask: questions, set as the questions they are, and one quiet line under them */
.asks b{font-weight:560;font-size:clamp(21px,5.2vw,30px);line-height:1.16;letter-spacing:-.018em;max-width:28ch}
.asks-end{margin-top:22px;font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:clamp(19px,4.6vw,23px);line-height:1.35;color:var(--ink)}

/* ---------- goods, a strip ---------- */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:14px;margin:0 calc(var(--g) * -1);padding:0 var(--g) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);scrollbar-width:none;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.strip a{scroll-snap-align:start;display:grid;gap:10px;min-width:0}
.strip .ph{aspect-ratio:4/5;overflow:hidden;background:#EAE6DD}
.strip .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.strip a:hover .ph img{transform:scale(1.03)}
.strip b{font-weight:600;font-size:15.5px;line-height:1.25}
.strip span span{display:block;font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:15.5px;line-height:1.35;color:var(--mute);margin-top:2px}

/* ---------- the question: a sum with a blank in it ---------- */
.ask{display:grid;gap:26px}
.ask h3{font-weight:650;font-size:clamp(28px,7.6vw,52px);line-height:1.02;letter-spacing:-.034em;max-width:16ch}
.ask .why{font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:18px;line-height:1.4;color:var(--mute);max-width:38ch}
.valve{position:relative;justify-self:start;--vf:clamp(56px,17vw,120px)}
.vs{display:grid;grid-template-columns:.7em .62em .3em .62em .62em auto;column-gap:0;font-size:var(--vf);font-weight:480;line-height:1.14;font-feature-settings:"tnum" 1,"lnum" 1;align-items:baseline}
.vs > span{display:block;position:relative;text-align:center}
.vs .vs-op{text-align:left;font-weight:380}
.vs .vs-c{font-feature-settings:"tnum" 0,"lnum" 1;text-align:center}
.vs .vs-l{text-align:left;align-self:center;padding-left:.35em;font-family:var(--serif);font-variation-settings:"opsz" 14;font-size:max(14px,.16em);line-height:1.25;color:var(--mute);white-space:nowrap}
.vs .vs-k{height:.46em}
.vs .vs-k svg{position:absolute;left:50%;bottom:.02em;width:.184em;height:.4em;transform:translateX(-58%);overflow:visible}
.vs .vs-r{grid-column:1/6;height:max(1.5px,.055em);background:var(--ink);margin:.1em 0 .08em}
.vs .vs-in{color:var(--ink)}
.vs .vs-in:empty::before{content:"";position:absolute;left:12%;right:12%;bottom:.1em;height:max(1.5px,.04em);background:var(--mute);opacity:.55}
.valve.focus .vs .vs-in.next::before{background:var(--ink);opacity:1;animation:caret 1.1s steps(1) infinite}
.vs .vs-in.next:not(:empty)::before{display:none}
@keyframes caret{50%{opacity:.15}}
.vs .vs-a{color:var(--ink);transition:opacity .35s}
.vs .vs-a:empty::before{content:"";position:absolute;left:14%;right:14%;bottom:.1em;height:1px;background:var(--rule)}
.vs .vs-c.vs-a{color:var(--rule);transition:color .3s}
.vs.solved .vs-c.vs-a{color:var(--ink)}
.v-in{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;background:none;caret-color:transparent;cursor:text}
.v-msg{font-size:15.5px;line-height:1.45;color:var(--mute);min-height:2.9em;max-width:38ch}
.v-msg a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.list{display:grid;gap:12px;max-width:520px}
.list[hidden]{display:none}
.list p{font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:18px;line-height:1.4}
.list .row{display:grid;grid-template-columns:1fr auto;gap:8px}
.list input{height:56px;border:1.5px solid var(--ink);border-radius:28px;padding:0 22px;background:var(--sheet);font-size:16px;min-width:0}
.list input:focus{outline:none;box-shadow:0 0 0 3px rgba(22,21,20,.12)}
.list small{font-size:14px;line-height:1.4;color:var(--mute)}
.list.done .row{display:none}

/* ---------- the foot ---------- */
.foot{margin-top:140px;padding:30px 0 calc(28px + env(safe-area-inset-bottom));border-top:1.5px solid var(--ink)}
.foot .foot-lock{width:100%;font-size:clamp(15px,3.3vw,44px)}
.foot-row{display:grid;gap:18px;margin-top:34px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--mute)}
.foot-row nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:16px;font-weight:500;color:var(--ink)}
.foot-row nav a{padding:8px 0}
.foot-sum{font-feature-settings:"tnum" 1,"lnum" 1;color:var(--ink)}
.foot-sum b{font-weight:500}
/* the bracket: long division, one path (sum.js draws it) */
.lock{position:relative;display:inline-grid;justify-items:end;line-height:1;color:var(--ink);--tw:max(1.25px,.032em)}
.lock .lb{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.lock .lb path{fill:none;stroke:currentColor;stroke-width:var(--tw);stroke-linejoin:miter;stroke-miterlimit:10;stroke-linecap:butt}
.lock .la,.lock .ld{white-space:nowrap;display:block}
.lock .la{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"opsz" 60;letter-spacing:-.012em;padding:0 0 .24em}
.lock .ld{font-family:var(--mono);font-size:.64em;letter-spacing:.01em;padding:.5em 0 .08em .8em}
.foot .lock{font-size:clamp(21px,5.6vw,34px);justify-self:start}

/* ---------- the carry into a drop ---------- */
.xbox{position:fixed;z-index:67;pointer-events:none;display:grid;justify-items:center;align-content:center;gap:5px}
/* on the way into a drop, the house's own corner mark steps aside, so the drop's box lands in an empty corner */
.entering .top .brand{opacity:0;transition:opacity .32s ease}
.xbox .disc{width:53%;height:auto}
.xbox b{font:500 11px/1 var(--mono);letter-spacing:.06em}   /* the drop's own corner box, to the pixel, so the handoff is seamless */
@media (max-width:760px){.xbox{gap:4px}.xbox b{font-size:9.5px}}
.xflood{position:fixed;inset:0;z-index:66;pointer-events:none}

/* ---------- arrival: how everything comes in ---------- */
/* An inline script in the head marks the page .intro before its first paint, so whatever will arrive is held back and
   never shows whole first. sum.js waits for the fonts (so nothing reflows in view), then lets the first screen in as one
   sequence, and everything below arrives the same way as it's reached: opacity and a small rise, one curve, once. */
html.intro main > :not(.hero),html.intro .foot,html.intro .hero-words > *,html.intro .hs-row,html.intro .hs-rule,html.intro .wm-hero,html.intro .hero-side{opacity:0}
html.intro .hs-rows::before,html.intro .hs-rows::after{opacity:0}
html.intro .wm-hero .c1{transform:translateY(2150px)}
.rv{opacity:0;transform:translateY(var(--rv-y,10px))}
.rv.in{opacity:1;transform:none;transition:opacity .45s var(--arrive) var(--rv-d,0ms),transform .6s var(--arrive) var(--rv-d,0ms)}
.rv.rv-fade{transform:none}
.rv.rv-draw{opacity:1;transform:scaleX(0);transform-origin:0 50%}
.rv.rv-draw.in{transform:none}
.hs-rows.rv-lines::before,.hs-rows.rv-lines::after{transform:scaleY(0);transform-origin:50% 100%}
.hs-rows.rv-lines.in::before,.hs-rows.rv-lines.in::after{transform:none;transition:transform .65s var(--arrive) var(--rv-d,0ms)}
/* the covers and the spines are the feature: a longer rise, the cover's shadow falling after it, the bookend leaning in last */
.rv.rv-rich{--rv-y:14px}
.iss-fig.rv .iss-cast::before{opacity:0}
.iss-fig.rv.in .iss-cast::before{opacity:1;transition:opacity .45s var(--arrive) calc(var(--rv-d,0ms) + 160ms)}
.iss-bookend.rv{transform:rotate(6deg);transform-origin:64% 100%}
.iss-bookend.rv.in{transform:none;transition:opacity .35s var(--arrive) var(--rv-d,0ms),transform .65s var(--arrive) var(--rv-d,0ms)}
/* images: their space kept, a paper ground behind, and each fades in once, only after it's decoded (sum.js) */
html.lz main img[loading="lazy"]:not(.ok),html.lz main img[fetchpriority]:not(.ok),html.lz main img.lzi:not(.ok){opacity:0}
html.lz main img.ok{transition:opacity .45s var(--arrive),transform .9s var(--ease)}

/* the next cue: where the page goes next, offered quietly to someone who has paused near the end of a section (phone) */
.nxt{position:fixed;z-index:44;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 18px;border-radius:21px;background:rgba(242,239,231,.96);border:1px solid var(--rule);box-shadow:0 8px 20px -12px rgba(22,21,20,.5);font:500 14.5px/1 var(--sans);color:var(--ink);white-space:nowrap;
  /* painted once, on its own layer, at load: showing it is then only opacity and transform, never a first paint mid-scroll */
  will-change:transform,opacity;pointer-events:none;opacity:0;transform:translate(-50%,10px);transition:opacity .3s var(--ease),transform .5s var(--ease)}
.nxt.on{opacity:1;pointer-events:auto;transform:translate(-50%,0);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.nxt .k{color:var(--mute);font-weight:400}
.nxt .ar{width:14px;height:13px;transform:rotate(90deg)}
/* the first screen, on a desk: for someone who has sat still a while, the way on appears under the lede, small and quiet */
.hint{display:none}
@media (min-width:1000px){
  .hint{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13.5px;letter-spacing:.005em;color:var(--mute);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
  .hint.on{opacity:.7;pointer-events:auto;transition:opacity 1.6s ease}
  .hint .ar{width:13px;height:12px;transform:rotate(90deg)}
  .hint:hover{opacity:1;color:var(--ink)}
}
/* the first screen, on a phone: a hairline at its foot, in the left margin (clear of the covers and of the thumb), that
   breathes down once or twice and then stays barely there */
.scue{position:fixed;z-index:3;left:calc(var(--g) / 2);bottom:calc(14px + env(safe-area-inset-bottom));width:1px;height:30px;margin-left:-.5px;background:linear-gradient(var(--ink),var(--ink) 60%,rgba(22,21,20,0));pointer-events:none;
  opacity:0;transform:scaleY(0);transform-origin:50% 0}
.scue.on{animation:scue 4.6s cubic-bezier(.45,0,.3,1) both}
@keyframes scue{
  0%{opacity:0;transform:scaleY(0)}
  22%{opacity:.34;transform:scaleY(1)}
  44%{opacity:.08;transform:scaleY(1)}
  66%{opacity:.3;transform:scaleY(1)}
  100%{opacity:.14;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.scue.on{animation:none;opacity:.14;transform:none}}

/* ---------- wider ---------- */
@media (min-width:720px){
  :root{--g:32px;--top:64px}
  .nav{display:flex}
  .menu-btn{display:none}
  .sec{padding-top:150px}
  .sh{margin-bottom:48px}
  .strip{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0;gap:22px}
  .foot-row{grid-template-columns:1fr auto auto;align-items:center;column-gap:40px}
}
@media (min-width:1000px){
  :root{--g:56px}
  .hero-in{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr;column-gap:clamp(40px,4.5vw,72px);padding-top:34px;padding-bottom:44px;--w:min(calc(100vw - 2 * var(--g) - 360px),calc((100svh - var(--top) - 118px) / .712))}
  .hero-words{position:absolute;left:var(--g);top:34px;max-width:none;z-index:1}
  .hero-words .motto{font-size:clamp(34px,3.3vw,50px)}
  .hero-words .lede{max-width:22ch}
  .hero-in{position:relative}
  .hero-in .hsum{grid-column:1;grid-row:1;align-self:end;width:var(--w);margin:0}
  .now{grid-column:2;grid-row:1;align-self:end;display:grid;grid-template-columns:1fr auto;border-top:0;padding-top:0;margin:0;gap:4px 16px;padding-bottom:calc(var(--w) * .0 + 2px)}
  .now-cover{display:block;grid-column:1/-1;position:relative;margin-bottom:20px;--dx:14px;--dy:21px}
  .now-cover img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .now-cover .cbox{position:absolute;left:0;top:0;width:19%}
  .now .t{grid-column:1;grid-row:2}
  .now .d{grid-column:1;grid-row:3}
  .now .ar{grid-column:2;grid-row:2/4;align-self:center}
  .lg{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);column-gap:48px;padding:26px 0 30px}
  .lg-no{font-size:clamp(120px,11.5vw,180px)}
  .lg-live .lg-fig{grid-column:2;margin-top:6px;max-width:none}
  .lg-live .lg-body{grid-column:3;margin-top:0;align-self:end;padding-bottom:4px}
  .lg-rs{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr)}
  .lg-thumb{width:34%;justify-self:start}
  .lg-rs .lg-t{align-self:end;font-size:26px}
  .who{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:end}
  .rules{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px;border-top:0}
  .rules li{border-top:1px solid var(--ink);border-bottom:0;padding:18px 0 30px}
  .ask{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start}
  .ask .valve,.ask .v-msg,.ask .list{grid-column:2}
  .ask .ask-l{grid-row:1/4}
}
@media (prefers-reduced-motion:reduce){
  @view-transition { navigation: none; }
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* =================== the other pages =================== */
.page-head{padding:34px 0 0}
.page-head h1{font-weight:650;font-size:clamp(52px,15vw,150px);line-height:.9;letter-spacing:-.05em}
.page-head p{margin-top:18px;font-family:var(--serif);font-variation-settings:"opsz" 24;font-size:clamp(20px,5.4vw,28px);line-height:1.28;color:var(--mute);max-width:30ch}
.page-head + .sec{padding-top:88px}

/* a ledger sum: figures in columns, words beside them */
.ls{display:inline-grid;grid-template-columns:.7em repeat(var(--cols,1),.62em) auto;font-size:var(--lf,clamp(44px,12vw,76px));font-weight:480;line-height:1.14;font-feature-settings:"tnum" 1,"lnum" 1;align-items:baseline}
.ls > span{display:block;position:relative;text-align:center}
.ls .ls-op{text-align:left;font-weight:380}
.ls .ls-l{text-align:left;padding-left:.4em;font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:max(15px,.24em);line-height:1.3;color:var(--mute);align-self:center}
.ls .ls-l b{font-family:var(--sans);font-weight:600;color:var(--ink)}
.ls .ls-k{height:.46em}
.ls .ls-k svg{position:absolute;left:50%;bottom:.02em;width:.184em;height:.4em;transform:translateX(-58%);overflow:visible}
.ls .ls-r{grid-column:1/-2;height:max(1.5px,.055em);background:var(--ink);margin:.1em 0 .08em}

/* who picks */
.bio{display:grid;gap:30px}
.bio .big{font-family:var(--serif);font-variation-settings:"opsz" 72;font-size:clamp(34px,9vw,76px);line-height:1.04;letter-spacing:-.026em;max-width:17ch}

.bio-body{display:grid;gap:14px;font-size:18px;line-height:1.5;max-width:36ch}
.bio-body .sig{font-family:var(--serif);font-variation-settings:"opsz" 24;font-size:22px;line-height:1.3;border-top:1px solid var(--rule);padding-top:16px;margin-top:8px}
.bio-body .sig small{display:block;font-family:var(--sans);font-size:14px;color:var(--mute);margin-top:6px}

/* where it comes from: the figures in their own column */
.prov{list-style:none;border-top:1.5px solid var(--ink)}
.prov li{display:grid;grid-template-columns:7.6rem minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0 16px;border-bottom:1px solid var(--rule)}
.prov .f{font-size:clamp(30px,8.4vw,60px);font-weight:500;line-height:1;letter-spacing:-.03em;text-align:right;font-feature-settings:"tnum" 1,"lnum" 1;white-space:nowrap}
.prov .f small{font-size:.42em;font-weight:500;letter-spacing:0;margin-left:.12em;color:var(--mute)}
.prov p{font-size:16.5px;line-height:1.45}
.prov p span{display:block;font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:16.5px;color:var(--mute);margin-top:2px}
.prov-cap{margin-top:14px;font-size:14px;color:var(--mute)}

/* after you pay */
.steps{list-style:none;counter-reset:s;border-top:1.5px solid var(--ink)}
.steps li{display:grid;grid-template-columns:2.2em 1fr;gap:8px;padding:16px 0 18px;border-bottom:1px solid var(--rule);counter-increment:s}
.steps li::before{content:counter(s);font-weight:500;font-size:22px;line-height:1.2;font-feature-settings:"tnum" 1;color:var(--mute)}
.steps b{display:block;font-weight:640;font-size:clamp(21px,5.6vw,28px);line-height:1.15;letter-spacing:-.02em}
.steps span{display:block;font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:17px;line-height:1.42;color:var(--mute);margin-top:4px;max-width:44ch}
.prov .f .cm{font-feature-settings:"tnum" 0}

/* goods */
.gset{margin-top:0}
.gset + .gset{margin-top:96px}
.ghead{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:baseline;border-top:1.5px solid var(--ink);padding-top:12px;margin-bottom:22px}
.ghead h2{font-weight:650;font-size:clamp(28px,7.4vw,46px);line-height:1;letter-spacing:-.032em}
.ghead .n{grid-row:1;grid-column:2;font-size:clamp(28px,7.4vw,46px);font-weight:500;letter-spacing:-.03em;font-feature-settings:"tnum" 1;color:var(--mute)}
.ghead p{grid-column:1/-1;font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:17.5px;line-height:1.4;color:var(--mute);max-width:46ch}
.goods{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.good{background:var(--paper);display:flex;flex-direction:column;min-width:0;margin:0;scroll-margin-top:calc(var(--top) + 16px)}
.good .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:#EAE6DD}
.good .ph > img{width:100%;height:100%;object-fit:cover}
.good.sq .ph{aspect-ratio:1}
.good.wide .ph{aspect-ratio:3/2}
.good.span{grid-column:1/-1}
.good figcaption{padding:12px 12px 16px;display:grid;gap:4px}
.good figcaption b{font-weight:600;font-size:15.5px;line-height:1.2}
.good figcaption span{font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:15.5px;line-height:1.38;color:var(--mute)}
.good figcaption em{font-style:normal;font-size:13px;line-height:1.4;color:var(--mute);padding-top:4px}
.good .ph > svg.over{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.over .etch{fill:#1D1C1A;opacity:.86}
.over .etch-t{fill:#1D1C1A;opacity:.88;font:500 25px var(--sans);font-feature-settings:"tnum" 1}
.over .whl{fill:#1D1C1A;font:600 82px var(--sans);font-feature-settings:"tnum" 1}
.over .lcd{fill:#E9ECE6;font:500 60px var(--sans);font-feature-settings:"tnum" 1;letter-spacing:.02em}
.over .lcd-u{fill:#E9ECE6;opacity:.7;font:500 30px var(--sans)}
.over .red{fill:var(--carry)}
.over.mult{mix-blend-mode:multiply}
.flash{position:absolute;z-index:2;right:10px;bottom:10px;height:40px;padding:0 15px;border-radius:20px;background:rgba(248,246,241,.94);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 14px -6px rgba(22,21,20,.4)}
.flash i{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.flash[aria-pressed="true"] i{background:currentColor}
.good .ph .day{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity 1.2s ease}
.good .ph.lit .day{opacity:0;transition:opacity .06s}
.good .ph .blink{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:1}
.good .ph.firing .blink{animation:blink .45s ease-out}
@keyframes blink{0%{opacity:.92}100%{opacity:0}}
.tally{margin-top:96px;border-top:1.5px solid var(--ink);padding-top:26px;display:grid;gap:22px}
.tally p{font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:19px;line-height:1.4;max-width:34ch}

/* the back of the tee */
.tee{display:grid;gap:22px;margin-top:40px}
.tee-stage{position:relative;margin:0}
.tee-back{position:relative;aspect-ratio:880/1100;background:#EEEAE2;overflow:hidden}
.tee-back > img{width:100%;height:100%;object-fit:cover}
.tee-print{position:absolute;left:29%;top:22.2%;width:42%;height:36%;display:flex;justify-content:center;align-items:flex-start;mix-blend-mode:multiply;opacity:.94;pointer-events:none}
.tee-print .sm{color:#1C1B19;transition:opacity .35s}
.tee-print.swap .sm{opacity:0}
.tee-stage figcaption{margin-top:12px;font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:16px;line-height:1.4;color:var(--mute)}
.tee-stage figcaption b{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:15px}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);align-content:start}
.pick{background:var(--paper);display:grid;grid-template-rows:104px auto;gap:10px;padding:12px 12px 14px;transition:background .3s}
.pick:hover{background:var(--sheet)}
.pick[aria-pressed="true"]{background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk-s{display:grid;place-items:center;overflow:hidden}
.pk-t{display:grid;gap:2px;font-family:var(--serif);font-variation-settings:"opsz" 14;font-size:14.5px;line-height:1.3;color:var(--mute)}
.pk-t b{font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.25;color:var(--ink)}
.sm{display:inline-grid;font-family:var(--sans);font-weight:500;font-feature-settings:"tnum" 1,"lnum" 1;line-height:1.1;text-align:center;color:var(--ink)}
.sm > span{display:block;position:relative}
.sm .sm-op{text-align:left}
.sm .sm-c{font-feature-settings:"tnum" 0,"lnum" 1}
.sm .sm-k{height:.5em}
.sm .sm-1{position:absolute;left:50%;bottom:.04em;width:.184em;height:.4em;transform:translateX(-58%);fill:var(--carry)}
.sm .sm-r{grid-column:1/-1;height:.05em;min-height:1.5px;background:currentColor;margin:.08em 0}
.sm .sm-b{position:absolute;left:100%;bottom:.02em;font-size:.36em;font-weight:500;line-height:1;margin-left:.08em}

/* join: the ladder */
.ladder{list-style:none;border-top:1.5px solid var(--ink)}
.ladder > li{display:grid;gap:14px;padding:22px 0 30px;border-bottom:1px solid var(--rule)}
.ladder h2{font-weight:650;font-size:clamp(28px,7.6vw,48px);line-height:1;letter-spacing:-.034em}
.ladder h2 small{display:block;font-size:14px;font-weight:500;letter-spacing:0;color:var(--mute);margin-bottom:10px}
.ladder > li > p{font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:18px;line-height:1.42;color:var(--mute);max-width:42ch}
.ladder .soon{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;padding:3px 10px;margin-left:8px;vertical-align:3px;letter-spacing:0}
.ladder .lock-wait{color:var(--mute)}

@media (min-width:720px){
  .goods{grid-template-columns:repeat(3,1fr)}
  .good.span{grid-column:span 2}
  .good.span .ph{aspect-ratio:auto;flex:1;min-height:0}
  .good figcaption{padding:14px 18px 20px}
  .ghead{grid-template-columns:auto 1fr auto;column-gap:22px}
  .ghead p{grid-column:2;grid-row:1;text-align:right;justify-self:end}
  .ghead .n{grid-column:3}
  .picks{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  .page-head{padding-top:56px}
  .bio{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:start}
  .prov li{grid-template-columns:3fr 9fr;gap:40px}
  .prov p{max-width:56ch}
  .steps li{grid-template-columns:3fr 9fr;gap:40px}
  .steps li::before{font-size:40px;line-height:1;text-align:right;letter-spacing:-.03em}
  .tee{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
  .picks{grid-template-columns:1fr 1fr;position:sticky;top:calc(var(--top) + 20px)}
  .pick{grid-template-rows:118px auto;padding:16px}
  .ladder > li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;padding:30px 0 40px}
  .ladder > li > *:not(.l-h){grid-column:2}
  .ladder > li > .l-h{grid-row:1/span 4}
  .tally{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:end}
}
.good.big,.good.wide,.good.full,.good.note{grid-column:1/-1}
.good.wide .ph,.good.full .ph{aspect-ratio:3/2}
.good.note{background:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:22px 18px}
.good.note p{font-family:var(--serif);font-variation-settings:"opsz" 24;font-size:22px;line-height:1.3;max-width:18ch}
@media (min-width:720px){
  .good.note{grid-column:auto}
  .good.big{grid-column:span 2;grid-row:span 2}
  .good.big .ph{aspect-ratio:auto;flex:1;min-height:0}
  .good.wide{grid-column:span 2}
  .good.wide .ph{aspect-ratio:3/2}
  .good.fill .ph{aspect-ratio:auto;flex:1;min-height:0}
  .good.full{grid-column:1/-1}
  .good.full .ph{aspect-ratio:3.2}
  .good.note{padding:30px}
}

/* =================== round 2 =================== */
.k{font-size:14px;font-weight:600;line-height:1.3;color:var(--mute)}
.next{margin-top:26px}
/* the first screen: the motto on its own (the name is the sum's answer, right there) */
.hero-words{max-width:none}

/* the issues */
.issues .sh{margin-bottom:30px}
.iss-act{display:grid;gap:14px;margin-top:30px;border-top:1px solid var(--rule);padding-top:16px}
.iss-act p{font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:18px;line-height:1.38;color:var(--mute);max-width:34ch}
.iss-act .btn{justify-self:start}
.shelf-wrap{margin-top:72px;display:grid;gap:22px}
.shelf-wrap .shelf-note{font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:19px;line-height:1.38;max-width:30ch}
.shelf-wrap .shelf-note .tf{font-family:var(--sans);font-weight:500;font-size:.92em}

/* nine things we do, and the tenth: a column that carries */
.ten{position:relative;--tf:clamp(42px,11.5vw,76px)}
.ten-list{list-style:none;border-top:1.5px solid var(--ink)}
.ten-list li,.ten-sum{display:grid;grid-template-columns:.7em .62em .62em minmax(0,1fr);align-items:baseline;font-size:var(--tf);font-feature-settings:"tnum" 1,"lnum" 1}
.ten-list li{border-bottom:1px solid var(--rule);padding:.08em 0 .1em}
.ten-list b{grid-column:3;font-weight:480;line-height:1.1;text-align:center}
.ten-list span{grid-column:4;padding-left:.32em;font-size:17.5px;font-weight:500;line-height:1.32;letter-spacing:-.005em;align-self:center;padding-top:2px}
.ten-list small{display:block;font-family:var(--serif);font-variation-settings:"opsz" 16;font-weight:400;font-size:16px;line-height:1.38;color:var(--mute);margin-top:4px;max-width:46ch;text-wrap:pretty}
.ten-list .op{grid-column:1;font-style:normal;font-weight:380;line-height:1.1}
.ten-list .you{border-bottom:0}
.ten-sum{position:sticky;bottom:0;z-index:2;background:var(--paper);padding:0 0 max(10px,env(safe-area-inset-bottom))}
/* the carry spot: above the rule, over the tens, where a carry is pencilled in; room for the whole 1, so it's never cut */
.ten-sum .ten-k{grid-column:2;grid-row:1;position:relative;height:.52em}
/* the carry spot: where the page's one red 1 comes to rest while this sum carries it (it's a place the travelling 1 lands,
   sized against the 10 as the mark's 1 is against its letters; empty when the 1 is home in the bar) */
.ten-sum .ten-k svg{position:absolute;left:50%;bottom:.05em;width:.1795em;height:.39em;overflow:visible;transform:translateX(-50%)}
.ten-sum .ten-k .c1{transform-box:fill-box;transform-origin:50% 100%}
.ten-sum .ten-r{grid-column:1/4;grid-row:2;height:max(1.5px,.055em);background:var(--ink);margin:0 0 .1em}
.ten-sum .tt,.ten-sum .tu{grid-row:3;position:relative;clip-path:inset(.1em -.1em .09em);font-weight:480;line-height:1.02;text-align:center;min-height:1.02em}
/* each place is a window just the height of a figure, and the figure rolls through it (a no-break space holds it before
   it's written); the clip doesn't touch layout */
.ten-sum .dg{display:block}
.ten-sum .dg-out{position:absolute;inset:0}
.ten-sum .tt{grid-column:2;clip-path:inset(-.1em -.1em .09em)}   /* its window opens at the rule: the tens' 1 comes down out of it */
.ten-sum .tu{grid-column:3}
.ten-sum .ten-l{grid-column:4;grid-row:3;padding-left:.32em;font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:19px;line-height:1.3;color:var(--ink);align-self:center;opacity:0;transform:translateY(4px);transition:opacity .25s var(--arrive),transform .25s var(--arrive)}
.ten.landed .ten-sum .ten-l{opacity:1;transform:none;transition:opacity .5s var(--arrive) .18s,transform .6s var(--arrive) .18s}
/* a row arrives just above the total, so the total never sits over a row */
.ten-list li.rv{--rv-y:8px}
/* the column's 1s, lent to the total (faint where they were), and the ones in flight: ours, the leaning 1, in ink */
.ten-list b{transition:opacity .35s var(--arrive)}
.ten.lent .ten-list b{opacity:.2;transition-delay:calc(var(--i,0) * 40ms)}
.ten-fly{position:fixed;left:0;top:0;z-index:69;pointer-events:none;will-change:transform,opacity}
.ten-fly i{position:absolute;text-align:center;font-style:normal;font-weight:480;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--ink);white-space:nowrap}
.ten-fly svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0}
.ten-fly .ink{fill:var(--ink)}
.ten.snap *,.ten.snap *::before,.ten.snap *::after{transition:none!important}

/* coming */
.soon{margin-top:64px;border-top:1px solid var(--rule);padding-top:18px;display:grid;gap:10px}
.soon-t{font-family:var(--serif);font-variation-settings:"opsz" 22;font-size:21px;line-height:1.32;max-width:30ch}
.soon-r{font-weight:650;font-size:clamp(28px,7.4vw,48px);line-height:1;letter-spacing:-.034em;margin-top:6px}

@media (min-width:720px){
  .iss-act{grid-template-columns:1fr auto;align-items:center}
  .shelf-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:56px}
  .soon{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:end}
  .soon .k{grid-column:1/-1}
}
@media (min-width:1000px){
  /* the total stands on its own beside the list, big, and counts as you read */
  .ten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:start}
  .ten-list{grid-column:1}
  .ten-list span{font-size:19px}
  .ten-sum{grid-column:2;grid-row:1;position:sticky;top:calc(var(--top) + 14vh);bottom:auto;background:none;padding:0;--tf:clamp(150px,15vw,230px);font-size:var(--tf);grid-template-columns:0 .62em .62em minmax(0,1fr)}
  .ten-sum .ten-r{grid-column:2/4}
  .ten-sum .ten-l{grid-column:2/-1;grid-row:4;padding:14px 0 0;font-size:22px}
  /* the first screen: the sum on the left, every issue on the shelf on the right */
  .hero-side{grid-column:2;grid-row:1;align-self:end;display:grid;gap:26px;justify-items:start}
  .hero-side .now{grid-column:auto;grid-row:auto;width:100%}
  /* the shelf spans the column whatever its caption says (the shelf's own width doesn't count, so it can scroll) */
  .hero-side .hero-shelf{justify-self:stretch}
  .shelf-lower{display:none}
}
@media (max-width:999px){ .hero-shelf{display:none} }

/* figures are tabular; words beside them are not (a tabular full stop leaves a gap) */
.ten-list span,.ten-list small,.ten-sum .ten-l,.ls .ls-l,.vs .vs-l,.prov p,.lg-note{font-feature-settings:normal}
@media (max-width:999px){
  /* on a phone the motto sits over the column: the column's hairlines rise out of the sum and fade before they reach it */
  .hero .hs-rows::before,.hero .hs-rows::after{top:calc(var(--fs) * -3.2);background:linear-gradient(to bottom,rgba(217,212,200,0),var(--rule) 55%)}
}

/* ---------- the long division, three ways ---------- */
/* A, the short bar: the bar covers only what's under it, and ends flush with the answer */
/* B, columns: the dividend tracked out so the answer sits over it letter for letter, as long division does */
.lock-cols{justify-items:start}
.lock-cols .la{padding-left:.9em}
.lock-cols .ld{padding-left:1.4em}
/* C, the name inside: the wordmark is what's divided, the motto is the answer */
.lock-name{display:grid;justify-items:end;--tw:max(1.4px,.05em);--bulge:.14}
.lock-name .la{padding:0 0 .3em}
.lock-name .ld{justify-self:stretch;font-size:1em;padding:.42em 0 .06em calc(4% + .13em)}   /* the room between the bracket and the C scales with the wordmark (which scales with the width), about a third of a cap */
.lock-name .ld svg.wm{width:100%}

.lk{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lk > figure{background:var(--paper);margin:0;padding:26px 18px 20px;display:grid;gap:22px;min-width:0;container-type:inline-size}
.lk-l{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.lk-l b{font-weight:650;font-size:30px;line-height:1;letter-spacing:-.02em}
.lk-l span{font-size:13.5px;font-weight:600;color:var(--mute)}
.lk-l .use{color:var(--paper);background:var(--ink);border-radius:12px;padding:4px 10px}
.lk-stage{display:grid;place-items:center;min-height:180px;padding:24px 0}
.lk-stage .lock{font-size:min(5.6cqw,42px)}
.lk-stage .lock-name{width:100%;font-size:min(4.3cqw,34px)}
.lk-small{display:flex;gap:28px;align-items:center;justify-content:center;border-top:1px solid var(--rule);padding-top:18px}
.lk-small .lock{font-size:15px}
.lk-small .lock-name{width:220px;font-size:12px}
.lk figcaption{font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:16px;line-height:1.42;color:var(--mute);border-top:1px solid var(--rule);padding-top:12px}
.lk figcaption b{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink)}
.lk-zoom{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.lk-zoom > div{background:var(--sheet);aspect-ratio:1;overflow:hidden;position:relative;container-type:inline-size}
.lk-zoom .lock{position:absolute;font-size:60cqw;left:10%;top:-40%}
.lk-zoom > div > span{position:absolute;left:10px;bottom:8px;font-size:12.5px;font-weight:600;color:var(--mute)}
@media (min-width:1000px){
  .lk{grid-template-columns:repeat(3,1fr)}
  .lk > figure{padding:32px 28px 24px}
}
.lk-zoom .lock-name{width:400cqw;font-size:42cqw;left:12%;top:-12%}

/* goods, round 2 */
.goods-tees{grid-template-columns:1fr}
.goods-tees .good .ph{aspect-ratio:3/2}
.backs-t{font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:19px;line-height:1.38;margin-bottom:16px;max-width:30ch}
.tee{margin-top:56px}
@media (min-width:720px){
  .goods-tees{grid-template-columns:repeat(2,1fr)}
  .goods-tees .good.wide{grid-column:auto}
  .goods:not(.goods-tees){grid-template-columns:repeat(4,1fr)}
}
@media (min-width:720px) and (max-width:999px){ .goods:not(.goods-tees){grid-template-columns:repeat(3,1fr)} }

.ladder > li > p.soon-r{font-family:var(--sans);font-weight:650;font-size:clamp(24px,6.4vw,36px);line-height:1.02;letter-spacing:-.03em;color:var(--ink);max-width:none}

@media (min-width:1000px){
  .sh{grid-template-columns:1fr auto;align-items:end}
  .sh p{text-align:right;padding-bottom:8px}
}
@media (min-width:1000px){
  /* the hero's shelf is sized by the screen's height, so the first screen always ends at the fold */
  .hero-shelf .iss-shelf{--sw:clamp(34px,calc((100svh - var(--top) - 290px) / 8.4),58px)}
  .hero-side{max-height:calc(100svh - var(--top) - 80px)}
}

.turn{position:absolute;z-index:2;left:10px;bottom:10px;height:40px;padding:0 15px;border-radius:20px;background:rgba(248,246,241,.94);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 14px -6px rgba(22,21,20,.4);color:var(--ink)}
.turn[hidden]{display:none}
.turn i{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;position:relative}
.turn i::after{content:"";position:absolute;inset:2px 50% 2px 2px;background:currentColor;border-radius:4px 0 0 4px;transition:transform .35s var(--ease)}
.turn[aria-pressed="true"] i::after{transform:translateX(100%) scaleX(-1)}
.goods .good .ph{aspect-ratio:4/5}

.hero-words .lede{margin-top:16px;font-size:clamp(17px,4.6vw,20px);max-width:26ch}
.iss-cap{margin-top:14px;font-size:14px;line-height:1.4;color:var(--mute)}
.we{margin-top:30px;font-family:var(--serif);font-variation-settings:"opsz" 24;font-size:clamp(22px,5.6vw,30px);line-height:1.22;letter-spacing:-.012em;max-width:24ch}
/* the line is the way on: no underline at rest, one hairline drawn under it on hover, the arrow leaning forward */
.we a{color:inherit;text-decoration:underline 1px;text-decoration-color:transparent;text-underline-offset:.18em;transition:text-decoration-color .3s var(--ease)}
.we a:hover,.we a:focus-visible{text-decoration-color:currentColor}
.we a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.we .nw{white-space:nowrap}
.we .ar{width:.8em;height:.72em;margin-left:.06em;vertical-align:-.02em}
.we a:hover .ar,.we a:focus-visible .ar{transform:translateX(4px)}

/* the grids come out even: the first piece of each set is shown big */
@media (min-width:720px){
  .goods.g-tees{grid-template-columns:repeat(3,1fr)}
  .goods.g-things{grid-template-columns:repeat(4,1fr)}
  .goods .good.big{grid-column:span 2;grid-row:span 2}
  .goods .good.big .ph{aspect-ratio:auto;flex:1;min-height:0}
}

.own-issue{margin-top:64px;border-top:1px solid var(--rule);padding-top:18px;display:grid;gap:10px;justify-items:start}
.own-issue p{font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:19px;line-height:1.38;max-width:34ch;color:var(--mute)}

/* ---------- round 2 review ---------- */
.hero-side{overflow:visible;max-width:100%}
/* phone: the first screen holds the motto, the sum landing in the name, and the top of the current issue */
@media (max-width:719px){
  .hero{height:auto;min-height:0;overflow:clip}
  .hero-in{display:block;height:auto;padding-top:20px;padding-bottom:0}
  .hero-in .hsum{margin-top:40px}
  .hero .hs-rows::before,.hero .hs-rows::after{top:calc(var(--fs) * -1.4)}
  .now{margin-top:18px;padding-bottom:4px}
  .issues{padding-top:44px}
  .issues .sh{margin-bottom:20px}
}

/* =================== the house =================== */
/* the head: the page's own contents, set as a sum. Four sections, 1 + 2 + 3 + 4, and the answer is the name */
.toc{margin-top:36px;font-size:clamp(22px,5.8vw,26px);font-feature-settings:"tnum" 1,"lnum" 1}
.toc ol{list-style:none}
.toc a{display:grid;grid-template-columns:.8em 1.3em auto;align-items:baseline;justify-content:start;min-height:40px;padding:3px 0;line-height:1.2}
.toc .op{grid-column:1;font-weight:380}
.toc .n{grid-column:2;font-weight:480;line-height:1.2;text-align:right}
.toc .t{grid-column:3;margin-left:22px;font-size:16.5px;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.toc a:hover .t,.toc a:focus-visible .t{background-size:100% 1px}
.toc-r{display:block;width:2.1em;height:max(1.5px,.055em);background:var(--ink);margin:6px 0 4px}
@media (min-width:1000px){
  .hh .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:end}
  .hh h1,.hh p{grid-column:1}
  .hh .toc{grid-column:2;grid-row:1/3;margin:0;padding-bottom:6px}
}

/* who we are, and the rules */
.bio-body .sig{color:var(--ink)}
.sh + .rules{margin-top:0}

/* where it comes from: the makers by name, one to a line */
.hands{border-top:1.5px solid var(--ink)}
.hands > div{display:grid;gap:4px;padding:16px 0 20px;border-bottom:1px solid var(--rule)}
.hands dt{font-size:15px;font-weight:500;color:var(--mute)}
.hands dd b{display:block;font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;font-size:clamp(28px,7.4vw,48px);line-height:1.06;letter-spacing:-.018em}
.hands dd span{display:block;margin-top:6px;font-size:16.5px;color:var(--mute)}
.hands .hands-k{grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:12px 0 13px}
.hands .hands-k dt{font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;color:var(--ink)}
.hands .hands-k dd{font-size:15px;font-weight:600}
.hands-more{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:18px;color:var(--mute)}
.hands-more .link,.nm-t .link{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:16.5px;font-weight:500;color:var(--ink)}
@media (min-width:1000px){
  .hands > div{grid-template-columns:3fr 9fr;gap:40px;align-items:baseline;padding:22px 0 26px}
  .hands dt{text-align:right}
  .hands .hands-k{grid-template-columns:3fr 9fr;gap:40px;padding:14px 0 15px}
  .hands-more{margin-left:calc((100% - 40px) / 4 + 40px)}
}

/* what arrives: the box, drawn as an exploded view, and a key to it. The layers sit closed in the box until the
   figure is scrolled up into view, then lift apart, transform only (without scroll timelines they're simply apart) */
.arr{margin-top:64px;display:grid;grid-template-areas:"h" "s" "f" "l" "o";border-top:1.5px solid var(--ink);padding-top:16px}
.arr h3{grid-area:h;font-weight:650;font-size:clamp(26px,7vw,36px);line-height:1;letter-spacing:-.03em}
.arr-sub{grid-area:s;margin-top:8px;font-family:var(--serif);font-variation-settings:"opsz" 20;font-size:18.5px;color:var(--mute)}
.arr-fig{grid-area:f;margin:28px auto 8px;width:100%;max-width:520px}
.arr-fig svg{display:block;width:100%;height:auto;overflow:visible}
.arr-list{grid-area:l;list-style:none;counter-reset:a;border-top:1px solid var(--ink);margin-top:20px}
.arr-list li{display:grid;grid-template-columns:2.1em minmax(0,1fr);column-gap:8px;padding:13px 0 15px;border-bottom:1px solid var(--rule);counter-increment:a}
.arr-list li::before{content:counter(a);grid-row:1/3;font-weight:480;font-size:22px;line-height:1.1;font-feature-settings:"tnum" 1}
.arr-list b{font-weight:640;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.arr-list span{font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:17px;line-height:1.42;color:var(--mute);max-width:40ch}
.arr-foot{grid-area:o;margin-top:14px;font-size:15px;color:var(--mute)}
/* the drawing: ink lines, paper faces lit from the upper left */
.xv path,.xv circle,.xv ellipse,.xv rect{stroke:var(--ink);stroke-width:1.15px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.xv .f-t{fill:var(--sheet)}
.xv .f-l{fill:#EAE6DC}
.xv .f-r{fill:#DDD8CB}
.xv .f-in{fill:#E3DED2}
.xv .f-li{fill:#E8E3D8}
.xv .f-ri{fill:#D6D0C2}
.xv .fold{fill:none;stroke:var(--mute);stroke-width:.75px}
.xv .str{fill:none;stroke-width:1.3px}
.xv .knot{fill:var(--ink)}
.xv .pn{fill:none;stroke-width:.8px}
.xv .stp{fill:none;stroke-width:1.6px}
.xv .hd{fill:none;stroke-width:2.2px}
.xv .tx{fill:none;stroke:var(--mute);stroke-width:.8px}
.xv .d-f{fill:var(--ink);stroke:none}
.xv .d-e{fill:#4A4640;stroke:none}
.xv .co circle{fill:var(--ink);stroke:none}
.xv .co path{fill:none;stroke-width:.75px}
.xv .co .axis{stroke:var(--mute);stroke-width:.75px;stroke-dasharray:14 4 2 4}
.xv .co text{font:480 17px var(--sans);font-feature-settings:"tnum" 1;fill:var(--ink)}
@supports (animation-timeline:view()){
  .arr-fig{view-timeline:--arr}
  .xv .ly{animation:xv-open linear both;animation-timeline:--arr;animation-range:entry 30% cover 50%}
  .xv .co{animation:xv-co linear both;animation-timeline:--arr;animation-range:entry 30% cover 50%}
}
@keyframes xv-open{from{transform:translateY(var(--dy));animation-timing-function:cubic-bezier(.3,.1,.2,1)}to{transform:none}}
@keyframes xv-co{0%,72%{opacity:0}100%{opacity:1}}
@media (min-width:1000px){
  .arr{margin-left:calc((100% - 40px) / 4 + 40px);grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"h f" "s f" "l f" "o f";column-gap:56px;padding-top:18px}
  .arr-fig{margin:10px 0 0;justify-self:end;max-width:540px}
  .arr-list{align-self:end;margin-top:32px}
}

/* the name: the sum, small, and the story beside it */
.nm{display:grid;gap:36px}
.nm .hsum{max-width:300px;overflow:clip;padding-top:10px}
.nm .hs-rows::before,.nm .hs-rows::after{top:calc(var(--fs) * -.9);background:linear-gradient(to bottom,rgba(217,212,200,0),var(--rule) 40%)}
.nm-t{display:grid;gap:14px;justify-items:start;max-width:40ch}
.nm-big{font-family:var(--serif);font-variation-settings:"opsz" 48;font-size:clamp(28px,7.4vw,44px);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.nm-t p:not(.nm-big){font-size:18px;line-height:1.5}
@media (min-width:1000px){
  .nm{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:end}
  .nm .hsum{grid-column:1;grid-row:1;max-width:460px}
  .nm-t{grid-column:2;grid-row:1}
}

/* the way on */
.hn-in{border-top:1.5px solid var(--ink);padding-top:22px;display:grid;gap:16px;justify-items:start}
.hn-t{font-family:var(--serif);font-variation-settings:"opsz" 60;font-size:clamp(36px,9.6vw,72px);line-height:1.02;letter-spacing:-.026em}
.hn-p{font-size:18px;line-height:1.5;max-width:34ch}
.hn .btn{margin-top:8px}
@media (min-width:1000px){
  .hn-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:end}
  .hn-t{grid-row:1/3}
  .hn-p,.hn .btn{grid-column:2}
}

/* the foot: the same hairline as the bar on hover, and the colophon kept small */
.foot-row nav{align-items:baseline}
.foot-row nav a{background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 1px no-repeat;transition:background-size .35s var(--ease)}
.foot-row nav a:hover,.foot-row nav a:focus-visible,.foot-row nav a[aria-current="page"]{background-size:100% 1px}
.foot-row nav .foot-colo{font-size:14px;font-weight:400;color:var(--mute)}

/* =================== the colophon =================== */
/* the mark, part by part: a specimen on the sheet, the words under it */
.cg{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cg > figure{margin:0;background:var(--paper);display:grid;grid-template-rows:auto 1fr;min-width:0}
.cg-s{--h:200px;position:relative;height:var(--h);background:var(--sheet);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--rule);overflow:hidden}
.cg figcaption{padding:18px 18px 24px;display:grid;gap:8px;align-content:start}
.cg h3{font-weight:640;font-size:19px;line-height:1.2}
.cg p{font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:17px;line-height:1.42;color:var(--mute);max-width:46ch}
.cg .link{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink)}
.cg-name .wm{width:min(100%,620px);color:var(--ink)}
.cg-disc .disc{width:108px;height:108px;color:var(--ink)}
/* one red: the O and its carried 1, close up (the whole name is 8.4 times as wide as it is tall; the O's middle is 79% along) */
.cg-zoom .wm{position:absolute;width:calc(var(--h) * .8 * 8.397);height:calc(var(--h) * .8);max-width:none;top:calc(var(--h) * .1);left:calc(50% - var(--h) * .8 * 8.397 * .787);clip-path:inset(-10% 16.3% -10% 74.9%)}   /* only the O and its 1: the letters either side are cut away */
.cg-k{position:absolute;left:12px;bottom:10px;font:500 12.5px/1 var(--mono);letter-spacing:.04em;color:var(--mute)}
.ty{display:grid;gap:8px;justify-items:start}
.ty-a{font-weight:600;font-size:28px;line-height:1.1;letter-spacing:-.02em}
.ty-b{font-family:var(--serif);font-variation-settings:"opsz" 36;font-size:31px;line-height:1.1;letter-spacing:-.01em}
.ty-c{font-family:var(--mono);font-size:19px;line-height:1.3;letter-spacing:.02em}
.cg-iss .cbox{width:64px;flex:none}
@media (min-width:720px){
  .cg{grid-template-columns:repeat(2,1fr)}
  .cg-name{grid-column:1/-1}
  .cg-s{--h:240px}
  .cg figcaption{padding:22px 28px 30px}
  .cg-iss .cbox{width:72px}
}
@media (min-width:1000px){
  .cg{grid-template-columns:repeat(3,1fr)}
  .cg-name{grid-column:span 2}
}
#bracket .lk-zoom{margin-top:24px}
.lk-zoom > div > span{background:var(--sheet);padding:2px 5px;left:6px;bottom:6px}
.lk-zoom > div > span i{font-style:normal}
@media (max-width:719px){ .lk-zoom > div > span i{display:none} }