/* ==========================================================================
   KF.Social guide category hub  —  gh-hub.css
   The editorial "cover" for a guide topic cluster (/guides/{category}/).
   Brings the category hubs up to the in-house bar set by city.html:
   Fraunces italic display, ink hairlines on cream, gold used with intent,
   a procedural chat-bubble motif for the chat category, and a lead-story +
   supporting-grid card system with an ink underline-draw hover.

   Shipped as a SEPARATE stylesheet (never merged into the unversioned,
   7-day edge-cached golden.css) so a hub restyle can never pair with a stale
   core stylesheet. Loaded AFTER golden.css; every rule is scoped under
   .seo-page so it wins on specificity + source order.

   Self-contained, mobile-first, print-friendly, reduced-motion + focus aware.
   No em-dashes in copy. No external assets.
   ========================================================================== */

.seo-page .hub{
  --hub-accent:var(--gold-deep);       /* set per-category via inline --cat-color */
  --hub-max:64rem;
}

/* ==========================================================================
   1. Editorial hero
   Eyebrow + big Fraunces-inflected display headline + tight standfirst, all
   left-aligned on a warm cream-2 band with a thin accent rule. No pastel chip.
   ========================================================================== */
.seo-page .hub-hero{
  position:relative;
  background:var(--cream-2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.seo-page .hub-hero-in{
  max-width:var(--hub-max);
  margin:0 auto;
  padding:3.25rem 1.5rem 3rem;
  position:relative;
  z-index:2;
}
/* Two-column on desktop: editorial copy left, hero motif/band right. */
@media (min-width:900px){
  .seo-page .hub-hero-in{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:2.75rem;
    align-items:center;
    padding:3.75rem 1.5rem 3.5rem;
  }
}
.seo-page .hub-crumb{
  color:var(--faint);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 1.5rem;
}
.seo-page .hub-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0;}
.seo-page .hub-crumb a{color:var(--gold-deep);}
.seo-page .hub-crumb a:hover{color:var(--ink);text-decoration:underline;}
.seo-page .hub-crumb .sep{opacity:.5;}
.seo-page .hub-crumb [aria-current]{color:var(--body);}

.seo-page .hub-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hub-accent);margin:0 0 1.1rem;
}
.seo-page .hub-eyebrow .dot{
  width:.45rem;height:.45rem;border-radius:50%;flex:none;
  background:var(--hub-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--hub-accent) 20%,transparent);
}
.seo-page .hub-title{
  font-family:'Inter',sans-serif;
  font-size:clamp(2.4rem,6vw,3.6rem);
  font-weight:650;letter-spacing:-.035em;line-height:1.03;
  color:var(--ink);margin:0 0 1.1rem;max-width:15ch;
}
.seo-page .hub-title .serif{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  color:var(--hub-accent);letter-spacing:0;
}
.seo-page .hub-standfirst{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.5;
  color:var(--body);max-width:34ch;margin:0 0 1.6rem;
}
/* Thin accent rule + article count, a quiet editorial measure. */
.seo-page .hub-measure{
  display:flex;align-items:center;gap:.9rem;
  font-size:.85rem;font-weight:600;color:var(--faint);letter-spacing:.01em;
}
.seo-page .hub-measure .rule{height:1px;width:2.75rem;background:var(--hub-accent);flex:none;opacity:.9;}
.seo-page .hub-measure .n{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.15rem;color:var(--hub-accent);
}

/* ---------- Hero visual: photographic categories -> art-directed band ------ */
.seo-page .hub-hero-art{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-shot);aspect-ratio:4/3;
  background:var(--ink);
}
.seo-page .hub-hero-art img{width:100%;height:100%;object-fit:cover;display:block;}
/* Duotone-ish accent tint + bottom ink scrim, so the JPEG reads as art
   direction, not a raw photo. mix-blend keeps skin tones from going flat. */
.seo-page .hub-hero-art::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--hub-accent) 42%,transparent),
    transparent 55%);
  mix-blend-mode:multiply;
}
.seo-page .hub-hero-art::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(13,10,7,.5),rgba(13,10,7,0) 58%);
}
@media (max-width:899px){
  .seo-page .hub-hero-art{margin-top:2rem;aspect-ratio:16/9;}
  /* When a game is live, the 16:9 photo letterbox is far too short for
     comfortable play (canvas ends up ~150px tall after the HUD). Drop the
     aspect-ratio lock and give the hero a tall, near-portrait play area so the
     canvas approaches 4:5. The stage is absolutely positioned, so we grow the
     FIGURE via min-height; the photo sits behind, covered by the ink stage. */
  .seo-page .hub-game:has(.hub-game-stage:not([hidden])){
    aspect-ratio:auto;
    min-height:min(84vw,30rem);
  }
}

/* ==========================================================================
   1b. Procedural chat-bubble motif (chat category only, no JPEG)
   A faithful miniature of the real KF.Social group chat (default "kf_blue"
   theme). Incoming = quiet neutral panels with a small circular avatar + a
   tiny sender name over the first bubble (group behaviour). Outgoing = the
   default blue gradient bubble, white text, no name, trailing-aligned. The
   tail corner tightens toward the sender; timestamps + the signature
   double-check read mark sit in-bubble. Body is SANS (SF Pro / Roboto in
   app -> Inter here); Fraunces italic stays ONLY on the card day label.
   App evidence: ChatTheme.swift kfBlue #4B7BFF->#0F45E0, incoming #F1F1F6 /
   text #1E293B, radius 22 with 7 tail (iOS) / 16 with 4 (Android), 75%/280
   max width, in-bubble 11pt timestamp @72% white, double-check read mark.
   ========================================================================== */
.seo-page .hub-thread{
  --kf-out-top:#4B7BFF;      /* default kf_blue gradient, straight from the app */
  --kf-out-bot:#0F45E0;
  --kf-in:#F1F1F6;           /* iOS/Android quiet incoming panel */
  --kf-in-line:rgba(23,19,12,.06);
  --kf-in-ink:#1E293B;       /* incoming text */
  --kf-meta:#8A93A6;         /* incoming timestamp */
  position:relative;
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.5rem 1.4rem 1.6rem;
  border-radius:var(--r-lg);
  /* A calm chat "canvas": warm cream with the faintest accent wash top-right,
     so the blue bubbles read as the product surface, not a raw swatch. */
  background:
    radial-gradient(130% 80% at 88% 4%,color-mix(in srgb,var(--hub-accent) 9%,transparent),transparent 58%),
    var(--cream);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.seo-page .hub-thread-day{
  align-self:center;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:.9rem;letter-spacing:.005em;text-transform:none;
  color:var(--faint);margin:.1rem 0 .55rem;
}
/* A row groups an optional avatar with the bubble column; it is the animated
   unit (four rows after the day label). */
.seo-page .hub-row{display:flex;align-items:flex-end;gap:.5rem;max-width:100%;}
.seo-page .hub-row.in{justify-content:flex-start;}
.seo-page .hub-row.out{justify-content:flex-end;}
.seo-page .hub-col{display:flex;flex-direction:column;min-width:0;max-width:78%;}
.seo-page .hub-row.out .hub-col{align-items:flex-end;}
/* Incoming avatar: small circle with the sender initial, mirroring the app's
   group-thread avatar (40dp circle scaled down). */
.seo-page .hub-av{
  flex:none;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;
  color:var(--cream);
  background:linear-gradient(160deg,color-mix(in srgb,var(--hub-accent) 78%,var(--ink)),var(--ink));
  box-shadow:0 1px 2px rgba(23,19,12,.18);
}
.seo-page .hub-av::before{content:attr(data-i);}
/* Sender name over the first incoming bubble (group behaviour). Sans, quiet. */
.seo-page .hub-name{
  font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.01em;color:var(--faint);margin:0 0 .18rem .55rem;
}
/* Bubbles: SANS body, rounded like the app, tail corner tightened per side. */
.seo-page .hub-bubble{
  position:relative;display:inline-flex;align-items:flex-end;gap:.5rem;
  max-width:100%;
  padding:.55rem .8rem;line-height:1.34;
  font-family:'Inter',system-ui,sans-serif;font-style:normal;
  font-size:.98rem;font-weight:450;
  border-radius:1.25rem;
}
/* incoming: quiet neutral panel, near-black ink, hairline, tail bottom-left */
.seo-page .hub-bubble.in{
  align-self:flex-start;
  background:var(--kf-in);color:var(--kf-in-ink);
  border:1px solid var(--kf-in-line);
  border-bottom-left-radius:.35rem;
}
/* outgoing: the default kf_blue gradient, white text, tail bottom-right */
.seo-page .hub-bubble.out{
  align-self:flex-end;
  color:#fff;
  background:linear-gradient(155deg,var(--kf-out-top),var(--kf-out-bot));
  border-bottom-right-radius:.35rem;
  box-shadow:0 8px 18px -12px color-mix(in srgb,var(--kf-out-bot) 78%,transparent);
}
/* the KF.Social "booked" reply is the hero line: same gradient, a touch
   deeper + lifted, with the product name as a tiny system label. */
.seo-page .hub-bubble.hero{
  font-weight:500;
  background:linear-gradient(155deg,color-mix(in srgb,var(--kf-out-top) 92%,var(--ink)),color-mix(in srgb,var(--kf-out-bot) 88%,var(--ink)));
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--kf-out-bot) 82%,transparent);
}
/* KF.Social sender name over its bubble (outgoing side), with a small verified
   badge dot echoing the app's blue tick. Right-aligned to sit above the bubble. */
.seo-page .hub-name-kf{
  align-self:flex-end;display:inline-flex;align-items:center;gap:.28rem;
  margin:0 .55rem .18rem 0;color:var(--goldDeep,var(--gold-deep));
}
.seo-page .hub-badge{
  width:.62rem;height:.62rem;border-radius:50%;flex:none;
  background:var(--kf-out-top);
  box-shadow:inset 0 0 0 2px var(--cream);
}
/* In-bubble timestamp (incoming) + meta cluster (outgoing time + read tick). */
.seo-page .hub-time{
  font-family:'Inter',sans-serif;font-size:.6rem;font-weight:500;
  white-space:nowrap;flex:none;
}
.seo-page .hub-bubble.in .hub-time{color:var(--kf-meta);align-self:flex-end;margin-bottom:.05rem;}
.seo-page .hub-meta{display:inline-flex;align-items:center;gap:.22rem;flex:none;align-self:flex-end;margin-bottom:.03rem;}
.seo-page .hub-bubble.out .hub-time{color:rgba(255,255,255,.72);}
/* The app's signature double-check read mark ("✓✓"), drawn with two ticks. */
.seo-page .hub-tick{
  position:relative;display:inline-block;width:.85rem;height:.6rem;flex:none;
}
.seo-page .hub-tick::before,.seo-page .hub-tick::after{
  content:"";position:absolute;top:.02rem;width:.32rem;height:.56rem;
  border:solid #fff;border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg);border-radius:0 0 1px 0;opacity:.95;
}
.seo-page .hub-tick::before{right:.28rem;}
.seo-page .hub-tick::after{right:.02rem;}
/* Subtle staged rise, purely additive: rows rest fully VISIBLE (so a no-motion
   / mid-load capture always shows the whole thread) and the animation only
   replays a soft pop on load. The day label is child 1, rows are children 2..5. */
@media (prefers-reduced-motion:no-preference){
  .seo-page .hub-thread .hub-row{animation:hub-pop .5s var(--ease) both;}
  .seo-page .hub-thread .hub-row:nth-child(2){animation-delay:.05s;}
  .seo-page .hub-thread .hub-row:nth-child(3){animation-delay:.3s;}
  .seo-page .hub-thread .hub-row:nth-child(4){animation-delay:.55s;}
  .seo-page .hub-thread .hub-row:nth-child(5){animation-delay:.82s;}
  @keyframes hub-pop{from{opacity:0;transform:translateY(9px) scale(.99);}to{opacity:1;transform:none;}}
}

/* ==========================================================================
   1c. Embedded mini-game hero (fitness-sports / outdoors / moving)
   The photo hero doubles as a dead-easy HTML5 game. At rest it shows the
   duotone photo with an elegant overlay card (eyebrow + Fraunces title + a
   Play control that unmistakably reads as a game). On click, hub-games.js
   hides the card and reveals the inline stage (canvas + score + restart +
   a quiet link to kf.social/play). No-JS / reduced-data keeps the plain
   photo. Accent tracks the category via inline --hub-accent. No em-dashes.
   ========================================================================== */
.seo-page .hub-game{position:relative;}
/* Overlay card: bottom-anchored glass panel on an ink scrim, so it reads as a
   deliberate invitation rather than a badge slapped on a photo. */
.seo-page .hub-game-card{
  position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;
  padding:1.05rem 1.15rem 1.1rem;
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--ink) 66%,transparent);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px -14px rgba(13,10,7,.6);
  backdrop-filter:saturate(1.1) blur(7px);
  -webkit-backdrop-filter:saturate(1.1) blur(7px);
  color:var(--cream);
}
.seo-page .hub-game-eyebrow{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem;
  font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);
}
.seo-page .hub-game-dot{
  width:.4rem;height:.4rem;border-radius:50%;flex:none;background:var(--gold-soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-soft) 26%,transparent);
}
.seo-page .hub-game-title{
  margin:0;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.55rem;line-height:1.05;letter-spacing:-.01em;color:var(--cream);
}
.seo-page .hub-game-tag{
  margin:.3rem 0 .85rem;font-family:'Inter',sans-serif;font-size:.86rem;line-height:1.35;
  color:rgba(255,253,246,.82);max-width:24rem;
}
/* Play control: pill with a filled play triangle. Cream fill, ink glyph, so
   there is zero ambiguity that this is an interactive game control. */
.seo-page .hub-game-play{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.15rem .6rem 1rem;border:0;cursor:pointer;
  border-radius:999px;background:var(--cream);color:var(--ink);
  font-family:'Inter',sans-serif;font-size:.92rem;font-weight:650;letter-spacing:-.01em;
  box-shadow:0 6px 16px -8px rgba(13,10,7,.7);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.seo-page .hub-game-play:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(13,10,7,.8);}
.seo-page .hub-game-play:active{transform:translateY(0);}
.seo-page .hub-game-play-ic{
  width:0;height:0;flex:none;
  border-left:.7rem solid var(--hub-accent);
  border-top:.42rem solid transparent;border-bottom:.42rem solid transparent;
  margin-left:.1rem;
}
.seo-page .hub-game-play:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* Live stage: fills the hero frame, ink canvas surface behind a cream board.
   MUST stay hidden until Play mounts the game: the [hidden] attribute has to
   win over display:flex, so gate the flex display on :not([hidden]). */
.seo-page .hub-game-stage{display:none;}
.seo-page .hub-game-stage:not([hidden]){
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;
  background:var(--ink);
}
.seo-page .hub-game-canvas{
  flex:1 1 auto;width:100%;min-height:0;display:block;
  background:var(--cream);cursor:pointer;
  /* none = the canvas fully owns touch: no page scroll, no pull-to-refresh, no
     double-tap zoom while playing. rapid tapping stays gameplay, never zoom. */
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.seo-page .hub-game-canvas:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.seo-page .hub-game-hud{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.55rem .85rem;background:var(--ink);
  border-top:1px solid rgba(255,255,255,.1);
}
.seo-page .hub-game-score{
  font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:-.01em;
  color:var(--hub-accent);
  /* the accent can be dark on ink; lift it toward the light variant for contrast */
  color:color-mix(in srgb,var(--hub-accent) 55%,var(--cream));
}
.seo-page .hub-game-controls{display:flex;align-items:center;gap:.5rem;}
.seo-page .hub-game-pause,
.seo-page .hub-game-restart{
  padding:.4rem .95rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--cream);
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
  transition:background .16s var(--ease),border-color .16s var(--ease);
  touch-action:manipulation;
}
.seo-page .hub-game-pause:hover,
.seo-page .hub-game-restart:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);}
.seo-page .hub-game-pause:focus-visible,
.seo-page .hub-game-restart:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.seo-page .hub-game-pause[hidden]{display:none;}
.seo-page .hub-game-more{
  margin:0;padding:.5rem .85rem .6rem;background:var(--ink);text-align:center;
}
.seo-page .hub-game-more a{
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.01em;
  color:var(--gold-soft);
}
.seo-page .hub-game-more a:hover{color:var(--cream);}
@media (max-width:520px){
  .seo-page .hub-game-title{font-size:1.3rem;}
  .seo-page .hub-game-tag{font-size:.8rem;margin-bottom:.7rem;}
  /* Bottom-anchored, thumb-reachable HUD. Score reads at arm's length; the
     Pause / Restart pills grow to a 44px comfortable touch target and gain
     breathing room from the rounded card corners. */
  .seo-page .hub-game-hud{
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));
    gap:.6rem;
  }
  .seo-page .hub-game-score{font-size:1rem;}
  .seo-page .hub-game-controls{gap:.6rem;}
  .seo-page .hub-game-pause,
  .seo-page .hub-game-restart{
    min-height:44px;min-width:44px;
    padding:.6rem 1.1rem;font-size:.9rem;
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* The play card's on-photo Play button is a primary touch target too. */
  .seo-page .hub-game-play{min-height:44px;padding:.7rem 1.25rem .7rem 1.1rem;}
  /* Keep the quiet "More games" link from crowding the controls. */
  .seo-page .hub-game-more{padding:.45rem .85rem .55rem;}
  .seo-page .hub-game-more a{font-size:.72rem;}
}
@media (prefers-reduced-motion:reduce){
  .seo-page .hub-game-play{transition:none;}
  .seo-page .hub-game-play:hover{transform:none;}
}
@media print{
  .seo-page .hub-game-card,.seo-page .hub-game-stage{display:none !important;}
}

/* ==========================================================================
   2. Body wrapper + section rhythm
   ========================================================================== */
.seo-page .hub-body{max-width:var(--hub-max);margin:0 auto;padding:0 1.5rem;}
.seo-page .hub-sec{padding:3rem 0;}
.seo-page .hub-sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 1.6rem;flex-wrap:wrap;
}
.seo-page .hub-sec-title{
  font-size:1.35rem;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin:0;
}
.seo-page .hub-sec-title .serif{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;color:var(--hub-accent);}

/* ==========================================================================
   3. Lead story  (the "Start here" card, promoted to a proper cover)
   Larger display type, accent rule + numeral, pull line, ink underline-draw.
   ========================================================================== */
.seo-page .hub-lead{
  position:relative;display:block;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:2.25rem 2.25rem 2rem;
  text-decoration:none;color:inherit;
  box-shadow:var(--shadow-card);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
  overflow:hidden;
}
/* accent spine down the left edge */
.seo-page .hub-lead::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--hub-accent);
}
.seo-page .hub-lead:hover{
  border-color:color-mix(in srgb,var(--hub-accent) 45%,var(--line));
  box-shadow:var(--shadow-shot);transform:translateY(-2px);
}
.seo-page .hub-lead-eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hub-accent);margin:0 0 1rem;
}
.seo-page .hub-lead-eyebrow .rule{height:1px;width:1.75rem;background:var(--hub-accent);opacity:.85;}
.seo-page .hub-lead-title{
  display:block;
  font-size:clamp(1.6rem,3vw,2.15rem);font-weight:650;letter-spacing:-.028em;
  line-height:1.12;color:var(--ink);margin:0 0 .75rem;max-width:22ch;
}
.seo-page .hub-lead-desc{
  display:block;
  font-size:1.05rem;line-height:1.6;color:var(--body);margin:0 0 1.15rem;max-width:52ch;
}
.seo-page .hub-lead-more{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.9rem;font-weight:650;color:var(--hub-accent);
}
.seo-page .hub-lead-more .u{
  position:relative;
}
.seo-page .hub-lead-more .u::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:currentColor;transition:right .28s var(--ease);
}
.seo-page .hub-lead:hover .hub-lead-more .u::after{right:0;}
.seo-page .hub-lead-more .arr{transition:transform .2s var(--ease);}
.seo-page .hub-lead:hover .hub-lead-more .arr{transform:translateX(3px);}
@media (min-width:720px){
  .seo-page .hub-lead{padding-left:2.75rem;}
}

/* ==========================================================================
   4. Supporting card grid  (editorial, ink hairlines, Fraunces numerals)
   ========================================================================== */
.seo-page .hub-grid{
  display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.4rem;
}
@media (min-width:640px){.seo-page .hub-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.seo-page .hub-grid{grid-template-columns:repeat(3,1fr);}}

.seo-page .hub-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:1.5rem 1.5rem 1.35rem;
  text-decoration:none;color:inherit;
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease);
}
.seo-page .hub-card:hover{
  border-color:color-mix(in srgb,var(--hub-accent) 40%,var(--line));
  background:#fff;transform:translateY(-2px);
}
/* Fraunces italic numeral, gold, top of each card. */
.seo-page .hub-card-n{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.25rem;line-height:1;color:var(--hub-accent);
  margin:0 0 .85rem;
}
.seo-page .hub-card-title{
  font-size:1.12rem;font-weight:650;letter-spacing:-.015em;line-height:1.32;
  color:var(--ink);margin:0 0 .5rem;
  position:relative;display:inline;
  background-image:linear-gradient(var(--hub-accent),var(--hub-accent));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease),color .2s var(--ease);
  padding-bottom:2px;
}
.seo-page .hub-card:hover .hub-card-title{background-size:100% 1.5px;color:var(--ink);}
.seo-page .hub-card-desc{
  font-size:.92rem;line-height:1.58;color:var(--body);margin:0 0 1rem;
  /* 2-line clamp */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.seo-page .hub-card-foot{
  margin-top:auto;display:flex;align-items:center;gap:.55rem;
  font-size:.76rem;font-weight:600;color:var(--faint);letter-spacing:.01em;
  padding-top:.9rem;border-top:1px solid var(--line);
}
.seo-page .hub-card-foot .sep{width:2.5px;height:2.5px;border-radius:50%;background:currentColor;opacity:.6;flex:none;}

/* ==========================================================================
   5. Explore more + closing measure
   ========================================================================== */
.seo-page .hub-topics{display:flex;flex-wrap:wrap;gap:.6rem;}
.seo-page .hub-topic{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:999px;
  font-size:.875rem;font-weight:600;letter-spacing:.005em;
  text-decoration:none;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.seo-page .hub-topic:hover{border-color:color-mix(in srgb,var(--topic,var(--gold)) 55%,var(--line));background:#fff;transform:translateY(-1px);}
.seo-page .hub-topic .cnt{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  color:var(--topic,var(--gold-deep));font-size:.95rem;
}
.seo-page .hub-topics-note{margin:1.25rem 0 0;font-size:.95rem;color:var(--body);}
.seo-page .hub-topics-note a{color:var(--gold-deep);font-weight:600;}
.seo-page .hub-topics-note a:hover{color:var(--ink);}

/* ==========================================================================
   Section bridge  (a pointer OUT of the guides shelf into another section)
   Deliberately lighter than .hub-lead: it must read as "there is more of this
   elsewhere on the site", never as this shelf's lead story. Horizontal band,
   accent spine, no cover art.
   ========================================================================== */
.seo-page .hub-bridge{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem 1.75rem;
  padding:1.4rem 1.6rem 1.4rem 2rem;
  background:color-mix(in srgb,var(--hub-accent) 6%,var(--cream));
  border:1px solid color-mix(in srgb,var(--hub-accent) 22%,var(--line));
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.seo-page .hub-bridge::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--hub-accent);
}
.seo-page .hub-bridge:hover{
  border-color:color-mix(in srgb,var(--hub-accent) 45%,var(--line));
  background:color-mix(in srgb,var(--hub-accent) 10%,var(--cream));
  transform:translateY(-1px);
}
.seo-page .hub-bridge:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.seo-page .hub-bridge-copy{display:block;max-width:56ch;}
.seo-page .hub-bridge-eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hub-accent);margin:0 0 .5rem;
}
.seo-page .hub-bridge-eyebrow .rule{height:1px;width:1.75rem;background:var(--hub-accent);opacity:.85;}
.seo-page .hub-bridge-title{
  display:block;font-size:clamp(1.15rem,2vw,1.4rem);font-weight:650;
  letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:0 0 .4rem;
}
.seo-page .hub-bridge-desc{
  display:block;font-size:.98rem;line-height:1.6;color:var(--body);margin:0;
}
.seo-page .hub-bridge-more{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.9rem;font-weight:650;color:var(--hub-accent);
}
.seo-page .hub-bridge-more .arr{transition:transform .28s var(--ease);}
.seo-page .hub-bridge:hover .hub-bridge-more .arr{transform:translateX(3px);}

/* ==========================================================================
   Motion + accessibility
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .seo-page .hub-lead,.seo-page .hub-card,.seo-page .hub-topic,
  .seo-page .hub-bridge,.seo-page .hub-bridge-more .arr,
  .seo-page .hub-lead-more .u::after,.seo-page .hub-card-title,
  .seo-page .hub-lead-more .arr{transition:none;}
  .seo-page .hub-lead:hover,.seo-page .hub-card:hover,.seo-page .hub-topic:hover,
  .seo-page .hub-bridge:hover{transform:none;}
  .seo-page .hub-bridge:hover .hub-bridge-more .arr{transform:none;}
  .seo-page .hub-row,.seo-page .hub-bubble{opacity:1;transform:none;animation:none;}
}
.seo-page .hub-lead:focus-visible,
.seo-page .hub-card:focus-visible,
.seo-page .hub-topic:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ==========================================================================
   6. "Find your people" gem rail  (guide article -> communities)
   Sits on an article page (guide.html) between the body and related reading.
   Editorial card language borrowed from the hub grid: ink hairlines on cream,
   emoji + Fraunces gem name, one-line description, a subtle cover-thumb or
   gradient band, quiet member line. 2x2 grid, stacks on mobile. Accent tracks
   the article's category via inline --cat-color (mapped to --hub-accent below).
   ========================================================================== */
.seo-page .gem-rail{
  --hub-accent:var(--cat-color,var(--gold-deep));
  max-width:var(--hub-max,64rem);
  margin:2.75rem 0 3rem;
}
.seo-page .gem-rail-eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hub-accent);margin:0 0 .6rem;
}
.seo-page .gem-rail-eyebrow .rule{height:1px;width:1.75rem;background:var(--hub-accent);opacity:.85;flex:none;}
.seo-page .gem-rail-head{
  font-size:1.4rem;font-weight:650;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);margin:0 0 .4rem;
}
.seo-page .gem-rail-head .serif{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;color:var(--hub-accent);}
.seo-page .gem-rail-sub{font-size:.98rem;line-height:1.55;color:var(--body);margin:0 0 1.5rem;max-width:54ch;}
.seo-page .gem-rail-grid{
  display:grid;grid-template-columns:1fr;gap:1.1rem;
}
@media (min-width:640px){.seo-page .gem-rail-grid{grid-template-columns:repeat(2,1fr);}}

.seo-page .gem-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.seo-page .gem-card:hover{
  border-color:color-mix(in srgb,var(--hub-accent) 40%,var(--line));
  background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-card);
}
/* Cover band: a real thumbnail when the gem has one, else a gradient wash.
   Deliberately a slim accent band, not a hero image — the card is about the
   copy, and in preview (no thumbnails) a tall block would read as empty. */
.seo-page .gem-card-cover{
  display:block;height:3rem;flex:none;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--hub-accent) 32%,var(--cream-2)),
    color-mix(in srgb,var(--hub-accent) 12%,var(--cream-2)));
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--line);
}
.seo-page .gem-card-body{
  display:flex;flex-direction:column;flex:1;
  padding:1.15rem 1.35rem 1.25rem;
}
.seo-page .gem-card-name{
  display:flex;align-items:center;gap:.55rem;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.18rem;letter-spacing:-.01em;line-height:1.2;
  color:var(--ink);margin:0 0 .45rem;
}
.seo-page .gem-card-emoji{font-family:'Inter',sans-serif;font-style:normal;font-size:1.25rem;line-height:1;flex:none;}
.seo-page .gem-card-name .txt{
  position:relative;
  background-image:linear-gradient(var(--hub-accent),var(--hub-accent));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease);padding-bottom:2px;
}
.seo-page .gem-card:hover .gem-card-name .txt{background-size:100% 1.5px;}
.seo-page .gem-card-desc{
  font-size:.9rem;line-height:1.55;color:var(--body);margin:0 0 .9rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.seo-page .gem-card-foot{
  margin-top:auto;display:flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:600;color:var(--faint);letter-spacing:.01em;
}
.seo-page .gem-card-foot .members{color:var(--faint);}
.seo-page .gem-card-foot .go{margin-left:auto;color:var(--hub-accent);transition:transform .2s var(--ease);}
.seo-page .gem-card:hover .gem-card-foot .go{transform:translateX(3px);}
/* Quiet "browse all" link under the grid. */
.seo-page .gem-rail-all{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:1.4rem;
  font-size:.9rem;font-weight:650;color:var(--hub-accent);text-decoration:none;
}
.seo-page .gem-rail-all .u{
  position:relative;
}
.seo-page .gem-rail-all .u::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:currentColor;transition:right .28s var(--ease);
}
.seo-page .gem-rail-all:hover .u::after{right:0;}
.seo-page .gem-rail-all .arr{transition:transform .2s var(--ease);}
.seo-page .gem-rail-all:hover .arr{transform:translateX(3px);}
.seo-page .gem-card:focus-visible,
.seo-page .gem-rail-all:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .seo-page .gem-card,.seo-page .gem-card-name .txt,
  .seo-page .gem-card-foot .go,.seo-page .gem-rail-all .u::after,
  .seo-page .gem-rail-all .arr{transition:none;}
  .seo-page .gem-card:hover{transform:none;}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .seo-page .hub-hero-art::before,.seo-page .hub-hero-art::after{display:none;}
  .seo-page .hub-lead,.seo-page .hub-card,.seo-page .hub-thread,
  .seo-page .hub-bridge{
    box-shadow:none !important;border:1px solid #ccc !important;background:#fff !important;
  }
  /* Bubbles flatten to plain bordered chips (ink on white); ticks + gradients
     drop so a printed chat motif reads as a clean transcript. */
  .seo-page .hub-bubble{
    box-shadow:none !important;background:#fff !important;color:#000 !important;
    border:1px solid #ccc !important;
  }
  .seo-page .hub-kf,.seo-page .hub-time,.seo-page .hub-name{color:#555 !important;}
  .seo-page .hub-tick::before,.seo-page .hub-tick::after{border-color:#555 !important;}
  .seo-page .hub-grid{grid-template-columns:repeat(2,1fr);}
  /* The gem rail is a live-product prompt; a printed guide drops it entirely. */
  .seo-page .gem-rail{display:none !important;}
}