/* ==========================================================================
   KASA3 — Base: tokens, reset, typography
   ========================================================================== */

@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+Sans:wght@400;500;600&display=swap');

:root{
  /* --- Ink / surfaces --- */
  --ink-950:#050505;
  --ink-900:#080D18;
  --ink-800:#0D1422;
  --ink-750:#111a2b;
  --ink-line: rgba(244,241,232,0.10);
  --ink-line-strong: rgba(244,241,232,0.18);

  /* --- Ivory / light --- */
  --ivory:#F4F1E8;
  --ivory-dim: rgba(244,241,232,0.72);
  --ivory-faint: rgba(244,241,232,0.48);

  /* --- Gold, the signature — used sparingly --- */
  --gold-deep:#8E6A2A;
  --gold:#C89B3C;
  --gold-light:#D4AF5A;
  --gold-pale:#E7C66A;
  --gold-line: rgba(200,155,60,0.35);

  /* --- Semantic --- */
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-alt: var(--ink-800);
  --text: var(--ivory);
  --text-dim: var(--ivory-dim);
  --text-faint: var(--ivory-faint);
  --accent: var(--gold);

  /* --- Type --- */
  --f-display: 'Fraunces', 'Iowan Old Style', serif;
  --f-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

  /* --- Scale --- */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(0.95rem, 0.93rem + 0.12vw, 1.05rem);
  --step-1:  clamp(1.1rem, 1.05rem + 0.25vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.3rem + 0.5vw, 1.75rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5:  clamp(3.1rem, 2.2rem + 3.8vw, 5.2rem);

  /* --- Layout --- */
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 116px;
  --header-h-compact: 72px;

  /* --- Motion --- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;

  /* --- Radius (used sparingly, contextually) --- */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 10px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
fieldset{ border:none; margin:0; padding:0; }

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

/* Focus visibility — never suppressed, only re-styled */
:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed;
  left:12px; top:-60px;
  background:var(--ivory);
  color:var(--ink-950);
  padding:12px 18px;
  z-index:999;
  font-size:var(--step--1);
  transition:top var(--dur-fast) var(--ease-editorial);
}
.skip-link:focus{ top:12px; }

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

.eyebrow{
  font-family:var(--f-body);
  font-size:var(--step--1);
  letter-spacing:0.04em;
  color:var(--text-faint);
}

h1,.h1{ font-family:var(--f-display); font-weight:500; font-size:var(--step-5); line-height:1.03; letter-spacing:-0.01em; }
h2,.h2{ font-family:var(--f-display); font-weight:500; font-size:var(--step-4); line-height:1.08; letter-spacing:-0.01em; }
h3,.h3{ font-family:var(--f-display); font-weight:500; font-size:var(--step-3); line-height:1.15; }
h4,.h4{ font-family:var(--f-display); font-weight:500; font-size:var(--step-2); line-height:1.25; }

.serif-italic{ font-style:italic; font-family:var(--f-display); }

.lede{
  font-size:var(--step-1);
  color:var(--text-dim);
  line-height:1.6;
  max-width:52ch;
}

.body-text{ color:var(--text-dim); max-width:62ch; }

/* Section rhythm */
.section{ padding-block: clamp(72px, 10vw, 156px); position:relative; }
.section--tight{ padding-block: clamp(48px, 6vw, 96px); }
.section--ivory{ background:var(--ivory); color:var(--ink-950); }
.section--ivory .text-dim{ color:rgba(5,5,5,0.62); }

/* Buttons — one clear language, used with restraint */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  font-family:var(--f-body);
  font-weight:500;
  font-size:var(--step--1);
  letter-spacing:0.01em;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  transition: background var(--dur-fast) var(--ease-editorial), color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial), transform var(--dur-fast) var(--ease-editorial);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

.btn--primary{
  background:var(--ivory);
  color:var(--ink-950);
}
.btn--primary:hover:not(:disabled){ background:var(--gold-pale); }

.btn--gold{
  background:var(--gold);
  color:var(--ink-950);
}
.btn--gold:hover:not(:disabled){ background:var(--gold-light); }

.btn--outline{
  border-color:var(--ink-line-strong);
  color:var(--text);
  background:transparent;
}
.btn--outline:hover:not(:disabled){ border-color:var(--gold-line); color:var(--gold-pale); }

.btn--ghost{
  color:var(--text-dim);
  padding-inline:6px;
}
.btn--ghost:hover:not(:disabled){ color:var(--text); }

.btn--block{ width:100%; }
.btn--sm{ padding:10px 18px; font-size:var(--step--1); }

.text-link{
  position:relative;
  padding-bottom:2px;
  background-image:linear-gradient(var(--gold-line), var(--gold-line));
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size var(--dur-med) var(--ease-editorial);
}
.text-link:hover{ background-size:100% 1px; }

/* Form fields */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  font-size:var(--step--1);
  color:var(--text-faint);
}
.field input,
.field select,
.field textarea{
  background:var(--ink-800);
  border:1px solid var(--ink-line);
  color:var(--text);
  padding:13px 14px;
  border-radius:var(--r-sm);
  transition:border-color var(--dur-fast) var(--ease-editorial);
}
.section--ivory .field input,
.section--ivory .field select,
.section--ivory .field textarea{
  background:#fff;
  border-color:rgba(5,5,5,0.14);
  color:var(--ink-950);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold-line);
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:560px){
  .field-row{ grid-template-columns:1fr; }
}