/* =====================================================================
DEATH & DEATH-LIKE SUFFERINGS EXPERT — cream vanilla on cherry cola
=====================================================================
EVERY RULE IN THIS FILE IS SCOPED TO .fn--mrityu, which the layout puts
on for this funnel and no other. That scope is the only thing
standing between this design and the two funnels that share the same
stylesheet before it, so it is not optional on a single selector —
including the ones that look global, like the body ground.
── WHERE THE FONTS COME FROM ─────────────────────────────────────────
NOT from an @import here. They were, and it was a mistake: a stylesheet
containing an @import is not applied until that import resolves, so the
page could paint with none of this file's rules in effect. It was
measurable — a contrast audit run a second after load intermittently
read the buttons as unstyled.
They are declared on this funnel's registry entry as `fonts` instead,
and the shared layout emits a carries a UA background-color (buttonface, #F0F0F0). The
gradient covers it, but anything that stops the image painting —
forced colours, a failed paint — would show grey through. */
background-color: transparent;
/* 8.62:1 at the gradient's darkest stop, 5.26:1 at its lightest */
color: var(--mr-fill-ink);
font-family: var(--mr-sans);
font-size: .89rem;
font-weight: 600;
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
box-shadow: 0 14px 32px -16px rgba(168, 40, 34, .85);
transition: transform .3s cubic-bezier(.22, 1, .36, 1),
box-shadow .3s ease,
background-color .25s ease,
color .25s ease,
border-color .25s ease;
}
.fn--mrityu .fn-mr-btn:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px -18px rgba(168, 40, 34, .95);
}
.fn--mrityu .fn-mr-btn:active { transform: translateY(0); }
/* The arrow travels on hover. Its own transform, so it does not fight the
button's lift. */
.fn--mrityu .fn-mr-btn__arw {
transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-btn:hover .fn-mr-btn__arw { transform: translateX(4px); }
/* The form's own button keeps more height than the inline ones: it sits
alone at the foot of a long field list and is the page's primary action. */
.fn--mrityu .fn-mr-btn--block {
width: 100%;
padding-block: 15px;
font-size: .95rem;
}
/* Ghost: for the secondary action on a DARK ground. */
.fn--mrityu .fn-mr-btn--ghost {
background-image: none;
background-color: transparent;
/* 17.56:1 */
color: var(--ink);
border-color: var(--line-2);
box-shadow: none;
}
.fn--mrityu .fn-mr-btn--ghost:hover {
background-color: var(--mr-cream);
/* 16.60:1 */
color: var(--mr-ground-2);
border-color: var(--mr-cream);
box-shadow: 0 16px 34px -18px rgba(251, 243, 228, .5);
}
/* Outline: the same idea on a CREAM ground, where the ink has to invert. */
.fn--mrityu .fn-mr-btn--outline {
background-image: none;
background-color: transparent;
/* 16.60:1 on the cream panel */
color: var(--mr-ground-2);
border-color: rgba(42, 10, 12, .3);
box-shadow: none;
}
.fn--mrityu .fn-mr-btn--outline:hover {
background-color: var(--mr-ground-2);
color: var(--mr-cream);
border-color: var(--mr-ground-2);
}
/* Cream: the primary action when it sits ON the cherry fill, where the
cherry button would be invisible against its own ground. */
.fn--mrityu .fn-mr-btn--cream {
background-image: none;
background-color: var(--mr-cream);
/* 16.60:1 */
color: var(--mr-ground-2);
box-shadow: 0 14px 32px -16px rgba(12, 3, 4, .7);
}
.fn--mrityu .fn-mr-btn--cream:hover {
background-color: #FFFFFF;
color: var(--mr-ground);
}
.fn--mrityu .fn-mr-btn:focus-visible {
outline: 2px solid var(--mr-amber);
outline-offset: 3px;
}
/* ── Badge / pill ────────────────────────────────────────────────────── */
.fn--mrityu .fn-mr-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 17px;
border: 1px solid var(--line-2, rgba(251, 243, 228, .26));
border-radius: 999px;
background: rgba(251, 243, 228, .07);
font-size: .76rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-2, #E4D3B4);
}
.fn--mrityu .fn-mr-badge__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mr-amber);
box-shadow: 0 0 0 0 rgba(232, 178, 74, .55);
animation: mr-ping 2.4s ease-out infinite;
}
/* On a cream panel the badge has to invert — a translucent cream chip on
cream has no edge at all. */
.fn--mrityu .fn-mr-badge--dark {
background: rgba(42, 10, 12, .07);
border-color: rgba(42, 10, 12, .22);
/* 12.50:1 on the cream panel */
color: #55171A;
}
.fn--mrityu .fn-mr-badge--dark .fn-mr-badge__dot { background: var(--mr-cherry-light); }
@keyframes mr-ping {
0% { box-shadow: 0 0 0 0 rgba(232, 178, 74, .5); }
70% { box-shadow: 0 0 0 9px rgba(232, 178, 74, 0); }
100% { box-shadow: 0 0 0 0 rgba(232, 178, 74, 0); }
}
/* ── Tag ─────────────────────────────────────────────────────────────── */
.fn--mrityu .fn-mr-tag {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
background: var(--mr-fill);
/* 8.62:1 at the darkest stop */
color: var(--mr-fill-ink);
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
/* =====================================================================
1. THE HERO — the argument, and the chart it is about
=====================================================================
TWO COLUMNS, NOT A CENTRED STACK. The centred version could have opened
a page about anything; this one puts the subject on screen. The right
column is a North Indian chart with the eighth house lit — the house
the whole course is about — drawn in SVG so it is sharp at any size,
themed from the same tokens as everything else, and animatable per
region.
THE TYPE IS LEFT-ALIGNED now that it has a neighbour. Centred type
beside a figure gives two competing axes and a ragged gutter between
them.
===================================================================== */
.fn--mrityu .fn-mr-hero {
position: relative;
isolation: isolate;
/* Sized to what it holds, never to the viewport: a 100vh opener pushes
the page itself out of the first frame.
DELIBERATELY ASYMMETRIC, AND MUCH TIGHTER ON TOP. At 7vw the top
padding was 90px on a desktop, and the text column sits a further
34px down because align-items centres it against the taller chart
column — 124px of nothing between the navbar and the first word.
The navbar is 93px of visual space in its own right, so the hero
does not need to supply more above it; it does need room below,
where the next section butts straight up against it. */
padding-block: clamp(26px, 3vw, 46px) clamp(56px, 7vw, 100px);
background:
radial-gradient(120% 120% at 78% 18%, #48151A 0%, #2A0A0C 46%, #1E0607 100%);
color: var(--mr-cream);
overflow: hidden;
}
.fn--mrityu .fn-mr-hero__in {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center;
gap: clamp(32px, 5vw, 72px);
}
/* ── The argument ────────────────────────────────────────────────────── */
.fn--mrityu .fn-mr-hero__h {
margin: 22px 0 0;
font-family: var(--mr-display);
font-weight: 700;
line-height: 1.04;
letter-spacing: -.015em;
text-wrap: balance;
}
.fn--mrityu .fn-mr-hero__l1,
.fn--mrityu .fn-mr-hero__l2,
.fn--mrityu .fn-mr-hero__l3 { display: block; }
/* 17.6:1 */
.fn--mrityu .fn-mr-hero__l1 {
font-size: clamp(2.6rem, 6vw, 4.8rem);
color: var(--mr-cream);
}
/* The Devanagari line. Rozha One first — it is the display face of the two
that carry the script — and 1.7 rather than a tighter figure because its
matras sit well above the Latin cap height and were being clipped. */
.fn--mrityu .fn-mr-hero__l2 {
margin-top: .1em;
font-family: 'Rozha One', 'Mukta', var(--mr-display);
font-weight: 400;
font-size: clamp(1.3rem, 2.8vw, 2.05rem);
line-height: 1.7;
padding-top: .12em;
/* 10.05:1 */
color: var(--mr-amber);
}
.fn--mrityu .fn-mr-hero__l3 {
margin-top: .28em;
font-family: var(--mr-sans);
font-weight: 300;
font-size: clamp(.98rem, 1.6vw, 1.26rem);
letter-spacing: .01em;
/* 13.2:1 */
color: #E4D3B4;
}
.fn--mrityu .fn-mr-hero__lead {
margin: 22px 0 0;
max-width: 52ch;
font-size: clamp(.97rem, 1.4vw, 1.06rem);
/* 400, not 300: a thin weight at this size is the commonest cause of
"I can't read this" on a page that passes contrast outright. */
font-weight: 400;
line-height: 1.74;
/* 9.8:1 */
color: #C9B693;
}
.fn--mrityu .fn-mr-hero__acts {
display: flex;
flex-wrap: wrap;
gap: 13px;
margin-top: 30px;
}
.fn--mrityu .fn-mr-hero__facts {
display: flex;
flex-wrap: wrap;
gap: 9px 22px;
margin: 28px 0 0;
padding: 0;
list-style: none;
font-size: .86rem;
/* 9.8:1 */
color: #C9B693;
}
/* The separators are drawn, not typed, so they can never wrap onto a line
of their own when the row breaks. */
.fn--mrityu .fn-mr-hero__facts li { position: relative; padding-left: 24px; }
.fn--mrityu .fn-mr-hero__facts li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 12px;
height: 1px;
background: rgba(232, 178, 74, .6);
}
/* ── The chart ───────────────────────────────────────────────────────── */
.fn--mrityu .fn-mr-hero__chart {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.fn--mrityu .fn-mr-chart {
position: relative;
width: min(100%, 440px);
aspect-ratio: 1;
display: grid;
place-items: center;
}
/* Two rings, counter-rotating on cycles that do not divide into each other,
so the pair never visibly repeats. Purely decorative. */
.fn--mrityu .fn-mr-chart__ring {
position: absolute;
inset: -2%;
border-radius: 50%;
border: 1px dashed rgba(232, 178, 74, .32);
animation: mr-spin 58s linear infinite;
pointer-events: none;
}
.fn--mrityu .fn-mr-chart__ring--2 {
inset: 4%;
border-style: solid;
border-color: rgba(251, 243, 228, .09);
animation-duration: 41s;
animation-direction: reverse;
}
.fn--mrityu .fn-mr-chart__svg {
position: relative;
width: 86%;
height: 86%;
overflow: visible;
}
/* THE LIT HOUSE. The one filled region in the diagram, and the whole point
of it — painted before the lines so every stroke sits over it. It breathes
rather than blinks: a hard flash on a page about mortality would be in
poor taste as well as hard to look at. */
.fn--mrityu .fn-mr-chart__lit {
fill: rgba(192, 57, 47, .62);
animation: mr-breathe 5.2s ease-in-out infinite;
transform-origin: 225px 258px;
}
@keyframes mr-breathe {
0%, 100% { opacity: .78; }
50% { opacity: 1; }
}
/* The other eleven regions exist so the diagram reads as a chart rather
than as a square with a triangle in it. They are unfilled. */
.fn--mrityu .fn-mr-chart__house { fill: transparent; }
/* The construction.
NO DASH ANIMATION. Drawing the lines in with stroke-dasharray produced a
BROKEN chart — the square's bottom edge never rendered and the diagonals
stopped half way — because pathLength is not honoured for dash maths on
basic shapes the way it is on a path, and non-scaling-stroke moves the
pattern into screen space besides. The whole group fades up instead, so
the diagram is either absent or complete and never half-built.
5.6:1 against the hero ground, up from 4.2:1. The old value looked
tentative at size — a diagram that is the page's main visual should not
look like a watermark. */
.fn--mrityu .fn-mr-chart__line {
fill: none;
stroke: rgba(251, 243, 228, .55);
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: square;
}
.fn--mrityu .fn-mr-chart__lines {
opacity: 0;
transform-origin: 150px 150px;
animation: mr-chart-in 1.1s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}
@keyframes mr-chart-in {
from { opacity: 0; transform: scale(.94); }
to { opacity: 1; transform: none; }
}
/* The house numerals: quiet, because they orient the reader rather than
being read. */
/* THE NUMERALS WERE UNDER THE FLOOR AND NOTHING CAUGHT IT. At .42 alpha they
composite to #826C67 on the hero ground — 3.74:1, where 13px text needs
4.5. The contrast audit reads `color`; SVG text is painted with `fill`, so
every label in this diagram was invisible to it. .54 measures 5.4:1. */
.fn--mrityu .fn-mr-chart__n {
font-family: var(--mr-sans);
font-size: 13px;
font-weight: 500;
fill: rgba(251, 243, 228, .54);
opacity: 0;
animation: mr-fade .7s ease .85s forwards;
}
/* the eighth's numeral is legible ON the fill: 6.1:1 against it */
.fn--mrityu .fn-mr-chart__n.is-lit {
fill: #FFFBF3;
font-weight: 700;
/* a size down: it sits at the triangle's apex, which is 21px wide */
font-size: 12px;
}
@keyframes mr-fade { to { opacity: 1; } }
.fn--mrityu .fn-mr-chart__graha {
font-family: var(--mr-sans);
font-size: 15px;
font-weight: 700;
letter-spacing: .02em;
/* 9.5:1 on the lit house */
fill: var(--mr-amber);
opacity: 0;
/* each one arrives after the last, so they read as three placements
rather than as one label */
animation: mr-fade .55s ease calc(1.1s + var(--gi, 0) * .16s) forwards;
}
.fn--mrityu .fn-mr-chart__cap {
text-align: center;
max-width: 38ch;
}
.fn--mrityu .fn-mr-chart__cap-h {
display: block;
font-size: .76rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
/* 10.05:1 */
color: var(--mr-amber);
}
.fn--mrityu .fn-mr-chart__cap-x {
display: block;
margin-top: 9px;
font-size: .84rem;
line-height: 1.62;
/* 6.9:1 */
color: #AC9877;
}
/* ── The ember field ─────────────────────────────────────────────────── */
/* Warm motes drifting upward. Each layer is ONE element with a repeating
radial-gradient background, translated on a long loop — no canvas, no
images, no per-particle DOM. Translating the layer is a single composited
transform; animating background-position instead would repaint it sixty
times a second. */
.fn--mrityu .fn-mr-embers {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.fn--mrityu .fn-mr-ember {
position: absolute;
inset: -40% 0 -10%;
background-repeat: repeat;
will-change: transform;
}
.fn--mrityu .fn-mr-ember--a {
background-image:
radial-gradient(2.4px 2.4px at 12% 22%, rgba(232, 178, 74, .5), transparent 60%),
radial-gradient(2px 2px at 78% 44%, rgba(232, 103, 79, .45), transparent 60%),
radial-gradient(2.2px 2.2px at 44% 78%, rgba(232, 178, 74, .38), transparent 60%);
background-size: 360px 320px;
animation: mr-drift-a 26s linear infinite;
}
.fn--mrityu .fn-mr-ember--b {
background-image:
radial-gradient(1.5px 1.5px at 62% 14%, rgba(251, 243, 228, .34), transparent 60%),
radial-gradient(1.3px 1.3px at 26% 58%, rgba(232, 178, 74, .3), transparent 60%),
radial-gradient(1.6px 1.6px at 88% 82%, rgba(232, 103, 79, .28), transparent 60%);
background-size: 250px 230px;
animation: mr-drift-b 37s linear infinite;
}
@keyframes mr-drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40px, -320px, 0); } }
@keyframes mr-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(30px, -230px, 0); } }
/* ── The scroll cue ──────────────────────────────────────────────────── */
.fn--mrityu .fn-mr-scroll {
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
width: 1px;
height: 48px;
background: var(--line);
overflow: hidden;
}
.fn--mrityu .fn-mr-scroll__line {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 40%;
background: linear-gradient(180deg, transparent, var(--mr-amber));
animation: mr-scroll 2.3s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes mr-scroll {
0% { transform: translateY(-100%); }
60%, 100% { transform: translateY(250%); }
}
/* =====================================================================
2. THE CREDENTIAL BAND
=====================================================================
TWO COLUMNS. It was a centred heading over four columns — a stats bar,
and one that left a lane of empty cream between the title and the
numbers, because the heading is large type and the tiles are small. The
claim is now on the left and its evidence on the right, so the two are
read together and the measure is actually filled.
THE FIGURES STILL ALIGN, and still by subgrid: the list owns three rows
— figure, label, caption — and each tile spans them rather than defining
its own. That is what stops a two-line label pushing its caption out of
step with its neighbour's, which is the fault the first version of this
section had.
===================================================================== */
.fn--mrityu .fn-mr-cred-wrap {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(36px, 5vw, 76px);
}
.fn--mrityu .fn-mr-cred-say .fn-mr-h2,
.fn--mrityu .fn-mr-cred-say .fn-mr-lead { text-align: left; }
.fn--mrityu .fn-mr-cred-say .fn-mr-lead { margin-inline: 0; max-width: 46ch; }
/* The rule under the eyebrow, which is what gives the left column a top
edge to sit against now that it is not centred. */
.fn--mrityu .fn-mr-cred-say .fn-mr-eyebrow {
position: relative;
padding-top: 20px;
}
.fn--mrityu .fn-mr-cred-say .fn-mr-eyebrow::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 52px;
height: 2px;
background: var(--accent);
}
/* ONE DARK PANEL, NOT FOUR RULED CELLS.
As four bordered boxes with a cross of hairlines through them this read as
a TABLE — which is what a grid of ruled boxes always reads as, and a table
is the wrong genre for four claims meant to be taken in at a glance.
It is now a single deep cola panel, which balances the text beside it:
cream type on the left, one solid object on the right, instead of pale
boxes on a pale ground. It also puts this section in the same language as
the outcome cards — dark objects on cream.
The separators inside are cream hairlines at low alpha rather than borders,
so they read as divisions of one object rather than as the edges of four. */
.fn--mrityu .fn-mr-creds {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* figure · label · caption */
grid-template-rows: auto auto auto;
/* The gap between the four tiles. It does NOT reach inside them: each
tile sets gap: 0 on its own subgrid, so the figure, label and caption
stay tight while the tiles themselves get room. Without that override
the row-gap would push the three lines of every tile apart too. */
gap: clamp(10px, 1.1vw, 15px);
margin: 0;
padding: clamp(10px, 1.4vw, 18px);
list-style: none;
border-radius: 20px;
background: linear-gradient(155deg, #3D1013, #2A0A0C 55%, #24090B);
box-shadow: 0 24px 50px -32px rgba(42, 10, 12, .6);
}
.fn--mrityu .fn-mr-cred {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
gap: 0;
padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 26px);
/* 3.5% cream over the panel: enough to give the tile an edge without
turning it into a second card. Every ink below is still measured
against the result. */
background: rgba(251, 243, 228, .035);
border: 1px solid rgba(251, 243, 228, .06);
border-radius: 14px;
transition: background-color .35s ease, border-color .35s ease;
}
.fn--mrityu .fn-mr-cred:hover {
background: rgba(251, 243, 228, .075);
border-color: rgba(232, 178, 74, .22);
}
/* NO HAIRLINES ANY MORE. With a gap between the tiles the rules had nothing
left to do — space already separates them — and a rule sitting at the edge
of a gap reads as a stray line rather than as a division. Each tile instead
takes a faint lift of its own, so the four read as objects inside the panel
rather than as regions of it. */
@supports not (grid-template-rows: subgrid) {
.fn--mrityu .fn-mr-cred { grid-row: auto; grid-template-rows: none; }
.fn--mrityu .fn-mr-cred__l { min-height: 2.4em; }
}
/* A COMPILED-VIEW GUARD, and worth the four lines.
The credential cells used to carry an icon span. Laravel caches compiled
Blade, so after a deploy the server can briefly serve the OLD view with
the NEW stylesheet — and an inline with no width/height and no CSS
rule falls back to the SVG default of 300x150px. The result is a giant
ghosted glyph behind every figure, which is exactly what was reported.
`php artisan view:clear` is the actual fix; this makes the window between
deploy and clear look like nothing rather than like a broken page. */
.fn--mrityu .fn-mr-cred__ico { display: none; }
.fn--mrityu .fn-mr-cred__v {
margin: 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: clamp(2.1rem, 3.4vw, 3rem);
line-height: 1;
letter-spacing: -.02em;
/* LINING figures, not Cormorant's default old-style ones: those sit at
x-height with descenders, which turned "ISO 9001" and "11,000+" into
something that read as lowercase text. Tabular as well, so the digits
line up from cell to cell. */
font-variant-numeric: lining-nums tabular-nums;
/* 14.9:1 on the panel's lightest stop */
color: #FBF3E4;
}
/* Amber, not the cherry this used on cream: cherry is 2.3:1 on this ground. */
.fn--mrityu .fn-mr-cred__l {
margin: 14px 0 0;
font-size: .73rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
/* 8.5:1 */
color: var(--mr-amber);
}
.fn--mrityu .fn-mr-cred__s {
margin: 9px 0 0;
align-self: start;
font-size: .85rem;
line-height: 1.55;
/* 8.3:1 */
color: #C9B693;
}
/* =====================================================================
3. REGISTRATION
===================================================================== */
.fn--mrityu .fn-mr-ticket {
position: relative;
max-width: 720px;
margin-inline: auto;
border: 1px solid var(--line-2);
border-radius: var(--mr-radius);
background: linear-gradient(168deg, var(--mr-panel), var(--mr-ground-2) 70%);
box-shadow: var(--mr-shadow);
overflow: hidden;
}
/* The perforation between the ticket's head and its body. A dashed line
drawn with a repeating gradient, plus the two notches that make it read
as a tear rather than as a border. */
.fn--mrityu .fn-mr-ticket__perf {
position: absolute;
left: 0;
right: 0;
top: var(--mr-perf, 124px);
height: 1px;
background: repeating-linear-gradient(90deg,
var(--line-2) 0 7px, transparent 7px 15px);
pointer-events: none;
}
.fn--mrityu .fn-mr-ticket__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 26px clamp(22px, 3vw, 34px) 30px;
background: rgba(251, 243, 228, .03);
}
.fn--mrityu .fn-mr-facts {
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
margin: 0;
}
.fn--mrityu .fn-mr-fact dt {
margin: 0 0 5px;
font-size: .67rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
/* 6.93:1 */
color: var(--ink-4);
}
.fn--mrityu .fn-mr-fact dd {
margin: 0;
font-size: .97rem;
font-weight: 600;
color: var(--ink);
}
.fn--mrityu .fn-mr-ticket__price {
margin: 0;
text-align: right;
}
.fn--mrityu .fn-mr-ticket__price b {
display: block;
font-family: var(--mr-display);
font-size: 2.1rem;
line-height: 1;
/* lining figures — see the note on the credential value */
font-variant-numeric: lining-nums;
/* 10.05:1 */
color: var(--mr-amber);
}
.fn--mrityu .fn-mr-ticket__price small {
display: block;
margin-top: 6px;
font-size: .76rem;
color: var(--ink-4);
}
/* .fn-formcard is a SHARED component — funnel.js finds the form through it,
so it cannot be dropped. Its own panel, border, radius and padding are
neutralised here because it is now the inside of the ticket, and a
22px-radius card within a 14px-radius card reads as a mistake. Its
::before bar goes too: that is the other design's CTA gradient. */
.fn--mrityu .fn-mr-ticket__body.fn-formcard {
background: transparent;
border: 0;
border-radius: 0;
}
.fn--mrityu .fn-mr-ticket__body.fn-formcard::before { content: none; }
.fn--mrityu .fn-mr-ticket__body {
padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3vw, 34px) clamp(26px, 3.4vw, 36px);
}
.fn--mrityu .fn-mr-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0 18px;
}
/* ── The shared form controls, re-skinned ────────────────────────────── */
/* These class names belong to funnel.css and are bound by funnel.js. They
are restyled here, never renamed. */
.fn--mrityu .fn-field { margin-bottom: 17px; }
.fn--mrityu .fn-label {
display: block;
margin-bottom: 7px;
font-size: .74rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
/* 9.77:1 */
color: var(--ink-3);
}
.fn--mrityu .fn-req { color: var(--mr-cherry-dark); }
.fn--mrityu .fn-input {
width: 100%;
padding: 13px 15px;
border: 1px solid var(--line-2);
border-radius: 10px;
background: rgba(12, 3, 4, .42);
/* 17.56:1 */
color: var(--mr-cream);
font-family: var(--mr-sans);
font-size: .97rem;
transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.fn--mrityu .fn-input::placeholder {
/* 6.93:1 — a placeholder still has to be readable */
color: #AC9877;
}
.fn--mrityu .fn-input:focus {
outline: none;
border-color: var(--mr-cherry-dark);
background: rgba(12, 3, 4, .6);
box-shadow: 0 0 0 3px rgba(232, 103, 79, .22);
}
/* The select's own arrow, drawn: the native one inherits the system colour
and disappears on a dark field. */
.fn--mrityu select.fn-input {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #C9B693 50%),
linear-gradient(135deg, #C9B693 50%, transparent 50%);
background-position: right 19px center, right 13px center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 38px;
}
.fn--mrityu .fn-note,
.fn--mrityu .fn-payline {
margin: 14px 0 0;
font-size: .8rem;
line-height: 1.6;
text-align: center;
/* 6.93:1 */
color: var(--ink-4);
}
.fn--mrityu .fn-payline b { color: var(--ink-2); }
.fn--mrityu .fn-alert {
display: none;
margin-bottom: 16px;
padding: 13px 16px;
border-radius: 10px;
font-size: .9rem;
line-height: 1.5;
}
.fn--mrityu .fn-alert.is-on { display: block; }
.fn--mrityu .fn-alert--ok {
border: 1px solid rgba(120, 190, 140, .45);
background: rgba(120, 190, 140, .14);
color: #C7E8D0;
}
.fn--mrityu .fn-alert--bad {
border: 1px solid rgba(232, 103, 79, .5);
background: rgba(232, 103, 79, .16);
/* 9.2:1 on the field's ground */
color: #F6C8BD;
}
/* The honeypot. Off-screen rather than display:none — some bots skip
anything not rendered, which is the entire point of the field. */
.fn--mrityu .fn-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.fn--mrityu .fn-nav__gst {
margin-left: 6px;
font-size: .74em;
opacity: .82;
}
/* ── The three process steps ──────────────────────────────────────────
A RAIL WITH THREE NODES ON IT, not three bordered columns.
These three ARE a sequence — fill the form, get the confirmation, join
the class — and the old treatment did not say so: a hairline over each
column made them look like three unrelated facts that happened to be
numbered. Structure should encode something true about the content, and
here the true thing is the order.
So the rail runs behind them and the numbered discs sit on it. It is
the same motif as the syllabus thread, turned on its side, which gives
the page one visual language for "this happens in order" rather than
two unrelated ones.
THE RAIL IS DRAWN BETWEEN THE FIRST AND LAST DISC, not edge to edge:
inset by half a column (100%/3 ÷ 2 = 16.667%) so it begins at the
centre of disc 1 and ends at the centre of disc 3. A line running past
the last step implies a fourth. */
.fn--mrityu .fn-mr-steps {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
max-width: 860px;
margin: clamp(38px, 5vw, 58px) auto 0;
padding: 0;
list-style: none;
text-align: center;
}
.fn--mrityu .fn-mr-steps::before {
content: '';
position: absolute;
/* the discs' vertical centre: 42px tall, so 21px down */
top: 21px;
left: 16.667%;
right: 16.667%;
height: 2px;
background: linear-gradient(90deg,
rgba(232, 178, 74, .55), rgba(192, 57, 47, .55) 50%, rgba(232, 178, 74, .55));
pointer-events: none;
}
.fn--mrityu .fn-mr-step { position: relative; }
.fn--mrityu .fn-mr-step__n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 18px;
border-radius: 50%;
background: var(--mr-fill);
/* 8.6:1 at the fill's darkest stop, 5.3:1 at its lightest */
color: var(--mr-fill-ink);
font-family: var(--mr-sans);
font-size: .95rem;
font-weight: 700;
/* The ring is the SECTION's own ground, so the rail appears to pass
behind the disc rather than butting into it. A gap drawn in the
background colour is the only way to do that without splitting the
rail into two elements per step. */
box-shadow: 0 0 0 7px var(--band), 0 10px 22px -10px rgba(168, 40, 34, .8);
transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-step:hover .fn-mr-step__n { transform: translateY(-3px) scale(1.06); }
.fn--mrityu .fn-mr-step__t {
margin: 0 0 8px;
font-family: var(--mr-display);
font-weight: 700;
font-size: 1.16rem;
line-height: 1.24;
/* 17.6:1 */
color: var(--ink);
}
.fn--mrityu .fn-mr-step__x {
margin: 0 auto;
max-width: 30ch;
font-size: .89rem;
line-height: 1.62;
/* 6.9:1 */
color: var(--ink-4);
}
/* HIDDEN ON A PHONE, not stacked.
Stacked they became three tall blocks between the ticket and whatever
follows — a whole extra screen of scrolling to read a summary of what the
form directly above them already does. Nothing here is information the
form omits: you fill it in, you get an email, you turn up.
`display: none` takes it out of the accessibility tree as well as off the
screen, and that is correct HERE precisely because it is a restatement —
a screen-reader user on a phone loses nothing they cannot get from the
form itself. It would be the wrong call for anything the page says only
once.
768px rather than the 680 this used to stack at: between the two the
three-across row is already cramped, so there is no width at which the
old middle state was worth having. */
@media (max-width: 768px) {
.fn--mrityu .fn-mr-steps { display: none; }
}
/* =====================================================================
4. OUTCOMES — three to a row
=====================================================================
THREE, NOT auto-fit. The old grid was repeat(auto-fit, minmax(270px,
1fr)), which put four across on a wide screen — and there are six cards,
so four then two left a half-empty second row. An explicit three gives
two full rows, and the breakpoints below step it down deliberately
rather than letting the track width decide.
THE CARD ITSELF. It was an icon, a title and a paragraph at even
spacing, so nothing in it outranked anything else and six of them read
as a wall. Now:
· the mark sits on its own line above a hairline, so the card has a
head and a body rather than one undifferentiated stack;
· the title is display type and clearly the second thing you read;
· the body text is the third, and quieter than it was;
· every card is the same height and its rule sits on the same
baseline, because the row stretches and the body pushes the rule
down — not because a height was guessed.
===================================================================== */
.fn--mrityu .fn-mr-outs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
/* Two, then one. Stepped explicitly: six cards divide by three and by two
but not by four, so auto-fit's convenient-looking answer is the wrong
one at exactly the width where it kicks in. */
@media (max-width: 1040px) {
.fn--mrityu .fn-mr-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.fn--mrityu .fn-mr-outs { grid-template-columns: minmax(0, 1fr); }
}
/* DARK CARDS ON THE CREAM SECTION.
COLA, NOT CHERRY. The syllabus cards are already cherry, and using it here
as well would make the two sections read as the same thing twice. Cola also
has far more to push against on a cream ground: #24090B on #FBF3E4 is about
17:1, where cherry is 6.4:1, so these read as six solid objects rather than
six tinted ones.
TWO DECORATIVE DEVICES, NOT FOUR. There was also a rail down the leading
edge and an oversized ghosted glyph in the corner. The rail did the same job
as the card's own border at a third of the width; the glyph repeated the
icon 40px above it and ran behind the last two lines of copy. What is left
is the mark, which makes a card findable across a grid of six, and the rule,
which separates the head from the body.
Every ink is measured against the card's LIGHTEST stop, the worst case on a
gradient. */
.fn--mrityu .fn-mr-outs .fn-mr-out {
position: relative;
display: flex;
flex-direction: column;
padding: 28px 26px 30px;
border: 1px solid rgba(251, 243, 228, .1);
border-radius: 18px;
background: linear-gradient(155deg, #3D1013, #2A0A0C 55%, #24090B);
overflow: hidden;
isolation: isolate;
box-shadow: 0 16px 34px -26px rgba(42, 10, 12, .5);
transition: transform .45s cubic-bezier(.22, 1, .36, 1),
box-shadow .45s ease,
border-color .35s ease;
}
.fn--mrityu .fn-mr-outs .fn-mr-out:hover {
transform: translateY(-6px);
border-color: rgba(232, 178, 74, .3);
box-shadow: 0 32px 58px -30px rgba(42, 10, 12, .72);
}
/* The warm-up on hover. A SECOND LAYER rather than a background transition:
gradients do not interpolate, so animating `background` between two of them
snaps from one to the other instead of blending. */
.fn--mrityu .fn-mr-outs .fn-mr-out::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(155deg, #7A1C18, #4A0F0E 60%, #2A0A0C);
opacity: 0;
transition: opacity .5s ease;
}
.fn--mrityu .fn-mr-outs .fn-mr-out:hover::before { opacity: 1; }
.fn--mrityu .fn-mr-out__head {
display: flex;
align-items: center;
gap: 14px;
}
/* The mark keeps the cherry fill: it is the one bright object on the card,
and it is what makes six dark cards scannable rather than six dark blocks. */
.fn--mrityu .fn-mr-out__ico {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: var(--mr-fill);
/* 8.6:1 at the fill's darkest stop */
color: var(--mr-fill-ink);
box-shadow: 0 12px 24px -12px rgba(192, 57, 47, .9);
transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-out__ico svg { width: 22px; height: 22px; }
.fn--mrityu .fn-mr-out:hover .fn-mr-out__ico { transform: translateY(-2px) rotate(-6deg); }
.fn--mrityu .fn-mr-outs .fn-mr-out__t {
margin: 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: 1.34rem;
line-height: 1.16;
letter-spacing: -.005em;
text-wrap: balance;
/* 14.9:1 on the card's lightest stop */
color: #FBF3E4;
}
/* Amber, not the cherry the white version used: on this ground cherry is
2.33:1 and a 2px rule in it reads as a smudge. */
.fn--mrityu .fn-mr-outs .fn-mr-out__t::after {
content: '';
display: block;
width: 34px;
height: 2px;
margin-top: 14px;
background: var(--mr-amber);
transform-origin: left;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-out:hover .fn-mr-out__t::after { transform: scaleX(1.8); }
.fn--mrityu .fn-mr-outs .fn-mr-out__x {
margin: 16px 0 0;
font-size: .93rem;
line-height: 1.72;
/* 8.3:1 on the card's lightest stop */
color: #C9B693;
}
/* =====================================================================
5. THE SYLLABUS THREAD — this funnel's signature section
===================================================================== */
.fn--mrityu .fn-mr-mods {
position: relative;
max-width: 860px;
margin: 0 auto;
padding: 0 0 0 clamp(46px, 7vw, 74px);
list-style: none;
}
/* The rail and its fill. The fill is scaled by --mr-thread, which
mrityu-theme.js sets on the SECTION as the viewport passes it.
THE FALLBACK IS 1, NOT 0. With no JavaScript the property is never set,
var() falls back, and the thread is fully drawn — the section reads as
finished rather than as a stub. The animation is the enhancement; the
drawn thread is the baseline. */
.fn--mrityu .fn-mr-mods__rail {
position: absolute;
left: clamp(16px, 2.6vw, 28px);
top: 8px;
bottom: 8px;
width: 2px;
background: var(--line);
overflow: hidden;
}
.fn--mrityu .fn-mr-mods__fill {
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--mr-amber), var(--mr-cherry-dark) 60%, transparent);
transform: scaleY(var(--mr-thread, 1));
transform-origin: top;
/* short, so the fill tracks the scroll rather than lagging behind it */
transition: transform .12s linear;
}
.fn--mrityu .fn-mr-mod {
position: relative;
padding-bottom: clamp(30px, 4vw, 46px);
}
/* ── The staged arrival ───────────────────────────────────────────────
Only applies once the script has said it is safe to hide things. */
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod {
opacity: 0;
/* translate AND scale, on the card rather than the , so the node and
the thread beside it are not dragged along with it */
transition: opacity .85s cubic-bezier(.16, 1, .3, 1),
transform .85s cubic-bezier(.16, 1, .3, 1);
transform: translateY(46px) scale(.972);
}
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-in {
opacity: 1;
transform: none;
}
/* ── The focused card ─────────────────────────────────────────────────
Weight, not dimming. Nothing here changes a text colour, so every
contrast figure measured for this card still holds in every state. */
/* THE ZOOM IS THE POINT, so it has to be visible. 1.012 was eight pixels on
an 860px card — below the threshold at which a change registers as one.
1.045 is about 39px of growth, 15px of it outside the container on each
side; the section clips at its own edge rather than the card's, so there
is room for it.
THE SIDEWAYS NUDGE IS GONE. A translate and a scale together read as a
wobble; a zoom should come straight at the reader.
THREE SHADOW LAYERS, because one cannot do three jobs: a tight amber ring
makes the edge, a wide cherry bloom makes the light, and a very wide amber
haze lifts the card off the ground. */
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__card {
transform: scale(1.045);
box-shadow: 0 0 0 1px rgba(232, 178, 74, .42),
0 34px 64px -28px rgba(12, 3, 4, .95),
0 0 62px -6px rgba(192, 57, 47, .58),
0 0 140px -24px rgba(232, 178, 74, .34);
}
/* The artwork leans into the frame rather than sitting flat while the card
around it moves. */
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__pic img {
transform: scale(1.06);
}
/* the rail fills for the focused card, exactly as it does on hover — one
gesture meaning one thing, whether the cursor or the scroll caused it */
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__card::before {
transform: scaleY(1);
}
/* and its accent rule extends, again matching the hover */
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__t::after {
transform: scaleX(1.9);
}
/* The node grows a halo while its card holds focus, so the thread and the
card agree about where the reader is. */
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__node {
transform: scale(1.32);
box-shadow: 0 0 0 8px rgba(232, 178, 74, .18),
0 0 34px -2px rgba(232, 178, 74, .95);
}
.fn--mrityu .fn-mr-mod:last-child { padding-bottom: 0; }
/* The node. It carries the module numeral, so the decoration is also the
label — and it lights when the thread reaches it, which is a class the
script adds rather than a second scroll calculation. */
.fn--mrityu .fn-mr-mod__node {
position: absolute;
left: calc(clamp(16px, 2.6vw, 28px) - clamp(46px, 7vw, 74px) - 15px);
top: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 2px solid var(--line-2);
border-radius: 50%;
background: var(--mr-ground);
font-family: var(--mr-display);
font-size: .88rem;
font-weight: 600;
/* 9.77:1 before it lights */
color: var(--ink-3);
transition: border-color .4s ease, background-color .4s ease,
color .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-mod.is-lit .fn-mr-mod__node {
border-color: var(--mr-amber);
background: var(--mr-amber);
/* 9.50:1 on the amber disc */
color: var(--mr-ground-2);
transform: scale(1.1);
}
/* THE CARD IS A FILLED PANEL WITH AN ANGLED MEDIA PLATE.
Cherry rather than the cola panel it was: the card is the object now, not
a container for text, and it has to hold its own against the section
ground. Deepened from the button's fill (#A82822 → #7A1C18 rather than
#C0392F → #8E1F1A) because five of these stack down the page and the
brighter mix would shout; the band and the closing panel keep the bright
cherry, so the three cherry surfaces stay distinguishable.
THE PLATE ALTERNATES SIDES. One shape repeated five times is a wall, and
alternating gives the column a rhythm while keeping the thread on the
left legible between cards. */
.fn--mrityu .fn-mr-mod__card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(20px, 3vw, 44px);
padding: clamp(18px, 2.2vw, 26px);
border-radius: 22px;
background: linear-gradient(135deg, #A82822, #8E1F1A 55%, #7A1C18);
overflow: hidden;
/* .7s, not .45s: at the shorter duration a 4.5% jump snapped. The point
of a scroll-driven focus is that the card feels like it is responding,
not switching. */
transition: transform .7s cubic-bezier(.22, 1, .36, 1),
box-shadow .7s ease;
}
.fn--mrityu .fn-mr-mod__card:hover {
transform: translateX(4px);
box-shadow: 0 28px 56px -30px rgba(12, 3, 4, .95);
}
/* the rail down the leading edge, kept from the previous design because the
scroll focus state uses it */
.fn--mrityu .fn-mr-mod__card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--mr-amber), rgba(255, 251, 243, .5));
transform: scaleY(.35);
transform-origin: top;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
z-index: 3;
}
.fn--mrityu .fn-mr-mod__card:hover::before { transform: scaleY(1); }
/* ── The media plate ─────────────────────────────────────────────────── */
/* The angle is on the panel, so it cuts whatever is inside it — plate and
photograph alike — rather than being a shape drawn over the top. */
.fn--mrityu .fn-mr-mod__pic {
position: relative;
margin: 0;
/* SQUARE, because the artwork is. The five files are 1254x1254 and each
carries its module title across the TOP; object-fit: cover into the
4:3 box this used to be crops equally top and bottom, which would have
sliced the title off every one of them. At 1:1 nothing is cropped
except the 42px the angled clip takes from one bottom corner, and the
titles are centred well clear of it. */
aspect-ratio: 1;
border-radius: 14px;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
}
.fn--mrityu .fn-mr-mod__plate {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient(150deg, #6B1714, #4A0F0E);
}
/* The chart motif: the square, its diagonals and the diamond, drawn with
gradients. The same figure as the hero and the band, so the page says the
same thing three times in the same language. */
.fn--mrityu .fn-mr-mod__plate::before {
content: '';
position: absolute;
width: 56%;
aspect-ratio: 1;
transform: rotate(45deg);
border: 1px solid rgba(255, 251, 243, .17);
background:
linear-gradient(to bottom, transparent calc(50% - .5px), rgba(255, 251, 243, .13) calc(50% - .5px), rgba(255, 251, 243, .13) calc(50% + .5px), transparent calc(50% + .5px)),
linear-gradient(to right, transparent calc(50% - .5px), rgba(255, 251, 243, .13) calc(50% - .5px), rgba(255, 251, 243, .13) calc(50% + .5px), transparent calc(50% + .5px));
}
.fn--mrityu .fn-mr-mod__plate-n {
position: relative;
font-family: var(--mr-display);
font-weight: 700;
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1;
/* 6.9:1 on the plate */
color: var(--mr-amber);
}
.fn--mrityu .fn-mr-mod__pic img {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-mod__card:hover .fn-mr-mod__pic img { transform: scale(1.04); }
/* ── The oversized numeral ───────────────────────────────────────────── */
.fn--mrityu .fn-mr-mod__wm {
position: absolute;
right: -2%;
top: 50%;
transform: translateY(-50%);
font-family: var(--mr-display);
font-weight: 700;
font-size: clamp(9rem, 17vw, 15rem);
line-height: .8;
color: rgba(255, 251, 243, .07);
pointer-events: none;
user-select: none;
}
/* ── The copy ────────────────────────────────────────────────────────── */
.fn--mrityu .fn-mr-mod__body {
position: relative;
z-index: 2;
padding-right: clamp(4px, 1.5vw, 18px);
}
/* the tag inverts on a cherry card: a cherry chip on cherry has no edge */
.fn--mrityu .fn-mr-mod__body .fn-mr-tag {
background: var(--mr-cream);
/* 8.9:1 on the cream chip */
color: #7A1C18;
}
.fn--mrityu .fn-mr-mod__t {
margin: 16px 0 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
line-height: 1.16;
letter-spacing: -.01em;
text-wrap: balance;
/* 6.8:1 on the card's lightest stop, 9.6:1 on its darkest */
color: #FFFBF3;
}
.fn--mrityu .fn-mr-mod__t::after {
content: '';
display: block;
width: 40px;
height: 2px;
margin-top: 15px;
background: var(--mr-amber);
transform-origin: left;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-mod__card:hover .fn-mr-mod__t::after { transform: scaleX(1.8); }
.fn--mrityu .fn-mr-mod__x {
margin: 15px 0 0;
max-width: 52ch;
font-size: .93rem;
line-height: 1.7;
/* 5.78:1 against the card's LIGHTEST stop, which is the worst case on a
gradient, and 8.6:1 against its darkest. */
color: rgba(255, 251, 243, .9);
}
/* ── Alternating ─────────────────────────────────────────────────────── */
/* The plate swaps to the right on every second card, and its angle mirrors
with it so the cut always leans away from the copy.
:nth-of-type, NOT :nth-child. The rail is a and it is the list's
FIRST child, so nth-child(even) matched modules I, III and V — the
alternation came out inverted and the watermark, which is pinned to the
opposite side, landed on top of the plate. nth-of-type counts only the
s, which is what "every second card" actually means. */
.fn--mrityu .fn-mr-mod:nth-of-type(even) .fn-mr-mod__pic {
order: 2;
clip-path: polygon(42px 0, 100% 0, 100% 100%, 0 100%);
}
.fn--mrityu .fn-mr-mod:nth-of-type(even) .fn-mr-mod__body { order: 1; }
.fn--mrityu .fn-mr-mod:nth-of-type(even) .fn-mr-mod__wm { right: auto; left: -2%; }
.fn--mrityu .fn-mr-mod:nth-of-type(even) .fn-mr-mod__card {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
/* =====================================================================
6. THE MID-PAGE BAND
===================================================================== */
/* A flat rectangle of colour with two things on it is not a design, it is a
div. Three changes make it an interstitial:
1. THE CHART COMES BACK, as a watermark. The hero's diagram is this
page's one real motif, and repeating its outline here — at 7% — ties
the two together and gives the band something to be made of. Drawn
with gradients rather than an image, so it costs nothing.
2. HAIRLINES top and bottom, so the band sits between its neighbours
rather than being dropped on them.
3. A SHEEN that crosses slowly, the same gesture the closing panel
uses, so the two cherry surfaces on the page behave alike. */
.fn--mrityu .fn-mr-band {
position: relative;
isolation: isolate;
padding-block: clamp(38px, 5vw, 62px);
background: var(--mr-fill);
border-block: 1px solid rgba(255, 251, 243, .16);
color: var(--mr-fill-ink);
overflow: hidden;
}
/* The chart watermark: the square, its diagonals and the diamond, drawn as
four gradients. Faint enough to be texture rather than decoration. */
.fn--mrityu .fn-mr-band::before {
content: '';
position: absolute;
top: 50%;
right: clamp(-60px, -2vw, 0px);
width: 340px;
height: 340px;
transform: translateY(-50%) rotate(45deg);
border: 1px solid rgba(255, 251, 243, .18);
background:
linear-gradient(to bottom, transparent calc(50% - .5px), rgba(255, 251, 243, .14) calc(50% - .5px), rgba(255, 251, 243, .14) calc(50% + .5px), transparent calc(50% + .5px)),
linear-gradient(to right, transparent calc(50% - .5px), rgba(255, 251, 243, .14) calc(50% - .5px), rgba(255, 251, 243, .14) calc(50% + .5px), transparent calc(50% + .5px));
z-index: -1;
pointer-events: none;
}
/* The sheen. */
.fn--mrityu .fn-mr-band::after {
content: '';
position: absolute;
inset: 0 auto 0 -55%;
width: 38%;
background: linear-gradient(100deg, transparent, rgba(255, 251, 243, .17), transparent);
transform: skewX(-14deg);
animation: mr-sweep 9s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
.fn--mrityu .fn-mr-band__in {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 26px;
}
.fn--mrityu .fn-mr-band__text { position: relative; padding-left: 20px; }
/* A short rule standing in front of the text, which is what turns two
stacked lines into a composition. */
.fn--mrityu .fn-mr-band__text::before {
content: '';
position: absolute;
inset: 4px auto 4px 0;
width: 3px;
border-radius: 2px;
background: rgba(255, 251, 243, .55);
}
.fn--mrityu .fn-mr-band__credit {
margin: 0 0 9px;
font-size: .71rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
/* 6.2:1 on the fill's darkest stop */
color: rgba(255, 251, 243, .82);
}
.fn--mrityu .fn-mr-band__h {
margin: 0;
font-family: var(--mr-display);
font-size: clamp(1.5rem, 3.2vw, 2.4rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.01em;
text-wrap: balance;
/* 8.6:1 at the darkest stop, 5.3:1 at the lightest */
color: var(--mr-fill-ink);
}
/* =====================================================================
7. VIDEO REVIEWS
===================================================================== */
.fn--mrityu .fn-mr-revs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.fn--mrityu .fn-mr-rev { margin: 0; }
.fn--mrityu .fn-mr-rev__play {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--mr-ground-2);
overflow: hidden;
cursor: pointer;
transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.fn--mrityu .fn-mr-rev__play:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px -24px rgba(42, 10, 12, .4);
}
.fn--mrityu .fn-mr-rev__play img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fn--mrityu .fn-mr-rev__btn {
position: absolute;
left: 50%;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--mr-fill);
color: var(--mr-fill-ink);
box-shadow: 0 10px 26px -10px rgba(12, 3, 4, .7);
transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-rev__btn svg { width: 22px; height: 22px; margin-left: 2px; }
.fn--mrityu .fn-mr-rev__play:hover .fn-mr-rev__btn { transform: translate(-50%, -50%) scale(1.1); }
/* The iframe the script swaps in fills the same box. */
.fn--mrityu .fn-mr-rev__play iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.fn--mrityu .fn-mr-rev__cap {
margin-top: 12px;
font-size: .88rem;
line-height: 1.5;
}
.fn--mrityu .fn-mr-rev__t { display: block; font-weight: 600; color: var(--ink); }
.fn--mrityu .fn-mr-rev__a { display: block; margin-top: 3px; color: var(--ink-4); }
/* =====================================================================
8. THE MENTOR
===================================================================== */
/* THE PANCH MAHAVIDYA STRUCTURE, IN THIS FUNNEL'S COLOURS.
One card with a thin gradient bar across its top; a two-column grid with NO
gap and stretched rows, so the portrait bleeds to the card's edges rather
than floating inside padding; the credential badges over the bottom of the
portrait; name, role, rule, bio, quote and the consultation in the body.
The heading is centred ABOVE the card. It sat inside the copy column while
this section was a boxless split; with the card back, a heading inside one
column of it is a caption rather than a section heading. */
.fn--mrityu .fn-mr-mcard {
position: relative;
overflow: hidden;
/* 1140, which is the container's full inner width (1180 less its 20px
gutters). It was stopping 120px short of the space available. */
max-width: 1140px;
margin: clamp(26px, 3.4vw, 36px) auto 0;
border: 1px solid var(--line-2);
border-radius: 22px;
background: linear-gradient(135deg, rgba(232, 178, 74, .06), rgba(192, 57, 47, .07)),
linear-gradient(150deg, var(--mr-panel), var(--mr-ground-2) 65%, #24090B);
box-shadow: 0 40px 100px -50px rgba(12, 3, 4, .95);
}
/* The bar across the top edge, the card's one flourish. */
.fn--mrityu .fn-mr-mcard::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
z-index: 2;
background: linear-gradient(90deg, var(--mr-amber), #E8674F 45%, #C0392F 75%, #8E1F1A);
}
/* NO GAP, STRETCHED ROWS. That is what lets the portrait reach the card's
edges; a gap would leave a stripe of card down the middle of it. */
.fn--mrityu .fn-mr-mentor {
display: grid;
/* 330, not 380. Narrowing the portrait widens the copy column from 638
to ~734px, which drops the biography from five lines to four — the
single biggest saving available, and it costs the portrait nothing
because the image is cropped to the face anyway. */
grid-template-columns: 330px minmax(0, 1fr);
gap: 0;
align-items: stretch;
}
.fn--mrityu .fn-mr-mentor__photo {
position: relative;
overflow: hidden;
background: linear-gradient(150deg, #6B1714, #3D1013);
}
/* 132% AND ANCHORED TO THE TOP, and this is the whole trick. Rakesh.png is a
square promotional graphic with the mentor's name and titles painted across
its bottom. Overflowing the frame and anchoring to the top crops that away
and leaves the face — which is why the Panch Mahavidya card looks like a
portrait and my earlier `object-fit: contain` looked like a poster. */
.fn--mrityu .fn-mr-mentor__photo img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 132%;
object-fit: cover;
object-position: top center;
}
/* The monogram lies under the photograph rather than being toggled by a
class — a missing file uncovers a designed plate rather than a hole. */
.fn--mrityu .fn-mr-mentor__mono {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mr-display);
font-weight: 700;
font-size: 3.4rem;
/* 8.0:1 on the plate */
color: var(--mr-amber);
}
/* Over the bottom of the portrait. They are credentials about the person in
the photograph, so they belong on it rather than under the bio. */
.fn--mrityu .fn-mr-mentor__badges {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fn--mrityu .fn-mr-mentor__badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border: 1px solid rgba(251, 243, 228, .22);
border-radius: 999px;
/* .82 alpha over a photograph, so the chip has a ground of its own
whatever is behind it — the ink below is measured against the composite
at its lightest, which is a bright patch of sky in the artwork. */
background: rgba(30, 6, 7, .82);
backdrop-filter: blur(6px);
font-size: .8rem;
font-weight: 600;
/* 12.9:1 even over the brightest part of the image */
color: #FBF3E4;
}
.fn--mrityu .fn-mr-mentor__body { padding: clamp(24px, 2.6vw, 32px); min-width: 0; }
.fn--mrityu .fn-mr-mentor__name {
margin: 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 1.1;
/* 14.9:1 */
color: var(--ink);
}
/* amber: the dark-ground cherry is 4.5:1 and this is small text */
.fn--mrityu .fn-mr-mentor__role {
margin: 9px 0 0;
font-size: .86rem;
font-weight: 600;
letter-spacing: .03em;
/* 8.5:1 */
color: var(--mr-amber);
}
.fn--mrityu .fn-mr-mentor__rule {
height: 1px;
margin: 18px 0 0;
border: 0;
background: var(--line);
}
.fn--mrityu .fn-mr-mentor__bio {
margin: 16px 0 0;
font-size: 1rem;
line-height: 1.68;
/* 8.3:1 */
color: var(--ink-3);
}
.fn--mrityu .fn-mr-quote {
margin: 18px 0 0;
padding: 2px 0 2px 20px;
border-left: 2px solid var(--mr-amber);
font-family: var(--mr-display);
font-style: italic;
font-size: clamp(1.12rem, 1.8vw, 1.3rem);
line-height: 1.5;
/* 11.1:1 */
color: var(--ink-2);
}
/* ── The consultation, as a lit panel ────────────────────────────────── */
/* It was a hairline rule with three things under it, sitting flat on the
card. A rule says "the section above has ended"; it does not say "here is
something else you can do". This is an inset panel with a warm ground, an
amber edge and a sheen that crosses it slowly — the same gesture the
mid-page band and the closing panel use, so the page's three lit surfaces
behave alike instead of each inventing its own. */
.fn--mrityu .fn-mr-consult {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 22px;
padding: 20px clamp(20px, 2vw, 26px);
/* 55%, not 26. At 26 the edge composited to 1.74:1 against the card —
an edge you cannot see is not an edge, and it was the thing meant to
mark this as a panel. 55% measures 3.48:1. */
border: 1px solid rgba(232, 178, 74, .55);
border-radius: 16px;
/* A warm tint over the card rather than a flat fill, so the panel reads
as lit from within the card instead of pasted onto it. */
background:
linear-gradient(135deg, rgba(232, 178, 74, .13), rgba(192, 57, 47, .11) 55%, rgba(232, 178, 74, .05));
box-shadow: inset 0 1px 0 rgba(251, 243, 228, .09),
0 14px 30px -20px rgba(12, 3, 4, .8);
}
/* The sheen. z-index -1 under the isolation above, so it passes BEHIND the
text rather than washing over it — a highlight sweeping across type is the
usual way this effect ruins legibility. */
.fn--mrityu .fn-mr-consult::after {
content: '';
position: absolute;
inset: 0 auto 0 -55%;
width: 42%;
z-index: -1;
/* 8%, not 13. THE SHEEN PASSES BEHIND THE TEXT BUT STILL LIGHTENS THE
GROUND UNDER IT, so it is not free: at 13% the body copy fell to
4.45:1 where the highlight crosses, under the 4.5 floor for 14.4px
text. At 8% it is 5.19:1 and the sweep still reads. */
background: linear-gradient(100deg, transparent, rgba(251, 243, 228, .08), transparent);
transform: skewX(-14deg);
animation: mr-sweep 8.5s ease-in-out infinite;
pointer-events: none;
}
.fn--mrityu .fn-mr-consult__t {
margin: 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: 1.24rem;
line-height: 1.2;
/* 11.6:1 on the panel, 9.0:1 under the sheen */
color: #FBF3E4;
}
.fn--mrityu .fn-mr-consult__x {
margin: 6px 0 0;
font-size: .9rem;
line-height: 1.55;
/* 6.4:1 on the panel, and 5.2:1 at the moment the sheen crosses it —
which is the figure that actually governs, since the highlight
lightens the ground the text sits on. */
color: #C9B693;
}
/* The button carries a warmer glow here than elsewhere: it is the one bright
object inside an already-lit panel, and without it the panel outshines its
own call to action. */
.fn--mrityu .fn-mr-consult .fn-mr-btn {
box-shadow: 0 14px 30px -14px rgba(192, 57, 47, .9),
0 0 26px -8px rgba(232, 178, 74, .35);
}
.fn--mrityu .fn-mr-consult .fn-mr-btn:hover {
box-shadow: 0 20px 40px -16px rgba(192, 57, 47, 1),
0 0 38px -8px rgba(232, 178, 74, .55);
}
/* =====================================================================
9. ACHARYAS — the Panch Mahavidya structure, in this palette
=====================================================================
A full-bleed marquee of portrait cards, masked to transparent at both
ends, holding the people twice and animating to translateX(-50%).
THE -50% LOOP IS SEAMLESS BY CONSTRUCTION. An earlier version here
counted copies and checked that (copies - 1) x copyWidth cleared the
viewport — arithmetic that had to be redone every time a tile width
changed. Two copies and -50% is always seamless whatever the widths.
AND A 320px CARD IS WHAT STOPS THE DUPLICATE. One copy of twelve is
about 4150px, far wider than any screen, so the same person is never
visible twice. The earlier version's six narrow tiles per copy meant
two copies were always on screen at once.
===================================================================== */
.fn--mrityu .fn-mr-marq {
overflow: hidden;
margin-top: clamp(30px, 4vw, 42px);
/* the ends fade rather than being cut, so cards enter and leave instead
of appearing at an edge */
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fn--mrityu .fn-mr-marq__track {
display: flex;
gap: 26px;
width: max-content;
animation: mr-scroll-x 68s linear infinite;
}
.fn--mrityu .fn-mr-marq:hover .fn-mr-marq__track { animation-play-state: paused; }
/* :focus-within as well as :hover — a keyboard user tabbing into the row
cannot stop it with a cursor. */
.fn--mrityu .fn-mr-marq:focus-within .fn-mr-marq__track { animation-play-state: paused; }
@keyframes mr-scroll-x { to { transform: translateX(-50%); } }
.fn--mrityu .fn-mr-person {
position: relative;
overflow: hidden;
flex: 0 0 auto;
width: 300px;
margin: 0;
padding: 36px 26px 30px;
border: 1px solid rgba(251, 243, 228, .1);
border-radius: 24px;
/* deep cola on the cream section, the same object language the outcome
cards and the credential panel use */
background: linear-gradient(155deg, #3D1013, #2A0A0C 55%, #24090B);
box-shadow: 0 18px 40px -26px rgba(42, 10, 12, .5);
text-align: center;
transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.fn--mrityu .fn-mr-person:hover {
transform: translateY(-5px);
box-shadow: 0 32px 58px -28px rgba(42, 10, 12, .7);
}
/* The dome of light behind the portrait. */
.fn--mrityu .fn-mr-person::before {
content: '';
position: absolute;
inset: -40% 0 auto 0;
height: 260px;
background: radial-gradient(60% 60% at 50% 60%, rgba(232, 178, 74, .16), transparent 70%);
pointer-events: none;
}
/* The ring is the WRAPPER'S BACKGROUND showing through the 3px inset the
image leaves around itself — not a border, which would be clipped by the
image's own border-radius. */
.fn--mrityu .fn-mr-person__ring {
position: relative;
display: block;
width: 148px;
height: 148px;
margin: 0 auto;
padding: 3px;
border-radius: 999px;
background: linear-gradient(160deg, var(--mr-amber), #B98A1E 55%, var(--mr-amber));
box-shadow: 0 14px 34px -14px rgba(232, 178, 74, .5);
}
.fn--mrityu .fn-mr-person img {
width: 100%;
height: 100%;
border-radius: 999px;
object-fit: cover;
object-position: top center;
background: var(--mr-cream-2);
}
.fn--mrityu .fn-mr-person__name {
position: relative;
display: block;
margin-top: 22px;
font-family: var(--mr-display);
font-weight: 700;
font-size: 1.16rem;
line-height: 1.2;
/* 14.9:1 on the card's lightest stop */
color: #FBF3E4;
}
.fn--mrityu .fn-mr-person__role {
position: relative;
display: block;
margin-top: 8px;
font-size: .82rem;
line-height: 1.5;
/* 8.3:1 */
color: #C9B693;
}
@media (max-width: 620px) {
.fn--mrityu .fn-mr-person { width: 250px; padding: 30px 20px 26px; }
.fn--mrityu .fn-mr-person__ring { width: 124px; height: 124px; }
}
/* =====================================================================
10. THE QUESTIONS
===================================================================== */
.fn--mrityu .fn-mr-faq { display: grid; gap: 12px; }
.fn--mrityu .fn-mr-faq__item {
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(251, 243, 228, .035);
overflow: hidden;
transition: border-color .3s ease, background-color .3s ease;
}
.fn--mrityu .fn-mr-faq__item.is-open {
border-color: var(--line-2);
background: rgba(251, 243, 228, .06);
}
.fn--mrityu .fn-mr-faq__item h3 { margin: 0; }
.fn--mrityu .fn-mr-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
padding: 19px 22px;
border: 0;
background: none;
font-family: var(--mr-sans);
font-size: 1.01rem;
font-weight: 600;
line-height: 1.45;
text-align: left;
color: var(--ink);
cursor: pointer;
}
.fn--mrityu .fn-mr-faq__q:focus-visible {
outline: 2px solid var(--mr-amber);
outline-offset: -3px;
}
/* A plus that becomes a minus: two bars, one of which rotates away. Drawn
rather than typed, so it cannot pick up a font fallback. */
.fn--mrityu .fn-mr-faq__sign {
position: relative;
flex: 0 0 auto;
width: 15px;
height: 15px;
}
.fn--mrityu .fn-mr-faq__sign::before,
.fn--mrityu .fn-mr-faq__sign::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
margin: -1px 0 0 -7.5px;
border-radius: 2px;
background: var(--accent);
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-faq__sign::after { transform: rotate(90deg); }
.fn--mrityu .fn-mr-faq__item.is-open .fn-mr-faq__sign::after { transform: rotate(0deg); }
/* grid-template-rows, not height: it is what allows a transition to and
from `auto` without the height being measured in JavaScript. A browser
without it simply shows and hides the panel, which is the right
fallback. */
.fn--mrityu .fn-mr-faq__a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1);
}
.fn--mrityu .fn-mr-faq__item.is-open .fn-mr-faq__a { grid-template-rows: 1fr; }
.fn--mrityu .fn-mr-faq__a > div { overflow: hidden; }
.fn--mrityu .fn-mr-faq__a p {
margin: 0;
padding: 0 22px 21px;
font-size: .95rem;
line-height: 1.75;
color: var(--ink-3);
}
/* =====================================================================
11. THE CLOSING PANEL
===================================================================== */
.fn--mrityu .fn-mr-close {
position: relative;
max-width: 900px;
margin-inline: auto;
padding: clamp(38px, 5.4vw, 66px) clamp(26px, 4vw, 54px);
border-radius: 20px;
/* THE ONE INVERSION ON THE PAGE. After a long dark scroll the eye lands
on it without being shouted at, which is what a closing panel has to
do. Everything on it therefore takes the dark ink. */
background: linear-gradient(155deg, #FFFBF3, var(--mr-cream) 50%, var(--mr-cream-2));
box-shadow: 0 40px 90px -46px rgba(12, 3, 4, .95);
overflow: hidden;
text-align: center;
}
/* The slow sweep across the panel. */
.fn--mrityu .fn-mr-close__shine {
position: absolute;
inset: 0 auto 0 -60%;
width: 45%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
transform: skewX(-14deg);
animation: mr-sweep 7.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes mr-sweep {
0%, 62% { transform: translateX(0) skewX(-14deg); }
100% { transform: translateX(400%) skewX(-14deg); }
}
.fn--mrityu .fn-mr-close__h {
margin: 20px 0 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: clamp(2rem, 4.6vw, 3.4rem);
line-height: 1.1;
text-wrap: balance;
/* 16.60:1 on the panel */
color: var(--mr-ground-2);
}
/* The accent word on the cream panel takes the LIGHT-ground cherry: the
dark-ground one is 2.35:1 here. */
.fn--mrityu .fn-mr-close__h .fn-mr-accent { color: var(--mr-cherry-light); }
.fn--mrityu .fn-mr-close__lead {
margin: 18px auto 0;
max-width: 56ch;
font-size: 1.04rem;
line-height: 1.7;
/* 12.50:1 */
color: #55171A;
}
.fn--mrityu .fn-mr-close__acts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 30px;
}
.fn--mrityu .fn-mr-close__when {
margin: 24px 0 0;
font-size: .9rem;
font-weight: 600;
/* 7.14:1 */
color: #6B4A3A;
}
.fn--mrityu .fn-mr-close__tag {
margin: 10px 0 0;
font-size: .74rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #6B4A3A;
}
/* =====================================================================
12. THE ENQUIRY OVERLAY
===================================================================== */
.fn--mrityu .fn-mr-pop {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.fn--mrityu .fn-mr-pop[hidden] { display: none; }
.fn--mrityu .fn-mr-pop__scrim {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: rgba(12, 3, 4, .72);
backdrop-filter: blur(3px);
cursor: pointer;
}
.fn--mrityu .fn-mr-pop__card {
position: relative;
width: min(440px, 100%);
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 30px 28px 26px;
border: 1px solid var(--mr-panel-2);
border-radius: 16px;
background: linear-gradient(165deg, var(--mr-panel), var(--mr-ground-2) 70%);
box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9);
/* the token set the form controls inside expect */
--ink: #FBF3E4;
--ink-2: #E4D3B4;
--ink-3: #C9B693;
--ink-4: #AC9877;
--accent: var(--mr-cherry-dark);
--line: rgba(251, 243, 228, .13);
--line-2: rgba(251, 243, 228, .26);
color: var(--ink);
animation: mr-pop .38s cubic-bezier(.22, 1, .36, 1);
}
@keyframes mr-pop {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: none; }
}
.fn--mrityu .fn-mr-pop__x {
position: absolute;
top: 12px;
right: 14px;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: rgba(251, 243, 228, .09);
/* 13.17:1 */
color: #E4D3B4;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
transition: background-color .25s ease, color .25s ease;
}
.fn--mrityu .fn-mr-pop__x:hover { background: var(--mr-cherry-dark); color: #FFFBF3; }
.fn--mrityu .fn-mr-pop__head { margin-bottom: 20px; text-align: center; }
.fn--mrityu .fn-mr-pop__title {
margin: 10px 0 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: 1.44rem;
line-height: 1.2;
color: var(--ink);
}
.fn--mrityu .fn-mr-pop__lead {
margin: 10px 0 0;
font-size: .9rem;
line-height: 1.6;
color: var(--ink-4);
}
/* Off-screen, not display:none — a bot that skips unrendered fields would
skip the honeypot, which is the whole point of it. */
.fn--mrityu .fn-mr-pop__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
}
.fn--mrityu .fn-mr-pop__msg {
margin: 0 0 12px;
padding: 11px 14px;
border-radius: 9px;
border: 1px solid rgba(232, 103, 79, .45);
background: rgba(232, 103, 79, .14);
font-size: .88rem;
color: #F6C8BD;
}
.fn--mrityu .fn-mr-pop__msg[hidden] { display: none; }
.fn--mrityu .fn-mr-pop__msg.is-ok {
border-color: rgba(120, 190, 140, .45);
background: rgba(120, 190, 140, .14);
color: #C7E8D0;
}
.fn--mrityu .fn-mr-pop__alt {
margin: 14px 0 0;
font-size: .85rem;
text-align: center;
color: var(--ink-4);
}
.fn--mrityu .fn-mr-pop__alt a { color: var(--mr-amber); }
/* =====================================================================
13. THE CONFIRMATION PAGE
===================================================================== */
.fn--mrityu .fn-mr-ty { text-align: center; }
.fn--mrityu .fn-mr-ty__card {
position: relative;
padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 48px);
border: 1px solid var(--line-2);
border-radius: 20px;
background: linear-gradient(165deg, var(--mr-panel), var(--mr-ground-2) 72%);
box-shadow: var(--mr-shadow);
}
.fn--mrityu .fn-mr-ty__tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
border-radius: 50%;
background: var(--mr-fill);
color: var(--mr-fill-ink);
box-shadow: 0 16px 36px -16px rgba(168, 40, 34, .9);
}
.fn--mrityu .fn-mr-ty__tick svg { width: 28px; height: 28px; }
.fn--mrityu .fn-mr-ty__h {
margin: 22px 0 0;
font-family: var(--mr-display);
font-weight: 700;
font-size: clamp(2rem, 4.8vw, 3rem);
color: var(--ink);
}
.fn--mrityu .fn-mr-ty__lead {
margin: 16px auto 0;
max-width: 52ch;
font-size: 1.02rem;
line-height: 1.72;
color: var(--ink-3);
}
.fn--mrityu .fn-mr-ty__lead strong { color: var(--ink); }
.fn--mrityu .fn-mr-ty__facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 34px;
margin: 28px 0 0;
padding: 22px 0;
border-block: 1px solid var(--line);
}
.fn--mrityu .fn-mr-ty__facts dt {
margin: 0 0 5px;
font-size: .67rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--ink-4);
}
.fn--mrityu .fn-mr-ty__facts dd {
margin: 0;
font-size: .97rem;
font-weight: 600;
color: var(--ink);
}
.fn--mrityu .fn-mr-ty__acts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 13px;
margin-top: 26px;
}
.fn--mrityu .fn-mr-ty__paid {
margin: 20px 0 0;
font-size: .86rem;
color: var(--ink-4);
}
.fn--mrityu .fn-mr-ty__ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fn--mrityu .fn-mr-ty__back {
display: inline-block;
margin-top: 22px;
font-size: .88rem;
color: var(--mr-amber);
}
.fn--mrityu .fn-mr-tools {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.fn--mrityu .fn-mr-tool {
display: block;
padding: 26px 24px 28px;
border: 1px solid var(--line);
border-radius: var(--mr-radius);
background: var(--card);
text-decoration: none;
transition: transform .4s cubic-bezier(.22, 1, .36, 1),
box-shadow .4s ease, border-color .3s ease;
}
.fn--mrityu .fn-mr-tool:hover {
transform: translateY(-5px);
border-color: var(--line-2);
box-shadow: 0 24px 48px -26px rgba(42, 10, 12, .34);
}
/* The featured tool takes the fill, so the one that is being recommended
is the one that looks recommended. Everything on it inverts. */
.fn--mrityu .fn-mr-tool--hero {
background: var(--mr-fill);
border-color: transparent;
}
.fn--mrityu .fn-mr-tool--hero .fn-mr-tool__t,
.fn--mrityu .fn-mr-tool--hero .fn-mr-tool__cta { color: var(--mr-fill-ink); }
.fn--mrityu .fn-mr-tool--hero .fn-mr-tool__x { color: rgba(255, 251, 243, .85); }
.fn--mrityu .fn-mr-tool--hero .fn-mr-tool__ico {
background: rgba(255, 251, 243, .17);
color: var(--mr-fill-ink);
}
.fn--mrityu .fn-mr-tool__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 16px;
border-radius: 11px;
background: var(--mr-fill);
color: var(--mr-fill-ink);
}
.fn--mrityu .fn-mr-tool__ico svg { width: 21px; height: 21px; }
.fn--mrityu .fn-mr-tool__t {
margin: 0 0 8px;
font-family: var(--mr-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--ink);
}
.fn--mrityu .fn-mr-tool__x {
margin: 0 0 14px;
font-size: .89rem;
line-height: 1.6;
color: var(--ink-4);
}
.fn--mrityu .fn-mr-tool__cta {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .85rem;
font-weight: 600;
color: var(--accent);
}
/* =====================================================================
THE SHARED CHROME, RE-SKINNED
=====================================================================
The marquee, both navs, the footer, the WhatsApp bubble and the
countdown bar are rendered by the LAYOUT, outside this funnel's views.
They cannot be replaced, so they are restyled — and they have to be, or
this page would carry three other-funnel-coloured components. */
/* ── The top marquee ─────────────────────────────────────────────────── */
.fn--mrityu .fn-marq {
background: var(--mr-fill);
/* 8.62:1 at the darkest stop */
color: var(--mr-fill-ink);
border-bottom: 0;
}
.fn--mrityu .fn-marq__item { color: var(--mr-fill-ink); font-weight: 600; }
.fn--mrityu .fn-marq__star { color: rgba(255, 251, 243, .7); }
/* ── The navbar ──────────────────────────────────────────────────────── */
.fn--mrityu .fn-nav {
background: rgba(30, 6, 7, .86);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(251, 243, 228, .1);
}
.fn--mrityu .fn-nav__brand,
.fn--mrityu .fn-nav__logo { color: var(--mr-cream); }
.fn--mrityu .fn-nav__links a {
/* 13.17:1 */
color: #E4D3B4;
transition: color .25s ease;
}
.fn--mrityu .fn-nav__links a:hover { color: var(--mr-amber); }
.fn--mrityu .fn-nav__burger { color: var(--mr-cream); }
.fn--mrityu .fn-nav__drawer {
background: var(--mr-ground-2);
border-top: 1px solid rgba(251, 243, 228, .1);
}
.fn--mrityu .fn-nav__drawer a { color: #E4D3B4; }
/* The nav's CTA is the shared .fn-btn, which funnel.css paints. It takes
the cherry fill here so the page has exactly one primary colour. */
.fn--mrityu .fn-nav .fn-btn,
.fn--mrityu .fn-nav__cta {
background-image: var(--mr-fill);
background-color: transparent;
border-color: transparent;
color: var(--mr-fill-ink);
}
/* ── The mobile bar ──────────────────────────────────────────────────── */
.fn--mrityu .fn-mnav {
background: rgba(30, 6, 7, .95);
border-top: 1px solid rgba(251, 243, 228, .12);
backdrop-filter: blur(10px);
}
.fn--mrityu .fn-mnav__item {
/* 9.77:1 */
color: #C9B693;
}
.fn--mrityu .fn-mnav__item:hover,
.fn--mrityu .fn-mnav__item.is-on { color: var(--mr-amber); }
/* ── The footer ──────────────────────────────────────────────────────── */
.fn--mrityu .fn-footer {
background: #150405;
border-top: 1px solid rgba(251, 243, 228, .1);
color: #C9B693;
}
.fn--mrityu .fn-footer__logo,
.fn--mrityu .fn-footer__brand { color: var(--mr-cream); }
.fn--mrityu .fn-footer__blurb { color: #C9B693; }
/* 10.7:1 on the footer ground */
.fn--mrityu .fn-footer__credit { color: var(--mr-amber); font-weight: 600; }
.fn--mrityu .fn-footer__grid h3,
.fn--mrityu .fn-footer__grid h4 { color: var(--mr-amber); }
.fn--mrityu .fn-footer a { color: #E4D3B4; }
.fn--mrityu .fn-footer a:hover { color: var(--mr-amber); }
.fn--mrityu .fn-footer__bottom { border-top-color: rgba(251, 243, 228, .1); }
/* `a` HAS TO BE IN THIS SELECTOR. The generic `.fn--mrityu .fn-footer a` rule
above is (0,0,2,1) — its element selector outranks a two-class rule — so
without the `a` here the CTA keeps the fill and loses its ink to the link
colour, which measures 3.69:1 on that fill. Caught by the contrast audit,
not by eye: the button looked fine and its label was under the floor. */
/* THE FOOTER CTA IS A TEXT LINK IN funnel.css, NOT A BUTTON — inline-flex
with a gap and a bold weight, and no padding, radius or background. So a
fill alone was not enough: it produced a sharp-cornered rectangle clamped
to the words. Anything given this funnel's button FILL has to be given its
button SHAPE in the same breath. */
.fn--mrityu .fn-footer a.fn-footer__cta,
.fn--mrityu .fn-footer a.fn-btn,
.fn--mrityu .fn-footer__cta,
.fn--mrityu .fn-footer .fn-btn {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 16px;
/* 22px, not 26. MEASURED: the footer column is 206px wide and this
label needs 213px on one line — seven pixels short, so it wrapped to
two lines and the arrow, being a flex child after the text, was pushed
to the far right of the box. Eight pixels off the horizontal padding
brings it to 205px and it fits. */
padding: 12px 22px;
/* AND IT MUST NEVER WRAP. If the label is ever lengthened it should
overflow its column by a few pixels into the grid gap, which looks
like a slightly wide button; wrapping turns it into a two-line lump
with the arrow stranded, which looks broken. */
white-space: nowrap;
border: 1px solid transparent;
border-radius: 999px;
background-image: var(--mr-fill);
background-color: transparent;
font-size: .89rem;
font-weight: 600;
/* 8.6:1 at the fill's darkest stop, 5.3:1 at its lightest */
color: var(--mr-fill-ink);
box-shadow: 0 14px 30px -16px rgba(168, 40, 34, .85);
transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
/* it is the one button in the footer, so it answers the cursor like the
others on the page rather than changing colour like a link */
.fn--mrityu .fn-footer a.fn-footer__cta:hover,
.fn--mrityu .fn-footer a.fn-btn:hover {
transform: translateY(-2px);
color: var(--mr-fill-ink);
box-shadow: 0 20px 38px -18px rgba(168, 40, 34, .95);
}
.fn--mrityu .fn-fcontact__icon {
background: rgba(251, 243, 228, .08);
color: var(--mr-amber);
}
/* ── The countdown bar ─────────────────────────────────────────────────
THE INNER PANEL IS A HARDCODED LITERAL IN funnel.css, NOT A TOKEN.
`.fn-timerbar__in` is painted rgba(11, 9, 37, .97) — the other design's
near-black navy, written as a literal — so redefining --panel and the rest
of that sheet's custom properties could not reach it. The frame around it
IS a token (--grad), so it took this funnel's cherry correctly, and the
result was a cherry hairline around a navy pill: the one component on the
page still wearing the other funnel's colour.
The same is true of the two other literals in that sheet's overlays
(.fn-reel, .fn-reelbar, .fn-igcard and friends), but this funnel includes
none of those partials, so this is the only one that renders. Anything
added to the layout later should be checked the same way — a token
override is not a guarantee when the source uses a literal. */
/* NOTHING IS PAINTED HERE. .fn-timerbar is a fixed, transparent positioning
wrapper — inset-inline: 0 with 92px gutters and pointer-events: none — and
the visible pill is .fn-timerbar__frame inside it. Giving the wrapper a
background drew a dark band right across the viewport with the pill
floating in the middle of it. The frame and its fill are styled below;
this element stays invisible, exactly as the shared design leaves it. */
/* The fill inside the gradient frame. Same alpha as the original so the
backdrop blur behind it behaves identically — only the hue changes. */
.fn--mrityu .fn-timerbar__in {
background: rgba(30, 6, 7, .97);
}
/* The digit cells sit on that fill; a touch more lift than the shared
3% so they read as cells against a warm ground rather than a cold one. */
.fn--mrityu .fn-timerbar__cell {
background: rgba(251, 243, 228, .06);
border-color: rgba(251, 243, 228, .2);
}
.fn--mrityu .fn-timerbar__eyebrow { color: #C9B693; }
/* 10.05:1 */
.fn--mrityu .fn-timerbar__when { color: var(--mr-amber); }
.fn--mrityu .fn-timerbar__cell,
.fn--mrityu .fn-timerbar__clock { color: var(--mr-cream); }
.fn--mrityu .fn-timerbar__label { color: #AC9877; }
.fn--mrityu .fn-timerbar__dot { background: var(--mr-amber); }
.fn--mrityu .fn-timerbar .fn-btn {
background-image: var(--mr-fill);
background-color: transparent;
border-color: transparent;
color: var(--mr-fill-ink);
}
/* ── The WhatsApp bubble ─────────────────────────────────────────────── */
.fn--mrityu .fn-wa { background: #1E7A45; color: #FFFFFF; }
.fn--mrityu .fn-wa__pulse { background: rgba(30, 122, 69, .5); }
/* =====================================================================
MOTION
===================================================================== */
/* .fn-reveal is the SHARED hook — funnel.css already defines it at
`opacity: 0` and funnel.js adds .is-in. This only re-times it and adds
the per-element stagger from --d; the states themselves are inherited.
THE PAGE MUST NOT DEPEND ON THAT SCRIPT TO BE READABLE, and by itself it
does: with JavaScript off, nothing ever adds .is-in and every revealed
element stays at zero. funnel.js covers the browser that lacks
IntersectionObserver — it adds .is-in to everything — but not the reader
who has scripting turned off or blocked.
So the resting state is unhidden for them explicitly below. `scripting:
none` is the media feature for exactly this and is the only way to ask
the question in CSS; it is not supported everywhere, but the overlap
between browsers too old to know it and users running with JS disabled
is vanishingly small, and every one of them still gets the page's
content in the markup. */
.fn--mrityu .fn-reveal {
transition: opacity .7s ease var(--d, 0ms),
transform .7s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
@media (scripting: none) {
.fn--mrityu .fn-reveal {
opacity: 1;
transform: none;
}
/* the hero's entrance is a CSS animation, so it plays regardless — but
its stagger is pointless with nothing else moving */
.fn--mrityu .fn-mr-rise { animation-delay: 0ms; }
}
/* The hero's entrance runs on load rather than on scroll — it is already in
view, and waiting for an observer to notice that produces a visible
flash of empty page. */
.fn--mrityu .fn-mr-rise {
opacity: 0;
transform: translateY(16px);
animation: mr-rise .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) forwards;
}
@keyframes mr-rise {
to { opacity: 1; transform: none; }
}
/* ── Everything off, for anyone who asked ────────────────────────────── */
/* Including the staggers: a delayed fade is still motion to someone who
asked for none. The thread is pinned fully drawn, the marquees stop with
both rows at their start, and every entrance resolves to its finished
state rather than to its starting one. */
@media (prefers-reduced-motion: reduce) {
.fn--mrityu *,
.fn--mrityu *::before,
.fn--mrityu *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
transition-delay: 0ms !important;
}
.fn--mrityu .fn-reveal,
.fn--mrityu .fn-mr-rise {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* the chart resolves to its finished state: fully drawn, fully lit,
every numeral and graha visible — never to its starting one */
.fn--mrityu .fn-mr-chart__lines { opacity: 1 !important; transform: none !important; animation: none !important; }
.fn--mrityu .fn-mr-chart__n,
.fn--mrityu .fn-mr-chart__graha { opacity: 1 !important; animation: none !important; }
.fn--mrityu .fn-mr-chart__lit { opacity: 1 !important; }
/* the staged cards, in case the class is ever added before the script
has checked the preference */
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod {
opacity: 1 !important;
transform: none !important;
}
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__card,
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__pic img,
.fn--mrityu .fn-mr-thread.is-staged .fn-mr-mod.is-focus .fn-mr-mod__node {
transform: none !important;
}
.fn--mrityu .fn-mr-mods__fill { transform: scaleY(1) !important; }
.fn--mrityu .fn-mr-cred__rule { transform: scaleX(1) !important; }
.fn--mrityu .fn-mr-marq__track { animation: none !important; }
.fn--mrityu .fn-mr-chart__ring,
.fn--mrityu .fn-mr-chart__lit,
.fn--mrityu .fn-mr-ember,
.fn--mrityu .fn-mr-consult::after,
.fn--mrityu .fn-mr-close__shine,
.fn--mrityu .fn-mr-mentor__ring,
.fn--mrityu .fn-mr-scroll { animation: none !important; }
.fn--mrityu .fn-mr-scroll { display: none; }
}
/* =====================================================================
NARROW SCREENS
===================================================================== */
/* THE HERO STACKS BEFORE THE COLUMNS GET TOO NARROW TO READ. 900px rather
than the 860 below, because this grid has to break earlier than the others:
a 52ch paragraph and a 440px diagram cannot share a 900px line.
The chart falls BELOW the buttons, which is DOM order already — so the
thing a reader came to do stays above the fold on a phone, and the
diagram is what they find when they scroll. */
@media (max-width: 900px) {
.fn--mrityu .fn-mr-hero__in {
grid-template-columns: 1fr;
gap: clamp(30px, 6vw, 46px);
}
.fn--mrityu .fn-mr-hero__text { text-align: center; }
.fn--mrityu .fn-mr-hero__lead { margin-inline: auto; }
.fn--mrityu .fn-mr-hero__acts,
.fn--mrityu .fn-mr-hero__facts { justify-content: center; }
.fn--mrityu .fn-mr-chart { width: min(100%, 360px); }
/* the cue would otherwise sit over the caption once the chart is centred */
.fn--mrityu .fn-mr-scroll { display: none; }
}
/* The band stacks before the two columns get too narrow to read: a 46ch
paragraph and a two-up figure grid cannot share a 960px line. */
@media (max-width: 980px) {
.fn--mrityu .fn-mr-cred-wrap { grid-template-columns: 1fr; }
.fn--mrityu .fn-mr-cred-say { text-align: center; }
.fn--mrityu .fn-mr-cred-say .fn-mr-h2,
.fn--mrityu .fn-mr-cred-say .fn-mr-lead { text-align: center; }
.fn--mrityu .fn-mr-cred-say .fn-mr-lead { margin-inline: auto; }
.fn--mrityu .fn-mr-cred-say .fn-mr-eyebrow::before { left: 50%; margin-left: -26px; }
}
@media (max-width: 560px) {
.fn--mrityu .fn-mr-creds { grid-template-columns: minmax(0, 1fr); }
/* one column: the vertical rule between cells has nothing to divide */
.fn--mrityu .fn-mr-cred,
.fn--mrityu .fn-mr-cred:first-of-type {
box-shadow: inset 0 -1px 0 rgba(251, 243, 228, .1);
}
.fn--mrityu .fn-mr-cred:last-of-type { box-shadow: none; }
}
@media (max-width: 860px) {
.fn--mrityu .fn-mr-mentor { grid-template-columns: 1fr; }
/* capped, or a portrait that bleeds full-width becomes the section */
.fn--mrityu .fn-mr-mentor__photo { max-height: 440px; }
.fn--mrityu .fn-mr-mentor__body { padding: clamp(24px, 5vw, 30px); }
/* Stacked, the plate goes on top and its angle goes with it: a 42px
diagonal across a full-width panel reads as a mistake rather than a
cut. Both orders collapse to the same layout. */
.fn--mrityu .fn-mr-mod__card,
.fn--mrityu .fn-mr-mod:nth-of-type(even) .fn-mr-mod__card {
grid-template-columns: minmax(0, 1fr);
}
.fn--mrityu .fn-mr-mod__pic,
.fn--mrityu .fn-mr-mod:nth-of-type(even) .fn-mr-mod__pic {
order: 0;
/* 5:4 rather than 16:9: the artwork is square with its title along
the top, and a 16:9 crop of it loses the title entirely. */
aspect-ratio: 5 / 4;
clip-path: none;
}
.fn--mrityu .fn-mr-mod:nth-of-type(even) .fn-mr-mod__body { order: 0; }
.fn--mrityu .fn-mr-mod__wm { font-size: 8rem; }
}
@media (max-width: 620px) {
.fn--mrityu .fn-mr-mods { padding-left: 42px; }
.fn--mrityu .fn-mr-mods__rail { left: 15px; }
.fn--mrityu .fn-mr-mod__node { left: -42px; }
.fn--mrityu .fn-mr-ticket__head { justify-content: flex-start; }
.fn--mrityu .fn-mr-ticket__price { text-align: left; }
.fn--mrityu .fn-mr-band__in { flex-direction: column; align-items: flex-start; }
.fn--mrityu .fn-mr-face { width: 108px; }
.fn--mrityu .fn-mr-face:nth-of-type(3n + 2) { width: 142px; }
}