/* MUUS 2027 release: one stylesheet for every page outside the worlds home.
   Worlds palette: Bone and Off White to read, misty off black and Teal to feel, Black Gray type, Little Blue as the one accent.
   Switzer 700 for headlines, IBM Plex Mono for labels. No dashes in copy; no prices anywhere. */
@font-face{font-family:AX;src:url(/assets/27r/archivo-x800-2f3cf502.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Switzer;src:url(/assets/worlds/fonts/switzer-vf-1029.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/worlds/fonts/plex-mono-500-1029.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--hd:rgb(230 228 223 / .9);--ice:#A2CFE7;--blue-hi:#C6E0EC;--night2:#15161A;--on-ice:#1A1C20;--bone:#E6E4DF;--white:#F2F0EF;--mist:#1B1A19;--teal:#4C6067;--ink:#1A1C20;--blue:#B2D5E5;--black:#0A0B0D;--navy:#1F2634;--deep:#2F6F95;--steel:#637882;--ink2:rgb(26 28 32 / .72);--line:rgb(26 28 32 / .16);
  --pad:clamp(16px,4vw,48px);--max:1320px;--ease:cubic-bezier(.2,.7,.1,1);--mono:500 12px/1.5 "IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bone);color:var(--ink);font:400 17px/1.5 Switzer,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;z-index:50;width:auto;height:auto;clip:auto;padding:10px 14px;background:var(--bone);color:var(--ink);outline:2px solid var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font:var(--mono);letter-spacing:.14em;text-transform:uppercase}
/* the dark grounds (Jacob 8:21 PM: "black background, our work, MUUS worlds"). Black and misty off black, navy for the numbers.
   Little Blue stays an accent: buttons, the dot, hairlines, never a section ground. Reading pages stay on Bone. */
.dark,.night,.navy,.band,.xhero{color:var(--bone);--ink2:rgb(230 228 223 / .76);--line:rgb(230 228 223 / .18)}
.dark{background:var(--mist)}.night{background:var(--black)}.navy{background:var(--navy)}
:is(.dark,.night,.navy,.band,.xhero) :focus-visible{outline-color:var(--blue)}
:is(.dark,.night,.navy,.band,.xhero) .media{background:rgb(255 255 255 / .05)}

/* header: the wordmark is the one logo on these pages */
.hd{position:sticky;top:0;z-index:20;background:var(--hd);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:20px;height:60px;max-width:none}
.logo{display:block;color:var(--ink)}
.logo svg{height:18px;width:auto;display:block}
.nav{display:none;gap:26px;margin-left:auto}
.nav a{font-weight:600;font-size:15px;text-decoration:none;padding:6px 0}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:var(--blue);color:var(--on-ice);font:600 14px/1 Switzer,sans-serif;text-decoration:none;white-space:nowrap}
.hd .pill{margin-left:auto}
/* one filled Book a call on screen: the header pill steps back to a hairline while the page's own is in view (site.js) */
.pill{transition:background-color .2s,color .2s,box-shadow .2s}
.yield .pill{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.blue{transition:background-color .2s,border-color .2s,color .2s}
.yield-ft .btn.blue[data-book]{background:none;border-color:currentColor;color:inherit}
.menu-btn{appearance:none;border:1px solid var(--ink);background:none;color:var(--ink);height:38px;padding:0 14px;border-radius:999px;font:var(--mono);letter-spacing:.14em;cursor:pointer}
.menu{position:fixed;inset:0;z-index:40;background:var(--bone);padding:84px var(--pad) 32px;display:none;overflow:auto}
.menu[data-open]{display:block}
.menu ul{list-style:none;margin:0;padding:0}
.menu>ul>li>a{display:block;font:700 34px/1.15 Switzer,sans-serif;letter-spacing:-.03em;text-decoration:none;padding:6px 0}
.menu .sub{display:flex;flex-wrap:wrap;gap:8px 16px;margin:2px 0 10px}
.menu .sub a{font:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.menu .close{position:absolute;right:var(--pad);top:13px}
.menu .foot{margin-top:28px;display:grid;gap:10px}
@media (min-width:900px){.nav{display:flex}.hd .pill{margin-left:0}.menu-btn{display:none}}

.crumb{padding-top:22px;padding-bottom:24px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumb li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumb a{text-decoration:none}

/* type */
h1,.h1{font:800 clamp(30px,7.4vw,100px)/.92 AX,Switzer,sans-serif;letter-spacing:-.02em;text-transform:uppercase;margin:0;text-wrap:balance;overflow-wrap:normal;hyphens:none}
h2,.h2{font:800 clamp(24px,4.2vw,56px)/.95 AX,Switzer,sans-serif;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 18px;text-wrap:balance;hyphens:none}
h3{font:700 22px/1.1 Switzer,sans-serif;letter-spacing:-.02em;margin:0 0 6px}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.45;max-width:38em;color:var(--ink2);margin:18px 0 0}
.kick{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.kick::before{content:"";width:22px;height:1px;background:currentColor}
section{padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(56px,9vw,120px)}
.hero{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(40px,6vw,80px)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:999px;border:1px solid currentColor;font:600 16px/1 Switzer,sans-serif;text-decoration:none;background:none;color:inherit;cursor:pointer}
.btn.blue{background:var(--blue);border-color:var(--blue);color:var(--on-ice)}

/* media */
.media{position:relative;overflow:hidden;border-radius:18px;background:rgb(0 0 0 / .06)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.r169{aspect-ratio:16/9}.r45{aspect-ratio:4/5}.r32{aspect-ratio:3/2}.r11{aspect-ratio:1}
.cap{font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-top:8px}
.bleed{margin:0 calc(var(--pad) * -1)}
@media (min-width:900px){.bleed{margin:0}}

/* grids and cards */
.grid{display:grid;gap:clamp(14px,2vw,24px)}
@media (min-width:700px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid>*{min-width:0}
.card{display:block;text-decoration:none;color:inherit}
.card .t{font:700 20px/1.1 Switzer,sans-serif;letter-spacing:-.02em;margin-top:12px}
.card .m{font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.card:hover .media img{transform:scale(1.02)}
.media img{transition:transform .6s var(--ease)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.rows a,.rows .row{display:grid;grid-template-columns:1fr;gap:6px 16px;padding:16px 0;text-decoration:none;align-items:baseline}
@media (min-width:700px){.rows a,.rows .row{grid-template-columns:minmax(0,1fr) minmax(0,38%)}}
.rows .t{font:700 clamp(20px,2.6vw,30px)/1.1 Switzer,sans-serif;letter-spacing:-.025em}
.rows .m{font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
@media (min-width:700px){.rows .m{text-align:right}}
.rows .d{grid-column:1 / -1;color:var(--ink2);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips a,.chips span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.chips a:hover{border-color:currentColor}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:s}
@media (min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{border-top:1px solid var(--line);padding-top:14px}
.steps li::before{counter-increment:s;content:"0" counter(s);font:var(--mono);letter-spacing:.14em;display:block;margin-bottom:8px;color:var(--ink2)}
.steps p,.list p{margin:0;color:var(--ink2);font-size:15px}
.list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.list li{padding:14px 0;border-bottom:1px solid var(--line)}

/* numbers: each with its source */
.nums{display:grid;gap:26px 22px;grid-template-columns:repeat(2,minmax(0,1fr));--colw:calc((100vw - 2 * var(--pad) - 22px) / 2)}
@media (min-width:900px){.nums{grid-template-columns:repeat(4,minmax(0,1fr));--colw:calc((min(100vw, var(--max)) - 2 * var(--pad) - 66px) / 4)}}
.num b{display:block;font:700 clamp(44px,6.4vw,84px)/.9 Switzer,sans-serif;font-size:min(clamp(44px,6.4vw,84px),calc(var(--colw) / (var(--len, 4) * .6)));letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap} /* --len from the build: a long number shrinks to fit its column */
.num span{display:block;font:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;margin-top:8px}
.num small{display:block;font:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink2);margin-top:6px;text-transform:none}

/* quotes */
.quote{margin:0}
.quote p{font:700 clamp(24px,3.4vw,44px)/1.12 Switzer,sans-serif;letter-spacing:-.03em;margin:0;text-wrap:balance}
.quote footer{margin-top:16px}

/* the Range rail */
.range{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 18px;margin:0 calc(var(--pad) * -1);scrollbar-width:none}
.range::-webkit-scrollbar{display:none}
.range a{flex:0 0 min(74vw,340px);scroll-snap-align:start;text-decoration:none;color:var(--bone)}
.range .media{aspect-ratio:4/5;border-radius:16px}
.range .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(10 11 13 / .92),rgb(10 11 13 / .62) 48%,rgb(10 11 13 / 0) 78%)}
.range .over{position:absolute;left:16px;right:16px;bottom:16px;z-index:1}
.range .over b{display:block;font:700 30px/.95 Switzer,sans-serif;letter-spacing:-.035em;margin:6px 0 8px}
.range .over p{margin:0;font-size:15px;line-height:1.35}
.bar{height:2px;background:rgb(230 228 223 / .2);margin-top:10px;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--blue);transition:transform .2s linear}

/* the partner wall: 4 across, 8 from 1100; a short last row sits centred, and each tile draws its own hairline (the ring
   fills the 1px gap) so the lines stay whole around it. held work out (NOVA 30 Oct) left 31 tiles, which no column count divides. */
.wall{--wc:4;display:flex;flex-wrap:wrap;justify-content:center;gap:1px;padding:1px}
@media (min-width:1100px){.wall{--wc:8}}
.wall>a,.wall>span{flex:0 0 calc((100% - (var(--wc) - 1) * 1px) / var(--wc));box-shadow:0 0 0 1px var(--line);min-width:0;display:grid;place-items:center;min-height:clamp(72px,12vw,120px);background:var(--bone);padding:16px;text-decoration:none}
@media (max-width:699px){.wall>a,.wall>span{padding:12px 10px}}
.wall img{max-width:100%;height:auto;min-width:0;filter:brightness(0);opacity:.84} /* width and height come from the build: equal area per mark */
.wall .name{font:600 12px/1.15 Switzer,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;opacity:.84}
.wall a:hover{background:var(--white)}

/* sentence filter on /work */
.sentence{font:700 clamp(24px,3.6vw,46px)/1.25 Switzer,sans-serif;letter-spacing:-.03em;margin:24px 0 0}
.sentence select{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;border-bottom:2px solid var(--blue);padding:0 4px;max-width:100%;cursor:pointer}
.sentence select:focus-visible{outline-offset:2px}
.count{margin-top:14px}
.hide{display:none!important}

/* forms (the funnel module attaches to data-form) */
.form{display:grid;gap:14px;max-width:640px}
.form label{display:grid;gap:6px;font:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.form input,.form textarea,.form select{font:400 17px/1.4 Switzer,sans-serif;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice label{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font:var(--mono);font-size:12px}
.choice input{width:auto;margin:0}
.embed{border:0;width:100%;height:760px;border-radius:16px;background:var(--white)}

/* clocks and the live dot */
.clocks{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.live{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;animation:live 2.4s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgb(178 213 229 / .6)}70%,100%{box-shadow:0 0 0 10px rgb(178 213 229 / 0)}}

/* the book band and the footer: no logo, the mono line only */
.band{background:var(--black);text-align:left}
.band .h2{max-width:14ch}
/* the footer: a second homepage, the same on every page. Literal values, because the home reuses it scoped under .st */
.ft{background:var(--mist);color:var(--bone);border-top:1px solid rgb(230 228 223 / .14);padding:clamp(44px,6vw,80px) 0 32px;font:400 15px/1.45 Switzer,sans-serif}
.ft-in{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px);display:grid;gap:clamp(36px,4.5vw,56px)}
.ft-k{font:500 12px/1.5 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgb(230 228 223 / .72)}
.ft a{color:inherit;text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:4px}
.ft :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ft-top{display:grid;gap:28px;align-items:end}
@media (min-width:900px){.ft-top{grid-template-columns:1fr auto}}
.ft-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.ft .ft-book{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:999px;background:var(--blue);color:var(--ink);font:600 17px/1 Switzer,sans-serif;text-decoration:none}
.ft .ft-book:hover{background:var(--blue-hi);text-decoration:none}
.ft .ft-link{display:inline-flex;align-items:center;min-height:44px;font:600 16px/1.2 Switzer,sans-serif;text-decoration:underline;text-decoration-color:rgb(230 228 223 / .45);text-underline-offset:5px}
.ft .ft-mail{font-weight:500}
.ft-studios{margin:0;display:grid;gap:6px}
.ft-studios b{font:600 clamp(18px,2vw,22px)/1.2 Switzer,sans-serif;letter-spacing:-.01em}
.ft-studios .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:10px;vertical-align:1px}
.ft-logos{list-style:none;margin:0;padding:24px 0;border-top:1px solid rgb(230 228 223 / .14);border-bottom:1px solid rgb(230 228 223 / .14);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;align-items:center;justify-items:center}
@media (min-width:900px){.ft-logos{grid-template-columns:repeat(8,minmax(0,1fr))}}
.ft-logos a{display:grid;place-items:center;min-height:44px}
.ft-logos img{display:block;max-width:100%;height:auto;filter:brightness(0) invert(1);opacity:.8}
.ft-nums{margin:0;display:grid;gap:22px}
@media (min-width:700px){.ft-nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ft-nums div{border-top:1px solid rgb(230 228 223 / .18);padding-top:14px}
.ft-nums dt{font:700 clamp(44px,5.6vw,76px)/.95 Switzer,sans-serif;letter-spacing:-.04em}
.ft-nums dd{margin:10px 0 0;color:rgb(230 228 223 / .76);max-width:26ch}
.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
@media (min-width:900px){.ft-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ft-cols h2{margin:0 0 10px}
.ft-cols ul{list-style:none;margin:0;padding:0;display:grid}
.ft-cols a{display:inline-block;padding:6px 0;font-size:16px}
.ft-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;border-top:1px solid rgb(230 228 223 / .14);padding-top:20px}
.ft-base a{display:inline-block;padding:6px 0}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.live{animation:none}.media img{transition:none}}
.prose{max-width:40em;font-size:19px;line-height:1.62}
.prose p{margin:0 0 20px}
.prose .sub{font-size:clamp(24px,3vw,36px);margin:44px 0 14px}
.prose .list{margin:8px 0 24px}
.prose .quote{margin:36px 0}
.fact{margin:30px 0}
.h1.art{font-size:clamp(36px,6vw,84px)}
.check li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:12px;vertical-align:2px}
/* the booking picker (assets/27r/booker.js): pick a day, then a time, then Google confirms on the live MUUS calendar */
.bk-cal{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(16px,3vw,28px);max-width:720px}
.prog ol{list-style:none;margin:0 0 6px;padding:0;display:flex;gap:16px;font:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.prog li[aria-current]{color:var(--ink)}.prog li.is-done{text-decoration:line-through}
.prog-n{font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;color:var(--ink2)}
.pick .chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);font:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.pick .chip:disabled{opacity:.35;cursor:default}
.pick .chip[aria-pressed=true]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pick-read,.pick-note{font-size:15px;color:var(--ink2);margin:0 0 14px}
.pick-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.pick-nav p{margin:0;font:600 15px/1.2 Switzer,sans-serif}.pick-nav div{display:flex;gap:8px}
.pick-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:16px}
.pick-days>span{font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-align:center}
.pick-days button{appearance:none;border:1px solid var(--line);background:none;border-radius:12px;padding:10px 4px;cursor:pointer;color:var(--ink);display:grid;gap:2px;justify-items:center}
.pick-days button small{font:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;min-height:1em}
.pick-days button b{font:700 20px/1 Switzer,sans-serif}
.pick-days button:disabled{opacity:.3;cursor:default}
.pick-days button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} /* the chosen day is an outline, never a filled block (round 2 fix 3) */
.pick .pick-main{display:flex;width:100%;min-height:52px;margin:0 0 16px;border:1.5px solid var(--ink);font:600 16px/1 Switzer,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none}
.pick-times{display:flex;flex-wrap:wrap;gap:8px}
.pick-chosen .lab{font:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:0}
.pick-day{font:700 clamp(26px,4vw,40px)/1 Switzer,sans-serif;letter-spacing:-.03em;margin:8px 0 0}
.pick-time{font:700 clamp(40px,7vw,72px)/1 Switzer,sans-serif;letter-spacing:-.04em;margin:4px 0}
.pick-tz{font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:0 0 18px}
.pick-go{margin-bottom:12px}.pick .link{appearance:none;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit}
.prefer{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;letter-spacing:.08em}
.prefer .email{text-transform:none;letter-spacing:.02em;user-select:all;-webkit-user-select:all}
.copy{appearance:none;border:1px solid currentColor;background:none;color:inherit;border-radius:999px;height:28px;padding:0 12px;font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.facts{margin:0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dd{overflow-wrap:anywhere}
.facts dt{font:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.facts dd{margin:0}

/* ---------- the dark system ---------- */
body.night{background:var(--black);color:var(--bone);--ink2:rgb(230 228 223 / .76);--line:rgb(230 228 223 / .18)}
body.night :focus-visible{outline-color:var(--blue)}
.top-dark .hd{background:rgb(10 11 13 / .86);color:var(--bone);border-bottom-color:rgb(230 228 223 / .12)}
.top-dark .hd .logo,.top-dark .hd .brand,.top-dark .hd .nav a{color:var(--bone)}
.top-dark .hd .menu-btn{border-color:var(--bone);color:var(--bone)}
.top-dark .crumbbar{background:var(--black);color:rgb(230 228 223 / .8)}
.top-dark .crumbbar :focus-visible{outline-color:var(--blue)}
/* a band with a full bleed frame or a MUUS Worlds render behind it: the media sits in [data-media] so motion can attach */
.has-media{position:relative;isolation:isolate;overflow:hidden}
.bg-media{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bg-media picture,.bg-media img,.bg-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-media::after{content:"";position:absolute;inset:0}
.band .bg-media::after{background:linear-gradient(to bottom,var(--black) 30%,rgb(10 11 13 / .55) 70%,rgb(10 11 13 / .35))}
.navy .bg-media::after{background:linear-gradient(to bottom,rgb(31 38 52 / .96) 0%,rgb(31 38 52 / .82) 55%,rgb(31 38 52 / .7))}
@media (min-width:900px){
  .band .bg-media::after{background:linear-gradient(to right,var(--black) 32%,rgb(10 11 13 / .5) 62%,rgb(10 11 13 / .2))}
  .navy .bg-media::after{background:linear-gradient(to right,rgb(31 38 52 / .97) 30%,rgb(31 38 52 / .78) 70%,rgb(31 38 52 / .62))}
}
/* the first screen of an image led page: the work full bleed, the type over it */
.xhero{position:relative;isolation:isolate;background:var(--black);overflow:hidden;padding:0}
.xhero-media{position:relative;width:100%;aspect-ratio:4/5;max-height:74svh;background:var(--black)}
.xhero--wide .xhero-media{aspect-ratio:16/9}
.xhero-media picture,.xhero-media img,.xhero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xhero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--black) 4%,rgb(10 11 13 / .6) 26%,rgb(10 11 13 / 0) 52%)}
.xhero-copy{position:relative;z-index:1;margin-top:-22vw;padding-bottom:clamp(44px,7vw,96px)}
.xhero--wide .xhero-copy{margin-top:-8vw}
.xhero .lede{color:rgb(230 228 223 / .88)}
.xhero .kick{color:rgb(230 228 223 / .9)}
.xhero .logo-on{display:block;height:34px;width:auto;margin-bottom:20px;filter:brightness(0) invert(1)}
@media (min-width:900px){
  .xhero{min-height:min(calc(100svh - 112px),940px);display:flex;flex-direction:column;justify-content:flex-end}
  .xhero-media,.xhero--wide .xhero-media{position:absolute;inset:0;aspect-ratio:auto;max-height:none}
  .xhero-media::after{background:linear-gradient(to top,rgb(10 11 13 / .95) 0%,rgb(10 11 13 / .66) 34%,rgb(10 11 13 / .12) 64%),linear-gradient(to right,rgb(10 11 13 / .78) 0%,rgb(10 11 13 / .42) 48%,rgb(10 11 13 / 0) 74%)}
  .xhero-copy,.xhero--wide .xhero-copy{margin-top:0;width:100%;padding-top:28svh}
  .xhero .lede{max-width:34em}
}
/* the wall on a dark ground: the same one tone, reversed */
:is(.dark,.night,.navy) .wall{background:none}
:is(.dark,.night,.navy) .wall>a,:is(.dark,.night,.navy) .wall>span{background:var(--black)}
:is(.dark,.night,.navy) .wall img{filter:brightness(0) invert(1);opacity:.86}
:is(.dark,.night,.navy) .wall a:hover{background:var(--night2)}
/* the picker's space is held before the open times land, so nothing below it jumps (CLS 0) */
.pick{min-height:258px}
@media (min-width:700px){.pick{min-height:236px}}

/* the long title under a 2 to 6 word display headline (journal, guides) */
.dek{font:500 clamp(18px,2.2vw,26px)/1.3 Switzer,sans-serif;letter-spacing:-.01em;margin:18px 0 0;max-width:34ch;text-transform:none}

/* case pages as scrollytelling (jury fix 12, 30 Oct): the frames run full bleed and pin, each one sliding over the last as
   you scroll; the results band pins and its numbers rise one by one with the scroll. Scroll driven only, never a timer;
   reduced motion and browsers without scroll timelines get the frames stacked and the numbers shown */
.sx{padding:0!important;position:relative;background:var(--black)}
.sx-f{position:sticky;top:0;margin:0;height:min(100svh,100vw);overflow:hidden;background:var(--black)}
.sx-f picture,.sx-f img{display:block;width:100%;height:100%;object-fit:cover}
.sx-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}.sx-film video.on{opacity:1}
.sx-f figcaption{position:absolute;left:var(--pad);bottom:22px;color:var(--bone);text-shadow:0 1px 12px rgb(10 11 13 / .7)}
@media (min-width:700px){.sx-f{height:100svh}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    body.night #results{min-height:180svh;view-timeline-name:--res;overflow:clip}
    body.night #results>.wrap{position:sticky;top:max(64px,14svh)}
    body.night #results .num{animation:num-in linear both;animation-timeline:--res;animation-range:contain 0% contain 30%}
    body.night #results .num:nth-child(2){animation-range:contain 10% contain 40%}
    body.night #results .num:nth-child(3){animation-range:contain 20% contain 50%}
    body.night #results .num:nth-child(4){animation-range:contain 30% contain 60%}
    body.night #results .num:nth-child(n+5){animation-range:contain 40% contain 70%}
    @keyframes num-in{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
  }
}

/* every section alive (30 Oct 2026, site.js): .al waits below the first screen, .al-in has risen (once), .al-view is in view,
   and full width stills and films (.al-br) breathe inside their own frame while their section is in view */
@keyframes al-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes al-breathe{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes al-lift{from{transform:translateY(18px)}to{transform:none}}
.al-lift>:not([data-media]):not(picture):not(video):not(img){animation:al-lift 1.1s cubic-bezier(.2,.7,.2,1) both}   /* the words lift; the hero's picture stays put */
.al:not(.al-in)>*{opacity:0}
.al.al-in>*{animation:al-rise .9s cubic-bezier(.2,.7,.2,1) both}
.al.al-in>*:nth-child(2){animation-delay:.1s}.al.al-in>*:nth-child(3){animation-delay:.2s}.al.al-in>*:nth-child(n+4){animation-delay:.3s}
.al-clip{overflow:hidden}
.al-view .al-br{animation:al-breathe 18s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.al>*,.al-lift>*{opacity:1!important;animation:none!important}.al-br{animation:none!important}}

/* the case told step by step (jury round 3): .sy-media is pinned full bleed for the whole story, its frames stacked; the
   steps scroll over it, one screen each, and site.js lights the frame of the step in view (.on) and counts the result up */
.sy{position:relative;background:var(--black);padding:0!important}
.sy-media{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0}
.sy-f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--ease),transform 6s var(--ease);transform:scale(1.06)}
.sy-f.on{opacity:1;transform:none}
.sy-f picture,.sy-f img{display:block;width:100%;height:100%;object-fit:cover}
.sy-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 11 13 / 0) 30%,rgb(10 11 13 / .55) 100%)}
.sy-steps{list-style:none;margin:-100svh 0 0;padding:0;position:relative;z-index:1}
.sy-s{min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--pad) calc(var(--pad) + 40px)}
.sy-s:first-child{padding-top:30svh}.sy-s:last-child{min-height:110svh}
.sy-card{max-width:560px;padding:24px 24px 26px;background:rgb(10 11 13 / .78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--bone);border-top:1px solid rgb(162 207 231 / .5);opacity:.35;transform:translateY(24px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.sy-s.on .sy-card{opacity:1;transform:none}
.sy-card .kick{color:var(--ice)}
.sy-t{margin:0;font-size:20px;line-height:1.45}
.sy-big{font:700 clamp(28px,4.2vw,52px)/1.05 Switzer,sans-serif;letter-spacing:-.02em}
.sy-made{list-style:none;margin:0;padding:0;font-size:18px;line-height:1.4}.sy-made li{padding:10px 0;border-bottom:1px solid rgb(230 228 223 / .18)}
.sy-made a{color:inherit;text-decoration:underline;text-decoration-color:rgb(162 207 231 / .6);text-underline-offset:4px;display:inline-block;min-height:24px}
.sy-num .num b{font-size:min(clamp(64px,12vw,148px),calc(min(100vw - 112px,488px) / (var(--len, 4) * .6)))}.sy-num .num span{color:var(--bone)} /* a long value (2020 to 2022) shrinks to fit the card */
@media (max-width:699px){.sy-f{bottom:auto;height:min(125vw,60svh)}.sy-f:after{content:'';position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(180deg,rgb(10 11 13 / 0),var(--black))}.sy-media:after{display:none}.sy-s{padding-bottom:calc(var(--pad) + 72px)}.sy-card{background:rgb(10 11 13 / .92)}}
@media (min-width:900px){.sy-s{align-items:center;padding-bottom:0}.sy-card{padding:32px 36px 34px}}
.sy.al>.sy-media{opacity:1!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.sy-f,.sy-card{transition:none!important;transform:none!important}.sy-card{opacity:1}}

/* /work: the wall of work, its filter chips and the quick view sheet (Jacob 30 Oct 11:46 AM) */
.wall-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.wall-chips{display:flex;flex-wrap:wrap;gap:8px}
.wall-chips button{appearance:none;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:none;color:inherit;font:var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.wall-chips button[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.wall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(22px,2.4vw,34px) clamp(10px,1.6vw,20px)}
@media (min-width:700px){.wall-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.wall-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:block;text-decoration:none;color:inherit;min-width:0}
.tile[hidden]{display:none}
.tile .media{overflow:hidden;border-radius:10px;background:var(--black)}
.tile .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.tile .media video.on{opacity:1}
.tile .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.1,1),filter .6s var(--ease)}
.tile:hover .media img,.tile:focus-visible .media img{transform:scale(1.045)}
.tile-play{position:absolute;right:10px;top:10px;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);background:rgb(10 11 13 / .45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .4s}
.tile.playing .tile-play{opacity:0}
.tile .t{font:700 18px/1.1 Switzer,sans-serif;letter-spacing:-.02em;margin-top:12px}
.tile .m{font:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-top:4px}
.tile-n{font:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.tile-n b{font:700 15px/1 Switzer,sans-serif;letter-spacing:-.01em;color:var(--ink);margin-right:4px}
.tile.f{grid-column:1/-1}
.tile.f .t{font-size:clamp(24px,3vw,40px);margin-top:16px}
@media (min-width:700px){.tile.f{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}.tile.f.r{grid-column:-3/-1}
.tile.f .media{flex:1;aspect-ratio:auto;min-height:0}}
.qv{border:0;padding:0;margin:auto 0 0;width:100%;max-width:none;max-height:92svh;border-radius:20px 20px 0 0;background:var(--bone);color:var(--ink);overflow:hidden}
@media (min-width:900px){.qv{margin:auto;width:min(1180px,92vw);max-height:90svh;border-radius:20px}}
.qv::backdrop{background:rgb(10 11 13 / .7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qv-bar{position:sticky;top:0;z-index:2;display:flex;gap:8px;justify-content:flex-end;padding:10px;background:inherit;border-bottom:1px solid var(--line)}
.qv-bar button{appearance:none;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:none;color:inherit;font:var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.qv-bar .qv-x{margin-left:auto}
.qv-body{max-height:calc(92svh - 65px);overflow:auto;overscroll-behavior:contain}
.qv-hero{background:var(--black);aspect-ratio:16/9}
.qv-hero video,.qv-hero img{width:100%;height:100%;object-fit:cover}
.qv-in{padding:clamp(20px,4vw,44px)}
.qv-in h2{margin-bottom:22px}
.qv-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 30px}
@media (min-width:900px){.qv-frames{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qv-frames img{border-radius:10px;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.qv-cols{display:grid;gap:28px}
@media (min-width:900px){.qv-cols{grid-template-columns:1fr 1fr;gap:56px}}
.qv-nums{display:grid;gap:14px}
.qv-nums .num b{font-size:clamp(34px,4vw,52px)}
.qv-credit{margin:30px 0 0;color:var(--ink2)}
.qv-open{overflow:hidden}

/* TOP POSTS: the posts as they lived on the feed, moving with the page scroll (posts.js) */
.tp{overflow:hidden}
.tp-row{display:flex;gap:clamp(14px,2vw,24px);width:max-content;padding:0 var(--pad);will-change:transform}
.tp-swipe .tp-row{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
.tp-post{flex:0 0 auto;width:min(70vw,300px);text-decoration:none;color:inherit;scroll-snap-align:start}
.tp-frame{border-radius:28px;padding:10px;background:rgb(255 255 255 / .06);border:1px solid rgb(230 228 223 / .16)}
.tp-top{display:flex;align-items:center;gap:8px;padding:6px 6px 10px;font-size:12px;letter-spacing:.06em;text-transform:none}
.tp-av{width:22px;height:22px;border-radius:50%;background:var(--steel)}
.tp-media{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--black)}
.tp-media img,.tp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp-media video{opacity:0;transition:opacity .6s var(--ease)}.tp-media video.on{opacity:1}
.tp-n{padding:14px 6px 4px}
.tp-n b{display:block;font:800 clamp(34px,4vw,48px)/1 AX,Switzer,sans-serif;letter-spacing:-.02em}
.tp-n span{display:block;font:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.tp-small{list-style:none;margin:6px 0 0;padding:0 6px 6px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink2)}
.tp-note{margin-top:22px;color:var(--ink2)}
/* a case page's one post (final QA 3 Nov, third pass, item 3): on a wide screen the frame sits on the headline's left edge and
   its numbers stand large beside it, so As it ran. fills the column instead of hanging left of it (posts.js leaves one post still) */
@media (min-width:900px){
.tp-row:has(>.tp-post:only-child){width:auto;max-width:var(--max);margin-inline:auto}
.tp-post:only-child{width:100%}
.tp-post:only-child .tp-frame{position:relative;isolation:isolate;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr auto auto 1fr;
  column-gap:clamp(48px,7vw,120px);background:none;border:0;border-radius:0}
.tp-post:only-child .tp-frame::before{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:320px;border-radius:28px;background:rgb(255 255 255 / .06);border:1px solid rgb(230 228 223 / .16)}
.tp-post:only-child .tp-top{grid-column:1;grid-row:1}
.tp-post:only-child .tp-media{grid-column:1;grid-row:2 / 6}
.tp-post:only-child .tp-n{grid-column:2;grid-row:3;padding:0}
.tp-post:only-child .tp-n b{font-size:clamp(88px,9vw,168px)}
.tp-post:only-child .tp-small{grid-column:2;grid-row:4;padding:0;margin-top:18px;font-size:14px}
}

/* THE LOGO: the new wordmark alone, its M the light switch and UUS the home link, flush so it reads as one logo; always taller
   than the nav type beside it (Jacob 30 Oct 12:12 PM) */
.brand{display:flex;align-items:center;gap:0;color:var(--ink)}
.brand .logo,.brand .st-word,.brand .word{display:block;color:inherit;padding:0}
.brand .wm-svg{display:block;height:21px;width:auto}
.emb{appearance:none;border:0;background:none;color:inherit;padding:11px 0;margin:-11px 0;cursor:pointer;display:block;border-radius:6px;min-width:26px}
.emb .emb-svg{display:block;height:21px;width:auto;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.emb.press .emb-svg{animation:emb-press .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes emb-press{0%{transform:scale(1)}35%{transform:scale(.82) translateY(1px)}100%{transform:scale(1)}}
.emb:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.ft-logo{display:inline-block;color:inherit}.ft-logo .wm-svg{display:block;height:28px;width:auto}
/* the theme change: the new theme grows from the emblem (theme.js); nothing else animates during it */
.vt-theme::view-transition-old(root),.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.emb.press .emb-svg{animation:none}}

/* DARK (Jacob 30 Oct 1:05 PM: "a dark and light mode"): the reading grounds, type, hairlines, sheets, forms, the picker and
   the cards flip; full bleed photos and films stay as they are; the Book a call pill stays Ice. Sections that are dark in
   both themes keep the light tokens for their own type. */
:root[data-theme="dark"]{color-scheme:dark;--hd:rgb(10 11 13 / .88)}
[data-theme="dark"] body{--bone:#0A0B0D;--white:#16181C;--ink:#F2F0EF;--ink2:rgb(242 240 239 / .74);--line:rgb(242 240 239 / .16);--mist:#121417}
[data-theme="dark"] :is(.dark,.night,.navy,.band,.xhero,.ft,.sy,.sx,.tp,.top-dark .hd,.top-dark .crumbbar){--bone:#E6E4DF;--white:#F2F0EF;--ink:#1A1C20}
[data-theme="dark"] .dark{background:#121417}
[data-theme="dark"] .media{background:rgb(255 255 255 / .05)}
[data-theme="dark"] :focus-visible{outline-color:var(--blue)}

/* Sake High! in 3D: the turntable box (assets/27r/spin/turntable.js); 4:5 on phones, 16:10 above 900 px */
.spin{position:relative;width:100%;aspect-ratio:4/5;max-height:78vh;margin:8px auto 0;background:radial-gradient(60% 55% at 50% 42%,var(--navy),var(--black));border-radius:18px;cursor:grab;user-select:none;touch-action:pan-y}
.spin:active{cursor:grabbing}
.spin-poster,.spin-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.spin-live .spin-poster{visibility:hidden}
.spin-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;margin-top:10px;border-top:1px solid var(--line)}
.spin-name{font:700 20px/1.2 Switzer,sans-serif}
@media (min-width:900px){.spin{aspect-ratio:16/10}}

/* media held back until it is near (data-src, data-sy-src) has no source yet: never show the browser broken image icon */
img:not([src]):not([srcset]){visibility:hidden}