/* nightfile.css — the Show view from the mock-up.
 *
 * Only loaded by nightfile.php, which nothing links to, so none of this can
 * reach the rest of the site. Everything is under .nf for the same reason.
 *
 * The mock-up was Tailwind. This is the same layout in the site's own tokens
 * rather than a second design system bolted on: --bg, --fg, --muted,
 * --border, --display and --accent are all the ones already in design2.css.
 *
 * LINK COLOURS: design2.css sets them with a four-:not() chain scoring
 * 0,4,1. Any link rule here repeats it with a class in front.
 */

.nf {
    --nf-surface: #111013;
    --nf-line: rgba(244, 240, 234, 0.12);
    --nf-kicker: 0.68rem;
}

/* ---- Hero ---- */

/* The hero is as tall as its own picture.
   It used to be a fixed-height box with the image set to cover, which
   crops -- a poster with words on it lost most of them off the sides. With
   the image IN FLOW at full width and auto height, the box takes the
   image's proportions and the whole thing is visible. min-height only
   covers the case of no poster at all. */
.nf-hero {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    margin-bottom: 1rem;
}
.nf-hero-shot {
    display: block;
    width: 100%;
    height: auto;
}
/* Heaviest at the foot, where the words are, and never fully clear at the
   top so the title never has to compete with a bright sky. */
.nf-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--bg) 0%, rgba(9, 9, 11, 0.6) 40%, rgba(9, 9, 11, 0.25) 75%, rgba(9, 9, 11, 0.45) 100%);
}
/* The words sit over the foot of the picture rather than in the flow, so
   they do not add to the hero's height now that the image decides it. */
.nf-hero-copy {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: clamp(1.5rem, 4vw, 4rem);
    max-width: 62rem;
}

.nf-kicker {
    margin: 0;
    font-family: var(--mono);
    font-size: var(--nf-kicker);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
}

.nf-hero-title {
    font-family: var(--display);
    font-weight: 400;
    /* The mock-up's hero type is enormous on purpose. Clamped so it is still
       enormous on a phone without running off the side. */
    font-size: clamp(3.5rem, 1.5rem + 11vw, 9rem);
    line-height: 0.88;
    letter-spacing: 0.02em;
    color: var(--fg);
    margin: 0.6rem 0 0;
}
.nf-hero-lede {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--fg);
    max-width: 34rem;
    margin: 1.1rem 0 0;
}
.nf-hero-meta {
    margin: 1.4rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

/* ---- A spread ---- */

.nf-spread {
    border: 1px solid var(--nf-line);
    background: var(--nf-surface);
    margin-bottom: 1rem;
    overflow: hidden;
}
.nf-empty { padding: clamp(2rem, 5vw, 4rem); color: var(--muted); }
.nf-empty p { margin: 0; }

.nf-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.2rem, 1.2rem + 4vw, 4.5rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--fg);
    margin: 0.5rem 0 0;
}

/* ---- Segment ---- */

/* Cast on the left, writing on the right, always. Two parts to three, not
   three to two: the left column was the wider of the pair and it holds the
   least, which is what made the gap look wrong. */
.nf-segment { display: grid; grid-template-columns: 2fr 3fr; }
.nf-segment .nf-words { padding: clamp(1.5rem, 3vw, 3rem); }

.nf-cast {
    position: relative;
    min-height: 24rem;
    /* The ICON wall, tiled: marked concrete with the crown stencilled on it.
       The gradient on top is not decoration -- the wall carries a logo and
       graffiti, and a dark cut-out standing on it has to read as a
       silhouette rather than get lost in the marks behind it. */
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(9, 9, 11, 0.62), rgba(9, 9, 11, 0.62)),
        url("/assets/images/textures/icon-wall-v2.jpg");
    /* The filename carries a version because an image URL has no
       cache-buster the way the stylesheet link does. Replacing a texture
       under the same name leaves every browser that has already seen it
       showing the old one. Changing the name is the whole fix.

       Sized to the COLUMN's width, not a fixed rem. The tile is portrait,
       roughly one part wide to three tall, and drawn with a single crown in
       it -- so one tile across the column and repeating down it puts one
       logo per screenful, which is what it was made for. A rem width would
       either crop the crown or tile it twice across a narrow column. */
    background-size: auto, 100% auto;
    background-repeat: repeat, repeat-y;
    background-position: center, center top;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* The segment's own picture, if it has one, behind the people rather than
   instead of them. Dimmed so the cut-outs stay the subject. */
.nf-cast-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

/* Standing on the floor of the column, centred, overlapping.
   justify-content is centre and the figures carry a negative margin, so a
   pair sit close and a crowd closes up rather than shrinking. */
/* One figure per row, stacked down the column.
   IN FLOW, not absolutely positioned. Taken out of flow it could not make
   the column any taller, so a crowded segment simply had its last people
   clipped off the bottom. In flow the grid row sizes to whichever column is
   taller, so the cast can push the spread longer when it needs to. */
.nf-cast-figures {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    /* The SAME top inset the writing column uses, so the first head starts
       level with the word SEGMENT beside it. Written as the identical clamp
       rather than a fixed value: the words column scales its padding with
       the viewport, and a fixed number here would only line up at one
       screen width. */
    padding-top: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

/* Each row takes an equal share of the column, so two people get a half
   each and six get a sixth. min-height stops a crowded segment shrinking
   anyone to a sliver; past that the column runs longer than the writing
   rather than losing anybody off the end. */
.nf-cast-row {
    position: relative;
    /* Centres the figure, so the name centred below it lands on the figure
       rather than out on the empty part of the row. */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 0;
    min-height: 12rem;
    /* CAPPED, and this is what stops the stretching. A row takes a share of
       the column, and the column is as tall as the writing -- so one person
       beside a long segment got a row hundreds of pixels tall. The figure
       is height-driven, so its width grew with it until max-width clamped
       the width while the height carried on, which is exactly how you
       stretch a picture. Capping the row caps the height, so width never
       reaches the clamp and the proportions hold. */
    max-height: 22rem;
    overflow: hidden;
}

/* A real divider between two people -- its own element in the column, not
   an overlay, so it gets genuine space rather than sitting on top of a
   name or cutting across a figure's shoulders. flex: 0 0 auto so it takes
   a fixed slice of the column instead of competing for a share the way
   the photo rows do; whatever's left still splits evenly between them.
   15px above and 15px below, so it reads as sitting fully in the gap
   between two images rather than touching either one. */
.nf-cast-divider {
    flex: 0 0 auto;
    height: 0.9rem;
    margin: 15px 4%;
    background-image: url("/assets/images/textures/cast-divider-v1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Height decides, width follows, and the box hugs the art.
   cover was tried and is wrong here: the row is about 519 by 144, so a
   tall cut-out scales two and a half times to fill it and you see the top
   tenth of a person. A stretched box with object-fit also means the name
   would sit at the bottom of the BOX rather than the bottom of the figure.
   Sizing the image to its own proportions keeps the two together. */
.nf-cast-fig {
    height: 100%;
    width: auto;
    /* A backstop only. With the row capped above, width should never reach
       this -- but if it ever did, contain letterboxes rather than distorts. */
    max-width: 100%;
    object-fit: contain;
    object-position: bottom;
    display: block;
}

/* The name lies OVER the foot of its own picture, which is what ties the
   two together -- under it, in a stack, a name reads as the caption for
   whoever is below.

   NO SCRIM. It used to carry a gradient so the name would hold over a
   shoulder or a bright shirt, but the column has a texture behind it now
   and a full-width fade across the foot of every row read as a dark band
   laid over the metal rather than as part of the picture. The legibility
   moves onto the text itself: a heavy shadow works over the figure and
   over the wall alike, and costs the background nothing. */
.nf-cast-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    text-align: center;
    padding: 0.7rem 1rem;
    font-family: var(--mono);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg);
    text-shadow: 0 2px 6px #000, 0 0 16px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9);
}

/* The whole row is the link, so the site-wide rule would colour the name
   accent red. Same four-:not() chain as everywhere else. */
a.nf-cast-row:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--fg); }
a.nf-cast-row:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover .nf-cast-name { color: var(--accent); }
/* A quiet cue that it goes somewhere, without moving anything. */
.nf-cast-row:hover .nf-cast-fig { opacity: 0.88; }

/* ---- Match ---- */

.nf-poster {
    position: relative;
    min-height: clamp(18rem, 36vw, 30rem);
    /* The room the bout happens in. A SCENE, not a tile, so it covers rather
       than repeats -- and anchored to the BOTTOM, because the band is far
       wider than the picture is and cover has to crop somewhere. Cropping
       off the ceiling keeps the floor under the fighters' feet, which is the
       part that has to be there. */
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(9, 9, 11, 0.35), rgba(9, 9, 11, 0.35)),
        url("/assets/images/textures/match-room-v1.jpg");
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center bottom;
    border-bottom: 1px solid var(--nf-line);
    /* A backstop. Nothing should reach it now, but a figure escaping into
       the writing underneath is a worse failure than one being cropped. */
    overflow: hidden;
}
.nf-poster-kicker {
    position: absolute;
    top: 1.1rem; left: 1.2rem;
    z-index: 3;
    margin: 0;
    font-family: var(--mono);
    font-size: var(--nf-kicker);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg);
}
/* A row of sides, VS between them, each name under its own figure.
   The two sides used to be halves of a grid with the figures pinned to the
   centre line and the names in the outer corners. With two people that read
   as one wide picture; with a handicap match it fell apart entirely, and
   the names ended up nowhere near the person they belonged to. A row lets
   any number of sides sit together and keeps every name under its owner. */
/* The Dominion on the line, under the bout label on the poster band. */
.nf-dominion {
    position: absolute;
    top: 2.9rem; left: 1.2rem;
    z-index: 3;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c9a227;
}
.nf-dominion img { height: 1.6rem; width: auto; display: block; }

/* Marks the side walking in with it. Sits under the name rather than beside
   it, so a long name does not push it off the row. */
.nf-defending {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: #c9a227;
}

/* Promos written for the bout, under the decision. */
.nf-promos {
    border-top: 1px solid var(--nf-line);
    padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 3rem);
}
.nf-promos ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.nf-promos li { margin-bottom: 0.5rem; line-height: 1.5; }
.nf-promo-who {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 0.5rem;
}
/* The four-:not() chain again, or design2.css colours these accent red and
   they stop reading as the quiet list they are. */
.nf-promos a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--fg); }
.nf-promos a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--accent); }

.nf-facing {
    position: absolute;
    inset: 0;
    display: flex;
    /* stretch, not flex-start. The figures are sized as a percentage of
       their column, and a percentage height needs a parent with a definite
       one -- with flex-start the sides were only as tall as their contents,
       so height:100% had nothing to resolve against and every figure fell
       back to its natural pixel size and burst out of the band. */
    align-items: stretch;
    justify-content: center;
    gap: clamp(1rem, 3vw, 3rem);
    /* NOTHING at the foot. The figures reach the bottom edge of the band and
       stand on it. Any padding here lifts them off it, and the name no
       longer needs room below because it lies over them. */
    padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 0;
}

.nf-side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 0;
    flex: 0 1 auto;
}
/* Members of ONE side stand together, tight, with no VS between them --
   that is what makes a Pact read as a pair rather than as opponents. */
/* Takes the height left over once the name has had its line, and min-height
   0 lets it actually shrink to that rather than to its contents. */
.nf-side-figs {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.nf-side-figs img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: top;
}

/* Lies OVER the foot of the figure, the same as a name in the cast column.
   Out of the flow, so it takes no height from the figure and the figure can
   run all the way to the bottom edge. Shadowed rather than plated: these
   sit over a photograph of a room and over the fighter's own art, so the
   name has to carry its own contrast wherever it lands. */
.nf-side-name {
    position: absolute;
    left: 0; right: 0; bottom: 0.5rem;
    margin: 0;
    z-index: 2;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg);
    text-shadow: 0 2px 6px #000, 0 0 16px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9);
}

/* Centred against the FIGURES, not the column: the names hang below, so
   centring on the whole column would drop the VS toward the floor. */
.nf-vs {
    align-self: center;
    margin: 0 0 2rem;
    flex: 0 0 auto;
    font-family: var(--display);
    font-size: clamp(1.8rem, 1rem + 2.5vw, 3.2rem);
    letter-spacing: 0.06em;
    color: var(--fg);
}

/* 3 parts writing to 2 parts heading, writing on the left. The rule the
   divider belongs to changes with the order: it separates the two columns,
   so it moves from the right edge of the first to the left edge of the
   second. */
.nf-match-body { display: grid; grid-template-columns: 3fr 2fr; }
.nf-match-head {
    padding: clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid var(--nf-line);
    /* The same wall, under the bout's name. Darker scrim than the segment
       column because this one has TEXT over it rather than a figure, and a
       bout name in display type over a stencilled crown needs the wall to
       stay well back. */
    background-image:
        linear-gradient(rgba(9, 9, 11, 0.74), rgba(9, 9, 11, 0.74)),
        url("/assets/images/textures/icon-wall-v2.jpg");
    background-size: auto, 100% auto;
    background-repeat: repeat, repeat-y;
    background-position: center, center top;
}
.nf-match-stip { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.nf-match-body > .nf-body { padding: clamp(1.5rem, 3vw, 3rem); }

.nf-finish {
    border-top: 1px solid var(--nf-line);
    padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 3rem);
}
/* One line, three parts: the label, who won, and how. Wraps as a unit on a
   narrow screen rather than breaking mid-name. */
.nf-finish-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    font-family: var(--display);
    font-size: clamp(1.4rem, 0.9rem + 1.8vw, 2.3rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
}
/* Same face and same size as the rest of the line -- it inherits both from
   .nf-finish-line rather than setting its own. Colour is what keeps it the
   quiet part now: the label is grey, the name is the answer. */
.nf-finish-label {
    color: var(--muted);
}
.nf-finish-who { color: var(--accent); }
.nf-finish-by { color: var(--fg); }

/* ---- The writing ---- */

/* Prose sits back, speech comes forward.
   Between --muted (#9a958c, right for a caption, too dim to read six
   paragraphs of) and --fg (#f4f0ea, which is what speech uses). The gap is
   the point: narration is the camera, dialogue is a person talking, and a
   reader should be able to tell which is which before reading a word. */
.nf-body p { font-size: 1.05rem; line-height: 1.75; color: #bab5ad; margin: 0 0 1.1rem; }
.nf-body p:last-child { margin-bottom: 0; }
.nf-body p:empty,
.nf-body p:has(> br:only-child) { height: 0.5rem; margin: 0; }

/* A spoken line: the name lifted out above the words rather than running
   into them, which is the one thing the mock-up does that show.php does not. */
.nf-line { margin: 0 0 1.4rem; }
.nf-speaker {
    display: block;
    margin-bottom: 0.3rem;
    font-family: var(--mono);
    font-size: var(--nf-kicker);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}
/* Full brightness, and a touch larger. This overrides the colour on
   .nf-body p above, which is why a spoken line stays light while the
   narration around it greys back. */
.nf-said { display: block; font-size: 1.1rem; line-height: 1.7; color: var(--fg); }

/* ---- Narrow ---- */

@media (max-width: 900px) {
    .nf-segment,
    .nf-match-body { grid-template-columns: 1fr; }
    /* One column, so the cast becomes a band above the writing. Shorter than
       it is on desktop: a full-height stage at the top of every segment would
       push the words off the screen. */
    .nf-cast { min-height: 15rem; order: 1; }
    .nf-segment .nf-words { order: 2; }
    .nf-match-head { border-right: 0; border-bottom: 1px solid var(--nf-line); }
}

/* The announced card, before the night. */
.nf-announced { padding: clamp(1.5rem, 3vw, 2.5rem); }
.nf-announced p:last-child { margin: 0.5rem 0 0; color: var(--muted); }
/* What each side carries into an announced bout, where the writing will go
   once there is any. A plain two-column list: name on the left, record on
   the right, ruled between so the eye can run down either side. */
.nf-tape {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    max-width: 28rem;
}
.nf-tape li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--nf-line);
}
.nf-tape li:last-child { border-bottom: 0; }
.nf-tape-who {
    font-family: var(--display);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--fg);
}
.nf-tape-rec {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    white-space: nowrap;
}
.nf-tape-note {
    margin: 0.9rem 0 0;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c9a227;
}
/* Admin-only way back to the old page. */
.nf-classic {
    margin: 1rem 0 0;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Booker-only. Nobody who is not previewing ever sees this, regardless of
   the show's real state. */
.nf-preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1.25rem;
    border: 1px dashed #c9a227;
    background: rgba(201, 162, 39, 0.08);
    color: #c9a227;
    font-family: var(--mono);
    font-size: 0.8rem;
}
.nf-preview-bar p { margin: 0; }
.nf-preview-bar strong { text-transform: uppercase; letter-spacing: 0.1em; }
.nf-preview-bar a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) {
    color: #c9a227; white-space: nowrap;
}