/* ============================================================
   ARLO — Design Tokens & Base
   ============================================================ */

:root {
  /* ---- Palette: warm paper + espresso ink + roasted terracotta ---- */
  --color-bg: #fbf8f3;            /* warm paper */
  --color-surface: #ffffff;
  --color-ink: #221b12;           /* espresso */
  --color-ink-soft: #5b5342;      /* secondary ink */
  --color-muted: #746a59;          /* quiet text with readable contrast */
  --color-line: #eae2d4;          /* hairline */
  --color-accent: #9a5b32;        /* roasted terracotta */
  --color-accent-deep: #7f4a26;
  --color-accent-ink: #fdf9f2;
  /* Light tints for use on dark surfaces (e.g. the Coffee Finder section) */
  --color-accent-soft: #d9a77e;   /* tinted terracotta accents on dark */
  --color-paper-muted: #d7cec1;   /* muted warm-paper text on dark */
  --color-paper-dim: #e5ddd2;     /* dim warm-paper text on dark */

  /* ---- Typography ----
     Body clamps share one slope (0.3125vw) so the hierarchy stays
     proportional at every width. */
  /* "Arlo Numerals" is a digits-only cut of Marcellus (see fonts.css). It
     leads every text stack, so digits always come from the numeral face.
     Every numeral in the project is written in Latin digits, 0123456789. */
  --font-fa: "Arlo Numerals", "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  /* The Latin display faces carry no Persian glyphs, so every Latin-first
     stack ends in the body face and Persian falls through to Vazirmatn. */
  --font-latin: "Marcellus", Georgia, "Times New Roman", var(--font-fa);
  --font-brand: "Cormorant Garamond", var(--font-latin); /* ARLO wordmark, every mark but the hero's */
  --font-hero-mark: "Cinzel Decorative", var(--font-brand);   /* the hero wordmark only */
  --font-num: "Marcellus", Georgia, "Times New Roman", var(--font-fa); /* Latin numerals */

  /* ---- Brand wordmark (ARLO): brand face only, fixed line-height ---- */
  --wordmark-size: 1em;            /* scales with surrounding text */
  --wordmark-lh: 1;                /* fixed, intentional line box */
  --wordmark-ls: 0.28em;           /* refined tracking, site-wide */
  --wordmark-va: -0.08em;          /* optical centering beside Persian text */

  /* ---- Rhythm ---- */
  --container-max: 75rem;                       /* 1200px */
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  /* Hero only: steps a little wider than the site container, never edge to edge. */
  --hero-content-max: 84rem;                    /* 1344px */
  --hero-content-max-tablet: 76rem;

  /* ---- Header ----
     No hamburger at any width; the bar height scales fluidly. Hero and
     scroll offsets use the same tokens, so they stay in sync. */
  --header-h: clamp(4rem, 3.5rem + 1.5vw, 4.5rem);
  --header-h-mobile: clamp(3.75rem, 3.5rem + 1.25vw, 4rem);
  --strip-h: clamp(2.125rem, 1.95rem + 0.9vw, 2.5rem);
  --masthead-h: calc(var(--header-h) + var(--strip-h));

  /* ---- Motion ----
     Interface motion is short and eased out (--dur-fast/med/slow). Ambient
     motion uses one length per family, so a whole page breathes on one
     rhythm. Nothing animates anything but transform and opacity. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 620ms;

  /* The two editorial gestures: a reveal on scroll, an arrival in a panel. */
  --dur-reveal: 850ms;
  --dur-arrive: 460ms;

  /* The ambient families. */
  --dur-glow: 16s;
  --dur-steam: 11s;
  --dur-bean: 18s;
  --dur-sheen: 9s;
  --dur-pulse: 3.4s;
  --dur-march: 1.5s;
  --dur-spin: 56s;
  --dur-marquee: 38s;

  /* ---- Page loader ----
     2.55s of eased progress, then an 850ms lift. Read by the loader's
     animations in css/site.css and the entrance gate in js/site.js. */
  --loader-dur: 3.4s;

  /* ---- Signature cursor ----
     Espresso-brown circle as a local SVG data-URI, hot spot at its centre. */
  --cursor-dot: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='9' fill='%239a5b32'/></svg>") 16 16;
}


/* ---------- Breakpoint scale (documented) ----------
   Media queries cannot read custom properties, so every query must use one
   of these tiers instead of inventing new ad-hoc values:
     tablet   59.99rem   (≤ ~960px)
     mobile   39.99rem   (≤ ~640px)
     small    29.99rem   (≤ ~480px)
     narrow   24.99rem   (≤ ~400px)
   A dialog may add its own tier only when a layout genuinely needs it. */

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

* {
  margin: 0;
}

/* One cursor, everywhere. A universal author rule beats the UA sheet, so the
   dot stays put over every element; do not reintroduce a cursor elsewhere. */
* {
  cursor: var(--cursor-dot), default;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip (not hidden) creates no scroll container, so the sticky header
     keeps working while nothing can push the page wider than the viewport. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-fa);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.75;
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Form controls do not inherit type from their parents, so pull every
   unstyled <button> and field into the body face. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

/* Protected imagery — deterrence only; never touches text selection, links,
   or keyboard navigation. */
img {
  -webkit-user-drag: none;    /* WebKit/Blink: no drag ghost / drag-out */
  -webkit-touch-callout: none; /* iOS: no long-press save/copy callout */
  user-select: none;          /* no text-like selection of the image */
}

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

ul[class] {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Accessible focus ring, used across the site */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilities ---------- */
/* Numerals: the numeral face for a run of digits that should not re-order
   with the surrounding text (times, phone numbers, ranges). Digits inside
   body text already come from the numeral face — no class needed. */
.num {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Motion ----------
   Animations always run, on every device and OS configuration — the site's
   motion is part of its identity and is deliberately not disabled by
   OS-level "reduce motion" settings. */

/* ---------- Brand wordmark (ARLO) ----------
   <span class="wordmark">ARLO</span> never renders ARLO in the body font;
   flex/line-height alignment instead of manual positioning. */
.wordmark {
  font-family: var(--font-brand);
  font-size: var(--wordmark-size);
  font-weight: 500;
  line-height: var(--wordmark-lh);
  letter-spacing: var(--wordmark-ls);
  text-transform: uppercase;
  white-space: nowrap;
  /* optically balance the tracking after the final letter */
  margin-inline-end: calc(-1 * var(--wordmark-ls));
  /* sit on the visual center line of adjacent Persian text */
  vertical-align: var(--wordmark-va);
}
/* Inside the tracked Latin section labels ARLO stays on the baseline and
   inherits the label's tracking, with no trailing-tracking compensation. */
.visit__label .wordmark,
.cta__label .wordmark {
  letter-spacing: inherit;
  vertical-align: baseline;
  margin-inline-end: 0;
}