/* ============================================================
   AVL SCHOOL SKIN  ·  avl.cultivationfoundation.org
   Loaded after the Foundation brand. Re-points its eleven tokens
   and adds the moving parts. The Foundation site never loads this.
   Palette sampled from the four reference interiors, 6 Oct 2026.
   ============================================================ */

:root {
  /* the gel. avl.js replaces these three per page. */
  --gel:      #FFB45C;
  --gel-deep: #B4762A;
  --gel-glow: #FFDDB0;

  /* the room itself — slate walls, wood floor, cool steel, near black */
  --avl-slate: #2E3744;
  --avl-steel: #5A7084;
  --avl-wood:  #8A6A47;

  /* ⛔ the Foundation's eleven, re-pointed. Every component follows. */
  --bg:          #0C0E12;
  --bg-soft:     #11141A;
  --bg-card:     #161A21;
  --ink:         #ECEEF2;
  --ink-soft:    #AEB7C4;
  --muted:       #7E8899;
  --bronze:      var(--gel);
  --bronze-deep: var(--gel-glow);   /* on a dark ground the "deep" tone has to go UP */
  --bronze-glow: var(--gel-glow);
  --rule:        rgba(90, 112, 132, .26);
  --shadow:      0 1px 2px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45);
}

/* ⛔⛔ THE PAGE COLOUR LIVES ON <html>, NOT <body>, OR THE BACKDROP NEVER SHOWS.
   body::after carries z-index:-3. body does not create a stacking context, so
   that pseudo-element joins the ROOT one — and the paint order there is: html's
   background, then negative-z-index descendants, then block-level descendants.
   <body> is a block-level descendant, so an opaque background on body paints
   OVER the backdrop every time. The photograph was loading, correctly sized,
   correctly filtered and completely invisible, and raising its brightness from
   .34 to .78 changed nothing because the problem was never brightness.
   Nathan: "I don't see any pictures." He was right twice. */
html {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(90,112,132,.16), transparent 70%),
    var(--bg);
}
body { background: transparent; color: var(--ink); }

/* ⛔⛔ THE ROOM BEHIND THE PAGE — BUILT THE WAY NJP ALREADY DOES IT.
   Nathan: "Don't reinvent the wheel here, look how we have Nathan James
   Productions website, you will see where I have my house pictures layered in
   the background."
   nathanjamesproductions.tech does this with ONE rule: body::after, fixed,
   inset 0, z-index -3, pointer-events none, and a plain low opacity. That is
   the whole technique and it has been shipping for months.
   I had built a two-layer thing instead — a screen-blended photograph under a
   radial vignette — and spent three rounds tuning two numbers against each
   other, because each one darkened the other. The first version arrived on
   screen at 2.7 out of 255. One layer at a low opacity has no second number to
   fight, which is exactly why the original works.
   What stays mine is the photograph itself: build_backdrops.py desaturates,
   warms, grains and normalises every frame to one brightness, so nine images
   shot at nine exposures all sit at the same weight behind the copy. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  /* ⛔ inset -5% at 110% is from .lr-scene__bg — it keeps the frame off the
     edges so nothing ever shows a seam. The brightness filter sets the level,
     and it is the ONLY number here: one control, not two fighting. */
  inset: -5%;
  width: 110%;
  height: 110%;
  background-image: var(--avl-bg-img, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* ⛔ 0.34 was arithmetic, not looking. On a mean-124 file it lands at 42
     of 255 — technically present, and Nathan's answer was "I don't see any
     pictures", which is the only measurement that counts. The Press rooms
     run 0.45 and they READ as rooms. The copy keeps its contrast because
     every block of text on this site sits on its own panel. */
  filter: brightness(.46) saturate(1.1);
}

/* the slate wall behind every panel */
.block, .card, .fact-panel, .ftr-done, .ftr-code, .rm__lib, .rm__bar,
.rm__brief, details, .ftr-copy {
  background: var(--bg-card);
  border-color: var(--rule);
}

/* ⛔ the nav is a lighting bar, not a letterhead */
.top {
  background: rgba(12,14,18,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--gel) 40%, transparent);
}
.top__brand { color: var(--ink); }
.top__brand em { color: var(--gel); font-style: normal; }
.top__nav a { color: var(--ink-soft); }
.top__nav a:hover { color: var(--gel); }
.top__nav a.on, .top__nav a[aria-current] { color: var(--gel); }

/* ---------- THE COIN ------------------------------------------------
   ⛔ It is lit BY THE PAGE. The artwork is neutral metal; the glow, the
      rim light and the halo are all var(--gel), so one coin is seven. */
.corner-mark { display: none !important; }   /* the Foundation seal, retired here */

.avl-coin {
  /* ⛔ BELOW THE RIBBON AND THE METER WALL. At 74px it sat ON the ribbon
     board and ate three words of it on every page. nav 56 + ribbon 34 +
     wall 56 = 146, so the coin starts clear of all three. */
  position: fixed; left: 18px; top: 164px; z-index: 40;
  width: 96px; height: 96px;
  perspective: 600px;
  pointer-events: none;
}
.avl-coin__spin {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: avl-spin 9s linear infinite;
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--gel) 70%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--gel) 45%, transparent));
}
@keyframes avl-spin { to { transform: rotateY(360deg); } }
.avl-coin svg { width: 100%; height: 100%; display: block; }

/* ⛔ THE RENDERED COIN KEEPS ITS BLACK BACKGROUND AND IS SCREEN-BLENDED.
   screen drops pure black to nothing, so the metal sits on the page with no
   alpha channel to lose through resizing or the CDN's re-compression — which
   took a 890 KB panorama to 278 KB in transit on 6 Oct. The gel then lights
   it: a hue-rotate would fight the metal, so the colour comes from a tinted
   plate multiplied over the top instead, which keeps the engraving readable. */
.avl-coin img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  mix-blend-mode: screen;
}
.avl-coin__lit { position: relative; width: 100%; height: 100%; }
.avl-coin__lit::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gel); mix-blend-mode: color; opacity: .78;
  pointer-events: none;
}
.avl-coin .rim   { stroke: var(--gel); }
.avl-coin .face  { fill: #171B22; }
.avl-coin .bevel { stroke: var(--gel-glow); }
.avl-coin .mark  { fill: var(--gel-glow); }
.avl-coin .tick  { stroke: var(--gel); }
/* the halo it throws on the wall behind it */
.avl-coin::after {
  content: ''; position: absolute; inset: -30%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gel) 26%, transparent), transparent 68%);
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .avl-coin__spin { animation: none; }
}
@media (max-width: 900px) {
  .avl-coin { left: 10px; top: 152px; width: 56px; height: 56px; }
}

/* ---------- THE LED RIBBON -----------------------------------------
   A venue ribbon board. It carries the work, not slogans. */
.avl-ribbon {
  position: relative; overflow: hidden;
  background: #07090C;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 34px;
}
.avl-ribbon__track {
  display: flex; gap: 0; width: max-content;
  animation: avl-roll 48s linear infinite;
  will-change: transform;
}
@keyframes avl-roll { to { transform: translateX(-50%); } }
.avl-ribbon:hover .avl-ribbon__track { animation-play-state: paused; }
.avl-ribbon b {
  font: 700 11px/34px 'Courier New', monospace;
  letter-spacing: .22em; white-space: nowrap;
  padding: 0 26px; color: var(--gel);
  text-shadow: 0 0 10px color-mix(in srgb, var(--gel) 60%, transparent);
}
.avl-ribbon b::after {
  content: '\25CF'; margin-left: 26px; color: var(--avl-steel);
  text-shadow: none; font-size: 8px; vertical-align: middle;
}
/* the dot-matrix texture over the top, so it reads as an LED panel */
.avl-ribbon::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.55) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce) {
  .avl-ribbon__track { animation: none; }
}

/* ---------- THE METER WALL -----------------------------------------
   Sixteen channels of a desk, moving. It is the page telling you what
   this place is before a word is read. */
.avl-wall {
  display: flex; align-items: flex-end; gap: 3px;
  height: 56px; padding: 0 0 0 0; margin: 0;
  background: #07090C;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.avl-wall i {
  flex: 1 1 0; display: block; min-width: 0;
  background: linear-gradient(to top,
      var(--gel-deep) 0%, var(--gel) 58%, var(--gel-glow) 100%);
  opacity: .78;
  transform-origin: bottom;
  animation: avl-meter 1.8s ease-in-out infinite alternate;
  box-shadow: 0 0 8px color-mix(in srgb, var(--gel) 45%, transparent);
}
@keyframes avl-meter {
  from { height: 12%; }
  to   { height: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .avl-wall i { animation: none; height: 46%; }
}

/* ---------- the gel caption ---------------------------------------- */
.avl-gelmark {
  position: fixed; left: 18px; top: 266px; z-index: 40;
  width: 96px; text-align: center; pointer-events: none;
  font: 700 9px/1.5 'Courier New', monospace; letter-spacing: .18em;
  color: var(--gel); opacity: .8;
  text-shadow: 0 0 10px color-mix(in srgb, var(--gel) 55%, transparent);
}
.avl-gelmark span { display: block; color: var(--muted); letter-spacing: .1em;
                    font-weight: 400; text-shadow: none; margin-top: 2px; }
@media (max-width: 1200px) { .avl-gelmark { display: none; } }

/* ---------- things the dark ground breaks -------------------------- */
.hero__chip { border-color: var(--rule); color: var(--gel); background: rgba(255,255,255,.02); }
.sec-label, .rm__libh, .ftr-save { color: var(--gel); }
.btn--primary { background: var(--gel); color: #0C0E12; border-color: var(--gel); }
.btn--primary:hover { background: var(--gel-glow); }
.btn--ghost { color: var(--gel); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--gel); }
a { color: var(--gel); }
input, textarea, select {
  background: #0F1218; color: var(--ink); border-color: var(--rule);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--gel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gel) 22%, transparent);
}
/* photographs of gear were shot on warm off-white; on a black page they
   float as bright squares. Seat them on a plate instead of restyling 42 files. */
.rm__item img, .rm__grid img { background: #E9E6E0; border-radius: 4px; }
footer, .footer-wrap { background: #07090C; border-top: 1px solid var(--rule); }

/* ⛔⛔ THE STAGE PLOT IS A PRINTED DOCUMENT AND STAYS ON PAPER.
   stageplot.css sets .stage{background:#FFFDF6} — deliberately, because the
   plot is printed and handed to a band. Its piece labels take var(--ink),
   which the skin turned near-white, so every label went white on cream and
   Nathan lost the whole plot: "Lost my visual on the stage plot with the
   colour change." The fix is NOT to darken the paper. It is to put the ink
   back on the one surface that is still white. */
.stage, .stage * { color: #17202C; }
.stage .plabel, .piece .plabel { color: #17202C; }

/* ⛔ THE COIN SCROLLS WITH THE PAGE. Fixed, it floated over the desk UI and
   sat on top of the view tabs — a brand mark that covers a control is a
   defect, not a brand mark. Absolute keeps it lit at the top of every page
   and out of the way of everything below it. */
.avl-coin, .avl-gelmark { position: absolute; }
::selection { background: var(--gel); color: #0C0E12; }