/* ============================================================================
   KATRINA LALO LOUISE — site stylesheet
   Tokens are taken directly from brand/brand-guide.md v1.2.
   Typefaces are wired to custom properties: the type study's outcome is a
   one-line swap in :root, not a rebuild.
   ========================================================================= */

:root {
  /* --- palette (guide 3.1-3.4) ------------------------------------------ */
  --pacific:#0B4F55; --tidewater:#17777E; --seaglass:#9FCFCB;
  --ink:#0F1113; --slate:#3A4145; --bone:#F7F4EF; --white:#FFFFFF;
  --rose-noir:#5E1620; --rose-madder:#9E2B36; --rose-blush:#D98A8F;
  --gold-deep:#8A6B14; --gold:#C9A227; --gold-light:#E8D08A;
  --silver-deep:#8A9199; --silver:#C9CDD1; --silver-light:#EDEFF1;

  /* --- type (guide 4) --------------------------------------------------- */
  --font-display:'Alegreya', Georgia, serif;
  --font-structural:'Alegreya Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Spectral', Georgia, serif;
  /* two hands, on the contact sheet only, loaded by that page alone:
     one signs the heading, the other is what a visitor writes on the paper */
  --font-hand:'Kristi', 'Segoe Script', 'Bradley Hand', cursive;
  --font-written:'Indie Flower', 'Segoe Print', 'Bradley Hand', cursive;
  /* Georgia is the fallback on purpose: it ships on macOS, Windows, iOS and
     Android AND has a correct U+02BB, so the pre-webfont flash is never wrong. */
  --track-caps:0.18em;

  /* --- spacing scale (guide 9): 8/16/24/40/64/104 ----------------------- */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;

  /* --- depth (guide 7) -------------------------------------------------- */
  --sh-raised:0 1px 2px rgba(15,17,19,.06), 0 4px 12px rgba(15,17,19,.08);
  --sh-lifted:0 2px 4px rgba(15,17,19,.08), 0 10px 28px rgba(15,17,19,.12);
  --sh-gate:0 4px 8px rgba(15,17,19,.10), 0 24px 60px rgba(15,17,19,.16);
  --sh-glow:0 0 0 1px rgba(247,244,239,.10), 0 8px 32px rgba(0,0,0,.55);

  --measure:68ch;              /* guide 9: 60-72 characters */
  --ease:180ms ease-out;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  font-optical-sizing:auto;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--pacific); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--tidewater)}

/* guide 9 - focus is not optional */
:focus-visible{outline:2px solid var(--tidewater); outline-offset:2px}
.on-ink :focus-visible{outline-color:var(--seaglass)}

/* guide 9 - motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .reveal{opacity:1!important; transform:none!important}
}

/* --- primitives --------------------------------------------------------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--s3)}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 var(--s3)}
.on-ink{background:var(--ink); color:var(--bone)}
.on-ink a{color:var(--seaglass)}

.eyebrow{
  font-family:var(--font-structural); text-transform:uppercase;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  letter-spacing:var(--track-caps); font-size:12px; font-weight:600;
  color:var(--gold-deep); margin:0 0 var(--s2);
}
.on-ink .eyebrow{color:var(--gold-light)}

.display{
  font-family:var(--font-display); font-weight:400; line-height:1.08;
  letter-spacing:-.015em; margin:0;
  font-size:clamp(34px, 5.2vw, 60px);
}
.display-sm{font-size:clamp(28px,3.4vw,40px)}
.lede{font-size:20px; line-height:1.6; color:var(--slate); max-width:var(--measure)}
.on-ink .lede{color:var(--silver)}
p{max-width:var(--measure)}

.meta{
  font-family:var(--font-structural); text-transform:uppercase;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  letter-spacing:.14em; font-size:12px; color:var(--slate);
}
.on-ink .meta{color:var(--silver)}

/* guide 5 - the baluster rule replaces the plain horizontal line */
.rule{border:0; height:1px; background:var(--gold-deep); opacity:.35; margin:var(--s5) 0}
.rule-center{position:relative; border:0; height:1px; background:var(--gold-deep);
  opacity:.5; max-width:340px; margin:var(--s4) auto}
.rule-center::after{content:""; position:absolute; left:50%; top:-3px;
  width:7px; height:7px; transform:translateX(-50%) rotate(45deg); background:var(--gold-deep)}

/* the same printer's lozenge that sits on the book-quote rules, centred on a
   full-width rule. The tint is baked into the background instead of element
   opacity, so the diamond's bone fill stays solid and interrupts the line. */
.rule-gem{position:relative; opacity:1; overflow:visible;
  background:rgba(138,107,20,.35)}
.rule-gem::after{content:""; position:absolute; left:50%; top:50%;
  width:7px; height:7px; box-sizing:border-box;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bone); border:1px solid var(--gold-deep)}

.btn{
  display:inline-block; font-family:var(--font-structural); font-weight:600;
  font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.12em; font-size:12px;
  padding:14px 26px; border-radius:2px; text-decoration:none;
  background:var(--pacific); color:var(--bone);
  transition:background var(--ease), transform 120ms ease-out, box-shadow var(--ease);
  box-shadow:var(--sh-raised);
}
.btn:hover{background:var(--tidewater); color:var(--bone); transform:translateY(-2px); box-shadow:var(--sh-lifted)}
.btn-ghost{background:transparent; color:var(--pacific); box-shadow:none;
  border:1px solid rgba(11,79,85,.35)}
.btn-ghost:hover{background:rgba(11,79,85,.06); color:var(--pacific); transform:translateY(-2px)}
.on-ink .btn{background:var(--gold); color:var(--ink)}
.on-ink .btn:hover{background:var(--gold-light); color:var(--ink)}
.on-ink .btn-ghost{background:transparent; color:var(--bone); border-color:rgba(247,244,239,.35)}
.on-ink .btn-ghost:hover{background:rgba(247,244,239,.08); color:var(--bone)}

/* guide 5 - the Gate Arch, the signature brand shape */
.arch{border-radius:9999px 9999px 2px 2px; overflow:hidden; box-shadow:var(--sh-gate)}
.arch-frame{position:relative; padding:10px; border:1px solid rgba(201,162,39,.45);
  border-radius:9999px 9999px 3px 3px}

/* guide 5 - the lattice: density at small scale inside a calm frame */
.lattice{
  background-image:
    repeating-linear-gradient(45deg, rgba(138,107,20,.18) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(138,107,20,.18) 0 1px, transparent 1px 13px);
}
.on-ink .lattice{
  background-image:
    repeating-linear-gradient(45deg, rgba(201,162,39,.14) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(201,162,39,.14) 0 1px, transparent 1px 13px);
}

/* --- header ------------------------------------------------------------- */
.site-head{position:sticky; top:0; z-index:50; background:rgba(247,244,239,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid rgba(138,107,20,.22)}
.site-head.on-ink{background:rgba(15,17,19,.92); border-bottom-color:rgba(201,162,39,.28)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:14px 0}
.head-mark img{height:26px; width:auto}
@media (max-width:520px){ .head-mark img{height:19px} }
.nav{display:flex; align-items:center; gap:var(--s4)}
.nav a{
  font-family:var(--font-structural); font-weight:600; font-size:12px;
  font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink); text-decoration:none;
  padding:6px 0; border-bottom:1px solid transparent; transition:color 120ms, border-color 120ms;
}
.nav a:hover{color:var(--pacific); border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:var(--pacific); border-bottom-color:var(--gold)}
.on-ink .nav a{color:var(--bone)}
.on-ink .nav a:hover,.on-ink .nav a[aria-current="page"]{color:var(--gold-light)}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; color:inherit}
.nav-toggle svg{width:24px; height:24px}

@media (max-width:820px){
  .nav-toggle{display:block}
  /* collapsed by default — the closed state is CSS, not a JS side-effect, so
     it never flashes open on load and stays usable if the script fails */
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start;
    gap:0; padding:var(--s2) var(--s3) var(--s3); background:var(--bone);
    border-bottom:1px solid rgba(138,107,20,.22); box-shadow:var(--sh-raised);
  }
  .nav.is-open{display:flex}
  .on-ink .nav{background:var(--ink)}
  .nav a{padding:12px 0; width:100%; border-bottom:1px solid rgba(58,65,69,.12)}
  .on-ink .nav a{border-bottom-color:rgba(247,244,239,.12)}
}
/* above the breakpoint the menu is always a row, whatever state JS left behind */
@media (min-width:821px){ .nav{display:flex} .nav-toggle{display:none} }

/* --- footer (branding left, links centre, social right) ----------------- */
.site-foot{background:var(--ink); color:var(--bone); padding:var(--s6) 0 var(--s4)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5)}
.foot-mark img{height:34px; width:auto; margin-bottom:var(--s3)}
.foot-blurb{color:var(--silver); font-size:15px; line-height:1.6; max-width:34ch}
.foot-h{font-family:var(--font-structural); text-transform:uppercase;
  letter-spacing:var(--track-caps); font-size:11px; font-weight:700;
  color:var(--gold-light); margin:0 0 var(--s3)}
.foot-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.foot-list a{color:var(--bone); text-decoration:none; font-size:15px;
  border-bottom:1px solid transparent; transition:color 120ms, border-color 120ms}
.foot-list a:hover{color:var(--gold-light); border-bottom-color:var(--gold)}
.social{display:flex; gap:14px; flex-wrap:wrap}
.social a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(201,162,39,.45); color:var(--bone);
  transition:background var(--ease), border-color var(--ease), transform 120ms;
}
.social a:hover{background:rgba(201,162,39,.16); border-color:var(--gold); transform:translateY(-2px)}
.social svg{width:19px; height:19px; fill:currentColor}
.foot-base{display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(247,244,239,.14);
  font-size:12px; color:var(--silver)}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr; gap:var(--s4)} }

/* --- sections ----------------------------------------------------------- */
.section{padding:var(--s6) 0}
.section-tight{padding:var(--s5) 0}
@media (max-width:640px){ .section{padding:var(--s5) 0} }

/* accolades */
.accolades{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.accolade{padding:var(--s3); border:1px solid rgba(138,107,20,.30); text-align:center}
.accolade .yr{font-family:var(--font-structural); font-size:11px; letter-spacing:var(--track-caps);
  text-transform:uppercase; color:var(--gold-deep)}
.accolade .ttl{font-family:var(--font-display); font-size:19px; line-height:1.3; margin-top:8px}
@media (max-width:760px){ .accolades{grid-template-columns:1fr} }

/* media */
.frame-16x9{position:relative; padding-top:56.25%; background:var(--ink);
  border:1px solid rgba(201,162,39,.35); box-shadow:var(--sh-glow)}
.frame-16x9 iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* instagram grid */
.ig-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
.ig-cell{position:relative; display:block; overflow:hidden; background:var(--ink)}
.ig-cell img{aspect-ratio:1; object-fit:cover; width:100%;
  transition:transform 400ms ease-out, opacity var(--ease)}
.ig-cell:hover img{transform:scale(1.04); opacity:.88}
@media (max-width:900px){ .ig-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .ig-grid{grid-template-columns:repeat(2,1fr)} }

/* --- blog --------------------------------------------------------------- */
.post-card{display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(138,107,20,.28); background:var(--white);
  transition:box-shadow var(--ease), transform 120ms, border-color var(--ease)}
.post-card:hover{box-shadow:var(--sh-lifted); transform:translateY(-3px); border-color:rgba(201,162,39,.6)}
.post-card .pad{padding:var(--s3)}
.post-card h3{font-family:var(--font-display); font-weight:400; font-size:22px;
  line-height:1.25; margin:10px 0 8px}
.post-card p{font-size:15px; color:var(--slate); margin:0}
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
@media (max-width:900px){ .post-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .post-grid{grid-template-columns:1fr} }

.featured{position:relative; display:block; overflow:hidden; text-decoration:none;
  color:var(--bone); background:var(--ink); box-shadow:var(--sh-gate)}
.featured img{width:100%; height:clamp(280px,42vw,440px); object-fit:cover;
  transition:transform 700ms ease-out}
.featured:hover img{transform:scale(1.03)}
.featured .veil{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,17,19,.92) 0%, rgba(15,17,19,.35) 45%, rgba(15,17,19,.05) 100%)}
.featured .cap{position:absolute; left:0; right:0; bottom:0; padding:var(--s4)}
.featured h2{font-family:var(--font-display); font-weight:400; margin:8px 0 10px;
  font-size:clamp(24px,3.4vw,38px); line-height:1.15; color:var(--bone)}
.tag{display:inline-block; font-family:var(--font-structural); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; background:var(--gold); color:var(--ink); padding:4px 10px}

/* article */
.prose{max-width:none}
.prose p{margin:0 0 var(--s3); max-width:none}
.prose p:first-of-type{font-size:20px; line-height:1.6; color:var(--ink)}
.prose h2{font-family:var(--font-display); font-weight:400; font-size:29px;
  line-height:1.25; margin:var(--s5) 0 var(--s2)}
.prose blockquote{margin:var(--s4) 0; padding-left:var(--s3);
  border-left:2px solid var(--gold); font-style:italic; color:var(--slate)}
.prose em{font-style:italic}
.back-link{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-structural); text-transform:uppercase; letter-spacing:.14em;
  font-size:11px; font-weight:600; color:var(--slate)}
.back-link:hover{color:var(--pacific)}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .6s ease-out, transform .6s ease-out}
.reveal.in{opacity:1; transform:none}

/* ============================================================================
   EDITORIAL — masthead + collage type spread
   Minimal structure, magazine proportions, colour used as punctuation.
   ========================================================================= */

/* --- masthead strip ----------------------------------------------------- */
.masthead{
  padding:var(--s5) 0 var(--s4);
  border-top:1px solid rgba(138,107,20,.55);
  border-bottom:1px solid rgba(138,107,20,.55);
  position:relative; text-align:center; overflow:hidden;
}
.masthead::before,.masthead::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:rgba(138,107,20,.30);
}
.masthead::before{top:5px} .masthead::after{bottom:5px}

.masthead-kicker{
  max-width:none;
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.42em; font-size:10px; font-weight:500;
  color:var(--gold-deep); margin:0 0 var(--s3); padding-left:.42em;
}
.masthead-name{
  font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(27px, 8.4vw, 132px); line-height:.98; letter-spacing:-.022em;
  overflow-wrap:break-word;
  color:var(--ink);
}
.masthead-name .ln2{display:block}
.masthead-sub{
  margin:var(--s3) auto 0; max-width:44ch;
  font-family:var(--font-body); font-style:italic; font-size:clamp(15px,1.5vw,19px);
  line-height:1.6; color:var(--slate);
}
.masthead-meta{
  max-width:none;
  display:flex; justify-content:center; gap:var(--s3); flex-wrap:wrap;
  margin-top:var(--s3); font-family:var(--font-structural);
  font-variant-numeric:lining-nums; text-transform:uppercase;
  letter-spacing:.24em; font-size:10px; color:var(--gold-deep);
}
.masthead-meta span{position:relative}
.masthead-meta span+span::before{content:"·"; position:absolute; left:calc(var(--s3) * -.62); color:rgba(138,107,20,.7)}

/* --- editorial spread --------------------------------------------------- */
.editorial{position:relative; padding:var(--s6) 0; overflow:hidden}
html,body{overflow-x:clip}
.ed-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.56fr);
  gap:var(--s5); align-items:start;
}

.ed-folio{
  font-family:var(--font-display); font-size:46px; line-height:1;
  color:var(--rose-madder); opacity:.9;
}
.ed-rail-label{
  margin-top:14px; font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.26em; font-size:10px; color:var(--slate);
  writing-mode:vertical-rl; text-orientation:mixed;
}

.ed-lede{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(23px,2.5vw,31px); line-height:1.34; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 var(--s4); max-width:none;
}
.ed-body p{font-size:17px; line-height:1.72; color:var(--slate); margin:0 0 var(--s3); max-width:none}

/* drop cap — the one flourish the column gets */
.dropcap::first-letter{
  float:left; font-family:var(--font-display); font-weight:400;
  font-size:4.1em; line-height:.82; padding:.06em .1em 0 0;
  color:var(--pacific);
}

/* the collage layer: an offset tinted panel the text sits across */
.ed-aside{position:relative; padding-top:8px}
.ed-panel{
  position:relative; padding:var(--s4) var(--s3); background:#EFE9DF;
  border-top:2px solid var(--rose-madder);
}
.ed-panel::after{
  content:""; position:absolute; inset:16px -16px -16px 16px;
  border:1px solid rgba(11,79,85,.38); z-index:-1;
}
.ed-panel{z-index:1}
.ed-aside{isolation:isolate}
.ed-panel .lbl{
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.24em; font-size:10px;
  color:var(--rose-madder); margin:0 0 14px;
}
.pullquote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.1vw,27px); line-height:1.38; color:var(--pacific);
  margin:0; max-width:none;
}
.pullquote-attr{
  margin-top:18px; font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.22em; font-size:10px; color:var(--slate);
}

/* a ghosted display letter sitting behind the spread — the collage gesture */
/* the rose now adorns the quotation rather than floating in a spare column */
.quote-block{display:flex; align-items:center; gap:var(--s4); margin:var(--s5) 0}
.quote-rose{flex:0 0 auto; width:clamp(74px, 9vw, 112px); color:var(--rose-blush); opacity:.72}
.quote-rose svg{width:100%; height:auto; display:block; stroke-width:1.35}
.quote-block .book-quote{flex:1 1 auto; margin:0; max-width:none}
@media (max-width:700px){
  .quote-block{gap:var(--s3)}
  .quote-rose{width:58px}
}
@media (max-width:960px){ .ed-ghost{display:none} }
@media (max-width:960px){ .ed-ghost{display:none} }
@media (max-width:960px){ .ed-ghost{display:none} }
@media (max-width:960px){ .ed-ghost{display:none} }

.ed-tags{
  display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4);
  padding-top:var(--s3); border-top:1px solid rgba(138,107,20,.32);
}
.ed-tag{
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:var(--gold-deep);
}

@media (max-width:960px){
  .ed-grid{grid-template-columns:1fr; gap:var(--s4)}
  .ed-rail{position:static; display:flex; align-items:center; gap:16px}
  .ed-rail-label{writing-mode:horizontal-tb; margin-top:0}
  .ed-ghost{display:none}
}

/* ============================================================================
   CTA TEXT LINKS — reading, not chrome.
   A hairline rule, a nudging arrow, and a shimmer that passes rarely enough
   to register as light on the page rather than as an animation.
   ========================================================================= */
.link-cta{
  --lc:var(--pacific);
  display:inline-flex; align-items:baseline; gap:.6em;
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:600;
  color:var(--lc); text-decoration:none; padding-bottom:7px;
  border-bottom:1px solid rgba(11,79,85,.28);
  transition:border-color var(--ease), color var(--ease);
}
.link-cta:hover,.link-cta:focus-visible{color:var(--lc); border-bottom-color:var(--gold)}
.link-cta .arw{display:inline-block; transition:transform 180ms ease-out}
.link-cta:hover .arw,.link-cta:focus-visible .arw{transform:translateX(5px)}

.link-cta.lc-quiet{--lc:var(--slate); border-bottom-color:rgba(58,65,69,.25)}
.on-ink .link-cta{--lc:var(--bone); border-bottom-color:rgba(201,162,39,.42)}
.on-ink .link-cta:hover{border-bottom-color:var(--gold-light)}

/* group of CTAs stacked in an editorial column */
.cta-stack{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3)}
.cta-row{display:flex; gap:var(--s4); flex-wrap:wrap; align-items:baseline}

/* the shimmer: a single pass of gold light across the letterforms.
   Applied by JS, removed on animationend so the resting colour is untouched. */
.link-cta.is-shimmering{
  background-image:linear-gradient(102deg,
    var(--lc) 0 30%, var(--gold) 41%, var(--gold-light) 50%, var(--gold) 59%, var(--lc) 70% 100%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:lcShimmer 1700ms cubic-bezier(.37,0,.24,1) 1;
}
@keyframes lcShimmer{ from{background-position:128% 0} to{background-position:-38% 0} }

@media (prefers-reduced-motion:reduce){
  .link-cta.is-shimmering{
    animation:none; background-image:none;
    -webkit-text-fill-color:currentColor; color:var(--lc);
  }
}

/* --- masthead portrait: a matted print, not a banner ---------------------- */
.masthead-figure{
  position:relative; margin:0 auto var(--s4); max-width:330px; isolation:isolate;
}
.masthead-figure .mat{
  position:relative; z-index:1; background:var(--white); padding:13px;
  border:1px solid rgba(138,107,20,.45); box-shadow:var(--sh-raised);
}
.masthead-figure img{display:block; width:100%; height:auto}
/* the offset hairline — same collage gesture as the editorial panel */
.masthead-figure::after{
  content:""; position:absolute; inset:15px -15px -15px 15px;
  border:1px solid rgba(11,79,85,.34); z-index:0;
}
@media (max-width:560px){
  .masthead-figure{max-width:230px}
  .masthead-figure::after{inset:11px -11px -11px 11px}
}

/* --- editorial portrait: matted print inside the text column ------------- */
.ed-figure{position:relative; margin:0 0 var(--s4); isolation:isolate}
.ed-figure .mat{
  position:relative; z-index:1; background:var(--white); padding:12px;
  border:1px solid rgba(138,107,20,.45); box-shadow:var(--sh-raised);
}
.ed-figure img{display:block; width:100%; height:auto}
.ed-figure::after{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid rgba(11,79,85,.34); z-index:0;
}

/* --- displayed quotation, set the way an old book sets one --------------- */
.book-quote{
  position:relative; margin:var(--s5) auto; padding:var(--s4) 0 var(--s3);
  max-width:33em; text-align:center;
  border-top:1px solid rgba(138,107,20,.5);
  border-bottom:1px solid rgba(138,107,20,.5);
}
/* a lozenge centred on each rule — the printer's ornament */
.book-quote::before,.book-quote::after{
  content:""; position:absolute; left:50%; width:6px; height:6px;
  transform:translateX(-50%) rotate(45deg); background:var(--bone);
  border:1px solid var(--gold-deep);
}
.book-quote::before{top:-3.5px} .book-quote::after{bottom:-3.5px}
.book-quote p{
  margin:0; max-width:none;
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(19px,2vw,25px); line-height:1.46; letter-spacing:-.005em;
  color:var(--pacific); text-wrap:balance;
}
.book-quote cite{
  display:block; margin-top:var(--s3); font-style:normal;
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.26em; font-size:10px; color:var(--slate);
}
@media (max-width:640px){ .book-quote{padding:var(--s3) 0} }

/* two-up that actually collapses — an inline grid with a 104px gap cannot
   fit two columns on a phone, and the overflow pushed the header off-screen */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s6); align-items:center}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:var(--s4)} }

/* ============================================================================
   CONTACT — guide 10: an Ink panel on Bone, gold metal, one Gate Arch.
   The form is the panel; the photograph is the arch. Nothing else is added,
   because two ornaments is the maximum and the arch is already one of them.
   ========================================================================= */
.contact-grid{
  /* equal columns: the sheet and the photograph are the same width */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  /* the sheet is the taller of the two, so centring settles the arch against it */
  gap:var(--s5); align-items:center;
}
@media (max-width:960px){ .contact-grid{grid-template-columns:1fr; gap:var(--s4)} }

/* the panel: a sheet of stationery on the Bone ground ---------------------- */
.form-panel{
  position:relative; background:var(--white); padding:var(--s5) var(--s4);
  border:1px solid rgba(138,107,20,.30);
  /* guide 7: on Bone, two layers or it reads flat */
  box-shadow:var(--sh-raised);
}
/* the letterpress keyline, set in from the cut edge the way a card is printed */
.form-panel::after{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border:1px solid rgba(138,107,20,.16);
}
@media (max-width:640px){
  .form-panel{padding:var(--s4) var(--s3)}
  .form-panel::after{inset:7px}
}
.form-panel h2{
  font-family:var(--font-hand); font-weight:400; font-size:clamp(40px,4.4vw,52px);
  line-height:1.05; margin:0 0 var(--s2);
}

.field{display:grid; gap:7px; margin-bottom:var(--s4)}
.field label{
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:var(--track-caps);
  font-size:11px; font-weight:600; color:var(--gold-deep);
}
/* fields are ruled lines, not boxes — this is paper, and paper is ruled */
.field input,.field textarea{
  /* Indie Flower carries a large x-height, so it needs only a small step up
     from the 16px body face to sit at the same weight on the line */
  width:100%; font-family:var(--font-written); font-size:19px; color:var(--ink);
  background:transparent; border:0; border-radius:0; padding:5px 2px;
  border-bottom:1px solid rgba(138,107,20,.45);
  transition:border-color var(--ease);
}
.field input{line-height:1.5}
.field input:hover,.field textarea:hover{border-bottom-color:rgba(138,107,20,.75)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--tidewater)}
/* the rule under the field turns, so the correction is visible without reading */
.field input.is-invalid,.field input.is-invalid:hover{border-bottom-color:var(--rose-madder)}
.field-note{
  margin:0; max-width:none;
  font-family:var(--font-structural); font-size:12px; letter-spacing:.04em;
  line-height:1.4; color:var(--rose-madder);
}
.field-note:empty{display:none}
/* the message sits on ruled lines: 28px line-height against a 28px rule pitch.
   background-attachment:local keeps the rules under the words while it scrolls. */
.field textarea{
  min-height:168px; line-height:28px; padding:0 2px; resize:vertical;
  border-bottom:0;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 27px, rgba(138,107,20,.28) 27px 28px);
  background-attachment:local;
}
.field textarea:hover,.field textarea:focus{border-bottom:0}

/* honeypot: a bot fills every field it finds, a person never sees this one */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* the submit reads as the same CTA link the rest of the site uses */
button.link-cta{
  background:none; border:0; border-bottom:1px solid rgba(11,79,85,.28);
  padding:0 0 7px; cursor:pointer;
}
button.link-cta:disabled{opacity:.45; cursor:default}

.form-foot{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s5)}
.form-note{margin:0; max-width:34ch; font-size:14px; line-height:1.5; color:var(--slate)}
.form-note.is-bad{color:var(--rose-madder)}
.form-note:empty{display:none}

/* the arch ----------------------------------------------------------------- */
.contact-figure{margin:0}
@media (max-width:960px){ .contact-figure{max-width:420px; margin:0 auto} }
.contact-figure .arch img{width:100%; height:auto; display:block}

/* the hand — the home page's rose, set in the corner of the sheet. Guide 9:
   the drawn element is the last thing to go on mobile, so it only shrinks. */
.contact-rose{
  position:absolute; top:24px; right:22px; width:66px;
  color:var(--rose-blush); opacity:.72;
}
/* the stroke is scaled by the viewBox, so it is reset for the small size */
.contact-rose svg{width:100%; height:auto; display:block; stroke-width:2.1}
@media (max-width:640px){ .contact-rose{top:18px; right:14px; width:50px} }

/* ============================================================================
   MUSIC — guide 10: Ink ground, SILVER metal, one Gate Arch. Evening, listening.
   Silver is the whole difference from the rest of the site, so every rule and
   frame on this page is drawn from the silver ramp rather than the gold.
   ========================================================================= */
.music .eyebrow{color:var(--silver-light)}
/* silver is this page's metal, so the gold hairlines the dark-ground styles
   hand out — on the poster frame and under every CTA — are redrawn in it */
.music .link-cta{border-bottom-color:rgba(201,205,209,.42)}
.music .link-cta:hover,.music .link-cta:focus-visible{border-bottom-color:var(--silver-light)}
.music .video-poster{border-color:rgba(201,205,209,.45)}
/* the lozenge is a cut-out: its fill has to match the ground it sits on, which
   on this page is Ink rather than Bone */
.music .rule-gem{background:rgba(201,205,209,.34)}
.music .rule-gem::after{background:var(--ink); border-color:var(--silver-deep)}
.music .music-hero-under{padding-top:var(--s5)}

.music-hero{padding:var(--s6) 0 var(--s5)}
@media (max-width:960px){ .music-hero{padding:var(--s5) 0 var(--s4)} }

/* the record: words on the left, the sleeve on the right. Cover art is not a
   photograph, so it takes no Gate Arch — a flat sleeve with a hairline. */
.album-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:var(--s6); align-items:center;
}
@media (max-width:960px){ .album-grid{grid-template-columns:1fr; gap:var(--s4)} }
.album-cover{margin:0}
@media (max-width:960px){ .album-cover{max-width:400px; margin:0 auto} }
.album-cover img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(201,205,209,.4); box-shadow:var(--sh-glow);
}

/* the shows row: the calendar leaf, and her portrait beside it */
.shows-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:var(--s5); align-items:center;
}
@media (max-width:960px){ .shows-grid{grid-template-columns:1fr; gap:var(--s4)} }
.music-hero-text .display{color:var(--bone)}
.music-hero-text .lede{max-width:38ch}

/* the Gate Arch, drawn in silver for this page */
.music-figure{margin:0}
@media (max-width:960px){ .music-figure{max-width:420px; margin:0 auto} }
.arch-silver{border-color:rgba(201,205,209,.45)}
/* guide 7: on Ink, a hairline and one wide soft spread — never the tight layer */
.music-figure .arch{box-shadow:var(--sh-glow)}
.music-figure img{width:100%; height:auto; display:block}

/* --- the calendar: a sheet of paper laid on the Ink ---------------------- */
.calendar-sheet{
  position:relative; background:var(--white); color:var(--ink);
  padding:var(--s4) var(--s4) var(--s3);
  border:1px solid rgba(138,145,153,.55); box-shadow:var(--sh-glow);
}
/* the same keyline the contact sheet carries, set in silver */
.calendar-sheet::after{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border:1px solid rgba(138,145,153,.28);
}
@media (max-width:640px){
  .calendar-sheet{padding:var(--s3) var(--s3) var(--s2)}
  .calendar-sheet::after{inset:7px}
}

/* the month band across the head of the sheet */
.cal-band{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  padding-bottom:var(--s2); margin-bottom:var(--s3);
  border-bottom:1px solid rgba(138,145,153,.5);
}
.cal-title,.cal-year{
  margin:0; max-width:none;
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:var(--track-caps);
  font-weight:600; color:var(--silver-deep);
}
/* set in the same hand as the contact sheet's heading. A script face takes
   neither caps nor tracking, and it runs small, so both come off and the size
   goes up. */
.cal-title{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-hand); font-size:34px; font-weight:400;
  text-transform:none; letter-spacing:0; line-height:1; color:var(--slate);
}
/* the drawn rose, ahead of the line. Its stroke is scaled by the viewBox, so at
   this size the file's own weight would all but disappear and is reset. */
.cal-rose{flex:0 0 auto; width:40px; color:var(--rose-blush); opacity:.8}
.cal-rose svg{width:100%; height:auto; display:block; stroke-width:3.4}
.cal-year{font-size:11px}

/* one show, set the way a date is set on a calendar leaf */
.show-tile{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:center;
  padding:var(--s3); border:1px solid rgba(138,145,153,.4);
}
.show-date{
  display:grid; justify-items:center; gap:2px;
  padding-right:var(--s4); border-right:1px solid rgba(138,145,153,.4);
}
.show-date .mo,.show-date .dow{
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:var(--track-caps);
  font-size:11px; font-weight:600; color:var(--silver-deep);
}
.show-date .day{
  font-family:var(--font-display); font-weight:400; font-size:56px;
  line-height:1; color:var(--pacific);
}
.show-where h2{
  font-family:var(--font-display); font-weight:400; font-size:29px;
  line-height:1.15; margin:0 0 6px;
}
.show-where p{margin:0; max-width:none; color:var(--slate)}
.show-where .show-time{
  margin-top:10px;
  font-family:var(--font-structural); font-variant-numeric:lining-nums;
  text-transform:uppercase; letter-spacing:.14em; font-size:12px;
  color:var(--silver-deep);
}
.show-ask{margin-top:var(--s3) !important}
@media (max-width:560px){
  .show-tile{grid-template-columns:1fr; gap:var(--s3); text-align:center; justify-items:center}
  .show-date{padding-right:0; padding-bottom:var(--s2); border-right:0;
    border-bottom:1px solid rgba(138,145,153,.4); width:100%}
}

.cal-foot{
  margin:var(--s3) 0 0; max-width:none; text-align:center;
  font-family:var(--font-structural); font-size:12px; letter-spacing:.06em;
  color:var(--silver-deep);
}

/* The sheet is a light island inside an .on-ink section, so the dark-ground link
   rules reach it and paint Sea Glass on white. Everything inside it goes back to
   the light-ground treatment, in silver rather than gold. */
.calendar-sheet a{color:var(--pacific)}
.calendar-sheet .link-cta{--lc:var(--slate); border-bottom-color:rgba(58,65,69,.25)}
.calendar-sheet .link-cta:hover,
.calendar-sheet .link-cta:focus-visible{--lc:var(--pacific); border-bottom-color:var(--silver-deep)}
.calendar-sheet .link-cta.is-shimmering{
  background-image:linear-gradient(102deg,
    var(--lc) 0 30%, var(--silver-deep) 41%, var(--silver) 50%, var(--silver-deep) 59%, var(--lc) 70% 100%);
}

/* --- the video's title frame, standing in for the player ------------------
   A poster that links out: the section keeps its picture without loading a
   third-party player, and nothing is set in the visitor's browser until they
   choose to watch. The veil is what keeps the caption legible over whatever
   frame YouTube happens to hold. */
.video-poster{
  position:relative; display:grid; place-items:center; overflow:hidden;
  text-decoration:none; background:var(--ink);
  border:1px solid rgba(201,162,39,.35); box-shadow:var(--sh-glow);
}
.video-poster img{
  grid-area:1/1; width:100%; height:auto; display:block;
  transition:transform 700ms ease-out, opacity var(--ease);
}
.video-poster .veil{
  grid-area:1/1; align-self:stretch; justify-self:stretch;
  background:linear-gradient(to top, rgba(15,17,19,.88) 0%, rgba(15,17,19,.42) 52%, rgba(15,17,19,.18) 100%);
  transition:background var(--ease);
}
/* the caption sits low, where the veil is heaviest — centred it would float
   over the brightest part of the frame and lose its contrast */
.video-poster .link-cta{grid-area:1/1; z-index:1; align-self:end; justify-self:start; margin:var(--s4)}
@media (max-width:640px){ .video-poster .link-cta{margin:var(--s3)} }
.video-poster:hover img,.video-poster:focus-visible img{transform:scale(1.02)}
.video-poster:hover .veil{
  background:linear-gradient(to top, rgba(15,17,19,.92) 0%, rgba(15,17,19,.5) 52%, rgba(15,17,19,.24) 100%);
}