/* ============================================================
   Darya mark(it)er — case study site
   Fonts + design tokens + base + responsive layer
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Sacramento&display=swap');

:root {
  /* base palette */
  --color-ivory: #F4EFE6;
  --color-canvas: #ded9d0;
  --color-sand: #E3D8C6;
  --color-ink: #1c1a20;
  --color-lilac: #C8B6E6;
  --color-amethyst: #8E77B8;
  --color-plum: #2E2440;
  --color-text-on-dark: #E9E0F4;

  /* semantic aliases */
  --surface-page: var(--color-canvas);
  --surface-card: var(--color-ivory);
  --surface-dark: var(--color-plum);
  --text-primary: var(--color-ink);
  --text-on-dark: var(--color-text-on-dark);
  --text-muted: #5f5766;
  --accent: var(--color-amethyst);
  --accent-soft: var(--color-lilac);
  --highlight-marker: rgba(142, 119, 184, 0.42);
  --highlight-marker-strong: rgba(142, 119, 184, 0.55);
  --border-soft: #ddd6c8;

  /* typography */
  --font-display: 'Playfair Display', serif;
  --font-script: 'Sacramento', cursive;
  --font-label: 'Jost', sans-serif;

  /* radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 50%;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--color-amethyst); text-decoration: none; }
a:hover { color: var(--color-plum); }
::selection { background: var(--highlight-marker); }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes grain { 0%,100%{opacity:.5} 50%{opacity:.9} }

/* mobile nav toggle — hidden on desktop, shown on small screens */
#nav-toggle { display: none; }
.nav-menu-btn { display: none; }

/* ============================================================
   RESPONSIVE LAYER
   The source markup uses inline styles, so overrides use
   attribute-substring selectors + !important. Selectors below
   deliberately AVOID the Meta Ads Manager table grids
   (which use "34px 66px minmax(...) 1.35fr 1fr 1.1fr ...") so
   that table keeps its own horizontal-scroll layout.
   ============================================================ */

/* ---------- TABLET  (<= 960px) ---------- */
@media (max-width: 960px) {
  /* section horizontal padding */
  section[style], header[style], footer[style], nav[style] {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
  /* 4- and 3-column grids -> 2 columns */
  [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="repeat(3,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="repeat(6,1fr)"] { grid-template-columns: repeat(3,1fr) !important; }
  /* big two-column layouts -> single column */
  [style*="1.15fr 0.85fr"],
  [style*="1.4fr 1fr"],
  [style*="1.2fr 1fr"],
  [style*="1.05fr"],
  [style*="1.35fr 0.65fr"],
  [style*="1fr 0.7fr"],
  [style*="0.8fr 1.2fr"] { grid-template-columns: 1fr !important; }
  /* hero */
  #top { padding-top: 118px !important; padding-bottom: 60px !important; gap: 34px !important; }
  h1[style] { font-size: 48px !important; }
  h2[style] { font-size: 34px !important; }
}

/* ---------- MOBILE  (<= 640px) ---------- */
@media (max-width: 640px) {
  section[style], header[style], footer[style] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #top { padding-top: 104px !important; padding-bottom: 48px !important; }

  /* every layout grid collapses to one column */
  [style*="repeat(4,1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(6,1fr)"],
  [style*="1.15fr 0.85fr"],
  [style*="1.4fr 1fr"],
  [style*="1fr 1fr"],
  [style*="1.2fr 1fr"],
  [style*="1.05fr"],
  [style*="1.35fr 0.65fr"],
  [style*="1fr 0.7fr"],
  [style*="0.8fr 1.2fr"] { grid-template-columns: 1fr !important; }

  /* the 9-week timeline (6 dots on a line) stacks */
  [style*="repeat(6,1fr)"] { gap: 26px !important; }

  /* typography scale-down */
  h1[style] { font-size: 34px !important; line-height: 1.08 !important; }
  h2[style] { font-size: 26px !important; }
  [style*="font-size:66px"] { font-size: 34px !important; }
  [style*="font-size:60px"] { font-size: 40px !important; }
  [style*="font-size:52px"] { font-size: 36px !important; }
  [style*="font-size:50px"] { font-size: 32px !important; }
  [style*="font-size:48px"] { font-size: 30px !important; }
  [style*="font-size:46px"] { font-size: 34px !important; }
  [style*="font-size:44px"] { font-size: 30px !important; }
  [style*="font-size:42px"] { font-size: 28px !important; }
  [style*="font-size:40px"] { font-size: 30px !important; }

  /* results chart rows: label / bars / dev -> stack */
  [data-chart] > div { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* nav: collapse inline links, reveal hamburger */
  nav[style] { padding-top: 12px !important; padding-bottom: 12px !important; }
  nav a[href="#context"],
  nav a[href="#strategy"],
  nav a[href="#results"] { display: none !important; }
  .nav-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); background: transparent; cursor: pointer;
    color: var(--color-ink);
  }
  nav a[href="#contact"] { padding: 10px 16px !important; font-size: 10px !important; }
}

/* very small phones */
@media (max-width: 380px) {
  h1[style] { font-size: 30px !important; }
  nav a[href="#contact"] { display: none !important; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}