/* perennos shell: the one persistent canvas, the still lockup, the page fade, the pause control.
   No inline styles anywhere (the site CSP forbids them). Colours: ground #07080a, bone #e9e7e2, grey #8d8f93, signal #ff5b1f. */
html.shell { background: #07080a; }
html.shell body { background: transparent; }

/* the field sits behind everything; copy is legible because the shader thins points behind it, not because of a box */
.shell-field { position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; z-index: -1; display: block; pointer-events: none; transition: opacity .06s linear; }
.shell-field.is-hidden { opacity: 0; }

/* the lockup: the one still object. Same corner, same size, never animated. */
.shell-lockup:focus-visible, .shell-pause:focus-visible { outline: 2px solid #ff5b1f; outline-offset: 3px; }

/* page chrome fades with the dissolve (320 ms in, rebuild 520 ms out) */
body > *:not([data-shell-keep]) { transition: opacity .22s ease-out; }
html.is-leaving body > *:not([data-shell-keep]), html.is-entering body > *:not([data-shell-keep]) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { body > *:not([data-shell-keep]) { transition-duration: .06s; } }
[tabindex="-1"]:focus { outline: none; }

.shell-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.shell-pause { position: fixed; right: 16px; top: calc(var(--sn-h, 64px) + 8px); z-index: 60; padding: 6px 9px; font: 700 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #8d8f93; background: transparent; border: 1px solid rgba(233, 231, 226, .12); cursor: pointer; }
.shell-pause:hover { color: #e9e7e2; }

/* poster tier: low power, save-data or no WebGL gets one still shape instead of the live field */
html[data-field="poster"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #07080a var(--poster) var(--pos, center) / var(--size, cover) no-repeat; }
html[data-formation="p"] { --poster: url(/formations/p.poster.webp); }
html[data-formation="globe"] { --poster: url(/formations/globe.poster.webp); }
html[data-formation="consult"] { --poster: url(/formations/lattice.poster.webp); }
html[data-formation="horizon"] { --poster: url(/formations/horizon.poster.webp); }
html[data-field="poster"] .shell-pause { display: none; }

/* Site additions (not in the demo): the lockup is the mark, so the page's own wordmark plate steps aside on every page that carries it (its box stays, so the nav does not shift).
   Not scoped to html.shell: with JavaScript off the still lockup is still there, so the plate must still go. */
html[data-field="own"] .shell-pause { display: none; }
/* The tempo hero's old 2D figure (plinth with a painted gradient) is replaced by the field. Home keeps its own figure and its founder trigger: home has no html.shell class. */
/* A list dash inside a hero is drawn with a border, not a painted background (the hero rule). */
[data-hero] .build-inclusions li::before { background: none; height: 0; border-top: 1px solid var(--color-accent); }

/* ---- 10 Nov second pass: home and /tempo/ and /cayman-entities/ join the field ---- */
/* Home: the old rail drew the T.W.I.Y. poster and a paper frame. With the shell's field behind the page, the frame and its poster step aside; the copy, offer, HUD and founder trigger stay. JavaScript off keeps the static poster. */
html.shell .tw-world, html.shell .tw-scan, html.shell .tw-frame::before, html.shell .tw-frame::after { display: none; }
html.shell .tw-frame, html.shell .twiy-page .tw-frame.sc-st, html.shell .twiy-page .tw-primary, html.shell .tw-home-body, html.shell .tw-rail, html.shell .twiy-page .tw-frame .sc-st { background: none !important; }
html.shell .twiy-page, html.shell body.twiy-page { background: transparent; }
html[data-field="poster"][data-formation="twiy"] { --poster: url(/img/twiy-poster.webp); }
/* phones: the wide poster (T.W.I.Y. on one line) scaled so the letters take about 88vw; the old mobile poster stacked them on two lines */
@media (max-width: 767px) { html[data-field="poster"][data-formation="twiy"] { --poster: url(/img/twiy-poster.webp); --size: 126vw auto; --pos: center 30svh; } }
html[data-field="poster"][data-formation="globe"] { --poster: url(/formations/globe.poster.webp); }
/* /tempo/: the 2D P figure is replaced by the particle P, but the founder trigger (.stage-hit) stays where the P stands: the picture is invisible, the button is not. */
html[data-formation="p"] .stage-p { opacity: 0; }
html[data-formation="p"] .stage-plinth { display: none; }
html.shell .tw-frame.sc-st::before, html.shell .tw-frame.sc-st::after, html.shell .tw-alt { display: none; }
html.shell body .tw-frame.sc-st::before, html.shell body .tw-frame.sc-st::after, html.shell body .tw-frame::before, html.shell body .tw-frame::after { display: none !important; content: none !important; background: none !important; }

/* ---- One nav on every shell page (Alex, 10 Nov: "everything you click on perennos should feel like you're on the same page") ---- */
@font-face { font-family: "SN Archivo"; src: url(/fonts/archivo-latin-variable.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root { --sn-ink: #e9e7e2; --sn-mute: #8d8f93; --sn-rule: #262b30; --sn-bg: #07080a; --sn-acc: #ff5b1f; --sn-h: 64px; --sn-lock-w: 270px; }
/* the lockup: the still mark (outlined paths) with the line as live text under it */
.shell-lockup { text-decoration: none; position: absolute; top: 12px; left: 24px; z-index: 60; display: block; width: var(--sn-lock-w); line-height: 1; }
.shell-lockup .sl-mark { display: block; width: 230px; height: 21.5px; }
.shell-lockup .sl-line { display: block; margin-top: 5px; font: 500 11px/1.25 "SN Archivo", Arial, sans-serif; letter-spacing: .06em; color: var(--sn-mute); white-space: nowrap; }
.sn { position: relative; z-index: 70; height: var(--sn-h); font-family: "SN Archivo", Arial, sans-serif; }
.sn-in { height: 100%; display: flex; align-items: center; padding: 0 24px 0 calc(24px + var(--sn-lock-w) + 20px); }
.sn a, .sn summary { color: var(--sn-ink); text-decoration: none; }
.sn-links { display: flex; align-items: center; gap: 22px; margin-left: auto; margin-right: 22px; }
.sn-links > a, .sn-links > details > summary { display: inline-flex; align-items: center; min-height: 44px; font: 700 12.5px/1 "SN Archivo", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid transparent; cursor: pointer; list-style: none; }
.sn summary::-webkit-details-marker { display: none; }
.sn-links > a:hover, .sn-links > details > summary:hover, .sn-links > a[aria-current], .sn-links > details[open] > summary { border-bottom-color: var(--sn-ink); }
.sn-dd > summary::after { content: ""; margin-left: 7px; width: 5px; height: 5px; border: solid var(--sn-ink); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.sn-dd { position: relative; }
.sn-dd > ul, .sn-panel ul { list-style: none; margin: 0; padding: 6px; }
.sn-dd > ul { position: absolute; top: calc(100% + 4px); left: -12px; min-width: 210px; background: var(--sn-bg); border: 1px solid var(--sn-rule); }
.sn-dd li a, .sn-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font: 700 12.5px/1 "SN Archivo", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.sn-dd li a:hover, .sn-panel a:hover { background: #12161a; }
.sn a:focus-visible, .sn summary:focus-visible { outline: 2px solid var(--sn-acc); outline-offset: 2px; }
.sn-right { display: flex; align-items: center; gap: 8px; }
.sn-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: var(--sn-acc); color: var(--sn-bg) !important; font: 800 13px/1 "SN Archivo", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.sn-cta:hover { background: var(--sn-ink); }
.sn-menu { display: none; position: relative; }
.sn-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--sn-rule); cursor: pointer; list-style: none; }
.sn-bars, .sn-bars::before, .sn-bars::after { display: block; width: 18px; height: 2px; background: var(--sn-ink); content: ""; }
.sn-bars { position: relative; }
.sn-bars::before { position: absolute; top: -6px; } .sn-bars::after { position: absolute; top: 6px; }
.sn-panel { position: absolute; right: 0; top: calc(100% + 6px); width: min(320px, calc(100vw - 32px)); background: var(--sn-bg); border: 1px solid var(--sn-rule); padding: 6px; }
.sn-panel h2 { margin: 10px 12px 2px; font: 700 10.5px/1 "SN Archivo", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-mute); }
@media (max-width: 1279px) { .sn-links { gap: 12px; margin-right: 12px; } .sn-links > a, .sn-links > details > summary { font-size: 11.5px; letter-spacing: .05em; } }
@media (max-width: 1179px) {
  .sn-links { display: none; }
  .sn-menu { display: block; }
  .sn-right { margin-left: auto; }
}
@media (max-width: 767px) {
  :root { --sn-h: 60px; --sn-lock-w: 140px; }
  .shell-lockup { top: 9px; left: 16px; }
  .shell-lockup .sl-mark { width: 140px; height: 13.1px; }
  .shell-lockup .sl-line { margin-top: 3px; font-size: 10px; letter-spacing: .04em; white-space: normal; }
  .sn-in { padding: 0 16px 0 calc(16px + var(--sn-lock-w) + 8px); }
  .sn-right { gap: 4px; }
  .sn-cta { padding: 0 9px; font-size: 11.5px; }
  .sn-menu > summary { width: 40px; }
}
@media (max-width: 359px) {
  :root { --sn-lock-w: 112px; }
  .shell-lockup .sl-mark { width: 112px; height: 10.5px; }
  .sn-cta { padding: 0 7px; font-size: 10.5px; }
  .sn-menu > summary { width: 36px; }
}
@media print { .sn-menu, .sn-links { display: none; } }

/* Home above the fold: the frame is the viewport minus the nav, so the cursive, the offer line and both buttons sit inside the first screen. */
html.shell .tw-rail { height: calc(100svh - var(--sn-h)) !important; min-height: 0 !important; }
html.shell .tw-frame, html.shell .twiy-page .tw-frame.sc-st { height: 100% !important; min-height: 0 !important; }