/* ---------- drumpel — pivot doors & hardwood door house ----------
   THE STRUCTURAL MOVE: the name overhangs and is CLIPPED by the window. The
   opener is not a hero band but a stage — the section paints its own near-black
   and the photograph is sized DOWN to a plate floating on the right with black
   on all four sides — while the h1 is pulled out past the left edge by a
   negative margin, so it starts outside the viewport and gets cut off by it
   rather than being fitted inside it. Nothing else on the page overhangs, and
   the catalogue restates the same stage six times over. Sage lands twice only:
   the 26px hairline on every door band, and a link underline on hover.
   Every rule below is type, colour, spacing or in-section grid placement —
   nothing here touches the header's order, position or alignment. */
body.t-drumpel {
  background: #0d0d0d;
  color: #b6b1a9;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --dr-sage: #9fb0a4;
  --dr-bone: #f2efe9;
  --bg-flat: #0d0d0d;
  --header-bg: #0d0d0d;
  --surface: #0d0d0d;
  --surface-2: #121212;
  --line: #232322;
  --line-strong: #3a3a38;
  --heading: #f2efe9;
  --text: #b6b1a9;
  --muted: #8e8a83;
  --radius: 0;
  --shadow: none;
}

/* a thin bar the same near-black as the page and no plate of its own, so the
   stage begins beneath it rather than behind it. Colour and letterform only. */
body.t-drumpel .sf-head, body.t-drumpel .sf-header,
body.t-drumpel .sf-foot, body.t-drumpel .sf-footer, body.t-drumpel .sf-cats {
  background: #0d0d0d; border-color: #232322;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-drumpel .sf-name { font-family: var(--sf-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; font-size: 14px; }
body.t-drumpel .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; }

/* SAGE 1 of 2 — the underline a word picks up under the pointer, and the only
   colour the two bare text links ever take */
body.t-drumpel .sf-navlink:hover,
body.t-drumpel .sc-hero .btn.brand.sc-hero-ghost:hover,
body.t-drumpel .sc-contact-band .btn.brand:hover { background: transparent; color: var(--dr-sage); text-decoration-color: var(--dr-sage); opacity: 1; }

/* the two real controls are flat bone slabs with no edge on them */
body.t-drumpel .btn.brand { background: var(--dr-bone); border: 0; box-shadow: none; color: #0d0d0d; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; padding: 15px 32px; }

/* and the two quiet ones are bare underlined words with no chrome at all —
   the stage CTA and the Send at the foot, deliberately the same object */
body.t-drumpel .sc-hero .btn.brand.sc-hero-ghost,
body.t-drumpel .sc-contact-band .btn.brand { background: transparent; border: 0; padding: 0; color: var(--dr-bone); text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 1px; }

/* THE STAGE — the whole first screen is near-black and the photograph is a
   PLATE, not a bleed: sized to 58% of the height, thrown right, black on all
   four sides. The darkening layer rides the same box, so it falls on the
   picture and nowhere else. */
body.t-drumpel .sc-hero, body.t-drumpel .sc-hero-slide {
  background-color: #0d0d0d; background-repeat: no-repeat;
  background-size: auto 58%; background-position: right 5vw center;
}
body.t-drumpel .sc-hero { min-height: 100vh; padding: 130px 20px; }

/* THE OVERHANG — the one move the template is built on. The copy block is
   wider than the window and pulled out past its left edge, so the door name
   runs off the screen and is cut by it instead of wrapping politely inside. */
body.t-drumpel .sc-hero-left .sc-hero-inner { max-width: none; width: min(1240px, 108vw); margin-left: clamp(-140px, -7vw, -40px); }
body.t-drumpel .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(52px, 13vw, 186px); line-height: 0.92; letter-spacing: 0.055em; text-transform: uppercase; color: var(--dr-bone); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); margin: 0 0 24px; }
body.t-drumpel .sc-hero p { font-style: italic; font-size: clamp(12px, 1.3vw, 15px); letter-spacing: 0.02em; color: var(--muted); text-shadow: none; margin: 0 0 34px; }

/* every heading that is not a door name is the same small tracked label */
body.t-drumpel .sc-h2 { font-family: var(--sf-serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11px, 1.3vw, 13px); color: var(--muted); text-align: left; margin: 0 0 34px; }
body.t-drumpel .sc-showcase > .container, body.t-drumpel .sc-strip { max-width: 1400px; padding: clamp(80px, 11vh, 140px) clamp(20px, 7vw, 120px) clamp(8px, 1vh, 16px); }

/* THE CATALOGUE — the checkerboard comes apart into six full-width bands on
   the same black ground, one door at a time: the name at hero scale on the
   left, the white flat-lay plate on the right, and no mirroring anywhere. */
body.t-drumpel .sc-show-grid { grid-template-columns: minmax(0, 1fr); }
body.t-drumpel .sc-show-item,
body.t-drumpel .sc-show-item:nth-child(4n + 2),
body.t-drumpel .sc-show-item:nth-child(4n + 3) { background: transparent; border-top: 1px solid var(--line); }
body.t-drumpel .sc-show-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(28px, 6vw, 96px); align-content: center; justify-items: start; text-align: left; min-height: 0; padding: clamp(52px, 9vh, 116px) clamp(20px, 7vw, 120px); }
body.t-drumpel .sc-show-cat, body.t-drumpel .sc-strip-label, body.t-drumpel .sc-field label { grid-column: 1; color: var(--muted); text-transform: uppercase; letter-spacing: 0.26em; font-size: 10px; font-weight: 600; }
body.t-drumpel .sc-show-t { grid-column: 1; font-family: var(--sf-serif); font-weight: 400; font-size: clamp(30px, 5.4vw, 78px); line-height: 0.98; letter-spacing: 0.045em; text-transform: uppercase; color: var(--heading); margin: 14px 0 0; }
/* SAGE 2 of 2 — 26px of hairline, once per door and nowhere else on the page */
body.t-drumpel .sc-show-rule { grid-column: 1; width: 26px; height: 1px; background: var(--dr-sage); opacity: 1; margin: 30px 0 0; }
body.t-drumpel .sc-show-price { grid-column: 1; font-size: 13px; letter-spacing: 0.14em; color: var(--muted); margin: 18px 0 26px; }
body.t-drumpel .sc-show-buy, body.t-drumpel .sc-show-btn { grid-column: 1; }
body.t-drumpel .sc-show-media { grid-column: 2; grid-row: 1 / 6; width: 100%; padding: 14px; background: var(--dr-bone); }
body.t-drumpel .sc-show-media img { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; }

/* the four stages, standing in for the reference's 01/02/03/04 index */
body.t-drumpel .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
body.t-drumpel .sc-strip-img { aspect-ratio: 3 / 2; border: 0; border-radius: 0; background: var(--surface-2); }

/* THE ABOUT, PROMOTED — narrow measure left, tall plate right, and the same
   enormous black margins the stage runs */
body.t-drumpel .sc-about-split { max-width: 1400px; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(30px, 7vw, 110px); padding: clamp(80px, 12vh, 150px) clamp(20px, 7vw, 120px); }
body.t-drumpel .sc-about-copy { grid-column: 1; grid-row: 1; max-width: 44ch; }
body.t-drumpel .sc-about-media { grid-column: 2; grid-row: 1; }
body.t-drumpel .sc-about-media img { aspect-ratio: 3 / 4; }

/* the empty stage restated once, and the foot — both wide, both left-set */
body.t-drumpel .sc-banner { min-height: 68vh; display: flex; align-items: center; margin: 0 calc(50% - 50vw); padding: 96px clamp(20px, 7vw, 120px); text-align: left; }
body.t-drumpel .sc-banner-inner, body.t-drumpel .sc-contact-band-inner { margin: 0; max-width: 1400px; text-align: left; }
body.t-drumpel .sc-banner h2, body.t-drumpel .sc-contact-band .sc-h2 { grid-column: 1; grid-row: 1; font-family: var(--sf-serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(26px, 4.2vw, 58px); line-height: 1; color: var(--dr-bone); text-shadow: none; text-align: left; max-width: 16ch; margin: 0 0 22px; }
body.t-drumpel .sc-contact-band { background: #0d0d0d; border-top: 1px solid var(--line); padding: clamp(84px, 12vh, 150px) 0 clamp(96px, 14vh, 168px); }
body.t-drumpel .sc-contact-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(30px, 7vw, 110px); padding-left: clamp(20px, 7vw, 120px); padding-right: clamp(20px, 7vw, 120px); }
body.t-drumpel .sc-contact-band .sc-contact-sub { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 13.5px; line-height: 2.2; max-width: 36ch; margin: 0; }
body.t-drumpel .sc-contact-band .sc-contact-form { grid-column: 2; grid-row: 1 / 4; }
/* fields on hairline underlines only — no box, no fill */
body.t-drumpel .sc-field input, body.t-drumpel .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 10px 0; color: var(--dr-bone); }

@media (max-width: 900px) {
  body.t-drumpel .sc-hero, body.t-drumpel .sc-hero-slide { background-size: auto 30%; background-position: center 18%; }
  body.t-drumpel .sc-hero { min-height: 86vh; padding: 118px 20px 84px; }
  body.t-drumpel .sc-hero-left .sc-hero-inner { width: 100%; margin-left: -14px; }
  body.t-drumpel .sc-show-inner, body.t-drumpel .sc-about-split, body.t-drumpel .sc-contact-band-inner { grid-template-columns: minmax(0, 1fr); }
  body.t-drumpel .sc-show-media, body.t-drumpel .sc-about-media, body.t-drumpel .sc-contact-band .sc-contact-form { grid-column: 1; grid-row: auto; }
  body.t-drumpel .sc-show-media { margin: 28px 0 6px; }
  body.t-drumpel .sc-contact-band .sc-contact-sub { grid-row: auto; margin-bottom: 34px; }
  body.t-drumpel .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-drumpel .sc-banner { min-height: 46vh; padding: 72px 20px; }
}

/* NIGHT — the near-black stage drops to a properly blacked-out room: the ground
   goes to #060606, the bone steps back so a bright screen at eleven at night
   stops glaring, and the sage lifts two stops so the 26px hairline still reads
   against it. The white flat-lay plates come down to a warm off-white for the
   same reason — they are the only bright rectangles on the page and at #f2efe9
   they burn a hole in a dark room. */
html[data-theme="dark"] body.t-drumpel {
  background: #060606;
  color: #a8a39b;
  --dr-sage: #b3c4b8;
  --dr-bone: #e6e2da;
  --bg-flat: #060606;
  --header-bg: #060606;
  --surface: #060606;
  --surface-2: #0d0d0d;
  --line: #1b1b1a;
  --line-strong: #2e2e2c;
  --heading: #e6e2da;
  --text: #a8a39b;
  --muted: #7f7a73;
}
html[data-theme="dark"] body.t-drumpel .sf-head, html[data-theme="dark"] body.t-drumpel .sf-header,
html[data-theme="dark"] body.t-drumpel .sf-foot, html[data-theme="dark"] body.t-drumpel .sf-footer,
html[data-theme="dark"] body.t-drumpel .sf-cats { background: #060606; border-color: #1b1b1a; }
html[data-theme="dark"] body.t-drumpel .sc-hero, html[data-theme="dark"] body.t-drumpel .sc-hero-slide,
html[data-theme="dark"] body.t-drumpel .sc-contact-band { background-color: #060606; }
html[data-theme="dark"] body.t-drumpel .sc-show-media { background: #d9d5cd; }
html[data-theme="dark"] body.t-drumpel .btn.brand { background: #d9d5cd; color: #060606; }