/* ==========================================================================
   pages.css — per-page blocks
   ========================================================================== */

/* ==========================================================================
   Landing page
   ========================================================================== */

/* The logo PNG is 1920x1080 with the artwork inset in transparent padding, so
   its box ends about 17% below the visible mark and .hero-lockup__logo lifts it
   a further 5.51%. Both are dead space, so pull this block back up through it.
   A percentage margin resolves against the container width, which is also what
   sizes the logo, so the correction tracks the gap at every width. */
.hero-support {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: -6%;
}

/* --- Intro card ---------------------------------------------------------- */

.intro-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    /* stretch, not center: the copy sets the row height and the picture is
       then free to fill it. Centring left the image at its own height with
       gaps above and below. */
    align-items: stretch;
    padding: 22px;
    border-radius: var(--radius-lg);
}

/* The picture is taken out of flow inside this cell so it can never push the
   row taller than the copy: the text alone sets the height and the media box
   stretches to match it. Left in flow, a portrait image grew the whole card
   to its own intrinsic height instead. */
.intro-card__media {
    
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.intro-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intro-card__body {
    padding-right: 8px;
}

.intro-card__body p {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: white;
    font-size: 16px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Nominee grid: 4 / 4 / 4 / 3, last row centred ----------------------- */

.nominee-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.nominee-grid__item {
    flex: 0 0 calc((100% - 3 * 22px) / 4);
    max-width: calc((100% - 3 * 22px) / 4);
}

.nominee-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 26px rgba(80, 30, 70, 0.22);
}

.nominee-tile__img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.nominee-tile:hover .nominee-tile__img {
    transform: scale(1.1);
}

.nominee-tile__caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 14px 12px;
    background: linear-gradient(0deg, rgba(90, 18, 45, 0.9) 0%, rgba(90, 18, 45, 0) 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.nominee-tile__caption span {
    font-size: 20px; /* Adjust to your desired size */
}

.nominee-tile:hover .nominee-tile__caption {
    opacity: 1;
}

.nominee-tile__name {
    font-size: 0.78rem;
    font-weight: 700;
}


/* --- Carousel ------------------------------------------------------------
   Frame geometry is taken from the approved 817x456 artboard: a burgundy-to-
   white gradient panel at 70% opacity, a white-outlined photo on the left and
   the quote column on the right. Every measurement below is written as
   "artboard px x --frame", so the whole frame scales as one piece whenever
   --slide-w changes.
   ------------------------------------------------------------------------ */

.carousel {
    --slide-w:    817px;
    --slide-gap:  40px;
    --slide-step: calc(var(--slide-w) + var(--slide-gap));
    --frame:      calc(var(--slide-w) / 817);   /* artboard px -> slide px */

    position: relative;
    padding-block: 40px;
    background: linear-gradient(180deg, rgba(179, 59, 92, 0) 0%, rgba(179, 59, 92, 0.55) 50%, rgba(179, 59, 92, 0) 100%);
}

.carousel__viewport {
    /* overflow: hidden is here to hide the slides either side, but it clips on
       both axes, and it clips at the PADDING box -- so with no padding it cut
       the card's glow off flat along the top and bottom edges. The padding
       opens the clip box far enough for the widest shadow (a 56px blur reaches
       about half that beyond the card), and the matching negative margin hands
       the space back to the layout so the band keeps its original height. */
    overflow: hidden;
    padding-block: calc(44 * var(--frame));
    margin-block: calc(-44 * var(--frame));
}

.carousel__track {
    display: flex;
    /* Not the default stretch: a slide is only as tall as its own quote, and
       stretching pinned every card to the tallest one in the set, leaving the
       shorter ones hanging from the top of the row. Centred, every frame sits
       on the same middle axis whatever its height, which is also the axis the
       arrows are placed on. */
    align-items: center;
    gap: var(--slide-gap);
    padding-left: calc(50% - (var(--slide-w) / 2));
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel__slide {
    flex: 0 0 var(--slide-w);
    opacity: 0.3;
    transform: scale(0.92);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.carousel__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--maroon);
    font-size: 1.3rem;
    line-height: 1;
    transition: background 0.2s ease;
}

.carousel__arrow:hover {
    background: #fff;
}

.carousel__arrow--prev { left: calc(50% - (var(--slide-w) / 2) - 62px); }
.carousel__arrow--next { right: calc(50% - (var(--slide-w) / 2) - 62px); }

/* Slide frame: 50 | photo 298 | 41 | text 358 | 70 across 817. */
.quote-card {
    display: grid;
    grid-template-columns: calc(298 * var(--frame)) 1fr;
    gap: calc(41 * var(--frame));
    align-items: center;
    /* The artboard height is a floor, not a cap: a longer quote grows the panel
       rather than spilling text past the rounded edge. */
    min-height: calc(456 * var(--frame));
    padding: calc(40 * var(--frame)) calc(70 * var(--frame))
             calc(40 * var(--frame)) calc(50 * var(--frame));
    border-radius: calc(50 * var(--frame));
    background: linear-gradient(180deg, rgba(150, 20, 45, 0.9) 0%, rgba(255, 255, 255, 0.85) 100%);
    /* Two stacked shadows: a tight halo hugging the rounded edge and a wider,
       fainter bloom behind it, so the whole panel reads as lit rather than
       outlined. Both scale with --frame, and because the glow belongs to the
       slide it dims with the inactive slides' opacity instead of hanging on
       at full strength either side of the active one. */
    box-shadow: 0 0 calc(20 * var(--frame)) rgba(255, 255, 255, 0.75),
                0 0 calc(56 * var(--frame)) rgba(255, 255, 255, 0.35);
}

.quote-card__photo {
    width: 100%;
    aspect-ratio: 300 / 300;
    border: calc(5 * var(--frame)) solid var(--ink);
    border-radius: calc(20.5 * var(--frame));
    /* The cut-outs are trimmed to the figure, so containing scales each one as
       large as it fits with nothing cropped; anchoring to the bottom sits the
       shoulders on the frame's lower edge. The top inset is a tenth of the
       frame's 255px height, so no head ever runs into the upper edge. */
    /*padding-top: calc(10 * var(--frame));*/
    object-fit: cover;
    object-position: bottom center;
}

.quote-card .body-copy {
    font-size: calc(14 * var(--frame));
    line-height: calc(24 * var(--frame));
    color: var(--ink);
    text-align: left;
}

.quote-card__name {
    margin: calc(28 * var(--frame)) 0 0;
    font-size: calc(16 * var(--frame));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: #f8f6ff;
}

.quote-card__role {
    margin: calc(2 * var(--frame)) 0 0;
    font-size: calc(12 * var(--frame));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: #f8f6ff;
}

/* --- Previous editions --------------------------------------------------- */

/* Each edition is a collapsed band showing only its number. Hovering it grows
   the band and fades in that year's banner behind the number and full title. */
.edition-list {
    --edition-h:      86px;
    --edition-h-open: 200px;

    display: flex;
    flex-direction: column;
    width: 100%;
}

.edition-list__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--edition-h);
    overflow: hidden;
    transition: height 0.35s ease, background 0.25s ease;
}

.edition-list__link:hover,
.edition-list__link:focus-visible {
    height: var(--edition-h-open);
    background: rgba(255, 255, 255, 0.06);
}

/* Banner layer — the image fills the band, with a scrim to keep text legible. */
.edition-list__art {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.edition-list__art > * {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

.edition-list__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15));
}

.edition-list__link:hover .edition-list__art,
.edition-list__link:focus-visible .edition-list__art {
    opacity: 1;
}

.edition-list__number {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1.05;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55);
    transition: color 0.25s ease, -webkit-text-stroke-color 0.25s ease;
}

.edition-list__link:hover .edition-list__number,
.edition-list__link:focus-visible .edition-list__number {
    color: var(--ink);
    -webkit-text-stroke-color: var(--ink);
}

/* Sits just right of the centred number, so revealing it shifts nothing. */
.edition-list__label {
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: 80px;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.3s ease, transform 0.35s ease;
}

.edition-list__link:hover .edition-list__label,
.edition-list__link:focus-visible .edition-list__label {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Projects page
   ========================================================================== */

.filter-bar {
    display: flex;
    max-width: 740px;
    margin: 0 auto 46px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--glass-line);
}

.filter-bar__btn {
    flex: 1;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background 0.22s ease;
}

.filter-bar__btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.filter-bar__btn.is-active {
    background: var(--maroon);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* Card geometry follows the reference frame: 596x286, 35px corners, hairline
   white edge. Everything inside is absolutely placed over the thumbnail. */
.project-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 596 / 286;
    border-radius: 35px;
    border: 1px solid var(--ink);
    box-shadow: 0 14px 34px rgba(80, 30, 70, 0.24);
}

.project-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Resting state: light washes down from the top edge. It clears on hover so
   the thumbnail reads at full strength behind the detail panel. */
.project-card__sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.6) 9%,
        rgba(153, 153, 153, 0) 68%
    );
    transition: opacity 0.3s ease;
}

.project-card:hover .project-card__sheen,
.project-card:focus-visible .project-card__sheen {
    opacity: 0;
}

/* Frosted detail panel over the left half, revealed on hover. */
.project-card__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: 48.15%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Bottom and left are the generous pair: the content is bottom-aligned, and
       the card's 35px corner radius curves through exactly that corner, so the
       text needs clearance from the arc as well as from the edges. */
    padding: 26px 20px 25px 30px;
    background: rgba(224, 219, 255, 0.68);
    backdrop-filter: blur(2.4px);
    -webkit-backdrop-filter: blur(2.4px);
    color: #2c0c55;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.project-card:hover .project-card__panel,
.project-card:focus-visible .project-card__panel {
    opacity: 1;
    transform: none;
}

.project-card__number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.project-card__student {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.project-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.14;
}

.filter-empty {
    margin-top: 40px;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- Vote panel ---------------------------------------------------------- */

.vote-panel {
    max-width: 720px;
    margin: 90px auto 0;
    padding: 42px 48px;
    text-align: center;
    border-radius: var(--radius-lg);
}

.vote-panel__title {
    font-size: 3.25rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vote-panel__copy {
    max-width: 540px;
    margin: 14px auto 26px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.vote-panel__actions {
    display: flex;
    justify-content: center;
    gap: 18px;
}

/* --- QR modal ------------------------------------------------------------ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(48, 8, 26, 0.68);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.modal[hidden] {
    display: none;
}

.modal__dialog {
    position: relative;
    width: min(380px, 100%);
    padding: 34px;
    text-align: center;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
}

.modal__title {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.modal__qr {
    width: 220px;
    height: 220px;
    margin: 22px auto 0;
    border-radius: var(--radius-sm);
    background: #fff;
    object-fit: contain;
}

.modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink);
}

/* ==========================================================================
   Published books — the row at the foot of the landing page, plus the
   lightbox its covers open.
   ========================================================================== */

/* One box shape for every cover, in the row and in the lightbox alike. The two
   live in separate subtrees — the lightbox sits beside the section, not inside
   it — so the token is declared on both. */
.book-row,
.book-modal {
    --book-ratio: 15 / 8;
}

.book-row {
    /* Five across on the desktop layout, one column per book, so the covers
       stay evenly spaced whatever their individual proportions are. The
       breakpoints below step the count down. */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 46px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.book-tile {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.book-tile__img {
    /* The five covers were exported at ratios between 1.67 and 2.06, so left to
       their own proportions they render at visibly different heights. Every one
       gets the same box instead, with the artwork fitted inside it: same size
       for all, and nothing cropped — these are full-bleed spreads whose titles
       run right to the edge. 15/8 is the mean of the five, which keeps the
       letterboxing to about 10% on the most extreme cover.

       The shadow is a drop-shadow rather than a box-shadow so it traces the
       artwork itself; a box-shadow would outline the padded box and hang in the
       air beside the narrower covers. */
    display: block;
    width: 100%;
    aspect-ratio: var(--book-ratio);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.3));
}

.book-tile:hover,
.book-tile:focus-visible {
    transform: translateY(-6px) scale(1.03);
    filter: brightness(1.06);
}

/* --- Lightbox ----------------------------------------------------------
   Reuses .modal for the darkened, blurred backdrop; only the dialog differs,
   since a book spread wants the width rather than the glass card. */

.book-modal__dialog {
    /* The supplied covers are 400px wide, so the dialog stops well short of a
       full-bleed blow-up — past roughly 2x they only get softer. */
    position: relative;
    width: min(780px, 100%);
}

.book-modal__stage {
    display: grid;
    place-items: center;
}

.book-modal__img {
    /* width, not max-width: the covers are smaller than the dialog, and without
       this they would open at their intrinsic size and barely look enlarged.
       The same box ratio as the row, so every book opens at an identical size
       and the popup never resizes as you move between them. */
    display: block;
    width: 100%;
    aspect-ratio: var(--book-ratio);
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
}

.book-modal__close {
    /* Clear of the artwork, which runs the full width of the dialog. */
    top: -42px;
    right: 0;
    font-size: 2rem;
    background: none;
    border: 0;
    cursor: pointer;
}

/* ==========================================================================
   Project detail page ("data diri dan karya")
   ========================================================================== */

.project-detail {
    padding-bottom: 40px;
}

.detail-section {
    padding-block: 46px;
}

/* --- Walkthrough animation ----------------------------------------------
   Closes the page under the five layout boards. The frame is a fixed 16/9
   box, so it holds the player's shape before the embed loads instead of
   collapsing and then pushing the footer down. */

.walkthrough {
    padding-bottom: 0;
}

.walkthrough__head {
    margin-bottom: 44px;
}

.walkthrough__frame {
    position: relative;
    /* Narrower than the layout boards above it: the player is inset from the
       container edges so the section reads as a closing note rather than
       another full-bleed board. */
    max-width: 72%;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    /* Sits behind the player while it loads, and behind the letterboxing of
       any clip that is not exactly 16/9. */
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.walkthrough__frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Not-found state */
.not-found {
    padding-block: 140px;
    text-align: center;
}

.not-found__title {
    font-size: 2.4rem;
    text-transform: uppercase;
}

.not-found__copy {
    margin: 14px 0 28px;
    color: var(--ink-soft);
}

/* ==========================================================================
   Foreword page
   ========================================================================== */

.foreword-row {
    display: grid;
    gap: 26px 40px;
    align-items: center;
    margin-bottom: 64px;
}

.foreword-row--right {
    grid-template-columns: 1fr 360px;
}

.foreword-row--left {
    grid-template-columns: 360px 1fr;
}

.foreword-row--center {
    grid-template-columns: 1fr;
    text-align: center;
}

.foreword-row__portrait {
    position: relative;
    display: grid;
    place-items: center;
}

.foreword-row__portrait::before {
    content: '';
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
}

.foreword-row__img {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 0%;
    object-fit: contain;
}

.about-row__img {
    position: relative;
    width: 150%;
    height: 150%;
    border-radius: 0%;
    object-fit: contain;
}

.foreword-row__name {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #2c0c55;
}

.foreword-row__role {
    margin-top: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6357a8;
}

.foreword-row--right .foreword-row__heading { text-align: right; }
.foreword-row--left  .foreword-row__heading { text-align: left; }

.foreword-row__source {
    margin-top: 18px;
    font-size: 20px;
    font-family: 'Poppins' sans-serif;
    font-style: italic;
    font-weight: bold;
    color: #6357a8;
}

.foreword-row--right .foreword-row__source { text-align: right; }
.foreword-row--left  .foreword-row__source { text-align: left; }

/* The same 100px gutter and 1400px ceiling as the other pages; only the
   padding differs, 30px rather than 32px, so 130px from the viewport edge to
   the text. The ceiling only takes over past a 1600px viewport. */
.page-foreword .container {
    max-width: min(1400px, calc(100% - 200px));
    padding-inline: 30px;
}

/* The page title. .reflect sets every section heading site-wide, so this is
   scoped to the foreword h1 rather than widened globally. The reflected clone
   is offset in em, so it tracks the new size on its own. */
.page-foreword .section__head .reflect {
    font-size: clamp(3.4rem, 7vw, 5.8rem);
}

/* The reflection is absolutely positioned, so it adds no height and hangs
   into whatever gap follows. At this size it reaches ~75px below the title
   and was landing 7px inside the first row, so the gap grows to clear it. */
.page-foreword .section__head {
    margin-bottom: 120px;
}

/* .body-copy-left / -right share their size and colour with .body-copy in
   base.css, which index.php and about.php also use, so both are scoped to
   this page rather than pushed into the shared rule. */
.page-foreword .body-copy-left,
.page-foreword .body-copy-right {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Poppins' sans-serif;
    color: #2c0c55;
}

/* Rows flagged tone: light in data/people.php -- their backdrop is dark
   enough that the #2c0c55 above disappears into it. Role and statement only;
   the name keeps the dark colour. The .page-foreword prefix puts this a
   notch above the rule it overrides, so order in the file cannot flip it. */
.page-foreword .foreword-row--light .foreword-row__role,
.page-foreword .foreword-row--light .body-copy-left,
.page-foreword .foreword-row--light .body-copy-right {
    font-size: 20px;
    font-family: 'Poppins' sans-serif;
    font-weight: 500;
    color: #e0dbff;
}

.foreword-row__text {
    grid-column: 1 / -1;
    margin-top: 6px;
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-saa{
    padding-left: 90px;
}

/* The statement row on about.php reuses the foreword-row markup. Those rules
   are unscoped, but the type rules that go with them sit under .page-foreword,
   so the same values are repeated here against the section's own class. */

/* This section only: a tenth of the viewport clear on each side, in place of
   the shared --gutter the other about sections use. */
.about-foreword .container {
    padding-inline: 10%;
}

/* Closes the gap to the jurors section below: the row's own 64px tail and
   this section's 90px bottom padding both go, leaving that section's 90px
   top padding as the whole separation. */
.about-foreword {
    padding-bottom: 0;
}

.about-foreword .foreword-row {
    margin-bottom: 0;
}

.about-foreword .section__head .reflect {
    font-size: clamp(3.4rem, 7vw, 5.8rem);
}

.about-foreword .section__head {
    margin-bottom: 120px;
}

.about-foreword .body-copy-left {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Poppins' sans-serif;
    color: #2c0c55;
    text-align: center;
}

/* ==========================================================================
   Judging Day / Awarding Day shells
   ========================================================================== */

.page-shell {
    min-height: calc(100vh - var(--nav-h));
    padding-block: 90px;
}

.page-shell__head {
    text-align: center;
    margin-bottom: 60px;
}

/* Judging and Awarding are single-screen pages: the shell stretches so the
   body — and with it the .bg-layers artwork, which body is the containing
   block for — is never shorter than the viewport. min-height, not height, so a
   short phone still scrolls rather than clipping the headline. dvh follows the
   mobile browser chrome as it hides; the vh line above is the fallback. */
.page-judging,
.page-awarding {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.page-judging .site-main,
.page-awarding .site-main {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* The shell takes whatever the nav and footer leave and centres the headline in
   it, so the padding is breathing room rather than the thing setting the
   height. It gives way on short screens instead of pushing the footer off. */
.page-judging .page-shell,
.page-awarding .page-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    padding-block: clamp(24px, 5vh, 90px);
}

.page-judging .page-shell > .container,
.page-awarding .page-shell > .container {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

/* COMING SOON sits centred in whatever is left below the title, rather than
   hanging off it by a fixed offset. */
.page-judging .page-shell__content,
.page-awarding .page-shell__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-judging .coming-soon,
.page-awarding .coming-soon {
    padding-top: 0;
}

.coming-soon {
    font-family: 'Poppins' sans-serif;
    font-weight: bold;
    font-size: 5rem;
    color: white;
    vertical-align: middle;
    padding-top: 5rem;
    text-align: center;
}

.logo-plakat{
    width: 100%;
    object-fit: contain;
    
}

/* ==========================================================================
   Responsive — per-page blocks
   --------------------------------------------------------------------------
   Same three steps as css/base.css: 1024 / 860 / 480. The 860px step is where
   multi-column blocks become single-column and hover-only reveals are made
   permanent, since that is the width the drawer nav appears at and, in
   practice, where a touch screen starts.
   ========================================================================== */

@media (max-width: 1024px) {
    .book-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px 28px;
    }

    .carousel {
        --slide-w: min(700px, 88vw);
    }

    .intro-card {
        grid-template-columns: 240px 1fr;
    }

    .edition-list {
        --edition-h:      70px;
        --edition-h-open: 150px;
    }

    .edition-list__number {
        font-size: 3.4rem;
    }

    .edition-list__label {
        margin-left: 60px;
        font-size: 1.6rem;
    }

    .vote-panel {
        margin-top: 64px;
        padding: 34px 32px;
    }

    .foreword-row--right { grid-template-columns: 1fr 260px; }
    .foreword-row--left  { grid-template-columns: 260px 1fr; }

    .foreword-row__img              { width: 220px; height: 220px; }
    .about-row__img              { width: 220px; height: 220px; }
    .foreword-row__portrait::before { width: 240px; height: 240px; }

    .page-foreword .container {
        max-width: 100%;
    }

    .about-saa {
        padding-left: 0;
    }
}

@media (max-width: 860px) {

    /* --- Intro card ------------------------------------------------------
       Stacked, the media cell has no column to take its height from, and the
       absolutely-positioned image inside it gives it none either, so it needs
       an explicit ratio to open up. */
    .intro-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 16px;
    }

    .intro-card__media {
        aspect-ratio: 16 / 10;
    }

    .intro-card__body {
        padding-right: 0;
    }

    /* --- Nominees --------------------------------------------------------- */
    .nominee-grid {
        gap: 14px;
    }

    .nominee-grid__item {
        flex: 0 0 calc((100% - 14px) / 2);
        max-width: calc((100% - 14px) / 2);
    }

    .nominee-tile__caption span {
        font-size: 13px;
    }

    /* --- Carousel ---------------------------------------------------------
       The slide is sized off the viewport so the card, and everything else
       measured against --frame, shrink together. Neighbouring slides stop
       peeking out at this width, so the arrows move onto the bottom corners
       rather than sitting in gutters that no longer exist. */
    .carousel {
        --slide-w:   min(560px, calc(100vw - 2 * var(--gutter)));
        --slide-gap: 16px;

        padding-block: 24px;
    }

    .quote-card {
        /* Photo above the quote: at 300px wide, the two-column split leaves
           the text column too narrow to set. */
        grid-template-columns: 1fr;
        gap: calc(24 * var(--frame));
        justify-items: center;
        min-height: 0;
        padding: calc(36 * var(--frame));
    }

    .quote-card__photo {
        width: min(200px, 58%);
    }

    .quote-card__body {
        text-align: center;
    }

    .quote-card .body-copy {
        font-size: clamp(0.82rem, 3.1vw, 1rem);
        line-height: 1.65;
        text-align: center;
    }

    /* Stacked, the card is short enough that its gradient has run all the way
       to white behind these two lines, and the near-white they carry on the
       taller desktop card disappears into it. */
    .quote-card__name {
        font-size: clamp(0.9rem, 3.4vw, 1.05rem);
        color: #2c0c55;
    }

    .quote-card__role {
        font-size: clamp(0.72rem, 2.8vw, 0.85rem);
        color: #2c0c55;
    }

    .carousel__arrow {
        width: 40px;
        height: 40px;
    }

    /* The 62px of clear gutter the desktop arrows sit in shrinks to nothing as
       the card grows to fill the screen, so they straddle the card's edge
       instead of clearing it: half the 40px button outside, half over the
       card. Measured off the card rather than the viewport, so the two stay
       together at the widths where some gutter is still left. */
    /* max() is the floor that keeps the button on screen. --slide-w is
       measured against 100vw, which counts the scrollbar, while the 50% here
       does not; where a classic scrollbar is shown the two disagree by its
       width and the arrow would hang a few px off the left edge. */
    .carousel__arrow--prev {
        left: max(2px, calc(50% - (var(--slide-w) / 2) - 20px));
        right: auto;
    }

    .carousel__arrow--next {
        right: max(2px, calc(50% - (var(--slide-w) / 2) - 20px));
        left: auto;
    }

    /* --- Previous editions -----------------------------------------------
       The band still opens on hover here; only its proportions change. What
       replaces the hover reveal is decided by whether the device has a
       pointer at all, in the (hover: none) block at the foot of this file --
       not by width, which would take the animation away from a mouse user
       who has simply made their window narrow. */
    .edition-list {
        --edition-h:      72px;
        --edition-h-open: 150px;
    }

    .edition-list__number {
        font-size: 2.4rem;
        -webkit-text-stroke-width: 1.5px;
    }

    /* There is no room beside the number for the title on a narrow band, so
       its slot moves beneath it. Still absolute, so revealing it still shifts
       nothing, and now centred on the band rather than hung off the centre
       line -- at this width "SAA AWARDS XLIII" would otherwise run off the
       right edge. The slide-in becomes vertical to match. */
    .edition-list__label {
        left: 0;
        right: 0;
        top: calc(50% + 21px);
        margin-left: 0;
        font-size: 1.05rem;
        letter-spacing: 0.03em;
        text-align: center;
        white-space: normal;
        transform: translateY(-8px);
    }

    .edition-list__link:hover .edition-list__label,
    .edition-list__link:focus-visible .edition-list__label {
        transform: translateY(0);
    }

    /* --- Projects --------------------------------------------------------- */
    /* All four filters stay on one row. They are sized to their own labels
       rather than to four equal columns: "All" needs a third of the width
       "City Center" does, and equal columns spend that difference on padding
       the longest label cannot spare at this size. The label scales with the
       viewport so the row still fits a 320px screen without wrapping. */
    .filter-bar {
        gap: 2px;
        max-width: 100%;
        margin-bottom: 30px;
        padding: 4px;
    }

    .filter-bar__btn {
        flex: 1 1 auto;
        min-width: 0;
        /* Tight side padding on purpose: with 28 characters of uppercase to
           place across the row, every px spent here comes straight off the
           type size. The 44px tap target is held by min-height instead. */
        padding: 0.7rem 0.3rem;
        min-height: 44px;
        font-size: clamp(0.62rem, 2.95vw, 0.78rem);
        letter-spacing: 0;
        white-space: nowrap;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .project-card {
        border-radius: 20px;
    }

    /* The detail panel is the card's only label, and on a touch screen there
       is no hover to reveal it, so it is always shown. It also widens: 48% of
       a phone-width card leaves the title breaking after every word. */
    .project-card__panel {
        width: 62%;
        padding: 16px 14px 16px 18px;
        opacity: 1;
        transform: none;
    }

    .project-card__sheen {
        opacity: 0;
    }

    .project-card__number  { font-size: 1.05rem; margin-bottom: 6px; }
    .project-card__student { font-size: 0.72rem; margin-bottom: 5px; }
    .project-card__title   { font-size: 0.95rem; }

    /* --- Vote panel ------------------------------------------------------- */
    .vote-panel {
        margin-top: 44px;
        padding: 28px 20px;
    }

    .vote-panel__title {
        font-size: clamp(1.6rem, 8vw, 3rem);
    }

    .vote-panel__copy {
        margin-bottom: 20px;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
    }

    .vote-panel__actions {
        flex-direction: column;
        gap: 12px;
    }

    /* --- Modal ------------------------------------------------------------ */
    .modal {
        padding: 16px;
    }

    /* --- Published books -------------------------------------------------- */
    .book-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .book-modal__close {
        top: -38px;
    }

    .book-modal__img {
        max-height: 70vh;
    }

    .modal__dialog {
        padding: 28px 20px;
    }

    .modal__qr {
        width: min(220px, 62vw);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* --- Project detail --------------------------------------------------- */
    .detail-section {
        padding-block: 24px;
    }

    .walkthrough__head {
        margin-bottom: 28px;
    }

    .walkthrough__frame {
        /* The desktop inset would leave a phone with a postage stamp, so the
           player takes nearly the full column and only the corners soften. */
        max-width: 100%;
        border-radius: var(--radius-sm);
    }

    .not-found {
        padding-block: 80px;
    }

    .not-found__title {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
    }

    /* --- Foreword ---------------------------------------------------------
       The alternating left/right rows collapse to one centred column, so the
       portrait leads and the statement follows in reading order whichever
       side the row was aligned to. */
    .foreword-row--right,
    .foreword-row--left,
    .foreword-row--center {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 40px;
        justify-items: center;
        text-align: center;
    }

    .foreword-row--right .foreword-row__heading,
    .foreword-row--left  .foreword-row__heading {
        text-align: center;
    }

    .foreword-row--right .foreword-row__source,
    .foreword-row--left  .foreword-row__source {
        text-align: center;
        font-size: 14px;
        font-family: 'Poppins' sans-serif;
        font-weight: bold;
    }

    .foreword-row__img {
        width: min(200px, 54vw);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .about-row__img {
        width: min(200px, 54vw);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .foreword-row__portrait::before {
        width: min(220px, 60vw);
        height: min(220px, 60vw);
    }

    .foreword-row__name {
        font-size: clamp(1.1rem, 5.2vw, 1.6rem);
    }

    .foreword-row__role {
        font-size: clamp(0.8rem, 3.6vw, 1rem);
    }

    .page-foreword .body-copy-left,
    .page-foreword .body-copy-right {
        font-size: 0.95rem;
        text-align: left;
    }

    .page-foreword .container {
        padding-inline: var(--gutter);
    }

    .page-foreword .section__head .reflect {
        font-size: clamp(2rem, 9vw, 3.4rem);
    }

    .page-foreword .section__head {
        margin-bottom: 56px;
    }

    /* --- Judging / Awarding shells ---------------------------------------- */
    .page-shell {
        min-height: 0;
        padding-block: var(--section-pad);
    }

    .page-shell__head {
        margin-bottom: 36px;
    }
}

@media (max-width: 480px) {
    .book-row {
        grid-template-columns: 1fr;
    }

    .nominee-grid {
        gap: 10px;
    }

    .nominee-grid__item {
        flex: 0 0 calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }

    .edition-list {
        --edition-h:      64px;
        --edition-h-open: 132px;
    }

    .edition-list__number { font-size: 1.9rem; }

    .edition-list__label {
        top: calc(50% + 17px);
        font-size: 0.9rem;
    }

    .project-card__panel {
        width: 66%;
        padding: 12px 10px 12px 14px;
    }

    .project-card__title { font-size: 0.85rem; }
}

/* Reveals that depend on :hover, made permanent where there is no pointer to
   hover with. Kept apart from the width breakpoints because a large touch
   screen needs them just as much as a phone does. */
@media (hover: none) {
    .nominee-tile__caption {
        opacity: 1;
    }

    .nominee-tile:hover .nominee-tile__img {
        transform: none;
    }

    .project-card__panel {
        opacity: 1;
        transform: none;
    }

    .project-card__sheen {
        opacity: 0;
    }

    /* Nothing here can be hovered, so the band would never open and its
       banner and title would never be seen. It stands at its opened height
       with both already showing. */
    .edition-list {
        --edition-h: var(--edition-h-open);
    }

    .edition-list__art {
        opacity: 1;
    }

    .edition-list__number {
        color: var(--ink);
        -webkit-text-stroke-color: var(--ink);
    }

    .edition-list__label {
        opacity: 1;
        transform: none;
    }
}