/* ==========================================================================
   KINETIC TYPOGRAPHY — the shared design system
   Extracted from style-3-kinetic.html (Mynnt) and chapter-kinetic.html
   (The Chapter Hotel), which proved the language is portable.

   HOW A PAGE WEARS A BRAND
   Redeclare the thirteen contract variables on :root. Nothing else.
     --ink --ink-deep --paper --accent --accent-hi --accent-lo --support
     --font-display --font-body --font-label --font-accent --radius --ease

   RULES HELD THROUGHOUT THIS FILE
     - every animation carries an explicit duration
     - every animated element is visible in its un-animated default state
     - reduced motion stops infinite animations outright, never shortens them
     - no animation-timeline, no scroll() — all scroll coupling is rAF in JS
     - the mobile floors (11px type, 44px targets) live here, not on the page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · THE CONTRACT — Mynnt is the default set
   -------------------------------------------------------------------------- */
:root{
  --ink:#2B2B2B;
  --ink-deep:#1C1B19;
  --paper:#F5F1E8;
  --accent:#B4894E;
  --accent-hi:#E8C784;
  --accent-lo:#8A6636;
  --support:#23372E;

  --font-display:'Montserrat',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-label:'Jost',system-ui,-apple-system,sans-serif;
  --font-accent:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------------------------
   2 · TUNING (optional) — only for brands whose display face needs a
   different weight, tracking or case. Leave alone otherwise.
   -------------------------------------------------------------------------- */
:root{
  --kx-display-weight:700;
  --kx-display-track:-.04em;
  --kx-display-case:uppercase;
  --kx-body-weight:300;
  --kx-gut:clamp(18px,5vw,72px);
}

/* --------------------------------------------------------------------------
   3 · DERIVED — computed from the contract. Never set these per brand.
   Solid fallbacks first; color-mix refines them where supported.
   -------------------------------------------------------------------------- */
:root{
  --kx-rule:var(--accent);
  --kx-rule-soft:var(--accent);
  --kx-rule-ink:var(--ink);
  --kx-paper-soft:var(--paper);
  --kx-paper-dim:var(--paper);
  --kx-ink-soft:var(--ink);
  --kx-scrim:var(--ink-deep);
  --kx-scrim-soft:var(--ink-deep);
  --kx-accent-soft:var(--accent);
  --kx-shadow:0 24px 60px rgba(0,0,0,.42);

  --kx-progress:0;
  --kx-mshift:0px;
}
@supports (color:color-mix(in srgb,red 50%,white)){
  :root{
    --kx-rule:color-mix(in srgb,var(--accent) 32%,transparent);
    --kx-rule-soft:color-mix(in srgb,var(--accent) 16%,transparent);
    --kx-rule-ink:color-mix(in srgb,var(--ink) 20%,transparent);
    --kx-paper-soft:color-mix(in srgb,var(--paper) 82%,transparent);
    --kx-paper-dim:color-mix(in srgb,var(--paper) 60%,transparent);
    --kx-ink-soft:color-mix(in srgb,var(--ink) 78%,transparent);
    --kx-scrim:color-mix(in srgb,var(--ink-deep) 90%,transparent);
    --kx-scrim-soft:color-mix(in srgb,var(--ink-deep) 34%,transparent);
    --kx-accent-soft:color-mix(in srgb,var(--accent) 72%,transparent);
  }
}

/* --------------------------------------------------------------------------
   4 · BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink-deep);
  color:var(--paper);
  font-family:var(--font-body);
  font-weight:var(--kx-body-weight);
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,dt{margin:0;padding:0}
ul,ol{list-style:none}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-hi);
  outline-offset:5px;
  border-radius:var(--radius);
}

/* --------------------------------------------------------------------------
   5 · kx-label — tracked caps
   -------------------------------------------------------------------------- */
.kx-label{
  font-family:var(--font-label);
  font-weight:400;
  font-size:clamp(11px,.78vw,12.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--kx-on-accent);
  line-height:1.5;
}
.kx-label--dim{color:var(--kx-on-accent)}
.kx-label--lo{color:var(--accent-lo)}
.kx-label--wide{letter-spacing:.32em}

/* shared type helpers */
.kx-huge{
  font-family:var(--font-display);
  font-weight:var(--kx-display-weight);
  letter-spacing:var(--kx-display-track);
  text-transform:var(--kx-display-case);
  line-height:.9;
}
.kx-em,
.kx-mask em,
.kx-huge em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:-.01em;
  color:var(--kx-on-accent);
}
.kx-lead{font-size:clamp(17px,1.4vw,23px);line-height:1.5}
.kx-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.kx-section{padding:clamp(58px,9vw,128px) var(--kx-gut)}
/* Which ground am I on?
   This stylesheet was written for the dark ground, so every component named
   a colour that only reads on ink. .kx-on-paper then flipped the background
   and left the text alone — which is how a button ended up at 1.4:1 and a
   quiet button at 1.0:1, the same colour as the paper behind it.

   These three tokens carry "the right ink for the ground I am on". Custom
   properties inherit, so anything placed inside a paper section resolves
   them correctly without a rule of its own, and a component added next year
   is right by default. .kx-on-ink flips them back for a dark panel nested
   inside a paper section. */
:root{
  --kx-on-accent:var(--accent-hi);   /* accent text: headings, labels, links */
  --kx-on-body:var(--kx-paper-soft); /* secondary prose                      */
  --kx-on-solid:var(--paper);        /* the strongest text on this ground    */
  --kx-rule-firm:var(--ink);         /* a border you must be able to see     */
}
.kx-on-paper{
  background:var(--paper);color:var(--ink);
  --kx-on-accent:var(--accent-lo);
  --kx-on-body:var(--kx-ink-soft);
  --kx-on-solid:var(--ink);
  --kx-rule-firm:var(--accent-lo);
}
.kx-on-ink{
  --kx-on-accent:var(--accent-hi);
  --kx-on-body:var(--kx-paper-soft);
  --kx-on-solid:var(--paper);
  --kx-rule-firm:var(--accent);
}
@supports (color:color-mix(in srgb,red 50%,white)){
  .kx-on-paper{--kx-rule-firm:color-mix(in srgb,var(--ink) 52%,transparent)}
}
.kx-chip{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-label);font-size:clamp(11px,.78vw,12px);
  letter-spacing:.18em;text-transform:uppercase;
  /* chips sit on either ground, so this must follow the ground. */
  color:var(--kx-on-accent);border:1px solid var(--kx-rule);
  padding:6px 12px;border-radius:var(--radius);
}

/* --------------------------------------------------------------------------
   6 · kx-reveal — content is visible by default. JS hides, then reveals.
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:1;transform:none}
html.kx-js [data-reveal]{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
html.kx-js [data-reveal].kx-in{opacity:1;transform:none}
html.kx-js [data-reveal][data-d="1"]{transition-delay:.09s}
html.kx-js [data-reveal][data-d="2"]{transition-delay:.18s}
html.kx-js [data-reveal][data-d="3"]{transition-delay:.27s}
html.kx-js [data-reveal][data-d="4"]{transition-delay:.36s}
html.kx-js [data-reveal][data-d="5"]{transition-delay:.45s}

/* A container whose CHILDREN carry the motion stays fully opaque itself.
   A container at opacity:0 with nothing animating it hides everything inside. */
[data-reveal-group],
html.kx-js [data-reveal-group]{opacity:1;transform:none;transition:none;animation:none}

/* FAILSAFE — forced by JS. !important, because the animating rules that these
   override are more specific and would otherwise silently win. */
.kx-shown,
html.kx-js .kx-shown,
html.kx-js [data-reveal].kx-shown,
html.kx-js .kx-shown .kx-ln > i,
html.kx-js .kx-shown > span > b,
html.kx-js .kx-shown b{
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
  animation:none !important;
  transition:none !important;
}

/* --------------------------------------------------------------------------
   7 · kx-progress
   -------------------------------------------------------------------------- */
.kx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:var(--kx-rule-soft);
}
.kx-progress__bar{
  height:100%;transform-origin:0 50%;
  transform:scaleX(var(--kx-progress,0));
  background:var(--accent);
}

/* --------------------------------------------------------------------------
   8 · kx-ticker
   -------------------------------------------------------------------------- */
.kx-ticker{
  position:fixed;left:var(--kx-gut);bottom:16px;z-index:70;
  display:flex;align-items:baseline;gap:11px;
  padding:8px 14px 9px;
  background:var(--kx-scrim);
  border:1px solid var(--kx-rule);
  border-radius:var(--radius);
}
.kx-ticker__k{
  font-family:var(--font-label);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--kx-on-accent);
}
.kx-ticker__n{
  font-family:var(--font-display);font-weight:var(--kx-display-weight);
  font-size:clamp(20px,2vw,28px);line-height:1;color:var(--kx-on-accent);
  font-variant-numeric:tabular-nums;
}
.kx-ticker__n.kx-flip{animation:kx-flip .5s cubic-bezier(.3,.9,.2,1) both}
@keyframes kx-flip{
  0%{transform:rotateX(-86deg) translateY(-22%);opacity:.15}
  100%{transform:rotateX(0) translateY(0);opacity:1}
}
.kx-ticker__t{
  font-family:var(--font-label);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--kx-paper-dim);
}
@media (max-width:600px){.kx-ticker{display:none}}

/* --------------------------------------------------------------------------
   9 · kx-nav
   -------------------------------------------------------------------------- */
.kx-nav{
  position:fixed;inset:0 0 auto 0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px var(--kx-gut);
  background:linear-gradient(to bottom,var(--kx-scrim),transparent);
  pointer-events:none;
}
.kx-nav > *{pointer-events:auto}
.kx-nav__brand{display:flex;align-items:center;gap:12px;min-height:44px}
.kx-nav__name{
  font-family:var(--font-display);font-weight:var(--kx-display-weight);
  font-size:clamp(15px,1.3vw,21px);letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);line-height:1;
}
.kx-nav__rule{width:1px;height:22px;background:var(--kx-rule)}
.kx-nav__mark{
  width:clamp(26px,3vw,44px);height:clamp(18px,2.1vw,30px);flex:0 0 auto;
  background:var(--accent);
  -webkit-mask:var(--kx-mark) no-repeat center/contain;
  mask:var(--kx-mark) no-repeat center/contain;
}
.kx-nav__wordmark{
  font-family:var(--font-label);font-weight:500;
  font-size:11px;letter-spacing:.22em;color:var(--kx-on-accent);line-height:1;
}
.kx-nav__links{display:flex;gap:clamp(12px,1.7vw,26px);flex-wrap:nowrap;justify-content:flex-end}
.kx-nav__links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-label);font-size:clamp(11px,.76vw,12px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--kx-on-body);
  border-bottom:1px solid transparent;
  transition:color .35s ease,border-color .35s ease;
}
.kx-nav__links a:hover{color:var(--kx-on-accent);border-color:var(--accent)}
@media (max-width:900px){.kx-nav__links a:nth-child(n+3){display:none}}
@media (max-width:520px){.kx-nav__brand .kx-nav__rule,.kx-nav__wordmark{display:none}}

/* --------------------------------------------------------------------------
   10 · kx-hero
   -------------------------------------------------------------------------- */
.kx-hero{
  position:relative;min-height:100svh;overflow:hidden;background:var(--ink-deep);
  padding:clamp(96px,13vh,168px) var(--kx-gut) clamp(78px,10vh,110px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.kx-hero__bg{position:absolute;inset:0;z-index:0}
.kx-hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  filter:saturate(.5) contrast(1.12) brightness(.6) sepia(.2);
}
.kx-hero__bg::before{
  content:"";position:absolute;inset:0;
  background:var(--accent);mix-blend-mode:color;opacity:.34;
}
.kx-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--kx-scrim) 0%,var(--kx-scrim-soft) 34%,var(--kx-scrim) 100%);
}
html.kx-js .kx-hero__bg{clip-path:inset(0 0 0 0)}
html.kx-js:not(.kx-reduce) .kx-hero__bg{animation:kx-curtain 1.35s cubic-bezier(.16,.9,.2,1) .04s both}
@keyframes kx-curtain{
  from{clip-path:inset(0 0 100% 0);transform:scale(1.1)}
  to{clip-path:inset(0 0 0 0);transform:scale(1)}
}
.kx-hero__kick{
  position:relative;z-index:2;display:flex;gap:clamp(12px,2.2vw,30px);
  flex-wrap:wrap;margin-bottom:clamp(20px,3vh,36px);
}
.kx-hero__kick span{position:relative;padding-left:15px}
.kx-hero__kick span::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent);
}
.kx-hero__foot{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,4vw,64px);align-items:end;
  border-top:1px solid var(--kx-rule);padding-top:clamp(16px,2.4vh,26px);
}
.kx-hero__sub{max-width:52ch;color:var(--kx-on-body);font-size:clamp(15px,1.2vw,20px)}
.kx-hero__scroll{display:flex;align-items:center;gap:12px;white-space:nowrap}
.kx-hero__scroll .bar{
  display:block;width:56px;height:1px;background:var(--kx-rule);position:relative;overflow:hidden;
}
.kx-hero__scroll .bar::after{
  content:"";position:absolute;inset:0;background:var(--accent-hi);
  transform:translateX(-100%);
  animation:kx-swipe 2.5s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes kx-swipe{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
@media (max-width:760px){
  .kx-hero__foot{grid-template-columns:1fr}
  .kx-hero__scroll{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   11 · kx-mask + kx-ln — oversized display type rising out of a mask
   -------------------------------------------------------------------------- */
.kx-mask{
  position:relative;z-index:2;
  font-family:var(--font-display);
  font-weight:var(--kx-display-weight);
  font-size:clamp(2.2rem,10.4vw,11rem);
  line-height:.9;letter-spacing:var(--kx-display-track);
  text-transform:var(--kx-display-case);
  margin-bottom:clamp(22px,3.4vh,44px);
}
.kx-ln{display:block;overflow:hidden;padding-bottom:.08em}
.kx-ln > i{display:block;font-style:normal;transform:translateY(0)}
html.kx-js:not(.kx-reduce) .kx-ln > i{animation:kx-rise 1.05s cubic-bezier(.16,.86,.24,1) both}
html.kx-js:not(.kx-reduce) .kx-ln:nth-child(1) > i{animation-delay:.28s}
html.kx-js:not(.kx-reduce) .kx-ln:nth-child(2) > i{animation-delay:.42s}
html.kx-js:not(.kx-reduce) .kx-ln:nth-child(3) > i{animation-delay:.56s}
html.kx-js:not(.kx-reduce) .kx-ln:nth-child(4) > i{animation-delay:.70s}
@keyframes kx-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
/* once the hero entrance has certainly finished, unbind it so nothing can be
   left holding a keyframe's start state */
html.kx-settled .kx-hero .kx-ln > i{animation:none !important;transform:none !important;opacity:1 !important}
.kx-ln em{font-size:1.08em;padding-right:.03em}

/* the same mask used as a centred statement further down the page: it waits
   for its own reveal instead of firing on load */
.kx-mask--centre{display:grid;justify-items:center;text-align:center;margin-bottom:0}
.kx-mask--centre .kx-ln > i{font-weight:inherit}
html.kx-js:not(.kx-reduce) .kx-mask--centre .kx-ln > i{animation:none;transform:translateY(108%)}
html.kx-js:not(.kx-reduce) .kx-mask--centre.kx-in .kx-ln > i{
  transform:translateY(0);
  animation:kx-rise .95s cubic-bezier(.16,.86,.24,1) both;
}
html.kx-js:not(.kx-reduce) .kx-mask--centre.kx-in .kx-ln:nth-child(2) > i{animation-delay:.13s}
html.kx-js:not(.kx-reduce) .kx-mask--centre.kx-in .kx-ln:nth-child(3) > i{animation-delay:.26s}

/* --------------------------------------------------------------------------
   12 · kx-marquee
   -------------------------------------------------------------------------- */
.kx-marquee{
  position:relative;overflow:hidden;
  padding:clamp(12px,2vw,24px) 0;
  border-top:1px solid var(--kx-rule);border-bottom:1px solid var(--kx-rule);
  background:var(--ink);
}
.kx-marquee--deep{background:var(--ink-deep)}
.kx-marquee--paper{background:var(--paper)}
.kx-marquee--accent{background:var(--accent)}       /* a FILLED accent field */
.kx-marquee--support{background:var(--support)}
.kx-marquee__shift{transform:translate3d(var(--kx-mshift),0,0);will-change:transform}
.kx-marquee__shift--neg{transform:translate3d(calc(var(--kx-mshift) * -1),0,0)}
.kx-marquee__set{display:flex;width:max-content}
.kx-marquee__run{
  display:flex;flex:0 0 auto;align-items:center;
  gap:clamp(20px,3vw,52px);padding-right:clamp(20px,3vw,52px);
  animation:kx-mq-left 34s linear infinite;
}
.kx-marquee--fast .kx-marquee__run{animation-duration:21s}
.kx-marquee--slow .kx-marquee__run{animation-duration:48s}
.kx-marquee--rev .kx-marquee__run{animation-name:kx-mq-right;animation-duration:44s}
@keyframes kx-mq-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@keyframes kx-mq-right{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
.kx-marquee b,.kx-marquee i{
  font-size:clamp(1.5rem,5.4vw,4.6rem);line-height:1.12;white-space:nowrap;
}
.kx-marquee b{
  font-family:var(--font-display);font-weight:var(--kx-display-weight);
  letter-spacing:var(--kx-display-track);text-transform:var(--kx-display-case);
  color:var(--paper);
}
.kx-marquee i{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  text-transform:none;color:var(--kx-on-accent);
}
.kx-marquee--paper b{color:var(--ink)}
.kx-marquee--paper i{color:var(--accent-lo)}
.kx-marquee--accent b{color:var(--ink-deep)}
.kx-marquee--accent i{color:var(--ink)}
@supports (-webkit-text-stroke:1px black){
  .kx-marquee--deep b{color:transparent;-webkit-text-stroke:1px var(--kx-accent-soft)}
  .kx-marquee--deep b.solid{color:var(--kx-on-accent);-webkit-text-stroke:0}
}
.kx-marquee__dot{
  width:clamp(6px,.8vw,10px);height:clamp(6px,.8vw,10px);flex:0 0 auto;
  background:var(--accent);border-radius:var(--radius);
}
.kx-marquee--paper .kx-marquee__dot,.kx-marquee--accent .kx-marquee__dot{background:var(--ink)}
.kx-marquee__icon{
  width:clamp(34px,3vw,54px);height:clamp(23px,2vw,36px);flex:0 0 auto;
  background:var(--accent);
  -webkit-mask:var(--kx-mark) no-repeat center/contain;
  mask:var(--kx-mark) no-repeat center/contain;
}
.kx-marquee--paper .kx-marquee__icon,.kx-marquee--accent .kx-marquee__icon{background:var(--ink)}

/* --------------------------------------------------------------------------
   13 · kx-photo — the duotone treatment, tinted from --accent
   -------------------------------------------------------------------------- */
.kx-photo{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink-deep);border-radius:var(--radius);
}
.kx-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.52) contrast(1.1) brightness(.9) sepia(.18);
}
.kx-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--accent);mix-blend-mode:color;opacity:.4;
}
.kx-photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--ink-deep);mix-blend-mode:multiply;opacity:.26;
}
.kx-photo--frame{box-shadow:inset 0 0 0 1px var(--kx-rule)}
.kx-photo--tall{aspect-ratio:3/4}
.kx-photo--strip{aspect-ratio:24/7}
.kx-photo--square{aspect-ratio:1/1}
.kx-photo--column{aspect-ratio:2/5}
.kx-photo--tight img{transform:scale(1.6);transform-origin:46% 58%}
.kx-photo--plain::before,.kx-photo--plain::after{display:none}
.kx-photo__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:12px 14px;
  background:linear-gradient(to top,var(--kx-scrim),transparent);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

/* photograph living inside the letterforms.
   Fallback where background-clip:text is unsupported: solid accent. */
.kx-photo--text{
  display:block;margin:0;
  font-family:var(--font-display);font-weight:var(--kx-display-weight);
  text-transform:var(--kx-display-case);
  font-size:clamp(2.6rem,13.6vw,12rem);
  line-height:.9;letter-spacing:var(--kx-display-track);
  color:var(--kx-on-accent);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kx-photo--text{
    background-image:var(--kx-cut-img);
    background-size:170% auto;
    background-position:22% 44%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  html:not(.kx-reduce) .kx-photo--text{animation:kx-pan 24s ease-in-out infinite alternate}
  html:not(.kx-reduce) .kx-photo--text.alt{animation-duration:29s;animation-direction:alternate-reverse}
}
@keyframes kx-pan{
  from{background-position:14% 40%;background-size:170% auto}
  to{background-position:82% 62%;background-size:214% auto}
}
.kx-photo--text .kx-em{font-size:1.06em}

/* --------------------------------------------------------------------------
   14 · kx-rail — sticky section, horizontal travel driven by vertical scroll
   -------------------------------------------------------------------------- */
.kx-rail{position:relative;height:250vh;background:var(--ink)}
.kx-rail__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.kx-rail__meta{
  position:absolute;top:clamp(70px,10vh,116px);left:var(--kx-gut);right:var(--kx-gut);
  display:flex;justify-content:space-between;gap:16px;z-index:3;flex-wrap:wrap;
}
.kx-rail__track{
  display:flex;align-items:center;gap:clamp(14px,2.2vw,40px);
  padding:0 var(--kx-gut);
  will-change:transform;transform:translate3d(0,0,0);
}
.kx-rail__item{flex:0 0 auto;width:clamp(196px,24vw,340px)}
.kx-rail__item .kx-photo{height:clamp(280px,52vh,560px);aspect-ratio:auto}
.kx-rail__item--tall .kx-photo{height:clamp(340px,68vh,680px)}
.kx-rail__item--slim{width:clamp(132px,15vw,210px)}
.kx-rail__word{
  flex:0 0 auto;
  font-family:var(--font-display);font-weight:var(--kx-display-weight);
  text-transform:var(--kx-display-case);
  font-size:clamp(3rem,11vw,8.5rem);line-height:.9;letter-spacing:var(--kx-display-track);
  color:var(--kx-on-accent);
  padding:0 clamp(10px,2vw,36px);white-space:nowrap;
}
@supports (-webkit-text-stroke:1px black){
  .kx-rail__word{color:transparent;-webkit-text-stroke:1px var(--accent)}
}
.kx-rail__word.fill{color:var(--kx-on-accent);-webkit-text-stroke:0}
.kx-rail__word small{
  display:block;font-family:var(--font-accent);font-style:italic;font-weight:400;
  text-transform:none;font-size:.24em;letter-spacing:0;color:var(--kx-on-accent);
  -webkit-text-stroke:0;line-height:1.4;
}
.kx-rail__note{
  flex:0 0 auto;width:clamp(200px,22vw,300px);
  border-top:1px solid var(--kx-rule);border-bottom:1px solid var(--kx-rule);
  padding:clamp(16px,2vw,26px) 0;
}
.kx-rail__note b{
  display:block;font-weight:400;font-family:var(--font-display);
  font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1;color:var(--paper);
}
.kx-rail__note p{margin-top:10px;color:var(--kx-paper-dim);font-size:clamp(14px,1vw,17px)}

/* --------------------------------------------------------------------------
   15 · kx-split — per-character hover, with the cursor-following crop
   -------------------------------------------------------------------------- */
.kx-split{display:block}
.kx-split__row{
  position:relative;display:block;
  border-top:1px solid var(--kx-rule-ink);
  padding:clamp(12px,1.7vw,22px) var(--kx-gut);
  overflow:hidden;
}
.kx-split > *:last-child .kx-split__row,
.kx-split__row:last-of-type{border-bottom:1px solid var(--kx-rule-ink)}
.kx-split__wash{
  position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .55s var(--ease);
  z-index:0;
}
.kx-split__row:hover .kx-split__wash,
.kx-split__row:focus-visible .kx-split__wash{transform:scaleY(1);transform-origin:50% 0}
.kx-split__inner{
  position:relative;z-index:1;display:flex;align-items:center;
  gap:clamp(12px,2.2vw,30px);min-height:44px;
}
.kx-split__idx{
  font-family:var(--font-label);font-size:clamp(11px,.76vw,12px);letter-spacing:.26em;
  color:var(--kx-on-accent);flex:0 0 auto;transition:color .45s ease;
  font-variant-numeric:tabular-nums;
}
.kx-split__name{
  font-family:var(--font-display);font-weight:var(--kx-display-weight);
  text-transform:var(--kx-display-case);
  font-size:clamp(1.5rem,5.8vw,4.4rem);line-height:1.02;letter-spacing:var(--kx-display-track);
  transition:color .45s ease;flex:1 1 auto;min-width:0;
}
.kx-split__name .w{display:inline-block;white-space:nowrap}
.kx-split__name .w span{display:inline-block}
.kx-split__row:hover .kx-split__name,
.kx-split__row:focus-visible .kx-split__name{color:var(--kx-on-accent)}
.kx-split__row:hover .kx-split__idx,
.kx-split__row:focus-visible .kx-split__idx{color:var(--kx-on-accent)}
html:not(.kx-reduce) .kx-split__row:hover .kx-split__name span,
html:not(.kx-reduce) .kx-split__row:focus-visible .kx-split__name span{
  animation:kx-hop .55s cubic-bezier(.25,.9,.25,1) both;
  animation-delay:calc(var(--i,0) * 22ms);
}
@keyframes kx-hop{0%{transform:translateY(0)}42%{transform:translateY(-15%)}100%{transform:translateY(0)}}
.kx-split__note{
  flex:0 0 auto;text-align:right;max-width:26ch;
  font-family:var(--font-accent);font-style:italic;
  color:var(--kx-ink-soft);font-size:clamp(15px,1.05vw,18px);
  transition:color .45s ease;
}
.kx-split__row:hover .kx-split__note{color:var(--kx-on-body)}
.kx-split__thumb{
  flex:0 0 auto;width:clamp(54px,6.4vw,96px);height:clamp(40px,4.8vw,72px);
  transition:transform .5s var(--ease);
}
.kx-split__row:hover .kx-split__thumb{transform:scale(1.05)}
@media (max-width:820px){.kx-split__note{display:none}}
@media (max-width:520px){.kx-split__thumb{display:none}}

/* cursor-following crop — decorative, fine pointers only */
.kx-peek{
  position:fixed;top:0;left:0;z-index:65;pointer-events:none;
  width:clamp(170px,15vw,270px);height:clamp(220px,20vw,350px);
  background-size:cover;background-position:center;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.92);
  transition:opacity .35s ease;
  box-shadow:var(--kx-shadow);
  outline:1px solid var(--kx-rule);outline-offset:-1px;
  filter:saturate(.52) contrast(1.1) sepia(.18);
  border-radius:var(--radius);
  display:none;
}
@media (hover:hover) and (pointer:fine){.kx-peek{display:block}}
.kx-peek.on{opacity:1}

/* --------------------------------------------------------------------------
   16 · kx-count
   -------------------------------------------------------------------------- */
.kx-counts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3vw,50px);
}
.kx-counts__i{border-top:1px solid var(--kx-rule);padding-top:clamp(10px,1.4vw,18px)}
.kx-count{
  font-family:var(--font-display);font-weight:var(--kx-display-weight);
  letter-spacing:var(--kx-display-track);line-height:.94;
  font-size:clamp(2.5rem,7.8vw,6.4rem);
  color:var(--kx-on-accent);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.kx-count sup{font-size:.32em;vertical-align:super;letter-spacing:.02em;color:var(--kx-on-accent)}
.kx-count__k{margin-top:10px}
.kx-count__k p{color:var(--kx-paper-dim);font-size:clamp(14px,1vw,16px);margin-top:5px}
@media (max-width:900px){.kx-counts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   17 · kx-btn
   -------------------------------------------------------------------------- */
.kx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:14px 28px;
  border:1px solid var(--accent);border-radius:var(--radius);
  font-family:var(--font-label);font-size:clamp(11px,.8vw,12.5px);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--kx-on-accent);background:transparent;
  transition:background-color .4s ease,color .4s ease,border-color .4s ease;
  cursor:pointer;
}
.kx-btn:hover{background:var(--accent);color:var(--ink-deep)}
.kx-btn--quiet{border-color:var(--kx-rule);color:var(--kx-on-body)}
.kx-on-paper .kx-btn{border-color:var(--accent-lo)}
.kx-on-paper .kx-btn--quiet{border-color:var(--kx-rule-firm)}
.kx-on-paper .kx-btn--quiet:hover{border-color:var(--accent-lo);color:var(--accent-lo)}
.kx-btn--quiet:hover{border-color:var(--accent);color:var(--kx-on-accent);background:transparent}
.kx-btn--hairline:hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.kx-btn .arw{display:inline-block;animation:kx-nudge 2.8s ease-in-out infinite}
@keyframes kx-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* --------------------------------------------------------------------------
   18 · kx-foot
   -------------------------------------------------------------------------- */
.kx-foot{
  background:var(--ink-deep);border-top:1px solid var(--kx-rule);
  padding:20px var(--kx-gut) 78px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;
}
.kx-foot .kx-label{color:var(--kx-on-accent)}
.kx-foot a{display:inline-flex;align-items:center;min-height:44px}

/* --------------------------------------------------------------------------
   19 · REDUCED MOTION — infinite animations are stopped, never shortened
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .kx-marquee__run,
  .kx-hero__scroll .bar::after,
  .kx-btn .arw,
  .kx-photo--text,
  .kx-photo--text.alt,
  .kx-ticker__n.kx-flip,
  .kx-hero__bg,
  .kx-nav__mark{
    animation:none !important;
  }
  html.kx-js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  html.kx-js .kx-ln > i{transform:none !important;animation:none !important}
  html.kx-js .kx-mask--centre .kx-ln > i{transform:none !important;animation:none !important}
  .kx-marquee__shift,.kx-marquee__shift--neg{transform:none !important}
  .kx-split__wash{transition:none}
  .kx-rail{height:auto}
  .kx-rail__sticky{position:static;height:auto;padding:clamp(72px,10vw,124px) 0}
  .kx-rail__meta{position:static;padding:0 var(--kx-gut) 26px}
  .kx-rail__track{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px}
  .kx-rail__item{scroll-snap-align:center}
  *{scroll-behavior:auto !important}
}

/* --------------------------------------------------------------------------
   20 · MOBILE FLOORS — measured at 390px. No page may forget these.
   Nothing pushes sideways; nothing tracked falls below 11px; every control
   keeps a 44px target.
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .kx-label,.kx-nav__links a,.kx-nav__wordmark,.kx-split__idx,
  .kx-ticker__t,.kx-ticker__k,.kx-chip,.kx-btn,
  figcaption,small,[class*="eyebrow"],[class*="kicker"]{
    font-size:11px !important;
    letter-spacing:.18em;
  }
  body{font-size:15px}
  .kx-hero{min-height:96svh}
  .kx-rail{height:210vh}
  .kx-counts{gap:22px}
  .kx-btn{width:100%}
}
@media (max-width:390px){
  .kx-marquee b,.kx-marquee i{font-size:1.5rem}
}

/* Touch targets at every width — 44px is comfortable on a laptop too. */
a,button{position:relative}
.kx-nav__links a,.kx-foot a,.kx-btn,.kx-chip{
  display:inline-flex;align-items:center;min-height:44px;
}
/* Links set in running prose keep their inline flow. */
p a,li a,dd a{display:inline;min-height:0}
/* The phone number is the one control a guest presses at four in the morning.
   The prose rule above would otherwise leave it at 21px. */
a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}

/* ==========================================================================
   18 · THE DIRECT-BOOKING OFFER
   A live band that says what the discount is at this moment, and the printed
   week beneath it. The percentage is written into the HTML as a fallback and
   replaced by mynnt-book.js with the rate that applies right now.

   The pulse is deliberately slow. WCAG 2.3.1 forbids anything flashing more
   than three times a second; this breathes once every 2.4 seconds, and stops
   completely under prefers-reduced-motion.
   ========================================================================== */
.mo-band{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,28px);
  padding:clamp(16px,2.6vw,26px) clamp(16px,2.4vw,30px);
  border:1px solid var(--accent);border-radius:var(--radius);
  background:
    linear-gradient(100deg, rgba(180,137,78,.20) 0%, rgba(180,137,78,.06) 62%),
    var(--ink-deep);
  position:relative;overflow:hidden;
}
.mo-band::after{
  /* the sweep — a slow highlight passing across the band */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%, transparent 38%,
    color-mix(in srgb, var(--accent-hi) 26%, transparent) 50%,
    transparent 62%, transparent 100%);
  transform:translate3d(-60%,0,0);
}
.kx-js .mo-band[data-live="on"]::after{
  animation:mo-sweep 4.8s var(--ease) infinite;
}
@keyframes mo-sweep{
  0%   {transform:translate3d(-60%,0,0)}
  55%  {transform:translate3d(160%,0,0)}
  100% {transform:translate3d(160%,0,0)}
}
.kx-js .mo-band[data-live="on"]{animation:mo-breathe 2.4s ease-in-out infinite}
@keyframes mo-breathe{
  0%,100%{border-color:var(--accent);   box-shadow:0 0 0 0 rgba(180,137,78,0)}
  50%    {border-color:var(--accent-hi);box-shadow:0 0 0 4px rgba(180,137,78,.14)}
}

.mo-pc{
  font-family:var(--font-display);font-weight:var(--kx-display-weight,700);
  font-size:clamp(2.6rem,8vw,4.6rem);line-height:.86;letter-spacing:-.035em;
  color:var(--kx-on-accent);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:flex-start;flex:none;
}
.mo-pc i{font-style:normal;font-size:.42em;line-height:1;margin-top:.24em;margin-left:.06em}
.mo-txt{display:grid;gap:6px;min-width:min(100%,15ch)}
.mo-txt b{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,1.5vw,20px);line-height:1.28;color:var(--paper);
  letter-spacing:-.005em;
}
.mo-txt span{
  font-family:var(--font-label);font-size:clamp(11px,.86vw,13px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--kx-on-accent);
}
.mo-terms{
  margin-top:clamp(12px,1.8vw,16px);max-width:74ch;
  font-size:clamp(13px,.95vw,15px);line-height:1.62;color:var(--kx-paper-dim);
}

/* ---- the printed week ---- */
.mo-week{
  margin-top:clamp(20px,3vw,32px);
  display:grid;gap:1px;background:var(--kx-rule);
  border:1px solid var(--kx-rule);border-radius:var(--radius);overflow:hidden;
}
.mo-row{
  background:var(--ink);
  display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:4px clamp(14px,2.4vw,30px);
  padding:clamp(12px,1.8vw,17px) clamp(14px,2vw,20px);
  align-items:baseline;
}
@media (max-width:560px){.mo-row{grid-template-columns:minmax(0,1fr);gap:8px}}
.mo-row[data-today]{background:var(--support)}
.mo-row[data-today] .mo-day::after{
  content:"Today";margin-left:9px;
  font-size:.86em;letter-spacing:.16em;color:var(--kx-on-accent);
}
.mo-day{
  font-family:var(--font-label);font-weight:500;
  font-size:clamp(11px,.85vw,13px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--kx-on-accent);
}
.mo-bands{display:flex;flex-wrap:wrap;gap:8px clamp(12px,2vw,22px)}
.mo-slot{
  display:inline-flex;align-items:baseline;gap:9px;
  font-size:clamp(14px,1vw,16px);line-height:1.5;color:var(--kx-on-body);
}
.mo-slot b{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,1.25vw,18px);color:var(--kx-on-accent);
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  .kx-js .mo-band[data-live="on"],
  .kx-js .mo-band[data-live="on"]::after{animation:none !important}
  .mo-band[data-live="on"]{border-color:var(--accent-hi)}
}

/* ==========================================================================
   19 · THE HEADER BOOK-NOW BUTTON
   Always the first thing on the page and never hidden. The nav links beside
   it collapse below 900px; this does not — booking is the one action that
   must survive every breakpoint.
   ========================================================================== */
.kx-nav__cta{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  min-height:44px;padding:0 clamp(14px,1.6vw,22px);
  border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--accent);color:var(--ink-deep);
  font-family:var(--font-label);font-weight:500;
  font-size:clamp(11px,.82vw,13px);letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.kx-nav__cta:hover,.kx-nav__cta:focus-visible{
  background:var(--accent-hi);border-color:var(--accent-hi);color:var(--ink-deep);
}
.kx-nav__cta .arw{transition:transform .35s var(--ease)}
.kx-nav__cta:hover .arw{transform:translateX(3px)}

/* The Chapter keeps gold as a hairline colour, never a fill. */
.kx-nav__cta--hairline{
  background:transparent;color:var(--kx-on-accent);border-color:var(--accent);
}
.kx-nav__cta--hairline:hover,.kx-nav__cta--hairline:focus-visible{
  background:transparent;color:var(--paper);border-color:var(--accent-hi);
}

/* Below 900px the section links go; the button and the brand stay. */
@media (max-width:900px){
  .kx-nav{gap:10px}
  .kx-nav__cta{letter-spacing:.14em;padding:0 14px}
}
@media (max-width:380px){
  .kx-nav__cta .arw{display:none}
}

/* ==========================================================================
   20 · THE BOOKING CHOOSER
   On a house page "Book now" has one obvious destination. On a group page it
   does not, so it opens this instead: the five houses, each routed to the
   thing that actually takes its booking.
   ========================================================================== */
.kx-book{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:clamp(14px,4vw,40px);
}
.kx-book[open],.kx-book.is-open{display:flex}
.kx-book__veil{position:absolute;inset:0;background:rgba(20,19,18,.82);backdrop-filter:blur(4px)}
.kx-book__panel{
  position:relative;width:min(560px,100%);max-height:100%;overflow-y:auto;
  background:#1C1B19;border:1px solid rgba(180,137,78,.45);border-radius:2px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.kx-book__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:clamp(18px,3vw,26px) clamp(18px,3vw,26px) clamp(12px,2vw,16px);
  border-bottom:1px solid rgba(245,241,232,.12);
}
.kx-book__head h2{
  margin:0;font-family:'Montserrat',system-ui,sans-serif;font-weight:600;
  font-size:clamp(17px,2vw,22px);color:#F5F1E8;letter-spacing:-.01em;
}
.kx-book__x{
  appearance:none;background:transparent;border:0;cursor:pointer;
  color:rgba(245,241,232,.6);font-size:22px;line-height:1;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}
.kx-book__x:hover{color:#E8C784}
.kx-book__list{display:grid;gap:1px;background:rgba(245,241,232,.1)}
.kx-book__row{
  display:flex;align-items:center;gap:14px;
  background:#1C1B19;padding:clamp(14px,2.2vw,18px) clamp(18px,3vw,26px);
  min-height:44px;transition:background-color .25s ease;
}
.kx-book__row:hover{background:#24221F}
.kx-book__row b{
  flex:1;font-family:'Montserrat',system-ui,sans-serif;font-weight:600;
  font-size:clamp(14px,1.3vw,16px);color:#F5F1E8;
}
.kx-book__row small{
  display:block;font-family:'Jost',system-ui,sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,241,232,.5);margin-top:4px;
}
.kx-book__go{
  flex:none;font-family:'Jost',system-ui,sans-serif;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  padding:8px 13px;border:1px solid rgba(180,137,78,.55);color:#E8C784;border-radius:2px;
}
.kx-book__row:hover .kx-book__go{background:#B4894E;border-color:#B4894E;color:#1C1B19}
.kx-book__foot{
  padding:clamp(14px,2.2vw,18px) clamp(18px,3vw,26px);
  border-top:1px solid rgba(245,241,232,.12);
  font-family:'Jost',system-ui,sans-serif;font-size:11.5px;line-height:1.6;
  color:rgba(245,241,232,.55);
}
.kx-book__foot a{color:#E8C784;display:inline-flex;align-items:center;min-height:44px}

/* --------------------------------------------------------------------------
   25 · TICK BOXES

   A native checkbox paints only its *checked* fill from accent-color. At
   rest it shows the browser's own hairline, which measures under 2:1 on
   cream — findable if you know it is there, easy to miss if you do not.
   Drawing the box ourselves gives the resting state a border we can hold to
   the 3:1 that WCAG 1.4.11 asks of a control, on either ground, and a tick
   that contrasts its own fill rather than the page behind it.
   -------------------------------------------------------------------------- */
:root{--kx-accent-ink:var(--ink-deep)}   /* what reads ON an accent fill */
.kx-on-paper{--kx-accent-ink:var(--paper)}
.kx-on-ink{--kx-accent-ink:var(--ink-deep)}

input[type=checkbox][type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:24px;height:24px;flex:none;
  display:inline-grid;place-content:center;padding:0;min-height:0;
  border:2px solid var(--kx-on-accent);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease;
}
input[type=checkbox][type=checkbox]::before{
  content:"";width:14px;height:14px;
  transform:scale(0);transition:transform .15s ease;
  background:var(--kx-accent-ink);
  clip-path:polygon(14% 45%,0 60%,38% 96%,100% 25%,85% 12%,37% 68%);
}
input[type=checkbox][type=checkbox]:checked{
  background:var(--kx-on-accent);
  border-color:var(--kx-on-accent);
}
input[type=checkbox][type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox][type=checkbox]:hover:not(:disabled){border-color:var(--kx-on-accent);filter:brightness(1.12)}
input[type=checkbox][type=checkbox]:focus-visible{outline:2px solid var(--kx-on-accent);outline-offset:3px}
/* Always-on and not yours to change. Dimmed enough to read as settled,
   not so far that it stops reading as ticked. */
input[type=checkbox][type=checkbox]:disabled{cursor:default;opacity:.75}
@media (prefers-reduced-motion:reduce){
  input[type=checkbox][type=checkbox],input[type=checkbox][type=checkbox]::before{transition:none}
}

/* --------------------------------------------------------------------------
   MOBILE PORTRAIT — a photograph's shape must not come from the viewport.
   Card width was vw-based and photo height vh-based; in portrait they pull
   apart and the card becomes a sliver that shows a fifth of the picture.
   Below 768px the card takes a share of the width and the photograph takes
   a ratio, so the two can no longer disagree.
   -------------------------------------------------------------------------- */
@media (max-width:768px),(max-aspect-ratio:14/9){
  .kx-rail__item{width:min(78vw,330px)}
  .kx-rail__item--slim{width:min(60vw,250px)}
  .kx-rail__item .kx-photo{height:auto;aspect-ratio:4/5}
  .kx-rail__item--tall .kx-photo{height:auto;aspect-ratio:3/4}
  .kx-rail__item--slim .kx-photo{height:auto;aspect-ratio:3/4}
}

/* --------------------------------------------------------------------------
   HEADER — the written name, then the section links, then the two actions
   together at the right edge.

   margin-left:auto on the first action pushes it and everything after it to
   the right, so Call and Book now sit side by side with only the bar's own
   gap between them. Call is injected by mynnt-book.js; the second rule covers
   the moment before it arrives, or a browser where the script did not run.
   -------------------------------------------------------------------------- */
.kx-nav{justify-content:flex-start}
.kx-nav__call{margin-left:auto}
.kx-nav__links + .kx-nav__cta{margin-left:auto}

/* The name carries the brand, so the icon is not needed beside it. */
.kx-nav__mark{display:none}

/* Below 700px the four items need more width than the screen has. Rather than
   drop the section links, give them a row of their own: name and actions on
   the first row, links on the second, scrolling sideways on a page that has
   more of them than fits. */
@media (max-width:700px){
  .kx-nav{flex-wrap:wrap;row-gap:2px;padding-bottom:6px}
  .kx-nav__links{
    order:3;flex-basis:100%;margin:0;
    justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .kx-nav__links::-webkit-scrollbar{display:none}
  .kx-nav__links a{flex:0 0 auto;min-height:38px;letter-spacing:.18em}
  .kx-nav__links{padding-right:18px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  /* a full row has room for all of them again */
  .kx-nav__links a:nth-child(n+3){display:inline-flex}
}