/* Cleverish Made — brand stylesheet
   Tokens taken from the Figma brand guide "Cleverish Made | Brand 2026":
   04 — Color, 05 — Typography, 09 — Website / Home Hero. */

/* ---------- tokens ---------- */
:root {
  --forest:    #3A4D33;  /* ink, text, dark surfaces      30% */
  --pistachio: #A5BD78;  /* hero surfaces, brand moments  25% */
  --moss:      #6F8B5A;  /* support surfaces              15% */
  --butter:    #F0E8C0;  /* cards, soft fills             15% */
  --clay:      #C78A68;  /* accents, CTAs, stickers       10% */
  --canvas:    #F8F1E3;  /* page background                5% */

  --forest-70: rgba(58, 77, 51, .70);
  --forest-30: rgba(58, 77, 51, .30);
  --forest-14: rgba(58, 77, 51, .14);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --hand:    "Yellowtail", "Snell Roundhand", cursive;

  --wonk: "SOFT" 0, "WONK" 1;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --r-card: 28px;
  --r-pill: 999px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--forest);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  margin: 0;
  line-height: 1.04;
  letter-spacing: -.02em;
}
h1 { font-weight: 900; font-size: clamp(46px, 8.4vw, 104px); }
h2 { font-weight: 700; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -.015em; }
h3 { font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
.lede { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.58; max-width: 34em; }
.hand { font-family: var(--hand); color: var(--clay); font-weight: 400; letter-spacing: 0; line-height: 1; }
.italic-clay { font-style: italic; color: var(--clay); display: block; }

/* ---------- layout ---------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.stack > * + * { margin-top: 1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--body); font-weight: 600; font-size: 16px;
  padding: 17px 34px; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer; border: 2px solid var(--forest);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--forest); color: var(--butter); }
.btn-primary:hover { background: #2f4029; }
.btn-secondary { background: transparent; color: var(--forest); }
.btn-secondary:hover { background: var(--forest); color: var(--butter); }
.btn-clay { background: var(--clay); border-color: var(--clay); color: #fff; }
.btn-clay:hover { background: #b87a58; border-color: #b87a58; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 6px;
}

/* ---------- header ---------- */
.site-head {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 2.4vw, 26px); padding-block: clamp(30px, 4vw, 46px) clamp(24px, 3vw, 34px);
  text-align: center;
}
.logo { display: inline-block; text-decoration: none; }
/* Primary stacked lockup — aspect ratio 2556 / 1571. */
.logo-mark {
  display: block; width: clamp(150px, 17vw, 210px); height: auto;
  aspect-ratio: 2556 / 1571;
}
.nav { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap; }
.nav a { font-weight: 500; text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--clay); }
.nav a[aria-current="page"] { border-bottom-color: var(--forest); }

/* ---------- footer ---------- */
.site-foot { background: var(--forest); color: var(--butter); padding-block: clamp(44px, 6vw, 68px) 32px; margin-top: clamp(20px, 2.5vw, 36px); }
.site-foot a { color: var(--butter); }
.foot-mark { display: block; width: clamp(150px, 16vw, 190px); height: auto; aspect-ratio: 2556 / 1571; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a { text-decoration: none; opacity: .88; }
.foot-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot-rule { height: 1.5px; background: rgba(240,232,192,.25); margin: 36px 0 20px; }
.foot-fine { font-size: 13.5px; opacity: .7; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0; }

/* ---------- painted banner strip ---------- */
.strip { background: var(--forest); color: var(--butter); overflow: hidden; padding-block: 20px; }
.strip-track {
  display: flex; width: max-content; gap: 0;
  animation: strip-scroll 38s linear infinite;
}
.strip span {
  font-family: var(--display); font-variation-settings: var(--wonk);
  font-weight: 600; font-style: italic; font-size: clamp(19px, 2.2vw, 25px);
  white-space: nowrap; padding-right: 26px;
}
@keyframes strip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

/* ---------- cards ---------- */
.card { background: var(--butter); border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); }
.card-canvas { background: #fff; border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); }