/* Dare Remachinda — HOMEPAGE layout only.
   Linked after style.css from index.html and nowhere else.

   This file owns NO colour. Every value comes from the brand tokens declared
   in style.css (--navy, --gold, --ink, --body, --muted, --line, --card,
   --band, --off-white, --white, --gold-text), so the palette can be inverted
   in style.css without a single edit here.

   Why it exists: the homepage read as a generated template because six
   consecutive three-up card grids, each with a heading + one-line grey
   subtitle, gave it a metronome. Here the shapes are deliberately unequal —
   one large face over five quiet rows, a wide statement beside two unboxed
   notes, one navy panel, a ruled index of three links, and a left-aligned
   close. Radii, weights and densities vary on purpose.

   Structure only. No new facts, no invented numbers. */

/* ── Hero: lead with a face ─────────────────────────────────────────────── */
.hm-hero{display:grid;grid-template-columns:1fr;gap:26px;min-width:0}
.hm-hero>*{min-width:0}
@media(min-width:820px){
  .hm-hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:44px}
}
.hm-hero-face{margin:0;display:grid;justify-items:center;gap:14px;min-width:0}
/* Sized to the 176px thumbnail on phones so the phone never pulls the 512px
   original (see the <picture> in index.html). */
.hm-hero-portrait{width:min(176px,46vw);height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;display:block;border:3px solid var(--gold)}
@media(min-width:820px){.hm-hero-portrait{width:210px}}
/* The plate sits on the hero, which style.css paints as a navy surface, so it
   carries its own navy fill and off-white text: it reads the same whether the
   hero ends up navy or white, and it never becomes navy-on-navy text. */
.hm-hero-plate{background:var(--navy);color:var(--white);border:1px solid var(--gold);
  border-radius:12px;padding:9px 16px;text-align:center;line-height:1.3;max-width:100%}
.hm-hero-plate .hm-nm{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--white)}
.hm-hero-plate .hm-rl{display:block;font-size:.78rem;color:var(--gold);margin-top:2px}
/* The audience note used to carry an inline #9AA3AE that only worked on navy.
   Token-driven now so it follows the palette. */
.hm-on-dark-note{margin-top:9px;color:var(--off-white);opacity:.82}

/* ── Shared section heading row: heading left, action right ─────────────── */
.hm-headrow{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end;
  justify-content:space-between;margin-bottom:22px}
.hm-headrow .section-head{margin-bottom:0}
.hm-headrow .actions{margin-top:0}

/* ── Who is in the room: one feature + five quiet rows ─────────────────── */
.hm-room-grid{display:grid;grid-template-columns:1fr;gap:28px;min-width:0}
@media(min-width:880px){
  .hm-room-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:38px;align-items:start}
}
/* The host is the only card here, and it is the only 18px radius on the page. */
.hm-host{background:var(--navy);color:var(--off-white);border-radius:18px;
  padding:26px;display:grid;gap:18px;min-width:0}
@media(min-width:540px){
  .hm-host{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;padding:30px}
}
.hm-host-face{width:min(160px,44vw);height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;display:block;margin:0 auto;border:3px solid var(--gold)}
@media(min-width:540px){.hm-host-face{margin:0}}
.hm-host .hm-who{font-family:var(--serif);font-size:1.55rem;line-height:1.15;color:var(--white)}
.hm-host .hm-role{color:var(--gold);font-size:.85rem;font-weight:700;margin-top:5px}
.hm-host-note{color:var(--off-white);font-size:.95rem;margin-top:11px}
.hm-host .actions{margin-top:16px}

.hm-panel{list-style:none;margin:0;padding:0;min-width:0}
.hm-panel li{border-bottom:1px solid var(--line);min-width:0}
.hm-panel li:first-child{border-top:1px solid var(--line)}
.hm-panel a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;
  padding:13px 4px;min-height:72px;color:var(--ink);border-radius:0}
.hm-panel a:hover{text-decoration:none}
.hm-panel a:hover .hm-pname{color:var(--gold-text)}
.hm-panel img{width:56px;height:56px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  border:2px solid var(--line);display:block;flex:0 0 auto}
.hm-pmeta{display:flex;flex-direction:column;min-width:0}
.hm-pname{font-family:var(--serif);font-size:1.08rem;line-height:1.2;color:var(--ink);
  overflow-wrap:break-word}
/* Role is running text, not a letterspaced uppercase eyebrow. */
.hm-prole{font-size:.8rem;color:var(--muted);margin-top:3px}

/* ── What the show is: a wide statement beside two unboxed notes ───────── */
.hm-about-grid{display:grid;grid-template-columns:1fr;gap:26px;min-width:0}
@media(min-width:880px){
  .hm-about-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start}
}
.hm-about-lead{border-left:3px solid var(--gold);padding-left:22px;min-width:0}
.hm-about-lead h2{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.72rem;line-height:1.18;letter-spacing:-.2px}
.hm-about-lead h2 em{font-style:normal;color:var(--gold-text)}
.hm-about-statement{font-family:var(--serif);color:var(--body);font-size:1.1rem;
  line-height:1.55;margin-top:14px}
.hm-about-notes{display:grid;gap:24px;min-width:0}
.hm-about-note{border-top:1px solid var(--line);padding-top:16px;min-width:0}
.hm-about-note h3{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:1.14rem;margin-bottom:7px}
.hm-about-note p{color:var(--muted);font-size:.96rem}

/* ── Watch: one wide player, two beside it (not a three-up grid) ───────── */
@media(min-width:760px){
  .hm-watch .vidgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-watch .vidgrid>:first-child{grid-column:1/-1}
}

/* ── Events: two cards, roomier ─────────────────────────────────────────── */
.hm-leadin{font-family:var(--serif);color:var(--body);font-size:1.05rem;
  margin:-6px 0 20px;max-width:60ch}
@media(min-width:880px){
  .hm-events .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}

/* ── Mentorship: the page's one navy panel ─────────────────────────────── */
.hm-mentor-panel{background:var(--navy);color:var(--off-white);border-radius:18px;
  padding:28px 24px;display:grid;grid-template-columns:1fr;gap:26px;min-width:0}
@media(min-width:880px){
  .hm-mentor-panel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;padding:42px 40px}
}
.hm-mentor-copy{min-width:0}
.hm-mentor-copy h2{font-family:var(--serif);font-weight:400;color:var(--white);
  font-size:1.66rem;line-height:1.2;letter-spacing:-.2px}
.hm-mentor-sub{color:var(--gold);font-size:.92rem;margin-top:8px}
.hm-mentor-copy p.hm-mentor-body{color:var(--off-white);font-size:1rem;margin-top:16px}
.hm-mentor-copy strong{color:var(--white)}
.hm-mentor-side{border-top:3px solid var(--gold);padding-top:18px;min-width:0}
.hm-mentor-side p{color:var(--off-white);font-size:.95rem}
.hm-mentor-side strong{color:var(--white)}
.hm-mentor-side .actions{margin-top:18px}

/* ── More from the show: three ruled rows, not three equal tiles ───────── */
.hm-index{list-style:none;margin:0;padding:0;min-width:0}
.hm-index li{border-bottom:1px solid var(--line);min-width:0}
.hm-index li:first-child{border-top:1px solid var(--line)}
.hm-index a{display:grid;grid-template-columns:1fr;gap:6px;
  padding:19px 4px;min-height:64px;color:var(--ink);border-radius:0}
@media(min-width:820px){
  .hm-index a{grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;
    gap:30px;align-items:baseline;padding:24px 6px}
}
.hm-index-k{font-family:var(--serif);font-size:1.22rem;color:var(--ink);overflow-wrap:break-word}
.hm-index-k .hm-soon{display:inline-block;margin-left:9px;font-family:var(--sans);
  font-size:.74rem;font-weight:700;color:var(--gold-text);vertical-align:middle}
.hm-index-d{color:var(--muted);font-size:.96rem}
.hm-index-go{color:var(--gold-text);font-weight:700;font-size:.92rem;white-space:nowrap}
@media(min-width:820px){.hm-index-go{justify-self:end}}
.hm-index a:hover{text-decoration:none}
.hm-index a:hover .hm-index-k{color:var(--gold-text)}

/* ── Close: left-aligned, ruled, no centred banner ─────────────────────── */
.hm-close{background:var(--band);border-top:3px solid var(--gold);border-bottom:0}
.hm-close-grid{display:grid;grid-template-columns:1fr;gap:22px;min-width:0}
@media(min-width:820px){
  .hm-close-grid{grid-template-columns:minmax(0,1.35fr) auto;align-items:center;gap:46px}
}
.hm-close h2{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.72rem;line-height:1.2;letter-spacing:-.2px}
.hm-close p{color:var(--body);font-size:1rem;margin-top:11px;max-width:58ch}
.hm-close .actions{margin-top:0}
@media(max-width:819px){.hm-close .actions{margin-top:2px}}

/* ── Topbar: the eleven flat links, grouped ─────────────────────────────
   The wrappers carry no decoration of their own on phones — they exist so
   the links read as three ideas instead of one undifferentiated queue.
   Scoped to .nav so any page still shipping the flat list is untouched. */
.nav .navgroup{display:flex;flex-direction:column;gap:2px;min-width:0}
@media(max-width:899px){
  .nav .navgroup+.navgroup{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
}
@media(min-width:900px){
  .nav .navgroup{flex-direction:row;align-items:center}
  .nav .navgroup+.navgroup{margin-left:3px}
}
@media(min-width:1100px){
  .nav .navgroup+.navgroup{margin-left:7px;padding-left:13px;border-left:1px solid var(--line)}
}
/* Where you are. Token-driven so it keeps passing contrast after inversion. */
.nav a[aria-current="page"]{color:var(--gold-text)}
@media(min-width:900px){
  .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}
}

/* ── Phone guards: the site has never had a sideways-scrolling page ────── */
.hm-host,.hm-panel,.hm-about-grid,.hm-about-lead,.hm-about-notes,.hm-about-note,
.hm-mentor-panel,.hm-mentor-copy,.hm-mentor-side,.hm-index,.hm-index li,
.hm-close-grid,.hm-headrow,.hm-watch,.hm-events{min-width:0}
.hm-about-statement,.hm-index-d,.hm-close p,.hm-host-note,.hm-mentor-side p{overflow-wrap:anywhere}