/* Apocalaptop website. Night watch colors from docs/BRAND.md. Dark only, no scripts.
   A sales page built on photos: a full-width hero, a photo spread of what it's for, feature rows, the five laptops
   with product photos, and a closing photo band. Square corners and solid lines. Amber is kept for links and the
   one button, and it only ever sits on dark. Photo credits are in /credits.html. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  --ink: #0E1418;
  --ink-2: #131B20;
  --slate: #3A4750;
  --fog: #D7DEE2;
  --fog-dim: #A6AFB5;
  --amber: #FFB000;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --max: 1200px;
  --gutter: 20px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fog);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  font-stretch: 100%;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--amber); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

p { margin: 0 0 1em; }

h2 {
  margin: 0 0 18px;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
}
h3 { color: #fff; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--amber); color: var(--ink); padding: 8px 14px; font-weight: 600;
  z-index: 10;
}
.skip:focus { left: 8px; }

.btn {
  display: inline-block;
  padding: 15px 28px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
}
.btn:hover { background: var(--fog); }

/* Header */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--ink);
  border-bottom: 2px solid var(--slate);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.top .logo img { height: 30px; width: auto; }
.top nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.top nav a { color: var(--fog); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.top nav a:hover { color: var(--amber); text-decoration: underline; }

/* A photo credit laid over the bottom corner of a full-width photo. */
.credit {
  position: relative; z-index: 1;
  margin: 0; padding: 0 var(--gutter) 10px;
  text-align: right;
  font-size: 0.72rem;
  color: rgba(215, 222, 226, 0.62);
}

/* Hero: the photo fills the screen, the words sit on its dark lower half. */
.hero {
  position: relative;
  min-height: min(90vh, 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #06090B;
  overflow: hidden;
}
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 30%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 20, 24, 0.94) 0%, rgba(14, 20, 24, 0.6) 38%, rgba(14, 20, 24, 0) 68%);
}
.hero-copy { position: relative; z-index: 1; width: 100%; padding-top: 160px; padding-bottom: 36px; }
.hero h1 {
  max-width: 900px;
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  color: #fff;
  /* A dark edge so the words still read where they cross the lit Empire State Building. */
  -webkit-text-stroke: 0.09em #06090B;
  paint-order: stroke fill;
  text-shadow: 0 2px 4px rgba(6, 9, 11, 0.85), 0 0 22px rgba(6, 9, 11, 0.6);
}
.lede { max-width: 640px; font-size: 1.18rem; color: var(--fog); margin-bottom: 28px; }
.status { margin: 18px 0 0; font-size: 0.95rem; color: var(--fog-dim); }

/* Section heads: the heading on the left, the paragraph on the right. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 20px 56px;
  align-items: end;
  margin-bottom: 44px;
}
.head h2 { margin: 0; }
.head p { margin: 0; color: var(--fog-dim); }

/* What it's for: one big photo and two smaller ones. */
.why { padding: 104px 0 112px; }
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: clamp(440px, 50vw, 620px);
}
.mosaic figure { position: relative; margin: 0; overflow: hidden; background: var(--ink-2); }
.mosaic .m1 { grid-row: 1 / 3; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .m3 img { object-position: 50% 30%; }
/* The captions stay hidden until the photo is hovered, tapped or focused. */
.mosaic figcaption {
  position: absolute; left: 0; bottom: 0;
  padding: 6px 12px;
  background: rgba(14, 20, 24, 0.85);
  font-size: 0.8rem;
  color: var(--fog);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mosaic figure:hover figcaption,
.mosaic figure:focus-within figcaption { opacity: 1; transform: none; }
.mosaic figure:focus { outline: none; }
.mosaic figure:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Wilson: the photo runs to the left edge of the screen. */
.wilson { border-top: 2px solid var(--slate); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 680px; }
.split-img { position: relative; background: #05080A; }
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.split-text {
  padding: 96px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 96px 64px;
  max-width: calc(var(--max) / 2 + 200px);
}
.ask { margin: 30px 0; padding: 26px 0 22px; border-top: 2px solid var(--slate); border-bottom: 2px solid var(--slate); }
.ask .q { font-size: 1.32rem; font-weight: 600; line-height: 1.35; color: #fff; margin-bottom: 14px; }
.ask p:not(.q) { color: var(--fog-dim); }
.ask figcaption { font-family: var(--mono); font-size: 0.85rem; color: var(--amber); }

/* The library: the text sits in the photo's black lower third, under the books. */
.library { position: relative; background: #000; overflow: hidden; border-top: 2px solid var(--slate); }
.library-img { width: 100%; max-width: 1600px; margin: 0 auto; }
.library-copy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 24px 64px;
  margin-top: calc(min(100vw, 1600px) * -0.2);
  padding-bottom: 104px;
}
.library-copy p { color: var(--fog-dim); }
.lib { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.lib li { break-inside: avoid; padding: 11px 0; border-top: 1px solid #2B353C; }

/* Feature rows: a photo and a short block of text. */
.feature { padding: 96px 0; border-top: 2px solid var(--slate); }
.duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; }
.duo.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.duo.flip .duo-img { order: 2; }
.duo-img { margin: 0; }
.duo-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.duo-text p { color: var(--fog-dim); }
.duo-text p:last-child { margin-bottom: 0; }

/* The laptops: three across, then the two biggest builds wider. */
.lineup { padding: 104px 0 96px; border-top: 2px solid var(--slate); }
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 28px; }
.unit { grid-column: span 2; }
.unit.big { grid-column: span 3; }
/* Maker product shots on white: contain, so no tile shape ever crops the laptop. */
.unit img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; margin-bottom: 20px; }
.unit.big img { aspect-ratio: 16 / 10; }
.unit h3 { margin: 0; font-size: 1.7rem; font-stretch: 125%; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.unit .model { margin: 4px 0 10px; color: var(--fog-dim); font-size: 0.95rem; }
.unit dl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px;
  margin: 14px 0 0; border-top: 1px solid var(--slate);
  font-family: var(--mono); font-size: 0.88rem;
}
.unit dt, .unit dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--slate); }
.unit dt { color: var(--fog-dim); }
.photo-note { margin: 40px 0 0; font-size: 0.85rem; color: var(--fog-dim); }

/* Ordering and the extras, side by side. */
.plain { padding: 96px 0; border-top: 2px solid var(--slate); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; }
.two h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.two p { color: var(--fog-dim); }

/* Questions: all open, two columns. */
.faq { padding: 96px 0 104px; border-top: 2px solid var(--slate); }
.faq h2 { margin-bottom: 36px; }
.qa { columns: 2; column-gap: 72px; }
.qa > div { break-inside: avoid; padding: 20px 0 6px; border-top: 1px solid var(--slate); }
.qa h3 { margin: 0 0 6px; font-size: 1.08rem; }
.qa p { color: var(--fog-dim); }

/* Closing band. */
.last {
  position: relative;
  min-height: clamp(440px, 50vw, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #000;
  overflow: hidden;
}
.last > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(0.5) contrast(1.15); }
.last-copy { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: 40px; }
.last h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-stretch: 125%; text-transform: uppercase; line-height: 1.04; }
.last-copy p { max-width: 560px; font-size: 1.12rem; margin-bottom: 26px; }

/* Photo credits page */
.credits { padding: 64px 0 96px; }
.credits h1 { margin: 0 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); font-stretch: 125%; font-weight: 800; text-transform: uppercase; line-height: 1.1; color: #fff; }
.credits > .wrap > p { max-width: 760px; color: var(--fog-dim); }
.credit-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--slate); }
.credit-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--slate); }
.credit-list img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; }
.credit-list p { margin: 0; color: var(--fog-dim); font-size: 0.92rem; }
.credit-list strong { color: var(--fog); }

/* 404 */
.lost { padding: 72px 0 96px; }
.lost h1 { margin: 0 0 14px; font-size: clamp(1.8rem, 4vw, 2.6rem); font-stretch: 125%; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.lost p { color: var(--fog-dim); margin-bottom: 26px; }

/* Footer */
.foot { border-top: 2px solid var(--slate); padding: 40px 0 56px; color: var(--fog-dim); font-size: 0.88rem; }
.foot .row { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.foot .brand { display: flex; align-items: center; gap: 12px; color: var(--fog); font-weight: 600; }
.foot .brand img { width: 34px; }
.foot .fine { max-width: 820px; }
.foot .fine p { margin-bottom: 8px; }

@media (max-width: 960px) {
  .top nav .long { display: none; }
  .head, .library-copy, .two { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split-img { aspect-ratio: 3 / 2; }
  .split-text { padding: 56px var(--gutter) 72px; max-width: none; }
  .duo, .duo.flip { grid-template-columns: minmax(0, 1fr); }
  .duo.flip .duo-img { order: 0; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
  .unit, .unit.big { grid-column: span 1; }
  .unit.big img { aspect-ratio: 4 / 3; }
  .unit:last-child { grid-column: 1 / -1; }
  .unit:last-child img { aspect-ratio: 16 / 9; }
  .why, .feature, .lineup, .plain, .faq { padding: 72px 0; }
}

@media (max-width: 700px) {
  .hero { min-height: 92vh; }
  .hero-img { object-position: 50% 20%; }
  .hero::after { background: linear-gradient(to top, rgba(14, 20, 24, 0.95) 0%, rgba(14, 20, 24, 0.8) 55%, rgba(14, 20, 24, 0.2) 82%, rgba(14, 20, 24, 0) 100%); }
  .hero-copy { padding-top: 120px; }
  .mosaic { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .mosaic .m1 { grid-row: auto; }
  .mosaic figure { aspect-ratio: 3 / 2; }
  .lib, .qa { columns: 1; }
  .library-copy { margin-top: -18vw; padding-bottom: 72px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .top .logo img { height: 24px; }
  .top nav ul { gap: 18px; }
  .lede { font-size: 1.05rem; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
  .unit:last-child img { aspect-ratio: 4 / 3; }
  .credit-list li { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .credit-list img { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mosaic figcaption { transition: none; }
}