/* ==========================================================================
   Red Light Lab

   Two ideas carry the design.

   1. Colour comes from emission. The reds and ambers are roughly what those
      wavelengths look like; near-infrared has no colour because you cannot
      see it, so it is drawn as an outline wherever it appears.
   2. Money has its own colour. The teal is for cost, calculators and totals,
      so the reader always knows whether they are looking at light or at
      pounds. A site about red light that is only red reads as a mood board.
   ========================================================================== */

:root {
  --paper:      #FFFDF8;
  --paper-2:    #FFF4EC;
  --ink:        #1A1210;
  --ink-2:      #6B5E58;
  --rule:       #E6DED6;

  --red:        #E8112D;   /* 660nm, the brand */
  --red-deep:   #8E0016;
  --amber:      #FF9E00;   /* 580nm */
  --nir:        #4A3F5C;   /* 850nm - invisible, so always an outline */
  --teal:       #00A67E;   /* money */
  --teal-deep:  #00694F;

  --measure: 36rem;
  --display: "Fraunces", Georgia, serif;
  --body: "Public Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip { position: absolute; left: -9999px; background: var(--ink);
  color: var(--paper); padding: .6rem 1rem; z-index: 20; }
.skip:focus { left: 1rem; top: 1rem; }

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

/* --------------------------------------------------------------- masthead */

.masthead {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
/* A thin emission strip under the header - the spectrum, used as trim. */
.masthead::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg,
    var(--nir) 0%, var(--red-deep) 18%, var(--red) 42%,
    var(--amber) 68%, var(--teal) 100%);
}

.masthead__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.5rem; padding-block: 1rem;
}

.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--paper);
  font-family: var(--display);
  font-weight: 900; font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.logo em { font-style: normal; color: var(--red); }

/* Mark: solid 660nm dot, dashed 850nm ring. Same idea as the spectrum. */
.logo__mark {
  width: 1.65rem; height: .8rem; flex: none; position: relative;
}
.logo__mark::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: .8rem; height: .8rem; border-radius: 50%;
  transform: translateY(-50%); background: var(--red);
  box-shadow: 0 0 12px 1px rgba(232,17,45,.75);
}
.logo__mark::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: .7rem; height: .7rem; border-radius: 50%;
  transform: translateY(-50%);
  border: 1.5px dashed rgba(255,253,248,.6);
}

.nav {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-left: auto;
  font-size: .875rem; font-weight: 500;
}
.nav a {
  color: rgba(255,253,248,.72); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--paper); border-bottom-color: rgba(255,253,248,.35); }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--red); }

/* ------------------------------------------------------------------- hero */

.hero {
  background:
    radial-gradient(120% 140% at 8% -20%, rgba(232,17,45,.16) 0%, transparent 58%),
    radial-gradient(90% 120% at 96% 0%, rgba(255,158,0,.14) 0%, transparent 55%),
    var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding-block: 3.25rem 2.75rem;
}

.hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.15rem, 7.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
  max-width: 17ch;
  text-wrap: balance;
}

.standfirst {
  font-size: clamp(1.0625rem, 2.6vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
  max-width: 40rem;
}

.stamps {
  font-family: var(--mono);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 1.5rem 0 0;
}

/* ------------------------------------------------------------------ prose */

main { padding-block: 3rem 4.5rem; }

.prose { max-width: var(--measure); }
.prose > * { max-width: var(--measure); }
.prose > .costbar, .prose > .calc, .prose > .spectrum,
.prose > .table-scroll, .prose > .cards { max-width: none; }

.prose h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 3.25rem 0 1rem;
  text-wrap: balance;
}
/* Section markers: a short red rule, not a number. Nothing here is a sequence. */
.prose h2::before {
  content: ""; display: block;
  width: 2.5rem; height: 4px;
  background: var(--red);
  margin-bottom: .85rem;
}

.prose h3 {
  font-family: var(--body);
  font-weight: 700; font-size: 1.125rem;
  letter-spacing: -0.008em;
  margin: 2.25rem 0 .5rem;
}

.prose p { margin: 0 0 1.2rem; }

.prose a {
  color: var(--red-deep);
  font-weight: 500;
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
  text-decoration-color: rgba(232,17,45,.4);
}
.prose a:hover { color: var(--red); text-decoration-color: var(--red); }

.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--red); font-weight: 700; }

.prose strong { font-weight: 700; }

.prose blockquote {
  margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 4px solid var(--amber);
  color: var(--ink-2);
}

.prose code {
  font-family: var(--mono); font-size: .875em;
  background: var(--paper-2); padding: .12em .38em;
  border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* ------------------------------------------------------------------ table */

.prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .9375rem; }
.prose th {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-align: left; color: var(--ink-2);
  padding: .55rem .7rem .55rem 0;
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
}
.prose td { padding: .7rem .7rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose td:first-child { font-weight: 700; }
.prose tbody tr:hover { background: var(--paper-2); }

.table-scroll { overflow-x: auto; margin: 1.75rem 0; }
.table-scroll table { margin: 0; min-width: 32rem; }

/* --------------------------------------------------------------- cost bar */
/* The signature. A stacked bar of what you actually pay, where the device is
   only the first segment. The whole thesis of the site in one graphic. */

.costbar, .calc__out { margin: 2rem 0 2.5rem; }

.cb__bar {
  display: flex; width: 100%; height: 3.25rem;
  border-radius: 6px; overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 1px 0 rgba(26,18,16,.08);
}

.cb__seg { width: var(--w); min-width: 2px; transition: width .18s ease; }
.cb__seg--goods { background: var(--ink); }
.cb__seg--ship  { background: var(--nir); }
.cb__seg--duty  { background: var(--amber); }
.cb__seg--vat   { background: var(--red); }
.cb__seg--fee   { background: var(--teal); }

.cb__keys {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-size: .8125rem;
}
.cb__key { margin: 0; display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); }
.cb__key b { color: var(--ink); font-family: var(--mono); font-size: .8125rem; }
.cb__dot { width: .7rem; height: .7rem; border-radius: 2px; flex: none; }
.cb__dot--goods { background: var(--ink); }
.cb__dot--ship  { background: var(--nir); }
.cb__dot--duty  { background: var(--amber); }
.cb__dot--vat   { background: var(--red); }
.cb__dot--fee   { background: var(--teal); }

.costbar figcaption {
  margin-top: .9rem; font-size: .9375rem; color: var(--ink-2);
  padding-top: .9rem; border-top: 1px solid var(--rule);
}
.costbar figcaption b { color: var(--ink); }

/* ------------------------------------------------------------- calculator */

.calc {
  margin: 2.5rem 0 3rem;
  padding: 1.5rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--teal);
}

.calc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .9rem;
}

.calc__f { display: flex; flex-direction: column; gap: .35rem; }
.calc__f > span {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}

.calc__in {
  display: flex; align-items: center; gap: .3rem;
  border: 1.5px solid var(--rule); border-radius: 6px;
  padding: .45rem .6rem; background: var(--paper);
}
.calc__in:focus-within { border-color: var(--ink); background: #fff; }
.calc__in b { font-family: var(--mono); color: var(--ink-2); font-size: .875rem; }
.calc__in input {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--ink);
  min-width: 0;
}

.calc__total {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem;
  margin: 1.25rem 0 0; padding-top: 1rem;
  border-top: 2px solid var(--ink);
}
.calc__total span { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.calc__total b {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
}

.calc__delta {
  margin: .5rem 0 0; font-weight: 700; color: var(--red-deep);
  font-size: .9375rem;
}

.calc__note {
  margin: 1.25rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--ink-2);
}

/* --------------------------------------------------------------- spectrum */

.spectrum { margin: 2.25rem 0 2.5rem; }
.spectrum__rail { position: relative; height: 4.75rem; border-bottom: 2px solid var(--ink); }
.spectrum__visible {
  position: absolute; left: 0; bottom: 0;
  width: 70.2%; height: .5rem;
  background: linear-gradient(90deg,
    #5b2ec8 0%, #1f7fe0 22%, #22a54a 42%, #ff9e00 63%, #f0243c 82%, #8E0016 100%);
}
.wl {
  position: absolute; left: var(--pos); bottom: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.wl::after { content: ""; width: .6rem; height: 1.9rem; background: var(--wl-colour, var(--red)); }
.wl--nir::after { background: none; border: 2px dashed var(--nir); }
.wl__label { font-family: var(--mono); font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.wl__label abbr { font-weight: 500; color: var(--ink-2); text-decoration: none; }
.wl--nir .wl__label { color: var(--nir); }
.spectrum figcaption {
  margin-top: 1rem; font-size: .875rem; line-height: 1.55; color: var(--ink-2);
  max-width: 34rem;
}

/* -------------------------------------------------------------------- buy */

.buy {
  margin: 2rem 0; padding: 1.15rem 1.25rem;
  background: var(--ink); color: var(--paper);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: .45rem;
}
.buy__link {
  font-family: var(--display); font-weight: 900;
  font-size: 1.1875rem; letter-spacing: -0.02em;
  color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .5rem;
}
.buy__link:hover { color: #fff; }
.buy__link:hover .buy__arrow { transform: translateX(4px); }
.buy__arrow { color: var(--red); transition: transform .16s ease; }
.buy__meta { font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; color: rgba(255,253,248,.6); }
.buy--missing {
  display: block; padding: .8rem 1rem; background: #FFF3CD;
  border-left: 4px solid var(--amber); font-family: var(--mono); font-size: .8125rem;
}

/* ------------------------------------------------------------------- note */

.note {
  margin: 2rem 0; padding: 1.1rem 1.25rem;
  background: var(--paper-2);
  border-left: 4px solid var(--nir);
  border-radius: 0 6px 6px 0;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-2);
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }
.note--money { border-left-color: var(--teal); }
.note--warn  { border-left-color: var(--amber); }

/* ------------------------------------------------------------------ cards */

.cards {
  list-style: none; margin: 2rem 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.cards li {
  margin: 0; padding: 1.25rem;
  background: #fff; border: 1.5px solid var(--rule); border-radius: 8px;
}
.cards li:hover { border-color: var(--ink); }
.cards a { font-family: var(--display); font-weight: 900; font-size: 1.0625rem;
  letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.cards a:hover { color: var(--red); }
.cards p { margin: .45rem 0 0; font-size: .875rem; color: var(--ink-2); line-height: 1.5; }

/* ----------------------------------------------------------------- footer */

.footer {
  background: var(--ink); color: rgba(255,253,248,.66);
  padding-block: 2.5rem 3.5rem; font-size: .8125rem;
}
.footer__note { max-width: 42rem; margin: 0 0 1.25rem; line-height: 1.6; }
.footer__nav { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.footer__nav a { color: var(--paper); font-weight: 700; text-decoration: none; }
.footer__nav a:hover { color: var(--red); }
.footer__legal { margin: 0; font-size: .75rem; color: rgba(255,253,248,.45); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 36rem) {
  .nav { margin-left: 0; width: 100%; gap: 1rem; font-size: .8125rem; }
  .hero { padding-block: 2.25rem 2rem; }
  .calc { padding: 1.15rem; box-shadow: 4px 4px 0 var(--teal); }
  .cb__bar { height: 2.75rem; }
  .spectrum__rail { height: 4.25rem; }
  .wl__label { font-size: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}