/* ==========================================================================
   ABSTRACT WEBSITE RENDERS — the hero gallery tiles, and the two hero mockups
   in `_compare/`. Built 2026-08-28.

   🔴 THESE ARE DELIBERATELY NOT REAL SCREENSHOTS. Unlaunched client work must
   never appear on a public review site, so the renders stay abstract until
   specific practices are cleared to feature.

   ⚠️ NOTHING HERE MAY BE READ AS A REAL PRACTICE. No names, no logos, no
   readable copy — every "word" is a bar, and the wall is `aria-hidden` in
   full. If a real logo or name is ever added, that stops being true and the
   wall needs alt text AND a clearance conversation.

   🔴 EVERY INTERNAL DIMENSION IS IN `em`, AND THAT IS THE WHOLE POINT.
   The first build sized the internals in fixed px. A tile is laid out by the
   wall's grid, so its width changes with the column — and at 331px wide the
   fixed internals did not grow with it: the render stretched into a wide
   letterbox of thin bars and stopped reading as a website at all. Brees:
   "the formatting doesn't look right."

   Sizing everything in `em` off the tile's own font-size, and driving that
   font-size from the tile's WIDTH, makes the whole thing behave like a scaled
   screenshot: change the column width and the render just gets bigger or
   smaller, never distorted.
   ⚠️ Do not reintroduce a px dimension inside `.wr`. It will look correct at
   exactly one column width.
   ========================================================================== */

.wr {
  --wr-accent: var(--petal);
  --wr-ink: var(--ink);
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  /* An image radius, which the no-rounded-boxes rule explicitly allows: these
     are miniatures standing in for artwork, not copy in a container. */
  border-radius: 0.9em;
  box-shadow: 0 2px 24px rgba(47, 47, 53, 0.10);

  /* 🔴 THE QUERY CONTAINER IS THE TILE'S PARENT, NOT THE TILE. An element
     cannot query ITSELF: `container-type` here plus `font-size: 3.1cqw` here
     resolves against the nearest ANCESTOR container, and with none the unit
     falls back to the VIEWPORT — 3.1% of 1448px is 45px, and every render
     rendered about four times too big. Measured, not guessed.

     So the consumer sets `container-type: inline-size` on whatever wraps the
     tile (`.wsite-gal__col` in the hero, `.marquee__tile` in the mockup), and
     this only reads from it.
     ⚠️ A NEW CONTEXT USING `.wr` MUST DECLARE THAT CONTAINER or the tiles
     silently blow up to viewport scale.

     The px value is the FALLBACK and it is first on purpose: an engine without
     container query units keeps the original fixed scale rather than
     collapsing.

     3.8cqw IS SET BY THE TILE'S ASPECT RATIO, NOT PICKED. Width comes from the
     column; height comes from these em internals — so this one factor decides
     the proportion of every render. Measured on a 246px column:
         3.1cqw -> 1.52   3.5 -> 1.35   3.8 -> 1.24   4.1 -> 1.15
     1.24 matches the ~1.25 of the mockup Brees approved, where the internals
     were a fixed 10px on a ~250px tile. At 3.1 the renders read as wide
     letterbox stripes rather than websites, which is what he flagged. */
  font-size: 9px;
  font-size: 3.8cqw;
}

/* -- browser chrome ------------------------------------------------------- */

.wr__chrome {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 0.9em;
  background-color: var(--oat);
  border-bottom: 1px solid rgba(47, 47, 53, 0.10);
}

.wr__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: rgba(47, 47, 53, 0.22);
}

.wr__url {
  flex: 1;
  height: 0.8em;
  margin-left: 0.4em;
  border-radius: 999px;
  background-color: rgba(47, 47, 53, 0.10);
}

/* -- the page ------------------------------------------------------------- */

.wr__nav {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 1.1em;
}

.wr__mark {
  width: 1.4em;
  height: 1.4em;
  border-radius: 0.4em;
  background-color: var(--wr-accent);
}

.wr__navbar {
  height: 0.4em;
  width: 2.2em;
  border-radius: 999px;
  background-color: rgba(47, 47, 53, 0.16);
}
.wr__navbar--sm { width: 1.5em; }
.wr__nav .wr__navbar:first-of-type { margin-left: auto; }

/* The hero band — the one place a render carries real colour, so a wall of
   these reads as a row of DIFFERENT sites rather than one site repeated. */
.wr__hero {
  position: relative;
  padding: 1.6em 1.1em 1.9em;
  background-color: var(--wr-accent);
}

.wr__h1 {
  height: 0.75em;
  width: 78%;
  margin-bottom: 0.5em;
  border-radius: 0.3em;
  background-color: var(--wr-ink);
  opacity: 0.85;
}
.wr__h1--short { width: 54%; }

.wr__sub {
  height: 0.4em;
  width: 66%;
  margin-bottom: 0.9em;
  border-radius: 999px;
  background-color: var(--wr-ink);
  opacity: 0.42;
}

.wr__btn {
  height: 1.1em;
  width: 4.4em;
  border-radius: 999px;
  background-color: var(--wr-ink);
  opacity: 0.88;
}

/* The brand's own circle device showing up inside the miniature. */
.wr__disc {
  position: absolute;
  right: -1.4em;
  bottom: -1.8em;
  width: 5.4em;
  height: 5.4em;
  border-radius: 50%;
  background-color: var(--white);
  opacity: 0.55;
}

.wr__body { padding: 1.1em; }

.wr__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  margin-bottom: 0.9em;
}

.wr__card {
  height: 2.6em;
  border-radius: 0.5em;
  background-color: var(--oat);
}

.wr__line {
  height: 0.4em;
  border-radius: 999px;
  background-color: rgba(47, 47, 53, 0.13);
  margin-bottom: 0.4em;
}
.wr__line--80 { width: 80%; }
.wr__line--60 { width: 60%; }
.wr__line--90 { width: 90%; }

/* -- the five site "identities" ------------------------------------------
   Only the accent changes, so each render reads as a different practice
   without any of them naming one.
   ⚠️ --indigo is a DARK accent, so it flips the bars to a light ink or they
   disappear into the band. */
.wr--petal { --wr-accent: var(--petal); }
.wr--lime  { --wr-accent: var(--lime); }
.wr--sky   { --wr-accent: var(--sky); }
.wr--oat   { --wr-accent: var(--oat); }

.wr--indigo { --wr-accent: var(--indigo); --wr-ink: var(--oat); }
.wr--indigo .wr__sub { opacity: 0.55; }

/* Two proportions so a column is not a stack of identical rectangles. */
.wr--tall .wr__hero { padding-bottom: 3.2em; }
.wr--flat .wr__body { padding-bottom: 0.7em; }
.wr--flat .wr__cards { margin-bottom: 0.5em; }


/* -- the rest of the page ------------------------------------------------
   A render is a FULL-LENGTH homepage, not one screen. That is what makes it
   portrait in layout, which is what lets a steep rake foreshorten it back to
   a readable browser-window shape. See hero-gallery.js.
   ⚠️ Shortening a render re-creates the stripe: the tilt squashes whatever
   height the tile has, so a short tile paints as a bar. */

.wr__band {
  height: 5.2em;
  background-color: var(--oat);
}
.wr__band--b { background-color: rgba(47, 47, 53, 0.06); }

.wr__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
  padding: 0 1.1em 1.1em;
}

.wr__half {
  height: 4.4em;
  border-radius: 0.5em;
  background-color: var(--oat);
}

.wr__foot {
  height: 3.4em;
  background-color: rgba(47, 47, 53, 0.08);
}