/* Nova Lounge v2 — design system.
 *
 * Direction measured from the client's supplied reference; see
 * reference_work/AMRIT_CLEAN_ROOM_ANALYSIS.md. The findings that drive this file:
 *
 *   - warm ground throughout, no cool tone anywhere
 *   - TWO faces, and the ground colour doubles as the reverse type colour
 *   - display type huge, uppercase, LIGHT weight, tracked NEGATIVE
 *   - nothing between the display sizes and the label sizes; the gap is the design
 *   - exactly TWO scrim strengths for type over photography
 *   - one transition duration carries the whole state grammar
 *   - corners effectively square
 *
 * Spacing follows LAYOUT_RULES.md: every value resolves to 4 8 12 16 24 32 48 64,
 * and the CONTAINER owns the gap, never the child.
 */

:root {
  /* Ground. Warm, from the cabin's own materials - brown leather, warm ceiling
     light, brass. v1 shipped a cold blue, which agreed with neither the reference
     nor the boat. */
  --sand: #d9cdb9;
  --sand-deep: #c2b6a1;
  --night: #241f1b;
  --night-soft: #2f2924;

  --ink: #2b2723;
  --ink-muted: #6b6055;
  /* The ground colour, used as type on dark. This one move is what makes the light
     and dark bands read as one document rather than two stacked designs. */
  --reverse: #d9cdb9;
  --reverse-muted: #a3968333;

  --brass: #c08a52;
  --cognac: #8a5433;

  /* TWO scrims. Not three, not per-image. Legibility over photography is a system
     or it is a guess made forty times. */
  --scrim-soft: rgba(20, 16, 13, 0.34);
  --scrim-hard: rgba(20, 16, 13, 0.68);

  /* Display: uppercase, weight 300, negative tracking. Light at this size reads as
     expensive; the same size at 600 reads as a poster. */
  --display: "Fraunces", "Georgia", serif;
  --text: "Satoshi", "Inter", system-ui, sans-serif;

  --step-hero: clamp(3.2rem, 9.2vw, 7.2rem);
  --step-1: clamp(2.4rem, 5.4vw, 4.3rem);
  --step-2: clamp(1.9rem, 3.4vw, 3.1rem);
  --label: 0.75rem;
  --body: 0.9375rem;
  --small: 0.8125rem;

  --track-display: -0.04em;
  --track-label: 0.08em;

  --radius: 3px;
  --dur: 0.4s;
  --ease: ease;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gutter: clamp(16px, 4vw, 48px);
  --band-y: clamp(64px, 9vw, 160px);
  --spine: 1440px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 0.94;
  margin: 0;
  font-variation-settings: "SOFT" 20, "WONK" 0;
}

h1 { font-size: var(--step-hero); }
h2 { font-size: var(--step-1); }
h3 { font-size: var(--step-2); }

p { margin: 0; max-width: 46ch; }

a { color: inherit; text-decoration: none; }

/* The label. 12px, uppercase, weight 500 - the connective tissue of the whole page:
   eyebrows, nav, captions, buttons, footer headers. */
.label {
  font-size: var(--label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: 1;
  margin: 0;
}

.spine {
  width: min(100% - var(--gutter) * 2, var(--spine));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- navigation */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 20px var(--gutter);
  color: var(--reverse);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav[data-scrolled="true"] {
  background: var(--night);
  padding-block: 12px;
}

.nav-mark {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a { position: relative; padding-block: 4px; }

.nav-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-size: var(--label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  cursor: pointer;
  background: none;
  color: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.button--solid { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.button--solid:hover { background: var(--cognac); border-color: var(--cognac); }
.button:hover { background: var(--ink); color: var(--sand); }
.button--solid:focus-visible,
.button:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  overflow: hidden;
  color: var(--reverse);
  padding-block: 140px 48px;
}

.hero-media,
.band-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-media img,
.band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Parallax is driven from JS; this is the resting state. */
  will-change: transform;
}

.hero-media::after,
.band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hard);
}

.band-media::after { background: var(--scrim-soft); }

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.hero-flank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
}

/* The hero foot was two absolutely positioned boxes, one bottom-left and one
   bottom-right. At 390px they overlapped: the note ran underneath the card and the
   last line was unreadable. A grid that becomes one column carries the same desktop
   composition and cannot collide. */
.hero-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
}

.hero-note {
  max-width: 34ch;
  font-size: var(--small);
  line-height: 1.7;
}

.hero-card {
  display: grid;
  justify-self: end;
  gap: 4px;
  padding: 20px 24px;
  background: var(--sand);
  color: var(--ink);
  border-radius: var(--radius);
}

.hero-card strong {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 0.9;
}

/* ---------------------------------------------------------------- bands */

.band { padding-block: var(--band-y); }
.band--sand { background: var(--sand); }
.band--deep { background: var(--sand-deep); }
.band--night { background: var(--night); color: var(--reverse); }

.band--media {
  position: relative;
  min-height: 78svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--reverse);
  padding-block: 0;
}

.band--media .spine {
  position: relative;
  z-index: 2;
  padding-block: 64px;
}

/* Two columns with the gap owned here, so nothing a child does can close it. */
.split {
  display: grid;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
}

.stack { display: grid; gap: 24px; justify-items: start; }
.stack--tight { gap: 16px; }

.figure { position: relative; overflow: hidden; border-radius: var(--radius); }
.figure img { width: 100%; height: 100%; object-fit: cover; }

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

.trio {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: grid;
  gap: 16px;
  align-content: start;
}

.card .figure { aspect-ratio: 3 / 4; }
.card p { max-width: 34ch; }

/* ---------------------------------------------------------------- sittings */

.sittings {
  display: grid;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.sitting {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.sitting-time {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: var(--track-display);
  min-width: 4ch;
}

/* ---------------------------------------------------------------- marquee */

.marquee {
  overflow: hidden;
  padding-block: 24px;
  background: var(--night);
  color: var(--reverse);
  border-block: 1px solid color-mix(in srgb, var(--reverse) 18%, transparent);
}

.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 27s linear infinite;
}

.marquee-track span {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

.footer { background: var(--night); color: var(--reverse); padding-top: var(--band-y); }

.footer-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  padding-bottom: 64px;
}

@media (min-width: 760px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-col .label { color: color-mix(in srgb, var(--reverse) 62%, transparent); }

/* The signature move: the wordmark set enormous across the full width at the base. */
.wordmark {
  display: block;
  width: 100%;
  padding-inline: var(--gutter);
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.8;
  font-size: clamp(3rem, 15.2vw, 16rem);
  color: var(--reverse);
  white-space: nowrap;
  overflow: hidden;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--reverse) 18%, transparent);
}

/* ---------------------------------------------------------------- motion
 *
 * Resting states for the scroll reveals. JS animates FROM these; if the script
 * never runs the page must still be readable, so nothing here hides content
 * permanently - opacity is restored by a .is-ready flag the script sets, and the
 * no-JS fallback below turns the whole system off.
 */

.reveal { opacity: 0; transform: translateY(24px); }
.reveal-line { display: block; overflow: hidden; }

html:not(.is-ready) .reveal { opacity: 1; transform: none; }

.figure img { transform: scale(1.12); }
html:not(.is-ready) .figure img { transform: none; }

/* ---------------------------------------------------------------- mobile
 *
 * Measured at 390px, not assumed. Two failures the desktop layout produced there:
 *
 *   - the four nav links wrapped to two rows, pushed "Find Us" off the right edge
 *     and carried the Reserve button off-screen with it. A fixed bar cannot wrap;
 *     below the breakpoint the links are dropped and the mark plus the booking
 *     action are what remain, which is the only pair that has to be reachable.
 *   - the hero note and the hero card overlapped. Fixed by .hero-foot above.
 */

@media (max-width: 860px) {
  .nav {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 16px;
  }

  .nav-links { display: none; }

  .hero-foot { grid-template-columns: 1fr; }
  .hero-card { justify-self: start; }
  .hero { padding-block: 112px 40px; }

  /* A hero line at 9.2vw sets to four lines on a phone and eats the fold. */
  :root { --step-hero: clamp(2.6rem, 12vw, 4rem); }
}

/* A studio render dropped among photographs reads as an asset export, not a picture.
   Documented in the project skill against boat-side.png specifically. These are
   PLACEHOLDERS until the client's photographs land in assets/photos. */
.is-render { filter: brightness(0.46) contrast(1.16) saturate(0.78) sepia(0.22); }

/* ---------------------------------------------------------------- legibility
 *
 * MEASURED, with tools/ui/textcontrast.mjs, which masks to the glyphs instead of
 * sampling the element box. The flat scrim alone gave: hero note 3.24:1, hero
 * labels 3.12:1, nav mark 3.54:1 - all against a 4.5 floor. measure.mjs could not
 * see any of it and reported a meaningless 1:1, because the text sits on a
 * photograph and there is no background colour to resolve.
 *
 * The failure is where the small type is - the top bar and the bottom foot - not in
 * the middle, where the h1 passed at 3.15:1. So the fix is directional rather than a
 * heavier flat scrim, which would have dulled the photograph everywhere to solve a
 * problem at its two edges.
 */

.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(20, 16, 13, 0.78) 0%,
    rgba(20, 16, 13, 0.10) 26%,
    rgba(20, 16, 13, 0.10) 58%,
    rgba(20, 16, 13, 0.86) 100%
  );
}

/* Tap targets. The mark and the two footer links measured 26.88px, 19px and 19px
   against the 44px floor - text-sized, because an inline anchor is only as tall as
   its line box. Padding gives them a real hit area without moving anything. */
.nav-mark { display: inline-flex; align-items: center; min-height: 44px; }

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}