@charset "UTF-8";

/* ===========================================================================
   Majori Manor — club.css

   WHAT THIS FILE IS NOT. It is not a third design system, and it is not a
   second one either. THE CLUB loads home.css and then estate.css and draws
   almost everything with them: the tokens, the two faces, the grain, the
   navigation and its active state, the hero, the bands, the chapters, the
   plates, the invitation, the footer, the reveal states, the six act grounds
   and the sticky walk are all approved on the two pages before this one and
   are used here unchanged. head.php lists the three files together for exactly
   that reason — a token edited in home.css moves all three pages, so they
   cannot drift.

   WHAT THIS FILE IS. Two components neither page before it had a use for, and
   the passes they need:

     1.  the hero    one override, and it is a subtraction
     1b. the walk    the honesty mark and the scrim under the legend, on this
                     page's brighter stations
     1c. the band    the gradient that lets copy stand on a lit frame
     2.  track       the lateral pan along the detail frames
     3.  dialogue    four ideas over one changing room
     4.  motion      what happens when the layer never arrives
     5.  narrow      the real mobile pass for those two

   §1, §1b and §1c are the only rules here that touch a component home.css or
   estate.css already owns, and every one of the four is a MEASUREMENT: each was
   put in because a line of type on this page's photography failed WCAG AA, each
   states the number it failed at, and none of them changes a colour, a size or
   a position that was not the thing failing. The four measurements and what
   they became are in docs/THE_CLUB.md §6.

   THE PAGE MOVES THROUGH FIVE OF THE SIX GROUNDS estate.css declares, and it
   moves through them in a different order because it is a different walk:

     green      the arrival, and the first words          (--mm-park)
     mahogany   the house, and the rooms in it            (--mm-heritage)
     interior   the details, at the darkest               (--mm-interior)
     green      the table                                 (--mm-park)
     wine       the members' room, and the dialogue       (--mm-evening)
     near-black the people, and the way in                (--mm-estate)

   THE ESTATE opens on near-black at the gates and ends there. THE CLUB opens
   on the seal's green — the one temperature THE ESTATE keeps for out of doors
   — because this page begins where that one ended: already inside, with the
   park on the other side of the glass. Not one of those five values is
   declared here; all six are estate.css §1.
   =========================================================================== */


/* ===========================================================================
   1. The hero, and the one thing this page takes back off it
   ---------------------------------------------------------------------------
   estate.css §1b hangs a soft dark band behind the hero copy, and it is there
   for a specific picture: THE ESTATE's first screen is the real Majori Manor,
   which is white render, and cream type on a white wall measures about 1.2:1.

   THE CLUB'S FIRST SCREEN IS THE SAME HOUSE AT NIGHT. The frame is already
   near-black at the top and bottom — the type stands on dark walnut panelling
   and a night window — so the band that rescues THE ESTATE would here be a
   second scrim over a scrim, and the first thing a reader of this page would
   notice is that the picture had been dimmed.

   So it is taken down rather than removed. About a third of the density,
   which measured on the rendered page still clears AA on every line (see
   docs/THE_CLUB.md §6) and leaves the lit doorway at the centre of the frame
   at its own brightness. Same file, same pseudo-element, same stack; one
   number per stop.
   =========================================================================== */

.c-film-hero__scrim::after {
    background-image: linear-gradient(to bottom,
        transparent 8%,
        color-mix(in srgb, var(--mm-black-900) 26%, transparent) 32%,
        color-mix(in srgb, var(--mm-black-900) 44%, transparent) 52%,
        color-mix(in srgb, var(--mm-black-900) 32%, transparent) 72%,
        /* the last two stops are the scroll cue's, and they are the reason
           the gradient does not reach transparent: the film parallaxes as the
           first screen leaves and takes this scrim with it, so "Come in" spends
           the exit over whatever the film has slid under it. A sixth of the
           ground held to the bottom edge is invisible on the still frame and
           is what keeps that line over AA the whole way out. */
        color-mix(in srgb, var(--mm-black-900) 20%, transparent) 88%,
        color-mix(in srgb, var(--mm-black-900) 16%, transparent) 100%);
}

@media (max-width: 899px) {
    .c-film-hero__scrim::after {
        background-image: linear-gradient(to bottom,
            transparent 6%,
            color-mix(in srgb, var(--mm-black-900) 22%, transparent) 28%,
            color-mix(in srgb, var(--mm-black-900) 32%, transparent) 52%,
            color-mix(in srgb, var(--mm-black-900) 26%, transparent) 74%,
            color-mix(in srgb, var(--mm-black-900) 22%, transparent) 88%,
            color-mix(in srgb, var(--mm-black-900) 20%, transparent) 100%);
    }
}


/* ===========================================================================
   1b. The walk's honesty mark, on this page's frames
   ---------------------------------------------------------------------------
   THE WALK IS ESTATE.CSS'S AND IT IS USED HERE UNCHANGED, with one exception,
   and the exception is a measurement rather than a preference.

   On the stage the "Generated image" / "Visualisation" mark is set in
   --ink-faint at 0.5625rem, which is the right grey for THE ESTATE: its walk is
   five photographs of an empty house and two night sequences, and the mark sits
   over quiet plaster. THE CLUB's walk includes the library and the private
   dining room, and both are lit by their own fires — measured against the
   brightest fifth of the pixels behind it, the mark on the library station came
   out at 2.57:1.

   It is the one line on the page that exists to tell a reader the picture is
   not a photograph, so it is the last line that may be hard to read.
   --ink-muted is the same grey the note beside it already uses and measures
   over 6:1 on the same frame. Nothing else about the walk is touched, and
   estate.css is not edited — asset_url() cache-busts on filemtime, so a change
   there would re-version the stylesheet in the approved page's markup for a
   rule that page does not need.

   THE ESTATE PROBABLY WANTS THE SAME CHANGE and it has not been made: it is
   recorded in docs/THE_CLUB.md §8 instead, because the brief for this work is
   THE CLUB and the approved page was left alone.
   =========================================================================== */

html.is-walking .c-walk__mark {
    color: var(--ink-muted);
}

/*
   AND THE SCRIM UNDER THE LEGEND COMES UP WITH IT, for the same measured
   reason. estate.css's walk gradient is written for THE ESTATE's stations:
   plaster, marble and an unlit house, where 34% of the ground at a third of
   the way up is plenty. THE CLUB's stations are red damask under lit
   chandeliers and two rooms lit by their own fires — the brightest material on
   the site — and against them the gold station number measured 3.1:1 and the
   honesty mark 4.2:1.

   The gradient below is the same three-stop shape, deeper and reaching a
   little further up: opaque at the foot, still better than two-fifths at the
   height the note sits at, and gone by two thirds, so the picture above the
   copy is untouched. Every line in the legend measures over AA on all six
   stations at every width after it, and on a 16:9 frame in a portrait window —
   where the crop is tightest and the type sits over the middle of the room —
   it is the difference between a caption and a suggestion.
*/
html.is-walking .c-walk__scrim {
    background-image:
        linear-gradient(to top,
            color-mix(in srgb, var(--ground) 97%, transparent) 0%,
            color-mix(in srgb, var(--ground) 88%, transparent) 20%,
            color-mix(in srgb, var(--ground) 58%, transparent) 44%,
            color-mix(in srgb, var(--ground) 20%, transparent) 62%,
            transparent 76%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--ground) 58%, transparent),
            transparent 30%);
}


/* ===========================================================================
   1c. Copy standing on a band
   ---------------------------------------------------------------------------
   TWO SCENES ON THIS PAGE NAME THEMSELVES ON THE PICTURE — the table and the
   members' room — and both frames are lit by their own fires, which is the
   material home.css's band scrims were not measured against. On the dining
   salon the scene number came out at 1.3:1 with the chandelier directly behind
   it; on the members' room, which is the first inset band on the site to carry
   an overlay at all, the eyebrow came out at 3.0:1 and the number at 2.0:1 —
   an inset band's scrim is 34% at the foot because it was written for a
   caption printed UNDERNEATH the frame, not for copy standing on it.

   THE BAND GOES ON THE COPY RATHER THAN ON THE PICTURE. Restating home.css's
   scrim here would mean two files describing the same gradient and drifting
   the next time either is touched; this is a second, smaller gradient on the
   overlay box itself, which exists only when a band HAS an overlay and covers
   only the height the copy occupies. The frame keeps its own scrim, the
   picture above the copy is untouched, and home.css stays the only place a
   band's scrim is described.
   =========================================================================== */

.c-film-band__overlay {
    padding-top: clamp(4rem, 12vh, 9rem);
    background-image: linear-gradient(to top,
        color-mix(in srgb, var(--mm-black-900) 88%, transparent) 0%,
        color-mix(in srgb, var(--mm-black-900) 74%, transparent) 44%,
        color-mix(in srgb, var(--mm-black-900) 60%, transparent) 78%,
        color-mix(in srgb, var(--mm-black-900) 44%, transparent) 100%);
}

/*
   AND THE SCENE NUMBER COMES UP A STEP. It sits at the TOP of the overlay box,
   which is the one line the band under the copy reaches last, and it is set in
   --ink-faint — the quietest grey in the system, chosen for a caption on the
   page's own ground. On the dining salon, whose chandelier is directly behind
   it, that measured 1.3:1. --ink-muted is the grey the band's own caption uses
   and it clears AA on both frames. Nothing else in the overlay changes: the
   eyebrow keeps its gold and the title its cream.
*/
.c-film-band__index {
    color: var(--ink-muted);
}


/* ===========================================================================
   2. The track
   ---------------------------------------------------------------------------
   THE SECOND MOTION VERB ON THE SITE. estate.css §2 dissolves one full-screen
   room into the next: a camera moving THROUGH a house. This holds the camera
   at one distance and slides it SIDEWAYS along a wall of close frames. Two
   dissolves in a row read as one section that has lost its way; a pan after a
   dolly reads as the next shot.

   THE DEFAULT STATE IS A GALLERY AND IT IS A COMPLETE ONE. Everything up to
   the html.is-tracking rules is what a reader sees with no JavaScript, with a
   blocked CDN, under prefers-reduced-motion, and on every phone: six captioned
   frames in a plain grid, in content order, nothing at opacity 0 and nothing
   stacked. club.js adds the class only when it has taken responsibility for
   driving the stage — the rule home.css §13 states and estate.css §2 follows.
   =========================================================================== */

.c-detail {
    padding-block: var(--scene);
    background-color: var(--ground);
}

.c-detail__head {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-bottom: var(--scene-tight);
}

.c-detail__index {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: 0.9rem;
}

.c-detail__eyebrow {
    margin: 0 0 1.1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.c-detail__title {
    margin: 0;
    max-width: 20ch;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-weight: 400;
    font-synthesis-weight: none;
    letter-spacing: -0.012em;
    line-height: 1.06;
    text-wrap: balance;
    font-size: clamp(2.1rem, 5.4vw, 4.4rem);
}

.c-detail__lede {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    max-width: var(--text);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ink-muted);
}

.c-detail__track {
    list-style: none;
    margin: 0 auto;
    padding: 0 var(--gutter);
    max-width: var(--shell);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 3.5vw, 3rem) var(--grid-gap);
}

.c-detail__frame {
    margin: 0;
}

.c-detail__cap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0.9rem 0 0;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.c-detail__n {
    color: var(--gold-ink);
    font-variant-numeric: tabular-nums;
}

.c-detail__mark {
    font-size: 0.5625rem;
    color: var(--ink-faint);
}


/* -- the stage ------------------------------------------------------------ */

/*
   HOW LONG THE PAN IS. The section's height is the scroll it can spend, and
   the travel it has to cover is measured by club.js from the real track — so
   this number sets the RATE rather than the distance: at 38vh a frame the page
   moves about two pixels for every one the camera moves, which on a pan is the
   difference between a camera and a carousel.
*/
html.is-tracking .c-detail {
    height: calc(var(--frames) * 38vh);
    padding-bottom: 0;
}

html.is-tracking .c-detail__head {
    position: relative;
    z-index: 3;
}

html.is-tracking .c-detail__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: grid;
    align-content: center;
    overflow: clip;
}

html.is-tracking .c-detail__track {
    display: flex;
    max-width: none;
    padding-inline: var(--gutter) 0;
    gap: clamp(1rem, 2.4vw, 2.5rem);
    will-change: transform;
}

/*
   THE FRAME IS SIZED FROM THE WINDOW'S HEIGHT AND NOT ITS WIDTH, which is the
   opposite of everything else on this page and is right for the one component
   whose stage is a viewport it does not fill horizontally. A frame measured in
   vw gets SHORTER as the window gets wider: on a 1920 desktop a 23vw 3:4 plate
   stands 590px tall in a 1080px stage, and the section reads as a strip of
   thumbnails with a lot of black over it. Measured against the height it fills
   the stage at every aspect, and the width is what the pan is for.
*/
html.is-tracking .c-detail__frame {
    flex: 0 0 auto;
    inline-size: clamp(13rem, calc(min(60vh, 34rem) * 0.75), 26rem);
}


/* ===========================================================================
   3. The dialogue
   ---------------------------------------------------------------------------
   Four ideas, one room behind them, and the room changes to the one the reader
   is on. The names and the lines never move; only the picture does. A members'
   club that animates its own values is a members' club advertising them.

   AGAIN THE DEFAULT IS A GRID AND IT IS COMPLETE: four captioned pictures,
   each with its name and its line under it, in content order. club.js adds
   html.is-dialogue when it takes the stage.

   THE STACKING IS THE ONLY CLEVER THING IN THIS FILE AND IT IS WORTH READING.
   In stage mode the four pictures are lifted out of the flow to fill the
   viewport, and the type has to stand over them with the scrim in between:

       .c-dialogue__img     absolute, z-index 0 (1 while it is arriving)
       .c-dialogue__scrim   absolute, z-index 5
       the three type lines             z-index 6

   The type's z-index is set on the LEAVES and on nothing above them, because
   any ancestor of a picture that takes a z-index becomes a stacking context
   and carries that picture up with it — the type would win and the photograph
   would be printed on top of the scrim meant to hold it down. The leaves are
   grid items of .c-dialogue__item, and z-index applies to a grid item without
   position: relative, which is what lets .c-dialogue__item, .c-dialogue__list
   and .c-dialogue__inner all stay static and out of the way. The containing
   block for both absolute layers is .c-dialogue__stage, which is positioned
   because it is sticky.
   =========================================================================== */

.c-dialogue {
    padding-block: var(--scene);
    background-color: var(--ground);
}

.c-dialogue__stage {
    position: relative;
}

.c-dialogue__scrim {
    display: none;
}

.c-dialogue__inner {
    display: grid;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.c-dialogue__head {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.c-dialogue__index {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: 0.9rem;
}

.c-dialogue__eyebrow {
    margin: 0 0 1.1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.c-dialogue__title {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-weight: 400;
    font-synthesis-weight: none;
    letter-spacing: -0.012em;
    line-height: 1.06;
    text-wrap: balance;
    font-size: clamp(2.1rem, 5.4vw, 4.4rem);
}

.c-dialogue__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.25rem, 4.5vw, 3.75rem) var(--grid-gap);
}

.c-dialogue__item {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.c-dialogue__n {
    margin: 0.9rem 0 0;
    font-size: 0.6875rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-ink);
    font-variant-numeric: tabular-nums;
}

.c-dialogue__mark {
    margin-left: 0.9rem;
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
}

.c-dialogue__label {
    margin: 0;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-weight: 400;
    font-synthesis-weight: none;
    letter-spacing: -0.012em;
    line-height: 1.08;
    color: var(--ink);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.c-dialogue__note {
    margin: 0;
    max-width: 36ch;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--ink-muted);
}


/* -- the stage ------------------------------------------------------------ */

html.is-dialogue .c-dialogue {
    height: calc((var(--items) + 1) * 78vh);
    padding-block: 0;
}

html.is-dialogue .c-dialogue__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: grid;
    align-content: center;
    overflow: clip;
}

/*
   THREE LAYERS AND THE NUMBERS ARE NOT ADJACENT ON PURPOSE. The pictures live
   at 0 and are lifted to 1 by club.js while one fades in over the last — see
   §2 of that file — so the scrim cannot be 1 as well: two elements at the same
   z-index in the same stacking context are ordered by the DOM, the pictures
   come after the scrim, and the arriving room would print itself over the very
   thing that is holding it down. The scrim is 5, the type is 6, and the two
   values the pictures use are the only ones near the floor.
*/
html.is-dialogue .c-dialogue__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    block-size: 100%;
    aspect-ratio: auto;
    opacity: 0;
    will-change: opacity;
}

/*
   A GRID ITEM WITH AUTO INLINE MARGINS IS NOT STRETCHED, it is shrunk to fit
   and centred: auto margins absorb the free space before alignment gets a look
   at it. .c-dialogue__inner carries margin-inline: auto for the block layout it
   has everywhere else, and the moment the stage became a grid that margin
   collapsed the whole column of type to the width of its longest line and
   parked it in the middle of the window. One declaration puts it back: with a
   definite width there is no free space left for the margins to take, and the
   shell and its gutter measure from the window as they do on every other
   section of the site.
*/
html.is-dialogue .c-dialogue__inner {
    inline-size: 100%;
}

/*
   The first room is painted. If club.js sets the class and then throws before
   it reaches the pictures, the reader is looking at a room rather than at a
   black rectangle — the same guarantee estate.css makes for the walk.
*/
html.is-dialogue .c-dialogue__item:first-child .c-dialogue__img {
    opacity: 1;
}

html.is-dialogue .c-dialogue__scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background-image:
        linear-gradient(to right,
            var(--ground) 0%,
            color-mix(in srgb, var(--ground) 95%, transparent) 40%,
            color-mix(in srgb, var(--ground) 66%, transparent) 68%,
            color-mix(in srgb, var(--ground) 20%, transparent) 95%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--ground) 66%, transparent),
            transparent 30%);
}

html.is-dialogue .c-dialogue__head {
    z-index: 6;
    margin-bottom: clamp(1.75rem, 4vh, 3.25rem);
}

html.is-dialogue .c-dialogue__title {
    font-size: clamp(1.75rem, 3.6vw, 3rem);
}

/*
   THE TYPE KEEPS TO THE LEFT THIRD and the scrim above is opaque under it.
   The four pictures are a room the reader is standing in rather than a slide
   they are reading off, so the composition is a column of names with the room
   open to the right of them — and the only way cream type is legible over a
   lit chandelier is for the chandelier not to be behind it.
*/
html.is-dialogue .c-dialogue__list {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.4rem, 3.4vh, 2.6rem);
    max-width: 34rem;
}

html.is-dialogue .c-dialogue__title,
html.is-dialogue .c-dialogue__eyebrow {
    max-width: 16ch;
}

html.is-dialogue .c-dialogue__item {
    gap: 0.4rem;
}

html.is-dialogue .c-dialogue__label {
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

/*
   ONE LINE AT A TIME, AND IT IS THE SAME CONTRACT THE WALK'S LEGEND MAKES.
   All four names stay on the screen; only the line under the name the reader
   is on is printed, because four of them stacked over a photograph is a
   paragraph pretending to be a list and the picture disappears behind it.
   Nothing is lost — scrolling reaches every one, and the grid this becomes
   without JavaScript prints all four at once.

   THE FIRST ITEM CARRIES .is-current IN THE MARKUP (see film-dialogue.php), so
   this rule is complete before a line of script has run and there is no state
   in which the stage shows four names and no line.
*/
html.is-dialogue .c-dialogue__note {
    display: none;
}

html.is-dialogue .c-dialogue__item.is-current .c-dialogue__note {
    display: block;
}

html.is-dialogue .c-dialogue__n,
html.is-dialogue .c-dialogue__label,
html.is-dialogue .c-dialogue__note {
    z-index: 6;
    transition: color var(--calm) var(--ease);
}

/*
   THE NUMBER AND ITS LABEL COME UP ONE STEP ON THE STAGE, and it is a measured
   change rather than a taste one: --ink-faint is the right grey for a caption
   sitting on the page's own ground, and it measured 4.04:1 against the
   brightest fifth of club/dialogue-capital in a 390px window — under AA, on
   the one line whose whole job is to say the picture is a visualisation. On
   --ink-muted the same measurement is comfortably over. The emphasis the faint
   grey was carrying is carried by the gold rule instead, which is what it was
   for.
*/
html.is-dialogue .c-dialogue__n {
    margin: 0;
    color: var(--ink-muted);
}

html.is-dialogue .c-dialogue__mark {
    color: var(--ink-muted);
}

/*
   The rule beside the number is the one thing that moves, and it is the same
   gesture the navigation makes under the page a reader is standing on: a gold
   hairline held, rather than a new colour, a weight or a box.
*/
html.is-dialogue .c-dialogue__n::before {
    content: "";
    display: inline-block;
    inline-size: 2.6rem;
    block-size: 1px;
    margin-inline-end: 1rem;
    vertical-align: middle;
    background-color: currentColor;
    transform: scaleX(0.3);
    transform-origin: left center;
    transition: transform var(--slow) var(--ease);
}

html.is-dialogue .c-dialogue__label {
    color: var(--ink-muted);
}

html.is-dialogue .c-dialogue__note {
    color: var(--ink-faint);
}

html.is-dialogue .c-dialogue__item.is-current .c-dialogue__n {
    color: var(--gold-bright);
}

html.is-dialogue .c-dialogue__item.is-current .c-dialogue__n::before {
    transform: scaleX(1);
}

html.is-dialogue .c-dialogue__item.is-current .c-dialogue__label {
    color: var(--ink);
}

html.is-dialogue .c-dialogue__item.is-current .c-dialogue__note {
    color: var(--ink-muted);
}


/* ===========================================================================
   4. Motion
   ---------------------------------------------------------------------------
   The same rule home.css §13 and estate.css §4 hold: an element is hidden only
   by the script that has taken responsibility for showing it, and only once
   that script is running. Under prefers-reduced-motion head.php fetches no
   library at all, so neither class below is ever set, both sections stay
   galleries, and every rule that could hide anything matches nothing.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .c-detail__track,
    .c-detail__frame,
    .c-dialogue__img,
    .c-dialogue__item {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ===========================================================================
   5. Narrow — the real mobile pass
   ---------------------------------------------------------------------------
   THE TRACK STAYS A GRID ON A PHONE, AND THAT IS THE DECISION RATHER THAN THE
   FALLBACK. A horizontal pan driven by vertical scroll is a good camera move on
   a landscape screen and a bad one on a portrait screen: at 390px a frame that
   fills the width leaves the pan nothing to reveal, and one that does not is a
   detail photograph printed at 140px. So club.js does not take the stage below
   900px at all — see §2 of club.js — and the six frames are two columns of
   captioned figures, which is the vertical form of the same story.

   THE DIALOGUE DOES take the stage on a phone, because stacking four names
   over one photograph is a portrait composition to begin with. What it loses
   is the pointer: §4 of club.js binds nothing on a coarse pointer, and scroll
   is the only thing that moves it.

   THE HEADINGS COME DOWN ONE STEP each, because a 4.4rem display line over a
   two-column grid of 3:4 frames is a heading with more presence than the
   section under it.
   =========================================================================== */

@media (max-width: 899px) {
    .c-detail__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-detail__cap {
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
    }

    .c-dialogue__list {
        grid-template-columns: minmax(0, 1fr);
    }

    html.is-dialogue .c-dialogue {
        height: calc((var(--items) + 1) * 62vh);
    }

    /*
       THE SCRIM TURNS THROUGH NINETY DEGREES ON A PHONE and it never runs out.
       On a landscape window the type keeps to the left third and the room is
       open beside it; in a portrait window there is no beside — the four names
       stand ON the photograph from top to bottom, so the gradient runs up the
       frame instead of across it and its lightest stop is still better than
       half opaque. Everything below 619px is measured against
       club/dialogue-capital, which is the one picture here lit like a
       ballroom.
    */
    html.is-dialogue .c-dialogue__scrim {
        background-image:
            linear-gradient(to top,
                color-mix(in srgb, var(--ground) 97%, transparent) 0%,
                color-mix(in srgb, var(--ground) 90%, transparent) 38%,
                color-mix(in srgb, var(--ground) 76%, transparent) 68%,
                color-mix(in srgb, var(--ground) 60%, transparent) 100%);
    }

    html.is-dialogue .c-dialogue__n::before {
        inline-size: 1.6rem;
        margin-inline-end: 0.7rem;
    }

    html.is-dialogue .c-dialogue__note {
        font-size: 0.8125rem;
    }
}

@media (max-width: 619px) {
    .c-detail__title,
    .c-dialogue__title {
        font-size: clamp(1.9rem, 8.2vw, 2.6rem);
    }
}

/*
   The two stages are measured in svh above so an address bar sliding away does
   not resize them mid-scroll. Where svh is not understood the vh fallback
   beside it applies and the only cost is that resize.
*/
@supports not (height: 100svh) {
    html.is-tracking .c-detail__stage,
    html.is-dialogue .c-dialogue__stage {
        height: 100vh;
    }
}