/* Sections in the narrow column: letter, companies, team, end */

/* Letter. Type: Alpina Extended caps = brand, wayfinding and the letter title (uppercase, user 2026-10-06); GT America
   = text. Body 16 / 1.6 with 64 side padding: a 572 measure, ~76 characters per line (85 read as
   an island next to the near-edge-to-edge cards; 48 pushed lines past 80). Color: a soft silver from the title's family. */
.letter { padding: calc(70px * var(--u)) calc(64px * var(--u)) 0; color: var(--paper); }
.letter p:last-child { margin-bottom: 0; }
.letter h3 { font: 300 calc(30px * var(--u))/1.2 var(--f-display); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 calc(32px * var(--u));
  color: transparent; -webkit-background-clip: text; background-clip: text; width: fit-content;
  background-image: linear-gradient(180deg, var(--c-display-hi) 0%, var(--argent-300) 55%, var(--c-display-lo) 100%); }
.letter p { margin: 0 0 calc(22px * var(--u)); font-size: max(14px, calc(16px * var(--u))); line-height: 1.6; letter-spacing: .01em; color: var(--c-display-mid); }

/* Companies */
/* Letter → companies: the same Greek-key divider as above the team (user, 2026-10-06), 40 from the last line of text
   and 40 to the first card (replacing a 220 gap) */
/* Above the key the letter gets the same margin as its sides, 64 (user, 2026-10-06: 40 looked like the text was
   resting on the divider); below it stays 40 to the first card, so the divider reads as the head of the companies.
   (60 in code: the last line's half-leading adds ~4, so the visible gap is 64.) */
.team-head.key-head { height: calc((60px + 24px + 40px) * var(--u)); }
.team-head.key-head .key { top: calc(60px * var(--u)); }
.companies { padding: 0 calc(9px * var(--u)) 0; }   /* 9: the team cards' inset, so card edges and frame lines line up (was 10) */
.companies .card:last-child { margin-bottom: 0; }
/* Company card: at rest the logo sits centered on beige; revealed (.on, see setupCompanyReveal) the card darkens, the
   logo turns to Argent chrome and rises, and the description and link fade in below it (Figma frame 9, 849:14193:
   logo near the top, two lines of description, the URL underlined). One card at a time; no layout shift. */
/* At least 200 tall, so the revealed text fits on small desktop windows (QA, 2026-10-07: at 1024 the cards were 163) */
.card { --cardH: max(calc(240px * var(--u)), 200px); height: var(--cardH); border-radius: calc(56px * var(--u)); background: var(--beige); margin-bottom: calc(10px * var(--u)); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(ellipse at center, var(--earth-900), var(--earth-800)); }
.card.on::before { opacity: 1; }
/* Card corner brackets (the hero bracket system at card size, drawn in code): ‡ ornament on the card's long side */
.card, .person { position: relative; }
/* Solid colors (Figma: the company frame is solid strapwork): translucent strokes looked faded and built up lighter where
   they cross at the ‡ (user, 2026-10-06). Revealed card: the former look (travertine at 38% over earth-900), made solid. */
.cbr { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--strapwork); transition: color .45s ease; }
.card.on .cbr { color: color-mix(in srgb, var(--travertine) 38%, var(--earth-900)); }
/* Company logos: single-color SVGs from Figma (assets/logos, exact bounds), used as masks so all color lives here.
   --s = optical scale per logo (see sizeLogo() in cards.js); 1.2 = Figma's size, used until measured.
   Chrome is the logo's own fill (one light for every logo: lit at the card's center line, reaching shade 101 design px
   either side, Figma's per-logo radial falloff on the 91-wide logos); at rest an oak layer covers it and fades away
   when the card is revealed. */
.card .clogo, .card .clogo-text { position: absolute; left: 50%; top: 50%; --lift: 0px; transform: translate(-50%, calc(-50% - var(--lift)));
  transition: transform .55s cubic-bezier(.3, .6, .2, 1); }
.card.on .clogo, .card.on .clogo-text { --lift: calc(var(--cardH) * .27); }
.clogo { --s: 1.2; width: calc(var(--w) * var(--s) * 1px * var(--u)); height: calc(var(--h) * var(--s) * 1px * var(--u));
  background: linear-gradient(90deg in oklab, var(--shade) calc(50% - 101px * var(--u)), var(--lit) 50%, var(--shade) calc(50% + 101px * var(--u)));
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.clogo::before { content: ""; position: absolute; inset: 0; background: var(--oak); transition: opacity .45s ease; }
.card.on .clogo::before { opacity: 0; }
/* Companies without a logo in the Figma set yet: the name typeset as a stand-in */
.clogo-text { font: 500 calc(20px * var(--u))/1 var(--f-display); letter-spacing: .1em; color: var(--oak); white-space: nowrap; transition: color .45s ease; }
.card.on .clogo-text { color: var(--argent-200); }
.cinfo { position: absolute; left: 50%; top: 53%; width: min(calc(470px * var(--u)), 82%); transform: translate(-50%, calc(8px * var(--u)));
  display: flex; flex-direction: column; align-items: center; gap: calc(18px * var(--u)); opacity: 0;
  transition: opacity .4s ease, transform .5s cubic-bezier(.3, .6, .2, 1); }
/* The description and link are stacked, so the link always sits below however many lines the text takes (QA, 2026-10-07:
   at 1024–1100 the text wrapped to 3 lines and covered the link) */
.cdesc { margin: 0; text-align: center; font: 400 max(12px, calc(14px * var(--u)))/1.55 var(--f-text); color: var(--argent-200); }
.clink { pointer-events: none; font: 400 max(12px, calc(13px * var(--u)))/1 var(--f-text); letter-spacing: .02em; color: var(--argent-300);
  text-decoration: underline; text-decoration-color: rgba(190,193,199,.5); text-underline-offset: 3px; }
.card.on .cinfo { opacity: 1; transform: translate(-50%, 0); transition-delay: .12s; }
.card.on .clink { pointer-events: auto; }
.clink:hover, .clink:focus-visible { color: var(--argent-100); text-decoration-color: currentColor; }
.clink:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .card::before, .card .clogo, .card .clogo-text, .clogo::before, .cinfo, .cbr { transition-duration: .01s; transition-delay: 0s; }
}

/* Team (Figma frame 10): a header holding the Greek-key divider, then a 2-column grid of 349×374 cells with a silver
   star at each inner intersection. Equal space (40) from the divider to the nearest visible card edge above and below
   (the first team card is inset 9 in its cell). */
.team-head { position: relative; height: calc((40px + 24px + 40px - 9px) * var(--u)); }
/* The key spans exactly the column, ending at the beige gap line (a 1px inset left a sliver of column paint that read
   as a glitch; user, 2026-10-06) */
/* Between the team and the footer, the same visible spacing as the other dividers: 40 from the last cards (their 9
   inset + 31) and 40 down to the footer's window. The footer's top 64 (the nav row and the window's 8 inset) is its own
   band, so the divider overlaps 24 into it. */
.foot-key.team-head { height: calc((31px + 24px) * var(--u)); margin-bottom: calc(-24px * var(--u)); }
.foot-key.team-head .key { top: calc(31px * var(--u)); }
.team-head .key { position: absolute; left: 0; right: 0; top: calc(40px * var(--u)); height: calc(24px * var(--u));
  background: radial-gradient(ellipse 70% 900% at 50% 50%, var(--lit), var(--shade));
  mask: url(../assets/divider.svg) center / 100% 100% no-repeat; -webkit-mask: url(../assets/divider.svg) center / 100% 100% no-repeat; }
.team { --rowH: calc(374px * var(--u)); position: relative; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
/* Each card sits inside its 349×374 cell with a 9 inset, so taupe gaps show between cards and the stars sit in them.
   .person is the cell content (name and role); .pcard is the card itself (photo, fade, brackets), behind the name. */
.person { height: calc(356px * var(--u)); margin: calc(9px * var(--u)); border-radius: calc(46px * var(--u));
  display: grid; align-content: end; justify-items: center; padding-bottom: calc(32px * var(--u)); color: var(--silver);
  font: max(12px, calc(15px * var(--u)))/1.4 var(--f-display); letter-spacing: .08em; }
.pcard { position: absolute; inset: 0; border-radius: inherit; background: var(--c-portrait); overflow: hidden; z-index: 0; }
/* Placeholder portrait: 404 square at (−36.5, −43.5) in a 331×356 card, which centers the subject; toned into the
   palette (crisp, restrained warm color, deep near-black backdrop), with a dark fade behind the name */
.person .ph { position: absolute; left: -11.03%; top: -12.22%; width: 122.05%; aspect-ratio: 1; object-fit: cover;
  filter: saturate(.22) sepia(.22) contrast(1.32) brightness(.74); }
.pcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
  background: linear-gradient(180deg, rgba(14,11,9,0), rgba(14,11,9,.7) 55%, rgba(14,11,9,.92)); }
.person > .nm, .person > small { position: relative; z-index: 1; }
.pcard .cbr { z-index: 2; }
/* Long names wrap between first and last name instead of running into the corner ornaments (user, 2026-10-06):
   at most ~72% of the card wide, balanced; short names stay on one line. The role stays put; the name grows upward. */
.person .nm { display: block; text-align: center; max-width: 72%; text-wrap: balance; }
/* Roles: 12px flat (user, 2026-10-06) */
/* Roles: 12px at the design size (user, 2026-10-06), scaling down with the names on smaller windows (never below 10),
   so a role never looks louder than its name (QA, 2026-10-07) */
.person small { display: block; text-align: center; font: 400 clamp(10px, calc(12px * var(--u)), 12px)/1 var(--f-small); letter-spacing: .16em; color: var(--argent-400); margin-top: calc(10px * var(--u)); }
/* Team star (Figma 872:14847), two layers: the outer star in Argent (lit center → shade) and a small inner star with
   the gradient reversed (shade center → argent-300 at its tips), which gives it a recessed center. Size: 26, about 73%
   of Figma's 35.7 (user, 2026-10-06: too big). The inner star is 12/35.66 of the outer, centered. */
.star { position: absolute; --sz: calc(26px * var(--u)); width: var(--sz); height: var(--sz); transform: translate(-50%, -50%); z-index: 3;
  background: radial-gradient(circle, var(--lit), var(--shade));
  mask: url(../assets/star.svg) center / 100% 100% no-repeat; -webkit-mask: url(../assets/star.svg) center / 100% 100% no-repeat; }
.star::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--sz) * .3365); height: calc(var(--sz) * .3364);
  transform: translate(-50%, -50%); background: radial-gradient(circle, var(--shade) 0%, color-mix(in oklab, var(--shade) 55%, var(--argent-300)) 100%);
  mask: url(../assets/star-inner.svg) center / 100% 100% no-repeat; -webkit-mask: url(../assets/star-inner.svg) center / 100% 100% no-repeat; }
/* At the grid's outer edges, the half star from Figma (872:14852) instead of a sliced full star: the lower half plus a
   flat bar 0.744 above the center line (a straight top edge), and a small recessed center of the same shape, 1.26 lower
   (user, 2026-10-08: the sliced star read as a thin V). As in Figma its bar is level with the cards' edge (9 inside
   the grid line); at the bottom edge it's flipped to point up. */
.star.half-low, .star.half-up { height: calc(var(--sz) * 18.5703 / 35.6637);
  background: radial-gradient(ellipse 120% 220% at 53.6% 11%, var(--lit), var(--shade));
  mask: url(../assets/star-half.svg) center / 100% 100% no-repeat; -webkit-mask: url(../assets/star-half.svg) center / 100% 100% no-repeat; }
.star.half-low { transform: translate(-50%, calc(9px * var(--u))); }
.star.half-up { transform: translate(-50%, calc(-100% - 9px * var(--u))) scaleY(-1); }
.star.half-low::after, .star.half-up::after { top: calc(var(--sz) * 2.0014 / 35.6637); height: calc(var(--sz) * 6.2486 / 35.6637); transform: translateX(-50%);
  mask: url(../assets/star-half-inner.svg) center / 100% 100% no-repeat; -webkit-mask: url(../assets/star-half-inner.svg) center / 100% 100% no-repeat; }


/* Phase 1 (no content sections): the stretch of the column between the first screen and the footer, where the switch to
   the narrow frame plays on the brown (main.js); no section labels, and no side-window finale in the footer */
.p1gap { height: calc(360px * var(--u)); }
body.nosec .lbl, body.nosec .fside, body.nosec .navseam, body.nosec .topseam { display: none; }