/* 1.5 — the menu is a handwritten guide; the margin is a little book index. */
.site-header { min-height:146px; max-width:1200px; gap:22px; padding:23px 0 31px; align-items:center }
.site-header:after { display:none }
.signature { display:grid; grid-template-columns:54px auto; column-gap:11px; position:relative; padding-right:8px }
.signature>.signature-logo { width:54px; height:54px; align-self:center }
.signature>.signature-name { font:500 56px/1.05 'Caveat',cursive; letter-spacing:-1.5px }
.signature:after { content:''; position:absolute; bottom:-29px; left:4px; right:-24px; height:40px; background:url('./images/signature-flower.svg') center/100% 100% no-repeat; pointer-events:none }
.desktop-nav { gap:22px; position:relative; padding-bottom:5px; margin-left:auto }
.desktop-nav:after { content:''; position:absolute; left:28px; right:-62px; bottom:-25px; height:34px; background:url('./images/vine-v150.png') center/100% auto no-repeat; pointer-events:none; opacity:.85 }
.nav-link { display:block; min-width:48px; min-height:44px; padding:6px 1px 10px; font-size:24px; line-height:1.3; flex-direction:row }
.nav-link>span { padding:0; background:none }
.nav-link>span:after { display:none }
.nav-link:before { display:none }
.nav-link:after { content:''; position:absolute; bottom:0; left:0; right:0; height:6px; background:url('./images/rule-v130.webp') center/100% 100% no-repeat; filter:var(--pen-blue-filter); opacity:.45; transition:transform .28s var(--ease),opacity .28s; transform:scaleX(.78); transform-origin:left }
.nav-link.is-current:after,.nav-link:hover:after,.nav-link:focus-visible:after { filter:var(--pen-warm-filter); transform:scaleX(1.08) rotate(-3deg); opacity:1 }
.nav-link.is-current { transform:rotate(-2deg) }
.nav-link:not(:last-child)>span:before { content:'·'; position:absolute; right:-17px; top:3px; font-size:17px; color:var(--blue) }
.header-actions { gap:8px; margin-left:10px; align-self:center }
.header-actions .icon-button { width:46px; height:46px }
.header-actions .icon { width:31px; height:31px }
.header-actions .theme-toggle .icon { width:30px; height:30px; filter:var(--pen-blue-filter) }
.index-layout { max-width:1180px; width:calc(100% - 112px); grid-template-columns:minmax(0,1fr) 252px; column-gap:68px; padding-top:36px }
.index-header { margin:0 0 29px; padding-top:1px }
.index-header>p:not(.eyebrow) { font-size:24px; line-height:1.9; margin:0 0 14px; max-width:100% }
.index-count { font-size:18px; margin-top:0 }
.index-note { margin:17px 0 0; padding:0; min-width:0; width:100% }
.index-note>.margin-heading { font-size:23px; font-weight:400; width:max-content; max-width:100%; margin:0 auto 13px; padding:0 8px 4px; color:var(--olive); background-size:100% 11px }
.book-stack { position:relative; width:252px; max-width:100%; height:330px; margin:26px auto 5px }
.book-stack-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.52 }
.book-spines { position:absolute; inset:0; z-index:1; margin:0; padding:0; list-style:none }
.book-spines li { position:absolute; left:17%; width:74%; height:14.2%; display:flex; align-items:center }
.book-spines li:nth-child(1) { top:22.4% }
.book-spines li:nth-child(2) { top:37.6% }
.book-spines li:nth-child(3) { top:52.1% }
.book-spines li:nth-child(4) { top:65.8% }
.book-spines li:nth-child(5) { top:79.3% }
.book-spines a { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; padding:2px 10px; color:var(--olive); font-size:20px; line-height:1.35; position:relative }
.book-spines small { font-size:15px; color:var(--muted); flex:none }
.book-name { transition:transform .25s var(--ease),color .2s; text-decoration-thickness:1px; text-underline-offset:5px }
.book-spines a:hover .book-name,.book-spines a:focus-visible .book-name { transform:translateX(3px) rotate(-2deg); color:var(--rust); text-decoration:underline }
.book-spines a:focus-visible { outline-offset:-1px }
.book-stack .cat-companion-sleep { position:absolute; top:-3%; left:43%; width:44%; max-width:none; margin:0; z-index:2 }
.book-stack .cat-book { display:none }
.book-stack .cat-caption { position:absolute; top:auto; bottom:100%; right:-15px; margin:0; font-size:11px; white-space:nowrap; max-width:none; min-height:0; transform:rotate(8deg); opacity:0; transition:opacity .2s; pointer-events:none }
.book-stack .cat-companion:hover .cat-caption,.book-stack .cat-companion:focus-within .cat-caption,.book-stack .cat-companion:has([data-state=pet],[data-state=wake],[data-state=hello],[data-state=surface]) .cat-caption { opacity:1 }
.index-note>.about-note { justify-content:center; font-size:17px; color:var(--olive); width:fit-content; margin:0 auto; padding:5px 5px 8px; min-height:44px; text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px }
.index-note>.about-note .icon { width:24px; height:24px; filter:var(--pen-blue-filter) }
.social-note { margin-top:30px; color:var(--blue) }
.social-note-label { margin:0 0 6px; font-size:15px; color:var(--olive) }
.social-note ul { padding:0; margin:0; list-style:none; display:flex; flex-wrap:wrap; gap:2px 17px }
.social-note a { min-height:44px; display:inline-flex; align-items:center; gap:7px; font-size:16px; text-underline-offset:6px }
.social-note a:hover,.social-note a:focus-visible { color:var(--rust); text-decoration:underline }
.social-note .icon { width:24px; height:24px; filter:var(--pen-blue-filter) }
.index-note>.social-note { width:fit-content; max-width:100%; margin:22px auto 0 }
.site-footer>.social-note { width:100%; margin:0 0 10px }
.post-row { gap:24px; padding-right:46px }
.post-row-arrow { display:flex; position:absolute; right:-2px; top:32px; width:44px; height:44px; align-items:center; justify-content:center; padding:5px }
.post-row-arrow { color:var(--rust); transition:none }
.reading-arrow { width:40px; height:40px; overflow:visible; transform:rotate(-40deg); transition:transform .5s cubic-bezier(.34,1.56,.64,1) }
.reading-arrow path { transition:d .5s cubic-bezier(.34,1.56,.64,1) }
.post-row:has(h2 a:is(:hover,:focus-visible)) .reading-arrow,
.post-row-arrow:is(:hover,:focus-visible) .reading-arrow { transform:rotate(0deg) }
.post-row:has(h2 a:is(:hover,:focus-visible)) .arrow-shaft,
.post-row-arrow:is(:hover,:focus-visible) .arrow-shaft { d:path('M 7 28 C 20 28 34 28 47 28') }
.post-row:has(h2 a:is(:hover,:focus-visible)) .arrow-tip,
.post-row-arrow:is(:hover,:focus-visible) .arrow-tip { d:path('M 35 17 Q 41 23 47 28 Q 41 33 35 39') }
.post-row h2 { font-size:33px; font-weight:400; line-height:1.6; text-wrap:balance }
.post-row-meta { min-width:106px; font-size:16px }
.post-row-body>p { font-size:19px }
.post-row h2 .written-text { -webkit-text-stroke:.35px currentColor }
html[data-theme=dark] .signature-logo { filter:brightness(1.65) saturate(.72) }
html[data-theme=dark] :is(.signature,.desktop-nav):after { filter:brightness(1.9) saturate(.7); opacity:.85 }
/* Inverting the paper drawing leaves pale chalk outlines and translucent pigment. */
html[data-theme=dark] .book-stack-art { filter:invert(1) hue-rotate(180deg) saturate(.6); mix-blend-mode:screen; opacity:.44 }
html[data-theme=dark] .book-spines a { color:var(--muted) }
html[data-theme=dark] .book-spines a:hover .book-name { color:var(--rust) }
html[data-theme=dark] .book-stack-art { mask-image:linear-gradient(#ffffffb0,#ffffffb0),url('./images/chalk-pigment-v2.webp'); mask-mode:alpha,luminance; mask-size:auto,580px 580px; mask-composite:add }
@media(max-width:1199px) {
  .index-layout { grid-template-columns:minmax(0,1fr) 252px; gap:44px }
  .book-spines a { font-size:20px }
  .desktop-nav { gap:18px }
  .nav-link { font-size:22px }
  .nav-link:not(:last-child)>span:before { right:-14px }
  .signature>.signature-name { font-size:50px }
}
@media(max-width:980px) {
  .site-header { gap:13px; width:calc(100% - 64px) }
  .signature { grid-template-columns:44px auto; gap:8px }
  .signature>.signature-logo { width:44px; height:44px }
  .signature>.signature-name { font-size:44px }
  .desktop-nav { gap:13px }
  .nav-link { min-width:42px; font-size:20px }
  .nav-link:not(:last-child)>span:before { right:-11px }
  .header-actions { gap:0; margin-left:2px }
  .index-layout { display:block; max-width:760px; width:100%; padding:32px 32px 0 }
  .index-note { display:grid; grid-template-columns:252px minmax(0,1fr); column-gap:30px; max-width:580px; margin:50px auto 0; align-items:start }
  .index-note>.margin-heading { grid-column:1; margin-bottom:0 }
  .book-stack { grid-column:1; grid-row:2 / span 3; margin-top:18px }
  .index-note>.about-note { grid-column:2; grid-row:2; margin:32px 0 0 }
  .index-note>.social-note { grid-column:2; grid-row:3; margin:10px 0 0 }
  .post-row { padding-right:43px }
}
@media(max-width:720px) {
  .site-header { min-height:110px; width:calc(100% - 40px); padding:17px 0 24px; flex-wrap:wrap; gap:7px }
  .signature { grid-template-columns:40px auto; column-gap:7px; padding:0 }
  .signature>.signature-name { font-size:42px }
  .signature>.signature-logo { width:40px; height:40px }
  .signature:after { height:32px; bottom:-23px; right:-13px; left:0 }
  .header-actions { margin-left:auto; gap:0 }
  .header-actions .icon-button { width:42px; height:44px; padding:8px }
  .header-actions .icon { width:27px; height:27px }
  .header-actions .theme-toggle .icon { width:25px; height:25px }
  .mobile-nav:before { display:none!important }
  .mobile-nav:not([hidden]) { position:static; width:100%; flex-direction:row; flex-wrap:wrap; gap:6px 18px; margin-top:12px; padding:9px 0 0; background:none; box-shadow:none }
  .mobile-nav>a { padding:6px 4px; min-height:44px; font-size:20px; background:none }
  .mobile-nav>a[aria-current=page] { color:var(--rust) }
  .index-layout { padding:28px 25px 0 }
  .index-header { margin-bottom:24px }
  .index-header>p:not(.eyebrow) { font-size:20px; line-height:1.9; margin-bottom:12px }
  .index-count { font-size:16px }
  .post-row { display:block; padding:23px 0 25px }
  .post-row-meta { display:flex; align-items:center; gap:12px; padding:0; margin-bottom:7px; font-size:13px }
  .post-row-meta>span { margin:0; font-size:13px }
  .post-row h2 { font-size:27px }
  .post-row-body>p { font-size:17px }
  .post-row h2 { padding-right:30px }
  .post-row-arrow { top:49px; right:-9px; width:40px; height:44px }
  .reading-arrow { width:32px; height:32px }
}
@media(max-width:520px) {
  .index-note { display:block; width:252px; max-width:100%; margin:46px auto 0 }
  .index-note>.margin-heading { margin:0 auto 12px }
  .index-note>.about-note { margin:0 auto }
  .index-note>.social-note { margin:20px auto 0; text-align:center }
  .social-note ul { justify-content:center }
  .site-footer .social-note { text-align:center }
}
@media(max-width:360px) {
  .site-header { width:calc(100% - 30px) }
  .signature>.signature-name { font-size:35px }
  .signature { grid-template-columns:34px auto; gap:5px }
  .signature>.signature-logo { width:34px; height:34px }
  .header-actions .icon-button { width:39px }
  .index-layout { padding-inline:20px }
}
@media(prefers-reduced-motion:reduce) { .nav-link:after,.book-name,.post-row-arrow,.cat-caption { transition:none!important } }
html[data-motion=reduce] :is(.nav-link:after,.book-name,.post-row-arrow,.cat-caption) { transition:none!important }
@media(forced-colors:active) {
  .book-stack-art,.signature:after,.desktop-nav:after { display:none }
  .book-spines a { color:LinkText; border-bottom:1px solid CanvasText }
  .social-note .icon,.signature>.signature-logo { filter:none!important }
}
@media print { .index-note,.social-note,.post-row-arrow { display:none!important } }
/* The material wrapper must inherit its local signature size at every breakpoint. */
.signature-name .written-text { font:inherit; letter-spacing:inherit }

/* Keep positioning more specific than the shared .icon-button pen frame. */
.back-to-top.icon-button { --return-paper:#fff6d8; --return-fold:#ecda9d; position:fixed; inset:auto 20px 18px auto; width:76px; height:94px; padding:0; display:block; color:var(--olive); background:none; border:0; border-radius:6px; box-shadow:none; z-index:40; transform:rotate(3deg); transition:transform .25s var(--ease) }
html[data-theme=dark] .back-to-top { --return-paper:#35483d; --return-fold:#52664e }
.back-to-top>span { position:absolute; bottom:20px; left:0; width:100%; padding-left:1px; font-size:13px; line-height:1.2; color:var(--blue); pointer-events:none }
.top-doodle { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 3px 2px #00000014); pointer-events:none }
.top-paper { fill:var(--return-paper) }
.top-fold { fill:var(--return-fold) }
.top-arrow { color:var(--rust) }
.back-to-top:is(:hover,:focus-visible) { background:none; transform:translateY(-5px) rotate(-2deg) }
.back-to-top:active { transform:translateY(-2px) rotate(0) scale(.96) }
.back-to-top:before { display:none }
@media(max-width:720px) {
  .back-to-top.icon-button { right:12px; bottom:max(10px,env(safe-area-inset-bottom)); width:64px; height:82px }
  .back-to-top>span { bottom:17px; font-size:12px }
}
@media(forced-colors:active) {
  .top-paper,.top-fold { fill:Canvas }
  .back-to-top,.back-to-top>span,.top-arrow { color:ButtonText }
}

/* Native CSS cursors: no following element or pointer-move work. The tip is the
   actual hotspot; text selection, resize and touch retain their normal roles. */
@media(hover:hover) and (pointer:fine) {
  html,body { cursor:url('./cursors/arrow.svg') 4 3,default }
  :is(a,button,summary,select,label[for],input[type=checkbox],input[type=radio],[role=button]) { cursor:url('./cursors/hand.svg') 13 3,pointer }
  :is(.prose,pre,code,textarea,input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),[contenteditable=true]) { cursor:url('./cursors/text.svg') 16 16,text }
  .prose :is(a,button,summary) { cursor:url('./cursors/hand.svg') 13 3,pointer }
  :is(button,input,select):disabled { cursor:not-allowed }
}
@media(forced-colors:active) {
  html,body { cursor:auto }
  :is(a,button,summary,select,label[for],input[type=checkbox],input[type=radio],[role=button]),.prose :is(a,button,summary) { cursor:pointer }
  :is(.prose,pre,code,textarea,input:not([type=checkbox]):not([type=radio]),[contenteditable=true]) { cursor:text }
}