/* ================================================================= MAYURA STATION — STEAKHOUSE TONAL SKIN (MAYURAWEB-18) The Mayura Wagyu Steakhouse (/steakhouse/ + its child pages) is a chapter of THIS site, not a separate brand. It therefore keeps the whole base skin — Rich Black canvas, Cinzel/Mulish/Roboto, the gold default accent, the spacing and type scale — and shifts tone only where the design authority names a shift. AUTHORITY: design-system/mayura-station/MASTER.md, "Resolved: Terracotta vs. the 4.5:1 contrast rule": "The Steakhouse chapter keeps its terracotta identity through the tonal wash, the reservation frame, the terracotta button fill and the accent hairlines — none of which are text." That sentence is the entire scope of this file. Four things. WHAT THIS FILE DOES *NOT* DO, AND WHY Three of MASTER's four are already correct on every Steakhouse page and are deliberately left alone: • the terracotta button fill — all six pages author `.btn btn--terra` as the primary CTA (base.css gives it the --white label MASTER requires) with `.btn btn--gold` as the secondary. That is exactly MASTER's Buttons bullet. Re-styling buttons here would either duplicate a correct rule or overrule an author's deliberate gold secondary. • the accent hairlines in content — all six pages author `.eyebrow eyebrow--terra`, whose ::before hairline is already --terra-2 (components.css). Only the TEMPLATE's title-band eyebrow was still gold; that one gap is closed below. • the reservation frame — all six pages author `.cta-band--terra`, which already carries the 1px --terra frame. Only its tint was missing; closed below. The tonal wash was absent entirely — no Steakhouse page had one — and is the substance of this file. TERRACOTTA IS FILL / BORDER / WASH ONLY. Decision MAYURAWEB-93 (Scott, 29 Jul 2026, option (a)): --terra is 2.68:1 and --terra-2 is 3.47:1 on --ink, both under the 4.5:1 AA text floor, so NEITHER may colour text at any size. There is not one `color:` declaration in this file — grep it. Labels, numerals and small-caps keys stay --gold; warm-red text is --error and appears only in error/warn UI. MEASURED on the two surfaces this file creates (composited, not eyeballed — see the ratios beside each rule): tonal wash peak = --terra at 8% over --ink = rgb(22,12,11) reservation tint = --terra at 5% over --ink-2 = rgb(25,19,18) Every text colour that lands on either clears AA: --text 15.13:1 / 14.46:1 · --gold 6.96:1 / 6.65:1 · --mute 5.13:1 / 5.08:1 · --white 19.20:1 / 18.35:1. SCOPE: every rule is under `body.steakhouse`, added by mayura_body_class() in functions.php. That is the /steakhouse/ page and every descendant of it, resolved by SLUG and ancestry rather than by the dev ID 222 (which does not survive a migration to production), PLUS /reservations/, matched by its own slug since 4 Sep 2026 — see §1. One predicate, mayura_is_steakhouse(), decides both the class and this sheet's enqueue, so the two cannot disagree about which pages are in. Load order puts this sheet after components.css and main.css, and each selector below also out-specifies the bare rule it overrides, so the cascade does not depend on file order alone. Load order: tokens.css → base.css → components.css → main.css → steakhouse.css. Tokens only — no raw hex. The two alpha values are derived from var(--terra) with color-mix() rather than restating the hex a fourth time (home.css hardcodes rgba(162,39,23,.08)/.05 for the front page's Chapter VII; those are the same two values). If a browser lacks color-mix() the declaration is dropped and the page renders as the unwashed base skin — degraded, never broken. ================================================================= */ /* ----------------------------------------------------------------- Scoped derivations of --terra. Declared once, on the scope root, so the terracotta hex lives only in tokens.css. ----------------------------------------------------------------- */ .steakhouse{ /* Atmosphere wash — MASTER "gradient/atmosphere washes". 8% matches home.css .steak__tone, the front page's Chapter VII. */ --sh-wash:color-mix(in srgb, var(--terra) 8%, transparent); /* Reservation-frame tint — 5%, matching home.css .reservation. */ --sh-tint:color-mix(in srgb, var(--terra) 5%, transparent); } /* ================================================================= 1 · THE TONAL WASH MASTER "the tonal wash" + "gradient/atmosphere washes". A direct port of the front page's Chapter VII wash (home.css .steak__tone: `radial-gradient(ellipse 80% 50% at 15% 0%, rgba(162,39,23,.08), transparent 60%)`) from section scale to page scale: same ellipse geometry, same origin, same 8%. Implemented as a background-image on the article rather than home.css's absolutely-positioned .steak__tone overlay + `.steak > *` z-index lift. Deliberate: a background layer paints behind the element's own content but BEHIND child backgrounds too, which is the same visual result as the overlay (on the front page .panel/.card backgrounds sit above the wash at z-index 1) with none of its cost. The overlay pattern would need `position:relative` on .tpl-fw and `position:relative;z-index:1` on its children — and .tpl-fw__flow is the containing block whose `.alignfull` breakout relies on `margin-left:calc(50% - 50vw)` (main.css). Introducing a new positioned ancestor there is a cascade risk for zero gain. background-size pins the wash to a viewport-scaled band anchored at the top of the article, so the ellipse keeps its section-scale proportions instead of stretching down a 6000px page. BOTH article shells are covered on purpose. All six Steakhouse pages use template-full-width.php (.tpl-fw) today; page.php (.tpl-doc) is the default an editor can switch any of them to from the sidebar without telling anyone. Covering both means that switch cannot silently drop the skin. .resv-page is the seventh Steakhouse surface (added 4 Sep 2026, conformity rotation 59). /reservations/ is rendered by page-reservations.php, whose article shell is .resv-page, not .tpl-*; it reached body.steakhouse only that day, when mayura_is_steakhouse() in functions.php started matching the page by slug. MASTER.md names "the reservation frame" as one of the four carriers of the chapter's identity, so the wash belongs there as much as on the six children. Without this third selector the page loads this sheet and paints nothing from it — measured before the change: .resv-page background-image none, the chapter tint absent. ================================================================= */ .steakhouse .tpl-fw, .steakhouse .tpl-doc, .steakhouse .resv-page{ background-image:radial-gradient(ellipse 80% 50% at 15% 0%, var(--sh-wash), transparent 60%); background-repeat:no-repeat; background-position:0 0; background-size:100% clamp(560px, 70vh, 900px); } /* ================================================================= 2 · THE ACCENT HAIRLINE ON THE TITLE BAND MASTER "the accent hairlines". Precedent is exact and already in the theme: home.css `.steak__head .chapter__no::before{background:var(--terra-2)}` — the front page's Steakhouse chapter already swaps this one hairline to terracotta and keeps the label gold. This is that same rule for the Steakhouse PAGES, whose title band (template-full-width.php / page.php) prints `

` with base.css's gold 48px hairline. The LABEL is untouched and stays --gold (7.17:1 on --ink, 6.96:1 over the wash). Only the decorative ::before fill moves — 3.37:1 over the wash, well clear of the 3:1 non-text guidance and far above the theme's own accepted hairline (--rule, 1.38:1). Scoped to the article shells rather than `body.steakhouse .chapter__no`: header.php and footer.php use none of these classes today (grep-confirmed), and this keeps it that way if either gains an eyebrow later. Global chrome is not part of the chapter. Specificity: (0,3,0) vs base.css's `.chapter__no::before` (0,1,0). NO .resv-page HERE, and the asymmetry with §1 is the answer rather than an oversight. The reservations page's title band prints `

`, not `.chapter__no` (page-reservations.php:57), and `.eyebrow--terra::before` is already --terra-2 in components.css. That hairline is terracotta before this sheet loads; a third selector here would match nothing on any page. ================================================================= */ .steakhouse .tpl-fw .chapter__no::before, .steakhouse .tpl-doc .chapter__no::before{ background:var(--terra-2); } /* ================================================================= 3 · THE RESERVATION FRAME MASTER "the reservation frame". Every Steakhouse page authors the reservation CTA as `.cta-band .cta-band--terra`, and `.cta-band--terra` in components.css documents that modifier as the generalisation of the front page's v6 `.reservation` component. It kept .reservation's 1px --terra frame but dropped its tint (home.css .reservation — `border:1px solid var(--terra);background:rgba(162,39,23,.05)`), so the frame currently sits on the generic --ink-2 panel and reads as an outlined box rather than a terracotta-lit one. This restores the missing half of the component MASTER names, at the same 5% and only inside the chapter. components.css is left alone: the modifier is Steakhouse-only by convention, but changing a shared component's appearance for every future caller is a wider decision than this scope. The tint replaces the --ink-2 fill; it does not stack on it. Text on the result: --text 14.46:1, --gold 6.65:1, --mute 5.08:1 — all AA. Specificity: (0,2,0) vs `.cta-band` / `.cta-band--terra` (0,1,0). ================================================================= */ .steakhouse .cta-band--terra{ background:var(--sh-tint); } /* ================================================================= 4 · THE TERRACOTTA BUTTON FILL MASTER "the terracotta button fill" + the Buttons bullet ("terracotta fill with a White label (Steakhouse only)"). NO RULE HERE — and that is the finding, not an omission. `.btn--terra` in base.css already is that bullet exactly: .btn--terra{background:var(--terra);color:var(--white);border-color:var(--terra)} .btn--terra:hover{background:var(--terra-2);border-color:var(--terra-2)} White label measured 7.40:1 on --terra and 5.70:1 on --terra-2, both AA; the warm off-white --text would be 4.49:1 on the hover fill and is correctly not used. All six Steakhouse pages already author that class on their primary CTA ("Make a reservation" / "Make an enquiry") and `.btn--gold` on their secondary — which is also that same bullet, since outline-gold remains an available button in the chapter. Nothing to add. In particular this file does NOT remap the Button block or `.btn--gold` to terracotta inside the chapter. "The Steakhouse primary button is terracotta" is already true by authorship; "every Steakhouse button is terracotta" would be a new brand rule, and MASTER does not state it. ================================================================= */