/* ── Tokens ─────────────────────────────────────────────── */
:root{
  --ink:        #0B0A08;   /* deep warm black */
  --ink-2:      #12100D;   /* raised surfaces */
  --ink-3:      #1A1712;   /* cards */
  --ivory:      #F1EADB;   /* champagne ivory */
  --ivory-dim:  #B8B0A0;   /* secondary text */
  --stone:      #7E7767;   /* captions, whispers */
  --gold:       #B3925A;   /* antique gold */
  --gold-hi:    #D8BC85;   /* gold highlight */
  --hairline:   rgba(179,146,90,.38);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', sans-serif;
  --ease:  cubic-bezier(.19,1,.22,1);
  --pace:  1.1s;           /* the house tempo — slow, cinematic */
  --gutter: clamp(1.25rem, 5vw, 6rem);
}

/* ── Reset & base ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

/* Grain — one quiet layer over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Type helpers ───────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);font-weight:300;
  font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:1rem;
}
.eyebrow::before{content:"";width:2.5rem;height:1px;background:var(--hairline)}
h1,h2,h3{font-weight:300;line-height:1.08;letter-spacing:.01em}
h2{font-size:clamp(2.2rem,1.6rem + 3vw,4rem)}
h2 em, h1 em{font-style:italic;color:var(--gold-hi)}
.whisper{font-family:var(--sans);font-weight:300;font-size:.78rem;letter-spacing:.14em;color:var(--stone)}

/* ── Reveal choreography ────────────────────────────────── */
.rv{opacity:0;transform:translateY(2.2rem);transition:opacity var(--pace) var(--ease),transform var(--pace) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-line{transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease) .2s}
.rv-line.in{transform:scaleX(1)}
.rv-line-v{transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--ease) .2s}
.rv-line-v.in{transform:scaleY(1)}
/* Staggered entrance — apply alongside .rv for a cinematic cascade */
.rv.d1{transition-delay:.1s}
.rv.d2{transition-delay:.22s}
.rv.d3{transition-delay:.34s}
.rv.d4{transition-delay:.46s}
.rv.d5{transition-delay:.58s}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-line,.rv-line-v{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}

/* ── Nav ─────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gutter);
  transition:background .6s ease,padding .6s ease,border-color .6s ease;
  border-bottom:1px solid transparent;
}
nav.scrolled{background:rgba(11,10,8,.88);backdrop-filter:blur(14px);padding:.9rem var(--gutter);border-color:rgba(179,146,90,.15)}
.brand{font-family:var(--sans);font-weight:300;letter-spacing:.32em;font-size:.8rem}
.brand b{font-weight:500;color:var(--gold-hi)}
.nav-links{display:flex;gap:2.4rem;align-items:center}
.nav-links a{font-family:var(--sans);font-weight:300;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-dim);transition:color .4s}
.nav-links a:hover{color:var(--gold-hi)}
.btn{
  font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ivory);border:1px solid var(--hairline);padding:.85em 2.2em;
  background:transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s;display:inline-block;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.btn:hover{color:var(--ink);border-color:var(--gold)}
.btn:hover::before{transform:scaleX(1)}
.btn.solid{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.solid:hover{background:var(--gold-hi)}
a.btn{z-index:1}
.menu-toggle{display:none;background:none;border:none;color:var(--ivory);cursor:pointer;font-family:var(--sans);letter-spacing:.24em;font-size:.7rem;text-transform:uppercase}

/* ── Hero text (sits directly beneath the hero image, on solid
     ground — normal document flow, no viewport-height centering,
     so it can never be pushed up under the fixed nav) ─────────── */
.hero{padding:clamp(5rem,11vh,7.5rem) var(--gutter) clamp(5rem,10vh,7rem)}
.hero-frame{max-width:1200px;margin:0 auto;width:100%;position:relative}
.hero .eyebrow{margin-bottom:2.5rem}
.hero h1{
  font-size:clamp(3rem,2rem + 7vw,7.5rem);
  font-weight:300;
}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero h1 .l2{margin-left:clamp(2rem,12vw,11rem)}
.hero-rule{width:1px;height:clamp(4rem,10vh,7rem);background:linear-gradient(var(--gold),transparent);margin:3rem 0 2.2rem clamp(2rem,12vw,11rem)}
.hero-sub{max-width:34ch;margin-left:clamp(2rem,12vw,11rem);color:var(--ivory-dim);font-style:italic;font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}
.hero-cta{margin:3.2rem 0 0 clamp(2rem,12vw,11rem);display:flex;gap:1.4rem;flex-wrap:wrap}

/* ── Opener image ───────────────────────────────────────── */
.opener{padding:0;position:relative;height:clamp(60vh,80vh,880px);overflow:hidden}
.opener img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.opener::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,8,.55) 0%,rgba(11,10,8,.05) 30%,rgba(11,10,8,.15) 70%,var(--ink) 100%);z-index:1}
.opener-cap{position:absolute;left:var(--gutter);bottom:2.4rem;z-index:2}
/* The page-opening hero image: full viewport, and its fade runs all
   the way to solid ink at the base so the hero text below reads as
   a continuation of the same fade, not a hard cut. */
.opener.hero-image{height:100svh}
.opener.hero-image::before{background:linear-gradient(180deg,rgba(11,10,8,.1) 0%,rgba(11,10,8,.05) 40%,rgba(11,10,8,.55) 80%,var(--ink) 100%)}

/* ── Sections shared ────────────────────────────────────── */
section{padding:clamp(6rem,14vh,11rem) var(--gutter)}
.inner{max-width:1200px;margin:0 auto}
.hr{height:1px;background:var(--hairline);border:none;max-width:1200px;margin:0 auto}

/* ── Philosophy ─────────────────────────────────────────── */
.philosophy .inner{max-width:1050px}
.philosophy p.lead{
  font-size:clamp(1.7rem,1.2rem + 2.6vw,3.1rem);
  line-height:1.35;font-weight:300;margin-top:2.6rem;
}
.philosophy p.lead em{color:var(--gold-hi)}
.philosophy .attribution{margin-top:3rem;display:flex;align-items:center;gap:1.2rem}
.philosophy .attribution::before{content:"";width:3.5rem;height:1px;background:var(--hairline)}

/* ── Portfolio ──────────────────────────────────────────── */
.portfolio .head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:4rem}
/* Masonry via CSS multi-column: each photo keeps its own natural
   aspect ratio (no forced crop, no fixed-height slot), and portrait
   and landscape frames interleave without ever overlapping — the
   column-fill algorithm guarantees that regardless of how many
   photos are added or in what order. Replaces an earlier CSS-Grid
   layout that hand-tuned a margin per slot for a specific 6-8 image
   set; it broke down (visible overlaps, cropped faces) once the
   gallery grew past that. */
.grid{
  column-count:3;
  column-gap:clamp(1.25rem,2.5vw,2.4rem);
}
.grid .ph{
  break-inside:avoid;
  margin-bottom:clamp(1.25rem,2.5vw,2.4rem);
}
.grid .ph img{
  position:static;width:100%;height:auto;
  object-fit:unset;
}
.ph{position:relative;overflow:hidden;background:var(--ink-2)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.2s var(--ease)}
.ph:hover img{transform:scale(1.05)}
/* A permanent scrim behind every caption — guarantees the text reads
   cleanly regardless of how bright the underlying photo is (a bright
   gown or a sunlit window previously left some captions hard to read). */
.ph::before{
  content:"";position:absolute;inset:0 0 0 0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(8,7,6,.82) 0%, rgba(8,7,6,.45) 32%, rgba(8,7,6,0) 60%);
}
.ph::after{ /* grain per frame */
  content:"";position:absolute;inset:0;z-index:2;opacity:.1;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph figcaption{
  position:absolute;left:1.4rem;bottom:1.2rem;z-index:3;
  font-family:var(--sans);font-weight:300;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(241,234,219,.95);
  display:flex;flex-direction:column;gap:.3rem;
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.ph figcaption i{font-family:var(--serif);font-size:1.05rem;letter-spacing:.04em;text-transform:none;font-style:italic;color:var(--ivory)}
.portfolio-foot{margin-top:4rem;text-align:center}

/* ── Approach ───────────────────────────────────────────── */
.approach .inner{display:grid;grid-template-columns:5fr 7fr;gap:clamp(3rem,6vw,7rem);align-items:start}
.approach h2{position:sticky;top:8rem}
.approach-item{padding:2.6rem 0;border-top:1px solid rgba(179,146,90,.18)}
.approach-item:last-child{border-bottom:1px solid rgba(179,146,90,.18)}
.approach-item h3{font-size:1.7rem;margin-bottom:.8rem;font-style:italic}
.approach-item p{color:var(--ivory-dim);max-width:52ch}

/* ── Collections ────────────────────────────────────────── */
.collections{background:var(--ink-2)}
.collections .head{text-align:center;max-width:640px;margin:0 auto 5rem}
.collections .head p{color:var(--ivory-dim);margin-top:1.6rem;font-style:italic}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.4rem);align-items:stretch}
.tier{
  border:1px solid rgba(179,146,90,.18);padding:3rem 2.4rem;
  display:flex;flex-direction:column;background:var(--ink);
  transition:border-color .6s,transform .8s var(--ease);
}
.tier:hover{border-color:var(--gold);transform:translateY(-6px)}
.tier.center{border-color:rgba(179,146,90,.5);position:relative}
.tier.center::before{
  content:"Most Reserved";position:absolute;top:-0.62rem;left:50%;transform:translateX(-50%);
  background:var(--ink-2);padding:0 1.2rem;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-hi);white-space:nowrap;
}
.tier .num{font-family:var(--sans);font-weight:200;font-size:.7rem;letter-spacing:.4em;color:var(--stone);text-transform:uppercase}
.tier h3{font-size:1.9rem;font-style:italic;margin:.9rem 0 .4rem}
.tier .price{font-family:var(--sans);font-weight:300;font-size:1.4rem;letter-spacing:.1em;color:var(--gold-hi);margin-bottom:2rem}
.tier .price span{font-size:.66rem;letter-spacing:.28em;color:var(--stone);display:block;margin-bottom:.5rem;text-transform:uppercase;font-family:var(--sans)}
.tier ul{list-style:none;flex:1;display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.4rem}
.tier li{font-family:var(--sans);font-weight:300;font-size:.86rem;color:var(--ivory-dim);padding-left:1.6rem;position:relative;letter-spacing:.02em}
.tier li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.tiers-note{text-align:center;margin-top:3.2rem;color:var(--stone);font-style:italic;font-size:1rem}

/* ── Experience ─────────────────────────────────────────── */
.experience .head{max-width:640px;margin-bottom:5rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(179,146,90,.18)}
.step{padding:2.8rem 2rem 2.8rem 0;border-right:1px solid rgba(179,146,90,.12);padding-left:2rem}
.step:first-child{padding-left:0}
.step:last-child{border-right:none}
.step .num{font-family:var(--serif);font-weight:300;font-size:3rem;color:var(--gold);font-style:italic;line-height:1}
.step h3{font-size:1.35rem;margin:1.4rem 0 .8rem;font-style:italic}
.step p{font-family:var(--sans);font-weight:300;font-size:.86rem;color:var(--ivory-dim);line-height:1.75}
.experience-note{margin-top:3.6rem;padding:1.8rem 2.2rem;border-left:1px solid var(--gold);color:var(--ivory-dim);font-style:italic;max-width:62ch}

/* ── Testimonials ───────────────────────────────────────── */
.testimonials{background:var(--ink-2);text-align:center;position:relative}
.testimonials .inner{max-width:860px}
.quote-stage{position:relative;min-height:17rem;margin-top:3rem}
.quote{
  position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);
  display:flex;flex-direction:column;justify-content:center;gap:2rem;pointer-events:none;
}
.quote.active{opacity:1;pointer-events:auto}
.quote blockquote{font-size:clamp(1.3rem,1.05rem + 1.3vw,1.9rem);font-weight:300;line-height:1.5;font-style:italic;color:var(--ivory-dim)}
.quote cite{font-family:var(--sans);font-style:normal;font-weight:300;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.quote-dots{display:flex;gap:.9rem;justify-content:center;margin-top:2.5rem}
.quote-dots button{width:2.4rem;height:1px;background:rgba(179,146,90,.25);border:none;cursor:pointer;padding:.6rem 0;background-clip:content-box;transition:background-color .5s}
.quote-dots button.active{background-color:var(--gold);background-clip:content-box}

/* ── About ──────────────────────────────────────────────── */
.about .inner{max-width:760px;margin:0 auto;text-align:center}
.about-copy p{color:var(--ivory-dim);margin-top:1.6rem}
.about-copy p:first-of-type{margin-top:2.4rem;color:var(--ivory);font-size:1.25em;line-height:1.55}
.signature{font-family:var(--serif);font-style:italic;font-size:2rem;color:var(--gold-hi);margin-top:2.6rem}

/* ── Journal ────────────────────────────────────────────── */
.journal .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;margin-bottom:4rem}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.6rem)}
.post .ph{aspect-ratio:4/3;margin-bottom:1.6rem}
.post .whisper{display:block;margin-bottom:.7rem}
.post h3{font-size:1.5rem;font-style:italic;line-height:1.3;transition:color .5s}
.post:hover h3{color:var(--gold-hi)}
.post p{font-family:var(--sans);font-weight:300;font-size:.85rem;color:var(--ivory-dim);margin-top:.8rem;line-height:1.7}
.post .read{display:inline-block;margin-top:1.2rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--hairline);padding-bottom:.35rem}

/* ── Inquiry ────────────────────────────────────────────── */
.inquiry{background:var(--ink-2)}
.inquiry .inner{display:grid;grid-template-columns:5fr 7fr;gap:clamp(3rem,6vw,7rem)}
.inquiry-intro p{color:var(--ivory-dim);margin-top:1.8rem;font-style:italic}
.inquiry-contact{margin-top:3rem;display:flex;flex-direction:column;gap:1.1rem}
.inquiry-contact a{font-family:var(--sans);font-weight:300;font-size:.85rem;letter-spacing:.14em;color:var(--ivory);display:inline-flex;gap:1rem;align-items:baseline;transition:color .4s;width:fit-content}
.inquiry-contact a:hover{color:var(--gold-hi)}
.inquiry-contact .whisper{width:5.5rem;flex-shrink:0}
form{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1.8rem}
.field{display:flex;flex-direction:column;gap:.7rem}
.field.full{grid-column:1/-1}
label{font-family:var(--sans);font-weight:300;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--stone)}
input,select,textarea{
  background:transparent;border:none;border-bottom:1px solid rgba(179,146,90,.3);
  color:var(--ivory);font-family:var(--serif);font-size:1.1rem;padding:.6rem 0;
  transition:border-color .5s;border-radius:0;
}
select{appearance:none;cursor:pointer}
select option{background:var(--ink);color:var(--ivory)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
textarea{resize:vertical;min-height:6.5rem;line-height:1.6}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:.6rem}
.form-ok{display:none;grid-column:1/-1;padding:2.4rem;border:1px solid var(--hairline);text-align:center;font-style:italic;font-size:1.2rem}
form.sent .form-ok{display:block}
form.sent .field,form.sent .form-actions{display:none}
.form-error{display:none;grid-column:1/-1;color:#c96a4a;font-family:var(--sans);font-size:.85rem;letter-spacing:.02em;margin-top:-.8rem}
form.errored .form-error{display:block}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}

/* ── Footer ─────────────────────────────────────────────── */
footer{padding:4.5rem var(--gutter) 3rem;border-top:1px solid rgba(179,146,90,.15)}
.foot-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;align-items:flex-start}
.foot-inner .brand{font-size:1rem}
.foot-col{display:flex;flex-direction:column;gap:.9rem}
.foot-col a{font-family:var(--sans);font-weight:300;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);transition:color .4s}
.foot-col a:hover{color:var(--gold-hi)}
.foot-base{max-width:1200px;margin:3.5rem auto 0;padding-top:2rem;border-top:1px solid rgba(179,146,90,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.foot-base span{font-family:var(--sans);font-weight:300;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:960px){
  .approach .inner,.inquiry .inner{grid-template-columns:1fr}
  .approach h2{position:static;margin-bottom:2.5rem}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-right:none;border-bottom:1px solid rgba(179,146,90,.12);padding-left:0}
  .tiers{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .posts{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .grid{column-count:2}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;inset:0;background:rgba(11,10,8,.97);flex-direction:column;justify-content:center;
    gap:2.4rem;transform:translateY(-100%);transition:transform .7s var(--ease);
  }
  .nav-links.open{transform:none}
  .nav-links a{font-size:.85rem}
  .menu-toggle{display:block;z-index:1001;position:relative}
  .steps{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .hero h1 .l2,.hero-rule,.hero-sub,.hero-cta{margin-left:0}
  .grid{column-count:1}
}

/* ── Testimonials — quiet photographic backdrop ────────────── */
.testimonials{
  background:
    linear-gradient(rgba(18,16,13,.93),rgba(18,16,13,.96)),
    url("images/gr2-reception-cake-detail.jpg") center/cover no-repeat;
}

/* ── Inquiry — a warm frame before the ask ──────────────────── */
.inquiry-image{aspect-ratio:4/5;max-width:340px;margin:2.6rem 0 0}

/* ── Second full-bleed break (reuses .opener, different tone) ── */
.opener.light::before{background:linear-gradient(180deg,rgba(11,10,8,.35) 0%,rgba(11,10,8,.05) 35%,rgba(11,10,8,.1) 70%,var(--ink) 100%)}
/* Landscape source with the couple vertically centered — a mild
   45% anchor keeps them safely in frame at any crop ratio. */
.opener.light img{object-position:center 45%}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO PAGE (portfolio.html)
   ══════════════════════════════════════════════════════════════ */
.portfolio-hero{padding:10rem var(--gutter) 4rem}
.portfolio-hero .inner{max-width:900px}
.portfolio-hero p.lead{margin-top:2rem;color:var(--ivory-dim);font-style:italic;font-size:clamp(1.1rem,1rem + .6vw,1.4rem);max-width:56ch}
.category{padding-top:clamp(3rem,8vh,6rem);padding-bottom:clamp(3rem,8vh,6rem)}
.category .cat-head{margin-bottom:3rem;display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap}
.category .cat-head .whisper{color:var(--stone)}
.portfolio-cta{background:var(--ink-2);text-align:center}
.portfolio-cta .inner{max-width:640px}
.portfolio-cta p{color:var(--ivory-dim);margin-top:1.4rem;font-style:italic}
.portfolio-cta .btn{margin-top:2.4rem}

/* ══════════════════════════════════════════════════════════════
   JOURNAL ARTICLE PAGES (journal/*.html)
   ══════════════════════════════════════════════════════════════ */
.article-hero{padding:10rem var(--gutter) 3rem}
.article-hero .inner{max-width:740px}
.article-hero .whisper{display:block;margin-top:1.6rem}
.article-body{padding-top:1rem}
.article-body .inner{max-width:700px}
.article-body p{color:var(--ivory-dim);margin-top:1.7rem;font-size:1.08em;line-height:1.85}
.article-body p:first-of-type{margin-top:0}
.article-body .pull-quote{
  font-family:var(--serif);font-style:italic;font-weight:300;color:var(--gold-hi);
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.5;
  margin:3rem 0;padding-left:1.8rem;border-left:1px solid var(--gold);
}
.article-body .signature{margin-top:3rem}
.article-back{display:inline-block;margin-bottom:2rem}