/*
  Emily & Nick — shared design system
  ------------------------------------
  One stylesheet, reused on every page. If you're moving this into
  Squarespace, this whole file (minus the @import) can go into
  Design > Custom CSS almost as-is. The @import line should instead
  become <link> tags in Settings > Advanced > Code Injection > Header,
  which is where the Google Fonts should load from in Squarespace.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500&family=Archivo:wght@400;500;600&display=swap');

:root{
  /* colors */
  --ink:#1E1B16;
  --cream:#F5F1E8;
  --paper:#FBFAF6;
  --terracotta:#B5502D;
  --gold:#B08D57;
  --teal:#2C4A5E;
  --stone:#8A8371;
  --rule:#DDD6C4;
  --rule-dark:#3A362E;

  /* type */
  --font-display:'Fraunces', serif;
  --font-sans:'Space Grotesk', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-label:'Archivo', sans-serif;

  --max-width: 1080px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 32px;}
@media (max-width:640px){
  /* On desktop the content sits inside a huge canvas, so 32px of side
     padding reads as generous. On a phone, where the content is nearly
     the full screen width, that same 32px feels tight right up against
     the bezel — especially for solid-edged elements like cards. A bit
     more room on narrow screens fixes that without touching desktop. */
  .wrap{padding:0 48px;}
}

/* reduced motion: kill non-essential animation/transition globally */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.site-nav .brand{
  font-family:var(--font-display); font-weight:500; font-size:19px;
  letter-spacing:0.02em; text-decoration:none; color:var(--ink);
}
.site-nav ul{
  list-style:none; display:flex; gap:30px; margin:0; padding:0;
}
.site-nav a.nav-link{
  text-decoration:none; color:var(--ink);
  font-family:var(--font-label); font-size:13px; letter-spacing:1px;
  text-transform:uppercase;
  padding:6px 0; border-bottom:1px solid transparent;
}
.site-nav a.nav-link:hover, .site-nav a.nav-link[aria-current="page"]{
  border-bottom-color:var(--terracotta);
}
.nav-toggle{display:none;}
@media (max-width:720px){
  .site-nav ul{
    position:fixed; inset:76px 0 0 0; background:var(--paper);
    flex-direction:column; gap:0; padding:8px 32px 24px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity 0.18s ease, transform 0.18s ease;
  }
  .site-nav ul.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .site-nav a.nav-link{display:block; padding:14px 0; border-bottom:1px solid var(--rule);}
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    font-family:var(--font-label); font-size:13px; letter-spacing:1px; text-transform:uppercase;
    color:var(--ink);
  }
}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-label); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--ink); border-radius:2px;
  text-decoration:none; color:var(--ink); background:transparent;
  transition:background 0.15s ease, color 0.15s ease;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn.on-dark{border-color:var(--cream); color:var(--cream);}
.btn.on-dark:hover{background:var(--cream); color:var(--ink);}
.link-underline{
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
  font-family:var(--font-label); font-size:13px; letter-spacing:1px; text-transform:uppercase;
}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--stone); margin:0 0 14px;
}
h1,h2,h3{font-family:var(--font-display); font-weight:500; margin:0 0 16px; letter-spacing:-0.01em;}
h1{font-size:clamp(36px,5vw,58px); font-weight:400;}
h2{font-size:clamp(28px,4vw,38px);}
h3{font-size:22px;}
p{margin:0 0 16px;}
.dek{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:20px; color:#4A453D;}

/* ---------- section rhythm ---------- */
section{padding:80px 0;}
hr.rule{border:none; border-top:1px solid var(--rule); margin:0;}

/* ---------- cards ---------- */
.card{
  background:var(--cream); border:1px solid var(--rule); border-radius:4px;
  padding:32px 30px;
}
.card .eyebrow{margin-bottom:10px;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink); color:var(--cream); padding:56px 0; margin-top:60px;
}
.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.site-footer .brand{font-family:var(--font-display); font-style:italic; font-size:18px;}
.site-footer .meta{font-family:var(--font-mono); font-size:12px; letter-spacing:1px; color:#B7B2A6;}

/* ---------- form elements ---------- */
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:var(--font-label); font-size:12px; letter-spacing:1px;
  text-transform:uppercase; color:var(--stone); margin-bottom:8px;
}
.field input[type="text"], .field input[type="email"], .field select, .field textarea{
  width:100%; font-family:var(--font-sans); font-size:15px; padding:12px 14px;
  border:1px solid var(--rule); border-radius:2px; background:var(--paper); color:var(--ink);
}
.radio-row{display:flex; flex-direction:column; gap:10px;}
.radio-row label{
  display:flex; align-items:center; gap:10px; font-family:var(--font-sans); font-size:15px;
  text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer;
}
.form-note{
  font-family:var(--font-mono); font-size:12.5px; color:var(--stone);
  border-left:2px solid var(--rule); padding-left:14px; margin:18px 0 26px;
}