/* ==========================================================================
   base.css — design tokens, reset, typography, motion
   Mirrors the token/typography model of the original Carbonmade site:
   html font-size is 10px, so every `em` in this project reads as "× 10px".
   1.7em = 17px, 2.3em = 23px, 3.5em = 35px, 5.9em = 59px.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --color: #000;
  --accent-color: #000;
  --link-color: #000;
  --surface-color: transparent;
  --background-color: #fff;
  --font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --secondary-font-family: var(--font-family);

  /* Two weights carry the page: bold for the large titles, regular for body.
     600 stays available for small emphasis (labels, `strong`, current nav). */
  --title-weight: 700;
  --body-weight: 400;

  /* muted greys used for labels / numerals in the case copy */
  --label-color: #999;
  --numeral-color: #ccc;

  /* --- block surfaces --------------------------------------------------- */
  /* Named so a block says which surface it sits on rather than hard-coding a
     hex inline. Keeps every band themeable from one place. */
  --s-page: #fff;
  --s-raised: #f5f5f5;
  --s-sunken: #f2f2f2;
  --s-accent: #eb7000;
  --s-cover: #fcdebc;

  /* --- layout ----------------------------------------------------------- */
  --grid-width: 1100px;
  --container-width: var(--grid-width);
  --site-margin: 40px;
  --cover-height: 100vh;
}

@media (max-width: 768px) {
  :root {
    --site-margin: 20px;
  }
}

/* --- reset ------------------------------------------------------------- */

html {
  font-size: 10px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  min-height: 100%;
  color: var(--color);
  background: var(--background-color);
  font-family: var(--font-family);
  font-weight: var(--body-weight);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: var(--body-weight);
  overflow-wrap: break-word;
}

strong {
  font-weight: 600;
}

ol,
ul,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  border: 0;
  vertical-align: top;
  -webkit-user-drag: none;
  user-select: none;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

/* --- shared rich-text rhythm ------------------------------------------ */
/*
 * The original built vertical rhythm out of empty `<p><br></p>` paragraphs.
 * Reproduced here as margins so the markup stays semantic:
 *   one blank line  -> `p + p`            (--rhythm, = one line box)
 *   n blank lines   -> `h4` section label (--rhythm × --section-gap)
 * --rhythm must equal the block's line-height expressed in em.
 */

.rich {
  --rhythm: 1.61em;
  --section-gap: 2;
}

.rich > * + * {
  margin-top: var(--rhythm);
}

.rich > h4 {
  margin-top: calc(var(--rhythm) * var(--section-gap));
  font-weight: 600;
}

/* A label sits exactly one line box above its body — no extra gap. */
.rich > *:first-child,
.rich > h4 + * {
  margin-top: 0;
}

/* A body that ended on a blank line in the original. Padding rather than
   margin so it can't collapse out of the column. */
.rich.trailing-space {
  padding-bottom: var(--rhythm);
}

/* Section labels: "THE PROBLEM —" — the em dash is muted. */
.rich .dash {
  color: var(--label-color);
}

/* "01  Unorganized app growth" — the numeral is muted. */
.rich .tight > li {
  display: block;
}

.rich .tight > li + li {
  margin-top: 0;
}

.rich .num {
  color: var(--numeral-color);
  font-weight: 600;
  margin-right: 0.4em;
}

/* --- scroll reveal ----------------------------------------------------- */
/*
 * Matches the original: content starts 50px low and invisible, then eases in
 * once the block enters the viewport (see scripts/site.js).
 */

.block.animated > .content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition:
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 500ms ease-out,
    visibility 500ms;
}

.block.animated.is-revealed > .content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .block.animated > .content {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
}