/* ==========================================================================
   lilli-thompson.com — clean static rebuild
   Design tokens extracted from the live site; all code hand-written.
   ========================================================================== */

:root {
  /* Palette */
  --white-hsl: 0, 0%, 98.04%;
  --black-hsl: 0, 0%, 0%;
  --accent-hsl: 0, 0%, 86.27%;
  --light-accent-hsl: 0, 0%, 100%;
  --dark-accent-hsl: 0, 0%, 10.98%;

  /* Type */
  --font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The live site uses Adobe's "pragmatica-web" for small meta text; that font
     is licensed per-domain via Typekit and can't be self-hosted, so we fall
     back to the body stack at a light weight. */
  --meta-font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid heading scale: (size-value - 1) * 1.2vw + 1rem, as on the live
     site (only capped at its 3000px max page width, so no cap needed here) */
  --h1-size: calc(5.2 * 1.2vw + 1rem);
  --h2-size: calc(3.5 * 1.2vw + 1rem);
  --h3-size: calc(2 * 1.2vw + 1rem);
  --h4-size: calc(1 * 1.2vw + 1rem);

  /* Layout */
  --site-max-width: 3000px;
  --site-gutter: 3vw;
  --mobile-site-gutter: 6vw;
  --grid-gap: 11px;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-stack);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  color: hsl(var(--black-hsl));
  background: hsl(var(--white-hsl));
}
img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-stack);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.5em;
  white-space: pre-wrap;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
p { margin: 0 0 1em; white-space: pre-wrap; }
p:last-child { margin-bottom: 0; }

/* rich-text size variants, same fluid scale as headings */
.sqsrte-large { font-size: calc(0.5 * 1.2vw + 1rem); }
.sqsrte-small { font-size: 0.9rem; }

.meta, .caption {
  font-family: var(--meta-font-stack);
  font-weight: 200;
  line-height: 1.2;
  font-size: 1rem;
}

/* --------------------------------------------------------------- header */
.site-header {
  padding: 5vw var(--mobile-site-gutter);
  background: hsl(var(--light-accent-hsl));
}
@media (min-width: 768px) {
  .site-header { padding: 1.2vw var(--site-gutter); }
}
.site-title {
  /* live site-title-font: heading family/weight at 1.5rem */
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  color: hsl(var(--black-hsl));
}
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: hsl(var(--light-accent-hsl));
  padding: 0.5rem 1rem;
  z-index: 100;
}

/* --------------------------------------------------------------- themes */
.theme-light        { background: hsl(var(--light-accent-hsl)); color: hsl(var(--black-hsl)); }
.theme-light-bold   { background: hsl(var(--light-accent-hsl)); color: hsl(var(--dark-accent-hsl)); }
.theme-white,
.theme-white-bold   { background: hsl(var(--white-hsl)); color: hsl(var(--black-hsl)); }
.theme-bright       { background: hsl(var(--accent-hsl)); color: hsl(var(--black-hsl)); }
.theme-bright-inverse { background: hsl(var(--black-hsl)); color: hsl(var(--accent-hsl)); }
.theme-dark-bold    { background: hsl(var(--dark-accent-hsl)); color: hsl(var(--white-hsl)); }

/* ---------------------------------------------------------- fluid grid
   Mirrors the live site's Fluid Engine geometry:
   mobile = 8 content columns, desktop (≥768px) = 24 content columns,
   with per-block grid areas carried over from the original layout via
   the --gm (mobile) and --gd (desktop) custom properties. */
.page-section { position: relative; }

.fgrid {
  --cell-max: calc((var(--site-max-width) - (var(--grid-gap) * 7)) / 8);
  --edge: calc(var(--mobile-site-gutter) - var(--grid-gap));
  display: grid;
  grid-template-rows: repeat(var(--rm), minmax(24px, auto));
  grid-template-columns:
    minmax(var(--edge), 1fr)
    repeat(8, minmax(0, var(--cell-max)))
    minmax(var(--edge), 1fr);
  gap: var(--grid-gap);
  overflow-x: clip;
}

@media (min-width: 768px) {
  .fgrid {
    --cell-max: calc((var(--site-max-width) - (var(--grid-gap) * 23)) / 24);
    --edge: calc(var(--site-gutter) - var(--grid-gap));
    --container-width: min(var(--site-max-width), calc(100vw - var(--site-gutter) * 2));
    grid-template-rows: repeat(var(--rd), minmax(calc(var(--container-width) * 0.0215), auto));
    grid-template-columns:
      minmax(var(--edge), 1fr)
      repeat(24, minmax(0, var(--cell-max)))
      minmax(var(--edge), 1fr);
  }
}

.blk {
  grid-area: var(--gm);
  position: relative;
  min-width: 0;
  /* vertical alignment within the grid area, per breakpoint (--jm/--jd) */
  display: flex;
  flex-direction: column;
  justify-content: var(--jm, flex-start);
}
@media (min-width: 768px) {
  .blk {
    grid-area: var(--gd);
    justify-content: var(--jd, flex-start);
  }
}

/* block content types */
.blk-image, .blk-image a { height: 100%; }
.blk-image img { width: 100%; height: 100%; }
.blk-image img.fit-contain { object-fit: contain; }
.blk-image img.fit-cover { object-fit: cover; }

.blk-hr hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid currentColor;
}
.blk-video .video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.blk-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------- carousel */
.carousel-section { padding: 3rem 0 4rem; }
.carousel {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--mobile-site-gutter);
  scrollbar-width: thin;
}
@media (min-width: 768px) {
  .carousel { padding: 0 var(--site-gutter); }
}
.carousel-slide {
  flex: 0 0 82%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .carousel-slide { flex-basis: 31%; }
}
.carousel-slide img { width: 100%; height: auto; }
.carousel-slide .slide-title { margin: 0.8rem 0 0.2rem; font-weight: 500; }
.carousel-slide .slide-desc { font-size: 0.9rem; }
.carousel-nav {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.8rem var(--mobile-site-gutter) 0;
}
@media (min-width: 768px) {
  .carousel-nav { padding: 0.8rem var(--site-gutter) 0; }
}
.carousel-nav button {
  font: inherit;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}
.carousel-nav button:hover { background: hsla(var(--black-hsl), 0.06); }

/* --------------------------------------------------------------- footer */
.site-footer {
  background: hsl(var(--dark-accent-hsl));
  color: hsl(var(--white-hsl));
  /* matches the live footer's section-height--medium */
  padding-top: 6.6vmax;
  padding-bottom: 6.6vmax;
}
.site-footer .fgrid { --rm: 2; --rd: 5; }
.site-footer a { color: inherit; }