/* Homepage — one continuous night surface, photo-overlay cards.
   Loaded after pmd.css. The page never goes to paper: white after a dark hero reads as a flash,
   and every card here is a photograph, which a bright surface would flatten. */

body.hp{background:#0b0f14;color:#E6EBF2}

/* ---------- header ---------- */
body.hp .pmd-bar{background:rgba(11,15,20,.88);border-bottom:1px solid rgba(255,255,255,.06)}
body.hp .pmd-bar-in{gap:16px}
body.hp .pmd-logo{display:flex;align-items:center;gap:8px}
.pmd-mark{display:block;width:17px;height:auto;flex:0 0 auto}
body.hp .pmd-nav{gap:20px;margin-left:auto}
body.hp .pmd-nav a{color:rgba(255,255,255,.62);font-size:13.5px}
body.hp .pmd-nav a:hover{color:#fff}
.hp-nav-map{display:inline-flex;align-items:center;gap:6px}
.hp-nav-map svg{width:14px;height:14px}
/* A live count in the chrome, because that number changes and the page around it does not. */
.hp-live-pill{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  background:rgba(237,28,36,.13);border:1px solid rgba(237,28,36,.4);
  color:#ff6b70;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
}
.hp-live-pill i{width:5px;height:5px;border-radius:50%;background:var(--pmd-red);display:block}

/* ---------- hero ---------- */
/* The hero has no bottom edge. A rule under it cut the page in two; the photograph now
   dissolves into the exact colour of the section below, so the two are one surface and the
   seam has nowhere to show. */
.hp-hero{position:relative;background-size:cover;background-position:62% 40%;isolation:isolate}
/* Three passes, each doing one job.
   Across: dark where the words are, and it lets go early — past the copy column the picture is
     meant to be looked at. It used to open at .96 and still be at .88 a third of the way in,
     which put the headline at eighteen to one against a background nobody could see: a
     photograph of a real studio, veiled until it read as black. White text needs 4.5:1, large
     white text 3:1, so almost all of that darkness was buying nothing. It now holds about 10:1
     behind the copy — generous, and measured on the brightest photograph in the set, not the
     average one — and drops to almost nothing on the right.
   Down:   a little weight under the header, none through the middle.
   Out:    the last 30% falls to the events section colour and reaches it exactly, so the
     photograph ends by becoming the page instead of stopping against a line. */
.hp-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(9,12,17,.82) 0%,rgba(9,12,17,.72) 30%,rgba(9,12,17,.62) 46%,rgba(9,12,17,.32) 62%,rgba(9,12,17,.10) 80%,rgba(9,12,17,.06) 100%),
    linear-gradient(180deg,rgba(9,12,17,.30) 0%,rgba(9,12,17,0) 26%,rgba(9,12,17,0) 62%,rgba(14,18,24,.68) 86%,#0e1218 100%);
}
.hp-hero-in{
  position:relative;z-index:2;max-width:1520px;margin:0 auto;
  padding:46px 20px 54px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;
  min-height:430px;
}
.hp-copy{max-width:560px}
.hp-eyebrow{
  margin:0 0 13px;color:var(--pmd-red);font-size:10.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
}
.hp-copy h1{
  font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:clamp(34px,4.4vw,54px);line-height:1.03;letter-spacing:-.03em;margin:0 0 14px;
}
/* Translucent white loses contrast twice when the background lightens, because the background is
   also what shows through the letters. Measured on the brightest photograph in the set, against
   the background under this paragraph and not against the brightest patch anywhere: at the
   original 60% it still clears the 4.5:1 a 15px paragraph needs, but only at 4.9:1, and the hero
   set is rebuilt from the database whenever there are better pictures — the next bright one would
   take it under. 72% holds 6.3:1 and is still plainly the quieter voice under a white headline. */
.hp-sub{margin:0 0 22px;color:rgba(255,255,255,.72);font-size:15px;max-width:40ch;line-height:1.55}

.hp-search{
  display:flex;align-items:center;gap:13px;max-width:620px;
  background:#fff;border-radius:999px;padding:6px 6px 6px 22px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.06) inset;
  transition:box-shadow .18s,transform .18s;
}
.hp-search>svg{width:16px;height:16px;flex:0 0 16px;color:#9ca3af}
.hp-search input{
  flex:1;min-width:0;border:0;background:none;color:#111827;
  font:inherit;font-size:15.5px;padding:14px 0;outline:none;
}
.hp-search input::placeholder{color:#687386}
.hp-search button{
  flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--pmd-red);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;
}
.hp-search button:hover{background:var(--pmd-red-dark)}
.hp-search button svg{width:14px;height:14px}

.hp-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.hp-chips a{
  display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.72);text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:5px 13px;transition:background .14s,border-color .14s;
}
.hp-chips a:hover{background:rgba(255,255,255,.12);border-color:rgba(237,28,36,.5)}

.hp-stats{display:flex;flex-wrap:wrap;gap:30px;margin:26px 0 0}
.hp-stats dt{
  font-family:var(--font-head);font-size:27px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;
}
.hp-stats dt.r{color:var(--pmd-red)}
/* 40% was the one that genuinely failed: 9.5px uppercase over the photograph measured 3.7:1,
   under the 4.5:1 it needs and under even the large-text bar. */
.hp-stats dd{
  margin:6px 0 0;color:rgba(255,255,255,.58);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}

/* Float cards: the photograph is the card. */
.hp-float{display:flex;flex-direction:column;gap:12px;z-index:3}
.hp-fc{
  position:relative;display:block;width:180px;aspect-ratio:16/10;overflow:hidden;
  border-radius:12px;text-decoration:none;background:#141920;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.95);
  transition:transform .16s,border-color .16s;
}
.hp-fc:hover{transform:translateX(-4px);border-color:rgba(237,28,36,.5)}
.hp-fc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-fc-body{
  position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:1px;
  padding:24px 11px 10px;
  background:linear-gradient(180deg,transparent,rgba(6,8,11,.94) 62%);
}
.hp-fc-eyebrow{color:var(--pmd-red);font-size:8px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.hp-fc strong{
  font-size:12px;color:#fff;line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hp-fc small{color:rgba(255,255,255,.6);font-size:10px}

/* Red into amber, the single line of colour between hero and content. */
.hp-rule{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--pmd-red) 0%,#e8a838 58%,rgba(232,168,56,0) 100%);
}

/* ---------- sections ---------- */
.hp-sec{background:#0e1218;padding:46px 0}
/* A barely-there lift so three dark bands do not merge into one slab. */
.hp-sec-lift{
  background:#11161d;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.hp-archive{background:#0a0d12}

.hp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.hp-head h2{font-family:var(--font-head);font-size:clamp(19px,2.1vw,23px);color:#fff;margin:0 0 4px;letter-spacing:-.025em}
.hp-head p{margin:0;color:rgba(255,255,255,.42);font-size:12.5px}
.hp-head a{color:var(--pmd-red);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.hp-head a:hover{text-decoration:underline}
.hp-head-right{display:flex;align-items:center;gap:13px}
.hp-count{
  background:rgba(237,28,36,.13);border:1px solid rgba(237,28,36,.34);color:#ff6b70;
  font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;
}

.hp-grid{display:grid;gap:14px}
.hp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-grid-6{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}

/* ---------- the one card ---------- */
/* Every card on this page is the same object: a photograph with its text over the bottom of
   it. No white body strip — that was what made the previous cards read as a database table. */
.hp-card{
  position:relative;display:block;overflow:hidden;border-radius:13px;
  text-decoration:none;color:inherit;background:#141920;
  border:1px solid rgba(255,255,255,.07);
  transition:transform .16s,border-color .16s;
}
a.hp-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.hp-card .pmd-ph{border-radius:0;border:0}
/* City pictures are borrowed under CC and carry their author. Here the caption already owns the
   bottom edge of every card, so the credit goes to the opposite corner. */
.hp-card .pmd-credit,
.hp-fc .pmd-credit{top:6px;bottom:auto;right:6px;font-size:8.5px}
.hp-event .pmd-ph{aspect-ratio:4/3}
.hp-studio .pmd-ph{aspect-ratio:4/3}
.hp-city .pmd-ph{aspect-ratio:4/3}
.hp-arch .pmd-ph{aspect-ratio:16/10}
/* z-index because the letterboxed-logo variant lifts its own <img> to layer 1; without a
   stacking order of its own the caption paints underneath it and simply is not there. */
.hp-over{
  position:absolute;inset:auto 0 0 0;z-index:3;padding:40px 13px 12px;
  background:linear-gradient(180deg,transparent,rgba(6,8,11,.92) 58%);
}
.hp-over strong{
  display:block;font-family:var(--font-head);font-size:13px;color:#fff;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-over small{display:block;color:rgba(255,255,255,.55);font-size:10.5px;margin-top:2px}
.hp-styles{display:block;color:var(--pmd-red);font-size:9.5px;font-weight:700;margin-top:4px;letter-spacing:.02em}

.hp-event h3{
  font-size:13.5px;line-height:1.28;margin:5px 0;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hp-cat{
  display:block;color:var(--pmd-red);font-size:9px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
}
.hp-cat.is-fest{color:#e8a838}
.hp-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hp-meta span{color:rgba(255,255,255,.52);font-size:11px}
.hp-meta .when{color:var(--pmd-red);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

.hp-date{
  position:absolute;top:9px;left:9px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:34px;height:36px;border-radius:8px;
  background:rgba(255,255,255,.94);box-shadow:0 3px 10px -3px rgba(0,0,0,.6);
}
.hp-date b{font-family:var(--font-head);font-size:13px;line-height:1;color:#111827}
.hp-date i{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.09em;color:#687386;margin-top:1px}
/* The only element allowed to shout, and only while it is true. */
.hp-live{
  position:absolute;top:9px;right:9px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--pmd-red);color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
}
.hp-live i{width:4px;height:4px;border-radius:50%;background:#fff;display:block}

/* ---------- archive ---------- */
.hp-arch-in{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:34px;align-items:center}
.hp-arch-text h2{font-family:var(--font-head);font-size:clamp(20px,2.3vw,26px);color:#fff;margin:0 0 10px;letter-spacing:-.025em}
.hp-arch-text p{margin:0 0 18px;color:rgba(255,255,255,.5);font-size:13px;line-height:1.6}
.hp-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--pmd-red);color:#fff;text-decoration:none;
  font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px;transition:background .15s;
}
.hp-btn:hover{background:var(--pmd-red-dark)}
.hp-btn svg{width:12px;height:12px}
.hp-arch-cards{gap:12px}
/* Two real years, not the three the reference drew. A chain appears only where the table holds
   more than one edition of that festival. */
.hp-years{display:flex;gap:5px;margin-top:6px}
.hp-years b{
  font-size:9.5px;font-weight:700;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);border-radius:5px;padding:2px 7px;
  font-variant-numeric:tabular-nums;
}
.hp-years b.on{background:var(--pmd-red);color:#fff}

/* ---------- footer ---------- */
.hp-foot{background:#0a0d12;border-top:1px solid rgba(255,255,255,.05);padding:22px 0 30px}
.hp-foot-in{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.4)}
.hp-foot nav{display:flex;gap:16px}
.hp-foot a{color:rgba(255,255,255,.4);text-decoration:none}
.hp-foot a:hover{color:#fff}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .hp-fc{width:158px}
  .hp-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  /**
   * The links are no longer hidden here — they are the panel behind the button, styled in
   * pmd.css. What this block is for is undoing this file's own header rules, which are written as
   * `body.hp .pmd-nav` and therefore outnumber a bare `.pmd-nav` in pmd.css whether or not that
   * one sits inside a media query. The row gap of 20px was adding a hundred pixels to the panel
   * and pushing Contact past its bottom edge.
   */
  body.hp .pmd-nav{gap:0;background:#0f141b}
  body.hp .pmd-nav a{font-size:15px;color:rgba(255,255,255,.78)}
  body.hp .pmd-nav a.on{color:#fff}
  .hp-live-pill{display:none}
  .hp-hero-in{grid-template-columns:1fr;gap:24px;min-height:0;padding:32px 20px 38px}
  .hp-copy{max-width:none}
  /* The cards become a swipe row under the copy rather than a column beside it. */
  .hp-float{flex-direction:row;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .hp-float::-webkit-scrollbar{display:none}
  .hp-fc{flex:0 0 168px}
  .hp-grid-3,.hp-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-arch-in{grid-template-columns:1fr;gap:24px}
  .hp-sec{padding:36px 0}
}
@media(max-width:600px){
  .hp-copy h1{font-size:clamp(29px,9vw,38px)}
  .hp-stats{gap:22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .hp-stats::-webkit-scrollbar{display:none}
  .hp-stats>div{flex:0 0 auto}
  .hp-grid-3,.hp-grid-4{grid-template-columns:1fr}
  .hp-grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-foot-in{flex-direction:column;align-items:flex-start}
}

/* ---------- listing pages (/events, /studios) ---------- */
.hp-lead{padding-bottom:0}
.hp-lead h1{
  font-family:var(--font-head);font-size:clamp(28px,3.6vw,42px);color:#fff;
  margin:0 0 10px;letter-spacing:-.03em;
}
.hp-lead-sub{margin:0 0 20px;color:rgba(255,255,255,.55);font-size:14.5px;max-width:64ch;line-height:1.6}
body.hp .pmd-crumbs{color:rgba(255,255,255,.35)}
body.hp .pmd-crumbs a{color:rgba(255,255,255,.35)}
body.hp .pmd-crumbs a:hover{color:#fff}

/* One row of choices, same object as the map rail's segment: what to show, not where to look. */
.hp-tabs{display:flex;flex-wrap:wrap;gap:7px}
.hp-tab{
  display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.65);text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:6px 14px;transition:background .14s,color .14s,border-color .14s;
}
.hp-tab:hover{color:#fff;background:rgba(255,255,255,.1)}
.hp-tab.on{background:var(--pmd-red);border-color:var(--pmd-red);color:#fff}

/* A finished event stays in the list, visibly finished. It is evidence, not clutter. */
.hp-event.is-past{opacity:.62}
.hp-event.is-past:hover{opacity:1}
.hp-event.is-past .hp-date{background:rgba(255,255,255,.62)}
.hp-event.is-past .when{color:rgba(255,255,255,.5)}

.hp-empty{color:rgba(255,255,255,.45);font-size:14px;padding:26px 0}

.hp-pager{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:28px;color:rgba(255,255,255,.45);font-size:12.5px;
}
.hp-btn-ghost{
  color:#fff;text-decoration:none;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:8px 15px;transition:background .15s;
}
.hp-btn-ghost:hover{background:rgba(255,255,255,.13)}

@media(max-width:900px){ .hp-tabs{gap:6px} .hp-tab{font-size:12px;padding:5px 12px} }
/* The placeholder prints its category at the bottom, which is exactly where a card's caption
   sits — the two overlapped and read as ghost text. On a card the category is already in the
   overlay, so the placeholder keeps only its artwork. */
.hp-card .pmd-ph-ed-label{display:none}

/* ============ HERO, second pass ============
   The rule under the hero is gone: the photograph now fades into the events colour, so the
   page has one surface instead of two stuck together. Everything below follows from that —
   with no line to hold the composition, the elements have to hold it themselves. */

/* The search is the primary action on the page, so it is the widest thing in the column and
   sits at the height the eye lands. At 440px it read as a form field on a poster. */
.hp-search>svg{width:18px;height:18px;flex:0 0 18px}
.hp-search button svg{width:16px;height:16px}
.hp-search:focus-within{
  box-shadow:0 22px 50px -20px rgba(237,28,36,.5), 0 0 0 3px rgba(237,28,36,.22);
  transform:translateY(-1px);
}
.hp-search button:hover{transform:scale(1.06)}

/* More room overall. A 1520px composition with a 560px column left two thirds of the hero
   empty, and the emptiness read as unfinished rather than as air. */
.hp-hero-in{min-height:500px;padding:52px 20px 66px;gap:44px}
.hp-copy{max-width:620px}
.hp-copy h1{font-size:clamp(36px,4.8vw,58px);margin:0 0 16px}
.hp-sub{font-size:15.5px;max-width:44ch;margin-bottom:26px}
.hp-chips{margin-top:16px}
.hp-chips a{padding:6px 15px;font-size:12.5px}

/* Bigger cards, and a slight cascade. Three identical rectangles flush to one edge read as a
   sidebar; stepped, they read as things pinned at different places — which is the point. */
.hp-float{gap:14px}
.hp-fc{width:224px}
.hp-fc:nth-child(2){margin-right:26px}
.hp-fc:nth-child(3){margin-right:12px}
.hp-fc strong{font-size:13px}
.hp-fc small{font-size:10.5px}
.hp-fc-body{padding:28px 12px 11px}

/* The numbers carry the claim above them, so they get room to be read as evidence. */
.hp-stats{gap:38px;margin-top:32px}
.hp-stats dt{font-size:30px}
.hp-stats dd{font-size:10px;margin-top:7px}

/* The first light section no longer needs a top edge: the hero already arrived at its colour. */
.hp-sec:first-of-type{padding-top:52px}

@media(max-width:1100px){
  .hp-fc{width:192px}
  .hp-fc:nth-child(2),.hp-fc:nth-child(3){margin-right:0}
}
@media(max-width:900px){
  .hp-hero-in{min-height:0;padding:34px 20px 30px;gap:26px}
  .hp-search{max-width:none}
  .hp-fc{width:auto}
  /**
   * Stacked, the fade has less height to work in, so it starts sooner — and it cannot be lightened
   * the way the desktop one was. On a phone the headline, the paragraph and the stats sit ON the
   * photograph rather than beside it, so there is no side of the frame that carries no text. The
   * middle was at 42%, and over the brightest picture in the set the worst patch measured 3.6:1
   * for white and 2.3:1 for the paragraph — unreadable, and that was true before the desktop veil
   * was touched. It is firmer through the text now. The picture stays a backdrop here; that is the
   * price of a single column, and legibility is not the thing to spend.
   */
  .hp-veil{
    background:
      linear-gradient(180deg,rgba(9,12,17,.78) 0%,rgba(9,12,17,.62) 26%,rgba(9,12,17,.60) 56%,rgba(9,12,17,.68) 78%,#0e1218 100%);
  }
}

/* The hero shares the content column with everything below it.
   At 1520 the headline started at the window edge while "Happening now & next" started 120px
   in — two grids on one page, and the eye reads that as a mistake even without measuring it.
   The cards still reach past the column on the right, which is the only element that should. */
.hp-hero-in{max-width:1200px;padding-left:20px;padding-right:20px}
.hp-float{right:-16px}
@media(max-width:1300px){ .hp-float{right:8px} }
@media(max-width:900px){ .hp-float{right:auto} }

/* Whose photograph this is. Quiet, bottom-right, out of the way of everything — but there,
   because the picture was taken in somebody's studio. */
.hp-credit{
  position:absolute;right:22px;bottom:14px;z-index:4;margin:0;
  color:rgba(255,255,255,.34);font-size:10.5px;letter-spacing:.01em;
}
.hp-credit a{color:rgba(255,255,255,.5);text-decoration:none}
.hp-credit a:hover{color:#fff;text-decoration:underline}
@media(max-width:900px){ .hp-credit{position:static;margin:10px 20px 0;text-align:right} }

/* A place and a thing-you-do are different kinds of link, and a row that mixes them without
   saying so makes the reader guess. The pin says "this is somewhere". */
.hp-chips a.is-city{padding-left:10px;display:inline-flex;align-items:center;gap:6px}
.hp-chips a.is-city::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--pmd-red);
  flex:0 0 5px;
}
.hp-chips a.is-style{color:rgba(255,255,255,.6)}

/* The live count is a link now, so it has to look like one under the finger. */
a.hp-live-pill{text-decoration:none;transition:background .15s,border-color .15s}
a.hp-live-pill:hover{background:rgba(237,28,36,.24);border-color:var(--pmd-red)}

/* The search box repeated on the results page, where it is the whole point of the screen. */
.hp-search-page{max-width:680px;margin-top:6px}
.hp-more{margin:18px 0 0;color:rgba(255,255,255,.45);font-size:13px}
.hp-more a{color:var(--pmd-red);text-decoration:none;font-weight:600}
.hp-more a:hover{text-decoration:underline}

/* The hero card's own last resort, behind the hotlinked picture rather than instead of it.
   These cards are picked for carrying a provable photograph, and one still showed a torn-image
   glyph on the live page: the host was measured alive yesterday and had gone quiet by today. A
   photograph of the city, or a crop of the real map at the pin, sits underneath from the start —
   so when the picture fails and the script removes it, what is left is still somewhere. */
.hp-fc{background-size:cover;background-position:center}
.hp-fc.pmd-ph-failed{background-color:#141920}