/* Nav, frame lines and curves, rails, section labels. All motion here is scroll-driven (setupScrollAnims in main.js). */

/* Nav: pill (rest) → flat wide bar (hero pinned) → narrow bar (narrow layout). The nav keeps its 90 height and is pushed
   up 34 by a scroll-driven animation once the wordmark's divider reaches it, so its bottom line and that divider stay
   pixel-locked. overflow: clip keeps the pill inside. */
#nav { position: fixed; z-index: 6; left: 0; right: 0; top: 0; height: calc(90px * var(--u)); background: var(--beige); overflow: clip; }
#nav .navcol { position: absolute; top: 0; bottom: 0; border: 1px solid transparent; border-top: 0; border-bottom: 0;
  left: calc(var(--xl) - 1px); width: calc(var(--xr) - var(--xl) + 2px); }
/* Pill → flat bar: its insets and radius close as the wordmark divider presses the nav from 90 to 56, its dark fill
   fades out, and the text flips from light to dark at the midpoint. */
#nav .bar { position: absolute; display: flex; align-items: center; justify-content: center; gap: calc(30px * var(--u));
  left: calc(var(--sl) + 108px * var(--u)); top: calc(12px * var(--u)); width: calc(1296px * var(--u)); height: calc(66px * var(--u));
  border-radius: calc(80px * var(--u)); color: var(--link); font: calc(12px * var(--u))/1 var(--f-display); letter-spacing: .14em;   /* .14 for the Medium weight (was .10; user, 2026-10-08) */
 
  --link: var(--argent-100); --link-hover: var(--argent-50); transition: --link .15s ease; }
#nav .pfill { position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(ellipse at center, var(--earth-950) 0%, var(--oak) 100%); }
#nav.inked .bar { --link: var(--oak); --link-hover: var(--earth-950); }
/* Link colors (2026-10-08): on the beige bar the links rest in oak (5.4:1), the current section's link turns the darkest
   Argent, a cool near-black (9:1; the metal family of the pillar labels), and hover deepens to the darkest warm earth.
   Distinct by value and temperature; no underlines (user). --act is scroll-driven per link (the section at mid-screen, crossfading at the boundaries);
   --hov fades in on hover. The section only becomes current once the bar is flat, so the active color is only ever on
   beige. */
@property --act { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --hov { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --link { syntax: '<color>'; inherits: true; initial-value: #E3E5E8; }
:root { --nav-active: var(--argent-950); --nav-active-hover: var(--argent-950); }
#nav .bar a { text-decoration: none; transition: --hov .2s ease;
  color: color-mix(in oklab, color-mix(in oklab, var(--nav-active-hover) calc(var(--hov) * 100%), var(--nav-active)) calc(var(--act) * 100%),
    color-mix(in oklab, var(--link-hover) calc(var(--hov) * 100%), var(--link))); }
@media (hover: hover) { #nav .bar a:hover { --hov: 1; } }
#nav .bar a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
/* Sections land just below the fixed nav when jumped to */
main section { scroll-margin-top: calc(var(--pt) * 1px); }
/* Nav logo badge (Figma "Balius logo framed small", 40×40): a near-black square, a silver frame whose opening has
   rounded corners (r 10; inset 2, thicker than Figma's 1 so the frame still reads on the beige; user, 2026-10-07), and the
   engraved horse head in silver (assets/nav-horse.png: a single-color mask
   rendered from the Figma vector at 8x; the vector itself is ~200 KB of traced paths, too heavy to ship) */
#nav .logo, .flogo { position: relative; flex: none; width: calc(40px * var(--u)); height: calc(40px * var(--u));
  background: color-mix(in srgb, var(--earth-950) 55%, #000); }
#nav .logo::before, .flogo::before, .hbadge::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 140% 90% at 50% 20%, var(--lit), var(--shade) 70%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill-rule='evenodd' d='M0 0H40V40H0Z M12 2H28A10 10 0 0 1 38 12V28A10 10 0 0 1 28 38H12A10 10 0 0 1 2 28V12A10 10 0 0 1 12 2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill-rule='evenodd' d='M0 0H40V40H0Z M12 2H28A10 10 0 0 1 38 12V28A10 10 0 0 1 28 38H12A10 10 0 0 1 2 28V12A10 10 0 0 1 12 2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
#nav .logo::after, .flogo::after, .hbadge::after { content: ""; position: absolute; left: 11.75%; top: 16.75%; width: 79.9%; height: 75.7%;
  background: radial-gradient(ellipse 100% 80% at 50% 35%, var(--lit), var(--shade));
  -webkit-mask: url(../assets/nav-horse.png) center / 100% 100% no-repeat; mask: url(../assets/nav-horse.png) center / 100% 100% no-repeat; }
#nav .pin { position: absolute; top: 50%; width: calc(16px * var(--u)); height: calc(37px * var(--u)); }
#nav .pin.l { left: calc(36px * var(--u)); transform: translateY(-50%) rotate(-90deg); }
#nav .pin.r { right: calc(36px * var(--u)); transform: translateY(-50%) rotate(90deg); }

/* Divider under the nav: one line across the wide column. Entering the narrow layout its ends retract to the narrow
   edges (one continuous stroke with the curves, see setupScrollAnims) and it takes the frame color (--frameink: the
   pillars' live color, computed per frame from the same paint layers). */
#nav .divline { position: absolute; bottom: 0; height: 1px; left: var(--xl); width: calc(var(--xr) - var(--xl)); background: var(--taupe); }
#nav.narrow .divline { background: var(--frameink, var(--taupe)); }
/* Curves: 20×20 concave fillets, revealed by clip or by a conic sweep around their center of curvature (--sw) */
@property --sw { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cw, .cn, #frameBottom .fb { position: absolute; width: calc(20px * var(--u)); height: calc(20px * var(--u));
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-composite: intersect; -webkit-mask-composite: source-in; }
/* Wide curves: at the wide column edge, one pixel beside the column line, sitting on the divider row; taupe */
.cw { bottom: 1px; background: var(--taupe); --sw: 90deg; }
.cw.l { left: calc(var(--xl) - 1px - 20px * var(--u));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 0C20 0 18.3331 9.88773 14.1112 14.11C9.88881 18.3327 0 20 0 20H20V0Z'/%3E%3C/svg%3E"), conic-gradient(from calc(180deg - var(--sw)) at 0% 0%, #000 0deg var(--sw), transparent var(--sw));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 0C20 0 18.3331 9.88773 14.1112 14.11C9.88881 18.3327 0 20 0 20H20V0Z'/%3E%3C/svg%3E"), conic-gradient(from calc(180deg - var(--sw)) at 0% 0%, #000 0deg var(--sw), transparent var(--sw)); }
.cw.r { left: calc(var(--xr) + 1px);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0C0 0 1.6669 9.88773 5.8888 14.11C10.1112 18.3327 20 20 20 20H0V0Z'/%3E%3C/svg%3E"), conic-gradient(from 180deg at 100% 0%, #000 0deg var(--sw), transparent var(--sw));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0C0 0 1.6669 9.88773 5.8888 14.11C10.1112 18.3327 20 20 20 20H0V0Z'/%3E%3C/svg%3E"), conic-gradient(from 180deg at 100% 0%, #000 0deg var(--sw), transparent var(--sw)); }
/* Narrow curves: on the pillars' inner edges, ending at the nav bottom; pillar color */
.cn { bottom: 0; background: var(--frameink, var(--taupe)); --sw: 90deg; }
.cn.l { left: calc(var(--xnl) - 1px - 20px * var(--u));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 0C20 0 18.3331 9.88773 14.1112 14.11C9.88881 18.3327 0 20 0 20H20V0Z'/%3E%3C/svg%3E"), conic-gradient(from calc(180deg - var(--sw)) at 0% 0%, #000 0deg var(--sw), transparent var(--sw));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 0C20 0 18.3331 9.88773 14.1112 14.11C9.88881 18.3327 0 20 0 20H20V0Z'/%3E%3C/svg%3E"), conic-gradient(from calc(180deg - var(--sw)) at 0% 0%, #000 0deg var(--sw), transparent var(--sw)); }
.cn.r { left: calc(var(--xnr) + 1px);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0C0 0 1.6669 9.88773 5.8888 14.11C10.1112 18.3327 20 20 20 20H0V0Z'/%3E%3C/svg%3E"), conic-gradient(from 180deg at 100% 0%, #000 0deg var(--sw), transparent var(--sw));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0C0 0 1.6669 9.88773 5.8888 14.11C10.1112 18.3327 20 20 20 20H0V0Z'/%3E%3C/svg%3E"), conic-gradient(from 180deg at 100% 0%, #000 0deg var(--sw), transparent var(--sw)); }
/* Narrow side lines: grow upward out of the finished curve */
.ln { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--frameink, var(--taupe)); transform-origin: 50% 100%; transform: scaleY(0); }
.ln.l { left: calc(var(--xnl) - 2px); } .ln.r { left: calc(var(--xnr) + 1px); }
/* Narrow pins: outer end 20 from the narrow side lines, like the gap above and below them */
#nav .np { position: absolute; top: calc(50% + 17px * var(--u)); width: calc(16px * var(--u)); height: calc(37px * var(--u)); opacity: 0; }
#nav .np.l { left: calc(var(--xnl) - 1px + 30.5px * var(--u)); transform: translateY(-50%) rotate(-90deg); }
#nav .np.r { left: calc(var(--xnr) + 1px - 46.5px * var(--u)); transform: translateY(-50%) rotate(90deg); }

/* Bottom of the narrow frame (mirror of the top): after each pillar's bottom spike and the 1px gap row, a curve flows
   into a vertical line down to the screen edge. Pillar color at the bottom. */
#frameBottom { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#frameBottom i { position: absolute; top: calc(var(--pb) + 1px); background: var(--frameinkb, var(--taupe)); }
#frameBottom .fb { --sw: 90deg; }
#frameBottom .fb.l { left: calc(var(--xnl) - 1px - 20px * var(--u));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 20C20 20 18.3331 10.1123 14.1112 5.89C9.88881 1.6673 0 0 0 0H20V20Z'/%3E%3C/svg%3E"), conic-gradient(from 0deg at 0% 100%, #000 0deg var(--sw), transparent var(--sw));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 20C20 20 18.3331 10.1123 14.1112 5.89C9.88881 1.6673 0 0 0 0H20V20Z'/%3E%3C/svg%3E"), conic-gradient(from 0deg at 0% 100%, #000 0deg var(--sw), transparent var(--sw)); }
#frameBottom .fb.r { left: calc(var(--xnr) + 1px);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 20C0 20 1.6669 10.1123 5.8888 5.89C10.1112 1.6673 20 0 20 0H0V20Z'/%3E%3C/svg%3E"), conic-gradient(from calc(0deg - var(--sw)) at 100% 100%, #000 0deg var(--sw), transparent var(--sw));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 20C0 20 1.6669 10.1123 5.8888 5.89C10.1112 1.6673 20 0 20 0H0V20Z'/%3E%3C/svg%3E"), conic-gradient(from calc(0deg - var(--sw)) at 100% 100%, #000 0deg var(--sw), transparent var(--sw)); }
#frameBottom .vl { bottom: 0; width: 1px; transform-origin: 50% 0; transform: scaleY(0); }
#frameBottom .vl.l { left: calc(var(--xnl) - 2px); } #frameBottom .vl.r { left: calc(var(--xnr) + 1px); }

/* Shade under the narrow nav: a gradient strip exactly as wide as the column, starting right under the nav's gap row,
   so content darkens as it slides under the nav while the pillars stay untouched. Its strength adapts to what's under
   it (scroll-driven per section). */
#navShade { position: fixed; z-index: 5; pointer-events: none; left: var(--xnl); width: calc(var(--xnr) - var(--xnl));
  top: calc((var(--pt) - 1) * 1px); height: calc(64px * var(--u)); opacity: 0; }
#navShade i { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,21,16,.55) 0%, rgba(29,21,16,.32) 35%, rgba(29,21,16,.12) 70%, rgba(29,21,16,0) 100%); }

/* Wide rails, above the nav (z 7): their top curve sits inside the nav row, where the column line bends into the rail */
#rails { z-index: 7; mix-blend-mode: multiply; }
#rails svg { position: absolute; }
#railTop, #railLow { position: absolute; inset: 0; }
#rails .vline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-frame-soft); }
/* Drain pulse: a soft darker band that runs from the nav's corner curves down through the rails once the pill's brown
   has faded. Each side is a box masked to the rail + curve shape; only the band inside it moves (compositor). */
.pulse { position: absolute; overflow: hidden; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; pointer-events: none; }
.pulse.l { transform: scaleX(-1); }
.pulse i { position: absolute; left: 0; right: 0; top: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(69,55,44,.12) 22%, rgba(69,55,44,.28) 48%, rgba(69,55,44,.3) 58%,
    rgba(69,55,44,.2) 74%, rgba(69,55,44,.08) 88%, transparent 100%); }

/* Section labels, vertical, centered in each pillar's open area */
.lbl { position: fixed; z-index: 5; width: 0; pointer-events: none; opacity: 0; }
/* Pins before and after the text (the nav pin, 0.8×), stems pointing at the label; they swap with the text. In the
   label's own (unrotated) direction: the first points right, the second left. Masks are set in main.js (--pinR/--pinL). */
.lbl span { display: flex; align-items: center; gap: calc(26px * var(--u)); }
.lbl span::before, .lbl span::after { content: ""; flex: none; width: calc(29.6px * var(--u)); height: calc(12.8px * var(--u));
  background: radial-gradient(ellipse at 30% 50%, var(--lit), var(--shade));
  -webkit-mask: var(--pinR) center / 100% 100% no-repeat; mask: var(--pinR) center / 100% 100% no-repeat; }
.lbl span::after { background: radial-gradient(ellipse at 70% 50%, var(--lit), var(--shade));
  -webkit-mask: var(--pinL) center / 100% 100% no-repeat; mask: var(--pinL) center / 100% 100% no-repeat; }
.lbl span::before, .lbl span::after { transition: opacity .4s; }
.lbl span.blank::before, .lbl span.blank::after { opacity: 0; }
/* The word: two stacked copies for the morph (label.js); the box's width follows the word, so the pins slide with it.
   (Left padding balances the tracking after the last letter, so the word sits optically centered between the pins.) */
.lbl .morph { position: relative; display: block; flex: none; width: 0; height: 1em; font-weight: inherit; }
.lbl .morph i { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; font-style: normal;
  padding-left: .12em; }
.lbl span { position: absolute; left: 0; top: 0; font: calc(18px * var(--u))/1 var(--f-display); letter-spacing: .12em;
  color: var(--c-label); white-space: nowrap; transition: opacity .4s; }
.lbl.l span { transform: translate(-50%, -50%) rotate(-90deg); }
.lbl.r span { transform: translate(-50%, -50%) rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  #nav .bar, .lbl span { transition-duration: .01s; }
}