/* Pebble coming-soon — art-led local static.
   Authority: new-current.pdf v4.0 + restored working copy SHA400d5f3…
   Art: restored assets/art/12-evening.jpg (Flat Course evening; Dune-warm sky in source art).
   Mark: NEW duo light (Night ink + Forest Mid) on light grounds. No external requests. */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("assets/fonts/Jost-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand system */
  --night: #111a14;
  --white: #ffffff;
  --sage: #8fa870;
  --forest-mid: #5e7d55;
  --off-white: #f7f7f5;
  --dune: #f0c494; /* measured scene accent — present in evening art; not a new invent */
  --text-muted-light: #5e6d63; /* light-ground muted (v3.9 type notes) */

  --bg: var(--off-white);
  --fg: var(--night);
  --fg-muted: var(--text-muted-light);

  /* Caption (new PDF p13): Inter Semibold 600 · +14% · capitals */
  --caption-size: 0.75rem;
  --caption-lh: 1rem;
  --caption-tracking: 0.14em;
  --caption-weight: 600;

  /* Clearspace: splash prefer ≥2x (v3.9 p5 / new p10). Mark in open upper sky. */
  --pad-inline: clamp(1.5rem, 6vw, 5rem);
  --pad-block-top: clamp(2.5rem, 10vh, 6rem);
  --pad-block-bottom: clamp(2rem, 8vh, 5rem);
  --mark-width: min(16.5rem, 68vw);
  --stack-gap: clamp(1.25rem, 3vh, 2rem);
  /* Art framing — keep green + flag meaningful; leave sky for mark */
  --art-position: 50% 42%;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

/* No decorative animation */
@media (prefers-reduced-motion: no-preference) {
}

.page {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--pad-block-top) var(--pad-inline) var(--pad-block-bottom);
  overflow: hidden;
}

/* Full-bleed hero art behind content */
.hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--art-position);
  user-select: none;
  -webkit-user-drag: none;
}

/* Soft sky hold so Night ink + muted caption stay readable — Night only, low alpha */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 26, 20, 0.1) 0%,
    rgba(17, 26, 20, 0.04) 28%,
    rgba(17, 26, 20, 0) 48%
  );
  pointer-events: none;
}

.stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--stack-gap);
  width: 100%;
  max-width: 36rem;
  text-align: center;
  /* Sit in open upper sky (guidelines: mark in open upper third, never over the course) */
  margin-top: clamp(0.5rem, 4vh, 2.5rem);
}

.mark {
  display: block;
  width: var(--mark-width);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.status {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: var(--caption-weight);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  /* Night on pale evening sky — AA for small Caption text (not muted) */
  color: var(--night);
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* --- Viewports --- */

/* Narrow phones (320) */
@media (max-width: 360px) {
  :root {
    --mark-width: min(14.5rem, 76vw);
    --pad-inline: 1.25rem;
    --pad-block-top: 2.25rem;
    --caption-size: 0.6875rem; /* 11px floor */
    /* Shift art right so flag+green clear the right edge on 320 cover crop.
       Was 48% 40% → pole at src x≈799 sat at clip (visible win ≈442–802). */
    --art-position: 54% 40%;
  }
}

/* Comfortable phone portrait (390) */
@media (min-width: 361px) and (max-width: 767px) {
  :root {
    --mark-width: min(16rem, 70vw);
    /* 390×844 cover: 50% clipped pennant (src win ≈474–806, tip~815).
       54% 40% → ≈512–844, tip margin ~29px. Same as ≤360 fix. */
    --art-position: 54% 40%;
  }
}

/* Tablet / small desktop */
@media (min-width: 768px) {
  :root {
    --mark-width: min(20rem, 32vw);
    --caption-size: 0.8125rem;
    --stack-gap: 1.75rem;
    --art-position: 50% 38%;
    --pad-block-top: clamp(3rem, 12vh, 7rem);
  }
}

/* Desktop / large tablet: Caption 14px (Inter 600 · +14% · caps) — phones unchanged */
@media (min-width: 1024px) {
  :root {
    --caption-size: 0.875rem; /* 14px */
  }
}

/* Desktop 1440×900 class */
@media (min-width: 1440px) {
  :root {
    --mark-width: min(24rem, 26vw);
    --pad-inline: 7rem;
    --art-position: 50% 36%;
  }
}

/* Landscape phones (e.g. 844×390): keep mark in sky, course visible below.
   BDD: tracer apex was ~12–24 CSS px from top (<1x~21); pad → 2.75rem so ink top ≥2x~42.
   Mark width / art-position unchanged (full pennant retained). */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --pad-block-top: 2.75rem;
    --pad-block-bottom: 0.75rem;
    --stack-gap: 0.85rem;
    --mark-width: min(12.5rem, 36vh, 42vw);
    --art-position: 52% 45%;
  }

  .stack {
    margin-top: 0.25rem;
  }
}

@media (forced-colors: active) {
  .status {
    color: CanvasText;
  }
  .page {
    background: Canvas;
  }
  .hero::after {
    display: none;
  }
}