/* ===================================================================
   Sumoset. One non-scrolling screen, cut on a diagonal.
   SumoSquash owns the dark wedge, SumoMorph the light one.

   Shares the house design system of both product sites: the same
   sumo.svg mark consumed as a CSS mask, the same Fredoka wordmark,
   the same token names (--bg/--ink/--muted/--brand/--brand2), carrying
   across only the ones this page paints with. It diverges in one
   deliberate way. The product sites
   randomise their accent palette on every page load, and this page
   must not: the whole subject here is the contrast between the two
   halves, so SumoSquash is pinned to pal-heavy and SumoMorph to
   pal-indigo. A palette that changed on reload would read as a bug.

   Nothing here is loaded from a network. The mark and all three
   Fredoka weights sit next to this file.
   =================================================================== */

@font-face { font-family:"Fredoka"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/fredoka-600.woff2) format("woff2"); }

/* The seam position and lean have to be REGISTERED, or clip-path treats
   them as unanimatable tokens and the hover shift jumps instead of
   sliding. Initial values must be computationally independent, so no
   viewport units here. The real values are set on .stage. */
@property --seam  { syntax:"<percentage>"; inherits:true; initial-value:50%; }
@property --tilt  { syntax:"<length>";     inherits:true; initial-value:0px; }
@property --tiltv { syntax:"<length>";     inherits:true; initial-value:0px; }

*, *::before, *::after { box-sizing:border-box; }

html, body {
  height:100%; height:100dvh;
  margin:0; padding:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:#0c0e13;
}
body {
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1, p { margin:0; }

.sr-only {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ===================================================================
   Stage. Owns every geometry variable, so one rule moves the whole cut.
   --u is the type unit: it tracks width until the viewport gets short,
   then height takes over. That single guard is what keeps a 1280x720
   laptop from overflowing a page with nowhere to scroll to.
   =================================================================== */
.stage {
  position:relative;
  height:100dvh; width:100%;
  overflow:hidden;
  --seam:50%;
  --tilt:4vw;
  --tiltv:4.5vh;
  --gutter:2.6vw;
  --pad:clamp(24px, 4.6vw, 92px);
  --angle:7deg;
  /* One fade for the whole tableau. Applied to the GROUP, not to the ring and
     the wrestlers separately: inside the group they composite at full strength,
     so each wrestler still reads solidly against the clay he is standing on,
     and only the finished scene is knocked back toward the page ground. Fading
     them individually is what made them look pasted on top of the ring. */
  --scene:.5;
  --u:min(1vw, 1.8vh);
  transition:--seam 480ms cubic-bezier(.22,.61,.24,1);
  animation:shake 260ms 700ms both;
}

/* ===================================================================
   The two halves. Each is a full-viewport box that happens to be
   clipped, which is the one thing to remember when editing: centring
   anything inside a .side puts it UNDER the diagonal. Copy is pinned
   to the outer edge by .wedge instead.
   =================================================================== */
.side { position:absolute; inset:0; z-index:1; background:var(--bg); color:var(--ink); }

.side-squash {
  color-scheme:dark;
  --bg:#0c0e13; --ink:#eef1f6; --muted:#9aa4b2;
  --brand:#e2483f; --brand-ink:#17110e; --brand2:#e6b12e;
  clip-path:polygon(0 0,
                    calc(var(--seam) + var(--tilt)) 0,
                    calc(var(--seam) - var(--tilt)) 100%,
                    0 100%);
  animation:slam-left 780ms cubic-bezier(.19,.86,.25,1.01) 120ms both;
}
.side-morph {
  color-scheme:light;
  --bg:#f4f6fa; --ink:#12161d; --muted:#5c6672;
  --brand:#4b52c9; --brand-ink:#ffffff; --brand2:#c2551a;
  clip-path:polygon(calc(var(--seam) + var(--tilt)) 0,
                    100% 0,
                    100% 100%,
                    calc(var(--seam) - var(--tilt)) 100%);
  animation:slam-right 780ms cubic-bezier(.19,.86,.25,1.01) 120ms both;
}

/* Hovering a half pushes the cut into the other one. :focus-within gives
   keyboard users the same thing, since each half holds exactly one link. */
.stage:has(.side-squash:hover), .stage:has(.side-squash:focus-within) { --seam:55%; }
.stage:has(.side-morph:hover),  .stage:has(.side-morph:focus-within)  { --seam:45%; }

/* ===================================================================
   Copy. Held clear of the diagonal at its widest excursion (seam 55%
   plus the lean plus a gutter), so the box never resizes when the seam
   moves and the headline never re-wraps mid-animation.
   =================================================================== */
.wedge {
  position:absolute; top:0; bottom:0;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(30px, 8vh, 96px);
  gap:clamp(5px, calc(var(--u) * .8), 15px);
  z-index:2; min-height:0;
}
.side-squash .wedge {
  left:var(--pad);
  right:calc(55% + var(--tilt) + var(--gutter));
  align-items:flex-start; text-align:left;
}
.side-morph .wedge {
  right:var(--pad);
  left:calc(55% + var(--tilt) + var(--gutter));
  align-items:flex-end; text-align:right;
}

.eyebrow, .chips, .edge, .ticker {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow {
  display:none;
  font-size:clamp(9.5px, calc(var(--u) * .78), 13px);
  color:var(--brand2);
}
.wordmark {
  font-family:"Fredoka", "Trebuchet MS", system-ui, sans-serif;
  font-weight:600;
  font-size:clamp(30px, calc(var(--u) * 5.4), 96px);
  line-height:.94; letter-spacing:-.02em;
  color:var(--ink);
}
/* The second word sits flush with the first. It used to hang by .09em, which
   read as a misalignment rather than a device. */
.wordmark span { display:block; color:var(--brand2); }

h1 {
  font-size:clamp(16.5px, calc(var(--u) * 1.9), 33px);
  font-weight:600; line-height:1.15; letter-spacing:-.02em;
  max-width:19ch;
}
/* Both subs have a shorter phone variant, swapped rather than scaled so the
   saving is real lines rather than smaller text. display:none on the unused
   one keeps it out of the accessibility tree as well.

   Sizing this by the desktop's own line count is not enough: the system font
   stack resolves to different faces per platform, and a device whose metrics
   wrap one line more than this one is what put a button off the bottom in the
   first place. The margin to hold is "how many EXTRA wrapped lines each band
   could take", and it should stay at 2 or more. */
.sub-tight { display:none; }

.sub {
  font-size:clamp(12.5px, calc(var(--u) * 1.12), 17.5px);
  line-height:1.5; color:var(--muted);
  max-width:40ch;
}
.chips {
  font-size:clamp(9.5px, calc(var(--u) * .76), 12.5px);
  color:var(--muted); letter-spacing:.1em;
}
.chips i { font-style:normal; color:var(--brand); padding:0 .35em; }

/* The button's shape lives on .cta-face, not on .cta itself. clip-path clips a
   element's pseudo-elements too, and .cta::after is the stretched hit area that
   makes the whole half clickable — cutting the link directly would silently
   shrink that target to the size of the button. Shape on the inner span, hit
   area and focus ring on the unclipped link. */
.cta {
  position:relative; display:inline-flex;
  margin-top:clamp(3px, calc(var(--u) * .55), 12px);
  text-decoration:none;
  font:600 clamp(12.5px, calc(var(--u) * 1.06), 17px)/1 "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  transition:transform 220ms cubic-bezier(.2,.7,.3,1);
}
/* The trailing edge carries the page's own diagonal, leaning the same way as
   the seam. Mirrored between halves so each leans into the cut, and measured in
   em so it tracks the type rather than drifting at other sizes. */
.cta-face {
  display:inline-flex; align-items:center; gap:.6em;
  padding:clamp(9px, calc(var(--u) * .95), 16px) clamp(16px, calc(var(--u) * 1.7), 30px);
  background:var(--brand); color:var(--brand-ink);
  border-radius:3px;
  transition:background-color 220ms, color 220ms, box-shadow 220ms;
}
.side-squash .cta-face {
  padding-right:calc(clamp(16px, calc(var(--u) * 1.7), 30px) + .55em);
  clip-path:polygon(0 0, 100% 0, calc(100% - .9em) 100%, 0 100%);
}
.side-morph .cta-face {
  padding-left:calc(clamp(16px, calc(var(--u) * 1.7), 30px) + .55em);
  clip-path:polygon(.9em 0, 100% 0, 100% 100%, 0 100%);
}
.cta i { font-style:normal; transition:transform 260ms cubic-bezier(.2,.7,.3,1); }

/* The whole half is the click target. One real link, one accessible
   name, no duplicate. The section clip-path bounds it to the wedge. */
.cta::after { content:""; position:absolute; inset:-100vh -100vw; z-index:5; }
/* Hovering anywhere in a half lights its button, because the whole half IS the
   link. The flip to brass is what makes that legible at a glance. */
.side:hover .cta { transform:translateY(-2px); }
.side:hover .cta-face { background:var(--brand2); color:#17110e;
  box-shadow:0 10px 28px rgba(0,0,0,.28); }
.side:hover .cta i { transform:translateX(4px); }
.cta:focus-visible { outline:3px solid var(--brand2); outline-offset:4px; }

/* ===================================================================
   Furniture. All decorative, all aria-hidden in the markup.
   =================================================================== */

/* One dohyo spanning the cut, with a rikishi squatting in each half.

   The group is written into BOTH sides at identical coordinates and each
   copy is clipped to its own wedge, so together they reconstruct one
   continuous ring across the diagonal. That is the only way to get a
   single element to sit ABOVE each half's ground but BELOW its copy: a
   .wedge lives inside .side, so nothing painted in .stage can slot
   between the two.

   Each wrestler is a VP9 WebM carrying a real alpha channel, keyed from
   a green screen, so both read identically over black and over off-white.

   The ring is left IN NORMAL FLOW rather than positioned, so the image
   itself gives .dohyo its height. An earlier version set the height with
   aspect-ratio and absolutely positioned the image inside it; if that
   ratio fails to resolve the box collapses and every wrestler percentage
   below it resolves against zero, which drops them off the bottom of the
   screen. Letting the image size the box removes that whole failure mode. */
.dohyo {
  position:absolute; left:50%; top:44%;
  /* Sized to the ring artwork's own aspect. The sharpened 4K redraw came back
     at 2.288 rather than the first version's 2.586, so keeping the old 2100px
     box would have re-framed the scene as a side effect of sharpening it.
     1820px restores the previous framing and keeps the box height within 2%
     of what it was, so the wrestlers' footing is undisturbed. */
  width:min(1820px, 106vw);
  transform:translateX(-50%);
  pointer-events:none; z-index:0;
  opacity:var(--scene);
}
.ring { display:block; width:100%; height:auto; }

/* Squared up either side of centre, standing on the clay.

   The gap is measured from the PAGE centre in vw, not as a percentage of
   .dohyo, so it does not widen just because the ring grew. Each wrestler is
   clipped by his own half, so one straying across the diagonal loses whatever
   crosses it — usually the head, since the cut leans. The offset below keeps
   both well clear of the seam at every height they occupy. */
.rikishi {
  position:absolute; bottom:64%; height:44%; width:auto;
  left:50%;
  opacity:1;
}
/* Anchored by CENTRE, not by inner edge. The two clips were cropped to their
   own alpha bounds and the light wrestler's stance is wider, so equal heights
   give unequal frame widths (0.755 vs 0.698); anchoring the inner edges put
   his body 11px further out than his opponent's. The figure sits at 49.9% of
   frame width in both, so translateX(-50%) lands each body on its mark.

   The two offsets are deliberately NOT equal. Geometrically matched offsets
   still read as lopsided, because the light wrestler's wider stance and
   forward lean carry more visual mass outward. He is pulled 3.5vw further in
   to make the pair look balanced, which is the thing that actually matters. */
.rikishi-dark  { transform:translateX(calc(-50% - 19.5vw)); }
.rikishi-light { transform:translateX(calc(-50% + 14vw)); }

.edge {
  position:absolute; top:clamp(30px, 8vh, 96px);
  font-size:clamp(12px, calc(var(--u) * 1.15), 20px);
  letter-spacing:.16em;
  color:var(--muted); opacity:.9; white-space:nowrap; pointer-events:none;
  writing-mode:vertical-rl;
}
.side-squash .edge { left:clamp(10px, 1.7vw, 32px);  transform:rotate(180deg); }
.side-morph  .edge { right:clamp(10px, 1.7vw, 32px); }

/* Format lists running parallel to the cut. The strip is laid out
   horizontally then rotated a quarter turn PLUS the seam lean, so it
   stays true to the diagonal at any viewport ratio. The final
   translateY rides in the rotated frame, which is what pushes each
   ticker to its own side of the line. */
.ticker {
  position:absolute; top:50%; left:var(--seam);
  width:130vh; height:1.7em; overflow:hidden;
  font-size:clamp(9px, calc(var(--u) * .72), 12px);
  color:var(--brand2); opacity:.42; pointer-events:none;
  transform:translate(-50%, -50%) rotate(calc(90deg + var(--angle))) translateY(var(--tk));
  display:flex;
}
.ticker-squash { --tk:calc(var(--tilt) * .6 + 26px); }
.ticker-morph  { --tk:calc(-1 * (var(--tilt) * .6 + 26px)); }
.ticker-run { flex:none; width:65vh; overflow:hidden; white-space:nowrap;
  animation:tick 30s linear infinite; }
.ticker-morph .ticker-run { animation-direction:reverse; }

/* The cut itself: the same polygon as the wedges, narrowed to a hairline,
   so it tracks --seam exactly with no trigonometry to drift out of sync. */
.seam {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:#e6b12e;
  clip-path:polygon(calc(var(--seam) + var(--tilt) - 1px) 0,
                    calc(var(--seam) + var(--tilt) + 1px) 0,
                    calc(var(--seam) - var(--tilt) + 1px) 100%,
                    calc(var(--seam) - var(--tilt) - 1px) 100%);
  animation:flash 900ms 640ms both;
}

/* ===================================================================
   Two full-viewport layers carrying identical furniture, each clipped
   to one half by the same polygon as its wedge. Whatever is drawn here
   is genuinely sliced by the seam and recoloured mid-glyph: one logo
   mark, one sentence, two products. Never give these pointer events.
   =================================================================== */
.overlay { position:absolute; inset:0; z-index:4; pointer-events:none; }
.over-dark {
  --ink:#eef1f6; --mark:#e2483f; --disc:#0c0e13; --ring:#2c3542;
  clip-path:polygon(0 0, calc(var(--seam) + var(--tilt)) 0, calc(var(--seam) - var(--tilt)) 100%, 0 100%);
}
.over-light {
  --ink:#12161d; --mark:#4b52c9; --disc:#f4f6fa; --ring:#d2d8e5;
  clip-path:polygon(calc(var(--seam) + var(--tilt)) 0, 100% 0, 100% 100%, calc(var(--seam) - var(--tilt)) 100%);
}

.overlay::before {
  content:""; position:absolute;
  left:calc(var(--seam) + var(--tilt) * .48); top:19%;
  width:clamp(126px, calc(var(--u) * 15.8), 300px); aspect-ratio:1;
  border-radius:50%; background:var(--disc); border:1px solid var(--ring);
  animation:pop-disc 660ms cubic-bezier(.18,1.32,.4,1) 680ms both;
}
.medallion {
  position:absolute;
  left:calc(var(--seam) + var(--tilt) * .48); top:19%;
  width:clamp(92px, calc(var(--u) * 11.4), 216px); aspect-ratio:1;
  background-color:var(--mark);
  -webkit-mask:url(../img/sumo.svg) center / contain no-repeat;
          mask:url(../img/sumo.svg) center / contain no-repeat;
  animation:pop 660ms cubic-bezier(.18,1.32,.4,1) 700ms both;
}

/* ===================================================================
   Motion. Everything the entrance needs lives in keyframes and nothing
   in a base rule, so switching the animations off in the reduced-motion
   block lands the page straight in its finished state.
   =================================================================== */
@keyframes slam-left  { from { transform:translateX(-102%); } to { transform:translateX(0); } }
@keyframes slam-right { from { transform:translateX(102%);  } to { transform:translateX(0); } }
@keyframes slam-up    { from { transform:translateY(-102%); } to { transform:translateY(0); } }
@keyframes slam-down  { from { transform:translateY(102%);  } to { transform:translateY(0); } }
@keyframes shake {
  0%, 100% { transform:translate(0, 0); }
  20%      { transform:translate(-3px, 2px); }
  45%      { transform:translate(2px, -2px); }
  70%      { transform:translate(-1px, 1px); }
}
@keyframes pop {
  from { transform:translate(-50%, -50%) scale(0) rotate(-16deg); }
  to   { transform:translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes pop-disc {
  from { transform:translate(-50%, -50%) scale(0); }
  to   { transform:translate(-50%, -50%) scale(1); }
}
@keyframes flash {
  0%, 66% { opacity:0; }
  72%     { opacity:1; background:#fff6dd; }
  100%    { opacity:1; background:#e6b12e; }
}
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-100%); } }

.reveal { animation:rise 560ms cubic-bezier(.2,.7,.3,1) both; }
.wedge .reveal:nth-child(1) { animation-delay:720ms; }
.wedge .reveal:nth-child(2) { animation-delay:790ms; }
.wedge .reveal:nth-child(3) { animation-delay:860ms; }
.wedge .reveal:nth-child(4) { animation-delay:920ms; }
.wedge .reveal:nth-child(5) { animation-delay:975ms; }
.wedge .reveal:nth-child(6) { animation-delay:1025ms; }

/* ===================================================================
   Wide and tall enough to spend the room.
   =================================================================== */
@media (min-width:1600px) and (min-height:900px) {
  .stage { --u:min(1vw, 1.7vh); --gutter:2.2vw; }
  .sub { max-width:44ch; }
}

/* ===================================================================
   Narrow or portrait: the cut rotates rather than the page stacking.
   It is still exactly one screen and it still does not scroll. There
   is no hover on a touch screen, so the seam is fixed here and both
   links sit in the open.
   =================================================================== */
@media (max-width:760px), (max-aspect-ratio:4/5) {
  .stage {
    --tilt:0px; --tiltv:4.2vh;
    --u:min(2.6vw, 1.15vh);
    /* Phone type unit. Tracks width until the screen is short, then height
       takes over. Without the height term a 360x640 handset renders the same
       type as a 390x844 one and the lower half walks off the bottom, which is
       not a failure the page can absorb: there is no scrollbar to catch it. */
    --m:min(1vw, .46vh);
    --pad:clamp(16px, min(5.6vw, 3vh), 44px);
    /* One fade for ring plus wrestlers, as on desktop. The previous per-figure
       opacities (.40 and .22) also left the two wrestlers visibly unequal,
       which desktop never was. */
    --scene:.5;
    transition:none;
  }
  .stage:has(.side-squash:hover), .stage:has(.side-squash:focus-within),
  .stage:has(.side-morph:hover),  .stage:has(.side-morph:focus-within) { --seam:50%; }

  .side-squash {
    clip-path:polygon(0 0, 100% 0,
                      100% calc(var(--seam) - var(--tiltv)),
                      0 calc(var(--seam) + var(--tiltv)));
    animation-name:slam-up;
  }
  .side-morph {
    clip-path:polygon(0 calc(var(--seam) + var(--tiltv)),
                      100% calc(var(--seam) - var(--tiltv)),
                      100% 100%, 0 100%);
    animation-name:slam-down;
  }
  .seam {
    clip-path:polygon(0 calc(var(--seam) + var(--tiltv) - 1px),
                      100% calc(var(--seam) - var(--tiltv) - 1px),
                      100% calc(var(--seam) - var(--tiltv) + 1px),
                      0 calc(var(--seam) + var(--tiltv) + 1px));
  }
  .over-dark  { clip-path:polygon(0 0, 100% 0, 100% calc(var(--seam) - var(--tiltv)), 0 calc(var(--seam) + var(--tiltv))); }
  .over-light { clip-path:polygon(0 calc(var(--seam) + var(--tiltv)), 100% calc(var(--seam) - var(--tiltv)), 100% 100%, 0 100%); }

  .wedge { gap:clamp(5px, calc(var(--m) * 2.2), 15px); padding-top:0; }
  .eyebrow { display:block; }
  .side-squash .wedge {
    left:var(--pad); right:var(--pad);
    top:var(--pad); bottom:calc(50% + var(--tiltv) + 3.2vh);
    justify-content:flex-end; align-items:flex-start; text-align:left;
  }
  /* Right-aligned, as on desktop, and for a second reason here: this half's
     wrestler stands at the LEFT of the band, so left-aligned copy would sit
     straight on top of him. */
  .side-morph .wedge {
    left:var(--pad); right:var(--pad);
    top:calc(50% + var(--tiltv) + 3.2vh); bottom:var(--pad);
    justify-content:flex-start; align-items:flex-end; text-align:right;
  }

  .wordmark { font-size:clamp(25px, calc(var(--m) * 9.5), 54px); }
  h1 { font-size:clamp(14.5px, calc(var(--m) * 4.75), 25px); max-width:24ch; }
  .sub { font-size:clamp(11.5px, calc(var(--m) * 3.45), 16.5px); max-width:32ch; line-height:1.45; }
  .sub-full  { display:none; }
  .sub-tight { display:inline; }
  .eyebrow { font-size:clamp(8.5px, calc(var(--m) * 2.7), 11.5px); }
  .cta { font-size:clamp(12px, calc(var(--m) * 3.9), 17px); }
  .cta-face { padding:clamp(9px, calc(var(--m) * 3.2), 15px) clamp(17px, calc(var(--m) * 6), 28px); }
  .side-squash .cta-face { padding-right:calc(clamp(17px, calc(var(--m) * 6), 28px) + .55em); }
  .side-morph  .cta-face { padding-left:calc(clamp(17px, calc(var(--m) * 6), 28px) + .55em); }

  .ticker, .edge { display:none; }
  /* The chips cost about 22px of band height. The shortest phones have as
     little as 12px spare, so they are earned by height rather than assumed. */
  .chips { display:none; }
  /* Stacked halves. The ring DOES belong here — being sliced by the cut is
     on-concept, exactly as the logo mark is.
     What cannot be sliced is a wrestler: the cut runs through the height they
     would share, and each is clipped to his own half, so one would lose his
     head. So the ring spans the seam and the two of them keep to their own
     bands, mirrored to face into it. */
  .dohyo { top:0; right:0; bottom:0; left:0;
           width:auto; height:auto; transform:none; }
  /* No ring on phones. It was tried spanning the cut and knocked well back,
     and it still read as clutter behind two bands that are already full of
     copy. The wrestlers carry the dohyo idea on their own here. */
  .ring { display:none; }
  .rikishi { width:auto; bottom:auto; transform:scaleX(-1); opacity:1; }
  /* Each wrestler takes the side its half's copy does not use: the dark half
     reads left, the light half reads right. */
  .rikishi-dark  { right:-7vw; left:auto; bottom:56%; height:29vh; }
  /* Bigger costs width as well as height, so he had to come back 2vw to pay
     for it. Net he is still MORE visible than before: 8% larger, and about
     4% more of him on screen. Growing further, or holding -6vw while growing,
     puts him into the copy on a 320x568 handset — that one has no measure caps
     (they are gated on height) and the narrowest band on the page. */
  .rikishi-light { left:-8vw; right:auto; top:57%; height:28vh; }

  /* The disc punches the mark out of whatever sits behind it, which is now the
     ring. It must be moved down to the seam with the mark, or the two come
     apart: the mark uses --seam here while the disc still had the desktop 19%. */
  .overlay::before {
    left:50%; top:var(--seam); width:clamp(98px, 28vw, 138px);
  }
  .medallion { left:50%; top:var(--seam); width:clamp(74px, 21vw, 104px); }
}

/* Short landscape phones: drop the detail rather than let anything crawl
   under the cut. A screen this size has room for the promise or the
   supporting line, not both. */
/* The SumoMorph headline is the widest thing in its band, so it — not the sub —
   is what sets how far right that half's wrestler can sit. Capping it at 20ch
   on tall phones lets him come in to -12vw with 8px still between them. Only
   tall phones, because the extra line it costs is only affordable there, and
   only the headline: capping the chips too costs a second line for nothing,
   since they are not the leftmost element at the sizes that bind. */
@media (max-width:760px) and (min-height:800px), (max-aspect-ratio:4/5) and (min-height:800px) {
  .side-morph h1  { max-width:20ch; }
  .side-morph .sub { max-width:26ch; }
}

/* Tall enough phones can afford the chips row; the shortest cannot. Measured
   spare band height runs 12px at 320x568 up to 70px at 412x915, and the row
   costs about 22px with its gap. */
@media (max-width:760px) and (min-height:660px), (max-aspect-ratio:4/5) and (min-height:660px) {
  .chips { display:block; }
}

@media (max-height:430px) and (min-aspect-ratio:1/1) {
  .sub, .chips { display:none; }
  .stage { --u:min(1vw, 2.15vh); }
  /* A ring this wide would be taller than the screen. It goes, and .dohyo gets
     an explicit box in its place: with the ring hidden the image no longer
     gives the group a height, and every wrestler percentage would resolve
     against zero and drop them off the bottom. */
  .dohyo { top:0; right:0; bottom:0; left:0;
           width:auto; height:auto; transform:none; }
  .stage { --scene:1; }
  .ring { display:none; }
  .rikishi { height:56vh; bottom:2vh; opacity:1; left:50%; }
  .rikishi-dark  { right:auto; transform:translateX(calc(-50% - 15vw)); }
  .rikishi-light { right:auto; transform:translateX(calc(-50% + 15vw)); }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .side, .seam, .medallion, .overlay::before, .reveal,
  .ticker-run { animation:none !important; }
  /* pop and pop-disc both carry the centring translate, so cancelling the
     animation has to hand it back. */
  .medallion, .overlay::before { transform:translate(-50%, -50%); }
  .stage { transition:none; --seam:50%; }
  .cta, .cta i { transition:none; }
}