/* ---------- fonts (self-hosted: no requests to third parties) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/dm-mono-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Variable";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"Open Sans Variable";font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/open-sans-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans Variable";font-style:italic;font-weight:300 800;font-display:swap;src:url(fonts/open-sans-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Variable";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Variable";font-style:italic;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"Geist Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin-wght-normal.woff2) format("woff2")}

*{box-sizing:border-box}
:root{
  /* --bg, --ink and --accent are overridden by theme.css (edited in the CMS) */
  --bg:#040914;--ink:#e6ebf3;--accent:#a0c3ff;
  --bright:color-mix(in srgb,var(--ink) 70%,#fff);
  --soft:color-mix(in srgb,var(--ink) 76%,var(--bg));
  --dim:color-mix(in srgb,var(--ink) 58%,var(--bg));
  --line:color-mix(in srgb,var(--accent) 17%,transparent);
  --glow:color-mix(in srgb,var(--accent) 55%,transparent);
  --rune:color-mix(in srgb,var(--ink) 75%,var(--accent));
  --panel:color-mix(in srgb,var(--bg) 70%,transparent);
  --focus:var(--accent);
  /* fonts: defaults are the classic serif pair; theme.css (CMS) overrides them for the sans fonts */
  --display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --text:"EB Garamond",Georgia,serif;
  --ds:1;--ts:1;--lhs:1;--dw:400;--h1-track:.075em;--h1-track-m:.035em;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:#fff}
:focus-visible{outline:1px solid var(--focus);outline-offset:4px;border-radius:2px}
[id]{scroll-margin-top:72px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em}
.icon-sm{width:.95em;height:.95em}

.skip{position:fixed;top:12px;left:12px;z-index:50;padding:10px 16px;background:var(--bg);border:1px solid var(--focus);font:12px var(--mono);letter-spacing:.1em;transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}

/* ---------- background ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
body:before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 30%,color-mix(in srgb,var(--bg) 30%,transparent) 70%,rgba(0,0,0,.7) 100%);
}
.site{position:relative;z-index:2}

/* ---------- masthead ---------- */
.masthead{position:fixed;top:0;left:0;right:0;height:96px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;z-index:10;transition:background .6s,height .6s}
.masthead.scrolled,.page-article .masthead{height:72px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 90%,transparent),transparent)}
.mark{font:var(--dw) calc(19px * var(--ds)) var(--display);letter-spacing:.38em;color:var(--bright)}
.mark span{letter-spacing:0;opacity:.6}
nav{display:flex;gap:clamp(18px,3.2vw,50px)}
nav a{position:relative;font:var(--dw) calc(17px * var(--ds)) var(--display);letter-spacing:.09em;color:var(--soft);transition:color .4s,text-shadow .4s}
nav a:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--accent);box-shadow:0 0 8px var(--glow);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
nav a:hover,nav a:focus-visible{color:#fff;text-shadow:0 0 12px var(--glow)}
/* the section you are reading (set by script.js; "notes" on note pages) */
nav a[aria-current]{color:#fff}
nav a[aria-current]:after{transform:scaleX(1)}
/* reading progress along the bottom of the header */
.progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent));opacity:.75;transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:clamp(110px,19vh,210px)}
.hero-title{position:relative;width:100%;text-align:center;padding-inline:20px;z-index:3;will-change:transform,opacity}
h1{
  margin:0;font:var(--dw) calc(clamp(2.9rem,6.4vw,6.4rem) * var(--ds))/calc(1 * var(--lhs)) var(--display);letter-spacing:var(--h1-track);color:var(--bright);
  text-shadow:0 0 18px color-mix(in srgb,var(--accent) 28%,transparent),0 0 70px color-mix(in srgb,var(--accent) 25%,transparent);
  animation:rise 1.8s cubic-bezier(.2,.7,.2,1) both;
}
.tagline{
  margin:1.1em 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:.35em 1.1em;
  font:italic var(--dw) calc(clamp(1.05rem,1.55vw,1.45rem) * var(--ds)) var(--display);letter-spacing:.16em;color:var(--soft);
  animation:rise 1.8s .35s cubic-bezier(.2,.7,.2,1) both;
}
.tagline .dot{font-style:normal;opacity:.55}

.sigil{
  position:relative;flex:none;margin-top:clamp(4px,1.2vh,14px);width:min(42vh,74vw,460px);aspect-ratio:1;z-index:2;
  will-change:transform,opacity;pointer-events:none;
}
.sigil-halo{
  position:absolute;inset:22%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent) 0%,color-mix(in srgb,var(--accent) 10%,transparent) 45%,transparent 70%);
  opacity:var(--halo,.8);filter:blur(6px);
}
.sigil-svg{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 70%,transparent)) drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 45%,transparent))}
.sigil-svg *{vector-effect:non-scaling-stroke}
.crosshair line{stroke:color-mix(in srgb,var(--rune) 42%,transparent);stroke-width:1;stroke-dasharray:1 5;animation:fadeIn 2s .2s both}
.ring-main{fill:none;stroke:color-mix(in srgb,var(--rune) 62%,transparent);stroke-width:1;animation:ringIn 2.2s .3s cubic-bezier(.2,.7,.2,1) both;transform-origin:center}
.ring-dashed circle{fill:none;stroke:color-mix(in srgb,var(--rune) 40%,transparent);stroke-width:1;stroke-dasharray:1.5 7}
.ring-arcs circle{fill:none;stroke:color-mix(in srgb,var(--rune) 22%,transparent);stroke-width:1;stroke-dasharray:150 40 30 40}
.ring-cipher text{font:400 13px var(--mono);fill:color-mix(in srgb,var(--rune) 50%,transparent);text-anchor:middle;dominant-baseline:central}
.ring-outer{fill:none;stroke:color-mix(in srgb,var(--rune) 20%,transparent);stroke-width:1}
.ring-dashed,.ring-arcs,.ring-cipher,.ring-outer{animation:fadeIn 3s .8s both}
.nodes circle{fill:var(--rune);animation:fadeIn 2s 1.4s both}
/* arms and letters scale with the sigil: dash-based drawing (pathLength) breaks in Firefox with non-scaling strokes */
.staves path{
  vector-effect:none;fill:none;stroke:var(--rune);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s cubic-bezier(.55,.1,.25,1) forwards;
}
.staves g:nth-child(1) path{animation-delay:.5s}.staves g:nth-child(2) path{animation-delay:.62s}
.staves g:nth-child(3) path{animation-delay:.74s}.staves g:nth-child(4) path{animation-delay:.86s}
.staves g:nth-child(5) path{animation-delay:.98s}.staves g:nth-child(6) path{animation-delay:1.1s}
.staves g:nth-child(7) path{animation-delay:1.22s}.staves g:nth-child(8) path{animation-delay:1.34s}
.staves .glyph{animation-duration:3.4s;stroke-width:2.25} /* 1.8 / 0.8: the letters are scaled to 80% */
/* a short light travels out along each arm; it enters and leaves out of view, so the loop has no visible jump */
.pulses line{vector-effect:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 300;stroke-dashoffset:10;opacity:.9;animation:pulse 6.4s linear infinite}
.pulses line:nth-child(1){animation-delay:3.2s}.pulses line:nth-child(2){animation-delay:4s}
.pulses line:nth-child(3){animation-delay:4.8s}.pulses line:nth-child(4){animation-delay:5.6s}
.pulses line:nth-child(5){animation-delay:6.4s}.pulses line:nth-child(6){animation-delay:7.2s}
.pulses line:nth-child(7){animation-delay:8s}.pulses line:nth-child(8){animation-delay:8.8s}
.pulses{opacity:0;animation:fadeIn 1s 3s forwards}
.core{fill:none;stroke:color-mix(in srgb,var(--rune) 75%,transparent);stroke-width:1}
.core-dot{fill:#fff;animation:corePulse 3.6s ease-in-out infinite}
.anim-paused .sigil *,.anim-paused .scroll-cue i{animation-play-state:paused!important}

.cipher-caption{position:relative;z-index:3;margin:clamp(2px,1vh,10px) 0 0;font:300 11px var(--mono);letter-spacing:.24em;color:var(--dim);animation:fadeIn 2s 2.6s both;will-change:opacity}
.cipher-caption sub{font-size:.75em;letter-spacing:0}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;font:300 10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(color-mix(in srgb,var(--rune) 70%,transparent),transparent);animation:cue 2.6s ease-in-out infinite;transform-origin:top}

/* ---------- shared content ---------- */
.kind,.keywords,dt,footer,.entry-no,.cc-label,.note-meta,.back{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.chapter{max-width:1180px;margin:auto;padding:18vh 6vw;border-top:1px solid var(--line);display:grid;grid-template-columns:200px 1fr;gap:6vw}
/* section title: numbered, and pinned beside the section while you read it */
.chapter-head{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:12px;padding:4px 0 6px 18px;border-left:1px solid var(--line);transition:border-color .6s}
.is-current>.chapter-head{border-left-color:var(--accent)}
.chapter-num{font:400 12px var(--mono);letter-spacing:.24em;color:var(--accent)}
.chapter-head h2{margin:0;font:var(--dw) calc(clamp(1.8rem,2.4vw,2.4rem) * var(--ds))/calc(1.05 * var(--lhs)) var(--display);color:var(--bright);text-wrap:balance}
.chapter-content{max-width:820px}
.pill{display:inline-flex;align-items:center;gap:.6em;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font:400 12px var(--mono);letter-spacing:.08em;color:var(--soft);background:var(--panel);transition:color .3s,border-color .3s,box-shadow .3s}
.pill:hover,.pill:focus-visible{color:#fff;border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 18%,transparent)}

/* ---------- work ---------- */
.entry{display:grid;grid-template-columns:40px 1fr;gap:30px;padding:0 0 90px;margin-bottom:90px;border-bottom:1px solid var(--line)}
.entry:last-child{margin:0;padding-bottom:0;border:0}
.entry-no{padding-top:10px}
.kind{margin:0 0 20px}
.entry h3{font:var(--dw) calc(clamp(2.2rem,4vw,4.4rem) * var(--ds))/calc(.95 * var(--lhs)) var(--display);letter-spacing:-.01em;margin:0 0 24px;color:var(--bright);text-shadow:0 0 30px color-mix(in srgb,var(--accent) 15%,transparent);text-wrap:balance}
.entry p:not(.kind):not(.keywords):not(.entry-links){font:400 calc(18px * var(--ts))/1.6 var(--text);color:var(--soft);max-width:630px;margin:0}
.keywords{margin:28px 0 0}
.entry-links{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(36px,5vw,72px);align-items:start;max-width:900px}
.portrait{margin:0;position:sticky;top:110px}
.portrait-frame{position:relative;aspect-ratio:4/5;border:1px solid var(--line);padding:10px;background:var(--panel)}
.portrait-frame:before,.portrait-frame:after{content:"";position:absolute;width:18px;height:18px;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent)}
.portrait-frame:before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.portrait-frame:after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02)}
.portrait figcaption{margin-top:16px;font:400 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.lead{margin:0 0 22px;font:400 calc(21px * var(--ts))/1.5 var(--text);color:var(--ink)}
.bio{font:calc(17px * var(--ts))/1.65 var(--text);color:var(--soft)}.bio p{margin:0 0 18px}
.bio a,.prose a,.contact-intro a{color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
dl{margin:36px 0 0;border-top:1px solid var(--line)}
dl div{display:grid;grid-template-columns:100px 1fr;gap:15px;padding:12px 0;border-bottom:1px solid var(--line)}
dt{padding-top:3px}dd{margin:0;color:var(--soft);font:calc(15px * var(--ts)) var(--text)}
.about-actions{margin:30px 0 0}

/* ---------- notes ---------- */
.note-list{display:grid;gap:18px}
.note-card{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;padding:18px;border:1px solid var(--line);background:var(--panel);transition:border-color .4s,transform .4s,box-shadow .4s}
.note-card:hover,.note-card:focus-visible{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px);box-shadow:0 10px 40px -20px color-mix(in srgb,var(--accent) 45%,transparent)}
.note-thumb{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line)}
.note-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.note-card:hover .note-thumb img{transform:scale(1.04)}
.note-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.note-title{font:var(--dw) calc(clamp(1.5rem,2.3vw,2rem) * var(--ds))/calc(1.1 * var(--lhs)) var(--display);color:var(--bright)}
.note-summary{font:calc(16px * var(--ts))/1.55 var(--text);color:var(--soft)}
.note-more{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- contact ---------- */
.end{min-height:100vh;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:12vh 6vw}
/* the contact sigil is the hero sigil at a smaller size: same markup and styles, but static
   (no draw-in or pulses); it only turns a little as the section scrolls into view */
.echo-sigil{position:relative;width:min(170px,44vw);aspect-ratio:1;margin-bottom:40px;transform:rotate(var(--echo-rot,0deg))}
.echo-sigil *{animation:none!important}
.echo-sigil .staves path{stroke-dashoffset:0}
.echo-sigil .sigil-halo{opacity:.8}
.end .chapter-head{position:static;align-self:center;align-items:center;margin:0 0 26px;padding:0;border:0}
.end .chapter-head h2{font-size:calc(clamp(2.8rem,5.4vw,4.8rem) * var(--ds));text-shadow:0 0 40px color-mix(in srgb,var(--accent) 20%,transparent)}
.contact-intro{max-width:600px;margin:0 auto;font:calc(20px * var(--ts))/1.6 var(--text);color:var(--soft)}
.contact-grid{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(100%,760px);text-align:left}
.contact-card{display:flex;align-items:center;gap:16px;height:100%;padding:18px 20px;border:1px solid var(--line);background:var(--panel);transition:border-color .3s,box-shadow .3s}
a.contact-card:hover,a.contact-card:focus-visible{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 15%,transparent)}
.cc-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line);color:var(--accent);font-size:18px}
.cc-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.cc-label{font-size:10px}
.cc-value{font:400 14px var(--mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- footer ---------- */
footer{padding:24px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 60%,transparent))}

/* ---------- article pages (notes, privacy) ---------- */
.page-article main{padding:130px 22px 12vh}
.article{max-width:760px;margin:0 auto}
.back{display:inline-flex;gap:8px;margin-bottom:48px;transition:color .3s}
.back:hover{color:#fff}
.article-head h1{font-size:calc(clamp(2.6rem,5.4vw,4.6rem) * var(--ds));line-height:calc(1.02 * var(--lhs));letter-spacing:0;text-wrap:balance;margin:14px 0 0}
.article-lead{margin:26px 0 0;font:italic var(--dw) calc(clamp(1.25rem,2vw,1.55rem) * var(--ds))/calc(1.45 * var(--lhs)) var(--display);color:var(--soft)}
.article-cover{margin:48px 0 0}
.article-cover img,.prose figure img{display:block;width:100%;border:1px solid var(--line)}
figcaption{margin-top:12px;font:calc(15px * var(--ts))/1.5 var(--text);font-style:italic;color:var(--dim)}
.prose{margin-top:48px;font:calc(19px * var(--ts))/1.72 var(--text);color:var(--soft)}
.prose>*{margin:0 0 1.15em}
.prose h2{margin:2em 0 .6em;font:var(--dw) calc(2rem * var(--ds))/calc(1.15 * var(--lhs)) var(--display);color:var(--bright)}
.prose h3,.prose h4{margin:1.8em 0 .5em;font:var(--dw) calc(1.5rem * var(--ds))/calc(1.2 * var(--lhs)) var(--display);color:var(--bright)}
.prose strong{color:var(--ink);font-weight:400;border-bottom:1px solid var(--line)}
.prose ul,.prose ol{padding-left:1.3em}.prose li{margin:.35em 0}
.prose li::marker{color:var(--accent)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:2px solid var(--accent);font:italic var(--dw) calc(1.45rem * var(--ds))/calc(1.45 * var(--lhs)) var(--display);color:var(--ink)}
.prose blockquote p{margin:0}
.prose code{font:400 .8em var(--mono);padding:.15em .4em;border:1px solid var(--line);background:var(--panel);border-radius:3px;color:var(--ink)}
.prose pre{overflow-x:auto;padding:20px 22px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 85%,transparent);border-radius:4px}
.prose pre code{padding:0;border:0;background:none;font-size:14px;line-height:1.6}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose figure{margin:2em 0}
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:80px;padding-top:30px;border-top:1px solid var(--line)}
.article-nav a{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border:1px solid var(--line);background:var(--panel);font:var(--dw) calc(1.25rem * var(--ds))/calc(1.25 * var(--lhs)) var(--display);color:var(--ink);transition:border-color .3s}
.article-nav a:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.article-nav .next{text-align:right;grid-column:2}

.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1.4s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes ringIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%{stroke-dashoffset:10}55%,100%{stroke-dashoffset:-104}}
@keyframes corePulse{0%,100%{opacity:.55;r:2}50%{opacity:1;r:3.2}}
@keyframes cue{0%{transform:scaleY(0);opacity:0}35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(20px);opacity:0}}

@media(max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .portrait{position:static;max-width:280px}
}
@media(max-width:700px){
  .masthead{height:68px;padding:0 20px}.masthead.scrolled,.page-article .masthead{height:60px}
  .mark{font-size:15px;letter-spacing:.28em}
  nav{gap:14px}nav a{font-size:15px;letter-spacing:.03em;padding:8px 0}
  .hero{padding-top:clamp(96px,17vh,150px)}h1{font-size:calc(10.4vw * var(--ds));letter-spacing:var(--h1-track-m);white-space:nowrap}
  .tagline{font-size:calc(14px * var(--ts));letter-spacing:.05em;gap:.2em .55em}
  .sigil{margin-top:10px;width:min(84vw,40vh)}
  .cipher-caption{font-size:10px;letter-spacing:.16em}
  .chapter{padding:14vh 22px;display:block}.chapter-head{position:static;margin-bottom:44px}
  .entry{grid-template-columns:25px 1fr;gap:14px;padding-bottom:60px;margin-bottom:60px}
  .entry h3{font-size:calc(2.4rem * var(--ds))}.entry p:not(.kind):not(.keywords):not(.entry-links){font-size:calc(17px * var(--ts))}
  .note-card{grid-template-columns:1fr;gap:18px}
  .contact-grid{grid-template-columns:1fr}
  .end{padding:12vh 22px}.end .chapter-head h2{font-size:calc(3rem * var(--ds))}.contact-intro{font-size:calc(18px * var(--ts))}
  .page-article h1{white-space:normal;font-size:calc(2.5rem * var(--ds))}
  .prose{font-size:calc(18px * var(--ts))}
  .article-nav{grid-template-columns:1fr}.article-nav .next{grid-column:1}
  footer{padding:20px 22px;font-size:10px}
}
@media(max-width:360px){nav{gap:10px}nav a{font-size:13px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .staves path{stroke-dashoffset:0}
  .pulses{display:none}
  .js .reveal{opacity:1;transform:none}
}

@media print{
  #bg,body:before,.masthead,.skip,.sigil,.cipher-caption,.scroll-cue,.echo-sigil,.note-thumb,.article-nav,.back{display:none!important}
  html,body{background:#fff;color:#000}
  :root{--ink:#000;--soft:#222;--dim:#555;--bright:#000;--line:#ccc;--panel:transparent}
  *{text-shadow:none!important;box-shadow:none!important}
  .hero{height:auto;min-height:0;padding:0 0 24px}
  .js .reveal{opacity:1;transform:none}
  .chapter,.end{padding:24px 0;min-height:0;break-inside:avoid}
  .end{align-items:flex-start;text-align:left}
  .page-article main{padding:0}
}