/* ---- bril (Bril — Spectacles, frames & lens fitting 206) -------------------
   THE STRUCTURAL MOVE: the page runs picture · breath · picture, and the
   BREATH is deliberately built taller than the pictures. The alternating
   lookbook is flattened into one three-across wall — six frames in two rows
   that fill — and it is the only crowded thing on the site; the imageless
   text band immediately after it is given more vertical room than that wall,
   so the empty stretch reads as a beat the page takes on purpose rather than
   a gap somebody forgot to fill. Everything else is paper and air: a
   three-slide full-viewport stage carrying nothing but the name, a contained
   band with the copy LEFT and one large picture right, one full-bleed plate,
   and flat tiles to close. Cobalt is spent on three jobs and never fills a
   block — the rand line, the hairline under the hero button, the fitting
   slab. Nothing in here reorders, positions or stacks anything inside the
   header; the bar itself goes transparent over the first slide and that is
   the whole of it. */
body.t-bril {
  background: #f6f6f4;
  color: #3a3835;
  --brl-cobalt: #2b4bd8;
  --bg-flat: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #eeeeea;
  --line: #e2e2dd;
  --line-strong: #c9c9c2;
  --heading: #131211;
  --text: #3a3835;
  --muted: #77746e;
  --header-bg: #f6f6f4;
  --radius: 0;
  --shadow: none;
}

/* flat paper bar, unblurred, the wordmark set as a catalogue label */
body.t-bril .sf-header, body.t-bril .sf-head,
body.t-bril .sf-footer, body.t-bril .sf-foot, body.t-bril .sf-cats {
  background: #f6f6f4; border-color: #e2e2dd;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-bril .sf-name { font-size: 14px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; }

/* the bar lies on the first slide and scrolls off with it — landing page only,
   because graphite ink on a white product page would simply vanish */
body.t-bril:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; }
body.t-bril:has(.sc-hero) .sf-name, body.t-bril:has(.sc-hero) .sf-navlink,
body.t-bril:has(.sc-hero) .sf-header .sf-cart, body.t-bril:has(.sc-hero) .sf-searchbtn,
body.t-bril:has(.sc-hero) .sf-header .theme-toggle { color: #ffffff; }
/* the category rail steps aside under the transparent bar, and the catalogue
   drops its blurb — a frame is a photograph, a name and a price, nothing else */
body.t-bril:has(.sc-hero) .sf-cats, body.t-bril .sc-look-desc { display: none; }

/* flat ink slab with no edge anywhere on it */
body.t-bril .btn.brand { background: #131211; border: 0; border-radius: 0; box-shadow: none; color: #f6f6f4; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 27px; }
body.t-bril .btn.brand:hover { background: var(--brl-cobalt); color: #ffffff; opacity: 1; }

/* THE STAGE — three plates, the name as large as the grid will carry it, one
   tracked line of place-and-trade, and a ghost that is a word and a cobalt rule */
body.t-bril .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-bril .sc-hero h1 { font-size: clamp(72px, 17vw, 208px); font-weight: 600; line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: none; margin: 0 0 26px; }
body.t-bril .sc-hero p { font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; text-shadow: none; margin: 0 0 44px; }
body.t-bril .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 0; box-shadow: inset 0 -2px 0 var(--brl-cobalt); color: #ffffff; padding: 7px 2px; }

/* every heading flush left; only the two full-bleed things are ever centred */
body.t-bril .sc-h2 { text-align: left; font-size: clamp(23px, 3vw, 34px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--heading); }

/* THE ABOUT BAND — copy LEFT, one large picture right, wide outer margins,
   closing on a quiet rule of type instead of a slab */
body.t-bril .sc-about-split { max-width: 1010px; grid-template-columns: 1fr 1fr; gap: 62px; padding: 118px 20px 104px; }
body.t-bril .sc-about-media { order: 2; }
body.t-bril .sc-about-copy p, body.t-bril .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.85; }
body.t-bril .sc-about-copy::after { content: 'How a fitting works'; display: inline-block; margin-top: 28px; padding-bottom: 4px; box-shadow: inset 0 -1px 0 var(--line-strong); color: var(--heading); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }

/* THE ONE DENSE BLOCK — six frames three across in two rows that fill, the
   rand sitting under the frame and never over it */
body.t-bril .sc-lookbook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 30px; max-width: 1080px; margin: 0 auto; padding: 0 20px 26px; }
body.t-bril .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 0 0 16px; }
body.t-bril .sc-look-row { display: block; }
body.t-bril .sc-look-media img, body.t-bril .sc-strip-img { aspect-ratio: 1; border: 0; border-radius: 0; background: #ffffff; }
body.t-bril .sc-look-copy { padding: 18px 0 0; }
body.t-bril .sc-look-cat, body.t-bril .sc-strip-card::after { display: block; color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
body.t-bril .sc-look-t { margin: 9px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
body.t-bril .sc-look-p { margin: 8px 0 16px; font-size: 15px; font-weight: 600; color: var(--brl-cobalt); }
body.t-bril .btn.brand.sc-look-btn { padding: 11px 21px; }

/* THE BREATH — no picture, no rule, and deeper than the wall it follows */
body.t-bril .sc-richtext { max-width: 620px; padding: 152px 20px; text-align: left; }

/* the single full-bleed plate, where the reference put its video */
body.t-bril .sc-banner { min-height: 68vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); padding: 60px 28px; }
body.t-bril .sc-banner h2, body.t-bril .sc-banner p { text-shadow: none; }
body.t-bril .sc-banner h2 { font-size: clamp(26px, 3.6vw, 46px); font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; margin: 0 0 14px; }
body.t-bril .sc-banner .btn.brand { background: #f6f6f4; color: #131211; }

/* the close: six flat tiles, a label and a small read-more, nothing more */
body.t-bril .sc-strip { max-width: 1080px; padding: 104px 20px 96px; }
body.t-bril .sc-strip-row { grid-template-columns: repeat(3, 1fr); gap: 42px 30px; }
body.t-bril .sc-strip-card::after { content: 'Read more'; margin-top: 9px; }

/* the quiet close, and the third and last cobalt on the page */
body.t-bril .sc-contact { max-width: 520px; padding: 8px 20px 124px; text-align: left; }
body.t-bril .sc-contact-form .btn.brand { background: var(--brl-cobalt); color: #ffffff; align-self: stretch; }

@media (max-width: 900px) {
  body.t-bril .sc-lookbook, body.t-bril .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-bril .sc-hero h1 { font-size: clamp(54px, 21vw, 108px); }
  body.t-bril .sc-richtext { padding: 86px 20px; }
  body.t-bril .sc-about-split { padding: 74px 20px 66px; }
}

/* NIGHT — the paper goes to a cool near-black, the slabs invert to bone, and
   the cobalt lifts because it is still carrying the rand line, the hero
   hairline and the fitting button on its own. */
html[data-theme="dark"] body.t-bril {
  background: #0d0d0c;
  color: #b6b3ac;
  --brl-cobalt: #6d86f0;
  --bg-flat: #0d0d0c;
  --surface: #141413;
  --surface-2: #1a1a18;
  --line: #262624;
  --line-strong: #3a3a36;
  --heading: #f2f0ea;
  --text: #b6b3ac;
  --muted: #85827b;
  --header-bg: #0d0d0c;
}
html[data-theme="dark"] body.t-bril .sf-header, html[data-theme="dark"] body.t-bril .sf-head,
html[data-theme="dark"] body.t-bril .sf-footer, html[data-theme="dark"] body.t-bril .sf-foot,
html[data-theme="dark"] body.t-bril .sf-cats { background: #0d0d0c; border-color: #262624; }
html[data-theme="dark"] body.t-bril .btn.brand { background: #f2f0ea; color: #0d0d0c; }
html[data-theme="dark"] body.t-bril .btn.brand:hover { background: var(--brl-cobalt); color: #0d0d0c; }
html[data-theme="dark"] body.t-bril .sc-contact-form .btn.brand { background: var(--brl-cobalt); color: #0d0d0c; }
html[data-theme="dark"] body.t-bril .sc-look-media img, html[data-theme="dark"] body.t-bril .sc-strip-img { background: #141413; }