/* The awards card (13 Sep 2026) - shared by /about/ (a scrolling row, .awrow) and /press/ (a grid, .awg in press.css).
   Drawn by ../awards.js; the reasoning for every row is at the top of that file. Tokens (--head, --ink, --blue, --ease,
   --pad) come from the page's own stylesheet, which both pages define identically. */

/* ---- the card: the same rows at the same heights on every card, everything CENTRED on the card's axis ----
   Centred on both pages since 13 Sep 2026 night (Nuo: "centre align all the logos and text within each card", first for the
   home page's row, then "make the same changes to the awards section of the press page, centre align all the cards here as
   well"). Horizontal only, and deliberately: the logo slot stays a fixed height from the top of every card so the logos sit
   on one line across a row, which vertical centring would undo - the very inconsistency the morning's brief was against. */
.awt{position:relative;background:#fff;border-radius:14px;padding:20px 20px 18px;display:flex;flex-direction:column;min-height:236px;color:var(--ink);text-align:center;transition:transform .25s var(--ease,cubic-bezier(.2,.8,.2,1)),box-shadow .25s var(--ease,cubic-bezier(.2,.8,.2,1))}   /* --ease with a fallback: the home page's :root does not define it */
@media (hover:hover){.awt:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.08)}}
.awt:target{box-shadow:0 0 0 3px var(--blue)}                                                              /* on /press/: the card an About card or a venue page linked to (About cards carry no id) */
.awt .lg{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden}   /* the slot: 72px whatever is in it (56 until 13 Sep afternoon) - round marks fill it, wide badges sit centred at 56 (awards.js ROUND/HR) */
.awt .lg img,.awt .lg canvas{display:block;max-width:100%;height:auto}                                     /* the canvas is the same file cropped to its ink and drawn to one visual mass (awards.js) */
/* TWO BADGES IN ONE SLOT (15 Sep 2026): Tripadvisor's Best of the Best 2025 roundel beside the Travellers'
   Choice 2026 lock-up. The slot was already a centred flex row, so all it needs here is the gap.
   THE PAIR'S SIZE IS SET IN JS, NOT HERE (awards.js `level`): both badges share ONE height, and that height
   is whatever the slot's width allows, capped at the slot's own 72px. The first version instead capped each
   badge's WIDTH at 50% - which is not the dimension the eye compares, and let the round mark draw 72px tall
   beside a 25px lock-up (Nuo: "this looks horrible! both badges should be the same height"). The gap below
   is the GAP constant in awards.js; if one moves, so must the other. A canvas keeps `height:auto` from the
   rule above for the single-badge case, and is given an explicit height only when it is one of a pair. */
.awt .lg.two{gap:10px}
.awt .lg img{max-height:72px;width:auto}                                                                 /* the file as served, for the moment before the load handler has measured it */
.awt .lg .word{font-family:var(--head);font-weight:400;font-size:18px;letter-spacing:-0.02em;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* no file: the issuer set in type */
.awt.haslogo .lg .word{display:none}
.awt:not(.haslogo) .lg img{display:none}
.awt .y{font-family:var(--head);font-size:12px;letter-spacing:.08em;color:#3f3c39;line-height:16px;min-height:16px;margin-bottom:8px}   /* the year, one place - an empty row where the data holds none */
.awt .pz{font-size:15px;line-height:1.35;flex:1}
.awt .w{font-size:13px;color:#3f3c39;margin-top:10px}
.awt .w a{text-decoration:underline;text-underline-offset:2px}
.awt .cite{font-family:var(--head);font-size:12px;letter-spacing:.02em;color:var(--blue);margin-top:10px;display:block;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;line-height:15px;min-height:15px;padding:6px 0;margin-top:4px;margin-bottom:-6px}   /* padding 6px each way, taken back in the margins: the tap box is 27px tall (was 15, under the 24px floor - 27 of them on /press/) and the card's geometry does not move */   /* an empty .cite.none keeps the height. margin auto: a max-content block ignores text-align, so it is centred as a box. NOT .src: that is About's Sourcing section */
/* THE SITE PILLS (13 Sep 2026, Nuo: "show under the text in small pill buttons which sites they are for" - awards.js says which
   cards and why). The page's pill language at card scale: blue outline, no fill (Brand Guides V2 slide 79), hover to ink as
   .pill.blue does on the home page; 11px is the hub's floor for a name, 26px tall clears the 24px tap floor. They sit after
   the prize, which is flex:1, so across a row every card's pills share one line - the same rule as the year and the logo. */
.awt .awsites{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.awt .awpill{font-family:var(--head);font-size:11px;letter-spacing:.01em;line-height:1;padding:6px 10px;border:1.5px solid var(--blue);border-radius:999px;background:transparent;color:var(--blue);text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s}
@media (hover:hover){.awt a.awpill:hover{border-color:var(--ink);color:var(--ink)}}
.awt .w a,.awt a.cite,.awt .awpill{position:relative;z-index:1}                                            /* above the full-card link, so each keeps its own target */
.awt .hit{position:absolute;inset:0;border-radius:inherit;z-index:0}

/* ---- the row (the home page; About carried it for one day, 13 Sep 2026): two copies in one track, right to left, seamless at the join ----
   CARD WIDTH = THE PRESS PAGE'S (Nuo, 13 Sep): a fifth of the row less the gaps, three a row under 1100px and two under
   860px, as .awg breaks in press.css. The row is a size container and the card is sized in cqw, because a percentage
   inside a max-content track resolves to auto; the fixed width before it is the fallback for a browser without container
   units. Five cards plus the set's padding-right = gap is exactly one row, so the sixth starts just off the edge. */
.awrow{position:relative;overflow:hidden;margin-top:48px;padding-top:28px;border-top:1px solid rgba(0,0,0,.1);--gap:14px;--cols:5;--start:calc(var(--n,10) - 2);container-type:inline-size}
/* THE ROW WAITS FOR THE READER, THEN STARTS WITH THE FIRST AWARD IN THE MIDDLE (Nuo, 13 Sep 2026: "make sure Sunday Times
   Hundred is in the middle when first looking at that section"). Two mechanics:
   - the track is PAUSED until the page adds .moving, which index.html does when the row first scrolls into view. An
     animation running from page load is at a random phase by the time a visitor reaches the foot of the page.
   - a NEGATIVE animation-delay of --start cards (4s each) opens the loop with card --start at the left edge, so the
     data's first award sits in the middle of the cards in view: --start = n - 2 with five in view (the two cards
     before it are the tail of the copy behind), n - 1 with three, 0 with two (no middle - the first award leads).
   A paused animation with a negative delay shows that frame, so the row stands still in the right place until it moves. */
.awrow .awtrack{display:flex;width:max-content;animation:awslide calc(var(--n,10) * 4s) linear infinite;animation-delay:calc(-4s * var(--start));animation-play-state:paused;will-change:transform}
.awrow.moving .awtrack{animation-play-state:running}
@media (hover:hover){.awrow.moving:hover .awtrack,.awrow.moving:focus-within .awtrack{animation-play-state:paused}}
.awrow .awset{display:flex;gap:var(--gap);padding-right:var(--gap);flex:none;align-items:stretch}          /* padding-right = gap: the half is exact */
.awrow .awt{width:280px;width:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));flex:none}
/* THE ROW'S CARD IS BRIEF (13 Sep 2026 evening, Nuo: "delete the lower part of all the cards showing the venue names and
   links to citations, make all the cards equal height and reduce the height of the cards; centre align all the logos and
   text within each card"). awards.js draws it without .w and .cite (o.brief), so the card ends at the prize and the
   whole card is the link to /press/. Equal height was already the case - .awset stretches every card to the tallest in
   the row - and stays so; the height itself comes down by the two rows removed (place 13px + 10, citation 15px + 10:
   about 50px on the tallest card, whose four-line prize now sets the row) and by dropping the 236px floor, which would
   otherwise hold the row at its old height. The centring is the card's own rule above, on both pages; /press/ keeps all
   five rows and its floor (Nuo, same night, asked: keep both rows there, centre only). */
.awt.brief{min-height:0}
/* THE HOME ROW'S CARDS ARE TRANSPARENT (Nuo, 13 Sep 2026: "make all the cards transparent with no border, reduce the font size of
   the text"): no white box, no radius, no lift or shadow on hover - there is no box to lift; the card is still the link. The
   prize drops 15 -> 13px and the year 12 -> 11px, the hub's floor for a figure. /press/ keeps its white cards and sizes: these
   rules are scoped to .awrow, which only the home page has. */
.awrow .awt{background:transparent;border-radius:0;box-shadow:none}
@media (hover:hover){.awrow .awt:hover{transform:none;box-shadow:none}}
.awrow .awt .pz{font-size:13px}
.awrow .awt .y{font-size:11px}
@keyframes awslide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .awrow .awtrack{animation:none;width:auto}
  .awrow .awset{flex-wrap:wrap;padding-right:0}                                                           /* the same widths wrap into the press page's grid */
  .awrow .awset+.awset{display:none}
}
@media (max-width:1100px){.awrow{--cols:3;--start:calc(var(--n,10) - 1)}}
@media (max-width:860px){
  .awt{padding:16px 14px 14px;min-height:0}.awt .pz{font-size:14px}
  .awrow{margin-top:32px;padding-top:22px;--cols:2;--gap:10px;--start:0}
}
/* == A LINKED CARD LANDS IN VIEW 13 OCT 2026 == (Nuo, with a screenshot of /press/#st100-2025: "the awards logo don't take the user to
   the correct place on the Press page"). The browser's jump put the card's top at the window's top, under the fixed bar and the
   chapter pills (measured: card top -16px against a header ending at 123px at 1440, 60px on a phone - the reveal's 16px lift lands
   after the jump). The card now stops below both, and press.js centres it once the page has drawn. Here, not in press.css: every .awt rule lives in awards.css (audit_press.js). */
.awt[id]{scroll-margin-top:150px}
@media (max-width:860px){.awt[id]{scroll-margin-top:90px}}