main {
  max-width: 1060px !important;
  width: 96% !important;
}

@media (max-width: 600px) {
  main {
    width: 92% !important;
  }
}

.hp {
  color: var(--hp-text-base);
}


:root {

  /* ── Colors: Base ────────────────────────────────────────────── */
  --hp-text-base:                #1a1008; /* Base text color for the whole homepage (set on .hp wrapper) */

  /* ── Colors: Masthead ────────────────────────────────────────── */
  --masthead-rule-heavy-bg:      #1a1008; /* Background of the heavy horizontal rule (top & bottom of masthead) */
  --masthead-rule-mid-bg:        #1a1008; /* Background of the mid-weight rule (.hp-rule-mid — defined in CSS, not currently used in index.njk) */
  --masthead-rule-thin-bg:       #8b5e10; /* Background of the thin rule line in the masthead */
  --masthead-eyebrow-color:      #4a3220; /* Text color of the eyebrow line above the site title ("A Private Ledger of Cinema…") */
  --masthead-title-color:        #1a1008; /* Text color of the main site title ("Cinemaths") */
  --masthead-tagline-color:      #4a3220; /* Text color of the tagline beneath the site title */
  --masthead-dateline-color:     #4a3220; /* Text color of the stats dateline (films rated / reviews published / etc.) */
  --masthead-dateline-border-top:    #8b5e10; /* Top border color of the dateline strip */
  --masthead-dateline-border-bottom: #8b5e10; /* Bottom border color of the dateline strip */

  /* ── Colors: Section banners (reused across Latest Notices, Recently Entered, etc.) ── */
  --section-head-color:          #4a3220; /* Text color of section banner headings, e.g. "Latest Notices" */
  --section-head-border-top:     #1a1008; /* Top border color of section banner headings */
  --section-head-border-bottom:  rgba(139,94,16,.16); /* Bottom border color of section banner headings */

  /* ── Colors: Main two-column grid ───────────────────────────────*/
  --main-grid-divider:           #8b5e10; /* Bottom divider color separating the main grid from the writing section */
  --main-col-left-border:        #8b5e10; /* Right border color dividing the left column from the right sidebar (desktop) */
  --main-col-left-stacked-border: #8b5e10; /* Bottom border color of the left column when it stacks above the sidebar (≤780px) */

  /* ── Colors: Featured review ─────────────────────────────────── */
  --feat-review-divider:         rgba(139,94,16,.16); /* Bottom divider under the featured review block */
  --feat-grade-letter-color:     #f4b97d; /* Text color of the letter grade inside the large featured-review badge */
  --feat-grade-bg-default:       #1a1008; /* Fallback background of the large grade badge (no grade class matched) */
  --feat-grade-bg-a:             #12301a; /* Large grade badge background — A grades */
  --feat-grade-bg-b:             #0f2238; /* Large grade badge background — B grades */
  --feat-grade-bg-c:             #2e2c0a; /* Large grade badge background — C grades */
  --feat-grade-bg-d:             #3a1010; /* Large grade badge background — D grades */
  --feat-grade-bg-f:             #5a0808; /* Large grade badge background — F grades */
  --feat-score-color:            #7a1515; /* Text color of the "XX / 100" score line */
  --feat-title-color:            #1a1008; /* Text color of the featured review's film title */
  --feat-byline-color:           #4a3220; /* Text color of the featured review byline (year · director · country · runtime) */
  --feat-link-color:             #7a1515; /* Text color of the "Read full notice →" link */
  --feat-link-underline:         rgba(122,21,21,.28); /* Underline color of the "Read full notice →" link */
  --feat-link-hover-color:       #1a1008; /* Text color of the "Read full notice →" link on hover */
  --feat-link-hover-underline:   #8b5e10; /* Underline color of the "Read full notice →" link on hover */

  /* ── Colors: Compact review list ────────────────────────────────*/
  --review-row-divider:          rgba(139,94,16,.16); /* Bottom divider between compact review rows */
  --review-row-hover-bg:         rgba(139,94,16,.07); /* Background of a compact review row on hover */
  --review-row-title-color:      #1a1008; /* Text color of the film title in a compact review row */
  --review-row-sub-color:        #4a3220; /* Text color of the director name in a compact review row */
  --review-row-date-color:       #4a3220; /* Text color of the date shown at the right of a compact review row */

  /* ── Colors: Grade pill (small badge — review rows, film rows) ── */
  --pill-letter-color:           #f4b97d; /* Text color of the letter grade inside the small pill */
  --pill-bg-default:             #1a1008; /* Fallback background of the small pill (no grade class matched) */
  --pill-bg-a:                   #1a5c3a; /* Small pill background — A grades */
  --pill-bg-b:                   #1c3d65; /* Small pill background — B grades */
  --pill-bg-c:                   #5c4210; /* Small pill background — C grades */
  --pill-bg-d:                   #6b2035; /* Small pill background — D grades */
  --pill-bg-f:                   #4a0c0c; /* Small pill background — F grades */

  /* ── Colors: "See all" style links ──────────────────────────────*/
  --see-all-link-color:          #4a3220; /* Text color of "See all" links, e.g. "All Reviews →" */
  --see-all-link-hover-color:    #1a1008; /* Text color of "See all" links on hover */

  /* ── Colors: Sidebar — film rows ────────────────────────────────*/
  --film-row-divider:            rgba(139,94,16,.16); /* Bottom divider between sidebar film rows */
  --film-row-hover-bg:           rgba(139,94,16,.07); /* Background of a sidebar film row on hover */
  --film-row-title-color:        #1a1008; /* Text color of the film title in a sidebar film row */
  --film-row-year-color:         #4a3220; /* Text color of the release year in a sidebar film row */
  --film-row-score-color:        #7a1515; /* Text color of the rating score in a sidebar film row */

  /* ── Colors: Sidebar — director rows ────────────────────────────*/
  --director-row-divider:        rgba(139,94,16,.16); /* Bottom divider between director rows */
  --director-row-hover-bg:       rgba(139,94,16,.07); /* Background of a director row on hover */
  --director-name-color:         #1a1008; /* Text color of the director's name */
  --director-meta-color:         #4a3220; /* Text color of the film count / Bayesian average in a director row */

  /* ── Colors: Watch projects ──────────────────────────────────────*/
  --project-title-color:         #1a1008; /* Text color of a watch-project title */
  --project-tally-color:         #4a3220; /* Text color of the "X of Y" tally under a project title */
  --project-bar-track-bg:        rgba(139,94,16,.16); /* Background (track) color of a project progress bar */
  --project-bar-track-border:    rgba(139,94,16,.2); /* Border color of a project progress bar track */
  --project-bar-fill-bg:         #1a1008; /* Fill color of a project progress bar */
  --project-pct-color:           #4a3220; /* Text color of the percentage label under a project progress bar */

  /* ── Colors: Browse / archive cards ─────────────────────────────*/
  --archive-cards-border:        #8b5e10; /* Outer border color of the archive-cards row */
  --archive-cards-border-bottom: #1a1008; /* Bottom border color of the archive-cards row */
  --archive-card-divider:        #8b5e10; /* Right border dividing individual archive cards (desktop) */
  --archive-card-stacked-border: #8b5e10; /* Bottom border between stacked archive cards (≤780px) */
  --archive-card-hover-bg:       rgba(139,94,16,.07); /* Background of an archive card on hover */
  --archive-card-title-color:    #1a1008; /* Text color of an archive card's title, e.g. "Ratings Ledger" */
  --archive-card-sub-color:      #4a3220; /* Text color of an archive card's descriptive subtext */
  --archive-card-count-color:    #5c3f0c; /* Text color of the entry-count label on an archive card */

  /* ── Colors: List groups (Genres, Franchises, Studios, etc.) ────*/
  --list-group-title-color:      #4a3220; /* Text color of a list-group heading */
  --list-group-title-border:     rgba(139,94,16,.16); /* Bottom border under a list-group heading */
  --list-tag-color:              #2b1a00; /* Text color of an individual list tag link */
  --list-tag-hover-color:        #5c3f0c; /* Text color of a list tag link on hover */
  --list-tag-count-color:        #4a3220; /* Text color of the parenthetical count next to a list tag */

  /* ── Colors: Recently updated lists strip ───────────────────────*/
  --recent-lists-divider:        rgba(139,94,16,.16); /* Bottom divider under the "Recently Active" strip */
  --recent-label-color:          #4a3220; /* Text color of the "Recently Active →" label */
  --recent-list-separator-color: #8b5e10; /* Color of the "·" separator dot between recently-active links */
  --recent-list-link-color:      #2b1a00; /* Text color of a recently-active list link */
  --recent-list-link-hover-color: #5c3f0c; /* Text color of a recently-active list link on hover */
  --recent-list-count-color:     #4a3220; /* Text color of the parenthetical count next to a recently-active link */

  /* ── Colors: Writing section ─────────────────────────────────────*/
  --writing-section-border-top:  #1a1008; /* Top border color of the writing section */
  --writing-section-border-bottom: rgba(139,94,16,.35); /* Bottom double-border color of the writing section */
  --writing-lead-divider:        #8b5e10; /* Right border dividing the featured writing piece from the list (desktop) */
  --writing-lead-stacked-border: #8b5e10; /* Bottom border of the writing lead block when stacked (≤780px) */
  --writing-kicker-divider:      rgba(139,94,16,.16); /* Bottom border under the writing piece's kicker row */
  --writing-kicker-rule-bg:      #8b5e10; /* Background of the decorative rule line inside the writing kicker */
  --writing-badge-color:         #4a3220; /* Text color of the writing type badge, e.g. "Feature" */
  --writing-date-color:          #4a3220; /* Text color of the date next to the writing type badge */
  --writing-title-color:         #1a1008; /* Text color of the featured writing piece's title link */
  --writing-title-hover-color:   #5c3f0c; /* Text color of the featured writing piece's title link on hover */
  --writing-excerpt-color:       #1a1008; /* Text color of the featured writing piece's excerpt */
  --writing-read-color:          #4a3220; /* Text color of the "Read in Full →" link */
  --writing-list-head-color:     #4a3220; /* Text color of the "Also in the Commonplace" heading */
  --writing-list-head-border:    rgba(139,94,16,.16); /* Bottom border under the "Also in the Commonplace" heading */
  --writing-item-divider:        rgba(139,94,16,.16); /* Bottom divider between secondary writing-list items */
  --writing-item-hover-bg:       rgba(139,94,16,.07); /* Background of a secondary writing-list item on hover */
  --writing-item-badge-color:    #4a3220; /* Text color of the type badge on a secondary writing-list item */
  --writing-item-title-color:    #1a1008; /* Text color of a secondary writing-list item's title */
  --writing-item-date-color:     #4a3220; /* Text color of a secondary writing-list item's date */

  /* ── Colors: Footer ───────────────────────────────────────────── */
  --footer-ornament-color:       #8b5e10; /* Text color of the footer ornament ("· ✦ · ✦ · ✦ ·") */
  --footer-ornament-border:      rgba(139,94,16,.16); /* Top border color above the footer ornament */


  /* ── Fonts: Masthead ─────────────────────────────────────────── */
  --masthead-eyebrow-font: 'goldentype-sc-original', serif; /* Font stack for the eyebrow line above the site title */
  --masthead-title-font:  'globe', 'playfair-display', serif; /* Font stack for the main site title */
  --masthead-tagline-font: 'im-fell-english', Georgia, serif; /* Font stack for the tagline beneath the site title */
  --masthead-dateline-font: 'goldentype-sc-original', serif; /* Font stack for the stats dateline */

  /* ── Fonts: Section banners ──────────────────────────────────── */
  --section-head-font: 'goldentype-original', serif; /* Font stack for section banner headings */

  /* ── Fonts: Featured review ──────────────────────────────────── */
  --feat-grade-font: 'block', 'globe', Impact, serif; /* Font stack for the letter grade in the large featured-review badge */
  --feat-score-font: 'block', 'playfair-display', Georgia, serif; /* Font stack for the score line */
  --feat-title-font: 'globe', 'playfair-display', serif; /* Font stack for the featured review's film title */
  --feat-byline-font: 'goldentype-sc-original', 'block', serif; /* Font stack for the featured review byline */
  --feat-link-font: 'goldentype-black', 'clarendon', Georgia, serif; /* Font stack for the "Read full notice →" link */

  /* ── Fonts: Compact review list / grade pill ─────────────────── */
  --pill-font: 'block', 'globe', Impact, serif; /* Font stack for the letter grade in the small pill */
  --review-row-title-font: 'globe', 'playfair-display', Georgia, serif; /* Font stack for the film title in a compact review row */
  --review-row-sub-font: 'century731', Georgia, serif; /* Font stack for the director name in a compact review row */
  --review-row-date-font: 'century731', serif; /* Font stack for the date in a compact review row */

  /* ── Fonts: "See all" style links ────────────────────────────── */
  --see-all-link-font: 'goldentype-original', serif; /* Font stack for "See all" links */

  /* ── Fonts: Sidebar — film rows ──────────────────────────────── */
  --film-row-title-font: 'globe', 'playfair-display', Georgia, serif; /* Font stack for the film title in a sidebar film row */
  --film-row-year-font: 'goldentype-sc-original', serif; /* Font stack for the release year in a sidebar film row */
  --film-row-score-font: 'block', 'playfair-display', Georgia, serif; /* Font stack for the rating score in a sidebar film row */

  /* ── Fonts: Sidebar — director rows ──────────────────────────── */
  --director-name-font: 'goldentype-sc', 'playfair-display', Georgia, serif; /* Font stack for the director's name */
  --director-meta-font: 'block', serif; /* Font stack for the film count / Bayesian average */

  /* ── Fonts: Watch projects ────────────────────────────────────── */
  --project-title-font: 'goldentype-original', 'playfair-display', Georgia, serif; /* Font stack for a watch-project title */
  --project-tally-font: 'century731', serif; /* Font stack for the "X of Y" tally */
  --project-pct-font: 'century731', serif; /* Font stack for the percentage label under a progress bar */

  /* ── Fonts: Browse / archive cards ───────────────────────────── */
  --archive-card-title-font: 'globe', 'playfair-display', serif; /* Font stack for an archive card's title */
  --archive-card-sub-font: 'century731', Georgia, serif; /* Font stack for an archive card's descriptive subtext */
  --archive-card-count-font: 'goldentype-sc-original', serif; /* Font stack for the entry-count label on an archive card */

  /* ── Fonts: List groups ───────────────────────────────────────── */
  --list-group-title-font: 'goldentype-sc-original', serif; /* Font stack for a list-group heading */
  --list-tag-font: 'clarendon', 'clarendon', Georgia, serif; /* Font stack for an individual list tag link */
  --list-tag-count-font: 'goldentype-sc-original', serif; /* Font stack for the parenthetical count next to a list tag */

  /* ── Fonts: Recently updated lists strip ─────────────────────── */
  --recent-list-separator-font: 'clarendon', serif; /* Font stack for the "·" separator dot */
  --recent-list-link-font: 'clarendon', 'clarendon', Georgia, serif; /* Font stack for a recently-active list link */
  --recent-list-count-font: 'goldentype-sc-original', serif; /* Font stack for the parenthetical count next to a recently-active link */
  --recent-label-font: 'goldentype-sc-original', serif; /* Font stack for the "Recently Active →" label */

  /* ── Fonts: Writing section ───────────────────────────────────── */
  --writing-badge-font: 'goldentype-original', serif; /* Font stack for the writing type badge */
  --writing-date-font: 'goldentype-original', serif; /* Font stack for the date next to the writing type badge */
  --writing-title-font: 'goldentype-sc', 'playfair-display', serif; /* Font stack for the featured writing piece's title */
  --writing-excerpt-font: 'century731', Georgia, serif; /* Font stack for the featured writing piece's excerpt */
  --writing-read-font: 'goldentype-black', 'clarendon', Georgia, serif; /* Font stack for the "Read in Full →" link */
  --writing-list-head-font: 'goldentype-original', serif; /* Font stack for the "Also in the Commonplace" heading */
  --writing-item-badge-font: 'goldentype-original', serif; /* Font stack for the type badge on a secondary writing-list item */
  --writing-item-title-font: 'goldentype-sc', 'playfair-display', Georgia, serif; /* Font stack for a secondary writing-list item's title */
  --writing-item-date-font: 'century731', serif; /* Font stack for a secondary writing-list item's date */

  /* ── Fonts: Footer ────────────────────────────────────────────── */
  --footer-ornament-font: 'century731', serif; /* Font stack for the footer ornament */

}




/* ── Masthead ──────────────────────────────────────────────── */
.hp-masthead {
  text-align: center;
  padding: 1.8rem 0 0;
  margin-bottom: 2rem;
}

.hp-rule-heavy { height: 4px; background: var(--masthead-rule-heavy-bg); }
.hp-rule-mid   { height: 2px; background: var(--masthead-rule-mid-bg); margin: 2px 0; }
.hp-rule-thin  { height: 1px; background: var(--masthead-rule-thin-bg); }
.hp-rule-gap   { height: 5px; }

.hp-eyebrow {
  font-family: var(--masthead-eyebrow-font);
  font-size: 0.6rem;
  font-weight: 300;
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0.52em;
  color: var(--masthead-eyebrow-color);
  margin: 0.75rem 0 0.3rem;
  opacity: 1.00;
}

.hp-site-title {
  font-family: var(--masthead-title-font);
  font-size: clamp(3.8rem, 9vw, 7rem);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--masthead-title-color);
  margin: 0.1rem 0 0.2rem;
}

.hp-tagline {
  font-family: var(--masthead-tagline-font);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--masthead-tagline-color);
  margin: 0 0 0.6rem;
  letter-spacing: 0.02em;
}

/* Stats dateline */
.hp-dateline {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  font-family: var(--masthead-dateline-font);
  font-size: 0.66rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--masthead-dateline-color);
  padding: 0.5rem 0;
  border-top: 1px solid var(--masthead-dateline-border-top);
  border-bottom: 1px solid var(--masthead-dateline-border-bottom);
  margin: 0.5rem 0 0;
  opacity: 1.00;
}
.hp-dateline .ds { margin: 0 0.7rem; opacity: 0.4; }

/* ── Section banners ───────────────────────────────────────── */
.hp-section-head {
  font-family: var(--section-head-font);
  font-size: 0.5rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--section-head-color);
  border-top: 2px solid var(--section-head-border-top);
  border-bottom: 1px solid var(--section-head-border-bottom);
  padding: 0.32rem 0;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hp-section-head-orn { opacity: 0.4; font-size: 0.5rem; }

/* ── Main two-column grid ───────────────────────────────────── */
.hp-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 3px double var(--main-grid-divider);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.hp-col-left {
  border-right: 1px solid var(--main-col-left-border);
  padding-right: 2.2rem;
}
.hp-col-right {
  padding-left: 2.2rem;
}

/* ── Featured review ───────────────────────────────────────── */
.hp-feat {
  margin-bottom: 1.3rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--feat-review-divider);
}

.hp-feat-grade-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 0.6rem;
}

.hp-feat-grade {
  font-family: var(--feat-grade-font);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--feat-grade-letter-color);
  background: var(--feat-grade-bg-default);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 68px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 0 6px;
}
.hp-feat-grade.ga { background: var(--feat-grade-bg-a); }
.hp-feat-grade.gb { background: var(--feat-grade-bg-b); }
.hp-feat-grade.gc { background: var(--feat-grade-bg-c); }
.hp-feat-grade.gd { background: var(--feat-grade-bg-d); }
.hp-feat-grade.gf { background: var(--feat-grade-bg-f); }

.hp-feat-hed {
  flex: 1;
}

.hp-feat-score {
  font-family: var(--feat-score-font);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--feat-score-color);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.2rem;
}

.hp-feat-title {
  font-family: var(--feat-title-font);
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--feat-title-color);
  line-height: 1.05;
  margin: 0 0 0.22rem;
}

.hp-feat-byline {
  font-family: var(--feat-byline-font);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--feat-byline-color);
  opacity: 1.00;
}

.hp-feat-link {
  font-family: var(--feat-link-font);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--feat-link-color);
  text-decoration: none;
  border-bottom: 1px solid var(--feat-link-underline);
  padding-bottom: 1px;
  transition: color 0.14s, border-color 0.14s;
  background: none;
}
.hp-feat-link:hover {
  color: var(--feat-link-hover-color);
  border-color: var(--feat-link-hover-underline);
  background: none;
}

/* ── Review row (compact list) ─────────────────────────────── */
.hp-review-list {
  display: flex;
  flex-direction: column;
}

.hp-review-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 0 0.65rem;
  align-items: start;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--review-row-divider);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
  background: none;
}
.hp-review-row:hover { background: var(--review-row-hover-bg); }
.hp-review-row:last-child { border-bottom: none; }

/* ── Pill (shared) ─────────────────────────────────────────── */
.hp-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pill-font);
  font-weight: 800;
  font-size: 0.6rem;
  color: var(--pill-letter-color);
  background: var(--pill-bg-default);
  width: 28px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  letter-spacing: 0;
}
.hp-pill.ga { background: var(--pill-bg-a); }
.hp-pill.gb { background: var(--pill-bg-b); }
.hp-pill.gc { background: var(--pill-bg-c); }
.hp-pill.gd { background: var(--pill-bg-d); }
.hp-pill.gf { background: var(--pill-bg-f); }

.hp-row-title {
  font-family: var(--review-row-title-font);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--review-row-title-color);
  line-height: 1.2;
  display: block;
}
.hp-row-sub {
  font-family: var(--review-row-sub-font);
  font-size: 0.7rem;
  font-style: italic;
  font-stretch: condensed;
  color: var(--review-row-sub-color);
  line-height: 1.3;
  display: block;
}
.hp-row-aside {
  font-family: var(--review-row-date-font);
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  color: var(--review-row-date-color);
  opacity: 1.00;
  white-space: nowrap;
  text-align: right;
  padding-top: 4px;
}

/* ── See-all ───────────────────────────────────────────────── */
.hp-see-all {
  font-family: var(--see-all-link-font);
  font-size: 0.46rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--see-all-link-color);
  text-decoration: none;
  background: none;
  display: inline-block;
  margin-top: 0.85rem;
  transition: color 0.14s;
  opacity: 0.81;
}
.hp-see-all:hover { color: var(--see-all-link-hover-color); background: none; opacity: 1; }

/* ── Right sidebar ─────────────────────────────────────────── */
.hp-sidebar-block {
  margin-bottom: 1.6rem;
}

/* Film row (sidebar) */
.hp-film-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 0 0.5rem;
  align-items: center;
  padding: 0.32rem 0.2rem;
  border-bottom: 1px solid var(--film-row-divider);
  text-decoration: none;
  color: inherit;
  background: none;
  transition: background 0.1s;
}
.hp-film-row:hover { background: var(--film-row-hover-bg); }
.hp-film-title {
  font-family: var(--film-row-title-font);
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--film-row-title-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.25;
}
.hp-film-year {
  font-family: var(--film-row-year-font);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--film-row-year-color);
  opacity: 0.75;
  display: block;
}
.hp-film-score {
  font-family: var(--film-row-score-font);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--film-row-score-color);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Director row */
.hp-dir-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.38rem 0.2rem;
  border-bottom: 1px solid var(--director-row-divider);
  text-decoration: none;
  color: inherit;
  background: none;
  transition: background 0.1s;
}
.hp-dir-row:hover { background: var(--director-row-hover-bg); }
.hp-dir-name {
  font-family: var(--director-name-font);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--director-name-color);
  line-height: 1.2;
}
.hp-dir-meta {
  font-family: var(--director-meta-font);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--director-meta-color);
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Watch Projects ────────────────────────────────────────── */
.hp-projects {
  margin-bottom: 2rem;
}
.hp-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.75rem 1.8rem;
}
.hp-proj-item {
  text-decoration: none;
  color: inherit;
  display: block;
  background: none;
  transition: opacity 0.14s;
}
.hp-proj-item:hover { opacity: 0.7; background: none; }
.hp-proj-title {
  font-family: var(--project-title-font);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--project-title-color);
  display: block;
  margin-bottom: 0.22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-proj-tally {
  font-family: var(--project-tally-font);
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  color: var(--project-tally-color);
  opacity: 0.78;
  display: block;
  margin-bottom: 0.22rem;
}
.hp-proj-bar-wrap {
  height: 3px;
  background: var(--project-bar-track-bg);
  border: 1px solid var(--project-bar-track-border);
  overflow: hidden;
}
.hp-proj-bar-fill {
  height: 100%;
  background: var(--project-bar-fill-bg);
}
.hp-proj-pct {
  font-family: var(--project-pct-font);
  font-size: 0.45rem;
  letter-spacing: 0.14em;
  color: var(--project-pct-color);
  opacity: 0.66;
  display: block;
  margin-top: 0.15rem;
  text-align: right;
}

/* ── Browse / archive nav ──────────────────────────────────── */
.hp-browse {
  margin-bottom: 2.5rem;
}

.hp-archive-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--archive-cards-border);
  border-bottom: 3px solid var(--archive-cards-border-bottom);
  margin-bottom: 1.8rem;
  overflow: hidden;
}
.hp-archive-card {
  padding: 1.2rem 1.4rem 1.1rem;
  border-right: 1px solid var(--archive-card-divider);
  text-decoration: none;
  display: block;
  background: none;
  transition: background 0.12s;
}
.hp-archive-card:last-child { border-right: none; }
.hp-archive-card:hover { background: var(--archive-card-hover-bg); }
.hp-card-title {
  font-family: var(--archive-card-title-font);
  font-size: 1.2rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--archive-card-title-color);
  line-height: 1.05;
  margin-bottom: 0.32rem;
}
.hp-card-sub {
  font-family: var(--archive-card-sub-font);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--archive-card-sub-color);
  line-height: 1.45;
}
.hp-card-count {
  font-family: var(--archive-card-count-font);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--archive-card-count-color);
  margin-top: 0.55rem;
  display: block;
  opacity: 0.89;
}

/* ── List groups ───────────────────────────────────────────── */
.hp-list-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
}
.hp-list-group {
  margin-bottom: 1.1rem;
}
.hp-list-group-title {
  font-family: var(--list-group-title-font);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--list-group-title-color);
  opacity: 0.81;
  border-bottom: 1px solid var(--list-group-title-border);
  padding-bottom: 0.22rem;
  margin-bottom: 0.45rem;
}
.hp-list-entries {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0;
  line-height: 1.8;
}
.hp-list-tag {
  font-family: var(--list-tag-font);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--list-tag-color);
  text-decoration: none;
  background: none;
  margin-right: 0.6rem;
  transition: color 0.14s;
}
.hp-list-tag:hover { color: var(--list-tag-hover-color); background: none; }
.hp-list-tag-ct {
  font-family: var(--list-tag-count-font);
  font-size: 0.55rem;
  color: var(--list-tag-count-color);
  opacity: 0.63;
  margin-left: 1px;
}

/* ── Staggered entry animation ─────────────────────────────── */
@keyframes hpFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-feat         { animation: hpFadeUp 0.4s ease both; }
.hp-review-row   { animation: hpFadeUp 0.35s ease both; }
.hp-film-row     { animation: hpFadeUp 0.35s ease both; }
.hp-review-row:nth-child(1) { animation-delay: 0.05s; }
.hp-review-row:nth-child(2) { animation-delay: 0.09s; }
.hp-review-row:nth-child(3) { animation-delay: 0.13s; }
.hp-review-row:nth-child(4) { animation-delay: 0.17s; }
.hp-review-row:nth-child(5) { animation-delay: 0.21s; }
.hp-review-row:nth-child(6) { animation-delay: 0.25s; }
.hp-review-row:nth-child(7) { animation-delay: 0.29s; }
.hp-review-row:nth-child(8) { animation-delay: 0.33s; }
.hp-film-row:nth-child(1)  { animation-delay: 0.04s; }
.hp-film-row:nth-child(2)  { animation-delay: 0.08s; }
.hp-film-row:nth-child(3)  { animation-delay: 0.12s; }
.hp-film-row:nth-child(4)  { animation-delay: 0.16s; }
.hp-film-row:nth-child(5)  { animation-delay: 0.20s; }
.hp-film-row:nth-child(6)  { animation-delay: 0.24s; }
.hp-film-row:nth-child(7)  { animation-delay: 0.28s; }
.hp-film-row:nth-child(8)  { animation-delay: 0.32s; }
.hp-film-row:nth-child(9)  { animation-delay: 0.36s; }
.hp-film-row:nth-child(10) { animation-delay: 0.40s; }
.hp-proj-item    { animation: hpFadeUp 0.35s ease both; }
.hp-archive-card { animation: hpFadeUp 0.4s ease both; }
.hp-archive-card:nth-child(1) { animation-delay: 0.05s; }
.hp-archive-card:nth-child(2) { animation-delay: 0.10s; }
.hp-archive-card:nth-child(3) { animation-delay: 0.15s; }

/* ── Recently updated lists strip ─────────────────────────── */
.hp-recent-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  align-items: baseline;
  border-bottom: 1px solid var(--recent-lists-divider);
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
}
.hp-recent-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}
.hp-recent-list-item:not(:last-child)::after {
  content: '·';
  font-family: var(--recent-list-separator-font);
  font-size: 0.5rem;
  color: var(--recent-list-separator-color);
  opacity: 0.59;
  margin: 0 0.4rem;
}
.hp-recent-list-link {
  font-family: var(--recent-list-link-font);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--recent-list-link-color);
  text-decoration: none;
  background: none;
  transition: color 0.14s;
}
.hp-recent-list-link:hover { color: var(--recent-list-link-hover-color); background: none; }
.hp-recent-list-ct {
  font-family: var(--recent-list-count-font);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--recent-list-count-color);
  opacity: 0.63;
}
.hp-recent-label {
  font-family: var(--recent-label-font);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--recent-label-color);
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* ── Writing section ───────────────────────────────────────── */
.hp-writing {
  border-top: 4px solid var(--writing-section-border-top);
  border-bottom: 3px double var(--writing-section-border-bottom);
  padding: 1.6rem 0 1.8rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
}

.hp-writing-lead {
  border-right: 1px solid var(--writing-lead-divider);
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
}

.hp-writing-lead-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--writing-kicker-divider);
}
.hp-writing-lead-kicker-rule {
  flex: 1; height: 1px;
  background: var(--writing-kicker-rule-bg); opacity: 0.33;
}

.hp-writing-badge {
  font-family: var(--writing-badge-font);
  font-size: 0.36rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--writing-badge-color);
  opacity: 0.81;
}

.hp-writing-date {
  font-family: var(--writing-date-font);
  font-size: 0.38rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--writing-date-color);
  opacity: 0.66;
}

.hp-writing-title {
  font-family: var(--writing-title-font);
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: normal;
  line-height: 1.0;
  letter-spacing: 0.01em;
  color: var(--writing-title-color);
  margin: 0 0 0.65rem;
  text-decoration: none;
  display: block;
  background: none;
  transition: color 0.14s;
}
.hp-writing-title:hover { color: var(--writing-title-hover-color); background: none; }

.hp-writing-excerpt {
  font-family: var(--writing-excerpt-font);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--writing-excerpt-color);
  opacity: 0.84;
  flex: 1;
  margin-bottom: 0.9rem;
}

.hp-writing-read {
  font-family: var(--writing-read-font);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--writing-read-color);
  text-decoration: none;
  background: none;
  opacity: 0.78;
  margin-top: auto;
  transition: opacity 0.14s;
}
.hp-writing-read:hover { opacity: 1; background: none; }

/* Right column — other pieces */
.hp-writing-list {
  padding-left: 1.8rem;
  display: flex;
  flex-direction: column;
}

.hp-writing-list-head {
  font-family: var(--writing-list-head-font);
  font-size: 0.38rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--writing-list-head-color);
  opacity: 0.66;
  border-bottom: 1px solid var(--writing-list-head-border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.2rem;
}

.hp-writing-item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--writing-item-divider);
  text-decoration: none;
  color: inherit;
  background: none;
  transition: background 0.1s;
}
.hp-writing-item:hover { background: var(--writing-item-hover-bg); }
.hp-writing-item:last-of-type { border-bottom: none; }

.hp-writing-item-badge {
  font-family: var(--writing-item-badge-font);
  font-size: 0.34rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--writing-item-badge-color);
  opacity: 0.63;
}
.hp-writing-item-title {
  font-family: var(--writing-item-title-font);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--writing-item-title-color);
  line-height: 1.2;
}
.hp-writing-item-date {
  font-family: var(--writing-item-date-font);
  font-size: 0.34rem;
  letter-spacing: 0.18em;
  color: var(--writing-item-date-color);
  opacity: 0.59;
}

@media (max-width: 780px) {
  .hp-writing { grid-template-columns: 1fr; }
  .hp-writing-lead { border-right: none; border-bottom: 1px solid var(--writing-lead-stacked-border); padding-right: 0; padding-bottom: 1.2rem; margin-bottom: 1.2rem; }
  .hp-writing-list { padding-left: 0; }
}

/* ── Footer ornament ───────────────────────────────────────── */
.hp-foot-orn {
  text-align: center;
  font-family: var(--footer-ornament-font);
  font-size: 0.52rem;
  letter-spacing: 0.45em;
  color: var(--footer-ornament-color);
  opacity: 0.6;
  padding: 1rem 0 0.5rem;
  border-top: 1px solid var(--footer-ornament-border);
}

/* ── Responsive ────────────────────────────────────────────── */
/* ── Mobile: 780px and below ───────────────────────────────── */
@media (max-width: 780px) {
  /* Main two-column layout */
  .hp-main {
    grid-template-columns: 1fr;
  }
  .hp-col-left {
    border-right: none;
    border-bottom: 1px solid var(--main-col-left-stacked-border);
    padding-right: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .hp-col-right { padding-left: 0; }

  /* Archive cards: single column, stacked */
  .hp-archive-cards {
    grid-template-columns: 1fr;
  }
  .hp-archive-card {
    border-right: none;
    border-bottom: 1px solid var(--archive-card-stacked-border);
  }
  .hp-archive-card:last-child { border-bottom: none; }

  /* List groups: single column */
  .hp-list-groups { grid-template-columns: 1fr; gap: 0; }

  /* Writing section */
  .hp-writing {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hp-writing-lead {
    border-right: none;
    border-bottom: 1px solid var(--writing-lead-stacked-border);
    padding-right: 0;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
  }
  .hp-writing-list { padding-left: 0; }
}

/* ── Mobile: 600px and below ───────────────────────────────── */
@media (max-width: 600px) {
  /* Masthead */
  .hp-masthead { padding: 1.2rem 0 0; margin-bottom: 1.4rem; }
  .hp-site-title { font-size: clamp(2.6rem, 13vw, 3.8rem); }
  .hp-tagline { font-size: 0.82rem; }
  .hp-eyebrow { font-size: 0.42rem; letter-spacing: 0.4em; }

  /* Dateline: stack the stats, hide separators */
  .hp-dateline {
    flex-direction: column;
    gap: 0.18rem;
    font-size: 0.42rem;
    letter-spacing: 0.22em;
    padding: 0.6rem 0;
  }
  .hp-dateline .ds { display: none; }

  /* Featured review: tighten grade badge */
  .hp-feat-grade {
    font-size: 2.4rem;
    min-width: 54px;
    height: 54px;
  }
  .hp-feat-title { font-size: clamp(1.2rem, 5.5vw, 1.55rem); }
  .hp-feat-byline { font-size: 0.42rem; letter-spacing: 0.16em; }

  /* Review rows: drop the date aside on very small screens */
  .hp-review-row {
    grid-template-columns: 32px 1fr;
  }
  .hp-row-aside { display: none; }

  /* Film rows in sidebar: truncate more aggressively */
  .hp-film-title { font-size: 0.72rem; }
  .hp-film-score { font-size: 0.65rem; }

  /* Projects: single column on small phones */
  .hp-proj-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
  .hp-proj-title { font-size: 0.72rem; }

  /* Archive cards: reduce padding */
  .hp-archive-card { padding: 0.9rem 1rem 0.85rem; }
  .hp-card-title  { font-size: 1rem; }
  .hp-card-sub    { font-size: 0.68rem; }

  /* List tags: slightly larger for thumb tap targets */
  .hp-list-tag    { font-size: 0.62rem; margin-right: 0.5rem; }

  /* Recent lists: allow wrapping more freely */
  .hp-recent-lists { gap: 0.4rem 0; }

  /* Section heads: slightly tighter */
  .hp-section-head { font-size: 0.46rem; padding: 0.28rem 0; margin-bottom: 0.9rem; }

  /* Writing section */
  .hp-writing { padding: 1.2rem 0 1.4rem; }
  .hp-writing-title { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  .hp-writing-excerpt { font-size: 0.82rem; }
}

/* ── Mobile: 420px and below ───────────────────────────────── */
@media (max-width: 420px) {
  .hp-proj-grid { grid-template-columns: 1fr; }
  .hp-site-title { font-size: clamp(2.2rem, 12vw, 2.8rem); }
  .hp-feat-grade { font-size: 2rem; min-width: 46px; height: 46px; }
  .hp-dateline { font-size: 0.38rem; }
}