:root {
  --bg: #0b0a08;
  --ink: #f2ead9;
  --muted: #a9987a;
  --accent: #cda434;
  --accent-light: #e8c968;
  --red: #e0303d;
  --card-bg: #17140f;
  --border: #3a3327;
  --max-width: 1200px;
  --font-body: "Inter", -apple-system, "system-ui", "Segoe UI", sans-serif;
  --font-heading: "Plus Jakarta Sans", "Inter", -apple-system, "system-ui", "Segoe UI", sans-serif;
  /* Source photos are ~2:3 portrait, but MetArt bakes a promo banner into
     the bottom ~7% of every one. This ratio is deliberately a bit wider
     than the true 2:3 so that object-fit:cover + object-position:top
     crops that banner (and a sliver below it) off the bottom instead of
     stretching or showing it. */
  --photo-ratio: 717 / 1000;
  --photo-ratio-num: 0.717; /* same value as --photo-ratio, as a plain number for use inside calc() */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Nav */
header.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}

.logo {
  justify-self: start;
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: 0;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.logo .accent-letter { color: var(--red); }

.nav-countdown { justify-self: center; }

/* Wraps the clock with an optional caption above it (only the homepage's
   wide-screen "desktop" copy actually shows the caption - see the
   wide-screen rules further down). Plain nav-countdown divs elsewhere are
   unaffected. The homepage carries two independent copies of the clock: a
   compact one in the navbar (".nav-countdown-wrap--mobile", used below
   1200px) and a much bigger standalone one at the top of the right column
   (".nav-countdown-wrap--desktop", used at 1200px+) - only one is ever
   visible at a time. */
.nav-countdown-wrap { justify-self: center; }

.nav-countdown-wrap--desktop { display: none; }

.nav-countdown-label {
  display: none;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

nav.main-nav {
  justify-self: end;
  white-space: nowrap;
}

nav.main-nav a {
  margin-left: 24px;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.2px;
}

nav.main-nav a:first-child { margin-left: 0; }

nav.main-nav a:hover { color: var(--accent); }

/* Capitalized, red first letter on the nav links, matching the logo's
   "Girl of the Hour" treatment. */
nav.main-nav a .accent-letter { color: var(--red); }

.nav-count {
  color: var(--muted);
  font-size: 13px;
}

/* Hamburger button + dropdown menu - only shown below the 1200px breakpoint
   (see the max-width:1199px query below), where it replaces nav.main-nav
   entirely. Hidden by default here so desktop (>=1200px, every page) is
   completely unaffected. */
.nav-hamburger {
  display: none;
}

.nav-menu {
  display: none;
}

/* Compact single-row nav for EVERY page below the 1200px sidebar
   breakpoint (previously this only targeted ".site-header.home-sidebar",
   i.e. the homepage - the other five pages fell back to the old 3-row
   stack further down and looked different from the homepage at the same
   width; generalizing the selector to plain "header.site-header" and
   scoping the whole thing inside this max-width:1199px query fixes both:
   every page now gets the same compact row here, and each page's own
   >=1200px desktop nav (the homepage's flex-column sidebar, or the other
   five pages' default centered .nav-inner) is untouched outside it, with
   no need for a specificity "restore" rule up there any more.
   Layout: logo left, clock centered and never wrapping, just the first
   nav link (girls) on the right - any further links are dropped since
   there's no room for all of them plus the clock at these widths, and
   they're a click away via that first link's own page anyway. The row is
   width-matched to the hero photo's own min(420px, 72vw) formula (see
   the .hero-frame rule below) so the logo and visible link line up with
   the photo's actual left/right edges instead of spanning the full
   viewport. */
@media (max-width: 1199px) {
  header.site-header .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(420px, 72vw);
    max-width: none;
    margin: 0 auto;
    /* Reduced from 14px 0 - the title/clock below are bigger now, so less
       vertical padding keeps the overall navbar height from growing. */
    padding: 8px 0;
    gap: 4px;
    /* Position context for .nav-menu's dropdown (see below). */
    position: relative;
    /* Scales the whole clock down on the narrowest phones (where the logo
       + clock + hamburger would otherwise be too wide for the
       min(420px, 72vw) row) - reaches its 1.29x ceiling at 760px viewport
       width and its 0.71x floor at 320px (bumped up from 1x/0.42x - with
       the "girls (N)" link now gone, replaced by a small hamburger icon,
       there's room for a noticeably bigger clock without changing the row
       height). calc(100vw / 760px) divides two lengths to get a plain
       unitless number, which is what --flip-scale needs (it's used as a
       bare multiplier elsewhere - see ".flip-clock" below); a "vw" value
       on its own is a length and can't mix with the unitless bounds in the
       same clamp(). Set here on .nav-inner itself rather than on whichever
       wrapper class holds the actual clock, since custom properties
       inherit through the DOM regardless - the homepage's clock sits
       inside a ".nav-countdown-wrap--mobile" wrapper, the other five pages
       use a bare ".nav-countdown" div directly, and this one declaration
       covers both. */
    --flip-scale: clamp(0.71, calc(100vw / 760px + 0.29), 1.29);
  }

  /* Bigger than before (was 3vw / 9px-22px) per request - the freed-up
     space from dropping the "girls (N)" link (replaced by the hamburger
     below) lets the title grow without wrapping or overflowing the
     min(420px, 72vw) row. 3.6vw reaches its 24px ceiling at ~667px
     viewport width and its ~11.5px floor at 320px. The vw COEFFICIENT is
     what sets the size at a given width (the min()/max() bounds only take
     over once it would go past them), not the floor. */
  header.site-header .logo {
    font-size: clamp(11px, 3.6vw, 24px);
  }

  header.site-header .nav-inner .flip-clock {
    flex-wrap: nowrap;
  }

  header.site-header .nav-countdown-wrap--mobile,
  header.site-header .nav-inner > .nav-countdown {
    flex: none;
  }

  /* nav.main-nav (the old "girls"/"galleries" links) is fully replaced by
     the hamburger + dropdown menu at this width - there's no room for the
     bigger logo/clock above alongside spelled-out nav links any more. */
  header.site-header nav.main-nav {
    display: none;
  }

  header.site-header .nav-hamburger {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  header.site-header .nav-hamburger .hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 1px;
  }

  header.site-header .nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    flex-direction: column;
    min-width: 160px;
    margin-top: 6px;
    padding: 8px 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  }

  header.site-header .nav-menu.open {
    display: flex;
  }

  header.site-header .nav-menu a {
    padding: 10px 18px;
    text-decoration: none;
    color: var(--ink);
    font-size: 15px;
    letter-spacing: 0.2px;
  }

  header.site-header .nav-menu a:hover {
    color: var(--accent);
    background: rgba(205, 164, 52, 0.08);
  }
}

/* Flip clock - split-flap style digits, like an old departure board. Sized
   to sit comfortably in the navbar by default; every dimension below reads
   off a --flip-scale custom property (default 1) so a container can blow
   the whole clock up (e.g. the homepage's wide-screen nav) just by setting
   that one variable, no separate large-size ruleset needed. */
.flip-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--flip-scale, 1) * 4px);
}

.flip-colon {
  font-family: var(--font-heading);
  font-size: calc(var(--flip-scale, 1) * 18px);
  font-weight: 800;
  color: var(--accent-light);
  line-height: calc(var(--flip-scale, 1) * 42px);
}

.flip-unit {
  position: relative;
  width: calc(var(--flip-scale, 1) * 26px);
  height: calc(var(--flip-scale, 1) * 42px);
  border-radius: calc(var(--flip-scale, 1) * 4px);
  background: #131110;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(205, 164, 52, 0.18);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: calc(var(--flip-scale, 1) * 22px);
  color: var(--ink);
}

.flip-unit > div {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--flip-scale, 1) * 21px);
  overflow: hidden;
  background: #1b1815;
  text-align: center;
  backface-visibility: hidden;
}

.flip-unit > div span {
  display: block;
  width: 100%;
  line-height: calc(var(--flip-scale, 1) * 42px);
}

.flip-top, .flip-top-flip { top: 0; border-radius: calc(var(--flip-scale, 1) * 4px) calc(var(--flip-scale, 1) * 4px) 0 0; }
.flip-bottom, .flip-bottom-flip { bottom: 0; border-radius: 0 0 calc(var(--flip-scale, 1) * 4px) calc(var(--flip-scale, 1) * 4px); }

.flip-bottom span, .flip-bottom-flip span { margin-top: calc(var(--flip-scale, 1) * -21px); }

/* the seam line down the middle of each tile */
.flip-unit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.flip-top-flip, .flip-bottom-flip {
  z-index: 2;
  transform-origin: 50% 100%;
  display: none;
}

.flip-bottom-flip { transform-origin: 50% 0%; }

.flip-unit.flipping .flip-top-flip {
  display: flex;
  animation: flipTopDown 0.3s ease-in forwards;
}

.flip-unit.flipping .flip-bottom-flip {
  display: flex;
  animation: flipBottomDown 0.3s ease-in 0.3s forwards;
  opacity: 0;
}

@keyframes flipTopDown {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}

@keyframes flipBottomDown {
  0% { transform: rotateX(90deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

/* Girl name/country - sits right under the hero photo, tight spacing */
.girl-meta {
  text-align: center;
  padding: 4px 20px 30px;
}

.girl-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.girl-name a {
  color: inherit;
  text-decoration: none;
}

.girl-name a:hover {
  color: var(--accent);
}

.girl-flag {
  margin-left: 10px;
  /* Flag emoji glyphs render well under the nominal font-box on most
     platforms, so a much larger font-size is needed for the flag to read as
     visually "as tall" as a capital letter in the name next to it. */
  font-size: 1.9em;
  vertical-align: -0.18em;
  line-height: 1;
}

/* Hero portrait */
.hero-block {
  display: flex;
  justify-content: center;
  padding: 20px 20px 6px;
}

.hero-frame {
  position: relative;
  /* Show the photo as large as its actual source resolution (683px wide)
     allows on wide screens now that removing the old countdown block freed
     up room - no point going bigger than the source, since that would just
     blow the image up further with no added detail. min-width:0 keeps this
     shrinkable inside the flex row on narrower screens. */
  width: min(683px, 100%);
  min-width: 0;
}

.hero-photo-link {
  display: block;
  position: relative; /* positioning context for the temporary "incoming" photo during a slide - see slide-transition.js */
  width: 100%;
  height: 100%;
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
  border: 7px solid var(--accent);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 0 0 0 1px rgba(205, 164, 52, 0.25), 0 12px 30px rgba(0, 0, 0, 0.55);
}

.hero-photo-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Buy Me a Coffee button, shrunk down and pinned to the photo's own bottom
   right corner (inside the accent border) rather than living in the
   footer. scale() keeps this a pure visual shrink - the widget's own click
   target shrinks right along with it - and transform-origin anchors that
   shrink to the corner. The offsets are measured from the .hero-frame's
   outer edge, which is also the outer edge of the 7px accent border, so
   right/bottom = border width + 2px gives a clean 2px gap between the
   button and the border itself (not the image's outer edge). */
.hero-bmc-wrap {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  line-height: 0;
  transform: scale(0.65);
  transform-origin: bottom right;
}

/* Name + flag centered, prev/next arrows pinned to the left/right edges of
   the photo's width, all on one row under the hero photo. */
.girl-nav-row {
  display: flex;
  align-items: center;
  width: min(683px, 100%);
  margin: 0 auto;
}

.girl-nav-row .girl-name {
  flex: 1;
  min-width: 0;
}

/* Flat triple-chevron mark, no circle/border chrome - just the icon. */
.time-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
}

.time-arrow .arrow-icon {
  width: 26px;
  height: 26px;
  display: block;
}

.time-arrow-prev .arrow-icon { transform: scaleX(-1); }

.time-arrow:hover { color: var(--accent-light); }

.time-arrow:disabled {
  cursor: default;
  opacity: 0.3;
}

.time-arrow:disabled:hover { color: var(--ink); }

/* Homepage wide-screen (>=1200px) layout: the logo/nav/clock column sits in
   normal flow right next to the hero photo (not a fixed full-height
   sidebar), with popular-models / random-galleries thumbnail columns on the
   right. Below 1200px, .home-side is hidden and everything else keeps the
   existing single-column format - .home-shell/.home-sidebar only exist on
   the homepage, and only turn into this 3-column layout at the breakpoint
   below. */
.home-side { display: none; }

.side-section + .side-section { margin-top: 36px; }

.side-heading {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.side-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* Pinned to the shared --side-track-w fluid width (rather than filling
     the column) so the tiles are the same size on both sides - the right
     column is wider than the left (to fit the bigger clock above it), but
     that shouldn't make its thumbnails bigger too. --side-track-w is set
     on .home-shell and shrinks smoothly with the viewport, so these track
     the left column's own width at every size instead of just at 1440px. */
  width: var(--side-track-w, 320px);
  max-width: 100%;
}

.side-tile {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.side-tile img {
  display: block;
  width: 100%;
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--card-bg);
  transition: border-color 0.15s ease;
}

.side-tile:hover img { border-color: var(--accent); }

.side-tile-label {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-tile:hover .side-tile-label { color: var(--accent-light); }

/* The whole homepage layout at the wide breakpoint: a single row-level grid
   with the logo/nav/clock column, the hero, and the popular/random columns
   side by side, capped at 1440px total. */
.home-shell {
  margin: 0 auto;
}

@media (min-width: 1200px) {
  /* Two rows: row 1 holds the header (left) and the big clock (right），row
     2 holds the random-galleries grid (left) and the most-popular grid
     (right). The hero spans both rows in the middle column, so whichever of
     row 1's two items is taller, both grids still start at the exact same
     y position underneath it - that's what keeps them "horizontally
     aligned" regardless of the header/clock's own heights.

     The side columns, gap, fonts, clock size and thumbnail size below are
     all defined with clamp(min, Nvw, max) rather than fixed pixels. The
     vw share is each value's own share of the 1440px design width (e.g.
     320px = 22.22vw), so every one of these shrinks in lockstep as the
     viewport narrows from 1440px down towards the 1200px breakpoint,
     instead of staying pinned at full size until something runs out of
     room. That's what keeps the hero photo's height (which is fluid via
     its own aspect-ratio) proportional to the side content's height at
     every width in between - previously the side columns stayed a fixed
     320/380px all the way down to 1200px while the hero shrank, so below
     about 1400px the 3x3 thumbnail grids no longer fit in the vertical
     space the hero photo left for them and the alignment JS had nothing
     good left to align to. */
  .home-shell {
    max-width: 1440px;
    padding: 0 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns:
      clamp(230px, 22.22vw, 320px)
      minmax(0, 1fr)
      clamp(270px, 26.39vw, 380px);
    grid-template-rows: auto auto;
    align-items: start;
    gap: clamp(20px, 2.78vw, 40px);
    /* Shared width used by both side-grids' tiles (see .side-grid) - keyed
       off the LEFT column's own fluid width so left/right thumbnails stay
       the same size as each other at every viewport width, matching the
       left column's clamp() above exactly. */
    --side-track-w: clamp(230px, 22.22vw, 320px);
  }

  /* The header becomes one grid item sitting next to the photo (grid
     column 1) instead of a full top-width bar - no more fixed positioning,
     it just flows in the row like any other column. It no longer carries
     the clock (that moved to the right column), just the logo + links.
     The logo text lines up with the photo's top edge - 14px accounts for
     the nav-inner's own 6px top padding plus the logo's line-box leading,
     measured against the actual rendered photo top. */
  .site-header.home-sidebar {
    grid-column: 1;
    grid-row: 1;
    margin-top: 14px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    background: none;
  }

  .site-header.home-sidebar .nav-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: none;
    padding: 6px 28px 6px 0;
  }

  /* The compact navbar clock is only for below 1200px. */
  .site-header.home-sidebar .nav-countdown-wrap--mobile { display: none; }

  /* Much bigger than the compact navbar wordmark - 38px at the 1440px
     design width, scaling down with the rest of the left column. */
  .site-header.home-sidebar .logo { font-size: clamp(28px, 2.64vw, 38px); }

  .site-header.home-sidebar nav.main-nav {
    justify-self: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* No specificity "restore" needed here any more for the other links the
     compact-nav rules hide - that hiding rule now lives inside its own
     max-width:1199px query, so it simply doesn't apply at this width in
     the first place. */
  .site-header.home-sidebar nav.main-nav a {
    margin-left: 0;
    font-size: clamp(15px, 1.32vw, 19px);
  }

  /* The big standalone clock: top of the right column, much bigger than
     the navbar version, caption switched on, nudged down the same 80px as
     the left column so the two stay level with each other. --flip-scale
     shrinks with viewport width the same way everything else in this
     column does (2.7 is its share of the 1440px design width). */
  .nav-countdown-wrap--desktop {
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    margin-top: 80px;
    /* clamp()'s middle argument has to be the same type (a plain number,
       since --flip-scale is used as a bare multiplier in calc(var()*Npx)
       elsewhere) as its min/max - "0.1875vw" is a length, not a number, so
       mixing it with the unitless 1.8/2.7 bounds is invalid and drops the
       whole declaration. Dividing two lengths with calc() (100vw / 533.3px)
       produces a unitless number instead, which is what's needed here:
       533.3px is chosen so this works out to 2.7 at the 1440px design
       width (1440 / 2.7 = 533.3), matching the other clamp()s in this
       block. */
    --flip-scale: clamp(1.8, calc(100vw / 533.3px), 2.7);
  }

  .nav-countdown-wrap--desktop .nav-countdown-label { display: block; }

  /* .home-layout goes display:contents so home-primary becomes a direct
     child of .home-shell's grid instead of nesting a second grid inside
     it - it's the only thing left inside <main> now. */
  main.home-layout {
    display: contents;
  }

  .home-primary {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .home-side { display: block; }

  .home-side-left { grid-column: 1; grid-row: 2; }
  .home-side-right { grid-column: 3; grid-row: 2; }
}

/* Generic */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

footer.site-footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

footer.site-footer a:hover { color: var(--accent); border-color: var(--accent); }

/* Holds the third-party "Buy me a coffee" widget the button.prod.min.js
   script injects - just centers it with a little breathing room above it. */
.bmc-button-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.page-title {
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: center;
  font-size: 28px;
  padding: 40px 20px 10px;
}

.girls-grid, .galleries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  padding: 30px 20px 60px;
}

.girl-card, .gallery-card {
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.girl-card .thumb, .gallery-card .thumb {
  width: 100%;
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  display: block;
  transition: border-color 0.15s ease;
}

.girl-card:hover .thumb, .gallery-card:hover .thumb { border-color: var(--accent); }

.girl-card .name, .gallery-card .name {
  margin-top: 8px;
  font-size: 15px;
  text-align: center;
}

.girl-card .sub, .gallery-card .sub {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.card-flag {
  font-size: 1.15em;
  vertical-align: -0.1em;
  line-height: 1;
}

/* Girls page: sort tabs + A-Z / country filter bar */
.girls-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 20px 6px;
}

/* Girls page has no page-title h1 above it (caption removed), so this adds
   back the breathing room that title used to provide. */
.girls-controls--top { padding-top: 40px; }

.sort-tabs {
  display: flex;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.sort-tab {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
}

.sort-tab:not(.active):hover { color: var(--ink); }

.sort-tab.active {
  background: var(--accent);
  color: var(--card-bg);
}

.girls-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
}

.filter-pill {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.girls-filter-bar.letters .filter-pill {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-pill.pill-empty {
  color: var(--muted);
  opacity: 0.45;
}

.filter-pill:hover { border-color: var(--accent); color: var(--accent-light); }

.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--card-bg);
  opacity: 1;
}

.filter-pill-country {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
}

.pill-flag {
  font-size: 1.25em;
  line-height: 1;
}

.girls-empty-note {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 14px;
}

/* Gallery detail page */
.gallery-header {
  text-align: center;
  padding: 30px 20px 10px;
}

.gallery-header h1 { font-family: var(--font-heading); font-weight: 700; margin-bottom: 4px; }
.gallery-header .by { color: var(--muted); font-size: 14px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 24px 20px;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  object-position: top;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  transition: border-color 0.15s ease;
}

.photo-grid img:hover { border-color: var(--accent); }

.affiliate-cta {
  text-align: center;
  padding: 20px 20px 60px;
}

.affiliate-cta a {
  display: inline-block;
  background: var(--accent);
  color: #17140f;
  text-decoration: none;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 6px;
}

.affiliate-cta a:hover { background: var(--accent-light); }

.placeholder-note {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 10px 20px 30px;
}

/* Lightbox - photo size and prev/next navigation deliberately mirror the
   homepage hero photo (.hero-frame / .girl-nav-row) so browsing feels the
   same everywhere: same width at every breakpoint below, arrows in a row
   underneath the photo rather than overlaid on top of it. */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  overflow-y: auto;
  padding: 60px 0 30px;
  box-sizing: border-box;
}

.lightbox.open { display: flex; }

.lb-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

/* Frame that crops the MetArt promo banner off the bottom of the full-size
   lightbox image too, the same way the thumbnails and hero do. Sized with
   the exact same width formula as .hero-frame (see the breakpoints below)
   instead of the old vh-based sizing, so the photo reads as the same size
   as the homepage hero. */
.lb-frame {
  position: relative;
  width: min(683px, 60vw);
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
  border-radius: 8px;
}

.lightbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.lightbox .lb-close {
  position: absolute;
  top: 24px;
  right: 32px;
  color: #fff;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1;
}

/* Prev/next row underneath the photo, same layout idea as .girl-nav-row on
   the homepage minus the (not needed here) name in the middle - just the
   two arrows spaced to the photo's own left/right edges. */
.lb-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(683px, 60vw);
  margin-top: 4px;
}

.lb-nav-row .time-arrow { color: #fff; }
.lb-nav-row .time-arrow:hover { color: var(--accent-light); }

/* Contact page */
.contact-body {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 20px 60px;
  text-align: center;
}

/* Below the 1200px sidebar breakpoint, the hero photo is capped at
   min(420px, 72vw) rather than growing all the way to its 683px desktop
   size - this covers the whole sub-1200px range (not just genuinely small
   phones) so it matches the compact nav row's own width formula above
   (see the max-width:1199px query near the top of the file) - the logo
   and visible link line up with the photo's edges at every width in
   between instead of the photo quietly growing wider than the nav row
   once the viewport passes ~640px. */
@media (max-width: 1199px) {
  .hero-frame { width: min(420px, 72vw); }
  .lb-frame, .lb-nav-row { width: min(420px, 72vw); }
}

@media (max-width: 640px) {
  /* The old 3-row nav stack that used to live here has been replaced by
     the single-row compact nav (see the max-width:1199px query near the
     top of the file), which now applies to every page across the whole
     sub-1200px range instead of just below 640px. */
  .photo-grid { grid-template-columns: repeat(3, 1fr); }

  /* On phones, let the homepage hero photo fill nearly the full screen
     width (~8px on each side) instead of sitting in a narrower column -
     the photo is the whole point of the homepage, so on the smallest
     screens it should dominate rather than float with lots of side
     margin. Overriding padding on "main.home-layout.wrap" specifically
     (rather than the generic ".wrap" class every page uses) keeps every
     OTHER page's normal 20px gutter untouched - this only affects the
     homepage's <main>, which is the only page with a .hero-frame. */
  main.home-layout.wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-block {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Overrides the min(420px, 72vw) formula from the max-width:1199px
     query above - this query comes later in the file so it wins at
     these narrower widths. 8px on each side, matching .hero-block's own
     padding above. */
  .hero-frame { width: calc(100vw - 16px); }

  .lb-frame, .lb-nav-row { width: calc(100vw - 16px); }

  /* Match the compact nav row's width to the now much wider hero photo,
     so the logo and "Girls" link still line up with the photo's actual
     left/right edges instead of looking narrower than it above. */
  .site-header.home-sidebar .nav-inner {
    width: calc(100vw - 16px);
  }
}