/* Darshanika Panda — site styles. Tokens first, everything else reads from them. */
:root{
  --paper:#FFFFFF; --ground:#F4F1EC; --ink:#3F2021; --ox:#76232F; --rule:#D7D2CB; --mute:#8C8580; --body:#4A3A3B;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --dur-1:120ms; --dur-2:220ms; --dur-3:340ms; --dur-4:520ms;
  --ease-out:cubic-bezier(.2,0,0,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --measure:66ch; --gutter:clamp(20px,5vw,72px);
  --t-1:clamp(13px,.85vw,14px); --t0:clamp(16px,1.1vw,18px); --t1:clamp(20px,1.6vw,24px);
  --t2:clamp(28px,2.6vw,36px); --t3:clamp(36px,4.2vw,58px);
  --s1:8px; --s2:16px; --s3:28px; --s4:48px; --s5:clamp(64px,9vw,128px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font:400 var(--t0)/1.6 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;font:500 13px var(--sans);z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}

/* header: oxblood bar */
.top{position:sticky;top:0;z-index:20;background:var(--ox);color:#fff}
.top .in{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter);gap:24px}
.top .name{font:400 18px/1 var(--serif);letter-spacing:-.01em;text-decoration:none;color:#fff}
.top nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.top ul{display:flex;gap:clamp(14px,2.2vw,28px);list-style:none;font:500 12px/1 var(--sans);letter-spacing:.06em}
.top a.nav.side{font:500 12px/1 var(--sans);letter-spacing:.06em;padding-left:clamp(16px,2.4vw,36px);border-left:1px solid rgba(255,255,255,.35)}
.top a.nav{text-decoration:none;position:relative;padding:8px 0;min-height:24px;display:inline-block;color:rgba(255,255,255,.82);transition:color var(--dur-2) var(--ease-out)}
.top a.nav::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:#fff;transition:width var(--dur-1) var(--ease-out)}
.top a.nav:hover,.top a.nav:focus-visible,.top a.nav[aria-current]{color:#fff}
.top a.nav:hover::after,.top a.nav:focus-visible::after,.top a.nav[aria-current]::after{width:100%}
.top :focus-visible{outline-color:#fff}
@media (max-width:720px){.top ul{display:none}.top a.nav.side{border-left:0;padding-left:0}}

/* margin rule: reading position */
.progress{position:fixed;left:0;top:0;width:2px;height:100vh;background:var(--rule);z-index:19;pointer-events:none}
.progress i{display:block;width:100%;height:100%;background:var(--ox);transform-origin:top;transform:scaleY(0)}
@supports (animation-timeline: scroll()){
  .progress i{animation:fill linear both;animation-timeline:scroll(root)}
  @keyframes fill{to{transform:scaleY(1)}}
}

/* sections */
section{padding:var(--s5) var(--gutter)}
.wrap{max-width:1180px;margin:0 auto}
.lab{font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ox);margin-bottom:var(--s2)}
.h2{font-size:var(--t2);margin-bottom:var(--s3)}
.prose{max-width:var(--measure);color:var(--body)}
.prose p+p{margin-top:1em}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s4)}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.sticky{position:sticky;top:96px;align-self:start}
hr.rule{border:0;border-top:1px solid var(--rule);margin:0 var(--gutter)}

/* hero */
.hero{min-height:calc(100svh - 57px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);padding:0}
.hero .side{display:flex;flex-direction:column;padding:40px var(--gutter) 40px;order:1}
.hero .body{margin:auto 0;max-width:560px}
.hero h1{font-size:clamp(44px,5.6vw,84px);margin:var(--s2) 0 var(--s2);letter-spacing:-.03em}
.hero .strap{font:italic 400 var(--t1)/1.3 var(--serif);color:var(--ox);margin-bottom:var(--s3);text-wrap:balance}
.hero .prose{margin-bottom:var(--s4);max-width:46ch}
.hero .roles{margin-top:auto;padding-top:var(--s3)}
.hero .roles .hand{font-size:22px;color:var(--mute)}
.hero .field{position:relative;order:2;background:var(--ground);display:grid;place-items:center;padding:2vh 3vw;min-height:520px;border-left:1px solid var(--rule)}
.doodleframe{position:relative;width:min(100%,calc((100svh - 57px - 4vh) * .79),860px);aspect-ratio:600/760}
.doodleframe .cv{position:absolute;left:50.5%;top:39.6%;width:54%;transform:translate(-50%,-50%);box-shadow:0 30px 50px -30px rgba(63,32,33,.4);z-index:1}
.doodleframe .dd{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}
.doodleframe .dd.back{z-index:0}
.dd .blobs *{fill:var(--ox);fill-opacity:.14}
.dd .dd-el{overflow:visible}
.dd .dd-el path{fill:var(--ink)}
.dd .dd-el.frame path{fill:none;stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke}
.dd .dd-el.soft path{fill:var(--ox);fill-opacity:.55}
.dd .note{font:400 20px 'Caveat',cursive;fill:var(--ox)}
/* arrival: the frame first, then the doodles one by one, then the notes */
.js .dd .dd-el{opacity:0;transform:translateY(6px);transform-box:fill-box;animation:ddpop 520ms var(--ease-out) forwards}
.js .dd .dd-el:nth-of-type(1){animation-delay:100ms}.js .dd .dd-el:nth-of-type(2){animation-delay:500ms}
.js .dd .dd-el:nth-of-type(3){animation-delay:600ms}.js .dd .dd-el:nth-of-type(4){animation-delay:700ms}
.js .dd .dd-el:nth-of-type(5){animation-delay:800ms}.js .dd .dd-el:nth-of-type(6){animation-delay:900ms}
.js .dd .dd-el:nth-of-type(7){animation-delay:1000ms}.js .dd .dd-el:nth-of-type(8){animation-delay:1100ms}
.js .dd .dd-el:nth-of-type(9){animation-delay:1200ms}.js .dd .dd-el:nth-of-type(10){animation-delay:1300ms}
.js .dd .dd-el:nth-of-type(11){animation-delay:1400ms}.js .dd .dd-el:nth-of-type(12){animation-delay:1500ms}
.js .dd .dd-el:nth-of-type(13){animation-delay:1600ms}.js .dd .dd-el:nth-of-type(14){animation-delay:1700ms}
.js .dd .dd-el:nth-of-type(15){animation-delay:1800ms}
.js .dd .blobs,.js .dd .note{opacity:0;animation:ddfade 600ms var(--ease-out) forwards}
.js .dd .blobs{animation-delay:1500ms}.js .dd .note{animation-delay:2000ms}
@keyframes ddpop{to{opacity:1;transform:translateY(0)}}
@keyframes ddfade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .dd .dd-el,.js .dd .blobs,.js .dd .note{animation:none;opacity:1;transform:none}}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:0}.hero .field{order:1;min-height:0;border-left:0;border-bottom:1px solid var(--rule);padding:48px 12vw 64px}.hero .side{order:2}}
form.inline{display:grid;gap:10px;max-width:440px}
form.inline .row{display:flex;gap:8px}
form.inline input{flex:1;min-width:0;font:400 16px var(--sans);padding:0 14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);min-height:48px}
form.inline input:focus{border-color:var(--ox);outline:none}
form.inline small{font:400 12px/1.5 var(--sans);color:var(--mute)}

/* erasure block */
.erasure-wrap{max-width:760px;margin:0 auto}
.page{position:relative;background:var(--paper);border:1px solid var(--rule);padding:clamp(28px,5vw,56px) clamp(24px,6vw,64px) clamp(40px,5vw,56px);box-shadow:0 40px 80px -60px rgba(63,32,33,.35)}
.page .run{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-align:center;margin-bottom:var(--s3)}
.page .no{font:400 11px var(--sans);color:var(--mute);text-align:center;margin-top:var(--s3)}
.erasure{position:relative;font:300 18px/1.75 var(--serif);color:var(--ink)}
.erasure>p{position:relative;color:#8A7577}
.erasure b{font-weight:400;color:var(--ink);position:relative;z-index:3;white-space:nowrap;padding:.05em .3em;border-radius:50%;background:var(--paper);box-shadow:0 0 0 2px var(--paper)}
.erasure svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.erasure path{fill:none;stroke:var(--ox);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.88;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.erasure.play path{animation:draw 420ms linear forwards;animation-delay:var(--d)}
.erasure.undo path{animation:none;stroke-dashoffset:0;transition:opacity var(--dur-3) var(--ease-out);opacity:0}
@keyframes draw{to{stroke-dashoffset:0}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.erasure.play path{animation:none;stroke-dashoffset:0}}

/* buttons */
.btn{display:inline-block;background:var(--ox);color:#fff;text-decoration:none;padding:14px 22px;font:500 13px/1 var(--sans);letter-spacing:.04em;border:0;cursor:pointer;transition:background var(--dur-2) var(--ease-out)}
.btn:hover,.btn:focus-visible{background:var(--ink)}
.ghost{background:none;border:0;cursor:pointer;color:var(--mute);font:500 13px/1 var(--sans);text-decoration:underline;text-underline-offset:4px;padding:8px 0;min-height:24px}
.ghost:hover,.ghost:focus-visible{color:var(--ox)}

/* about */
.lead-p{font:400 var(--t1)/1.4 var(--serif);color:var(--ink);max-width:30ch;margin-bottom:var(--s3);text-wrap:pretty}
.creds{list-style:none;font:400 var(--t-1)/1.5 var(--sans);color:var(--body);display:grid;gap:14px;margin-top:var(--s4);position:relative;padding-left:22px}
.creds::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:0;border-left:1px dashed var(--ox)}
.creds li{display:grid;grid-template-columns:52px 1fr;gap:12px;position:relative}
.creds li::before{content:"";position:absolute;left:-22px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ox)}
.creds li:first-child::before{background:var(--ox)}
.creds b{font-weight:500;color:var(--ox)}
/* venn: three orbs drift in, breathe, and answer to the hand */
.venn-row{margin-top:var(--s5);text-align:center}
.venn{width:min(100%,820px);margin:0 auto;display:block;overflow:visible}
.venn .fill{fill:var(--ox);fill-opacity:.06;stroke:none;mix-blend-mode:multiply;transition:fill-opacity var(--dur-3) var(--ease-out)}
.venn .line{fill:none;stroke:var(--ox);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.venn .line.l0{stroke:var(--ink);stroke-width:1.3;opacity:1}
.venn .line.l2{opacity:.5}
.venn .line{stroke-dasharray:1140;stroke-dashoffset:0}
.js .venn:not(.in) .line{stroke-dashoffset:1140}
.venn .line{transition:stroke-dashoffset 1400ms var(--ease-out)}
.venn .line.l1{transition-delay:200ms}.venn .line.l2{transition-delay:400ms}
.venn .name{font:italic 400 30px var(--serif);letter-spacing:-.01em;fill:var(--ink)}
.venn .sub{font:400 10px var(--sans);letter-spacing:.01em;fill:var(--mute)}
.venn .hand text{font:400 18px 'Caveat',cursive;fill:var(--ox);opacity:.9;transition:opacity var(--dur-3) var(--ease-out)}
.venn .c{font:italic 400 20px var(--serif);fill:var(--ox);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.75}50%{opacity:1}}
.venn .px{will-change:transform}
.venn .orb{cursor:pointer;outline:none}
.venn .orb:hover .fill,.venn .orb:focus-visible .fill,.venn .orb.on .fill{fill-opacity:.16}
.venn .orb:hover .line,.venn .orb:focus-visible .line,.venn .orb.on .line{stroke:var(--ox);stroke-width:1.8}
.venn .orb .fl{animation:breathe 7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.venn .research .fl{animation-duration:8.5s;animation-delay:-3s}
.venn .poetry .fl{animation-duration:9.5s;animation-delay:-6s}
@keyframes breathe{from{transform:translate(0,0) rotate(0)}to{transform:translate(4px,-7px) rotate(1.2deg)}}
/* drift in: the three practices arrive from apart and settle into overlap */
.js .venn .orb{transition:transform var(--dur-4) var(--ease-out);transition-delay:var(--od,0ms)}
.js .venn:not(.in) .law{transform:translate(90px,53px)}
.js .venn:not(.in) .research{transform:translate(-90px,53px);--od:0ms}
.js .venn:not(.in) .poetry{transform:translate(0,-107px);--od:0ms}
.js .venn:not(.in) .hand text,.js .venn:not(.in) .c,.js .venn:not(.in) .name,.js .venn:not(.in) .sub{opacity:0}
.venn .hand text,.venn .c,.venn .name,.venn .sub{transition:opacity var(--dur-4) var(--ease-out) 400ms}
@supports (animation-timeline: view()){
  .js .venn .law{transition:none;animation:inLaw linear both;animation-timeline:view();animation-range:entry 15% cover 45%}
  .js .venn .research{transition:none;animation:inRes linear both;animation-timeline:view();animation-range:entry 15% cover 45%}
  .js .venn .poetry{transition:none;animation:inPoe linear both;animation-timeline:view();animation-range:entry 15% cover 45%}
  .js .venn .hand text,.js .venn .c,.js .venn .name,.js .venn .sub{transition:none;animation:fadeIn linear both;animation-timeline:view();animation-range:cover 30% cover 50%}
  .js .venn:not(.in) .law,.js .venn:not(.in) .research,.js .venn:not(.in) .poetry{transform:none}
  .js .venn:not(.in) .hand text,.js .venn:not(.in) .c,.js .venn:not(.in) .name,.js .venn:not(.in) .sub{opacity:1}
  @keyframes inLaw{from{transform:translate(90px,53px)}to{transform:none}}
  @keyframes inRes{from{transform:translate(-90px,53px)}to{transform:none}}
  @keyframes inPoe{from{transform:translate(0,-107px)}to{transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
}
.venn-fact{margin:var(--s3) auto 0;max-width:56ch;font:italic 400 var(--t0)/1.5 var(--serif);color:var(--body);min-height:3em;transition:opacity var(--dur-2) var(--ease-out)}
.venn-fact.swap{opacity:0}
@media (prefers-reduced-motion:reduce){.venn .orb .fl{animation:none}.venn .c{animation:none}.js .venn .name,.js .venn .sub{opacity:1!important;animation:none!important}.venn .line{transition:none;stroke-dashoffset:0!important}.js .venn .orb{transition:none;transform:none!important;animation:none!important}.js .venn .hand text,.js .venn .c{opacity:1!important;animation:none!important}}

/* bridge */
.bridge{background:var(--paper);text-align:center}
.bridge blockquote{font:300 var(--t2)/1.25 var(--serif);max-width:34ch;margin:0 auto;letter-spacing:-.01em}
.bridge blockquote i{font-style:italic}
.bridge cite{display:block;margin-top:var(--s3);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-style:normal}
.bridge cite a{color:var(--ox)}

/* poems */
.lead-poems{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-bottom:var(--s5)}
@media (max-width:820px){.lead-poems{grid-template-columns:1fr}}
.poem h3{font-size:var(--t1);margin-bottom:var(--s2)}
.poem .lines{font:300 var(--t0)/1.5 var(--serif);white-space:pre-line;color:var(--body)}
.poem .pub{margin-top:var(--s2);font:500 12px/1.5 var(--sans);letter-spacing:.06em}
.poem .pub a{color:var(--ox);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-1) var(--ease-out)}
.poem .pub a:hover,.poem .pub a:focus-visible{border-color:var(--ox)}
.list{list-style:none;border-top:1px solid var(--rule)}
.list li{display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule);font-size:var(--t0);position:relative}
.list li::before{content:"";position:absolute;inset:0 -12px;background:var(--ground);opacity:0;transform:scaleX(.98);transform-origin:left;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);z-index:-1}
.list li:hover::before,.list li:focus-within::before{opacity:1;transform:none}
.list .t,.list .where,.list .n{transition:transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.list li:hover .t,.list li:focus-within .t{transform:translateX(10px)}
.list li:hover .where,.list li:focus-within .where{transform:translateX(-6px);color:var(--ink)}
.list li:hover .n,.list li:focus-within .n{color:var(--ox)}
.list .n{font:500 12px var(--sans);color:var(--mute)}
.list .t{font-weight:400}
.list .where{font:400 var(--t-1) var(--sans);color:var(--mute);text-align:right}
.list a{text-decoration:none;color:var(--ox);border-bottom:1px solid transparent;transition:border-color var(--dur-1) var(--ease-out)}
.list a:hover,.list a:focus-visible{border-color:var(--ox)}
@media (max-width:600px){.list li{grid-template-columns:34px 1fr}.list .where{grid-column:2;text-align:left}}

/* research */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (max-width:820px){.cards{grid-template-columns:1fr}}
.card{border-top:1px solid var(--ink);padding-top:var(--s2)}
.card .k{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.card h3{font-size:var(--t1);margin-bottom:10px}
.card p{color:var(--body);font-size:var(--t-1);line-height:1.6}

/* notes teaser */
.notes .topics{list-style:none;columns:2;column-gap:var(--s4);font-size:var(--t0);color:var(--body)}
.notes .topics li{break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--rule)}
@media (max-width:720px){.notes .topics{columns:1}}

/* contact + register */
.contact .links{list-style:none;display:grid;gap:12px;font:500 var(--t-1)/1.4 var(--sans);letter-spacing:.04em}
.contact .links a{text-decoration:none;color:var(--ox)}
.contact .links a:hover,.contact .links a:focus-visible{text-decoration:underline;text-underline-offset:4px}
form.reg{display:grid;gap:12px;max-width:420px}
form.reg label{font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
form.reg input{font:400 16px var(--sans);padding:14px 14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);min-height:44px}
form.reg input:focus{border-color:var(--ox);outline:none}
form.reg small{font:400 12px/1.5 var(--sans);color:var(--mute)}

/* contact rail + footer */
.rail{position:fixed;right:22px;bottom:36px;z-index:25;display:flex;flex-direction:row;gap:20px;writing-mode:vertical-rl;transform:rotate(180deg)}
.rail a{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding:4px 0;transition:color var(--dur-2) var(--ease-out)}
.rail a:hover,.rail a:focus-visible{color:var(--ox)}
@media (max-width:1180px){.rail{display:none}}
footer{padding:var(--s4) var(--gutter);border-top:1px solid var(--rule);display:grid;gap:var(--s3);font:400 12px/1.5 var(--sans);color:var(--mute);letter-spacing:.04em}
footer .fc .lab{margin-bottom:8px}
footer .fl{font:400 var(--t-1)/1.6 var(--sans);letter-spacing:.02em;color:var(--ink)}
footer .fl a{color:var(--ox);text-decoration:none}
footer .fl a:hover,footer .fl a:focus-visible{text-decoration:underline;text-underline-offset:4px}
footer .fm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:var(--s2);border-top:1px solid var(--rule)}

/* reveals: content is visible by default; motion is layered on top */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(12px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);transition-delay:var(--rd,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .list .rv{transform:translateY(22px);transition-duration:var(--dur-4)}
@supports (animation-timeline: view()){
  .js .rv{transition:none;animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  .js .rv.in{animation:rise linear both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}


/* hand layer: annotations, sticky notes, tape, doodles */
.hand{font:400 22px/1.15 'Caveat',cursive;color:var(--ox);letter-spacing:0}
.note{position:absolute;background:#F6E27A;color:#2A2018;padding:14px 16px 16px;width:170px;font:400 20px/1.15 'Caveat',cursive;
  box-shadow:0 12px 24px -14px rgba(0,0,0,.45);transform:rotate(var(--r,-3deg));z-index:2}
.note::before{content:"";position:absolute;left:50%;top:-8px;width:64px;height:16px;margin-left:-32px;background:rgba(255,255,255,.55);transform:rotate(-1deg)}
.tape{position:absolute;width:74px;height:22px;background:rgba(232,224,204,.85);transform:rotate(var(--r,-4deg));box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:2}
.frame{position:relative;display:inline-block}
.frame img{display:block}
.doodle{position:absolute;fill:none;stroke:var(--ox);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.about-fig{position:relative;padding:18px 26px 26px 18px;margin-left:48px;margin-bottom:40px}
.about-fig .main{position:relative;z-index:1;box-shadow:0 30px 50px -34px rgba(63,32,33,.5)}
.about-fig .second{position:absolute;left:-76px;top:118px;width:42%;transform:rotate(-8deg);z-index:0;filter:grayscale(1);box-shadow:0 20px 40px -24px rgba(63,32,33,.5);border:6px solid #fff}
.about-fig .pk{position:absolute;z-index:2}
.about-fig .pk path{fill:var(--ox)}
.about-fig .tape{z-index:3}
.about-fig .cap{margin-top:16px;font:400 19px/1.2 'Caveat',cursive;color:var(--ox);transform:rotate(-1.5deg);white-space:nowrap}
.def{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:var(--s3) 0;max-width:var(--measure)}
.def .w{font:400 var(--t2)/1 var(--serif);letter-spacing:-.02em}
.def .ph{font:400 var(--t-1) var(--sans);color:var(--mute);margin-left:10px}
.def .pos{font:italic 300 var(--t0) var(--serif);color:var(--mute)}
.def p{margin-top:12px;color:var(--body)}
.margin-note{position:absolute;right:22px;top:16px;width:120px;text-align:right;font:400 19px/1.15 'Caveat',cursive;color:var(--ox);transform:rotate(3deg)}
@media (max-width:1100px){.margin-note{display:none}}
.poems-head{position:relative}
.poems-head .note{right:0;top:-12px;--r:4deg}
@media (max-width:820px){.poems-head .note{position:static;display:inline-block;margin-bottom:var(--s3)}}

/* blog */
.blog-hero{position:relative;overflow:hidden;background:var(--ground);padding:var(--s5) var(--gutter) var(--s4)}
.blog-hero::before{content:attr(data-word);position:absolute;right:-2vw;bottom:-6vw;font:400 clamp(160px,26vw,420px)/1 'Caveat',cursive;color:var(--ox);opacity:.05;pointer-events:none;transform:rotate(-6deg)}
.blog-hero .wrap{position:relative}
.blog-hero h1{font-size:var(--t3)}
.blog-hero .sub{margin-top:var(--s2);font-size:24px}
.blog-hero .note{right:var(--gutter);top:-10px}
@media (max-width:820px){.blog-hero .note{position:static;display:inline-block;margin-top:var(--s3)}}
.papers{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding-top:var(--s2)}
@media (max-width:900px){.papers{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.papers{grid-template-columns:1fr}}
.paper{position:relative;background:var(--paper);border:1px solid var(--rule);padding:var(--s4) var(--s3) var(--s3);min-height:300px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 30px 50px -40px rgba(63,32,33,.45);transform:rotate(var(--r,0deg));transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.paper:hover,.paper:focus-within{transform:rotate(0) translateY(-6px);box-shadow:0 40px 60px -40px rgba(63,32,33,.55)}
.paper .tape{left:50%;top:-11px;margin-left:-37px;--r:-2deg}
.paper time{align-self:flex-start;font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ox);border:1px solid var(--ox);padding:6px 8px;transform:rotate(-3deg)}
.paper h3{font-size:var(--t1);line-height:1.15;margin-top:6px}
.paper h3 a{text-decoration:none}
.paper h3 a::after{content:"";position:absolute;inset:0}
.paper p{color:var(--body);font-size:var(--t-1);line-height:1.6}
.paper .tag{margin-top:auto;font:400 20px/1 'Caveat',cursive;color:var(--ox)}
.topics-strip{background:var(--ground)}
.topics-strip .lead{font-size:24px;margin-bottom:var(--s3)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:14px 26px;max-width:960px}
.tags li{font:400 22px/1.2 'Caveat',cursive;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:2px;transform:rotate(var(--r,0deg))}
.tags li:nth-child(odd){--r:-1deg}.tags li:nth-child(3n){--r:1.4deg}
.article{max-width:var(--measure);margin:0 auto;position:relative}
.article h1{font-size:var(--t2);margin-bottom:var(--s2)}
.article .meta{font:500 12px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:var(--s3);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.article .meta .hand{font-size:20px;letter-spacing:0;text-transform:none}
.stamp-date{border:1px solid var(--ox);color:var(--ox);padding:6px 8px;transform:rotate(-3deg);display:inline-block}
.article .stand{font:italic 300 var(--t1)/1.35 var(--serif);color:var(--ox);margin-bottom:var(--s4)}
.article .body{font-size:var(--t0);color:var(--body)}
.article .body p+p{margin-top:1.1em}
.article .body h2{font-size:var(--t1);margin:var(--s4) 0 var(--s2);color:var(--ink)}
.article .body blockquote{position:relative;border-left:2px solid var(--ox);padding-left:var(--s2);font-style:italic;margin:var(--s3) 0;color:var(--ink)}
.article .mnote{position:absolute;left:calc(100% + 18px);top:6px;width:140px;font-style:normal;font-size:19px;transform:rotate(3deg)}
@media (max-width:1100px){.article .mnote{display:none}}
.back{font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ox);text-decoration:none;display:inline-block;margin-bottom:var(--s4)}
.back-row{margin-top:var(--s5)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-4)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}


/* more from the moodboard */
.stamp{position:absolute;right:-8px;top:-14px;width:78px;height:92px;background:var(--ground);border:1px solid var(--rule);padding:6px;transform:rotate(7deg);z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--rule)}
.stamp::before{content:"";position:absolute;inset:4px;border:1px solid var(--ox)}
.stamp i{font:italic 300 9.5px/1.2 var(--serif);color:var(--ox);text-align:center}
.stamp b{font:500 20px var(--sans);letter-spacing:.06em;color:var(--ox)}
.poem{position:relative}
.poem .mn{position:absolute;left:0;top:-30px;font:400 19px/1 'Caveat',cursive;color:var(--ox);transform:rotate(-2deg)}
.bridge{position:relative;overflow:hidden}
.bridge::before{content:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);font:400 clamp(90px,16vw,240px)/1 'Caveat',cursive;color:var(--ox);opacity:.06;white-space:nowrap;pointer-events:none}
.bridge blockquote,.bridge cite{position:relative}
.page{overflow:visible}
.js .paper.rv.in{transform:rotate(var(--r,0deg))}
.js .paper.rv.in:hover,.js .paper.rv.in:focus-within{transform:rotate(0) translateY(-6px)}


/* dark screen */
.dark{background:var(--ox);color:#fff;text-align:center;padding:calc(var(--s5) * 1.2) var(--gutter)}
.dark .big{font:300 clamp(34px,5vw,72px)/1.1 var(--serif);letter-spacing:-.02em;max-width:22ch;margin:0 auto;text-wrap:balance}
.dark .big i{font-style:italic}
.dark .who{margin-top:var(--s3);font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65)}

/* lead poems as bands */
.bands{margin-bottom:var(--s5);border-top:1px solid var(--ink)}
.band{display:grid;grid-template-columns:200px 1fr 1.2fr;gap:var(--s3);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
@media (max-width:820px){.band{grid-template-columns:1fr;gap:10px}}
.band .meta{display:flex;flex-direction:column;gap:14px}
.band .k{font:500 11px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.band h3{font-size:var(--t1);margin-bottom:10px}
.band .line{font:italic 300 clamp(22px,2.6vw,36px)/1.25 var(--serif);color:var(--ink);text-wrap:balance;max-width:24ch}
.band .more{font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ox);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color var(--dur-1) var(--ease-out)}
.band .more:hover,.band .more:focus-visible{border-color:var(--ox)}

/* finale: oxblood, with the contacts */
.finale{background:var(--ox);color:#fff;padding:calc(var(--s5) * 1.1) var(--gutter)}
.finale .two{align-items:start;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.finale .lab{color:rgba(255,255,255,.7)}
.finale h2{color:#fff}
.finale form{margin-top:var(--s4)}
.finale form.inline input{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.finale form.inline input::placeholder{color:rgba(255,255,255,.6)}
.finale form.inline input:focus{border-color:#fff}
.finale form.inline small{color:rgba(255,255,255,.65)}
.finale .btn{background:#fff;color:var(--ox)}
.finale .btn:hover,.finale .btn:focus-visible{background:var(--ground)}
.finale .links{list-style:none;display:grid;gap:14px;font:500 var(--t0)/1.4 var(--sans);letter-spacing:.02em}
.finale .links a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color var(--dur-1) var(--ease-out)}
.finale .links a:hover,.finale .links a:focus-visible{border-color:#fff}
.finale .sig{margin-top:var(--s4);font-size:32px;color:rgba(255,255,255,.85)}
.finale :focus-visible{outline-color:#fff}
@media (max-width:820px){.fin-contact{margin-top:var(--s4)}}
footer{padding:var(--s3) var(--gutter);border-top:0}
footer .fm{border-top:0;padding-top:0}
/* bridge: keep the background word off the text */
.bridge::before{left:auto;right:-4vw;top:auto;bottom:-3vw;transform:rotate(-6deg);opacity:.05}

/* about: the poem written on the wall behind her */
.verse-fig{margin:0;padding:0}
.verse-fig .stack{position:relative;overflow:hidden;box-shadow:0 30px 50px -34px rgba(63,32,33,.5)}
.verse-fig .stack img{display:block;width:100%;height:auto}
.verse-fig .stack .verse,.verse-fig .stack .cut{position:absolute;inset:0;width:100%;height:100%}
.verse-fig .stack .cut{object-fit:cover}
.verse-fig .verse text{font-family:'Homemade Apple','Caveat',cursive;fill:#231B1C;opacity:.9;white-space:pre}
.verse-fig .stack .base,.verse-fig .stack .cut{filter:grayscale(1) contrast(1.05)}
.verse-fig .cap{font-size:18px}

/* about: the photo takes the bigger column */
#about .two{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}
.verse-fig{max-width:none}

/* about: the wall writes itself, then she appears; the wall drifts a touch on scroll */
.js .verse-fig .verse text{opacity:0;transform:translateY(6px);transform-box:fill-box;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);transition-delay:calc(var(--i,0) * 16ms)}
.js .verse-fig.write .verse text{opacity:1;transform:none}
.js .verse-fig .cut{opacity:0;transform:translateY(10px) scale(1.01);transform-origin:50% 100%;transition:opacity 700ms var(--ease-out) 900ms,transform 700ms var(--ease-out) 900ms}
.js .verse-fig.write .cut{opacity:1;transform:none}
@supports (animation-timeline: view()){
  .js .verse-fig.write .verse{animation:wallDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes wallDrift{from{transform:translateY(-14px)}to{transform:translateY(14px)}}
}
@media (prefers-reduced-motion:reduce){.js .verse-fig .verse text,.js .verse-fig .cut{opacity:1!important;transform:none!important;transition:none!important}.js .verse-fig .verse{animation:none!important}}

/* published work as index cards */
.poems-sec{background:var(--ground)}
.index-cards{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:34px 26px;padding-top:var(--s2)}
.card-i{flex:0 0 calc((100% - 78px) / 4)}
@media (max-width:1100px){.card-i{flex-basis:calc((100% - 52px) / 3)}}
@media (max-width:820px){.card-i{flex-basis:calc((100% - 26px) / 2)}}
@media (max-width:520px){.card-i{flex-basis:100%}}
.card-i{position:relative;transform:rotate(var(--r,0deg));transition:transform var(--dur-3) var(--ease-out)}
.card-i:hover,.card-i:focus-within{transform:rotate(0) translateY(-6px)}
.card-i .tape{left:50%;top:-11px;margin-left:-37px;--r:-2deg;z-index:2}
.card-i .pk{position:absolute;z-index:2;pointer-events:none}
.card-i .pk path{fill:var(--ox)}
.card-i a{display:flex;flex-direction:column;height:236px;padding:22px 20px 16px;text-decoration:none;color:var(--ink);
  background:#FFFDF9 repeating-linear-gradient(to bottom,transparent 0 27px,rgba(63,32,33,.13) 27px 28px);background-position:0 46px;
  border:1px solid var(--rule);box-shadow:0 26px 40px -34px rgba(63,32,33,.5);position:relative}
.card-i a::before{content:"";position:absolute;left:0;right:0;top:44px;height:1px;background:var(--ox);opacity:.55}
.card-i .no{font-size:19px;color:var(--ox);line-height:1;margin-bottom:22px}
.card-i .t{font:400 var(--t1)/1.2 var(--serif);text-wrap:balance;margin-bottom:auto;padding-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-i .filed{font:500 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-i .filed i{text-transform:none;letter-spacing:.02em;font-style:italic}
.card-i .read{position:absolute;right:14px;bottom:12px;font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ox);border:1px solid var(--ox);padding:6px 8px;transform:rotate(-4deg);opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.card-i a:hover .read,.card-i a:focus-visible .read{opacity:1}
.js .index-cards .rv.in,.js .index-cards .rv{transform:rotate(var(--r,0deg))}
.js .index-cards .rv:not(.in){transform:rotate(var(--r,0deg)) translateY(22px)}

/* about wall: scroll-driven where supported, so it never depends on a stale script */
@supports (animation-timeline: view()){
  .js .verse-fig{view-timeline:--wall block}
  .js .verse-fig .verse text{transition:none;animation:wordIn linear both;animation-timeline:--wall;
    animation-range:entry calc(8% + var(--i,0) * .45%) entry calc(24% + var(--i,0) * .45%)}
  .js .verse-fig .cut{transition:none;animation:cutIn linear both;animation-timeline:--wall;animation-range:entry 55% entry 95%}
  .js .verse-fig.write .verse text,.js .verse-fig.write .cut{animation-play-state:running}
  @keyframes wordIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes cutIn{from{opacity:0;transform:translateY(10px) scale(1.01)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.js .verse-fig .verse text,.js .verse-fig .cut{animation:none!important;opacity:1!important;transform:none!important}}
}

/* three lead poems as three sheets */
.sheets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:var(--s3) 0 var(--s5)}
@media (max-width:900px){.sheets{grid-template-columns:1fr}}
.sheet{position:relative;background:var(--paper);border:1px solid var(--rule);padding:28px 28px 26px;display:flex;flex-direction:column;min-height:340px;box-shadow:0 30px 50px -40px rgba(63,32,33,.4)}
.sheet .k{font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--ox);margin-bottom:18px}
.sheet h3{font-size:var(--t1);line-height:1.15;margin-bottom:18px}
.sheet .line{font:italic 300 clamp(20px,1.7vw,24px)/1.35 var(--serif);color:var(--ink);margin-bottom:auto;padding-bottom:24px;text-wrap:pretty}
.sheet .line.muted{color:var(--mute)}
.sheet .src{font:500 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.sheet .src i{text-transform:none;letter-spacing:.02em}
.sheet .more{font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ox);text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start;transition:border-color var(--dur-1) var(--ease-out)}
.sheet .more:hover,.sheet .more:focus-visible{border-color:var(--ox)}
.sheet .more::after{content:"";position:absolute;inset:0}

/* finale: contacts as app icons */
.finale .icons{list-style:none;display:flex;gap:14px;flex-wrap:wrap}
.finale .icons a{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(255,255,255,.45);border-radius:14px;color:#fff;transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.finale .icons a:hover,.finale .icons a:focus-visible{background:#fff;color:var(--ox);border-color:#fff;transform:translateY(-3px)}
.finale .icons svg{width:24px;height:24px;fill:currentColor}

.finale{position:relative}
.finale .copy{position:absolute;left:var(--gutter);bottom:22px;font:400 12px/1 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.75)}
footer .fm{justify-content:flex-end}

/* blog pages: compact oxblood contact strip */
.mini-fin{background:var(--ox);color:#fff;padding:var(--s4) var(--gutter) var(--s3);border-top:0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.mini-fin .lab{color:rgba(255,255,255,.7);margin-bottom:12px}
.mini-fin .icons{list-style:none;display:flex;gap:12px}
.mini-fin .icons a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:50%;color:#fff;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.mini-fin .icons a:hover,.mini-fin .icons a:focus-visible{background:#fff;color:var(--ox)}
.mini-fin .icons svg{width:18px;height:18px;fill:currentColor}
.mini-fin .copy{font:400 12px/1 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.75)}

/* more from the moodboard around the index cards */
.card-i .pk.soft path{fill:var(--ox);fill-opacity:.35}
.pstamp{position:absolute;right:-14px;top:-16px;z-index:3;font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ox);border:1.5px solid var(--ox);border-radius:4px;padding:6px 8px;transform:rotate(9deg);opacity:.85;background:rgba(255,253,249,.7)}
.pub-sec{position:relative;overflow:hidden}
.pub-sec .wrap{position:relative;z-index:1}
.pub-sec .blob{position:absolute;border-radius:50%;background:var(--ox);opacity:.07;pointer-events:none}
.pub-sec .b1{width:260px;height:180px;left:-80px;top:120px;transform:rotate(-14deg)}
.pub-sec .b2{width:200px;height:300px;right:-60px;top:35%;transform:rotate(12deg)}
.pub-sec .b3{width:320px;height:140px;left:30%;bottom:-40px;transform:rotate(-6deg)}

/* hero: pointer parallax needs perspective and stable transform origins */
.hero .field{perspective:1200px}
.doodleframe .cv{transform-origin:50% 50%;will-change:transform;transition:box-shadow var(--dur-3) var(--ease-out)}
.doodleframe .dd.back,.doodleframe .dd .blobs{will-change:transform}
.js .dd .dd-el{transform-box:fill-box;transform-origin:center}

/* definition, poster-sized */
.def-wrap{background:var(--ground);padding:var(--s5) var(--gutter);display:grid;place-items:center}
.def-card{background:var(--paper);width:min(100%,560px);min-height:min(80vh,760px);padding:clamp(40px,7vw,88px) clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center;box-shadow:0 40px 70px -50px rgba(63,32,33,.45);border:1px solid var(--rule)}
.def-card .w{font:400 clamp(64px,9vw,104px)/.95 var(--serif);letter-spacing:-.035em;color:var(--ink)}
.def-card .w .ln{white-space:nowrap;display:inline-block}
.def-card .ph{margin-top:18px;font:400 15px/1.4 var(--sans);color:var(--mute)}
.def-card .ph i{font:italic 400 17px var(--serif);color:var(--ink);margin-left:6px}
.def-card .d{margin-top:34px;font:400 var(--t0)/1.6 var(--serif);color:var(--body);max-width:36ch}

.finale .credit{position:absolute;right:var(--gutter);bottom:22px;font:400 12px/1 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.55)}
.finale .credit a{color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.finale .credit a:hover,.finale .credit a:focus-visible{color:#fff;border-color:#fff}

/* blog index, second build */
.blog-top{padding:calc(var(--s5) * .9) var(--gutter) var(--s4)}
.blog-top h1{font-size:clamp(56px,7vw,104px);letter-spacing:-.03em;line-height:.95}
.blog-top .intro{margin-top:var(--s3);font:400 var(--t1)/1.4 var(--serif);color:var(--body);max-width:34ch;text-wrap:pretty}
.blog-body{background:var(--ground);padding:var(--s5) var(--gutter)}
.feat{position:relative;margin-bottom:var(--s5)}
.feat a{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s4);align-items:end;text-decoration:none;color:var(--ink);background:#FFFDF9;border:1px solid var(--rule);padding:clamp(28px,4vw,56px);
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(63,32,33,.12) 31px 32px);background-position:0 54px;box-shadow:0 30px 50px -40px rgba(63,32,33,.5);position:relative}
.feat a::before{content:"";position:absolute;left:0;right:0;top:52px;height:1px;background:var(--ox);opacity:.55}
.feat .k{grid-column:1/-1;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ox)}
.feat h2{font-size:clamp(34px,4.2vw,60px);line-height:1.05;letter-spacing:-.02em}
.feat .stand{font:italic 300 var(--t1)/1.35 var(--serif);color:var(--body)}
.feat .more{grid-column:1/-1;justify-self:start;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ox);border:1px solid var(--ox);padding:10px 12px;transform:rotate(-2deg);transition:transform var(--dur-2) var(--ease-out)}
.feat a:hover .more,.feat a:focus-visible .more{transform:rotate(0)}
.feat .pk{position:absolute;z-index:2;pointer-events:none}
.feat .pk path{fill:var(--ox)}
@media (max-width:820px){.feat a{grid-template-columns:1fr}}
.blog-cards .card-i .t{font-size:var(--t1)}
.blog-cards .card-i .filed{text-transform:none;letter-spacing:.02em;font:400 13px/1.5 var(--sans);color:var(--body)}
.topics{margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s3)}
.tagrow{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.tagrow li{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ox);border:1px solid var(--ox);padding:9px 12px;border-radius:999px}

.sheet{overflow:visible}
.sheet .pk{position:absolute;z-index:2;pointer-events:none}
.sheet .pk path{fill:var(--ox)}
.sheet .tape{z-index:3}
.sheets{margin-top:var(--s4)}

/* definition: the word sets itself letter by letter, then the entry follows */
.def-card .w span span{display:inline-block;transition:opacity 360ms var(--ease-out),transform 360ms var(--ease-out);transition-delay:calc(var(--i,0) * 55ms)}
.js .def-card:not(.in) .w span span{opacity:0;transform:translateY(.25em)}
.def-card .ph,.def-card .d{transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.def-card .ph{transition-delay:900ms}.def-card .d{transition-delay:1100ms}
.js .def-card:not(.in) .ph,.js .def-card:not(.in) .d{opacity:0;transform:translateY(8px)}
@supports (animation-timeline: view()){
  .js .def-card{view-timeline:--def block}
  .js .def-card .w span span{transition:none;opacity:1;transform:none;animation:wordIn linear both;animation-timeline:--def;animation-range:entry calc(15% + var(--i,0) * 3%) entry calc(30% + var(--i,0) * 3%)}
  .js .def-card .ph{transition:none;opacity:1;transform:none;animation:wordIn linear both;animation-timeline:--def;animation-range:entry 65% entry 85%}
  .js .def-card .d{transition:none;opacity:1;transform:none;animation:wordIn linear both;animation-timeline:--def;animation-range:entry 72% entry 95%}
  .js .def-card:not(.in) .w span span,.js .def-card:not(.in) .ph,.js .def-card:not(.in) .d{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.js .def-card .w span span,.js .def-card .ph,.js .def-card .d{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}

/* hero doodles: every element floats on its own slow loop once it has arrived */
.dd .float{animation:ddfloat var(--fd,7s) ease-in-out var(--fdel,0s) infinite alternate}
@keyframes ddfloat{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg))}}
@media (prefers-reduced-motion:reduce){.dd .float{animation:none}}