/* ---- mullion (Mullion — Steel windows & fanlights 173) ---------------------
   THE STRUCTURAL MOVE: THE CONTAINED HERO. Every other storefront in the
   gallery bleeds its opening photograph edge to edge; this one does not bleed a
   single pixel anywhere on the page. The hero becomes a full-viewport chalk
   void holding ONE landscape photograph: the dark scrim the renderer paints
   over every hero background is layer one, so it is sized to `0 0` and never
   renders at all, and the photograph — layer two — is sized to FIT rather than
   cover and set 30px below centre, which drops the letterspaced name onto its
   upper third. There is no banner in the section tree, and the putty strip band
   and the catalogue both stay inside the container, so the discipline holds all
   the way down. The two prose blocks need no element-type selector: the split
   one renders as .sc-about-split, the centred one as .sc-richtext. The contact
   lead is dissolved with display:contents so its two-word heading can drop into
   the RIGHT column above the fields while the address block holds the near-empty
   left half — the markup alone cannot do that. Buttons are flat graphite slabs
   with the border colour matched to the fill, per the house rule, shrunk to
   letterspaced caps so the only loud thing left on the page is the black steel
   inside the photographs. */
body.t-mullion {
  background: #fbfbfa;
  color: #1a1a1a;
  --mu-putty: #e9e5dd;
  --radius: 0;
  --shadow: none;
  --header-bg: #fbfbfa;
  --surface: #fbfbfa;
  --surface-2: #f1f0ec;
  --line: #e2e1dc;
  --line-strong: #c4c2bb;
  --heading: #1a1a1a;
  --text: #1a1a1a;
  --muted: #6f6d67;
}
body.t-mullion .sf-header, body.t-mullion .sf-head,
body.t-mullion .sf-footer, body.t-mullion .sf-foot, body.t-mullion .sf-cats {
  background: #fbfbfa; border-color: rgba(26, 26, 26, 0.12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* transparent and unpinned over the void, the way the reference bar behaves */
body.t-mullion:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; }
/* one voice for every small label on the page — the wordmark included, and it
   stays hard left where the header puts it */
body.t-mullion .sf-name, body.t-mullion .sf-navlink, body.t-mullion .sf-cart,
body.t-mullion .sc-h2, body.t-mullion .sc-strip-label,
body.t-mullion .sc-field label, body.t-mullion .btn.brand {
  text-transform: uppercase; letter-spacing: 0.26em; font-size: 10.5px; font-weight: 600;
}
body.t-mullion .sc-h2 { color: var(--muted); text-align: left; margin: 0 0 36px; }
body.t-mullion .btn.brand { background: #1a1a1a; border-color: #1a1a1a; color: #fbfbfa; box-shadow: none; border-radius: 0; padding: 15px 30px; }

/* THE MOVE — a chalk void with one contained photograph floating in it */
body.t-mullion .sc-hero {
  min-height: 100vh;
  background-color: #fbfbfa;
  background-repeat: no-repeat;
  background-position: center calc(50% + 30px);
  background-size: 0 0, min(76vw, 76vh) auto;
  padding: 12vh 24px 24vh;
}
body.t-mullion .sc-hero h1 { color: #fbfbfa; font-size: clamp(11px, 1.4vw, 16px); font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; margin: 0; text-shadow: 0 1px 26px rgba(0, 0, 0, 0.55); }

/* the hard 50/50 — one tall photograph, one headline broken over three lines */
body.t-mullion .sc-about-split { gap: 0; padding: 0 20px; align-items: center; }
body.t-mullion .sc-about-media img { aspect-ratio: 3 / 4; }
body.t-mullion .sc-about-copy { padding: 40px clamp(24px, 6vw, 88px); }
body.t-mullion .sc-about-copy .sc-h2 { max-width: 13ch; font-size: clamp(28px, 4.2vw, 50px); font-weight: 400; line-height: 1.06; letter-spacing: -0.025em; text-transform: none; color: var(--heading); margin: 0 0 28px; }
body.t-mullion .sc-about-copy p, body.t-mullion .sc-richtext p { color: var(--text); font-size: 15.5px; line-height: 2; max-width: 46ch; }

/* six squares on a warm putty tint — a band without a rule, still contained */
body.t-mullion .sc-strip { background: var(--mu-putty); margin: 108px auto 0; padding: 66px clamp(24px, 5vw, 72px) 72px; }
body.t-mullion .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px clamp(22px, 4vw, 54px); }
body.t-mullion .sc-strip-img, body.t-mullion .sc-look-media img { aspect-ratio: 1; border: 0; }

/* the catalogue as six gapped squares, three across, two rows that fill —
   caption and price under each tile and nothing else: no card, no border, no
   shadow, no hover badge. The heading rides in on the lookbook's own .container,
   so it is spanned across the whole grid rather than parked in the first cell. */
body.t-mullion .sc-lookbook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 58px clamp(20px, 3vw, 40px); max-width: 1080px; margin: 0 auto; padding: 112px 20px 40px; }
body.t-mullion .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 0; }
body.t-mullion .sc-look-row { display: block; }
body.t-mullion .sc-look-copy { padding: 0; }
body.t-mullion .sc-look-cat, body.t-mullion .sc-look-desc { display: none; }
body.t-mullion .sc-look-t { margin: 16px 0 0; font-size: 14.5px; font-weight: 400; letter-spacing: 0; }
body.t-mullion .sc-look-p { margin: 3px 0 16px; font-size: 14.5px; font-weight: 400; color: var(--muted); }

/* type alone on chalk — the one block on the page with no photograph in it */
body.t-mullion .sc-richtext { max-width: 620px; padding: 118px 20px 120px; text-align: left; }

/* the closing 50/50: the address holds the near-empty left half while the
   two-word heading drops into the right column above the hairline fields */
body.t-mullion .sc-contact-split { gap: 0 clamp(28px, 6vw, 96px); padding: 0 20px 128px; align-items: start; }
body.t-mullion .sc-contact-lead { display: contents; }
body.t-mullion .sc-contact-lead .sc-h2 { grid-column: 2; grid-row: 1; font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.025em; text-transform: none; color: var(--heading); margin: 0 0 34px; }
body.t-mullion .sc-contact-lead p { grid-column: 1; grid-row: 1 / span 2; font-size: 13px; line-height: 2.1; color: var(--muted); white-space: pre-line; }
body.t-mullion .sc-contact-body { grid-column: 2; grid-row: 2; }
body.t-mullion .sc-field input, body.t-mullion .sc-field textarea { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; padding: 11px 0; }

@media (max-width: 900px) {
  body.t-mullion .sc-lookbook, body.t-mullion .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.t-mullion .sc-about-copy { padding: 32px 0 48px; }
  body.t-mullion .sc-contact-split { gap: 34px 0; }
  body.t-mullion .sc-contact-lead .sc-h2, body.t-mullion .sc-contact-lead p,
  body.t-mullion .sc-contact-body { grid-column: 1; grid-row: auto; }
}

/* NIGHT — the shop after the roller door is down. Chalk goes to near-black and
   the putty moves with it, so the strip still reads as a band rather than as a
   hole cut in the page; the graphite slab flips to bone so a button never sinks
   into the ground it sits on. The hero keeps its white line, because that line
   has always sat on the photograph and never on the page. */
html[data-theme="dark"] body.t-mullion {
  background: #121211;
  color: #cfcec9;
  --mu-putty: #23221f;
  --header-bg: #121211;
  --surface: #121211;
  --surface-2: #1b1b19;
  --line: #2a2a27;
  --line-strong: #3e3e39;
  --heading: #f2f1ed;
  --text: #cfcec9;
  --muted: #8b8983;
}
html[data-theme="dark"] body.t-mullion .sf-header, html[data-theme="dark"] body.t-mullion .sf-head,
html[data-theme="dark"] body.t-mullion .sf-footer, html[data-theme="dark"] body.t-mullion .sf-foot,
html[data-theme="dark"] body.t-mullion .sf-cats { background: #121211; border-color: rgba(242, 241, 237, 0.13); }
html[data-theme="dark"] body.t-mullion .sc-hero { background-color: #121211; }
html[data-theme="dark"] body.t-mullion .btn.brand { background: #f2f1ed; border-color: #f2f1ed; color: #121211; }