/* ==================================================================
   LOGO PROJECT — shuvo (projects/shuvo-logo.html)
   Layout: "blueprint" — paper + grid, each step = notes beside sketch.
   Type: same system as the Skateboard page — tall Six Caps title,
   thin uppercase chapter heads with big numbers, DM Mono labels,
   small light body text.
   Live logos are built by js/logo.js from the header SVG
   (window.ShuvoLogo in js/main.js); the .brand__* / .fx-* rules in
   css/styles.css drive the wave and effects.
   ================================================================== */

.lg-page {
  --lg-paper: var(--color-bg);                           /* homepage colours */
  --lg-ink:   var(--color-text);
  --lg-muted: var(--color-muted);
  --lg-rule:  var(--color-line);
  --lg-or:    var(--color-accent);                       /* coral */
  --lg-grid:  rgba(28, 28, 28, 0.07);
  --lg-tall:  "Six Caps", "Oswald", "Arial Narrow", sans-serif;
  --lg-monof: "DM Mono", ui-monospace, Menlo, monospace;
  background-color: var(--lg-paper);
  background-image:
    linear-gradient(var(--lg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--lg-ink);
}

main.lg {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
}

/* ------------------------------------------------------------------
   Type (from the Skateboard page)
   ------------------------------------------------------------------ */
.lg-mono {
  font-family: var(--lg-monof);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lg-muted);
}
.lg-label { display: block; margin-bottom: 6px; }
.lg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 10px 0 8px;
  border-top: 1px solid var(--lg-ink);
  border-bottom: 1px solid var(--lg-rule);
}
.lg-head h2,
.lg-head__num {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 1rem + 5.4vw, 6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.lg-head__num { font-variant-numeric: tabular-nums; color: var(--lg-or); }
.lg-copy h3 {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lg-copy p,
.lg-copy li {
  margin: 0 0 1em;
  font-size: 0.875rem;
  font-weight: var(--fw-light);
  line-height: 1.7;
}
.lg-copy li { margin: 0; }
.lg-copy strong { font-weight: 600; }

/* ------------------------------------------------------------------
   Hero — live logo on construction guides
   ------------------------------------------------------------------ */
.lg-hero__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.lg-board {
  position: relative;
  border: 1px solid var(--lg-ink);
  background: var(--lg-paper);
}
.lg-guide {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(28, 28, 28, 0.35);
  pointer-events: none;
}
.lg-guide i {
  position: absolute;
  right: 10px;
  top: -16px;
  font: 400 10px/1 var(--lg-monof);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--lg-muted);
}
/* matched to the letters when the logo is 70% of a 2:1 board */
.lg-guide--cap  { top: 33%; }
.lg-guide--x    { top: 42%; }
.lg-guide--base { top: 75%; }
.lg-hint { margin: 12px 0 0; text-align: center; }

/* ------------------------------------------------------------------
   Intro + credits
   ------------------------------------------------------------------ */
.lg-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  padding: clamp(64px, 9vw, 120px) 0 clamp(36px, 5vw, 64px);
}
.lg-title {
  margin: 0;
  font-family: var(--lg-tall);
  font-size: clamp(5.5rem, 3rem + 9vw, 12rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.lg-sub { margin: 14px 0 0; font-size: 0.8125rem; font-weight: 500; }
.lg-intro .lg-copy p:last-child { margin-bottom: 0; }

.lg-credits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(20px, 3vw, 48px);
  margin: 0;
}
.lg-credits div { border-top: 1px solid var(--lg-ink); padding-top: 8px; }
.lg-credits dt { margin-bottom: 10px; }
.lg-credits dd { margin: 0; font-size: 0.875rem; line-height: 1.5; }
@media (min-width: 1000px) { .lg-credits--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }   /* five credits on one line */

/* ------------------------------------------------------------------
   Steps — chapter head, then notes (sticky) beside the sketch
   ------------------------------------------------------------------ */
.lg-step { padding-top: clamp(64px, 9vw, 120px); }
.lg-step__body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-top: clamp(28px, 4vw, 48px);
}
.lg-step__side { position: sticky; top: calc(var(--header-h) + 24px); }
.lg-step__img img,
.lg-sheet img {
  background: #fff;
  border: 1px solid var(--lg-ink);
}
.lg-notes { margin: 0 0 1em; padding-left: 1.1em; }
.lg-notes--steps { padding-left: 1.4em; }
.lg-notes li::marker { color: var(--lg-or); }

.lg-build {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 4px 0 0;
}
.lg-build div {
  border: 1px solid var(--lg-ink);
  background: #fff;
  padding: 10px 4px;
  text-align: center;
}
.lg-build dt { font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--lg-or); }
.lg-build dd { margin: 6px 0 0; font-size: 0.6875rem; line-height: 1.35; color: var(--lg-muted); }

.lg-sheet { margin-top: clamp(28px, 4vw, 48px); }

/* Pull quote */
.lg-quote {
  display: grid;
  justify-items: center;
  margin: 0;
  padding-top: clamp(72px, 10vw, 140px);
  text-align: center;
}
.lg-quote blockquote {
  position: relative;
  margin: 0;
  font-family: var(--lg-tall);
  font-size: clamp(3.5rem, 2rem + 5vw, 7.5rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.lg-quote blockquote::before {          /* speech mark */
  content: "";
  position: absolute;
  left: -0.5em;
  top: -0.1em;
  width: 0.34em;
  height: 0.3em;
  background: var(--lg-or);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 35% 70%, 0 100%);
}
.lg-quote cite { display: block; margin-top: 18px; font-style: normal; }

/* ------------------------------------------------------------------
   Live logo stages
   ------------------------------------------------------------------ */
.lg-stage {
  --lg-bg: transparent;
  --lg-ink-logo: var(--lg-or);
  --lg-alt: var(--lg-ink);
  position: relative;
  display: grid;
  place-items: center;
  background: var(--lg-bg);
  overflow: hidden;
}
.lg-stage .lg-fallback { display: block; width: 100%; height: auto; }
.lg-stage .brand__fx {
  width: min(70%, 760px);
  height: auto;
  overflow: visible;          /* hops, waves and spins must never be clipped */
}
.lg-stage .brand__word { width: 100%; height: auto; }
.lg-stage .brand__l { fill: var(--lg-ink-logo); }
.lg-stage .brand__swash { stroke: var(--lg-alt); }
.lg-stage.fx-coral .brand__p { fill: var(--lg-alt); }
.lg-stage .brand__fullname {
  justify-self: center;
  font-size: clamp(0.875rem, 0.6rem + 1.6vw, 1.75rem);
  color: var(--lg-ink-logo);
  opacity: 0;
  transform: translateY(60%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease;
}
.lg-stage.fx-name .brand__fullname { opacity: 1; transform: none; }
.lg-stage .brand__word--live { transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease; }
.lg-stage.fx-name .brand__word--live { opacity: 0; transform: scale(0.96); }   /* fade in place: no sliding out of the tile */

.lg-stage--hero { aspect-ratio: 2 / 1; }
.lg-stage--play {
  --lg-bg: #fff;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--lg-ink);
}

/* Effect buttons */
.lg-btns {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
}
.lg-btns li { margin: 0; }
.lg-btn {
  font-family: var(--lg-monof);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lg-ink);
  background: transparent;                    /* the page colour, so the light text reads on the black theme */
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 9px 12px;
  min-height: 38px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lg-btn:hover,
.lg-btn:focus-visible,
.lg-btn.is-on { background: var(--lg-or); border-color: var(--lg-or); color: #000; }

/* Nine moves — nine boards (js/logo.js, section 3) */
.lg-step__body--intro { grid-template-columns: minmax(0, 560px); }
.lg-moves {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
}
.lg-move__board { cursor: pointer; }
.lg-stage--move { aspect-ratio: 2 / 1; }
.lg-stage--one .brand__fx { width: min(70%, 760px); }
.lg-stage--move .brand__l { animation: none; }               /* rest still… */
.lg-stage--move.fx-bigwave .brand__l { animation: brand-wave-big 1.7s ease-in-out calc(var(--i) * -0.22s) infinite; }
.lg-move__cap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: start;
  margin-top: 10px;
}
.lg-move__cap b { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lg-move__cap b span { color: var(--lg-or); margin-right: 6px; }
.lg-move__cap p { grid-column: 1; margin: 0; font-size: 0.8125rem; font-weight: var(--fw-light); color: var(--lg-muted); line-height: 1.5; }
.lg-move__replay {
  grid-column: 2;
  grid-row: 1 / 3;
  background: transparent;                    /* the page colour, so the light text reads on the black theme */
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--lg-ink);
  padding: 9px 12px;
  min-height: 38px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lg-move__replay:hover,
.lg-move__replay:focus-visible { background: var(--lg-or); border-color: var(--lg-or); }

/* one board for all nine */
.lg-one { margin-top: clamp(28px, 4vw, 48px); }
.lg-one__board { cursor: pointer; }
.lg-one__cap p { transition: opacity 0.3s ease; }
.lg-one__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
}
.lg-one__pick {
  background: transparent;                    /* the page colour, so the light text reads on the black theme */
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--lg-ink);
  padding: 9px 12px;
  min-height: 38px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lg-one__pick span { color: var(--lg-or); margin-right: 4px; transition: color var(--dur) var(--ease); }
.lg-one__pick:hover { border-color: var(--lg-or); }
.lg-one__pick[aria-pressed="true"] { background: var(--lg-or); border-color: var(--lg-or); color: #000; }
.lg-one__pick[aria-pressed="true"] span { color: #000; }

/* openings share the board: their drawing sits on top of the live logo */
.lg-one__board { position: relative; }
.lg-one__op {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lg-one__board.is-opening .lg-stage--one { visibility: hidden; }
.lg-one__board.is-opening .lg-guide { opacity: 0; }   /* the drawing brings its own guides */
.lg-one__lists { margin-top: 18px; }
.lg-one__group { margin: 14px 0 6px; }
.lg-one__lists .lg-one__group:first-child { margin-top: 0; }
.lg-one__lists .lg-one__list { margin-top: 0; }

/* moves run slow and smooth here */
.lg-stage--move .brand__p { transition: transform 1s cubic-bezier(0.34, 1.3, 0.5, 1), fill 0.9s ease; }
.lg-stage--move.fx-hop .brand__p { animation: brand-hop 1.25s cubic-bezier(0.37, 0, 0.3, 1) calc(var(--i) * 0.17s); }
.lg-stage--move.fx-coral .brand__p { transition-delay: calc(var(--i) * 0.18s); }
.lg-stage--move.fx-jelly .brand__word--live { animation: brand-jelly 1.7s ease-in-out; }
.lg-stage--move.fx-spin .brand__p { transition: transform 1.4s cubic-bezier(0.6, 0, 0.3, 1) calc(var(--i) * 0.2s); }
.lg-stage--move.fx-lean .brand__p { transition: transform 0.35s ease-out; }
.lg-stage--move .brand__swash { transition: stroke-dashoffset 1.4s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.4s ease; }
.lg-stage--move .brand__word--live,
.lg-stage--move .brand__fullname { transition: transform 1s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.8s ease; }

/* Openings — six ways the logo can arrive (js/logo.js, section 5).
   Each board waits (paused, blank) until it scrolls into view. */
.op-board {
  border: 1px solid var(--lg-ink);
  background: var(--lg-paper);
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.op-svg { width: 86%; overflow: visible; }
.op-board:not(.is-on) .op-svg * { animation-play-state: paused; }
.op-p { fill: var(--lg-or); }
.op-l, .op-p { transform-box: fill-box; }
.op-g { fill: none; stroke: rgba(28, 28, 28, 0.3); stroke-width: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: op-draw 0.9s cubic-bezier(0.6, 0, 0.3, 1) calc(var(--i) * 0.15s) forwards; }
.op-c { fill: none; stroke: var(--lg-ink); stroke-width: 0.6; stroke-dasharray: 2 2; transform-box: fill-box; transform-origin: center; }
.op-f { fill: none; stroke: var(--lg-ink); stroke-width: 1.6; stroke-linecap: round; }
.op-spot { fill: var(--lg-or); transform-box: fill-box; transform-origin: center; transform: scale(0); }
@keyframes op-draw   { to { stroke-dashoffset: 0; } }
@keyframes op-fillin { to { fill: var(--lg-or); stroke-width: 0; } }
@keyframes op-grow   { to { transform: scale(1); } }
@keyframes op-fade   { to { opacity: 0; } }
@keyframes op-pop    { to { transform: scale(1); } }
@keyframes op-rise   { to { transform: none; } }
@keyframes op-appear { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes op-coral  { to { fill: var(--lg-or); } }
@keyframes op-drop {
  0%   { transform: translateY(-150px); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translateY(0) scale(0.94, 1.08); }
  60%  { transform: scale(1.14, 0.82); }
  75%  { transform: translateY(-10px) scale(0.97, 1.04); }
  88%  { transform: scale(1.03, 0.97); }
  100% { transform: none; opacity: 1; }
}
@keyframes op-spot {
  0%   { transform: scale(0); opacity: 1; }
  45%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
/* A — draw, then fill */
.op--a .op-p { fill: transparent; stroke: var(--lg-ink); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: op-draw 1.8s cubic-bezier(0.5, 0, 0.3, 1) calc(0.4s + var(--i) * 0.18s) forwards,
             op-fillin 0.7s ease calc(2.4s + var(--i) * 0.08s) forwards; }
/* B — built from circles */
.op--b .op-c { transform: scale(0); animation: op-grow 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.5s + var(--i) * 0.12s) forwards, op-fade 0.6s ease 2.6s forwards; }
.op--b .op-p { transform-origin: center; transform: scale(0); animation: op-pop 0.7s cubic-bezier(0.3, 1.6, 0.45, 1) calc(1.6s + var(--i) * 0.14s) forwards; }
/* C — drop on the baseline */
.op--c .op-l { transform-origin: 50% 100%; opacity: 0; animation: op-drop 1.1s cubic-bezier(0.5, 0, 0.5, 1) calc(0.7s + var(--i) * 0.18s) forwards; }
/* D — rise from the line */
.op--d .op-l { transform: translateY(105%); animation: op-rise 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) calc(0.8s + var(--i) * 0.12s) forwards; }
/* E — one line first */
.op--e .op-f { stroke-dasharray: 1; stroke-dashoffset: 1; animation: op-draw 1.8s cubic-bezier(0.6, 0, 0.3, 1) 0.5s forwards, op-fade 0.6s ease 3.1s forwards; }
.op--e .op-p { opacity: 0; animation: op-appear 0.9s ease calc(2.1s + var(--i) * 0.12s) forwards; }
/* F — coral spotlight */
.op--f .op-spot { animation: op-spot 2.6s cubic-bezier(0.7, 0, 0.2, 1) 0.2s forwards; }
.op--f .op-p { opacity: 0; fill: #fff; animation: op-appear 0.6s ease calc(0.9s + var(--i) * 0.1s) forwards, op-coral 0.8s ease 1.9s forwards; }
@media (prefers-reduced-motion: reduce) {
  .op-svg * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .op-p { fill: var(--lg-or) !important; stroke-width: 0 !important; }
  .op-c, .op-f, .op-spot { display: none; }
}

/* Colour ways */
.lg-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pj-gap);
  margin-top: clamp(28px, 4vw, 48px);
}
.lg-stage--way { aspect-ratio: 4 / 3; border: 1px solid var(--lg-ink); }
.lg-stage--way .brand__fx { width: 80%; grid-template-columns: minmax(0, 1fr); }   /* the logo fits its box, so it sits in the middle of the frame */
.lg-way--coral  { --lg-bg: #1C1C1C; --lg-ink-logo: var(--lg-or); --lg-alt: #fff; }   /* charcoal (fixed, so the black site doesn't turn it light) */
.lg-way--paper  { --lg-bg: #fff; --lg-ink-logo: #1C1C1C; --lg-alt: var(--lg-or); }   /* black logo on paper (fixed, so the black site doesn't turn it white) */
.lg-way--night  { --lg-bg: var(--color-header-bg); --lg-ink-logo: var(--color-header-fg); --lg-alt: var(--lg-or); }
.lg-way__label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font: 400 0.625rem/1 var(--lg-monof);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg-ink-logo);
  opacity: 0.6;
}

/* More work */
.lg-next {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pj-gap);
  margin: clamp(28px, 4vw, 48px) 0 clamp(72px, 10vw, 140px);
  padding: 0;
}
.lg-next a { display: block; }
.lg-next img,
.lg-next video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--lg-ink);
  filter: grayscale(1);
  transition: filter var(--dur) var(--ease);
}
.lg-next a:hover img,
.lg-next a:hover video { filter: none; }
.lg-next span {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lg-next a:hover span { color: var(--lg-or); }

/* ------------------------------------------------------------------
   Tablet / phone
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .lg-intro,
  .lg-step__body { grid-template-columns: 1fr; }
  .lg-step__side { position: static; }
  .lg-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-ways { grid-template-columns: 1fr; }
  .lg-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-stage--way { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .lg-guide { display: none; }          /* lines don't match the taller phone board */
  .lg-stage--hero,
  .lg-stage--play { aspect-ratio: 4 / 3; }
  .lg-stage .brand__fx { width: 82%; }
  .lg-build { grid-template-columns: repeat(3, 1fr); }
  .lg-moves { grid-template-columns: 1fr; }
  .lg-next { grid-template-columns: 1fr; }   /* 800px previews stay sharp up to ~400px wide */
  .lg-quote blockquote::before { left: 0; top: -0.42em; }
}

/* 07 — the final logo animation (the homepage cradle), live in a 16:9 frame */
.lg-film { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--lg-ink); background: #fff; overflow: hidden; }
.lg-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.lg-film--step { margin: 0 0 10px; }
.lg-note-label { margin: 0 0 14px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lg-muted); }
.lg-film__cap { margin: 0 0 clamp(28px, 4vw, 44px); }

/* The exact coral from the final Illustrator file (Shuvo logo final.ai): RGB 241 90 41 */
.lg-page { --lg-or: #F15A23; }

/* Fig. 00 — the final animation (the homepage cradle) plays on the board;
   hovering hands over to the live logo, which plays the next of the nine moves */
.lg-board--cradle { overflow: hidden; }
.lg-cradle { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; z-index: 2; transition: opacity 0.45s ease; }
.lg-board--cradle .lg-stage--hero, .lg-board--cradle .lg-guide { opacity: 0; transition: opacity 0.45s ease; }
@media (hover: hover) and (pointer: fine) {
  .lg-board--cradle:hover .lg-cradle { opacity: 0; }
  .lg-board--cradle:hover .lg-stage--hero, .lg-board--cradle:hover .lg-guide { opacity: 1; }
}

/* ID-011 — Nine Moves board in the Coral / charcoal colourway (same as .lg-way--coral) */
.lg-one__board { --lg-paper: #1C1C1C; background: #1C1C1C; }
.lg-one__board .lg-stage--one { --lg-bg: transparent; --lg-ink-logo: var(--lg-or); --lg-alt: #fff; }
.lg-one__board .lg-guide { border-top-color: rgba(255, 255, 255, 0.16); }
.lg-one__board .lg-guide i { color: rgba(255, 255, 255, 0.4); }
.lg-one__board .op-g { stroke: rgba(255, 255, 255, 0.22); }

/* ID-001 — Fig. 00 board stays off-white (#F2F2F0) on hover too, not black */
.lg-board--cradle { --lg-paper: #F2F2F0; background: #F2F2F0; }
.lg-board--cradle .lg-stage--hero { --lg-bg: transparent; --lg-alt: #1C1C1C; }
.lg-board--cradle .lg-guide { border-top-color: rgba(28, 28, 28, 0.35); }
.lg-board--cradle .lg-guide i { color: #8a8a86; }