:root{
  --sky:#6bb4ee;--sky-2:#7dbdf0;--navy:#0e1822;--navy-2:#1a2835;--white:#fff;--white-2:#eef6fd;
  --accent:#ff5a1f;--accent-ink:#0e1822;
  --display:"Fraunces",Georgia,"Times New Roman",serif;--text:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --small:clamp(.875rem,.85rem + .1vw,.9375rem);--body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --lead:clamp(1.375rem,1.15rem + .85vw,2.125rem);--head:clamp(2.25rem,1.4rem + 3.4vw,4.5rem);
  --m:clamp(16px,2.2vw,32px);--gap:clamp(20px,2.2vw,32px);--sec:clamp(88px,11vw,176px);
  --bar:64px;--ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;background:var(--sky);color:var(--navy);font:400 var(--body)/1.55 var(--text);letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;touch-action:manipulation}
h1,h2,h3,p,blockquote,figure,ul,ol{margin:0;padding:0}ul,ol{list-style:none}
main:focus{outline:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--m);top:-80px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:10px 16px}.skip:focus{top:8px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* fields: every chapter is one flat colour, and tokens follow it */
.f-sky{--bg:var(--sky);--step:var(--sky-2);--ink:var(--navy);--soft:#12304b}
.f-white{--bg:var(--white);--step:var(--white-2);--ink:var(--navy);--soft:#2c4a64}
.f-navy{--bg:var(--navy);--step:var(--navy-2);--ink:#fff;--soft:#b7d7f2}
.field{background:var(--bg);color:var(--ink)}
.sec{padding:var(--sec) var(--m)}

/* bar */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:var(--bar);padding:8px var(--m);background:var(--sky);color:var(--navy);transition:background-color .3s,color .3s}
.bar[data-field=white]{background:var(--white)}
.bar[data-field=navy]{background:var(--navy);color:#fff}
.mark{font:600 clamp(1.25rem,1.1rem + .5vw,1.625rem)/1 var(--display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.bar-links{display:flex;gap:clamp(12px,1.6vw,24px);align-items:center}
.link{text-decoration:none;font-weight:500;font-size:var(--body);padding:10px 0;white-space:nowrap;text-underline-offset:.25em;text-decoration-thickness:2px}
.link:hover,.link[aria-expanded=true],.link[aria-current=page]{text-decoration-line:underline}
#saved-n:not(:empty)::before{content:" "}
.search{margin-left:auto;flex:0 1 300px}
.search input{width:100%;height:44px;padding:0 14px;background:rgba(255,255,255,.34);border:0;border-radius:0;font-size:1rem;appearance:none}
.search input::placeholder{color:currentColor;opacity:1}
.bar[data-field=navy] .search input{background:var(--navy-2)}
.bar[data-field=white] .search input{background:var(--white-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease),background-color .16s}
.btn:hover{background:#ff7240}.btn:active{transform:scale(.97)}
.btn.quiet{background:var(--step);color:var(--ink)}.btn.quiet:hover{background:var(--step);text-decoration:underline;text-underline-offset:.2em}
.menu{position:absolute;left:0;right:0;top:100%;background:var(--navy);color:#fff;padding:clamp(24px,3vw,48px) var(--m) clamp(32px,4vw,64px);display:grid;gap:32px var(--gap);grid-template-columns:repeat(5,1fr);max-height:calc(100svh - var(--bar));overflow:auto}
.menu[hidden]{display:none}
.menu h2{font:500 var(--body)/1.3 var(--text);color:#b7d7f2;margin-bottom:10px;letter-spacing:.01em}
.menu li a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:7px 0;text-decoration:none;font:500 var(--lead)/1.15 var(--display);letter-spacing:-.01em}
.menu li a:hover{color:var(--sky)}
.menu li small{font:400 var(--small) var(--text);color:#b7d7f2}
.menu-s{display:none;grid-column:1/-1}

/* hero */
.hero{position:relative;background:var(--navy);--seam:clamp(240px,41svh,420px);display:flow-root;overflow:clip}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:var(--seam);background:var(--sky)}
.say{--size:min(13.4vw,27svh,230px);position:relative;margin:calc(var(--seam) - var(--size)*1.27) var(--m) 0;font:500 var(--size)/.95 var(--display);letter-spacing:-.028em;height:calc(var(--size)*1.9)}
.say-c{position:absolute;inset:0;margin:0;font:inherit;letter-spacing:inherit;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(var(--navy) calc(var(--size)*1.27),var(--sky) 0)} /* taste-skill-ignore: a hard two-colour edge at the seam, not a blend */
.say-c>span{display:block;white-space:nowrap}
.say-c .l2{display:flex;align-items:center;gap:.16em}
.say-c .slot{flex:1;height:.76em;min-width:0;margin-top:.1em}
.slot{position:relative;display:block;overflow:hidden;background:var(--navy-2)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%;opacity:0;transition:opacity .9s;transform:scale(1.04)}
.slot img.on{opacity:1;animation:drift 7s linear forwards}
.slot:focus-visible{outline-offset:4px}
@keyframes drift{to{transform:scale(1.13)}}
.hero-low{position:relative;color:#fff;padding:clamp(16px,2vw,28px) var(--m) clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:start}
.hero-intro{margin-bottom:clamp(14px,1.6vw,22px);color:#b7d7f2;max-width:52ch}
.ask{font:500 var(--lead)/1.42 var(--display);letter-spacing:-.01em}
.ask select{field-sizing:content;font:inherit;letter-spacing:inherit;background:var(--navy-2);color:var(--sky);border:0;border-radius:0;padding:.02em 1.15em .06em .3em;appearance:none;max-width:100%;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236bb4ee' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .35em center;background-size:.48em;transition:background-color .16s}
.ask select:hover{background-color:#24384b}
.ask select option{font:400 1rem var(--text);background:var(--navy);color:#fff}
.answer{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.answer-t{font-weight:500;font-size:var(--body);line-height:1.3}
.answer-t a{text-decoration:none}.answer-t a:hover{text-decoration:underline}
.answer-m{color:#b7d7f2;font-size:var(--small)}
.answer-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.answer-row{display:grid;grid-template-columns:clamp(120px,14vw,200px) minmax(0,1fr);gap:16px;align-items:start}

/* thumbnails */
.pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--step);text-decoration:none}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
a:hover>.pic img,.pic:hover img{transform:scale(1.035)}
.len{position:absolute;right:0;bottom:0;background:var(--navy);color:#fff;padding:1px 8px;font-size:var(--small);font-variant-numeric:tabular-nums}
.cover{position:absolute;inset:0;background:var(--navy);color:var(--sky);padding:7% 7% 12%;font:500 clamp(1.125rem,.9rem + .8vw,1.625rem)/1.1 var(--display);letter-spacing:-.01em;overflow:hidden}
.f-navy .cover{background:var(--sky);color:var(--navy)}
.f-navy .len{background:var(--white);color:var(--navy)}

/* video item */
.v{display:flex;flex-direction:column;gap:10px;min-width:0}
.v-link{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.v-t{font:500 var(--body)/1.28 var(--text);letter-spacing:0;overflow-wrap:anywhere}
.v-link:hover .v-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.v-by{color:var(--soft);font-size:var(--small);margin-top:3px}
.v-q{color:var(--ink);font:italic 400 var(--body)/1.34 var(--display);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v-src{font-size:var(--small);color:var(--soft)}
.v.big .v-t{font:500 var(--lead)/1.08 var(--display);letter-spacing:-.015em;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v.big .v-q{font-size:var(--body);-webkit-line-clamp:4}
.v.row .v-link{display:grid;grid-template-columns:minmax(112px,38%) minmax(0,1fr);gap:16px;align-items:start}

/* category table */
.shelves-h{font:500 var(--head)/.98 var(--display);letter-spacing:-.025em;text-indent:3vw;margin-bottom:clamp(40px,6vw,96px)}
.shelves{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.shelves-pic{grid-column:1/6;align-self:end}
.shelves-pic .pic{aspect-ratio:4/5}
.shelves-pic p{margin-top:10px;font-size:var(--small);color:var(--soft);min-height:3em}
.shelf-list{grid-column:7/13}
.shelf-g+.shelf-g{margin-top:44px}
.shelf-g h3{font:500 var(--body)/1.3 var(--text);color:var(--soft);padding-bottom:8px}
.shelf-g a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:6px 0;text-decoration:none;font:500 var(--lead)/1.12 var(--display);letter-spacing:-.015em;transition:transform .2s var(--ease)}
.shelf-g a:hover,.shelf-g a:focus-visible{transform:translateX(8px);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.shelf-g small{font:400 var(--small) var(--text);color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}

/* start here */
.start-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-bottom:clamp(32px,4vw,64px);align-items:end}
.start-h h2{grid-column:1/8;font:500 clamp(4rem,1rem + 10.6vw,12rem)/.9 var(--display);letter-spacing:-.03em}
.start-h div{grid-column:8/13;display:grid;gap:14px;justify-items:start}
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(32px,4vw,56px) var(--gap)}
.mosaic>:nth-child(1){grid-column:1/8;grid-row:span 3}
.mosaic>:nth-child(n+2):nth-child(-n+4){grid-column:8/13}
.mosaic>:nth-child(n+5){grid-column:span 3}

/* comment chapter */
.comment{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:32px;align-items:start}
.comment h2{grid-column:1/-1;font:500 var(--head)/.98 var(--display);letter-spacing:-.025em}
.comment-b{grid-column:1/8;font:italic 400 var(--lead)/1.22 var(--display);letter-spacing:-.01em;min-height:6.5em}
.comment-s{display:block;font:400 var(--small)/1.4 var(--text);letter-spacing:.01em;color:var(--soft);margin-top:16px;font-style:normal}
.comment-v{grid-column:8/13}
.comment-acts{grid-column:1/8}

/* category shelves on the home page */
.cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,48px)}
.cat-h h2{font:500 var(--head)/.98 var(--display);letter-spacing:-.025em}
.cat-h h2 a{text-decoration:none}.cat-h h2 a:hover{text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.1em}
.cat-d{max-width:56ch;margin-top:12px}
.cat-all{font-weight:500;text-underline-offset:.25em;text-decoration-thickness:2px;white-space:nowrap}
.cat-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3vw,40px) var(--gap)}
.lay-a>.v.big{grid-column:1/8;grid-row:span 4}.lay-a>.v.row{grid-column:8/13}
.lay-b>.v.big{grid-column:6/13;grid-row:span 4;order:2}.lay-b>.v.row{grid-column:1/6}
.lay-c>.v{grid-column:span 3}.lay-c>.v.big{grid-column:span 6;grid-row:span 2}

/* about */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.about-f{grid-column:1/3;font-size:var(--small);color:var(--soft);display:grid;gap:14px;align-content:start}
.about-f b{display:block;font:500 var(--lead)/1.1 var(--display);color:var(--ink)}
.about-t{grid-column:3/12;font:400 var(--lead)/1.28 var(--display);letter-spacing:-.005em}
.about-t p+p{margin-top:1em;color:var(--soft)}
.about-t img{float:left;width:3.84em;height:3.84em;object-fit:cover;margin:.22em .55em .1em 0}

/* footer */
.foot{min-height:78svh;display:flex;flex-direction:column;padding:40px var(--m) 24px}
.foot-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);font-size:var(--body)}
.foot-t p{grid-column:1/8;max-width:62ch}.foot-t a.top{grid-column:12/13;justify-self:end;font-weight:500;white-space:nowrap}
.foot-pick{margin-top:auto;padding-top:64px;text-align:left;font:500 clamp(3.25rem,13.2vw,15.5rem)/.95 var(--display);letter-spacing:-.03em;display:block;width:100%;white-space:nowrap;transition:color .2s}
.foot-pick:hover{color:var(--accent)}
.foot-m{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 32px;font-size:var(--small);margin-top:16px}

/* list pages */
.page-h{padding:clamp(40px,6vw,88px) var(--m) clamp(28px,4vw,56px)}
.page-h h1{font:500 clamp(3rem,1rem + 8.8vw,10.5rem)/.95 var(--display);letter-spacing:-.03em;overflow-wrap:break-word}
.page-h h1.long{font-size:clamp(2.5rem,1rem + 6.2vw,7.5rem)}
.page-h p{font-size:var(--lead);line-height:1.25;font-family:var(--display);max-width:44ch;margin-top:clamp(20px,2.6vw,36px)}
.page-m{margin-top:12px;font-size:var(--body);color:var(--soft)}
.filters{display:flex;flex-wrap:wrap;gap:12px;padding:16px var(--m);align-items:end;background:var(--step)}
.filters label{display:grid;gap:2px;font-size:var(--small);flex:0 1 auto;min-width:0}
.filters select{height:44px;padding:0 30px 0 12px;background:var(--bg);border:0;border-radius:0;font-size:1rem;max-width:min(100%,280px);width:100%;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230e1822' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:11px}
.filters output{margin-left:auto;align-self:center;font-weight:500;font-size:var(--body);font-variant-numeric:tabular-nums}
.filters .clear{align-self:center;font-weight:500;text-decoration:underline;text-underline-offset:.2em;min-height:44px}
.topics{display:flex;flex-wrap:wrap;gap:6px 18px;padding:18px var(--m) 0}
.topics button{font-size:var(--body);min-height:36px;text-underline-offset:.22em;text-decoration-thickness:2px}
.topics button:hover{text-decoration-line:underline}
.topics button[aria-pressed=true]{font-weight:500;text-decoration-line:underline}
.topics small{font-size:var(--small);color:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(32px,3.6vw,56px) var(--gap);padding:clamp(28px,3.6vw,48px) var(--m) clamp(56px,6vw,96px)}
.grid>.big{grid-column:span 2;grid-row:span 2}
.more{display:flex;justify-content:center;padding:0 var(--m) var(--sec)}
.empty{padding:clamp(48px,8vw,120px) var(--m);display:grid;gap:18px;justify-items:start}
.empty h2{font:500 var(--head)/1 var(--display);letter-spacing:-.025em}
.next-shelf{display:block;padding:clamp(40px,6vw,88px) var(--m);text-decoration:none;font:500 var(--head)/1 var(--display);letter-spacing:-.025em}
.next-shelf:hover{text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.1em}
.next-shelf small{display:block;font:400 var(--body) var(--text);letter-spacing:.01em;margin-bottom:8px;color:var(--soft)}

/* watch page */
.watch{padding:clamp(12px,1.6vw,24px) var(--m) var(--sec);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,3vw,48px) var(--gap);align-items:start}
.stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;width:100%}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stage>img{width:100%;height:100%;object-fit:cover}
.stage .cover{font-size:var(--head);display:flex;align-items:flex-end;padding:5%}
.play{position:absolute;left:0;bottom:0;min-height:64px;padding:0 28px;background:var(--accent);color:var(--accent-ink);font-weight:500;font-size:var(--lead);font-family:var(--display);display:flex;align-items:center;gap:12px;text-decoration:none;transition:padding .2s var(--ease)}
.play:hover{padding-left:38px}
.play::before{content:"";border-style:solid;border-width:.42em 0 .42em .7em;border-color:transparent transparent transparent currentColor}
.stage-n{margin-top:10px;font-size:var(--small);color:var(--soft)}
.w-h{font:500 var(--head)/1 var(--display);letter-spacing:-.025em;margin-top:clamp(20px,2.4vw,32px);overflow-wrap:break-word}
.w-by{margin-top:12px}
.w-sum{margin-top:16px;max-width:66ch}
.w-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.w-why{margin-top:22px;max-width:66ch;color:var(--soft)}
.w-tags{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:22px}
.w-tags a{font-size:var(--body);font-weight:500;text-underline-offset:.22em}
.w-rec{margin-top:22px;max-width:66ch;font-size:var(--small);color:var(--soft)}
.w-rec summary{cursor:pointer;font-weight:500;min-height:32px}
.saying h2{font:500 var(--lead)/1.1 var(--display);letter-spacing:-.015em;margin-bottom:18px}
.say-i+.say-i{margin-top:30px}
.say-i blockquote{font:italic 400 var(--body)/1.36 var(--display)}
.say-i .src{font-size:var(--small);color:var(--soft);margin-top:10px}
.say-i .src a{font-weight:500;color:var(--ink);text-underline-offset:.2em}
.up{background:var(--bg);color:var(--ink)}
.up-h{padding:var(--sec) var(--m) 0;font:500 var(--head)/1 var(--display);letter-spacing:-.025em}
.up .grid{padding-top:clamp(24px,3vw,40px)}

/* entrances and transitions */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

@media (max-width:1100px){
  .hide-s{display:none}
  .bar-links{margin-left:auto}
  .menu{grid-template-columns:repeat(2,1fr)}
  .menu-s{display:flex;gap:10px;flex-wrap:wrap}
  .menu-s .search{display:block;flex:1 1 220px;margin:0}.menu-s .search input{background:var(--navy-2)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaic>:nth-child(n+5){grid-column:span 4}
  .lay-c>.v{grid-column:span 4}.lay-c>.v.big{grid-column:1/-1}
}
@media (max-width:720px){
  :root{--bar:56px}
  .bar{flex-wrap:nowrap}
  .menu{grid-template-columns:1fr;gap:24px}
  .hero{--seam:24svh}
  .say{--size:min(17.2vw,18svh)}
  .hero-low{grid-template-columns:minmax(0,1fr);padding-top:14px;gap:24px}
  .answer-row{grid-template-columns:112px minmax(0,1fr)}
  .shelves-h{text-indent:0;font-size:9.5vw}
  .shelves{display:flex;flex-direction:column-reverse;align-items:stretch;gap:32px}
  .shelves-pic{position:static;width:60%;align-self:flex-end}
  .start-h,.comment,.about,.foot-t{display:block}
  .start-h div{margin-top:16px}
  .mosaic,.cat-g{display:flex;flex-direction:column}
  .lay-b>.v.big{order:0}
  .comment h2{margin-bottom:24px}.comment-b{min-height:9em}.comment-v,.comment-acts{margin-top:28px}
  .about-f{grid-template-columns:repeat(3,1fr);margin-top:28px;order:2}
  .about{display:flex;flex-direction:column}
  .foot-t a.top{display:inline-block;margin-top:12px}
  .foot-pick{font-size:13.4vw}
  .foot-m{flex-direction:column}
  .grid{grid-template-columns:minmax(0,1fr)}.grid>.big{grid-column:auto;grid-row:auto}
  .filters label{flex:1 1 40%}.filters select{max-width:none}
  .filters output{margin-left:0;width:100%}
  .watch{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .watch>*>:not(.stage):not(.player){margin-inline:var(--m)}
  .play{min-height:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}


/* learning layer */
.path-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding:0 var(--m) var(--sec)}
.home-paths{padding:clamp(40px,5vw,72px) 0 0}
.path-card a{display:grid;gap:16px;text-decoration:none}
.path-card .pic{aspect-ratio:16/9}.path-card .len{display:none}
.page-h .page-m{font-family:var(--text);font-size:var(--body);line-height:1.55}
.path-n{display:block;font-size:var(--small);color:var(--soft);margin-bottom:6px}
.path-t{display:block;font:500 var(--lead)/1.08 var(--display);letter-spacing:-.02em}
.path-q{display:block;margin-top:10px;color:var(--soft)}
.path-card a:hover .path-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.steps{counter-reset:none;padding:0 var(--m) var(--sec);display:grid;gap:clamp(36px,4vw,64px)}
.step{display:grid;grid-template-columns:48px minmax(220px,360px) minmax(0,1fr);gap:var(--gap);align-items:start;padding-top:clamp(24px,3vw,40px);border-top:1px solid color-mix(in oklab,var(--ink) 18%,transparent)}
.step-n{font:500 clamp(1.75rem,2.4vw,2.75rem)/1 var(--text);font-variant-numeric:tabular-nums;color:var(--accent)}
.step-m,.notes-m,.notes-s{font-size:var(--small);color:var(--soft)}
.step h2{font:500 var(--lead)/1.12 var(--display);letter-spacing:-.015em;margin:4px 0 16px}
.step h2 a{text-decoration:none}.step h2 a:hover{text-decoration:underline}
.ideas{display:grid;gap:7px}.ideas li,.notes li{position:relative;padding-left:18px}.ideas li::before,.notes li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:2px;background:var(--accent)}
.jumps{margin-top:16px;font-size:var(--small)}.jumps a{text-underline-offset:.2em}
.notes{margin-top:clamp(28px,3vw,44px);padding-top:28px;border-top:1px solid rgba(255,255,255,.2)}
.notes h2{font:500 var(--lead)/1.1 var(--display);letter-spacing:-.015em}
.notes h3{font:500 var(--body)/1.3 var(--text);color:#b7d7f2;margin:24px 0 10px}
.notes-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.notes ul{display:grid;gap:7px}
.moments{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.moments li{padding:0!important}.moments li::before{display:none}
.moments a{display:flex;gap:12px;min-height:44px;align-items:center;padding:8px 12px;background:var(--navy-2);text-decoration:none}
.moments a:hover{text-decoration:underline}.moments span{font-variant-numeric:tabular-nums;color:var(--accent);min-width:3.6em}
.check,.next-step{margin-top:24px}.check b{font-weight:500}.notes-s{margin-top:18px}
@media (max-width:1080px){.path-list{grid-template-columns:repeat(2,minmax(0,1fr))}.step{grid-template-columns:42px minmax(180px,280px) minmax(0,1fr)}}
@media (max-width:720px){.path-list,.notes-g{grid-template-columns:minmax(0,1fr)}.step{grid-template-columns:36px minmax(0,1fr)}.step-pic{grid-column:2}.step>div{grid-column:2}.step-n{font-size:2rem}}

/* breadcrumbs, answers and questions */
.crumbs{margin-bottom:clamp(16px,2vw,28px);font-size:var(--small)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li{display:flex;min-width:0}
.crumbs li+li::before{content:"/";padding:0 8px;color:var(--soft)}
.crumbs a{color:var(--soft);text-underline-offset:.2em}.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch .crumbs{margin-top:clamp(20px,2.4vw,32px);margin-bottom:0}
.w-ans{margin-top:16px;max-width:62ch;font:400 var(--lead)/1.3 var(--display);letter-spacing:-.005em}
.faq{padding:var(--sec) var(--m)}
.faq h2{font:500 var(--head)/1 var(--display);letter-spacing:-.025em;margin-bottom:clamp(32px,4vw,64px);max-width:16ch}
.faq-l{display:grid;gap:clamp(32px,4vw,56px)}
.faq-i{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.faq-i h3{grid-column:1/6;font:500 var(--lead)/1.15 var(--display);letter-spacing:-.01em}
.faq-i p{grid-column:6/13;max-width:62ch}
.faq-i a{text-underline-offset:.2em}
.topic-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px var(--gap);padding:0 var(--m) var(--sec)}
.topic-index a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 0;text-decoration:none;font:500 var(--lead)/1.15 var(--display);letter-spacing:-.01em}
.topic-index a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.topic-index small{font:400 var(--small) var(--text);color:var(--soft)}
@media (max-width:1100px){.topic-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.faq-i{display:block}.faq-i p{margin-top:10px}.topic-index{grid-template-columns:minmax(0,1fr)}}

/* player controls: the site's own bar under the picture, so YouTube draws nothing over it */
.player{display:flex;flex-direction:column;background:#000}
.player:fullscreen{width:100vw;height:100vh;justify-content:center}
.player:fullscreen .stage{flex:1;aspect-ratio:auto}
.stage #ytp,.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;cursor:pointer;background:transparent}
.ctl{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;padding:8px 12px;background:var(--navy-2);color:#fff}
.ctl-b{min-height:44px;padding:0 14px;font-weight:500;font-size:var(--body);background:transparent;color:#fff;transition:background-color .16s}
.ctl-b:hover{background:#24384b}
.ctl-play{min-width:92px;background:var(--accent);color:var(--accent-ink)}.ctl-play:hover{background:#ff7240}
.ctl-t{font-variant-numeric:tabular-nums;font-size:var(--small);color:#b7d7f2;white-space:nowrap}
.ctl-seek{flex:1 1 200px;min-width:120px;height:44px;accent-color:var(--accent);cursor:pointer;background:transparent}
@media (max-width:720px){.ctl{gap:0 4px;padding:6px 8px}.ctl-b{padding:0 10px}.ctl-play{min-width:84px}.ctl-play~[data-c=mute]{margin-left:auto}.ctl-t{order:8;flex:0 0 auto;padding-left:4px}.ctl-seek{order:9;flex:1 1 calc(100% - 130px);min-width:0}}

/* bloom scroll: a column of full-height screens that snap, one video each */
body.bloom-on{overflow:hidden}
.bloom{height:calc(100svh - var(--bar));overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;outline:0;scrollbar-width:none}
.bloom::-webkit-scrollbar{display:none}
.bl-card{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--gap);align-items:center;padding:clamp(16px,2.4vw,40px) var(--m)}
.bl-stage{position:relative;aspect-ratio:16/9;max-height:calc(100svh - var(--bar) - 64px);width:100%;background:#000;overflow:hidden;justify-self:center}
.bl-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.bl-card.playing .bl-stage>img{opacity:0}
.bl-stage .bl-yt,.bl-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bl-stage .cover{font-size:var(--head)}
.bl-prog{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;background:rgba(255,255,255,.18)}
.bl-prog span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s linear}
.bl-info{display:grid;gap:12px;align-content:center;min-width:0}
.bl-meta{font-size:var(--small);color:var(--soft)}.bl-meta a{color:var(--ink);text-underline-offset:.2em}
.bl-t{font:500 var(--lead)/1.1 var(--display);letter-spacing:-.015em;overflow-wrap:anywhere}
.bl-t a{text-decoration:none}.bl-t a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.bl-by{color:var(--soft)}
.bl-q{font:italic 400 var(--body)/1.36 var(--display);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.bl-src{font-size:var(--small);color:var(--soft)}
.bl-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.bl-acts .btn.quiet{--step:var(--navy-2);--ink:#fff}
.bl-full{font-weight:500;text-underline-offset:.22em;padding:12px 6px}
.bl-intro{display:flex;align-items:center}
.bl-intro-in{max-width:min(100%,920px)}
.bl-intro h1,.bl-end h2{font:500 clamp(3.25rem,1rem + 9vw,10rem)/.92 var(--display);letter-spacing:-.03em}
.bl-end h2{font-size:var(--head);max-width:18ch}
.bl-lead{font:400 var(--lead)/1.3 var(--display);max-width:40ch;margin-top:clamp(16px,2vw,28px)}
.bl-start{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:clamp(24px,3vw,40px)}
.bl-start label{font-weight:500}
.bl-start select{height:48px;padding:0 34px 0 12px;background:var(--navy-2);color:#fff;border:0;border-radius:0;font-size:1rem;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236bb4ee' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
.bl-keys{margin-top:20px;font-size:var(--small);color:var(--soft)}
@media (max-width:900px){
  .bl-card{grid-template-columns:minmax(0,1fr);align-content:center;gap:16px;padding-top:12px}
  .bl-stage{margin-inline:calc(var(--m) * -1);width:calc(100% + var(--m) * 2);max-height:none}
  .bl-intro{align-items:center}
  .bl-q{-webkit-line-clamp:4}
}

/* typography: balanced headings, no lone last words, and quotes at reading size set in the text face */
h1,h2,h3,.v-t,.bl-t,.w-h,.page-h h1{text-wrap:balance}
p,blockquote,li{text-wrap:pretty}
.v-q,.bl-q,.say-i blockquote,.answer .v-q{font-family:var(--text);font-style:italic;font-size:var(--body);line-height:1.5;letter-spacing:0;max-width:62ch}
.faq-i p,.w-sum,.w-why,.about-t,.cat-d{max-width:56ch}
@media (max-width:720px){
  .w-ans{font-size:clamp(1.1875rem,1rem + 1vw,1.375rem);line-height:1.38}
  .foot{min-height:auto;padding-bottom:28px}
  .foot-pick{padding-top:clamp(72px,18vw,120px)}
}

/* type system: Fraunces (soft, optical sizes) for display and quotes, Instrument Sans for reading */
html{font-variation-settings:"SOFT" 100,"WONK" 0;font-optical-sizing:auto;font-kerning:normal;font-synthesis:none}
body{letter-spacing:0;font-feature-settings:"kern","liga","calt"}
.mark{font-weight:600;letter-spacing:-.015em}
.len,.ctl-t,.shelf-g small,.menu li small,.topics small,.topic-index small,.about-f b,.filters output{font-variant-numeric:tabular-nums lining-nums}
.v-q,.bl-q,.say-i blockquote,.answer .v-q{font-family:var(--display);font-style:italic;font-weight:400;font-size:var(--body);line-height:1.45;letter-spacing:0}
.comment-b{font-weight:400}
.v-t,.answer-t,.bl-by,.w-by{letter-spacing:-.003em}

/* terms and privacy */
.legal{padding:0 var(--m) var(--sec);display:grid;gap:clamp(28px,3vw,40px);max-width:calc(72ch + var(--m) * 2)}
.legal h2{font:500 var(--lead)/1.15 var(--display);letter-spacing:-.01em;margin-bottom:10px}
.legal p{max-width:66ch}
.legal a{text-underline-offset:.2em}
.legal-m{color:var(--soft);font-size:var(--small)}