html,body{margin:0}

/* Layout: a book, not a landing page. A reading column set left, a wide outer margin for marginalia,
   one dot as the only ornament. Colour arrives only when the reader reaches the Vin chapter. */
:root{
  --paper:#F1F2EE;      /* limestone, nudged toward the indigo */
  --paper-2:#E8E9E3;
  --ink:#181A2A;
  --muted:#5D6071;
  --rule:#D5D6CF;
  --accent:#2C3792;     /* ViN indigo, from the brand guide */
  --vin-field:#2C3792;
  --vin-ink:#FFFFFF;
  --vin-muted:rgba(255,255,255,.72);
  --sheet:#FFFFFF;
  --sheet-ink:#1D2033;
  --sheet-muted:#5D6071;
  --glow:rgba(246,135,21,.20);
  --vin-blue:#2C3792; --vin-green:#3AAA60; --vin-red:#EC1D27; --vin-orange:#F68715;
  --vin-yellow:#F4EF15; --vin-sky:#51AEE5; --vin-lime:#80CC29; --vin-leaf:#41B93C; --vin-citron:#CFE413;

  --display:"Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --text:"Newsreader", "Iowan Old Style", Georgia, serif;
  --label:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --step--1:clamp(.8rem,.77rem + .12vw,.87rem);
  --step-0:clamp(1.08rem,1.02rem + .28vw,1.25rem);
  --step-1:clamp(1.3rem,1.18rem + .55vw,1.65rem);
  --step-2:clamp(1.65rem,1.4rem + 1.1vw,2.35rem);
  --step-3:clamp(2.1rem,1.6rem + 2.2vw,3.6rem);
  --step-4:clamp(2.8rem,1.9rem + 4vw,5.6rem);
  --step-5:clamp(3.4rem,2rem + 7vw,9rem);

  --gutter:clamp(1rem,.6rem + 2.4vw,3rem);
  --measure:36rem;
  --space:clamp(5rem,3.5rem + 7vw,10rem);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#111219; --paper-2:#181A24; --ink:#E7E7E1; --muted:#9B9DAC; --rule:#2B2D3A;
  --accent:#9AA3F0; --vin-field:#222A78; --sheet:#F4F4F0; --glow:rgba(246,135,21,.14);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#111219; --paper-2:#181A24; --ink:#E7E7E1; --muted:#9B9DAC; --rule:#2B2D3A;
  --accent:#9AA3F0; --vin-field:#222A78; --sheet:#F4F4F0; --glow:rgba(246,135,21,.14);
  color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--step-0);line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance;line-height:1.08;letter-spacing:-.012em}
em{font-style:italic}

.wrap{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--label);font-size:var(--step--1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mark{display:inline-flex;align-items:center;gap:.75em}
.mark::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent);flex:none}

/* ——— the dotted i ——— */
.i::after{content:"";display:inline-block;width:.14em;height:.14em;border-radius:50%;background:var(--accent);
  vertical-align:calc(1ex + .1em);margin-left:-.205em;margin-right:.065em}
.i.it::after{margin-left:-.12em;margin-right:-.02em}

/* ——— header ——— */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
.wordmark{font-family:var(--display);font-size:1.35rem;font-style:italic;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.nav{display:flex;gap:clamp(1rem,2vw,2rem);font-family:var(--label);font-size:.86rem;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;color:var(--muted);white-space:nowrap;padding-block:.25rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--ink)}
/* one slim row on phones, name included */
.wordmark .wm-dot{display:none;width:14px;height:14px;border-radius:50%;background:#EC1D27}
@media (max-width:640px){
  .top .wrap{padding-block:.75rem;gap:.8rem}
  .wordmark{font-size:1.2rem}
  .nav{gap:1rem;font-size:.8rem}
}
@media (max-width:360px){.nav{gap:.75rem;font-size:.76rem}.wordmark{font-size:1.1rem}}
/* the header steps aside while reading, and returns on the way back up */
.top{transition:border-color .3s,transform .35s ease}
.top.away{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
@media (prefers-reduced-motion:reduce){.top{transition:none}}

/* ——— views ——— */
[hidden]{display:none!important}

/* ——— opening ——— */
.opening{padding-block:clamp(3rem,2rem + 6vw,7.5rem) clamp(4rem,3rem + 5vw,8rem)}
.opening .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,6rem);align-items:end}
.opening h1{font-size:var(--step-4);font-weight:300;line-height:1.02;letter-spacing:-.03em;margin-block:1.8rem 2.2rem;max-width:15ch}
.opening h1 .line{display:block}
.opening h1 .line+.line{font-style:italic;color:var(--accent)}
.thesis{font-size:var(--step-1);line-height:1.45;max-width:34ch;font-weight:300}
.sub{margin-top:1.4rem;max-width:var(--measure);color:var(--muted);font-style:italic}
/* one point of attention, breathing slowly */
.still{position:relative;justify-self:center;align-self:center;width:min(22rem,100%);aspect-ratio:1}
.still .dot{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent)}
.still .ring{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;border:1px solid var(--accent);
  transform:translate(-50%,-50%) scale(.06);opacity:0;animation:breathe 9s cubic-bezier(.25,.6,.3,1) infinite}
.still .r2{animation-delay:4.5s}
@keyframes breathe{0%{transform:translate(-50%,-50%) scale(.06);opacity:0}15%{opacity:.35}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.still .ring{animation:none;opacity:.18;transform:translate(-50%,-50%) scale(.55)}.still .r2{transform:translate(-50%,-50%) scale(.9);opacity:.1}}
@media (max-width:820px){
  .opening .wrap{grid-template-columns:1fr}
  .still{display:none}
}

/* ——— section scaffolding ——— */
.chapter{padding-block:var(--space)}
.chapter+.chapter{border-top:1px solid var(--rule)}
.head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.head h2{font-size:var(--step-4);font-weight:300}
.head h2 em{color:var(--accent)}
.head .label{padding-top:1.1em}
@media (max-width:820px){.head{grid-template-columns:1fr;gap:1rem}.head .label{padding-top:0}}
.cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.margin-note{font-family:var(--label);font-size:var(--step--1);line-height:1.55;color:var(--muted);max-width:22ch}

/* ——— values ——— */
.values-intro{font-size:var(--step-1);line-height:1.45;max-width:38ch;font-weight:300}
.values-intro cite{display:block;margin-top:1rem;font-style:normal;font-family:var(--label);font-size:var(--step--1);color:var(--muted)}
.values{list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;border-top:1px solid var(--ink)}
.value{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:clamp(1.25rem,3vw,3rem);
  padding-block:clamp(1.6rem,3vw,2.6rem);border-bottom:1px solid var(--rule);align-items:baseline}
.value h3{font-size:var(--step-3);font-style:italic;font-weight:300;letter-spacing:-.02em}
.value p{max-width:32ch}
.value .q{font-family:var(--display);font-size:var(--step-1);font-style:italic;font-weight:300;line-height:1.35}
.value .practice{color:var(--muted)}
@media (max-width:820px){.value{grid-template-columns:1fr;gap:.7rem}}

/* ——— attention ——— */
.attention{position:relative}
.att-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem)}
.att-stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 5rem);height:min(76vh,40rem);align-self:start}
.att-stage canvas{width:100%;height:100%;display:block}
.att-stage .label{position:absolute;left:0;bottom:0}
.att-stage .label span{color:var(--ink)}
.story{display:flex;flex-direction:column;gap:clamp(2.2rem,4vw,3.6rem);max-width:var(--measure)}
.story p{font-size:var(--step-1);line-height:1.5;font-weight:300}
.story .quiet{font-size:var(--step-0);color:var(--muted)}
.story .big{font-size:var(--step-3);line-height:1.12;font-weight:300;letter-spacing:-.02em}
.story .big em{color:var(--accent)}
.story .stack{display:flex;flex-direction:column;gap:.15rem}
.story .stack span{display:block}
.questions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;border-left:1px solid var(--rule);padding-left:1.4rem}
.questions li{font-style:italic;font-size:var(--step-1);line-height:1.35;font-weight:300;color:var(--ink)}
.principle{margin-top:var(--space);padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--ink)}
.principle blockquote{margin:0;font-family:var(--display);font-size:var(--step-4);font-weight:300;line-height:1.04;letter-spacing:-.03em;max-width:17ch;text-wrap:balance}
.principle blockquote em{color:var(--accent)}
.principle .cols{margin-top:clamp(2rem,4vw,3rem)}
.principle .note{max-width:var(--measure);color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;font-family:var(--label);font-size:.92rem;font-weight:500;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:.2rem}
.more::after{content:"→";transition:transform .25s}
.more:hover::after{transform:translateX(4px)}
@media (max-width:900px){
  .att-grid{grid-template-columns:1fr}
  .att-stage{position:relative;top:0;height:16rem;order:-1}
}

/* ——— method ——— */
.method{list-style:none;margin:0;padding:0;counter-reset:m;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.method li{counter-increment:m;padding:1.6rem clamp(1rem,2vw,1.6rem) 0 0;display:flex;flex-direction:column;gap:.8rem}
.method li+li{padding-left:clamp(1rem,2vw,1.6rem);border-left:1px solid var(--rule)}
.method li::before{content:counter(m);font-family:var(--label);font-size:var(--step--1);color:var(--muted);font-variant-numeric:tabular-nums}
.method h3{font-size:var(--step-2);font-weight:300;line-height:1.12}
.method li:last-child h3{font-style:italic;color:var(--accent)}
.method p{color:var(--muted);font-size:var(--step-0)}
@media (max-width:820px){.method{grid-template-columns:1fr 1fr;row-gap:2rem}.method li:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:480px){.method{grid-template-columns:1fr}.method li+li{border-left:0;padding-left:0;border-top:1px solid var(--rule)}}

/* ——— Vin chapter ——— */
.vin{--r:150%;position:relative;background:var(--vin-field);color:var(--vin-ink);clip-path:circle(var(--r) at 50% 0%);
  padding-block:var(--space)}
.vin .label{color:var(--vin-muted)}
.vin .mark::before{background:var(--vin-red)}
.vin-intro{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem);margin-bottom:clamp(3rem,6vw,5.5rem)}
.vin-intro .logo{width:clamp(6rem,10vw,9rem)}
.vin-intro h2{font-size:var(--step-4);font-weight:300;max-width:14ch}
.vin-intro h2 em{color:#FFD9A8}
.vin-intro p{margin-top:1.6rem;max-width:var(--measure);color:var(--vin-muted);font-size:var(--step-1);font-weight:300;line-height:1.5}
@media (max-width:820px){.vin-intro{grid-template-columns:1fr}}

.ventures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
.within{margin-block:clamp(2.5rem,5vw,4rem) 1.2rem;display:flex;align-items:center;gap:1rem}
.within::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.25)}
@media (max-width:900px){.ventures{grid-template-columns:1fr}}
.sheet{background:var(--sheet);color:var(--sheet-ink);border-radius:2px;display:flex;flex-direction:column}
.sheet-body{padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1.1rem;flex:1}
.sheet .lockup{height:clamp(2.3rem,3.6vw,3rem);width:auto;align-self:flex-start}
.verb{font-family:var(--label);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.sheet h3{font-size:var(--step-2);font-weight:300;line-height:1.15;max-width:24ch}
.sheet p{color:var(--sheet-muted);font-size:var(--step-0);max-width:var(--measure)}
.expresses{margin-top:auto;border-top:1px solid #E3E4DE;padding-top:1rem;font-style:italic;color:var(--sheet-ink)!important}
.expresses::before{content:"The belief it carries";display:block;font-style:normal;font-family:var(--label);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sheet-muted);margin-bottom:.35rem}
.visit{font-family:var(--label);font-size:.88rem;font-weight:500;color:var(--sheet-ink);text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:.15rem}
.visit::after{content:" ↗"}
.grid-band{display:grid;grid-template-columns:3fr 1fr 1fr 1fr 1fr;height:.6rem;margin-top:auto}
.grid-band i{display:block}
.lifecycle{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;row-gap:.9rem;font-family:var(--label);font-size:.82rem;color:var(--sheet-ink)}
.lifecycle li{display:flex;align-items:center}
.lifecycle li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--vin-orange);margin-right:.5rem;background:var(--sheet)}
.lifecycle li:first-child::before,.lifecycle li:last-child::before{background:var(--vin-orange)}
.lifecycle li+li::after{content:none}
.lifecycle li:not(:last-child)::after{content:"";width:clamp(.8rem,2vw,1.6rem);height:1.5px;background:#E3C49D;margin-inline:.55rem}
.roles{border-top:1px solid #E3E4DE;padding-top:1rem;font-family:var(--display);font-size:var(--step-1);font-weight:300;line-height:1.35}
.roles p{color:var(--sheet-ink)!important;font-size:inherit}
.roles p:last-child{font-style:italic;color:var(--sheet-muted)!important;margin-top:.3rem}

.invisible{margin-top:clamp(4rem,8vw,7rem);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.invisible .ghost{font-family:var(--display);font-size:var(--step-5);line-height:.9;font-weight:300;color:rgba(255,255,255,.22);transition:color 4s ease 1s}
.invisible .ghost.gone{color:rgba(255,255,255,0)}
.invisible .coda{margin-top:2rem;font-style:italic;font-size:var(--step-0);color:var(--vin-muted);max-width:34ch}
@media (prefers-reduced-motion:reduce){.invisible .ghost{transition:none}}
.invisible .ghost .i::after{background:var(--vin-red);width:.16em;height:.16em;margin-left:-.215em;margin-right:.055em}
.invisible p{max-width:var(--measure);color:var(--vin-muted)}
.invisible blockquote{margin:1.6rem 0 0;font-family:var(--display);font-size:var(--step-3);font-weight:300;line-height:1.1;letter-spacing:-.02em;max-width:20ch;color:var(--vin-ink)}
@media (max-width:820px){.invisible{grid-template-columns:1fr}}

/* ——— writing ——— */
.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.entry a{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,2fr);gap:clamp(1rem,3vw,3rem);padding-block:clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--rule);text-decoration:none;align-items:baseline;transition:background-color .3s}
.entry a:hover h3{color:var(--accent)}
.entry .meta{font-family:var(--label);font-size:var(--step--1);color:var(--muted);font-variant-numeric:tabular-nums}
.entry h3{font-size:var(--step-3);font-weight:300;transition:color .25s}
.entry p{margin-top:.7rem;color:var(--muted);max-width:var(--measure)}
.entry .go{justify-self:end;font-family:var(--label);font-size:.88rem;color:var(--muted)}
@media (max-width:820px){.entry a{grid-template-columns:1fr;gap:.5rem}.entry .go{justify-self:start}}
.forthcoming{margin-top:2rem;color:var(--muted);font-style:italic}

.topics{display:flex;flex-wrap:wrap;gap:.2rem 0;font-family:var(--display);font-size:var(--step-2);font-weight:300;line-height:1.3;letter-spacing:-.015em;max-width:36ch}
.topics span{white-space:nowrap}
.topics span:not(:last-child)::after{content:"·";color:var(--accent);margin-inline:.35em}
.topics span:nth-child(even){font-style:italic}

/* ——— faith ——— */
.faith{overflow:clip}
.faith .cols{align-items:center}
.faith-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.faith-text{display:flex;flex-direction:column;gap:1.4rem;max-width:var(--measure)}
.faith-text .lead{font-size:var(--step-2);line-height:1.25;font-weight:300}
.faith-text p:not(.lead){color:var(--muted)}
.light{position:relative;padding:clamp(2rem,5vw,4rem) 0}
.light::before{content:"";position:absolute;inset:-10% -20%;background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none}
.light p{position:relative;font-family:var(--display);font-size:var(--step-3);font-weight:300;line-height:1.12;letter-spacing:-.02em}
.light p:nth-child(2){font-style:italic;padding-left:1.2em}
.light p:nth-child(3){padding-left:.6em}
.light p:nth-child(4){font-style:italic;padding-left:1.8em}
@media (max-width:820px){.faith-grid{grid-template-columns:1fr}}

/* ——— closing ——— */
.closing{padding-block:var(--space) calc(var(--space) * .8);text-align:left}
.closing .why{font-size:var(--step-5);font-weight:300;font-style:italic;letter-spacing:-.04em;line-height:.9}
.closing .why .smile{font-style:normal;font-family:var(--label);font-size:.22em;letter-spacing:0;color:var(--muted);vertical-align:super;margin-left:.3em}
.closing .cols{margin-top:clamp(2rem,5vw,4rem)}
.closing .why-text{display:flex;flex-direction:column;gap:1.2rem;max-width:var(--measure);font-size:var(--step-1);font-weight:300;line-height:1.5}
.closing .why-text .last{font-style:italic;color:var(--accent)}

.colophon{border-top:1px solid var(--rule);padding-block:2.5rem 3rem}
.colophon .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:clamp(1.5rem,4vw,4rem);font-family:var(--label);font-size:var(--step--1);color:var(--muted);line-height:1.6}
.colophon .wordmark{color:var(--ink);font-size:1.25rem}
.colophon p+p{margin-top:.7rem}
@media (max-width:820px){.colophon .wrap{grid-template-columns:1fr}}

/* ——— essay pages ——— */
.essay{padding-block:clamp(2.5rem,6vw,6rem) var(--space)}
.essay-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem);margin-bottom:clamp(3rem,6vw,5rem)}
.essay-head .back{font-family:var(--label);font-size:.88rem;color:var(--muted);text-decoration:none;align-self:start;padding-top:.6rem}
.essay-head .back:hover{color:var(--ink)}
.essay-head h1{font-size:var(--step-5);font-weight:300;letter-spacing:-.035em;line-height:.95}
.essay-head h1 em{color:var(--accent)}
.essay-head .dek{margin-top:1.6rem;font-size:var(--step-1);font-style:italic;font-weight:300;color:var(--muted);max-width:34ch}
.essay-head .meta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-family:var(--label);font-size:var(--step--1);color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:820px){.essay-head{grid-template-columns:1fr}.essay-head .back{padding-top:0}}
.prose{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem)}
.prose .body{max-width:34rem;font-size:clamp(1.15rem,1.07rem + .35vw,1.35rem);line-height:1.68}
.prose .body>*+*{margin-top:1.1em}
.prose .body .beat{margin-top:2.2em}
.prose .body h2{font-size:var(--step-2);font-weight:400;font-style:italic;margin-top:2.6em;line-height:1.15}
.prose .body .pull{font-family:var(--display);font-size:var(--step-2);line-height:1.22;font-weight:300;margin-block:1.8em;color:var(--accent)}
.prose .body .lines p{margin:0}
.prose .body .lines p+p{margin-top:.15em}
.prose .body .qs{list-style:none;padding:0 0 0 1.2rem;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:.7em;font-style:italic}
.prose .body .sep{display:flex;justify-content:center;gap:.7rem;margin-block:3em}
.prose .body .sep i{width:.35rem;height:.35rem;border-radius:50%;background:var(--accent);opacity:.75}
.prose .aside{position:sticky;top:6rem;align-self:start}
@media (max-width:820px){.prose{grid-template-columns:1fr}.prose .aside{position:static}}
.essay-end{margin-top:clamp(4rem,8vw,6rem);border-top:1px solid var(--ink)}
.essay-end .entries{border-top:0}

/* ——— reveal (enhancement only; content is visible without it) ——— */
.js .pre{opacity:0;transform:translateY(18px)}
.js .rv{transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
@media (prefers-reduced-motion:reduce){.js .pre{opacity:1;transform:none}.vin{clip-path:none}}

/* ——— v1.1: separate pages ——— */
section[id]{scroll-margin-top:4.5rem}
.prose .body .lines{margin-top:1.8em}
.prose .body .lines+*{margin-top:1.8em}

/* the dots over the i's in the name: Vin blue */
.wordmark .i::after{background:var(--accent)}