/* Local paths override the unchanged BRAND token stylesheet's font locations. */
@font-face{font-family:SpaceGrotesk;font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/SpaceGrotesk-300.woff2') format('woff2')}
@font-face{font-family:SpaceGrotesk;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/SpaceGrotesk-400.woff2') format('woff2')}
/* Page ground follows the hero imagery (D07): #141414 for bg_post_v002. Brand charcoal stays in the token file.
   --crossing is where the loop's strands cross (46 % of the height in the render); the wordmark sits on it. */
:root{--page-ground:#141414;--crossing:46svh}
*{box-sizing:border-box}
html{background:var(--page-ground);color:var(--la-chalk);font-family:SpaceGrotesk,sans-serif;font-synthesis:none}
body{margin:0;min-height:100svh;position:relative;isolation:isolate}
.background{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--page-ground);pointer-events:none}
.background>picture,.background>video,.background>canvas,.background img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.background>video{opacity:0}
.background>video.is-playing{opacity:1}
/* Grain (D06): one fixed layer above the background, below the type. Tune with --grain-opacity (or ?dev). */
:root{--grain-opacity:.05}
body::after{content:"";position:fixed;top:-256px;left:-256px;width:calc(100% + 512px);height:calc(100% + 512px);z-index:-1;pointer-events:none;background:url('../media/grain_256.png');opacity:var(--grain-opacity);mix-blend-mode:overlay;animation:grain .8333s steps(1,end) infinite}
.grain-off body::after{display:none}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-87px,141px)}20%{transform:translate(163px,-52px)}30%{transform:translate(-201px,-176px)}40%{transform:translate(38px,219px)}50%{transform:translate(-129px,23px)}60%{transform:translate(214px,97px)}70%{transform:translate(-11px,-233px)}80%{transform:translate(122px,186px)}90%{transform:translate(-238px,-71px)}}
/* Layout v02 (D08): ref04 with the wordmark centred on the crossing, one copper rule, contacts in the corners. */
:root{--wordmark-w:40vw;--scrim-opacity:.7;--scrim-scale:1}
main{min-height:100svh}
h1{position:absolute;left:50%;top:var(--crossing);transform:translate(-50%,-50%);width:var(--wordmark-w);margin:0;line-height:0;font-size:inherit}
h1 img{display:block;width:100%;height:auto}
/* Scrim (D09): the loop dims around the name. Page-ground ellipse, 140 % x 260 % of the wordmark, between the video
   and the grain. Alpha follows (1 - r²)², which reaches zero with zero slope, so the rim has no edge to see. */
.scrim{position:absolute;left:50%;top:var(--crossing);z-index:-1;pointer-events:none;width:calc(var(--wordmark-w) * 1.4 * var(--scrim-scale));height:calc(var(--wordmark-w) * 211 / 1826 * 2.6 * var(--scrim-scale));transform:translate(-50%,-50%);opacity:var(--scrim-opacity);background:radial-gradient(closest-side,var(--page-ground) 0%,color-mix(in srgb,var(--page-ground) 98%,transparent) 10%,color-mix(in srgb,var(--page-ground) 92.2%,transparent) 20%,color-mix(in srgb,var(--page-ground) 82.8%,transparent) 30%,color-mix(in srgb,var(--page-ground) 70.6%,transparent) 40%,color-mix(in srgb,var(--page-ground) 56.3%,transparent) 50%,color-mix(in srgb,var(--page-ground) 41%,transparent) 60%,color-mix(in srgb,var(--page-ground) 26%,transparent) 70%,color-mix(in srgb,var(--page-ground) 13%,transparent) 80%,color-mix(in srgb,var(--page-ground) 3.6%,transparent) 90%,transparent 100%)}
.studio-line{position:absolute;top:78svh;left:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;font-size:clamp(20px,1.92578125vw,51px);line-height:1.1;font-weight:300;letter-spacing:var(--la-tracking-24)}
.rule{position:absolute;top:85svh;left:50%;width:9vw;height:clamp(2px,.2083vw,5px);transform:translate(-50%,-50%);background:var(--la-copper)}
.corners{position:absolute;left:5.25vw;right:5.25vw;bottom:7.5svh;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--la-space-16)}
.corner{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap}
.corner-end{align-items:flex-end}
/* Labels a step quieter than stone: stone at 65 % over the page ground, as a solid colour (contrast ≥ 4.5:1). */
.label{font-size:clamp(11px,.68vw,17px);line-height:1.4;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:color-mix(in srgb,var(--la-stone) 65%,var(--page-ground))}
.corner-end .label{margin-right:-.3em}
a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;font-size:clamp(14px,.99vw,25px);font-weight:400}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--la-chalk);outline-offset:5px}
@media (max-width:600px){
  :root{--wordmark-w:75vw}
  .rule{width:64px;height:2px}
  .corners{left:20px;right:20px;bottom:max(var(--la-space-16),env(safe-area-inset-bottom))}
}
/* Too narrow for two corners side by side: stack them, centred. */
@media (max-width:340px){
  .corners{flex-direction:column;align-items:center;gap:var(--la-space-8)}
  .corner,.corner-end{align-items:center}
  .corner-end .label{margin-right:0}
}
/* Portrait (D09): below 6:5 the loop fits by width over the matching ground, so the whole infinity shows.
   112 % wide puts the light (10–90 % of the frame) across ~90 % of the screen; centred at 42 % of the height.
   Top and bottom edges feathered over 8 %; the type sits under the loop in v02's order. Wordmark 50 % (not 55):
   at 55 the L and E land on the lobes; at 50 the name sits inside the loop, as on desktop. */
@media (max-aspect-ratio:6/5){
  :root{--pv-w:112vw;--pv-y:42svh;--crossing:calc(var(--pv-y) - 2.45vw);--wordmark-w:50vw;--line-y:calc(var(--pv-y) + 24vw)}
  .background img,.background>video,.background>canvas{inset:auto;left:50%;top:var(--pv-y);width:var(--pv-w);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent)}
  .studio-line{top:var(--line-y)}
  .rule{top:calc(var(--line-y) + 7svh)}
}
@media (prefers-reduced-motion:reduce){.background>video,.background>canvas{display:none}body::after{animation:none}}