/* =====================================================================
   Leigh Landy, Editorial Design System
   Inspired by NYRB, MIT Press, Yale Press, The Paris Review, Cambridge UP
   ===================================================================== */


/* ---------- Tokens ---------- */
:root{
  /* Ink — lightened per Leigh. Deep slate-navy instead of near-black. */
  --ink:        #2a2f3a;
  --ink-2:      #3a4152;
  --ink-soft:   #5a6173;
  --ink-mute:   #8b92a0;

  /* Paper (warm off-white, tinted very lightly with lavender/blue) */
  --paper:      #f3eff1;
  --paper-2:    #f8f4f6;
  --paper-3:    #e8e1e8;
  --paper-deep: #d8cee0;

  /* Accent */
  --claret:     #6b1622;
  --claret-2:   #8a1c2c;
  --gold:       #b48a3c;
  --gold-soft:  #d8b56a;

  /* Lines */
  --rule:       #d8cdb1;
  --rule-2:     #c2b594;
  --rule-strong:#2a2f3a;

  /* Type */
  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --serif:   "Source Serif 4", "EB Garamond", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Compatibility (older inline references) */
  --midnight: var(--ink);
  --cream:    var(--paper-2);
  --muted:    var(--ink-mute);
  --serif-display: var(--display);

  /* Rhythm */
  --container: 1320px;
  --prose:     680px;
  --wide:      1140px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","clig","calt","onum","ss01";
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.65;
  font-variant-numeric:oldstyle-nums proportional-nums;
  font-optical-sizing:auto;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(95,70,150,.07) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(40,65,140,.05) 0%, transparent 55%);
  overflow-x:hidden;
}
img,video,iframe{max-width:100%;height:auto;display:block}
a{color:var(--claret);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--ink)}
::selection{background:var(--ink);color:var(--paper-2)}

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--ink);
  color:#cdc2a3;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid #3a4152;
}
.topbar .inner{
  max-width:var(--container);
  margin:0 auto;
  padding:.85rem var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
}
.topbar .institution{opacity:.78}
.topbar a{color:#d8b56a;margin-left:1.6rem;text-decoration:none;position:relative}
.topbar a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s ease;
}
.topbar a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Homepage Hero ---------- */
.masthead, .hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  min-height:78vh;
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:5rem var(--gutter) 3rem;
}
.masthead::before, .hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(184,138,62,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(138,28,44,.22) 0%, transparent 60%),
    linear-gradient(180deg, #4e5878 0%, #3d4558 100%);
}
.masthead::after, .hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
.masthead .inner, .hero .inner{
  position:relative;
  max-width:var(--container);
  width:100%;
  margin:0 auto;
}
.masthead .crest, .hero .crest{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:1.6rem;
  display:inline-flex;align-items:center;gap:1rem;
}
.masthead .crest::before, .hero .crest::before{
  content:"";display:block;width:32px;height:1px;background:var(--gold-soft);opacity:.5;
}
.masthead h1, .hero h1{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(4rem, 13vw, 12rem);
  line-height:.92;
  letter-spacing:-.035em;
  color:var(--paper-2);
  margin:.2rem 0 1rem;
}
.masthead h1 .amp{
  display:inline-block;
  color:var(--gold-soft);
  font-weight:200;
  padding:0 .15em;
}
.masthead .tagline, .hero .tagline{
  font-family:var(--serif);
  font-size:clamp(1.05rem, 1.5vw, 1.35rem);
  font-style:italic;
  color:#e6dcc1;
  max-width:42em;
  line-height:1.55;
  margin-top:1.5rem;
  border-left:2px solid var(--gold);
  padding-left:1.4rem;
}
.masthead .ornament, .hero .ornament{
  display:block;
  font-family:var(--display);
  font-style:italic;
  color:var(--gold-soft);
  font-size:1.8rem;
  margin-top:2.5rem;
  opacity:.7;
}
.hero .meta-strip{
  display:flex;flex-wrap:wrap;gap:3rem;
  margin-top:3.5rem;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a8a08a;
}
.hero .meta-strip > div{display:flex;flex-direction:column;gap:.35rem}
.hero .meta-strip strong{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:1.7rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--gold-soft);
  font-variant-numeric:oldstyle-nums;
}
.hero .scroll-cue{
  position:absolute;
  bottom:2rem;
  left:50%;transform:translateX(-50%);
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#a8a08a;
  opacity:.7;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
}
.hero .scroll-cue::after{
  content:"↓";display:block;font-size:1.4rem;line-height:1;
  color:var(--gold-soft);
  animation:cueLine 2s ease-in-out infinite;
}
@keyframes cueLine{
  0%,100%{opacity:.3;transform:scaleY(.6)}
  50%{opacity:1;transform:scaleY(1)}
}

/* ---------- Inner page subhead ---------- */
.subhead{
  background:var(--ink);
  color:var(--paper);
  padding:5.5rem var(--gutter) 4.5rem;
  position:relative;
  overflow:hidden;
}
.subhead::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(184,138,62,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(138,28,44,.15) 0%, transparent 55%);
  pointer-events:none;
}
.subhead .inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  text-align:center;
}
.subhead .eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:1.4rem;
  display:inline-flex;align-items:center;gap:1.2rem;
}
.subhead .eyebrow::before,.subhead .eyebrow::after{
  content:"";display:block;width:32px;height:1px;background:var(--gold-soft);opacity:.5;
}
.subhead h1{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:clamp(3rem, 8vw, 6.5rem);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--paper-2);
}
.subhead .meta{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:#cdc2a3;
  margin-top:1.4rem;
  letter-spacing:.01em;
}

/* ---------- Primary nav ---------- */
nav.primary{
  position:sticky;top:0;z-index:50;
  background:rgba(251,246,232,.94);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 var(--paper-deep), 0 4px 18px rgba(13,17,23,.04);
  backdrop-filter:saturate(130%) blur(10px);
  -webkit-backdrop-filter:saturate(130%) blur(10px);
}
nav.primary ul{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  list-style:none;
  justify-content:center;
  gap:.4rem;
  flex-wrap:wrap;
}
nav.primary li a{
  display:block;
  padding:1.15rem 1.4rem;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  transition:color .2s ease;
}
nav.primary li a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:.6rem;height:2px;
  background:var(--claret);transition:left .25s ease, right .25s ease;
}
nav.primary li a:hover{color:var(--ink)}
nav.primary li a:hover::after,
nav.primary li a.active::after{left:1.4rem;right:1.4rem}
nav.primary li a.active{color:var(--claret)}

/* ---------- Main containers ---------- */
main{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- Section title block ---------- */
.section-title{
  text-align:center;
  margin:7rem auto 3rem;
  max-width:var(--prose);
}
.section-title .eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--claret);
  margin-bottom:1.2rem;
  display:inline-flex;align-items:center;gap:1rem;
}
.section-title .eyebrow::before,.section-title .eyebrow::after{
  content:"";display:block;width:32px;height:1px;background:var(--claret);opacity:.6;
}
.section-title h2{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 40;
  font-size:clamp(2.4rem, 5vw, 4.2rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.section-title p.lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink-soft);
  margin-top:1.4rem;
  line-height:1.55;
}

/* ---------- Intro / about block (home) ---------- */
.intro{
  max-width:var(--wide);
  margin:7rem auto;
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:4rem;
  align-items:start;
  padding:0 1rem;
}
.intro .label{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--claret);
  position:sticky;top:5rem;
  padding-top:.4rem;
  border-top:2px solid var(--ink);
  display:inline-block;
  padding-right:1rem;
  font-weight:600;
}
.intro .body{
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.7;
  color:var(--ink);
  font-feature-settings:"kern","liga","onum","ss01";
}
.intro .body p:first-of-type::first-letter{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 60;
  font-size:5.4rem;
  line-height:.85;
  float:left;
  padding:.5rem .65rem 0 0;
  color:var(--claret);
}
.intro .body p+p{margin-top:1.4rem}
.intro .body em{color:var(--claret);font-style:italic}

@media (max-width:880px){
  .intro{grid-template-columns:1fr;gap:1.4rem}
  .intro .label{position:static;border-top:none;border-left:2px solid var(--ink);padding:0 0 0 .8rem}
}

/* ---------- Portrait block (home / about) ---------- */
.portrait-block{
  max-width:var(--wide);
  margin:7rem auto;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:5rem;
  align-items:center;
  padding:0 1rem;
}
.portrait-block .portrait{
  position:relative;
  margin:0;
}
.portrait-block .portrait img{
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  background:var(--paper-3);
  box-shadow:
    0 1px 0 var(--rule),
    0 30px 80px -30px rgba(13,17,23,.45),
    0 14px 40px -18px rgba(107,22,34,.18);
  filter:saturate(.92) contrast(1.02);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.portrait-block .portrait::before{
  content:"";
  position:absolute;
  inset:-22px -22px 22px 22px;
  border:1px solid var(--gold);
  opacity:.4;
  pointer-events:none;
  z-index:-1;
}
.portrait-block .portrait:hover img{transform:scale(1.015)}
.portrait-block .portrait figcaption{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:1.2rem;
  text-align:right;
  font-weight:500;
}
.portrait-block .portrait-text .eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--claret);
  font-weight:600;
  display:inline-flex;align-items:center;gap:1rem;
  margin-bottom:1.2rem;
}
.portrait-block .portrait-text .eyebrow::before{
  content:"";display:block;width:32px;height:1px;background:var(--claret);opacity:.6;
}
.portrait-block .portrait-text h2{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 40;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:1.5rem;
}
.portrait-block .portrait-text .lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin-bottom:1.4rem;
  border-left:2px solid var(--claret);
  padding-left:1.2rem;
}
.portrait-block .portrait-text p{
  font-family:var(--serif);
  font-size:1.06rem;
  line-height:1.7;
  color:var(--ink);
  margin-bottom:1rem;
}
.portrait-block .portrait-text em{color:var(--claret)}
.portrait-block .portrait-text .more{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--claret);
  position:relative;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--claret);
  display:inline-block;
}
.portrait-block .portrait-text .more:hover{color:var(--ink);border-color:var(--ink)}

@media (max-width:880px){
  .portrait-block{grid-template-columns:1fr;gap:3rem;margin:4rem auto}
  .portrait-block .portrait::before{display:none}
}

/* DOI stub paragraph in entry bodies */
.doi-stub{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--ink-mute);
  border-top:1px solid var(--rule);
  margin-top:2rem!important;
  padding-top:1rem;
}
.doi-stub strong{color:var(--claret);font-weight:600}
.doi-stub a{color:var(--ink);border-bottom:1px solid var(--rule-2)}

/* Source attribution badge */
.source-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:.55rem 1rem;
  border-radius:999px;
  margin:.4rem .4rem 0 0;
  font-weight:500;
}
.source-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--claret);
}

/* ---------- Divider ornaments ---------- */
.divider{
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  max-width:var(--wide);margin:5rem auto;
}
.divider::before,.divider::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, transparent, var(--rule-2), transparent);
}
.divider span{
  font-family:var(--display);
  font-style:italic;
  font-size:1.6rem;
  color:var(--gold);
}

/* ---------- Feature grid ---------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3rem;
  max-width:var(--wide);
  margin:3rem auto 6rem;
}
.feature{
  display:flex;flex-direction:column;
  position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.feature:hover{transform:translateY(-6px)}
.feature .img-wrap{
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--paper-3);
  margin-bottom:1.4rem;
  position:relative;
  box-shadow:0 1px 0 var(--rule), 0 14px 40px -18px rgba(13,17,23,.35);
}
.feature .img-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(13,17,23,.18));
  opacity:0;transition:opacity .4s ease;
}
.feature:hover .img-wrap::after{opacity:1}
.feature .img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.feature:hover .img-wrap img{transform:scale(1.04)}
.feature .label{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--claret);
  margin-bottom:.6rem;
  font-weight:600;
}
.feature h3{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-variation-settings:"opsz" 60, "SOFT" 40;
  font-size:1.7rem;
  line-height:1.15;
  letter-spacing:-.012em;
  color:var(--ink);
  margin-bottom:.7rem;
}
.feature p{
  font-family:var(--serif);
  font-size:1rem;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.5;
  margin-bottom:1rem;
}
.feature .more{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--claret);
  margin-top:auto;
  display:inline-flex;align-items:center;gap:.5rem;
  position:relative;
  padding-bottom:.4rem;
  align-self:flex-start;
}
.feature .more::after{
  content:"";position:absolute;left:0;right:30%;bottom:0;height:1px;background:var(--claret);
  transition:right .35s ease;
}
.feature:hover .more::after{right:0}

@media (max-width:900px){.feature-grid{grid-template-columns:1fr;gap:3.5rem}}

/* Compact variant for Idée Fixe: smaller, tighter, keeps the trio together */
.feature-grid.compact{max-width:820px;gap:2rem;margin:2rem auto 5rem}
.feature-grid.compact .feature{font-size:.92em}
.feature-grid.compact .feature .img-wrap{aspect-ratio:4/3;margin-bottom:.9rem}
.feature-grid.compact .feature h3{font-size:clamp(1.2rem, 2vw, 1.5rem)}

/* ---------- Pull quote ---------- */
.pullquote{
  max-width:var(--wide);
  margin:7rem auto;
  padding:0 4rem;
  position:relative;
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:clamp(1.7rem, 3.4vw, 2.8rem);
  line-height:1.25;
  text-align:center;
  color:var(--ink);
}
/* Large decorative opening-quote removed per Leigh; inline inverted commas used instead. */
.pullquote cite{
  display:block;
  margin-top:1.8rem;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--claret);
  font-style:normal;
  font-weight:600;
}

/* ---------- Catalogue (numbered editorial list) ---------- */
.catalogue{
  list-style:none;
  max-width:var(--wide);
  margin:3rem auto 5rem;
  border-top:2px solid var(--ink);
  counter-reset:item;
}
.catalogue li{
  display:grid;
  grid-template-columns: 56px 110px 1fr auto;
  gap:1.6rem;
  align-items:baseline;
  padding:1.7rem 1rem;
  border-bottom:1px solid var(--rule);
  position:relative;
  transition:background .25s ease, padding .25s ease;
  counter-increment:item;
}
.catalogue li:hover{
  background:var(--paper-2);
  padding-left:1.6rem;
}
.catalogue li::before{
  content:counter(item, decimal-leading-zero);
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
}
.catalogue .year{
  font-family:var(--display);
  font-style:italic;
  font-size:1.7rem;
  font-weight:400;
  color:var(--claret);
  font-variant-numeric:oldstyle-nums;
  letter-spacing:-.01em;
}
.catalogue .work{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.catalogue .work-title{
  font-family:var(--display);
  font-weight:400;
  font-size:1.5rem;
  line-height:1.2;
  color:var(--ink);
  letter-spacing:-.01em;
  font-feature-settings:"kern","liga","onum";
}
a.work-title{transition:color .2s ease}
a.work-title:hover{color:var(--claret)}
.catalogue .work-meta{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:500;
}
.catalogue .work-desc{
  font-family:var(--serif);
  font-size:1rem;
  font-style:italic;
  color:var(--ink-soft);
  margin-top:.3rem;
  line-height:1.55;
}
.catalogue .indicators{
  display:inline-flex;gap:.4rem;align-self:center;
  margin-left:.8rem;
}
.catalogue .ind{
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--claret);
  border:1px solid var(--rule-2);
  background:var(--paper-2);
  padding:.22rem .6rem;
  border-radius:999px;
  white-space:nowrap;
  transition:all .25s ease;
}
.catalogue li:hover .ind{
  background:var(--claret);color:var(--paper-2);border-color:var(--claret);
}

@media (max-width:740px){
  .catalogue li{grid-template-columns:50px 1fr;gap:.6rem 1rem}
  .catalogue .year{grid-row:1;grid-column:2}
  .catalogue .work{grid-row:2;grid-column:1/-1}
  .catalogue li::before{grid-row:1;grid-column:1}
  .catalogue .indicators{margin:.4rem 0 0}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:1.05rem 2.2rem;
  background:var(--ink);
  color:var(--paper-2);
  border:1px solid var(--ink);
  transition:all .3s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--claret);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{color:var(--paper-2);border-color:var(--claret)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn.outline{background:transparent;color:var(--ink)}
.btn.outline:hover{color:var(--paper-2)}

/* ---------- Prose article ---------- */
.prose{
  max-width:var(--prose);
  margin:0 auto;
  font-family:var(--serif);
  font-size:1.16rem;
  line-height:1.78;
  color:var(--ink);
}
.prose p{margin:0 0 1.4rem}
.prose p:first-of-type{
  font-size:1.32rem;
  line-height:1.55;
  color:var(--ink-soft);
  font-style:italic;
}
.prose h2{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:2.1rem;
  line-height:1.15;
  color:var(--ink);
  margin:3.5rem 0 1.2rem;
  letter-spacing:-.012em;
}
.prose h3{
  font-family:var(--display);
  font-weight:500;
  font-size:1.4rem;
  margin:2.4rem 0 .8rem;
  color:var(--ink);
}
.prose a:not(.btn){
  color:var(--claret);
  border-bottom:1px solid var(--rule-2);
  transition:all .2s ease;
}
.prose a:not(.btn):hover{color:var(--ink);border-color:var(--ink)}
.prose a.btn{color:var(--paper-2);border-bottom:0}
.prose a.btn:hover{color:var(--paper-2)}
.prose blockquote{
  margin:2rem 0;
  padding:0 0 0 1.6rem;
  border-left:2px solid var(--gold);
  font-style:italic;
  color:var(--ink-soft);
  font-size:1.2rem;
}
.prose ul,.prose ol{margin:0 0 1.4rem 1.4rem}
.prose li{margin:.4rem 0}
.prose img{margin:2rem auto;border:1px solid var(--rule)}
.prose em{color:var(--claret)}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- Entry hero (per-piece pages) ---------- */
.entry-hero{
  background:var(--ink);
  color:var(--paper);
  padding:6rem var(--gutter) 5rem;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.entry-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(184,138,62,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(138,28,44,.16) 0%, transparent 60%);
  pointer-events:none;
}
.entry-hero > *{position:relative}
.entry-hero .eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:1.6rem;
  display:inline-flex;align-items:center;gap:1.2rem;
  font-weight:600;
}
.entry-hero .eyebrow::before,.entry-hero .eyebrow::after{
  content:"";display:block;width:32px;height:1px;background:var(--gold-soft);opacity:.5;
}
.entry-hero h1{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:clamp(2.2rem, 5.5vw, 4.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--paper-2);
  max-width:20ch;
  margin:0 auto;
}

/* ---------- Entry body (article + media) ---------- */
.entry-body{
  max-width:var(--wide);
  margin:0 auto;
  padding:5rem var(--gutter) 4rem;
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:4rem;
  align-items:start;
}
.entry-body .side{
  position:sticky;top:6rem;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-top:2px solid var(--ink);
  padding-top:1rem;
}
.entry-body .side dt{
  color:var(--claret);
  font-weight:600;
  margin-top:1.1rem;
}
.entry-body .side dt:first-of-type{margin-top:0}
.entry-body .side dd{
  font-family:var(--serif);
  font-size:.95rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  font-style:italic;
  margin-top:.2rem;
}

.entry-body .article-col{min-width:0}
.entry-body .article-col .prose{margin:0;max-width:none}
/* Drop cap intentionally removed: titles/abbreviations made the first letter awkward. */

@media (max-width:880px){
  .entry-body{grid-template-columns:1fr;gap:2rem;padding-top:3rem}
  .entry-body .side{position:static;display:flex;flex-wrap:wrap;gap:1.4rem 2rem;border-top:none;border-bottom:1px solid var(--rule);padding-bottom:1.2rem}
  .entry-body .side dt,.entry-body .side dd{margin:0}
}

/* ---------- Media blocks ---------- */
.media-block{
  margin:3.5rem 0;
  padding-top:2.5rem;
  border-top:1px solid var(--rule);
}
.media-block h3{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--claret);
  margin-bottom:1.4rem;
  display:inline-flex;align-items:center;gap:1rem;
}
.media-block h3::before{
  content:"";display:block;width:24px;height:1px;background:var(--claret);opacity:.6;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem;
}
.gallery.gallery-large{
  grid-template-columns:minmax(0, 1fr);
  max-width:820px;
  margin:0 auto;
}
.gallery.gallery-large img{aspect-ratio:4/3;object-fit:contain;background:#fff}
.gallery img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  border:1px solid var(--rule);
  background:var(--paper-3);
  transition:transform .6s ease, box-shadow .4s ease;
}
.gallery img:hover{
  transform:scale(1.02);
  box-shadow:0 14px 40px -18px rgba(13,17,23,.35);
}
.media-block figure{margin:1rem 0}
.media-block figcaption{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:.6rem;
  font-weight:500;
}
/* ---------- Audio / Video players ---------- */
.media-block audio,
.media-block video,
.prose audio,
.prose video,
audio,
video{
  display:block;
  width:100%;
  margin:1.4rem 0;
  background:var(--ink);
  border:0;
  border-top:2px solid var(--claret);
  border-radius:0;
  box-shadow:0 14px 44px -18px rgba(13,17,23,.45),
             0 1px 0 0 var(--rule) inset;
  outline:0;
}
audio{
  height:54px;
  padding:0;
}
video,
.media-block video{
  aspect-ratio:16/9;
  object-fit:contain;
  border-top-width:3px;
}
/* WebKit / Chrome / Safari controls re-tint */
audio::-webkit-media-controls-enclosure,
video::-webkit-media-controls-enclosure{
  background:var(--ink);
  border-radius:0;
}
audio::-webkit-media-controls-panel,
video::-webkit-media-controls-panel{
  background:linear-gradient(180deg,#4e5878 0%, #3d4558 100%);
}
audio::-webkit-media-controls-play-button,
video::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
video::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-fullscreen-button{
  filter:invert(1) sepia(.4) saturate(3) hue-rotate(330deg) brightness(.95);
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display{
  color:#d8b56a;
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-shadow:none;
}
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline{
  background:rgba(216,181,106,.12);
  border-radius:0;
  height:4px;
  margin:0 12px;
}
audio::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-slider{
  background:rgba(216,181,106,.18);
  border-radius:0;
}
/* Firefox: limited re-styling, but the frame still applies */
@-moz-document url-prefix(){
  audio,video{ background:#2a2f3a; }
}
/* A small caption-style label can be added by authors via figure>figcaption already */

.file-link{
  display:flex;align-items:center;gap:1.2rem;
  padding:1.1rem 1.4rem;
  margin:.6rem 0;
  border:1px solid var(--rule);
  background:var(--paper-2);
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink);
  transition:all .25s ease;
  text-decoration:none;
}
.file-link:hover{
  background:var(--ink);color:var(--paper-2);border-color:var(--ink);
  transform:translateX(4px);
}
.file-link .ico{
  font-family:var(--display);
  font-size:1.6rem;
  color:var(--claret);
  font-style:italic;
}
.file-link:hover .ico{color:var(--gold-soft)}
.file-link .meta{
  margin-left:auto;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:500;
}
.file-link:hover .meta{color:#a8a08a}

/* ---------- Entry nav ---------- */
.entry-nav{
  margin:5rem 0 0;
  padding-top:2rem;
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
}
.entry-nav a{color:var(--claret);position:relative;padding:.4rem 0}
.entry-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--claret);
  transform:scaleX(0);transform-origin:right;transition:transform .35s ease;
}
.entry-nav a:hover{color:var(--ink)}
.entry-nav a:hover::after{transform:scaleX(1);transform-origin:left;background:var(--ink)}

/* ---------- Footer ---------- */
footer.site{
  background:var(--ink);
  color:#cdc2a3;
  margin-top:8rem;
  padding:6rem var(--gutter) 2.5rem;
  position:relative;
  overflow:hidden;
}
footer.site::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(184,138,62,.08) 0%, transparent 60%);
  pointer-events:none;
}
footer.site .inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:3rem;
  padding-bottom:4rem;
  border-bottom:1px solid #3a4152;
}
footer.site > div:first-child h4,
footer.site .brand h4{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:2.6rem;
  color:var(--paper-2);
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:1rem;
  text-transform:none;
}
footer.site h4{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:1.2rem;
  font-weight:600;
}
footer.site a{
  display:block;
  font-family:var(--serif);
  font-size:1rem;
  color:#cdc2a3;
  margin:.4rem 0;
  transition:color .2s ease;
}
footer.site a:hover{color:var(--gold-soft)}
footer.site .colophon{
  position:relative;
  max-width:var(--container);
  margin:2.5rem auto 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#6b7280;
}
footer.site .colophon span em{font-style:italic;color:var(--gold-soft);text-transform:none;letter-spacing:0}

@media (max-width:900px){
  footer.site .inner{grid-template-columns:1fr 1fr;gap:2.5rem}
  footer.site > div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  footer.site .inner{grid-template-columns:1fr}
}

/* ---------- Contact form ---------- */
.contact{
  max-width:680px;margin:3rem auto;
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:3rem;
}
.contact label{
  display:block;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--claret);
  margin-bottom:.5rem;
  font-weight:600;
}
.contact input,.contact textarea{
  width:100%;padding:1rem;
  font-family:var(--serif);font-size:1.05rem;
  border:1px solid var(--rule-2);background:#fff;
  margin-bottom:1.4rem;
  transition:border-color .25s ease;
}
.contact input:focus,.contact textarea:focus{
  outline:none;border-color:var(--ink);
}

/* ---------- Reveal animation (only when JS opts in) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* Stagger group: each child waits longer */
.js .stagger > *{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.js .stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.12s}
.stagger.in > *:nth-child(3){transition-delay:.19s}
.stagger.in > *:nth-child(4){transition-delay:.26s}
.stagger.in > *:nth-child(5){transition-delay:.33s}
.stagger.in > *:nth-child(6){transition-delay:.40s}
.stagger.in > *:nth-child(7){transition-delay:.47s}
.stagger.in > *:nth-child(8){transition-delay:.54s}
.stagger.in > *:nth-child(9){transition-delay:.61s}
.stagger.in > *:nth-child(10){transition-delay:.68s}

/* ============================================================
   HERO, Animated sound-wave + kinetic typography
   ============================================================ */

.hero{position:relative}

.hero-waves{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;
  mix-blend-mode:screen;
  opacity:.85;
}
.hero-waves .wave{
  filter:drop-shadow(0 0 6px rgba(216,181,106,.18));
  transition:d 0s;
}

.hero-grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184,138,62,.07) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(138,28,44,.08) 0, transparent 45%);
  animation:heroBreathe 14s ease-in-out infinite alternate;
}
@keyframes heroBreathe{
  0%  {transform:scale(1)    translate(0,0);     opacity:.85}
  100%{transform:scale(1.06) translate(-1%,1%);  opacity:1}
}

/* Title, held still, lit by a quiet fade */
.hero h1{opacity:0;animation:fadeUp 1.6s cubic-bezier(.2,.8,.2,1) .15s forwards}
.hero h1 .amp{color:var(--gold-soft);font-weight:200;padding:0 .12em;display:inline-block}

.hero .crest{opacity:0;animation:fadeUp 1s ease .05s forwards}
.hero .crest .dot{opacity:.4;margin:0 .15em}
.hero .tagline{opacity:0;animation:fadeUp 1.4s ease .55s forwards}
.hero .scroll-cue{opacity:0;animation:fadeUp 1.4s ease .9s forwards}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:.9;transform:none}
}
.hero .scroll-cue{opacity:.7!important}
.hero .meta-strip{display:none!important}

/* Counter numbers */
.hero .meta-strip strong{
  font-variant-numeric:lining-nums tabular-nums;
}

/* Marquee ticker, venues + collaborators */
.hero-marquee{
  position:absolute;
  left:0;right:0;bottom:0;
  border-top:1px solid rgba(184,138,62,.18);
  border-bottom:1px solid rgba(184,138,62,.18);
  background:linear-gradient(90deg, rgba(13,17,23,.95), rgba(20,25,33,.95));
  overflow:hidden;
  padding:.85rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-marquee .track{
  display:inline-flex;white-space:nowrap;
  animation:marquee 70s linear infinite;
  font-family:var(--display);
  font-style:italic;
  font-size:.95rem;
  color:var(--gold-soft);
  letter-spacing:.02em;
}
.hero-marquee .track span{padding:0 .9rem;opacity:.85}
.hero-marquee .track span:nth-child(even){opacity:.45;color:#cdc2a3}
@keyframes marquee{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
.hero{padding-bottom:6rem}
.hero .scroll-cue{bottom:5rem}

/* Mouse parallax, driven by JS variables */
.hero[data-parallax] .inner{
  transform:translate3d(calc(var(--mx,0) * -10px), calc(var(--my,0) * -6px), 0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero[data-parallax] .hero-waves{
  transform:translate3d(calc(var(--mx,0) * 14px), calc(var(--my,0) * 10px), 0);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

@media (max-width:780px){
  .hero h1.kinetic{font-size:clamp(3.2rem, 16vw, 6rem)}
  .hero-marquee{font-size:.75rem}
  .hero{padding-bottom:7rem}
}

/* ---------- Subtle hover lift on catalogue items ---------- */
.catalogue li{
  transition:background .35s ease, transform .35s ease;
}
.catalogue li:hover{
  background:linear-gradient(90deg, rgba(184,138,62,.06), transparent 70%);
  transform:translateX(4px);
}
.catalogue li .work-title{
  background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 1px;
  transition:background-size .45s cubic-bezier(.2,.8,.2,1), color .25s ease;
}
.catalogue li:hover .work-title{background-size:100% 1px}

/* ---------- Reduced motion guard ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .stagger > *{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}