/* Shared foundation for every page on eoblend.com.

   Palette, type, and section themes come from the Squarespace draft the landing
   page replaced. Everything here is page-agnostic: tokens, the section-theme
   system, typography, the header and footer, and the scroll-reveal states.
   Page-specific layout lives in landing.css (home) and page.css (documents).

   Load order matters: base.css first, then the page's own sheet. */

:root {
  /* Squarespace site palette, named for the colour rather than the slot it
     filled there. The comment keeps the original token, since the section
     themes below are still expressed in Squarespace's terms. */
  --cream:#f6f3ee;     /* --white-hsl:       34,31%,95% */
  --beige:#f3ece2;     /* --black-hsl:       34,40%,92% */
  --gold:#e7a946;      /* --accent-hsl:      37,77%,59% */
  --charcoal:#444340;  /* --lightAccent-hsl: 34,3%,26%  */
  --pink:#eadddd;      /* --darkAccent-hsl:  0,39%,88%  */

  --heading-font:'Averia Serif Libre',Georgia,'Times New Roman',serif;
  --body-font:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --radius:24px;
  --container:1140px;
  /* Colour of the first section on the page, so the top of the canvas can match
     it. Beige suits the landing hero; page.css overrides it for the documents. */
  --page-top:var(--beige);
  color-scheme: light;
}

* { box-sizing:border-box; }

/* Canvas ---------------------------------------------------------------
   What iOS paints when you rubber-band past either end of the page, and what
   Safari samples for its toolbar tint. The two ends want different colours:
   the header's at the top, the footer's gold at the bottom.

   The gradient looks upside-down on purpose. A root background tiles across
   the whole canvas but is *positioned* to the root box, so the halves that
   actually show are the repeats either side of the document: the tile above
   the page ends on the gradient's second colour, the tile below begins on its
   first. The half painted inside the document is never seen, since every
   section draws its own background over it. */
html { background:linear-gradient(var(--gold) 0 50%, var(--page-top) 50% 100%); }

body {
  margin:0;
  font-family:var(--body-font);
  font-size:1.0625rem;
  line-height:1.5;                      /* --body-font-line-height */
  -webkit-font-smoothing:antialiased;
}

/* Section themes ------------------------------------------------------
   Each theme sets the same four slots, so any section can wear any theme
   and its children pick the right colours up automatically. */
.theme-bright-inverse { --bg:var(--beige);    --heading:var(--gold);     --body:var(--charcoal); --btn-bg:var(--gold);  --btn-fg:var(--beige);    }
.theme-bright         { --bg:var(--gold);     --heading:var(--beige);    --body:var(--beige);    --btn-bg:var(--beige); --btn-fg:var(--gold);     }
.theme-dark           { --bg:var(--pink);     --heading:var(--charcoal); --body:var(--charcoal); --btn-bg:var(--cream); --btn-fg:var(--charcoal); }
.theme-light          { --bg:var(--charcoal); --heading:var(--beige);    --body:var(--beige);    --btn-bg:var(--beige); --btn-fg:var(--charcoal); }
/* Not from the Squarespace set: a plain light section for long-form text. */
.theme-cream          { --bg:var(--cream);    --heading:var(--charcoal); --body:var(--charcoal); --btn-bg:var(--gold);  --btn-fg:var(--cream);    }

/* overflow:hidden contains the wave, which is deliberately wider than the
   viewport; without it the whole page gains a horizontal scrollbar. */
section { background:var(--bg); color:var(--body); overflow:hidden; }
.section-pad { padding:clamp(64px,9vw,118px) 24px; }
/* Vertical-rhythm overrides on top of .section-pad. */
.pad-lg { padding-top:clamp(132px,17vw,232px); padding-bottom:clamp(132px,17vw,232px); }
.pad-sm { padding-top:clamp(38px,4.5vw,60px);  padding-bottom:clamp(38px,4.5vw,60px); }
.container { max-width:var(--container); margin:0 auto; }

/* Wave boundary between two sections. Sits as the first child of the lower
   section, filled with the upper section's colour; `preserveAspectRatio:none`
   lets it stretch to any width. The negative margin closes the subpixel seam
   some browsers leave under a scaled SVG. */
.wave {
  display:block; width:200%;
  height:clamp(58px,7.5vw,124px);
  margin-bottom:-1px;
  fill:var(--pink);
}
/* Modifier for when the section above isn't pink. */
.wave-beige { fill:var(--beige); }

/* Typography ----------------------------------------------------------
   Sizes mirror the draft's scale (h1 4rem, h2 2.8rem, h3 2.2rem, h4 1.6rem),
   made fluid so headings don't overflow on a phone. */
h1, h2, h3, h4 {
  font-family:var(--heading-font); font-weight:400;
  letter-spacing:-.02em; line-height:1.2;
  color:var(--heading); margin:0;
}
h1 { font-size:clamp(2.6rem,6.4vw,4rem); }
h2 { font-size:clamp(2rem,4.6vw,2.8rem); }
h3 { font-size:clamp(1.5rem,3.2vw,2.2rem); }
h4 { font-size:clamp(1.25rem,2.2vw,1.6rem); }
p { margin:0; }
.lead { font-size:1.15rem; max-width:52ch; }

a { color:inherit; }

/* Buttons -------------------------------------------------------------
   Pill button in the theme's button colours, matching the draft's shape. */
.btn {
  display:inline-block; text-decoration:none;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--body-font); font-weight:600; font-size:.95rem;
  letter-spacing:.01em;
  padding:14px 30px; border-radius:100px;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover { transform:translateY(-2px); opacity:.92; }

/* Apple's official "Download on the App Store" badge artwork. */
.badge { display:inline-block; line-height:0; transition:transform .15s ease; }
.badge img { width:186px; height:auto; }
.badge:hover { transform:translateY(-2px); }

/* Header --------------------------------------------------------------- */
.site-header { padding:26px 24px 0; }
/* Full width rather than the centred content column, so the logo sits out at
   the page edge instead of being inset with the rest of the content. */
.site-header .container { display:flex; justify-content:flex-start; max-width:none; }
.site-header img { width:210px; height:auto; display:block; }

/* Footer --------------------------------------------------------------- */
/* Gold, declared here rather than by wearing .theme-bright: that theme pairs
   gold with beige text, which lands at 1.8:1 against it and is unreadable at
   nav-link size. Charcoal on the same gold is 4.8:1, past the 4.5:1 minimum. */
.site-footer {
  --bg:var(--gold);
  --heading:var(--charcoal);
  --body:var(--charcoal);
  --btn-bg:var(--cream);
  --btn-fg:var(--charcoal);
  text-align:center;
}
.site-footer .wordmark { width:190px; height:auto; margin-bottom:26px; }
.site-footer nav a {
  display:inline-block; margin:0 14px 10px;
  font-size:.95rem; font-weight:600; text-decoration:none;
  transition:color .15s ease;
}
/* Beige, the colour the "Features" heading wears on this same gold. It's the
   pairing the note above rules out for resting text, which is why the hover
   only borrows it: the link is already read by the time it's pointed at. */
.site-footer nav a:hover { color:var(--beige); }
.site-footer .copyright { margin-top:20px; font-size:.85rem; opacity:.7; }

@media (max-width:440px) {
  .site-footer nav a { margin:0 10px 10px; }
}

@media (prefers-reduced-motion:reduce) {
  .btn, .badge { transition:none; }
  .btn:hover, .badge:hover { transform:none; }
}

/* Scroll reveal ---------------------------------------------------------
   The hidden state is scoped to .reveal-ready, which the script adds to <html>
   only when it can actually reveal things again. No JS, an old browser, or
   reduced-motion preferences all leave the content plainly visible.

   Applied to section content rather than the <section> itself: fading a
   full-bleed section would fade its background too and show the body colour
   through it. */
.reveal-ready .reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal-ready .reveal.is-visible { opacity:1; transform:none; }