/* ==========================================================
   M. Turandot — Miragwyn Books
   Shared stylesheet. Every page links to this one file.
   Change a colour or a size here and it changes everywhere.
   ========================================================== */

:root{
  /* The vat: colours named for what they are, not what they do */
  --vat:        #0E1626;   /* deepest indigo — page ground */
  --vat-mid:    #16223A;   /* one dip up */
  --vat-pale:   #1E2E4B;   /* shallow */
  --gold:       #C9A44C;   /* kintsugi — the single accent */
  --cloth:      #E4DFD3;   /* undyed linen — body text */
  --snow:       #FAF7F1;   /* kardelen — display text */
  --muted:      #8A93A8;   /* secondary text */
  --water:      #9FB4CE;   /* forthcoming tier */

  --measure:    62ch;
  --gutter:     clamp(1.5rem, 5vw, 6rem);
  --shell:      74rem;

  --hairline:   rgba(228,223,211,0.07);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--vat);
  color:var(--cloth);
  font-family:'Spectral', Georgia, 'Times New Roman', serif;
  font-weight:300;
  font-size:clamp(1rem, 0.95rem + 0.25vw, 1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:'Cormorant Garamond', 'Hoefler Text', Baskerville, Georgia, serif;
  font-weight:300;
  color:var(--snow);
  margin:0;
  line-height:1.08;
  letter-spacing:-0.005em;
}
h1{ font-size:clamp(2.6rem, 6.5vw, 5.4rem); }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.9rem); }
h3{ font-size:clamp(1.45rem, 2.4vw, 2rem); }

p{ margin:0 0 1.15em; max-width:var(--measure); }
a{ color:inherit; }
em{ font-style:italic; }

.eyebrow{
  font-family:'Jost', 'Avenir Next', 'Helvetica Neue', sans-serif;
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
}
.eyebrow-quiet{ color:var(--muted); }

.lede{
  font-size:clamp(1.15rem, 1.9vw, 1.4rem);
  color:var(--snow);
  font-weight:300;
  max-width:48ch;
}

.note{ color:var(--muted); font-size:0.95rem; max-width:52ch; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--gold); color:var(--vat);
  padding:0.7rem 1.2rem; z-index:100;
  font-family:'Jost', sans-serif; font-size:0.75rem;
  letter-spacing:0.15em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding:1.25rem var(--gutter);
  background:rgba(14,22,38,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(228,223,211,0.08);
}
.wordmark{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.35rem; color:var(--snow);
  letter-spacing:0.04em; text-decoration:none; white-space:nowrap;
}
.topnav{ display:flex; gap:clamp(1rem, 2.4vw, 2.2rem); flex-wrap:wrap; }
.topnav a{
  font-family:'Jost', 'Avenir Next', sans-serif;
  font-size:0.72rem; font-weight:400;
  letter-spacing:0.19em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  padding:0.2rem 0;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.topnav a:hover{ color:var(--cloth); }
.topnav a[aria-current="page"]{ color:var(--snow); border-bottom-color:var(--gold); }

/* ---------- bands ---------- */
.band{ padding:clamp(3.5rem, 8vw, 7rem) var(--gutter); }
.band + .band{ border-top:1px solid var(--hairline); }
.shell{ max-width:var(--shell); margin:0 auto; }

.page-head{ padding-bottom:clamp(2.5rem, 5vw, 4rem); }
.page-head h1{ max-width:14ch; }
.page-head .lede{ margin-top:2rem; }

/* ---------- hero: the dip ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(5rem, 14vh, 9rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  background:linear-gradient(180deg, var(--vat-pale) 0%, var(--vat) 78%);
}
.hero::after{                       /* cloth lowering into the vat, once, on load */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--vat) 0%, var(--vat) 55%, rgba(14,22,38,0) 100%);
  animation:dip 1900ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes dip{ from{ transform:translateY(-100%); } to{ transform:translateY(100%); } }

.hero-inner{ position:relative; z-index:1; max-width:var(--shell); margin:0 auto; }
.hero h1{ max-width:16ch; }
.hero .attrib{
  font-family:'Jost', sans-serif; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--muted); margin:2.4rem 0 0;
}

.dipline{
  height:1px; border:0; margin:2.6rem 0 0; max-width:26rem;
  background:linear-gradient(90deg, var(--gold), rgba(201,164,76,0));
}

/* ---------- controls ---------- */
.btn{
  display:inline-block; margin-top:2rem;
  font-family:'Jost', sans-serif; font-size:0.74rem;
  letter-spacing:0.2em; text-transform:uppercase; text-decoration:none;
  color:var(--snow); padding:0.85rem 1.9rem;
  border:1px solid rgba(201,164,76,0.5);
  background:none; cursor:pointer;
  transition:background .3s, border-color .3s;
}
.btn:hover{ background:rgba(201,164,76,0.13); border-color:var(--gold); }
.btn-flush{ margin-top:0; }

.textlink{
  font-family:'Jost', sans-serif; font-size:0.74rem;
  letter-spacing:0.16em; text-transform:uppercase; text-decoration:none;
  color:var(--gold); border-bottom:1px solid rgba(201,164,76,0.35);
  padding-bottom:2px; transition:border-color .25s;
}
.textlink:hover{ border-bottom-color:var(--gold); }
.textlink-off{
  color:var(--muted);
  border-bottom-color:rgba(138,147,168,0.3);
  cursor:default;
}

/* ---------- the vat: book tiers ---------- */
.tier{ margin-bottom:clamp(3rem, 6vw, 5rem); }
.tier:last-child{ margin-bottom:0; }

.tier-head{ display:flex; align-items:baseline; gap:1.2rem; margin-bottom:2.2rem; }
.tier-head .label{
  font-family:'Jost', sans-serif; font-size:0.68rem; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase; white-space:nowrap;
}
.tier-head .rule{ flex:1; height:1px; }

.tier-print .label{ color:var(--gold); }
.tier-print .rule{ background:linear-gradient(90deg, var(--gold), rgba(201,164,76,0.06)); }
.tier-next  .label{ color:var(--water); }
.tier-next  .rule{ background:linear-gradient(90deg, rgba(159,180,206,0.6), rgba(159,180,206,0.05)); }
.tier-loom  .label{ color:var(--muted); }
.tier-loom  .rule{ background:linear-gradient(90deg, rgba(138,147,168,0.35), rgba(138,147,168,0.03)); }

.plate{
  position:relative;
  padding:1.9rem 2rem 1.9rem 2.2rem;
  margin-bottom:1.1rem;
  scroll-margin-top:6rem;
  transition:transform .3s ease;
}
.plate::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; }
.plate h3{ margin-bottom:0.45rem; }
.plate p{ margin-bottom:1.1rem; }
.plate .links{ display:flex; gap:1.6rem; flex-wrap:wrap; }

.meta{
  font-family:'Jost', sans-serif; font-size:0.68rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1rem;
}

/* depth of dye = publication reality */
.plate-print{ background:linear-gradient(180deg, var(--vat-pale), var(--vat-mid)); }
.plate-print::before{ background:var(--gold); }
.plate-print:hover{ transform:translateX(4px); }

.plate-next{ background:linear-gradient(180deg, rgba(30,46,75,0) 0%, rgba(30,46,75,0.85) 100%); }
.plate-next::before{ background:linear-gradient(180deg, rgba(201,164,76,0) 0%, var(--gold) 100%); }
.plate-next:hover{ transform:translateX(4px); }

.loomlist{ padding-left:2.2rem; border-left:1px solid rgba(138,147,168,0.22); }
.loomlist ul{ margin:0; padding:0; list-style:none; }
.loomlist li{ margin-bottom:1.5rem; }
.loomlist li:last-child{ margin-bottom:0; }
.loomlist h3{ color:var(--muted); font-size:1.5rem; margin-bottom:0.15rem; }
.loomlist p{ margin:0; }

/* ---------- grids ---------- */
.two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(17rem,1fr)); gap:clamp(2rem, 5vw, 4.5rem); }
.trio{ display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem,1fr)); gap:2.5rem; }
.trio h3{ font-size:1.35rem; margin-bottom:0.4rem; }
.trio p{ font-size:0.95rem; color:var(--muted); margin-bottom:0.9rem; }

.prose{ max-width:var(--measure); }
.prose h2{ margin-top:2.5rem; margin-bottom:1rem; }

/* ---------- footer ---------- */
.site-footer{
  padding:3rem var(--gutter) 4rem;
  border-top:1px solid var(--hairline);
  color:var(--muted); font-size:0.85rem;
}
.site-footer p{ max-width:none; margin:0 0 0.5rem; }
.site-footer a{ color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(138,147,168,0.3); }
.site-footer a:hover{ color:var(--cloth); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .hero::after{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- atelier pieces ---------- */
.piece{
  max-width:var(--measure);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--hairline);
  scroll-margin-top:6rem;
}
.piece:last-of-type{ border-bottom:0; margin-bottom:0; }
.piece h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:1.4rem; }
.piece .standfirst{
  color:var(--snow);
  font-size:1.08rem;
  margin-bottom:1.6rem;
}
.lexicon dl{ max-width:var(--measure); margin:0; }
.lexicon dt{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.35rem; color:var(--snow); margin-top:1.8rem;
}
.lexicon dd{ margin:0.3rem 0 0; color:var(--muted); font-size:0.97rem; max-width:52ch; }

/* ---------- track / program lists ---------- */
.tracklist{ list-style:none; margin:1.6rem 0 0; padding:0; max-width:var(--measure); counter-reset:trk; }
.tracklist li{
  display:flex; gap:1rem; align-items:baseline;
  padding:0.45rem 0;
  border-bottom:1px solid rgba(228,223,211,0.05);
  counter-increment:trk;
}
.tracklist li::before{
  content:counter(trk);
  font-family:'Jost',sans-serif; font-size:0.7rem; color:var(--muted);
  min-width:1.6rem; text-align:right; letter-spacing:0.05em;
}
.tracklist .dur{ margin-left:auto; font-family:'Jost',sans-serif; font-size:0.72rem; color:var(--muted); }

.movement{ margin-top:2rem; }
.movement h3{ font-size:1.3rem; color:var(--water); margin-bottom:0.5rem; }
.movement p{ margin-bottom:0; }
.movement .songs{ color:var(--cloth); }
.movement .why{ color:var(--muted); font-size:0.95rem; margin-top:0.3rem; }

/* ---------- artwork ---------- */
figure.plate-art{ margin:2.2rem 0; max-width:var(--measure); }
figure.plate-art img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(201,164,76,0.25);
}
figure.plate-art figcaption{
  margin-top:0.8rem;
  font-family:'Jost',sans-serif; font-size:0.68rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}