/* Small Fox Studio — Base */

/* ─── Custom Properties ─────────────────────────────── */
:root {
  --c-bg:       #F8F5F0;
  --c-text:     #1A1715;
  --c-accent:   #E8642E;
  --c-yellow:   #F5B83D;
  --c-blue:     #5BAAC4;
  --c-grey:     #6B6660;
  --c-cream:    #EDE7DC;
  --c-hairline: #D4CEC8;
  --c-dark:     #1A1715;
  --c-on-dark:  #F8F5F0;

  --f-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --f-display:  'Caveat', cursive;

  --section-y:  100px;
  --max-w:      1280px;
  --side-pad:   clamp(24px, 5.5vw, 80px);
  --radius:     3px;
  --t:          200ms ease;
  --site-zoom:  0.9;
}

/* ─── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--c-bg);
}

body {
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  zoom: var(--site-zoom);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@supports not (zoom: 1) {
  body {
    transform: scale(var(--site-zoom));
    transform-origin: top left;
    width: 111.111%;
  }
}

img, svg { display: block; max-width: 100%; }
ul, ol   { list-style: none; }
a        { color: inherit; text-decoration: none; }
button   { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ─── Layout ─────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

.section { padding-block: var(--section-y); }
.section--cream { background: var(--c-cream); }

/* ─── Typography scale ───────────────────────────────── */
.t-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-grey);
  margin-bottom: 18px;
}

.t-display {
  font-family: var(--f-serif);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.t-heading {
  font-family: var(--f-serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.t-subhead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-grey);
  max-width: 540px;
}

.t-orange  { color: var(--c-accent); }
.t-yellow  { color: var(--c-yellow); }
.t-blue    { color: var(--c-blue); }

/* ─── Scroll fade ─────────────────────────────────────── */
.js-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-fade.is-visible { opacity: 1; transform: none; }
.js-fade--d1 { transition-delay: 0.1s; }
.js-fade--d2 { transition-delay: 0.2s; }
.js-fade--d3 { transition-delay: 0.3s; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --section-y: 72px; }
  .t-display { font-size: 52px; }
  .t-heading { font-size: 38px; }
}

@media (max-width: 640px) {
  :root { --section-y: 56px; }
  .t-display { font-size: 42px; }
  .t-heading { font-size: 32px; }
}