/* ── Lighting Lab · About ─────────────────────────────────────────────────────
   Deliberately NOT ../css/style.css. That file is tuned for a fixed-viewport
   app shell — html,body{height:100%;overflow:hidden}, a flex #layout that fills
   the screen, a sidebar that becomes a drawer made of document flow. All of it
   is wrong for a page whose whole job is to scroll.

   What IS shared is the vocabulary: the same four brand values, the same
   Montserrat stack with the same fallbacks, the same orange corner-bracket
   "focus frame" on the actions, the same blue letterspaced eyebrow over a
   section, the same #0D0D0D card on #090909 hairlined in #1c1c1e. Copied, not
   imported, so this page cannot break when the app's layout changes.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --nr-black: #090909;
  --nr-blue: #1A6EE8;
  --bright-blue: #4A93F0;
  --pale-blue: #A9CBF5;
  --deep-blue: #1257C4;
  --nr-orange: #FF6D00;
  --amber: #FFAB00;
  --gray: #C8C8C8;
  --card: #0D0D0D;
  --line: #1c1c1e;
  --dim: #8A9099;
  --measure: 68ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--nr-orange); color: #090909; }

html {
  background: var(--nr-black);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  background: var(--nr-black);
  color: var(--gray);
  /* Same stack, same reasoning as the app: Montserrat arrives late and
     non-render-blocking, so these fallbacks are what is actually read first. */
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bright-blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid var(--nr-orange);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--nr-blue); color: #fff;
  padding: 12px 18px; z-index: 100;
  font-weight: 700; font-size: 12px; letter-spacing: 0.16em;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(9, 9, 9, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 58px;
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.brand img { width: 34px; height: 34px; flex-shrink: 0; }
.brand-name { display: block; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.22em; }
.brand-sub { display: block; color: var(--bright-blue); font-weight: 600; font-size: 8px; letter-spacing: 0.26em; margin-top: 2px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--pale-blue);
  background: #10161f;
  border: 1px solid #1a2c48;
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── the focus-frame motif: orange corner brackets on every action ───────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  font-family: inherit; font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-decoration: none; white-space: nowrap;
  border: none; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--nr-blue); color: #fff; }
.btn-primary:hover { background: var(--bright-blue); color: #fff; }
.btn-primary:active { background: var(--deep-blue); }
.btn-ghost {
  background: transparent; color: var(--pale-blue);
  border: 1px solid #24476f;
}
.btn-ghost:hover { background: #10233a; color: #fff; border-color: var(--nr-blue); }
.fb {
  position: absolute; width: 7px; height: 7px;
  border-color: var(--nr-orange); border-style: solid;
  transition: all 0.15s;
}
.fb.tl { top: -4px; left: -4px; border-width: 2px 0 0 2px; }
.fb.tr { top: -4px; right: -4px; border-width: 2px 2px 0 0; }
.fb.bl { bottom: -4px; left: -4px; border-width: 0 0 2px 2px; }
.fb.br { bottom: -4px; right: -4px; border-width: 0 2px 2px 0; }
.btn-primary:hover .fb.tl { top: -6px; left: -6px; }
.btn-primary:hover .fb.tr { top: -6px; right: -6px; }
.btn-primary:hover .fb.bl { bottom: -6px; left: -6px; }
.btn-primary:hover .fb.br { bottom: -6px; right: -6px; }

/* ── vertical rhythm ─────────────────────────────────────────────────────── */
section { padding: 64px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: none; }

/* --bright-blue rather than --nr-blue, and only here. NR Blue is a 3.8:1 text
   colour on #090909 — fine for the app's 10px panel titles inside a tool you
   are looking AT, not good enough for a document someone is reading. It still
   leads the page everywhere it is a surface rather than type: the buttons, the
   formula slab's edge, the licence panel's border. */
.eyebrow {
  color: var(--bright-blue);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ''; display: inline-block;
  width: 16px; height: 2px; background: var(--nr-orange);
  vertical-align: middle; margin-right: 10px;
}

h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(30px, 6.2vw, 52px);
  line-height: 1.08; letter-spacing: 0.01em;
  margin-bottom: 18px;
}
h2 {
  color: #fff; font-weight: 800;
  font-size: clamp(21px, 3.6vw, 30px);
  line-height: 1.22; letter-spacing: 0.01em;
  margin-bottom: 18px;
  max-width: 22ch;
}
h3 {
  color: #fff; font-weight: 700;
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 8px;
}
/* The tour tiles, the hardware items and the limitation cards all sit directly
   under their section's h2, so they are h3 — the heading order has to be real,
   not a font size. These two rules take the small-caps treatment back off where
   the heading is a sentence rather than a label. */
.tour h3, .limit h3 {
  font-size: 13.5px; letter-spacing: 0.03em;
  text-transform: none;
  margin-bottom: 6px;
}
p { max-width: var(--measure); margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }
.lede {
  font-size: clamp(16.5px, 2.2vw, 19px);
  line-height: 1.62;
  color: #D8DADE;
  max-width: 60ch;
}
strong { color: #fff; font-weight: 700; }
em { color: var(--pale-blue); font-style: normal; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { padding-top: 56px; padding-bottom: 52px; }
.hero-kicker {
  color: var(--amber);
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  border: 1px solid #3a2c08; background: #14100a;
  border-radius: 3px; padding: 5px 11px;
  display: inline-block; margin-bottom: 22px;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px 16px;
  margin-top: 28px;
}
.hero-note {
  margin-top: 20px; font-size: 12.5px; color: var(--dim);
  letter-spacing: 0.04em; max-width: 56ch; line-height: 1.6;
}
.shot {
  margin-top: 40px;
  border: 1px solid var(--line);
  background: var(--card);
  position: relative;
}
.shot img { width: 100%; }
.shot figcaption {
  font-size: 11.5px; color: var(--dim); line-height: 1.55;
  padding: 11px 14px; border-top: 1px solid var(--line);
  letter-spacing: 0.03em;
}
/* the corner brackets again, this time framing an image */
.shot .fb { width: 12px; height: 12px; }

/* ── the formula slab ────────────────────────────────────────────────────── */
.formula {
  display: inline-block;
  margin: 6px 0 22px;
  padding: 14px 22px;
  background: #10161f;
  border: 1px solid #1a2c48;
  border-left: 3px solid var(--nr-blue);
  border-radius: 4px;
  color: var(--pale-blue);
  font-weight: 700; font-size: 17px; letter-spacing: 0.08em;
}
.formula span { color: var(--dim); font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; display: block; margin-top: 6px; }

/* ── cards ───────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; margin-top: 30px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 20px 20px 22px;
}
.card p { font-size: 14.5px; line-height: 1.65; max-width: none; }
.card + .card { margin-top: 0; }
.card-num {
  color: var(--nr-orange);
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em;
  margin-bottom: 10px;
}

/* the "what's in it" tour: denser, list-like */
.tour { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin-top: 28px; }
.tour > div { background: var(--card); padding: 18px 20px; }
.tour h3 { color: #fff; }
.tour p { font-size: 14px; line-height: 1.6; color: #A8ADB4; max-width: none; }
@media (min-width: 720px) { .tour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tour { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── plain fact lists ────────────────────────────────────────────────────── */
ul.facts { list-style: none; margin: 20px 0 0; max-width: var(--measure); }
ul.facts li {
  position: relative;
  padding-left: 22px; margin-bottom: 13px;
  font-size: 15px; line-height: 1.65;
}
ul.facts li::before {
  content: ''; position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  border: 2px solid var(--nr-blue);
  border-width: 2px 0 0 2px;
}
ul.facts li:last-child { margin-bottom: 0; }

/* ── the hardware section: its own weight ────────────────────────────────── */
/* The one section that gets warm light on it. Orange is the accent this brand
   punctuates with rather than fills with, so it is a 3px edge and a gradient
   that has faded out well before the text starts — enough to mark this as the
   argument that matters, not enough to become a colour block. */
.spec {
  border-left: 3px solid var(--nr-orange);
  background: linear-gradient(103deg, #13100B 0%, #0E0C0A 34%, #0A0A0B 68%);
}
.spec-list { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-item {
  background: var(--card); border: 1px solid var(--line);
  border-left: 2px solid var(--deep-blue);
  border-radius: 4px; padding: 18px 20px;
}
.spec-item h3 { letter-spacing: 0.09em; }
.spec-item p { font-size: 14px; line-height: 1.62; color: #A8ADB4; max-width: none; }

/* ── schools ─────────────────────────────────────────────────────────────── */
.school-band { background: #0B0B0C; }
.license {
  margin-top: 30px;
  background: var(--card);
  border: 1px solid #24476f;
  border-radius: 5px;
  padding: 26px 24px 28px;
}
.license h3 { color: #fff; }
.license ul.facts { margin-top: 16px; }
.license ul.facts li::before { border-color: var(--nr-orange); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 24px; }
.mail-plain {
  font-size: 13.5px; color: var(--gray); letter-spacing: 0.02em;
}
/* The address is written out as text because a mailto: is useless to someone
   reading on a machine with no mail client configured — they need to be able
   to copy it. It is also a link, and padding (not height) grows its hit box to
   44px without disturbing the line it sits in: vertical padding on an inline
   box does not affect line layout. */
.mail-plain a {
  color: var(--pale-blue);
  padding: 15px 6px;
  margin: 0 -2px;
}

/* ── limitations ─────────────────────────────────────────────────────────── */
.limits { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 760px) { .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.limit {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid #3a2c08;
  border-radius: 4px;
  padding: 17px 19px;
}
.limit h3 { color: var(--amber); font-size: 12.5px; letter-spacing: 0.06em; }
.limit p { font-size: 13.8px; line-height: 1.62; color: #A0A5AC; max-width: none; }

/* ── closing CTA + footer ────────────────────────────────────────────────── */
.close { text-align: center; }
.close h2 { margin-left: auto; margin-right: auto; max-width: 18ch; }
.close p { margin-left: auto; margin-right: auto; }
.close .hero-actions { justify-content: center; }

footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 44px;
}
.foot-in { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: baseline; }
.foot-line { font-size: 10px; letter-spacing: 0.12em; color: #868C94; font-weight: 500; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-links a {
  font-size: 10.5px; letter-spacing: 0.14em; font-weight: 700;
  color: var(--dim); text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.foot-links a:hover { color: #fff; }

/* ── phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 18px; }
  section { padding: 44px 0; }
  .hero { padding-top: 36px; padding-bottom: 38px; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
  .brand-name { font-size: 11px; letter-spacing: 0.14em; }
  .brand img { width: 30px; height: 30px; }
  .top .btn { padding: 0 14px; font-size: 10px; letter-spacing: 0.1em; }
  .hero-actions .btn { width: 100%; }
  .formula { font-size: 15px; padding: 12px 16px; display: block; }
  .license { padding: 22px 18px 24px; }
  .contact-actions .btn { width: 100%; }
  h2 { max-width: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT
   ─────────────────────────────────────────────────────────────────────────────
   Measured before this block existed: nine pages of #C8C8C8 body text on white
   — about 1.7:1 on paper — with the section rules invisible, every card border
   gone, both screenshots at full page width, headings stranded at the foot of
   pages, and every link printed as unmarked text so a reader had no way to
   reach anything it pointed at.

   The page is worth printing (a department head reads the licensing section on
   paper, a teacher hands round the limitations list), so unlike the app this
   one gets real print styling rather than a redirect to another format.

   The three rules that do the most work:
     • colours are re-stated, not tinted. Every text colour here is a fresh
       value on white, because "backgrounds off" only removes the BACKGROUND —
       #C8C8C8 text stays #C8C8C8 and lands on paper at 1.7:1.
     • `break-after: avoid` on every heading and `break-inside: avoid` on every
        card, so nothing is orphaned from what it introduces.
     • link URLs are printed after the link text, because a printed page has no
       hover and no click. Internal anchors (#schools) and the mailto: are
       excluded — the first is meaningless on paper and the second already
       prints its own address in the copy beside it.
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  html { background: #fff; }
  body {
    background: #fff;
    color: #1a1a1a;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* Chrome-only navigation and decoration. The sticky header would repeat on
     every sheet; the corner brackets are a hover motif; the two big CTA
     buttons are things to press. */
  .top, .skip, .hero-actions, .contact-actions .btn, .close, .fb { display: none !important; }

  .wrap { max-width: none; padding: 0; }
  section {
    padding: 0 0 20pt;
    border-top: none;
    /* A rule instead of the screen's hairline — 1px of #1c1c1e prints as
       nothing at all with backgrounds off. */
    border-bottom: 0.5pt solid #bbb;
    margin-bottom: 20pt;
    break-inside: auto;
  }
  section:last-of-type { border-bottom: none; }
  .spec, .school-band { background: none; border-left: none; }

  h1, h2, h3, .eyebrow {
    break-after: avoid; page-break-after: avoid;
    color: #000;
  }
  /* Four card variants set `color: #fff` on their own h3 at (0,1,1), which
     outranks the bare `h3` above no matter how late it appears. Restate them
     at the same specificity or they print white on white — measured at 1:1. */
  .tour h3, .license h3, .spec-item h3, .card h3, .limit h3 { color: #000; }
  /* Inline code: pale blue on a near-black slab is 1.67:1 once the slab is
     gone. Ink on paper, with the panel it lived in redrawn as a hairline. */
  code {
    color: #111; background: none;
    border: 0.5pt solid #bbb; padding: 0 3pt;
  }
  h1 { font-size: 24pt; line-height: 1.15; margin-bottom: 10pt; }
  h2 { font-size: 15pt; line-height: 1.25; margin-bottom: 9pt; max-width: none; }
  h3 { font-size: 11pt; margin-bottom: 5pt; }
  .eyebrow {
    color: #444; font-size: 8.5pt; letter-spacing: 0.18em; margin-bottom: 7pt;
  }
  .eyebrow::before { background: #666; width: 12px; }

  p, li { orphans: 3; widows: 3; }
  p { max-width: none; margin-bottom: 8pt; color: #1a1a1a; }
  .lede { font-size: 12pt; line-height: 1.5; color: #000; max-width: none; }
  .hero { padding-top: 0; }
  .hero-kicker {
    color: #333; border: 0.5pt solid #999; background: none;
    font-size: 8pt; padding: 2pt 6pt; margin-bottom: 10pt;
  }
  .hero-note { color: #444; font-size: 9pt; max-width: none; margin-top: 8pt; }
  strong { color: #000; }
  em { color: #1a1a1a; font-style: italic; }

  /* Both screenshots are dark-UI JPEGs; full width they eat a page each and
     print as a grey slab. Half width, and never split across a break. */
  .shot {
    margin-top: 14pt; border: 0.5pt solid #999; background: none;
    max-width: 4.4in;
    break-inside: avoid; page-break-inside: avoid;
  }
  .shot figcaption { color: #333; font-size: 8.5pt; border-top: 0.5pt solid #ccc; padding: 6pt 8pt; }

  .formula {
    background: none; border: 0.5pt solid #999; border-left: 2pt solid #444;
    color: #000; font-size: 13pt; padding: 8pt 12pt; margin: 4pt 0 12pt;
    break-inside: avoid;
  }
  .formula span { color: #444; }

  /* Every panel on the page is a bordered card on screen and a run of naked
     paragraphs on paper unless the border is restated in points. */
  .card, .spec-item, .limit, .license, .tour > div {
    background: none;
    border: 0.5pt solid #bbb;
    border-left: 1.5pt solid #666;
    padding: 9pt 11pt;
    break-inside: avoid; page-break-inside: avoid;
  }
  .card p, .spec-item p, .limit p, .tour p { color: #1a1a1a; font-size: 10pt; }
  .card-num { color: #666; }
  .tour {
    display: block; background: none; border: none; border-radius: 0;
    overflow: visible; margin-top: 12pt;
  }
  .tour > div { margin-bottom: 6pt; }
  .tour h3 { color: #000; }
  .grid.two, .grid.three, .spec-list, .limits { display: block; }
  .card + .card, .spec-item, .limit { margin-top: 6pt; }

  ul.facts { max-width: none; margin-top: 10pt; }
  /* break-inside as well as orphans/widows: these list items are two and three
     lines each and a page boundary landing inside one leaves a bold lead-in
     ("Real grid behaviour.") alone at the foot of a sheet. */
  ul.facts li {
    font-size: 10pt; margin-bottom: 6pt; color: #1a1a1a;
    break-inside: avoid; page-break-inside: avoid;
  }
  ul.facts li::before { border-color: #666; }
  .license ul.facts li::before { border-color: #666; }

  .mail-plain { color: #1a1a1a; font-size: 10pt; }
  .mail-plain a { color: #000; padding: 0; margin: 0; }

  footer { border-top: 0.5pt solid #bbb; padding: 10pt 0 0; break-inside: avoid; }
  .foot-in { display: block; }
  .foot-line, .foot-links a { color: #444; font-size: 8.5pt; }
  .foot-links { display: block; margin-top: 4pt; }

  a { color: #000; text-decoration: underline; }
  /* The URL, once, after the link — but only for links that go somewhere a
     reader could type. :not() on the three that do not. */
  a[href^="http"]::after,
  a[href^="../"]::after,
  a[href^="/"]::after {
    content: ' <' attr(href) '>';
    font-size: 8.5pt; font-weight: 400; letter-spacing: 0;
    color: #444; text-decoration: none;
  }
  a[href^="../"]::after { content: ' <lightinglab.nathanielrohr.com/>'; }
  a[href^="#"]::after, a[href^="mailto:"]::after { content: none; }

  @page { margin: 0.75in 0.7in; }
}