/* Marketing site — vanillawith.me
 *
 * Loads alongside tokens.css, which is a VERBATIM copy of
 * static/css/tokens.css so the site and the app share one palette and type
 * stack. scripts/deploy-site.sh refreshes that copy on every deploy and tells
 * you if it changed — don't hand-edit www/css/tokens.css, edit the app's copy.
 *
 * Implements two Figma frames:
 *   desktop  node 1628:11083  (1440 wide)
 *   mobile   node 1628:11181  (393 wide)
 * Both are fixed-position artboards; this rebuilds them as proportional flow.
 * Every magic number below is `n / frame-width`, so the two frames stay
 * recognisable at any viewport. Desktop is the base; mobile is the override
 * below 900px.
 */

:root {
  --rule: var(--200-gray); /* #e7e7e5 — the brand hairline */
  --headline: #000; /* Figma specifies pure black for headings; it is the
                       one value in this design with no token equivalent. */
  --frame-desktop: 1440px;
  --gutter: 10.28%; /* 148/1440 */
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-feature-settings:
    "onum" 1,
    "pnum" 1; /* oldstyle + proportional figures, per Figma */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Brand header ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl); /* 24px */
  max-width: var(--frame-desktop);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-sm) var(--spacing-3xl); /* 32 / 8 / 48 */
}

.brand__rule {
  flex: 1 0 0;
  min-width: 1px;
  border-top: 1px solid var(--rule);
}

.brand__name {
  flex-shrink: 0;
  margin: 0; /* it's an <h1> — drop the UA margin and bolding */
  font-weight: 400;
  color: var(--500-gray);
  font-size: clamp(
    18px,
    2.09vw,
    30px
  ); /* 30/1440 desktop, 18 on the mobile frame */
  font-style: italic;
  line-height: 32px;
  white-space: nowrap;
}

/* ---------- Scenes ---------- */

.scene {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--frame-desktop);
  margin: 0 auto clamp(48px, 9.03vw, 130px); /* Figma leaves 106-154px between scenes */
  min-height: min(52.15vw, 751px); /* 751/1440 */
  overflow: hidden; /* illustrations bleed past the frame edge */
  isolation: isolate;
}

.scene__art {
  position: absolute;
  z-index: 0;
  top: 0;
  height: 100%;
  left: var(--art-left);
  width: var(--art-width);
}

.scene__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The white scrim. In Figma this is a separate gradient rectangle over the
 * illustration on the text side; here it rides on the art itself so it always
 * lines up with it, whatever the viewport. */
.scene__art::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scene--art-right .scene__art::after {
  background: linear-gradient(
    to right,
    #fff 0%,
    rgba(255, 255, 255, 0.98) 16%,
    rgba(255, 255, 255, 0) 62%
  );
}

.scene--art-left .scene__art::after {
  background: linear-gradient(
    to left,
    #fff 0%,
    rgba(255, 255, 255, 0.98) 16%,
    rgba(255, 255, 255, 0) 62%
  );
}

.scene__copy {
  position: relative;
  z-index: 2;
  width: min(44.7%, 643px); /* 643/1440 */
  padding-inline-start: var(--gutter);
}

.scene--art-left .scene__copy {
  /* Copy sits on the right: 793/1440 in, 533 wide */
  margin-inline-start: auto;
  width: min(48%, 570px);
  padding-inline-start: 0;
  padding-inline-end: var(--gutter);
}

/* Per-scene illustration placement, from the 1440 frame. */
.scene--commute {
  --art-left: 20.49%; /* 295/1440  */
  --art-width: 70.49%; /* 1015/1440 */
}

.scene--coffee {
  --art-left: -17.78%; /* -256/1440 — bleeds off the left edge */
  --art-width: 79.38%; /* 1143/1440 */
}

.scene--cooking {
  --art-left: 34.65%; /* 499/1440  */
  --art-width: 63.26%; /* 911/1440  */
}

.scene__title {
  margin: 0 0 clamp(20px, 3.34vw, 48px);
  color: var(--headline);
  font-size: clamp(32px, 3.34vw, 48px); /* 48/1440 */
  font-style: italic;
  font-weight: 400;
  line-height: 0.92; /* 44/48 */
}

.scene__body {
  margin: 0;
  font-size: clamp(22px, 2.09vw, 30px); /* 30/1440 */
  line-height: 1.07; /* 32/30 */
}

.scene__body em {
  font-style: italic;
}

.scene__body + .scene__body {
  margin-top: 0.6em;
}

/* ---------- Mobile: Figma node 1628:11181, 393 wide ----------
 *
 * The mobile frame is not a narrowed desktop. It reorders each scene to
 * copy-above-art, runs the illustrations full-bleed, swaps the scrim from a
 * horizontal fade to a vertical one, keeps body copy at its full 30px, and
 * centres the call to action.
 */

@media (max-width: 899px) {
  .brand {
    padding: var(--spacing-2xl) var(--spacing-sm) var(--spacing-3xl);
  }

  .brand__name {
    font-size: clamp(16px, 4.58vw, 18px); /* 18/393 */
    line-height: 1.5; /* 27/18 */
    letter-spacing: -0.45px;
  }

  .scene {
    display: flex;
    flex-direction: column-reverse; /* copy above art, per the mobile frame */
    align-items: stretch;
    min-height: 0;
    margin-bottom: clamp(40px, 12.7vw, 72px);
  }

  .scene__art {
    position: relative; /* still the ::after's containing block */
    left: auto;
    width: 100%;
    height: auto;
    margin-top: -6%; /* the art rides up under the copy, as in the frame */
  }

  .scene__art img {
    height: auto;
  }

  /* One vertical fade for every scene — on mobile the copy sits above the
   * art rather than beside it, so the horizontal scrims no longer apply. */
  .scene--art-right .scene__art::after,
  .scene--art-left .scene__art::after {
    background: linear-gradient(
      to bottom,
      #fff 0%,
      rgba(255, 255, 255, 0.97) 22%,
      rgba(255, 255, 255, 0) 62%
    );
  }

  /* Only the coffee scene bleeds on mobile: 606 wide at -162 on a 393 frame. */
  .scene--coffee .scene__art {
    width: 154.2%;
    margin-left: -41.22%;
  }

  .scene__copy,
  .scene--art-left .scene__copy {
    width: auto;
    margin-inline-start: 0;
    padding: 0 var(--spacing-2xl); /* 32/393 */
  }

  .scene__title {
    font-size: clamp(30px, 9.16vw, 36px); /* 36/393 */
    line-height: 1; /* 36/36 */
    margin-bottom: clamp(16px, 6.1vw, 24px);
  }

  .scene__body {
    /* The mobile frame keeps body copy at the full 30px — it does not shrink
     * with the viewport the way the headings do. */
    font-size: clamp(24px, 7.63vw, 30px); /* 30/393 */
  }

}

/* ---------- Site footer ----------
 *
 * Not in either Figma frame. It borrows the brand header's hairline and
 * muted gray so it reads as the same family, and stays well under
 * body-copy size so it never competes with a scene.
 */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xl);
  max-width: var(--frame-desktop);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--gutter) var(--spacing-3xl);
  border-top: 1px solid var(--rule);
  color: var(--500-gray);
  font-size: clamp(16px, 1.39vw, 20px); /* 20/1440 */
  font-style: italic;
}

@media (max-width: 899px) {
  .site-footer {
    gap: var(--spacing-lg) var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-2xl);
  }
}