/* Doonvarra Head Observatory. Night path.
   Six colours and two faces, then the page's own classes. */
:root {
  --sc-canvas:     #05070c;
  --sc-surface:    #0c111b;
  --sc-ink:        #ece7e0;
  --sc-ink-soft:   #aab0c0;
  --sc-accent:     #ff6b57;
  --sc-accent-ink: #1b0703;
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 224 50% 2%;
  --laser: #7dffa8;
  --bar-h: 4.25rem;
}

@media (max-width: 700px) {
  :root { --bar-h: 3.75rem; }
}

html { background: var(--sc-canvas); }

/* ------------------------------------------------------------ chrome -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--bar-h);
  padding-inline: var(--sc-gutter);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 62%,
    transparent 100%);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark {
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -0.01em; text-decoration: none; line-height: 1.1;
}
.bar__mark { background: var(--sc-canvas); padding: 0.4rem 0.7rem; margin-left: -0.7rem; border-radius: var(--sc-r-sm); }
.bar__mark span { font-weight: 400; color: var(--sc-ink-soft); background: var(--sc-canvas); }
@media (max-width: 520px) { .bar__mark span { display: block; font-size: 0.78rem; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.3rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border: 0; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 82%, #fff); }
}
.btn--bar { min-height: 2.5rem; padding: 0 1.05rem; font-size: 0.92rem; }
.btn--lg { min-height: 3.25rem; padding: 0 1.8rem; font-size: 1.08rem; }

/* The path: nine low red lights, lit as you walk past them. */
.path {
  position: fixed; z-index: var(--sc-z-chrome);
  left: clamp(8px, 1.5vw, 24px); top: 50%; translate: 0 -50%;
}
.path ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.path ol::before {
  content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px;
  background: var(--sc-hairline-strong);
}
.path a { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; }
.path a::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--sc-canvas);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 45%, transparent);
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.path a.is-past::before { background: color-mix(in oklab, var(--sc-accent) 62%, var(--sc-canvas)); border-color: transparent; }
.path a.is-now::before {
  inset: 8px; background: var(--sc-accent); border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 28%, transparent);
}
.path a::after {
  content: attr(data-label);
  position: absolute; left: 34px; top: 50%; translate: 0 -50%;
  padding: 0.3rem 0.65rem; border-radius: var(--sc-r-sm);
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong);
  font-size: 0.8rem; line-height: 1.2; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms var(--sc-ease-out);
}
.path a:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .path a:hover::after { opacity: 1; }
}
@media (max-width: 860px) {
  .path { left: 50%; top: auto; bottom: 4px; translate: -50% 0; }
  .path ol { flex-direction: row; }
  .path ol::before { left: 12px; right: 12px; top: 50%; bottom: auto; width: auto; height: 1px; }
  .path a { width: 28px; height: 28px; }
  .path a::before { inset: 10px; }
  .path a.is-now::before { inset: 9px; }
  .path a::after { display: none; }
}

/* ------------------------------------------------------------- sky ---- */
canvas.sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.sky--masked {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 66%);
          mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 66%);
}

.stage { display: grid; }
.stage--night {
  background: linear-gradient(to bottom, #030509 0%, #060a13 60%, #0a101b 100%);
  grid-template-rows: auto 1fr auto;
  padding: var(--bar-h) var(--sc-gutter) clamp(3.6rem, 13vh, 8rem);
}

/* Stacked display lines: one grid cell, each line replaced in place. */
.lines { display: grid; grid-row: 3; align-self: end; max-width: 46rem; position: relative; z-index: var(--sc-z-copy); }
.lines > * { grid-area: 1 / 1; align-self: end; margin: 0; }
.line {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.8rem, 1.1rem + 3vw, 3.6rem);
  line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance;
}
.line--quote { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.2rem); }
.line--quote p { margin: 0; font: inherit; letter-spacing: inherit; text-wrap: balance; }
.line--quote .line__by {
  margin-top: 1rem; font-family: var(--sc-font-text); font-weight: 500;
  font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft);
}

/* ------------------------------------------------------------ hero ---- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  overflow: clip;
  background: var(--sc-canvas);
}
.hero__plane { position: absolute; left: 0; right: 0; will-change: transform; }
.hero__plane--sky { top: -15svh; bottom: 0; z-index: 0; }
.hero__plane--land { bottom: 0; height: 66%; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%); }
.hero__plane--land img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero__plane--fore { bottom: -56px; height: 230px; z-index: 2; pointer-events: none; }
.hero__plane--fore img { width: 100%; height: 100%; max-width: none; }
.hero .sky {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 62%);
}
.hero__copy {
  position: absolute; z-index: 3;
  left: var(--sc-gutter); right: var(--sc-gutter);
  bottom: clamp(3.4rem, 10svh, 7rem);
  max-width: 60rem;
}
.hero__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.6rem, 1.1rem + 6vw, 6.2rem);
  line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance;
}
.hero__sub { margin: 1.25rem 0 1.75rem !important; max-width: 34rem; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
@media (max-width: 700px) {
  .hero__copy { bottom: 3.6rem; }
  .hero__sub { font-size: 1.05rem; margin: 1rem 0 1.35rem !important; }
}

/* ------------------------------------------------------------ orla ---- */
.orla { background: transparent; }
.orla__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.orla__fig { margin: 0; border-radius: var(--sc-r-sm); overflow: hidden; background: var(--sc-surface); }
.orla__fig img { width: 100%; height: auto; }
.pull { margin: 0; }
.pull p {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance;
}
.pull footer { margin-top: 1rem; font-size: 0.95rem; color: var(--sc-ink-soft); }
.meter { margin-top: var(--sc-7) !important; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(1rem, 3vw, 2rem); align-items: baseline; }
.meter__n { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(3.4rem, 2rem + 5vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.meter__l { margin: 0; max-width: 34rem; color: var(--sc-ink-soft); text-wrap: pretty; }
@media (max-width: 860px) {
  .orla__grid { grid-template-columns: minmax(0, 1fr); }
  .orla__fig { max-width: 30rem; }
}
@media (max-width: 520px) {
  .meter { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

/* ------------------------------------------------------- the peak ----- */
.sky-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.js .sky-fallback { display: none; }

.laser { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.laser__beam { opacity: 0; }
.laser line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.laser__glow { stroke: var(--laser); stroke-width: 6; opacity: 0.12; }
.laser__core { stroke: var(--laser); stroke-width: 1.6; opacity: 0.9; }
.spot {
  position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, var(--laser) 0 22%, color-mix(in oklab, var(--laser) 34%, transparent) 46%, transparent 72%);
  opacity: 0; pointer-events: none;
}
.veil {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: rgba(255, 246, 232, 0.2); opacity: 0;
  transition: opacity 500ms var(--sc-ease-out);
}
.stage--peak.is-torch .veil { opacity: 1; }

.hudrow {
  grid-row: 1; position: relative; z-index: 6;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem;
  padding-top: 0.75rem;
}
.hud {
  background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  padding: 0.7rem 1rem 0.8rem; max-width: 16.5rem;
}
.hud__clock { margin: 0; font-family: var(--sc-font-display); font-weight: 600; line-height: 1; display: flex; align-items: baseline; gap: 0.4rem; }
.hud__min { font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; min-width: 1.7ch; text-align: right; }
.hud__unit { font-size: 1.05rem; color: var(--sc-ink-soft); font-weight: 500; }
.hud__cap { margin: 0.5rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--sc-ink-soft); }
.torchbox { max-width: 18rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.torch {
  min-height: 2.5rem; padding: 0 1rem;
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  font-size: 0.9rem; font-weight: 500; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.torch:active { transform: translateY(1px) scale(0.97); }
.torch:disabled { opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .torch:hover:not(:disabled) { border-color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-surface) 80%, var(--sc-ink)); }
}
.torch__note {
  margin: 0; padding: 0.7rem 0.9rem; background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-sm); font-size: 0.85rem; line-height: 1.45; color: var(--sc-ink);
}
.torch__note[hidden] { display: none; }
@media (max-width: 700px) {
  .hud { max-width: 12rem; padding: 0.55rem 0.8rem 0.65rem; }
  .hud__cap { font-size: 0.74rem; }
  .torchbox { max-width: 11.5rem; }
  .torch { min-height: 2.6rem; font-size: 0.85rem; padding: 0 0.75rem; }
  .torch__note { font-size: 0.78rem; }
}

/* --------------------------------------------------------- your eye --- */
.eye { padding-block: var(--sc-section) 0; background: transparent; }
.eye__head { padding-bottom: var(--sc-7); }
.eye__after { padding-block: var(--sc-7) var(--sc-section); }
.eye__after .sc-lede { max-width: 40rem; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); }
.compare { margin: 0; }
.compare__frame {
  position: relative; width: 100%; height: clamp(22rem, 62vw, 50rem); overflow: hidden; background: #020306;
}
.compare__frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 42% 50%; }
.compare__edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px; z-index: 2;
  background: color-mix(in oklab, var(--sc-ink) 70%, transparent);
  opacity: 0; will-change: transform;
}
.js .compare__edge { opacity: 1; }
.compare__caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6) clamp(2rem, 6vw, 6rem); padding-top: var(--sc-6); }
.compare__caps h3 { margin: 0 0 0.5rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; }
.compare__caps p { margin: 0; color: var(--sc-ink-soft); text-wrap: pretty; max-width: 34rem; }
@media (max-width: 700px) {
  .compare__frame { height: min(34rem, 82svh); }
  .compare__caps { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ telescopes ---- */
.stage--rail, .skyrail .stage { display: block; }
.rail {
  width: max-content; min-width: 100%;
  height: 100%; align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 3.4rem;
}
.rail > * { flex: 0 0 auto; }
.rail__lead { width: clamp(18rem, 30vw, 27rem); }
.rail__lead .sc-display { margin-bottom: 0.75rem; }
.pic { margin: 0; }
.pic img { width: auto; height: min(62svh, 34rem); max-width: none; border-radius: var(--sc-r-sm); object-fit: cover; }
.pic--square img { aspect-ratio: 1 / 1; height: min(50svh, 26rem); }
.pic--tall img { aspect-ratio: 2 / 3; }
.pic figcaption, .fig figcaption { margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.45; color: var(--sc-ink-soft); max-width: 24rem; }
.plate { width: clamp(15.5rem, 21vw, 19rem); min-height: 13rem; padding-top: 1.1rem; border-top: 1px solid var(--sc-hairline-strong); }
.plate h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.12; letter-spacing: -0.02em; }
.plate p { margin: 0.6rem 0 0; color: var(--sc-ink-soft); text-wrap: pretty; }
.plate .plate__when { margin-top: 0.45rem; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-accent); }
.rail__saturn { display: flex; flex-direction: column; gap: 1.25rem; width: clamp(15.5rem, 21vw, 19rem); }
.eyepiece { margin: 0; width: clamp(13rem, 19vw, 17rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; }
.eyepiece img { width: 100%; height: 100%; object-fit: cover; }
.rail__note { width: clamp(17rem, 22vw, 21rem); }
.rail__note .sc-lede { font-size: 1.25rem; }
@media (max-width: 700px) {
  .rail { gap: 1.25rem; padding-top: calc(var(--bar-h) + 0.5rem); padding-bottom: 3.6rem; }
  .rail__lead { width: min(78vw, 21rem); }
  .pic img { height: min(52svh, 26rem); }
  .plate, .rail__saturn { width: min(66vw, 17rem); }
  .eyepiece { width: min(52vw, 13rem); }
  .rail__note { width: min(72vw, 19rem); }
}

/* ------------------------------------------------------------ cloud --- */
.stage--cloud { background: #0a0d14; grid-template-rows: auto 1fr auto; padding: var(--bar-h) var(--sc-gutter) clamp(3.6rem, 13vh, 8rem); }
.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.stage--cloud .sc-scrim { background: linear-gradient(to top,
    color-mix(in oklab, #05070c 96%, transparent) 0%,
    color-mix(in oklab, #05070c 86%, transparent) 26%,
    color-mix(in oklab, #05070c 40%, transparent) 50%,
    transparent 70%); }
.cap { margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--sc-ink); }
.cap--top { grid-row: 1; position: relative; z-index: 4; justify-self: start; padding: 0.4rem 0.75rem; background: color-mix(in oklab, #05070c 86%, transparent); border-radius: var(--sc-r-sm); margin-top: 0.75rem; }
.lines--cloud { max-width: 56rem; }
.lines--cloud .line { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.1rem); }
.lines--peak { max-width: 52rem; }
.lines--peak .line { font-size: clamp(1.65rem, 1.05rem + 2.3vw, 3.1rem); }

/* ------------------------------------------------------------ facts --- */
.facts { background: transparent; }
.facts__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ledger { margin: var(--sc-7) 0 0; display: block; }
.row { display: grid; grid-template-columns: minmax(8.5rem, 12rem) minmax(0, 1fr); gap: 0.25rem clamp(1.25rem, 3vw, 2.5rem); padding: 1.2rem 0; border-top: 1px solid var(--sc-hairline-strong); }
.row:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.row dt { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; }
.row dd { margin: 0; color: var(--sc-ink-soft); text-wrap: pretty; max-width: 40rem; }
.facts__figs { display: grid; gap: var(--sc-6); position: sticky; top: calc(var(--bar-h) + 1rem); }
.fig { margin: 0; }
.fig img { width: 100%; height: auto; border-radius: var(--sc-r-sm); }
@media (max-width: 980px) {
  .facts__grid { grid-template-columns: minmax(0, 1fr); }
  .facts__figs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .facts__figs { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ close --- */
/* The photograph holds while the last words scroll over it, so the final
   screen is the lawn, the sky and the one action together. */
.close { position: relative; isolation: isolate; overflow: clip; background: var(--sc-canvas); }
.close__bg {
  position: sticky; top: 0; z-index: -1;
  height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
  overflow: hidden;
}
.close__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 52%, transparent) 50%,
    transparent 70%);
}
.close__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 12%; }
.close__inner { position: relative; padding-top: 50vh; padding-top: 50svh; padding-bottom: var(--sc-7); }
.close__inner .sc-lede { max-width: 36rem; }
.close__inner .btn { margin-top: var(--sc-5); }
.booking { position: relative; margin-top: var(--sc-4); padding-block: var(--sc-5) var(--sc-4); scroll-margin-top: 6rem; }
.booking:focus { outline: none; }
.booking h3 { margin: 0 0 0.6rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; }
.booking p { margin: 0.4rem 0 0; max-width: 40rem; color: var(--sc-ink-soft); }
.booking p:first-of-type { color: var(--sc-ink); }
.mail { color: var(--sc-ink); font-weight: 500; user-select: all; }
.foot { position: relative; padding-block: var(--sc-4) calc(var(--sc-5) + 2.4rem); }
.foot p { margin: 0; font-size: 0.85rem; color: var(--sc-ink-soft); max-width: 46rem; }
.foot .foot__cap { margin-bottom: 0.4rem; }
@media (max-width: 700px) {
  .close__inner { padding-top: 34vh; padding-top: 34svh; }
}

/* Without scripting the rail wraps as a column of items that must fit the screen. */
@media (scripting: none) {
  .rail { width: auto; min-width: 0; height: auto; padding-bottom: var(--sc-7); }
  .rail > * { max-width: 100%; }
  .pic img, .eyepiece { max-width: 100%; height: auto; }
}