/* Curiosity journal: comic-page index + note pages. Loaded only on journal pages.
   Everything is visible without JS; motion states live under .mo (set by motion.js, never with reduced motion). */
:root{--inkc:rgba(241,242,222,.5);--ease:cubic-bezier(.2,.75,.1,1);--draw:cubic-bezier(.65,.05,.25,1)}

/* ---------- index: big-type header, words arrive line by line ---------- */
.jx-hero h1{font-size:clamp(54px,8.6vw,132px);letter-spacing:-.045em;line-height:.98;margin:22px 0 34px;max-width:12ch}
.jx-hero h1 em{display:inline-block;margin-top:.04em}
.mo .jx-hero .hl .w>span{transition-duration:1.3s;transition-delay:.12s}
.mo .jx-hero em.hl .w>span{transition-delay:.5s}

/* ---------- index: the comic page ---------- */
.comic{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;grid-auto-flow:row dense}
.panel{--hd:radial-gradient(rgba(241,242,222,.075) .9px,transparent 1.3px);
  position:relative;padding:0;border:0;border-radius:0;min-height:0;overflow:hidden;
  background:linear-gradient(170deg,var(--surface) 45%,transparent 100%),var(--hd) 0 0/6px 6px,var(--surface)}
.panel:hover{transform:none}
.comic .journal-card{transform:none!important}
.comic .journal-card:before{display:none}
.ink{position:absolute;top:.75px;left:.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);overflow:visible;pointer-events:none;z-index:3}
.ink rect{fill:none;stroke:var(--inkc);stroke-width:1.5;transition:stroke .4s}
.panel:hover .ink rect,.panel:focus-visible .ink rect,.next-panel:hover .ink rect,.next-panel:focus-visible .ink rect{stroke:var(--yellow)}
.panel:focus-visible,.next-panel:focus-visible{outline-offset:4px}
.issue{position:absolute;z-index:2;top:0;left:0;background:var(--yellow);color:var(--bg);font-size:10px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;padding:6px 10px 5px;line-height:1.2}
.panel .card-art{width:100%;margin:0;border-radius:0;border-bottom:1px solid var(--line);aspect-ratio:1200/520;object-fit:cover}
.panel-body{padding:22px 24px 22px;display:flex;flex-direction:column;flex:1}
.panel .journal-meta{margin-bottom:22px}
.panel h3{font-size:25px;margin-bottom:14px}
.panel p{font-size:15px;line-height:1.6}
.panel .read-label{margin-top:auto}
.p-w2,.p-tall{grid-column:span 2}.p-w3{grid-column:span 3}.p-w4{grid-column:span 4}.p-w6{grid-column:span 6}
.p-splash{grid-column:span 4;grid-row:span 2}.p-tall{grid-row:span 2}
.p-splash .card-art{flex:1;min-height:0;aspect-ratio:auto}
.p-splash .panel-body{flex:none}
.p-splash .issue{font-size:12px;padding:8px 13px 7px}
.p-splash h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(32px,3.2vw,48px);letter-spacing:-.5px;line-height:1.12}
.p-splash p{font-size:17px;max-width:46ch}
.p-w4,.p-w6{flex-direction:row}
.p-w4 .card-art,.p-w6 .card-art{width:52%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
.p-w6 h3{font-size:30px}
@media(max-width:1099px){
  .comic{grid-template-columns:1fr 1fr}
  .comic .journal-card{grid-column:span 1;grid-row:auto}
  .comic .p-splash,.comic .p-w4,.comic .p-w6{grid-column:span 2}
  .p-w4{flex-direction:column}.p-w4 .card-art{width:100%;aspect-ratio:1200/520;border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:700px){
  .comic{grid-template-columns:minmax(0,1fr);gap:12px}
  .comic .journal-card,.comic .p-splash,.comic .p-w4,.comic .p-w6{grid-column:1}
  .p-w6{flex-direction:column}.p-w6 .card-art{width:100%;aspect-ratio:1200/520;border-right:0;border-bottom:1px solid var(--line)}
  .p-splash .card-art{flex:none;aspect-ratio:1200/620}
  .p-splash h3{font-size:34px}
  .panel h3,.p-w6 h3{font-size:25px}
  .panel-body{padding:20px}
  .jx-hero h1{letter-spacing:-2.5px}
}

/* panels "ink in": the border draws itself, then art and words fade up (JS sets --len, the perimeter in px) */
.mo .ink-go .ink rect{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.25s var(--draw) var(--d,0ms),stroke .4s}
.mo .ink-go.in .ink rect{stroke-dashoffset:0}
.mo .ink-go.inked .ink rect{stroke-dasharray:none}
.mo .ink-go>:not(.ink){opacity:0;transition:opacity .9s ease calc(var(--d,0ms) + .55s),scale .9s var(--ease)}
.mo .ink-go>.next-body,.mo .ink-go>.panel-body{translate:0 10px;transition:opacity .9s ease calc(var(--d,0ms) + .7s),translate 1.1s var(--ease) calc(var(--d,0ms) + .7s)}
.mo .ink-go.in>:not(.ink){opacity:1;translate:none}
.mo .comic .journal-card.rv,.mo .next-panel.rv{opacity:1;transform:none}

/* smart cursor: the native pointer stays; a ring trails it and says "Read" over a panel */
.jx-cur{position:fixed;left:0;top:0;z-index:70;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;opacity:0;
  transition:opacity .35s ease;will-change:transform}
.jx-cur:before{content:'';position:absolute;inset:0;border:1.5px solid var(--yellow);border-radius:50%;transform:scale(.22);
  transition:transform .55s var(--ease),background-color .4s}
.jx-cur span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--yellow);opacity:0;transition:opacity .3s ease}
.jx-cur.on{opacity:1}
.jx-cur.read:before{transform:none;background:rgba(23,27,24,.72)}
.jx-cur.read span{opacity:1;transition-delay:.12s}

/* ---------- note pages ---------- */
body:has(.article-body) .reading-progress{display:none}
.article-layout{grid-template-columns:minmax(0,640px) minmax(300px,380px);gap:0 80px;justify-content:center}
.article-layout>.article-aside{grid-column:2;grid-row:1}
.article-layout>.article-body{grid-column:1;grid-row:1}
.article-layout.has-mn{grid-template-columns:minmax(0,600px) 170px minmax(290px,370px);column-gap:30px}
.has-mn>.article-aside{grid-column:3;margin-left:18px}
.article-aside{top:32px;gap:14px}
.article-aside a.active:before{left:-14px}
.art-detail{position:relative;height:min(52vh,460px);margin-bottom:22px;overflow:hidden;background:var(--surface);border:1.5px solid var(--inkc)}
.art-detail:before{content:'';position:absolute;z-index:2;top:-1px;left:-1px;border:9px solid transparent;border-top-color:var(--yellow);border-left-color:var(--yellow)}
.art-detail img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) 50%;transform:scale(var(--z,1.04));
  transition:object-position 1.8s var(--ease),transform 1.8s var(--ease)}
.art-detail:after{content:'';position:absolute;inset:0;pointer-events:none;transform:translateX(-101%);
  background:linear-gradient(100deg,transparent 35%,rgba(230,250,84,.16) 50%,transparent 65%)}
.art-detail.sweep:after{animation:jx-sweep 1.5s var(--ease)}
@keyframes jx-sweep{to{transform:translateX(101%)}}
.art-count{position:absolute;z-index:2;right:0;bottom:0;background:var(--bg);color:var(--yellow);font-size:10px;letter-spacing:1.6px;padding:6px 10px 5px;
  font-variant-numeric:tabular-nums;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.art-count:empty{display:none}
@media(max-width:1099px){.article-layout,.article-layout.has-mn{grid-template-columns:minmax(0,1fr) 280px;column-gap:48px}
  .has-mn>.article-aside{grid-column:2;margin-left:0}}
@media(max-width:899px){.article-layout,.article-layout.has-mn{display:block}.article-aside{display:none}}

/* section headings as comic caption boxes */
.article-body h2{display:inline-block;position:relative;max-width:100%;border:1px solid var(--inkc);background:var(--surface);
  padding:12px 18px 13px;font-size:24px;line-height:1.3;letter-spacing:-.3px;margin-bottom:24px}
.article-body h2:before{content:'';position:absolute;top:-1px;left:-1px;border:7px solid transparent;border-top-color:var(--yellow);border-left-color:var(--yellow)}

/* the closing pull quote as a speech bubble (still a <blockquote>); the tail is an inline SVG background */
.article-body>blockquote{position:relative;margin:56px 0 64px;padding:26px 30px 28px;border:1.5px solid var(--inkc);border-radius:28px;background:var(--surface);
  font-size:28px;line-height:1.4}
.article-body>blockquote:after{content:'';position:absolute;left:48px;bottom:-26px;width:38px;height:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 28'%3E%3Cpath d='M0 0.5 L4 0.5 C6 9 3 19 1 27 C12 21 22 12 30 0.5 L38 0.5' fill='%23202720'/%3E%3Cpath d='M4 0 C6 9 3 19 1 27 C12 21 22 12 30 0' fill='none' stroke='%23888c7f' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}

/* reading progress: a golden thread down the left edge of the text */
.article-body{position:relative;--read:1}
.article-body:before,.article-body:after{content:'';position:absolute;left:-28px;top:6px;bottom:0;width:1px;pointer-events:none}
.article-body:before{background:var(--line);opacity:.6}
.article-body:after{background:var(--yellow);opacity:.85;transform:scaleY(var(--read));transform-origin:0 0}
@media(max-width:700px){.article-body:before,.article-body:after{left:-12px}
  .article-body h2{font-size:21px;padding:10px 14px 11px}
  .article-body>blockquote{font-size:23px;padding:22px 22px 24px;border-radius:22px}}

/* margin notes: [[note: ...]] -> numbered button + popover aside */
.mn-btn{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;margin:0 2px 0 3px;vertical-align:.25em;border:1px solid var(--yellow);
  border-radius:3px;background:transparent;color:var(--yellow);font-size:11px;font-weight:600;line-height:1;transition:background-color .3s,color .3s}
.mn-btn:hover,.mn-btn[aria-expanded=true]{background:var(--yellow);color:var(--bg)}
.mn{font-size:14px;line-height:1.55;color:var(--ink);background:var(--surface);border:1px solid var(--inkc);padding:12px 14px;margin:0;
  font-family:'DM Sans',sans-serif;font-style:normal}
.mn a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.mn-num{display:inline-block;color:var(--yellow);margin-right:4px}
/* phones and tablets: tap the marker; the aside slides up from the bottom (native popover, light-dismiss) */
.mn:popover-open{position:fixed;inset:auto 16px 16px;width:auto;max-width:560px;margin:0 auto;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.mn::backdrop{background:rgba(23,27,24,.35)}
@media(prefers-reduced-motion:no-preference){.mn:popover-open{animation:jx-up .45s var(--ease)}}
@keyframes jx-up{from{opacity:0;transform:translateY(14px)}}
@media(scripting:none) and (max-width:1179px){.mn{display:block;position:static;margin:10px 0}}
/* wide screens: every aside sits in the margin beside its line, always visible */
@media(min-width:1180px){
  .has-mn .mn:not(:popover-open){display:block;position:static;float:right;clear:right;width:170px;margin:.35em -200px 8px 0;line-height:1.5;padding:0 0 0 12px;
    background:none;border:0;border-left:1px solid var(--yellow);font-size:13px;color:var(--muted);transition:color .4s}
  .has-mn .mn.flash{color:var(--ink)}
}

/* the ending: next issue as a comic panel */

.next-note .eyebrow{color:var(--yellow)}
.next-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:linear-gradient(170deg,var(--surface) 45%,transparent),
  radial-gradient(rgba(241,242,222,.075) .9px,transparent 1.3px) 0 0/6px 6px,var(--surface);max-width:1080px;overflow:hidden}
.next-art{display:block;width:100%;height:100%;min-height:240px;object-fit:cover;border-right:1px solid var(--line)}
.next-body{display:flex;flex-direction:column;align-items:flex-start;padding:34px 34px 30px}
.next-note .next-body h2{font-size:clamp(26px,2.6vw,36px);margin:14px 0 14px;letter-spacing:-.8px}
.next-body p{color:var(--muted);font-size:16px;margin-bottom:24px}
.next-body .issue{position:static}
.next-body .button{margin-top:auto}
@media(max-width:800px){.next-panel{grid-template-columns:1fr}.next-art{height:auto;min-height:0;aspect-ratio:1200/520;border-right:0;border-bottom:1px solid var(--line)}
  .next-body{padding:26px 22px 24px}}

@media(prefers-reduced-motion:reduce){.art-detail img{transition:none}.art-detail.sweep:after{animation:none}.jx-cur{display:none}}

/* ---------- tighter, magazine-like density (Oct 2026) ---------- */
.journal-hero{padding-top:56px;padding-bottom:30px}
.jx-hero h1{font-size:clamp(40px,5.2vw,78px);letter-spacing:-.04em;margin:0;max-width:none}
.journal-intro-bottom{margin-top:30px;padding-top:18px}
@media(min-width:900px){
  .journal-hero.jx-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:6vw;align-items:end}
  .jx-hero>.eyebrow{grid-column:1/-1;margin-bottom:18px}
  .jx-hero>h1{grid-column:1;grid-row:2}
  .jx-hero>p:not(.eyebrow){grid-column:2;grid-row:2;margin:0 0 4px;font-size:18px;line-height:1.55;max-width:46ch}
  .jx-hero>.journal-intro-bottom{grid-column:1/-1;grid-row:3}
}
.journal-list{padding-bottom:64px}
.filters{margin:0 0 14px}
.journal-list-bar{margin-bottom:16px}
.panel-body{padding:18px 22px 18px}
.panel .journal-meta{margin-bottom:14px}
.panel h3{margin-bottom:10px}
.panel p{margin-bottom:16px}
@media(min-width:1100px){
  .p-splash{grid-column:span 6;grid-row:auto;flex-direction:row;max-height:440px;background:var(--surface)}
  .p-splash .card-art{flex:none;width:58%;height:auto;aspect-ratio:1200/520;align-self:stretch;object-fit:cover;border-bottom:0;border-right:1px solid var(--line)}
  .p-splash .panel-body{flex:1;justify-content:center;padding:26px 40px 20px}
  .p-splash .read-label{margin-top:18px}
  .journal-card[href$="/dots-llms-and-curiosity/"],.journal-card[href$="/iphone-hinge/"]{grid-column:span 3}
}
.curiosity-section{padding:64px 0}
.curiosity-section .section-heading{margin-bottom:28px}
.interest-grid{gap:0 40px}
.interest{padding:22px 0 18px}
.interest-label{margin-bottom:14px}
.interest h3{font-size:28px;margin-bottom:12px}
.interest p{margin-bottom:12px}
.interest-foot{padding-top:2px}
.learning-note{margin-top:20px}
.next-note{padding-top:40px;padding-bottom:56px}
.article-hero{padding-top:48px;padding-bottom:40px}
.article-layout{padding-top:48px;padding-bottom:48px}
@media(max-width:700px){
  .journal-hero{padding-top:40px;padding-bottom:24px}
  .jx-hero h1{font-size:44px;letter-spacing:-2px}
  .jx-hero h1{margin-bottom:16px}
  .jx-hero>p:not(.eyebrow){font-size:16px;margin-bottom:0}
  .p-splash .card-art{aspect-ratio:1200/520}
  .journal-list{padding-bottom:48px}
  .curiosity-section{padding:48px 0}
  .interest{padding:20px 0 14px}
  .panel-body{padding:16px 18px}
  .article-hero{padding-top:32px;padding-bottom:30px}
  .article-layout{padding-top:30px;padding-bottom:34px}
}