/* ============================================================
   THE HOUSE OF JAGUAR — shared styles
   Dark register, market-facing.
   ============================================================ */

:root{
  --black:#0C0C0A;
  --cream:#E3DAC9;
  --gold:#B8924A;
  --gold-light:#D9B48F;
  --display:'Playfair Display', Georgia, serif;
  --body:'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============ TYPE ============ */

.eyebrow{
  font-family:var(--body);
  font-weight:400;
  font-size:0.72rem;
  letter-spacing:0.34em;
  text-indent:0.34em;
  text-transform:uppercase;
  color:var(--gold-light);
}

.label{
  font-family:var(--body);
  font-weight:400;
  font-size:0.66rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(227,218,201,0.45);
}

h1,h2,h3,.numeral{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-0.012em;
}

p{
  font-weight:300;
  line-height:1.75;
  color:rgba(227,218,201,0.8);
}

.rule{
  width:64px;
  height:1px;
  background:var(--gold);
}

/* ============ BUTTONS ============
   One filled per page. Everything else outlined.
   ============================================ */

.btn{
  display:inline-block;
  padding:1.1rem 2.8rem;
  font-family:var(--body);
  font-weight:400;
  font-size:0.82rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--gold-light);
  transition:background 0.45s ease, color 0.45s ease;
  cursor:pointer;
}

.btn-filled{background:var(--gold-light); color:var(--black);}
.btn-filled:hover,.btn-filled:focus-visible{background:transparent; color:var(--gold-light);}

.btn-outline{background:transparent; color:var(--gold-light);}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--gold-light); color:var(--black);}

.btn:focus-visible{outline:2px solid var(--cream); outline-offset:4px;}

/* ============ BACK LINK ============ */

.back{
  display:inline-block;
  font-size:0.68rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:rgba(227,218,201,0.68);
  text-decoration:none;
  transition:color 0.3s ease;
  align-self:flex-start;
  border-bottom:1px solid rgba(184,134,11,0.35);
  padding-bottom:0.4rem;
}
.back:hover,.back:focus-visible{color:var(--gold-light);}

/* ============ QUIET TEXT LINK ============ */

.quiet-link{
  display:inline-block;
  font-size:0.76rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold-light);
  text-decoration:none;
  padding:0.9rem 1.9rem;
  border:1px solid rgba(217,180,143,0.55);
  background:rgba(16,12,8,0.4);
  transition:background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.quiet-link:hover,.quiet-link:focus-visible{
  background:var(--gold-light);
  border-color:var(--gold-light);
  color:var(--black);
}
.quiet-link:focus-visible{outline:2px solid var(--cream); outline-offset:4px;}

/* ============ MOTION ============ */

@keyframes rise{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

.rise{opacity:0; animation:rise 1.3s ease forwards;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .rise{opacity:1 !important; transform:none !important;}
}

/* ============ FOOT ============ */

.foot{
  text-align:center;
  padding:3rem 24px;
  font-size:0.68rem;
  word-break:keep-all;
  overflow-wrap:anywhere;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(227,218,201,0.26);
}
.foot a{color:inherit;text-decoration:none;transition:color 0.3s ease;}
.foot a:hover{color:var(--gold-light);}

/* ============================================================
   BRAND BIBLE TOKENS
   ============================================================ */

:root{
  --earth-black:#100C08;
  --fynbos-green:#243225;
  --bone-cream:#E3DAC9;
  --signal-orange:#D26439;
  --heritage-gold:#B8860B;

  /* per-page ember intensity — overridden on each page */
  --glow-strength:1;
}

/* ============================================================
   SYSTEM 1 — THE FORGE-GLOW
   Coals breathing up out of black. Layered radial bleeds of
   Signal Orange and Heritage Gold at low opacity, drifting on a
   slow loop. Transform and opacity only — no layout thrash.
   ============================================================ */

.forge-glow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.forge-glow::before,
.forge-glow::after{
  content:'';
  position:absolute;
  inset:-35%;
  opacity:var(--glow-strength);
  will-change:transform;
}

/* lower embers — orange, weighted to the bottom corners */
.forge-glow::before{
  background:
    radial-gradient(40% 48% at 18% 84%, rgba(210,100,57,0.17) 0%, rgba(210,100,57,0) 72%),
    radial-gradient(44% 42% at 84% 90%, rgba(210,100,57,0.12) 0%, rgba(210,100,57,0) 74%),
    radial-gradient(32% 36% at 50% 106%, rgba(210,100,57,0.14) 0%, rgba(210,100,57,0) 76%);
  animation:ember-drift-a 52s ease-in-out infinite alternate;
}

/* upper embers — gold, weighted to the edges */
.forge-glow::after{
  background:
    radial-gradient(48% 40% at 90% 22%, rgba(184,134,11,0.13) 0%, rgba(184,134,11,0) 74%),
    radial-gradient(42% 46% at 6% 34%, rgba(184,134,11,0.11) 0%, rgba(184,134,11,0) 76%),
    radial-gradient(36% 32% at 62% 4%, rgba(210,100,57,0.08) 0%, rgba(210,100,57,0) 78%);
  animation:ember-drift-b 61s ease-in-out infinite alternate;
}

@keyframes ember-drift-a{
  0%   {transform:translate3d(0,0,0) scale(1);      opacity:calc(var(--glow-strength) * 0.82);}
  35%  {transform:translate3d(3%,-2.5%,0) scale(1.1);opacity:calc(var(--glow-strength) * 1);}
  70%  {transform:translate3d(-2%,2%,0) scale(1.04); opacity:calc(var(--glow-strength) * 0.88);}
  100% {transform:translate3d(1.5%,-3%,0) scale(1.13);opacity:calc(var(--glow-strength) * 0.96);}
}

@keyframes ember-drift-b{
  0%   {transform:translate3d(0,0,0) scale(1.06);    opacity:calc(var(--glow-strength) * 0.9);}
  40%  {transform:translate3d(-3%,2%,0) scale(1);    opacity:calc(var(--glow-strength) * 0.76);}
  75%  {transform:translate3d(2.5%,-1.5%,0) scale(1.12);opacity:calc(var(--glow-strength) * 1);}
  100% {transform:translate3d(-1%,3%,0) scale(1.05); opacity:calc(var(--glow-strength) * 0.86);}
}

/* MOTION GATE — build requirement, not optional.
   Reduced-motion users get the warmth, none of the drift. */
@media (prefers-reduced-motion:reduce){
  .forge-glow::before,
  .forge-glow::after{
    animation:none !important;
    transform:none !important;
    opacity:calc(var(--glow-strength) * 0.9) !important;
  }
}

/* ============================================================
   THE SEAL — jaguar mark, same corner on every page
   ============================================================ */

.seal{
  position:fixed;
  bottom:clamp(1rem,2.2vw,1.6rem);
  right:clamp(1rem,2.2vw,1.6rem);
  z-index:5;
  display:block;
  line-height:0;
  opacity:0.34;
  transition:opacity 0.4s ease;
}

.seal img{
  width:clamp(26px,2.6vw,34px);
  height:auto;
  display:block;
}

/* it's a way home, so it answers to the cursor */
a.seal:hover,
a.seal:focus-visible{opacity:0.72;}
a.seal:focus-visible{outline:1px solid rgba(227,218,201,0.5); outline-offset:6px;}

@media (max-width:760px){
  .seal img{width:24px;}
  .seal{opacity:0.28;}
}

/* ============================================================
   SYSTEM 2 — THE PLACARD
   Gallery wall-label treatment. Same family as the eyebrow.
   ============================================================ */

.placard-label{
  display:block;
  font-family:var(--body);
  font-weight:400;
  font-size:0.62rem;
  letter-spacing:0.32em;
  text-indent:0.32em;
  text-transform:uppercase;
  color:rgba(227,218,201,0.38);
  margin-bottom:0.9rem;
}