/* ==========================================================================
   Marea Mirage design tokens + type scale.
   VENDORED COPY, pulled 16 Sep 2026 from the inline <style> block on
   https://mareamirage.com/ . These live inline on every page of the site
   rather than in styles.css, so /mascara cannot inherit them by link and
   has to carry its own copy.

   The compiled Tailwind (/styles.css) IS inherited live and stays in sync.
   If the brand tokens or type scale ever change on the live site, re-pull
   this file. Do not hand-edit it.
   ========================================================================== */


  /* ============================================================
     TOKENS — ten colours, nothing outside this list.
     Sampled from the logo mark: gold sun above teal water.
     ============================================================ */
  :root{
    --sun:        #D1A65D;
    --tide:       #62C3BC;
    --abyss:      #142F2E;
    --shell:      #FBF7EF;

    --sun-light:  #E8C88A;
    --sun-deep:   #A9763A;
    --tide-pale:  #B8E4E0;
    --tide-deep:  #2E8A85;
    --abyss-deep: #0A1C1B;
    --shell-warm: #F4EDE0;

    /* Same ten colours as channels, so Tailwind's /alpha modifiers work.
       Bare var() tokens silently break `text-abyss/70` and friends. */
    --sun-rgb:        209 166 93;
    --sun-light-rgb:  232 200 138;
    --sun-deep-rgb:   169 118 58;
    --tide-rgb:       98 195 188;
    --tide-pale-rgb:  184 228 224;
    --tide-deep-rgb:  46 138 133;
    --abyss-rgb:      20 47 46;
    --abyss-deep-rgb: 10 28 27;
    --shell-rgb:      251 247 239;
    --shell-warm-rgb: 244 237 224;

    --hairline:   1px solid rgb(var(--abyss-rgb) / .10);
    --ease:       cubic-bezier(.16,1,.3,1);
  }

  /* ---------- THE THREE GRADIENTS ----------
     Reused, never reinvented per component, and only on surfaces big enough
     that they don't collapse into one muddy colour (~200px+). */
  .g-deep-water   { background:linear-gradient(180deg, var(--abyss), var(--tide-deep), var(--tide)); }
  .g-golden-hour  { background:linear-gradient(180deg, var(--sun-light), var(--sun), var(--sun-deep)); }
  .g-full-horizon { background:linear-gradient(180deg,
                      var(--abyss-deep) 0%, var(--abyss) 24%, var(--tide-deep) 52%,
                      var(--tide) 70%, var(--sun) 92%, var(--sun-light) 100%); }

  html{ -webkit-font-smoothing:antialiased; }
  body{ background:var(--shell); color:var(--abyss); }

  /* ============================================================
     TYPE — Marcellus display, Karla body. Scale structure kept from
     the previous system; only the families and casing changed.
     ============================================================ */
  .t-hero{
    font-family:Oswald,sans-serif; font-weight:700; text-transform:uppercase;
    font-size:clamp(3rem,9.6vw,9rem); letter-spacing:.005em; line-height:.88;
  }
  .t-h2{
    font-family:Oswald,sans-serif; font-weight:700; text-transform:uppercase;
    font-size:clamp(2.35rem,6.4vw,5.4rem); letter-spacing:.01em; line-height:.94;
  }
  .t-h3{
    font-family:Oswald,sans-serif; font-weight:600; text-transform:uppercase;
    font-size:clamp(1.35rem,2.4vw,2rem); letter-spacing:.04em; line-height:1.1;
  }
  .t-tile{
    font-family:Oswald,sans-serif; font-weight:700; text-transform:uppercase;
    font-size:clamp(1.75rem,4vw,3.4rem); letter-spacing:.05em; line-height:1;
  }
  .t-eyebrow{
    font-family:Oswald,sans-serif; font-weight:500; text-transform:uppercase;
    font-size:.75rem; letter-spacing:.28em; line-height:1.5;
    /* No colour here on purpose. Every eyebrow states its own via a utility,
       so the cascade can't flip between the CDN build (its sheet loads last)
       and the compiled build (styles.css loads first).
       Note on the spec's --tide-deep: at .7rem it measures 3.86:1 on --shell
       and 3.54:1 on --shell-warm, both under the 4.5:1 AA floor, so light
       grounds use --abyss and the teal signal lives on the rule beneath. */
  }
  .t-hero__gold{ color:inherit; font-style:normal; }
  .t-lead{ font-family:Karla,sans-serif; font-weight:300;
           font-size:clamp(1.0625rem,1.4vw,1.3125rem); line-height:1.7; }
  .t-data{ font-family:Karla,sans-serif; font-weight:400;
           font-size:.8125rem; letter-spacing:.06em; }

  /* ============================================================
     BUTTONS — pill, uppercase, letterspaced. Never sharp.
     --sun grounds get --abyss text (6.3:1); --shell grounds too.
     ============================================================ */
  .btn{
    font-family:Oswald,sans-serif; font-weight:600; text-transform:uppercase;
    font-size:.9rem; letter-spacing:.16em; padding:1.15rem 2.75rem;
    display:inline-block; border:1px solid transparent; border-radius:0;
    transition:background-color .45s var(--ease), color .45s var(--ease),
               border-color .45s var(--ease), transform .45s var(--ease);
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-solid{ background:var(--tide); color:var(--abyss); border-color:var(--tide); }
  .btn-solid:hover{ background:var(--tide-pale); border-color:var(--tide-pale); }
  /* on dark grounds the primary is a solid shell pill */
  .btn-onDark{ background:var(--tide); color:var(--abyss); border-color:var(--tide); }
  .btn-onDark:hover{ background:var(--tide-pale); border-color:var(--tide-pale); }
  .btn-ghost{ background:transparent; color:var(--shell); border-color:rgba(251,247,239,.85); }
  .btn-ghost:hover{ background:var(--shell); color:var(--abyss); border-color:var(--shell); }
  .btn-ghost-dark{ background:transparent; color:var(--abyss); border-color:rgb(var(--tide-deep-rgb) / .85); }
  .btn-ghost-dark:hover{ background:var(--abyss); color:var(--shell); border-color:var(--abyss); }

  /* ============================================================
     THE SIGNATURE — the logo's three stacked bars, reused as
     structure. Four appearances site-wide, no more: hero horizon,
     one section divider, footer rule. Widths step 88 / 66 / 40.
     ============================================================ */
  .bars{ display:flex; flex-direction:column; gap:clamp(.55rem,1.1vw,1rem); width:100%; }
  .bars i{ display:block; height:clamp(9px,1.1vw,15px); background:var(--tide); }
  /* Stepped and offset rather than concentric — the logo's bars read as water
     crossing the frame, not as a centred ornament. */
  .bars i:nth-child(1){ width:88%; margin-left:6%;  background:var(--tide); }
  .bars i:nth-child(2){ width:66%; margin-left:17%; background:var(--tide-pale); }
  .bars i:nth-child(3){ width:40%; margin-left:30%; background:var(--tide-deep); }
  .bars--tight{ width:min(680px,84vw); margin-inline:auto; }

  /* short centred rule under every eyebrow */
  .rule{ display:block; width:56px; height:2px; background:var(--tide); }

  /* ============================================================
     IMAGE PLACEHOLDERS — exempt from the ten-colour rule. These
     are stand-ins for photography, not UI surfaces. Delete the
     block when real images land.
     ============================================================ */
  .ph{ position:relative; overflow:hidden;
       background:linear-gradient(180deg,#BFE3EC 0%,#8FD6DC 30%,#3FC2BC 48%,#14807E 66%,#0C5A5E 82%,#E6D5B4 100%); }
  .ph::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 70% at 70% 18%, rgba(255,226,175,.55) 0%, rgba(255,226,175,0) 60%);
  }
  .ph[data-shot*="golden hour"], .ph[data-shot*="Sunset"], .ph[data-shot*="sunset"]{
    background:linear-gradient(180deg,#F3C98A 0%,#EFA96B 22%,#D98055 40%,#2E7E86 62%,#12545F 82%,#0B3742 100%);
  }
  .ph[data-shot*="Booth"], .ph[data-shot*="Rig"], .ph[data-shot*="truss"]{
    background:linear-gradient(180deg,#7FB6C6 0%,#3E8E9B 34%,#1B5A66 62%,#0E3742 100%);
  }
  .ph[data-shot*="rooftop"], .ph[data-shot*="dusk"]{
    background:linear-gradient(180deg,#C9A0C4 0%,#9A7BB4 26%,#5E6A96 50%,#2E4A6B 74%,#16293F 100%);
  }
  .ph[data-shot*="Villa"], .ph[data-shot*="terrace"]{
    background:linear-gradient(180deg,#E9F4F3 0%,#A9E0DC 26%,#4FC8C2 50%,#158C88 74%,#E8D9BC 100%);
  }
  .ph[data-shot*="Water surface"]{
    background:linear-gradient(150deg,#2FBDBA 0%,#159A9C 40%,#0C6D75 70%,#1FA7A4 100%);
  }
  .ph[data-shot*="Brand activation"]{
    background:linear-gradient(180deg,#F0E2C8 0%,#D9C39C 34%,#8FA79C 62%,#2B5A5E 100%);
  }
  /* Real photography: same box, same size, gradient and caption off. */
  .ph--photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
  .ph--photo::before, .ph--photo::after{ content:none; display:none; }
  .ph::after{
    content:attr(data-shot); position:absolute; inset:auto 0 1rem 0; text-align:center;
    font-family:Karla,sans-serif; font-size:.625rem; letter-spacing:.22em;
    text-transform:uppercase; color:rgba(251,247,239,.55); padding:0 1rem;
    text-shadow:0 1px 3px rgba(10,28,27,.45);
  }

  /* ---------- HERO SCRIM ----------
     Built on the horizon gradient, weighted dark through the middle so the
     centred headline clears AA. --shell text only survives above the
     tide-deep stop; below that the gradient needs --abyss text. */
  /* Legibility wash behind the copy column only. Measured: --shell over the
     raw gradient drops to 3.36:1 at the lede and 2.65:1 by its third line.
     This anchors the left edge in abyss and clears to nothing by 72%, so the
     sky keeps its teal-to-gold run and the text still passes AA. */
  .hero-wash{
    background:radial-gradient(88% 62% at 50% 46%,
      rgba(10,28,27,.72) 0%, rgba(20,47,46,.56) 46%, rgba(20,47,46,.22) 74%, rgba(20,47,46,0) 100%);
  }

  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(10,28,27,.92) 0%, rgba(20,47,46,.88) 24%, rgba(20,47,46,.86) 52%,
      rgba(23,60,58,.82) 70%, rgba(46,138,133,.62) 86%, rgba(98,195,188,.42) 100%);
  }

  /* ---------- IMAGE TILES ---------- */
  .tile{ border-radius:0; }
  .tile-img{ z-index:0; transition:transform 1.1s var(--ease); }
  .tile::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:rgba(20,47,46,.42); transition:background .45s var(--ease);
  }
  .tile:hover::before, .tile:focus-visible::before{ background:rgba(20,47,46,.18); }
  .tile:hover{ transform:translateY(-8px); }
  .tile{ transition:transform .5s var(--ease); }
  .tile:hover .tile-img{ transform:scale(1.06); }
  .tile-label{ z-index:2; transition:color .35s var(--ease); }
  .tile:hover .tile-label{ color:var(--sun-light); }

  /* ---------- EVENT ROWS — sun sweeps in from the left ---------- */
  .event-row{ position:relative; }
  .event-row::before{
    content:""; position:absolute; inset:0; background:var(--tide);
    transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); z-index:0;
  }
  .event-row:hover::before, .event-row:focus-within::before{ transform:scaleX(1); }
  .event-row > *{ position:relative; z-index:1; }
  .event-row:hover .swap, .event-row:focus-within .swap{ color:var(--abyss)!important; }

  /* ---------- NAV ---------- */
  #siteHeader.is-solid{
    background:rgba(251,247,239,.82);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:var(--hairline);
  }

  /* ---------- MOTION — slow, nothing bounces, nothing under 400ms ---------- */
  [data-reveal]{ opacity:0; transform:translateY(24px);
                 transition:opacity .9s var(--ease), transform .9s var(--ease); }
  [data-reveal].is-in{ opacity:1; transform:none; }
  .marquee{ animation:slide 52s linear infinite; }
  @keyframes slide{ to{ transform:translateX(-50%); } }

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--tide-deep); outline-offset:3px;
  }

  /* ---------- SMALL SCREENS ----------
     At 360px the eyebrow's .24em tracking and the hero's 2.75rem floor both
     overshoot the viewport and force a horizontal scroll. Both step down. */
  @media (max-width:430px){
    .t-hero{ font-size:clamp(2.1rem,9.4vw,2.75rem); line-height:1; }
    .t-eyebrow{ font-size:.62rem; letter-spacing:.16em; }
    .btn{ padding:.9rem 1.6rem; font-size:.75rem; letter-spacing:.12em; }
    .bars{ width:min(240px,72vw); }
  }

  .no-js [data-reveal]{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none!important; transition:none!important; }
    [data-reveal]{ opacity:1; transform:none; }
    .btn:hover, .tile:hover{ transform:none; }
  }