/* ===========================================================================
   Rosie Evans — public house style
   1960s–70s British Vogue: printed ivory, ink, a single claret accent,
   a tall Didone masthead (Bodoni Moda), old-style serif running text
   (EB Garamond), and wide-tracked small-caps for kickers, credits and nav.
   Variable + class names are kept stable so every page keeps working.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

:root{
  --cream:#F0F6F1;      /* light mint paper */
  --ink:#1F2C25;        /* deep pine — text / primary */
  --brown:#B5586E;      /* dusty rose — the signature accent (kickers, credits, links) */
  --muted:#6A756E;      /* soft green-grey — secondary text */
  --line:#D5E2D9;       /* soft sage hairline */
  --secondary:#E4EFE7;  /* light mint fill */
  --display:'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, system-ui, sans-serif;
  /* Type scale — one disciplined ramp */
  --t-display:clamp(3.1rem, 6.2vw, 4.6rem);   /* page titles / cover / hero */
  --t-h2:clamp(1.9rem, 3.3vw, 2.55rem);       /* section headings */
  --t-h3:1.55rem;                             /* sub / faq / stage titles */
  --t-lead:clamp(1.18rem, 1.7vw, 1.4rem);     /* leads / subtitles */
  --t-body:1.0625rem;                         /* running text */
  --t-small:0.9rem;                           /* captions */
  --t-micro:0.72rem;                          /* kickers / labels / buttons */
  /* Spacing rhythm — 8pt scale */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px;
  --sp-section:clamp(4.5rem, 8vw, 7rem);      /* the one vertical section rhythm */
  /* Corner radius — Apple-style rounding */
  --r-sm:9px; --r:12px; --r-lg:18px; --r-xl:26px;
}
/* Global rounding — every box gets a consistent radius (rules + type stay crisp) */
.plate,.hover-zoom{border-radius:var(--r-lg);}
.feature-panel{border-radius:var(--r-lg);}
.btn-ink,.btn-solid,.btn-cover,.btn-cover-solid{border-radius:var(--r);}
#nav-menu{border-radius:var(--r);}
.a-empty,.frame-ph{border-radius:var(--r-lg);}
img.lightbox-img{border-radius:var(--r-lg);}

/* ===========================================================================
   WOW motion — kinetic hero, cinematic figure reveals, editorial marquee
   =========================================================================== */
/* Marquee band (structure works with or without motion) */
.marquee-band{overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:clamp(1.1rem,2.6vw,2rem) 0;}
.marquee{display:flex;align-items:center;width:max-content;white-space:nowrap;will-change:transform;}
.marquee > span{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,6.5vw,5rem);line-height:1;color:var(--ink);}
.marquee .dot{color:var(--brown);padding:0 .5em;font-style:italic;}
@keyframes marq{to{transform:translateX(-50%);}}

@media (prefers-reduced-motion: no-preference){
  /* Kinetic hero — words rise in from a mask, staggered */
  .kinetic .kw{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.0;padding-bottom:.1em;}
  .kinetic .kw > span{display:inline-block;transform:translateY(112%);animation:kwRise 1.05s cubic-bezier(.2,.85,.25,1) both;}
  @keyframes kwRise{from{transform:translateY(112%);}to{transform:translateY(0);}}

  /* Cinematic figure reveals — clip-path wipe + image settle (overrides the plain fade) */
  figure.reveal{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.2,.8,.2,1);}
  figure.reveal img{transform:scale(1.16);transition:transform 1.5s cubic-bezier(.2,.8,.2,1);}
  figure.reveal.reveal-in{clip-path:inset(0 0 0 0);}
  figure.reveal.reveal-in img{transform:scale(1);}

  /* Marquee glide */
  .marquee{animation:marq 36s linear infinite;}
  .marquee-band:hover .marquee{animation-play-state:paused;}
  /* snappier plate transform once revealed (so hover feels responsive) */
  figure.reveal.reveal-in img{transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .6s ease;}
}

/* ===== WOW #5 — tactile plate hover: zoom + warm + caption slides up over a scrim ===== */
.plate-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding:1.6rem 1.15rem 1.05rem;pointer-events:none;
  background:linear-gradient(to top, rgba(23,19,15,.76), rgba(23,19,15,.26) 55%, transparent);
  transform:translateY(.7rem);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease;}
.hover-zoom:hover .plate-cap{transform:translateY(0);opacity:1;}
.plate-cap .cap-t{font-family:var(--serif);font-style:italic;color:var(--cream);font-size:1.05rem;line-height:1.25;text-shadow:0 1px 14px rgba(0,0,0,.35);}
.plate-cap .cap-c{font-family:var(--sans);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(243,237,225,.8);white-space:nowrap;}
.hover-zoom:hover img{transform:scale(1.06);}
.plate:hover img{filter:grayscale(0%) contrast(1.03) saturate(1.08) brightness(1.03);}

/* ===========================================================================
   THE CATALOGUE — bespoke page-entry system (redesign)
   Every page is a numbered entry: big claret index numeral + structural rule
   + dramatic title. Kills the repeated template header; commits to claret.
   =========================================================================== */
.entry-rule{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  border-top:1.5px solid var(--ink);padding-top:.85rem;margin-bottom:1.1rem;}
.entry-no{font-family:var(--display);font-weight:500;font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:.78;color:var(--brown);letter-spacing:-.02em;}
.entry-labels{text-align:right;padding-top:.35rem;}
.entry-sec{display:block;font-family:var(--sans);font-size:var(--t-micro);font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);}
.entry-loc{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.45rem;}
.entry-title{font-family:var(--display);font-weight:500;font-size:clamp(3.3rem,8.5vw,6.6rem);line-height:.9;letter-spacing:-.018em;margin:.16em 0 .34em;hanging-punctuation:first;}
.entry-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.12rem,1.7vw,1.45rem);line-height:1.4;color:var(--muted);max-width:34rem;}

/* Signature spine — running folio down the left edge */
.side-folio{position:fixed;left:1.15rem;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-family:var(--sans);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);z-index:30;pointer-events:none;opacity:.85;}
@media(max-width:1180px){.side-folio{display:none;}}

/* Commit to colour — a filled claret button + emphatic claret rule */
.btn-claret{display:inline-block;font-family:var(--sans);font-size:var(--t-micro);font-weight:400;text-transform:uppercase;letter-spacing:.26em;
  padding:.95rem 2.2rem;background:var(--brown);color:var(--cream);border:1px solid var(--brown);cursor:pointer;transition:background .3s,border-color .3s;border-radius:var(--r);}
.btn-claret:hover{background:var(--ink);border-color:var(--ink);}
.rule-em{border:0;border-top:2px solid var(--brown);}
.pullquote,.statement-text{hanging-punctuation:first last;}
/* ===== Bespoke detailing — signature dividers, markers, edges, colophon ===== */
/* Signature divider: hairlines flanking a small claret lozenge */
.divider{display:flex;align-items:center;gap:1.4rem;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}
.divider i{display:block;width:7px;height:7px;background:var(--brown);transform:rotate(45deg);flex:none;}
.divider.short::before,.divider.short::after{max-width:5rem;}

/* Custom list markers — claret lozenge */
.mark-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.mark-list li{position:relative;padding-left:1.15rem;}
.mark-list li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;background:var(--brown);transform:rotate(45deg);}

/* Considered edge — hairline inset frame on the statement break */
.statement-break::before{content:"";position:absolute;inset:24px;border:1px solid rgba(243,237,225,.28);z-index:2;pointer-events:none;}

/* Colophon footer */
.colophon-mono{width:44px;height:44px;flex:none;}
.colophon-meta{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}

/* Nav craft — claret underline reveal on hover/active */
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--brown);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);}

/* ===== Interaction craft — magnetic primary buttons ===== */
.btn-claret,.btn-solid{will-change:transform;}

/* ===== Website editor — block frames + toolbar (edit mode only) ===== */
.blk{position:relative;}
.blk:hover{outline:1.5px dashed var(--line);outline-offset:5px;}
.blk-tools{position:absolute;top:8px;right:8px;z-index:45;display:none;align-items:center;gap:1px;
  background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:0 3px 12px rgba(23,19,15,.09);}
.blk:hover > .blk-tools{display:flex;}
.blk-tag{font-family:var(--sans);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 .5rem 0 .4rem;white-space:nowrap;}
.blk-btn{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:7px;transition:background .15s,color .15s;}
.blk-btn:hover{background:var(--secondary);}
.blk-btn.danger:hover{background:#EFD9D6;color:var(--brown);}
/* Keep the Replace-image button clear of the block toolbar (both were top-right) */
.blk .img-edit{top:52px;}
.blk-add{display:flex;align-items:center;gap:.75rem;max-width:64rem;margin:0 auto;padding:.35rem 1.5rem;position:relative;opacity:.4;transition:opacity .2s;}
.blk-add:hover{opacity:1;}
.blk-add-line{flex:1;height:1px;background:var(--line);}
.blk-add-btn{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);background:var(--cream);border-radius:20px;padding:.35rem .95rem;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;}
.blk-add-btn:hover{color:var(--ink);border-color:var(--ink);}
.blk-add-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;z-index:50;
  background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 6px 24px rgba(23,19,15,.13);
  display:flex;flex-direction:column;gap:2px;min-width:210px;}
.blk-add-item{font-family:var(--sans);font-size:.78rem;text-align:left;border:0;background:transparent;color:var(--ink);padding:.55rem .7rem;border-radius:7px;cursor:pointer;}
.blk-add-item:hover{background:var(--secondary);}
.drop-hot{outline:2px dashed var(--brown);outline-offset:-5px;}
.ed:empty::before{content:'Write here…';color:var(--muted);font-style:italic;opacity:.5;}
.blk-empty{max-width:40rem;margin:5rem auto 0;text-align:center;padding:2rem 1.5rem;}
.blk-empty-t{font-family:var(--display);font-size:1.8rem;color:var(--ink);}
.blk-empty-s{font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:.4rem;}

/* ===== Art-first redesign — hero split + portfolio wall ===== */
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-bottom:2.5rem;}
.hero-mono{width:42px;height:42px;display:block;margin-bottom:1.5rem;}
.hero-title{font-family:var(--display);font-weight:500;font-size:clamp(2.7rem,5.4vw,4.4rem);line-height:1.0;letter-spacing:-.015em;color:var(--ink);}
.hero-sub{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.55;color:var(--muted);max-width:32ch;margin:1.5rem 0 2.2rem;}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-fig{margin:0;}
.hero-art{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:4/5;}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);}
.hero-art:hover img{transform:scale(1.03);}
.hero-art.frame-ph{background:var(--secondary);}
@media(max-width:820px){.hero-split{grid-template-columns:1fr;gap:2rem;}.hero-fig{order:-1;}.hero-art{aspect-ratio:4/3;}}

/* Full-bleed hero — image with the name overlaid */
.hero-full{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-full-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-full .frame-ph{position:absolute;inset:0;background:var(--secondary);display:flex;align-items:center;justify-content:center;}
.hero-full-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(22,31,26,.66), rgba(22,31,26,.12) 46%, rgba(22,31,26,.30));}
.hero-full-inner{position:relative;z-index:2;max-width:72rem;width:100%;margin:0 auto;padding:0 1.5rem clamp(3rem,7vh,5.5rem);}
.hero-full-kick{font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:1.3rem;}
.hero-full-title{font-family:var(--display);font-weight:500;color:#fff;font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:1.0;letter-spacing:-.015em;max-width:17ch;}
.hero-full-sub{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.9);font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.5;max-width:40ch;margin:1.3rem 0 2rem;}
.hero-full .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-full .btn-ink{color:#fff;border-color:rgba(255,255,255,.55);}
.hero-full .btn-ink:hover{background:#fff;color:var(--ink);border-color:#fff;}

/* Minimal centered hero — clean cream, dark type (matches the live rosievans.com hero) */
.hero-min{max-width:58rem;margin:0 auto;padding:2rem 1.5rem;text-align:center;min-height:calc(100svh - 64px);min-height:calc(100vh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hero-min-kick{font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem;}
.hero-min-title{font-family:var(--display);font-weight:500;color:var(--ink);font-size:clamp(3rem,7.4vw,5.6rem);line-height:1.0;letter-spacing:-.01em;}
.hero-min-sub{font-family:var(--sans);font-style:normal;color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;max-width:40ch;margin:1.5rem auto 2.4rem;}
.hero-min-cta{justify-content:center;gap:.75rem;}
/* Rounded hero buttons */
.hero-min .btn-solid,.hero-min .btn-ink{border-radius:10px;}
.hero-min .btn-ink{border-color:var(--line);color:var(--ink);}
.hero-min .btn-ink:hover{border-color:var(--ink);}
.hero-min-fig{margin:clamp(2.4rem,6vh,4rem) auto 0;max-width:64rem;}
.hero-min-media{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:16/9;background:var(--secondary);}
.hero-min-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);}
.hero-min-media:hover img{transform:scale(1.03);}
@media(max-width:560px){.hero-min-media{aspect-ratio:4/3;}}

/* Retint the sepia SVG placeholders to a cool/mint tone (only placeholders, not real uploads) */
img[src*="/plates/"]{filter:grayscale(1) sepia(.42) hue-rotate(118deg) saturate(.65) brightness(1.05);}

.page-head{}
.page-title{font-family:var(--display);font-weight:500;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.015em;color:var(--ink);}
.page-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.55;color:var(--muted);margin:1.1rem auto 0;max-width:46ch;}

.gallery-wall{columns:3;column-gap:1.1rem;}
.wall-item{break-inside:avoid;margin:0 0 1.1rem;}
.wall-link{display:block;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);}
.wall-link img{width:100%;height:auto;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);}
.wall-link:hover img{transform:scale(1.04);}
.wall-cap{font-family:var(--sans);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.55rem;text-align:center;}
@media(max-width:820px){.gallery-wall{columns:2;}}
@media(max-width:460px){.gallery-wall{columns:1;}}
/* Instagram-style tight square grid on mobile — 3 images per row (gallery page) */
@media(max-width:640px){
  .gallery-grid{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
  .gallery-grid .wall-item{margin:0;}
  .gallery-grid .wall-link{border:0;border-radius:4px;}
  .gallery-grid .wall-link img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;}
  .gallery-grid .wall-cap{display:none;}
}
/* Landing "Selected Work" — clean 3-up grid (2 rows of 3) so images always render at a good size */
.home-gallery{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.home-gallery .wall-item{margin:0;}
.home-gallery .wall-link{border:1px solid var(--line);border-radius:var(--r);}
.home-gallery .wall-link img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;}
@media(max-width:640px){
  .home-gallery{gap:4px;}
  .home-gallery .wall-link{border:0;border-radius:4px;}
  .home-gallery .wall-link img{aspect-ratio:1;}
  .home-gallery .wall-cap{display:none;}
}
@media (hover:none),(pointer:coarse){
  .blk-tools{display:flex;}
  .blk-add{opacity:1;}
}

/* ===== WOW #4 — full-bleed statement break ===== */
.statement-break{position:relative;width:100%;min-height:82vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#241813 center/cover no-repeat;}
.statement-break::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(23,19,15,.32),rgba(23,19,15,.56));}
.statement-inner{position:relative;z-index:2;max-width:56rem;padding:3rem 6vw;text-align:center;}
.statement-text{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(2.1rem,6vw,4.8rem);line-height:1.14;color:var(--cream);}
/* Type scale utilities */
.t-display{font-size:var(--t-display);line-height:1.0;letter-spacing:.004em;}
.t-h2{font-size:var(--t-h2);line-height:1.08;}
.t-h3{font-size:var(--t-h3);line-height:1.2;}
.t-lead{font-size:var(--t-lead);line-height:1.5;}
.t-body{font-size:var(--t-body);line-height:1.7;}
.t-small{font-size:var(--t-small);}
/* One section rhythm */
.section{padding-top:var(--sp-section);padding-bottom:var(--sp-section);}
.section-t{padding-top:var(--sp-section);}
.section-b{padding-bottom:var(--sp-section);}

*{box-sizing:border-box;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:1.06rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1,"dlig" 1;
  font-variant-numeric:oldstyle-nums proportional-nums;
}
/* lining figures where alignment matters */
.lining,.a-num,.field[type="date"],time{font-variant-numeric:lining-nums;}
::selection{background:var(--brown);color:var(--cream);}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---- Display / masthead type ---- */
.font-display{font-family:var(--display);font-weight:400;letter-spacing:.004em;line-height:1.02;}
.font-serif{font-family:var(--serif);}
.font-sans{font-family:var(--sans);}
.tracking-luxe{letter-spacing:.22em;}

/* Kicker — the little tracked small-caps label above a headline */
.kicker{font-family:var(--sans);font-size:var(--t-micro);font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--brown);}
.kicker-muted{color:var(--muted);}

/* Credit line — "photographed by …" set tiny and tracked */
.credit{font-family:var(--sans);font-size:.58rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}

/* Figure caption — italic old-style serif */
.caption{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);line-height:1.45;}

/* Folio — running head / page number flourish */
.folio{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}

/* ---- Editorial rules ---- */
.rule{border:0;border-top:1px solid var(--line);}
.rule-ink{border:0;border-top:1px solid var(--ink);}
.rule-double{border:0;border-top:1px solid var(--ink);box-shadow:0 3px 0 -2px var(--ink);}
.hair{height:1px;background:var(--line);border:0;}

/* A centred kicker flanked by hairlines: <p class="kicker rule-flanked"><span>…</span></p> */
.rule-flanked{display:flex;align-items:center;gap:1.1rem;justify-content:center;text-align:center;}
.rule-flanked::before,.rule-flanked::after{content:"";flex:1;height:1px;background:var(--line);max-width:5.5rem;}

/* ---- Drop cap — opens a feature ---- */
.dropcap:first-letter{
  font-family:var(--display);
  float:left;
  font-size:4.4em;
  line-height:.72;
  font-weight:500;
  padding:.06em .12em 0 0;
  color:var(--ink);
}

/* ---- Pull quote ---- */
.pullquote{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.28;
  color:var(--ink);
  text-align:center;
  letter-spacing:.005em;
}

/* ---- Buttons (names kept: btn-ink outline, btn-solid filled) ---- */
.btn-ink{
  display:inline-block;font-family:var(--sans);font-size:var(--t-micro);font-weight:400;
  text-transform:uppercase;letter-spacing:.26em;
  border:1px solid var(--ink);padding:.85rem 2rem;background:transparent;color:var(--ink);
  cursor:pointer;transition:background .3s,color .3s;
}
.btn-ink:hover{background:var(--ink);color:var(--cream);}
.btn-solid{
  display:inline-block;font-family:var(--sans);font-size:var(--t-micro);font-weight:400;
  text-transform:uppercase;letter-spacing:.26em;
  padding:.95rem 2.2rem;background:var(--ink);color:var(--cream);border:1px solid var(--ink);
  cursor:pointer;transition:background .3s,border-color .3s;
}
.btn-solid:hover{background:var(--brown);border-color:var(--brown);}

/* A quiet text link with an underline that reveals on hover */
.link-editorial{position:relative;color:var(--ink);text-decoration:none;padding-bottom:1px;
  background-image:linear-gradient(var(--brown),var(--brown));background-size:0% 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s;}
.link-editorial:hover{background-size:100% 1px;color:var(--brown);}

/* ---- Forms ---- */
.label{display:block;font-family:var(--sans);font-size:var(--t-micro);font-weight:400;text-transform:uppercase;letter-spacing:.24em;color:var(--brown);margin-bottom:.55rem;}
.field{
  width:100%;background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.72rem .95rem;font-family:var(--serif);font-size:1.02rem;color:var(--ink);
  outline:none;transition:border-color .25s, box-shadow .25s;
}
.field::placeholder{color:var(--muted);opacity:.7;font-style:italic;}
.field:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,19,15,.06);}
select.field{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
textarea.field{padding:.85rem 1rem;}
textarea.field:focus{border-color:var(--ink);}

/* ---- Imagery ---- */
.hover-zoom{overflow:hidden;}
.hover-zoom img{transition:transform .8s cubic-bezier(.2,.8,.2,1);width:100%;height:100%;object-fit:cover;}
.hover-zoom:hover img{transform:scale(1.045);}
/* Optional vintage plate tone for editorial photography */
.plate img{filter:grayscale(6%) contrast(1.02) sepia(4%);}

/* ---- Masthead helpers (used by partials.js) ---- */
.masthead-word{font-family:var(--display);font-weight:500;letter-spacing:.02em;line-height:.9;}
.nav-link{font-family:var(--sans);font-size:var(--t-micro);font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .2s;}
.nav-link:hover{color:var(--ink);}
.nav-link.is-active{color:var(--brown);}

/* ===========================================================================
   Art direction — photographic cover, plate/duotone imagery, grain, features
   =========================================================================== */
/* Film grain (reusable overlay) */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;}

/* Plate treatment — subtle, keeps detail (gallery/shop) */
.plate{position:relative;overflow:hidden;background:var(--secondary);}
.plate img{filter:grayscale(30%) contrast(1.05) saturate(.9) brightness(1.01);transition:filter .6s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
.plate:hover img{filter:grayscale(6%) contrast(1.03) saturate(1);}

/* Duotone — cinematic (cover / feature media) */
.duotone{position:relative;overflow:hidden;background:linear-gradient(150deg,#241814 0%,#3f2a22 45%,#7a5a3a 100%);}
.duotone > img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.9;filter:contrast(1.05);}
.duotone.is-empty::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%, rgba(243,237,225,.14), transparent 60%);}

/* ---- The cover (home) ---- */
.cover{position:relative;min-height:100svh;min-height:100vh;display:flex;overflow:hidden;color:var(--cream);}
.cover-media{position:absolute;inset:0;background:linear-gradient(150deg,#231713 0%,#3c2a22 48%,#6f5335 100%);background-size:cover;background-position:center;z-index:0;}
.cover-media.has-img{background-blend-mode:luminosity;}
.cover-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,16,12,.5) 0%, rgba(20,16,12,.15) 30%, rgba(20,16,12,.2) 62%, rgba(20,16,12,.72) 100%);}
.cover-inner{position:relative;z-index:3;width:100%;display:flex;flex-direction:column;justify-content:space-between;}
.cover-word{font-family:var(--display);font-weight:500;color:var(--cream);line-height:.9;letter-spacing:.01em;text-shadow:0 1px 30px rgba(0,0,0,.25);}
.cover-line{font-family:var(--display);font-style:italic;color:var(--cream);line-height:1.05;}
.cover .kicker{color:rgba(243,237,225,.85);}
.scroll-cue{font-family:var(--sans);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,237,225,.8);display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(243,237,225,.8),transparent);animation:cueDrop 2.2s ease-in-out infinite;}
@keyframes cueDrop{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}

/* Cover buttons (over dark imagery) */
.btn-cover{display:inline-block;font-family:var(--sans);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;border:1px solid rgba(243,237,225,.7);padding:.85rem 2rem;color:var(--cream);background:transparent;cursor:pointer;transition:all .3s;}
.btn-cover:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
.btn-cover-solid{display:inline-block;font-family:var(--sans);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;padding:.95rem 2.2rem;background:var(--cream);color:var(--ink);border:1px solid var(--cream);cursor:pointer;transition:all .3s;}
.btn-cover-solid:hover{background:transparent;color:var(--cream);}

/* Overlay nav (home cover) — transparent, turns solid on scroll */
.topnav-cover{transition:background .4s ease, border-color .4s ease;border-bottom:1px solid transparent;}
.topnav-cover .cover-word-sm,.topnav-cover .nav-link{color:rgba(243,237,225,.9);transition:color .3s;}
.topnav-cover .nav-link:hover{color:#fff;}
.topnav-cover .menu-ico{color:var(--cream);}
.topnav-cover.is-solid{background:rgba(243,237,225,.95);backdrop-filter:blur(6px);border-bottom-color:var(--ink);}
.topnav-cover.is-solid .cover-word-sm{color:var(--ink);}
.topnav-cover.is-solid .nav-link{color:var(--muted);}
.topnav-cover.is-solid .nav-link.is-active{color:var(--brown);}
.topnav-cover.is-solid .nav-link:hover{color:var(--ink);}
.topnav-cover.is-solid .menu-ico{color:var(--ink);}
.topnav-cover:not(.is-solid) .cover-word-sm{opacity:0;pointer-events:none;transition:opacity .3s;}

/* ---- Image-led feature (type overlaps photography) ---- */
.feature-media{position:relative;overflow:hidden;min-height:26rem;}
.feature-media > img,.feature-media .duotone{width:100%;height:100%;object-fit:cover;}
.feature-panel{position:relative;z-index:5;background:var(--cream);}
@media(min-width:768px){
  .feature-panel.overlap-left{margin-left:-5rem;}
  .feature-panel.overlap-right{margin-right:-5rem;}
}

/* Editor: image-replace control */
.img-edit{position:absolute;top:10px;right:10px;z-index:20;font-family:var(--sans);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;background:rgba(20,16,12,.78);color:var(--cream);border:1px solid rgba(243,237,225,.5);padding:.4rem .7rem;cursor:pointer;}
.img-edit:hover{background:var(--ink);}

/* ---- Editorial layering — watermark folios behind content ---- */
.wm-wrap{position:relative;overflow:hidden;}
.wm-wrap > .rel{position:relative;z-index:1;}
.watermark{position:absolute;font-family:var(--display);font-weight:600;line-height:.76;color:var(--ink);opacity:.05;z-index:0;pointer-events:none;user-select:none;white-space:nowrap;letter-spacing:-.02em;}

/* ---- utility ---- */
[x-cloak]{display:none !important;}
.measure{max-width:38rem;}
.fade-up{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ===========================================================================
   Materiality — make the ivory read as printed paper
   Warm paper canvas + fixed grain + vignette + letterpress + restrained depth.
   All cheap composited layers; the grain/vignette are pointer-events:none.
   =========================================================================== */
html{
  background:#EAF2EC radial-gradient(140% 115% at 50% -6%, #F7FBF8 0%, #F0F6F1 52%, #E2EDE5 100%) no-repeat;
  background-attachment:scroll;
}
body{background:transparent;}

/* Fixed film/paper grain over the whole page — very low opacity, multiply */
body::before{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.09;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* Soft vignette + faint uneven paper tone toward the edges */
body::after{
  content:"";position:fixed;inset:0;z-index:9996;pointer-events:none;
  background:
    radial-gradient(120% 108% at 50% 38%, transparent 55%, rgba(31,44,37,.08) 100%),
    radial-gradient(60% 50% at 82% 18%, rgba(181,88,110,.06), transparent 60%);
}
@media (prefers-reduced-motion: no-preference){}

/* Letterpress — hairline rules look pressed into the paper */
.rule,.rule-ink{box-shadow:0 1px 0 rgba(255,253,248,.6);}
.hair{box-shadow:0 1px 0 rgba(255,253,248,.6);}
/* Faint ink-on-paper emboss for display headings on light grounds
   (cover text is excluded — it uses .cover-word / .cover-line, not .font-display) */
.font-display{text-shadow:0 1px 0 rgba(255,253,248,.4);}

/* Restrained depth on genuinely raised elements */
.feature-panel{box-shadow:0 28px 64px -36px rgba(40,26,16,.5);}
.plate{box-shadow:0 16px 38px -26px rgba(40,26,16,.42);}
.btn-solid{box-shadow:0 10px 22px -16px rgba(20,16,12,.55);}

/* ===========================================================================
   Motion & choreography — reveal on scroll, cover parallax, overture,
   page cross-fade. Everything is gated behind prefers-reduced-motion.
   =========================================================================== */
.cover-media{will-change:transform;}
@media (prefers-reduced-motion: no-preference){
  /* page cross-fade */
  html.page-in body{animation:pageIn .62s cubic-bezier(.2,.8,.2,1) both;}
  html.page-leave body{opacity:0;transform:translateY(-7px);transition:opacity .28s ease, transform .28s ease;}
  @keyframes pageIn{from{opacity:0;transform:translateY(11px);filter:blur(2px);}to{opacity:1;transform:none;filter:blur(0);}}
  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);}
  .reveal.reveal-in{opacity:1;transform:none;}
  /* the overture — cover content settles in on load */
  .cover .cover-inner > div{opacity:0;animation:coverIn 1.05s cubic-bezier(.2,.8,.2,1) forwards;}
  .cover .cover-inner > div:nth-child(1){animation-delay:.2s;}
  .cover .cover-inner > div:nth-child(2){animation-delay:.42s;}
  .cover .cover-inner > div:nth-child(3){animation-delay:.66s;}
  @keyframes coverIn{from{opacity:0;transform:translateY(16px);filter:blur(5px);}to{opacity:1;transform:none;filter:blur(0);}}
}

/* ===========================================================================
   Mobile tuning — the display type uses clamp() minimums scaled for desktop;
   below ~620px those minimums stop shrinking, so long single-word titles
   (e.g. "Correspondence") would overflow a phone. Retune the oversized type
   for small screens and add safety wrapping. Structure is untouched.
   =========================================================================== */
@media (max-width:600px){
  .entry-title{font-size:clamp(2.15rem,10.5vw,3.3rem);line-height:.94;letter-spacing:-.012em;
    overflow-wrap:break-word;hyphens:auto;}
  .entry-no{font-size:clamp(2rem,9vw,2.9rem);}
  .entry-sub{font-size:1.05rem;line-height:1.42;}
  .entry-rule{gap:1rem;}
  .entry-sec{letter-spacing:.2em;}
  .entry-loc{letter-spacing:.18em;}
  .statement-text{font-size:clamp(1.7rem,7.5vw,2.7rem);line-height:1.16;overflow-wrap:break-word;}
  .marquee > span{font-size:clamp(1.9rem,9vw,3rem);}
}
@media (max-width:380px){
  .entry-title{font-size:clamp(1.95rem,10vw,2.4rem);}
  .hero-full-title{font-size:clamp(2.1rem,9.5vw,2.6rem);}
  .hero-full{min-height:74vh;}
}