/* ============================================================================
   Isometricland — the header lockup: sizing and THE HOP
   ("logo.css" — paired with js/logo.js; both are stamped into every page by
    tools/stamp_logo.py, which also inlines the SVG itself.)

   The mark in the nav is not an <img>. It is the INLINE contents of
   website/assets/logo/header_lockup.svg, because an <img> is one opaque box
   and the owner asked for a per-LETTER hover — a wordmark letter that HOPS —
   which is not expressible against an image.

   ── THE TAGLINE, AND ITS SPIN, ARE GONE (2026-08-18) ────────────────────────
   The lockup used to carry "Theme Parks and Roller Coasters" on a plaque, and
   each of its 27 letters turned over on hover. The owner removed the tagline;
   the forge no longer emits g.lg-tagline, g.lg-plaque, g.lg-tl or
   path.lg-hit-tl, so every rule that named them is DELETED rather than left in
   place "harmlessly". A rule whose selector matches nothing is the exact shape
   of a check that passes vacuously, and the next person to read this file would
   have no way to tell a dead rule from a live one.

   What took its place in the art is scenery: g.lg-ground (a course of iso grass
   tiles) and g.lg-coaster (a wooden coaster with its own hills, running on its
   own profile rather than following the glyphs). Neither is interactive, so
   neither is named below.

   ⚠ THE TWO-PASS PAINT-ORDER LAW. Every wordmark letter is THREE groups living
   in THREE different parent layers — g.lg-shadow > .lg-wm-sh, g.lg-cols >
   .lg-wm-col, g.lg-faces > .lg-wm-face — so that ALL thirteen extrusion columns
   are painted before ANY face. Folding a letter's three parts into one group
   would put letter i's face UNDER letter i+1's column. So a hop is applied to
   the COLUMN and the FACE as two separate elements carrying the SAME transform;
   they are never re-parented. That is why the rules below name both, and why
   js/logo.js sets --hx/--hy on both.
   ============================================================================ */

/* ── THE NAV BAND ────────────────────────────────────────────────────────────
   MEASURED at 1440x900, 340px logo width — and measured TWICE, because the two
   ways of asking give different answers and only one of them is what the eye
   sees. getBBox() reports GEOMETRY and ignores stroke; rasterising the lockup
   to a canvas and scanning for the first and last row with any alpha reports
   the INK. The strokes are worth ~3 user units a side, so:

     viewBox              1935 x 569        (was 1935 x 537 with the plaque)
     svg box              340 x 99.97px
     ink, by getBBox      y  14.1 .. 543.9  user units
     ink, by RASTER       y  11.4 .. 551.9  user units   <- use this one
     art height           94.95px in a 99.97px box
     header height        108.34px -> 113.97px

   With 6px of nav padding that puts 8.0px above the coaster's topmost rail and
   9.0px below the wordmark's shadow. The padding STAYS 6px, which is a decision
   and not an omission: equalising those two gaps would be the wrong move,
   because the top edge of the art is a hairline rail and the bottom edge is the
   solid mass of thirteen letters plus their shadow, and a solid mass reads as
   CLOSER to an edge than a line does at the same distance. The heavier edge
   already has the larger gap, in the right proportion, for free.

   A row-by-row ink profile of the same raster says why the band reads as
   deliberate rather than merely tall: it is three zones, not one. y 11-140 is
   the coaster, sparse (3-43 % of the width inked); y 160-270 is the grass
   course, which is SOLID (92-100 %) and is what gives the bar a horizon; y 285
   is a deliberate 6 % gap; y 300-550 is the wordmark, peaking at 87 % and
   tapering out. The solid band sits above the word, so the eye lands on the
   horizon and reads down into the name.

   The other three breakpoints, measured on the same page (no horizontal
   overflow at any of them, and navicons.css's own !important padding takes over
   below 1140):
     1440px   logo 340px / 82.3->99.97px tall, header 113.97, nav pad 6px
     1100px   logo 280px /  82.3px tall, header 102.3,  nav pad 9px 14px
      820px   logo 280px /  82.3px tall, header 176.6 (the bar WRAPS here, and
               did before this change too)
      375px   logo 270px /  79.4px tall, header 189.0, cap height 20.6px

   The 340px width is left alone: navicons.css sizes the whole bar off it
   ("340px logo + five 92px tabs = 896px") and overrides it at two breakpoints
   (280px at <=1140, min(72vw,300px) at <=760). Shrinking the logo to hold the
   old header height would have bought 4px and invalidated all of that
   arithmetic.

   ⚠ THE PADDING LIVES IN THE MARKUP, NOT HERE, and that is not an oversight.
   The nav's padding is an inline style="…" attribute, which outranks any normal
   rule in this file; overriding it would take !important, and an !important
   padding here would then outrank navicons.css's OWN !important padding in the
   three responsive bands (equal specificity, later stylesheet wins) and quietly
   undo the narrow-window layouts. tools/stamp_logo.py rewrites the attribute on
   every page instead, which keeps one source for it and leaves the cascade
   exactly as navicons.css authored it. */
.wood > nav > a[aria-label="Isometricland"]{ line-height:0; }
.wood > nav > a[aria-label="Isometricland"] > svg.lg{ display:block; width:100%; height:auto; }

/* ⚠ CLIP THE LOCKUP TO ITS OWN viewBox — MEASURED, NOT PRECAUTIONARY.
   The forge's coaster does not stop at the frame: getBBox says .lg-rail and
   .lg-stringer run to x = 7998 user units, 4.1x the 1935-unit viewBox, as a
   flat tail at y = 118.7. Browsers apply `svg:not(:root){overflow:hidden}` from
   the UA sheet so an INLINE lockup is clipped anyway — but the standalone file
   opened on its own reports `overflow: visible`, which is a reminder that this
   art depends on a clip nobody has written down. One line makes it ours. If it
   is ever removed, a rail paints straight across the nav bar.
   (Reported to the forge; nothing here can fix the geometry itself.) */
svg.lg{ overflow:hidden; }

/* The generous sheared hit quads the forge emits sit on top of everything and
   swallow pointer events by design (fill=transparent, pointer-events=all).
   They must not swallow the CLICK: the whole lockup is inside <a href>, and a
   transparent path inside a link is still inside the link. Nothing to do here
   but say so — and to keep the text cursor away from a thing that is art. */
.lg, .lg *{ -webkit-user-select:none; user-select:none; }

/* ── THE HOP ─────────────────────────────────────────────────────────────────
   The letters are set on a WAVE now (up, down, up) rather than a single arch,
   which means they sit at very different heights and lean by up to 7.17deg. The
   hop goes along the letter's OWN up-axis, not screen-up: js/logo.js reads each
   letter's lean off its hit quad's transform attribute and writes the pair
   (--hx,--hy) = H * (sin a, -cos a), so a letter springs off the curve it is
   standing on rather than across it. See js/logo.js for the measured size of
   that choice (at most 0.53 CSS px sideways at the nav size) and for the two
   lines to change if plain screen-up is wanted instead.

   THE SHADOW STAYS PUT. g.lg-shadow is untouched by these rules, so the gap
   between the letter and its own shadow OPENS as it rises. That is the whole
   read of a hop; carrying the shadow with the letter reads as a slide.

   Two timing functions, deliberately: going UP overshoots and settles back
   (a spring), coming DOWN does not (an object falling into place does not
   bounce past the floor it is landing on). The up curve lives on .is-hop, the
   down curve on the base rule, which is what the element transitions back to. */
.lg .lg-wm-col,
.lg .lg-wm-face{
  transform: translate(0px, 0px);
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);   /* the settle */
}
.lg .lg-wm-col.is-hop,
.lg .lg-wm-face.is-hop{
  transform: translate(var(--hx, 0px), var(--hy, -24px));
  transition: transform 260ms cubic-bezier(.34,1.56,.64,1);  /* the lift, with overshoot */
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────────
   No hop — and no transition, so nothing is mid-flight when the preference is
   honoured. js/logo.js checks the same query and does not even add the class,
   but this rule is the one that HOLDS: it wins on !important whatever the
   script does, including a stale cached script.

   ⚠ Scoped to the two moving layers ONLY. `transform:none` on `.lg *` would
   also flatten the forge's own transform attributes — every hit quad carries
   `translate(x,y) rotate(a)` — and collapse all thirteen quads onto the origin.
   A reduced-motion rule that breaks hit-testing is worse than the motion. */
@media (prefers-reduced-motion: reduce){
  .lg .lg-wm-col,
  .lg .lg-wm-face{
    transform: none !important;
    transition: none !important;
  }
}