/* ═══════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════ */
:root{
  /* stock */
  --bg:#0B0A08;            /* the dark paper */
  --bg-lift:#13100B;       /* letter panel / lifted surfaces */
  /* ink */
  --ink:#F2EBDA;           /* warm off-white */
  --ink-dim:#AFA489;
  --ink-faint:#877B5F; /* lightened from #7E7359 — 4.22:1 on the near-black bg failed WCAG AA (4.5:1); this hits ~4.74:1 with a comfortable margin, same hue/character */
  /* metal */
  --gold:#C9A85C;
  --gold-deep:#A98B4A;
  --foil:linear-gradient(105deg,#7A5E2B 0%,#C9A85C 30%,#F0DFA9 50%,#C9A85C 70%,#7A5E2B 100%);
  /* rules & frame */
  --rule:rgba(242,235,218,.12);
  --rule-gold:rgba(201,168,92,.3);
  --frame:rgba(201,168,92,.32);
  --frame-in:rgba(201,168,92,.12);
  --error:#A8604C;
  /* type */
  --display:'Cormorant Garamond',Georgia,serif;
  --caps:'Cinzel',serif;
  --sans:'Libre Franklin',system-ui,sans-serif;
  /* geometry & motion */
  --fi:clamp(10px,1.8vw,22px);      /* frame inset */
  --gutter:clamp(26px,5.5vw,68px);
  --ease:cubic-bezier(.19,1,.22,1);
}

/* ═══════════════════════════════════════════════════════
   2. BASE & UTILITIES
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;background:none;border:0;color:inherit}
input,textarea{font-family:inherit}
::selection{background:rgba(201,168,92,.28)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
section{scroll-margin-top:96px;position:relative}

/* skip link (visible on keyboard focus only) */
.skip{position:fixed;top:-60px;left:50%;transform:translateX(-50%);z-index:99;
  background:var(--bg-lift);border:1px solid var(--rule-gold);color:var(--gold);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:12px 22px;transition:top .3s}
.skip:focus{top:calc(var(--fi) + 10px)}

/* small caps utility */
.sc{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase}

/* the journal's section eyebrow — "N° II — The House" */
.folio-line{
  display:flex;align-items:center;gap:16px;
  font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);
}
.folio-line::after{content:'';width:52px;height:1px;background:linear-gradient(to right,var(--rule-gold),transparent)}
.folio-line.center{justify-content:center}
.folio-line.center::before{content:'';width:52px;height:1px;background:linear-gradient(to left,var(--rule-gold),transparent)}

/* headings */
.h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.05rem,4.4vw,3.5rem);
  line-height:1.1;letter-spacing:.004em;color:var(--ink);
  margin-top:clamp(20px,2.6vh,30px);
}
.h2 em{font-style:italic;font-weight:300;color:var(--gold)}
.h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.12;color:var(--ink);
}
.copy{font-size:15px;line-height:1.95;color:var(--ink-dim);max-width:62ch}
.copy + .copy{margin-top:1.2em}
.note{font-family:var(--display);font-style:italic;font-weight:300;font-size:16px;color:var(--ink-faint)}

/* foil — used exactly twice on this page (hero line 2, correspondence headline) */
.foil{
  background:var(--foil);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 9s ease-in-out 2.4s infinite alternate;
}
@keyframes shimmer{from{background-position:0% 0}to{background-position:100% 0}}

/* buttons */
.btn-line{
  display:inline-flex;align-items:center;gap:14px;
  font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);border:1px solid rgba(242,235,218,.32);
  padding:17px 34px;
  transition:border-color .5s,color .5s,background .5s;
}
.btn-line::after{content:'\2192';font-size:13px;transition:transform .5s var(--ease)}
.btn-line:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,92,.05)}
.btn-line:hover::after{transform:translateX(5px)}

.btn-foil{
  display:inline-block;
  font-size:10.5px;font-weight:500;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
  color:#181106;
  background:var(--foil);background-size:220% 100%;
  border:1px solid rgba(240,223,169,.45);
  padding:17px 42px;
  animation:shimmer 8s ease-in-out infinite alternate;
  transition:box-shadow .5s,filter .5s;
}
.btn-foil:hover{box-shadow:0 14px 34px -14px rgba(201,168,92,.5);filter:brightness(1.07)}
.btn-foil:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}

/* rosette divider — engraved lathe rosette between sections */
.rosette-div{
  display:flex;align-items:center;gap:clamp(18px,3vw,30px);
  max-width:1280px;margin-inline:auto;padding-inline:var(--gutter);
}
.rosette-div::before,.rosette-div::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule-gold),transparent)}
.rosette-div svg{width:34px;height:34px;flex:0 0 auto;opacity:.85}

/* scroll reveal (JS adds .in) */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}

/* ═══════════════════════════════════════════════════════
   3. GRAIN, GUILLOCHÉ
   ═══════════════════════════════════════════════════════ */
/* corner diamond marks — reused on the correspondence letter panel */
.tick{position:absolute;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.tick.a{top:-3px;left:-3px}.tick.b{top:-3px;right:-3px}
.tick.c{bottom:-3px;right:-3px}.tick.d{bottom:-3px;left:-3px}

/* paper grain over everything */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:75;
  background: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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:soft-light;
}

/* guilloché lathe-work — corners of key sections only */
.lathe{position:absolute;inset:0;pointer-events:none;z-index:0}
.lathe.a{ /* hero: lower-left & upper-right */
  background:
    repeating-radial-gradient(circle at 6% 112%, rgba(201,168,92,.07) 0 1px, transparent 1px 11px),
    repeating-radial-gradient(circle at 96% -10%, rgba(201,168,92,.055) 0 1px, transparent 1px 13px);
  -webkit-mask:radial-gradient(72% 66% at 50% 46%, transparent 36%, #000 86%);
          mask:radial-gradient(72% 66% at 50% 46%, transparent 36%, #000 86%);
}
.lathe.b{ /* correspondence: upper-left & lower-right */
  background:
    repeating-radial-gradient(circle at 2% -8%, rgba(201,168,92,.065) 0 1px, transparent 1px 12px),
    repeating-radial-gradient(circle at 98% 110%, rgba(201,168,92,.06) 0 1px, transparent 1px 11px);
  -webkit-mask:radial-gradient(72% 66% at 50% 50%, transparent 34%, #000 86%);
          mask:radial-gradient(72% 66% at 50% 50%, transparent 34%, #000 86%);
}
.lathe ~ *{position:relative;z-index:1}

/* hallmark seal sizing */
.seal-m{width:76px;height:76px;object-fit:contain}
.seal-l{width:clamp(96px,11vw,118px);height:auto;object-fit:contain}

/* masthead identity mark — the logo now stands alone (no wordmark/
   subtitle beside or below it), sized to fill roughly the vertical
   space the old badge + wordmark + subtitle occupied together */
.mh-logo{height:clamp(70px,8vw,90px);width:auto;object-fit:contain}

/* ═══════════════════════════════════════════════════════
   4. MASTHEAD, TOPBAR, MENU
   ═══════════════════════════════════════════════════════ */
.masthead{padding-top:calc(var(--fi) + clamp(18px,3vh,30px))}
.mh-top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-bottom:clamp(16px,2.4vh,24px);
  border-bottom:1px solid var(--rule);
}
.mh-side{font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.mh-side.right{justify-self:end;text-align:right}
.mh-brand{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.mh-word{
  font-family:var(--caps);font-size:clamp(18px,2.3vw,23px);font-weight:500;
  letter-spacing:.34em;text-indent:.34em;color:var(--ink);
}
.mh-word b{font-weight:500;color:var(--gold)}
.mh-nav{
  display:flex;justify-content:center;gap:clamp(20px,3.2vw,42px);
  padding:13px 0 14px;
  border-bottom:3px double var(--rule);
}
.mh-nav a{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .4s,border-color .4s;
}
.mh-nav a:hover{color:var(--gold);border-color:var(--rule-gold)}
.mh-nav a[aria-current="page"]{color:var(--gold);border-color:var(--rule-gold)}
.mh-burger{display:none}

/* slim bar — appears once the masthead has scrolled away */
.topbar{
  position:fixed;top:0;left:var(--fi);right:var(--fi);z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:56px;padding-inline:clamp(16px,3vw,30px);
  background:rgba(11,10,8,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
  transform:translateY(calc(-100% - 4px));
  transition:transform .55s var(--ease);
}
.topbar.show{transform:translateY(0)}
.tb-word{display:inline-flex;align-items:center;gap:10px;font-family:var(--caps);font-size:14px;font-weight:500;letter-spacing:.3em;color:var(--ink)}
.tb-word b{color:var(--gold);font-weight:500}
.tb-logo{height:clamp(24px,3vw,32px);width:auto;object-fit:contain}
.tb-nav{display:flex;gap:clamp(16px,2.4vw,32px)}
.tb-nav a{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);transition:color .35s}
.tb-nav a:hover{color:var(--gold)}
.tb-nav a[aria-current="page"]{color:var(--gold)}
.menu a.m-link[aria-current="page"]{color:var(--gold)}
.tb-cta{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);white-space:nowrap;border-bottom:1px solid var(--rule-gold);padding-bottom:2px}
.burger{display:none;flex-direction:column;gap:5px;padding:10px 2px}
.burger span{display:block;width:22px;height:1px;background:var(--ink);transition:transform .35s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* full-page menu (mobile / small screens) */
.menu{
  position:fixed;inset:var(--fi);z-index:78;
  background:rgba(11,10,8,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
}
.menu.open{opacity:1;pointer-events:auto}
.menu a.m-link{
  font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,6vw,2rem);
  color:var(--ink);padding:10px 0;letter-spacing:.02em;transition:color .35s;
}
.menu a.m-link:hover{color:var(--gold)}
.menu .m-cta{margin-top:26px}
.menu .m-close{position:absolute;top:18px;right:22px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);padding:10px}
.menu .m-close:hover{color:var(--gold)}

/* ═══════════════════════════════════════════════════════
   5. HERO — N° I · THE DOOR
   ═══════════════════════════════════════════════════════ */
.hero{overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.12fr .88fr;align-items:center;
  gap:clamp(44px,6vw,100px);
  padding-block:clamp(52px,8vh,96px) clamp(36px,5vh,56px);
  min-height:min(720px,calc(100svh - 260px));
}
.issue-line{
  font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,3.4vh,42px);
}
.issue-line::after{content:'';width:52px;height:1px;background:linear-gradient(to right,var(--rule-gold),transparent)}
.hl{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.75rem,6.3vw,5.4rem);
  line-height:1.05;letter-spacing:.004em;color:var(--ink);
}
.hl-line{display:block;overflow:hidden}
.hl-line>span{display:inline-block;transform:translateY(112%);animation:line-up 1.15s var(--ease) forwards}
.hl-line:nth-child(2)>span{animation-delay:.12s}
.hl-line:nth-child(3)>span{animation-delay:.24s}
.hl .foil{font-style:italic}
.hero-deck{
  margin-top:clamp(24px,3.2vh,36px);max-width:46ch;
  font-size:clamp(14px,1.15vw,15.5px);line-height:1.9;color:var(--ink-dim);
  opacity:0;animation:fade-up 1.1s var(--ease) .55s forwards;
}
.hero-actions{
  margin-top:clamp(30px,4.2vh,48px);
  display:flex;align-items:center;gap:clamp(22px,3vw,38px);flex-wrap:wrap;
  opacity:0;animation:fade-up 1.1s var(--ease) .75s forwards;
}
.strap{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(15px,1.3vw,17px);color:var(--ink-faint)}

/* hero folio row */
.hero-folio{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-top:1px solid var(--rule);
  padding:clamp(14px,2vh,20px) 0 clamp(26px,4vh,40px);
  opacity:0;animation:fade-up 1.1s var(--ease) 1.05s forwards;
}
.hero-folio span,.hero-folio a{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.hero-folio .mk{color:var(--gold);font-size:8px;letter-spacing:0}
.scroll{display:inline-flex;align-items:center;gap:12px;color:var(--ink-dim)}
.scroll i{width:44px;height:1px;background:var(--gold);display:block;transform-origin:left;animation:scroll-line 2.8s var(--ease) infinite}

/* ═══════════════════════════════════════════════════════
   PLATES — the photography system (shared)
   Replace each .art's CSS painting with a real photograph:
   <img src="…" alt="…" style="width:100%;height:100%;object-fit:cover">
   Keep the figcaption format: "Plate N — subject".
   ═══════════════════════════════════════════════════════ */
.plate{position:relative}
.art{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background-color:#0E0C09;
}
.art img{border:0}
.art::after{ /* shared vignette */
  content:'';position:absolute;inset:0;
  background:radial-gradient(130% 95% at 50% 28%, transparent 42%, rgba(5,4,3,.5) 100%);
}
.plate figcaption{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:12px;
  font-size:9.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.plate figcaption i{font-style:normal;color:var(--gold)}

/* Plate I — hero · private berth at dusk */
.art-berth{background:
  radial-gradient(120% 55% at 50% 34%, rgba(201,168,92,.16), transparent 58%),
  linear-gradient(to bottom, rgba(201,168,92,0) 61.5%, rgba(201,168,92,.38) 61.9%, rgba(201,168,92,0) 62.6%),
  linear-gradient(180deg,#1B150C 0%,#241C10 34%,#0D0B08 63%,#070605 100%)}
/* Plate II — charter · contrail at altitude */
.art-charter{background:
  radial-gradient(58% 40% at 78% 16%, rgba(201,168,92,.2), transparent 62%),
  linear-gradient(115deg, transparent 46.6%, rgba(240,223,169,.5) 47%, rgba(201,168,92,.12) 47.5%, transparent 48.4%),
  linear-gradient(180deg,#15120B,#0B0A08 72%)}
/* Plate III — motorcars · headlamps on a night pass */
.art-motor{background:
  radial-gradient(30% 9% at 32% 74%, rgba(240,223,169,.3), transparent 72%),
  radial-gradient(30% 9% at 65% 76%, rgba(240,223,169,.2), transparent 72%),
  linear-gradient(90deg,transparent,rgba(201,168,92,.3),transparent) no-repeat 50% 80%/76% 1px,
  linear-gradient(180deg,#12100A,#0A0907)}
/* Plate IV — fine art · spotlit canvas, after hours */
.art-canvas{background:
  radial-gradient(70% 45% at 50% 8%, rgba(201,168,92,.1), transparent 60%),
  linear-gradient(180deg,#100E09,#0B0A08)}
/* Plate V — timepieces · minute track, macro */
.art-dial{background:
  radial-gradient(circle at 50% 46%, transparent 26.4%, rgba(201,168,92,.42) 26.9%, transparent 27.6%),
  radial-gradient(circle at 50% 46%, transparent 39.4%, rgba(201,168,92,.15) 39.9%, transparent 40.6%),
  radial-gradient(circle at 50% 46%, rgba(201,168,92,.1), transparent 30%),
  linear-gradient(180deg,#100E09,#0A0907)}
/* Plate VI — estates · façade lit at dusk */
.art-estate{background:
  repeating-linear-gradient(90deg, transparent 0 56px, rgba(201,168,92,.09) 56px 57px),
  radial-gradient(85% 30% at 50% 98%, rgba(201,168,92,.17), transparent 72%),
  linear-gradient(180deg,#110E09,#0B0A08)}
/* Plate VII — rooms · a single stage light */
.art-stage{background:
  conic-gradient(from 194deg at 50% -8%, transparent 0 37%, rgba(240,223,169,.1) 44%, rgba(201,168,92,.045) 52%, transparent 58%),
  radial-gradient(30% 7% at 50% 88%, rgba(201,168,92,.24), transparent 72%),
  linear-gradient(180deg,#0F0D09,#0A0907)}
/* Plate VIII — off-market · the sealed brief */
.art-sealed{background:
  linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(201,168,92,.36) 50%, transparent calc(50% + .6px)) no-repeat 0 0/50.4% 46%,
  linear-gradient(to bottom left, transparent calc(50% - .5px), rgba(201,168,92,.36) 50%, transparent calc(50% + .6px)) no-repeat 100% 0/50.4% 46%,
  radial-gradient(26% 15% at 50% 46%, rgba(201,168,92,.16), transparent 72%),
  linear-gradient(180deg,#0F0D09,#0B0A08)}
/* Plate IX — rooms (supporting) · centre court at dusk */
.art-court{background:
  radial-gradient(70% 40% at 50% 12%, rgba(201,168,92,.14), transparent 62%),
  linear-gradient(180deg, rgba(201,168,92,.05) 0%, transparent 45%),
  linear-gradient(180deg,#12130B,#0A0B07)}

/* ═══════════════════════════════════════════════════════
   6. MANIFESTO — N° II · THE HOUSE
   ═══════════════════════════════════════════════════════ */
.manifesto{padding-block:clamp(96px,14vh,160px)}
.manifesto-inner{max-width:720px;margin-inline:auto;text-align:center}
.manifesto .h2{margin-top:clamp(22px,3vh,32px)}
.manifesto-copy{
  margin-top:clamp(30px,4.4vh,46px);text-align:left;
  font-size:15.5px;line-height:2.05;color:var(--ink-dim);
}
.manifesto-copy p + p{margin-top:1.4em}
.manifesto-copy .dropcap::first-letter{
  font-family:var(--display);font-weight:400;
  font-size:3.4em;line-height:.82;
  color:var(--gold);
  float:left;padding:6px 12px 0 0;
}
.principles{
  margin-top:clamp(36px,5vh,52px);
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.6vw,24px);
  font-family:var(--caps);font-size:10.5px;font-weight:400;
  letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:var(--gold);
}
.principles::before,.principles::after{content:'';width:clamp(30px,6vw,60px);height:1px;background:linear-gradient(90deg,transparent,var(--rule-gold))}
.principles::after{background:linear-gradient(90deg,var(--rule-gold),transparent)}
.principles i{font-style:normal;color:var(--ink-faint);font-size:7px;letter-spacing:0;text-indent:0}

/* ═══════════════════════════════════════════════════════
   7. PORTFOLIO — N° III · SEVEN ENTRIES
   ═══════════════════════════════════════════════════════ */
.portfolio{padding-block:clamp(90px,13vh,150px) clamp(50px,7vh,80px)}
.portfolio-head{max-width:640px;padding-bottom:clamp(46px,7vh,72px)}
.portfolio-head .note{margin-top:clamp(18px,2.4vh,26px);max-width:52ch}

.entry{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(30px,4.5vw,60px);align-items:center;
  padding-block:clamp(54px,8vh,86px);
  border-top:1px solid var(--rule);
}
.entry .plate{grid-column:1/6}
.entry .entry-body{grid-column:6/13}
.entry:nth-of-type(even) .plate{grid-column:8/13;order:2}
.entry:nth-of-type(even) .entry-body{grid-column:1/8;order:1}
.entry-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
}
.entry-eyebrow::after{content:'';width:44px;height:1px;background:linear-gradient(to right,var(--rule-gold),transparent)}
.entry-body .h3{margin-top:16px}
.entry-body .copy{margin-top:clamp(16px,2.2vh,24px);font-size:14.5px;max-width:56ch}
.entry-meta{
  margin-top:clamp(20px,2.8vh,30px);
  font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:12px;
}
.entry-meta::before{content:'\25C6';color:var(--gold);font-size:7px}

/* ═══════════════════════════════════════════════════════
   8. ADMISSION — N° IV
   ═══════════════════════════════════════════════════════ */
.admission{padding-block:clamp(96px,14vh,160px)}
.admission-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(44px,7vw,110px);align-items:start}
.admission-intro .copy{margin-top:clamp(20px,3vh,30px)}
.admission-intro .note{margin-top:clamp(22px,3vh,32px);max-width:44ch}
.steps{border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:70px 1fr;gap:clamp(20px,3vw,32px);
  padding:clamp(24px,3.4vh,34px) 0;
  border-bottom:1px solid var(--rule);
}
.step-n{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,2.6vw,2.1rem);line-height:1;color:var(--gold);
  padding-top:2px;
}
.step h3{font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
.step p{margin-top:10px;font-size:14.5px;line-height:1.9;color:var(--ink-dim);max-width:54ch}

/* ═══════════════════════════════════════════════════════
   9. THE RECORD — N° V · DISCREET PROOF
   ═══════════════════════════════════════════════════════ */
.record{padding-block:clamp(96px,14vh,160px)}
.record-head{max-width:640px;padding-bottom:clamp(40px,6vh,64px)}
.record-head .copy{margin-top:clamp(18px,2.6vh,28px)}
.ledger{border-top:1px solid var(--rule-gold)}
.ledger-row{
  display:grid;grid-template-columns:110px 150px 1fr;gap:clamp(20px,3vw,40px);
  padding:clamp(20px,3vh,28px) 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.ledger-year{font-family:var(--caps);font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--gold)}
.ledger-type{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.ledger-desc{font-size:14.5px;line-height:1.85;color:var(--ink-dim)}
.record-foot{
  margin-top:clamp(22px,3vh,32px);
  display:flex;justify-content:flex-end;
}
.record-foot .note{font-size:15px}

/* ═══════════════════════════════════════════════════════
   10. CORRESPONDENCE — N° VI · APPLICATION
   ═══════════════════════════════════════════════════════ */
.correspondence{padding-block:clamp(96px,14vh,160px)}
.corr-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(44px,6.5vw,100px);align-items:start}
.corr-intro .copy{margin-top:clamp(20px,3vh,30px)}
.assurances{margin-top:clamp(26px,3.6vh,38px);display:flex;flex-direction:column;gap:12px}
.assurances span{
  display:flex;align-items:center;gap:12px;
  font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.assurances span::before{content:'\25C6';color:var(--gold);font-size:7px}

/* the letter — application panel styled as a small certificate */
.letter{
  position:relative;
  background:var(--bg-lift);
  border:1px solid var(--frame);
  padding:clamp(30px,4.5vw,52px);
}
.letter::before{content:'';position:absolute;inset:7px;border:1px solid var(--frame-in);pointer-events:none}
.letter .tick{z-index:2}
.letter-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:18px;margin-bottom:clamp(22px,3vh,30px);
  border-bottom:1px solid var(--rule);
}
.letter-head .lh-t{font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.letter-head .lh-r{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px)}
.f-group{margin-bottom:clamp(20px,2.8vh,26px);position:relative}
.f-label{
  display:block;margin-bottom:8px;
  font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.f-label i{font-style:italic;text-transform:none;letter-spacing:.06em;color:var(--ink-faint);opacity:.75}
.f-input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:10px 2px 12px;color:var(--ink);
  font-size:15px;font-weight:300;line-height:1.5;
  transition:border-color .4s;border-radius:0;
}
.f-input:focus{outline:none;border-bottom-color:var(--gold)}
.f-input::placeholder{color:rgba(126,115,89,.55)}
textarea.f-input{resize:vertical;min-height:110px}
.f-group.error .f-input{border-bottom-color:var(--error)}
.f-err{display:none;margin-top:7px;font-size:11px;letter-spacing:.04em;color:var(--error)}
.f-group.error .f-err{display:block}
.letter-actions{display:flex;align-items:center;gap:clamp(18px,3vw,30px);flex-wrap:wrap;margin-top:6px}
.letter-note{margin-top:clamp(20px,2.8vh,28px);font-size:12.5px;line-height:1.9;color:var(--ink-faint)}

/* Netlify honeypot — off-screen for people, still present for bots to find */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* honest submit-failure notice — hidden unless the POST actually fails */
.form-fail{display:none;margin-top:14px;font-size:12.5px;letter-spacing:.02em;line-height:1.7;color:var(--error)}
.form-fail.show{display:block}

/* received state */
.received{display:none;text-align:center;padding:clamp(16px,3vh,30px) 0 clamp(8px,2vh,18px)}
.letter.done form{display:none}
.letter.done .received{display:block}
.received .h3{margin-top:clamp(18px,2.6vh,26px)}
.received p{margin:14px auto 0;max-width:44ch;font-size:14px;line-height:1.95;color:var(--ink-dim)}
.received .seal-m{margin-inline:auto}

/* seal at the close of the application */
.corr-close{
  margin-top:clamp(64px,9vh,100px);
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
}
.corr-close .sc{color:var(--ink-faint);letter-spacing:.34em;text-indent:.34em}
/* the trailing animated line (.scroll i, 44px + 12px gap) only sits on
   the right of the link text, so centering the flex item as a whole
   still leaves the text itself looking left-of-center — balance it
   with matching space on the left so the text lands on true center */
.corr-close .scroll{padding-left:56px}

/* ═══════════════════════════════════════════════════════
   11. COLOPHON (footer)
   ═══════════════════════════════════════════════════════ */
.colophon{
  border-top:3px double var(--rule);
  padding-block:clamp(56px,8vh,84px) calc(var(--fi) + clamp(26px,4vh,40px));
}
.colo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:start}
.colo-brand .mh-word{display:block;font-size:19px;text-align:center}
.colo-brand p{margin-top:18px;max-width:44ch;font-size:13.5px;line-height:1.95;color:var(--ink-dim)}
.colo-brand .addr{margin-top:16px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.colo-house h3{
  font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin-bottom:20px;
}
.house-link{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px 0;border-top:1px solid var(--rule);
  transition:opacity .35s;
}
.house-link:last-of-type{border-bottom:1px solid var(--rule)}
.house-link:hover .hl-name{color:var(--gold)}
.hl-name{font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);transition:color .35s}
.hl-desc{font-size:12px;color:var(--ink-faint);text-align:right}
.colo-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(44px,6vh,64px);padding-top:22px;
  border-top:1px solid var(--rule);
}
.colo-legal{display:flex;gap:clamp(16px,3vw,30px);flex-wrap:wrap}
.colo-legal a,.colo-legal span{font-size:9.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.colo-legal a:hover{color:var(--gold)}
.colo-set{font-family:var(--display);font-style:italic;font-weight:300;font-size:13px;color:var(--ink-faint)}

/* ═══════════════════════════════════════════════════════
   12. MOTION & RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@keyframes line-up{to{transform:translateY(0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes scroll-line{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hl-line>span{transform:none}
  .hero-deck,.hero-actions,.hero-folio{opacity:1}
  .rv{opacity:1;transform:none}
  .foil,.btn-foil{background-position:50% 0}
}

@media (max-width:1023px){
  .entry .plate{grid-column:1/6}
  .entry .entry-body{grid-column:6/13}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:clamp(38px,6vh,54px)}
  .art{aspect-ratio:16/10}
  .entry{grid-template-columns:1fr;gap:clamp(24px,4vh,36px);align-items:start}
  .entry .plate,.entry .entry-body,
  .entry:nth-of-type(even) .plate,.entry:nth-of-type(even) .entry-body{grid-column:1/-1;order:0}
  .entry .art{aspect-ratio:16/9}
  .admission-grid,.corr-grid{grid-template-columns:1fr;gap:clamp(40px,6vh,56px)}
  .colo-grid{grid-template-columns:1fr;gap:44px}
  .hl-desc{text-align:left}
  .house-link{flex-direction:column;gap:5px;align-items:flex-start}
}
@media (max-width:820px){
  .mh-side{display:none}
  .mh-nav{display:none}
  .mh-top{
    display:flex;flex-direction:column;align-items:center;
    position:relative;
    grid-template-columns:none;
    border-bottom:3px double var(--rule);padding-bottom:clamp(14px,2vh,20px)
  }
  .mh-brand{justify-self:auto}
  .mh-burger{display:flex;position:absolute;top:0;right:0;justify-self:auto}
  .tb-nav{display:none}
  .topbar .burger{display:flex}
  .topbar .tb-cta{display:none}
}
@media (max-width:640px){
  .ledger-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .ledger-desc{max-width:56ch}
  .f-row{grid-template-columns:1fr}
  .record-foot{justify-content:flex-start}
  .hero-folio .mk{display:none}
  .letter-head{flex-direction:column;gap:6px}

  /* hero — more breathing room between headline, copy, CTA and
     tagline at phone width; the vh-based clamps alone read as
     cramped once the two-column layout collapses */
  .hero-deck{margin-top:32px;font-size:15.5px;line-height:1.85;max-width:36ch}
  .hero-actions{margin-top:40px;flex-direction:column;align-items:flex-start;gap:24px}
  .strap{font-size:14.5px}
  .hero-folio{padding-top:28px}
}