, so these rules do not
* match and those heroes keep the painters above — both measure delta 0 today
* and are byte-identical after this change. If either page is ever unwrapped,
* this table starts governing it, which is the correct outcome and needs no
* edit here.
*
* DEGRADE PATH: an engine without :has() drops these rules entirely and falls
* back to the painters above — i.e. to today's render. Never to nothing, and
* never to a wrong-but-new colour.
*
* A divider is not reachable by this table: inc/sections/divider.php emits a
* plain
with no data-bg-token and no .mw-section class. So if a hero
* seam ever regains a divider, these rules stop matching rather than
* terminating the fade on the divider's tone.
*
* THE 2026-08-02 RULING, AMENDED 2026-08-22 (Topic 34 SEAM-WP6). The ruling
* carried in k-world/hub.php and seven sibling templates reads "no divider at
* a hero join, anywhere", and until this topic that was read here as "a hero
* join is a bare bleed and nothing else". Both halves need writing down now,
* because only one of them changed.
*
* Still true, unchanged: no divider band is emitted at any hero join. This
* topic emits none either.
*
* New: five hero joins now carry a SHAPE on the hero's own bottom edge - the
* angled cut, the ridgeline, the Stormhold skyline, further down this file.
* A shape is not the divider the ruling forbade. It is a pseudo-element of
* the hero, it emits no band, it occupies no vertical space of its own, and
* critically it inserts NOTHING between the hero and the section below -
* which is what keeps the table above matching. A rail element at that join
* would look like a tidy refactor and would silently take the colour with it.
* ----------------------------------------------------------------------- */
/* The skyline layer's height, named once so both the shape and the content
* clearance below read the same number. Doubled 2026-08-22 on the owner's
* "increase the size of the siluetes by a factor of 2". */
.mw-section--hero[data-has-image][data-seam="skyline"] {
--mw-skyline-h: clamp(144px, 16vw, 232px);
}
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="kw-sky"]) {
--mw-bleed-tone: var(--kw-sky-surface);
/* Topic 36 CORR-WP1 Item 2: was `var(--kw-gold)` ("gold reads on
* periwinkle"). `--kw-sky-surface` flipped to white, so gold (#F4C430)
* measures ~1.6:1 on it and goes invisible — the same defect the sibling
* row below already solved for the butter band. Matches it: ink. */
--mw-seam-line: var(--studio-dark); /* ink reads on white */
}
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="kw-gold"]) {
--mw-bleed-tone: var(--kw-gold-surface);
--mw-seam-line: var(--studio-dark); /* ink reads on butter */
}
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="kw-cream"]) {
--mw-bleed-tone: var(--kw-cream);
/* Ink, not gilt (2026-08-22 games ruling). Griffin Roost Manager is
* under Games and takes the same angled cut, but it is the cozy
* K-World tier and its band is cream: the hub's gold would sit on a
* near-gold field and disappear. Ink is the same answer this table
* already gives for a butter band, one row down. */
--mw-seam-line: var(--studio-dark); /* ink reads on cream */
}
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="kw-sunset"]) { --mw-bleed-tone: var(--kw-sunset); }
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="kw-castle-stone"]) { --mw-bleed-tone: var(--kw-castle-stone); }
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="studio-dark"]) { --mw-bleed-tone: var(--studio-dark); }
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="studio-violet"]) {
--mw-bleed-tone: var(--studio-violet);
/* The games hub's gilt, ratified 2026-08-22 when the owner ruled that
* every page under Games ends its hero the way the hub does. Colour and
* gradient are games.css FIX-WP21's, verbatim - this is a match, not a
* new decision. Dark art over a dark violet band: gold is the only one
* of the three tier accents that separates them. */
--mw-seam-line: var(--kw-gold);
--mw-seam-line-image: linear-gradient(92deg, rgba(244, 196, 48, 0) 3%, rgba(244, 196, 48, 0.7) 34%, rgba(255, 232, 160, 0.95) 58%, rgba(244, 196, 48, 0.4) 84%, rgba(244, 196, 48, 0) 97%);
}
.mw-section--hero[data-has-image][data-bg-token]:has(+ .mw-section[data-bg-token="studio-light"]) { --mw-bleed-tone: var(--studio-light); }
/* -----------------------------------------------------------------------
* SEAM LINE BASE DEFAULT (Topic 34 SEAM-WP1)
*
* Four rows above name a --mw-seam-line, because only four tone pairings
* have a designed line colour. The remaining rows and all seven painters
* deliberately leave it unset: inventing a colour for a pairing nobody has
* drawn a seam for would be fabricating a design decision.
*
* It was two rows until 2026-08-22, when the owner ruled that every page
* under Games ends its hero the way the games hub does. That ruling is what
* makes studio-violet and kw-cream designed pairings rather than invented
* ones: it names the reference (games.css FIX-WP21) and the pages. Add a
* row here only when a ruling does the same, not when a page merely looks
* like it could use a line.
*
* But "unset" is not a safe resting state. A later rule writing
* `background: var(--mw-seam-line)` against an undefined property is invalid
* at computed-value time, and on the `background` SHORTHAND that resets every
* background longhand to its initial value — the line renders transparent AND
* any sibling background declaration in the same rule is wiped. It would fail
* silently and look identical to "no line intended". Screenshot QA cannot tell
* those two apart.
*
* So the property is always defined. `transparent` is rgba(0,0,0,0): it cannot
* paint, and color-mix() is premultiplied per spec so it produces no grey
* fringe. "No line" becomes a design choice a probe can assert, rather than a
* parse failure a probe cannot see.
*
* Specificity (0,2,0) — 1 class + 1 attribute. Loses to the painters (0,4,0)
* and to the :has() rows (0,5,0), which is the intent: this is the floor.
*
* DECLARED WITH THE HERO'S OTHER BASELINE PROPERTIES, not as a second rule
* carrying this same selector. Two rules with an identical selector in one
* file is a drift surface: an editor changing one never sees the other. See
* the hero layout block near the top of this file for where it actually
* lives.
*
* ONE STRAY COMMENT-CLOSE IN THIS BLOCK SHIPPED A REGRESSION (2026-08-22, commit 97cbe35,
* fixed same day). The paragraph above was appended after a a comment-close instead of
* before it, so five lines of prose sat outside any comment and a second a comment-close
* followed. The apostrophe in HERO-S then opened an unterminated string, the
* parser consumed everything up to the next `{` looking for a selector, and it
* swallowed and discarded the @media (max-width: 720px) K-World bleed override
* below. Result: every K-World photographic hero rendered the DESKTOP bleed on
* mobile - measured 148.5px instead of 123.8px at 390.
*
* It survived a delta-0 gate because that gate measured colour at 1440 and
* argued 390 was identical since no tone declaration sits inside a @media
* block. That argument was true about colour and blind to a @media rule being
* destroyed. Counting a comment-open against a comment-close does not catch it either - the counts
* were balanced at 49/50 only because the stray close made them so.
*
* The check that DOES catch it is the browser: read document.styleSheets for
* this file and assert the parsed rule count. Broken = 2 @media rules, fixed =
* 3. Assert the count, not the delimiters.
*
* AND NOTE THE TRAP THIS NOTE ITSELF FELL INTO, twice in one hour: writing a
* literal comment-close INSIDE a comment ends it early. CSS comments do not
* nest. Never put the two-character close sequence in prose here - spell it
* out in words, as this block now does.
* ----------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
* SEAM LAYER - the shared contract (Topic 34 SEAM-WP2)
*
* Scaffolding only. No shape geometry here: the angled shear lands in
* SEAM-WP3, the ridgeline in SEAM-WP4, the Stormhold skyline in SEAM-WP5.
* This block fixes WHERE a seam paints, WHAT colour it takes, and how it
* fails - the three things all three shapes must agree on.
*
* MECHANISM: mask-image, not an injected SVG. The shape comes from a file in
* assets/img/decorative/, the COLOUR comes from var(--mw-bleed-tone), which
* SEAM-WP1 put on the element and which already resolves per page from the
* band beneath (periwinkle on /coloring-books/ and /k-world/, butter on the
* three product pages, cream on /griffin-roost-manager/). One shape file
* serves every tone, exactly as the divider system in that same folder has
* always worked - see _studio.css "Divider - Studio-tier shape variants".
*
* THIS OVERRIDES THE TOPIC 34 MASTER DOC, deliberately and with a reason.
* That doc says "Inline SVG, never mask-image, for B and C", citing FIX-WP24's
* rejection above: an engine that drops the mask paints an OPAQUE TONE SLAB
* over the bottom of the hero art, worse than the defect being fixed and
* invisible to screenshot-only QA. That objection is CORRECT and is the reason
* the paint below sits inside an @supports guard. With the guard the failure
* mode inverts: no mask support means no background at all, so the seam
* degrades to today's dissolve - never to a slab. Fixing the failure mode is
* the direct answer; avoiding masks entirely would have cost a third
* inline-SVG helper in a codebase already carrying two that have drifted apart
* once (FIX-WP40 fixed the copy in inc/svg.php and left the copy in
* inc/sections/hero.php still blind-splicing).
*
* mask-mode: alpha is not optional. The decorative SVGs are near-black filled
* paths; WebKit defaults to luminance and collapses them to a flat bar. Same
* trap _studio.css and _divider.css both record.
*
* LAYER ORDER, and why .mw-section__inner moved to 2. Both the seam and the
* tone bleed are pseudo-elements of the same box. At equal z-index, painting
* order is TREE order, so ::after always paints over ::before - and the
* bleed's final stop is fully opaque var(--mw-bleed-tone). A seam left at
* z-index 0 would be painted out by the very ramp it is meant to terminate.
* Hence seam at 1, content at 2, bleed unchanged at 0.
*
* AND THE BLEED MUST SHORTEN WHERE A SEAM EXISTS. Painting above the ramp is
* necessary but not sufficient: a full-length ramp still reaches the band
* tone before the shape does, so the silhouette reads against a background of
* its own colour. Each shape WP sets its own lead-in - the owner ratified a
* 70px lead-in for the angled cut on 2026-08-22 ("A2"). Stated here because
* it is a contract between three WPs, not a detail of any one of them.
*
* overflow: hidden on [data-has-image] means a seam CANNOT overhang into the
* band below; shapes must be drawn to sit inside the hero box. And the bleed
* uses inset-block-end: -1px to hide a sub-pixel sliver at fractional zoom -
* seam layers take the same -1px for the same reason.
* ----------------------------------------------------------------------- */
.mw-section--hero[data-has-image][data-seam]::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: -1px;
z-index: 1;
pointer-events: none;
/* Shape and size are per-seam - SEAM-WP3/WP4/WP5. */
}
/* The paint lives behind a support guard so a dropped mask renders NOTHING
* rather than an opaque slab over the art. See the failure-mode note above. */
@supports ((-webkit-mask-image: url("../../img/decorative/divider-torn-paper-down.svg")) or (mask-image: url("../../img/decorative/divider-torn-paper-down.svg"))) {
.mw-section--hero[data-has-image][data-seam="ridgeline"]::before,
.mw-section--hero[data-has-image][data-seam="skyline"]::before {
/* NO background-color HERE, deliberately. It belongs in the same rule as
* mask-image, in SEAM-WP4/WP5. Setting it here would paint a SOLID
* RECTANGLE over the hero art for as long as the shape file does not
* exist - which is precisely the opaque-slab failure the guard around
* this block exists to prevent, reintroduced one WP early. Caught in
* WP-2's own verification: with mask-image resolving to `none`, a forced
* data-seam="ridgeline" painted rgb(242,208,114) across the full box.
* Shape and paint ship together or neither ships. */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center bottom;
mask-position: center bottom;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-mode: alpha;
mask-mode: alpha;
}
/* -------------------------------------------------------------------
* SEAM B - the ridgeline (Topic 34 SEAM-WP4)
*
* A rolling landscape horizon rising out of the band into the hero art,
* for the two BROWSE pages. Where Seam A announces an edge, this one
* settles: /coloring-books/ is a shelf and /bedtime-stories/ is bedtime,
* and a hard gold diagonal is tonally wrong for both.
*
* THIS IS THE TONE-RESOLUTION PROOF. One shape file and the rule below
* paint PERIWINKLE on /coloring-books/ and BUTTER on /bedtime-stories/,
* with no per-page CSS anywhere. Both heroes carry the SAME token; the
* whole difference is the band each one leads into, which is what the
* FIX-WP41 table SEAM-WP1 hoisted onto the element reads. If a page ever
* seems to need a per-page override here, the table is wrong and the
* table is what to fix.
*
* THE WP SAID "INLINE SVG, NEVER mask-image". Recorded rather than
* quietly ignored. That instruction was written against FIX-WP24's
* objection: an engine that drops the mask paints an opaque tone slab
* over the bottom of the hero art, worse than the defect being fixed and
* invisible to a screenshot-only QA pass. The objection is correct. It is
* also already answered, by the support guard this rule sits inside,
* which inverts the failure mode: no mask support means no paint at all
* and the page degrades to today's dissolve. Two further reasons the
* guard beats the ban. First, mask-image IS this site's divider
* mechanism already, not a new idea introduced here: all ten shapes in
* this same folder are consumed exactly this way by _studio.css and
* _divider.css. Second, inlining would have needed a THIRD inline-SVG
* helper in a codebase already carrying two that drifted apart once,
* which is the failure this file warns about twice.
*
* THE SHAPE IS DRAWN FOR THIS BOX, not borrowed. divider-ridgeline-up.svg
* is proportioned for a 28 to 56px strip; the ballot stretched it across a
* hero edge and it flattened into a shallow wave with almost no relief.
* This one is drawn at 1440 by 116 with three peaks and three troughs of
* deliberately unequal height, so it cannot read as a repeat.
*
* FILLED WHITE, unlike the ten near-black dividers beside it. That is the
* one place this asset departs from the folder and it is deliberate: a
* white fill masks identically whether the engine honours mask-mode alpha
* or falls back to luminance, so the WebKit trap recorded in _studio.css
* and _divider.css cannot reach this file even if the mask-mode
* declaration is ever lost. The alpha declaration above still stands;
* this is belt and braces, not a replacement for it.
*
* NO LEAD-IN, and the reason is structural rather than aesthetic. The
* ramp is bottom-anchored and reaches full tone at the hero's bottom
* edge, which is exactly where this shape's troughs sit. Any lead-in at
* all paints the troughs in the same tone as the peaks and the silhouette
* stops existing. The shape IS the transition here, which is also what
* the preview the owner approved shows: Seam B was balloted with the fade
* already removed. Seam A's ratified 70px does not carry over.
*
* The kill sits INSIDE this guard on purpose. Without mask support there
* is no shape, so the lead-in must survive to keep today's dissolve.
* ------------------------------------------------------------------- */
.mw-section--hero[data-has-image][data-seam="ridgeline"]::before {
block-size: clamp(72px, 8vw, 116px);
background-color: var(--mw-bleed-tone);
-webkit-mask-image: url("../../img/decorative/seam-ridgeline.svg");
mask-image: url("../../img/decorative/seam-ridgeline.svg");
/* PROPORTIONS ARE HELD, NOT STRETCHED - and this is the difference
* between a landscape and a doily. The shared rule above stretches a
* shape to the box with mask-size 100% 100%, which is right for a
* divider strip whose height barely changes. It is wrong here.
* MEASURED at 390: the whole 1440-wide horizon squeezed into 390px
* against a 72px band, and three long hills became a corrugated
* scalloped ripple - a decorative border in a different design
* language, arguably worse than the dissolve this replaces. Sizing
* `auto 100%` scales the shape by its HEIGHT and lets the width fall
* out of the drawn ratio, so a hill is the same shape of hill at
* every viewport and narrow screens simply see less of the horizon.
*
* repeat-x is the safety net that choice needs, not a tiling effect.
* At the 116px ceiling the shape is 1440 wide, so any viewport wider
* than that would run out of mask and the tone would vanish at the
* edges, dropping the art onto the band with no seam at all. The SVG
* is drawn with both ends at the same height and a level tangent so
* the repeat is seamless; the join cannot be found by eye. */
-webkit-mask-size: auto 100%;
mask-size: auto 100%;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
}
/* (0,4,1) — one class, three attributes, one pseudo-element. Beats the
* base geometry rule and the 720px mobile override, both (0,3,1), on
* weight rather than on source order. Same arithmetic as Seam A. */
.mw-section--hero[data-has-image][data-seam="ridgeline"][data-bg-token]::after {
block-size: 0;
}
/* -------------------------------------------------------------------
* SEAM C - the Stormhold skyline (Topic 34 SEAM-WP5)
*
* The hub only. Same layer as Seam B with a different drawing, which is
* the whole point: a third mechanism here is how this file gets bitten a
* third time. Everything below is either a size or a path.
*
* CANON, and it is the reason this seam belongs on /kworld/ and nowhere
* else. Two landmarks have to read in silhouette or it is generic
* rooftops: the Royal Palace ridge broken by the notch of the rooftop
* hole pierced when Waldor was taken and left unrepaired as his
* memorial, and the great lighthouse of Kaedral over the harbour.
* Cross-checked before drawing rather than taken from the location entry
* alone: the pierced roof is corroborated in the Grand Deception event
* entry, and the lighthouse in the Bedtime Tales bible and the 2026-08-16
* Tale 1 ratification. The hero image above it is Adam and Solara looking
* out over that same city.
*
* ONE LAYER, REPEATING - and both halves of that are 2026-08-22 changes
* with a reason, because this rule used to say the opposite.
*
* It was two layers: the city drawn once and centred, plus a plain strip a
* fifth of the box tall repeating underneath it, because a no-repeat shape
* runs out of mask on any viewport wider than itself and would drop the
* tone at both edges. The ban on repeating was CANON: two lighthouses is
* not a wider city, it is a mistake.
*
* That canon argument died when the shape moved. This seam was drawn for
* /kworld/ and bound to it by the Royal Palace notch and the lighthouse of
* Kaedral; /kworld/ now takes the ridgeline, and the city serves the five
* pages under About, where the landmarks read as skyline rather than as
* places. So the shape may tile, and tiling is the honest fix for the
* owner's "stretch the city divider all the way end to end" - it reaches
* both edges at ANY width, where centring left bare wall at each end of
* anything wider than the drawing (about 250px a side at 1700).
*
* It tiles cleanly with no work: both ends of the path already sit level
* at the wall base and no building straddles either edge. It was drawn to
* tile and simply had never been asked to.
*
* Removing layer 2 also removes a defect. The strip painted a wall at 20%
* of the box while the SVG's own wall base sat at 27.6%, so the wall STEPPED
* by about 9px exactly where the drawing ended - introduced when the city
* was redrawn and its wall raised. One layer cannot disagree with itself.
*
* Still sized by HEIGHT, not stretched, and that has not changed: squeezing
* a 1200-wide city into 390 turns a slender lighthouse into a squat block.
* ------------------------------------------------------------------- */
.mw-section--hero[data-has-image][data-seam="skyline"]::before {
/* Double the 72-116 every other seam uses. Owner directive 2026-08-22:
* "increase the size of the siluetes by a factor of 2". Because the
* shape is sized by HEIGHT, doubling this doubles the rendered width
* too - which is half of why the city now reaches both edges.
*
* Named once, on the element, because the content has to know it: see
* the clearance rule below. */
block-size: var(--mw-skyline-h);
background-color: var(--mw-bleed-tone);
-webkit-mask-image: url("../../img/decorative/seam-stormhold-skyline.svg");
mask-image: url("../../img/decorative/seam-stormhold-skyline.svg");
-webkit-mask-size: auto 100%;
mask-size: auto 100%;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-position: left bottom;
mask-position: left bottom;
}
.mw-section--hero[data-has-image][data-seam="skyline"][data-bg-token]::after {
block-size: 0;
}
/* THE CONTENT HAS TO CLEAR THE SPIRES, and this is not optional at the
* size the owner asked for. MEASURED on /publishing/ the moment the layer
* doubled: the hero is 600px, the tallest spire tip reaches 196px above
* its bottom edge, and the subhead's last line stopped at 163px - so the
* city ran 33px up into the sentence. Legible, because content is z-index
* 2 and the seam is 1, but plainly wrong.
*
* The tip sits at 98/116 of the box: 16 of wall plus 82 of spire, read off
* the drawing rather than guessed. Twelve pixels of air on top of that.
* Derived from the same custom property as the layer's height, so the two
* cannot drift apart the next time the size is tuned - the whole reason
* that height is a named property and not a literal.
*
* The tallest spire is the one that matters here, not the median. A rule
* written for the median would leave three or four towers still crossing
* the text, which is worse than no rule at all: it would look deliberate. */
.mw-section--hero[data-has-image][data-seam="skyline"] > .mw-section__inner {
padding-block-end: calc(var(--mw-skyline-h) * 98 / 116 + 12px);
}
}
/* -----------------------------------------------------------------------
* SEAM A - the angled cut (Topic 34 SEAM-WP3)
*
* Owner directive 2026-08-22: the soft dissolve is the wrong gesture on the
* K-World product pages; announce the edge the way /games/ does. This is that
* treatment, ported - the shear values and the polygon math are copied from
* assets/css/games.css (the Topic 33 FIX-WP21 block), not re-derived. A
* numerically different cut would still look angled at a glance and would
* fail the constant-thickness tell below.
*
* ONE SHEAR, THREE PARTICIPANTS. The hero clip, the line and the band clip
* must share one shear value and one box origin. If the line ever TAPERS
* instead of holding a constant thickness end to end, those three have
* drifted apart. That is the documented failure signature from the games
* handoff and it is the cheapest thing to check when this seam looks wrong.
*
* WHAT WAS NOT PORTED, and why. games.css carries the line on a dedicated
* zero-height rail element between hero and flagship. There is no rail here.
* FIX-WP41 resolves this hero's tone with :has(+ .mw-section[...]) - the
* ADJACENT-SIBLING combinator - so any element inserted between the hero and
* the band breaks that adjacency, drops the hero back to the older painters,
* and silently restores a 150-RGB-step colour defect on exactly these two
* pages. It would look plausible in a screenshot of the wrong colour. So the
* line lives on the hero as a pseudo-element and the band is reached with the
* plus combinator; nothing is ever inserted at this join.
*
* That relocation buys one thing the rail could not have. Sitting inside the
* hero, the line is subject to the hero's own clip, so its LOWER edge is not
* computed at all - it is cut by the same path that cuts the art. Line and
* art therefore share one antialiased edge by construction rather than by
* arithmetic agreeing. Only the line's upper edge is its own clip, which is
* why the polygon below differs from the rail's four-cornered one.
*
* THE LEAD-IN STAYS AT 70px. The ballot built this seam both ways on the live
* page and its own written finding recommended dropping the fade entirely
* (variant A1) because at 70px the residual tone combines with the hero scrim,
* which is heaviest at the bottom, and muddies the left third of the cut. The
* owner saw both stills and chose A2, the 70px lead-in, with that mud visible
* in the image they picked. Do not quietly re-apply the removal.
*
* A note on what 70px means under a diagonal. The ramp is bottom-anchored and
* runs top-to-bottom, so the cut eats its last shear pixels on the right: the
* left end gets the whole ramp, the right end only its first 16px. The lead-in
* is therefore a wedge, not a uniform band, and that asymmetry IS the mud the
* ballot named. Making it uniform would need the ramp angled to the cut, whose
* angle depends on viewport width, which would mean restating the shared
* 11-stop smoothstep as a second, angled copy. Two rival copies of one visual
* mechanism is the drift this file has already been bitten by twice. Recorded
* as understood and accepted, not as unnoticed.
*
* GUARDED, like the mask block above. An engine without clip-path would leave
* the hero unclipped, the band pulled up by a bare negative margin, and the
* line painting as a solid ink bar across the bottom of the art - the same
* opaque-slab failure FIX-WP24 rejected masks for. Inside this guard the
* failure mode inverts: no clip-path support means no seam at all, and the
* page degrades to today's dissolve. The guard tests the unprefixed property
* only, because only the unprefixed property is emitted; testing with an "or"
* against a WebKit-prefixed form would let an engine pass the test and then
* get the slab.
* ----------------------------------------------------------------------- */
@supports (clip-path: polygon(0 0, 100% 0, 0 100%)) {
/* The shear. Declared on the hero AND on the band beneath it, because a
* sibling inherits nothing from a sibling. Edit these as ONE set - the
* whole seam is the agreement between them. */
.mw-section--hero[data-has-image][data-seam="angled"],
.mw-section--hero[data-has-image][data-seam="angled"] + .mw-section {
--seam-shear: 54px;
}
/* Shallower diagonal on phones. Keep adjacent to the declaration above. */
@media (max-width: 620px) {
.mw-section--hero[data-has-image][data-seam="angled"],
.mw-section--hero[data-has-image][data-seam="angled"] + .mw-section {
--seam-shear: 30px;
}
}
/* 1 - the hero. Its bottom edge becomes the diagonal, rising to the right. */
.mw-section--hero[data-has-image][data-seam="angled"] {
/* One place, so the line's height and its polygon can never disagree
* about how thick the line is. games.css writes 3px twice. */
--seam-line-w: 3px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seam-shear)), 0 100%);
}
/* 2 - the line, riding the cut. Colour comes from the seam-line property,
* which the FIX-WP41 table resolves from the band BENEATH: ink on butter
* for both of this WP's pages, gold on periwinkle elsewhere. A gold line on
* a gold band would be invisible, which is why this is never hardcoded.
*
* inset-block-end is 0 here, overriding the seam layer's -1px. That -1px
* exists to hide a sub-pixel sliver where a layer meets the hero's bottom
* border edge; here the bottom edge is defined by the hero's clip instead,
* and a 1px offset would shift this polygon off the shear the other two
* participants use.
*
* The polygon cuts only the TOP edge, parallel to the cut and one line
* thickness above it. The bottom is left to the hero's clip - see the
* shared-edge note in the block comment. */
.mw-section--hero[data-has-image][data-seam="angled"]::before {
inset-block-end: 0;
block-size: calc(var(--seam-shear) + var(--seam-line-w));
clip-path: polygon(0 var(--seam-shear), 100% 0, 100% 100%, 0 100%);
/* LONGHANDS, deliberately. `background:` is a shorthand and would
* reset every other background longhand to its initial value, so a
* pairing that sets only the colour would have its image wiped and
* vice versa. Both floors are defined on the element, so neither var
* can be invalid at computed-value time. Image over colour: a pairing
* that wants the games hub's firelight gradient sets both and the
* gradient paints; one that wants a flat line sets only the colour
* and the image stays `none`. */
background-color: var(--mw-seam-line);
background-image: var(--mw-seam-line-image);
}
/* 3 - the lead-in, cut from clamp(140px, 24%, 300px) to the ratified 70px.
* A full-length ramp would reach the band tone long before the cut does, so
* the diagonal would read against a background of its own colour and there
* would be no visible edge at all - the seam would cost work and change
* nothing.
*
* Specificity, deliberately: 1 class + 3 attributes + 1 pseudo-element is
* (0,4,1). The base geometry rule and the 720px mobile override are both
* (0,3,1), so this wins on WEIGHT and needs no help from source order.
* data-bg-token is present on every hero that paints an image and filters
* nothing - it is here to buy the fourth attribute, the same trick SEAM-WP1
* used for the Clear the Skies correction. Scoping to
* mw-section--brand-k-world would also have scored (0,4,1) but would
* silently exclude the studio-tier pages this system is going to reach. */
.mw-section--hero[data-has-image][data-seam="angled"][data-bg-token]::after {
block-size: 70px;
}
/* 4 - the band. Pulled up by one shear and clipped on the same diagonal, so
* its clipped top edge IS the hero's bottom edge. No gap, and no horizontal
* edge anywhere at this join.
*
* The pull is on the band and NOTHING else. The ballot's first attempt put
* it on the line as well; the two diagonals stopped coinciding and the dark
* page background showed through the difference as a wedge. */
.mw-section--hero[data-has-image][data-seam="angled"] + .mw-section {
margin-block-start: calc(-1 * var(--seam-shear));
clip-path: polygon(0 var(--seam-shear), 100% 0, 100% 100%, 0 100%);
}
/* Give the band back exactly what the pull took, so its CONTENT does not
* move at all and only its background reaches up into the cut. Deliberately
* one shear and not a rounder number: minus one shear plus one shear is
* zero net movement, which is the whole point and is what makes this seam
* safe to drop onto a page whose composition is already signed off.
*
* Applied to the inner rather than the section because the section's own
* padding-block is a shorthand - overriding its start half here would
* discard the section's padding instead of adding to it. */
.mw-section--hero[data-has-image][data-seam="angled"] + .mw-section > .mw-section__inner {
padding-block-start: var(--seam-shear);
}
}
/* Narrow viewports: keep the bleed PROPORTIONATE. At this width the hero's
* copy stack (eyebrow/badge/headline/subhead/CTA) routinely exceeds
* min-block-size, so the box is content-driven and a quarter of it is a lot
* of vertical real estate; 20% reads as haze rather than as a wash.
*
* CORRECTED HERE (FIX-WP24): this comment used to claim the override existed
* "so it cannot reach the CTA", citing /coloring-book-product/ at 375px.
* That reason is FALSE and the file already contains the disproof — FIX-WP23
* ran the A/B and the CTA renders byte-identically with the bleed on and off
* (9.31:1 both ways), because `::after` is z-index 0 and `.mw-section__inner`
* is z-index 2 (1 before Topic 34): the bleed paints BEHIND the content, always. Overlap with the
* CTA row is not a defect and never was. The 720px breakpoint still matches
* this stylesheet family's mobile cutoff (_footer.css:110,
* _media-text.css:460). Changing the value while leaving a disproved reason
* in place is precisely the drift this file's comment discipline exists to
* stop. */
@media (max-width: 720px) {
.mw-section--hero[data-has-image].mw-section--brand-k-world::after {
block-size: clamp(90px, 20%, 170px);
}
}
/* -----------------------------------------------------------------------
* Clear the Skies hero → premise dissolve (Topic 33 FIX-WP23)
*
* Owner directive 2026-07-30: "Big Hero image needs to bleed through the
* first paragraph". The siege art stopped dead on a hard horizontal line at
* the hero's bottom edge, so the page read as picture-then-text.
*
* This is a PORT, not an invention. The design system already specifies this
* exact treatment for this exact hero — `ClearTheSkies.jsx` passes `bleed` to
* CinematicHero, which emits `.chero--bleed` + a `.chero__haze` element
* (site.css `.chero__haze`, "§6.4 / §6A.4 bleed pattern"). Our theme ported
* the hero but never the bleed, which is why the edge was hard here and not
* in the design. Gradient stops and the clamp() are the design's, verbatim.
*
* Rendered as ::after rather than a markup element so inc/sections/hero.php
* needs no new arg — the layering is identical, and it reuses the slot the
* FIX-WP7 K-World bleed already established:
*
* .mw-section__bg z-index -2 (art)
* .mw-section__scrim z-index -1 (legibility gradient)
* ::after (this rule) z-index 0 (dissolve into the incoming tone)
* ::before z-index 1 (SEAM shape, Topic 34 - absent unless [data-seam])
* .mw-section__inner z-index 2 (content)
*
* The two ::after rules can never collide: FIX-WP7's is scoped to
* .mw-section--brand-k-world, and this hero is brand-studio.
*
* The terminus is the INCOMING band's token (the premise media-text band is
* studio-violet at template-page-clear-the-skies.php:265), not the hero's own
* studio-dark, so the dissolve lands on the colour that actually follows it.
*
* The alpha stops below are DERIVED FROM THAT SAME TOKEN and must stay that way.
* They read rgba(14, 10, 42, *) = #0e0a2a = studio-violet.
*
* History, because this trap already sprang once. FIX-WP23 shipped these stops
* as rgba(14, 8, 65, *) — studio-DARK — which was correct only because FIX-WP19
* had collapsed studio-violet onto studio-dark, making the two interchangeable.
* That WP left the precondition in writing ("if the violet tone is ever restored,
* re-derive the alpha stops from it as well as the terminus"), and FIX-WP25
* restored it on 2026-08-01, so they are re-derived here.
*
* Do NOT "simplify" this by pointing the terminus at var(--studio-dark) to match
* the old stops. That was proposed at FIX-WP25's sign-off gate and is the wrong
* branch: the hero would then dissolve to dark while the band beneath it paints
* violet, reintroducing a hard edge at the hero seam — the exact defect FIX-WP23
* existed to remove. If the token moves again, move these stops with it.
*
* NOT ported: the design's `.chero--bleed .chero__scrim` override, which adds a
* left-weighted gradient for bottom-left-aligned copy. Our hero centres its
* content stack (justify-content: center) where the design bottom-aligns it, so
* that override would darken the top and thin the middle exactly where our copy
* sits. Our existing scrim already measures clean and is left alone.
* ----------------------------------------------------------------------- */
.mw-page-clear-the-skies .mw-section--hero[data-has-image]::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: -1px; /* -1px hides a sub-pixel seam at fractional zooms */
block-size: clamp(130px, 24%, 280px);
z-index: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(14, 10, 42, 0) 0%,
rgba(14, 10, 42, 0.45) 52%,
rgba(14, 10, 42, 0.86) 82%,
var(--studio-violet, #0e0a2a) 100%
);
}
/* Narrow viewports: cap the dissolve so it stays proportionate on a short hero
* (626px at 390x844, where an unclamped 24% would eat a quarter of the scene).
*
* NOT for CTA contrast. At 390 the CTA row's bottom sits 70px *inside* this
* band, which is the geometry the K-World override above was written to avoid —
* but measured off the rendered pixels, the button is byte-identical with the
* dissolve on and off: fill rgb(242,195,48), label rgb(48,32,35), 9.31:1 both
* ways. It cannot dull the CTA, because ::after is z-index 0 and
* .mw-section__inner is z-index 2 (1 before Topic 34) — the dissolve paints BEHIND the content, not
* over it. Same layering applies to the K-World rule above, whose comment
* asserted the CTA reason outright; FIX-WP24 rewrote it to the real one
* (proportionality) when it changed that clamp. Both overrides now state the
* same, correct justification. */
@media (max-width: 720px) {
.mw-page-clear-the-skies .mw-section--hero[data-has-image]::after {
block-size: clamp(80px, 14vh, 150px);
}
}