/* ==========================================================================
   PAVILION BY RAMS - the shared foundation
   ==========================================================================

   THE ONE FILE ALL THREE DOCUMENTS LINK.

     index.html
       -> sections/location.html      (iframe)
            -> sections/map.html      (iframe)

   Each of those is its own document, so nothing cascades in from the page
   that embeds it. Until now they solved that by keeping hand-written copies
   of the palette, the font roles and the fit factor -- three copies of the
   same numbers, and no way to tell from any one of them that the other two
   existed. This file is the single copy. Change a colour here and all three
   documents change together.

   Only put something here if ALL THREE genuinely need it. Anything the page
   alone uses belongs in pavilion.css; anything one iframe alone needs stays
   in that file's own <style>.

   THE ONE THING THAT IS DELIBERATELY NOT SHARED is --z inside map.html. The
   factor below measures the viewport against a 1890px reference, which is
   right for the page and for location.html (a full-bleed frame, so its 100vw
   is the parent's). map.html is an iframe INSIDE that iframe: its 100vw is
   the ~600px map plate, not the page, so it redeclares --z against 600px in
   its own <style>, after this file. Do not "fix" that to match.

   Sections:
     01 . brand     colour primaries, the three type stacks, @font-face
     02 . tokens    the page ramp, font roles, spacing, easing, the fit factor
     03 . reset     box-sizing, the one rule every document repeated
   ========================================================================== */

/* ==============================================================================
  01 . brand
  Colour primaries, the three type stacks and every @font-face. Was
  01-brand.css, which all three documents already linked.
   ============================================================================== */
/* ═══════════════════════════════════════════════════════════════════════
   PAVILION BY RAMS — brand foundation
   Source: PBR Brand Guidelines_2025.pdf

   Every colour below is taken verbatim from the guidelines. The only values
   that are NOT in the document are the four derived shades of Pavilion Blue
   (--pv-blue-deep … --pv-blue-600), which a screen UI needs for depth and
   which are tints/shades of the brand blue rather than new colours.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── PRIMARY (guidelines p.08) ────────────────────────────────────── */
  --pv-blue:#000851;        /* PAVILION BLUE   RGB 0,8,81      CMYK 100,90,0,68 */
  --pv-aqua:#60EDF4;        /* PAVILION AQUA   RGB 96,237,244  CMYK 61,0,2,4    */
  --pv-white:#FFFFFF;       /* PAVILION WHITE                                    */

  /* ── SECONDARY (guidelines p.09) ──────────────────────────────────── */
  --pv-cadet:#3C8FA2;       /* CADET BLUE   */
  --pv-turquoise:#57B4BE;   /* TURQOUISE    */
  --pv-sky:#98C9F1;         /* SKY BLUE     */
  --pv-soft:#D7F0FF;        /* SOFT BLUE    */
  --pv-emerald:#004C15;     /* EMERALD      */
  --pv-teal:#006352;        /* TEAL         */
  --pv-gold:#C3A256;        /* GOLD         */
  --pv-sand:#E9D4A1;        /* SAND         */
  --pv-purple:#35005B;      /* ROYAL PURPLE */
  --pv-violet:#8E56C0;      /* VIOLET       */

  /* ── derived depth ramp, all from Pavilion Blue ───────────────────── */
  --pv-blue-deep:#000851;
  --pv-blue-850:#000851;
  --pv-blue-800:#000851;
  --pv-blue-700:#000851;
  --pv-blue-600:#000851;

  /* ── TYPOGRAPHY (guidelines p.11–12) ──────────────────────────────────
     The brand specifies Termina, BR Firma and PP Pangaia. All three are
     commercially licensed and are not bought, so the site ships free,
     self-hosted stand-ins chosen to match each role's weight and colour:

       Termina Medium         → Metropolis Medium          (Unlicense/public domain)
       BR Firma Light         → Kumbh Sans Light 300       (SIL OFL)
       BR Firma Regular       → Kumbh Sans Regular 400     (SIL OFL)
       PP Pangaia Light Ital. → Hedvig Letters Serif Ital. (SIL OFL)

     The files live in assets/fonts/ and are served from here, so no page
     needs a Google Fonts <link> any more. The @font-face rules sit in this
     file rather than 99-type.css because sections/location.html and
     sections/map.html load only this stylesheet.

     Each stack still names the real brand face first: buy the licence, drop
     the woff2 in beside these and add its @font-face, and the whole site
     switches over.                                                       */

  /* Metropolis ships one weight here. The subheading role asks for 500–700
     in places, so the face claims that whole range — otherwise the browser
     fakes a bold and thickens the brand mark. Termina is used at Medium in
     the guidelines, so Medium everywhere is the faithful reading. */
  /* The Arabic faces are the LAST entry in each stack, not a separate set of
     rules. Font fallback is per character: Metropolis and Kumbh Sans have no
     Arabic glyphs at all, so an Arabic character falls through to the Noto
     face on its own. Nothing in the type system has to know which language it
     is rendering, and an Arabic word in an English page still comes out right.
     Paired for tone: Kufi is the geometric one, like Metropolis. */
  --f-termina:'Termina','Metropolis','Noto Kufi Arabic',system-ui,sans-serif;
  --f-firma:'BR Firma','Kumbh Sans','Noto Sans Arabic',system-ui,sans-serif;
  --f-pangaia:'PP Pangaia','Hedvig Letters Serif','Noto Sans Arabic',Georgia,serif;
}

/* ── WEBFONTS — self-hosted, in assets/fonts/ ─────────────────────────────
   Paths are relative to this file, so index.html at the root and the two
   documents in sections/ all resolve them correctly. */

@font-face{
  font-family:'Metropolis';
  src:url('../fonts/metropolis-medium.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* Kumbh Sans is variable (wght 100–900), so Light and Regular are one file. */
@font-face{
  font-family:'Kumbh Sans';
  src:url('../fonts/kumbh-sans-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Kumbh Sans';
  src:url('../fonts/kumbh-sans-var-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Hedvig Letters Serif is published upright only. The display role is an
   italic, so assets/fonts/ also carries a 10° oblique cut generated from the
   regular (see the README there). Baking the slant keeps it identical across
   browsers, which a synthesised italic is not. Only 400 exists; the face
   claims 300–400 so the role's Light request resolves without faux weight. */
@font-face{
  font-family:'Hedvig Letters Serif';
  src:url('../fonts/hedvig-letters-serif.woff2') format('woff2');
  font-weight:300 400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hedvig Letters Serif';
  src:url('../fonts/hedvig-letters-serif-ext.woff2') format('woff2');
  font-weight:300 400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Hedvig Letters Serif';
  src:url('../fonts/hedvig-letters-serif-italic.woff2') format('woff2');
  font-weight:300 400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hedvig Letters Serif';
  src:url('../fonts/hedvig-letters-serif-italic-ext.woff2') format('woff2');
  font-weight:300 400; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── ARABIC SCRIPT — Arabic and Kurdish Sorani ────────────────────────────
   Both are Noto, both SIL OFL, both variable 100–900, and both carry the extra
   Sorani letters (ڕ ڵ ۆ ێ پ چ ژ گ) that a plain Arabic font is missing — a
   font without them renders Kurdish as boxes.

   unicode-range is what keeps them free: the English page never contains an
   Arabic character, so a browser reading it never fetches these files. They
   cost nothing until a page is actually in Arabic or Kurdish. */
@font-face{
  font-family:'Noto Kufi Arabic';
  src:url('../fonts/noto-kufi-arabic-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:'Noto Sans Arabic';
  src:url('../fonts/noto-sans-arabic-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF;
}

/* ── THE SUPPLIED ARABIC/KURDISH FACES ────────────────────────────────────
   One face ships: UniQAIDAR, and it sets the headings in both languages.
   330 code points, all twelve letters that define Kurdish Sorani and all four
   that Arabic uses and Kurdish does not — it draws both scripts correctly.

   The two Rabar files are NOT declared here, and their @font-face rules were
   removed on 2026-09-08 because they pointed at rabar-21.woff2 and
   rabar-22.woff2, which have never existed in this folder. A src that 404s
   costs nothing while nothing references the family, and is a trap the moment
   someone does.

   Rabar_21.ttf and Rabar_22.ttf themselves sit in assets/fonts unreferenced.
   They are the delivered files and they draw the wrong letters — the measured
   case against them, with the glyph comparisons, is in 98-rtl.css above the
   html[lang="ar"] block. Read that before wiring them in again.

   unicode-range keeps UniQAIDAR free on the English page, exactly as it does
   the Noto faces: an English document contains no Arabic character, so the
   browser never fetches it. */
/* IBM Plex Sans Arabic Regular 400 — the Arabic and Kurdish text face.
   SIL OFL, self-hosted like everything else here, so no Google Fonts <link>
   and no third-party request at run time.

   Checked before it was wired in, which is the lesson the Rabar files left:
   681 code points, all TWELVE letters that define Kurdish Sorani, all four
   that Arabic uses and Kurdish does not, no glyph sitting at the wrong code
   point, and real OpenType Arabic shaping (GSUB/GPOS, script `arab`). It can
   set both languages on its own — which is exactly what the Rabar pair could
   not do.

   Two files, split the way Google Fonts subsets them. The Arabic one carries
   the script; the Latin one carries the numerals and the units — "2,000,000"
   and "m²" are Latin characters inside an Arabic sentence, and per-character
   fallback means they resolve here rather than to whatever the OS offers. */
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/ibm-plex-sans-arabic.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/ibm-plex-sans-arabic-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'UniQAIDAR Hewal';
  src:url('../fonts/uniqaidar-hewal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF;
}

/* ── LOGO ────────────────────────────────────────────────────────────────
   Extracted as vector from the guidelines PDF, so the wordmark carries the
   real Termina outlines without needing the font. Colour comes from
   currentColor: Pavilion Blue on white or light, white or aqua on dark. */
.pv-logo{display:block;color:var(--pv-white)}


/* ==============================================================================
  02 . tokens
  The page ramp, the font roles, spacing, easing and the --z fit factor.
  Was mirrored by hand into sections/location.html; the --f-* roles were
  additionally declared twice inside pavilion.css (00-tokens and 99-type).
   ============================================================================== */
:root{
  /* ── THE GROUND — Pavilion Blue ─────────────────────────────────────
     Back to the brand primary. The page was #000851 from 2026-09-06 and the
     client asked for the blue again.

         #000851   the ground        --navy-950 / --navy-900
         #000A6B   the raised step   --navy-850
         #F5F5F5   text              --ivory

     A ground never moves on its own. The black palette changed the ground,
     the lift, the line colour and the text together, because each was picked
     to sit on the one under it — so putting only #000851 back would have left
     grey cards and grey rules floating on navy. The whole ramp comes back;
     the text does not, because #F5F5F5 is the client's text value and is
     indistinguishable from white against this ground.

     The names are kept. Renaming --navy-950 to --ink-950 would touch 41 rules
     across four files for no behaviour; what a token MEANS is its position in
     the ramp, not its hue. Two things stay from the black palette on purpose:
     the gold --rule pair, which was asked for separately and later, and
     --edge, which is a control's border and reads on either ground.

     850 is the raised surface: one step above the ground reads as lift
     against #000851. Where a line has to sit ON a raised surface it cannot be
     850 or it disappears — those use --hair-2. */
  --navy-950:#000851; --navy-900:#000851; --navy-850:#000A6B;
  --navy-800:#000D85; --navy-700:#0A17A0; --navy-600:#1B2DBE;
  /* Pavilion Aqua carries the accents */
  --gold-300:#D7F0FF; --gold-400:#60EDF4; --gold-500:#60EDF4;
  /* Turquoise, an approved secondary (guidelines p.09). The brochure CTA is
     the only thing on the page wearing it: aqua is already spoken for by the
     Register button and every hover sweep, so a second aqua CTA on the hero
     would read as the same button twice. Turquoise sits between aqua and the
     blue ground, so it stays in the family while standing on its own. */
  --turq:#57B4BE;
  --ivory:#F5F5F5;
  /* Both hairlines are white at a low alpha, which is what they were before
     the black palette made --hair a flat #000A6B. A flat line colour has to
     be chosen for one ground; an alpha works on the ground, on a raised
     surface and over a photograph, and this page has all three. */
  --hair:rgba(255,255,255,.12); --hair-2:rgba(255,255,255,.06);

  /* ── A CONTROL'S EDGE IS NOT A RULE ────────────────────────────────
     These arrived while --hair was a flat #000A6B: right for a divider drawn
     ON the ground, wrong for something you are meant to press — every ghost
     button, the language pill and the footer's social circles turned into
     dark rings you could barely find.

     --hair is a white hairline again, so that particular failure is gone. The
     split stays anyway: a rule and a control's edge are different jobs, and
     .btn--glass was already using these values, which is why Enquire and Get
     the brochure never had the problem in the first place. */
  --edge:rgba(255,255,255,.26); --edge-on:rgba(255,255,255,.40);

  /* ── THE GOLD RULES — one switch, and that is the whole point of them ──
     The lines that separate one thing from the next in 02 The Collection:
     the divider between one villa panel and the next, and the rail's own top
     and bottom edges. They are tokens rather than colours written at the
     rules because this is a taste decision on someone else's brand, and it
     has to be one edit to take back rather than a hunt through a stylesheet.

     TO GO BACK TO THE ORIGINAL HAIRLINES, change these two lines and
     nothing else:

         --rule:rgb(255 255 255 / .12); --rule-2:rgb(255 255 255 / .06);

     Gold needs more alpha than white did to read at the same weight — it is
     a mid-tone against navy where white is a highlight — so these are not
     .12 and .06 with a new hue.

     What is on the switch: the divider between one villa panel and the next,
     the rail's own top and bottom edges, the rule above a panel's stats, the
     same rule in the villa overlay, the line down the middle of that overlay
     (2px rather than 1 — it divides two halves of a screen rather than two
     rows of a list), the scrubber's track, and the row rules in 01's At a
     glance table. All of them are borders, so all of them take a colour.

     Two gold lines sit just outside the switch because they are a shade
     rather than a rule and would go grey at 42%: the At a glance table's
     head rule, which is the stronger of that pair on purpose, and the
     scrubber's fill. Both are var(--pv-gold).

     The overlay's GALLERY CONTROLS — the two arrows and the expand button —
     are gold too, but they are a control colour rather than a rule and are
     written at .vg__arw in pavilion.css.

     What is NOT, and cannot be: 03 Amenities' grid lines. They are the
     grid's own background seen through the gaps rather than a border, so no
     colour token can reach them — their revert is written out in full at
     .amen__grid in pavilion.css. */
  /* Gold, and back ON. Turning these grey with the rest of the palette took
     the At a glance rows, the registration form's field underlines and the
     FAQ rules with them, and those are the lines the eye actually follows
     down a page — asked for in gold again. The long note above lists
     everything on this one switch. --rule-2 is the half-strength member of
     the pair and keeps its ratio. */
  --rule:rgb(195 162 86 / .42); --rule-2:rgb(195 162 86 / .3);
  --mute:rgba(245,245,245,.62); --faint:rgba(245,245,245,.36);
  --f-display:var(--f-firma);
  --f-accent:var(--f-pangaia);

  /* ── THE FIT FACTOR ─────────────────────────────────────────────────────
     This page was drawn at desktop width and never scales back down. Every
     clamp below caps out somewhere around 1445px, so a 2560px monitor and a
     1512px laptop get *the same* 89.6px .h2, the same 31.2px .lede and the
     same 1560px content column — except on the monitor that column floats in
     500px of air, and on the laptop it runs edge to edge. That is the whole
     reason the site reads correctly at 80% zoom on a 13" screen: 1512 / .8 is
     1890, which puts the laptop back into the width the design was drawn for.

     --z is that ratio, so the reference below IS 1890px. It is exactly 1 from
     1890px up — a 1920 or 1440p monitor is untouched to the pixel — and eases
     down from there with no breakpoint to resize through.

     Apply it to the CEILING of a clamp, not around the whole thing:

         font-size:clamp(2.2rem,6.2vw,calc(5.6rem * var(--z)))

     Wrapping the clamp would drag the floor down too and shrink phone type.
     Scaling only the cap touches nothing except the widths where the cap was
     binding — which is exactly the band that was broken.

     tan(atan2()) is how you get a unitless ratio out of a length in CSS:
     calc(100vw / 1890px) is not a number, so it cannot be a multiplier. The
     rail and the villa overlay carry their own factors for a different
     problem (fitting a fixed card into the viewport HEIGHT) — see the note
     in 70-villas.css.

     It stays 1 below 1101px, and the live value is set in the media query
     under this block. There is nothing to correct down there: the sections
     have already stacked, the vw terms have taken over from the caps, and
     applying the factor only shrank phone body copy. 1101 is the same line
     the amenity grid already unpins itself at. */
  --z:1;
  /* Reading type parts company with --z on purpose. Zoom would take body copy
     to 12.4px and a 9.5px label to 7.4px; this is a site people read prices
     and dimensions on. Space and display type carry the shrink, text holds. */
  --zt:max(var(--z),.92);

  --pad:clamp(20px,5vw,calc(88px * var(--z))); --maxw:calc(1560px * var(--z));
  --navh:calc(92px * var(--z));   /* the fixed bar, before it condenses on scroll */
  --e:cubic-bezier(.22,1,.36,1); --e2:cubic-bezier(.16,1,.3,1);
}

/* The four brand type roles, named once. 01 above owns the @font-face rules
   and the --f-firma/--f-pangaia/--f-termina stacks; these are the aliases the
   rest of the kit reads. They used to sit in the 99-type section of
   pavilion.css, which the iframes do not load. */
:root{
  --f-sub:var(--f-termina);
  --f-display:var(--f-firma); --f-accent:var(--f-pangaia); --f-micro:var(--f-sub);
}

/* the band where the design was drawn wider than the screen it is on */
@media(min-width:1101px){
  :root{--z:clamp(.78, tan(atan2(100vw,1890px)), 1)}
}


/* ==============================================================================
  03 . reset
  All three documents declared this line for themselves.
   ============================================================================== */
*,*::before,*::after{box-sizing:border-box}

/* Visually hidden, but still read. clip-path over display:none on purpose:
   display:none and visibility:hidden both take an element out of the
   accessibility tree, so a heading hidden that way is hidden from a screen
   reader too — which is the one reader it exists for. Used by the landing
   page's h1, where the design has no visible page title. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}