/* ==========================================================================
   Palace Group One — base.css
   Design tokens, reset, typography, layout primitives, utilities.
   Load order: base.css → components.css → <page>.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  /* ---- brand palette -------------------------------------------------
     DARK RE-SKIN — 10 Sep 2026, at the client's instruction. They sent
     fchhotels.com as the look they want, and that is a reversal of this
     site's original direction, not an adjustment to it:

       white / cream page   ->  dark navy everywhere
       serif headings       ->  bold geometric sans
       muted gold #D9AE5E   ->  bright amber #F9BE3C

     Almost nothing structural moved to do it. Every surface, rule and
     accent on this site already read from the tokens below, so the flip
     happens HERE. The original value is kept on each line — restore those
     and the light theme comes back exactly as it was.

     `--ink` is still a SURFACE colour, not a text colour, and its JOB is
     unchanged: contrast against the page. Only its direction flipped — it
     used to be a dark band on a light page, it is now the deepest surface
     on a dark one (header, footer, drawer).
     Colours sampled from the reference: page #1B2839 · nav #161F26. */
  --ink:            #101A24;   /* was #14293B — deepest surface */
  --ink-soft:       #0A1119;   /* was #0F1F2D — deeper still, for gradients */
  --green:          #2A5F52;   /* was #1F4A3D — reaches only .orn--green now,
                                  which paints at 10-16% opacity; FCH has no green */
  /* The two big offset blocks behind the About photographs (.collage__shape,
     .story__shape) read from this. On the light theme it was a dark green
     panel against white. Dark-on-dark shows nothing, so on the re-skin the
     offset has to go the other way — a LIFTED surface, not a deeper one. */
  --navy:           #22303F;   /* was #1F4A3D */
  --navy-deep:      #101A24;
  --gold:           #F9BE3C;   /* was #D9AE5E — the accent, sampled from FCH */
  --gold-soft:      #FBD478;   /* was #EBCD92 */
  /* On the light theme this was a DEEPER gold, because #D9AE5E managed only
     2.07:1 on white and the micro-labels failed AA. On a dark ground the
     problem inverts — the bright amber is 9.4:1 on #1B2839 and the deep tone
     would be the unreadable one. Same role, opposite value, so the twelve
     rules that use it need no edit. */
  --gold-deep:      #F9BE3C;   /* was #8A6224 */
  /* Foreground for anything sitting ON the amber, or on white. `--text` used
     to do this job for free, because `--text` was dark. It no longer is, and
     white-on-amber is unreadable — so the seven rules that paired a light
     background with `--text` now point here instead. */
  --on-gold:        #14202E;

  /* ---- neutrals ---- */
  --paper:          #1B2839;   /* was #FFFFFF — the page surface */
  --paper-warm:     #16212F;   /* was #EFEADD — alternating band */
  --stone:          #121A24;   /* was #E6DFCE — deepest band */
  /* NEW. On white, a card was simply the page colour plus a border. On a dark
     page that is invisible, so a raised surface has to become a real token
     rather than a reuse of --paper. Cards, dropdowns and notices use it. */
  --card:           #223143;
  --text:           #FFFFFF;   /* was #121212 */
  --body:           rgba(255,255,255,.74);   /* was #4A4A48 */
  --line:           rgba(255,255,255,.14);   /* was rgba(20,41,59,.16) */
  --line-light:     rgba(255,255,255,.16);

  /* ---- type ----
     --display was called --serif until the re-skin. It is a geometric SANS
     now, so the old name would have been a trap for whoever edits this next;
     it was renamed across all four stylesheets in the same pass.
     Poppins is actually FETCHED (see the <link> in every page head). The old
     stack named Libre Caslon and Montserrat but loaded neither, so the site
     had been rendering in Georgia and Segoe UI the whole time — which is a
     large part of why the "elegant serif" direction never read as premium. */
  --display: 'Poppins','Montserrat','Segoe UI',system-ui,sans-serif;
  --sans:    'Poppins','Montserrat','Segoe UI',system-ui,sans-serif;

  /* Header geometry. The bar is a fixed height now (it used to size itself from
     padding), and the amber toggle block is a full-height column flush to the
     right edge. Both live here because the hero, the page heroes and the drawer
     all have to clear the bar — deriving those from the token means the header
     can be resized in one place without re-tuning four other rules. */
  --hdr-h:       clamp(62px,6.4vw,92px);
  --hdr-cta:     clamp(58px,11vw,150px);

  /* rhythm */
  --wrap:        1280px;
  --wrap-narrow: 980px;
  --gutter:      clamp(20px,4vw,56px);
  /* Vertical rhythm. Every section pads from these two tokens — change them here
     and the whole page retightens. At 1440px this gives ~104px between sections. */
  --section:     clamp(32px,3.6vw,58px);
  --section-sm:  clamp(26px,2.8vw,44px);

  /* Micro-labels. Every small uppercase kicker on the site — section eyebrows
     ("Who We Are", "What We Do"), card flags ("Hilton", "Our Team"), metric
     captions, breadcrumbs, contact keys, team roles — reads from these two
     tokens and nothing else. They had drifted between 9px and 13px with six
     different tracking values, which is what made the set look unconsidered.
     Change the size HERE, never on an individual rule. */
  --label:       14px;
  --label-track: .18em;

  /* Body copy. Every description, paragraph and standfirst on the site reads
     from this — the prose that sits under a heading, inside a card, in the
     footer. It does NOT cover the uppercase micro-labels (--label), form
     helper text, or the small UI numbers; those are a different family and
     would look broken at this size. Change it HERE, not on a rule. */
  --copy:        21px;

  /* motion */
  --ease:      cubic-bezier(.4,0,.2,1);
  --ease-out:  cubic-bezier(.2,.6,.2,1);
  --t-fast:    .35s;
  --t-mid:     .55s;
  --t-slow:    .9s;

  /* elevation */
  --shadow-sm: 0 2px 18px rgba(14,17,22,.06);
  --shadow-md: 0 20px 48px rgba(14,17,22,.12);
  --shadow-lg: 0 40px 90px rgba(14,17,22,.20);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--on-gold)}
/* The UA rule for [hidden] is display:none, but ANY author rule that sets a
   display value beats it — so .property-card{display:flex} would keep a hidden
   card visible. This guard makes the attribute reliable everywhere. */
[hidden]{display:none!important}

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
/* weight 700, not 400. A serif carries a display heading at book weight; a
   geometric sans at 400 just looks unfinished, and the reference sets every
   heading bold. The tighter tracking goes with the heavier weight. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--text);          /* white on the dark page; light bands override */
}
h1{font-size:clamp(40px,6vw,86px)}
h2{font-size:clamp(30px,4.2vw,60px)}
h3{font-size:clamp(21px,2vw,30px);line-height:1.2}
h4{font-size:clamp(17px,1.3vw,21px);line-height:1.3}

p{font-size:var(--copy)}
.lead{font-size:var(--copy);line-height:1.85;color:var(--body)}

/* The two-tone heading device the reference uses on every section title:
   the first half plain, the emphasis in amber. Wrap the second half in this.
   <h2>Maximising Your <span class="hl">Hotel's Potential</span></h2> */
.hl{color:var(--gold)}

/* eyebrow — the small gold label above every section heading */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:var(--label);font-weight:600;
  letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:15px;   /* readable on white and cream */
}
.eyebrow::before{content:'';width:36px;height:1px;background:var(--gold);opacity:.95}
.eyebrow--center{justify-content:center}
.eyebrow--plain::before{display:none}

/* oversized ghost word used as a background shape behind headings */
.ghost-word{
  position:absolute;font-family:var(--display);
  font-size:clamp(90px,17vw,260px);line-height:.8;
  /* was var(--ink) at .06 — a dark word on a light page. On the dark page a
     dark word is simply invisible, so the ghost has to be light instead. */
  color:#fff;opacity:.055;letter-spacing:-.04em;
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.wrap--wide{max-width:1560px}

/* overflow:hidden is load-bearing — ornaments are placed with negative offsets
   and would otherwise widen the page and create a horizontal scrollbar. */
.section{padding-block:var(--section);position:relative;overflow:hidden}
.section--sm{padding-block:var(--section-sm)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section--paper{background:var(--paper-warm)}
.section--stone{background:var(--stone)}
/* Dark surfaces: white text, lighter gold accent. Add any new dark section to
   this selector list so the text colour flips with the background. */
.section--ink{background:var(--ink)}
.section--green{background:var(--green)}
.section--ink,.section--green{color:rgba(255,255,255,.78)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4,
.section--green h1,.section--green h2,.section--green h3,.section--green h4{color:#fff}
.section--ink .eyebrow,.section--green .eyebrow{color:var(--gold-soft)}
.section--ink .eyebrow::before,.section--green .eyebrow::before{background:var(--gold-soft)}

/* section heading block */
.sec-head{max-width:62ch;position:relative;z-index:1}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:14px;max-width:52ch}
.sec-head--center p{margin-inline:auto}

/* --------------------------------------------------------------------------
   5. Utilities
   -------------------------------------------------------------------------- */
.u-muted{color:var(--body)}
.u-center{text-align:center}
.u-nowrap{white-space:nowrap}
.u-rule{height:1px;background:var(--line);border:0}
.u-mt-s{margin-top:18px}.u-mt-m{margin-top:32px}.u-mt-l{margin-top:52px}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   6. Image placeholders
   Temporary stand-ins until the client supplies photography.
   Delete this whole block once real images land in /assets/img/.
   -------------------------------------------------------------------------- */
.ph{position:relative;overflow:hidden;background:var(--ink)}
.ph::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.16), transparent 55%),
    var(--ph-grad, linear-gradient(155deg,#232a5c,#4a5480 55%,#171b3a));
  background-size:cover;
}
.ph::after{
  content:attr(data-label);position:absolute;left:14px;bottom:12px;
  font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.4);border:1px dashed rgba(255,255,255,.26);
  padding:5px 10px;pointer-events:none;
}
/* palette variants so adjacent placeholders don't look identical */
.ph--dusk  {--ph-grad:linear-gradient(155deg,#2a2f63,#6b6ea0 52%,#1a1e42)}
.ph--stone {--ph-grad:linear-gradient(155deg,#3a3f52,#8e8f9c 55%,#2a2e3d)}
.ph--brass {--ph-grad:linear-gradient(155deg,#2f3252,#8a7b5c 58%,#1f2340)}
.ph--slate {--ph-grad:linear-gradient(155deg,#1d2340,#4d6079 55%,#151a30)}
.ph--warm  {--ph-grad:linear-gradient(155deg,#3b3550,#9a8574 58%,#241f38)}

/* --------------------------------------------------------------------------
   6b. Ornaments — the decorative shape layer

   Rings, ovals and arcs that sit BEHIND content to give each section a piece of
   graphic identity instead of plain stacked blocks. Rules:
     · always inside a `position:relative; overflow:hidden` parent
     · never interactive, never announced (aria-hidden + pointer-events:none)
     · content must sit at z-index 1 or above
     · opacity stays low — an ornament that competes with the copy is a mistake
   -------------------------------------------------------------------------- */
.orn{position:absolute;pointer-events:none;z-index:0;border-radius:50%}

/* thin outlined circle */
.orn--ring{border:1px solid currentColor;opacity:.13}
.orn--ring-2{border:1px solid currentColor;opacity:.07}
/* soft filled ellipse — a wash of colour, not a solid shape */
.orn--oval{
  background:radial-gradient(closest-side,currentColor,transparent 72%);
  opacity:.10;filter:blur(.5px);
}
/* half-ring: an arc rather than a full circle */
.orn--arc{
  border:1px solid currentColor;opacity:.16;
  border-right-color:transparent;border-bottom-color:transparent;
  transform:rotate(-32deg);
}
/* dotted field */
.orn--dots{
  border-radius:0;opacity:.16;
  background-image:radial-gradient(currentColor 1px,transparent 1px);
  background-size:15px 15px;
}
/* colour helpers — ornaments inherit via currentColor */
.orn--gold{color:var(--gold)}
.orn--green{color:var(--green)}
/* was var(--ink) — an ornament the same colour as the darkest surface draws
   nothing at all now that the page itself is dark. A cool light tone reads
   at the 7-16% opacities the ornament rules use. */
.orn--ink{color:#8FA7BE}
.orn--light{color:#fff}

/* motion: long, slow drifts that are felt rather than watched */
.orn--float{animation:orn-float 16s var(--ease) infinite alternate}
.orn--float-slow{animation:orn-float 26s var(--ease) infinite alternate}
.orn--turn{animation:orn-turn 90s linear infinite}
.orn--breathe{animation:orn-breathe 11s var(--ease) infinite alternate}
@keyframes orn-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-26px,0)}}
@keyframes orn-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes orn-breathe{from{transform:scale(1);opacity:.08}to{transform:scale(1.08);opacity:.15}}

/* a short gold rule that sits under a heading */
.flourish{display:block;width:54px;height:2px;background:var(--gold);margin-top:18px}
.flourish--center{margin-inline:auto}

/* --------------------------------------------------------------------------
   7. Scroll-reveal (paired with assets/js/main.js)

   IMPORTANT: every hidden state is scoped to .has-js, which an inline script in
   <head> adds to <html>. If JavaScript is unavailable or errors out, none of
   these rules apply and the full page renders normally. Never write a bare
   [data-reveal]{opacity:0} rule here — that would blank the site without JS.
   -------------------------------------------------------------------------- */
.has-js [data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.has-js [data-reveal="fade"]{transform:none}
.has-js [data-reveal="right"]{transform:translateX(44px)}
.has-js [data-reveal="left"] {transform:translateX(-44px)}
.has-js [data-reveal].is-in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.10s}
[data-delay="2"]{transition-delay:.20s}
[data-delay="3"]{transition-delay:.30s}
[data-delay="4"]{transition-delay:.40s}
[data-delay="5"]{transition-delay:.50s}

/* line-by-line mask reveal for display headings */
.reveal-line{display:block;overflow:hidden}
.reveal-line > span{display:block}
.has-js .reveal-line > span{transform:translateY(105%);transition:transform 1s var(--ease-out)}
.has-js .is-in .reveal-line > span{transform:none}
.has-js .is-in .reveal-line:nth-child(2) > span{transition-delay:.1s}
.has-js .is-in .reveal-line:nth-child(3) > span{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .has-js [data-reveal]{opacity:1;transform:none}
  .has-js .reveal-line > span{transform:none}
}