/* faroleta.com: the one-pager and the privacy notice. Fonts are self-hosted (no third-party requests) and the
   site runs no scripts: the hero's before/after switch is two radio buttons and the --lit property below. */
@font-face {
  font-family: 'Besley';
  src: url('/fonts/besley.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* 0 = lights off (a listing as it is found), 1 = lights on (looked after). Everything in the hero's example
   is drawn from this one number, so the switch and the page-load "dawn" animate the same way. */
@property --lit {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

:root {
  --dusk: #1a2747;
  --dusk-deep: #111a33;
  --dusk-line: #34457a;
  --lamp: #ffbe3d;
  --lamp-hi: #ffd277;
  --lamp-glow: 255 190 61;
  --glass: #fff6dd;
  --day: #f4f6fa;
  --day-2: #e8ecf4;
  --ink: #141c33;
  --ink-soft: #4a5472;
  --rule: #d3d9e7;
  --link: #25419f;
  --on-dusk: #f3efe3;
  --on-dusk-soft: #c4cde6;
  --focus: #25419f;
  --display: 'Besley', Rockwell, 'Roboto Slab', Georgia, serif;
  --sans: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--day);
  color: var(--ink);
  font: 400 1.125rem/1.62 var(--sans);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.dusk :focus-visible,
.hero :focus-visible {
  outline-color: var(--lamp);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 20;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  background: var(--lamp);
  color: var(--dusk-deep);
  font-weight: 700;
}
.skip:focus {
  top: 0.75rem;
}

.wrap {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}
@media (min-width: 40rem) {
  .wrap {
    width: min(100% - 3rem, 72rem);
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border-radius: 0.8rem;
  background: var(--lamp);
  color: var(--dusk-deep);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.25s ease;
}
.btn:hover {
  background: var(--lamp-hi);
  box-shadow: 0 0 1.75rem rgb(var(--lamp-glow) / 0.5);
}
.btn-ghost-ink {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px rgb(20 28 51 / 0.4);
}
.btn-ghost-ink:hover {
  background: rgb(20 28 51 / 0.06);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn-small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: 1rem;
}

/* ---------- header ---------- */
.top {
  background: var(--dusk);
  color: var(--on-dusk);
}
.top .wrap {
  width: min(100% - 3rem, 100rem);
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-dusk);
  font: 700 1.55rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand svg {
  width: 2rem;
  height: 2.8rem;
}
.top nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2rem);
}
.top nav a:not(.btn) {
  display: none;
  color: var(--on-dusk-soft);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
}
.top nav a:not(.btn):hover {
  color: var(--on-dusk);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
@media (min-width: 46rem) {
  .top nav a:not(.btn) {
    display: inline;
  }
}

/* ---------- hero: a lighthouse that turns its light onto the business ---------- */
/* The hero fills the window below the header. --lit runs 0 to 1 and drives everything. At 0 the lighthouse shines
   its light away, to the left and down toward the sea, and the three panels are as the business is found. Raising
   it swings the beam in front of the lighthouse and round to the right, always tilted down toward the sea (never
   overhead), where it rests on the panels and lights them left to right as it reaches them (a panel's own --pl runs
   over the last part of --lit). Lowering it swings the beam back. */
.hero {
  --lit: 1;
  --t: 0.5;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
  color: var(--on-dusk);
  background: linear-gradient(180deg, var(--dusk) 0, var(--dusk) 12%, #1d3060 44%, #2b4a86 66%, #36568f 78%);
  transition: --lit 3.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: dawn 4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
}
.hero:has(#light-before:checked) {
  --lit: 0;
}
@keyframes dawn {
  from {
    --lit: 0;
  }
}
.stars {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 62%;
  fill: var(--on-dusk);
  mask-image: linear-gradient(#000 35%, transparent);
  pointer-events: none;
}
.state {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* the stage: lighthouse and three panels, scaled together by whichever is smaller, the width or the height of the window */
.hero .wrap {
  width: min(100% - 3rem, 100rem);
}
.stage-box {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.stage {
  --u: clamp(11px, min(calc(100cqw / 77.5), calc((100svh - 6.5rem) / 47)), 26px);
  --wa: calc(15.8 * var(--u));
  --wb: calc(17 * var(--u));
  --wc: calc(22.5 * var(--u));
  --lh-left: calc(50% - 50cqw);
  --lamp-x: 8em;
  --lamp-b: 37.9em;
  --tilt: 22deg;
  --th0: 158deg;
  --th1: 22deg;
  position: relative;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 16em 15.8em 17em 22.5em;
  grid-template-rows: auto 1fr;
  column-gap: 1.75em;
  align-items: end;
  min-height: calc(48 * var(--u));
  padding: 1.5em 0 6em;
  font-size: var(--u);
}
.hero h1 {
  z-index: 5;
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: start;
  max-width: 17em;
  /* tucked in beside the lantern, so the headline reads as part of the lighthouse and not a separate block */
  translate: calc(-5 * var(--u)) 0;
  font-size: clamp(2.2rem, 3.4em, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--lamp);
}

/* the scene fills the window across, behind the stage: sky, sea, lighthouse and beam */
.scene {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 100vw;
  translate: -50% 0;
  pointer-events: none;
}
.horizon-glow {
  position: absolute;
  inset: auto 0 -7em;
  height: 30em;
  background: radial-gradient(
    46em 15em at 18% 52%,
    rgb(255 150 70 / calc(0.08 + 0.14 * var(--lit))),
    transparent 70%
  );
}
.sea {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}
.wave {
  position: absolute;
  left: 0;
  /* twice the width of the sea, so the drift never uncovers an edge; the base svg rule would cap it at 100% */
  width: 200%;
  max-width: none;
}
.w1 {
  bottom: -3.3em;
  height: 18em;
  fill: #2b4580;
}
.w2 {
  bottom: -5.8em;
  height: 18em;
  fill: #223a70;
}
.w3 {
  bottom: -8.8em;
  height: 18em;
  fill: #192b58;
}
.w4 {
  bottom: -19.8em;
  height: 28em;
  fill: #101e44;
}
@media (prefers-reduced-motion: no-preference) {
  .wave {
    animation: drift 64s linear infinite;
  }
  .w2 {
    animation-duration: 50s;
    animation-direction: reverse;
  }
  .w3 {
    animation-duration: 40s;
  }
  .w4 {
    animation-duration: 31s;
    animation-direction: reverse;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ripples ellipse {
    transform-box: fill-box;
    transform-origin: center;
    animation: ripple 9s ease-in-out infinite;
  }
  .ripples ellipse:nth-child(2) {
    animation-delay: -3s;
  }
  .ripples ellipse:nth-child(3) {
    animation-delay: -6s;
  }
}
@keyframes ripple {
  0%,
  100% {
    transform: scale(1);
    stroke-opacity: 0.6;
  }
  50% {
    transform: scale(1.07);
    stroke-opacity: 1;
  }
}
@keyframes drift {
  to {
    transform: translateX(-50%);
  }
}
.lh {
  position: absolute;
  left: var(--lh-left);
  bottom: 4em;
  width: 16em;
  height: auto;
  max-width: none;
  overflow: visible;
}
/* a bloom at the lamp when the beam faces the viewer, halfway through the swing */
.flare {
  position: absolute;
  left: calc(var(--lh-left) + var(--lamp-x) - 6.5em);
  bottom: calc(var(--lamp-b) - 6.5em);
  width: 13em;
  height: 13em;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 246 205 / 0.85), rgb(255 190 61 / 0.3) 38%, transparent 70%);
  opacity: calc(4 * var(--lit) * (1 - var(--lit)));
  mix-blend-mode: screen;
}

/* the beam: a soft wedge from the lamp. Its angle is the screen angle of a beam that always tilts down toward the sea
   and turns round the lighthouse: --th0 (left and down) to --th1 (right and down), through straight down at the
   middle, where it points at the viewer: shortest and widest (length scale sin(tilt) / sin(angle), width grows as it shortens). */
.beam {
  --th: calc(var(--th0) + (var(--th1) - var(--th0)) * var(--lit));
  position: absolute;
  left: calc(var(--lh-left) + var(--lamp-x));
  bottom: calc(var(--lamp-b) - 28em);
  width: 96em;
  height: 56em;
  max-width: none;
  transform-origin: 0 50%;
  rotate: var(--th);
  scale: calc(sin(var(--tilt)) / sin(var(--th))) calc(1 + (1 - sin(var(--tilt)) / sin(var(--th))) * 1.3);
  opacity: calc(0.8 + 0.2 * var(--lit));
  background: radial-gradient(
    circle farthest-side at 0 50%,
    transparent 0,
    rgb(255 246 205 / 0.95) 2.4%,
    rgb(255 219 135 / 0.6) 9%,
    rgb(255 190 61 / 0.22) 42%,
    rgb(255 190 61 / 0)
  );
  -webkit-mask-image: conic-gradient(
    from 76deg at 0 50%,
    transparent 0deg,
    rgb(0 0 0 / 0.12) 4deg,
    rgb(0 0 0 / 0.3) 8deg,
    rgb(0 0 0 / 0.62) 11deg,
    #000 14deg,
    rgb(0 0 0 / 0.62) 17deg,
    rgb(0 0 0 / 0.3) 20deg,
    rgb(0 0 0 / 0.12) 24deg,
    transparent 28deg
  );
  mask-image: conic-gradient(
    from 76deg at 0 50%,
    transparent 0deg,
    rgb(0 0 0 / 0.12) 4deg,
    rgb(0 0 0 / 0.3) 8deg,
    rgb(0 0 0 / 0.62) 11deg,
    #000 14deg,
    rgb(0 0 0 / 0.62) 17deg,
    rgb(0 0 0 / 0.3) 20deg,
    rgb(0 0 0 / 0.12) 24deg,
    transparent 28deg
  );
  mix-blend-mode: screen;
  pointer-events: none;
}
.beam-top {
  left: var(--lamp-x);
  z-index: 3;
  opacity: calc((0.8 + 0.2 * var(--lit)) * 0.85);
  /* over the panels the light tints what it falls on instead of glowing, so text keeps its contrast */
  mix-blend-mode: multiply;
  background: radial-gradient(
    circle farthest-side at 0 50%,
    transparent 0,
    rgb(255 214 130) 2.4%,
    rgb(255 224 150 / 0.85) 10%,
    rgb(255 238 190 / 0.45) 45%,
    rgb(255 255 255 / 0)
  );
}

/* the panels */
.panel {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.8em;
  align-self: end;
  margin: 0;
}
.panel figcaption {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--on-dusk);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.panel.a {
  grid-column: 2;
  grid-row: 2;
  --pl: clamp(0, calc((var(--lit) - 0.62) / 0.16), 1);
}
.panel.b {
  grid-column: 3;
  grid-row: 2;
  --pl: clamp(0, calc((var(--lit) - 0.76) / 0.14), 1);
}
.panel.c {
  grid-column: 4;
  grid-row: 2;
  --pl: clamp(0, calc((var(--lit) - 0.86) / 0.14), 1);
}
/* Each field switches at its own point on its panel's 0 to 1 scale, so a panel fills in one field at a time
   and a field never shows both versions at once. */
.pair {
  display: grid;
}
.pair > * {
  grid-area: 1 / 1;
}
.pair > .off {
  opacity: clamp(0, calc((var(--t) - var(--pl)) * 4), 1);
}
.pair > .on {
  opacity: clamp(0, calc((var(--pl) - var(--t)) * 4), 1);
}
.t1 {
  --t: 0.3;
}
.t2 {
  --t: 0.4;
}
.t3 {
  --t: 0.48;
}
.t4 {
  --t: 0.56;
}
.t5 {
  --t: 0.64;
}
.t6 {
  --t: 0.72;
}
.t-count {
  --t: 0.18;
}
.t-url {
  --t: 0.2;
}
.r1 {
  --t: 0.22;
}
.r2 {
  --t: 0.28;
}
.r3 {
  --t: 0.34;
}
.r4 {
  --t: 0.4;
}
.r5 {
  --t: 0.46;
}
.r6 {
  --t: 0.52;
}
.r7 {
  --t: 0.58;
}
.r8 {
  --t: 0.64;
}
.r9 {
  --t: 0.7;
}
.r10 {
  --t: 0.75;
}

/* panel a: the listing on a phone */
.phone {
  position: relative;
  width: var(--wa);
  font-size: calc(var(--wa) / 21.5);
  padding: 0.55em;
  border-radius: 2.7em;
  background: #0b1126;
  box-shadow:
    0 0 0 0.12em #2b3866,
    0 2.4em 4em -1em rgb(0 0 0 / 0.55),
    0 0 4em rgb(var(--lamp-glow) / calc(0.28 * var(--pl)));
  color: #1b2238;
  font-family: var(--sans);
  line-height: 1.3;
  user-select: none;
}
.screen {
  position: relative;
  height: 39.4em;
  overflow: hidden;
  border-radius: 2.15em;
  background: #fff;
  filter: brightness(calc(0.58 + 0.42 * var(--pl))) saturate(calc(0.3 + 0.7 * var(--pl)));
}
.screen::after {
  /* a soft fade where the sheet carries on below the screen */
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 4em;
  background: linear-gradient(to bottom, transparent, #fff 85%);
  pointer-events: none;
}
.map {
  height: 6.2em;
  background: #dfeee6;
}
.map svg {
  width: 100%;
  height: 100%;
}
.sheet {
  position: relative;
  margin-top: -1.3em;
  padding: 0.7em 1.25em 0;
  border-radius: 1.5em 1.5em 0 0;
  background: #fff;
}
.grab {
  width: 3em;
  height: 0.3em;
  margin: 0 auto 0.8em;
  border-radius: 1em;
  background: #d5d9e6;
}
.biz {
  font: 700 1.45em/1.15 var(--sans);
  letter-spacing: -0.01em;
  margin: 0;
}
.meta {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.3em;
  font-size: 0.82em;
  color: #596079;
}
.meta b {
  color: #1b2238;
}
.star {
  width: 0.95em;
  height: 0.95em;
  fill: #f0a30a;
}
.pair {
  --t: 0.5;
  display: grid;
}
.pair > * {
  grid-area: 1 / 1;
}
/* Each field switches at its own point on the 0 to 1 scale, so the example fills in one field at a time on
   the way up (hours, contact, photos, then the replies) and a field never shows both versions at once. */
.status {
  margin-top: 0.45em;
  font-size: 0.88em;
  font-weight: 600;
}
.status .off {
  color: #9a5a00;
}
.status .on {
  color: #596079;
  font-weight: 400;
}
.status .on b {
  color: #137a46;
  font-weight: 700;
}
.actions {
  display: flex;
  gap: 0.55em;
  margin-top: 0.9em;
}
.act {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.2em;
  padding: 0.4em 0 0.36em;
  border-radius: 0.8em;
  background: #eef2fb;
  color: #25419f;
  font-size: 0.74em;
  font-weight: 700;
}
.act svg {
  width: 1.7em;
  height: 1.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.act.needs {
  opacity: calc(0.35 + 0.65 * var(--pl));
}
.facts {
  list-style: none;
  margin: 0.85em 0 0;
  padding: 0;
  font-size: 0.86em;
}
.facts li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  align-items: center;
  gap: 0.6em;
  padding: 0.38em 0;
  border-top: 1px solid #e7eaf3;
}
.facts svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: #25419f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.facts .off {
  color: #8a91a8;
}
.photos {
  margin-top: 0.6em;
  height: 2.8em;
}
.photos .off {
  display: grid;
  place-items: center;
  border: 0.12em dashed #c5cadb;
  border-radius: 0.8em;
  font-size: 0.8em;
  color: #8a91a8;
}
.photos .on {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.4em;
}
.photos i {
  border-radius: 0.7em;
  background: linear-gradient(140deg, #ffcf70, #e9803d);
}
.photos i:nth-child(2) {
  background: linear-gradient(140deg, #f7e3c4, #c99a66);
}
.photos i:nth-child(3) {
  background: linear-gradient(140deg, #bfd9c7, #5f9a78);
}
.reviews {
  list-style: none;
  margin: 0.8em 0 0;
  padding: 0;
  font-size: 0.8em;
}
.reviews li {
  padding: 0.6em 0;
  border-top: 1px solid #e7eaf3;
}
.who {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
}
.who .stars {
  display: flex;
  gap: 0.1em;
}
.who .star {
  width: 0.85em;
  height: 0.85em;
}
.who .star.dim {
  fill: #d5d9e6;
}
.said {
  margin-top: 0.15em;
  color: #3b4260;
}
.reply {
  margin-top: 0.4em;
  min-height: 3.1em;
}
.reply .on {
  padding: 0.5em 0.7em;
  border-radius: 0.7em;
  background: #fff3d6;
  color: #3b3220;
}
.reply .on b {
  display: block;
  font-size: 0.9em;
  color: #8a5a00;
}

/* panel b: where the business is shown */
.card {
  width: var(--wb);
  font-size: calc(var(--wb) / 19);
  padding: 1.1em 1.25em 0.5em;
  border-radius: 1.6em;
  background: #fff;
  color: #1b2238;
  font-family: var(--sans);
  line-height: 1.3;
  box-shadow:
    0 0 0 0.1em rgb(255 255 255 / 0.08),
    0 2.4em 4em -1em rgb(0 0 0 / 0.55),
    0 0 4em rgb(var(--lamp-glow) / calc(0.28 * var(--pl)));
  filter: brightness(calc(0.58 + 0.42 * var(--pl))) saturate(calc(0.3 + 0.7 * var(--pl)));
  user-select: none;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.55em;
}
.card-title {
  margin: 0;
  font: 700 1.25em/1.2 var(--sans);
}
.count {
  margin: 0;
  font-size: 0.88em;
  font-weight: 700;
  color: #596079;
}
.count .on {
  color: #137a46;
  text-align: right;
}
.count .off {
  text-align: right;
}
.places {
  list-style: none;
  margin: 0;
  padding: 0;
}
.places li {
  display: grid;
  grid-template-columns: 1em 1fr auto;
  align-items: center;
  gap: 0.65em;
  padding: 0.5em 0;
  border-top: 1px solid #e7eaf3;
  font-size: 0.88em;
}
.dot {
  --rl: clamp(0, calc((var(--pl) - var(--t)) * 4), 1);
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: color-mix(in srgb, #ffbe3d calc(var(--rl) * 100%), #c3c9da);
  box-shadow: 0 0 calc(var(--rl) * 1em) rgb(var(--lamp-glow) / calc(var(--rl) * 0.8));
}
.pname {
  font-weight: 600;
}
.chip {
  justify-self: end;
  font-size: 0.8em;
  font-weight: 700;
}
.chip > * {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3em;
  padding: 0.22em 0.7em;
  border-radius: 999px;
  white-space: nowrap;
}
.chip .off.none {
  color: #5d6479;
  background: #eef0f6;
}
.chip .off.warn {
  color: #8a5a00;
  background: #fff0cc;
}
.chip .on {
  color: #137a46;
  background: #e1f4e9;
}
.chip .ic,
.url .ic {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* panel c: the website in a browser window */
.browser {
  width: var(--wc);
  font-size: calc(var(--wc) / 26);
  overflow: hidden;
  border-radius: 1.1em;
  background: #fff;
  color: #1b2238;
  font-family: var(--sans);
  line-height: 1.3;
  box-shadow:
    0 0 0 0.1em rgb(255 255 255 / 0.08),
    0 2.4em 4em -1em rgb(0 0 0 / 0.55),
    0 0 4em rgb(var(--lamp-glow) / calc(0.28 * var(--pl)));
  filter: brightness(calc(0.62 + 0.38 * var(--pl))) saturate(calc(0.4 + 0.6 * var(--pl)));
  user-select: none;
}
.chrome {
  display: flex;
  align-items: center;
  gap: 0.9em;
  height: 2.7em;
  padding: 0 1em;
  background: #e9ecf4;
}
.lights {
  display: flex;
  gap: 0.4em;
}
.lights i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #c5cad8;
}
.url {
  flex: 1;
  height: 1.8em;
  padding: 0 0.9em;
  align-items: center;
  border-radius: 0.9em;
  background: #fff;
  font-size: 0.8em;
}
.url > * {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.url .off {
  color: #9a5a00;
}
.url .on {
  color: #137a46;
}
.page {
  position: relative;
  height: 18em;
  overflow: hidden;
}
.site-old,
.site-new {
  position: absolute;
  inset: 0;
}
.site-new {
  clip-path: inset(0 calc((1 - var(--pl)) * 100%) 0 0);
}
.scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pl) * 100%);
  width: 1.6em;
  translate: -100% 0;
  background: linear-gradient(90deg, transparent, rgb(255 219 135 / 0.9));
  opacity: calc(4 * var(--pl) * (1 - var(--pl)));
  pointer-events: none;
}
/* the old site: the kind that has not been touched in years */
.site-old {
  background: #d9d6c4;
  color: #000;
  font-family: 'Times New Roman', Times, serif;
}
.o-title {
  margin: 0;
  padding: 0.35em 0.6em;
  background: #000080;
  color: #fff;
  font-size: 1.25em;
  font-weight: 700;
}
.o-body {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 0.6em;
  padding: 0.5em;
}
.o-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78em;
}
.o-nav li {
  margin: 0.4em 0;
  color: #0000ee;
  text-decoration: underline;
}
.o-main {
  padding: 0.4em 0.6em;
  background: #fff;
  font-size: 0.78em;
}
.o-main p {
  margin: 0 0 0.35em;
}
.o-h {
  font-size: 1.3em;
  font-weight: 700;
}
.o-photo {
  display: grid;
  place-items: center;
  width: 9.5em;
  height: 4.4em;
  margin: 0.3em 0;
  border: 1px solid #888;
  background: #eee;
  color: #777;
}
.o-meta {
  color: #c00;
  font-size: 0.9em;
}
.o-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.3em 0.6em;
  background: #bfbcab;
  font-size: 0.72em;
}
/* the new one */
.site-new {
  background: #241610;
  color: #f7efe3;
  font-family: var(--sans);
}
.n-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.1em;
}
.n-brand {
  font: 700 1.2em/1 var(--display);
}
.n-links {
  font-size: 0.78em;
  color: #e4d3bc;
}
.n-links b {
  margin-left: 0.5em;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: var(--lamp);
  color: #241610;
}
.n-hero {
  position: relative;
  margin: 0 1.1em;
  padding: 1.5em 1.4em;
  border-radius: 1em;
  background: linear-gradient(120deg, #4a2f1f, #8a5a34 60%, #c8905c);
  overflow: hidden;
}
.n-h {
  margin: 0;
  font: 800 2.1em/1 var(--display);
}
.n-sub {
  margin: 0.5em 0 0.9em;
  font-size: 0.8em;
  color: #f3dfc4;
}
.n-cta {
  display: flex;
  gap: 0.6em;
  margin: 0;
  font-size: 0.78em;
  font-weight: 700;
}
.n-cta b {
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--lamp);
  color: #241610;
}
.n-cta span {
  padding: 0.5em 1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.12em rgb(255 246 230 / 0.7);
}
.n-cup {
  position: absolute;
  right: 1.4em;
  top: 50%;
  translate: 0 -50%;
  width: 5.2em;
  height: 5.2em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #6b4328 0 38%, #f3e6d2 40% 62%, #d9c3a3 64% 100%);
  box-shadow: 0 0.8em 1.6em -0.4em rgb(0 0 0 / 0.5);
}
.n-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em;
  padding: 0.8em 1.1em;
  font-size: 0.78em;
  font-weight: 700;
}
.n-tiles i {
  display: block;
  height: 3em;
  margin-bottom: 0.3em;
  border-radius: 0.6em;
  background: linear-gradient(140deg, #e9b36a, #a8663a);
}
.n-tiles span:nth-child(2) i {
  background: linear-gradient(140deg, #f3e2c4, #b88a5a);
}
.n-tiles span:nth-child(3) i {
  background: linear-gradient(140deg, #cfa3a0, #8a5a62);
}

/* the switch sits under the headline, above the website and to the right of the listing */
.controls {
  z-index: 6;
  grid-column: 4;
  grid-row: 2;
  align-self: start;
  justify-self: start;
}
.switch {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0.3rem;
  border: 0;
  border-radius: 999px;
  background: rgb(16 30 68 / 0.62);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  backdrop-filter: blur(6px);
}
.switch label {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  color: var(--on-dusk-soft);
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.state:checked + label {
  background: var(--lamp);
  color: var(--dusk-deep);
}
.state:focus-visible + label {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* narrower than a laptop: the lighthouse becomes a picture under the headline, with the switch under it, and the
   panels stack below */
@media (max-width: 63.999rem) {
  .hero {
    min-height: 0;
  }
  .stage {
    --u: 1rem;
    --wa: calc(18.5 * var(--u));
    --wb: calc(19 * var(--u));
    --wc: calc(22 * var(--u));
    --lh-left: 0px;
    --lamp-x: 4.2em;
    --lamp-b: 21.8em;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    align-items: start;
    row-gap: 2.2em;
    min-height: 0;
    padding: 1.25rem 0 3.5rem;
  }
  .hero h1 {
    order: 1;
    grid-column: 1;
    grid-row: auto;
    translate: none;
    max-width: none;
    font-size: clamp(2.2rem, 1rem + 4.4vw, 3.4rem);
  }
  .scene {
    order: 2;
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    height: 28em;
    translate: none;
    overflow: clip;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, #1a2747 0, #1d3060 45%, #2b4a86 75%, #36568f 100%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  }
  .horizon-glow {
    inset: auto 0 -3em;
  }
  .lh {
    bottom: 4em;
    width: 8.4em;
  }
  .stars {
    top: 24rem;
    height: 50%;
  }
  .controls {
    order: 3;
    position: sticky;
    top: 0.75rem;
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    justify-self: center;
  }
  .switch label {
    padding: 0 0.85rem;
    font-size: 0.95rem;
  }
  .panel.a,
  .panel.b,
  .panel.c {
    order: 4;
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }
  .beam-top {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
    transition: none;
  }
  .switch label {
    transition: none;
  }
}

/* ---------- the intro below the hero ---------- */
.intro {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.intro-grid {
  display: grid;
  gap: 1.75rem 4rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .intro-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  }
}
.intro-lede {
  max-width: 38rem;
  font: 700 clamp(1.45rem, 1rem + 1.4vw, 2.05rem) / 1.28 var(--display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.intro-actions {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.intro-note {
  max-width: 30rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- sections ---------- */
.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.section h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
}
.section .intro {
  margin-top: 1rem;
  max-width: 36rem;
  color: var(--ink-soft);
}

.lamps {
  display: grid;
  gap: 2.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 56rem) {
  .lamps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}
.lamps li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 1.25rem;
  align-content: start;
}
@media (min-width: 56rem) {
  .lamps li {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.lamps svg {
  width: 3.5rem;
  height: 3.5rem;
  filter: drop-shadow(0 0 1rem rgb(var(--lamp-glow) / 0.55));
}
.lamps h3 {
  font-size: 1.45rem;
}
.lamps p {
  margin-top: 0.6rem;
}
.lamps .fine {
  font-size: 1rem;
  color: var(--ink-soft);
}

.start {
  background: var(--day-2);
}
.start-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 56rem) {
  .start-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 5rem;
  }
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}
.steps li {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 40rem) {
  .steps li {
    grid-template-columns: 11rem 1fr;
  }
}
.steps b {
  font: 700 1.2rem/1.3 var(--display);
}

.dusk {
  background: var(--dusk);
  color: var(--on-dusk);
}
.emailed {
  padding-block: clamp(2rem, 5vw, 3rem);
}
.emailed .dusk {
  border-radius: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.75rem, 5vw, 4rem);
}
.emailed h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
}
.emailed .intro {
  margin-top: 0.9rem;
  color: var(--on-dusk-soft);
}
.qa {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 56rem) {
  .qa {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}
.qa h3 {
  font-size: 1.35rem;
  color: var(--lamp);
}
.qa p {
  margin-top: 0.6rem;
  color: var(--on-dusk);
}
.qa b {
  font-weight: 700;
}
.emailed .btn {
  margin-top: 2.5rem;
}

.about-grid {
  display: grid;
  gap: 1.5rem 5rem;
}
@media (min-width: 56rem) {
  .about-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}
.about p + p {
  margin-top: 1rem;
}
.about .btn {
  margin-top: 1.75rem;
}
.sign {
  margin-top: 1.5rem;
  font: 700 1.25rem/1.3 var(--display);
}
.sign span {
  display: block;
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink-soft);
}

/* ---------- footer ---------- */
.foot {
  background: var(--dusk-deep);
  color: var(--on-dusk-soft);
  font-size: 1rem;
}
.foot-grid {
  display: grid;
  gap: 1.5rem 3rem;
  padding-block: 2.5rem;
}
@media (min-width: 46rem) {
  .foot-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}
.foot .brand {
  font-size: 1.35rem;
  margin-bottom: 0.9rem;
}
.foot p {
  max-width: 34rem;
}
.foot .small-print {
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot a {
  color: var(--on-dusk);
}
.foot a:focus-visible {
  outline-color: var(--lamp);
}

/* ---------- privacy notice and other plain pages ---------- */
.doc {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3.5rem, 8vw, 6rem);
}
.doc .narrow {
  max-width: 44rem;
}
.doc h1 {
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.06;
}
.doc .updated {
  margin-top: 1rem;
  color: var(--ink-soft);
}
.doc h2 {
  margin-top: 2.75rem;
  font-size: 1.6rem;
}
.doc p {
  margin-top: 0.9rem;
}
.doc a {
  overflow-wrap: anywhere;
}
.doc .lead {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 404 ---------- */
.lost-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--dusk);
  color: var(--on-dusk);
  text-align: center;
}
.lost-page :focus-visible {
  outline-color: var(--lamp);
}
.lost-wrap {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  width: min(100% - 2rem, 32rem);
  padding-block: 3rem;
}
.lost-wrap h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
}
.lost-wrap p {
  color: var(--on-dusk-soft);
}
.lost-wrap .small {
  font-size: 1rem;
}
.lost-wrap .small a {
  color: var(--on-dusk);
}
.lighthouse-off {
  width: 5rem;
  height: 7rem;
  color: #8e9bc4;
}