/* Shared look for every page: type, header and footer, menu, grain. */
@font-face {
  font-family: "PP Mori";
  src: url("fonts/PPMori-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("fonts/Unbounded-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
:root {
  --ground: #AEB2BC;
  --ink: #FFFFFF;                    /* text and icons: white, glowing faintly in the haze */
  --ink-rgb: 255 255 255;
  --paper: #8F939F;                  /* the inverse, for filled buttons */
  --glass: rgb(255 255 255 / 0.13);  /* frosted menu and legal panels */
  --glass-hover: rgb(255 255 255 / 0.2);
  --glass-panel: rgb(118 122 134 / 0.5);   /* the dropdown: dark enough for white text over the ice */
  /* the glow: a bright core, then a wide soft bloom, like light caught in mist */
  --glow: 0 0 1px rgb(255 255 255 / 0.8), 0 0 9px rgb(255 255 255 / 0.5), 0 0 26px rgb(232 236 248 / 0.45);
  --glow-soft: 0 0 8px rgb(255 255 255 / 0.35), 0 0 22px rgb(232 236 248 / 0.3);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--ground); }
body {
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;   /* all text is set in capitals (legal body copy excepted) */
  text-shadow: var(--glow);
}
::selection { background: rgb(255 255 255 / 0.35); }


/* the menu: a frosted bar in the top centre with a dropdown panel under it */
#menuBar, #menuPanel {
  position: fixed; left: 50%; width: 306px; z-index: 9;
  border-radius: 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);   /* a hairline of light on the edge, like frosted glass */
}
#menuBar {
  top: 17px; height: 46px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; border: 0; cursor: pointer;
  font: 700 13px/1 "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background 0.25s ease;
}
#menuBar:hover { background: var(--glass-hover); }
.burger { position: relative; width: 22px; height: 10px; }
.burger i {
  position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 6px rgb(255 255 255 / 0.7);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), top 0.45s cubic-bezier(.2,.8,.2,1);
}
.burger i:nth-child(1) { top: 1px; }
.burger i:nth-child(2) { top: 7.5px; }
body.menu-open .burger i:nth-child(1) { top: 4.25px; transform: rotate(18deg); }
body.menu-open .burger i:nth-child(2) { top: 4.25px; transform: rotate(-18deg); }

#menuPanel {
  background: var(--glass-panel);
  top: 79px; padding: 22px 24px 24px;
  transform: translate(-50%, -10px); opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.45s;
  max-height: calc(100vh - 100px); overflow-y: auto;
}
body.menu-open #menuPanel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.8,.2,1); }
#menuPanel .label { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 14px; }
#menuPanel .label::before { content: "// "; opacity: 0.6; }
#menuPanel ul { list-style: none; }
#menuPanel a, #menuPanel .soon {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--ink); text-decoration: none;
  font-family: "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
  transition: opacity 0.3s ease;
}
#menuPanel .big a, #menuPanel .big .soon { font-size: 26px; line-height: 1.38; letter-spacing: -0.005em; }
#menuPanel .small a, #menuPanel .small .soon { font-size: 19px; line-height: 1.45; }
#menuPanel .soon { opacity: 0.45; cursor: default; }
#menuPanel .soon em, #menuPanel a em { font-style: normal; font-size: 11px; letter-spacing: 0.04em; opacity: 0.7; }
#menuPanel em.locked { display: inline-flex; align-items: center; gap: 6px; }
#menuPanel em.locked svg { width: 12px; height: 14px; }
#menuPanel ul:hover a { opacity: 0.5; }
#menuPanel ul:hover a:hover { opacity: 1; }
#menuPanel ul + .label { margin-top: 26px; }
/* stagger the rows in */
#menuPanel li { transform: translateY(8px); opacity: 0; transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease; }
body.menu-open #menuPanel li { transform: none; opacity: 1; }
/* phones: the bar fills the gap between UNSERIOUS and CONTACT, on their line, with MENU and its icon centred inside */
@media (max-width: 640px) {
  #menuBar {
    left: calc(108px + env(safe-area-inset-left)); right: calc(95px + env(safe-area-inset-right)); width: auto;
    transform: none;
    top: calc(14px + env(safe-area-inset-top)); height: 34px;
    justify-content: center; gap: 12px; padding: 0 12px; font-size: 12px;
  }
  #menuPanel { left: 12px; right: 12px; width: auto; top: calc(58px + env(safe-area-inset-top)); transform: translateY(-10px); padding: 20px 20px 20px; }
  body.menu-open #menuPanel { transform: none; }
  #menuPanel .big a, #menuPanel .big .soon { font-size: 28px; line-height: 1.45; }
}
/* touch screens have no hover: don't leave rows dimmed after a tap */
@media (hover: none) { #menuPanel ul:hover a { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #menuPanel, #menuPanel li, .burger i { transition: none; }
}

/* fine film grain, as on the tags site */
#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  opacity: 0.1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
  #grain { mix-blend-mode: normal; opacity: 0.05; }
}

/* furniture */
.ui {
  position: fixed; z-index: 6;
  font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink);
}
.ui, .ui a, .ui button { text-decoration: none; }
.ui a { color: var(--ink); }
#brand, #top { z-index: 9; }
.mori { font-family: "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
#brand { top: 31px; left: 28px; }
#top { top: 31px; right: 28px; display: flex; gap: 22px; align-items: center; }
#sound { appearance: none; background: none; border: 0; padding: 0; color: var(--ink); text-transform: uppercase; text-shadow: inherit; cursor: pointer; opacity: 0.9; transition: opacity 0.2s ease; }
#sound:hover { opacity: 1; }
#menuPanel a.dim { opacity: 0.55; }
#social { bottom: 26px; left: 28px; display: flex; gap: 16px; align-items: center; }
#social a { display: inline-flex; opacity: 0.9; transition: opacity 0.2s ease; }
#social a:hover { opacity: 1; }
#social svg { width: 16px; height: 16px; fill: var(--ink); display: block; filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.6)); }
#legal { bottom: 26px; right: 28px; display: flex; gap: 22px; }
#legal a { opacity: 0.85; transition: opacity 0.2s ease; }
#legal a:hover { opacity: 1; }

@media (max-width: 640px) {
  .ui { font-size: 10px; letter-spacing: 0.26em; }
  .ui.mori, #sound { font-size: 13px; letter-spacing: 0.005em; }
  #brand { top: calc(24px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); }
  #top { top: calc(24px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
  #social { bottom: calc(18px + env(safe-area-inset-bottom)); left: calc(16px + env(safe-area-inset-left)); }
  #legal { bottom: calc(18px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); gap: 18px; }
  /* bigger tap targets without moving the text */
  #legal a, #sound, #brand { padding: 10px 0; margin: -10px 0; }
  #social a { padding: 10px; margin: -10px; }
}


/* the moving background, behind everything */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* legal pages: the document sits in a frosted panel over the moving background.
   The panel scrolls on its own between the header and footer, so text never runs under them. */
.legal-page, .legal-page body { height: 100%; overflow: hidden; }
.legal-page .backdrop { pointer-events: none; }
.legal {
  position: fixed; z-index: 2;
  top: calc(92px + env(safe-area-inset-top)); bottom: calc(76px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100% - 48px));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgb(var(--ink-rgb) / 0.35) transparent;
  padding: 44px 48px 48px;
  border-radius: 8px;
  background: rgb(104 108 120 / 0.42);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}
.legal h1 { font-family: "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 34px; line-height: 1.05; letter-spacing: 0.005em; }
.legal .meta { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; opacity: 0.65; margin: 14px 0 34px; }
.legal h2 { font-family: "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; margin: 34px 0 12px; }
.legal p, .legal li {
  text-transform: none;           /* long-form text stays in normal case so it reads easily */
  font-size: 16px; line-height: 1.62; opacity: 0.96;
  text-shadow: 0 0 10px rgb(255 255 255 / 0.25);   /* body copy glows less, so it stays crisp */
}
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0 1.1em; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal strong { font-weight: 700; }
@media (max-width: 640px) {
  .legal { top: calc(70px + env(safe-area-inset-top)); bottom: calc(60px + env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 28px 22px 30px; }
  .legal h1 { font-size: 28px; }
  .legal p, .legal li { font-size: 15px; }
}


/* ---------- the HUD: small mono labels that point at things with hairlines, as on a field instrument ---------- */
.hud { font: 500 11px/1.45 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); text-shadow: var(--glow); }
.hud .dim { opacity: 0.6; }
.hud a { color: inherit; text-decoration: none; }
.tag { position: fixed; z-index: 4; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 0.6s ease; }
.tag.on { opacity: 1; }
.tag a { pointer-events: auto; }
.tag a::after { content: ""; display: block; height: 1px; margin-top: 3px; background: currentColor; box-shadow: 0 0 6px rgb(255 255 255 / 0.8); transform: scaleX(0.35); transform-origin: left; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
.tag a:hover::after { transform: scaleX(1); }
.leaders { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.leaders line, .leaders polyline { stroke: #fff; stroke-width: 1; fill: none; filter: drop-shadow(0 0 3px rgb(255 255 255 / 0.9)); vector-effect: non-scaling-stroke; }
.leaders circle { fill: #fff; filter: drop-shadow(0 0 4px #fff); }
.pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 18px #fff; margin-right: 8px; vertical-align: 1px; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* the ethos page: the legal panel, read as a short essay */
.thesis .lead { font-family: "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; text-transform: uppercase; margin-bottom: 16px; }
.thesis .sign { margin-top: 34px; }
@media (max-width: 640px) { .thesis .lead { font-size: 18px; } }