/* ============================================================================
   BRIDGES 111-130 — thirteen stores and seven websites.
   ==========================================================================*/
/* ---- colophon (Colophon — Signed editions & fine printing 130) -------------
   THE STRUCTURAL MOVE: the page steps from its widest to its narrowest in one
   jump, and does it twice. The plate holds the whole first viewport; the page
   then collapses to a single 640px column with 128px of air on either end and
   nothing else in the band — no photograph, no tile, no rule. The six showcase
   panels open it back to full width, and the shared A/B checkerboard is
   switched OFF: each panel is marked by a slate rule at its head and separated
   by a real 26px gutter, so they read as six repeated units rather than a woven
   grid. Then the page contracts a second time for the awards, which are set
   line-per-line off `white-space: pre-line` — a ledger with no table, no
   hairline and no photography anywhere in the band. Ochre lands in exactly
   three places (hero slab, buy control, band submit) plus the price, and never
   touches body copy; headings and rules are slate throughout. */
body.t-colophon {
  background: #f3eee2;
  color: #23211c;
  --cl-slate: #3d5470;
  --cl-ochre: #a8762a;
  --bg-flat: #f3eee2;
  --surface: #faf7ef;
  --surface-2: #ece5d5;
  --line: #ded5c2;
  --line-strong: #c6bba3;
  --heading: #1a1916;
  --text: #23211c;
  --muted: #6f6a5e;
  --header-bg: #f3eee2;
  --radius: 0;
  --shadow: none;
}

/* the bar keeps a flat paper ground and a hairline — no blur, nothing glassy,
   so it reads as the head of a printed page rather than as an app chrome */
body.t-colophon .sf-header, body.t-colophon .sf-head,
body.t-colophon .sf-footer, body.t-colophon .sf-foot, body.t-colophon .sf-cats {
  background: #f3eee2; border-color: #ded5c2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-colophon .sf-name { font-family: var(--sf-serif); font-weight: 500; font-size: 21px; letter-spacing: 0.01em; }

/* OCHRE — the only warm mark on the page, and only ever on a control */
body.t-colophon .btn.brand { background: var(--cl-ochre); border-color: var(--cl-ochre); color: #fffaf0; box-shadow: none; font-weight: 600; padding: 14px 30px; }
body.t-colophon .btn.brand:hover { background: #8d611f; border-color: #8d611f; }

/* the plate: one held frame, full viewport, the name very large and dead centre
   over it and one solid slab beneath — nothing else on the first screen */
body.t-colophon .sc-hero { min-height: 100vh; padding: 20px; }
body.t-colophon .sc-hero-inner { max-width: 900px; }
body.t-colophon .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(42px, 8vw, 104px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 18px; }
body.t-colophon .sc-hero p { font-size: clamp(15px, 1.6vw, 18px); max-width: 560px; margin-left: auto; margin-right: auto; }

body.t-colophon .sc-h2 { font-family: var(--sf-serif); font-weight: 400; color: var(--cl-slate); font-size: clamp(22px, 3vw, 34px); letter-spacing: -0.01em; margin-bottom: 24px; }

/* THE NARROW STEP — both contained columns, imageless, with more air above and
   below than anything else gets. `pre-line` is what turns the awards body into
   a line-per-line ledger; the prose column has no newlines so it is unaffected. */
body.t-colophon .sc-richtext { max-width: 640px; padding: 128px 20px 132px; text-align: center; }
body.t-colophon .sc-richtext p { white-space: pre-line; font-size: 17px; line-height: 2; color: var(--text); }

/* THE WIDE STEP — six half-width panels, two across, three rows, with real
   gutters and the checkerboard switched off so every unit is identical */
body.t-colophon .sc-show-grid { gap: 26px; }
body.t-colophon .sc-show-item,
body.t-colophon .sc-show-item:nth-child(4n + 2),
body.t-colophon .sc-show-item:nth-child(4n + 3) { background: #faf7ef; border-top: 2px solid var(--cl-slate); }
body.t-colophon .sc-show-cat { color: var(--cl-slate); letter-spacing: 0.24em; font-size: 10.5px; }
body.t-colophon .sc-show-t { font-family: var(--sf-serif); text-transform: none; font-weight: 400; font-size: clamp(19px, 2.1vw, 25px); letter-spacing: 0; }
body.t-colophon .sc-show-rule { background: var(--cl-slate); opacity: 1; width: 24px; height: 1px; }
body.t-colophon .sc-show-price { color: var(--cl-ochre); font-family: var(--sf-serif); font-weight: 500; }

/* one photograph, one line, nothing to click */
body.t-colophon .sc-banner { min-height: 58vh; }
body.t-colophon .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; }

body.t-colophon .sc-contact-band { background: #ece5d5; border-top: 1px solid #ded5c2; padding: 92px 0 104px; }

/* NIGHT — paper goes to printer's black, the slate lifts to a cold blue so the
   panel rules and headings still separate, and the ochre warms and brightens
   because it is carrying every control on the page on its own. */
html[data-theme="dark"] body.t-colophon {
  background: #17161a;
  color: #c8c3b6;
  --cl-slate: #8fa9c6;
  --cl-ochre: #d2a24e;
  --bg-flat: #17161a;
  --surface: #1e1d22;
  --surface-2: #24232a;
  --line: #302f36;
  --line-strong: #43424a;
  --heading: #f4efe3;
  --text: #c8c3b6;
  --muted: #8b8679;
  --header-bg: #17161a;
}
html[data-theme="dark"] body.t-colophon .sf-header, html[data-theme="dark"] body.t-colophon .sf-head,
html[data-theme="dark"] body.t-colophon .sf-footer, html[data-theme="dark"] body.t-colophon .sf-foot,
html[data-theme="dark"] body.t-colophon .sf-cats { background: #17161a; border-color: #302f36; }
html[data-theme="dark"] body.t-colophon .sc-show-item,
html[data-theme="dark"] body.t-colophon .sc-show-item:nth-child(4n + 2),
html[data-theme="dark"] body.t-colophon .sc-show-item:nth-child(4n + 3) { background: #1e1d22; border-top-color: var(--cl-slate); }
html[data-theme="dark"] body.t-colophon .sc-contact-band { background: #1c1b20; border-top-color: #302f36; }
html[data-theme="dark"] body.t-colophon .btn.brand { color: #1a1509; }