/* Phase 1 on desktop (body.p1d; user's Figma "Phase 1 Latest", 2026-10-19). The first screen is framed by two matching
   56 bands: the nav band and the bottom band in the tagline's place, each with pins and the Greek key. As the page
   starts to move, the frame turns: the beige beside the column fades to the brown underneath and the rails turn light on
   it. The page stops with a strip of the hero in view and the brown below it, the rails' lower ends curving into the
   floor. Motion: setupScrollAnimsP1 in main.js; rails: buildRailsP1; the floor: layoutFooterP1. Phones keep their own
   phase 1 layout for now (mobile.css). */
.p1-only { display: none; }
body.p1d .p1-only { display: block; }
body.p1d #nav .pfill, body.p1d #nav .logo, body.p1d #nav .cn, body.p1d #nav .ln, body.p1d #nav .np, body.p1d #frameBottom,
body.p1d .btn, body.p1d .tagline, body.p1d .fwm, body.p1d .flogo, body.p1d .p1gap { display: none; }

/* Nav: the flat 56 band from the start (no pill), the pins 20 from the frame lines */
body.p1d .navspace, body.p1d #nav { height: var(--p1nav, calc(56px * var(--u))); }   /* (a whole pixel: main.js layout) */
body.p1d #nav .bar { left: calc(var(--sl) + 96px * var(--u)); top: 0; width: calc(1320px * var(--u)); height: calc(56px * var(--u)); border-radius: 0; }
body.p1d #nav .pin.l { left: calc(30.5px * var(--u)); } body.p1d #nav .pin.r { right: calc(30.5px * var(--u)); }
/* Its Greek key: 70% of the column at rest (centered; layoutKeysP1), the full band (20 from the frame lines) once the wordmark row has passed under it.
   Three pieces (cards.js keyPiecesSVG): the ends slide out; the stripes between them stay put, shown through two windows that slide with the ends. Positions: layoutKeysP1. */
.nkey { position: absolute; inset: 0; pointer-events: none; }
.nkey i { position: absolute; top: calc(20px * var(--u)); height: calc(16px * var(--u)); background: var(--taupe);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.nkey { isolation: isolate; }
.nkey > i, .nkey > .kwo { mix-blend-mode: plus-lighter; }
/* the stripes' two windows (layoutKeysP1): plain boxes the band's height, each with its own fixed edge fade */
.nkey .kwo, .nkey .kwi { position: absolute; display: block; top: 0; height: 100%; }
.nkey .kwo { top: calc(20px * var(--u)); height: calc(16px * var(--u)); }
.nkey .kwi i { top: 0; }

/* The frame's turn (user's draft, 2026-10-19; user, 2026-10-20). One sweep, early in the scroll (--p1f 0 → 1,
   setupScrollAnimsP1): a soft edge travels from each column edge out to the screen edge, and nothing fades or changes
   color in place (masks: buildRailsP1):
   - the side beige (#sideCover) is drawn outward into the pillars: it stays where the edge hasn't reached
   - the pillars exist twice: as they are (tan, the original lower end) and as they become (light: beige where they meet
     the nav band and the floor, tan at 40%, with the bottom curve); they swap at a crisp edge in the middle of the soft
     one, never both at once; the same for the nav's corner (#cwOrig, #cwTurn)
   - the dark brown fills the divider like ink from the two corners where it meets the column lines, inward along the
     nav's divider and outward along the gap above the pillars; the column lines retract upward as the turn starts
   - the pillars step down 1px as the turn starts (--p1d), so the gap opens above them and their tips keep 1px inside
 */
@property --p1f { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p1d { syntax: '<number>'; inherits: true; initial-value: 0; }
#sideCover { z-index: 2; background: linear-gradient(90deg, var(--beige) var(--xl), transparent 0 var(--xr), var(--beige) 0);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
/* The floor (user, 2026-10-20: the first screen's bottom band staying and becoming the footer's beige; a floor scrolling
   in, or a tab rising into it, read as blocks entering): the bottom band is fixed, part of the frame like the nav band,
   beige across the full width; the pillars stand on it and the page passes behind it. Its key and pins stay as at rest
   (the pins fade with the turn); at the end its middle becomes the wordmark tab (--p1e; layoutFloorP1). A spacer keeps
   its place in the page. */
.p1spacer { display: none; }
body.p1d .p1spacer { display: block; height: var(--p1band); }
body.p1d .tag-row { position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: var(--p1band); z-index: 5; }
body.p1d .tsoft { display: none; }
/* The footer state forms in place, in steps, never two patterns at once and the wordmark only in a finished shell (user,
   2026-10-20), spread over the page's second half, from where the turn ends (user, 2026-10-20: it came too fast, too
   late). The band's key fades out first (--p1k, 300 → 245 before the end). Then (--p1e, linear in the scroll, 245 → 10
   before the end): the shell comes in small at the middle, the tab's two ends with their bars tip to tip (0–.1); its ends
   slide out whole to the column's edges, nothing stretched, while the plain middle fills in between them, solid toward
   the ends with a soft gap at the center that closes as it reaches full width (.1–.55, eased: the longest step); the finished
   tab underneath takes over (the corners swap at .55, identical) and the plain middle and floor fade off its cut wordmark
   (.55–.85); then the seams beside the tab draw down from its top (.85–1). Geometry: layoutFloorP1. */
@property --p1e { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p1k { syntax: '<number>'; inherits: true; initial-value: 0; }
body.p1d #tagRow > .stage > .bkey { background: var(--taupe); }
/* The band's row travels with the hero strip (user, 2026-10-20; desktop): the band itself (its beige across the column,
   its key and pins) sits in the spacer under the strip, in front of the floor (identical to it at rest; the floor has no
   key of its own here). Its beige then rises away as the tagline's did in the full site (user, 2026-10-20: the soft
   rise, not a sweep from the middle): a sheet with a soft bottom edge moves up through the row over its height plus
   70, the brown coming up from below; above the edge's middle the key is a tan copy (clipped there, counter-moving so
   it stays put), below it the silver one. The strip's corner pieces, under the sheet at rest, come out as it goes. */
body.p1d #tagRow > .stage > .bkey, body.p1d #tagRow > .bpin { display: none; }
.p1spacer { position: relative; }
.p1spacer .prow { display: none; }
body.p1d .p1spacer { z-index: 6; }
body.p1d .p1spacer .prow { display: block; }
.p1spacer .bkey { left: var(--xkl); }
.rsoft { position: absolute; top: 0; height: 100%; left: var(--xl); width: calc(var(--xr) - var(--xl)); overflow: clip; pointer-events: none; }
.rsoft .rmove { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
#rSheet { height: calc(var(--p1band) + 70px * var(--u)); background: var(--beige);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent 100%); }
#rDark { height: calc(var(--p1band) + 35px * var(--u)); overflow: clip; }
.rsoft .rcounter { position: absolute; left: 0; right: 0; top: 0; height: var(--p1band); will-change: transform; }
.rsoft .bkey.tan { left: var(--xkl); background: var(--taupe); }
/* the pins: the light foil for the brown under the sheet, their beige-tint copies in the rising layer above the edge's
   middle, so they switch tint with the key (user, 2026-10-21); that layer's counter-moving box spans the screen, so the
   copies sit exactly where the pins do */
.rsoft .rcounter { left: calc(-1 * var(--xl)); right: auto; width: 100vw; }
.p1behind { opacity: clamp(0, (var(--p1e) - .55) * 1000, 1); }
.p1ahead { opacity: calc(1 - clamp(0, (var(--p1e) - .55) / .3, 1)); }
.p1grow > div, .p1grow svg { position: absolute; left: 0; bottom: 0; overflow: visible; }
.p1grow { opacity: clamp(0, var(--p1e) / .1, 1);
  --t: clamp(0, (var(--p1e) - .1) / .45, 1); --g: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));   /* (eased: starts and stops gently) */
  --o: calc((1 - var(--g)) * var(--p1dl)); }
.p1grow .gl svg { transform: translateX(var(--o)); }
.p1grow .gr svg { transform: translateX(calc(-1 * var(--o))); }
.p1grow .gm svg { clip-path: inset(0 calc(var(--p1mr) + var(--o) - 2px) 0 calc(var(--p1ml) + var(--o) - 2px));
  /* the faint middle is an opening, not a see-through beige (the footer's last lines pass behind here and showed through
     a veil): solid toward the ends, a soft-edged gap at the center that closes as the ends reach the column's edges */
  --gw: calc((1 - var(--g)) * .65 * (var(--p1gg) - (1 - var(--g)) * var(--p1dl))); --gs: calc((1 - var(--g)) * 28px * var(--u) + .01px);
  --m: linear-gradient(90deg, #000 calc(50% - var(--gw) - var(--gs)), transparent calc(50% - var(--gw)), transparent calc(50% + var(--gw)), #000 calc(50% + var(--gw) + var(--gs)));
  -webkit-mask: var(--m); mask: var(--m);
  opacity: calc(1 - clamp(0, (var(--p1e) - .55) / .3, 1)); }
.p1grow .cb { opacity: calc(1 - clamp(0, (var(--p1e) - .55) * 1000, 1)); }
.p1corner { position: absolute; left: 0; overflow: visible; pointer-events: none; }
.hfill { position: absolute; bottom: 0; height: 1px; width: calc((var(--xr) - var(--xl)) / 2); background: var(--c-deep); }
/* the hero strip's corner pieces are there from the start (user, 2026-10-20): carved out of the first screen's beige,
   hidden in it at rest (under the bottom band and in the side beige), they travel with the strip and show as the beige
   around them goes; the line under the strip fills in brown from both corners at the turn, with the divider */
.hfill.l { left: calc(var(--xl) - var(--sl)); clip-path: inset(0 calc((1 - var(--p1f)) * 100%) 0 0); }
.hfill.r { left: calc(var(--xl) - var(--sl) + (var(--xr) - var(--xl)) / 2); clip-path: inset(0 0 0 calc((1 - var(--p1f)) * 100%)); }
.p1floor, .p1floor > div { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.p1floor > div > svg { position: absolute; left: 0; bottom: 0; overflow: visible; }
/* the seams beside the tab draw down from its top once the edge has reached them */
.p1floor .seam { transform-box: fill-box; transform-origin: 0 100%; transform: scaleY(calc(1 - clamp(0, (var(--p1e) - .85) / .15, 1))); }
body.p1d .navspace, body.p1d .wm-row, body.p1d .hero-row, body.p1d #nav {
  background: linear-gradient(90deg, transparent var(--xl), var(--beige) 0 var(--xr), transparent 0); }
body.p1d .tag-side { display: none; }
body.p1d #rails { mix-blend-mode: normal; }
.p1rail, .p1set, .p1cw { position: absolute; inset: 0; pointer-events: none; }
#cwMix { position: absolute; inset: 0; isolation: isolate; pointer-events: none; }
#cwMix > .p1cw { mix-blend-mode: plus-lighter; }   /* (the nav's two corners add up exactly across the sweep's soft edge) */
.p1set, .p1cw { mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
/* the pillars' two versions add up exactly (complementary soft masks), in their own group */
.p1mix { position: absolute; inset: 0; isolation: isolate; pointer-events: none; }
.p1mix > .p1set { mix-blend-mode: plus-lighter; }
body.p1d #railLow { transform: translateY(calc(var(--p1d) * 1px)); }
/* the bottom curve (rail.js railLayers): the flare and the hairline's tail stay anchored to the floor through the 1px step */
.p1flare, .p1line { transform: translateY(calc(var(--p1d) * -1px)); }
@property --p1m { syntax: '<number>'; inherits: true; initial-value: 0; }
.p1line path { stroke-dashoffset: calc(1 - var(--p1f)); }
body.p1color .p1line path { stroke-dashoffset: calc(1 - var(--p1m)); }   /* (the default order, color first: drawn on with the merge) */   /* (the hairline draws on, down and into its tail, with the turn: at rest the tail, reaching into the column, isn't there) */
/* The turned corner of the nav (Figma; user, 2026-10-20): one shape, 1px from the column, a 1px post running straight up
   the nav band's edge to the top of the screen and the curve leaving it vertically and flattening into the divider
   (tangent at both ends; the original curve starts at an angle, so a separate post kinked where they met) */
.cwp { position: absolute; top: 0; bottom: 1px; width: calc(20px * var(--u)); background: var(--beige);
  mask: var(--cwt) 0 100% / 100% 100% no-repeat; -webkit-mask: var(--cwt) 0 100% / 100% 100% no-repeat; }
.cwp.l { left: calc(var(--xl) - 1px - 20px * var(--u)); mask-image: var(--cwtl); -webkit-mask-image: var(--cwtl); } .cwp.r { left: calc(var(--xr) + 1px); }
/* the column lines retract upward from the screen bottom as the turn starts (the first 30%), before the pillars' new tails
   are drawn across where they ran (user, 2026-10-20: the two lines crossing) */
body.p1d #rails .vline { background: var(--taupe); clip-path: inset(0 0 calc(clamp(0, var(--p1f) / .3, 1) * 100%) 0); }
/* the divider's brown, filling from each column corner inward to the middle and outward to the screen edge */
.divfill { position: absolute; top: var(--p1top); width: 50%; height: 1px; background: var(--c-deep);
  clip-path: inset(0 calc((100% - var(--xl)) * (1 - var(--p1f))) 0 calc(var(--xl) * (1 - var(--p1f)))); }
.divfill.l { left: 0; } .divfill.r { left: 50%; transform: scaleX(-1); }

/* Hero: the logo badge (the nav badge, 56) at the center of the visible frame, in the veil's layer. No dark ground: its
   opening is a window onto the photo (its own copy, lined up with the hero's and held still against the layer's
   movement; main.js), so the photo shows behind the horse to the end. As the veil closes, its silver frame gives way to
   the veil's beige and a 1px ink outline comes in around it (--bf, heroSequence; Figma 986:17977). */
.hbadge { position: absolute; left: 50%; top: 50%; width: var(--bs, 56px); height: var(--bs, 56px);
  transform: translate(calc(-50% + var(--bdx, 0px)), -50%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-ink) calc((1 - var(--bf, 1)) * 100%), transparent); }
.hbwin { position: absolute; inset: calc(var(--bs, 56px) * .05); border-radius: calc(var(--bs, 56px) * .25); overflow: hidden; }
.hbplate { position: absolute; }
/* phones: the window settles into the badge's deep ground as the hero's photo goes (hero.js; under the window's shade) */
.hbwin .ground { display: none; }
body.m.p1m .hbwin .ground { display: block; position: absolute; inset: 0; opacity: 0; background: var(--earth-900); }
/* The photo in the opening is blurred and shaded (only there, not around the badge), so the engraved horse stands out
   against it (user, 2026-10-20: more contrast; it was a 40% shade alone, about the Figma badge's). The blur is baked into
   its own small copy (assets/hero-blur.jpg, about a 3px blur at the hero's scale): a live blur filter, redrawn with the
   veil every frame, made iPhones lag. The badge is its own layer, so the veil's changes don't redraw it at all. */
.hbadge { will-change: transform; }
.hbwin::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--earth-950) 55%, transparent); }
.hbadge::before { opacity: var(--bf, 1); }
/* The horse reaches past the opening onto the frame at its lower right (as on the nav's badge). Those parts go with the
   frame (user, 2026-10-20: left on the beige they read as a broken cut): the horse in two layers with fixed masks, the
   opening's part (::after) and the rest (.hbout), which fades with the frame by its opacity (a mask that changed every
   frame flickered on iPhones; the opening's shape is placed in the badge's coordinates, the horse box 11.75/16.75 in) */
.hbadge::after, .hbout { --S: var(--bs, 56px); --win: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='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") calc(var(--S) * -.1175) calc(var(--S) * -.1675) / var(--S) var(--S) no-repeat; }
.hbadge::after { -webkit-mask: url(../assets/nav-horse.png) center / 100% 100% no-repeat, var(--win); -webkit-mask-composite: source-in;
  mask: url(../assets/nav-horse.png) center / 100% 100% no-repeat, var(--win); mask-composite: intersect; }
.hbout { position: absolute; left: 11.75%; top: 16.75%; width: 79.9%; height: 75.7%; opacity: var(--bf, 1);
  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, var(--win); -webkit-mask-composite: source-out;
  mask: url(../assets/nav-horse.png) center / 100% 100% no-repeat, var(--win); mask-composite: subtract; }

/* Bottom band: the tagline row at the band's height, with the key (column-wide) and pins. The soft rise turns it brown:
   the key goes from tan (the grey copy's place) through oak to silver, as the tagline did. */
body.p1d .tag-row, body.p1d .tcounter { height: calc(56px * var(--u)); }
body.p1d #tmSheet, body.p1d #tmGrey { height: calc((56px + 70px) * var(--u)); }
body.p1d #tmDark { height: calc((56px + 35px) * var(--u)); }
.bkey { position: absolute; left: calc(var(--xkl) - var(--sl)); width: calc(var(--xkr) - var(--xkl)); top: calc(20px * var(--u)); height: calc(16px * var(--u));
  background: radial-gradient(ellipse 70% 900% at 50% 50%, var(--lit), var(--shade));
  mask: var(--bkey) center / 100% 100% no-repeat; -webkit-mask: var(--bkey) center / 100% 100% no-repeat; }
#tmDark .bkey { background: var(--oak); } #tmGrey .bkey { background: var(--taupe); }
.bpin { position: absolute; top: 50%; width: calc(16px * var(--u)); height: calc(37px * var(--u)); }
.bpin.l { left: calc(var(--sl) + 126.5px * var(--u)); transform: translateY(-50%) rotate(-90deg); }
.bpin.r { right: calc(var(--sl) + 126.5px * var(--u)); transform: translateY(-50%) rotate(90deg); }

/* Footer: the contents. No terms link in phase 1 (user, 2026-10-20), so the copyright closes the group */
body.nosec .fterms { display: none; }
body.p1d .fcontent { top: calc(50% - 77px * var(--u)); }   /* centered between the row's key and the wordmark, by their ink */
/* Order (user, 2026-10-19): BP on top, the contact lines, the team's star as a small divider, then copyright and terms
   (the groups dissolve into one column with the usual 24 between items; the copyright keeps its 6 to the terms) */
body.p1d .fcontent .fgrp { display: contents; }
body.p1d .fmark { order: -1; } body.p1d .fstar { order: 1; } body.p1d .fterms { order: 3; }
.fstar.star { position: relative; transform: none; z-index: auto; --sz: calc(18px * var(--u)); }

/* ---- Phase 1 on phones (body.m.p1m; first pass, 2026-10-20): desktop phase 1 at phone size (main.js setupScrollAnimsP1M).
   The phone draft (Figma 1012:20124): a 9 gutter, the brown framed by carved pieces (main.js layoutFrameP1M), the floor
   the wordmark band. ---- */
.p1frame { display: none; z-index: 2; pointer-events: none; }
body.m.p1m .p1frame { display: block; }
body.m.p1m .p1-only { display: block; }
body.m.p1m .cwp, body.m.p1m .hfill { display: none; }
body.m.p1m .btn, body.m.p1m .m-tag, body.m.p1m .p1gap, body.m.p1m .fwm, body.m.p1m .flogo, body.m.p1m .pfade, body.m.p1m.navlogo #nav .logo { display: none; }
/* Nav: the flat band from the start (no pill), its line under it; pins at the band's ends; the key centered in it */
body.m.p1m main { padding-top: var(--navh); }
body.m.p1m #nav .bar { left: 0; top: 0; width: 100%; height: var(--navh); border-radius: 0; }
body.m.p1m #nav .pfill { display: none; }
body.m.p1m #nav .mline { opacity: 1; }
body.m.p1m .wm-row, body.m.p1m .wm-row .stage { box-shadow: none; }   /* (the nav's line is the one under it: two made a 2px line) */
/* The line under the hero runs edge to edge, like the nav's (user, 2026-10-20), and so does the floor's (layoutFloorP1) */
body.m.p1m .hero-row .hline { left: calc(-1 * var(--xnl)); width: 100vw; }
body.m.p1m .nkey > i, body.m.p1m .nkey .kwo { top: calc((var(--navh) - 16px * var(--u)) / 2); }
/* Bottom band: the nav band's twin, fixed at the screen's bottom (the floor), beige across the full width and on below
   the screen's edge (under Safari's floating toolbar the page goes on) */
body.m.p1m .p1spacer { display: block; height: var(--p1band);
  background: linear-gradient(90deg, var(--beige) calc(var(--xnl) - 1px), var(--taupe) 0 var(--xnl), transparent 0 var(--xnr), var(--taupe) 0 calc(var(--xnr) + 1px), var(--beige) 0); }
body.m.p1m .tag-row { position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: var(--p1band); z-index: 5; background: none; }
body.m.p1m .tag-row::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: var(--beige); }
body.m.p1m .tag-row .stage { position: absolute; inset: 0; margin: 0; border: 0; background: none; }
body.m.p1m .p1floor { z-index: 0; }
body.m.p1m #tagRow > .stage > .bkey { left: var(--xkl); top: calc((var(--p1band) - 16px * var(--u)) / 2); z-index: 1; }
body.m.p1m #tagRow > .stage > .bkey { background: var(--taupe); opacity: calc(1 - var(--p1k)); }
body.m.p1m .bpin { width: calc(12px * var(--u)); height: calc(27.75px * var(--u)); z-index: 1; opacity: calc(1 - var(--p1k)); }
body.m.p1m .bpin.l { left: calc((14px + 7.875px) * var(--u)); right: auto; }
body.m.p1m .bpin.r { right: calc((14px + 7.875px) * var(--u)); left: auto; }
/* Footer: the desktop order, centered between the hero strip and the floor's top */
body.m.p1m .fcontent { top: calc(50% - var(--p1band)); }
body.m.p1m .fcontent .fgrp { display: contents; }
body.m.p1m .fcontent .fmark, body.m.p1m .fstar { display: none; }   /* (only the city now: no BP, no star; user, 2026-10-21) */

/* ---- The footer's sign-off on desktop (user's layout, 2026-10-20): no tab. A silver wordmark at the foot of the brown,
   between the pillars' tails (which run along the floor to just short of it; main.js P1WM, buildRailsP1); the city
   alone centered between the row and the wordmark (no BP, no star, no copyright: user, 2026-10-20/21); the floor plain. ---- */
.p1wm { display: none; }
body.p1d .p1wm { display: block; position: absolute; left: calc(var(--sl) + 216px * var(--u)); width: calc(1080px * var(--u));
  height: calc(1080px * var(--u) * 79 / 1256); bottom: calc(var(--p1band) + 10px * var(--u));
  background: radial-gradient(ellipse 60% 260% at 50% 20%, var(--lit), var(--shade));
  -webkit-mask: var(--wmmask) center / 100% 100% no-repeat; mask: var(--wmmask) center / 100% 100% no-repeat; }
body.p1d .fstar, body.p1d .fcontent .fmark { display: none; }   /* (no BP emblem either: user, 2026-10-20) */

/* Phone frame lines the color of the brown (user, 2026-10-21; main.js linesP1M): the column's lines are two page-long
   lines painted with the brown's own gradients; the rows' own column borders and the spacer's and footer's line stops
   give way to them; the nav's line is the deep brown */
.p1vl { display: none; }
body.m.p1m .p1vl { display: block; position: absolute; top: 0; width: 1px; z-index: 4; pointer-events: none; }
body.m.p1m .stage { border-color: transparent; }
body.m.p1m #nav .mline { background: var(--c-deep); }
body.m.p1m .mfoot .fcol { border-color: transparent; }
body.m.p1m .mfoot .ffade { display: none; }   /* (the full site's pillar fade above the footer half-covered the lines in the gutters: plain 9 gutters here) */
body.m.p1m .p1spacer { background: linear-gradient(90deg, var(--beige) calc(var(--xnl) - 1px), transparent 0 calc(var(--xnr) + 1px), var(--beige) 0); }

/* Phones: the Greek key 14 tall (layoutKeysP1) and the pins 0.85 of the desktop pin (were 16 and 0.75; user, 2026-10-21:
   a better balance), outer ends still 14 from the band's ends (rotated box: 31.45 long, 13.6 wide) */
body.m.p1m .nkey > i, body.m.p1m .nkey .kwo { height: var(--kh); top: calc((var(--navh) - var(--kh)) / 2); }
body.m.p1m .nkey .kwi i { height: var(--kh); }
body.m.p1m #tagRow > .stage > .bkey { height: var(--kh); top: calc((var(--p1band) - var(--kh)) / 2); }
body.m.p1m #nav .pin, body.m.p1m .bpin { width: calc(13.6px * var(--u)); height: calc(31.45px * var(--u)); }
body.m.p1m #nav .pin.l, body.m.p1m .bpin.l { left: calc((14px + 8.925px) * var(--u)); }
body.m.p1m #nav .pin.r, body.m.p1m .bpin.r { right: calc((14px + 8.925px) * var(--u)); }