/* home.css - home.html only: the site for artists and managers (22 October
 * 2026). Loaded after site.css and v2.css, and every rule is under
 * body.home, so no other page sees it.
 *   - the words you read are in DM Mono, the company site's terminal font
 *     (memerecords.co's --mono, as in its Frank speech bubble), SIL Open
 *     Font Licence, in fonts/ as woff2. Headlines, buttons, names and tags
 *     keep the pixel fonts (Press Start 2P and Pixelify Sans).
 *   - less gold: the Apply buttons are the gold things on the page
 *   - the top is centred: the words, one video, one button
 * Style: hyphens, never em dashes.
 */

body.home {
  --read: 'HP DM Mono', 'Menlo', ui-monospace, monospace;
  --pale-green: #CFE3B0;
  --desk-soft: #DCE2CF;
}

/* the top bar (HOMES for artists, the pale underline) is in site.css: every page has it */

/* ── the top: the words, one video, one button ───────────────────────── */
body.home .home-hero { padding: 32px 0 32px; text-align: center; }
body.home .home-hero h1 {
  margin: 0 auto;
  color: var(--desk-ink); font-size: 32px; line-height: 1.5;
  text-shadow: 0 4px 0 var(--hp-green-shade);
}
body.home .home-hero h1 em { font-style: normal; color: var(--pale-green); }
body.home .home-lede {
  margin: 20px auto 0; max-width: 34em;
  font-family: var(--read); font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: .01em;
  color: var(--desk-soft);
}
/* the still of real HOMES, when there is no video */
body.home .home-media { margin: 28px auto 0; max-width: 400px; }
body.home .home-media img { display: block; width: 100%; height: auto; filter: drop-shadow(4px 6px 0 rgba(8,10,7,.38)); }
/* the video, in the house frame with a window bar, as the fans page shows
   Frank's HOME; a pixel button over it for the sound */
/* As big as the screen allows with Apply now still in view: the frame is
   96px wider and about 92px taller than the video, and the top bar, the
   gaps and the buttons take about 345px of the height. */
body.home .home-media.has-video { margin-top: 0; max-width: 1100px; max-width: min(100%, calc((100dvh - 345px) * 16 / 9 + 96px)); }
body.home .home-media .px-paper { padding: calc(4 * var(--u)) calc(8 * var(--u)); }   /* the rivets sit in the sides */
body.home .home-media .win-bar { margin: 0 0 calc(3 * var(--u)); text-align: left; }
/* The portrait film on a phone held upright (js/film.js). The frame is
   60px wider and about 70px taller than the video there. Sized off the
   screen with the browser's bars tucked away (lvh; vh before it for older
   phones, where vh already means that), so it starts at the size it grows
   to on scroll, not smaller (Frank, 23 October 2026). */
body.home .home-media.has-video.tall { max-width: min(100%, calc((100vh - 300px) * 9 / 16 + 60px)); max-width: min(100%, calc((100lvh - 300px) * 9 / 16 + 60px)); }
/* how-it-works.html: the two-minute film under the page's own words */
body.home .hiw-hero .home-media.has-video { margin-top: 28px; max-width: min(100%, calc((100dvh - 420px) * 16 / 9 + 96px)); }
body.home .film { aspect-ratio: 16 / 9; }
body.home .tall .film { aspect-ratio: 9 / 16; }
body.home .film video { display: block; width: 100%; height: 100%; padding: var(--u); object-fit: contain; background: #000; cursor: pointer; }
body.home .film video[controls] { cursor: auto; }
body.home .film-sound {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 8px; border: 0; cursor: pointer;
  background: var(--plate-face); color: var(--plate-ink);
  box-shadow: inset 0 0 0 3px var(--plate-band);
  font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1; white-space: nowrap;
  clip-path: var(--chamfer-sm);
}
body.home .film-sound:hover { color: var(--plate-band-hi); }
body.home .film-sound:focus-visible { outline: 3px solid var(--hp-ivory); outline-offset: 2px; }
body.home .film-sound[hidden] { display: none; }
body.home .film-sound i { width: 16px; height: 14px; background: currentColor; clip-path: polygon(0 30%, 30% 30%, 64% 0, 64% 100%, 30% 70%, 0 70%); }
@media (max-width: 620px) {
  body.home .home-media .px-paper { padding: calc(3 * var(--u)) calc(6 * var(--u)); }
  body.home .home-media .win-bar { font-size: 14px; }
  body.home .film-sound { bottom: 8px; gap: 6px; padding: 6px 8px 5px; font-size: 13px; }
  body.home .film-sound i { width: 12px; height: 11px; }
}
body.home .home-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
body.home .home-hero .link { font-family: var(--read); font-size: 17px; font-weight: 500; color: var(--desk-ink); }
body.home .home-hero .link:hover { color: #fff; }
@media (max-width: 980px) {
  body.home .home-hero h1 { font-size: 24px; }
  body.home .home-lede { font-size: 19px; }
}
@media (max-width: 620px) {
  body.home .home-hero { padding: 32px 0 20px; }
  body.home .home-hero h1 { font-size: 16px; line-height: 1.7; }
  body.home .home-lede { font-size: 16px; }
  body.home .home-media { margin-top: 24px; }
  body.home .home-media.has-video { margin-top: 0; }
  body.home .home-actions { margin-top: 24px; }
}

/* ── the words you read: DM Mono ─────────────────────────────────────── */
body.home .back p,
body.home .pair-side p,
body.home .faq summary,
body.home .faq details p,
body.home .section-head p,
body.home .home-sub,
body.home .home-made,
body.home .person span:not(.person-title),
body.home .band p.band-sub,
body.home .field label,
body.home .field input,
body.home .form .form-error,
body.home .form .form-note,
body.home .done p:not(.t-title),
body.home .key-pop p,
body.home .steps li,
body.home .card p,
body.home .console span:not(.press),
body.home .pop-body p,
body.home .ma-line { font-family: var(--read); letter-spacing: .01em; }

body.home .back p { font-size: 16px; line-height: 1.5; font-weight: 400; }
body.home .pair-side p { font-size: 17px; line-height: 1.55; }
body.home .faq summary { font-size: 18px; font-weight: 500; }
body.home .faq details p { font-size: 17px; line-height: 1.6; }
body.home .section-head p { max-width: 60em; font-size: 17px; line-height: 1.5; font-weight: 400; color: var(--desk-soft); }
body.home .band p.band-sub { max-width: 44em; font-size: 20px; line-height: 1.5; font-weight: 400; }
body.home .field label { font-size: 16px; font-weight: 500; }
body.home .field input { font-size: 16px; }
body.home .person span:not(.person-title) { font-size: 13px; line-height: 1.4; font-weight: 400; }
body.home .steps li { font-size: 16px; line-height: 1.45; }
body.home .steps b { font-family: var(--font); font-weight: 700; font-size: 18px; letter-spacing: 0; }
body.home .card p { font-size: 16px; line-height: 1.45; }
body.home .console span:not(.press) { font-size: 14px; line-height: 1.35; font-weight: 400; }
body.home .pop-body p { font-size: 16px; line-height: 1.55; }
body.home .ma-line { font-size: 13px; line-height: 1.35; font-weight: 400; }
@media (max-width: 620px) {
  body.home .faq summary { font-size: 16px; }
  body.home .band p.band-sub { font-size: 17px; }
}

/* ── less gold ───────────────────────────────────────────────────────── */
body.home .back { background: var(--plate-face); }
body.home .side-tag.fans { background: var(--plate-face); color: var(--plate-ink); box-shadow: inset 0 0 0 2px var(--plate-lit); }
body.home .footer { box-shadow: inset 0 4px 0 var(--plate-lit); }
body.home .band p.t-title { color: var(--pale-green); }
body.home .console { background: var(--plate-face); }

/* ── the team ────────────────────────────────────────────────────────── */
body.home .home-sub { margin: -8px 0 24px; max-width: none; font-size: 17px; line-height: 1.5; color: var(--desk-soft); }
body.home .home-made { margin: 24px 0 0; text-align: center; font-size: 16px; color: var(--hp-ink-soft); }
@media (max-width: 620px) {
  body.home #team .px-paper { padding: 20px 12px; }
  body.home #team .people { gap: 10px; }
  body.home #team .person { padding: 10px 8px; }
  body.home #team .person img { width: 80px; height: 80px; }
  body.home #team .person b { font-size: 16px; }
  body.home #team .person span:not(.person-title) { font-size: 12px; }
  body.home .home-sub { font-size: 16px; }
}

/* ── how-it-works.html: its top, the words only ───────────────────────── */
body.home .hiw-hero { padding-bottom: 8px; }

/* ── home2.html ──────────────────────────────────────────────────────── */
/* What you get: four in a row, two by two on a tablet; on a phone each is a
   row of its own, the picture beside the words */
body.home .backs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.home .back-words h3 { margin: 18px 0 8px; }
@media (max-width: 980px) { body.home .backs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  body.home .backs.four { grid-template-columns: 1fr; gap: 12px; }
  body.home .backs.four .back { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; }
  body.home .backs.four .back-words h3 { margin: 0 0 6px; font-size: 13px; }
  body.home .backs.four .back p { font-size: 14px; }
}

/* Try it here: the still of real HOMES beside the four mini-apps, two by
   two; on a tablet or phone the picture sits above them */
body.home .try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
body.home .try-pic img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; filter: drop-shadow(4px 6px 0 rgba(8,10,7,.38)); }
body.home .try-grid .consoles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (max-width: 860px) {
  body.home .try-grid { grid-template-columns: 1fr; gap: 20px; }
  body.home .try-pic img { max-width: 420px; }
}
body.home .try-more,
body.home .how-more { margin: 20px 0 0; text-align: center; font-family: var(--read); font-size: 17px; line-height: 1.5; color: var(--desk-soft); }
body.home .try-more .link,
body.home .how-more .link { font-family: var(--read); font-size: 17px; font-weight: 500; color: var(--desk-ink); }
body.home .try-more .link:hover,
body.home .how-more .link:hover { color: #fff; }
/* a link inside a section's line (Try it here's "dozens of mini-apps") */
body.home .section-head p .link { font: inherit; font-weight: 500; color: var(--desk-ink); }
body.home .section-head p .link:hover { color: #fff; }

/* How it works: the HOME, the Garden and the Town, three across; on a
   phone each is a row, the picture beside the words */
body.home .places3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
body.home .place-card .px-paper { display: flex; flex-direction: column; padding: calc(6 * var(--u)); container-type: inline-size; }
body.home .place-pic { aspect-ratio: 4 / 3; overflow: hidden; background: #1D2119; clip-path: var(--chamfer-sm); box-shadow: inset 0 0 0 var(--u) var(--hp-border); }
body.home .place-pic img { display: block; width: 100%; height: 100%; object-fit: cover; padding: var(--u); image-rendering: pixelated; }
/* each title on two lines at its <br> (Frank, 28 October 2026); where three
   across leave a card less than 13 letters' room (861 to 959px wide), it
   shrinks to keep to two */
body.home .place-card h3 { margin: 16px 0 8px; font-family: var(--font-title); font-weight: 400; font-size: 16px; font-size: min(16px, calc(100cqi / 13)); line-height: 1.5; }
body.home .place-card p { margin: 0; font-family: var(--read); font-size: 16px; line-height: 1.5; letter-spacing: .01em; color: var(--hp-ink-soft); }
body.home .place-card .pop-actions { display: flex; margin-top: 14px; }
@media (max-width: 860px) { body.home .places3 { grid-template-columns: 1fr; gap: 16px; } }
/* On a phone: the title on one line across the top of the card, the
   picture and the words side by side under it (Frank, 23 October 2026).
   The title is sized to the card so the longest, The town is full of
   HOMES (25 letters), fits: by the screen width first, by the card
   itself where the phone can (cqi). */
@media (max-width: 620px) {
  body.home .place-card .px-paper { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 14px; container-type: inline-size; }
  body.home .place-card h3 { grid-column: 1 / -1; grid-row: 1; margin: 0 0 12px; white-space: nowrap; font-size: min(14px, calc((100vw - 92px) / 25.5)); font-size: min(14px, calc(100cqi / 25.5)); }
  body.home .place-card h3 br { display: none; }
  body.home .place-pic { grid-column: 1; grid-row: 2 / span 2; }
  body.home .place-card p { grid-column: 2; grid-row: 2; font-size: 14px; }
  body.home .place-card .pop-actions { grid-column: 2; grid-row: 3; margin-top: 10px; }
}

/* Built by an artist, under the form: the team card from the two-minute
   film, nine faces with first names and where each is from */
body.home .team-band { padding-top: 12px; }
body.home .team-strip { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
body.home .team-face {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border: 0; background: none; cursor: pointer; color: var(--desk-ink);
  transition: transform 90ms steps(2);
}
body.home .team-face:hover { transform: translateY(-4px); }
body.home .team-face:focus-visible { outline: 3px solid var(--plate-band); outline-offset: 2px; }
body.home .team-face img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(3px 4px 0 rgba(8,10,7,.38)); }
body.home .team-face b { margin-top: 4px; font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1.2; }
body.home .team-face span { font-family: var(--read); font-size: 13px; line-height: 1.3; color: var(--pale-green); text-align: center; }
@media (max-width: 980px) { body.home .team-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 12px; } }
@media (max-width: 620px) {
  body.home .team-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.home .team-face img { width: 72px; height: 72px; }
  body.home .team-face b { font-size: 14px; }
  body.home .team-face span { font-size: 12px; }
}

/* Team in the top bar: opens the Dream team pop-up */
body.home .top-team {
  padding: 8px 6px; border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: 18px; line-height: 1; color: var(--plate-ink);
}
body.home .top-team:hover { color: var(--plate-band-hi); text-decoration: underline; text-underline-offset: 4px; }
body.home .top-team:focus-visible { outline: 3px solid var(--plate-band); outline-offset: 2px; }
@media (max-width: 720px) { body.home .top-team { margin-left: auto; font-size: 16px; } body.home .top-team + .btn-launch { margin-left: 0; } }

/* the Dream team pop-up: Frank first, as the artist he is */
body.home .meme-about.founder .founder-head { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
body.home .meme-about.founder .founder-head img { width: 88px; height: 88px; object-fit: contain; image-rendering: pixelated; flex: none; }
body.home .meme-about.founder .founder-head b { display: block; font-family: var(--font); font-weight: 700; font-size: 20px; line-height: 1.2; }
body.home .meme-about.founder .founder-head .person-title { display: block; margin-top: 2px; }

/* ── the Mini-apps pop-up: nine, in rows of three (23 October 2026) ───── */
body.home .ma-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { body.home .ma-grid { grid-template-columns: repeat(3, 88px); } }

/* ── Frank in the corner (js/home.js): the dashboard's guide
   (the dashboard's styles-v2.css .v2-buddy), with Peggy, and his
   bubble to his left in the house pop-up style. Under every pop-up (100)
   and the save nudge (300), and out of the way while the nudge is up. The
   footer makes room for him at the foot of the page. ── */
body.home {
  --buddy-size: 72px;
  --buddy-gap: 16px;
  --buddy-peggy: 44px;
}
@media (max-width: 560px) { body.home { --buddy-size: 58px; --buddy-gap: 12px; --buddy-peggy: 36px; } }
body.home .frank-buddy {
  --pixel-circle: polygon(68.75% 0%, 68.75% 6.25%, 81.25% 6.25%, 81.25% 12.5%, 87.5% 12.5%, 87.5% 18.75%, 93.75% 18.75%, 93.75% 31.25%, 100% 31.25%, 100% 68.75%, 93.75% 68.75%, 93.75% 81.25%, 87.5% 81.25%, 87.5% 87.5%, 81.25% 87.5%, 81.25% 93.75%, 68.75% 93.75%, 68.75% 100%, 31.25% 100%, 31.25% 93.75%, 18.75% 93.75%, 18.75% 87.5%, 12.5% 87.5%, 12.5% 81.25%, 6.25% 81.25%, 6.25% 68.75%, 0% 68.75%, 0% 31.25%, 6.25% 31.25%, 6.25% 18.75%, 12.5% 18.75%, 12.5% 12.5%, 18.75% 12.5%, 18.75% 6.25%, 31.25% 6.25%, 31.25% 0%);
  position: fixed; right: var(--buddy-gap); bottom: var(--buddy-gap); z-index: 90;
}
body.home .frank-buddy[hidden],
body.home:has(.nudge.show) .frank-buddy { display: none; }
body.home:has(.frank-buddy) .footer { padding-bottom: calc(var(--buddy-size) + 2 * var(--buddy-gap) + 8px); }
body.home .frank-btn {
  position: relative; display: block;
  width: calc(var(--buddy-size) + var(--buddy-peggy) - 16px); height: var(--buddy-size);
  padding: 0; border: 0; background: none; cursor: pointer;
}
body.home .frank-btn:focus-visible { outline: 2px solid var(--plate-band-hi); outline-offset: 2px; }
body.home .frank-ring, body.home .frank-band, body.home .frank-face { display: block; clip-path: var(--pixel-circle); }
body.home .frank-ring { position: absolute; top: 0; right: 0; width: var(--buddy-size); height: var(--buddy-size); padding: 3px; background: var(--hp-border); }
body.home .frank-band { width: 100%; height: 100%; padding: 4px; background: var(--plate-band); }
body.home .frank-btn:hover .frank-band { background: var(--plate-band-hi); }
body.home .frank-face { width: 100%; height: 100%; overflow: hidden; background: var(--hp-ivory); }
body.home .frank-face img { display: block; width: 100%; height: 100%; }
body.home .frank-peggy { position: absolute; left: 0; bottom: -4px; width: var(--buddy-peggy); height: auto; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
/* the bubble, to his left, with a stepped tail pointing at him */
body.home .frank-say {
  position: absolute; right: calc(var(--buddy-size) + 12px); bottom: 6px;
  display: block; width: max-content; max-width: calc(100vw - var(--buddy-size) - 2 * var(--buddy-gap) - 24px);
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  animation: frank-pop 0.2s steps(3);
}
body.home .frank-say[hidden] { display: none; }
body.home .frank-say-in { display: block; padding: var(--u); background: var(--hp-border); clip-path: var(--chamfer); }
body.home .frank-say-paper {
  display: block; padding: 10px 14px; background: var(--hp-ivory); clip-path: var(--chamfer);
  font-family: var(--read); font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--hp-ink);
}
body.home .frank-say:hover .frank-say-paper { background: var(--hp-bright); }
body.home .frank-say:focus-visible { outline: 2px solid var(--plate-band-hi); outline-offset: 2px; }
body.home .frank-say::before, body.home .frank-say::after { content: ''; position: absolute; }
body.home .frank-say::before {
  right: -14px; bottom: 22px; width: 18px; height: 16px; background: var(--hp-border);
  clip-path: polygon(0 0, 50% 0, 50% 25%, 75% 25%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 100%, 0 100%);
}
body.home .frank-say::after {
  right: -6px; bottom: 26px; width: 10px; height: 8px; background: var(--hp-ivory);
  clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%);
}
@media (max-width: 560px) { body.home .frank-say-paper { font-size: 14px; padding: 8px 12px; } }
@keyframes frank-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.home .frank-say { animation: none; } }

/* ── pop-ups on a phone: a box with the page round it, not the whole
   screen (Frank, 23 October 2026). 95% wide, and as tall as it needs up to
   95% of the screen, scrolling inside past that. App pop-ups (a mini-app
   playing) keep the whole screen. ── */
@media (max-width: 620px) {
  body.home .pop[data-kind="panel"] .pop-box,
  body.home .pop[data-kind="panel"].wide .pop-box { width: 95vw; height: auto; max-height: 95dvh; }
  body.home .pop[data-kind="panel"] .px,
  body.home .pop[data-kind="panel"] .px-in { height: auto; max-height: 95dvh; }
  body.home .pop[data-kind="panel"] .px-paper { height: auto; min-height: 0; }
}

/* the team cards: some words differ on a phone, two to a row (js/home.js
   backers' phone), so each pair evens up (Frank, 23 October 2026) */
body.home .person .bio-phone { display: none; }
@media (max-width: 620px) {
  body.home .person .bio-desk { display: none; }
  body.home .person .bio-phone { display: block; }
}