/* ---- tympan (Tympan — Hearing aids & ear protection 167) -------------------
   THE STRUCTURAL MOVE: ONE BLEED, THEN A COLUMN. Exactly one thing on this page
   touches the edge of the screen — the full-viewport three-slide stage — and
   after it every remaining block is pulled into the same 900px measure, given
   the same air above and below, and separated from the block before it by a
   single hairline. There is no banner anywhere and no row carries a ground of
   its own: cards go transparent, the strip loses its borders, and the bone page
   shows through every gap, which is what turns the descending 4 → 3 → 3 ladder
   into one calm column instead of a stack of sections. Sea-teal is spent three
   times and nowhere else — the ghost outline on the stage (recolouring the
   shared outline, not adding one), the rand figure on both catalogue passes,
   and the submit that closes the page. Everything else is ink on bone.
   `.sc-richtext` matches only the centred prose block: the split one renders as
   .sc-about-split, so no element-type selector is needed to tell them apart. */
body.t-tympan {
  background: #f2efe7;
  color: #2c3339;
  --ty-teal: #3d7d78;
  --radius: 0;
  --shadow: none;
  --header-bg: #f2efe7;
  --surface: #f2efe7;
  --surface-2: #e7e2d7;
  --line: #cbc5b8;
  --line-strong: #aca596;
  --heading: #1a2126;
  --text: #2c3339;
  --muted: #6b747c;
}

/* the bar is opaque and sits ABOVE the stage — nothing floats over the photograph */
body.t-tympan .sf-head, body.t-tympan .sf-header,
body.t-tympan .sf-foot, body.t-tympan .sf-footer, body.t-tympan .sf-cats {
  background: #f2efe7; border-color: #cbc5b8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-tympan .btn.brand { background: #1a2126; border: 0; color: #f2efe7; box-shadow: none; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; font-size: 11px; padding: 15px 30px; }

/* THE ONE BLEED — the whole first screen, three slides, copy centred over it */
body.t-tympan .sc-hero { min-height: 100vh; padding: 100px 20px; }
body.t-tympan .sc-hero h1 { font-weight: 700; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.05; letter-spacing: -0.03em; }
/* teal 1 of 3 — the shared ghost outline recoloured, no new border introduced */
body.t-tympan .sc-hero .btn.brand.sc-hero-ghost { border-color: #86c3bc; color: #eaf4f2; }
body.t-tympan .sc-hero .btn.brand.sc-hero-ghost:hover { background: #86c3bc; color: #12201f; }

/* THE COLUMN — one measure and one rhythm from the stage to the footer */
body.t-tympan .sc-about-split, body.t-tympan .sc-strip, body.t-tympan .sc-products,
body.t-tympan .sc-richtext, body.t-tympan .sc-buygrid, body.t-tympan .sc-contact {
  max-width: 900px; padding: 62px 20px 66px;
}
/* the only division on the page — a hairline, never a band */
body.t-tympan .sc-strip, body.t-tympan .sc-products, body.t-tympan .sc-richtext,
body.t-tympan .sc-buygrid, body.t-tympan .sc-contact { border-top: 1px solid var(--line); }
body.t-tympan .sc-h2 { font-weight: 600; font-size: clamp(19px, 2.4vw, 25px); letter-spacing: -0.015em; margin: 0 0 26px; }

/* the audiologist: portrait LEFT, credentials and consulting hours right */
body.t-tympan .sc-about-split { grid-template-columns: 0.9fr 1.1fr; gap: 46px; align-items: start; }
body.t-tympan .sc-about-media img { aspect-ratio: 4 / 5; object-fit: cover; }
body.t-tympan .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.85; }

/* FOUR ACROSS — gapped, unbordered, on bare bone */
body.t-tympan .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-tympan .sc-strip-img { aspect-ratio: 4 / 3; border: 0; }
body.t-tympan .sc-strip-label { margin-top: 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }

/* THREE ACROSS, TWICE — the catalogue photographed, then the catalogue priced.
   Both runs are six, both fill two rows, and neither tile gets a ground. */
body.t-tympan .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; padding: 0; }
body.t-tympan .product-card, body.t-tympan .product-card:hover { background: transparent; border: 0; transform: none; box-shadow: none; }
body.t-tympan .product-card .meta { padding: 12px 0 0; }
body.t-tympan .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 26px; }
body.t-tympan .sc-buy-cat { color: var(--muted); }
/* teal 2 of 3 — the rand figure, on both passes */
body.t-tympan .sc-buy-p, body.t-tympan .product-card .p { color: var(--ty-teal); font-weight: 700; font-size: 15px; }

/* the quiet paragraph and the form are narrowed inside the column, not outside
   it, so the hairlines above them keep the same width as every other rule */
body.t-tympan .sc-richtext p { max-width: 620px; margin: 0 auto; font-size: 16.5px; line-height: 1.9; color: var(--text); }
body.t-tympan .sc-contact-sub, body.t-tympan .sc-contact-form { max-width: 460px; margin-left: auto; margin-right: auto; }
/* teal 3 of 3 — the submit that closes the page */
body.t-tympan .sc-contact .btn.brand { background: var(--ty-teal); color: #f2efe7; }

@media (max-width: 900px) {
  body.t-tympan .sc-hero { min-height: 82vh; }
  body.t-tympan .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-tympan .product-grid, body.t-tympan .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the rooms after hours. Bone goes to cold slate and the hairline goes
   with it, because the rule is the only structure the page has and it cannot be
   allowed to disappear. #3d7d78 was picked to hold against paper and goes muddy
   on a near-black ground, so the teal lifts two steps and the submit slab takes
   dark type instead of light. */
html[data-theme="dark"] body.t-tympan {
  background: #14181b;
  color: #b0b8bd;
  --ty-teal: #5fb3ac;
  --header-bg: #14181b;
  --surface: #14181b;
  --surface-2: #1e2429;
  --line: #2d353a;
  --line-strong: #414b51;
  --heading: #eef1ee;
  --text: #b0b8bd;
  --muted: #7b858c;
}
html[data-theme="dark"] body.t-tympan .sf-head, html[data-theme="dark"] body.t-tympan .sf-header,
html[data-theme="dark"] body.t-tympan .sf-foot, html[data-theme="dark"] body.t-tympan .sf-footer,
html[data-theme="dark"] body.t-tympan .sf-cats { background: #14181b; border-color: #2d353a; }
html[data-theme="dark"] body.t-tympan .btn.brand { background: #eef1ee; color: #14181b; }
html[data-theme="dark"] body.t-tympan .sc-contact .btn.brand { background: var(--ty-teal); color: #0f1a19; }