/* ---- peel (Peel — Wood-fired pizzeria & dough room 210) --------------------
   THE STRUCTURAL MOVE: ONE STUBBORN VERTICAL CENTRE LINE. The tile row, the
   prose column, the catalogue and the closing band all sit in the same narrow
   contained spine and every one of them reads down the middle. Only two things
   are allowed out of the container — the opening cross-fade and one firelight
   band near the foot — and the single split band under the catalogue is the
   one element permitted off the centre axis, which is what makes the
   discipline visible instead of merely tidy. Soot ground with a brown cast
   under warm chalk, and ONE ember amber spent on three jobs only: the rand
   figures, the slab controls and the hero's ghost outline. --------------- */
body.t-peel {
  background: #1a1310;
  color: #cfc4b8;
  --pl-amber: #e2932e;
  --pl-lit: #f0a944;
  --pl-rule: rgba(226, 147, 46, 0.28);
  --bg-flat: #1a1310;
  --header-bg: #1a1310;
  --surface: #211812;
  --surface-2: #291e17;
  --line: #31251d;
  --line-strong: #47362a;
  --heading: #ece4da;
  --text: #cfc4b8;
  --muted: #8f8377;
  --radius: 0;
  --shadow: none;
}

/* a flat soot bar carrying the name hard left — the stage starts under it, so
   nothing ever floats across the fire */
body.t-peel .sf-head, body.t-peel .sf-header,
body.t-peel .sf-foot, body.t-peel .sf-footer, body.t-peel .sf-cats {
  background: #1a1310; border-color: #31251d;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-peel .sf-name, body.t-peel .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; font-weight: 700; }

/* AMBER 1 of 3 — every control is a flat ember slab with no edge on it */
body.t-peel .btn.brand { background: var(--pl-amber); border: 0; color: #1a1310; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-peel .btn.brand:hover { background: var(--pl-lit); color: #1a1310; }

/* ESCAPE ONE — the whole first screen: three frames cross-fading, heading, one
   line and a single outline stacked dead centre with nothing at the sides */
body.t-peel .sc-hero { min-height: 100vh; padding: 100px 20px; }
body.t-peel .sc-hero h1 { text-transform: uppercase; font-weight: 800; font-size: clamp(30px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.01em; }
body.t-peel .sc-hero p { text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(11px, 1.5vw, 13px); line-height: 2; }
/* AMBER 2 of 3 — the ghost, and the only amber ever laid on a photograph */
body.t-peel .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 2px solid var(--pl-lit); color: var(--pl-lit); }
body.t-peel .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--pl-lit); color: #1a1310; }

/* THE SPINE — one small chalk line held on the middle for every heading below
   the stage, so the page reads as a vertical strip of postcards */
body.t-peel .sc-h2 { text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; color: var(--heading); margin-bottom: 34px; }

/* four gapped tiles, picture over word, contained like everything else */
body.t-peel .sc-strip { padding: 74px 20px 6px; }
body.t-peel .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-peel .sc-strip-img { aspect-ratio: 4 / 3; border: 0; background: #211812; }
body.t-peel .sc-strip-label { margin-top: 16px; text-transform: uppercase; letter-spacing: 0.13em; font-size: 10.5px; font-weight: 700; line-height: 1.9; color: var(--muted); }

/* THE QUIET MIDDLE — one narrow column with no photograph in it at all, set
   directly on top of the catalogue with no band between the two */
body.t-peel .sc-richtext { max-width: 600px; padding: 96px 20px 26px; }
body.t-peel .sc-richtext p { color: var(--heading); font-size: clamp(15px, 1.9vw, 17px); line-height: 2.05; }

/* the catalogue — four across in two rows that fill, square plates, and
   AMBER 3 of 3: the rand figure, the brightest thing on a dark page */
body.t-peel .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; padding: 6px 0 78px; }
body.t-peel .product-card { background: var(--surface); border-color: var(--line); }
body.t-peel .product-card .p { color: var(--pl-lit); font-weight: 700; font-size: 15.5px; margin-top: 6px; }

/* THE ONE BREAK IN THE CENTRE LINE — photograph left, copy right and left
   aligned, off balance on purpose, with a hairline drawn over it to mark it */
body.t-peel .sc-about-split { grid-template-columns: 0.86fr 1.14fr; gap: 60px; align-items: center; padding: 84px 20px 78px; border-top: 1px solid var(--line); }
body.t-peel .sc-about-copy p { color: var(--text); line-height: 1.95; font-size: 15.5px; }

/* ESCAPE TWO — the only other block that gives up the container */
body.t-peel .sc-banner { margin: 0 calc(50% - 50vw); min-height: 54vh; display: flex; align-items: center; padding: 72px 20px; }

body.t-peel .sc-contact-band { background: #120d0a; border-top: 1px solid var(--pl-rule); padding: 88px 0 96px; }

@media (max-width: 900px) {
  /* both grids have to keep filling: four tiles become two rows of two and the
     eight plates become four rows of two, and the split gives up its axis */
  body.t-peel .sc-hero { min-height: 84vh; }
  body.t-peel .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-peel .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-peel .sc-about-split { grid-template-columns: 1fr; gap: 28px; padding: 58px 20px 54px; }
}

/* NIGHT — the soot drops back toward the mouth of a cold oven and the ember is
   pushed up to meet it, so the prices, the ghost outline and the hairline over
   the closing band stay the brightest things once the photographs are the only
   light in the room. */
html[data-theme="dark"] body.t-peel {
  background: #100b09;
  color: #c3b8ac;
  --pl-amber: #f0a03a;
  --pl-lit: #ffb751;
  --pl-rule: rgba(240, 160, 58, 0.3);
  --bg-flat: #100b09;
  --header-bg: #100b09;
  --surface: #17100c;
  --surface-2: #1e1510;
  --line: #271c15;
  --line-strong: #3b2c21;
  --heading: #f4ede3;
  --text: #c3b8ac;
  --muted: #968a7d;
}
html[data-theme="dark"] body.t-peel .sf-head, html[data-theme="dark"] body.t-peel .sf-header,
html[data-theme="dark"] body.t-peel .sf-foot, html[data-theme="dark"] body.t-peel .sf-footer,
html[data-theme="dark"] body.t-peel .sf-cats { background: #100b09; border-color: #271c15; }
html[data-theme="dark"] body.t-peel .sc-strip-img { background: #17100c; }
html[data-theme="dark"] body.t-peel .sc-contact-band { background: #0a0705; }