/* ══════════════════════════════════════════════════════════════
   WUNDER VESSEL
   One stylesheet. Everything a person needs to change lives in
   the block directly below.
   ══════════════════════════════════════════════════════════════ */

/* ── Typefaces, self-hosted ─────────────────────────────────────
   Newsreader (Production Type) and Archivo. Both open source, both
   variable — one file covers every weight. Sitting in assets/fonts
   rather than loading from Google means the site works offline, loads
   faster, and sends nothing to a third party. */

@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader.woff2') format('woff2-variations');
  font-weight:200 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-italic.woff2') format('woff2-variations');
  font-weight:200 600; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* ── the two grounds. The site moves between them. ───────── */
  --parchment:      #E9E0CD;
  --parchment-deep: #DFD4BC;
  --ink:            #1C1815;
  --ink-2:          #4A4139;
  --ink-3:          #7B6F62;

  --dusk:           #161714;   /* the sanctuary */
  --void:           #0A0908;   /* the studio */
  --chalk:          #E4DBC8;
  --chalk-2:        #A79E8C;
  --chalk-3:        #6E6759;

  --brass:          #9C7A3C;
  --brass-lit:      #C09A52;
  --rust:           #B8562A;

  --rule:           rgba(28,24,21,.16);
  --rule-dark:      rgba(228,219,200,.16);

  /* ── type ────────────────────────────────────────────────── */
  --serif:  'Newsreader', 'Iowan Old Style', Georgia, serif;
  --grot:   'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* ── measure ─────────────────────────────────────────────── */
  --gut:    clamp(1.5rem, 5vw, 5rem);
  --stack:  clamp(5rem, 12vh, 9rem);
  --max:    76rem;
  --read:   36rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:370;                 /* Newsreader is drawn for ~400; 300 reads thin on paper */
  font-size:clamp(1.02rem,.96rem + .3vw,1.16rem);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper. A single fixed layer of noise over everything so the
   flat colour never reads as a screen fill. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

body.on-dusk{ background:var(--dusk); }
body.on-void{ background:var(--void); }

img,svg{ display:block; max-width:100%; }

/* ══ TYPE ══════════════════════════════════════════════════ */

h1,h2,h3,h4{ font-weight:300; margin:0; letter-spacing:-.01em; }

/* letterspaced micro-label. Used for everything a museum would
   set in small caps on a wall card. */
.label{
  font-family:var(--grot);
  font-weight:500;
  font-size:.665rem;
  letter-spacing:.245em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--ink-3);
}
.dark .label{ color:var(--chalk-3); }

/* the name of a world */
.worldname{
  font-family:var(--serif);
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:.30em;
  font-size:clamp(1.75rem,1rem + 3.4vw,3.6rem);
  line-height:1.1;
  text-indent:.30em;              /* optical centring against the tracking */
}

/* her words. Always italic, always alone. */
.epigraph{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.28rem,1rem + 1.5vw,2.2rem);
  line-height:1.34;
  letter-spacing:-.012em;
  max-width:24ch;
  text-wrap:balance;
}

.lede{
  font-size:clamp(1.08rem,1rem + .5vw,1.3rem);
  line-height:1.58;
  max-width:var(--read);
}

p{ max-width:var(--read); }
p + p{ margin-top:1.1em; }

a{ color:inherit; }

/* ══ LINKS ═════════════════════════════════════════════════ */

.ul{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .42s cubic-bezier(.2,.7,.3,1);
  padding-bottom:.12em;
}
.ul:hover{ background-size:100% 1px; }

/* the bordered button from the plate world */
.btn{
  display:inline-block;
  font-family:var(--grot);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.245em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.02em 1.9em .95em;
  border:1px solid currentColor;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  transition:color .4s ease;
}
.btn span{ position:relative; z-index:1; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{ color:var(--parchment); }
.btn:hover::before{ transform:scaleY(1); }

.dark .btn{ color:var(--chalk); }
.dark .btn::before{ background:var(--chalk); }
.dark .btn:hover{ color:var(--void); }

.btn--brass{ color:var(--brass); }
.btn--brass::before{ background:var(--brass); }
.btn--brass:hover{ color:var(--parchment); }

/* ══ SHELL ═════════════════════════════════════════════════ */

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }
.col{ max-width:44rem; }
.col--tight{ max-width:36rem; }
.col--mid{ max-width:56rem; }
.wrap--wide{ max-width:92rem; }

section{ padding-block:var(--stack); position:relative; }

.dark{ background:var(--dusk); color:var(--chalk); }
.dark--void{ background:var(--void); color:var(--chalk); }
.dark .lede,.dark p{ color:var(--chalk-2); }
.dark .rule{ background:var(--rule-dark); }

.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* ══ NAV ═══════════════════════════════════════════════════ */

.nav{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.15rem var(--gut);
  backdrop-filter:blur(9px);
  background:color-mix(in srgb, var(--parchment) 84%, transparent);
  border-bottom:1px solid var(--rule);
  transition:background .5s ease,border-color .5s ease,color .5s ease;
}
.nav.is-dark{
  background:color-mix(in srgb, var(--void) 82%, transparent);
  color:var(--chalk);
  border-bottom-color:var(--rule-dark);
}
.nav.is-dark .mark{ color:var(--chalk); }

.mark{
  display:flex; align-items:center; gap:.62rem;
  text-decoration:none; color:var(--ink);
  flex-shrink:0;
}
.mark svg{ width:22px; height:26px; }
.mark b{
  font-family:var(--serif); font-weight:300;
  text-transform:uppercase; letter-spacing:.34em;
  font-size:.86rem; text-indent:.34em;
}

.navlinks{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); align-items:center; }
.navlinks a{
  font-family:var(--grot); font-weight:500;
  font-size:.63rem; letter-spacing:.23em; text-transform:uppercase;
  text-decoration:none; opacity:.62;
  transition:opacity .3s ease;
}
.navlinks a:hover,.navlinks a[aria-current]{ opacity:1; }
.navlinks a[aria-current]{ text-decoration:underline; text-underline-offset:.5em; text-decoration-thickness:1px; }

.navtoggle{ display:none; background:none; border:0; padding:.4rem; color:inherit; cursor:pointer; }
.navtoggle svg{ width:20px; height:20px; }

@media (max-width:800px){
  .navtoggle{ display:block; }
  /* The bar uses backdrop-filter, which makes it the containing block for
     any fixed child — so a fixed panel would be positioned against the bar,
     not the viewport. Anchor it to the bar and hide it with opacity. */
  .navlinks{
    position:absolute; top:100%; left:0;
    width:100vw; height:100vh; z-index:90;
    flex-direction:column; justify-content:center; align-items:center;
    gap:2rem;
    background:var(--parchment);
    opacity:0; visibility:hidden;
    transform:translateY(-1.2rem);
    transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.3,1), visibility .4s;
  }
  .nav.is-dark .navlinks{ background:var(--void); }
  .navlinks.open{ opacity:1; visibility:visible; transform:none; }
  .navlinks a{ font-size:.9rem; letter-spacing:.3em; opacity:1; }
}

/* ══ FIGURES ═══════════════════════════════════════════════ */

.figure{ position:relative; display:block; }
.figure img{ width:100%; height:auto; }

.spin{ animation:spin 240s linear infinite; transform-origin:50% 50%; }
.spin--slow{ animation-duration:420s; }
.spin--rev{ animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* figures sitting behind content */
.bleed{
  position:absolute; z-index:0;
  pointer-events:none; user-select:none;
}
.bleed img{ width:100%; }

.dark img[src*="/figures/"]{ filter:invert(1) brightness(1.04); }
.dark img.no-invert{ filter:none; }

.astro{ width:34px; height:34px; color:var(--ink-3); opacity:.75; }
.dark .astro{ color:var(--chalk-3); }

/* ══ WORLD BANDS (home) ════════════════════════════════════ */

.band{ position:relative; overflow:hidden; }
.band__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.band--flip .band__fig{ order:2; }
.band__fig{ position:relative; }
.band__fig img{ width:min(100%,30rem); margin-inline:auto; }

.band__num{ display:block; margin-bottom:1.5rem; font-size:.72rem; opacity:.9; }
.masthead .label{ font-size:.72rem; opacity:.9; }
.band__body .worldname{ margin-bottom:1.5rem; }
.band__body .epigraph{ margin-bottom:1.6rem; }
.band__body p{ margin-bottom:2.2rem; }

@media (max-width:820px){
  .band__inner{ grid-template-columns:1fr; gap:2.6rem; }
  .band--flip .band__fig{ order:0; }
  .band__fig img{ width:min(76%,22rem); }
}

/* ══ PAGE HEADER ═══════════════════════════════════════════ */

.masthead{
  min-height:clamp(30rem,74vh,46rem);
  display:grid; place-items:center;
  text-align:center;
  position:relative; overflow:hidden;
  padding-block:clamp(4rem,10vh,7rem);
}
.masthead__fig{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(80vh,42rem);
  opacity:.21;
  z-index:0;
}
.masthead__body{ position:relative; z-index:1; display:grid; justify-items:center; gap:1.6rem; }
.masthead .epigraph{ max-width:20ch; }

/* ══ DOORS — the four ways into a world ════════════════════ */

.doors{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  border-top:1px solid var(--rule);
}
.dark .doors{ border-top-color:var(--rule-dark); }
.door{
  display:block; text-decoration:none;
  padding:2.1rem clamp(1rem,2vw,1.8rem) 2.3rem;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  position:relative;
  transition:background .45s ease;
}
.dark .door{ border-color:var(--rule-dark); }
.door:last-child{ border-right:0; }
.door:hover{ background:rgba(28,24,21,.045); }
.dark .door:hover{ background:rgba(228,219,200,.05); }
.door h3{ font-size:1.18rem; margin:.75rem 0 .5rem; }
.door p{ font-size:.94rem; line-height:1.55; color:var(--ink-2); margin:0; }
.dark .door p{ color:var(--chalk-3); }
.door .arrow{
  display:inline-block; margin-top:1rem;
  font-family:var(--grot); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.dark .door .arrow{ color:var(--chalk-3); }
.door:hover .arrow{ transform:translateX(.4em); }
@media (max-width:640px){ .door{ border-right:0; } }

/* ══ PIECES — the object grid ══════════════════════════════ */

.pieces{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
  gap:clamp(1.6rem,3vw,3rem) clamp(1.2rem,2.4vw,2.4rem);
}
.pieces--tight{ grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); }

.piece{ display:flex; flex-direction:column; }
.piece__meta{ padding-top:1rem; }
.piece__name{ font-size:1.1rem; line-height:1.3; margin-bottom:.28rem; }
.piece__spec{
  font-family:var(--grot); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.7;
}
.dark .piece__spec{ color:var(--chalk-3); }
.piece__enq{
  margin-top:.7rem;
  font-family:var(--grot); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:.25em;
  align-self:flex-start;
  opacity:.7; transition:opacity .3s ease;
}
.piece__enq:hover{ opacity:1; }
.piece[data-status="rehomed"]{ opacity:.52; }
.piece[data-status="rehomed"] .piece__enq{ display:none; }

/* ══ PHOTO SLOTS ═══════════════════════════════════════════
   Where her photographs go. Deliberately visible as empty —
   an empty frame, not a broken image. */
.slot{
  position:relative;
  aspect-ratio:4/5;
  background:var(--parchment-deep);
  border:1px solid var(--rule);
  display:grid; place-items:center;
  overflow:hidden;
}
.dark .slot{ background:rgba(228,219,200,.075); border-color:var(--rule-dark); }
.slot::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,
    transparent 0 11px, rgba(28,24,21,.035) 11px 12px);
}
.dark .slot::before{
  background:repeating-linear-gradient(-45deg,
    transparent 0 11px, rgba(228,219,200,.07) 11px 12px);
}
.slot span{
  position:relative;
  font-family:var(--grot); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
  text-align:center; padding:1rem; line-height:1.7;
}
.dark .slot span{ color:var(--chalk-3); }
.slot--wide{ aspect-ratio:3/2; }
.slot--sq{ aspect-ratio:1/1; }
.slot--tall{ aspect-ratio:2/3; }
/* once a photo exists, drop an <img> inside and it takes over */
.slot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.piece:hover .slot img{ transform:scale(1.035); }


/* ══ OFFERINGS — the sanctuary list ════════════════════════ */

.offers{ max-width:58rem; }
.offer{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.2rem,3vw,3rem);
  align-items:baseline;
  padding:2.1rem 0;
  border-bottom:1px solid var(--rule-dark);
  text-decoration:none;
}
.offer:first-of-type{ border-top:1px solid var(--rule-dark); }
.offer__n{ font-family:var(--grot); font-size:.63rem; letter-spacing:.2em; color:var(--chalk-3); padding-top:.5rem; }
.offer h3{ font-size:clamp(1.25rem,1rem + 1vw,1.75rem); margin-bottom:.5rem; }
.offer p{ font-size:.98rem; line-height:1.6; color:var(--chalk-2); margin:0; max-width:54ch; }
.offer__form{
  font-family:var(--grot); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--chalk-3); text-align:right;
  white-space:nowrap; padding-top:.5rem;
}
@media (max-width:720px){
  .offer{ grid-template-columns:auto minmax(0,1fr); }
  .offer__form{ grid-column:2; text-align:left; padding-top:.9rem; }
}

/* ══ ORACLE — a painting entry ═════════════════════════════ */

.oracle{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,5rem);
  align-items:start;
  padding-block:clamp(3rem,8vh,6rem);
  border-bottom:1px solid var(--rule-dark);
}
.oracle:nth-child(even) .oracle__img{ order:2; }
.oracle__body{ padding-top:.4rem; }
.oracle__title{ font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem); font-style:italic; margin-bottom:.4rem; }
.oracle__body p{ color:var(--chalk-2); }
.oracle dl{
  margin:2rem 0 0; padding-top:1.4rem;
  border-top:1px solid var(--rule-dark);
  display:grid; grid-template-columns:8.5rem minmax(0,1fr);
  gap:.62rem 1rem;
  font-family:var(--grot); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase;
}
.oracle dt{ color:var(--chalk-3); }
.oracle dd{ margin:0; color:var(--chalk); }
.oracle dd em{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:0; font-size:.92rem; color:var(--chalk-2); }
@media (max-width:820px){
  .oracle{ grid-template-columns:1fr; }
  .oracle:nth-child(even) .oracle__img{ order:0; }
  .oracle dl{ grid-template-columns:7rem minmax(0,1fr); }
}

/* ══ INDEX — the library ═══════════════════════════════════ */

.index{ border-top:1px solid var(--rule); }
.entry{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr) auto;
  gap:clamp(.8rem,2vw,2rem);
  align-items:baseline;
  padding:1.35rem 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  transition:padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.entry:hover{ padding-left:.7rem; }
.entry__n{ font-family:var(--grot); font-size:.62rem; letter-spacing:.16em; color:var(--ink-3); }
.entry__t{ font-size:1.06rem; line-height:1.4; }
.entry__t small{ display:block; font-family:var(--grot); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:.35rem; }
.entry__k{ font-family:var(--grot); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
@media (max-width:640px){
  .entry{ grid-template-columns:2.2rem minmax(0,1fr); }
  .entry__k{ grid-column:2; }
}

/* ══ FOOTER ════════════════════════════════════════════════ */

.foot{ background:var(--void); color:var(--chalk); padding-block:clamp(4rem,9vh,7rem) 2.4rem; }
.foot__top{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem); align-items:start;
  padding-bottom:clamp(3rem,7vh,5rem);
  border-bottom:1px solid var(--rule-dark);
}
.foot h2{ font-size:clamp(1.6rem,1.2rem + 2vw,2.8rem); font-style:italic; margin-bottom:1.2rem; max-width:16ch; }
.foot p{ color:var(--chalk-2); }
.foot__links{ display:grid; gap:.9rem; align-content:start; padding-top:.6rem; }
.foot__links a{
  font-family:var(--grot); font-size:.65rem; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none; color:var(--chalk-2);
  transition:color .3s ease;
}
.foot__links a:hover{ color:var(--chalk); }
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  padding-top:2.4rem;
  font-family:var(--grot); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--chalk-3);
}
@media (max-width:720px){ .foot__top{ grid-template-columns:1fr; } }

/* ══ REVEAL ════════════════════════════════════════════════ */

[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].seen{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ── utilities ─────────────────────────────────────────────── */
.center{ text-align:center; }
.mt-s{ margin-top:1.2rem; } .mt-m{ margin-top:2.4rem; } .mt-l{ margin-top:4rem; }
.mb-m{ margin-bottom:2.4rem; } .mb-l{ margin-bottom:4rem; }
.stackx{ display:flex; flex-wrap:wrap; gap:1rem 1.2rem; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--ink); color:var(--parchment); padding:.7rem 1rem; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ══ PLATES — numbered work, named by nobody ═══════════════ */

.plates{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  gap:clamp(2rem,4vw,3.4rem) clamp(1.4rem,2.6vw,2.4rem);
}
.plate{ margin:0; }
.plate .slot{ aspect-ratio:4/5; }
.plate .slot img{ object-fit:cover; }
.plate:hover .slot img{ transform:scale(1.035); }

/* paintings are shown whole — the canvas, not a crop of it */
.plate--art .slot{
  background:rgba(228,219,200,.035);
  border-color:rgba(228,219,200,.10);
}
.plate--art .slot::before{ content:none; }
.plate--art .slot img{ object-fit:contain; padding:5%; }
.plate--art:hover .slot img{ transform:none; }

.plate__n{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
  font-family:var(--grot); font-size:.63rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
  padding-top:.95rem;
}
.dark .plate__n{ color:var(--chalk-3); }
.plate--art .plate__n{ justify-content:center; }

.plate__enq{
  text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:.2em;
  opacity:.72; transition:opacity .3s ease;
}
.plate__enq:hover{ opacity:1; }

/* ══ COLLECTIONS ═══════════════════════════════════════════ */

.colls{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));
  gap:clamp(2rem,4vw,3.2rem);
}
.coll{ display:block; text-decoration:none; }
.coll .slot{ aspect-ratio:3/2; }
.coll .slot img{ transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.coll:hover .slot img{ transform:scale(1.035); }
.coll__meta{ padding-top:1.1rem; }
.coll__meta h3{ font-size:1.55rem; margin-bottom:.45rem; }
.coll__meta .arrow{
  display:inline-block; margin-top:.9rem;
  font-family:var(--grot); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.dark .coll__meta .arrow{ color:var(--chalk-3); }
.coll:hover .arrow{ transform:translateX(.4em); }

/* a collection that does not exist yet, stated rather than hidden */
.coll--empty{
  border:1px dashed var(--rule);
  display:grid; place-items:center; text-align:center;
  min-height:18rem; padding:2rem;
}
.dark .coll--empty{ border-color:var(--rule-dark); }
.coll--empty h3{ color:var(--ink-3); }
.dark .coll--empty h3{ color:var(--chalk-3); }

/* ══ AWAITING HER WORDS ════════════════════════════════════
   Visible, not hidden. Copy Tauri is writing herself should never
   be quietly replaced by mine. */

.await{
  border-left:2px solid var(--brass);
  padding:.2rem 0 .2rem 1.4rem;
}
.await p{ font-style:italic; color:var(--ink-2); }
.dark .await p{ color:var(--chalk-2); }
.await__note{
  font-family:var(--grot); font-style:normal !important;
  font-size:.68rem; letter-spacing:.06em; line-height:1.7;
  color:var(--ink-3) !important; margin-top:.7rem;
}
.dark .await__note{ color:var(--chalk-3) !important; }

/* ══ STATUS ════════════════════════════════════════════════ */

.plate__tag{
  font-family:var(--grot); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; opacity:.5;
}
.plate[data-status=sold]{ opacity:.55; }

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:clamp(1.5rem,3vw,2.6rem);
}
.offers{ max-width:58rem; }

/* ══ HER PROSE ═════════════════════════════════════════════ */
/* The bios are long and they are hers. They get a real reading
   column, generous leading, and a first line that opens. */

.col p + p{ margin-top:1.15em; }

/* the closing lines of a bio — short, declarative, set apart */
.coda{
  border-top:1px solid var(--rule);
  padding-top:1.8rem;
}
.dark .coda{ border-top-color:var(--rule-dark); }
.coda p{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  line-height:1.4; margin:0 0 .45em;
  color:var(--ink) !important;
}
.dark .coda p{ color:var(--chalk) !important; }

/* the three questions she asks a canvas */
.questions{
  border-left:2px solid var(--brass);
  padding-left:1.5rem;
}
.questions p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,1rem + .6vw,1.4rem);
  line-height:1.45; margin:0 0 .35em;
  color:var(--ink) !important;
}
.dark .questions p{ color:var(--chalk) !important; }

/* a line that still needs somewhere to point */
[data-slot]{
  border-bottom:1px dotted var(--brass);
  padding-bottom:.1em;
}

/* a collection that exists but has no photographs yet */
.coll--waiting .slot{
  display:grid; place-items:center;
  background:var(--parchment-deep);
}
.dark .coll--waiting .slot{ background:rgba(228,219,200,.05); }
.coll--waiting .slot span{
  position:relative;
  font-family:var(--grot); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
}
.dark .coll--waiting .slot span{ color:var(--chalk-3); }

/* the first line of a bio — it opens the room */
.opener{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.55rem,1.1rem + 1.9vw,2.5rem);
  line-height:1.28; letter-spacing:-.014em;
  max-width:20ch; margin:0 0 1.6em;
  text-wrap:balance;
}
.dark .opener{ color:var(--chalk) !important; }

/* her one-line beats — deliberate pauses in the writing */
.beat{
  font-size:clamp(1.1rem,1rem + .55vw,1.35rem);
  line-height:1.45;
  color:var(--ink) !important;
  margin-top:1.9em !important;
  margin-bottom:1.9em;
  padding-left:1.4rem;
  border-left:1px solid var(--brass);
  max-width:32rem;
}
.dark .beat{ color:var(--chalk) !important; }

/* dimensions and medium under a painting */
.plate__spec{
  font-family:var(--grot); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  margin:.35rem 0 0; line-height:1.6;
}
.dark .plate__spec{ color:var(--chalk-3); }

/* a library entry */
.entry-full{
  max-width:44rem;
  padding-bottom:clamp(3rem,7vh,5rem);
  margin-bottom:clamp(3rem,7vh,5rem);
  border-bottom:1px solid var(--rule);
}
.entry-full:last-child{ border-bottom:0; }