/* ==========================================================================
   Bota — the miniature websites.
   --------------------------------------------------------------------------
   Six compositions, written by hand in HTML and CSS. They are not screenshots
   and not one component recoloured six times: each sets its own type, colour,
   rhythm and grid, because the claim the page makes is that a recipe changes
   the *composition*, and a row of identical cards would disprove it on sight.

   Two rules make them work at any size:

   1. Every site is its own query container and sizes itself in `cqw`, so the
      same markup reads as a website at 320px, at 560px and at 1100px. Nothing
      is a scaled-down screenshot; the type is really that size.
   2. Every site owns its palette. A generated site is not a Bota site, so
      none of these follow the landing page's theme or use its orange. Two of
      them have no accent colour at all.
   ========================================================================== */

.site {
  /* Defaults. Each variant overrides what it needs and inherits the rest. */
  --paper: #ffffff;
  --ink: #1a1815;
  --dim: #6d675f;
  --line: #e9e4dd;
  --accent: #16233d;
  --accent-ink: #ffffff;
  --tint: var(--accent);
  --display-font: var(--font-sans);
  --display-size: 7.2cqw;
  --display-weight: 640;
  --display-track: -0.034em;
  --display-lh: 1.04;
  --s-pad: 5.4cqw;
  --s-gap: 3.8cqw;
  --radius: 1.5cqw;

  container-type: inline-size;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-gap);
  padding: var(--s-pad);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.008em;
  overflow: hidden;
}

/* ── Masthead ─────────────────────────────────────────────────────────────
   One row, three slots, and the slots each site leaves empty are half of what
   makes them look unrelated.
   ------------------------------------------------------------------------ */
.site__bar {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding-bottom: 2.8cqw;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.site__word {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: 3.3cqw;
  font-weight: 620;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.site__logo {
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 28%;
  background: var(--tint);
  flex: none;
}

.site__nav {
  display: flex;
  gap: 2.8cqw;
  margin-left: auto;
  font-size: 2.35cqw;
  color: var(--dim);
}

.site__nav i {
  font-style: normal;
  white-space: nowrap;
}

.site__cta {
  padding: 1.1cqw 2.4cqw;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 2.2cqw;
  font-weight: 520;
  white-space: nowrap;
  flex: none;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.site__hero {
  display: grid;
  gap: 2.4cqw;
  padding-block: 1.4cqw;
  align-content: start;
}

.site__eyebrow {
  font-family: var(--font-mono);
  font-size: 2cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tint);
}

.site__display {
  font-family: var(--display-font);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
  margin: 0;
  text-wrap: initial;
}

.site__note {
  font-size: 2.5cqw;
  line-height: 1.5;
  color: var(--dim);
  max-width: 58cqw;
}

.site__btn {
  justify-self: start;
  padding: 1.7cqw 3.4cqw;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 2.3cqw;
  font-weight: 530;
}

/* ── Bands the sites are built from ─────────────────────────────────────── */

/* Three statements in a row, set as text rather than as boxes. */
.site__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3cqw;
  padding-top: 3cqw;
  border-top: 1px solid var(--line);
}

.site__row span {
  display: grid;
  gap: 0.8cqw;
  align-content: start;
}

.site__row b {
  font-size: 2.5cqw;
  font-weight: 560;
}

.site__row i {
  font-style: normal;
  font-size: 2.2cqw;
  color: var(--dim);
  line-height: 1.42;
}

.site__row--tight b {
  font-size: 2.3cqw;
}

.site__row--tight i {
  font-size: 2.05cqw;
}

/* A gallery: one tall plate and two beside it. Equal thirds is the shape
   every template uses, so no gallery here is equal thirds.

   The grid carries the ratio and the plates fill their cells, rather than
   each plate carrying its own — three aspect ratios negotiating inside one
   grid is how a gallery ends up with a half-inch of dead space in it. */
.site__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.2cqw;
  aspect-ratio: 16 / 10.4;
  min-height: 0;
}

.site__grid > :first-child {
  grid-row: span 2;
}

.site__grid .plate {
  aspect-ratio: auto;
  height: 100%;
}

/* An index — the device a practice with a back catalogue actually uses. */
.site__index {
  display: grid;
}

.site__index li {
  display: flex;
  align-items: baseline;
  gap: 3cqw;
  padding-block: 2.1cqw;
  border-top: 1px solid var(--line);
  font-size: 2.5cqw;
}

.site__index li:last-child {
  border-bottom: 1px solid var(--line);
}

/* One rule between the index and the colophon, not two with a gap in it. */
.site__index + .site__end {
  border-top: 0;
}

.site__index b {
  font-weight: 540;
}

.site__index i {
  font-style: normal;
  color: var(--dim);
  font-size: 2.2cqw;
}

.site__index em {
  font-style: normal;
  margin-left: auto;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  font-size: 2.2cqw;
}

/* A panel that shows the thing working, in place of a paragraph claiming it
   does. Three rows, no chrome. */
.site__panel {
  display: grid;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.4);
  overflow: hidden;
}

.site__panel-row {
  display: flex;
  align-items: baseline;
  gap: 2.4cqw;
  padding: 2.2cqw 3cqw;
  font-size: 2.3cqw;
  border-bottom: 1px solid var(--line);
}

.site__panel-row:last-child {
  border-bottom: 0;
}

.site__panel-row b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 2.2cqw;
  color: var(--tint);
}

.site__panel-row i {
  font-style: normal;
  margin-left: auto;
  color: var(--dim);
  font-size: 2.1cqw;
}

.site__panel-row--muted {
  opacity: 0.55;
}

.site__split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3cqw;
  align-items: stretch;
}

.site__list {
  display: grid;
  align-content: center;
}

.site__list li {
  display: flex;
  align-items: baseline;
  gap: 2cqw;
  padding-block: 1.9cqw;
  border-bottom: 1px solid var(--line);
  font-size: 2.4cqw;
}

.site__list li:last-child {
  border-bottom: 0;
}

.site__list b {
  font-weight: 540;
}

.site__list i {
  font-style: normal;
  margin-left: auto;
  color: var(--dim);
  font-size: 2.2cqw;
  font-variant-numeric: tabular-nums;
}

.site__end {
  display: flex;
  justify-content: space-between;
  gap: 3cqw;
  margin-top: auto;
  padding-top: 2.6cqw;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 2.05cqw;
  letter-spacing: 0.02em;
  color: var(--dim);
}

/* ══════════════════════ Photographs ══════════════════════
   The page ships no photographs — it has no business inventing a client's —
   so a "photograph" here is three gradients and a texture. At miniature size
   that is enough to read as an image, and it is honest about being drawn:
   look closely and it is plainly light, not a place.
   ═══════════════════════════════════════════════════════ */
.plate {
  --pl-a: #cdb69b;
  --pl-b: #9a8874;
  --pl-c: #4c443c;

  container-type: inline-size;
  position: relative;
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 52%),
    radial-gradient(88% 66% at 24% 14%, rgba(255, 255, 255, 0.4), transparent 64%),
    linear-gradient(198deg, var(--pl-a) 0%, var(--pl-b) 46%, var(--pl-c) 100%);
}

/* The texture. One repeating gradient at a low alpha, which is the difference
   between "a photograph" and "a gradient" at this size. */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    114deg,
    rgba(255, 255, 255, 0.055) 0 1px,
    transparent 1px 4px
  );
}

.plate[data-caption]::after {
  content: attr(data-caption);
  position: absolute;
  left: 5%;
  bottom: 5%;
  font-family: var(--font-mono);
  font-size: clamp(8px, 5.5cqw, 11px);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.plate--band { aspect-ratio: 16 / 5.6; }
.plate--wide { aspect-ratio: 16 / 9; }
.plate--tall { aspect-ratio: 4 / 5; }
.plate--portrait { aspect-ratio: 3 / 4; }
.plate--sq { aspect-ratio: 1 / 1; }

/* ══════════════════════ 1 · Aurora Dental ══════════════════════
   Warm, calm, and photographic. A clinic's site has one job — make the room
   look like somewhere you would sit down — so the picture is in the hero and
   the type stays quiet behind it.
   ═══════════════════════════════════════════════════════════════ */
.site--clinic {
  --paper: #fffdfb;
  --ink: #221f1b;
  --dim: #6f6960;
  --line: #ece6dd;
  --accent: #0f6b62;
  --accent-ink: #ffffff;
  --display-size: 6.4cqw;
  --display-weight: 600;
  --display-track: -0.03em;
}

.site--clinic .site__hero {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: 4cqw;
  align-items: center;
}

.site--clinic .site__hero > div:first-child {
  display: grid;
  gap: 2.2cqw;
  align-content: center;
}

/* The photograph takes the height the copy beside it happens to need, rather
   than imposing a portrait ratio the frame then has to grow to fit. */
.site--clinic .site__hero .plate {
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 24cqw;
}

.site--clinic .plate {
  --pl-a: #e4d7c6;
  --pl-b: #b9a894;
  --pl-c: #57534b;
}

/* ══════════════════════ 2 · Studio Nomad ══════════════════════
   Dark, image-led, captions in mono. The words are a caption to the work
   rather than the other way round.
   ═══════════════════════════════════════════════════════════════ */
.site--photo {
  --paper: #100f0e;
  --ink: #f3efe9;
  --dim: #9d958a;
  --line: #2a2724;
  --accent: #f3efe9;
  --accent-ink: #100f0e;
  --display-font: var(--font-serif);
  --display-size: 8.6cqw;
  --display-weight: 400;
  --display-track: -0.02em;
  --display-lh: 1;
}

.site--photo .site__note {
  max-width: 52cqw;
}

.site--photo .plate {
  --pl-a: #9fb4c4;
  --pl-b: #5b6f80;
  --pl-c: #191d22;
}

.site--photo .site__grid > :nth-child(2) .plate,
.site--photo .site__grid > :nth-child(3) {
  --pl-a: #c3c0b4;
  --pl-b: #6d6f6b;
  --pl-c: #201f1d;
}

/* ══════════════════════ 3 · Meter ══════════════════════
   Crisp and structured. Cooler ink than the rest of the page, one saturated
   accent, and a nav that carries a call to action because a product's does.
   ═══════════════════════════════════════════════════════ */
.site--product {
  --paper: #ffffff;
  --ink: #12151b;
  --dim: #5f6672;
  --line: #e9ecf1;
  --accent: #1b47d0;
  --accent-ink: #ffffff;
  --display-size: 6.6cqw;
  --display-weight: 660;
  --display-track: -0.038em;
  --display-lh: 1.02;
  --radius: 1.2cqw;
}

/* ══════════════════════ 4 · Meridian ══════════════════════
   The editorial one: plaster ground, a serif at display size, wide margins,
   and no accent colour anywhere. The only saturated thing on the page is the
   photograph, which is how a practice that builds in brick would set it.
   ═══════════════════════════════════════════════════════════ */
.site--meridian {
  --paper: #f7f4ef;
  --ink: #16140f;
  --dim: #6c6558;
  --line: #ddd6c8;
  --accent: #16140f;
  --accent-ink: #f7f4ef;
  --display-font: var(--font-serif);
  --display-size: 9.2cqw;
  --display-weight: 400;
  --display-track: -0.022em;
  --display-lh: 0.98;
  --s-pad: 5cqw;
  --s-gap: 3.4cqw;
}

.site--meridian .site__word {
  font-family: var(--font-mono);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site--meridian .site__nav {
  font-family: var(--font-mono);
  font-size: 2.05cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site--meridian .site__hero {
  padding-block: 2.6cqw 1cqw;
}

.site--meridian .site__note {
  max-width: 46cqw;
}

.site--meridian .plate {
  --pl-a: #d9cbb4;
  --pl-b: #9c8f7c;
  --pl-c: #3f3a33;
}

/* ══════════════════════ 5 · Kiln & Clay ══════════════════════
   Bold: the work is the first thing on the page, at the top, before anyone
   has been told what they are looking at.
   ═══════════════════════════════════════════════════════════ */
.site--kiln {
  --paper: #191512;
  --ink: #f1e9dd;
  --dim: #a2968a;
  --line: #2c2621;
  --accent: #f1e9dd;
  --accent-ink: #191512;
  --display-size: 8cqw;
  --display-weight: 620;
  --display-track: -0.036em;
  --display-lh: 1;
  --s-gap: 3.4cqw;
}

.site--kiln .site__word {
  font-size: 3cqw;
  letter-spacing: 0.02em;
}

.site--kiln .site__grid {
  grid-template-columns: 1.35fr 1fr;
}

.site--kiln .plate {
  --pl-a: #d9a273;
  --pl-b: #a3673c;
  --pl-c: #2c1e15;
}

.site--kiln .site__grid > :nth-child(3) {
  --pl-a: #c9c2b2;
  --pl-b: #7d7365;
  --pl-c: #241d18;
}

/* ══════════════════════ 6 · Fathom ══════════════════════
   Premium: near-black actions, one blue reserved for the eyebrow and the
   version numbers, and a panel doing the talking.
   ═══════════════════════════════════════════════════════ */
.site--fathom {
  --paper: #ffffff;
  --ink: #0f1116;
  --dim: #5e6572;
  --line: #e8eaef;
  --accent: #12141a;
  --accent-ink: #ffffff;
  --tint: #2b52e8;
  --display-size: 7.4cqw;
  --display-weight: 640;
  --display-track: -0.04em;
  --display-lh: 1.03;
  --radius: 1.2cqw;
}

.site--fathom .site__hero {
  padding-block: 2.6cqw 1.4cqw;
}

/* ══════════════════════ 7 · Verano — the restyled sample ══════════════════
   The one composition the visitor operates. Style presets and brand hues are
   applied in demos.css; everything structural lives here so that switching a
   style changes typography and density, not the markup.
   ═══════════════════════════════════════════════════════════════ */
.site--lab {
  --paper: #fffdfa;
  --ink: #1c1a17;
  --dim: #6b665f;
  --line: #eae5dd;
  --accent: var(--lab-accent, #b8470a);
  --accent-ink: var(--lab-accent-ink, #ffffff);
  --tint: var(--accent);
  --display-size: 7cqw;
  transition: background var(--dur-base) var(--ease-crisp),
    color var(--dur-base) var(--ease-crisp);
}

.site--lab .site__display,
.site--lab .site__btn,
.site--lab .site__cta,
.site--lab .site__eyebrow,
.site--lab .site__logo {
  transition: font-size var(--dur-base) var(--ease-out),
    letter-spacing var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-crisp),
    color var(--dur-base) var(--ease-crisp),
    border-radius var(--dur-base) var(--ease-out);
}

.site--lab .site__split {
  min-height: 0;
}

.site--lab .plate {
  --pl-a: #e0cdb4;
  --pl-b: #ab8f72;
  --pl-c: #423731;
  height: 100%;
}

/* ── Narrow miniatures ───────────────────────────────────────────────────
   Below about 380px of frame width a nav with four items and a button stops
   being a masthead and becomes a scramble, so the sites shed what a real
   responsive site sheds — in their own container query, not the page's.
   ------------------------------------------------------------------------ */
@container (max-width: 380px) {
  .site__nav i:nth-child(n + 3) {
    display: none;
  }

  .site__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4cqw;
  }

  .site__row span:nth-child(3) {
    display: none;
  }

  .site--clinic .site__hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .site--clinic .site__hero .plate {
    display: none;
  }
}

@container (max-width: 300px) {
  .site__nav {
    display: none;
  }

  .site__index li:nth-child(3),
  .site__panel-row:nth-child(3) {
    display: none;
  }
}