/* =========================================================================
   HushHour — landing page
   Plain hand-written CSS. No build step. Square corners everywhere.
   All fonts self-hosted. All motion gated on prefers-reduced-motion.

   THE HOUSE TYPE SYSTEM, PLAYED QUIET. Same kit as the other three sites —
   Anton sheared -10deg for display, Archivo for body, near-black ground —
   and deliberately NOT LOUD's flypost language. No rotation on blocks, no
   colour echoes behind the headline, no misprint. The app's whole pitch is
   that it gets out of the way; a page that shouts would be arguing with it.
   What carries the brand here is the shear and the palette, nothing else.

   The fourth accent is green. Stray owns yellow, LOUD cyan, BITS magenta.
   ========================================================================= */

/* ----------------------------- Fonts (self-hosted) ----------------------- */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------- Tokens -------------------------------- */
:root {
  --ink:      #0A0A0C;
  --band:     #141418;
  --text:     #FFFFFF;
  /* Two text tiers, and deliberately no third. The other sites carry a
     --faint at 28-35% white; it is 2.4-3.2:1 on this ground, which is
     below AA for body sizes, and both style.css and stray/styles.css
     already carry a comment saying so where they had to walk a line
     back from it. Nothing on these three pages is decoration, so the
     token is not defined here rather than defined and avoided.
     --muted is 7.3:1 on --ink and 7.1:1 on --band. */
  --muted:    rgba(255,255,255,0.60);
  --hair:     rgba(255,255,255,0.12);
  --yellow:   #FFC400;
  --magenta:  #E9008F;
  --cyan:     #00C2FF;
  --green:    #3DDC84;

  --wrap: 1180px;
  --pad: clamp(20px, 4vw, 48px);
}

/* --------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  /* One wash, low and cool, bottom-left. LOUD puts two hot ones at the top;
     this page wants the ground to stay still behind the reading column. */
  background:
    radial-gradient(55% 38% at 12% 8%, rgba(61,220,132,0.13), rgba(61,220,132,0) 62%),
    var(--ink);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing, not tidiness. Every <img> here carries real
   width/height attributes (they are layout hints and stop reflow), and with
   max-width alone the width scales to the column while the height stays at
   the attribute — a 1600x900 shot rendered 522x900, stretched to nearly twice
   its height. The two dark screenshots are what made it visible; the hero was
   distorted the same way and simply looked plausible. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
a:hover { color: var(--text); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--green); color: var(--ink);
  font-weight: 800; padding: 10px 16px; z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
::selection { background: var(--green); color: var(--ink); }

/* ------------------------------- MECHANICS -------------------------------
   .dw   display line: Anton, uppercase, sheared -10deg. The shear is the
         brand and it is the ONLY transform on this site. Each line shears on
         its own corner, which keeps the left edge ragged the way the other
         sites do.
   Headings are the only sheared thing. Body copy, buttons and UI never are.
   -------------------------------------------------------------------------- */
.dw {
  display: block;
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 0.92;
  transform: skewX(-10deg);
  transform-origin: left bottom;
}
.c-green   { color: var(--green); }
.c-yellow  { color: var(--yellow); }
.c-cyan    { color: var(--cyan); }

/* --------------------------------- Header -------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 9;
  background: rgba(10,10,12,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 14px;
}
.logo {
  font-family: "Anton", Impact, sans-serif;
  font-size: 26px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transform: skewX(-10deg);
}
.logo:hover { color: var(--green); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--hair); color: var(--text);
  font-family: "Archivo"; font-weight: 800; font-size: 13px;
  letter-spacing: .14em; padding: 9px 14px; cursor: pointer;
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--muted); text-decoration: none;
  font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}
.nav a:hover { color: var(--text); }

.btn {
  display: inline-block;
  background: var(--green); color: var(--ink);
  font-family: "Archivo"; font-weight: 800;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 22px; text-decoration: none;
  border: 2px solid var(--green);
}
.btn:hover { background: transparent; color: var(--green); }
.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--hair);
}
.btn-ghost:hover { background: transparent; color: var(--green); border-color: var(--green); }
/* color is restated, not inherited: ".nav a" is (0,1,1) and ".btn" is
   (0,1,0), so the nav's muted white won the cascade over the button's
   near-black and the header GET IT rendered 60% white on green — 1.39:1.
   Found by computing the ratio off getComputedStyle; on screen it reads
   as a slightly soft label rather than as a bug. */
.nav .btn { font-size: 13px; padding: 10px 16px; color: var(--ink); }
.nav .btn:hover { color: var(--green); }

/* ---------------------------------- Hero --------------------------------- */
.hero { padding-block: clamp(56px, 9vw, 112px) clamp(40px, 6vw, 72px); }
.eyebrow {
  font-weight: 800; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan);
}
.hero h1 {
  margin-top: 18px;
  font-size: clamp(50px, 10vw, 128px);
  font-weight: 400;
}
.hero-lead {
  margin-top: 26px; max-width: 54ch;
  font-size: clamp(17px, 1.7vw, 21px); color: var(--muted);
}
.hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note {
  margin-top: 16px; font-size: 14px; color: var(--muted);
}
.hero-shot {
  margin-top: clamp(40px, 6vw, 72px);
  border: 1px solid var(--hair);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  background: var(--band);
}

/* -------------------------------- Sections ------------------------------- */
.section { padding-block: clamp(48px, 7vw, 96px); }
.section-band { background: var(--band); border-block: 1px solid var(--hair); }
.sect-title { font-size: clamp(34px, 5.4vw, 68px); font-weight: 400; }
.sect-lead { margin-top: 20px; max-width: 60ch; color: var(--muted); font-size: 17px; }

/* The quiet grid. Hairlines, no cards, no hover lift — the other three sites
   use a card with a border that brightens; here the rule is the only edge. */
.feat {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid; gap: 1px;
  background: var(--hair);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feat > div { background: var(--ink); padding: clamp(22px, 2.6vw, 34px); }
.section-band .feat > div { background: var(--band); }
.feat h3 {
  font-family: "Archivo"; font-weight: 800;
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green);
}
.feat p { margin-top: 12px; color: var(--muted); font-size: 16px; }

/* Screenshot pair */
.shots {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid; gap: clamp(20px, 3vw, 36px);
  /* min() and not a bare 320px: at the 320px reflow width .wrap leaves
     280px between its gutters, a hard 320px track is wider than its
     own container, and body { overflow-x: clip } crops the excess
     rather than letting it scroll. min(320px, 100%) lets the track
     fall back to the column when the column is the smaller number. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.shot { border: 1px solid var(--hair); background: var(--band); }
/* A single full-width shot inside a section, as opposed to the .shots pair. */
.shot-wide { margin-top: clamp(32px, 4vw, 56px); }

.shot figcaption {
  padding: 14px 18px; font-size: 14px; color: var(--muted);
  border-top: 1px solid var(--hair);
}

/* --------------------------------- Get it -------------------------------- */
.get-box {
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--hair); background: var(--ink);
  padding: clamp(26px, 4vw, 44px);
}
.get-box h3 {
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase;
  transform: skewX(-10deg); transform-origin: left bottom;
}
.get-meta { margin-top: 14px; color: var(--muted); font-size: 16px; }
.get-box .btn { margin-top: 24px; }
.get-sub { margin-top: 18px; font-size: 14px; color: var(--muted); max-width: 58ch; }

/* ---------------------------- Sub-page (privacy) -------------------------- */
.page { padding-block: clamp(48px, 7vw, 96px); }
.page-title { font-size: clamp(40px, 7vw, 86px); font-weight: 400; }
.prose { margin-top: clamp(26px, 3vw, 40px); max-width: 68ch; }
.prose h2 {
  margin-top: 40px;
  font-family: "Archivo"; font-weight: 800;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green);
}
.prose p, .prose li { margin-top: 14px; color: var(--muted); font-size: 17px; }
.prose ul { margin-top: 10px; padding-left: 20px; }
.prose strong { color: var(--text); font-weight: 600; }
/* The GitHub links on these pages are written out as their URL, and
   "github.com/50hoursaweek/hushhour/issues" has no break opportunity in
   it. At the 320px reflow width that one word is 32px wider than the
   column and pushed the whole page sideways. Found by measuring
   scrollWidth, not by reading the page — at 390px it fits. */
.prose a, .prose code { overflow-wrap: anywhere; }
.prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .92em; color: var(--text);
  background: rgba(255,255,255,0.07);
  padding: 2px 6px;
}
/* Shell commands only. Scoped to a class rather than every .prose li,
   because a "$" in front of an ordinary bullet would be nonsense and the
   next list on one of these pages probably is not a terminal. */
.cmds { list-style: none; padding-left: 20px; }
.cmds li { position: relative; }
.cmds li::before {
  content: "$"; position: absolute; left: -16px; color: var(--green);
}
.back { margin-top: 48px; font-size: 15px; }

/* --------------------------------- Footer -------------------------------- */
.site-footer { border-top: 1px solid var(--hair); padding-block: 36px; }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 16px 30px;
  align-items: center; justify-content: space-between;
}
.footer-brand {
  font-weight: 800; font-size: 13px; letter-spacing: .14em;
  /* --muted, not a fainter tier: this is the company name and seat,
     which is information. style.css says the same thing on the same
     line of the root site. */
  text-transform: uppercase; color: var(--muted);
}
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; padding: 0; }
.footer-nav a {
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: .06em;
}
.footer-nav a:hover { color: var(--green); }

/* ------------------------------- Legal nav -------------------------------
   privacy.html and support.html only. They carry no JS, so the landing
   page's .nav + .nav-toggle pair is unavailable to them: .nav is
   display:none below 760px and only an aria-expanded button brings it back.
   Those two pages used it anyway and their navigation vanished on a phone.
   This nav is always visible and wraps instead of hiding, which is what
   /loud/, /bits/ and /stray/ already do on their legal pages.
   -------------------------------------------------------------------------- */
.legal-nav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; padding: 0; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 8px 12px;
  color: var(--muted); text-decoration: none;
  font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.legal-nav a:hover { color: var(--green); }

/* -------------------------------- Responsive ------------------------------ */
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--hair);
    padding: 8px var(--pad) 20px;
  }
  /* Driven off the button's own aria-expanded, so the accessible state
     and the visible state cannot disagree. The nav is the toggle's next
     sibling, which is what makes the + selector work. */
  .nav-toggle[aria-expanded="true"] + .nav { display: flex; }
  .nav a { padding-block: 13px; font-size: 15px; }
  .site-header { position: relative; }
  /* flex-wrap is for the legal pages: they have no toggle, so their row has
     to fit by wrapping. .nav is position:absolute on the landing page, so
     wrapping takes nothing with it there. */
  .header-inner { position: relative; flex-wrap: wrap; row-gap: 2px; }
  .legal-nav { width: 100%; }
  .legal-nav a { padding: 8px 10px; letter-spacing: .1em; }
}