/* ==========================================================================
   Samsara Design — styles
   Tokens from Samsara Brand Guidelines V1.1 (August 2026)
   Type: Samsara Sans (display), FK Grotesk Regular/Medium/Bold (text), FK Grotesk Mono (meta),
         Samsara Script (hand-written captions, used sparingly)
   ========================================================================== */

@font-face{font-family:"Samsara Sans";src:url("fonts/SamsaraSansBETA10-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Samsara Script";src:url("fonts/SamsaraScriptBETA10-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"FK Grotesk";src:url("fonts/FKGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FK Grotesk";src:url("fonts/FKGrotesk-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"FK Grotesk";src:url("fonts/FKGrotesk-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"FK Grotesk Mono";src:url("fonts/FKGroteskMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Primary palette */
  --gray-100:#F5F4F1; --gray-200:#EAE8E3; --gray-300:#E0DDD5; --gray-400:#CCC9C1;
  --gray-500:#B9B6AD; --gray-600:#9C9890; --gray-700:#716F67; --gray-800:#403D37;
  --gray-900:#221F1B; --black:#1C1917; --white:#FFFFFF; --signal:#FEAE0F;
  /* Secondary (UI semantics only) */
  --red:#EE2B35; --emerald:#01B665; --blue:#2A75D4; --sky:#42C2E5;

  --hair:rgba(28,25,23,.10); --hair-strong:rgba(28,25,23,.22); --hair-dark:rgba(245,244,241,.12);

  --font-display:"Samsara Sans","FK Grotesk",sans-serif;
  --font-sans:"FK Grotesk",system-ui,sans-serif;
  --font-mono:"FK Grotesk Mono",ui-monospace,monospace;
  --font-script:"Samsara Script",cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,4.2vw,72px);
  --max:1520px;
  --sec-pad:clamp(96px,12vw,200px);
  --radius-ui:10px;
  --nav-h:56px;
  --nav-top:12px;                             /* the gap above the lockup's bar */
  --safe-top:env(safe-area-inset-top,0px);    /* the notch or status bar, when the page runs under it (viewport-fit=cover) */
  --band-tail:32px;                           /* how far below the lockup's bar the scrim and the blur reach */
  --logo-lift:6px;                            /* the lockup sits this much above the middle of its bar; the band stays */
  --band-h:calc(var(--safe-top) + var(--nav-top) + var(--nav-h) + var(--band-tail));  /* scrim and blur, from the top */
  --bleed:0px;                                /* how far they reach up past the top of the window, see below */
}
/* Safari on iOS runs the page on up under its status bar, above the top of the window that position:fixed measures
   from, so there the scrim and the blur reach --bleed further up, at full strength, to meet the edge of the screen.
   Above the screen it is simply cut off, so it can safely be more than any status bar. */
@supports (-webkit-touch-callout: none){:root{--bleed:72px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--safe-top) + var(--nav-top) + var(--nav-h) + 12px);-webkit-text-size-adjust:100%;background:var(--gray-100);overflow-x:clip}
html:has(dialog[open]){overflow:hidden;padding-right:var(--sbw,0px)}
/* The speckle grain is part of the paper: a background that scrolls with the page, under everything on it (app.js
   generates the tiles). It used to be a fixed overlay above the page, which read as dirt on the screen and gave
   Safari a fixed element on both edges to paint its status bar and toolbar with. */
body{
  margin:0;background-color:var(--gray-100);background-image:var(--speck-dark,none);background-size:420px 420px;color:var(--black);
  font:500 17px/1.35 var(--font-sans);letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
code{font:500 .92em var(--font-mono);background:rgba(28,25,23,.06);padding:.1em .35em;border-radius:3px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.sec-signal :focus-visible{outline-color:var(--black)}
::selection{background:var(--signal);color:var(--black)}

.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--black);color:var(--gray-100);padding:10px 14px;border-radius:3px}
.skip:focus{top:12px}
.noscript{margin:0;padding:16px var(--gutter);background:var(--signal);font:500 14px var(--font-sans)}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.nowrap{white-space:nowrap}

/* ----- type utilities -------------------------------------------------- */
.display{font:400 1em/.9 var(--font-display);text-transform:uppercase;letter-spacing:0}
.h1{font:700 clamp(40px,5.4vw,100px)/.95 var(--font-sans);letter-spacing:-.015em;text-wrap:balance}
.h3{font:700 clamp(24px,2.4vw,34px)/1.02 var(--font-sans);letter-spacing:-.01em}
.mono{font:500 12px/1.15 var(--font-mono);letter-spacing:.03em;text-transform:uppercase}
.mono.sc{text-transform:none}
.script{font:400 1em/1 var(--font-script);text-transform:none;letter-spacing:0}
.eyebrow{display:flex;align-items:center;gap:14px;font:500 12px/1.15 var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--gray-700)}
.eyebrow .idx{color:var(--black);position:relative;padding-right:14px}
.eyebrow .idx::after{content:"";position:absolute;right:0;top:50%;width:1px;height:12px;background:var(--hair-strong);transform:translateY(-50%)}
.sec-dark .eyebrow{color:var(--gray-500)}
.sec-dark .eyebrow .idx{color:var(--gray-100)}
.sec-dark .eyebrow .idx::after{background:var(--hair-dark)}
.sec-signal .eyebrow{color:rgba(28,25,23,.7)}
.sec-signal .eyebrow .idx{color:var(--black)}

/* Signal highlight markup */
/* Marker-style highlight. FK Grotesk: ascent .96em, cap height .72em, so the band runs from just above the caps to just under the baseline instead of the full 1.28em content box. */
.hl{color:var(--black);padding:0 .12em;margin:0 -.04em;background:linear-gradient(var(--signal),var(--signal)) no-repeat 0 .19em / 100% .84em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Brush underline markup (hand-painted vector from the brand library) */
.ul{position:absolute;left:-1%;right:-1%;bottom:-.075em;height:.085em;background:currentColor;color:var(--signal);pointer-events:none;
  -webkit-mask:url("assets/underline-1.svg") center/100% 100% no-repeat;mask:url("assets/underline-1.svg") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.ul-2{-webkit-mask-image:url("assets/underline-2.svg");mask-image:url("assets/underline-2.svg");height:.1em;bottom:-.1em}
.ul-dark{color:var(--black)}
.reveal.in .ul{clip-path:inset(0 0 0 0);transition-delay:.45s}

/* ----- buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.65em;font:500 13px/1 var(--font-sans);letter-spacing:0;padding:12px 14px;border-radius:3px;
  background:var(--black);color:var(--gray-100);border:1px solid transparent;white-space:nowrap;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn .arr{display:inline-block;transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:hover{background:var(--gray-900)}
.btn:active{transform:scale(.98)}
.btn-signal{background:var(--signal);color:var(--black)}
.btn-signal:hover{background:#F2A308}
.btn-ghost{background:transparent;border-color:var(--hair-strong);color:var(--black)}
.btn-ghost:hover{background:rgba(28,25,23,.06)}
.sec-dark .btn-ghost{color:var(--gray-100);border-color:var(--hair-dark)}
.sec-dark .btn-ghost:hover{background:rgba(245,244,241,.06)}

/* ----- reveal ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.05s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   NAV
   The brand lockup in the top-left corner, on no bar of its own: owl, SAMSARA, DESIGN. The two words are masks of
   assets/samsara.svg and assets/design.svg, the same outlines the hero title is built from, sized in `cap`
   units of one font so they share a cap height. The owl is always visible; the words rise in once the hero title
   has scrolled out of view (hero.js toggles .docked) and drop out again when it comes back; docked, the page fades
   into its own colour and blurs progressively under it (the bands below). Over the dark section and the footer the lockup flips to light (hero.js toggles .over-dark).
   Phones: the page runs under the status bar (viewport-fit=cover), so the lockup drops by --safe-top wherever the
   system reports one, and there is no rail.
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:calc(var(--safe-top) + var(--nav-top) - var(--logo-lift)) var(--gutter) 0;pointer-events:none;
  visibility:hidden}                         /* only its parts show; see "Safari's bars" below */
.nav-in{visibility:visible}
.nav-in{position:relative;max-width:var(--max);margin:0 auto}   /* positioned: a layer of its own (Safari's bars) */
.nav-bar{display:inline-flex;align-items:center;height:var(--nav-h)}
.brand{pointer-events:auto}                  /* only the link takes the pointer, clear of the top 8px (Safari's bars) */
/* Brand lockup. Everything is sized in `cap` units of the same font, so the two words have identical cap heights and
   sit on one baseline. Widths are the assets' aspect ratios: samsara.svg 6519.1×700, design.svg 4780×700. */
.brand{display:flex;align-items:flex-end;gap:.5cap;font:400 15px/1 var(--font-display);color:var(--black);transition:color .4s var(--ease)}
.nav.over-dark .brand{color:var(--gray-100)}
.brand-word,.brand-design{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.brand-design{transition-delay:.06s}
.nav.docked .brand-word,.nav.docked .brand-design{opacity:1;transform:none}
.brand-owl{position:relative;top:.36cap;height:1.72cap;width:calc(1.72cap * 1.045);margin-right:.24em;background:currentColor;-webkit-mask:url("assets/owl.svg") center/contain no-repeat;mask:url("assets/owl.svg") center/contain no-repeat}
.brand-word{height:1cap;width:calc(1cap * 9.313);background:currentColor;-webkit-mask:url("assets/samsara.svg") center/contain no-repeat;mask:url("assets/samsara.svg") center/contain no-repeat}
.brand-design{height:1cap;width:calc(1cap * 6.8286);background:currentColor;-webkit-mask:url("assets/design.svg") center/contain no-repeat;mask:url("assets/design.svg") center/contain no-repeat}
@supports not (height: 1cap){
  .brand{gap:5px}
  .brand-owl{height:18px;width:19px;top:4px}
  .brand-word{height:10.5px;width:97.8px}
  .brand-design{height:10.5px;width:71.7px}
}
/* Under the docked lockup the page fades into its own colour (the scrim) and goes out of focus (the blur), both
   strongest at the top of the window and gone --band-tail below the bottom of the lockup's bar.

   Both live in one band per section (hero.js puts a .scrim in the hero, every section and the footer): a sticky
   wrapper (i) stuck to the top of the window while its section is there, and inside it the band proper (u) with the
   colour and the blur. The wrapper clips, and two scroll-driven animations hold the band still against the window
   while the wrapper is not yet stuck (its section's top edge coming up through the band) or is being pushed out
   (its section's bottom edge leaving): the band is then only visible where the window's band and the section
   overlap, so the colour switches exactly where the sections meet and neither section's top ever arrives with a
   blurred, tinted block riding on it. Without scroll-driven animations the band simply rides with its wrapper. A
   band is only switched on (.on, from hero.js) while its section is at the top of the window, so no more than two
   or three sets of blur layers are live. The sticky element is a hidden wrapper (see "Safari's bars" below).

   The bleed. Safari on iOS lays the page out below its status bar and shows what has scrolled up behind it, so the
   band reaches --bleed above the top of the window. WebKit (iOS 26, "viewport clipping") wraps every fixed or
   sticky layer whose compositing ancestor is the page in a clipping layer the size of the window, which cut the
   overhang off: the hero's band, stuck the whole time the lockup is docked, ended in a sharp line under the status
   bar, while a band that was still sliding up with its section could show above it for a moment. A sticky element
   inside a composited ancestor is left unclipped, so .scrim is a compositing layer of its own (will-change);
   an empty layer, no backing store. Checked on the iOS 26.2 simulator: the colour and the blur now run up behind
   the status bar in every section, and Safari still paints no solid colour into the bar (see "Safari's bars").

   Scrim: its ::before, the section's colour at --scrim-a at the top of the window and fading all the way down to
   nothing at the bottom of the band. */
.hero,.sec,.foot{--scrim-c:var(--gray-100)}
.sec-dark,.foot{--scrim-c:var(--black)}
.sec-signal{--scrim-c:var(--signal)}
.scrim{position:absolute;inset:0;z-index:30;pointer-events:none;will-change:transform;view-timeline-name:--band;view-timeline-inset:0;--scrim-a:40%;--pb-blur:.5px}   /* will-change: a layer of its own, so WebKit does not clip the band to the window (the bleed, above) */
.scrim i{position:sticky;top:calc(-1 * var(--bleed));display:block;height:calc(var(--bleed) + var(--band-h));visibility:hidden;overflow:clip}
.scrim u{position:absolute;inset:0;display:block}   /* the band proper; positioned, so the hidden wrapper stays hidden to Safari (below) */
/* Held to the window: while the section's top edge travels from the bottom of the band up to where the wrapper
   sticks, the band is moved up by the same distance (translate), and while the section's bottom edge travels the
   same way, down (transform); the two compose. Both ranges are measured on the section (.scrim, its size) crossing
   the window's top edge (exit-crossing: 0% its top edge there, 100% its bottom edge there, whatever its height;
   `exit` would move with the bottom edge for sections taller than the window). view-timeline-inset:0, or the
   edge would sit scroll-padding-top lower. */
@supports (animation-timeline: view()){
  .scrim u{animation:band-arrive linear both,band-leave linear both;animation-timeline:--band,--band;
    animation-range:exit-crossing calc(-1 * var(--band-h)) exit-crossing var(--bleed),exit-crossing calc(100% - var(--band-h)) exit-crossing calc(100% + var(--bleed))}
  @keyframes band-arrive{from{translate:0 calc(-1 * (var(--bleed) + var(--band-h)))}to{translate:0 0}}
  @keyframes band-leave{from{transform:none}to{transform:translateY(calc(var(--bleed) + var(--band-h)))}}
}
.scrim u::before,.scrim b{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.scrim u::before{content:"";background-color:color-mix(in srgb,var(--scrim-c) var(--scrim-a),transparent);
  --f:linear-gradient(180deg,#000 var(--bleed),rgba(0,0,0,.84) calc(var(--bleed) + var(--band-h) * .25),rgba(0,0,0,.5) calc(var(--bleed) + var(--band-h) * .5),
    rgba(0,0,0,.16) calc(var(--bleed) + var(--band-h) * .75),transparent);   /* smoothstep from the top of the window down */
  -webkit-mask-image:var(--f);mask-image:var(--f)}
/* Progressive blur: the six <b> over the colour, so the page and the colour go out of focus together, hardest at the
   top of the window and less and less down to the bottom of the band, where it is sharp again
   (after kennethnym.com/blog/progressive-blur-in-css). Each layer blurs the page behind it by twice as much as the
   one before (from --pb-blur up to 32 times it) and is masked to a band of the height, each band a little higher and
   overlapping the last, so the strengths blend into one another. Each fades in on its own: an opacity below 1 on
   their parent would cut them off from the page they blur. */
.scrim b{-webkit-backdrop-filter:blur(calc(var(--pb-blur) * var(--x)));backdrop-filter:blur(calc(var(--pb-blur) * var(--x)));
  --f:linear-gradient(0deg,transparent calc(var(--band-h) * var(--m0)),#000 calc(var(--band-h) * var(--m1)),#000 calc(var(--band-h) * var(--m2)),transparent calc(var(--band-h) * var(--m3)));
  -webkit-mask-image:var(--f);mask-image:var(--f)}
.scrim b:nth-child(1){--x:1;--m0:0;--m1:.1;--m2:.3;--m3:.4}      /* bands in fractions of --band-h, up from the sharp end */
.scrim b:nth-child(2){--x:2;--m0:.1;--m1:.2;--m2:.4;--m3:.5}
.scrim b:nth-child(3){--x:4;--m0:.15;--m1:.3;--m2:.5;--m3:.6}
.scrim b:nth-child(4){--x:8;--m0:.2;--m1:.4;--m2:.6;--m3:.7}
.scrim b:nth-child(5){--x:16;--m0:.4;--m1:.6;--m2:.8;--m3:.9}
.scrim b:nth-child(6){--x:32;--m0:.6;--m1:.8;--m2:9;--m3:10}       /* the hardest runs on up through the bleed */
:root:has(.nav.docked) .scrim.on u::before,:root:has(.nav.docked) .scrim.on b{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
/* Safari's bars. On iOS 26 Safari colours its status bar and toolbar from the page (WebKit's
   LocalFrameView::fixedContainerEdges): it hit-tests the midpoint of each edge of the window, 4px in, first ignoring
   pointer-events, and walks up from what it hits to the first fixed or sticky ancestor. That element's
   background-color, or else a colour sampled once and kept, paints the bar solid, which is what kept a paper strip
   over the black section. It walks past a container that is visibility:hidden, but only if nothing visible inside
   it paints without a layer of its own, and if that container is also pointer-events:none it hit-tests again
   honouring pointer-events. So every fixed or sticky wrapper here (.nav, .scrim i) is hidden and pointer-events:none,
   the parts that show are positioned so they have their own layers (.nav-in relative, the band's <u>, its ::before
   and the <b> absolute), and nothing that takes the pointer sits at the middle of an edge (only the lockup's link does,
   15px or more down). Keep it so for anything fixed or sticky. */

/* ==========================================================================
   RAIL
   Five ticks on the left edge of the window, vertically centred. The active section's tick is longer and Signal;
   labels slide out on hover or keyboard focus. Colours follow the section under the middle of the viewport
   (app.js toggles .on-dark and .on-signal).
   ========================================================================== */
.rail{position:fixed;left:0;top:50%;z-index:42;transform:translateY(-50%);display:flex;flex-direction:column;padding:10px 0;
  --rail-fg:var(--black);--rail-bg:var(--gray-100);--rail-hot:var(--signal);color:var(--rail-fg);transition:color .4s var(--ease)}
.rail.on-dark{--rail-fg:var(--gray-100);--rail-bg:var(--black)}
.rail.on-signal{--rail-bg:var(--signal);--rail-hot:var(--black)}
.rail a{position:relative;display:flex;align-items:center;height:24px;padding:0 8px 0 24px;color:inherit}
.rail i{position:relative;display:block;width:28px;height:2px}
.rail i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:currentColor;opacity:.32;
  transition:width .45s var(--ease),opacity .3s var(--ease),background-color .3s var(--ease)}
.rail a:hover i::before,.rail a:focus-visible i::before{width:22px;opacity:.75}
.rail a.active i::before{width:28px;opacity:1;background:var(--rail-hot)}
/* Labels are small chips in the section's inverse colours so they stay legible over whatever they slide out onto. */
.rail span{position:absolute;left:66px;top:50%;padding:6px 8px 5px;border-radius:3px;background:var(--rail-fg);color:var(--rail-bg);
  font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translate(-8px,-50%);pointer-events:none;transition:opacity .3s var(--ease),transform .45s var(--ease),background-color .4s var(--ease),color .4s var(--ease);transition-delay:calc(var(--i,0) * 25ms)}
.rail:hover span,.rail:focus-within span{opacity:1;transform:translate(0,-50%);pointer-events:auto}
/* While the rail is open each link's hover area extends to the right under its label (app.js sets --lw to the label's
   width), so the pointer can travel from a tick to its label without closing the rail. */
.rail:hover a::after,.rail:focus-within a::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:calc(var(--lw,120px) + 14px)}
.rail a:hover span,.rail a:focus-visible span{background:var(--signal);color:var(--black)}
.rail.on-signal a:hover span,.rail.on-signal a:focus-visible span{box-shadow:inset 0 0 0 1px var(--black)}

/* ==========================================================================
   HERO
   Grid paper, the title as two SVG words that fill the content column (hero.js builds them from hero-glyphs.js),
   the lede. The title sketches itself in on load and scrolls away; the nav lockup rises in once it has gone.
   ========================================================================== */
/* The hero fills the window with Safari's toolbar showing (svh, not dvh): a dvh hero grew as the toolbar shrank on
   scroll, so the title and lede at its foot jittered, and the resizing is the likeliest reason Safari did not draw its
   band up behind the status bar. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--safe-top) + var(--nav-top) + var(--nav-h) + 20px)}
/* Grid paper. hero.js sets --paper-x/--paper-y so a column line runs down the content edge and a row line sits under
   SAMSARA's baseline. A bolder line every five cells. Fades out over the last 96px, before the work section begins. */
.hero-paper{position:absolute;inset:0;z-index:0;pointer-events:none;--cell:32px;--line:rgba(28,25,23,.06);--line-major:rgba(28,25,23,.11);
  background-image:
    linear-gradient(90deg,var(--line-major) 1px,transparent 1px),linear-gradient(180deg,var(--line-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(180deg,var(--line) 1px,transparent 1px);
  background-size:calc(var(--cell) * 5) calc(var(--cell) * 5),calc(var(--cell) * 5) calc(var(--cell) * 5),var(--cell) var(--cell),var(--cell) var(--cell);
  background-position:var(--paper-x,0) var(--paper-y,0);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 96px),transparent)}
/* Cursor delight: a small feathered disc that darkens the grid around the pointer. A 320px square masked to a soft
   disc; hero.js sets --cx/--cy (pointer position in paper coordinates), which move it. .glow-lines is the grid in a
   darker ink (--ink-a, and --ink-a-major for every fifth line), offset by the disc's own position (--at) so its lines
   land exactly on the paper's.
   Chromatic aberration: each line carries a coloured edge --fringe-w wide on either side, touching it, warm on the side
   facing away from the cursor and cool on the side facing it. The edges never move; only their colour grows, from
   nothing at --fringe-in of the radius to --fringe at --fringe-out (the cool edge --fringe-cool-boost times as strong,
   since cyan is the fainter of the two on this paper), measured along each axis as a lens does (a vertical
   line's fringe depends on how far left or right of the cursor it is). Four layers under the lines (.fr-right, .fr-left
   for vertical lines, .fr-below, .fr-above for horizontal ones), each a colour ramp masked to its edges of the grid.
   Open the page with ?tune to play. */
.paper-glow{position:absolute;left:0;top:0;width:320px;height:320px;opacity:0;pointer-events:none;
  --ink-a:.05;--ink-a-major:.16;--fringe:.2;--fringe-in:0%;--fringe-out:0%;--fringe-w:.6px;--fringe-warm:255,40,70;--fringe-cool:0,190,255;--fringe-cool-boost:1.3;
  --at:calc(var(--paper-x,0px) - var(--cx,0px) + 160px) calc(var(--paper-y,0px) - var(--cy,0px) + 160px);
  transform:translate3d(calc(var(--cx,0px) - 160px),calc(var(--cy,0px) - 160px),0);
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0,rgba(0,0,0,.7) 40%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 0,rgba(0,0,0,.7) 40%,transparent 100%);
  transition:opacity .4s var(--ease)}
.paper-glow i{position:absolute;inset:0}
.paper-glow .glow-lines{--hot:rgba(28,25,23,var(--ink-a));--hot-major:rgba(28,25,23,var(--ink-a-major));
  background-image:
    linear-gradient(90deg,var(--hot-major) 1px,transparent 1px),linear-gradient(180deg,var(--hot-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--hot) 1px,transparent 1px),linear-gradient(180deg,var(--hot) 1px,transparent 1px);
  background-size:calc(var(--cell) * 5) calc(var(--cell) * 5),calc(var(--cell) * 5) calc(var(--cell) * 5),var(--cell) var(--cell),var(--cell) var(--cell);
  background-position:var(--at)}
/* A fringe layer: its background is the colour ramp across the disc (--f0..--f3 are where it is full and where it
   starts, either side of the centre), its mask the edges of the grid lines; the fifth lines' edges at full strength,
   the others in the same proportion as their ink. */
.paper-glow .fr{--minor:rgba(0,0,0,calc(var(--ink-a) / var(--ink-a-major)));
  --fin:min(var(--fringe-in),var(--fringe-out));                                /* a fringe is never full before it starts */
  --f0:calc(50% - var(--fringe-out) / 2);--f1:calc(50% - var(--fin) / 2);--f2:calc(50% + var(--fin) / 2);--f3:calc(50% + var(--fringe-out) / 2);
  --cool:calc(var(--fringe) * var(--fringe-cool-boost));                           /* cyan reads fainter on the paper than the warm edge */
  --warm-cool:rgba(var(--fringe-warm),var(--fringe)) var(--f0),rgba(var(--fringe-warm),0) var(--f1),rgba(var(--fringe-cool),0) var(--f2),rgba(var(--fringe-cool),var(--cool)) var(--f3);
  --cool-warm:rgba(var(--fringe-cool),var(--cool)) var(--f0),rgba(var(--fringe-cool),0) var(--f1),rgba(var(--fringe-warm),0) var(--f2),rgba(var(--fringe-warm),var(--fringe)) var(--f3);
  -webkit-mask-position:var(--at);mask-position:var(--at)}
.paper-glow .fr-right,.paper-glow .fr-left{-webkit-mask-size:calc(var(--cell) * 5) 100%,var(--cell) 100%;mask-size:calc(var(--cell) * 5) 100%,var(--cell) 100%}
.paper-glow .fr-below,.paper-glow .fr-above{-webkit-mask-size:100% calc(var(--cell) * 5),100% var(--cell);mask-size:100% calc(var(--cell) * 5),100% var(--cell)}
/* the edge just after each line (right of it, below it): outer, so warm, past the cursor; inner, so cool, before it */
.paper-glow .fr-right{background:linear-gradient(90deg,var(--cool-warm));
  -webkit-mask-image:linear-gradient(90deg,transparent 1px,#000 1px calc(1px + var(--fringe-w)),transparent 0),linear-gradient(90deg,transparent 1px,var(--minor) 1px calc(1px + var(--fringe-w)),transparent 0);
  mask-image:linear-gradient(90deg,transparent 1px,#000 1px calc(1px + var(--fringe-w)),transparent 0),linear-gradient(90deg,transparent 1px,var(--minor) 1px calc(1px + var(--fringe-w)),transparent 0)}
.paper-glow .fr-below{background:linear-gradient(180deg,var(--cool-warm));
  -webkit-mask-image:linear-gradient(180deg,transparent 1px,#000 1px calc(1px + var(--fringe-w)),transparent 0),linear-gradient(180deg,transparent 1px,var(--minor) 1px calc(1px + var(--fringe-w)),transparent 0);
  mask-image:linear-gradient(180deg,transparent 1px,#000 1px calc(1px + var(--fringe-w)),transparent 0),linear-gradient(180deg,transparent 1px,var(--minor) 1px calc(1px + var(--fringe-w)),transparent 0)}
/* the edge just before each line (left of it, above it): outer, so warm, before the cursor; inner, so cool, past it */
.paper-glow .fr-left{background:linear-gradient(90deg,var(--warm-cool));
  -webkit-mask-image:linear-gradient(90deg,transparent calc(100% - var(--fringe-w)),#000 0),linear-gradient(90deg,transparent calc(100% - var(--fringe-w)),var(--minor) 0);
  mask-image:linear-gradient(90deg,transparent calc(100% - var(--fringe-w)),#000 0),linear-gradient(90deg,transparent calc(100% - var(--fringe-w)),var(--minor) 0)}
.paper-glow .fr-above{background:linear-gradient(180deg,var(--warm-cool));
  -webkit-mask-image:linear-gradient(180deg,transparent calc(100% - var(--fringe-w)),#000 0),linear-gradient(180deg,transparent calc(100% - var(--fringe-w)),var(--minor) 0);
  mask-image:linear-gradient(180deg,transparent calc(100% - var(--fringe-w)),#000 0),linear-gradient(180deg,transparent calc(100% - var(--fringe-w)),var(--minor) 0)}
.hero-paper.is-lit .paper-glow{opacity:var(--glow,1)} /* hero.js dims --glow near the lede so the text stays readable */
@media (hover:none){.paper-glow{display:none}}
.hero-wrap{position:relative;padding-bottom:clamp(56px,9vh,110px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hero-title{position:relative;display:block}
.hero-title .word{display:block;position:relative}
.word-samsara{width:100%}
/* DESIGN is 4780/6519.1 of SAMSARA's width; the gap is .2857 cap (the .9 line-height the title used to have),
   written as a percentage of the width because the words are sized by width. */
.word-design{width:73.32%;margin-top:3.068%}
.hero-title svg{display:block;width:100%;height:auto;overflow:visible}
.hero-title .fill{fill:var(--black)}
.hero-title .ink{fill:none;stroke:var(--gray-800);stroke-width:10;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}
.hero-title .mark{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
/* Sketch intro, one letter after another. Each letter's pencil traces its outline over --pencil, starting 70ms after
   the previous letter (STAGGER in hero.js), so the next outline begins a third of the way into the one before. Behind
   the pencil, one fat marker scribble per word (hero.js sets its --t, --sweep and --n strokes; --k is the stroke's
   index) starts --mark-lag after the word's first letter and sweeps left to right a little slower than the pencil
   (MARKER.pace in hero.js), so SAMSARA is coloured in before DESIGN starts. The pencil fades over --fade once the
   marker has passed. The last of thirteen letters starts at 840ms and the title is done at ~1.3s; the brush
   underline then sweeps in over 1.1s from 1.15s. */
.hero-title{--pencil:.22s;--mark-lag:.23s;--fade:.15s}
.loaded .hero-title .ink{animation:sketch var(--pencil) var(--ease-io) var(--t,0ms) both,ink-out var(--fade) var(--ease-io) calc(var(--t,0ms) + var(--mark-lag) + .14s) both}
.loaded .hero-title .mark{animation:sketch calc(var(--sweep,.5s) / var(--n,1)) linear calc(var(--t,0ms) + var(--mark-lag) + var(--k,0) * var(--sweep,.5s) / var(--n,1)) both}
.hero-title.inked .ink{display:none}
.hero-title.inked .fill{-webkit-mask:none;mask:none}
@keyframes sketch{to{stroke-dashoffset:0}}
@keyframes ink-out{to{opacity:0}}
.hero-title .ul{bottom:-27%;height:12.1%} /* a clear gap under DESIGN: the brush sits 15% of the cap height below the baseline */
.loaded .hero-title .ul{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease) 1.15s}

.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(40px,6vh,80px);
  opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) .9s,transform .8s var(--ease) .9s}
.loaded .hero-grid{opacity:1;transform:none}
.hero-lede{grid-column:1 / span 8;font-weight:400;font-size:clamp(19px,1.8vw,29px);line-height:1.3;color:var(--gray-800);max-width:58ch}

/* Photos in the paper, the easter egg. Each is a square of the grid, or a 2x2 block (hero.js sets --x/--y/--s so it
   sits just inside the lines). The square itself is always there as a faint shade in the paper, the hint; the photo
   in it is masked to a disc around the pointer with the glow's --cx/--cy (offset by the square's own --x/--y, since
   the mask is per photo), so it only shows when the cursor comes near. Now and then one square deepens and fades
   back (.glint, one at a time in random order, run by app.js) so the hints read as something to look for. A found photo is printed in grey; under the
   pointer it comes up in colour inside a Signal ring. Keyboard focus lifts the mask, so tabbing onto one shows them
   all. Pointer devices only. */
.hero-finds{position:absolute;inset:0;z-index:1;pointer-events:none}
.find{position:absolute;left:0;top:0;width:var(--s,31px);height:var(--s,31px);padding:0;border:0;border-radius:0;--shade:rgba(28,25,23,.035);background:var(--shade);
  transform:translate3d(var(--x,0),var(--y,0),0);pointer-events:auto;cursor:zoom-in;transition:transform .25s var(--ease)}
.find[hidden]{display:none}
.find.glint{animation:glint 2.6s var(--ease-io) both}
@keyframes glint{45%{background:rgba(28,25,23,.1)}}
.find img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);filter:grayscale(1) contrast(1.06);
  opacity:0;transition:filter .35s var(--ease),opacity .4s var(--ease);
  -webkit-mask-image:radial-gradient(circle 150px at calc(var(--cx,-400px) - var(--x,0px)) calc(var(--cy,-400px) - var(--y,0px)),#000 30%,transparent);
  mask-image:radial-gradient(circle 150px at calc(var(--cx,-400px) - var(--x,0px)) calc(var(--cy,-400px) - var(--y,0px)),#000 30%,transparent)}
.hero-finds.is-lit .find img,.hero-finds:has(.find:focus-visible) .find img{opacity:1}
.hero-finds:has(.find:focus-visible) .find img{-webkit-mask-image:none;mask-image:none}
.find::after{content:"";position:absolute;inset:-3px;border:2px solid var(--signal);opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.find:hover img,.find:focus-visible img{filter:none}
.find:hover::after,.find:focus-visible::after{opacity:1}
.find:focus-visible{outline:none}
.find:active{transform:translate3d(var(--x,0),var(--y,0),0) scale(.94)}
@media (hover:none){.hero-finds{display:none}}

@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{position:relative;padding:var(--sec-pad) 0}
.sec-dark{background:var(--black);color:var(--gray-100);background-image:var(--speck-light);background-size:420px 420px}
.sec-signal{background-color:var(--signal);background-image:var(--speck-dark,none);background-size:420px 420px;color:var(--black)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.sec-head .eyebrow{grid-column:1 / -1;margin-bottom:clamp(20px,2.2vw,32px)}
.sec-head .h1{grid-column:1 / span 10}
.sec-head .sec-intro{grid-column:1 / span 5;margin-top:clamp(24px,3vw,44px)}
.sec-intro{font-size:clamp(17px,1.35vw,22px);line-height:1.32;color:var(--gray-800);max-width:50ch}
.sec-dark .sec-intro{color:var(--gray-400)}
.sec-signal .sec-intro{color:rgba(28,25,23,.86)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.25}}

/* ==========================================================================
   WORK: TICKER + BENTO
   ========================================================================== */
/* Quiet ticker of the people we design with, sitting under the headline at paragraph width */
.ticker{grid-column:1 / span 5;margin-top:clamp(22px,2.6vw,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.ticker-track{display:flex;width:max-content;will-change:transform;animation:mq 64s linear infinite}
.ticker-set{display:flex;align-items:center}
.ticker-set span{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray-600);padding:0 16px;white-space:nowrap}
.ticker-set i{width:5px;height:5px;background:var(--signal);flex:0 0 auto}

/* A unit grid. Cells are 1 : 0.85 and the gap is 5% of a cell, so every shape keeps its proportions at any width:
   card (1x1) and big (2x2) are ~6:5, wide (2x1) is ~12:5, tall (1x2) is ~4:7. Breakpoints only change the column count. */
.sec-work .wrap{container-type:inline-size}
.bento{--n:4;--cell:calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n));--gap:calc(100cqw * .05 / (var(--n) + (var(--n) - 1) * .05));
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-rows:calc(var(--cell) * .85);
  grid-auto-flow:row dense;gap:var(--gap);margin-top:clamp(48px,6vw,88px)}
.tile{position:relative;min-width:0;min-height:0}
.tile.wide{grid-column:span 2}
.tile.tall{grid-row:span 2}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile .ui{position:absolute;inset:0}

/* --- faux UI primitives --- */
.ui{position:relative;overflow:hidden;background:var(--white);color:var(--black);border:1px solid var(--hair);border-radius:var(--radius-ui);padding:18px;
  font:500 14px/1.25 var(--font-sans);letter-spacing:-.01em;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tile:hover .ui{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(28,25,23,.35)}
.ui.compass-card{display:grid;place-items:center;padding:24px 24px 0;background:var(--gray-200)}
.compass-card asset-compass{width:100%;height:100%;min-width:0;min-height:0}
.ui-dark{background:var(--black);color:var(--gray-100);border-color:var(--hair-dark)}
.ui-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ui-label{font-weight:500;font-size:14px}
.ui-meta{font:500 10px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-600);white-space:nowrap}
.ui-dark .ui-meta{color:var(--gray-500)}
.ui-big{font:500 56px/1 var(--font-sans);letter-spacing:-.03em;margin-top:14px;display:flex;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums}
.ui-big small{font-size:.45em;letter-spacing:-.01em;color:var(--gray-700)}
.ui-sub{font-size:12.5px;color:var(--gray-700);margin-top:10px}
.ui-foot{margin-top:auto}
.chip{font:500 10px/1 var(--font-mono);letter-spacing:.04em;padding:5px 6px 4px;border:1px solid currentColor;border-radius:3px;white-space:nowrap}
.chip-green{color:var(--emerald)}
.chip-signal{color:var(--black);background:var(--signal);border-color:var(--signal)}
.sev{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.sev-red{background:var(--red)}.sev-signal{background:var(--signal)}.sev-green{background:var(--emerald)}

/* hours of service: the in-cab widget, dark. The tile is always 12:5, so everything is sized in hundredths of its
   width and the widget keeps its proportions from a phone to a wide screen. One padding on all four sides (18px at a
   desktop tile, like the other tiles); the dials sit on the bottom padding and the outer rings line up with the title
   and the chip. Two type sizes: the clocks, and everything else. */
.ui.hos{--go:#2EBC6F;--trk:#4A4640;--pad:2.88cqw;--small:3.3cqw;padding:0;container-type:inline-size;color:var(--white);border-color:rgba(245,244,241,.2)}
.hos-head{position:absolute;left:var(--pad);right:var(--pad);top:var(--pad);height:5.13cqw;display:flex;justify-content:space-between;align-items:center}
.hos-title{font:500 var(--small)/1 var(--font-sans);letter-spacing:-.01em}
.hos-status{height:100%;display:flex;align-items:center;gap:.36em;padding:0 1.7cqw;border-radius:.8cqw;background:var(--go);color:#04190B;
  font:400 var(--small)/1 var(--font-sans);letter-spacing:0}
.hos-status b{font-weight:700}
.hos.is-due .hos-status{background:var(--signal);color:var(--black)}
.hos-dials{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between}
.hos-dials li{width:15.87cqw;display:flex;flex-direction:column;align-items:center}
.hos-dials svg{width:100%;height:auto;aspect-ratio:1}
.hos .trk,.hos .arc{fill:none;stroke-width:13.6}
.hos .trk{stroke:var(--trk)}
.hos .arc{stroke:var(--go);stroke-linecap:round;stroke-dasharray:100 100}
.hos.live .arc{transition:stroke-dashoffset 1.2s var(--ease)}
.hos-dials .hos-n{margin-top:1.88cqw;font:700 4.31cqw/1 var(--font-sans);letter-spacing:-.005em}
.hos-l{margin-top:.32cqw;font:400 var(--small)/1 var(--font-sans);letter-spacing:0;color:rgba(255,255,255,.84)}
/* a clock is a row of one-character windows; a changed digit rolls through its window */
.hos-n{display:flex;font-variant-numeric:tabular-nums}
.hos-n i{display:block;overflow:hidden;font-style:normal}
.hos-n span{display:block;position:relative}
.hos-n span.roll{animation:hos-roll .6s var(--ease)}
.hos-n span.roll::before{content:attr(data-old);position:absolute;left:0;right:0;top:calc(var(--dir,1) * -100%)}
@keyframes hos-roll{from{transform:translateY(calc(var(--dir,1) * 100%))}}
.hos.live .hos-status .col{animation:hos-colon 1s linear var(--sec,0s) infinite}
.hos.is-due .hos-status .col{animation:none}
@keyframes hos-colon{0%,46%{opacity:1}54%,96%{opacity:.2}}

/* safety score + streaks: a pair of 1x1 tiles from the driver app's coach module. Like HoS they are sized in
   hundredths of the tile's width (a card is always about 6:5). A wide tile is 2.05 cards across, so the HoS header
   (2.88cqw padding, a 5.13cqw row, a 3.3cqw title) is 5.9cqw, 10.52cqw and 6.77cqw here: the titles match HoS and line
   up with it. Labels and the rank take the same small size; the graph and the last bar sit on the bottom padding. */
.ui.ss,.ui.st{--pad:5.9cqw;--small:6.77cqw;padding:0;container-type:inline-size}
.ss > .ui-row,.st > .ui-row{position:absolute;left:var(--pad);right:var(--pad);top:var(--pad);height:10.52cqw;align-items:center}
.ss .ui-label,.st .ui-label{font:500 var(--small)/1 var(--font-sans);letter-spacing:-.01em}
.ss .ui-meta,.st .ui-meta{font-size:3.33cqw}
.ss-score{position:absolute;left:var(--pad);top:calc(var(--pad) + 14cqw);display:flex;flex-direction:column;align-items:flex-start;gap:2.4cqw}
.ss-n{font:400 21cqw/.74 var(--font-display);letter-spacing:0}
.ss-rank{display:flex;align-items:baseline;gap:.3em;font:400 var(--small)/1 var(--font-sans);color:var(--gray-700);
  opacity:0;transform:translateY(.35em);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.ss-rank b{font-size:.72em;color:var(--emerald)}
.ss-rank.down b{color:var(--red)}
.ss.done .ss-rank{opacity:1;transform:none}
.ss-graph{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);height:30cqw}
.ss-graph svg{width:100%;height:100%;overflow:visible}
.ss-g0{stop-color:var(--gray-200)}
.ss-g1{stop-color:var(--white)}
.ss-line{fill:none;stroke:var(--black);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* each row: a pill in its streak's colour (--c) over a gray track, the marks inside it: rounded diamonds in a row,
   each ringed in the bar colour so it cuts a chevron out of the one behind */
.st-rows{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;flex-direction:column;gap:4.8cqw}
.st-rows li{--bh:8.6cqw;--dm:3.7cqw;display:grid;grid-template-columns:minmax(0,1fr) 21cqw;gap:3cqw;align-items:center}
.st-bar{position:relative;height:var(--bh);border-radius:99px;background:var(--gray-200)}
.st-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--k,1) * var(--p) * 100%);min-width:var(--bh);overflow:hidden;
  display:flex;align-items:center;padding:0 calc((var(--bh) - var(--dm)) / 2);border-radius:99px;background:var(--c,var(--black))}
.st.live .st-fill{min-width:max-content;transition:width 1.2s var(--ease)}
.st.live li.back .st-fill{transition-duration:.6s}
.st-marks{display:flex;min-width:var(--dm);opacity:clamp(0,(var(--k,1) - .15) * 4,1)}   /* marks come in once their bar opens */
.st-marks i{flex:0 0 auto;width:var(--dm);height:var(--dm);border-radius:22%;background:var(--white);box-shadow:0 0 0 .45cqw var(--c);transform:rotate(45deg)}
.st-marks i + i{margin-left:-.42cqw}   /* each a little under a diamond's width on from the last, as in the app */
.st-marks i.pop{animation:st-pop .5s var(--ease)}
@keyframes st-pop{from{transform:rotate(45deg) scale(0)}}
.st-x{margin-left:calc(var(--bh) * .18);font:700 calc(var(--bh) * .58)/1 var(--font-sans);letter-spacing:-.01em;color:var(--white);white-space:nowrap}
.st-l{font:400 var(--small)/1 var(--font-sans);letter-spacing:-.01em}
/* a small card (two to a row on a phone) has no room for the meta */
@container (max-width:220px){
  .ss .ui-meta,.st .ui-meta{display:none}
}

/* missing-asset timeline: the product's timeline component in a wide tile, sized in hundredths of its width (it is
   always about 12:5, 41.5cqw tall) like HoS, in the component's cool grays and navy rather than the site's warm ones.
   The steps land oldest first once the tile is in view (.play), each row's rail drawing down to the one before, then
   the newest step's dot pulses while the incident is open. */
.ui.tl{--pad:3.2cqw;--ink:#1D2939;--sub:#667085;--rail:#E4E7EC;--beat:.42s;padding:0;container-type:inline-size;color:var(--ink);
  font-family:var(--font-sans)}
.tl-title{position:absolute;left:var(--pad);top:var(--pad);font:500 2.9cqw/1 var(--font-sans);letter-spacing:-.01em}
.tl-day{position:absolute;left:var(--pad);top:calc(var(--pad) + 5.3cqw);font:500 1.75cqw/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.tl-list{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--pad) + 9.8cqw);bottom:calc(var(--pad) - 1.8cqw);display:grid;grid-template-rows:repeat(3,1fr)}
.tl-list li{position:relative;display:grid;grid-template-columns:3.2cqw 1fr;align-content:start;column-gap:1.4cqw;row-gap:.75cqw;
  opacity:0;transform:translateY(1.2cqw);transition:opacity .5s var(--ease) calc(var(--i) * var(--beat)),transform .7s var(--ease) calc(var(--i) * var(--beat))}
/* the rail joins each mark to the next (the rows are equal, so it ends just above the next mark) and draws down as the
   older step below lands */
.tl-list li:not(:last-child)::before{content:"";position:absolute;left:1.6cqw;top:3.5cqw;height:calc(100% - 4cqw);width:1px;background:var(--rail);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease) calc((var(--i) - 1) * var(--beat) + .3s)}
.tl-mark{grid-row:1 / 3;display:flex;justify-content:center;align-items:center;height:3cqw}
.tl-mark .ic{width:2cqw;height:2cqw;fill:var(--ink)}
.tl-alert .ic{fill:#D92D20}
.tl-list p{display:flex;align-items:center;gap:1.1cqw;height:3cqw;font:400 2.3cqw/1 var(--font-sans);letter-spacing:-.005em;white-space:nowrap;overflow:hidden}
.tl-list p span{overflow:hidden;text-overflow:ellipsis}
.tl-list u{text-decoration-thickness:1px;text-underline-offset:.22em}
.tl-pill{flex:none;display:block;padding:.65cqw 1.15cqw;border-radius:1.45cqw;background:#FDEAD7;color:#B93815;
  font:700 1.6cqw/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;text-box:trim-both cap alphabetic}
/* the open state takes the site's signal yellow, like the dot beside it; the alert that opened it, the red of its icon */
.tl-pill.now{background:var(--signal);color:var(--black)}
.tl-pill.alert{background:#D92D20;color:var(--white)}
.tl-list time{grid-column:2;font:400 1.85cqw/1 var(--font-sans);color:var(--sub)}
.tl-dot{position:relative;display:block;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--signal);box-shadow:0 0 0 .4cqw rgba(254,174,15,.22)}
.tl-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--signal);opacity:0}
.tl.play .tl-list li{opacity:1;transform:none}
.tl.play .tl-list li::before{transform:none}
.tl.play .tl-dot::after{animation:tl-pulse 1.8s cubic-bezier(.2,.6,.35,1) calc(2 * var(--beat) + .5s) infinite}
@keyframes tl-pulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
/* on a phone the tile is a third of its desktop size: the date label goes and the text grows into its room */
@container (max-width:420px){
  .tl-day{display:none}
  .tl-list{top:calc(var(--pad) + 6.6cqw)}
  .tl-list p{font-size:2.8cqw;height:3.4cqw}
  .tl-list time{font-size:2.3cqw}
  .tl-list li:not(:last-child)::before{top:3.9cqw;height:calc(100% - 4.4cqw)}
}

/* live map: a real map in the system's grays (tools/work-map.py), traffic and the weather over it, the names over those,
   then the route in black with its stops, the work zones and the truck; over the map, the vehicle panel on the left and
   the layer toggles top right, as in the product. The tile is always 41:35, like the map, so the names sit in percent
   and everything else is sized in hundredths of the tile's width (--inset is the map's controls' margin). The route,
   rings and outlines keep their pixel widths at any size; the stops, pins and the truck grow a little on small tiles
   (--ms). Each layer is on while the tile has its show- class. */
.ui.map{--inset:2.2cqw;--ms:1;--water-ink:#58718D;--go:var(--emerald);padding:0;container-type:inline-size;background:var(--gray-100)}
.ui.map > *{transition:opacity .6s var(--ease)}
.ui.map:not(.ready) > :not(.sr-only){opacity:0}
.map-base,.map-traffic,.map-wx,.map-top,.map-names{position:absolute;inset:0;width:100%;height:100%}
.map-base,.map-traffic{object-fit:cover}
.ui.map .map-traffic,.ui.map .map-wx,.map-work{transition:opacity .35s var(--ease),visibility .35s}
.ui.map:not(.show-traffic) .map-traffic,.ui.map:not(.show-weather) .map-wx,.ui.map:not(.show-work) .map-work{opacity:0;visibility:hidden}
.map-names{pointer-events:none}
.map-l{position:absolute;transform:translate(-50%,-50%) rotate(var(--a,0deg));white-space:nowrap;font:500 max(9px,1.62cqw)/1 var(--font-sans);
  letter-spacing:0;color:var(--gray-700);text-shadow:0 0 2px var(--gray-100),0 0 2px var(--gray-100),0 0 4px var(--gray-100)}
.map-l.city{font-size:max(11px,2.3cqw);letter-spacing:-.01em;color:var(--gray-800)}
.map-l.water{font-style:italic;letter-spacing:.06em;color:var(--water-ink)}
.map-sh{position:absolute;transform:translate(-50%,-50%);padding:.32em .42em .28em;border:1px solid var(--gray-500);border-radius:.36em;background:var(--white);
  font:500 max(8px,1.36cqw)/1 var(--font-sans);letter-spacing:0;color:var(--gray-800);font-variant-numeric:tabular-nums}
.map-case,.map-route,.wz{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map-case{stroke:var(--white);stroke-width:6.5px}
.map-route{stroke:var(--black);stroke-width:3px}
.map-stop > g,.map-veh > g,.wz-pin > g{transform:scale(var(--ms))}
.map-stop circle{fill:var(--white);stroke:var(--black);stroke-width:2px;vector-effect:non-scaling-stroke;transition:fill .4s var(--ease)}
.map-stop .dot{fill:var(--black);stroke:none}
.map-stop.done circle{fill:var(--black)}
.map-stop.done .dot{fill:var(--white)}
/* a work zone: the stretch of road in signal and black hazard stripes, and a cone pin at its middle */
.wz{stroke:var(--signal);stroke-width:6px;stroke-linecap:butt}
.wz-dash{stroke:var(--black);stroke-dasharray:4 4}
.wz-pin circle{fill:var(--signal);stroke:var(--white);stroke-width:2px;vector-effect:non-scaling-stroke}
.wz-pin path{fill:var(--black)}
/* the truck: green, like a moving vehicle in the product, with a white edge that lifts it off the black route */
.map-veh > g{filter:drop-shadow(0 1px 1.5px rgba(28,25,23,.35))}
.map-veh path{fill:var(--go)}
.map-veh .halo path{fill:var(--white);stroke:var(--white);stroke-width:5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* the vehicle panel: the speed against the limit, the driver and the truck, then what the truck reports */
.map-panel{position:absolute;left:var(--inset);top:var(--inset);width:33cqw;padding:1.9cqw 1.9cqw 0;border-radius:1.1cqw;background:var(--white);
  box-shadow:0 0 0 1px var(--hair),0 10px 24px -12px rgba(28,25,23,.3);font:500 max(9px,1.78cqw)/1.2 var(--font-sans);letter-spacing:-.005em}
.map-panel button{padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit}
.mp-speed{display:flex;justify-content:space-between;align-items:center}
.mp-limit{display:flex;flex-direction:column;align-items:center;justify-content:center;width:5.4cqw;height:6.6cqw;border:max(1.5px,.28cqw) solid var(--black);
  border-radius:.55cqw;text-align:center}
.mp-limit small{font:700 max(5px,.9cqw)/.95 var(--font-sans);letter-spacing:.03em;text-transform:uppercase}
.mp-limit b{margin-top:.12em;font:700 max(12px,2.8cqw)/1 var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mp-mph{display:flex;align-items:center;gap:.28em;height:6.6cqw;padding:0 1.7cqw;border-radius:.8cqw;background:var(--gray-100);
  font:500 max(12px,2.6cqw)/1 var(--font-sans);letter-spacing:-.01em}
.mp-mph b{font-weight:500;font-variant-numeric:tabular-nums}
.mp-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease)}
.mp-in{min-height:0;overflow:hidden;margin:0 -.6cqw;padding:0 .6cqw .6cqw}               /* room for a focus ring */
.map-panel.collapsed .mp-body{grid-template-rows:0fr}
.mp-row{display:flex;align-items:center;gap:1.3cqw;margin-top:1.7cqw;min-width:0}
.mp-row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.mp-row.mp-veh b{text-transform:none;letter-spacing:0}
.mp-ic{display:grid;place-items:center;flex:0 0 auto;width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--gray-100)}
.mp-ic .ic{width:2.9cqw;height:2.9cqw;fill:var(--gray-700)}
.mp-row > .ic{flex:0 0 auto;width:2.4cqw;height:2.4cqw;margin-right:-.5cqw;fill:var(--gray-600)}
.mp-stats{display:grid;gap:.55cqw;margin-top:1.7cqw}
.mp-stats div{display:flex;justify-content:space-between;align-items:center;gap:1cqw;height:4.9cqw;padding:0 1.35cqw;border-radius:.6cqw;background:var(--gray-100)}
.mp-stats .mp-extra{display:none}
.map-panel.more .mp-stats .mp-extra{display:flex}
.mp-stats dt{font-weight:400;color:var(--gray-700);white-space:nowrap}
.mp-stats dd{display:flex;align-items:center;gap:.9cqw;margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-ok{width:2.8cqw;height:.72cqw;border-radius:9px;background:var(--go)}
.mp-more{margin-top:1.6cqw;cursor:pointer}
.map-panel button:focus-visible{outline-offset:1px}
.map-panel .mp-foot{display:flex;align-items:center;gap:.8cqw;width:calc(100% + 3.8cqw);margin:1.4cqw -1.9cqw 0;padding:1.5cqw 1.9cqw;
  border-top:1px solid var(--hair);cursor:pointer}
.mp-foot .ic{width:2.3cqw;height:2.3cqw;margin:0 -.3cqw;transition:transform .35s var(--ease)}
.map-panel.collapsed .mp-foot .ic{transform:rotate(180deg)}
.mp-more:hover,.mp-foot:hover span{text-decoration:underline;text-underline-offset:.2em}

/* the layer toggles: square buttons, black while their layer is on, named on hover */
.map-togs{position:absolute;right:var(--inset);top:var(--inset);display:grid;gap:max(4px,.9cqw)}
.map-tog{position:relative;display:grid;place-items:center;width:max(28px,5.4cqw);height:max(28px,5.4cqw);padding:0;border:0;border-radius:.8cqw;
  background:var(--white);color:var(--gray-800);cursor:pointer;box-shadow:0 0 0 1px var(--hair),0 6px 14px -8px rgba(28,25,23,.3);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.map-tog .ic{width:max(18px,3.1cqw);height:max(18px,3.1cqw);fill:currentColor}
.map-tog:hover{background:var(--gray-100)}
.map-tog:active{transform:scale(.96)}
.map-tog[aria-pressed="true"]{background:var(--black);color:var(--white)}
.map-tog[aria-pressed="true"]:hover{background:var(--gray-900)}
.map-tog span{position:absolute;right:calc(100% + max(6px,.9cqw));top:50%;padding:.5em .65em .45em;border-radius:.45em;background:var(--black);color:var(--gray-100);
  font:500 max(10px,1.6cqw)/1 var(--font-sans);letter-spacing:0;white-space:nowrap;opacity:0;transform:translate(4px,-50%);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.map-tog:hover span,.map-tog:focus-visible span{opacity:1;transform:translate(0,-50%)}

.map-attr{position:absolute;right:0;bottom:0;padding:.5em .7em .45em;border-top-left-radius:.5em;background:rgba(245,244,241,.82);
  font:500 max(8px,1.3cqw)/1 var(--font-sans);letter-spacing:0;color:var(--gray-700)}
.map-attr:hover{color:var(--black)}
.map-attr:focus-visible{outline-offset:-2px}
/* smaller tiles keep the panel's top: under 560px the speed, driver and truck; on phones the speed alone, without the limit */
@container (max-width:560px){
  .map-panel{width:40cqw}
  .map-panel .mp-stats,.map-panel .mp-more,.map-panel .mp-foot{display:none}
  .mp-in{padding-bottom:1.9cqw}
}
@container (max-width:420px){
  .ui.map{--ms:1.5}
  .map-l.town,.map-l.water,.map-sh ~ .map-sh ~ .map-sh{display:none}
  .map-panel{width:auto;padding:1.4cqw}
  .mp-body,.mp-limit{display:none}                                           /* too small to read on a phone */
}

/* samsara assistant: the greeting, two suggestions and the composer, where the questions type themselves (the
   placeholder shows whenever it is empty, the caret blinking in front of it). Sized in hundredths of the tile's width
   like the safety score and streaks; the composer sits on the bottom padding. */
.ui.as{--pad:5.9cqw;padding:0;container-type:inline-size}
.as-in{position:absolute;inset:var(--pad);display:flex;flex-direction:column}
.as-hi{font:700 6.8cqw/1.12 var(--font-sans);letter-spacing:-.015em}
.as-hi span{display:block}
.as-hi span + span{margin-top:.3em}   /* the two sentences sit a little apart; a sentence that wraps stays tight */
.as .ic{flex:0 0 auto;width:1em;height:1em;fill:currentColor}
.as-sugs{margin-top:5cqw;display:grid;gap:3.2cqw}
.as-sugs li{display:flex;align-items:center;gap:2.4cqw;font:500 4.33cqw/1.2 var(--font-sans);min-width:0}
.as-sugs .ic{font-size:4.8cqw;color:var(--gray-800)}
.as-sugs span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-box{margin-top:auto;padding:3cqw 3cqw 2.4cqw;border:1px solid var(--gray-300);border-radius:2.7cqw;background:var(--white)}
.as-field{position:relative;min-height:2.6em;font:400 4.5cqw/1.3 var(--font-sans)}
.as-ph{position:absolute;left:0;top:0;right:0;color:var(--gray-600);pointer-events:none}
.type-target:not(:empty) ~ .as-ph{visibility:hidden}
.cursor{display:inline-block;width:2px;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--black);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.as-bar{display:flex;align-items:center;gap:3.3cqw;margin-top:2.4cqw}
.as-add{display:grid;place-items:center;width:7.4cqw;height:7.4cqw;border-radius:1.3cqw;background:var(--gray-100);font-size:3.9cqw}
.as-mode{margin-left:auto;display:flex;align-items:center;gap:1.3cqw;font:500 4.2cqw/1 var(--font-sans)}
.as-mode .ic{font-size:3.4cqw}
.as-bar > .ic-mic{font-size:4.8cqw}
/* a small card (two to a row on a phone): the greeting and the composer only, with readable type */
@container (max-width:220px){
  .as-sugs{display:none}
  .as-hi{font-size:12.5px}
  .as-field{font-size:10.5px}
  .as-mode{font-size:10px}
}

/* checklist */
.check{margin-top:12px}
.check li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:13px}
.check li::before{content:"";width:14px;height:14px;border:1.5px solid var(--gray-500);border-radius:3px;flex:0 0 auto}
.check li.done::before{background:var(--black);border-color:var(--black);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='%23F5F4F1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check li.now::before{border-color:var(--signal);background:var(--signal)}
.check li.now{color:var(--black)}
.prog{display:flex;align-items:center;gap:10px;margin-top:12px}
.prog i{flex:1;height:4px;background:var(--gray-300);border-radius:2px;position:relative;overflow:hidden}
.prog i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:var(--signal)}
.prog .mono{font-size:10px;color:var(--gray-600)}

/* segments */
.seg{display:flex;gap:3px;margin-top:12px}
.seg i{flex:1;height:14px;background:var(--gray-300);border-radius:2px}
.seg i.on{background:var(--signal)}

/* alerts feed */
.feed{margin-top:10px}
.feed li{display:grid;grid-template-columns:8px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13px}
.ui-dark .feed li{border-color:var(--hair-dark)}
.feed em{font-style:normal;color:var(--gray-600);font-size:12px}
.feed time{font:500 10px/1 var(--font-mono);color:var(--gray-600)}

/* asset route */
.route{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px}
.route-line{flex:1;height:2px;background:var(--gray-300);position:relative}
.route-line::before,.route-line::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--black);transform:translateY(-50%)}
.route-line::before{left:-2px}.route-line::after{right:-2px;background:var(--gray-400)}
.route-line i{position:absolute;left:58%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--signal);border:2px solid var(--white);transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--black);animation:route-move 9s var(--ease-io) infinite alternate}
@keyframes route-move{from{left:22%}to{left:78%}}
.route .ui-foot{margin-top:16px}

/* weather */
.wx-temp{font:500 54px/1 var(--font-sans);letter-spacing:-.03em;margin-top:10px;font-variant-numeric:tabular-nums}
.wx-temp small{font-size:.42em;color:var(--gray-700);margin-left:2px}

/* table */
.tbl-rows{margin-top:12px;font-size:12.5px}
.tbl-r{display:grid;grid-template-columns:.7fr 1.1fr 1.1fr .8fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair);align-items:center;font-variant-numeric:tabular-nums}
.tbl-h{font:500 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-600)}
.tbl-r span:nth-child(3){display:flex;align-items:center;gap:6px}

/* camera */
.ui.cam{padding:12px;container-type:inline-size}
.cam-frame{position:relative;height:calc(100% - 44px);border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#403D37 0%,#221F1B 55%,#2A2622 100%)}
.cam-road{position:absolute;left:50%;bottom:-10%;width:36%;height:70%;transform:translateX(-50%) perspective(120px) rotateX(48deg);border-left:2px dashed rgba(245,244,241,.35);border-right:2px dashed rgba(245,244,241,.35);background:linear-gradient(180deg,transparent,rgba(245,244,241,.06))}
.cam-box{position:absolute;left:24%;top:22%;width:26%;height:46%;border:1.5px solid var(--signal);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(28,25,23,.5)}
.cam-box::after{content:"DRIVER · 98%";position:absolute;left:0;top:-18px;white-space:nowrap;font:500 9px/1 var(--font-mono);letter-spacing:.06em;color:var(--signal)}
.rec{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;font:500 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--gray-100)}
.rec i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.2s steps(1) infinite}
.cam-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 4px 0}
.cam-meta .mono{font-size:10px;color:var(--gray-500);min-width:0;overflow:hidden}
.cam-view{position:absolute;right:10px;top:10px;font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500)}
.hl-dark{font:500 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--signal);color:var(--black);padding:5px 7px 4px}
/* a small camera card (two to a row on a phone): the event chip alone under the frame, the box's tag inside it */
@container (max-width:220px){
  .cam-meta{justify-content:flex-end}
  .cam-meta .mono{display:none}
  .cam .hl-dark{white-space:nowrap;font-size:9px}
  .cam-box::after{top:4px;left:4px}
}

/* driver app */
.ui.phone{background:var(--gray-100)}
.phone-hi{font:700 20px/1.1 var(--font-sans);letter-spacing:-.01em;margin-top:18px}
.tasks{margin-top:14px}
.tasks li{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:6px;background:var(--white);border:1px solid var(--hair);border-radius:8px;font-size:13px}
.tasks li i{width:14px;height:14px;border:1.5px solid var(--gray-500);border-radius:50%;flex:0 0 auto}
.tasks li.done{color:var(--gray-600);text-decoration:line-through}
.tasks li.done i{background:var(--emerald);border-color:var(--emerald)}

/* coaching */
.coach-copy{font:700 19px/1.15 var(--font-sans);letter-spacing:-.01em;margin-top:14px;max-width:16ch}
.bars{margin-top:16px;display:grid;gap:8px}
.bars > div{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;font-size:12px;color:var(--gray-700)}
.bars i{height:6px;background:var(--gray-300);border-radius:3px;position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--black);border-radius:3px}
.bars > div:nth-child(2) i::after{background:var(--signal)}

/* stops */
.stops{margin-top:12px}
.stops li{display:flex;justify-content:space-between;gap:12px;padding:9px 0 9px 16px;border-left:2px solid var(--gray-300);position:relative;font-size:13px}
.stops li::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--gray-300);transform:translateY(-50%)}
.stops li.done{color:var(--gray-600)}
.stops li.done::before{background:var(--black)}
.stops li.now{border-left-color:var(--signal);font-weight:700}
.stops li.now::before{background:var(--signal);width:10px;height:10px;left:-6px}
.stops time{font:500 11px/1 var(--font-mono);color:var(--gray-600)}

/* image placeholder */
.ui.ph{background:var(--gray-200);display:grid;place-items:center;border-style:dashed;border-color:var(--gray-400)}
.ui.ph .mono{font-size:10px;color:var(--gray-600);text-align:center;letter-spacing:.06em}
.ui.ph .ph-x{position:absolute;inset:0;background:
  linear-gradient(to top right,transparent calc(50% - .5px),rgba(28,25,23,.12) 50%,transparent calc(50% + .5px)),
  linear-gradient(to top left,transparent calc(50% - .5px),rgba(28,25,23,.12) 50%,transparent calc(50% + .5px))}
.ui.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ui.ph.has-img{border-style:solid;border-color:var(--hair)}
.ui.vid{padding:0;background:var(--white)}
/* the clip spans the full width, centred; the tile crops it top and bottom (on white, so the crop never shows) */
.ui.vid video{position:absolute;left:0;top:50%;width:100%;height:auto;aspect-ratio:var(--ratio,1);object-fit:cover;transform:translateY(-50%)}

/* ==========================================================================
   WHERE / GLOBE
   ========================================================================== */
/* Phones and tablets: every face in a grid under the dome, in city order, as many to a row as fit (six on a phone),
   the faces growing from 44px to 56px with the screen and the spare width shared out between the columns. Wider
   screens hide it (see below). */
.cities{--av:clamp(44px,8.5vw,56px);display:grid;grid-template-columns:repeat(auto-fill,var(--av));justify-content:space-between;gap:clamp(14px,3.6vw,22px) clamp(12px,3.4vw,24px);margin-top:clamp(24px,5vw,40px);padding-top:22px;border-top:1px solid var(--hair-dark)}
.seat{display:flex}
/* A face: a button that opens the postcard. Hover lifts it and parts its neighbours. */
.av{position:relative;flex:0 0 auto;width:var(--av);height:var(--av);padding:0;border:0;background:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--ease)}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--black);background:var(--gray-800);box-shadow:0 0 0 1px rgba(245,244,241,.16);transition:transform .45s var(--ease),box-shadow .3s var(--ease)}
.av:hover,.av:focus-visible{z-index:3}
.av:hover img,.av:focus-visible img{transform:translateY(-3px) scale(1.3);box-shadow:0 0 0 1.5px var(--signal)}
.av:active img{transform:translateY(-1px) scale(1.22)}
.av:hover + .av{transform:translateX(5px)}
.av:has(+ .av:hover){transform:translateX(-5px)}
.av-tag{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);white-space:nowrap;background:var(--gray-100);color:var(--black);padding:6px 8px 5px;border-radius:2px;font-size:10px;letter-spacing:.06em;text-transform:none;box-shadow:0 1px 0 rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.av:hover .av-tag,.av:focus-visible .av-tag{opacity:1;transform:translate(-50%,0);transition-delay:.06s}
/* The dome: the globe canvas is a square as wide as the content, pitched toward the pole by app.js, and the wrapper
   shows only the top of it, the northern hemisphere, with the canvas fading out towards the equator. The flags with
   each city's faces are DOM, positioned over the canvas from the same projection. */
.globe-wrap{position:relative;width:100%;aspect-ratio:1 / .68;margin-top:clamp(28px,3.5vw,48px);transition-delay:.15s}
#globe{position:absolute;left:0;top:-4%;width:100%;aspect-ratio:1;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(#000 0,#000 60%,transparent 70.5%);mask-image:linear-gradient(#000 0,#000 60%,transparent 70.5%)}
#globe.dragging{cursor:grabbing}
/* The flag layer shares the canvas's box, so a flag's coordinates are the canvas's. */
.globe-people{position:absolute;left:0;top:-4%;width:100%;aspect-ratio:1;pointer-events:none}
.gflag{--av:32px;position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;pointer-events:auto;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform;transition:opacity .3s var(--ease)}
.gflag .av{cursor:pointer}
.gflag.l{flex-direction:row-reverse}
.gflag.stack{flex-direction:column;align-items:flex-end;gap:7px}
.gflag:hover,.gflag:focus-within{z-index:5}
.gflag .faces{display:flex;align-items:center;justify-content:flex-end}
.gflag .av + .av,.gflag .av-more{margin-left:-10px}
.gflag .lbl{font:500 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(245,244,241,.78);white-space:nowrap;transition:color .3s}
.gflag.is-hot .lbl,.gflag:hover .lbl{color:var(--gray-100)}
.gflag .lbl em{font-style:normal;color:var(--signal);margin-left:6px}
.av-more{width:var(--av);height:var(--av);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--gray-800);color:var(--gray-100);border:2px solid var(--black);box-shadow:0 0 0 1px rgba(245,244,241,.16);font-size:10px;letter-spacing:.02em;text-transform:none;position:relative;z-index:1;transition:width .3s var(--ease),margin-left .3s var(--ease),opacity .22s var(--ease)}
/* A city with more than four people shows three and a count. Hover or focus grows the row to six and unfolds a
   second row beneath it, the new faces widening in one after another, so the flag stretches rather than jumps. The
   extra faces stay in layout at zero width (and hidden, so they take focus only once the cluster is open). */
.gflag.is-cluster .faces{flex-direction:column;align-items:flex-end}
.gflag .row{display:flex;align-items:center;justify-content:flex-end}
.gflag .row-2{max-height:0;margin-top:0;opacity:0;transition:max-height .42s var(--ease),margin-top .42s var(--ease),opacity .3s var(--ease)}
.gflag.is-cluster:hover .row-2,.gflag.is-cluster:focus-within .row-2{max-height:var(--av);margin-top:4px;opacity:1}
.gflag .av.extra{width:0;margin-left:0;visibility:hidden;transition:width .38s var(--ease),margin-left .38s var(--ease),visibility 0s linear .4s}
.av.extra img{width:var(--av);height:var(--av);opacity:0;transform:scale(.55);transition:opacity .3s var(--ease),transform .45s var(--ease),box-shadow .3s var(--ease)}
.gflag.is-cluster:hover .av.extra,.gflag.is-cluster:focus-within .av.extra{width:var(--av);margin-left:-10px;visibility:visible;transition-delay:calc(var(--k,0) * 26ms),calc(var(--k,0) * 26ms),0s}
.gflag.is-cluster:hover .av.extra img,.gflag.is-cluster:focus-within .av.extra img{opacity:1;transform:none;transition-delay:calc(var(--k,0) * 26ms + 50ms)}
.gflag.is-cluster:hover .av.extra:hover img,.gflag.is-cluster:focus-within .av.extra:focus-visible img{transform:translateY(-3px) scale(1.3);transition-delay:0s}
.gflag.is-cluster:hover .av-more,.gflag.is-cluster:focus-within .av-more{width:0;margin-left:0;opacity:0;border-color:transparent;box-shadow:none;overflow:hidden}
@media (min-width:901px){.cities{display:none}}

/* ==========================================================================
   FIELD NOTES / NOTEBOOKS
   ========================================================================== */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px);margin-top:clamp(48px,6vw,88px);padding-top:12px}
.nb-slot{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;transition:z-index 0s linear 1s;container-type:inline-size}
.nb-slot:hover,.nb-slot:focus-within{z-index:5;transition-delay:0s}
.nb{position:relative;display:block;width:100%;aspect-ratio:11/15;border:0;padding:0;background:none;text-align:left;perspective:1000px;-webkit-tap-highlight-color:transparent;outline:none}
.nb:focus-visible{outline:none}
.nb-pages{position:absolute;top:6px;bottom:6px;left:10px;right:-7px;border-radius:0 5px 5px 0;background:repeating-linear-gradient(180deg,#FBFAF8 0 2px,#D8D5CD 2px 3px)}
.nb-cover{position:absolute;inset:0;border-radius:3px 8px 8px 3px;background:var(--nb-bg);color:var(--nb-fg);overflow:hidden;transform-origin:left center;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.1),inset -1px 0 0 rgba(0,0,0,.06),0 30px 50px -30px rgba(28,25,23,.5);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.nb-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent)}
.nb-cover::after{content:"";position:absolute;inset:0;background-image:var(--nb-speck);background-size:420px 420px;opacity:.55;pointer-events:none}
.nb:hover .nb-cover,.nb:focus-visible .nb-cover{transform:rotateY(-16deg) translateX(-2px);box-shadow:inset 1px 0 0 rgba(255,255,255,.1),0 60px 80px -30px rgba(28,25,23,.55)}
.nb:active .nb-cover{transform:rotateY(-22deg) translateX(-3px)}
.nb-band{position:absolute;top:0;bottom:0;right:16%;width:5.5%;background:var(--nb-band);opacity:.92}
.nb-label{position:absolute;left:11%;right:26%;top:12%;background:var(--gray-100);color:var(--black);padding:9px 10px 10px;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nb-label .mono{font-size:clamp(9px,3.3cqw,11px);letter-spacing:.08em;color:var(--gray-700)}
.nb-title{display:block;margin-top:6px;font:700 clamp(13px,6.2cqw,20px)/1.12 var(--font-sans);letter-spacing:-.01em;text-transform:none}
.nb-script{position:absolute;left:11%;right:26%;bottom:15%;font-size:clamp(15px,7.9cqw,25px);line-height:1.05;transform:rotate(-3deg);opacity:.92}
.nb-owl{position:absolute;left:11%;bottom:6.5%;width:clamp(16px,7.5cqw,26px);aspect-ratio:18/17;background:var(--nb-fg);opacity:.75;-webkit-mask:url("assets/owl.svg") center/contain no-repeat;mask:url("assets/owl.svg") center/contain no-repeat}
.nb-cap{font-size:10px;color:var(--gray-600);letter-spacing:.05em;text-transform:none;padding-left:2px}
/* cover palettes */
.nb-black{--nb-bg:var(--black);--nb-fg:var(--gray-100);--nb-band:var(--signal);--nb-speck:var(--speck-light)}
.nb-signal{--nb-bg:var(--signal);--nb-fg:var(--black);--nb-band:var(--black);--nb-speck:var(--speck-dark)}
.nb-stone{--nb-bg:var(--gray-300);--nb-fg:var(--black);--nb-band:var(--black);--nb-speck:var(--speck-dark)}
.nb-ash{--nb-bg:var(--gray-800);--nb-fg:var(--gray-100);--nb-band:var(--gray-100);--nb-speck:var(--speck-light)}
.nb-bone{--nb-bg:var(--gray-200);--nb-fg:var(--black);--nb-band:var(--signal);--nb-speck:var(--speck-dark)}
.nb-graphite{--nb-bg:var(--gray-700);--nb-fg:var(--gray-100);--nb-band:var(--black);--nb-speck:var(--speck-light)}

/* ----- films: clear DVD cases ---------------------------------------------
   Same footprint as a notebook, drawn as a transparent keep case: you see the disc through it. Back to front: the
   back half with its moulded tray (hub, the four disc-support arcs, the two hinge rails on the spine), the disc,
   then the lid, which is glass: a faint tint, a bright rim, and in Chromium a real refraction of what is behind it
   (backdrop-filter with the SVG displacement map that app.js builds in initGlass; other browsers keep the blur).
   Hover swings the lid open from the spine and slides the disc out to the right. The disc's label is the cover
   colour and carries the ring text, the owl and the hand-written note. The only paper is the white sticker on the
   lid. The lid is two layers: .dvd-glass, a flat plane that never rotates (tint and the backdrop filter: Chromium
   applies backdrop-filter to a 3D-rotated element's bounding box, which smears whatever is under the lid's edge),
   and .dvd-lid, the frame that swings open (rim, sheen, shadow, sticker). The look is tunable through the --dvd-*
   properties below; open the page with ?tune for sliders (tune.js). */
:root{--dvd-tint:.18;--dvd-blur:.7px;--dvd-sat:1;--dvd-rim:1;--dvd-rim-dark:.2;--dvd-glow:.2;--dvd-glow-size:16px;--dvd-sheen:.32;--dvd-open:22deg;--dvd-peek:30%}
.dvd{--spine:9%}
.dvd-back{position:absolute;inset:0;border-radius:4px 9px 9px 4px;background:rgba(255,255,255,var(--dvd-tint));
  box-shadow:inset 0 0 0 1px rgba(28,25,23,var(--dvd-rim-dark)),inset 0 0 0 2px rgba(255,255,255,var(--dvd-rim)),inset 0 0 14px rgba(255,255,255,calc(var(--dvd-glow) * 1.2)),0 26px 44px -30px rgba(28,25,23,.28)}
.dvd-tray{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dvd-tray .lo{fill:none;stroke:rgba(28,25,23,.17);stroke-width:1.4}
.dvd-tray .hi{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.1}
.dvd-disc{position:absolute;left:14.5%;top:50%;width:80%;aspect-ratio:1;transform:translateY(-50%);color:var(--nb-fg);
  transition:transform .95s var(--ease) .06s;filter:drop-shadow(0 10px 14px rgba(28,25,23,.22))}
.dvd:hover .dvd-disc,.dvd:focus-visible .dvd-disc,.dvd.is-open .dvd-disc{transform:translate(var(--dvd-peek),-50%) rotate(30deg)}
.dvd:active .dvd-disc{transform:translate(calc(var(--dvd-peek) + 5%),-50%) rotate(38deg)}
.dvd-disc-face{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.2),rgba(255,255,255,0) 58%),
    radial-gradient(circle closest-side,var(--nb-bg) 0 95.5%,#E2DFD8 96% 100%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 15%,rgba(0,0,0,.35) 15.5% 22%,#000 22.5%);
  mask:radial-gradient(circle closest-side,transparent 0 15%,rgba(0,0,0,.35) 15.5% 22%,#000 22.5%)}
.dvd-disc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dvd-disc .ring{font:500 3.9px var(--font-mono);fill:currentColor;opacity:.72}
.dvd-disc .note{font:400 7.4px var(--font-script);fill:currentColor;opacity:.92}
.dvd-owl{position:absolute;left:50%;top:27%;width:clamp(14px,6.2cqw,20px);aspect-ratio:18/17;transform:translate(-50%,-50%);background:currentColor;opacity:.8;-webkit-mask:url("assets/owl.svg") center/contain no-repeat;mask:url("assets/owl.svg") center/contain no-repeat}
.dvd-glass,.dvd-lid{position:absolute;top:0;bottom:0;left:var(--spine);right:0;border-radius:0 9px 9px 0}
/* The plane cannot rotate, so it is taller than the case and clipped to the shape the frame projects: the closed
   rectangle at rest, the perspective trapezoid of the open lid on hover (polygons computed by fitLids in app.js). */
.dvd-glass{top:-14%;bottom:-14%;clip-path:var(--dvd-clip-closed,inset(10.94% 0 10.94% 0));transition:clip-path .8s var(--ease);
  background:rgba(255,255,255,var(--dvd-tint));-webkit-backdrop-filter:blur(calc(var(--dvd-blur) + .6px)) saturate(var(--dvd-sat));backdrop-filter:blur(calc(var(--dvd-blur) + .6px)) saturate(var(--dvd-sat))}
.dvd:hover .dvd-glass,.dvd:focus-visible .dvd-glass,.dvd.is-open .dvd-glass{clip-path:var(--dvd-clip-open,var(--dvd-clip-closed))}
.dvd:active .dvd-glass{clip-path:var(--dvd-clip-active,var(--dvd-clip-open))}
.glass .dvd-glass{-webkit-backdrop-filter:url(#dvd-glass) blur(var(--dvd-blur)) saturate(var(--dvd-sat));backdrop-filter:url(#dvd-glass) blur(var(--dvd-blur)) saturate(var(--dvd-sat))}
.dvd-lid{transform-origin:left center;
  box-shadow:inset 0 0 0 1px rgba(28,25,23,var(--dvd-rim-dark)),inset 0 0 0 2px rgba(255,255,255,var(--dvd-rim)),inset 0 0 var(--dvd-glow-size) rgba(255,255,255,var(--dvd-glow)),0 26px 44px -30px rgba(28,25,23,.3);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.dvd-lid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,var(--dvd-sheen)) 0%,rgba(255,255,255,calc(var(--dvd-sheen) * .22)) 24%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 68%,rgba(255,255,255,calc(var(--dvd-sheen) * .45)) 100%)}
.dvd:hover .dvd-lid,.dvd:focus-visible .dvd-lid,.dvd.is-open .dvd-lid{transform:rotateY(calc(-1 * var(--dvd-open)));
  box-shadow:inset 0 0 0 1px rgba(28,25,23,var(--dvd-rim-dark)),inset 0 0 0 2px rgba(255,255,255,var(--dvd-rim)),inset 0 0 var(--dvd-glow-size) rgba(255,255,255,var(--dvd-glow)),0 50px 70px -30px rgba(28,25,23,.35)}
.dvd:active .dvd-lid{transform:rotateY(calc(-1.4 * var(--dvd-open)))}
.dvd-sticker{position:absolute;left:9%;right:19%;top:11%;background:var(--white);color:var(--black);padding:9px 10px 10px;border-radius:2px;box-shadow:0 1px 2px rgba(28,25,23,.14),0 0 0 1px rgba(28,25,23,.05)}
.dvd-sticker .mono{font-size:clamp(9px,3.3cqw,11px);letter-spacing:.08em;color:var(--gray-700)}
.dvd-title{display:block;margin-top:6px;font:700 clamp(13px,6.2cqw,20px)/1.12 var(--font-sans);letter-spacing:-.01em;text-transform:none}
.glass-defs{position:absolute;width:0;height:0;overflow:hidden}
/* A disc sliding out (or back in) must pass over the neighbouring notebook, so the case's slot outranks a hovered
   notebook, and app.js marks it .is-settling for a second after the pointer leaves. */
.nb-slot.is-settling{z-index:7}
.nb-slot:has(.dvd:hover),.nb-slot:has(.dvd:focus-visible),.nb-slot:has(.dvd.is-open){z-index:8}
.dvd-mini{width:110px;aspect-ratio:11/15;border-radius:3px 6px 6px 3px;position:relative;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 2px rgba(255,255,255,.05),0 20px 30px -20px rgba(0,0,0,.7)}
.dvd-mini::before{content:"";position:absolute;left:14.5%;top:50%;width:80%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle closest-side,transparent 0 15%,rgba(255,255,255,.14) 15.5% 22%,var(--nb-bg) 22.5% 95.5%,#CFCBC2 96% 100%)}
.dvd-mini::after{content:"";position:absolute;left:9%;top:6%;bottom:6%;width:1px;background:rgba(255,255,255,.22)}

/* reader dialog */
.reader{border:0;padding:0;margin:auto;max-width:none;max-height:none;width:min(1140px,calc(100vw - 32px));height:min(860px,calc(100dvh - 32px));
  background:var(--gray-100);color:var(--black);border-radius:6px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(28,25,23,.6);
  opacity:0;transform:translateY(28px) scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease);outline:none}
.reader:focus-visible{outline:none}
.reader.is-open{opacity:1;transform:none}
.reader::backdrop{background:rgba(28,25,23,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reader-inner{display:grid;grid-template-columns:320px 1fr;height:100%}
.reader-close{position:absolute;right:16px;top:16px;z-index:2;width:44px;height:44px;border:1px solid var(--hair-strong);border-radius:3px;background:var(--gray-100);font-size:24px;line-height:1;display:grid;place-items:center;transition:background .3s var(--ease),transform .3s var(--ease)}
.reader-close:hover{background:var(--black);color:var(--gray-100)}
.reader-close:active{transform:scale(.96)}
.reader-side{padding:48px 36px;border-right:1px solid var(--hair);overflow:auto;background:var(--gray-200);background-image:var(--speck-dark);background-size:420px 420px}
.nb-mini{width:110px;aspect-ratio:11/15;border-radius:2px 6px 6px 2px;background:var(--nb-bg);position:relative;box-shadow:0 20px 30px -20px rgba(28,25,23,.5)}
.nb-mini::before{content:"";position:absolute;top:0;bottom:0;right:16%;width:6%;background:var(--nb-band)}
.nb-mini::after{content:"";position:absolute;left:12%;right:28%;top:14%;height:22%;background:var(--gray-100);border-radius:1px}
.reader-side .eyebrow{margin-top:28px}
.reader-meta{margin-top:20px;display:grid;gap:14px;border-top:1px solid var(--hair-strong);padding-top:18px}
.reader-meta dt{font:500 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-700)}
.reader-meta dd{margin-top:5px;font-size:15px;line-height:1.3}
.reader-body{overflow:auto;padding:64px clamp(28px,6vw,88px) 72px;scroll-behavior:smooth}
.reader-title{font:700 clamp(30px,3.6vw,54px)/.98 var(--font-sans);letter-spacing:-.015em;max-width:18ch;text-wrap:balance;padding-right:48px}
.reader-dek{font-size:clamp(18px,1.4vw,22px);line-height:1.3;color:var(--gray-800);margin-top:22px;max-width:44ch}
.reader-text{margin-top:36px;max-width:62ch;font-size:17.5px;line-height:1.5;color:var(--gray-900)}
.reader-text p + p{margin-top:1.15em}
.reader-text blockquote{margin:1.6em 0;padding:0;font:700 clamp(22px,2vw,30px)/1.12 var(--font-sans);letter-spacing:-.01em;color:var(--black);max-width:22ch}
.reader-text blockquote .hl{padding:.03em .12em}
.reader-text .rt-figure{margin:1.6em 0}
.reader-text .rt-figure img,.reader-text .rt-figure video{display:block;width:100%;border-radius:4px;background:var(--gray-200)}
.reader-text .rt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reader-text .rt-grid img{height:100%;object-fit:cover}
.reader-text .rt-grid img:nth-child(3){grid-column:1 / -1;aspect-ratio:16/9;object-fit:cover}
.reader-text .rt-grid figcaption{grid-column:1 / -1;margin-top:2px;font:italic 400 15px/1.4 var(--font-sans);color:var(--gray-700)}
.reader-foot{display:flex;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--hair-strong);flex-wrap:wrap}

/* theater: the same dialog, dark, with the film on top and the credits below */
.reader.is-film{background:var(--black);color:var(--gray-100);background-image:var(--speck-light);background-size:420px 420px}
.reader.is-film .reader-close{background:var(--gray-900);color:var(--gray-100);border-color:var(--hair-dark)}
.reader.is-film .reader-close:hover{background:var(--gray-100);color:var(--black)}
.reader.is-film .reader-inner{display:none}
.theater-inner{display:none;grid-template-rows:minmax(0,1fr) auto;height:100%}
.reader.is-film .theater-inner{display:grid}
.theater-screen{position:relative;background:#000;min-height:0}
.theater-screen video,.theater-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain;outline:none}
.theater-screen video::-webkit-media-controls-overlay-play-button,
.theater-screen video::-webkit-media-controls-overlay-enclosure,
.theater-screen video::-webkit-media-controls-start-playback-button{display:none}
.theater-cta{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;display:grid;place-items:center;background:rgba(17,15,13,.72);cursor:pointer;opacity:1;transition:opacity .3s var(--ease),background .3s var(--ease)}
.theater-cta:hover{background:rgba(17,15,13,.8)}
.theater-cta svg{width:clamp(56px,9vw,88px);height:clamp(56px,9vw,88px);filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))}
.theater-cta circle{fill:rgba(28,25,23,.55)}
.theater-cta path{fill:var(--gray-100)}
.theater-cta.is-hidden{opacity:0;pointer-events:none}
.theater-info{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 36px;align-items:start;padding:26px 40px 22px;border-top:1px solid var(--hair-dark)}
.theater-info .dvd-mini{width:62px}
.theater-text .eyebrow{color:var(--gray-500)}
.theater-text .eyebrow .idx{color:var(--gray-100)}
.theater-text .eyebrow .idx::after{background:var(--hair-dark)}
.theater-title{font:700 clamp(22px,2.3vw,32px)/1.02 var(--font-sans);letter-spacing:-.015em;margin-top:12px;text-wrap:balance;max-width:26ch}
.theater-dek{margin-top:10px;font-size:clamp(15px,1.1vw,17px);line-height:1.35;color:var(--gray-400);max-width:58ch}
.theater-meta{display:flex;gap:28px;padding-top:4px}
.theater-meta dt{font:500 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500)}
.theater-meta dd{margin-top:6px;font-size:14px;line-height:1.3;color:var(--gray-100);white-space:nowrap}
.theater-sub{display:block;font-size:12px;color:var(--gray-500)}
.theater-foot{grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair-dark);flex-wrap:wrap}
.theater-foot .btn{background:var(--gray-100);color:var(--black)}
.theater-foot .btn:hover{background:var(--white)}
.theater-foot .btn-ghost{background:transparent;color:var(--gray-100);border-color:var(--hair-dark)}
.theater-foot .btn-ghost:hover{background:rgba(245,244,241,.08)}
.reader.is-film :focus-visible{outline-color:var(--signal)}

/* ==========================================================================
   POSTCARDS
   Click a face in the city list and that person's postcard is tossed onto the desk: photo side up, the city set
   along the bottom, then it turns over to the note they wrote. The back is laid out like any postcard: message on
   the left, and on the right a stamp in the notebook cover colour they picked, a postmark carrying their local time
   (the clocks that used to sit in the list), and the address lines with name, role and city. The card is two faces
   on a preserve-3d flip; the toss is a transform on the scene from the clicked face's position (--dx/--dy, set by
   app.js). Under reduced motion the card simply appears, note side up.
   ========================================================================== */
.postcard{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--black);overflow:hidden}
.postcard[open]{display:grid;justify-items:center;align-content:center;gap:26px}
.postcard::backdrop{background:rgba(28,25,23,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pc-scene{--dx:0px;--dy:0px;--sx:0px;width:min(720px,100%,calc((100dvh - 160px) * 1.5));aspect-ratio:3/2;perspective:1600px;opacity:0;
  transform:translate(var(--dx),var(--dy)) scale(.12) rotate(-28deg);transition:transform .4s var(--ease-io),opacity .3s var(--ease-io)}
.postcard.is-open .pc-scene{opacity:1;transform:translate(var(--sx),0) rotate(-1.5deg);transition:transform .8s cubic-bezier(.3,1.25,.45,1),opacity .35s var(--ease)}
.postcard.is-open.is-swap .pc-scene{opacity:0;transition:transform .22s var(--ease-io),opacity .2s var(--ease-io)}
.pc-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease);cursor:pointer}
.pc-card.is-back{transform:rotateY(180deg)}
.pc-face{position:absolute;inset:0;border-radius:5px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;container-type:inline-size;
  box-shadow:0 60px 80px -30px rgba(0,0,0,.65),0 18px 36px -18px rgba(0,0,0,.55),inset 0 0 0 1px rgba(28,25,23,.08)}
/* front: a photo print with a white border, the city along the bottom */
/* the photo is placed absolutely above the strip: as a grid item, Safari sized its row from the img's square intrinsic
   ratio, so it ran under the strip and the white margin at the bottom of the card disappeared */
.pc-front{--pad:14px;--strip:66px;background:var(--white);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad)}
.pc-photo{position:absolute;top:var(--pad);left:var(--pad);width:calc(100% - 2 * var(--pad));height:calc(100% - var(--pad) - var(--strip));object-fit:cover;object-position:var(--focus,50% 30%);border-radius:2px;background:var(--gray-300)}
.pc-strip{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;height:var(--strip);padding:0 2px 13px}
.pc-greet{display:block;font-size:10px;letter-spacing:.1em;color:var(--gray-700)}
.pc-front-city{display:block;margin-top:5px;font:400 clamp(22px,4.4cqw,32px)/.9 var(--font-display);text-transform:uppercase;color:var(--black)}
.pc-owl{width:22px;aspect-ratio:18/17;margin-bottom:3px;background:var(--black);opacity:.85;-webkit-mask:url("assets/owl.svg") center/contain no-repeat;mask:url("assets/owl.svg") center/contain no-repeat}
/* back: paper. The left 55% is the writer's panel (.pc-msg), a size container: the note, the signature and the ink and
   stickers a person adds (see tools/postcard-maker) are measured in cqw, hundredths of the panel's width, so a card made
   there at 720px looks the same at any card size and keeps its proportions on a phone. The right 45% is the post
   office's. The padding is a % of the card's width (30px and 28px at 720px) so the panel's aspect ratio never drifts. */
.pc-back{transform:rotateY(180deg);background:linear-gradient(90deg,transparent 55%,var(--hair-strong) 55%,var(--hair-strong) calc(55% + 1px),transparent calc(55% + 1px)) content-box no-repeat,var(--speck-dark) 0 0/420px 420px,var(--gray-100);display:grid;grid-template-columns:55% 45%;padding:4.1667% 4.1667% 3.8889%}
.pc-msg{position:relative;min-width:0;container-type:inline-size}
.pc-sheet{position:absolute;inset:0;display:flex;flex-direction:column;padding-right:7.713cqw;overflow:hidden}
.pc-note{font:400 7.713cqw/1.14 var(--font-script);color:var(--black);opacity:.9;transform:rotate(-.6deg);white-space:pre-wrap;overflow-wrap:break-word}
.pc-note p + p{margin-top:.5em}
.pc-sign{margin:0;padding:0;align-self:flex-start;max-width:100%;font:400 9.366cqw/1 var(--font-script);color:var(--black);opacity:.92;transform:rotate(-2deg);transform-origin:0 50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* follows the note, as in the maker */
.pc-ink{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.pc-ink path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pc-ink path.mk{mix-blend-mode:multiply}
.pc-stuck{position:absolute;inset:0;pointer-events:none}
.pc-side{position:relative;display:flex;flex-direction:column;padding-left:28px;min-width:0}
.pc-postage{position:relative;height:126px}
/* the stamp is an owl stamp (see STICKERS below) printed at 60px */
.pc-stamp{position:absolute;right:0;top:0;font-size:60px;transform:rotate(2deg)}
/* the postmark, inked over the stamp's corner: city and country round the ring, local date and time in the middle */
.pc-postmark{position:absolute;right:36px;top:32px;width:98px;height:98px;overflow:visible;color:var(--black);opacity:.72;transform:rotate(-12deg)}
.pc-postmark .ring{font:500 9px var(--font-mono);letter-spacing:.14em;fill:currentColor}
.pc-postmark .pm-date{font:500 8px var(--font-mono);letter-spacing:.08em;fill:currentColor}
.pc-postmark .pm-time{font:500 14px var(--font-mono);fill:currentColor}
.pc-address{margin-top:auto}
.pc-address span{display:block;padding:7px 0 8px;border-bottom:1px solid var(--hair-strong)}
.pc-name{font:700 clamp(17px,2.8cqw,20px)/1.1 var(--font-sans);letter-spacing:-.01em}
.pc-role{font:500 14px/1.2 var(--font-sans);color:var(--gray-800)}
.pc-place{font:500 11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-700)}
/* ----- STICKERS: what a person sticks on their panel in tools/postcard-maker (keep in step with its maker.css) ------
   Each is positioned by --x/--y (its centre) and sized by --w, all in thousandths of the panel width, and tilted by
   --r degrees. Its font-size is its width, so everything inside is drawn in em and scales with it. */
.stk{position:absolute;left:calc(var(--x) * .1cqw);top:calc(var(--y) * .1cqw);width:calc(var(--w) * .1cqw);font-size:calc(var(--w) * .1cqw);
  transform:translate(-50%,-50%) rotate(calc(var(--r) * 1deg));transform-origin:50% 50%;pointer-events:none}
/* an owl stamp: perforations are half-holes punched along the edge (radial-gradient tiles, the interior ones hidden
   under the printed panel), the panel is a notebook cover colour with the owl */
.owl-stamp{display:block;width:1em;aspect-ratio:60/72;
  background:radial-gradient(circle,transparent 0 .0433em,var(--white) .0483em) -.1em -.1em/.2em .2em;filter:drop-shadow(0 .017em .017em rgba(28,25,23,.22))}
.owl-stamp::before{content:"";position:absolute;inset:.1em;background:var(--nb-bg);background-image:var(--nb-speck);background-size:420px 420px}
.owl-stamp i{position:absolute;left:50%;top:50%;width:.4em;aspect-ratio:18/17;transform:translate(-50%,-50%);background:var(--nb-fg);opacity:.9;
  -webkit-mask:url("assets/owl.svg") center/contain no-repeat;mask:url("assets/owl.svg") center/contain no-repeat}
/* a paper label in mono caps: airmail stripes, the signal yellow, or black */
.paper-label{position:relative;display:inline-block;width:auto;white-space:nowrap;font:500 .12em/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--black);
  padding:.75em 1.15em .8em;background:var(--white);box-shadow:0 .1em .3em rgba(28,25,23,.22)}
.paper-label.l-airmail{border:.45em solid transparent;
  background:linear-gradient(var(--white),var(--white)) padding-box,repeating-linear-gradient(45deg,var(--blue) 0 .9em,var(--white) .9em 1.8em,var(--red) 1.8em 2.7em,var(--white) 2.7em 3.6em) border-box}
.paper-label.l-signal{background:var(--signal)}
.paper-label.l-black{background:var(--black);color:var(--gray-100)}
.stk.lab{width:auto;white-space:nowrap}
/* a photo in one of three finishes: a perforated stamp, a print with a strip of tape, or a die-cut sticker */
.photo{display:block}
.photo img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;-webkit-user-drag:none;user-select:none}
.photo.f-stamp{padding:.06em;background:radial-gradient(circle,transparent 0 .021em,var(--white) .025em) -.05em -.05em/.1em .1em;filter:drop-shadow(0 .012em .012em rgba(28,25,23,.22))}
.photo.f-print{padding:.05em .05em .13em;background:var(--white);box-shadow:0 .02em .06em rgba(28,25,23,.28),0 0 0 .5px rgba(28,25,23,.06)}
.photo.f-print::after{content:"";position:absolute;left:50%;top:-.04em;width:.36em;height:.09em;transform:translate(-50%,0) rotate(-2.5deg);
  background:rgba(255,246,222,.58);box-shadow:0 1px 2px rgba(28,25,23,.12);-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px)}
.photo.f-cut{filter:drop-shadow(0 .015em .03em rgba(28,25,23,.3))}
.photo.f-cut img{border-radius:.03em;
  filter:drop-shadow(.018em 0 0 var(--white)) drop-shadow(-.018em 0 0 var(--white)) drop-shadow(0 .018em 0 var(--white)) drop-shadow(0 -.018em 0 var(--white))}
.photo.f-cut::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.34),rgba(255,255,255,0) 46%);
  -webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat;pointer-events:none}
/* controls under the card, and the close in the corner */
.pc-controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease) .35s,transform .5s var(--ease) .35s}
.postcard.is-open .pc-controls{opacity:1;transform:none}
.postcard .btn-ghost{color:var(--gray-100);border-color:rgba(245,244,241,.22)}
.postcard .btn-ghost:hover{background:rgba(245,244,241,.08)}
.pc-close{position:absolute;right:20px;top:20px;width:44px;height:44px;border:1px solid rgba(245,244,241,.22);border-radius:3px;background:transparent;color:var(--gray-100);font-size:24px;line-height:1;display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.pc-close:hover{background:var(--gray-100);color:var(--black)}
.pc-close:active{transform:scale(.96)}


/* ==========================================================================
   PHOTOS
   The lightbox for a hero photo: one photo, full screen over a dark backdrop, and a close button. app.js sizes the
   photo to the stage and flies it in from its square with an inline transform and clip-path, which transition back
   to rest here (and out again on close, .is-closing; .is-drop when the square is off screen and the photo just fades).
   ========================================================================== */
.lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;outline:none;cursor:zoom-out}
.lightbox[open]{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr)}
.lightbox::backdrop{background:rgba(28,25,23,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .45s var(--ease)}
.lightbox.is-open::backdrop{opacity:1}
.lb-stage{margin:0;min-height:0;display:grid;place-items:center;padding:clamp(72px,9vh,96px) clamp(16px,6vw,112px)}
.lb-img{display:block;border-radius:2px;background:var(--gray-900);-webkit-user-select:none;user-select:none;
  clip-path:inset(0);opacity:0;transition:transform .62s var(--ease),clip-path .62s var(--ease),opacity .12s linear}
.lightbox.is-ready .lb-img{opacity:1}
.lightbox.is-closing .lb-img{opacity:0;transition:transform .44s var(--ease-io),clip-path .44s var(--ease-io),opacity .14s linear .3s}
.lightbox.is-closing.is-drop .lb-img{transition:transform .3s var(--ease-io),opacity .25s linear}
.lb-close{position:absolute;right:20px;top:20px;z-index:1;width:44px;height:44px;border:1px solid rgba(245,244,241,.22);border-radius:3px;background:transparent;color:var(--gray-100);
  font-size:24px;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .3s var(--ease),background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.lightbox.is-open .lb-close{opacity:1}
.lb-close:hover{background:var(--gray-100);color:var(--black)}
.lb-close:active{transform:scale(.96)}

/* ==========================================================================
   HIRING
   ========================================================================== */
.hiring-title{margin-top:clamp(20px,3vw,40px);font-size:clamp(50px,11.5vw,220px)}
.line-static{display:block;position:relative}
.line-static:last-child{display:inline-block}
.hiring-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(40px,5vw,72px);align-items:end}
.hiring-grid .sec-intro{grid-column:1 / span 6}
.hiring-aside{grid-column:9 / -1;color:rgba(28,25,23,.7);font-size:12px;line-height:1.4;text-align:right}
.roles{margin-top:clamp(48px,6vw,96px);border-top:1px solid var(--hair-strong)}
.role{display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:center;padding:26px 8px 26px 0;border-bottom:1px solid var(--hair-strong);transition:background .4s var(--ease)}
.role:hover{background:rgba(28,25,23,.06)}
.role-idx{font:500 12px/1 var(--font-mono);color:rgba(28,25,23,.6);padding-left:8px}
.role-main{transition:transform .6s var(--ease)}
.role:hover .role-main{transform:translateX(10px)}
.role-title{font:700 clamp(22px,2.5vw,36px)/1.05 var(--font-sans);letter-spacing:-.015em}
.role-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font:500 11px/1.2 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:rgba(28,25,23,.7)}
.role .btn{background:var(--black);color:var(--signal)}
.role .btn:hover{background:var(--gray-900)}
.hiring-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:40px}
.hiring-foot .roles-note{margin:0;color:rgba(28,25,23,.62);font-size:11px}
/* Ghost rows hold the list's height while Greenhouse answers: faded bars where the number, title, meta line and button go */
.role-ghost{pointer-events:none}
.role-ghost .role-idx::before,.role-ghost .role-main::before,.role-ghost .role-main::after{content:"";display:block;background:rgba(28,25,23,.08);border-radius:2px}
.role-ghost .role-idx::before{width:16px;height:11px}
.role-ghost .role-main::before{width:min(48%,440px);height:clamp(22px,2.5vw,36px)}
.role-ghost .role-main::after{width:min(30%,280px);height:11px;margin-top:12px}
.role-ghost .gh-btn{display:block;width:76px;height:37px;background:rgba(28,25,23,.08);border-radius:3px}
/* One line in place of the list when nothing matches, or the board could not be reached */
.roles-msg{padding:26px 8px 26px 0;border-bottom:1px solid var(--hair-strong);font:400 clamp(17px,1.4vw,21px)/1.45 var(--font-sans);color:rgba(28,25,23,.8);max-width:52ch}
.role-new{color:var(--black);display:inline-flex;align-items:center;gap:6px}
.role-new::before{content:"";width:6px;height:6px;background:var(--black)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{position:relative;background:var(--black);color:var(--gray-100);padding:clamp(64px,8vw,120px) 0 calc(36px + env(safe-area-inset-bottom,0px));background-image:var(--speck-light);background-size:420px 420px}
.foot-mark{width:100%;aspect-ratio:943/103;background:var(--gray-100);-webkit-mask:url("assets/wordmark.svg") center/contain no-repeat;mask:url("assets/wordmark.svg") center/contain no-repeat}
.foot-row{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center;margin-top:clamp(40px,6vw,96px);padding-top:22px;border-top:1px solid var(--hair-dark);color:var(--gray-500)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:var(--gray-400);transition:color .3s}
.foot-links a:hover{color:var(--gray-100)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .bento{--n:3}
}
@media (min-width:721px) and (max-width:1100px){
  /* only the four 1x1 tiles fit the column beside the map, HoS, the timeline and the compass, and sixteen cells never
     fill three columns: the safety score and streaks stack beside the map, Ask and the video run two rows */
  .tile[data-t=timeline]{order:1}
  .tile[data-t=compass],.tile[data-t=video]{order:2}
  .tile[data-t=ask],.tile[data-t=video]{grid-row:span 2}
}
@media (max-width:900px){
  .sec-head .eyebrow,.sec-head .h1,.sec-head .sec-intro{grid-column:1 / -1}
  .hero-lede{grid-column:1 / -1}
  .ticker{grid-column:1 / -1}
  .globe-people{display:none}
  .cities{display:grid}
  #globe{touch-action:auto;cursor:default}
  .reader-inner{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .reader-side{padding:24px 24px 18px;border-right:0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:center}
  .nb-mini{width:52px;grid-row:1 / span 2}
  .reader-side .eyebrow{margin-top:0}
  .reader-meta{margin-top:0;padding-top:0;border:0;display:flex;flex-wrap:wrap;gap:6px 16px}
  .reader-meta dt{display:none}
  .reader-meta dd{font-size:12px;color:var(--gray-700)}
  .reader{width:calc(100vw - 16px);height:calc(100dvh - 16px)}
  .reader-body{padding:40px 22px 56px}
  .theater-inner{grid-template-rows:auto minmax(0,1fr)}
  .theater-screen{aspect-ratio:16/9}
  .theater-info{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);align-content:start;gap:14px;padding:20px 22px 22px;overflow:auto}
  .theater-foot{align-self:end}
  .theater-info .dvd-mini{display:none}
  .theater-meta{flex-wrap:wrap;gap:8px 20px;padding-top:0}
  .theater-meta dt{display:none}
  .theater-meta dd{margin-top:0;font-size:12px;color:var(--gray-500)}
  .theater-foot{margin-top:6px}
  .shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:12px 0 16px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .shelf .nb-slot{flex:0 0 min(66vw,280px);scroll-snap-align:start;margin-top:0!important}
  .hiring-grid .sec-intro,.hiring-aside{grid-column:1 / -1}
  .hiring-aside{text-align:left}
  .role{grid-template-columns:40px 1fr;gap:12px 16px}
  .role .btn{grid-column:2;justify-self:start}
  .role-ghost .gh-btn{grid-column:2}
}
@media (max-width:720px){
  :root{--sec-pad:clamp(80px,18vw,120px)}
  .postcard{padding:16px}
  .pc-scene{width:min(380px,100%,calc((100dvh - 150px) * .667));aspect-ratio:2/3}
  .pc-front{--pad:12px;--strip:60px}
  .pc-strip{padding-bottom:11px}
  .pc-back{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:22px;background:var(--speck-dark) 0 0/420px 420px,var(--gray-100)}
  .pc-msg{height:100%;width:auto;aspect-ratio:363/422;justify-self:start;margin-bottom:16px}   /* the writer's panel keeps its proportions */
  .pc-side{border-left:0;border-top:1px solid var(--hair-strong);padding:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr) 122px;gap:0 14px;align-items:end}
  .pc-postage{grid-column:2;grid-row:1;width:122px;height:126px}
  .pc-address{grid-column:1;grid-row:1;margin-top:0}
  .hero-paper{--cell:24px}
  :root{--nav-top:4px;--nav-h:48px}   /* the lockup sits a little closer to the top of the screen */
  .rail{display:none}                 /* no section rail on phones */
  .bento{--n:2}
  .ui.compass-card{padding:16px 16px 0}
  .hiring-title{font-size:clamp(44px,15vw,120px)}
  .foot-row{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ticker-track,.route-line i,.rec i,.cursor,.hos-n span,.hos .col{animation:none!important}
  .hos .arc,.ss-rank,.st-fill{transition:none!important}
  .st-marks i{animation:none!important}
  .tl-list li,.tl-list li::before{transition:none!important}
  .tl-dot::after{animation:none!important}
  .ticker{-webkit-mask-image:none;mask-image:none}
  .reveal,.hero-grid{opacity:1!important;transform:none!important;transition:none!important}
  .hero-title .ink{display:none}
  .hero-title .mark{stroke-dashoffset:0;animation:none!important}
  .brand-word,.brand-design,.scrim u::before,.scrim b{transition:none!important}
  .paper-glow{display:none}
  .find.glint{animation:none}
  .hero-finds,.find,.find img,.find::after,.lb-img,.lb-close,.lightbox::backdrop{transition:none!important}
  .hero-title .fill{-webkit-mask:none;mask:none}
  .ul{clip-path:none!important;transition:none!important}
  .nb-cover,.dvd-lid,.dvd-glass,.dvd-disc,.role-main,.btn,.btn .arr,.ui{transition:none!important}
  .reader{transition:none}
  .pc-scene,.pc-card,.pc-controls,.av,.av img,.av-tag{transition:none!important}
  .gflag,.av.extra,.av.extra img,.gflag .row-2,.av-more{transition:none!important}
}