/* site.css: the shared look for every TFTK page (home, latest, about, slapz).
   Was the <style> block in index.html; moved here so all pages reuse it.
   Relative url()s below resolve from this file, i.e. the site root. */
/* ---------- Fonts ----------
   Files live in ./fonts (extracted from aerosoldier.zip and broadway.zip).
   NOTE: Aerosoldier is licensed PERSONAL USE ONLY (see fonts/aerosoldier/READ_BEFORE_ANY_USE.txt). */
@font-face {
  font-family: "Aerosoldier Drip";
  src: url("fonts/aerosoldier/AerosoldierDrip_PERSONAL_USE_ONLY.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Broadway";
  src: url("fonts/broadway/Broadway.ttf") format("truetype");
  font-display: swap;
}
/* main.js adds @font-face rules for every other style in ./fonts (for the control panel). */

/* ---------- Theme ---------- */
:root {
  --ink: #0b0b0d;          /* near-black */
  --paper: #f2f2f2;        /* off-white text */
  --spray: #4a8fd6;        /* blue from the tag */
  --spray-dark: #1f5fa8;
  --panel: rgba(10, 10, 14, 0.72);
  --display: "Aerosoldier Drip", "Impact", sans-serif;
  --heading: "Broadway", "Georgia", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem); /* space at the left/right edges of the page */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--paper);
  background: var(--ink);   /* shows before the 3D loads */
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------- The 3D layer ----------
   Fixed, full-viewport, behind everything. scene3d.js draws into it. */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;   /* 100% (not 100vw) so it never runs under the scrollbar */
  height: 100%;
  z-index: -2;
  display: block;
}
/* Dark gradient on top of the canvas so text stays readable. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.55));
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;   /* stack: logo on top, links underneath */
  justify-content: center;
  align-items: center;      /* centre both on the page */
  gap: 0.25rem;
  text-align: center;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}
.logo {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--paper);
  text-decoration: none;
  text-shadow: 3px 3px 0 var(--spray-dark);
}
nav a {
  font-family: var(--heading);
  color: var(--paper);
  text-decoration: none;
  margin: 0 0.75rem;   /* even space on both sides keeps the row centred */
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}
nav a:hover { color: var(--spray); }

/* ---------- Hero ----------
   Mostly empty on purpose: the graffiti tag in the 3D background is the focal point. */
.hero {
  min-height: 100vh;
  min-height: 100svh; /* phones: ignore the address bar so the hero doesn't jump */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 1rem 12vh;
  margin-top: -4.5rem; /* tuck under the sticky header */
}
/* If the hero is moved down the page (Layout tab), it no longer tucks under the header. */
.hero.not-first { margin-top: 0; }
.hero-home { color: inherit; text-decoration: none; display: block; cursor: pointer; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 0 2px #000, 5px 5px 0 var(--spray-dark), 0 8px 30px rgba(0,0,0,0.8);
}
.hero p {
  margin-top: 1rem;
  font-family: var(--heading);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  text-shadow: 0 2px 10px #000;
}
.scroll-cue {
  margin-top: 2rem;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(6px); } }

/* ---------- Content panels ----------
   Every block (hero, sections, pictures, footer) sits directly inside #blocks,
   so the Layout tab can reorder them just by moving them around.
   Each section carries its own side padding (the gutter) so it stays in the
   same 860px centre column it had before. */
#blocks { display: block; }
/* Jump links (#posts, #about) stop below the sticky header instead of under it */
section { scroll-margin-top: 5.5rem; }
section {
  max-width: calc(860px + 2 * var(--gutter));
  padding: 0 var(--gutter);
  margin: 0 auto 4rem;
}
section > h2 {
  font-family: var(--heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 1.5rem;
  text-shadow: 3px 3px 0 var(--spray-dark);
  /* Shrink the box to the text. The panel can scale headings up (transform),
     and a full-column-wide box scaled up would push the page wider than the screen. */
  width: fit-content;
}
.post {
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 6px solid var(--spray);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.post:hover { transform: translateX(6px); border-color: var(--paper); }
.post time {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--spray);
}
.post h3 {
  font-family: var(--heading);
  font-size: 1.6rem;
  margin: 0.3rem 0 0.6rem;
}
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover { color: var(--spray); }
.post p { opacity: 0.9; }
.about {
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2rem;
  border-radius: 4px;
}

/* ---------- Pictures added from the panel (Pictures tab) ---------- */
.pic-block figure { margin: 0 auto; }
.pic-block.w-small figure { width: 40%; }
.pic-block.w-medium figure { width: 70%; }
.pic-block.w-full figure { width: 100%; }
.pic-block img { display: block; width: 100%; height: auto; }
.pic-block.rounded img { border-radius: 14px; }
.pic-block figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  opacity: 0.8;
  text-shadow: 0 2px 8px #000;
}
@media (max-width: 600px) { .pic-block.w-small figure { width: 70%; } }

/* Hidden from the Layout tab (switch off) */
[data-block].is-hidden { display: none !important; }

footer {
  margin-top: 10rem; /* 6rem bottom gap the old <main> had + 4rem section gap */
  text-align: center;
  padding: 2rem 1rem 3rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
footer .street-link { color: var(--spray); font-family: "Broadway", var(--heading); text-decoration: none; line-height: 1; } /* named directly: settings.json can point --heading at another font. line-height 1: footer keeps its height */
footer .street-link:hover, footer .street-link:focus-visible { color: var(--paper); text-decoration: underline; }
footer .tag { font-family: var(--display); font-size: 1.5rem; display: block; opacity: 1; }

/* Respect people who turn off motion: scene3d.js also checks this. */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  html { scroll-behavior: auto; }
}
/* ---- Center the About and Music sections (only these two blocks) ----
   [data-block="..."] limits every rule here to one section, so Posts,
   the header, the hero and the footer keep their left alignment. */
/* Headings are fit-content boxes, so auto side margins center the box.
   The panel's type settings (typography.js) scale headings from their left
   edge with !important rules, so we scale these two from the middle instead,
   or the bigger heading would drift right. */
section[data-block="about"] > h2,
section[data-block="music"] > h2 { margin-inline: auto; transform-origin: center center !important; }
/* About paragraph text. typography.js sets "text-align: left !important" on
   ".about p", so this needs !important and a more specific selector to win. */
[data-block="about"] .about,
[data-block="about"] .about p { text-align: center !important; }
/* Music: now-playing title, artist and the "Up next" note */
[data-block="music"] .mp-now { text-align: center; }
/* Music: button rows (controls, Sort/Undo/Saved, search) centered as groups */
[data-block="music"] .mp-controls,
[data-block="music"] .mp-tools,
[data-block="music"] .mp-search { justify-content: center; }
[data-block="music"] .mp-volume { margin-left: 0; }   /* was pushed to the right edge */
[data-block="music"] .mp-search input { flex: 0 1 28rem; } /* a centered box, not edge to edge */
/* Music: track rows. The song button still fills the row (big tap target),
   but its number, title and artist sit together in the middle of it. */
[data-block="music"] .mp-track { justify-content: center; text-align: center; }
[data-block="music"] .mp-name { flex: 0 1 auto; text-align: center; }
[data-block="music"] .mp-empty { text-align: center; }
@media (max-width: 480px) {
  /* on phones the artist drops to its own line; center it under the title */
  [data-block="music"] .mp-artist { padding-left: 0; text-align: center; }
}
/* ---------- Side bars: the whole site sits in a centered frame ----------
   --frame is the frame's width. Everything outside it is plain black.
   Phones get thin 9px bars; bigger screens cap the frame at 1040px,
   a little wider than the content column (860px + gutters). */
:root { --bar: 16px; --frame: min(1040px, calc(100% - 2 * var(--bar))); }
@media (max-width: 600px) { :root { --bar: 9px; } }
html { background: #000; overflow-x: hidden; }  /* the bars themselves */
/* Header + sections stay in the frame. "clip" cuts off anything wider than the
   frame (like the big hero title on phones) without turning body into its own
   scroll box, so normal page scrolling and the sticky header keep working.
   It only works because html has its own overflow-x above; otherwise the browser
   would apply body's setting to the whole window instead of to body. */
/* background: transparent, because the 3D canvas sits *behind* body (z-index -2).
   Once html has its own black background, body would paint its dark colour
   on top of the canvas and hide the 3D. !important beats the inline colour
   main.js puts on body; the canvas already paints that same "Backdrop colour". */
body { max-width: var(--frame); margin-inline: auto; overflow-x: clip; background: transparent !important; }
/* The fixed 3D canvas and its dark scrim cover only the frame, not the whole window.
   scene3d.js reads the canvas's real size, so the 3D renders at the frame's width. */
#bg, .scrim { left: calc((100% - var(--frame)) / 2); right: auto; width: var(--frame); }
/* ---------- 3D fallback ----------
   If the 3D can't load (see start3D() in main.js), main.js adds class "no-3d" to body
   and sets the wall image on #bg, so the frame shows a still picture instead. */
body.no-3d #bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;  /* whole wall visible, no cropping on phones */
}
/* Hidden on screen, still read by screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Subpages (latest/, about/, slapz/) ----------
   There is no hero there, so give the one section some room below the sticky header. */
#blocks > section:first-child { margin-top: 2.5rem; }

/* Footer "Back to top" link: same look as the Calle Cuatro link next to it */
footer .to-top { color: var(--spray); font-family: "Broadway", var(--heading); text-decoration: none; line-height: 1; white-space: nowrap; }
footer .to-top:hover, footer .to-top:focus-visible { color: var(--paper); text-decoration: underline; }

/* ---------- R8: phone dropdown menu ----------
   Desktop: the button is hidden and the menu is unchanged.
   Phones (600px and narrower, where the 4 links got cramped): the links hide
   behind a menu button; nav.js toggles header.menu-open to show them as a
   dropdown. The dropdown is absolutely placed under the header, so it never
   pushes the page down, and while closed it takes no room at all.
   R13: only when JavaScript runs (html.js, set by a tiny script at the top of
   each page's <head>). Without JS there's no button that works, so the links
   simply stay visible in the header. */
.menu-btn { display: none; }
@media (max-width: 600px) {
  html.js .menu-btn {
    display: grid; place-items: center;
    position: absolute; top: 6px; right: 6px;  /* corner of the sticky header */
    width: 44px; height: 44px;                 /* comfortable tap target */
    padding: 0; border: 0; border-radius: 8px;
    background: rgba(0,0,0,0.55); cursor: pointer;
  }
  .menu-btn:focus-visible { outline: 2px solid var(--spray); outline-offset: 2px; }
  header.menu-open .menu-btn { background: var(--spray-dark); }
  html.js header nav { display: none; }
  html.js header.menu-open nav {
    display: flex; flex-direction: column; align-items: flex-end;
    position: absolute; top: 54px; right: 6px;
    padding: 0.4rem 0.9rem; border-radius: 8px;
    background: rgba(0,0,0,0.9); box-shadow: 0 6px 20px rgba(0,0,0,0.7);
  }
  /* The panel's type settings push "nav a" around (baseline shift, big margins)
     with !important; inside the dropdown just stack the links, each a tall tap row.
     Font, size and colour still come from the panel. */
  header.menu-open nav a {
    position: static !important; top: auto !important;
    margin: 0 !important; padding: 0.35rem 0 !important; min-height: 44px;
    display: flex !important; align-items: center; justify-content: flex-end;
    max-width: calc(100vw - 4rem); white-space: nowrap;
  }
}

/* ---------- R9: phone heading overlap ----------
   The panel's "Section headings" baseline shift moves each section > h2 down
   (position: relative; top: 45px) without moving anything else, so on phones
   the heading slid under the box below it (.about, .post, the player), which
   is drawn on top. On phones only: drop that shift and keep the heading above
   its box. Desktop keeps the shift as it is. "#blocks" makes this beat the
   panel's own !important rule for section > h2. */
@media (max-width: 600px) {
  #blocks > section > h2 { top: 0 !important; z-index: 1; }
}

/* ---------- R15: desktop heading overlap ----------
   On desktop the heading keeps the panel's baseline shift, so its bottom edge
   (about 18px of letters) reached into the box below it, which was drawn on top
   and hid part of the word on About and Music. Draw the heading above its box. */
#blocks > section > h2 { z-index: 1; }