:root {
  --ink: #fff;
  --ink-70: rgba(255, 255, 255, 0.7);
  --ink-35: rgba(255, 255, 255, 0.35);
  --ink-18: rgba(255, 255, 255, 0.18);
  --teal: #2f9a8f;            /* FIERA's single accent: BELTA's sea-green trellis */
  --gold: #dcb860;            /* Darmah stripe gold, sampled from the tail; the gradient #forgiati-gold does the metal */
  --sig: var(--ink);          /* the colour the signatures are written in */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-light="gold"] { --sig: var(--gold); }
html[data-light="gold"] .tank svg .ink,
html[data-light="gold"] .mark-logo .ink { fill: url(#forgiati-gold); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
a { color: inherit; text-decoration: none; }

/* ---------- home ---------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 28px;
}
.tank {
  position: relative;
  width: min(92vw, 860px);
  aspect-ratio: 3.1;
  overflow: visible;
}
.tank { color: var(--sig); transition: color 600ms ease; }
.tank svg {
  position: absolute;
  display: block;
  overflow: visible;
  will-change: opacity;
}
.line {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-70);
}
@media (min-width: 640px) {
  .line { font-size: 12px; max-width: none; }
}
.quiet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-35);
}
.quiet a { padding: 8px 2px; transition: color 300ms ease; }
.quiet a:hover, .quiet a:focus-visible { color: var(--ink); outline: none; }
.quiet span { color: var(--ink-18); letter-spacing: 0.1em; }
.foot {
  text-align: center;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-18);
}

/* the light switch: one bulb, top right, wearing the colour the page is resting in */
.light {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  background: none; border: 0;
  cursor: pointer;
  color: var(--sig);
  opacity: 0.7;
  transition: color 600ms ease, opacity 300ms ease;
}
.light:hover, .light:focus-visible { opacity: 1; outline: none; }
.light-bulb { width: 17px; height: 17px; fill: currentColor; }


/* the gold shimmers while it sits: a soft sheen walks down the gradient, then a slight dim, then again */
@keyframes gold-stop-1 { 0%, 100% { stop-color: #f6e29a; } 38% { stop-color: #fbeebe; } 72% { stop-color: #d3bd79; } }
#forgiati-gold stop:nth-child(1) { stop-color: #f6e29a; animation: gold-stop-1 7s cubic-bezier(.45,.05,.3,1) 0.00s infinite; }
@keyframes gold-stop-2 { 0%, 100% { stop-color: #e9cd79; } 38% { stop-color: #f5e5af; } 72% { stop-color: #caae60; } }
#forgiati-gold stop:nth-child(2) { stop-color: #e9cd79; animation: gold-stop-2 7s cubic-bezier(.45,.05,.3,1) 0.55s infinite; }
@keyframes gold-stop-3 { 0%, 100% { stop-color: #d9b45a; } 38% { stop-color: #eed9a2; } 72% { stop-color: #be9b49; } }
#forgiati-gold stop:nth-child(3) { stop-color: #d9b45a; animation: gold-stop-3 7s cubic-bezier(.45,.05,.3,1) 1.10s infinite; }
@keyframes gold-stop-4 { 0%, 100% { stop-color: #c39a3e; } 38% { stop-color: #e4ce95; } 72% { stop-color: #ad8734; } }
#forgiati-gold stop:nth-child(4) { stop-color: #c39a3e; animation: gold-stop-4 7s cubic-bezier(.45,.05,.3,1) 1.65s infinite; }
@keyframes gold-stop-5 { 0%, 100% { stop-color: #9e7a2b; } 38% { stop-color: #d3bf8c; } 72% { stop-color: #916f26; } }
#forgiati-gold stop:nth-child(5) { stop-color: #9e7a2b; animation: gold-stop-5 7s cubic-bezier(.45,.05,.3,1) 2.20s infinite; }
@media (prefers-reduced-motion: reduce) { #forgiati-gold stop { animation: none; } }

/* ---------- sub pages ---------- */
.page {
  flex: 1;
  width: min(92vw, 720px);
  margin: 0 auto;
  padding: 12vh 0 8vh;
}
.back {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-35);
  margin-bottom: 9vh;
  transition: color 300ms ease;
}
.back:hover, .back:focus-visible { color: var(--ink); outline: none; }
.mark { width: min(78vw, 420px); margin: 0 0 10px; }
.mark-logo { width: min(86vw, 560px); margin: 0 0 18px; }
.mark-logo .ink { fill: currentColor; }
.mark-logo .digits {
  fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw 1.1s cubic-bezier(.45,.05,.3,1) 700ms forwards;
}
.mark-plain { margin-bottom: 28px; }
.secret .mark-logo { width: min(80vw, 460px); margin: 0 0 6px; }
.kicker.spaced { margin-top: 34px; }
.mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.mark { color: var(--sig); }
.mark .stroke {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw 2.2s cubic-bezier(.45,.05,.3,1) 300ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.no {
  margin: 0 0 7vh;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--ink-70);
}
.no b { font-weight: 400; color: var(--ink); }
.kicker {
  margin: 0 0 24px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-35);
}
.kicker.teal { color: var(--teal); }
.prose { max-width: 56ch; }
.prose p {
  margin: 0 0 1.4em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-70);
}
.prose p.lede { font-size: 20px; line-height: 1.5; color: var(--ink); font-weight: 300; }
.prose em { font-style: normal; color: var(--ink); }
.teaser {
  margin: 7vh 0 0;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.teaser img {
  display: block; width: 100%; height: auto;
  opacity: 0.28; filter: grayscale(35%) contrast(1.05);
  transform: scale(1.02);
  animation: surface 6s ease-out forwards;
}
.teaser::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.05) 40%, #000 100%);
}
@keyframes surface { from { opacity: 0; transform: scale(1.06); } to { opacity: 0.28; transform: scale(1.02); } }
.soon {
  margin: 6vh 0 0;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-35);
}
.secret {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 22px; padding: 24px 16px;
}
.secret h1 {
  margin: 0; font-weight: 300; font-size: clamp(28px, 7vw, 54px); letter-spacing: 0.38em; text-indent: 0.38em;
}
.secret p { margin: 0; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-35); }
.secret .back { margin: 20px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .mark .stroke, .mark-logo .digits { animation: none; stroke-dashoffset: 0; }
  .teaser img { animation: none; }
}