/* =========================================================
   miris.works — A Bedazzled Wunderkammer
   McBling × 17th-century scholar's cabinet of curiosities
   ========================================================= */

:root{
  --selva-profunda:#0F2A1F;
  --moss-antiqua:#1B4332;
  --foliage:#2D6A4F;
  --vellum-cream:#F2EFE4;
  --aged-foolscap:#E8DCC4;
  --ducat-gold:#C9A961;
  --bedazzle-pink:#FF8FB1;
  --magenta-fuchsia:#D4347F;
  --aquamarine-specimen:#7FBFD8;
  --lampblack-ink:#1A1A1A;

  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --sans:"Fraunces", Georgia, serif;
  --type:"Special Elite", "Courier New", monospace;
  --script:"Petit Formal Script", "Brush Script MT", cursive;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--serif);
  background:var(--selva-profunda);
  color:var(--vellum-cream);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}

em{font-style:italic;}

/* ---------- ornamental viewport frame ---------- */
.page-frame{
  position:fixed;
  inset:14px;
  pointer-events:none;
  z-index:60;
  border:1.5px dotted rgba(201,169,97,0.55);
  border-radius:3px;
  box-shadow:inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(201,169,97,0.18);
}
.page-frame::before{
  content:"";
  position:absolute;
  inset:6px;
  border:0.5px solid rgba(201,169,97,0.28);
}
.cartouche{
  position:absolute;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(15,42,31,0.92) 70%);
  border:1px solid rgba(201,169,97,0.5);
  border-radius:50%;
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:var(--ducat-gold);
  letter-spacing:0.02em;
}
.cartouche span{transform:translateY(-1px);}
.cartouche--n{top:-2px;left:-2px;}
.cartouche--o{top:-2px;right:-2px;}
.cartouche--s{bottom:-2px;right:-2px;}
.cartouche--l{bottom:-2px;left:-2px;}

/* ---------- fish-scale nav rail ---------- */
.scale-rail{
  position:fixed;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:55;
  width:18px;
  display:flex;
  flex-direction:column;
  gap:-2px;
}
.scale{
  position:relative;
  display:block;
  width:18px;height:13px;
  margin-top:-2px;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:linear-gradient(160deg, rgba(127,191,216,0.45), rgba(45,106,79,0.7));
  border:0.5px solid rgba(127,191,216,0.45);
  transition:transform .35s ease, filter .35s ease;
}
.scale:first-child{
  border-radius:50%;
  width:9px;height:9px;
  align-self:center;
  margin-bottom:5px;
}
.scale__num{
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--ducat-gold);
  opacity:0;
  white-space:nowrap;
  transition:opacity .3s ease;
  text-shadow:0 0 6px rgba(15,42,31,0.8);
}
.scale:hover .scale__num{opacity:0.85;}
.scale.is-active{
  transform:scale(1.55);
  filter:drop-shadow(0 0 6px rgba(255,143,177,0.85)) drop-shadow(0 0 3px rgba(201,169,97,0.7));
  background:linear-gradient(160deg, rgba(255,255,255,0.6), rgba(127,191,216,0.85));
}
.scale.is-active .scale__num{opacity:1;color:var(--bedazzle-pink);}

/* ---------- glossy McBling polish ---------- */
.glossy{position:relative;}
.glossy::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 55%);
  z-index:1;
}

/* ---------- rhinestone + filigree primitives ---------- */
.rhinestone{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,
     #ffffff 0%, var(--bedazzle-pink) 35%, var(--magenta-fuchsia) 75%, var(--selva-profunda) 100%);
  box-shadow:inset 1px -1px 0 rgba(255,255,255,0.9), 0 0 4px rgba(255,143,177,0.4);
  z-index:4;
}
.rs--tl{top:-4px;left:-4px;}
.rs--tr{top:-4px;right:-4px;}
.rs--br{bottom:-4px;right:-4px;}
.rs--bl{bottom:-4px;left:-4px;}

.filigree{
  position:absolute;
  width:54px;height:54px;
  z-index:3;
  opacity:0;
  transition:opacity .8s ease;
  background-repeat:no-repeat;
  background-size:contain;
  /* three-leaved scroll in Ducat Gold */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'><g fill='none' stroke='%23C9A961' stroke-width='1.4' stroke-linecap='round'><path d='M4 50 C4 30 18 18 38 14 M8 50 C8 34 16 24 28 22 M4 50 C24 50 36 36 40 16'/><path d='M40 16 c0 -7 6 -12 13 -10 c2 6 -3 12 -13 10z'/><path d='M28 22 c0 -6 6 -10 11 -7 c1 5 -3 9 -11 7z'/><path d='M16 30 c0 -5 5 -8 9 -6 c1 4 -3 7 -9 6z'/><circle cx='49' cy='10' r='2' fill='%23C9A961'/></g></svg>");
}
.filigree.is-visible{opacity:0.9;}
.filigree.light{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'><g fill='none' stroke='%23A98B4F' stroke-width='1.4' stroke-linecap='round'><path d='M4 50 C4 30 18 18 38 14 M8 50 C8 34 16 24 28 22 M4 50 C24 50 36 36 40 16'/><path d='M40 16 c0 -7 6 -12 13 -10 c2 6 -3 12 -13 10z'/><path d='M28 22 c0 -6 6 -10 11 -7 c1 5 -3 9 -11 7z'/><path d='M16 30 c0 -5 5 -8 9 -6 c1 4 -3 7 -9 6z'/><circle cx='49' cy='10' r='2' fill='%23A98B4F'/></g></svg>");
}
.filigree--tl{top:6px;left:6px;}
.filigree--tr{top:6px;right:6px;transform:scaleX(-1);}
.filigree--br{bottom:6px;right:6px;transform:scale(-1,-1);}
.filigree--bl{bottom:6px;left:6px;transform:scaleY(-1);}

/* ---------- shared illustration ---------- */
.ill{display:block;width:100%;height:auto;overflow:visible;}
.ill .draw{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
}
.reveal-ill.is-drawn .draw, .plate.is-drawn .draw, .hero .draw{
  animation:pathdraw 1.4s ease forwards;
}
@keyframes pathdraw{to{stroke-dashoffset:0;}}

.bob{animation:bob 6s ease-in-out infinite alternate;}
@keyframes bob{from{transform:translateY(-8px);}to{transform:translateY(8px);}}

.binomial, .figcaption{
  margin-top:14px;
  font-family:var(--sans);
  font-size:13px;
  font-style:italic;
  color:var(--ducat-gold);
  letter-spacing:0.01em;
}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 8vw;
  background:
    radial-gradient(ellipse 90% 60% at 50% 35%, rgba(45,106,79,0.35), transparent 70%),
    var(--selva-profunda);
  position:relative;
}
.hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:760px;
  text-align:center;
  transform:translateY(-4%);
}
.hero__fish{width:min(46vw,330px);}
.kicker{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ducat-gold);
  margin-bottom:6px;
}
.display{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.6rem,6.4vw,5rem);
  letter-spacing:-0.005em;
  line-height:1.05;
  position:relative;
  display:inline-block;
}
.display em{color:var(--vellum-cream);}
.display::after{
  content:"";
  position:absolute;
  left:8%;right:8%;
  bottom:-6px;
  height:1px;
  background:var(--ducat-gold);
}
.hero__sub{
  max-width:48ch;
  font-size:16.5px;
  color:rgba(242,239,228,0.86);
  margin-top:6px;
}
.hero__sub .sc{
  font-variant:small-caps;
  letter-spacing:0.04em;
  font-style:italic;
  color:var(--bedazzle-pink);
}
.hero__specimen{
  margin-top:4px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--aquamarine-specimen);
}
.hero__scrollcue{
  position:absolute;
  bottom:48px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(201,169,97,0.7);
  animation:cuebob 2.4s ease-in-out infinite;
}
@keyframes cuebob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ---------- PLATE shell ---------- */
.plate{
  padding:96px 7vw;
  position:relative;
}
.plate--dark{
  background:
    linear-gradient(145deg, rgba(255,255,255,0.04), transparent 55%),
    var(--selva-profunda);
  color:var(--vellum-cream);
}
.plate--cream{
  background:var(--aged-foolscap);
  color:var(--lampblack-ink);
}
.plate--cream.colophon{background:var(--vellum-cream);}

.plate.ruled{
  background-image:
    linear-gradient(rgba(255,255,255,0.04), transparent 55%),
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(45,106,79,0.18) 27px 28px);
}
.plate--cream.ruled{
  background-color:var(--aged-foolscap);
  background-image:repeating-linear-gradient(to bottom, transparent 0 27px, rgba(45,106,79,0.22) 27px 28px);
}

.plate__frame{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:64px;
  box-shadow:
    inset 0 0 0 1.5px var(--moss-antiqua),
    inset 0 0 0 7.5px transparent,
    inset 0 0 0 8px var(--moss-antiqua);
}
.plate__frame--light{
  box-shadow:
    inset 0 0 0 1.5px rgba(45,106,79,0.55),
    inset 0 0 0 7.5px transparent,
    inset 0 0 0 8px rgba(45,106,79,0.55);
}

/* ---------- plate grids ---------- */
.plate__grid{
  display:grid;
  gap:64px;
  align-items:center;
}
.plate__grid--5-3{grid-template-columns:5fr 3fr;}
.plate__grid--3-5{grid-template-columns:3fr 5fr;}
.plate__grid.reversed{direction:rtl;}
.plate__grid.reversed > *{direction:ltr;}

.plate__centered{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

/* ---------- plate text ---------- */
.plate-label{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--bedazzle-pink);
  margin-bottom:10px;
}
.plate-label.dark{color:var(--magenta-fuchsia);}
.plate-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2rem,4.6vw,3.6rem);
  letter-spacing:-0.005em;
  line-height:1.1;
  margin-bottom:24px;
  position:relative;
  display:inline-block;
}
.plate-title::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-6px;
  height:1px;
  background:var(--ducat-gold);
}
.plate-title.dark{color:var(--lampblack-ink);}
.plate-title.fanned{font-family:var(--script);font-weight:400;letter-spacing:0;font-size:clamp(2.2rem,5vw,3.8rem);}

.margin-gloss{
  max-width:38ch;
  font-family:var(--sans);
  font-size:13px;
  font-style:italic;
  color:var(--foliage);
  margin-top:18px;
}
.margin-gloss.dark{color:var(--foliage);}
.plate--dark .margin-gloss{color:rgba(127,191,216,0.7);}
.margin-gloss.center{margin:18px auto 0;text-align:center;}

/* typewriter passages */
.typewriter{
  font-family:var(--type);
  font-size:14.5px;
  line-height:1.6;
  color:var(--lampblack-ink);
  max-width:48ch;
  position:relative;
}
.plate--dark .typewriter{color:rgba(242,239,228,0.94);}
.typewriter .glyph{
  display:inline;
  opacity:0;
  white-space:pre-wrap;
  transform:translateY(calc(var(--jit,0) * 1px));
}
.typewriter.is-typing .glyph{animation:glyphIn .01s linear forwards;}
@keyframes glyphIn{to{opacity:1;}}
.typewriter .caret{
  display:inline-block;
  width:8px;height:16px;
  background:var(--bedazzle-pink);
  vertical-align:-3px;
  margin-left:1px;
  animation:blink 1.2s steps(1) infinite;
}
.typewriter.is-done .caret{display:none;}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* plate I illustration column figcaption */
.plate__ill{position:relative;}

/* ---------- PLATE II bibliography ---------- */
.bibliography{
  list-style:none;
  counter-reset:bib;
  font-family:var(--type);
  font-size:14.5px;
  line-height:1.6;
  color:var(--lampblack-ink);
}
.bibliography li{
  counter-increment:bib;
  padding:6px 0 6px 64px;
  position:relative;
  border-bottom:0.5px dotted rgba(45,106,79,0.35);
}
.bibliography li::before{
  content:counter(bib, lower-roman) ".";
  position:absolute;
  left:24px;
  color:var(--magenta-fuchsia);
  font-family:var(--sans);
  font-size:12px;
}
.bibliography a{transition:color .25s ease;}
.bibliography a:hover{color:var(--foliage);}
.bibliography a:hover{
  box-shadow:inset 0 -3px 0 rgba(255,143,177,0.65);
}

/* ---------- PLATE III camera obscura ---------- */
.aperture{
  width:min(72vw,360px);
  height:min(72vw,360px);
  margin:36px auto;
  position:relative;
  border-radius:50%;
  overflow:hidden;
  background:#06140d;
  box-shadow:
    0 0 0 1px var(--bedazzle-pink),
    0 0 0 3px var(--ducat-gold),
    inset 0 0 60px rgba(0,0,0,0.85);
}
.aperture__rim{
  position:absolute;inset:0;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
}
.rim-rs{
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--bedazzle-pink) 35%, var(--magenta-fuchsia) 75%, var(--selva-profunda) 100%);
  box-shadow:inset 1px -1px 0 rgba(255,255,255,0.9), 0 0 5px rgba(255,143,177,0.6);
}
.rim-rs--n{top:-3px;left:calc(50% - 3.5px);}
.rim-rs--s{bottom:-3px;left:calc(50% - 3.5px);}
.rim-rs--e{right:-3px;top:calc(50% - 3.5px);}
.rim-rs--w{left:-3px;top:calc(50% - 3.5px);}
.rim-rs--ne{top:11%;right:11%;}
.rim-rs--nw{top:11%;left:11%;}
.rim-rs--se{bottom:11%;right:11%;}
.rim-rs--sw{bottom:11%;left:11%;}
.aperture__belt{
  position:absolute;
  left:0;right:0;
  top:0;
  display:flex;
  flex-direction:column;
  animation:conveyor 28s linear infinite;
}
@keyframes conveyor{from{transform:translateY(0);}to{transform:translateY(-50%);}}
.aperture__strip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
  padding:34px 0;
}
.aperture .ill.mini{width:42%;max-width:140px;}

/* ---------- PLATE IV diary ---------- */
.diary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  position:relative;
  background:var(--aged-foolscap);
  background-image:repeating-linear-gradient(to bottom, transparent 0 27px, rgba(45,106,79,0.22) 27px 28px);
}
.diary::before{
  /* gutter shadow */
  content:"";
  position:absolute;
  left:50%;top:0;bottom:0;
  width:40px;
  transform:translateX(-50%);
  background:linear-gradient(to right, transparent, rgba(0,0,0,0.12) 50%, transparent);
  pointer-events:none;
}
.diary__page{
  padding:48px 48px 48px 56px;
  position:relative;
}
.diary__page--left{
  border-right:0.5px solid rgba(45,106,79,0.3);
}
.diary__page--right{
  padding-left:96px; /* fluorescent margin rule sits at ~92px */
  background-image:linear-gradient(to right, transparent 92px, rgba(255,143,177,0.5) 92px, rgba(255,143,177,0.5) 93px, transparent 93px);
  background-repeat:no-repeat;
}
.date-stamp{
  display:inline-block;
  padding:18px 24px;
  margin-bottom:24px;
  border:1px solid rgba(201,169,97,0.5);
  background:rgba(242,239,228,0.5);
  text-align:center;
  position:relative;
}
.heart-charm{
  width:22px;height:20px;
  margin:0 auto 8px;
  position:relative;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--bedazzle-pink) 30%, var(--magenta-fuchsia) 80%);
  box-shadow:inset 1px -1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(212,52,127,0.4);
  transform:rotate(-45deg);
  border-radius:0 0 4px 0;
}
.heart-charm::before,.heart-charm::after{
  content:"";
  position:absolute;
  width:22px;height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--bedazzle-pink) 30%, var(--magenta-fuchsia) 80%);
}
.heart-charm::before{top:-11px;left:0;}
.heart-charm::after{top:0;right:-11px;}
.date-stamp__script{
  font-family:var(--script);
  font-size:22px;
  color:var(--magenta-fuchsia);
  line-height:1.1;
}
.date-stamp__year{
  font-family:var(--script);
  font-size:15px;
  color:var(--foliage);
}
.ill--inline-small{width:140px;margin-top:28px;}
.diary-heading{
  font-family:var(--script);
  font-size:24px;
  color:var(--magenta-fuchsia);
  margin-bottom:18px;
}
.dot-i{position:relative;}
.dot-i::after{
  content:"";
  position:absolute;
  top:-2px;left:50%;
  transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--bedazzle-pink) 35%, var(--magenta-fuchsia) 80%);
  box-shadow:inset 1px -1px 0 rgba(255,255,255,0.9);
}

/* ---------- PLATE V glossary ---------- */
.glossary{
  margin-top:30px;
  columns:2;
  column-gap:64px;
  text-align:left;
}
.gloss-entry{
  break-inside:avoid;
  padding:8px 0 10px 18px;
  position:relative;
  border-bottom:0.5px dotted rgba(45,106,79,0.3);
}
.gloss-entry::before{
  content:"";
  position:absolute;
  left:0;top:14px;
  width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--bedazzle-pink) 40%, var(--magenta-fuchsia) 90%);
  box-shadow:inset 0.5px -0.5px 0 rgba(255,255,255,0.9);
}
.gloss-entry dt{
  font-family:var(--serif);
  font-weight:700;
  font-style:italic;
  color:var(--lampblack-ink);
  font-size:18px;
}
.gloss-entry dd{
  font-family:var(--serif);
  font-size:15.5px;
  color:var(--foliage);
  line-height:1.55;
  margin-top:2px;
}

/* ---------- PLATE VI swatches ---------- */
.swatch-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:34px;
}
.swatch{
  width:150px;
  text-align:left;
}
.swatch__chip{
  height:96px;
  border:1px solid rgba(201,169,97,0.4);
  position:relative;
  box-shadow:inset 4px -4px 12px rgba(0,0,0,0.18), inset -2px 2px 6px rgba(255,255,255,0.08);
}
.swatch__chip::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(140deg, rgba(255,255,255,0.18), transparent 55%);
}
.swatch figcaption{
  margin-top:8px;
  font-family:var(--sans);
  font-size:12px;
  color:rgba(242,239,228,0.86);
}
.swatch figcaption em{
  display:block;
  font-style:italic;
  color:var(--ducat-gold);
  font-size:14px;
  margin-bottom:2px;
}
.swatch figcaption span{
  display:block;
  font-size:11px;
  color:rgba(127,191,216,0.7);
  line-height:1.35;
}

/* ---------- PLATE VII envelope ---------- */
.envelope{
  max-width:520px;
  margin:0 auto;
  position:relative;
  background:var(--aged-foolscap);
  padding:42px 40px 48px;
  box-shadow:0 14px 36px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(201,169,97,0.4);
  color:var(--lampblack-ink);
}
.envelope__flap{
  position:absolute;
  top:0;left:0;right:0;
  height:64px;
  background:linear-gradient(180deg, rgba(232,220,196,0.95), rgba(232,220,196,0));
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  border-bottom:0.5px solid rgba(45,106,79,0.3);
}
.envelope__body{margin-top:18px;}
.letter__sal{
  font-family:var(--type);
  font-size:14.5px;
  margin-bottom:14px;
}
.letter__body{
  font-family:var(--serif);
  font-size:16.5px;
  line-height:1.7;
  color:var(--lampblack-ink);
}
.letter__addr{
  font-family:var(--type);
  font-size:14px;
  color:var(--magenta-fuchsia);
  box-shadow:inset 0 -3px 0 rgba(255,143,177,0.5);
}
.letter__sig{
  margin-top:18px;
  font-family:var(--script);
  font-size:22px;
  color:var(--foliage);
}
.wax-seal{
  position:absolute;
  right:30px;
  bottom:-22px;
  width:64px;height:64px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e96aab 0%, var(--magenta-fuchsia) 45%, #8c1f54 100%);
  box-shadow:0 6px 14px rgba(140,31,84,0.55), inset 2px -3px 6px rgba(0,0,0,0.3), inset -2px 2px 5px rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1.4);
}
.wax-seal span{
  font-family:var(--script);
  font-size:30px;
  color:rgba(255,255,255,0.88);
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  transform:translateY(-2px);
}
.wax-seal.is-tilted{
  transform:rotate(4deg) scale(1.04);
  box-shadow:0 8px 18px rgba(140,31,84,0.6), inset 2px -3px 6px rgba(0,0,0,0.3), 0 0 12px rgba(255,143,177,0.7);
}

/* ---------- PLATE VIII colophon ---------- */
.colophon{padding-bottom:120px;}
.colophon__fish{width:min(40vw,300px);margin:24px auto 26px;}
.colophon__house{
  font-family:var(--serif);
  font-weight:700;
  font-style:italic;
  font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--lampblack-ink);
  margin-bottom:14px;
}
.colophon__line{
  max-width:60ch;
  margin:0 auto;
  font-family:var(--sans);
  font-size:13px;
  color:var(--foliage);
  line-height:1.7;
}
.illum-cap{
  font-family:var(--script);
  font-size:2.4em;
  line-height:0.6;
  color:var(--magenta-fuchsia);
  float:left;
  margin:0 6px -2px 0;
  text-shadow:1px 1px 0 var(--ducat-gold);
}
.heart-glyph{
  font-family:var(--type);
  font-size:11px;
  color:var(--bedazzle-pink);
  vertical-align:1px;
}
.colophon__sig{
  margin-top:22px;
  font-family:var(--script);
  font-size:20px;
  color:var(--foliage);
}

/* ---------- cursor rhinestone trail ---------- */
.rs-trail{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
}
.rs-dot{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--bedazzle-pink) 40%, var(--magenta-fuchsia) 90%);
  box-shadow:inset 0.5px -0.5px 0 rgba(255,255,255,0.9), 0 0 6px rgba(255,143,177,0.7);
  opacity:0;
  transform:translate(-50%,-50%) scale(0.4);
  animation:rsfade 0.8s ease forwards;
}
@keyframes rsfade{
  10%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);}
}

/* ---------- scroll-reveal helpers ---------- */
.plate__caption, .plate__ill, .bibliography, .glossary, .swatch-strip, .aperture, .diary, .envelope, .colophon__fish, .colophon__house, .colophon__line{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s ease, transform .9s ease;
}
.plate.is-visible .plate__caption,
.plate.is-visible .plate__ill,
.plate.is-visible .bibliography,
.plate.is-visible .glossary,
.plate.is-visible .swatch-strip,
.plate.is-visible .aperture,
.plate.is-visible .diary,
.plate.is-visible .envelope,
.plate.is-visible .colophon__fish,
.plate.is-visible .colophon__house,
.plate.is-visible .colophon__line{
  opacity:1;
  transform:translateY(0);
}
.plate.is-visible .plate__ill{transition-delay:.18s;}
.plate.is-visible .plate__caption{transition-delay:.36s;}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .plate__grid--5-3, .plate__grid--3-5{grid-template-columns:1fr;gap:40px;}
  .plate__grid.reversed{direction:ltr;}
  .diary{grid-template-columns:1fr;}
  .diary::before{display:none;}
  .diary__page--left{border-right:none;border-bottom:0.5px solid rgba(45,106,79,0.3);}
  .diary__page--right{padding-left:56px;background-image:linear-gradient(to right, transparent 28px, rgba(255,143,177,0.5) 28px, rgba(255,143,177,0.5) 29px, transparent 29px);}
  .glossary{columns:1;}
  .plate__frame{padding:40px 28px;}
  .scale-rail{right:8px;}
  .page-frame{inset:8px;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .hero{padding:64px 6vw;}
  .plate{padding:64px 5vw;}
  .swatch{width:128px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.2s !important;}
  .bob{animation:none;}
  .ill .draw{stroke-dashoffset:0;}
  .typewriter .glyph{opacity:1;}
  .typewriter .caret{display:none;}
  .aperture__belt{animation:none;}
  .hero__scrollcue{animation:none;}
}