/* 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: "Unbounded";
  src: url("fonts/Unbounded-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
:root {
  --ground: #F6F6F7;
  --ink: #1C1C1F;                    /* text and icons */
  --ink-rgb: 28 28 31;
  --paper: #ffffff;                  /* the inverse, for filled buttons */
  --glass: rgb(28 28 31 / 0.07);     /* frosted menu and legal panels */
  --glass-hover: rgb(28 28 31 / 0.12);
  --glass-panel: rgb(243 243 245 / 0.86);   /* the dropdown: solid enough to read over the dark UN */
}
* { 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) */
}


/* 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(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  color: var(--ink);
}
#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);
  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: 700 12px/1 "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.04em; opacity: 0.6; margin-bottom: 14px; }
#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 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.07; 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; }
#email { opacity: 0.9; transition: opacity 0.2s ease; }
#email:hover { opacity: 1; }
#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; }
#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, #email { 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, #email, #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: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
}
.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: "PP Mori", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; 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.94;
}
.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; }
}