/* ============================================================
   CONFLUENT — ISSUE 03 · FALL 2026 · THE BRIGHT ISSUE
   Type: Liss Design system — Avenir LT (85 Heavy display /
   35 Light body), Futura LT for utility, Adobe Caslon for pull
   quotes. Web fallbacks: Nunito Sans, Jost, Cormorant Garamond.
   Color: the "Confluent fall" board, turned all the way up.
   ============================================================ */

:root{
  /* --- Issue 03, revised: green + purple in, fluorescent pink down --- */
  --forest:    #25503D;
  --forest-dp: #17372A;
  --tyrian:    #700353;
  --magenta:   #B61968;
  --bubblegum: #F576A5;
  --rose:      #F2C4DE;
  --rose-pale: #FBE9F2;
  --tiffany:   #A0DED9;
  --mustard:   #FFD447;
  --orange:    #F98107;

  /* --- roles (light) --- */
  --paper:    #FDF7F3;
  --paper-2:  #FBE9F2;
  --ink:      #22402F;
  --ink-soft: #5E7A6C;
  --rule:     #CBDCD1;
  --accent:   var(--magenta);
  --accent-2: var(--forest);

  --on-dark:  #FDF7F3;
  --measure: 34rem;
  --gutter: clamp(1.5rem, 5vw, 5.5rem);

  --f-display: "Avenir Next", "Avenir", "Nunito Sans", "Nunito Sans Fallback", system-ui, sans-serif;
  --f-body:    "Avenir Next", "Avenir", "Nunito Sans", "Nunito Sans Fallback", system-ui, sans-serif;
  --f-util:    "Futura", "Jost", "Avenir Next", system-ui, sans-serif;
  --f-quote:   "Cormorant Garamond", "Adobe Caslon Pro", Georgia, serif;
  --f-script:  "Caveat", cursive;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141F1A; --paper-2:#1D2E25; --ink:#F2E7DF; --ink-soft:#A8C0B2;
    --rule:#38513F; --magenta:#E462A0; --mustard:#FFDD6B; --tiffany:#B6E7E2;
  }
}
:root[data-theme="dark"]{
  --paper:#141F1A; --paper-2:#1D2E25; --ink:#F2E7DF; --ink-soft:#A8C0B2;
  --rule:#38513F; --magenta:#E462A0; --mustard:#FFDD6B; --tiffany:#B6E7E2;
}

/* ---- committed colour bands ---- */
.band-fuchsia{--paper:#B61968;--paper-2:#C93F82;--ink:#FDF7F3;--ink-soft:#F6D2E4;
  --rule:rgba(253,247,243,.42);--accent:#FDF7F3;--accent-2:#FFD447}
.band-forest{--paper:#25503D;--paper-2:#356A52;--ink:#F2C4DE;--ink-soft:#C9DCCE;
  --rule:rgba(242,196,222,.34);--accent:#FFD447;--accent-2:#F2C4DE}
.band-tyrian{--paper:#700353;--paper-2:#8E1670;--ink:#F6DCEC;--ink-soft:#D9A9C8;
  --rule:rgba(246,220,236,.3);--accent:#A0DED9;--accent-2:#FFD447}
.band-pink{--paper:#F2C4DE;--paper-2:#F9E0EE;--ink:#25503D;--ink-soft:#5E7A6C;
  --rule:rgba(37,80,61,.24);--accent:#B61968;--accent-2:#25503D}
.band-bubble{--paper:#F576A5;--paper-2:#F9A0C3;--ink:#2E1226;--ink-soft:#6B2A50;
  --rule:rgba(46,18,38,.28);--accent:#25503D;--accent-2:#FDF7F3}
.band-pale{--paper:#FBE9F2;--paper-2:#FDF4F8;--ink:#25503D;--ink-soft:#5E7A6C;
  --rule:rgba(37,80,61,.18);--accent:#B61968;--accent-2:#F98107}
.band-marigold{--paper:#FFD447;--paper-2:#FFE494;--ink:#25503D;--ink-soft:#6B5518;
  --rule:rgba(37,80,61,.26);--accent:#B61968;--accent-2:#25503D}
.band-aqua{--paper:#A0DED9;--paper-2:#C6ECE8;--ink:#17372A;--ink-soft:#3D6155;
  --rule:rgba(23,55,42,.26);--accent:#B61968;--accent-2:#700353}
.band-violet{--paper:#700353;--paper-2:#8E1670;--ink:#F6DCEC;--ink-soft:#D9A9C8;
  --rule:rgba(246,220,236,.3);--accent:#A0DED9;--accent-2:#FFD447}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(1rem,.55vw + .9rem,1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
p{margin:0}

/* ---------- page shell ---------- */
.page{
  position:relative;
  min-height:min(88vh, 62rem);
  padding:clamp(3rem,7vw,6rem) var(--gutter);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
}
.page > *{position:relative;z-index:2}
.page--tall{min-height:min(96vh,72rem)}
.page--bleed{justify-content:flex-end;min-height:min(80vh,54rem)}

/* folio + runner */
.folio,.runner{
  position:absolute; display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--f-util); font-weight:500; font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft); z-index:3;
}
.folio{inset:auto var(--gutter) clamp(1.1rem,2.5vw,2rem) var(--gutter)}
.runner{inset:clamp(1.1rem,2.5vw,2rem) var(--gutter) auto var(--gutter)}
.on-art .folio,.on-art .runner{color:rgba(253,247,243,.78)}

/* ---------- type ---------- */
.kicker{
  font-family:var(--f-util); font-weight:500; font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent); margin:0 0 1.1rem;
}
h1,h2,h3{font-family:var(--f-display);font-weight:900;text-wrap:balance;margin:0;line-height:.92;letter-spacing:-.03em}
h1{font-size:clamp(2.7rem,7.8vw,6.4rem);text-transform:uppercase}
h2{font-size:clamp(2.2rem,5.6vw,4.4rem);text-transform:uppercase}
h3{font-size:clamp(1.15rem,1.6vw,1.5rem);text-transform:uppercase;letter-spacing:-.015em}
.subhead{
  font-family:var(--f-body); font-weight:300; font-size:clamp(1.12rem,1.75vw,1.5rem);
  line-height:1.32; color:var(--ink-soft); max-width:30rem; margin:1.1rem 0 0;
}
.body{max-width:var(--measure);display:flex;flex-direction:column;gap:1.02em;margin-top:1.9rem}
.lede::first-letter{
  font-family:var(--f-display); font-weight:900; float:left; font-size:3.8em;
  line-height:.76; padding:.06em .1em 0 0; color:var(--accent);
}
.pull{
  font-family:var(--f-quote); font-weight:600; font-style:italic;
  font-size:clamp(1.45rem,2.9vw,2.3rem); line-height:1.14; letter-spacing:-.005em;
  color:var(--accent); max-width:26ch; margin:0; text-align:left; text-wrap:pretty;
  padding-left:1rem; border-left:3px solid var(--accent);
}
.sig{font-family:var(--f-script);font-size:2.3rem;line-height:1;color:var(--accent)}
.cta{
  font-family:var(--f-util); font-weight:500; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); border-top:2px solid var(--accent); padding-top:.75rem;
  display:inline-block; margin-top:.4rem; text-decoration:none;
}
a.cta:hover{color:var(--accent)}
.cta a{color:inherit;text-decoration:none}
.cta a:hover{color:var(--accent)}
.ticket{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--f-util); font-weight:500; font-size:.8rem; letter-spacing:.18em;
  text-transform:uppercase; padding:1rem 1.7rem; border-radius:999px;
  background:var(--accent); color:var(--paper); border:2.5px solid var(--accent);
  margin-top:.6rem; transition:transform .18s ease, background .18s ease, color .18s ease;
}
.ticket:hover{transform:translateY(-2px);background:var(--paper);color:var(--accent)}
.ticket--alt{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ticket--alt:hover{background:transparent;color:var(--ink)}
.opener-no{
  font-family:var(--f-display); font-weight:900; font-size:clamp(4rem,13vw,11rem);
  line-height:.78; color:var(--accent-2); opacity:.4; letter-spacing:-.06em; margin:0 0 -.08em -.05em;
}
/* on the committed colour grounds the numeral is a mark, not a ghost */
.band-fuchsia .opener-no,.band-bubble .opener-no{opacity:.85}
.band-violet .opener-no{opacity:1}
.small{font-size:.84rem;line-height:1.5;color:var(--ink-soft)}
.caption{
  font-family:var(--f-util); font-weight:400; font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(253,247,243,.85); margin:1rem 0 0; max-width:40rem;
}
.overlay-head{
  font-family:var(--f-display); font-weight:900; font-size:clamp(2rem,5.6vw,4.3rem);
  line-height:.96; letter-spacing:-.03em; color:#FDF7F3; max-width:16ch; text-wrap:balance;
  text-shadow:0 2px 26px rgba(40,4,26,.3);
}
.rule{height:2px;background:var(--rule);border:0;margin:2.4rem 0 0;width:100%}

/* ---------- grids ---------- */
.cols{display:grid;gap:clamp(1.8rem,4vw,3.5rem)}
@media(min-width:56rem){
  .cols--2{grid-template-columns:1fr 1fr}
  .cols--12{grid-template-columns:1.15fr .85fr}
  .cols--21{grid-template-columns:.8fr 1.2fr}
  .cols--3{grid-template-columns:repeat(3,1fr)}
}
.stack{display:flex;flex-direction:column;gap:1.6rem}

/* ---------- photography ---------- */
.shot{position:relative;overflow:hidden;background:var(--paper-2);display:block}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot--tall{aspect-ratio:2/3}
.shot--wide{aspect-ratio:3/2}
.shot--sq{aspect-ratio:1/1}
.shot--port{aspect-ratio:4/5}
.figure{display:flex;flex-direction:column;gap:.55rem}
.cap{font-family:var(--f-util);font-weight:400;font-size:.58rem;letter-spacing:.18em;
     text-transform:uppercase;color:var(--ink-soft);line-height:1.5}
/* full-bleed photography */
.art--photo{overflow:hidden}
.art--photo img{width:100%;height:100%;object-fit:cover;display:block}
.art--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(12,28,20,.74) 0%, rgba(12,28,20,.24) 36%, rgba(12,28,20,0) 64%)}
.art--photo.scrim-top::after{
  background:linear-gradient(to bottom, rgba(12,28,20,.55) 0%, rgba(12,28,20,0) 46%),
             linear-gradient(to top, rgba(12,28,20,.72) 0%, rgba(12,28,20,0) 46%)}

/* ---------- CSS art grounds ---------- */
.art{position:absolute;inset:0;z-index:0}

/* bright pool water */
.art--water{
  background:
    radial-gradient(ellipse 60% 34% at 18% 20%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(ellipse 44% 26% at 76% 42%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(ellipse 70% 30% at 45% 84%, rgba(255,255,255,.32), transparent 66%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.16) 0 12px, transparent 12px 44px),
    repeating-linear-gradient(-64deg, rgba(255,255,255,.12) 0 8px, transparent 8px 36px),
    linear-gradient(166deg, #46F0E4 0%, #00CFCB 42%, #0093AE 100%);
}
.art--water::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 82% 12%, rgba(255,30,135,.42), transparent 46%);
}
/* the loud sun */
.art--sun{
  background:
    radial-gradient(circle at 74% 24%, #FFFBEA 0 5%, #FFD84D 13%, transparent 44%),
    linear-gradient(176deg, #FFB400 0%, #FF5A28 44%, #FF1E87 100%);
}
/* parasol */
.parasol{
  position:absolute; border-radius:50%;
  background:repeating-conic-gradient(var(--p1,#FFB3D9) 0deg 15deg, var(--p2,#FFF8F4) 15deg 30deg);
  box-shadow:0 34px 90px -28px rgba(44,6,32,.32);
}
.parasol::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.55), transparent 58%);
}
/* mirror ball */
.art--disco{background:radial-gradient(circle at 62% 34%, #8E1670 0%, #700353 58%, #33001F 100%)}
.ball{
  position:absolute; left:70%; top:36%; transform:translate(-50%,-50%);
  width:min(46vw,26rem); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.9) 0 3%, rgba(255,255,255,0) 26%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 5%, rgba(0,0,0,.3) 5% 5.9%, rgba(255,255,255,.06) 5.9% 10%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.16) 0 5%, rgba(0,0,0,.32) 5% 5.9%, rgba(255,255,255,.05) 5.9% 10%),
    radial-gradient(circle at 34% 28%, #FFFFFF 0 8%, #E8D6F0 30%, #9A7FB0 60%, #35143F 100%);
  background-blend-mode:screen, overlay, overlay, normal;
  box-shadow:0 0 140px 34px rgba(255,30,135,.45), 0 0 260px 90px rgba(0,207,203,.3);
}
.ball::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 72% 78%, rgba(255,30,135,.5), transparent 46%),
    radial-gradient(circle at 20% 70%, rgba(0,207,203,.45), transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(20,3,26,.5) 100%);
}
.spark{position:absolute;border-radius:50%;background:#fff;filter:blur(1px);opacity:.9}
/* cabana stripe */
.art--cabana{background:repeating-linear-gradient(90deg, #25503D 0 6.25%, #F3BBDE 6.25% 12.5%)}
/* wave interstitial */
.art--wave{background:linear-gradient(118deg,#FF1E87 0%, #FF5A28 52%, #FFB400 100%)}
.art--wave::before,.art--wave::after{
  content:""; position:absolute; left:-20%; right:-20%; height:62%;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.art--wave::before{bottom:-4%;background:#FF6DB6}
.art--wave::after{bottom:-24%;background:#FFB400}
/* wine: magenta cellar */
.art--cellar{
  background:
    radial-gradient(ellipse 60% 46% at 26% 18%, rgba(255,180,0,.5), transparent 62%),
    linear-gradient(202deg,#FF1E87 0%, #A30F6B 52%, #3D0430 100%);
}
.art--cellar::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(74deg, rgba(255,248,244,.13) 0 2px, transparent 2px 24px);
}
/* soft bright pink field for the zen pages */
.art--calm{
  background:
    radial-gradient(ellipse 70% 50% at 22% 14%, #FFE1EF, transparent 70%),
    radial-gradient(ellipse 60% 44% at 84% 84%, #FFC9E2, transparent 68%),
    linear-gradient(178deg,#FFD9EC 0%, #FFB3D9 100%);
}
/* confetti dots */
.art--dots::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 22%, var(--accent) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 16%, var(--accent-2) 0 9px, transparent 10px),
    radial-gradient(circle at 78% 88%, var(--accent) 0 5px, transparent 6px),
    radial-gradient(circle at 22% 84%, var(--accent-2) 0 7px, transparent 8px);
  opacity:.5;
}

/* ---------- cover ---------- */
.cover{min-height:100vh;justify-content:space-between}
.cover__top,.cover__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-util);font-weight:500;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.wordmark{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(3rem,15.2vw,14.5rem); line-height:.78; letter-spacing:-.055em; margin:0; color:var(--ink);
  position:relative; z-index:4;
}
/* the cover art never runs under the wordmark or the colophon */
.cover .art{z-index:0}
.cover__top,.cover__bottom,.cover__lines,.cover .spec,.cover .fourc{position:relative;z-index:4}
.cover__lines{display:flex;flex-direction:column;gap:.42rem;font-family:var(--f-body);font-weight:600;
  font-size:clamp(.86rem,1.15vw,1rem);max-width:34rem;color:var(--ink)}
.cover__lines b{color:var(--accent);font-weight:900}
.fourc{font-family:var(--f-util);font-weight:500;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}

/* ---------- contents ---------- */
.toc{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-direction:column;max-width:46rem}
.toc li{display:flex;align-items:baseline;gap:1rem;padding:.72rem 0;border-bottom:2px solid var(--rule)}
.toc .n{font-family:var(--f-util);font-weight:500;font-size:.74rem;color:var(--accent);min-width:2.4rem}
.toc .t{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(.95rem,1.5vw,1.24rem);letter-spacing:-.02em}
.toc .d{margin-left:auto;text-align:right;font-size:.72rem;color:var(--ink-soft);font-family:var(--f-util);letter-spacing:.16em;text-transform:uppercase}

/* ---------- data blocks ---------- */
.spec{display:grid;gap:.16rem;font-family:var(--f-util);font-weight:400;font-size:.72rem;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase}
.spec b{color:var(--ink);font-weight:500}
.list{display:flex;flex-direction:column;gap:.9rem;margin:0;padding:0;list-style:none}
.list li{display:grid;gap:.15rem;padding-bottom:.9rem;border-bottom:2px solid var(--rule)}
.list .h{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:.96rem;letter-spacing:-.01em;color:var(--ink)}
.list .s{font-size:.87rem;color:var(--ink-soft)}
.list .f{font-family:var(--f-util);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.tier{border:2.5px solid var(--ink);padding:1.35rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.65rem;background:var(--paper)}
.tier__name{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:1.14rem;letter-spacing:-.02em}
.tier__tag{font-family:var(--f-util);font-weight:500;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.tier ul{margin:0;padding-left:1.05rem;display:flex;flex-direction:column;gap:.32rem;font-size:.88rem;color:var(--ink-soft)}
.tier--hero{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tier--hero .tier__name{color:var(--paper)}
.tier--hero .tier__tag{color:var(--paper);opacity:.75}
.tier--hero ul{color:color-mix(in srgb, var(--paper) 84%, transparent)}
.stat{display:grid;gap:.15rem}
.stat b{font-family:var(--f-display);font-weight:900;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1;color:var(--accent);letter-spacing:-.03em}
.stat span{font-family:var(--f-util);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.panel{background:var(--paper);padding:clamp(1.8rem,4vw,3.2rem) clamp(1.5rem,4vw,3.4rem);max-width:44rem;margin:0 auto}
.adlabel{font-family:var(--f-util);font-weight:500;font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin:0 0 1.6rem}

/* zen page: air */
.zen{max-width:31rem;display:flex;flex-direction:column;gap:1.85em;font-weight:300;
  font-size:clamp(1.08rem,1.4vw,1.26rem);line-height:1.9;color:var(--ink)}
.zen .breath{font-family:var(--f-util);font-weight:500;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--accent)}

/* ---------- contributor-proof annotation layer ---------- */
.proofnote{display:none}
.proofmode .proofnote{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-util); font-weight:500; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:#7A0025; background:#FFE45E;
  border:1.5px solid #7A0025; padding:.42rem .7rem; margin:.75rem 0 0;
  position:relative; z-index:6;
}
.proofmode .proofnote--over{
  position:absolute; left:1rem; top:1rem; margin:0; max-width:calc(100% - 2rem);
}
.proofmode .shot--pending{outline:3px dashed #7A0025; outline-offset:-6px}
.proofmode .shot--pending img{opacity:.42; filter:grayscale(.55)}
.proofmode .runner::after{
  content:"Proof · not for distribution";
  font-family:var(--f-util); font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:#C1005F; background:#FFE45E; padding:.16rem .5rem; white-space:nowrap;
}
.proofmode .proofcover .runner::after{content:none}
/* the cover sheet is dense — let it set its own rhythm */
.proofcover .status th,.proofcover .status td{padding:.42rem .7rem .42rem 0;font-size:.8rem}
.proofcover .asks li{padding-bottom:.6rem;gap:.12rem}
.proofcover .asks{gap:.6rem}
.proofcover .asks span{font-size:.82rem;line-height:1.45}
.proofcover .status td:first-child{white-space:normal}
.proofcover h2{line-height:.98}
@media print{ .proofcover{justify-content:flex-start;padding-top:.55in} }

/* the review cover sheet, proof build only */
.proofcover{display:none}
.proofmode .proofcover{display:flex}
.proofcover::after{content:none!important}
.status{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:1.4rem}
.status th,.status td{text-align:left;padding:.55rem .8rem .55rem 0;border-bottom:1.5px solid var(--rule);vertical-align:top}
.status th{font-family:var(--f-util);font-weight:500;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.pill{font-family:var(--f-util);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
      padding:.2rem .55rem;white-space:nowrap;display:inline-block}
.pill--ok{background:#00CFCB;color:#032830}
.pill--wait{background:#FFE45E;color:#7A0025}
.pill--none{background:#FF1E87;color:#FFF8F4}
.asks{display:flex;flex-direction:column;gap:.85rem;margin:0;padding:0;list-style:none}
.asks li{display:grid;gap:.2rem;padding-bottom:.85rem;border-bottom:1.5px solid var(--rule)}
.asks b{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:.92rem;letter-spacing:-.01em}
.asks span{font-size:.87rem;color:var(--ink-soft)}

@media (prefers-reduced-motion:no-preference){
  .fade{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .fade.in{opacity:1;transform:none}
}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- print / PDF ---------- */
@page{size:8.5in 11in;margin:0}
@media print{
  :root{--paper:#FFF8F4;--paper-2:#FFEAF3;--ink:#2C0620;--ink-soft:#8A3C68;--rule:#FFC0DD;--gutter:0.72in}
  body{background:#FFF8F4;font-size:9.4pt;line-height:1.5}
  .page{min-height:11in;height:11in;page-break-after:always;break-after:page;
        padding:0.62in 0.72in 0.5in;justify-content:center}
  .page--bleed{min-height:11in;height:11in;justify-content:flex-end;padding-bottom:0.72in}
  .page.cover{justify-content:space-between}
  .fade{opacity:1!important;transform:none!important}
  h1{font-size:3.2rem} h2{font-size:2.35rem} h3{font-size:1.05rem}
  .wordmark{font-size:5.5rem}
  .subhead{font-size:1rem;margin-top:.8rem}
  .overlay-head{font-size:2.4rem}
  .pull{font-size:1.75rem}
  .opener-no{font-size:5.2rem}
  .body{gap:.76em;margin-top:1.1rem}
  .cols{gap:1.5rem} .stack{gap:1rem}
  .shot--tall{aspect-ratio:2/2.7} .cap{font-size:.54rem}
  .toc li{padding:.5rem 0}
  .tier{padding:.85rem .9rem 1rem;gap:.42rem}
  .tier ul{font-size:.82rem;gap:.22rem}
  .rule{margin-top:1.4rem}
  .list{gap:.65rem} .list li{padding-bottom:.6rem}
  .zen{gap:1.2em;font-size:1.04rem;line-height:1.75}
  .caption{margin-top:.7rem}
  .cols--2{grid-template-columns:1fr 1fr}
  .cols--12{grid-template-columns:1.15fr .85fr}
  .cols--21{grid-template-columns:.8fr 1.2fr}
  .cols--3{grid-template-columns:repeat(3,1fr)}
}