/* ─────────────────────────────────────────────────────────────
   Indigo Dreams — shared chrome
   Tokens, base type, marquee, masthead, full-bleed plate, footer.
   Loaded by every page; each page keeps its own sections inline.
   ───────────────────────────────────────────────────────────── */

/* Metric-matched stand-ins for the two web faces (CLS).
   Jost and Bodoni Moda arrive with display=swap, so the first paint is in a
   system face, and a system face of the same nominal size is a different
   width and height: on a cold load the phone hero re-wrapped and re-centred
   when the fonts landed — 0.16 of layout shift on the homepage at 390px.
   These faces are Arial and Times New Roman (Liberation Sans/Serif, their
   metric twins, on Linux) scaled to Jost's and Bodoni Moda's average advance
   and given their ascent and descent, so the swap changes the letters and
   not the layout. Measured from the font files with fontTools: Jost
   ascent 1.07 / descent .375, ~0.945 of Arial's width; Bodoni Moda ascent
   1.125 / descent .40, ~1.12 of Times'. Overrides are divided by the size
   adjustment, as the spec applies them after it. */
@font-face{
  font-family:'Jost Fallback';
  src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');
  size-adjust:94.5%;ascent-override:113.2%;descent-override:39.7%;line-gap-override:0%;
}
@font-face{
  font-family:'Bodoni Moda Fallback';
  src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('LiberationSerif');
  size-adjust:112%;ascent-override:100.4%;descent-override:35.7%;line-gap-override:0%;
}

:root{
  /* Palette drawn from the Indigo Dreams logo — deep navy ground + gold foil.
     The accent tokens are still named --blue* (used across the site); they
     now carry gold so the whole page re-themes from here. */
  --ink:#0d1626;
  --ink-2:#131f33;
  --navy:#20264a;          /* the logo's navy — chips, badges */
  --cream:#f6f1e6;         /* warm ivory, sits with gold */
  --slate:#1b2436;
  --gold:#c6a25c;
  --gold-hi:#e3c583;
  --gold-deep:#8a6a34;
  --blue:#c6a25c;          /* primary accent → gold */
  --blue-hi:#e3c583;       /* hover/highlight → light gold */
  --select:#8a6a34;        /* selection + CTA-hover ground → deep gold */
  /* The same colours as bare channels, for every translucent rule, scrim and
     hairline: rgba(var(--cream-rgb),.16). A site with its own theme
     (brand.config.mjs `theme`, see themeCss() in lib/brand.ts) re-points these
     and the whole design follows, instead of keeping navy scrims under it. */
  --cream-rgb:248,244,236;
  --ink-rgb:13,22,38;
  --slate-rgb:27,36,54;
  --gold-rgb:198,162,92;
  --deep-rgb:6,11,20;
  --deep-2-rgb:9,15,27;
  --deep-3-rgb:11,17,29;
  --gutter:clamp(20px,4vw,40px);
  /* One container width for the whole site. Every key section is capped
     here and centred, so their outer edges line up with each other at any
     window width — and, just as importantly, at any browser zoom, where a
     zoomed-out viewport is simply a very wide one. */
  --wrap:1320px;
  --serif:'Bodoni Moda','Bodoni Moda Fallback',Georgia,'Times New Roman',serif;
  --sans:'Jost','Jost Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  /* `clip` is preferred (it doesn't turn body into a scroll container,
     which would break the sticky masthead), but it needs Chrome 90+ /
     Safari 16+. Older engines ignore it and fall back to `hidden`. */
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue-hi)}
::selection{background:var(--select);color:var(--cream)}
img,video{display:block;max-width:100%}

:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}

.skip{
  /* The first thing Tab reaches on every page (layout.tsx). Parked off screen
     with a transform rather than left:-9999px, which under Hebrew would be a
     ten-thousand-pixel sideways scroll — the honeypot's old bug. */
  position:fixed;inset-inline-start:12px;top:12px;z-index:1000;
  background:var(--cream);color:var(--slate);
  padding:12px 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--gold);
  transform:translateY(-200%);
}
.skip:focus,.skip:focus-visible{transform:none;color:var(--slate)}
/* <main> is the skip link's target; it takes focus without drawing a ring
   round the whole page. */
main:focus{outline:none}

/* ── shared type ─────────────────────────────────────── */
.eyebrow{
  /* An explicit line height (Jost's own "normal" is ~1.45): with `normal`
     the line grew 3px when the web font replaced the fallback, and moved
     every heading under it. */
  margin:0;font-size:12px;line-height:1.45;letter-spacing:.3em;text-transform:uppercase;
}
.display{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-bottom:1px solid rgba(var(--cream-rgb),.16);padding-bottom:20px;
}
.section-head h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,54px)}
.note{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}

/* ── keyframes ───────────────────────────────────────── */
@keyframes hh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hh-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes hh-fade{from{opacity:0}to{opacity:1}}
/* Ken Burns family — site.js picks one per image, with a random
   duration and delay, so no two frames drift in step. */
@keyframes hh-kb{from{transform:scale(1) translateY(0)}to{transform:scale(1.11) translateY(-2%)}}
@keyframes hh-kb-out{from{transform:scale(1.12) translateY(-2%)}to{transform:scale(1) translateY(0)}}
@keyframes hh-kb-l{from{transform:scale(1.06) translateX(2.5%)}to{transform:scale(1.14) translateX(-2.5%)}}
@keyframes hh-kb-r{from{transform:scale(1.14) translateX(-2.5%)}to{transform:scale(1.06) translateX(2.5%)}}
@keyframes hh-kb-in-l{from{transform:scale(1) translate(1.5%,1.5%)}to{transform:scale(1.13) translate(-1.5%,-1.5%)}}
/* camera flash */
@keyframes hh-flash{0%{opacity:0}8%{opacity:.92}22%{opacity:.5}100%{opacity:0}}
/* the film strip runs on this */
@keyframes hh-film{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes hh-drift{0%{transform:translateY(0)}50%{transform:translateY(-9px)}100%{transform:translateY(0)}}

[data-kb]{animation:hh-kb 18s ease-in-out infinite alternate}

/* flash overlay injected by HH.flash() */
.flash{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--cream);opacity:0;mix-blend-mode:screen;
}

/* Hidden until it rises in, but only where a script can raise it: with
   scripting off (a link preview, a crawler that does not run JavaScript, a
   blocker) the section headings, the services and the whole cast on /credits
   stayed at opacity 0. Reveal.tsx adds .is-in as each scrolls into view. */
@media (scripting: enabled){.reveal{opacity:0}}
.reveal.is-in{animation:hh-rise 1.05s cubic-bezier(.16,1,.3,1) both}

/* ── sticky masthead ─────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:60}
.bar{
  position:relative;
  background:var(--cream);color:var(--slate);
  /* CLS: every line in the bar has a fixed height, so the swap from the
     fallback face to Jost/Bodoni (display=swap) cannot change the bar's
     height. It did by 3px, and that moved the whole page under it — 0.107 of
     layout shift on every page at 1440x900. */
  line-height:17px;
  /* One row at every width now (REQ-001/003). It used to wrap, because five
     uppercase letter-spaced labels need ~1030px beside the wordmark — so on a
     phone the labels took a second line, "Contact" a third, and the header ate
     a third of the screen before the hero began. Between 900 and 1030 the row
     tightens; below 900 the labels go behind .burger. */
  /* Brand then destinations, both on the leading edge — the row is read left
     to right rather than split to the two ends. `justify-content:flex-start`
     with a start margin on the nav rather than `space-between`, so the gap
     between the wordmark and the first label is a decision and not whatever
     the window happens to leave over. */
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:16px;
  padding:22px var(--gutter);
  border-bottom:1px solid rgba(var(--slate-rgb),.12);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__mark{width:clamp(34px,4.4vw,46px);height:auto;flex:0 0 auto;display:block;border-radius:8px}
.wordmark{display:flex;flex-direction:column;gap:3px;min-width:0}
.wordmark__name{font-family:var(--serif);font-weight:500;color:var(--slate);font-size:clamp(21px,4.2vw,36px);letter-spacing:.14em;line-height:1;white-space:nowrap}
.wordmark__tag{font-size:12px;line-height:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);opacity:.8;white-space:nowrap}
/* min-width:0 lets the nav shrink below its content (flex items default to
   min-width:auto and would otherwise push the page wider). */
.bar nav{
  display:flex;gap:34px;font-size:12px;line-height:17px;letter-spacing:.17em;text-transform:uppercase;
  /* The indent is deliberately small (BUG-2026-001). It was clamp(26,4.5vw,68)
     when the destinations moved off the far edge and next to the wordmark, and
     on a wide screen 68px on top of the row's own 16px gap left the labels
     adrift — attached to nothing, halfway to a right-aligned menu that is no
     longer there. About 32px in total instead, so they read as part of the
     brand block rather than as something the window pushed across. */
  min-width:0;margin-inline-start:clamp(12px,1.2vw,20px);
}
.bar nav a{white-space:nowrap}
.bar nav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .35s ease,color .35s ease}
.bar nav a[aria-current]{border-bottom-color:var(--gold)}

/* ── the menu button ─────────────────────────────────────────
   Three rules that become a cross when the panel is open. Drawn rather than
   shipped as an icon: it is two transforms, and an SVG here would be a request
   on the critical path for 40x40 of chrome. */
.burger{
  display:none;flex:0 0 auto;
  width:42px;height:42px;padding:0;cursor:pointer;
  background:none;border:1px solid rgba(var(--slate-rgb),.2);border-radius:3px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color .3s ease,background .3s ease;
}
.burger:hover{border-color:rgba(var(--slate-rgb),.45);background:rgba(var(--slate-rgb),.04)}
.burger span{
  display:block;width:19px;height:1.5px;background:var(--slate);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .2s ease;
}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── full-bleed plate ────────────────────────────────── */
.plate{position:relative;height:88vh;min-height:520px;overflow:hidden}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.plate figcaption{
  position:absolute;bottom:26px;left:var(--gutter);right:var(--gutter);margin:0;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(var(--ink-rgb),.62);padding:9px 14px;
}

/* ── footer ──────────────────────────────────────────── */
.foot{
  background:var(--cream);color:var(--slate);
  border-top:1px solid rgba(var(--slate-rgb),.14);
  padding:clamp(24px,3vw,34px) var(--gutter);
  display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);
  font-size:12px;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;
}
.foot__row{
  display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px);
  align-items:center;justify-content:space-between;
}
.foot__row--fine{border-top:1px solid rgba(var(--slate-rgb),.12);padding-top:clamp(14px,2vw,20px)}
.foot__links{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,30px)}
.foot__links a{opacity:.82;transition:opacity .35s ease}
.foot__links a:hover{opacity:1}
.foot__social{display:flex;gap:12px}
.foot__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(var(--slate-rgb),.22);opacity:.78;
  transition:opacity .35s ease,border-color .35s ease,background .35s ease;
}
.foot__social a:hover{opacity:1;border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}
.foot__place{opacity:.65}

/* On a phone the two rows used to wrap into six or seven ragged lines, which
   is the "visually fragmented" ending REQ-006 describes. Each row becomes a
   deliberate stack instead — links centred on one or two lines, the social
   icons and the language menu on their own centred line — and the type comes
   down a step so four destinations fit across a 360px screen. */
@media (max-width:720px){
  .foot{
    padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
    gap:14px;font-size:12px;letter-spacing:.12em;text-align:center;
  }
  .foot__row{justify-content:center;gap:12px 18px}
  .foot__row--fine{padding-top:13px;gap:11px 18px}
  /* The links were 16px tall; the padding makes each a ~43px target and
     replaces the row gap, so the lines sit about as they did. */
  .foot__links{justify-content:center;gap:0 16px}
  .foot__links a,.foot .foot__consent{display:inline-block;padding-block:13px}
  .foot__row--fine{row-gap:0}
  .foot__mark{order:3;width:100%;opacity:.65}
  .foot__social{order:2;gap:10px}
  .foot__social a,.foot__icon{width:34px;height:34px}
  .foot__place{width:100%;order:3}
}

/* ── the closing invitation ───────────────────────────────────
   BUG-002: this lived in home.css, so only the pages that loaded home.css
   could draw it — and one of them (Looks/Shoot/Cast & Crew) drew `.bk`
   instead while Contact, the legal pages and the crew pages drew nothing at
   all. It is shared chrome now, beside the masthead and the footer, which is
   what site.css is for: a page cannot render the invitation without its
   styles, because it cannot render at all without this file. */
/* ── the closing invitation ──────────────────────────── */
/* The last cream band on the page, and the one that carried the most: the
   photograph on the right had a cream scrim fading into it, and the CTA was a
   dark button on light. Both are inverted — an ink scrim, and the gold-outline
   button the invitation on every other page already uses. */
.st{position:relative;background:var(--ink);overflow:hidden}
.st__bg{
  position:absolute;inset-inline-end:0;top:0;bottom:0;width:52%;height:100%;
  object-fit:cover;object-position:50% 44%;
}
/* The scrim over the photograph.
   It hangs off .st rather than .st__in::before, because .st__in is capped at
   --wrap and centred: its 52% is 52% of 1320, offset from the image's 52% of
   the full-bleed section, so the scrim missed the outer edge of the very
   thing it is covering.
   The ramp also changed. On cream this only had to fade a light panel into a
   light photograph, and the column's dark text stayed readable wherever it
   landed. On navy the column's text is light, so it needs real ground the
   whole way across: near-opaque from the inner edge out to 60%, and only then
   opening up so the photograph is still a photograph on the far side. */
.st::after{
  content:'';position:absolute;inset-inline-end:0;top:0;bottom:0;width:52%;
  z-index:1;pointer-events:none;
  background:linear-gradient(to left,rgba(var(--ink-rgb),.5),rgba(var(--ink-rgb),.97) 60%);
}
/* `to inline-start` was here before, which is not valid gradient syntax —
   logical keywords were never adopted for linear-gradient — so the whole
   declaration was dropped and the scrim never painted at all. Physical now,
   with an RTL mirror, since Hebrew puts the photograph on the other side. */
[dir=rtl] .st::after{
  background:linear-gradient(to right,rgba(var(--ink-rgb),.5),rgba(var(--ink-rgb),.97) 60%);
}
.st__in{
  position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--gutter);
  border-top:1px solid rgba(var(--cream-rgb),.16);
  display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
}
.st__text .eyebrow{color:var(--blue);margin-bottom:clamp(14px,2vw,20px)}
.st__text h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.4vw,58px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance;
}
.st__lines{list-style:none;margin:0 0 clamp(20px,3vw,28px);padding:0;font-size:15px;line-height:1.8;font-weight:300;opacity:.84}
.st__btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:17px 36px;background:none;color:var(--gold);border:1px solid var(--gold);
  font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.st__btn i{font-style:normal;font-size:12px;opacity:.7}
.st__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--slate)}
/* The one per-page variation: The Shoot credits its photographer here. */
.st__by{margin:clamp(12px,1.8vw,16px) 0 0;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--blue);opacity:.9}
.st__note{margin:clamp(16px,2.4vw,22px) 0 0;font-size:12px;letter-spacing:.06em;opacity:.66}
.st__note a{border-bottom:1px solid rgba(var(--cream-rgb),.38)}
@media (max-width:860px){
  .st__bg{position:relative;width:100%;height:min(34vh,240px);display:block}
  .st::after{display:none}
  .st__in{grid-template-columns:1fr}
}
/* REQ-006: the end of the page was a photograph, then a heading, then three
   lines, then a button, then a note — five full-width slabs with a big gap
   between each, which is the "fragmented" ending the report describes. One
   compact group instead: the three steps run across in a single row divided by
   hairlines, and
   the supporting line, the button and the credit close up under them. The site
   footer follows as its own lighter band, which it already was. */
@media (max-width:620px){
  .st__in{padding:clamp(24px,5.4vw,34px) var(--gutter);gap:16px}
  .st__text h2{font-size:clamp(27px,7.6vw,38px)}
  .st__text .eyebrow{margin-bottom:11px}
  /* The three steps between hairlines rather than in a tall stack. Whether
     they run across is a question of room, not of breakpoint: all three plus
     their dividers need about 440px, so below that they stay one per line —
     just tight, with the enclosing rules doing the structuring the big gaps
     used to. Wrapping the flex row instead would drop a dangling divider onto
     the front of the second line. */
  .st__lines{
    margin:0 0 18px;padding:12px 0;
    border-top:1px solid rgba(var(--cream-rgb),.18);
    border-bottom:1px solid rgba(var(--cream-rgb),.18);
    font-size:12.5px;line-height:1.75;
  }
  .st__btn{width:100%;justify-content:center;padding:15px 22px}
  .st__note{margin-top:13px;font-size:12px}
}
@media (min-width:481px) and (max-width:620px){
  .st__lines{
    display:flex;flex-wrap:nowrap;align-items:center;
    gap:0;line-height:1.4;
  }
  .st__lines li{white-space:nowrap}
  .st__lines li + li::before{
    content:'';display:inline-block;width:1px;height:11px;
    margin-inline:10px;vertical-align:middle;
    background:rgba(var(--cream-rgb),.3);
  }
}

/* ── responsive ──────────────────────────────────────── */
/* Below 1200px the labels fold behind the button and the bar is one compact
   row: mark, wordmark, search, button. Nothing is removed — the <nav> is
   still in the markup, so no-JS and crawlers keep all five destinations.

   1200, measured: the full row (wordmark, five destinations, the Search
   pill) needs 1199px in Greek, 1169 in French, 1162 in English. This used to
   fold at 900 with a tighter band up to 1030, and between 901 and ~1180 the
   wordmark ran under the first label and the last label under Search. Keep
   Nav.tsx's matchMedia and chromeCss() (lib/content.ts) on the same number. */
@media (max-width:1199px){
  .bar{gap:12px;padding:11px var(--gutter)}
  .brand{gap:10px}
  .brand__mark{width:36px;border-radius:7px}
  .wordmark{gap:2px}
  /* Sized to the room the row leaves it: the gutters, the mark and the two
     42px buttons take ~196px, and the name is ~9.6em wide with its tracking.
     A fixed clamp let it run under the search button at 390 and overlap it
     below 360. */
  .wordmark__name{font-size:clamp(15px,calc((100vw - 200px) / 9.6),25px);letter-spacing:.11em}
  .wordmark__tag{font-size:12px;line-height:14px;letter-spacing:.16em}
  /* The button sits on the trailing edge, the brand on the leading one — the
     row reads INDIGO DREAMS … [☰], which is where the menu was before the header
     was rebuilt and where a thumb expects it. It follows the brand in the
     markup, so it needs no `order`; the auto margin on .brand is what pushes
     it to the far end. Logical rather than physical sides: under Hebrew the
     flex axis reverses and the button lands on the left, which is the
     trailing edge there. */
  .bar{justify-content:flex-start}
  .burger{display:flex}
  .brand{margin-inline-end:auto}
  .bar nav{
    position:absolute;top:100%;inset-inline:0;z-index:2;
    margin-inline-start:0;
    flex-direction:column;gap:0;
    background:var(--cream);
    border-bottom:1px solid rgba(var(--slate-rgb),.14);
    box-shadow:0 22px 44px rgba(var(--ink-rgb),.16);
    font-size:12px;letter-spacing:.2em;
    /* Shut by default and folded away rather than display:none, so opening it
       is an animation and the links stay in the accessibility tree for the
       no-JS case below. */
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .34s cubic-bezier(.2,.8,.3,1),visibility .34s linear;
    /* Open, it is the whole screen under the bar, on solid ground: it used to
       stop after the last link and leave the page showing beneath it.
       --nav-top is the bar's bottom edge, measured by Nav.tsx on opening. */
    height:calc(100vh - var(--nav-top,65px));
    height:calc(100dvh - var(--nav-top,65px));
    box-shadow:none;border-bottom:0;
  }
  .bar nav.is-open{
    max-height:calc(100vh - var(--nav-top,65px));
    max-height:calc(100dvh - var(--nav-top,65px));
    visibility:visible;overflow-y:auto;overscroll-behavior:contain;
  }
  .bar nav a:last-of-type{border-bottom:1px solid rgba(var(--slate-rgb),.1)}
  /* "Book your session", last in the menu: the site's primary button. */
  .bar nav .nav__book{
    display:flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;
    margin:26px var(--gutter) calc(26px + env(safe-area-inset-bottom));
    padding:16px 24px;cursor:pointer;
    background:var(--gold);color:var(--slate);border:1px solid var(--gold);border-radius:4px;
    font-family:var(--sans);font-size:12px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;
    transition:background .3s ease,border-color .3s ease;
  }
  .bar nav .nav__book i{font-style:normal;opacity:.75}
  .bar nav .nav__book:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
  .bar nav a{
    padding:15px var(--gutter);border-bottom:0;
    border-top:1px solid rgba(var(--slate-rgb),.1);
  }
  .bar nav a:first-child{border-top:0}
  .bar nav a[aria-current]{color:var(--gold-deep);border-bottom-color:transparent}
  .bar nav a[aria-current]::before{
    content:'';display:inline-block;width:14px;height:1px;
    margin-inline-end:9px;vertical-align:middle;background:var(--gold);
  }
}
/* No script, no toggle — so the panel could never be opened and must not be
   the thing hiding the site's navigation. Asked in CSS rather than through a
   `no-js` class an inline script removes: that class is on an element React
   also owns, and this needs no script to be correct in the first place. The
   fallback is simply the wrapped row this header used to be. */
@media (max-width:1199px) and (scripting: none){
  .bar{flex-wrap:wrap}
  .burger{display:none}
  .bar nav{
    position:static;max-height:none;visibility:visible;overflow:visible;
    flex-direction:row;flex-wrap:wrap;gap:10px 20px;width:100%;margin-inline-start:0;
    background:none;box-shadow:none;border-bottom:0;
    font-size:12px;letter-spacing:.15em;padding-bottom:2px;
  }
  .bar nav{height:auto}
  .bar nav a{padding:0;border-top:0}
  .bar nav a:last-of-type{border-bottom:0}
  .bar nav a[aria-current]{border-bottom-color:var(--gold)}
  .bar nav a[aria-current]::before{content:none}
}
/* Tablets and small laptops (901–1199) were on the desktop row until it was
   measured not to fit; in the compact bar they keep a larger wordmark. */
@media (min-width:901px) and (max-width:1199px){
  .bar{padding:14px var(--gutter)}
  .brand__mark{width:42px}
  .wordmark__name{font-size:30px;letter-spacing:.13em}
}
/* The menu's booking button exists for the phone panel only; the desktop row
   keeps its five destinations, and with no script it could not open. */
.nav__book{display:none}
@media (scripting: none){.bar nav .nav__book{display:none}}
/* While the phone menu is open the page behind it stays put. */
body.is-menu{overflow:hidden}

/* Below ~400px the tagline goes: at 8.5px it was too small to read anyway,
   and the room is what lets the name sit clear of the search button down to
   a 344px screen. */
@media (max-width:400px){
  .bar{gap:8px}
  .brand{gap:8px}
  .brand__mark{width:32px}
  .wordmark__tag{display:none}
  .wordmark__name{font-size:clamp(14px,calc((100vw - 184px) / 9.6),22px);letter-spacing:.08em}
}

/* Short pages (search, a missing page) used to stop half-way down the screen
   and show the navy ground under the footer. The column fills the window and
   <main> takes the slack, so the footer always sits at the bottom. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body > *{flex-shrink:0}
body > main{flex:1 0 auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1}
}

/* ── language switcher ───────────────────────────────── */
.langsw{position:relative;display:inline-flex}
.langsw__btn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid rgba(var(--slate-rgb),.22);border-radius:2px;
  color:var(--slate);font:inherit;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 10px;cursor:pointer;
}
.langsw__btn:hover{border-color:var(--slate)}
.langsw__globe{font-size:13px;line-height:1}
/* In the footer the menu must open upward, and it must never inherit the
   footer's list styling — it renders as a <ul>. */
.langsw--up .langsw__menu{top:auto;bottom:calc(100% + 8px)}
.foot .langsw__menu li{margin:0;padding:0;list-style:none}
.langsw__menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:120;
  list-style:none;
  margin:0;padding:6px;list-style:none;
  background:var(--cream);border:1px solid rgba(var(--slate-rgb),.18);
  box-shadow:0 18px 44px rgba(var(--ink-rgb),.22);
  max-height:min(62vh,420px);overflow-y:auto;min-width:210px;
}
.langsw__item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;color:var(--slate);
  font:inherit;font-size:13px;letter-spacing:.04em;text-align:start;
  padding:8px 10px;
}
.langsw__item:hover{background:rgba(var(--slate-rgb),.07)}
.langsw__item.is-on{font-weight:500}
.langsw__item.is-on i{color:var(--blue)}
.langsw__item i{font-style:normal;font-size:12px;letter-spacing:.14em;opacity:.7}

/* ── RTL (Hebrew) ────────────────────────────────────── */
/* The layout is built from flexbox + logical padding, so direction alone does
   most of the work; these are the places that hard-coded a physical side. */
[dir="rtl"] .plate figcaption{left:var(--gutter);right:var(--gutter)}
[dir="rtl"] .langsw__menu{inset-inline-end:auto;inset-inline-start:0}
/* The menu panel is pinned with inset-inline so it mirrors on its own; the
   current-page rule is drawn with a physical margin, so it needs the flip. */
[dir="rtl"] .bar nav a[aria-current]::before{margin-inline-end:0;margin-inline-start:9px}

/* ── the booking form ────────────────────────────────── */
/* Every "book" CTA opens this rather than handing the visitor to Telegram:
   the message is posted to the server, which sends it on to the maison's
   group. The trigger inherits whichever button class the page gives it. */
.foot__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:none;color:inherit;padding:0;
  border:1px solid rgba(var(--slate-rgb),.22);opacity:.78;
  transition:opacity .35s ease,border-color .35s ease,background .35s ease;
}
.foot__icon:hover{opacity:1;border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}

.bf{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,36px);
  background:rgba(var(--deep-rgb),.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:hh-fade .26s ease both;
}
.bf__card{
  position:relative;width:min(96vw,560px);max-height:92vh;overflow-y:auto;
  background:var(--ink-2);color:var(--cream);
  border:1px solid rgba(var(--gold-rgb),.34);border-radius:8px;
  padding:clamp(24px,4vw,40px);
  box-shadow:0 50px 130px rgba(0,0,0,.66);
  /* BUG-004 — the dialog is rendered where its trigger is, not portalled to
     the body, so it inherits whatever the surrounding section sets. Three
     properties have to be taken back: the footer is uppercase and
     letter-spaced, and since the mobile footer became centred (REQ-006) it was
     centring this form too — so the same booking form read left-aligned from
     "Book your session" and centred from the footer's Telegram icon. Reset
     rather than made specific: any future section that styles its text would
     otherwise leak in here the same way. */
  text-transform:none;letter-spacing:normal;text-align:start;
}
.bf__card .eyebrow{color:var(--blue);margin-bottom:10px}
.bf__lede{margin:0 0 clamp(18px,2.6vw,26px);font-size:14px;line-height:1.65;font-weight:300;opacity:.78;text-wrap:pretty}
.bf__close{
  position:absolute;top:12px;inset-inline-end:12px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(var(--cream-rgb),.28);background:none;color:var(--cream);
  font-size:13px;transition:background .35s ease,color .35s ease;
}
.bf__close:hover{background:var(--cream);color:var(--slate)}
/* bottom-aligned: a label that wraps (a long translation, "(optional)")
   must not push its input below its neighbour's */
.bf__row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.bf__row .bf__field{flex:1 1 200px}
.bf__field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.bf__field span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
/* 16px, not 14: iOS Safari zooms the page into any field set smaller. */
.bf__field input,.bf__field textarea{
  width:100%;padding:13px 15px;
  background:rgba(var(--ink-rgb),.6);color:var(--cream);
  border:1px solid rgba(var(--cream-rgb),.2);border-radius:4px;
  font-family:var(--sans);font-size:16px;line-height:1.5;
  transition:border-color .35s ease;
}
.bf__field textarea{resize:vertical;min-height:104px}
.bf__field input::placeholder,.bf__field textarea::placeholder{color:rgba(var(--cream-rgb),.55)}
.bf__field input:focus,.bf__field textarea:focus,.bf__field select:focus{outline:none;border-color:var(--gold)}
/* the border alone was a 1px change; a 2px ring, as on every other control */
.bf__field input:focus-visible,.bf__field textarea:focus-visible,.bf__field select:focus-visible{box-shadow:0 0 0 1px var(--gold)}
/* the booking variant's date and "dates are flexible" (see EnquiryForm) */
.bf__field input[type=date]{color-scheme:dark;min-height:48px}
.bf__row .bf__check{flex:1 1 200px}
.bf__check{display:flex;align-items:center;gap:11px;align-self:flex-end;min-height:48px;margin-bottom:12px;font-size:14px;line-height:1.4;cursor:pointer}
.bf__check input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--gold);color-scheme:dark;cursor:pointer}
.bf__foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:6px}
.bf__send{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:15px 32px;border:1px solid var(--gold);border-radius:4px;
  background:var(--gold);color:var(--slate);font-family:var(--sans);
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease;
}
.bf__send i{font-style:normal;font-size:12px;opacity:.75}
.bf__send:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.bf__send[disabled]{opacity:.55;cursor:default}
.bf__status{font-size:13px;line-height:1.5;opacity:.8;flex:1 1 180px}
.bf__status.is-ok{color:var(--gold-hi);opacity:1}
.bf__status.is-err{color:#e6a2ae;opacity:1}

/* the Turnstile widget, in both the booking dialog and the contact form */
.ts{min-height:65px;margin:2px 0 4px}
.ts iframe{max-width:100%}

/* Scroll-lock for any overlay (book dialog, lightboxes). site.css loads on
   every page; this used to live only in home.css, so the lock was dead on
   credits/contact/crew/privacy/cookies/terms. */
body.is-locked{overflow:hidden}

/* ── ZoomStrip: the shared photo lightbox ────────────────────
   Lives here rather than in looks.css because more than one page opens it
   now — the Looks rows, and the four detail crops in the making band, which
   the homepage and the Looks page both carry. A page that loaded only
   home.css used to get the markup with none of these rules. */
.lkz{
  position:relative;display:block;min-width:0;overflow:hidden;
  padding:0;border:0;background:none;color:inherit;cursor:zoom-in;
}
.lkz img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.lkz__hint{
  position:absolute;inset-inline-end:10px;bottom:10px;z-index:2;
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid rgba(var(--cream-rgb),.4);border-radius:50%;
  color:var(--cream);font-size:15px;line-height:1;opacity:0;
  background:rgba(var(--ink-rgb),.45);transition:opacity .35s ease;pointer-events:none;
}
@media (hover:hover){
  .lkz:hover img{transform:scale(1.04)}
  .lkz:hover .lkz__hint,.lkz:focus-visible .lkz__hint{opacity:1}
}
/* nothing hovers on a touch screen, so the affordance has to be standing */
@media (hover:none){.lkz__hint{opacity:.7}}

/* ── ZoomStrip in carousel mode (REC-005) ────────────────────
   --zs-per tiles visible, sized so exactly that many fill the rail, and one
   snap point per tile. An arrow press scrolls a whole screenful, which is
   therefore a whole set of --zs-per. Native overflow rather than transforms:
   a trackpad swipe, a touch drag and a keyboard user tabbing to a tile off
   the end all keep working for free. */
.zs{position:relative}
.zs__rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--zs-per,4) - 1) * var(--zs-gap,3px)) / var(--zs-per,4));
  gap:var(--zs-gap,3px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.zs__rail::-webkit-scrollbar{display:none}
.zs__rail > *{scroll-snap-align:start}
.zs__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(var(--cream-rgb),.3);border-radius:50%;
  background:rgba(var(--ink-rgb),.72);color:var(--cream);
  font-size:15px;line-height:1;cursor:pointer;
  transition:background .3s ease,opacity .3s ease;
}
.zs__nav i{font-style:normal}
/* the glyph points at the near edge of the screen, which swaps under RTL */
[dir=rtl] .zs__nav i{transform:scaleX(-1)}
.zs__nav:hover{background:rgba(var(--ink-rgb),.95)}
.zs__nav[disabled]{opacity:.22;cursor:default}
.zs__nav--prev{inset-inline-start:7px}
.zs__nav--next{inset-inline-end:7px}
@media (max-width:560px){.zs__nav{width:32px;height:32px;font-size:13px}}

/* ── the lightbox: fitted first, then magnified where you point ── */
.lz{
  position:fixed;inset:0;z-index:120;
  background:rgba(var(--deep-2-rgb),.96);
  display:flex;align-items:center;justify-content:center;
  animation:hh-fade .3s ease both;
}
.lz__stage{
  width:min(94vw,1400px);height:88vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-in;touch-action:none;
}
.lz__stage.is-zoomed{cursor:grab}
.lz__stage.is-zoomed:active{cursor:grabbing}
.lz__stage img{
  max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;
  transition:transform .18s ease-out;will-change:transform;
}
.lz__close{
  position:absolute;top:18px;right:20px;z-index:2;
  padding:10px 13px;border:0;background:none;color:var(--cream);
  font-size:19px;cursor:pointer;opacity:.8;
}
.lz__close:hover{opacity:1}
.lz__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  padding:14px 16px;border:1px solid rgba(var(--cream-rgb),.25);border-radius:50%;
  background:rgba(var(--ink-rgb),.5);color:var(--cream);font-size:17px;cursor:pointer;
  transition:background .3s ease;
}
.lz__nav:hover{background:rgba(var(--ink-rgb),.9)}
.lz__nav--prev{left:clamp(8px,2vw,28px)}
.lz__nav--next{right:clamp(8px,2vw,28px)}
.lz__bar{
  position:absolute;left:0;right:0;bottom:14px;margin:0;
  display:flex;justify-content:center;gap:18px;
  font-size:12px;letter-spacing:.18em;color:var(--cream);opacity:.7;
}
@media (max-width:700px){
  .lz__nav{padding:11px 13px}
  .lz__stage{width:100vw;height:84vh}
}

/* ── cookie consent ──────────────────────────────────────────
   A card in the corner, not a bar across the page, in this site's colours
   and faces.
   It stays until a choice is made. Accept and Decline are the same size and
   the same weight on purpose: a decline styled as the lesser option is a
   dark pattern, and in the EU it is also what makes the consent invalid.
   On a 390x844 phone it is kept under 30% of the screen. */
.cc{
  position:fixed;z-index:900;bottom:20px;inset-inline-start:var(--gutter);
  width:min(440px,calc(100vw - 2 * var(--gutter)));
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--ink-2);color:var(--cream);
  border:1px solid rgba(var(--cream-rgb),.16);border-radius:8px;
  padding:22px 24px;line-height:1.45;text-align:start;
  animation:cc-in .34s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cc-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.cc h2{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2;margin:0 0 8px;color:var(--cream)}
.cc p{margin:0;font-size:14px;line-height:1.5;opacity:.86}
.cc a{color:var(--gold-hi)}
.cc__opts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.cc__opts li{display:grid;gap:2px}
.cc__opts label{display:flex;gap:9px;align-items:center;font-size:14px;cursor:pointer}
.cc__opts input{accent-color:var(--gold);color-scheme:dark;width:16px;height:16px;margin:0}
.cc__opts input:disabled{opacity:.5;cursor:default}
.cc__opts b{font-weight:500}
.cc__opts span{font-size:13px;opacity:.78;padding-inline-start:25px;line-height:1.45}
/* the two choices, side by side, identical */
.cc__act{display:flex;gap:10px;margin-top:16px}
.cc__btn{
  flex:1 1 0;min-width:0;min-height:44px;padding:10px 14px;cursor:pointer;
  background:none;border:1px solid rgba(var(--cream-rgb),.42);border-radius:4px;color:var(--cream);
  font:inherit;font-size:14px;line-height:1.2;
  transition:border-color .15s,background .15s;
}
.cc__btn:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.1)}
.cc__more{
  display:inline-block;margin-top:2px;min-height:44px;padding:10px 0;cursor:pointer;
  background:none;border:0;color:var(--cream);opacity:.85;
  font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;
}
.cc__more:hover{opacity:1;color:var(--gold-hi)}
/* A <button> does not inherit the footer's capitals or tracking by default, so
   "Cookie settings" sat in lower case beside links in tracked capitals. */
.foot__consent{background:none;border:0;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;padding:0;text-decoration:none;opacity:.75}
.foot__consent:hover{opacity:1;text-decoration:underline}
@media (max-width:599px){
  .cc{
    inset-inline:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));padding:20px;
  }
  .cc h2{font-size:18px;margin-bottom:6px}
  .cc__act{margin-top:14px}
  .cc__more{display:block;margin-top:0}
}

/* ── search ──────────────────────────────────────────────
   The masthead control (SiteSearch.tsx), its overlay and the /search page.
   Every colour is a token, so a site's theme carries it. On a desktop the
   button sits on the trailing edge of the bar; below 1200px it is the
   magnifier alone, just ahead of the menu button. */
.ss-btn{
  order:5;margin-inline-start:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border:1px solid rgba(var(--slate-rgb),.22);border-radius:999px;
  color:var(--slate);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.ss-btn:hover{color:var(--slate);border-color:var(--gold);background:rgba(var(--gold-rgb),.1)}
.ss-btn svg{flex:0 0 auto}
@media (max-width:1199px){
  .ss-btn{order:0;margin-inline-start:0;width:42px;height:42px;padding:0;justify-content:center;border-radius:3px}
  .ss-btn__word{display:none}
}
.ss{
  position:fixed;inset:0;z-index:950;
  background:rgba(var(--deep-rgb),.82);backdrop-filter:blur(6px);
  display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(56px,11vh,120px) var(--gutter) 24px;
  animation:hh-rise .28s cubic-bezier(.16,1,.3,1) both;
}
.ss__panel{
  width:min(720px,100%);max-height:calc(100vh - clamp(80px,14vh,150px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-2);color:var(--cream);
  border:1px solid rgba(var(--gold-rgb),.34);border-radius:8px;
  box-shadow:0 50px 130px rgba(0,0,0,.55);
}
.ss__bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(var(--cream-rgb),.14);color:var(--gold)}
.ss__input{
  flex:1 1 auto;min-width:0;background:none;border:0;outline:none;
  color:var(--cream);font:inherit;font-family:var(--serif);font-size:clamp(19px,2.6vw,24px);padding:6px 0;
}
.ss__input::placeholder{color:rgba(var(--cream-rgb),.4)}
.ss__input::-webkit-search-cancel-button{display:none}
.ss__close{
  flex:0 0 auto;background:none;border:1px solid rgba(var(--cream-rgb),.28);border-radius:4px;
  color:var(--cream);font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 9px;cursor:pointer;opacity:.8;
}
.ss__close:hover{opacity:1;border-color:var(--gold)}
.ss__out{overflow-y:auto;padding:6px 0 12px}
.ss__none{margin:0;padding:18px;font-size:14px;opacity:.65}
.ss__group{padding:10px 0 2px}
.ss__label{margin:0;padding:4px 18px 6px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.ss__list{list-style:none;margin:0;padding:0}
.ss__hit{display:block;padding:10px 18px;border-inline-start:2px solid transparent;transition:background .2s ease}
.ss__hit b{display:block;font-weight:400;font-size:15px;line-height:1.35}
.ss__hit span{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;opacity:.62}
.ss__mark{background:none;color:inherit;font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.ss__hit:hover,.ss__hit:focus-visible,.ss__hit.is-first{background:rgba(var(--gold-rgb),.1);border-inline-start-color:var(--gold);color:var(--cream)}
.ssp{max-width:820px;margin:0 auto;padding:clamp(48px,8vw,110px) var(--gutter)}
.ssp__title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.01em}
.ssp__form{display:flex;gap:10px;margin:clamp(20px,3vw,30px) 0 28px}
.ssp__input{
  flex:1 1 auto;min-width:0;background:var(--ink-2);color:var(--cream);
  border:1px solid rgba(var(--cream-rgb),.22);border-radius:4px;padding:13px 15px;font:inherit;font-size:16px;
}
.ssp__go{
  flex:0 0 auto;background:var(--gold);color:var(--slate);border:0;border-radius:4px;
  padding:0 20px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
}
.ssp .ss__label,.ssp .ss__hit{padding-inline:0}
.ssp .ss__hit{padding-inline-start:12px}

/* ── page not found ──────────────────────────────────────
   app/(site)/not-found.tsx: inside the masthead and the footer, so a wrong
   link still lands somewhere that looks like this site and leads back in. */
.nf{max-width:820px;margin:0 auto;padding:clamp(64px,11vw,150px) var(--gutter) clamp(56px,9vw,120px)}
.nf .eyebrow{color:var(--gold);margin-bottom:clamp(14px,2vw,22px)}
.nf h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,88px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.nf__lede{margin:clamp(18px,2.6vw,28px) 0 0;max-width:52ch;font-size:16px;line-height:1.7;font-weight:300;opacity:.85;text-wrap:pretty}
.nf__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,44px)}
.nf__links a{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border:1px solid rgba(var(--gold-rgb),.6);border-radius:2px;color:var(--cream);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.nf__links .nf__primary{background:var(--gold);border-color:var(--gold);color:var(--slate)}
.nf__links a:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--slate)}
@media (max-width:480px){.nf__links a{flex:1 1 100%;justify-content:center}}