/* ============================================================
   HOUSE OF ARLO — Brand foundation
   Palette, type scale, spacing, motion primitives.

   Art direction: deep forest green, cream, tan leather, brass.
   Warm, filmic, unhurried. Nothing saturated, nothing cold.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@300..600&display=swap');

:root {
  /* --- Core palette ------------------------------------------------ */
  --ink:         #14180F;
  --green:       #24382A;   /* primary dark surface */
  --green-deep:  #1A2A1F;
  --green-lift:  #33493A;
  --sage:        #8C9B87;
  --tan:         #A9713F;   /* leather */
  --tan-deep:    #8A5A31;
  --brass:       #B08D4F;   /* metal accent */
  --sand:        #E3D9C6;
  --cream:       #F4EFE4;
  --bone:        #FAF7F0;
  --white:       #FFFFFF;

  /* --- Semantic ---------------------------------------------------- */
  --bg:          var(--bone);
  --bg-alt:      var(--cream);
  --surface:     var(--white);
  --text:        var(--ink);
  --text-muted:  #6A6B5C;
  --text-invert: var(--cream);
  --line:        #E1D9C9;
  --line-strong: #C9BEA8;
  --accent:      var(--green);
  --price:       var(--ink);
  --urgent:      #8A4B2A;
  --success:     #46654B;

  /* --- Type -------------------------------------------------------- */
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.77rem + 0.16vw, 0.89rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.22vw, 1.06rem);
  --step-1:  clamp(1.14rem, 1.07rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.37rem, 1.26rem + 0.55vw, 1.73rem);
  --step-3:  clamp(1.64rem, 1.47rem + 0.83vw, 2.20rem);
  --step-4:  clamp(1.96rem, 1.71rem + 1.24vw, 2.81rem);
  --step-5:  clamp(2.36rem, 1.98rem + 1.83vw, 3.58rem);
  --step-6:  clamp(2.83rem, 2.28rem + 2.65vw, 4.57rem);
  --step-7:  clamp(3.40rem, 2.58rem + 3.90vw, 6.00rem);

  /* --- Space ------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1480px;

  /* --- Form -------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,24,15,.05), 0 2px 8px rgba(20,24,15,.04);
  --shadow-md: 0 2px 6px rgba(20,24,15,.06), 0 12px 32px rgba(20,24,15,.07);
  --shadow-lg: 0 8px 20px rgba(20,24,15,.08), 0 32px 64px rgba(20,24,15,.12);

  /* --- Motion ------------------------------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;

  --bar-h: 38px;
  --nav-h: 68px;
}

/* ---------- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  /* Bodoni Moda is a variable face whose optical-size axis controls thick/thin
     contrast. Left on `auto` it picks the display cut at large sizes, where the
     hairlines get too fine to read comfortably. Pinning it to the text cut keeps
     headlines legible and matches the logo, which is drawn at opsz 30. Fonts
     without an opsz axis ignore this outright. */
  font-variation-settings: 'opsz' 30;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.06; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--green); color: var(--cream); }

/* ---------- Type primitives ------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.0;
}
.display .it { font-style: italic; }

.eyebrow {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lede {
  font-family: var(--font-accent);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-mid { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 7.5rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.center-y { display: flex; align-items: center; gap: var(--sp-3); }

/* ---------- Buttons -------------------------------------------------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.05em 2.1em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--green-deep); }
.btn:active { transform: translateY(0); }
.btn--tan   { --btn-bg: var(--tan); --btn-fg: var(--white); }
.btn--tan:hover { background: var(--tan-deep); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--ink); }
.btn--cream:hover { background: var(--white); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border: 1px solid currentColor; }
.btn--ghost:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--cream); border: 1px solid rgba(244,239,228,.5); }
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.2em 2.6em; }
.btn--sm { padding: .8em 1.5em; font-size: var(--step--2); }

/* Underline link with a wipe */
.link-u {
  position: relative;
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 4px;
}
.link-u::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.link-u:hover::after { transform: scaleX(0); }

/* ---------- Oval device (brand motif) -------------------------------- */
.oval {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55em 1.5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-accent);
  font-size: var(--step--2);
  letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Reveal on scroll ----------------------------------------
   Gated behind .js (set by a one-line inline script in each <head>), so
   that without JavaScript — or if the observer never fires — the content
   is simply visible rather than a blank page. Never hide content by
   default on a storefront. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 950ms var(--ease-soft), transform 950ms var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}