/* The front page of chobotsblog.net. Loaded there and nowhere else (render.mjs frontPage).

   It stands on the Cosmic Stage like every other page of the main site. What is its own:
     .home-desk    the top for someone signed in: their Chobot, a hello, their blogs
     .home-hero    the top for a visitor: the Chobots blog's sky, its rider flying out of it
     .spot-band    the posts the team put in the spotlight, on the game's Stage (and /spotlight)
     .press-band   the team's recognised blogs, in the Journalist badge's own blues
     .post-card    a post: the site's own card, with a little of its blog on it
     .chart        what readers liked, counted down from a gold 1

   The band's blues, its teal and the cream of the book are read off the Journalist badge from the
   game (public/img/site). They are literals on purpose: the badge looks the same in Light and Space. */
.home-desk { --gold: #f2c14e; --gold-deep: #c98d1b; }

/* ==== The desk: a hello, and the reader's own blogs ========================================== */
.home-desk {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: center;
  padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 26px) clamp(24px, 3vw, 34px); margin-bottom: 22px; overflow: hidden;
}
.home-desk::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold-deep)); }
.home-desk::after {
  content: ""; position: absolute; left: 38%; bottom: -70px; width: 190px; height: 212px; pointer-events: none;
  background: url("../img/site/journalist-badge.svg") center / contain no-repeat; opacity: 0.09; transform: rotate(-12deg);
}
.home-desk > * { position: relative; z-index: 1; min-width: 0; }
.desk-hello { display: flex; gap: 18px; align-items: center; }
.desk-hello .chobot-face.face-96 {
  width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--gold);
  background: radial-gradient(circle at 50% 30%, #8fd4ff 0%, #2a74de 70%, #174a9c 100%);
  box-shadow: 0 0 0 5px rgba(242, 193, 78, 0.22), 0 12px 24px rgba(0, 0, 0, 0.35);
}
.desk-hello .chobot-face .face-letter { color: #ffffff; }
.desk-kicker { margin: 0 0 6px; font: 800 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
:root[data-theme="light"] .desk-kicker { color: #8a5a00; }
.home-desk h1 { margin: 0 0 6px; font: 800 clamp(28px, 4vw, 42px)/1.05 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); overflow-wrap: anywhere; }
.desk-line { margin: 0 0 12px; color: var(--muted); font-weight: 700; }
.home-desk .chips { margin: 0; }

.desk-blogs { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; }
.desk-label { grid-column: 1 / -1; margin: 0; font: 800 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
:root[data-theme="light"] .desk-label { color: #8a5a00; }
.desk-find { display: grid; gap: 12px; align-content: center; }
.desk-find .find { margin: 0; }
.my-blog { margin: 0; }
.my-blog-head { display: block; color: inherit; text-decoration: none; }
.my-blog-head .look-card-art { height: 54px; }
.my-blog-head strong { display: block; padding: 10px 14px 0; }
.my-blog-head:hover strong { text-decoration: underline; }
.my-blog-body { display: grid; gap: 10px; padding: 6px 14px 14px; }
.my-blog-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--card-soft, var(--muted)); font-weight: 700; font-size: 0.92rem; }
.my-blog-stats b { margin-right: 3px; font: 800 19px/1 var(--display); color: var(--card-ink, var(--heading)); }
.my-blog .actions { margin: 0; }
.desk-more { grid-column: 1 / -1; margin: 0; font-weight: 800; }

.start-card { display: flex; gap: 14px; align-items: flex-end; padding: 16px; border-radius: var(--radius-lg); background: var(--chip-bg); border: 2px dashed var(--chip-edge); color: var(--chip-ink); }
.start-card img { flex: none; width: 84px; margin-bottom: -6px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3)); }
.start-card p { margin: 0 0 10px; }
.start-card p:last-child { margin: 0; }
.home-side .start-card { margin-bottom: 20px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ==== A visitor's top: the Chobots blog's sky, and its rider flying out of the frame ==========
   The sky is .space-scene and the rider .space-rider (site.css); here they are only placed. She
   fills the sky (the right 45% of the panel) and sits a little right of its middle, so her trail
   runs out past the panel's right edge and its tail crosses into the words. No sun here. When
   the panel stacks (below), she is centred in the banner instead. */
.home-hero { position: relative; overflow: visible; }
/* (:root so it also beats the daytime sky the scene had in Light: the banner is space in both.) */
:root .home-hero-scene.space-scene { border-radius: 0 19px 19px 0; background: #061027 url("../img/site/space.webp") center 30% / cover; }
.home-hero-scene.space-scene::before { display: none; }
.home-hero .space-rider { top: 52%; left: 46.5%; width: min(60%, 680px); translate: 0 -50%; }
.features > .feature img { object-fit: contain; }

/* ==== Headings straight on the sky, each with someone from the game beside it ================= */
.home-section { margin-bottom: 24px; }
.home-columns { margin-top: 0; }
.section-head { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 3px solid var(--panel-line); }
.section-head h2 { margin: 0; font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); }
.head-art { flex: none; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35)); }
.section-link {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink); font: 800 14px/1 var(--display); text-decoration: none;
}
.section-link:hover { background: var(--chip-bg-hi); }
.home-rail .follow-strip { padding-bottom: 10px; }

/* ==== Posts as cards, the first one large ===================================================== */
.press-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.home-section.wide .press-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The card is the same for every blog, so a page of posts reads as one page. A blog lends it a
   little: its colour along the top edge and behind its name, and a thumb of its header picture
   (the colour arrives as --band-top and --band-bottom, from data-accent or /card-looks.css). */
.look-card.post-card {
  display: flex; flex-direction: column; margin: 0; overflow: hidden; color: var(--text);
  background: var(--panel-bg); border: 1.5px solid var(--tile-edge); border-top: 5px solid var(--band-top); border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.15s, box-shadow 0.15s;
}
.look-card.post-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34); }
.post-card-pic { display: block; background: var(--tile-bg); }
.post-card-pic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-pic.pic-sticker img { object-fit: contain; padding: 10px; }
.post-card-body { display: grid; gap: 8px; align-content: start; padding: 14px 16px 16px; }
.post-card-blog {
  display: inline-flex; gap: 8px; align-items: center; justify-self: start; max-width: 100%; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); font: 800 13px/1.2 var(--display); text-decoration: none;
}
.post-card-blog:hover { filter: brightness(1.1); }
.post-card-blog span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-card-thumb { flex: none; width: 24px; height: 24px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.post-card h3 { margin: 0; font: 800 20px/1.2 var(--display); overflow-wrap: anywhere; }
.post-card h3 a { color: var(--heading); text-decoration: none; }
.post-card h3 a:hover { text-decoration: underline; }
.look-card.post-card .excerpt { margin: 0; color: var(--text); }
.post-card-foot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 2px 0 0; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.post-card-foot .chobot-face.face-36 { width: 28px; height: 28px; font-size: 13px; }
.post-card-counts { display: inline-flex; gap: 12px; margin-left: auto; }
.post-card.lead { grid-column: 1 / -1; }
.post-card.lead h3 { font-size: clamp(24px, 2.8vw, 30px); }
.post-card.lead .excerpt { font-size: 1.05rem; }
.post-card.lead.has-pic { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.post-card.lead.has-pic .post-card-pic img { height: 100%; min-height: 220px; aspect-ratio: auto; }
.post-card.lead.has-pic .post-card-body { align-content: center; padding: 20px 22px; }

/* ==== The Journalist blogs: the badge, and a band in its blues ================================
   The badge is a sky-blue shield with pale rays, a dotted rim and a cream book: so is the band. */
.press-band {
  --shield-hi: #38c4ff; --shield: #2f85ff; --shield-deep: #0e3484; --shield-teal: #38b89d; --book: #f3f3e3; --spark: #ff9900; --spark-hi: #feef3d;
  position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); margin: 0 0 24px; overflow: hidden;
  border: 3px solid var(--shield-hi); border-radius: var(--radius-lg); color: #eaf6ff; outline: 3px dotted rgba(255, 255, 255, 0.4); outline-offset: -10px;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0 28px, transparent 28px 70px),
    radial-gradient(ellipse 50% 90% at 6% 40%, rgba(56, 196, 255, 0.55) 0%, transparent 72%),
    radial-gradient(circle at 94% 130%, rgba(56, 184, 157, 0.65) 0%, transparent 52%),
    linear-gradient(160deg, #1f6fe0 0%, #164fb0 50%, var(--shield-deep) 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22), 0 18px 44px rgba(0, 0, 0, 0.4);
}
.press-band::after {
  content: ""; position: absolute; right: 26px; top: 50%; width: 118px; height: 145px; pointer-events: none;
  background: url("../img/site/journalist-badge.svg") center / contain no-repeat; opacity: 0.18; transform: translateY(-50%) rotate(10deg);
}
.press-plaque { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; padding: 22px 18px 22px 26px; border-right: 2px dashed rgba(255, 255, 255, 0.4); }
.press-badge { width: 84px; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 20, 70, 0.5)); }
.press-plaque h2 { margin: 8px 0 0; font: 800 26px/1.05 var(--display); color: #ffffff; text-shadow: 0 2px 0 var(--shield-deep); }
.press-plaque p { margin: 0; color: #ffffff; font-weight: 700; font-size: 0.95rem; text-shadow: 0 1px 2px rgba(6, 34, 82, 0.55); }
.press-link {
  display: inline-flex; align-items: center; min-height: 36px; margin-top: 8px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, var(--spark-hi) 0%, #ffb800 55%, var(--spark) 100%); color: #3a2500; font: 800 14px/1 var(--display);
  box-shadow: 0 3px 0 #a85d00, inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.press-link:hover { transform: translateY(-1px); }
.press-rail { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 14px; align-items: stretch; overflow-x: auto; padding: 22px 20px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--shield-hi) transparent; }
.press-card { margin: 0; scroll-snap-align: start; border-color: var(--book); box-shadow: 0 10px 20px rgba(0, 20, 70, 0.45); }
.press-card .look-card-art { height: 80px; }
.press-card .look-card-body { gap: 6px; }
.press-invite {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; justify-content: center; padding: 18px; border-radius: var(--radius);
  border: 2px dashed rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); color: #eaf6ff; font-weight: 700; text-decoration: none; scroll-snap-align: start;
}
.press-invite:hover { background: rgba(255, 255, 255, 0.16); }
.press-invite img { width: 40px; height: auto; }
.press-invite strong { font: 800 20px/1.15 var(--display); color: #ffffff; }
.press-invite span { font-size: 0.95rem; }
.press-ribbon {
  position: relative; display: inline-flex; gap: 6px; align-items: center; margin: -27px 0 2px; padding: 4px 11px 4px 6px; border-radius: 999px;
  background: var(--book); border: 2px solid var(--shield); color: #0f3f8f; font: 800 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
}
.press-ribbon img { width: 15px; height: 18px; object-fit: contain; }
.press-by { display: flex; gap: 8px; align-items: center; }
.press-latest { display: block; align-self: stretch; margin-top: 2px; padding-top: 8px; border-top: 2px dashed var(--card-soft, var(--panel-line)); color: var(--card-ink, var(--text)); font-weight: 700; overflow-wrap: anywhere; }
.press-latest-label { margin-right: 4px; font: 800 11px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-soft, var(--muted)); }

/* ==== The spotlight: posts the team picked, on the game's Stage ===============================
   The band is the Stage room from the game (public/img/rooms2/locMusicStage.webp): its lights at
   the top, darkened below them so the cards read. Each card is the site's post card under a gold
   banner with what the team said of it, marked with the game's Star magic (render.mjs, spotCard).
   Literals on purpose, as the Journalist band's are: it looks the same in Light and Space. The
   same band is the top of /spotlight, where the cards wrap instead of scrolling. */
.spot-band {
  --spot-gold: #ffd24a; --spot-night: #1e0d4f;
  position: relative; margin: 0 0 24px; overflow: hidden; border: 3px solid var(--spot-gold); border-radius: var(--radius-lg); color: #ffffff;
  background:
    linear-gradient(180deg, rgba(30, 13, 79, 0.1) 0%, rgba(30, 13, 79, 0.5) 110px, rgba(30, 13, 79, 0.9) 250px, var(--spot-night) 100%),
    #3b1d8f url("../img/rooms2/locMusicStage.webp") center top / max(100%, 640px) auto no-repeat;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 18px 44px rgba(0, 0, 0, 0.4);
}
.spot-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 22px 24px 6px; }
.spot-head-star { flex: none; width: 72px; height: 72px; filter: drop-shadow(0 0 16px rgba(255, 210, 74, 0.8)); }
.spot-head-words { flex: 1 1 240px; min-width: 0; }
.spot-head h1, .spot-head h2 { margin: 0; font: 800 clamp(28px, 3.2vw, 38px)/1.05 var(--display); color: #ffffff; text-shadow: 0 2px 0 #4a1fa0, 0 0 22px rgba(255, 210, 74, 0.6); }
.spot-head p { margin: 4px 0 0; color: #fff6d8; font-weight: 700; text-shadow: 0 1px 3px rgba(20, 6, 60, 0.9); }
.spot-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  background: linear-gradient(180deg, #fff1b0 0%, var(--spot-gold) 55%, #f2b21a 100%); color: #3a2500; font: 800 14px/1 var(--display);
  box-shadow: 0 3px 0 #a86d00, inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.spot-link:hover { transform: translateY(-1px); }
.spot-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: 16px; align-items: stretch; overflow-x: auto; padding: 14px 24px 24px; scroll-padding-inline: 24px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--spot-gold) transparent; }
.look-card.post-card.spot-card { scroll-snap-align: start; border: 2px solid var(--spot-gold); box-shadow: 0 12px 26px rgba(10, 0, 40, 0.55); }
.spot-banner { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 14px 11px; background: linear-gradient(180deg, #fff1b0 0%, var(--spot-gold) 55%, #f2b21a 100%); border-bottom: 2px solid #c98d1b; color: #2b1a00; }
.spot-star { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 2px 2px rgba(120, 70, 0, 0.35)); }
.spot-banner-words { display: grid; gap: 4px; min-width: 0; }
.spot-says { font: 800 11px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #6b4300; }
.spot-words { font: 800 16px/1.25 var(--display); color: #2b1a00; overflow-wrap: anywhere; }
.spot-by { flex-wrap: nowrap; }
.spot-by-words { display: grid; gap: 2px; min-width: 0; }
.spot-by strong { color: var(--heading); overflow-wrap: anywhere; }
.spot-page .spot-rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; }
.spot-none { padding: 6px 24px 24px; font-weight: 700; color: #fff6d8; }
.spot-none p { margin: 0 0 12px; }

/* ==== The side: blogs to follow, what readers liked ========================================== */
.home-side .find { margin-bottom: 18px; }
.follow-card { position: relative; margin-bottom: 12px; }
.follow-card:last-child { margin-bottom: 0; }
.follow-card .look-card { margin: 0; }
.follow-form { position: absolute; top: 10px; right: 10px; margin: 0; }
.band-art { flex: none; width: 36px; height: 36px; margin-left: auto; }
.chart { list-style: none; margin: 0; padding: 14px; display: grid; gap: 8px; }
.chart a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); color: var(--text); text-decoration: none; transition: transform 0.15s; }
.chart a:hover { background: var(--tile-bg-hi); transform: translateX(3px); }
.chart-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--chip-bg-hi); border: 1.5px solid var(--chip-edge); color: var(--chip-ink); font: 800 19px/1 var(--display); }
.chart li:nth-child(1) .chart-n { background: var(--grad-gold); border-color: #ffffff; color: #3a2500; box-shadow: 0 3px 0 var(--gold-lip); }
.chart li:nth-child(2) .chart-n { background: linear-gradient(180deg, #f4f8ff, #a9b9d4); border-color: #ffffff; color: #1b2a4a; box-shadow: 0 3px 0 #6b7a96; }
.chart li:nth-child(3) .chart-n { background: linear-gradient(180deg, #f3c08e, #b9703a); border-color: #ffffff; color: #3a1c00; box-shadow: 0 3px 0 #7a4318; }
.chart-words { display: grid; gap: 2px; min-width: 0; }
.chart-words strong { font: 800 17px/1.2 var(--display); color: var(--heading); overflow-wrap: anywhere; }

@media (max-width: 1020px) {
  .home-section.wide .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .home-desk { grid-template-columns: minmax(0, 1fr); }
  .press-band { grid-template-columns: minmax(0, 1fr); }
  .press-band::after { display: none; }
  .press-plaque { flex-flow: row wrap; gap: 6px 16px; align-items: center; border-right: 0; border-bottom: 2px dashed rgba(255, 255, 255, 0.4); }
  .press-plaque h2 { margin: 0; flex: 1 1 160px; }
  .press-plaque p { flex: 1 1 100%; }
  .press-badge { width: 56px; }
  .press-link { margin-top: 0; }
  .post-card.lead.has-pic { display: flex; }
  .post-card.lead.has-pic .post-card-pic img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .post-card.lead.has-pic .post-card-body { padding: 14px 16px 16px; }
}
@media (max-width: 620px) {
  .press-grid, .home-section.wide .press-grid { grid-template-columns: minmax(0, 1fr); }
  .desk-hello { align-items: flex-start; gap: 14px; }
  .desk-hello .chobot-face.face-96 { width: 76px; height: 76px; }
  .press-rail { grid-auto-columns: minmax(210px, 78vw); padding: 14px; }
  .head-art { width: 38px; height: 38px; }
  .spot-head { padding: 16px 14px 4px; }
  .spot-head-star { width: 52px; height: 52px; }
  .spot-rail { grid-auto-columns: min(80vw, 300px); align-items: start; padding: 10px 14px 16px; scroll-padding-inline: 14px; }
  .spot-page .spot-rail { grid-template-columns: minmax(0, 1fr); }
  .spot-none { padding: 4px 14px 16px; }
}
@media (max-width: 860px) {
  :root .home-hero-scene.space-scene { border-radius: 19px 19px 0 0; }
  .home-hero .space-rider { top: 122px; left: 50%; width: min(78%, 400px); translate: -58% -50%; }
}