/*
 * PlanWise — the landing page's only stylesheet, served from its own origin.
 *
 * The page explains one sequence — space, plan, object, availability, booking —
 * and everything drawn on it belongs to that sequence. So the rules below are
 * deliberately restrained: warm neutral ground, hairlines instead of boxes,
 * near-square corners, no shadows, no glows, no gradients, and green only
 * where it means something — an action, a selected object, an available
 * state, the route through the page.
 *
 * Constraints the page is served under:
 * - Its Content-Security-Policy allows styles, fonts and images from 'self'
 *   only. There are no inline styles and no scripts; motion is CSS, and the
 *   typeface is Inter, self-hosted under the SIL Open Font License
 *   (`fonts/inter-OFL.txt`).
 * - Visitors who ask for less motion get none, and every element's resting
 *   style is a meaningful still frame (lounger B13 shown selected).
 * - State is never carried by colour alone: occupied is hatched, unavailable
 *   is dashed, selected is filled and ringed.
 */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-5.3.0-latin-wght.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;
}

:root {
  color-scheme: light;

  /* Green, used sparingly: forest → dark emerald → emerald → sage. */
  --forest: #0b3b2c;
  --emerald-dark: #0f5c43;
  --emerald: #1a7f5a;
  --sage: #a7bfb1;
  --available: #e3f3ea;

  /* The neutral ground most of the page is made of. */
  --paper: #f7f5ef;
  --surface: #fcfbf8;
  --stone: #ecebe5;
  --graphite: #17201c;
  --ink: #1f2824;
  --muted: #56615b;
  --hairline: #dadcd4;
  --grid: rgb(23 32 28 / 3.5%);

  /* The one dark band. */
  --on-dark: #eef1ee;
  --on-dark-muted: #aab5ae;
  --on-dark-hairline: rgb(238 241 238 / 14%);

  --focus: #0b57d0;
  --measure: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --rail-offset: 1.75rem;

  --sans:
    'Inter Variable', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
    'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* The coordinate system under the page, barely there. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--graphite);
  font-weight: 600;
}

h1 {
  max-width: 20ch;
  font-size: clamp(2.125rem, 1.6vw + 1.5rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
}

h2 {
  max-width: 24ch;
  font-size: clamp(1.625rem, 1vw + 1.25rem, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.024em;
}

h3 {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.011em;
}

p {
  margin: 0;
}

a {
  color: var(--emerald-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  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: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--surface);
  color: var(--graphite);
}

.skip:focus {
  top: 1rem;
}

/* Compact, technical metadata: section numbers, plan labels, table heads. */
.label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--graphite);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.brand__mark {
  width: 1.25rem;
  height: 1.25rem;
}

.brand__cell {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.5;
}

.brand__cell--selected {
  fill: var(--emerald);
  stroke: var(--emerald);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.site-nav a {
  color: var(--muted);
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--graphite);
}

/* ── The route through the page ──────────────────────────────────────── */

.rail {
  position: relative;
}

.rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(calc(var(--gutter) / 2), calc((100% - var(--measure)) / 2 + var(--gutter) / 2));
  width: 1px;
  background: var(--hairline);
  pointer-events: none;
}

.section__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

/* A stop on the route: the square an object is drawn as. */
.section__label::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--emerald);
  background: var(--paper);
}

/* ── Actions ─────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color 150ms var(--ease);
}

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

.button--primary {
  background: var(--emerald-dark);
  color: #ffffff;
}

.button--primary:hover {
  background: var(--forest);
}

.link-arrow {
  color: var(--graphite);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
}

.link-arrow::after {
  content: ' →';
  color: var(--emerald);
}

.link-arrow:hover {
  text-decoration: underline;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 6vw, 5rem);
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

/* Content sits a step right of the rail, so the rail reads as a margin line. */
.hero__copy,
.section__head {
  padding-left: var(--rail-offset);
}

.lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.55;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
}

.status::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--emerald);
}

.hero__plan {
  margin: 0;
}

.plan {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--surface);
}

.plan__paper {
  fill: var(--surface);
}

.plan__grid-line {
  fill: none;
  stroke: rgb(23 32 28 / 6%);
  stroke-width: 1;
}

.plan__label {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.dimension__line,
.dimension__tick {
  stroke: var(--emerald);
  stroke-width: 1;
}

.zone {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.shore {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.25;
}

.hatch__ground {
  fill: var(--stone);
}

.hatch__line {
  stroke: var(--graphite);
  stroke-width: 1.4;
  opacity: 0.4;
}

.obj {
  stroke-width: 1.25;
}

.obj--available {
  fill: var(--available);
  stroke: var(--emerald);
}

.obj--occupied {
  fill: url(#hatch);
  stroke: var(--graphite);
  stroke-opacity: 0.65;
}

.obj--unavailable {
  fill: none;
  stroke: #8c9891;
  stroke-dasharray: 3 3;
}

/* Lounger B13's resting frame is "selected", the still a reduced-motion
   visitor sees. */
.obj--cycle {
  fill: var(--emerald);
  stroke: var(--forest);
}

.target__ring {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 1;
}

.target__label {
  fill: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.node {
  fill: var(--surface);
  stroke: var(--emerald);
  stroke-width: 1.25;
}

.node--small {
  fill: var(--emerald);
  stroke: none;
}

.route {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 1.25;
}

.card__body {
  fill: #ffffff;
  stroke: var(--hairline);
}

.card__eyebrow {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.card__title {
  fill: var(--graphite);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card__meta {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
}

.card__divider {
  stroke: var(--hairline);
}

.card__dot {
  fill: var(--emerald);
}

.card__status {
  fill: var(--graphite);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 550;
  opacity: 0;
}

.card__status--selected {
  opacity: 1;
}

.card__check {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.card__confirmed {
  opacity: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.swatch {
  display: inline-block;
  width: 14px;
  height: 9px;
  border-radius: 2px;
  border: 1.25px solid var(--emerald);
}

.swatch--available {
  background: var(--available);
}

.swatch--selected {
  background: var(--emerald);
  border-color: var(--forest);
}

.swatch--occupied {
  border-color: rgb(23 32 28 / 65%);
  background: repeating-linear-gradient(45deg, var(--stone) 0 2px, rgb(23 32 28 / 40%) 2px 3px);
}

.swatch--unavailable {
  border: 1.25px dashed #8c9891;
  background: transparent;
}

/* ── Sections: one continuous page, divided by hairlines ─────────────── */

.section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  border-top: 1px solid var(--hairline);
}

.section__intro {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* The sequence: one drawing, five states of the same place. The drawing only
   illustrates the steps listed under it, so a phone gets the list alone
   rather than a drawing too small to read or a strip it has to scroll. */

.sequence__diagram-scroll {
  display: none;
  margin-top: 3rem;
  padding-left: var(--rail-offset);
}

.sequence__diagram {
  display: block;
  width: 100%;
  height: auto;
}

.seq__site {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.25;
}

.seq__water {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.25;
}

.seq__zone {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.seq__grid {
  stroke: rgb(23 32 28 / 10%);
  stroke-width: 1;
}

.seq__dim {
  stroke: var(--emerald);
  stroke-width: 1;
}

.seq__obj {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 1.25;
}

.seq__obj--available {
  fill: var(--available);
}

.seq__obj--occupied {
  fill: url(#hatch);
  stroke: var(--graphite);
  stroke-opacity: 0.6;
}

.seq__obj--unavailable {
  stroke: #8c9891;
  stroke-dasharray: 3 3;
}

.seq__obj--selected {
  fill: var(--emerald);
  stroke: var(--forest);
}

.seq__ring {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 1;
}

.seq__card {
  fill: #ffffff;
  stroke: var(--hairline);
}

.seq__check {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seq__route {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 1.25;
}

.seq__baseline {
  stroke: var(--hairline);
  stroke-width: 1;
}

.seq__node {
  fill: var(--paper);
  stroke: var(--emerald);
  stroke-width: 1.25;
}

.seq__node--last {
  fill: var(--emerald);
}

.sequence {
  display: grid;
  gap: 2rem;
  margin: 1.5rem 0 0;
  padding: 0 0 0 var(--rail-offset);
  list-style: none;
}

.sequence__step h3 {
  margin-top: 0.4rem;
}

.sequence__step p {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Spaces: information, set as a table. */

.spaces {
  width: 100%;
  margin-top: 2.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.spaces th,
.spaces td {
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.spaces thead th {
  padding-top: 0;
  padding-bottom: 0.75rem;
  border-bottom-color: var(--graphite);
}

.spaces tbody th {
  width: 30%;
  color: var(--graphite);
  font-weight: 600;
}

.spaces td {
  color: var(--muted);
}

.spaces td:last-child {
  padding-right: 0;
}

/* Platform: a specification, not a row of cards. */

.spec {
  display: grid;
  gap: 2.5rem;
}

.spec__head {
  padding-left: var(--rail-offset);
}

.spec__list {
  display: grid;
  margin: 0;
  padding: 0 0 0 var(--rail-offset);
  list-style: none;
}

.spec__item {
  padding-block: 1.25rem 1.5rem;
  border-top: 1px solid var(--hairline);
}

.spec__item h3 {
  margin-top: 0.4rem;
}

.spec__item p {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Contact: the page's one dark band. */

.section--dark {
  border-top: 0;
  background: var(--graphite);
  color: var(--on-dark);
}

.section--dark h2 {
  color: var(--on-dark);
}

.section--dark .label,
.section--dark .section__intro {
  color: var(--on-dark-muted);
}

.section--dark .section__label::before {
  background: var(--graphite);
}

.contact {
  display: grid;
  gap: 2rem;
  align-items: end;
}

.contact__body,
.contact__action {
  padding-left: var(--rail-offset);
}

.contact__meta {
  margin-top: 0.75rem;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: 1.75rem;
  border-top: 1px solid var(--hairline);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__note {
  color: var(--muted);
  font-size: 0.875rem;
}

/* ── 404 ─────────────────────────────────────────────────────────────── */

.hero--missing .wrap {
  min-height: 50vh;
}

.hero--missing .wrap > * {
  padding-left: var(--rail-offset);
}

/* ── Wider screens ───────────────────────────────────────────────────── */

@media (min-width: 40rem) {
  .sequence__diagram-scroll {
    display: block;
  }

  .sequence {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  }

  .sequence {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }

  .spec {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
  }

  .spec__list {
    padding-left: 0;
  }

  .contact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .contact__action {
    justify-self: end;
    text-align: right;
  }
}

/* ── Motion: a plan drawn, then a booking made ───────────────────────── */

@keyframes draw {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Available → selected → booked, on a nine-second loop. */
@keyframes lounger-cycle {
  0%,
  28% {
    fill: var(--available);
    stroke: var(--emerald);
  }

  34%,
  62% {
    fill: var(--emerald);
    stroke: var(--forest);
  }

  68%,
  100% {
    fill: var(--forest);
    stroke: var(--forest);
  }
}

@keyframes label-cycle {
  0%,
  28% {
    fill: var(--emerald-dark);
  }

  34%,
  100% {
    fill: #ffffff;
  }
}

@keyframes ring-cycle {
  0%,
  30% {
    opacity: 0;
  }

  36%,
  100% {
    opacity: 1;
  }
}

@keyframes status-available {
  0%,
  28% {
    opacity: 1;
  }

  32%,
  100% {
    opacity: 0;
  }
}

@keyframes status-selected {
  0%,
  30% {
    opacity: 0;
  }

  34%,
  62% {
    opacity: 1;
  }

  66%,
  100% {
    opacity: 0;
  }
}

@keyframes status-booked {
  0%,
  64% {
    opacity: 0;
  }

  68%,
  100% {
    opacity: 1;
  }
}

@keyframes dot-cycle {
  0%,
  28% {
    fill: var(--sage);
  }

  34%,
  62% {
    fill: var(--emerald);
  }

  68%,
  100% {
    fill: var(--forest);
  }
}

@keyframes check-cycle {
  0%,
  68% {
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  80%,
  100% {
    opacity: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes confirmed-cycle {
  0%,
  72% {
    opacity: 0;
  }

  80%,
  100% {
    opacity: 1;
  }
}

/* Availability elsewhere on the plan changes too, quietly. */
@keyframes flicker {
  0%,
  45% {
    fill: var(--available);
    stroke: var(--emerald);
  }

  50%,
  90% {
    fill: url(#hatch);
    stroke: var(--graphite);
  }

  95%,
  100% {
    fill: var(--available);
    stroke: var(--emerald);
  }
}

.draw {
  animation: draw 1.2s var(--ease) both;
}

.draw--dimension {
  animation-delay: 0.4s;
}

.draw--zone {
  animation-duration: 1.4s;
  animation-delay: 0.15s;
}

.draw--shore {
  animation-duration: 1.8s;
  animation-delay: 0.3s;
}

.draw--route {
  animation-duration: 0.9s;
  animation-delay: 2s;
}

.appear {
  transform-box: fill-box;
  animation: appear 0.5s var(--ease) both;
}

.appear--1 {
  animation-delay: 0.8s;
}

.appear--2 {
  animation-delay: 0.95s;
}

.appear--3 {
  animation-delay: 1.1s;
}

.appear--4 {
  animation-delay: 1.25s;
}

.appear--5 {
  animation-delay: 1.8s;
}

.obj--cycle {
  animation: lounger-cycle 9s var(--ease) 3s infinite backwards;
}

.target__label {
  animation: label-cycle 9s var(--ease) 3s infinite backwards;
}

.target__ring {
  animation: ring-cycle 9s var(--ease) 3s infinite backwards;
}

.card__status--available {
  animation: status-available 9s var(--ease) 3s infinite backwards;
}

.card__status--selected {
  animation: status-selected 9s var(--ease) 3s infinite backwards;
}

.card__status--booked {
  animation: status-booked 9s var(--ease) 3s infinite backwards;
}

.card__dot {
  animation: dot-cycle 9s var(--ease) 3s infinite backwards;
}

.card__check {
  animation: check-cycle 9s var(--ease) 3s infinite backwards;
}

.card__confirmed {
  animation: confirmed-cycle 9s var(--ease) 3s infinite backwards;
}

.obj--flicker {
  animation:
    appear 0.5s var(--ease) 1.1s both,
    flicker 16s steps(1, end) 6s infinite;
}

/* ── Less motion, when asked ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}