/* ============================================================
   THIRD EYE FRAGRANCE CO. · BRAND FOUNDATION
   Shared by every design direction. Tune type and gold here once.

   TYPE
     Jost carries everything: nav, headlines, body, labels. It is the
     geometric sans printed on the bottle (THIRD EYE / FRAGRANCE CO /
     EAU DE PARFUM / 50ML).

     The script is an ACCENT, never body copy and never subtext. It is
     used for fragrance names and the occasional single word, and it is
     Pacifico, the script printed on the bottles themselves (it replaced
     Pinyon Script, which readers found hard to read). Earlier scripts
     are gone, font files and all, so nothing can quietly download them.

   GOLD
     No scroll effect. The ramp sits still and does the work through
     value alone: two near-white specular bands against a warm mid gold,
     which is what separates bright polished gold from mustard. The ramp
     is fitted to each element, so the highlight always crosses the
     letterforms rather than sitting off to one side.
   ============================================================ */

/* --- self-hosted, so the pages render identically offline, on a
       file:// open, and behind any network that blocks the CDN --- */
@font-face{
  /* Jost is a variable font: this one file draws every weight. It used
     to be listed once per weight under five file names, byte for byte the
     same file, which a browser downloaded five times. The range stops at
     600 because the old faces did: anything asking for 700 has always been
     drawn at 600, and the design was signed off that way. */
  font-family:"Jost"; font-style:normal; font-weight:100 600; font-display:swap;
  src:url("../fonts/jost.woff2?v=2aedd0dcc5") format("woff2");
}

@font-face{
  /* Pacifico sets wider and heavier than the copperplate every size on
     the site was tuned for; drawn at 82% it takes the same width, so each
     name still fits the space it was given */
  font-family:"Pacifico"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/pacifico-400.woff2?v=2aedd0dcc5") format("woff2");
  size-adjust:82%;
}

:root{
  /* --- type --- */
  --brand-sans: "Jost", "Futura", "Century Gothic", Avenir, sans-serif;

  --script-02: "Pacifico", "Snell Roundhand", cursive;
  --script: var(--script-02);

  /* --- gold, as a ramp --- */
  --gold-deep:#8a6d2c;   /* engraved edge */
  --gold-dark:#a9862f;
  --gold:#c9aa60;        /* base tone, bright rather than mustard */
  --gold-soft:#dcc48c;
  --gold-lit:#f7ecd0;    /* specular highlight, close to white */
  --gold-pale:#fdf8ec;

  /* the metal. Two near-white specular bands are what make it read as
     polished gold instead of a flat yellow. */
  --gilt: linear-gradient(100deg,
    #a9862f 0%,
    #cdaa5c 9%,
    #efdba7 18%,
    #fdf8ec 26%,
    #e2c583 34%,
    #bf9c4e 46%,
    #a9862f 56%,
    #d7bb78 68%,
    #fbf3df 76%,
    #ddc189 84%,
    #b8944a 94%,
    #a9862f 100%);

  --gilt-rule: linear-gradient(100deg,
    rgba(169,134,47,.5) 0%,
    rgba(215,187,120,.85) 18%,
    rgba(253,248,236,1) 30%,
    rgba(215,187,120,.85) 44%,
    rgba(169,134,47,.5) 58%,
    rgba(251,243,223,.95) 74%,
    rgba(169,134,47,.5) 100%);

  /* the ramp is fitted to the element and held still */
  --sheen: 0%;
  --sheen-size: 100%;

  /* --- Creative Code, for the presentation shell only ---------------
     The selector is our page, not the client's, so it wears our colour
     rather than Third Eye's gold. Green sampled by eye from the logo
     PNG; swap in the exact brand hex when confirmed. */
  --cc-green:#1ff56e;
  --cc-green-dim:rgba(31,245,110,.42);
  --cc-green-ghost:rgba(31,245,110,.12);
}

/* --- gilded text -----------------------------------------------------
   background-clip paints the ramp through the letterforms, so the
   specular band actually crosses the glyphs as it travels. Solid colour
   is declared first, so anything that cannot clip still gets gold. */
.gilt{ color:var(--gold); }

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gilt{
    background-image:var(--gilt);
    background-size:var(--sheen-size) 100%;
    background-position:var(--sheen) 0;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* --- gilded hairline --- */
.gilt-rule{
  height:1px; border:0; margin:0;
  background-image:var(--gilt-rule);
  background-size:var(--sheen-size) 100%;
  background-position:var(--sheen) 0;
}

/* --- gilded fill, for buttons and bars --- */
.gilt-fill{
  background-image:var(--gilt);
  background-size:var(--sheen-size) 100%;
  background-position:var(--sheen) 0;
  color:#120e05;
  border-color:transparent;
}

/* --- thin gilded frame --- */
.gilt-border{
  border:1px solid transparent;
  border-image:var(--gilt) 1;
}