/* ---- inleg (Inleg — Marquetry, veneer & inlay workshop 350) -----------------
   THE ONE STRUCTURAL MOVE: the page is a narrow ribbon lying on a lot of bone.
   Every band — the hero included — is pulled into a 940px column with wide,
   confident margins either side, which is why the opener is a short left-set
   TEXT band about a third of a screen deep rather than a viewport wall, and why
   the six panels can sit straight under it with almost no preamble. That column
   is broken exactly ONCE, at the banner two thirds of the way down: the only
   full-bleed moment on the page and its only change of scale. Walnut-brown ink
   taken out of the wood itself, and one dyed-indigo — a stained banding line —
   kept for the ledger rules, the rand figure and the hover, nowhere else. The
   commissions ledger is ruled by a repeating gradient locked to its own
   line-height, so every dated row lands on a hairline with no extra markup. */
body.t-inleg {
  background: #f6f2ea; color: #3a2a1c;
  --radius: 0;
  --header-bg: #f6f2ea;
  --surface: #f6f2ea;
  --surface-2: #efe8db;
  --line: #e0d8c8;
  --line-strong: #c8bca6;
  --heading: #2b1f14;
  --text: #3a2a1c;
  --muted: #7d6a56;
  --inl-indigo: #2b3a6b;
  --inl-deep: #1c2749;
  --inl-on: #f6f2ea;
  --inl-rule: rgba(43, 58, 107, 0.3);
}
body.t-inleg .sf-head, body.t-inleg .sf-header, body.t-inleg .sf-foot, body.t-inleg .sf-footer, body.t-inleg .sf-cats {
  background: #f6f2ea; border-color: #e0d8c8; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-inleg .btn.brand { background: var(--inl-indigo); color: var(--inl-on); box-shadow: none; font-weight: 600; letter-spacing: 0.05em; }
body.t-inleg .btn.brand:hover { background: var(--inl-deep); color: var(--inl-on); }

/* THE RIBBON — one narrow column carrying every band on the page */
body.t-inleg .sc-hero, body.t-inleg .sc-masonry .container, body.t-inleg .sc-strip, body.t-inleg .sc-contact-split {
  max-width: 940px; margin-left: auto; margin-right: auto;
}

/* the opener: a third of a screen, set hard left, and nothing shouted */
/* The opener runs EDGE TO EDGE and stays short — a letterbox band rather than a
   contained card. It keeps Inleg's quiet, third-of-a-screen character, but the
   box is now ~1920px wide instead of 940px, so a wide hero photograph is
   actually used at something near its own resolution rather than being thrown
   away by a container narrower than the image. The copy stays on the same 940px
   measure as the rest of the page so nothing else about the layout moves. */
body.t-inleg .sc-hero { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw) clamp(8px, 1.6vh, 18px); min-height: clamp(300px, 42vh, 460px); padding: clamp(36px, 5vw, 58px) clamp(26px, 4vw, 46px); background-position: 72% center; }
body.t-inleg .sc-hero .sc-hero-inner { max-width: 940px; margin-left: auto; margin-right: auto; width: 100%; }
/* the two photographic bands share one display face — identical type, so the
   full-bleed one reads as scale rather than as a different voice */
body.t-inleg .sc-hero h1, body.t-inleg .sc-banner h2 { font-size: clamp(26px, 3.6vw, 46px); font-weight: 400; line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 14px; }
body.t-inleg .sc-hero p, body.t-inleg .sc-banner p { font-size: 14px; line-height: 1.7; letter-spacing: 0.03em; margin: 0 0 22px; }
/* the CTA is a bare underlined link, not a slab and not an outline */
body.t-inleg .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 0; padding: 0; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 8px; }
body.t-inleg .sc-hero .btn.brand.sc-hero-ghost:hover { background: transparent; color: rgba(255, 255, 255, 0.66); }

/* ONE caption face for every small label on the page — the grid heading, the
   tile categories, the four strip words and the form labels all set alike */
body.t-inleg .sc-masonry .sc-h2, body.t-inleg .sc-mas-cat, body.t-inleg .sc-strip-label, body.t-inleg .sc-field label {
  text-align: left; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--muted);
}

/* SIX EQUAL LANDSCAPE PANELS — the staggered crops are overruled to one uniform
   3:2 so the wall lands as two clean rows on consistent gutters */
body.t-inleg .sc-masonry, body.t-inleg .sc-strip { padding-top: clamp(22px, 4vh, 42px); }
body.t-inleg .sc-mas-grid { column-count: 3; column-gap: 30px; }
body.t-inleg .sc-mas-item .sc-mas-media img { aspect-ratio: 3 / 2; }
body.t-inleg .sc-mas-p { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--inl-indigo); }
body.t-inleg .sc-mas-item:hover .sc-mas-t { color: var(--inl-indigo); }

/* four labelled tiles, the woods to the finish */
body.t-inleg .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }

/* THE ONE BREAK IN THE RIBBON — the page's single full-bleed band */
body.t-inleg .sc-banner { margin: clamp(52px, 9vh, 104px) calc(50% - 50vw); min-height: clamp(320px, 46vh, 520px); display: flex; align-items: center; justify-content: center; }

/* THE COMMISSIONS LEDGER — dated rows on hairlines drawn by a repeating
   gradient pinned to the line box, so nothing has to be marked up as a table */
body.t-inleg .sc-richtext { max-width: 800px; padding: clamp(66px, 11vh, 120px) 20px clamp(26px, 4vh, 48px); text-align: left; }
body.t-inleg .sc-richtext p { color: var(--text); font-size: 15px; line-height: 42px; font-variant-numeric: tabular-nums; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, var(--inl-rule) 41px, var(--inl-rule) 42px); }
body.t-inleg .sc-richtext .sc-h2, body.t-inleg .sc-contact-lead .sc-h2 { text-align: left; font-size: clamp(20px, 2.6vw, 28px); font-weight: 400; letter-spacing: -0.015em; margin: 0 0 22px; }

/* the workshop facts one side, a short form the other */
body.t-inleg .sc-contact-split { padding: clamp(46px, 8vh, 84px) 20px clamp(72px, 12vh, 124px); gap: clamp(32px, 6vw, 72px); border-top: 1px solid var(--line); }
body.t-inleg .sc-contact-lead p { white-space: pre-line; font-size: 14.5px; line-height: 1.95; color: var(--muted); }

@media (max-width: 900px) {
  body.t-inleg .sc-mas-grid { column-count: 2; }
  body.t-inleg .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { body.t-inleg .sc-mas-grid { column-count: 1; } }

/* NIGHT — the workshop after five, one bulb over the bench. The bone goes to
   deep walnut and the indigo lifts to the colour dyed pear actually is under
   tungsten; every token below is redefined, so the toggle really does work. */
html[data-theme="dark"] body.t-inleg {
  background: #17120d; color: #ece3d4;
  --header-bg: #17120d; --surface: #17120d; --surface-2: #201810;
  --line: #2e2419; --line-strong: #483b2c; --heading: #f6efe2; --text: #ece3d4; --muted: #8f8172;
  --inl-indigo: #93a6de; --inl-deep: #b3c1ea; --inl-on: #14100c; --inl-rule: rgba(147, 166, 222, 0.28);
}
html[data-theme="dark"] body.t-inleg .sf-head, html[data-theme="dark"] body.t-inleg .sf-header,
html[data-theme="dark"] body.t-inleg .sf-foot, html[data-theme="dark"] body.t-inleg .sf-footer,
html[data-theme="dark"] body.t-inleg .sf-cats { background: #17120d; border-color: #2e2419; }