/* ============================================================
   laserdive.com — the one stylesheet, for all three pages and the 404
   (5 Sep 2026; fourth cut the same evening. The owner's notes along
   the way: "branding is huge", "cheesy marketing words", "childish";
   then "minimal, less pretentious, more mysterious"; then "the colours
   and look were better in the previous version" and "do we need that
   intro at all?". So: the editorial look of the second cut — hairlines,
   a label column, left-aligned type, the navy button — carrying the
   third cut's content, minus any introduction. The page opens on the
   product. Nothing animates; there is no script at all.)

   THE PALETTE is the logo's own two colours and nothing else: the warm
   sand of the logo sheet (#DBD2CA, sampled off art-source/laserdive/)
   as the ground, its navy (#003465) as the ink — and, at the foot, the
   same navy as a solid band with the sand's tone as chalk on it. Quiet
   text on either ground is the ink at reduced opacity, so it stays the
   same hue rather than a grey picked from nowhere.

   THE TYPE: Kumbh Sans is the wordmark's twin (compared against the
   sheet glyph by glyph: single-storey a, round dot, flat terminals) and
   it sets the lockup, the navigation, the labels and the headings.
   Newsreader, a text serif, sets every line of prose — a company page
   reads like a document, not a poster. Both are served from /fonts/ so
   the site loads nothing from anybody else (netlify.toml, the headers).
   The app's own hand-lettering stack (--hand, the same system fonts the
   app uses) letters the product figure, because that figure is the
   product as it draws itself.

   THE LAYOUT is one editorial grid: a label column on the left, the
   content on the right, a hairline between sections; one column on a
   phone.

   WHERE THINGS ARE: the type, the tokens, the frame, the header, the
   sections (the product, then the band with the company and the
   footer), then the paper pages (privacy, terms) and the 404.
   ============================================================ */

/* ------------------------------------------------------------ the type
   Two families, three files, ~145 KB in all. Downloaded from Google
   Fonts on 5 Sep 2026 (latin subsets only — the site is in English) and
   used under the SIL Open Font Licence. The unicode-range lines are
   Google's own, kept so a glyph outside latin falls to the system stack
   rather than to a missing box. */

@font-face {
  font-family: 'Kumbh Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/kumbh-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/newsreader-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ tokens */

:root {
  --sand: #DBD2CA;                    /* the logo sheet's ground */
  --sand-hi: #E7E1DA;                 /* the button's lettering on navy */
  --navy: #003465;                    /* the logo's ink; the band's ground */
  --navy-hi: #0E4A82;                 /* the button, hovered */
  --ink-2: rgba(0, 52, 101, .74);     /* quieter text on sand */
  --ink-3: rgba(0, 52, 101, .30);     /* hairlines on sand */
  --chalk: #EFE9E1;                   /* text on navy */
  --chalk-2: rgba(239, 233, 225, .68);
  --chalk-3: rgba(239, 233, 225, .30);

  --display: "Kumbh Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --hand: "Marker Felt", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;

  --col: 68rem;
  --gutter: clamp(20px, 5vw, 56px);

  /* the scale: fluid between a 390px phone and a wide desk */
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-lead: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-body: clamp(1.0625rem, 1.05vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-label: .75rem;
}

/* ------------------------------------------------------------ the frame */

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

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--navy);
  font: 400 var(--fs-body) / 1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

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

p { margin: 0 0 1.1em; max-width: 60ch; }

/* ------------------------------------------------------------ the header
   The lockup, top left, the size of a line of text; the way around the
   page on the right; a hairline under both. */

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .9rem 2rem;
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink-3);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--navy);
  font: 800 1.1875rem / 1 var(--display);
  letter-spacing: -.012em;
}
.lockup svg { width: 14px; height: auto; }

.top nav { display: flex; gap: 1.6rem; font: 500 .9375rem / 1 var(--display); }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover, .top nav a[aria-current] { color: var(--navy); }

/* ------------------------------------------------------------ the sections
   A label column and a content column, a hairline above each except the
   first, which sits under the header's own. */

.section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 3rem;
  padding-top: clamp(40px, 7vh, 96px);
  padding-bottom: clamp(48px, 8vh, 104px);
  border-top: 1px solid var(--ink-3);
}
main > .section:first-child { border-top: 0; }
@media (min-width: 900px) {
  .section { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
}

.label {
  font: 500 var(--fs-label) / 1.4 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: .3em 0 0;
}

/* The product's name is the front page's one h1 — there is nothing above
   it — and the band's heading is an h2; both take the same setting. */
.section h1, .section h2 {
  font: 700 var(--fs-h2) / 1.1 var(--display);
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.section .lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  max-width: 40ch;
  margin-bottom: 1em;
}
.section p { color: var(--ink-2); }
.section .lead, .section h1, .section h2 { color: var(--navy); }

/* the product: its name and a line, one link, and the phone
   On a phone the link comes last, under the picture; on a desk the text
   and the link sit on the left and the phone on the right. */

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem 3rem;
}
.product-grid .visit { align-self: start; }
@media (min-width: 760px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto 1fr;
    align-items: start;
    row-gap: 1.8rem;
  }
  .product-grid .text { grid-area: 1 / 1; }
  .product-grid .visit { grid-area: 2 / 1; }
  .product-grid .device { grid-area: 1 / 2 / 3 / 3; }
}

.visit {
  display: inline-block;
  justify-self: start;
  font: 600 .9375rem / 1 var(--display);
  letter-spacing: .005em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--ink-3);
  padding-bottom: 3px;
  transition: border-color .2s ease;
}
.visit:hover { border-color: var(--navy); }

/* THE PHONE — the map as the application draws it, on a phone. The frame
   is CSS: a dark body, a rounded screen in the app's own page colour
   (#E9DFC4, mockups/app/app.css --page), and a small pill at the top. The
   screen shows one SVG in an 880 x 1900 frame: the app's torn parchment,
   lengthened by stretching only its plain middle so both torn edges stay
   as drawn, and the trip lettered in the app's own hand. No photograph on
   it is anybody's: the polaroid holds a drawn view. */

.device {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0;
  aspect-ratio: 9 / 19.3;
  border-radius: 44px;
  background: #15171C;
  box-shadow: 0 26px 44px rgba(0, 26, 56, .20), 0 2px 6px rgba(0, 26, 56, .14);
}
.device::before {
  /* the pill at the top of the screen */
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  border-radius: 12px;
  background: #15171C;
  z-index: 1;
}
/* The screen is pinned to the frame's edges rather than given a height of
   its own: iPhone Safari let a percentage height run past the frame
   (5 Sep 2026, his screenshot), and an inset cannot. */
.device .screen {
  position: absolute;
  inset: 10px;
  border-radius: 34px;
  overflow: hidden;
  background: #E9DFC4;
}
.device .pc {
  position: absolute;
  left: 2%;
  top: 1.5%;
  width: 96%;
  height: auto;
}
@media (max-width: 759px) {
  .device { max-width: 270px; margin: 4px auto 0; }
}

.pc text { font-family: var(--hand); font-size: 30px; fill: #6B5E40; }
.pc .pc-title { font-size: 46px; fill: #2B2A26; }
.pc .pc-cap { font-size: 22px; fill: #4A3F26; }
.pc .pc-road { fill: none; stroke: #6B5C38; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 13; }
.pc .pc-spur { fill: none; stroke: #B5342A; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 10; }
.pc .pc-x { stroke: #5E5BD6; stroke-width: 8; stroke-linecap: round; }
.pc .pc-town { fill: #F6E9CB; stroke: #6B5C38; stroke-width: 4; }

/* ------------------------------------------------------------ the band
   The company and the footer, on the logo's navy. */

.band {
  background: var(--navy);
  color: var(--chalk);
  margin-top: clamp(24px, 4vh, 48px);
}
.band .section { border-top: 0; padding-top: clamp(48px, 8vh, 96px); }
.band .label { color: var(--chalk-2); }
.band .section h2 { color: var(--chalk); font-size: clamp(1.35rem, 2vw, 1.65rem); }
.band .section p { color: var(--chalk-2); }
.band .section h2 { margin-bottom: 1.1rem; }

.mail {
  display: inline-block;
  font: 600 clamp(1.15rem, 2vw, 1.5rem) / 1.2 var(--display);
  letter-spacing: -.01em;
  color: var(--chalk);
  text-decoration: none;
  border-bottom: 2px solid var(--chalk-3);
  padding-bottom: .1em;
  overflow-wrap: anywhere;
  transition: border-color .2s ease;
}
.mail:hover { border-color: var(--chalk); }
.band .office {
  font-size: var(--fs-small);
  line-height: 1.65;
  max-width: 44ch;
  margin: 1.3rem 0 0;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  border-top: 1px solid var(--chalk-3);
  padding-top: 24px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  font: 500 .8125rem / 1.6 var(--display);
  color: var(--chalk-2);
}
.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot a { color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--chalk-3); }
.foot a:hover { border-color: var(--chalk); }

/* ------------------------------------------------------------ the paper pages
   Privacy and Terms: the same sand and ink, one readable column. */

.paper { background: var(--sand); color: var(--navy); }

.doc {
  max-width: calc(66ch + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) var(--gutter) clamp(56px, 10vh, 120px);
}
.doc h1 {
  font: 700 clamp(1.75rem, 3.6vw, 2.5rem) / 1.1 var(--display);
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.doc .version {
  font: 500 var(--fs-label) / 1.5 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 2.4rem;
}
.doc h2 {
  font: 700 clamp(1.1rem, 1.8vw, 1.3rem) / 1.25 var(--display);
  letter-spacing: -.01em;
  margin: 2.4rem 0 .7rem;
}
.doc p { max-width: none; }
.doc ul { padding-left: 1.15rem; margin: 0 0 1.1em; }
.doc li { margin: .45em 0; }
.doc a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.doc .summary {
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--ink-3);
  padding: 1.2rem 0 .4rem;
  margin: 0 0 1.5rem;
}
.doc .summary h2 {
  margin-top: 0;
  font: 500 var(--fs-label) / 1.4 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.doc .colophon {
  color: var(--ink-2);
  font-size: var(--fs-small);
  border-top: 1px solid var(--ink-3);
  padding-top: 1.2rem;
  margin: 2.6rem 0 0;
}

.doc-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.6rem;
  border-top: 1px solid var(--ink-3);
  padding-top: 20px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  font: 500 .8125rem / 1.6 var(--display);
  color: var(--ink-2);
}
.doc-foot a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--ink-3); }

/* ------------------------------------------------------------ the 404 */

.lost .doc { min-height: 60vh; }
.lost h1 { font: 700 clamp(1.6rem, 3.2vw, 2.25rem) / 1.15 var(--display); letter-spacing: -.02em; margin: 0 0 .6em; }
.lost p { color: var(--ink-2); max-width: 44ch; }
.lost .doc a { color: var(--navy); }