/* ---- shellac (Fretwork — Guitars & amps 55) --------------------------------
   STRUCTURAL MOVE: a contained 1300px column that runs narrow–wide–narrow–
   wide–narrow. Two split about bands hold the column and MIRROR one another —
   #about-2 flips its photograph to the opposite margin, so the eye zig-zags —
   and the only blocks allowed out of the column are the four-tile strip and
   the banner. Commerce arrives last, and the showcase ties picture scale to
   the existing checkerboard so six panels alternate big/small instead of
   reading as a flat wall. (#about-2 is the renderer's own id for the second
   richtext — :nth-of-type would match the hero and never fire.)
   Bone white ground, bench-brown ink, one shellac amber, charcoal chrome. */
body.t-shellac {
  background: #faf7f2;
  color: var(--text);
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bg-flat: #faf7f2;
  --header-bg: #2e2620;
  --surface: #faf7f2;
  --surface-2: #f2ece2;
  --line: #e2d9cc;
  --line-strong: #cdc0ae;
  --heading: #2e2620;
  --text: #4a3f36;
  --muted: #8a7b6c;
  --radius: 0;
  --shadow: none;
}
body.t-shellac .container { max-width: 1300px; }

/* charcoal chrome sitting on a bone page — the one dark thing until night */
body.t-shellac .sf-header { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: #2e2620; }
body.t-shellac .sf-name, body.t-shellac .sf-cart, body.t-shellac .sf-searchbtn { color: #f7f2ea; }
body.t-shellac .sf-name { font-family: var(--sf-serif); font-weight: 500; font-size: 21px; letter-spacing: 0; }
body.t-shellac .btn.brand { background: #a4632c; color: #fdfaf5; padding: 15px 30px; font-weight: 600; letter-spacing: 0.02em; }
body.t-shellac .btn.brand:hover { background: #8a5122; }
body.t-shellac a { color: #2e2620; }
body.t-shellac a:hover { color: #a4632c; }
body.t-shellac .sc-h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.01em; text-align: left; color: #2e2620; }

/* the opener: whole viewport, one line and one slab, nothing else on it */
body.t-shellac .sc-hero { min-height: 100vh; }
body.t-shellac .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(40px, 7vw, 86px); line-height: 1.02; letter-spacing: -0.02em; }
body.t-shellac .sc-hero p { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; font-weight: 600; margin-bottom: 34px; }

/* NARROW — the matched pair: same measure, same shape, opposite margins */
body.t-shellac .sc-about-split { gap: 72px; padding: 96px 20px; align-items: center; }
body.t-shellac .sc-about-media img { aspect-ratio: 4 / 5; }
body.t-shellac .sc-about-copy p { max-width: 55ch; font-size: 16.5px; line-height: 1.8; color: #4a3f36; }
body.t-shellac #about-2 .sc-about-media { order: 2; }

/* WIDE — the only two blocks that leave the column */
body.t-shellac .sc-strip { max-width: none; padding: 10px clamp(20px, 4vw, 64px) 74px; }
body.t-shellac .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-shellac .sc-strip-img { border: 0; }
body.t-shellac .sc-strip-label { border-top: 2px solid #a4632c; margin-top: 14px; padding-top: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; }
body.t-shellac .sc-banner { min-height: 62vh; display: flex; align-items: flex-end; text-align: left; padding: 64px clamp(20px, 4vw, 64px) 54px; }
body.t-shellac .sc-banner-inner { margin: 0; max-width: 620px; }

/* LAST — six panels whose picture scale follows the checkerboard ground */
body.t-shellac .sc-showcase > .container { padding-top: 92px; }
body.t-shellac .sc-show-media img { max-height: 330px; max-width: 88%; }
body.t-shellac .sc-show-item:nth-child(4n + 2) .sc-show-media img,
body.t-shellac .sc-show-item:nth-child(4n + 3) .sc-show-media img { max-height: 186px; max-width: 54%; }
body.t-shellac .sc-show-cat { color: #a4632c; }
body.t-shellac .sc-show-price { font-family: var(--sf-serif); font-weight: 400; color: #2e2620; }

/* the page finishes in two columns exactly as its middle ran */
body.t-shellac .sc-contact-split { border-top: 1px solid #e2d9cc; gap: 72px; padding: 82px 20px 96px; }

@media (max-width: 900px) {
  body.t-shellac .sc-about-split, body.t-shellac .sc-contact-split { grid-template-columns: 1fr; gap: 34px; padding: 58px 20px; }
  body.t-shellac #about-2 .sc-about-media { order: 0; }
  body.t-shellac .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — roller door down: bone goes to unlit timber, the shellac warms up */
html[data-theme="dark"] body.t-shellac {
  background: #17130f;
  --bg-flat: #17130f;
  --header-bg: #0f0c0a;
  --surface: #17130f;
  --surface-2: #1f1913;
  --line: #2d251d;
  --line-strong: #423628;
  --heading: #f3ece1;
  --text: #c4b7a7;
  --muted: #8b7d6d;
  --radius: 0;
  --shadow: none;
}
html[data-theme="dark"] body.t-shellac .sf-header { border-bottom-color: #2d251d; }
html[data-theme="dark"] body.t-shellac .sc-h2, html[data-theme="dark"] body.t-shellac a, html[data-theme="dark"] body.t-shellac .sc-show-price { color: #f3ece1; }
html[data-theme="dark"] body.t-shellac a:hover, html[data-theme="dark"] body.t-shellac .sc-show-cat { color: #c98244; }
html[data-theme="dark"] body.t-shellac .sc-about-copy p { color: #c4b7a7; }
html[data-theme="dark"] body.t-shellac .btn.brand { background: #c98244; color: #17130f; }
html[data-theme="dark"] body.t-shellac .btn.brand:hover { background: #d9975c; }
html[data-theme="dark"] body.t-shellac .sc-strip-label { border-top-color: #c98244; }
html[data-theme="dark"] body.t-shellac .sc-contact-split { border-top-color: #2d251d; }