/* Talp site shell: nav + footer shared by every page. Own class names, no collisions with page CSS. */
:root{
  --sh-bg:rgba(0,0,0,.62); --sh-bg-solid:#000; --sh-fg:#f3f3f1; --sh-mid:#a7a7a4; --sh-dim:#8c8c89;
  --sh-line:rgba(255,255,255,.10); --sh-line-soft:rgba(255,255,255,.06);
  --sh-sans:'Satoshi','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sh-mono:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --sh-maxw:1360px; --sh-pad:48px; --sh-ease:cubic-bezier(.22,1,.36,1);
  /* type: the site scale's tokens (assets/talp.css) with fallbacks for a page that does not load it */
  --sh-t-ui:var(--t-ui, 13.5px); --sh-t-small:var(--t-small, 12.5px); --sh-t-label:var(--t-label, 11px); --sh-t-body:var(--t-body, 15.5px);
}
:root[data-theme="light"]{
  --sh-bg:rgba(255,255,250,.82); --sh-bg-solid:#FFFFFA; --sh-fg:#0C0C0C; --sh-mid:#4B4B4B; --sh-dim:#8A8E8F;
  --sh-line:rgba(12,12,12,.16); --sh-line-soft:rgba(12,12,12,.08);
}
@media (max-width:720px){ :root{ --sh-pad:24px } }

.site-wrap{ max-width:none; margin:0; padding:0 var(--sh-pad); }

/* nav */
header.site-nav{ position:sticky; top:0; z-index:60; background:var(--sh-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:0; font-family:var(--sh-sans); }
.site-nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:66px; }
.site-logo{ display:flex; align-items:center; color:var(--sh-fg); text-decoration:none; }
.site-logo svg{ height:34px; width:auto; display:block; fill:currentColor; }
.site-logo svg path{ fill:currentColor; }
.site-links{ display:flex; gap:22px; align-items:center; margin:0; padding:0; }
.site-links a{ font-family:var(--sh-sans); font-size:var(--sh-t-ui); font-weight:500; color:var(--sh-mid); letter-spacing:-.01em; position:relative; text-decoration:none; transition:color .25s var(--sh-ease); }
.site-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--sh-fg); transition:width .3s var(--sh-ease); }
.site-links a:hover,.site-links a[aria-current]{ color:var(--sh-fg); }
.site-links a::after{ display:none; }  /* no underline; the label decodes on hover (assets/nav-code.js) */
.site-links a{ white-space:nowrap; }
.site-links a.decoding{ display:inline-block; overflow:hidden; font-variant-numeric:tabular-nums; }
.site-links a.site-cta{ display:inline-flex; align-items:center; gap:8px; color:var(--sh-mid); border:0; border-radius:0; padding:0; }
.site-links a.site-cta svg{ width:.95em; height:.95em; display:block; } .site-links a.site-cta svg path{ fill:currentColor; }
.site-links a.site-cta::after{ display:none; }
.site-links a.site-cta:hover,.site-links a.site-cta[aria-current]{ color:var(--sh-fg); background:none; }
.site-menu{ display:none; background:none; border:1px solid var(--sh-line); border-radius:999px; color:var(--sh-fg); font:500 var(--sh-t-ui) var(--sh-sans); padding:8px 14px; cursor:pointer; }
@media (max-width:720px){
  .site-menu{ display:inline-flex; font-size:var(--sh-t-ui); min-height:38px; }
  /* the menu panel hangs from the header (absolute, not fixed: the header's backdrop blur makes it the containing
     block for fixed descendants, which collapsed the panel to nothing). It covers the viewport below the bar. */
  .site-links{ display:none; position:absolute; left:0; right:0; top:100%; height:calc(100vh - 66px); height:calc(100dvh - 66px); z-index:58; background:var(--sh-bg-solid); padding:8px var(--sh-pad) 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex-direction:column; align-items:stretch; gap:0; box-shadow:0 40px 80px -36px rgba(0,0,0,.95); }
  .site-links.open{ display:flex; }
  .site-links a{ display:block; padding:16px 2px; font-size:18px; font-weight:500; border-bottom:0; }
  .site-links a::after{ display:none; }
  .site-links a.site-cta{ border:0; border-radius:0; padding:18px 2px; margin-top:8px; }
  .site-links a.site-cta:hover,.site-links a.site-cta[aria-current]{ background:none; color:var(--sh-fg); }
}

/* footer */
footer.site-foot{ border-top:0; padding:clamp(56px,8vh,96px) 0 40px; font-family:var(--sh-sans); color:var(--sh-mid); background:transparent; }
.site-foot-top{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:56px; }
.site-foot-brand{ display:flex; flex-direction:column; gap:24px; color:var(--sh-fg); }
.site-foot-brand svg{ height:clamp(34px,3.4vw,46px); width:auto; fill:currentColor; }
.site-foot-brand svg path{ fill:currentColor; }
.site-foot-address{ font-style:normal; font-family:var(--sh-mono); font-weight:300; font-size:var(--sh-t-small); line-height:1.75; color:var(--sh-dim); }
.site-foot-address a{ color:var(--sh-mid); text-decoration:none; transition:color .2s var(--sh-ease); }
.site-foot-address a:hover{ color:var(--sh-fg); }
.site-foot-cols{ display:flex; gap:clamp(40px,7vw,110px); flex-wrap:wrap; }
.site-foot-col h4{ font-family:var(--sh-mono); font-weight:300; font-size:var(--sh-t-label); color:var(--sh-dim); text-transform:uppercase; letter-spacing:.1em; margin:0 0 14px; }
.site-foot-col a{ display:block; font-size:var(--sh-t-ui); color:var(--sh-mid); padding:5px 0; text-decoration:none; transition:color .25s var(--sh-ease); }
.site-foot-col a:hover{ color:var(--sh-fg); }
.site-foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-top:0; padding-top:26px; font-family:var(--sh-mono); font-weight:300; font-size:var(--sh-t-label); letter-spacing:.04em; color:var(--sh-dim); }
/* the site-wide notice (2026-11-04, sprint/research/use-cases-logos-legal.md draft A): under the copyright line, a step quieter */
.site-foot-legal{ display:grid; gap:3px; flex:1 1 360px; min-width:0; }
.site-foot-note{ max-width:68ch; font-size:12px; font-weight:300; letter-spacing:.01em; }
.site-foot-note a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(255,255,250,.35); text-underline-offset:3px; }
@media (hover:none), (pointer:coarse){ .site-foot-note a{ position:relative; z-index:1; display:inline-block; padding:13px 6px; margin:-13px -6px; } }   /* a full touch target for the email in the notice (2026-11-05) */
@media (max-width:720px){
  footer.site-foot{ padding-top:clamp(48px,8vh,72px); }
  .site-foot-top{ gap:40px; padding-bottom:44px; }
  .site-foot-address{ font-size:var(--sh-t-small); }
  .site-foot-cols{ gap:32px; width:100%; }
  .site-foot-col{ flex:1 1 140px; min-width:0; }
  .site-foot-col a{ font-size:var(--sh-t-body); padding:7px 0; }
  .site-foot-bottom{ flex-direction:column; align-items:flex-start; gap:8px; font-size:var(--sh-t-label); }
}


/* ---------- the room footer (direction A, chosen 2026-10-02): the Talp room drawn as white particles as the ground of the
   footer tab itself; the text blocks sit on quiet darker patches; one scene per visit, then the blow-out ---------- */
footer.site-foot.room-foot{ position:relative; padding:0 0 28px; overflow:hidden; background:#000; }
.room-foot .site-foot-wrap{ position:relative; z-index:1; width:auto; margin:0 var(--sh-pad); padding:36px clamp(24px,3vw,40px) 24px; border-radius:16px; overflow:hidden; background:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,250,.08), 0 40px 80px -36px rgba(0,0,0,.95); }

.room-foot .room-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; }
.room-foot .room-stage canvas{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
.room-foot .room-stage img, .room-foot .room-stage video{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.room-foot .site-foot-top, .room-foot .site-foot-bottom{ position:relative; z-index:1; }
.room-foot .site-foot-top{ padding-bottom:0; }
.room-foot .foot-block{ background:rgba(0,0,0,.42); border-radius:12px; padding:22px 26px 24px; }
.room-foot .foot-block-brand{ background:rgba(0,0,0,.5); }
.room-foot .site-foot-brand{ gap:22px; }
.room-foot .site-foot-col a{ color:#d8d8d5; }
.room-foot .site-foot-col a:hover{ color:#fff; }
.room-foot .site-foot-address{ color:#a9a9a6; }
.room-foot .site-foot-address a{ color:#d8d8d5; }
.room-foot .site-foot-col h4{ color:#9a9a97; font-weight:400; }
/* the legal lines under the block, plain, on the block's inner edges (2026-11-05, Zelal: no rectangle) */
.room-foot .site-foot-bottom{ margin:0 var(--sh-pad); padding:14px calc(clamp(24px,3vw,40px) + 26px) 0; color:#9a9a97; }
@media (max-width:720px){
  footer.site-foot.room-foot{ padding:0 0 16px; }
  .room-foot .site-foot-wrap{ margin:0 var(--sh-pad); padding:24px 20px 18px; }
  .room-foot .room-stage{ position:relative; inset:auto; aspect-ratio:16/9; margin:-24px -20px 20px; border-radius:16px 16px 0 0; }
  .room-foot .foot-block{ padding:0; background:none; }
  .room-foot .site-foot-bottom{ padding:14px 20px 0; }
  .site-foot-legal{ flex:none; }   /* stacked, it takes its own height, not the row's 360 px basis */
  .room-foot .site-foot-top{ padding-bottom:0; }
}
/* the naked nav (2026-10-07): no band, no blur, no edge; only the words. A feathered shade of the void sits behind
   them (no line anywhere, it fades to nothing), with a soft text shadow, so the words stay readable over photos,
   papers and windows on every page. */
header.site-nav{ background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; border:0 !important; }
header.site-nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:118px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 42%, rgba(0,0,0,.18) 74%, rgba(0,0,0,0) 100%); }
header.site-nav .site-nav-row{ text-shadow:0 0 12px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); }
/* the short footer (2026-10-07): one compact band; the room fills it edge to edge from the wide plate (room-foot.js) */
@media (min-width:721px){
  .room-foot .site-foot-wrap{ padding:20px clamp(20px,2.4vw,32px) 14px; }
  .room-foot .site-foot-top{ padding-bottom:0; align-items:flex-start; }
  .room-foot .foot-block{ padding:14px 18px 14px; }
  /* the words stand on their patches (2026-11-06, reader's pass): the room's points ran through the address and the links below about 1500 px, and at every width while the points gather. A feathered edge, so no box shows */
  .room-foot .foot-block{ background:rgba(0,0,0,.8); box-shadow:0 0 20px 12px rgba(0,0,0,.8); }
  .room-foot .foot-block-brand{ background:rgba(0,0,0,.8); }
  .room-foot .site-foot-brand{ gap:12px; }
  .room-foot .site-foot-brand .site-logo svg, .room-foot .site-foot-brand svg{ height:30px; width:auto; }
  .room-foot .site-foot-address{ line-height:1.45; }
  .room-foot .site-foot-col h4{ margin-bottom:6px; }
  .room-foot .site-foot-col a{ padding:2px 0; }
  .room-foot .site-foot-bottom{ padding:10px calc(clamp(20px,2.4vw,32px) + 18px) 0; }
}
@media (prefers-reduced-motion:reduce){ .room-foot .room-stage canvas{ opacity:.9; } }

/* page transitions (2026-10-14): every page fades up from black on arrival; following a link to another page of the site fades
   the page to black first (assets/page-fade.js). Reduced motion: no fade. */
@keyframes pf-in{ from{ opacity:1; } to{ opacity:0; } }
@keyframes pf-out{ from{ opacity:0; } to{ opacity:1; } }
body::after{ content:""; position:fixed; inset:0; z-index:2147483000; background:#000; pointer-events:none; opacity:0; animation:pf-in .6s cubic-bezier(.4,0,.2,1) both; }
html.pf-out body::after{ animation:pf-out .38s cubic-bezier(.4,0,.2,1) both; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ body::after{ animation:none; opacity:0; } html.pf-out body::after{ animation:none; opacity:0; } }

/* the bottom lines in the lightest cut (5 Nov, Zelal: "lighter, like hairline") */
.site-foot-bottom, .site-foot-bottom *{ font-weight:200; -webkit-font-smoothing:antialiased; }