/* The one stylesheet every page links (the playground spec, Appearance).

   The pages are a fictional shop, Meridian Supply, so a block is read where a
   shopper would meet it: in a storefront's chrome, between products and copy.
   Nothing here reaches a block — every rule is scoped to the shop's own
   classes, and a block brings its own styles, as a retailer's paste does.

   The shop is light, whatever scheme the browser asks for. A block brings its
   own ink and no background (ADR-0109), so on a dark page it is nearly
   invisible — which is what a retailer with a dark site sees, and worth
   showing, but not worth making every page of the playground do to whoever
   opens it. `block-dark-page.html` is that page, and it declares the dark
   palette itself, so the case holds however the machine reading it is set.

   No photograph, no web font and no animation: the suite runs offline, and a
   page that moves would change what the snippet's observer sees. Pictures are
   drawn in CSS instead, and the type does the work.

   Spacing is a scale of four, and what separates two things says how related
   they are: `--tight` inside one thing, `--snug` between parts of one thing,
   `--gap` between sections, `--break` where the subject changes. A page never
   holds empty space instead of content — where two blocks have to be read
   apart, the shop's own sections go between them. */

:root {
  color-scheme: light;

  --page: #fcfcfb;
  --surface: #f3f2ef;
  --ink: #14151a;
  --ink-soft: #5c5f6a;
  --line: #e3e2de;
  --accent: #1638c9;
  --accent-soft: #eceffd;

  --sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
    sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', monospace;

  --measure: 1120px;
  --prose: 62ch;
  --gutter: 20px;
  --radius: 10px;

  --tight: 10px;
  --snug: 18px;
  --gap: 34px;
  --break: 52px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --tight: 12px;
    --snug: 22px;
    --gap: 48px;
    --break: 84px;
  }
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

/* A label: the shop's small type, used for anything that names a thing rather
   than saying it. */
.shop-crumbs,
.rail h2::after,
.note h2,
.shop-foot h2 {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── The shop's chrome ─────────────────────────────────────────────────────── */

.shop-bar {
  border-bottom: 1px solid var(--line);
  background: var(--page);
}

.shop-bar__inner,
.shop-head__inner,
.shop-foot__inner,
main {
  width: min(100% - var(--gutter) * 2, var(--measure));
  margin-inline: auto;
}

.shop-bar__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 0.8);
  height: 64px;
}

.shop-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.shop-mark::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--accent);
}

.shop-nav {
  display: flex;
  flex: 1;
  gap: var(--snug);
  font-size: 14px;
}

.shop-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1.5px solid transparent;
}

.shop-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.shop-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

.shop-search {
  width: 168px;
  height: 32px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  line-height: 30px;
}

/* ── What the page is ──────────────────────────────────────────────────────── */

.shop-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.shop-head__inner {
  padding-block: var(--gap);
}

.shop-head h1 {
  margin: 12px 0 0;
  max-width: 22ch;
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.shop-head p {
  margin: 10px 0 0;
  max-width: var(--prose);
  font-size: 16.5px;
  color: var(--ink-soft);
}

/* ── The page's own body ───────────────────────────────────────────────────── */

main {
  display: grid;
  gap: var(--gap);
  padding-block: var(--gap) var(--break);
}

/* A block is a foreign object on the page, so the shop's own sections hold
   further off one than they do off each other.

   The space is the sections' own margin rather than the block's, because a
   block sets `margin: 0` on itself and does it by its attribute, which wins:
   a rule here that put a margin on a figure would silently do nothing. That
   is also why the gap is the grid's and not a margin — and why these two
   rules leave a run of blocks at the plain gap, which is what a set of
   Designs read side by side wants. */
main > *:has(+ figure) {
  margin-block-end: calc(var(--break) - var(--gap));
}

main > figure + * {
  margin-block-start: calc(var(--break) - var(--gap));
}

/* Pictures, drawn rather than loaded. */
.art {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(
    135deg,
    var(--surface) 0%,
    color-mix(in srgb, var(--ink) 6%, var(--surface)) 58%,
    var(--surface) 100%
  );
  overflow: hidden;
}

/* An object on a backdrop, drawn: a soft floor shadow and a shape standing on
   it, so a card reads as a product without loading a photograph. */
.art::before {
  content: '';
  position: absolute;
  inset: auto 18% 14%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--ink) 14%, transparent),
    transparent 70%
  );
}

.art::after {
  content: '';
  position: absolute;
  inset: 22% 30% 18%;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 14px 14px 18px 18px / 10px 10px 26px 26px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--page) 92%, var(--ink)),
    color-mix(in srgb, var(--ink) 4%, transparent)
  );
}

.art--square {
  aspect-ratio: 1;
}

.art--accent {
  background: linear-gradient(
    135deg,
    var(--accent-soft) 0%,
    color-mix(in srgb, var(--accent) 18%, var(--accent-soft)) 60%,
    var(--accent-soft) 100%
  );
}

/* The opening of a page: copy on the left, one picture beside it. */
.lead {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--break);
}

.lead h2 {
  margin: 0;
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 640;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.lead p {
  margin: var(--tight) 0 0;
  max-width: 44ch;
  color: var(--ink-soft);
}

.lead a {
  display: inline-block;
  margin-top: var(--snug);
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--page);
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
}

.lead a:active {
  transform: translateY(1px);
}

/* A row of products, under a header row of its own. */
.rail h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--snug);
  padding-bottom: var(--tight);
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rail h2::after {
  content: 'View all';
}

.rail ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail li {
  display: grid;
  gap: var(--tight);
}

.rail b {
  font-size: 14.5px;
  font-weight: 550;
}

.rail span {
  font: 400 13.5px/1 var(--mono);
  color: var(--ink-soft);
}

/* Editorial copy: what it is on the left, what it says on the right. */
.note {
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, var(--prose));
  gap: var(--snug) var(--gap);
  padding-top: var(--snug);
  border-top: 1px solid var(--line);
}

/* Opening a page, it needs no rule: the head band above it already draws one. */
main > .note:first-child {
  padding-top: 0;
  border-top: 0;
}

.note h2 {
  grid-column: 1;
  margin: 0;
  padding-top: 5px;
}

.note p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-soft);
}

/* Where a page carries a control: the shop's own strip, so the control has a
   place rather than standing in the open. */
.act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--snug) var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.act h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.act p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.act a,
.act button {
  flex: none;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--page);
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
}

.act a:active,
.act button:active {
  transform: translateY(1px);
}

/* A looping carousel: a window a slide wide, the rest of the track clipped
   beside it, and the controls a shopper steers it with. Inert, like the rest
   of the shop — the page is here to be read, not driven. */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--snug) calc(var(--gap) * 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* A slide is the window's full width and carries the room the arrows stand
   in, so the slide beside it begins where the window ends and is clipped —
   padding on the window would leave the next slide showing through it. */
.carousel > div {
  flex: 0 0 100%;
  padding-inline: calc(var(--gap) * 1.3);
}

.carousel__arrow {
  position: absolute;
  top: calc(50% - 16px);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
}

.carousel__arrow--prev {
  left: var(--snug);
}

.carousel__arrow--next {
  right: var(--snug);
}

.carousel__dots {
  position: absolute;
  bottom: var(--snug);
  left: 50%;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.carousel__dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.carousel__dots span:first-child {
  background: var(--accent);
}

.shop-foot {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.shop-foot__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding-block: var(--gap);
  font-size: 14px;
}

.shop-foot h2 {
  margin: 0 0 var(--tight);
}

.shop-foot ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}

/* ── The index ─────────────────────────────────────────────────────────────── */

.index a {
  display: grid;
  grid-template-columns: minmax(0, 24ch) 1fr;
  gap: var(--gap);
  align-items: baseline;
  padding-block: var(--snug);
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

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

.index a:hover {
  background: var(--accent-soft);
}

.index b {
  font-size: 15.5px;
  font-weight: 600;
}

.index span {
  color: var(--ink-soft);
  font-size: 14.5px;
}

@media (max-width: 767px) {
  .shop-nav,
  .shop-tools {
    display: none;
  }

  .act,
  .lead,
  .note,
  .rail ol,
  .shop-foot__inner,
  .index a {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .note p,
  .note h2 {
    grid-column: 1;
  }

  .carousel {
    padding-inline: var(--snug);
  }

  .carousel__arrow {
    display: none;
  }
}