/* ===================================================================
   /awards — Awards & Recognition
   -------------------------------------------------------------------
   Loaded ONLY by awards.php, after site.css, and every rule is scoped
   under .aw-page so nothing here can leak into another page.

   Built on the existing tokens in site.css (--brand, --ink, --line,
   --r-lg, --sh-md …). The only new colours are the warm plinth tints,
   which exist because all six trophies are black-and-gold cut-outs on
   transparent backgrounds: dropped straight onto white they float with
   nothing to stand on.

   Motion: this page does NOT use the site-wide AOS attributes. AOS hides
   [data-aos] elements in CSS and reveals them in JS, which on a page made
   entirely of photographs is one failed request away from a blank screen.
   Section 5 inverts that — the hidden state is added by awards.js at
   runtime — and honours prefers-reduced-motion, which aos.css does not.
   =================================================================== */

.aw-page {
    --aw-plinth-1:   #fbf8f1;   /* warm top light  */
    --aw-plinth-2:   #efe7d6;   /* warm base       */
    --aw-gold:       #86631c;   /* 5.2:1 on the panel tints — the lighter
                                   gold failed the 4.5:1 floor at label size */
}

/* ==================================================================
   1. HERO — credibility first, then the proof photograph
   ================================================================== */
.aw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

@media (max-width: 991.98px) {
    .aw-hero { grid-template-columns: 1fr; }
}

.aw-hero .lede { max-width: 60ch; }

/* Facts strip. Not a "stats" brag bar — three checkable numbers. */
.aw-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 40px);
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.aw-stat-v {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    line-height: 1.05;
    color: var(--ink);
}

.aw-stat-l {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-50);
}

/* The awards-night photograph — a real photo, so it gets a real frame. */
.aw-figure { margin: 0; }

.aw-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}

.aw-figure figcaption {
    margin-top: 14px;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--ink-50);
    max-width: 52ch;
}

/* ==================================================================
   2. JUMP NAV — six chips, sticky under the header
   ================================================================== */
.aw-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}

/* The rail WRAPS by default and only becomes a horizontal scroller on
   small screens, where six wrapped chips would eat half the viewport.
   It used to scroll at every width, which put a horizontal scroll
   surface in a sticky bar directly under the reader's cursor: a
   trackpad gesture with any sideways component moved the rail instead
   of the page. overscroll-behavior stops whatever scrolling does happen
   from chaining out to the page's .overflow-x-hidden wrapper. */
.aw-nav-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

@media (max-width: 767.98px) {
    .aw-nav-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
}

.aw-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;             /* comfortably over the 24px WCAG 2.5.8 floor */
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-70);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.aw-chip:hover { border-color: var(--brand); color: var(--brand); }

.aw-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Set by awards.js as the reader scrolls past each award. */
.aw-chip.is-current {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* Anchors must clear the sticky header AND the sticky chip rail. */
.aw-item { scroll-margin-top: calc(var(--header-h) + 72px); }

/* ==================================================================
   3. AWARD ROWS — alternating, image and text of equal weight
   ================================================================== */
.aw-list {
    display: grid;
    gap: clamp(40px, 7vw, 96px);
}

.aw-item {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(24px, 4.5vw, 64px);
    align-items: center;
}

/* Even rows flip, so the eye zig-zags down the page instead of running
   down one rail. The COLUMN WIDTHS have to flip with them — swapping
   order alone would hand the narrow 420px track to the prose and the
   wide track to the photograph. Explicit placement keeps the DOM order
   (photograph first, then text), which is the order a screen reader and
   a crawler should meet them in. */
.aw-item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
}

.aw-item:nth-child(even) .aw-shot { grid-column: 2; grid-row: 1; }
.aw-item:nth-child(even) .aw-body { grid-column: 1; grid-row: 1; }

@media (max-width: 899.98px) {
    .aw-item,
    .aw-item:nth-child(even) { grid-template-columns: 1fr; }
    .aw-item:nth-child(even) .aw-shot,
    .aw-item:nth-child(even) .aw-body { grid-column: 1; grid-row: auto; }
}

/* ---- the plinth: gives a cut-out trophy something to stand on ---- */
.aw-plinth {
    position: relative;
    display: block;
    width: 100%;
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 80% at 50% 0%, #fff 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, var(--aw-plinth-1) 0%, var(--aw-plinth-2) 100%);
    cursor: zoom-in;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22,1,.36,1),
                box-shadow .28s ease,
                border-color .2s ease;
}

.aw-plinth:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: var(--line-strong);
}

.aw-plinth:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* A slow sheen across the gold on hover — one pass, no loop. */
.aw-plinth::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        rgba(255,255,255,0) 38%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 62%);
    background-size: 250% 100%;
    background-position: 160% 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.aw-plinth:hover::after,
.aw-plinth:focus-visible::after {
    opacity: 1;
    animation: aw-sheen .9s cubic-bezier(.33,1,.68,1) forwards;
}

@keyframes aw-sheen {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
}

.aw-plinth img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    /* Grounds the cut-out — the trophies were shot on transparent. */
    filter: drop-shadow(0 18px 22px rgba(8, 8, 8, .18));
}

/* "Tap to enlarge" hint, shown only where a pointer exists. */
.aw-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(8, 8, 8, .78);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease;
}

.aw-plinth:hover .aw-zoom,
.aw-plinth:focus-visible .aw-zoom { opacity: 1; transform: none; }

@media (hover: none) {
    .aw-zoom { opacity: 1; transform: none; }
}

/* ---- the written half ---- */
.aw-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--ink-70);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aw-badge-year {
    color: var(--aw-gold);
    border-left: 1px solid var(--line-strong);
    padding-left: 8px;
}

.aw-title {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.05rem);
    line-height: 1.18;
    color: var(--ink);
    margin: 14px 0 0;
}

.aw-lead {
    margin: 10px 0 0;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.55;
    color: var(--ink-70);
    max-width: 56ch;
}

.aw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    color: var(--ink-50);
}

.aw-meta li { display: flex; gap: 6px; }
.aw-meta b { color: var(--ink); font-weight: 600; }

.aw-copy { margin: 18px 0 0; max-width: 62ch; }
.aw-copy p { margin: 0 0 12px; line-height: 1.7; color: var(--ink-70); }
.aw-copy p:last-child { margin-bottom: 0; }

/* The engraving, quoted. This is the page's evidence, so it looks like
   evidence rather than a pull-quote. */
.aw-plaque {
    margin: 20px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--aw-gold);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface-2);
}

.aw-plaque-l {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aw-gold);
}

.aw-plaque q {
    display: block;
    margin-top: 6px;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ink);
    quotes: "\201C" "\201D";
}

.aw-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 22px;
}

/* ==================================================================
   4. LIGHTBOX — native <dialog>, so focus trapping and Esc are free
   ================================================================== */
.aw-modal {
    width: min(94vw, 860px);
    max-width: 94vw;
    /* Bounded and scrollable in its own right. Without a max-height a tall
       photograph on a short window pushes the close button off-screen, and
       an open <dialog> makes the page behind it inert — so the reader ends
       up unable to scroll anything at all. */
    max-height: 92vh;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-lg);
    color: var(--ink);
}

.aw-modal::backdrop { background: rgba(8, 8, 8, .82); }

.aw-modal-media {
    padding: clamp(18px, 4vw, 36px);
    background: linear-gradient(180deg, var(--aw-plinth-1) 0%, var(--aw-plinth-2) 100%);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.aw-modal-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(62vh, 560px);
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(8, 8, 8, .18));
}

.aw-modal-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px clamp(18px, 4vw, 36px) 22px;
}

.aw-modal-foot h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
}

.aw-modal-foot p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--ink-50); }

.aw-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                  /* 44×44 touch target */
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.aw-modal-close:hover { background: var(--surface-3); border-color: var(--ink-40); }

.aw-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ==================================================================
   5. MOTION — entrance reveals, and honouring a reader who wants less
   ------------------------------------------------------------------
   The hidden state lives behind .aw-anim, a class awards.js adds to the
   page root at runtime. That ordering matters: with JS off, or if the
   script fails, [data-reveal] elements were never hidden in the first
   place and the trophies are simply there. The site-wide AOS pattern
   does the opposite — it hides in CSS and reveals in JS — which on a
   page made entirely of photographs is one failed request away from a
   blank screen.
   ================================================================== */
.aw-page.aw-anim [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
                transform .55s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.aw-page.aw-anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .aw-page.aw-anim [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .aw-page * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .aw-plinth:hover { transform: none; }
    .aw-plinth::after { display: none; }
}