/* Layout: edition-led journal. One reading column (author) + a margin column (editors) + Kyun bars between paragraphs. */
:root{
  --paper:#F6F2E9; --ink:#24211C; --muted:#6C665C; --rule:#DCD4C4;
  --accent:#E0542A; --accent-text:#B9411A; --accent-soft:rgba(224,84,42,.20);
  --sage:#B0C6A8; --kyun-paper:#FEFDF6;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --deva:"Tiro Devanagari Hindi","Noto Serif Devanagari",serif;
  --col:660px; --margin:220px; --gap:56px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#1B1A17; --ink:#ECE6DA; --muted:#A39C8F; --rule:#3A3630;
  --accent:#F0774C; --accent-text:#F59A76; --accent-soft:rgba(240,119,76,.24);
  --sage:#93AC8C; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1B1A17; --ink:#ECE6DA; --muted:#A39C8F; --rule:#3A3630;
  --accent:#F0774C; --accent-text:#F59A76; --accent-soft:rgba(240,119,76,.24);
  --sage:#93AC8C; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.65;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.wrap{max-width:calc(var(--col) + var(--margin) + var(--gap));margin:0 auto}

/* Masthead */
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand .mono{color:var(--muted)}
.mast nav{display:flex;gap:22px;flex-wrap:wrap}
.mast nav a{text-decoration:none;color:var(--muted)}
.mast nav a:hover{color:var(--ink)}
.notes-btn{border:1px solid var(--rule);padding:6px 10px;border-radius:999px;color:var(--muted)}
.notes-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text)}

/* Header */
.head{padding-block:56px 28px;max-width:var(--col)}
.labels{color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.labels span+span::before{content:"·";margin-right:10px}
h1{font-size:clamp(40px,6.4vw,68px);line-height:1.04;font-weight:500;letter-spacing:-.02em;margin:18px 0 18px;text-wrap:balance;font-variation-settings:"opsz" 72}
.dek{font-style:italic;font-size:24px;line-height:1.45;color:var(--muted);margin:0 0 22px;text-wrap:balance}
.byline{color:var(--muted)}

/* Reading bar: depth switch + progress light */
.rbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;background:var(--paper);border-bottom:1px solid var(--rule);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.rbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.rbar-title{font-style:italic;font-size:17px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;opacity:0;transition:opacity .3s}
.rbar.past .rbar-title{opacity:1}
.depthwrap{display:flex;align-items:center;gap:10px;flex:none}
.depth-cap{color:var(--muted)}
.depth{position:relative;display:flex;border:1px solid var(--ink);border-radius:999px;padding:3px;flex:none}
.depth .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:96px;border-radius:999px;background:var(--ink);transition:left .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1)}
.depth button{position:relative;z-index:1;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px;white-space:nowrap;transition:color .3s}
.depth button[aria-pressed="true"]{color:var(--paper)}
/* Depth status, toast, added-in-full markers */
.depth-status{display:flex;gap:14px;align-items:flex-start;padding-block:18px 4px;border-radius:6px}
.depth-status .light{margin-top:9px}
.depth-status .mono{color:var(--accent-text);display:block;margin-bottom:4px}
.depth-status p{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
.swap{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px;margin-top:8px;display:inline-block}
#st-full p{border-left:2px solid var(--accent);padding-left:12px}
.depth-status.flash{animation:flash 1.6s ease}
@keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}
article.entering{animation:enter .5s ease}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#v-full .chunk.added>:not(aside):not(.kyun){border-left:2px solid var(--accent-soft);padding-left:18px;margin-left:-20px}
#v-full.entering .chunk.added>:not(aside):not(.kyun){animation:mark 2.6s ease}
@keyframes mark{0%,45%{border-left-color:var(--accent)}100%{border-left-color:var(--accent-soft)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;gap:10px;align-items:center;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:11px 18px;border-radius:999px;max-width:calc(100% - 32px);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.depth small{opacity:.7;font-size:11px}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--accent);width:0}
.progress::after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 0 14px var(--accent)}

/* Kyun */
.kyun{display:flex;gap:20px;align-items:center;margin-block:36px}
.peek{position:relative;flex:none;width:92px;padding-bottom:2px}
.peek img{display:block;width:100%;height:auto}
.peek .hill{position:absolute;left:-12%;width:124%;bottom:-3px;height:auto;overflow:visible}
.stand{flex:none;display:flex;flex-direction:column;align-items:center;width:190px}
.stand img{display:block;width:calc(var(--kw,118) * 1px);max-width:none;height:auto;position:relative;z-index:1;margin-bottom:-14px}
.stand .land{width:100%;height:auto;overflow:visible}
.land-fill{display:none}.peek .hill{display:none!important}.peek img{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 92%);mask-image:linear-gradient(to bottom,#000 55%,transparent 92%)}
.land-line,.tick{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.tick{stroke-width:1.3;opacity:.8}
.kyun .who{color:var(--accent-text);display:block;margin-bottom:2px}
.kyun p{margin:0;font-style:italic;font-size:19px;line-height:1.5}
.kyun.quiet p{color:var(--muted)}
.kyun.open{align-items:flex-end;gap:22px;margin-block:8px 32px}
.kyun.open p{font-size:21px}
.kyun .cta{margin-top:14px;display:inline-flex;gap:10px;align-items:center;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:3px;font-style:normal}

/* Article grid */
article{padding-bottom:24px}
.chunk{display:grid;grid-template-columns:minmax(0,var(--col)) var(--margin);column-gap:var(--gap);justify-content:center}
.chunk>*{grid-column:1;min-width:0}
.chunk>aside{grid-column:2;grid-row:1 / span 3;align-self:start;padding-top:8px;display:grid;gap:22px}
.wide{max-width:calc(var(--col) + var(--margin) + var(--gap));margin-inline:auto}
p{margin:0 0 1.1em}
.lede{font-size:24px;line-height:1.55}
.hl{background-image:linear-gradient(transparent 60%,var(--accent-soft) 60%);padding:0 1px}
.kicker{font-style:italic;font-size:27px;line-height:1.35;margin:1.2em 0 .6em}
h2{font-size:32px;line-height:1.2;font-weight:500;margin:1.6em 0 .5em;letter-spacing:-.01em;text-wrap:balance}
.qno{color:var(--accent-text);display:block;margin-top:2.4em}
.qno+h2{margin-top:.25em}

/* Three whys */
.whys{list-style:none;padding:0;margin:8px 0 1.4em;counter-reset:w;border-top:1px solid var(--rule)}
.whys li{counter-increment:w;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding:16px 0;border-bottom:1px solid var(--rule)}
.whys li::before{content:counter(w);font-family:var(--serif);font-size:34px;line-height:1;color:var(--accent-text);font-weight:500}
.why-pick{text-align:left;font-weight:600;line-height:1.5;font-size:20px;border-radius:4px}
.why-pick[aria-pressed="true"]{background-image:linear-gradient(transparent 60%,var(--accent-soft) 60%)}
.why-meta{grid-column:2;display:flex;gap:18px;margin-top:8px;color:var(--muted)}
.why-meta a{text-decoration:none;border-bottom:1px solid var(--rule)}
.why-meta .picked{color:var(--accent-text)}

/* Margin notes (editorial) */
.note{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--muted);letter-spacing:.02em}
.note .lab{display:block;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.num{font-family:var(--serif);font-size:44px;line-height:1;color:var(--accent-text);display:block;letter-spacing:-.02em;margin-bottom:6px}
.light{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 10px var(--accent);vertical-align:middle;margin-right:8px;flex:none}
.bridge{display:block;text-decoration:none;color:var(--ink);border-top:1px solid var(--rule);padding-top:10px}
.bridge .lab{display:flex;align-items:center;color:var(--accent-text)}
.bridge b{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:0;display:block;margin:4px 0 2px;color:var(--ink)}
.bridge:hover b{text-decoration:underline;text-decoration-color:var(--accent)}

/* Pull quote, parallel, closing */
.pull{font-style:italic;font-size:clamp(26px,3.6vw,36px);line-height:1.3;margin:1.4em 0;padding:0;border:0;text-wrap:balance}
.pull::before{content:"";display:block;width:56px;height:2px;background:var(--accent);margin-bottom:18px}
.parallel{position:relative}
.parallel .plab{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.parallel .plab .deva{font-family:var(--deva);font-size:30px;color:var(--accent-text);text-transform:none;letter-spacing:0}
.parallel p{font-size:21px}
.closing{margin-top:2.4em;padding-top:26px;border-top:2px solid var(--accent)}
.closing .mono{color:var(--accent-text)}
.closing p{font-style:italic;font-size:clamp(28px,4vw,40px);line-height:1.25;font-weight:500;margin:.4em 0 0;text-wrap:balance}

/* Figures */
figure{margin:44px auto}
figure svg{width:100%;height:auto;display:block}
figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
figcaption .deva{font-family:var(--deva);font-size:18px;letter-spacing:0;color:var(--accent-text)}
.sketch path,.sketch line,.sketch rect,.sketch ellipse,.sketch circle,.sketch polyline{stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sketch .thin{stroke-width:1.2;opacity:.55}
.sketch .wash{fill:var(--accent);stroke:none;opacity:.55}
.sketch .solid{fill:var(--accent);stroke:var(--ink)}
.sketch text{fill:var(--ink);font-family:var(--mono);stroke:none}
.sketch .stamp{fill:var(--accent-text)}
.mini figure{margin:0}

/* Poll */
.poll{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.poll button{border:1px solid var(--ink);border-radius:999px;padding:9px 16px;font-size:17px}
.poll button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.poll-out{font-family:var(--mono);font-size:12px;color:var(--muted);min-height:1.6em}

/* End matter */
.end{border-top:1px solid var(--rule);margin-top:48px;padding-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.end h3{font-weight:500;font-size:15px;margin:0 0 14px}
.tk-name{font-size:30px;line-height:1.15;margin:0 0 6px;font-weight:500}
.tk-what{color:var(--muted);font-size:18px;margin:0 0 16px}
.tk-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.tk-list li{display:flex;align-items:center;font-size:18px}
.tk-list small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;letter-spacing:.06em}
.next a{display:block;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule);font-size:20px;line-height:1.35}
.next a .mono{display:block;color:var(--muted);margin-bottom:4px}
.next a:hover span:last-child{text-decoration:underline;text-decoration-color:var(--accent)}
.legend{margin-top:48px;padding-top:20px;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;font-size:16px;color:var(--muted)}
.legend b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.legend .k{font-family:var(--mono);font-size:12px}
.foot{padding-block:28px 48px;color:var(--muted);font-size:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Review overlay */
body.notes [data-note]{outline:1px dashed var(--accent);outline-offset:6px;position:relative}
body.notes [data-note]::after{content:attr(data-note);position:absolute;left:0;top:-8px;transform:translateY(-100%);z-index:6;background:var(--accent);color:#fff;font:500 10px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:2px;max-width:100%;font-style:normal}

@media (max-width:1000px){
  .chunk{grid-template-columns:minmax(0,1fr);max-width:var(--col);margin-inline:auto}
  .chunk>aside{grid-column:1;grid-row:auto;padding:0 0 0 16px;border-left:1px solid var(--rule);margin:0 0 1.4em}
  .head{margin-inline:auto}
}
@media (max-width:440px){.depth-cap{display:none}}
@media (max-width:640px){
  #v-full .chunk.added>:not(aside):not(.kyun){padding-left:12px;margin-left:-14px}
  body{font-size:19px}
  .lede{font-size:21px}
  .rbar-title{display:none}
  .rbar-in{justify-content:center}
  .depth button{padding:7px 11px}
  .mast nav{display:none}
  .stand{width:150px}.stand img{width:calc(var(--kw,118) * 0.78px)}.peek{width:78px}
  .kyun.open p{font-size:19px}
  .end,.legend{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Logo (actual file; light-ink copy in dark mode) */
:root{--logo-l:block;--logo-d:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--logo-l:none;--logo-d:block}}
:root[data-theme="dark"]{--logo-l:none;--logo-d:block}
.brand{align-items:center}
.logo{height:34px;width:auto;display:var(--logo-l)}
.logo.dk{display:var(--logo-d)}
/* Extra block types */
.keyline{font-style:italic;font-size:clamp(23px,3vw,28px);line-height:1.38;margin:1em 0 1.1em}
.gap{color:var(--muted);text-align:left;letter-spacing:.6em;margin:-.2em 0 1em;font-family:var(--mono);font-size:14px}
.alist{margin:0 0 1.2em;padding-left:1.3em}
.alist li{margin:0 0 .45em;padding-left:.2em}
.alist li::marker{color:var(--accent-text)}
h2{scroll-margin-top:100px}
.closing p+p{margin-top:.5em}
.status-key{margin-top:6px}
/* Index page (illustrated) */
:root{--sand:#EEE7DA}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sand:#27241F}}
:root[data-theme="dark"]{--sand:#27241F}
.band{background:var(--sand);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));border-block:1px solid var(--rule)}
.band-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;padding-block:88px}
.band-text{min-width:0}
.band h1{margin:14px 0 12px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--muted);margin-top:22px;align-items:baseline}
.facts b{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:0;color:var(--accent-text);margin-right:7px;text-transform:none}
.band-kyun{text-align:center;display:flex;flex-direction:column;align-items:center}
.band-kyun .stand{width:min(300px,64vw)}
.band-kyun .stand img{width:calc(var(--kw,118) * 1.7px);max-width:100%;margin-bottom:-22px}
.band-kyun p{color:var(--accent-text);margin:10px 0 0}
.frame{background:var(--sand);border-radius:6px;overflow:hidden;aspect-ratio:900/560;display:block;max-width:100%}
.frame svg{width:100%;height:100%;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.frame .sketch .wash{transition:opacity .4s}
a.card:hover .frame svg,a.feat:hover .frame svg{transform:scale(1.035)}
a.card:hover .wash,a.feat:hover .wash{opacity:.85}
.feat{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;align-items:center;text-decoration:none;padding-block:56px 64px;border-bottom:1px solid var(--rule)}
.feat-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.kick{color:var(--accent-text)}
.kick b{font-weight:500}
.feat-title{font-size:clamp(32px,4vw,48px);line-height:1.08;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
.ask{display:flex;gap:14px;align-items:center}
.peek.sm{width:60px}
.ask .who{display:block;color:var(--accent-text);margin-bottom:2px}
.ask em{font-size:19px;line-height:1.45;color:var(--muted)}
.meta{color:var(--muted)}
.res{display:flex;align-items:center;color:var(--ink)}
.go{display:inline-block;align-self:flex-start;border-bottom:2px solid var(--accent);padding-bottom:3px;color:var(--ink);margin-top:6px}
.grid-head{padding-block:40px 18px}
.grid-head .mono{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 36px;padding-bottom:24px}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
.card .frame{margin-bottom:8px}
.card-title{font-size:23px;line-height:1.22;font-weight:500;text-wrap:balance}
a.card:hover .card-title,a.feat:hover .feat-title{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.card .q{font-size:17px;line-height:1.45;color:var(--muted)}
.card .meta,.card .res{font-size:11px}
@media (max-width:860px){.band-in{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:56px}.band-kyun .stand{width:min(220px,56vw)}.band-kyun .stand img{width:calc(var(--kw,118) * 1.2px);margin-bottom:-16px}}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feat{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:640px){.grid{grid-template-columns:minmax(0,1fr);gap:44px}.band-in{padding-block:48px 40px}.feat{padding-block:32px 40px}}
.back{color:var(--muted);text-decoration:none}

figure.small{max-width:320px;margin:40px auto 0 0}
@media (min-width:1001px){figure.small{margin-left:calc(50% - (var(--col) + var(--margin) + var(--gap))/2)}}
.closing p.long{font-size:clamp(21px,2.4vw,25px);line-height:1.45;font-weight:400}

/* New ink-style Kyun: full body everywhere; in-text moments smaller than the opening host */
.kyun:not(.open) .stand{width:150px}
.kyun:not(.open) .stand img{width:calc(var(--kw,118) * 0.72px);margin-bottom:-11px}
@media (max-width:640px){.kyun:not(.open) .stand{width:118px}.kyun:not(.open) .stand img{width:calc(var(--kw,118) * 0.58px);margin-bottom:-9px}}
/* Half-body Kyun = head-and-shoulders crop rising from the hill */
.peek img{position:relative;z-index:0}
.peek .hill{z-index:1}