/* ============================================================
   THE NINTH AGENCY — Shared design system
   Navy · Ivory · Stone grey  |  High-end, fun-yet-refined
   ============================================================ */

:root{
  /* Brand */
  --navy:        #1a2540;   /* primary, from the mark            */
  --navy-deep:   #131b30;   /* darker fills                       */
  --navy-soft:   #2c3856;   /* hover / lines on navy              */

  /* Neutrals (warm) */
  --paper:       #faf8f3;   /* page white, faintly warm           */
  --ivory:       #f4efe6;   /* card / alt section                 */
  --ivory-deep:  #ece5d8;   /* deeper sand panel                  */
  --cream:       #f9f7f2;   /* knockout logo cream                */

  /* Greys */
  --stone:       #8c887f;   /* warm body grey                     */
  --stone-soft:  #b4afa4;   /* captions                           */
  --line:        #d8d2c6;   /* hairline divider on light          */
  --line-navy:   #36415e;   /* hairline divider on navy           */

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --script:"Pinyon Script", cursive;

  /* Rhythm */
  --gut: clamp(20px, 4.5vw, 64px);     /* page side padding       */
  --maxw: 1280px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  font-weight:300;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,10vw,140px); }

/* ---- Eyebrow / labels (letter-spaced caps, the fashion-house tell) ---- */
.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--stone);
}
.eyebrow.on-navy{ color:var(--stone-soft); }

/* ---- Display type ---- */
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:.005em;
}
.lead{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(20px,2.4vw,30px);
  line-height:1.45;
  color:var(--navy);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:400;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  padding:16px 30px; border:1px solid var(--navy);
  background:var(--navy); color:var(--cream);
  cursor:pointer; transition:all .45s var(--ease);
}
.btn:hover{ background:transparent; color:var(--navy); }
.btn--ghost{ background:transparent; color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:var(--cream); }
.btn--light{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.btn--light:hover{ background:transparent; color:var(--cream); }
.btn--lineonly{ background:transparent; border:none; padding:8px 0; position:relative; }
.btn--lineonly::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(1); transform-origin:left; transition:transform .5s var(--ease); }
.btn--lineonly:hover::after{ transform:scaleX(0); transform-origin:right; }

/* ---- Hairline ---- */
.rule{ height:1px; background:var(--line); border:0; width:100%; }
.rule.on-navy{ background:var(--line-navy); }

/* ---- Image placeholder (striped, with monospace caption) ---- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(26,37,64,.045) 0 2px, transparent 2px 11px),
    var(--ivory-deep);
  display:flex; align-items:center; justify-content:center;
  color:var(--stone);
}
.ph::after{
  content:attr(data-label);
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone-soft);
  padding:6px 10px; border:1px solid var(--line);
  background:rgba(255,255,255,.45);
}
.ph.on-navy{
  background:
    repeating-linear-gradient(135deg, rgba(249,247,242,.06) 0 2px, transparent 2px 11px),
    var(--navy-deep);
}
.ph.on-navy::after{ color:var(--stone-soft); border-color:var(--line-navy); background:rgba(255,255,255,.04); }

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}
/* Freeze escape-hatch: when JS detects animation can't run, snap visible */
html.snap .reveal{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }

/* ---- Top nav (shared baseline; directions may override) ---- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav__links{ display:flex; gap:clamp(18px,2.4vw,40px); align-items:center; }
.nav__links a{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  position:relative; padding:4px 0; color:inherit;
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__mono{ height:38px; width:auto; transition:opacity .4s; }

@media (max-width:720px){
  body{ font-size:16px; }
  .nav__links{ gap:16px; }
  .nav__links a.hide-sm{ display:none; }
}