/* ============================================================
   ELGIN HALL · DALHOUSIE · SINCE 1857
   Single typeface: DM Sans. Hierarchy by weight + scale + colour.
   ============================================================ */

:root{
  /* --- dark house palette. base is the client's #1B2C22 --- */
  --paper:#101B16;      /* page background            */
  --paper-2:#16241c;    /* alternating band (deeper)  */
  --paper-3:#24382c;    /* hover / raised             */
  --ink:#f3eee2;        /* primary text (light)       */
  --ink-2:rgba(243,238,226,.74);
  --ink-3:rgba(243,238,226,.5);
  --white:#20342820;    /* panel tint (see --panel)   */
  --panel:#213529;      /* form / card surface        */
  --field:#182720;      /* input surface              */

  --brass:#b8934a;      /* lifted for contrast on dark */
  --brass-2:#d4b877;
  --brass-3:#e8d5a4;
  --green:#122019;      /* deepest band               */
  --green-2:#1B2C22;
  --green-3:#24382c;

  --s1:#9c7a5b; --s2:#ddd4c2; --s3:#9d9a93; --s4:#4f8481;
  --s5:#9dbd95; --s6:#bfae96; --s7:#7d9cb5;

  --rule:rgba(243,238,226,.15);
  --rule-2:rgba(243,238,226,.08);
  --rule-lt:rgba(243,238,226,.18);

  --f:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:1440px;
  --gut:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 40px 90px -40px rgba(0,0,0,.7);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;line-height:1.7;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* paper grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ---- type scale: one family, big weight contrast ---- */
h1,h2,h3,h4,h5{font-family:var(--f);text-transform:uppercase}
h1{font-size:clamp(1.95rem,4.1vw,3.35rem);font-weight:800;line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(1.45rem,2.6vw,2.25rem);font-weight:800;line-height:1.08;letter-spacing:-.025em}
h3{font-size:clamp(1rem,1.25vw,1.22rem);font-weight:700;line-height:1.2;letter-spacing:-.005em}
h4{font-size:.88rem;font-weight:700;letter-spacing:.02em}
.thin{font-weight:200}
.big-num{font-weight:800;letter-spacing:-.05em;line-height:.85}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.section{padding:clamp(66px,8.5vw,136px) 0}
.center{text-align:center}
.lede{font-size:clamp(.96rem,1vw,1.08rem);color:var(--ink-2);max-width:62ch;font-weight:300;line-height:1.68}
.small{font-size:.86rem;color:var(--ink-3);font-weight:300}

/* section mark */
.mark{
  display:flex;align-items:center;gap:16px;font-size:.68rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--brass);
  padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:clamp(30px,4vw,58px);
}
.mark .n{
  font-size:.66rem;font-weight:800;letter-spacing:.06em;color:var(--paper);
  background:var(--brass);padding:5px 9px;line-height:1;
}
.mark .fill{flex:1;height:1px}
.mark .r{color:var(--ink-3);font-weight:500;letter-spacing:.16em}

.dropcap::first-letter{
  font-weight:800;float:left;font-size:3.1em;line-height:.85;
  margin:.1em .13em 0 0;color:var(--brass);letter-spacing:-.03em;
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.7em;font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;padding:1.2em 2.2em;
  border:1px solid var(--ink);cursor:pointer;background:transparent;color:var(--ink);
  transition:.4s var(--ease);position:relative;overflow:hidden;
}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--paper);border-color:var(--ink)}
.btn-fill{background:var(--green);border-color:var(--green);color:var(--paper)}
.btn-fill::before{background:var(--brass)}
.btn-fill:hover{color:#fff;border-color:var(--brass)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:#fff}
.btn-brass::before{background:var(--green)}
.btn-brass:hover{color:#fff;border-color:var(--green)}
.btn-lt{border-color:var(--rule-lt);color:var(--paper)}
.btn-lt::before{background:var(--paper)}
.btn-lt:hover{color:var(--green);border-color:var(--paper)}

/* ===== UTILITY + STATIC HEADER (not sticky) ===== */
.utility{background:var(--green);color:rgba(246,242,232,.78);font-size:.72rem;letter-spacing:.08em;font-weight:300}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:44px}
.utility .u-l,.utility .u-r{display:flex;align-items:center;gap:22px;white-space:nowrap}
.utility b{color:var(--brass-2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.64rem}
.utility a:hover{color:#fff}

.masthead{background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:20}
.masthead .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.mast-nav{display:flex;gap:clamp(14px,2vw,32px);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mast-nav a{padding:8px 0;position:relative;color:var(--ink-2);transition:.3s}
.mast-nav a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--brass);transition:width .4s var(--ease)}
.mast-nav a:hover,.mast-nav a.active{color:var(--ink)}
.mast-nav a:hover::after,.mast-nav a.active::after{width:100%}
.mast-nav.right{justify-content:flex-end}
.mast-brand{display:flex;align-items:center;justify-content:center;line-height:0}
.mast-brand img{width:180px;height:auto;transition:opacity .3s}
.mast-brand:hover img{opacity:.78}

.mob-bar{display:none;align-items:center;justify-content:space-between;padding:14px var(--gut);border-bottom:1px solid var(--rule);background:var(--paper)}
.mob-brand{display:flex;align-items:center;line-height:0}
.mob-brand img{width:140px;height:auto}
.burger{background:none;border:0;width:30px;height:22px;position:relative;cursor:pointer}
.burger span{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.35s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:20px}
.mob-open .burger span:nth-child(1){top:10px;transform:rotate(45deg)}
.mob-open .burger span:nth-child(2){opacity:0}
.mob-open .burger span:nth-child(3){top:10px;transform:rotate(-45deg)}
.mob-menu{display:none;flex-direction:column;background:var(--green);padding:12px var(--gut) 28px}
.mob-menu a{text-transform:uppercase;font-size:1rem;font-weight:700;letter-spacing:.04em;color:var(--paper);padding:16px 0;border-bottom:1px solid var(--rule-lt)}
.mob-menu .btn{margin-top:20px;justify-content:center}
.mob-open .mob-menu{display:flex}

.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:13px 0}
.ticker-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker span{font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;padding:0 24px;opacity:.8;white-space:nowrap}
.ticker span::after{content:"◆";margin-left:24px;color:var(--brass-2);font-size:.6em;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===== HERO ===== */
.ehero{border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.ehero .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,64px);align-items:center;
  padding-top:clamp(48px,6vw,92px);padding-bottom:0}
.ehero-copy{padding-bottom:clamp(48px,6vw,96px)}
.est{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.est i{display:block;width:56px;height:1px;background:var(--brass)}
.est span{font-size:.66rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.ehero h1{margin-bottom:28px}
.ehero h1 .lt{display:block;font-weight:300;color:var(--brass);letter-spacing:-.01em;font-size:.48em;margin-top:.5em;line-height:1.2}
.ehero p{max-width:46ch;color:var(--ink-2);font-weight:300;font-size:clamp(.95rem,1vw,1.04rem)}
.ehero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.ehero-fig{position:relative;align-self:stretch;min-height:min(74vh,600px)}
.ehero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ehero-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(22,40,30,.35))}
.ehero-fig .plate{
  position:absolute;left:-1px;bottom:0;z-index:2;background:var(--paper);padding:16px 26px 0 0;
  font-size:.66rem;font-weight:700;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;
}
.hindex{border-top:1px solid var(--rule);background:var(--paper-2)}
.hindex .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.hindex a{padding:26px 20px 26px 0;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:4px;transition:.35s;position:relative}
.hindex a:not(:first-child){padding-left:20px}
.hindex a:last-child{border-right:0}
.hindex a::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--brass);transition:width .45s var(--ease)}
.hindex a:hover::before{width:100%}
.hindex a:hover{background:var(--paper-3)}
.hindex .k{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hindex .v{font-size:.76rem;color:var(--ink-3);font-weight:300}

.phead{border-bottom:1px solid var(--rule);background:var(--paper-2);position:relative;overflow:hidden}
.phead .wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding-top:clamp(44px,5vw,76px);padding-bottom:clamp(32px,4vw,52px)}
.crumb{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.crumb a:hover{color:var(--brass)}

/* ===== LEDGER ===== */
.ledger{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(30px,5vw,78px)}
.ledger-side{border-right:1px solid var(--rule);padding-right:clamp(20px,3vw,42px)}
.ledger-side dt{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:700;padding-top:18px}
.ledger-side dd{font-size:.92rem;font-weight:700;letter-spacing:.01em;text-transform:uppercase;
  padding-bottom:18px;border-bottom:1px solid var(--rule-2)}
.ledger-body p{margin-bottom:1.1em;color:var(--ink-2);font-weight:300;font-size:.97rem}
.ledger-body p:last-child{margin-bottom:0}

/* ===== KEY RACK ===== */
.rack-wrap{background:var(--green);color:var(--paper);position:relative;overflow:hidden}
.rack-wrap::before{
  content:"";position:absolute;inset:0;opacity:.09;
  background:radial-gradient(circle at 18% 12%,var(--brass-2),transparent 42%),
             radial-gradient(circle at 82% 88%,var(--brass-2),transparent 44%);
}
.rack-wrap .wrap{position:relative;z-index:2}
.rack-wrap .mark{border-color:var(--rule-lt);color:var(--brass-2)}
.rack-wrap .mark .n{background:var(--brass);color:var(--green)}
.rack-wrap .mark .r{color:rgba(246,242,232,.5)}
.rack-wrap h2,.rack-wrap h3{color:var(--paper)}
.rack-wrap .lede{color:rgba(246,242,232,.72)}

.rack{margin-top:clamp(36px,5vw,60px);border-top:2px solid var(--brass);
  display:grid;grid-template-columns:repeat(7,1fr)}
.keyhook{position:relative;text-align:center;border-right:1px solid var(--rule-lt);transition:.45s var(--ease);display:block}
.keyhook:last-child{border-right:0}
.keyhook .hook{width:1px;height:28px;background:var(--brass);margin:0 auto;transition:.45s var(--ease)}
.keyhook .fob{
  width:clamp(46px,3.5vw,60px);height:clamp(46px,3.5vw,60px);border-radius:50%;margin:0 auto;
  border:2px solid rgba(246,242,232,.45);display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;letter-spacing:.02em;color:rgba(22,27,24,.7);transition:.45s var(--ease);
}
.keyhook .stem{width:2px;height:32px;background:var(--brass);margin:0 auto;opacity:.5;transition:.45s var(--ease)}
.keyhook .bit{width:16px;height:2px;background:var(--brass);margin:0 auto;opacity:.5;transition:.45s var(--ease)}
.keyhook .bit.b2{width:11px;margin-top:4px}
.keyhook .tag{margin-top:22px;padding:16px 8px 28px;border-top:1px solid var(--rule-lt)}
.keyhook .nm{font-size:clamp(.7rem,.78vw,.82rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;display:block}
.keyhook .fl{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,242,232,.48);margin-top:8px;display:block;font-weight:500}
.keyhook:hover{background:rgba(246,242,232,.05)}
.keyhook:hover .hook{height:13px}
.keyhook:hover .fob{transform:translateY(15px) scale(1.07);border-color:var(--brass-2);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.keyhook:hover .stem,.keyhook:hover .bit{transform:translateY(15px);opacity:1}
.rack-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(32px,4vw,52px)}

/* ===== AUTOPLAY MARQUEE GALLERY ===== */
.marquee{position:relative;overflow:hidden;padding:4px 0}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,140px);z-index:3;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.marquee.on-2::before{background:linear-gradient(90deg,var(--paper-2),transparent)}
.marquee.on-2::after{background:linear-gradient(270deg,var(--paper-2),transparent)}
.mq-track{display:flex;gap:16px;width:max-content;animation:mq 64s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track.rev{animation-direction:reverse;animation-duration:74s}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{
  position:relative;flex:0 0 auto;width:clamp(220px,23vw,330px);height:clamp(280px,30vw,420px);
  overflow:hidden;background:var(--ink);cursor:zoom-in;
}
.mq-item img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease);user-select:none;-webkit-user-drag:none}
.mq-item:hover img{transform:scale(1.07)}
.mq-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(10,16,12,.82));opacity:.55;transition:.45s}
.mq-item:hover::after{opacity:1}
.mq-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 16px 16px;color:var(--paper);
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transform:translateY(6px);opacity:.85;transition:.45s var(--ease);
}
.mq-item:hover .mq-cap{transform:none;opacity:1}
.mq-no{position:absolute;top:14px;left:14px;z-index:2;font-size:.6rem;font-weight:800;letter-spacing:.14em;
  color:var(--paper);background:rgba(22,27,24,.5);padding:5px 9px;backdrop-filter:blur(4px)}
.rail-hint,
.mq-hint{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  display:flex;align-items:center;gap:10px}
.rail-hint i,
.mq-hint i{width:32px;height:1px;background:var(--brass);display:block}

/* drag rails (gallery page) */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.rail{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:20px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--brass) var(--paper-3);cursor:grab}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-track{background:var(--paper-3)}
.rail::-webkit-scrollbar-thumb{background:var(--brass)}
.frame{position:relative;flex:0 0 auto;scroll-snap-align:start;width:clamp(230px,25vw,360px);background:var(--ink);overflow:hidden;cursor:zoom-in}
.frame.tall{height:clamp(320px,34vw,480px)}
.frame.wide{width:clamp(320px,38vw,540px);height:clamp(320px,34vw,480px)}
.frame img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease);user-select:none;-webkit-user-drag:none}
.frame:hover img{transform:scale(1.05)}
.frame .fno{position:absolute;top:12px;left:12px;z-index:2;font-size:.6rem;font-weight:800;letter-spacing:.14em;
  color:var(--paper);background:rgba(22,27,24,.5);padding:5px 9px;backdrop-filter:blur(4px)}
.frame .fcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 14px 14px;
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  background:linear-gradient(180deg,transparent,rgba(22,27,24,.85));opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.frame:hover .fcap{opacity:1;transform:none}

/* ===== THE JOURNEY — rebuilt, dark & graphic ===== */
.jrny{background:var(--green);color:var(--paper);position:relative;overflow:hidden}
.jrny::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background:url("assets/img/estate-corridor-night.jpg") center/cover;
}
.jrny::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--green) 0%,rgba(22,40,30,.86) 45%,var(--green) 100%)}
.jrny .wrap{position:relative;z-index:3}
.jrny .mark{border-color:var(--rule-lt);color:var(--brass-2)}
.jrny .mark .n{background:var(--brass);color:var(--green)}
.jrny .mark .r{color:rgba(246,242,232,.5)}
.jrny h2{color:var(--paper)}
.jrny .lede{color:rgba(246,242,232,.74)}

.route{position:relative;margin-top:clamp(44px,6vw,74px);display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.route::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:1px;
  background:repeating-linear-gradient(90deg,var(--brass-2) 0 7px,transparent 7px 15px);opacity:.55;
}
.stop{position:relative;padding:0 clamp(14px,2vw,30px);transition:.45s var(--ease)}
.stop:first-child{padding-left:0}
.stop:last-child{padding-right:0}
.dot{
  position:relative;z-index:2;width:53px;height:53px;border-radius:50%;
  background:var(--green);border:1px solid var(--brass-2);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--brass-2);
  transition:.45s var(--ease);
}
.stop:hover .dot{background:var(--brass);border-color:var(--brass);color:var(--green);transform:scale(1.1)}
.stop.arrived .dot{background:var(--brass);border-color:var(--brass);color:var(--green)}
.stop-body{padding-top:28px}
.stop .code{font-size:.62rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-2);display:block;margin-bottom:10px}
.stop h3{font-size:clamp(.98rem,1.15vw,1.15rem);margin-bottom:9px;color:var(--paper)}
.stop p{font-size:.83rem;color:rgba(246,242,232,.62);font-weight:300;max-width:32ch}
.stop .km{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-lt);
  font-size:clamp(1.5rem,2.3vw,2rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--paper);
}
.stop .km em{font-style:normal;font-size:.42em;font-weight:300;color:var(--brass-2);letter-spacing:0;margin-left:.25em}
.stop .km small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,242,232,.5);margin-top:12px;line-height:1.5}

.intl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:clamp(44px,5vw,72px);
  padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--rule-lt)}
.intl div{position:relative;padding-left:44px}
.intl .ico{position:absolute;left:0;top:2px;width:30px;height:30px;border:1px solid var(--brass-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--brass-2)}
.intl h4{margin-bottom:8px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2)}
.intl p{font-size:.88rem;color:rgba(246,242,232,.66);font-weight:300}
.intl.on-light{border-color:var(--rule)}
.intl.on-light .ico{border-color:var(--brass);color:var(--brass)}
.intl.on-light h4{color:var(--brass)}
.intl.on-light p{color:var(--ink-2)}

/* ===== COLLAGE ===== */
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:start}
.collage .c-a{grid-column:1/7;aspect-ratio:4/5;overflow:hidden}
.collage .c-b{grid-column:7/13;aspect-ratio:16/11;overflow:hidden;margin-top:clamp(30px,6vw,90px)}
.collage .c-c{grid-column:3/9;aspect-ratio:16/10;overflow:hidden;margin-top:-6%;z-index:2;border:10px solid var(--paper-2);box-shadow:var(--shadow)}
.collage img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.collage>div:hover img{transform:scale(1.04)}
.collage-note{grid-column:9/13;align-self:end;padding-bottom:10px}
.collage-note p{font-size:.92rem;color:var(--ink-2);font-weight:300}

.mledger{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);margin-top:clamp(28px,4vw,48px)}
.mledger h3{margin-bottom:6px;font-size:1rem;letter-spacing:.06em}
.mledger .mnote{font-size:.82rem;color:var(--ink-3);margin-bottom:18px;font-weight:300}
.mrow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px dotted var(--rule)}
.mrow b{font-weight:700;font-size:.97rem}
.mrow span{font-size:.82rem;color:var(--ink-3);text-align:right;max-width:52%;font-weight:300}

/* ===== SUITE ENTRIES ===== */
.entry{display:grid;grid-template-columns:auto 1.15fr 1.4fr;gap:clamp(18px,3vw,46px);align-items:center;
  padding:clamp(26px,3vw,46px) 0;border-bottom:1px solid var(--rule);transition:.4s var(--ease)}
.entry:first-of-type{border-top:1px solid var(--rule)}
.entry-key{text-align:center;width:clamp(56px,5vw,80px)}
.entry-key .fob{width:clamp(42px,3.5vw,54px);height:clamp(42px,3.5vw,54px);border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;
  color:rgba(22,27,24,.7);border:2px solid rgba(22,27,24,.12);transition:.4s var(--ease)}
.entry:hover .entry-key .fob{transform:scale(1.08)}
.entry-key .stem{width:2px;height:22px;background:var(--brass);margin:0 auto;opacity:.55}
.entry-key .bit{width:14px;height:2px;background:var(--brass);margin:0 auto;opacity:.55}
.entry-key .bit.b2{width:9px;margin-top:4px}
.entry-info .floor{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:700}
.entry-info h3{margin:.4em 0 .35em;font-size:clamp(1.05rem,1.4vw,1.35rem)}
.entry-info p{font-size:.92rem;color:var(--ink-2);font-weight:300;max-width:42ch}
.entry-info .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.entry-info .tags span{font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-2);border:1px solid var(--rule);padding:6px 11px}
.entry-fig{aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.entry-fig img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.entry:hover .entry-fig img{transform:scale(1.06)}

.aled{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.aled div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px;transition:.35s;position:relative}
.aled div::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--brass);transition:width .45s var(--ease)}
.aled div:hover::before{width:100%}
.aled div:hover{background:var(--paper)}
.aled h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}
.aled p{font-size:.82rem;color:var(--ink-3);font-weight:300}

/* ===== GALLERY SHEETS ===== */
.sheet{margin-bottom:clamp(40px,5vw,74px)}
.sheet-t{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:13px;margin-bottom:22px}
.sheet-t h3{font-size:clamp(.95rem,1.2vw,1.15rem)}
.sheet-t .ct{font-size:.66rem;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;font-weight:700}
.sheet-t .fill{flex:1;height:1px;background:var(--rule-2)}

.lb{position:fixed;inset:0;z-index:200;background:rgba(14,20,16,.97);display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:86vh;object-fit:contain;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.lb-close,.lb-nav{position:absolute;background:none;border:0;color:var(--paper);cursor:pointer;font-weight:300}
.lb-close{top:20px;right:26px;font-size:2.2rem;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);font-size:2.6rem;padding:0 20px;opacity:.6;transition:.3s}
.lb-nav:hover{opacity:1}
.lb-prev{left:6px}.lb-next{right:6px}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(246,242,232,.72);
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

/* ===== FORMS ===== */
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,74px);align-items:start}
.form-panel{background:var(--white);border:1px solid var(--rule);padding:clamp(26px,3vw,46px);box-shadow:var(--shadow)}
.form-panel h3{margin-bottom:7px;font-size:1.05rem}
.fnote{font-size:.84rem;color:var(--ink-3);margin-bottom:24px;font-weight:300}
.field{margin-bottom:16px}
.field label{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;font-family:var(--f);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:0;border-bottom:1px solid var(--rule);padding:.78em .2em;transition:.3s;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);background:var(--paper-2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-ok{display:none;margin-top:14px;font-size:.86rem;color:var(--green-3);font-weight:700}
.info-blk{padding:19px 0;border-bottom:1px solid var(--rule-2)}
.info-blk .l{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-bottom:7px}
.info-blk p{font-size:.94rem;color:var(--ink-2);font-weight:300}
.info-blk a{border-bottom:1px solid var(--rule);transition:.3s}
.info-blk a:hover{border-color:var(--brass);color:var(--brass)}
.map-frame{border:1px solid var(--rule);margin-top:24px}
.map-frame iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(.3) sepia(.14)}

/* ===== FOOTER ===== */
.foot{background:var(--green);color:rgba(246,242,232,.66);padding:clamp(54px,6vw,92px) 0 28px;font-size:.88rem;position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;opacity:.07;
  background:radial-gradient(circle at 88% 0%,var(--brass-2),transparent 45%)}
.foot .wrap{position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,50px)}
.foot-brand img{width:180px;height:auto;margin-bottom:18px;display:block}
.foot-brand p{max-width:34ch;font-weight:300}
.foot h5{color:var(--brass-2);font-size:.64rem;letter-spacing:.22em;margin-bottom:16px;text-transform:uppercase;font-weight:700}
.foot-col a,.foot-col p{display:block;padding:5px 0;font-weight:300;transition:.3s}
.foot-col a:hover{color:var(--paper)}
.foot-btm{margin-top:clamp(38px,4vw,60px);padding-top:22px;border-top:1px solid var(--rule-lt);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.73rem;letter-spacing:.05em}

[data-r]{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-r].in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}

/* ===== RESPONSIVE ===== */
@media(max-width:1180px){
  .rack{grid-template-columns:repeat(4,1fr)}
  .keyhook{border-bottom:1px solid var(--rule-lt)}
  .route{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .route::before{display:none}
  .aled{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .masthead{display:none}
  .mob-bar{display:flex}
  .ehero .wrap{grid-template-columns:1fr;padding-bottom:0}
  .ehero-copy{padding-bottom:38px}
  .ehero-fig{min-height:58vh;margin:0 calc(-1*var(--gut))}
  .ehero-fig .plate{display:none}
  .hindex .wrap{grid-template-columns:repeat(2,1fr)}
  .hindex a,.hindex a:not(:first-child){border-bottom:1px solid var(--rule);padding-left:0;padding-right:16px}
  .hindex a:nth-child(2n){border-right:0}
  .ledger{grid-template-columns:1fr}
  .ledger-side{border-right:0;border-bottom:1px solid var(--rule);padding-right:0;padding-bottom:20px}
  .collage{display:flex;flex-direction:column;gap:14px}
  .collage .c-b,.collage .c-c{margin-top:0;border:0;box-shadow:none}
  .collage-note{padding:0}
  .mledger{grid-template-columns:1fr}
  .entry{grid-template-columns:auto 1fr;gap:20px}
  .entry-fig{grid-column:1/3;aspect-ratio:16/9;margin-top:8px}
  .form-grid{grid-template-columns:1fr}
  .intl{grid-template-columns:1fr;gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .phead .wrap{grid-template-columns:1fr}
}
@media(max-width:620px){
  .mob-brand img{width:120px}
  .rack{grid-template-columns:repeat(2,1fr)}
  .route{grid-template-columns:1fr;gap:30px}
  .aled{grid-template-columns:1fr}
  .frow,.frow-3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .utility .u-r{display:none}
  .utility .wrap{justify-content:center}
  .frame,.frame.wide{width:78vw}
  .mq-item{width:66vw;height:82vw}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .mq-track,.ticker-track{animation:none!important}
  [data-r]{opacity:1;transform:none}
}

/* ============================================================
   HOMEPAGE v2 — cinematic card hero · a day in hours · suite index
   ============================================================ */

/* ---- hero: full-bleed image with an overlapping paper card ---- */
.chero{position:relative;background:var(--paper-2)}
.chero-media{position:relative;height:clamp(360px,56vh,600px);overflow:hidden}
.chero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:chz 16s var(--ease) forwards}
@keyframes chz{to{transform:scale(1)}}
.chero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,17,.34) 0%,transparent 38%,rgba(14,22,17,.28) 100%)}
.chero-stamp{
  position:absolute;top:clamp(18px,3vw,34px);left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;gap:16px;
  font-size:.62rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,242,232,.9);
}
.chero-card{
  position:relative;z-index:4;background:var(--paper);
  margin-top:clamp(-120px,-9vw,-70px);
  padding:clamp(30px,4vw,58px) clamp(26px,4vw,64px) clamp(30px,4vw,54px);
  max-width:1080px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:end;
}
.chero-card h1{margin-bottom:18px}
.chero-card h1 .lt{display:block;font-weight:300;color:var(--brass);font-size:.46em;margin-top:.55em;line-height:1.25;letter-spacing:-.005em}
.chero-card p{color:var(--ink-2);font-weight:300;font-size:clamp(.94rem,1vw,1.03rem);max-width:44ch}
.chero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.chero-side{border-left:1px solid var(--rule);padding-left:clamp(20px,2.4vw,34px)}
.chero-side dt{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:700;padding-top:14px}
.chero-side dd{font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding-bottom:14px;border-bottom:1px solid var(--rule-2)}
.chero-side dd:last-of-type{border-bottom:0}

/* ---- A DAY IN HOURS ---- */
.day{border-top:1px solid var(--rule)}
.day-row{
  display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,60px);
  align-items:center;padding:0;border-bottom:1px solid var(--rule);
  transition:.45s var(--ease);
}
.day-row:hover{background:var(--paper-2)}
.day-hour{
  font-size:clamp(1.35rem,2.4vw,2.1rem);font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--brass);width:clamp(72px,7vw,116px);
}
.day-hour small{display:block;font-size:.4em;font-weight:700;letter-spacing:.2em;color:var(--ink-3);margin-top:9px;text-transform:uppercase}
.day-copy{padding:clamp(18px,2.2vw,30px) 0}
.day-copy h3{margin-bottom:9px}
.day-copy p{font-size:.92rem;color:var(--ink-2);font-weight:300;max-width:40ch}
.day-fig{aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.day-fig img{width:100%;height:100%;object-fit:cover;transition:1.2s var(--ease)}
.day-row:hover .day-fig img{transform:scale(1.06)}
.day-row:nth-child(even) .day-fig{order:-1}
.day-row:nth-child(even) .day-copy{order:1}

/* ---- SUITE INDEX (hover swaps the preview) ---- */
.sidx{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start}
.sidx-sec h2{font-size:clamp(1.25rem,2vw,1.75rem)}
.sidx-list{border-top:1px solid var(--rule-lt)}
.sidx-row{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(12px,1.8vw,26px);align-items:center;
  padding:clamp(11px,1.25vw,16px) 0;border-bottom:1px solid var(--rule-lt);
  transition:.4s var(--ease);cursor:pointer;
}
.sidx-row .rn{font-size:.58rem;font-weight:700;letter-spacing:.14em;color:rgba(246,242,232,.4);width:18px}
.sidx-row .sw{width:20px;height:20px;border-radius:50%;border:1px solid rgba(246,242,232,.28);transition:.4s var(--ease)}
.sidx-row .nm{font-size:clamp(.82rem,.95vw,.98rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--paper);transition:.4s var(--ease)}
.sidx-row .fl{font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,242,232,.4)}
.sidx-row:hover,.sidx-row.on{padding-left:14px}
.sidx-row:hover .sw,.sidx-row.on .sw{transform:scale(1.25);border-color:var(--brass-2)}
.sidx-row:hover .nm,.sidx-row.on .nm{color:var(--brass-2)}
.sidx-prev{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--green-3);border:1px solid var(--rule-lt)}
.sidx-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.sidx-prev img.on{opacity:1}
.sidx-prev .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:24px 18px 16px;color:var(--paper);
  background:linear-gradient(180deg,transparent,rgba(10,16,12,.85));
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.sidx-thumb{display:none}

/* ---- guest note ---- */
.note-band{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.note-band blockquote{
  font-size:clamp(1.1rem,1.9vw,1.65rem);font-weight:300;line-height:1.45;letter-spacing:-.015em;
  color:var(--ink);max-width:30ch;margin:0 auto;text-align:center;
}
.note-band blockquote b{font-weight:700;color:var(--brass)}
.note-band cite{display:block;margin-top:22px;font-size:.64rem;font-style:normal;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);text-align:center}

@media(max-width:960px){
  .chero-card{grid-template-columns:1fr;margin-top:-56px;padding:28px 24px 30px}
  .chero-side{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:14px}
  .chero-stamp{display:none}
  .day-row{grid-template-columns:1fr;gap:0}
  .day-copy{padding:20px 0}
  .day-fig{aspect-ratio:16/9}
  .day-row:nth-child(even) .day-fig{order:0}
  .day-row:nth-child(even) .day-copy{order:0}
  .sidx{grid-template-columns:1fr}
  .sidx-prev{display:none}
  .sidx-thumb{display:block;width:54px;height:54px;object-fit:cover;flex:0 0 auto}
  .sidx-row{grid-template-columns:auto auto 1fr auto}
}
@media(max-width:620px){
  
  .sidx-row .fl{display:none}
}


/* ============================================================
   NAV CTA — buttons inside nav must keep their own colours.
   (.mast-nav a / .mob-menu a were out-specifying .btn-brass)
   ============================================================ */
.mast-nav a.btn,
.mob-menu a.btn{border-bottom:0}
.mast-nav a.btn::after,
.mob-menu a.btn::after{display:none}

.mast-nav a.btn-brass,
.mast-nav a.btn-brass:hover,
.mast-nav a.btn-brass:visited,
.mob-menu a.btn-brass,
.mob-menu a.btn-brass:hover{color:#fff}

.mast-nav a.btn-brass span,
.mob-menu a.btn-brass span{color:#fff}

/* the header "Book a Stay" button */
.nav-cta{
  padding:.95em 2.5em;
  font-size:.67rem;
  letter-spacing:.2em;
  font-weight:700;
  background:var(--brass);
  border:1px solid var(--brass);
  box-shadow:0 10px 22px -12px rgba(154,118,53,.85);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease);
}
.nav-cta::before{background:var(--green)}
.nav-cta:hover{
  border-color:var(--green);
  box-shadow:0 14px 26px -12px rgba(22,40,30,.6);
  transform:translateY(-1px);
}
.nav-cta:active{transform:translateY(0)}

/* mobile menu CTA */
.mob-menu a.btn-brass{
  padding:1.05em 1.8em;letter-spacing:.2em;font-size:.72rem;
  border:1px solid var(--brass);text-transform:uppercase;
}


/* ---- button padding & optical centring (order matters: generic first) ---- */
.btn{padding:1.2em 2.4em}

/* letter-spacing adds a trailing gap after the last character, pulling the
   label visually left. Cancel it on the inner span so text sits dead centre. */
.btn span{margin-right:-.18em}

/* header CTA — roomier still, and wins over the generic .btn above */
a.nav-cta{padding:.95em 2.6em}
a.nav-cta span{margin-right:-.2em}
.mob-menu a.btn-brass{padding:1.05em 2.2em}

/* ============================================================
   DARK HOUSE — corrections for components that assumed a light page
   ============================================================ */

/* grain is far more visible on dark */
body::after{opacity:.025}

/* ticker: keep it dark, don't flash a bright bar across the page */
.ticker{background:var(--green);color:var(--ink);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.ticker span{opacity:.7}

/* image placeholders were var(--ink) = now light */
.frame,.mq-item,.entry-fig,.day-fig,.sidx-prev,.chero-media{background:var(--green)}

/* masthead sits on the base colour */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.mob-bar{background:var(--paper);border-bottom:1px solid var(--rule)}
.burger span{background:var(--ink)}

/* buttons: light outline on dark */
.btn{border-color:var(--ink);color:var(--ink)}
.btn::before{background:var(--ink)}
.btn:hover{color:var(--paper)}
.btn-fill{background:var(--brass);border-color:var(--brass);color:#16241c}
.btn-fill::before{background:var(--ink)}
.btn-fill:hover{color:var(--paper);border-color:var(--ink)}
.btn-fill:hover::before{background:var(--green)}

/* forms on dark */
.form-panel{background:var(--panel);border:1px solid var(--rule);box-shadow:var(--shadow)}
.field input,.field select,.field textarea{background:var(--field);color:var(--ink);border-bottom:1px solid var(--rule)}
.field input::placeholder,.field textarea::placeholder{color:rgba(243,238,226,.34)}
.field input:focus,.field select:focus,.field textarea:focus{background:#1d2f25;border-color:var(--brass-2)}
.field select option{background:#213529;color:var(--ink)}
.form-ok{color:var(--brass-2)}

/* map: soften the bright embed so it sits in the page */
.map-frame{border-color:var(--rule)}
.map-frame iframe{filter:grayscale(.4) brightness(.82) contrast(1.05) sepia(.15)}

/* keys / fobs keep dark glyphs on their pastel discs — only the rings flip */
.entry-key .fob{border-color:var(--rule)}
.aled div:hover{background:var(--paper-3)}
.day-row:hover{background:var(--paper-3)}
.hindex a:hover{background:var(--paper-3)}

/* deep bands need to read against the base, not blend into it */
.rack-wrap,.jrny,.foot{background:var(--green)}
.note-band{background:var(--paper-2);border-color:var(--rule)}
.collage .c-c{border:10px solid var(--paper)}

/* dotted menu rules were tuned for light paper */
.mrow{border-bottom:1px dotted var(--rule)}
.entry-info .tags span{border-color:var(--rule);color:var(--ink-2)}
.info-blk a{border-bottom-color:var(--rule)}

/* section marks */
.mark .n{background:var(--brass);color:#16241c}
.dropcap::first-letter{color:var(--brass-2)}

/* header CTA */
.nav-cta{background:var(--brass);border-color:var(--brass);color:#16241c;box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.mast-nav a.btn-brass,.mast-nav a.btn-brass span,
.mob-menu a.btn-brass,.mob-menu a.btn-brass span{color:#16241c}
.nav-cta::before{background:var(--ink)}
.nav-cta:hover,.nav-cta:hover span{color:var(--paper)}
.nav-cta:hover{border-color:var(--ink)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:#16241c}
.btn-brass span{color:#16241c}
.btn-brass::before{background:var(--ink)}
.btn-brass:hover,.btn-brass:hover span{color:var(--paper)}
.btn-brass:hover{border-color:var(--ink)}

/* ============================================================
   HERO SLIDER — cross-fade + slow ken-burns drift
   ============================================================ */
.chero-media{position:relative;overflow:hidden}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease);will-change:opacity}
.hslide.on{opacity:1}
.hslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hslide.on img{animation:kenburns 8s linear forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.hslide:nth-child(even).on img{animation-name:kenburns-alt}
@keyframes kenburns-alt{from{transform:scale(1.14) translateX(1.5%)}to{transform:scale(1.02) translateX(-1.5%)}}

.chero-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,32,25,.5) 0%,rgba(18,32,25,.05) 34%,rgba(27,44,34,.55) 78%,var(--paper) 100%)}

/* dots */
.hdots{position:absolute;left:0;right:0;bottom:clamp(22px,4vw,40px);z-index:5;
  display:none;justify-content:center;gap:10px}
.hdot{width:34px;height:2px;background:rgba(243,238,226,.3);border:0;padding:0;cursor:pointer;
  position:relative;overflow:hidden;transition:.4s var(--ease)}
.hdot::after{content:"";position:absolute;inset:0;background:var(--brass-2);transform:scaleX(0);transform-origin:left}
.hdot.on::after{animation:dotfill 7s linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}
.hdot:hover{background:rgba(243,238,226,.55)}

/* caption that changes with the slide */
.hcap{position:absolute;left:0;right:0;bottom:clamp(50px,7vw,74px);z-index:5;text-align:center; display:none;
  font-size:.64rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(243,238,226,.85);transition:opacity .5s var(--ease)}
.hcap.fade{opacity:0}

@media(prefers-reduced-motion:reduce){
  .hslide.on img{animation:none}
  .hdot.on::after{transform:scaleX(1);animation:none}
}
@media(max-width:620px){
  .hdots{bottom:16px}
  .hcap{display:none}
}

/* nav buttons: the earlier .mast-nav/.mob-menu rules out-specify the dark
   theme on :hover, which would leave white text on the light wipe. */
.mast-nav a.btn-brass,
.mast-nav a.btn-brass span,
.mob-menu a.btn-brass,
.mob-menu a.btn-brass span{color:#16241c}
.mast-nav a.btn-brass:hover,
.mast-nav a.btn-brass:hover span,
.mob-menu a.btn-brass:hover,
.mob-menu a.btn-brass:hover span{color:var(--paper)}

/* ============================================================
   CONTRAST FIX — these rules used var(--paper) as *light text*.
   After the dark flip --paper is the background, so they rendered
   dark-on-dark. Repointed to var(--ink), which is now the light ink.
   ============================================================ */
.rack-wrap,
.rack-wrap h2,
.rack-wrap h3,
.rack-wrap .lede,
.jrny,
.jrny h2,
.stop h3,
.stop .km,
.sidx-row .nm,
.sidx-prev .cap,
.keyhook .nm,
.mob-menu a,
.frame .fcap,
.mq-cap,
.mq-no,
.frame .fno,
.lb-close,
.lb-nav,
.foot-col a:hover,
.ticker{color:var(--ink)}

.rack-wrap .lede,.jrny .lede{color:var(--ink-2)}
.stop p{color:var(--ink-3)}
.keyhook .fl,.sidx-row .fl,.sidx-row .rn{color:var(--ink-3)}

/* ghost/outline button on dark bands */
.btn-lt{border-color:var(--rule-lt);color:var(--ink)}
.btn-lt::before{background:var(--ink)}
.btn-lt:hover,.btn-lt:hover span{color:var(--green)}
.btn-lt:hover{border-color:var(--ink)}

/* the suite index: inactive rows must still read clearly */
.sidx-row .nm{color:var(--ink);opacity:.82}
.sidx-row:hover .nm,.sidx-row.on .nm{color:var(--brass-2);opacity:1}
.sidx-row{border-bottom:1px solid var(--rule-2)}
.sidx-list{border-top:1px solid var(--rule-2)}

/* footer body text */
.foot,.foot-col a,.foot-col p,.foot-brand p{color:var(--ink-2)}
.foot-col a:hover{color:var(--ink)}

/* gallery sheet headings */
.sheet-t h3{color:var(--ink)}
.sheet-t .ct{color:var(--ink-3)}

/* rails must not bleed past the container edge */
.rail{padding-right:2px}
.sheet .rail,.marquee{max-width:100%}

/* ============================================================
   HERO — taller, and driven by the three supplied plates
   ============================================================ */
.chero-media{height:clamp(460px,74vh,800px)}
.chero-card{margin-top:clamp(-130px,-8vw,-64px)}
@media(max-width:960px){
  .chero-media{height:clamp(380px,58vh,560px)}
}

/* ============================================================
   PAGE MASTHEADS — replaces the flat title band on inner pages.
   Oversized outline watermark + image bleeding off the right edge.
   ============================================================ */
.phead{
  position:relative;overflow:hidden;border-bottom:0;background:var(--paper);
  min-height:clamp(300px,44vh,470px);display:flex;align-items:center;
}
.phead .wrap{display:block;padding-top:0;padding-bottom:0;width:100%}

/* image bleeds off the right, dissolving into the page */
.phead-media{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:1}
.phead-media img{width:100%;height:100%;object-fit:cover}
.phead-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 12%,rgba(27,44,34,.78) 36%,rgba(27,44,34,.14) 74%,rgba(27,44,34,.46) 100%);
}
.phead-media::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(27,44,34,.55),transparent 30%,transparent 70%,rgba(27,44,34,.55));
}

/* oversized outline watermark */
.phead-ghost{
  position:relative;z-index:2;display:block;margin-left:-.055em;
  font-size:clamp(5rem,15vw,13rem);font-weight:800;letter-spacing:-.05em;line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(243,238,226,.16);
  white-space:nowrap;pointer-events:none;user-select:none;text-transform:uppercase;
}

.phead-body{position:relative;z-index:4;max-width:min(52%,620px);padding:clamp(40px,6vw,74px) 0}
.phead-idx{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;
  font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-2);
}
.phead-idx::before{content:"";width:38px;height:1px;background:var(--brass)}
.phead h1{margin-bottom:16px;color:var(--ink)}
.phead-sub{
  font-size:clamp(.9rem,1.05vw,1.05rem);font-weight:300;color:var(--ink-2);max-width:34ch;line-height:1.6;
}

@media(max-width:900px){
  .phead{min-height:auto}
  .phead-media{width:100%;opacity:.3}
  .phead-media::after{background:linear-gradient(180deg,rgba(27,44,34,.55),rgba(27,44,34,.85))}
  .phead-body{max-width:100%;padding:clamp(46px,10vw,70px) 0 clamp(52px,10vw,72px)}
  .phead-ghost{font-size:clamp(4rem,22vw,8rem);opacity:.7}
  }

/* ============================================================
   FEWER LINES — the section mark no longer draws a full rule
   ============================================================ */
.mark{border-bottom:0;padding-bottom:0;margin-bottom:clamp(24px,3.4vw,44px)}
.mark .fill{display:none}
.mark .r{margin-left:auto}
.sheet-t{border-bottom:0;padding-bottom:8px}
.sheet-t .fill{display:none}
.sheet-t .ct{margin-left:auto}
.rail-head{margin-bottom:22px}


/* ============================================================
   PULL-QUOTE BAND — was a cramped strip between two hairlines.
   Now a full-bleed atmospheric moment with real breathing room.
   ============================================================ */
.note-band{
  position:relative;overflow:hidden;border:0;
  background:var(--green);
  padding:clamp(92px,13vw,190px) 0;
  text-align:center;
}
.note-band-media{position:absolute;inset:0;z-index:0}
.note-band-media img{width:100%;height:100%;object-fit:cover;opacity:.26;
  transform:scale(1.04);animation:noteZoom 26s var(--ease) forwards}
@keyframes noteZoom{to{transform:scale(1)}}
.note-band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(18,32,25,.42) 0%,rgba(18,32,25,.9) 72%);
}
.note-band .wrap{position:relative;z-index:3}

/* oversized opening quotation glyph */
.note-mark{
  display:block;font-size:clamp(4.5rem,9vw,8rem);line-height:.7;font-weight:800;
  color:var(--brass);opacity:.42;margin-bottom:clamp(4px,1vw,10px);user-select:none;
}
.note-band blockquote{
  font-size:clamp(1.2rem,2.5vw,2.15rem);font-weight:300;line-height:1.42;letter-spacing:-.02em;
  color:var(--ink);max-width:24ch;margin:0 auto;text-align:center;
}
.note-band blockquote b{font-weight:600;color:var(--brass-2)}
.note-band cite{
  display:inline-flex;align-items:center;gap:14px;margin-top:clamp(26px,3.4vw,40px);
  font-size:.62rem;font-style:normal;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);
}
.note-band cite::before,.note-band cite::after{content:"";width:30px;height:1px;background:var(--brass);opacity:.6}

/* ============================================================
   MASTHEAD (desktop) — the outline word is now the title and sits
   inside .wrap, so its left edge lines up with the logo, the nav
   and every other content block on the page. No animation.
   Scoped to min-width so the mobile rules above are untouched.
   ============================================================ */
@media(min-width:901px){
  .phead{min-height:clamp(270px,36vh,410px)}
  .phead .wrap{
    padding-top:clamp(34px,4.5vw,58px);
    padding-bottom:clamp(34px,4.5vw,58px);
  }
  .phead-ghost{-webkit-text-stroke:1px rgba(243,238,226,.19)}
}