/* Landing pages — the LOBBY at "/" and the two REGIONAL CATALOGUE GRIDS.
   Jack, 12 Aug 2026: "purely just links to all the catalogues … one big card
   with the logo and then the catalogue front cover … an even grid".
   Jack, 19 Aug 2026: "change the raw link to only have a big Fashion Hub logo,
   no links, no nothing … instead of having the catalogues there, we want to
   branch it to /catalogues-apac and /catalogues-aus-Q4-26 … that way we can
   send a link that only has the catalogues that are available in APAC and only
   has the catalogues that are available in aus, and they are separated."
   So this one stylesheet now dresses THREE pages:
     index.html                 → the lobby (.hub-lobby / .lobby-*), no links
     catalogues-apac.html       → SIX catalogues  (.cat-grid-page--six)
     catalogues-aus-q4-26.html  → TEN catalogues  (.cat-grid-page)
   Dealers still order through the direct /aus and /apac links, which are
   unchanged. Shares the portal's tokens so every page reads as one product. */
@import url("tokens.css?v=8");

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:#000;
  color:#fff;min-height:100vh;font-size:14px;
  display:flex;flex-direction:column;align-items:center;
  padding:22px 22px 18px;
}

/* ── MASTHEAD ────────────────────────────────────────────────────────────────
   Jack, 12 Aug 2026: the Fashion Hub wordmark leads, Harley-Davidson smaller
   beneath it — and the whole page compact enough to sit on one screen. */
.hub-head{text-align:center;margin-bottom:18px}
.hub-fh{height:30px;display:block;margin:0 auto 10px}
.hub-title{
  font-family:var(--font-display);font-weight:900;font-size:17px;letter-spacing:-.2px;
  color:var(--hd-orange);line-height:1;
}
.hub-title span{color:#fff}
.hub-cycle{
  display:inline-block;margin-top:8px;padding:2px 10px;border:1px solid var(--hd-border);
  border-radius:20px;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:0.9px;
  color:var(--hd-gold);
}

/* ── THE LOBBY — index.html only ─────────────────────────────────────────────
   Jack, 19 Aug 2026: "It will simply say a big Fashion Hub logo Q4 2026 order
   portal." A nameplate and nothing else: no cards, no links, nothing to click.
   ⚠️ fh-wordmark-white.png is 551×120 and it is the ONLY copy in the repo —
   there is no SVG and no larger PNG (searched 19 Aug 2026). 360px is the honest
   ceiling: on a retina screen that asks 720 device px of a 551px source, a 1.3×
   stretch that a flat white wordmark on black absorbs without looking soft.
   Going bigger than this needs a bigger SOURCE FILE, not a bigger number here.
   Drop a larger PNG or an SVG in at the same path and the cap can rise. */
/* The plate takes the free space with auto margins, so it sits dead centre in
   the viewport while the footer stays down at the baseline. justify-content
   would have centred BOTH and left the footer hanging off the nameplate. */
body.hub-lobby{padding-bottom:22px}
.lobby-plate{text-align:center;margin:auto 0}
.lobby-fh{width:min(360px,78vw);height:auto;display:block;margin:0 auto}
.lobby-line{
  margin-top:24px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(13px,3.4vw,18px);letter-spacing:2.6px;
  text-transform:uppercase;color:#fff;
}
.lobby-line span{color:var(--hd-orange)}

/* ── THE CATALOGUE GRID ──────────────────────────────────────────────────────
   Even grid of identical cards: white card, brand logo band on top, the
   catalogue's own front cover beneath. The whole card is one link that opens
   the PDF in a new tab. Cover images are pre-rendered first pages at a fixed
   800×~1030 aspect, so every card in a row is the same height — that is what
   keeps the grid even. */
/* Jack, 12 Aug 2026 (second pass): "Those are just way too big … make the
   tiles a lot smaller … we all want it on the one page, not massive cards."
   Five across, small tiles — nine catalogues sit as 5+4 today and become a
   perfectly even 5×2 the day the Wolverine catalogue lands. The height media
   queries shrink the grid on short screens so both rows stay on one page. */
.cat-grid-page{
  display:grid;gap:12px;width:100%;max-width:1080px;
  grid-template-columns:repeat(5,1fr);justify-content:center;
}
@media (max-height:840px){ .cat-grid-page{max-width:940px} }
@media (max-height:720px){ .cat-grid-page{max-width:820px} }
@media (max-width:980px){ .cat-grid-page{grid-template-columns:repeat(3,1fr);max-width:640px} }
@media (max-width:560px){ .cat-grid-page{grid-template-columns:repeat(2,1fr)} }
/* The APAC page carries SIX catalogues, not ten. Five-across would strand a
   lonely card on a second row; three-across makes an even 3×2 — Jack, 12 Aug
   2026: "Have it in a grid, an even grid." Declared AFTER the base grid's
   media queries so it wins on source order (both are single-class selectors). */
/* Card counts changed when socks landed (20 Aug 2026): APAC 6→7, Australia
   10→11. Both are awkward numbers — 7 at three-across strands a lone card, 11
   at five-across does the same. Four and six across give 4+3 and 6+5: two rows
   each, near even, still one screen. Jack's rule stands: "an even grid." */
.cat-grid-page--six{grid-template-columns:repeat(3,1fr);max-width:660px}
.cat-grid-page--seven{grid-template-columns:repeat(4,1fr);max-width:880px}
.cat-grid-page--eleven{grid-template-columns:repeat(6,1fr);max-width:1180px}
@media (max-height:840px){ .cat-grid-page--seven{max-width:800px} .cat-grid-page--eleven{max-width:1040px} }
@media (max-height:720px){ .cat-grid-page--seven{max-width:700px} .cat-grid-page--eleven{max-width:920px} }
@media (max-width:1240px){ .cat-grid-page--eleven{grid-template-columns:repeat(5,1fr);max-width:1000px} }
@media (max-width:980px){ .cat-grid-page--seven,.cat-grid-page--eleven{grid-template-columns:repeat(3,1fr);max-width:640px} }
@media (max-width:560px){ .cat-grid-page--seven,.cat-grid-page--eleven{grid-template-columns:repeat(2,1fr)} }
@media (max-height:840px){ .cat-grid-page--six{max-width:600px} }
@media (max-height:720px){ .cat-grid-page--six{max-width:530px} }
@media (max-width:980px){ .cat-grid-page--six{grid-template-columns:repeat(3,1fr);max-width:640px} }
@media (max-width:560px){ .cat-grid-page--six{grid-template-columns:repeat(2,1fr)} }

.catalogue-card{
  background:#fff;border-radius:8px;overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform var(--trans),box-shadow var(--trans);
}
.catalogue-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.6)}
.catalogue-card:active{transform:translateY(-1px)}
.catalogue-card:focus-visible{outline:3px solid var(--hd-orange);outline-offset:3px}
.cc-logo{
  height:40px;display:flex;align-items:center;justify-content:center;
  padding:7px 12px;border-bottom:1px solid #eceae6;background:#fff;
}
.cc-logo img{max-height:100%;max-width:85%;object-fit:contain;display:block}
.cc-cover{
  width:100%;aspect-ratio:800/1030;object-fit:cover;display:block;background:#f5f3ef;
}
@media (prefers-reduced-motion:reduce){
  .catalogue-card,.catalogue-card:hover{transition:none;transform:none}
}

/* ── FOOTER ──────────────────────────────── */
.hub-foot{
  margin-top:18px;text-align:center;color:#67615a;font-size:10.5px;line-height:1.7;
  letter-spacing:0.4px;
}
.hub-foot strong{color:#9b948b}