/* michellewong.com — site stylesheet
   Section accent colors carried over from the original one-page design. */

:root {
  --ink: #1b1e24;
  --ink-soft: #3a3f48;
  --paper: #ffffff;
  --blue: #2ba3d4;      /* news */
  --teal: #2680a3;      /* headshots */
  --sky: #a8cfe6;       /* vo demos */
  --amber: #dfa64a;     /* photo gallery */
  --gray: #eceef0;      /* contact */
  --header-h: 64px;
  font-size: 17px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.container.narrow { max-width: 780px; }
.center { text-align: center; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(20, 22, 27, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.solid { position: sticky; background: #14161b; }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand {
  color: #fff; text-decoration: none; font-weight: 700;
  letter-spacing: 0.18em; font-size: 0.95rem;
}
.nav-links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color: #fff; border-bottom-color: var(--amber); }
.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; transition: 0.2s; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero .slide {
  position: absolute; inset: 0; background-size: cover; background-position: center 30%;
  opacity: 0; transition: opacity 1.8s ease;
}
.hero .slide.active { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,16,0.45), rgba(10,12,16,0.25) 55%, rgba(10,12,16,0.65)); }

/* Hero prev/next arrows. Sit above the overlay, vertically centred, clear of the centred
   hero text. Deliberately low-contrast until hovered/focused so they don't compete with
   the headline; they stay permanently visible on touch devices (no hover there). */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: rgba(10,12,16,0.28); border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 50%; color: #fff; cursor: pointer;
  opacity: 0.65; transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
/* class rules that set `display` outrank the browser's [hidden] rule — keep this override
   (same gotcha as .photo-grid[hidden]) so hiding the arrows actually works */
.hero-arrow[hidden] { display: none; }
.hero-arrow svg { width: 22px; height: 22px; }
/* kept as separate rules on purpose: an unsupported :focus-visible would invalidate the
   whole selector list, taking the :hover style down with it on older Safari */
.hero-arrow:hover { opacity: 1; background: rgba(10,12,16,0.55); border-color: #fff; }
.hero-arrow:focus-visible { opacity: 1; background: rgba(10,12,16,0.55); border-color: #fff; outline: 2px solid #fff; outline-offset: 3px; }
.hero-prev { left: 1.5rem; }
.hero-next { right: 1.5rem; }
@media (hover: none) { .hero-arrow { opacity: 0.9; } }
/* On phones the headline and subtitle wrap to the full width of the hero, so vertically
   centred arrows land on top of the text. Drop them below the text block instead, anchored
   near the bottom edge (which also keeps them clear on short/landscape screens, where the
   centred text block sits lower relative to the hero). */
@media (max-width: 600px) {
  .hero-arrow { width: 44px; height: 44px; top: auto; bottom: 2.2rem; transform: none; }
  .hero-prev { left: 0.6rem; }
  .hero-next { right: 0.6rem; }
}
.hero-text { position: relative; text-align: center; color: #fff; padding: 0 1rem; }
.hero-text h1 {
  font-size: clamp(2.2rem, 7vw, 4.5rem); letter-spacing: 0.22em; margin: 0 0 0.4rem;
  font-weight: 800; text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.hero-text p { letter-spacing: 0.28em; text-transform: uppercase; font-size: clamp(0.7rem, 2vw, 0.95rem); margin: 0 0 1.8rem; }

.btn {
  display: inline-block; padding: 0.7rem 1.8rem; border: 2px solid #fff; color: #fff;
  text-decoration: none; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.78rem;
  transition: 0.2s;
}
.btn:hover { background: #fff; color: var(--ink); }
.btn-light { border-color: #fff; }

/* Instagram/IMDb icon links — hand-built (icon glyph + wordmark badge), not downloaded
   logo assets, so they won't be pixel-identical to the official marks. Both styled as
   white/transparent outline buttons (shared .icon-link base) so they read as one family.
   Used in two places: the hero (.hero-social-links, full size) and the footer
   (.footer-social-links, smaller). Instagram links to @notmichellewong; IMDb links to
   nm2800003 — update every instance together (both places here, plus the Person JSON-LD in
   index.html's <head> and the Socials section) if either URL ever changes. */
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%;
  color: #fff; text-decoration: none; transition: 0.2s; background: transparent;
}
.icon-link:hover { background: #fff; color: var(--ink); }
.icon-link svg { width: 22px; height: 22px; }
.icon-link-imdb {
  width: auto; padding: 0 0.9rem; border-radius: 8px;
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
}

.hero-social-links { display: flex; justify-content: center; align-items: center; gap: 1rem; }

.footer-social-links { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.footer-social-links .icon-link { width: 28px; height: 28px; border-width: 1.5px; }
.footer-social-links .icon-link svg { width: 14px; height: 14px; }
.footer-social-links .icon-link-imdb { width: auto; height: 22px; font-size: 0.66rem; padding: 0 0.5rem; border-radius: 5px; }

/* ---------- sections ---------- */
.section { padding: 4.5rem 0; }
.section h2 {
  text-align: center; font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 2.5rem; font-weight: 700;
}

.sec-news { background: var(--blue); color: #fff; }
.sec-about {
  background: var(--ink) url("../media/uploads/2013/06/pxBungy.jpg") center / cover fixed no-repeat;
  position: relative; color: #fff;
}
.sec-about::before { content: ""; position: absolute; inset: 0; background: rgba(15,18,24,0.72); }
.sec-about .container { position: relative; }
.sec-about p { font-size: 1.05rem; }
.sec-headshots { background: var(--teal); color: #fff; }
.sec-vo { background: var(--sky); color: var(--ink); }
.sec-photos { background: var(--amber); color: #fff; }
.sec-team { background: var(--gray); color: var(--ink); }

@media (max-width: 900px) { .sec-about { background-attachment: scroll; } }

/* ---------- socials: instagram embed grid (4x2 on desktop) ---------- */
.ig-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem;
}
.ig-grid iframe {
  width: 100%; height: 460px; border: 0; border-radius: 10px;
  background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ig-grid { grid-template-columns: 1fr; } }

/* ---------- headshots ---------- */
.headshot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.4rem; max-width: 940px; margin: 0 auto; }
.headshot {
  position: relative; margin: 0; display: block; border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2); aspect-ratio: 4/5;
}
.headshot > a:first-child { display: block; width: 100%; height: 100%; }
.headshot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.headshot:hover img { transform: scale(1.04); }
.resume-tile img { object-position: top; }

/* Download icon: overlaid in the bottom-right corner of a headshot or the resume thumbnail,
   hidden until the tile is hovered (or the icon itself is keyboard-focused). */
.download-icon {
  position: absolute; bottom: 0.6rem; right: 0.6rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20,22,27,0.72); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s, background 0.2s;
}
.download-icon svg { width: 18px; height: 18px; }
.headshot:hover .download-icon,
.download-icon:focus-visible { opacity: 1; }
.download-icon:hover { background: rgba(20,22,27,0.92); }
/* Touch devices have no real hover, so a hover-only icon is undiscoverable there —
   show it permanently when the primary input can't hover. */
@media (hover: none) {
  .download-icon { opacity: 1; }
}

/* ---------- vo demos & reels (self-hosted audio/video) ---------- */
/* 2 columns: left = 4 audio demos (1 per row), right = 2 video reels (each spans 2 rows).
   Columns are DELIBERATELY unequal — the right column is sized so the <video> ITSELF (not
   the whole card) renders at its native 16:9, full width, uncropped; the left column just
   takes what's left. --demo-h is the single source of truth: row height is an EXPLICIT
   fixed value (not "auto" — auto rows would let the <video>s' own intrinsic sizing bleed
   into the row-track math via grid-row: span 2, making demo-tile heights depend on video
   load timing).
   The reel column width = (reel card height, minus the figcaption+padding "chrome" that
   isn't video) × 16/9, plus that chrome's horizontal padding back. --reel-chrome-h is that
   vertical chrome: figcaption line-height (1em × body's line-height 1.65 = 1.65rem) + its
   margin-bottom (0.4rem) + the card's own top/bottom padding (0.5rem + 0.6rem) = 3.15rem;
   --reel-pad-x is the card's left+right padding (0.7rem × 2 = 1.4rem). If you change
   .demo/.reel padding, the figcaption's margin, or font-size, recompute and update
   --reel-chrome-h and --reel-pad-x too, or the video will no longer be exactly 16:9.
   Changing --demo-h or --demo-gap alone is always safe — everything else recalculates
   automatically. --demo-h (10.1rem, confirmed 2026-07-24) was reverse-solved so the left
   column's right edge lands at the "M" in the "Demos & Reels" heading, per Michelle's
   request — if the heading text or its styling changes, re-measure and re-solve rather
   than guessing a new value. */
.demo-grid {
  --demo-h: 10.1rem;
  --demo-gap: 1.6rem;
  --reel-chrome-h: 3.15rem;
  --reel-pad-x: 1.4rem;
  display: grid;
  grid-template-columns: 1fr calc(((var(--demo-h) * 2 + var(--demo-gap) - var(--reel-chrome-h)) * 16 / 9) + var(--reel-pad-x));
  grid-auto-flow: column;
  grid-template-rows: repeat(4, var(--demo-h));
  gap: var(--demo-gap);
}
.demo, .reel {
  margin: 0; background: #fff; border-radius: 10px; padding: 0.5rem 0.7rem 0.6rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.demo { display: flex; flex-direction: column; justify-content: center; }
.demo figcaption, .reel figcaption {
  font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0.4rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
}
.demo-len { font-weight: 400; font-size: 0.78rem; color: #8a8f99; letter-spacing: 0.05em; }
.reel { grid-row: span 2; display: flex; flex-direction: column; }
.reel video { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 6px; background: #000; }
.demo-desc { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.4; color: #5a6070; }
.demo audio { width: 100%; display: block; }

/* On phones/tablets the desktop 2-column layout can't work: the reel column width is a
   fixed calc() (sized so the video is exactly 16:9), not viewport-relative, so below the
   width where it stops fitting it would overflow the screen and force horizontal scroll.
   Below 900px, stack everything into one column — demos size to their natural height, and
   each reel renders at a full-width 16:9. Everything above 900px keeps the desktop layout. */
@media (max-width: 900px) {
  .demo-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
  }
  .reel { grid-row: auto; }
  .reel video { flex: none; height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- photo gallery ---------- */
/* Split into two grids (first 8 photos, then the rest) so the second can be hidden until
   "Show More" is clicked — see js/main.js. Same class on both keeps their column count
   identical; the margin-top on the second matches the grid's own gap so, once revealed,
   it reads as one continuous grid rather than two separate blocks. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }
.photo-grid[hidden] { display: none; } /* the [hidden] attribute alone loses to the class's own "display: grid" at equal specificity — without this override, "hidden" is silently ignored and the grid shows anyway */
.photo-grid a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.photo-grid a:hover img { transform: scale(1.05); }
.photo-grid-more { margin-top: 0.8rem; }

.show-more-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.8rem; background: none; cursor: pointer; font: inherit;
}
.show-more-arrow { width: 16px; height: 16px; transition: transform 0.2s; }
.show-more-btn.open .show-more-arrow { transform: rotate(180deg); }

/* ---------- team ---------- */
/* wider container than other sections so three fixed-width cards fit one row on wide windows */
.sec-team .container { max-width: 1120px; }
.agents { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; }
.agent {
  background: #fff; border-radius: 10px; padding: 1.8rem 1.5rem; text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  /* fixed width so all cards match; sized to fit a two-name card on one line */
  width: 340px; max-width: 100%;
}
.agent h3 { margin: 0 0 0.3rem; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; color: var(--teal); }
.agent-name { font-weight: 700; font-size: 1.15rem; margin: 0 0 0.4rem; }
.agent p { margin: 0; }

/* ---------- send-me-a-note form (self-contained block; movable to any section) ---------- */
.note-block {
  max-width: 640px; margin: 3rem auto 0; background: #fff; border-radius: 10px;
  padding: 2rem 2.2rem 2.2rem; box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.note-title {
  text-align: center; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.95rem; color: var(--teal); margin: 0 0 1.5rem;
}
.note-form label { display: block; font-weight: 600; font-size: 0.88rem; margin: 0 0 1.1rem; }
.note-form .req { color: var(--amber); }
.note-form input, .note-form textarea {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.7rem;
  border: 1px solid #d4d7dc; border-radius: 6px; font: inherit; background: #fafbfc;
}
.note-form input:focus, .note-form textarea:focus {
  outline: 2px solid var(--blue); border-color: transparent; background: #fff;
}
.note-form textarea { resize: vertical; }
.note-form button {
  background: var(--ink); color: #fff; border: 0; padding: 0.75rem 2.4rem; border-radius: 6px;
  font: inherit; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; cursor: pointer;
}
.note-form button:hover { background: var(--teal); }
.form-status {
  margin: 0 0 1.3rem; padding: 0.7rem 0.9rem; border-radius: 6px;
  font-size: 0.88rem; font-weight: 600;
}
.form-status.success { background: #e5f5ec; color: #1f7a4d; }
.form-status.error { background: #fbe8e6; color: #a3352a; }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { background: #14161b; color: rgba(255,255,255,0.65); text-align: center; padding: 1.6rem 1rem; font-size: 0.82rem; letter-spacing: 0.08em; }

/* ---------- subpages (news archive, resume) ---------- */
.page { padding: 2.5rem 1.25rem 4rem; max-width: 860px; }
.page h1 { letter-spacing: 0.12em; text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 2.3rem); }
.year-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 2.5rem; }
.year-nav a {
  text-decoration: none; background: var(--gray); color: var(--ink); padding: 0.3rem 0.8rem;
  border-radius: 999px; font-size: 0.82rem; font-weight: 600;
}
.year-nav a:hover { background: var(--blue); color: #fff; }
.year { color: var(--teal); border-bottom: 3px solid var(--amber); padding-bottom: 0.3rem; letter-spacing: 0.1em; margin-top: 3rem; }

/* overflow-wrap lets long unbroken strings — pasted URLs, run-together hashtags in the
   migrated 2010–2020 posts — break onto the next line instead of overflowing narrow
   screens and forcing horizontal scroll. */
.post { margin: 0 0 3rem; overflow-wrap: break-word; }
.post header h3 { margin: 0 0 0.15rem; font-size: 1.3rem; }
.post header time { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8f99; }
.post img { border-radius: 6px; margin: 0.6rem 0; }
.post img.alignleft { float: left; margin: 0.3rem 1rem 0.6rem 0; max-width: 45%; }
.post img.alignright { float: right; margin: 0.3rem 0 0.6rem 1rem; max-width: 45%; }
.post img.aligncenter, .post .aligncenter img { margin-left: auto; margin-right: auto; }
.post::after { content: ""; display: block; clear: both; }
.post video { width: 100%; border-radius: 8px; margin: 0.8rem 0; }
.wp-caption { margin: 0.8rem 0; }
.wp-caption figcaption { font-size: 0.82rem; color: #6b7079; margin-top: 0.35rem; }
.post-gallery { display: grid; gap: 0.7rem; margin: 1rem 0; }
.post-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.post-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.post-gallery a { display: block; }
.post-gallery img { border-radius: 6px; margin: 0; width: 100%; height: 100%; object-fit: cover; }
.embed { position: relative; aspect-ratio: 16/9; margin: 1rem 0; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
blockquote.instagram-media { border: 1px solid #e0e2e6; border-radius: 8px; padding: 1rem; margin: 1rem 0; max-width: 480px; }

/* ---------- resume ---------- */
.resume-sub { color: #6b7079; letter-spacing: 0.06em; margin-top: -0.6rem; }
.resume-block h2 { letter-spacing: 0.14em; text-transform: uppercase; font-size: 1.1rem; color: var(--teal); border-bottom: 3px solid var(--amber); padding-bottom: 0.3rem; margin-top: 2.6rem; }
.resume-block table { width: 100%; border-collapse: collapse; }
.resume-block td { padding: 0.5rem 0.6rem; vertical-align: top; }
.resume-block tr:nth-child(even) { background: #f4f5f7; }
.resume-block td:first-child { font-weight: 600; }
.resume-brands { color: var(--ink-soft); line-height: 1.8; }

/* Shared column widths so Project/Role/Company line up down the page across sections.
   Training & Special Skills use the same first-column width so their 2nd column starts
   at the same x-position as the middle column above (Commercial & Promo is prose, not a
   table, and is intentionally left out of this grid). */
.resume-block table.cols-3 { table-layout: fixed; }
.resume-block table.cols-3 td:nth-child(1) { width: 40%; }
.resume-block table.cols-3 td:nth-child(2) { width: 38%; }
.resume-block table.cols-3 td:nth-child(3) { width: 22%; }
.resume-block table.cols-2 { table-layout: fixed; }
.resume-block table.cols-2 td:first-child { width: 40%; }
.resume-block table.cols-2 td:last-child { width: 60%; }

/* On phones the fixed column percentages leave the 3rd (company/network) column too narrow,
   forcing heavy text wrapping. Let the browser auto-size columns to content instead, and
   tighten cell padding — the cross-section column alignment is a wide-screen nicety that's
   not worth cramped text on a narrow screen. */
@media (max-width: 600px) {
  .resume-block table.cols-3, .resume-block table.cols-2 { table-layout: auto; }
  .resume-block table.cols-3 td, .resume-block table.cols-2 td { width: auto; }
  .resume-block td { padding: 0.4rem 0.35rem; font-size: 0.92rem; }
}

.resume-actions { margin: 1.4rem 0 0; }
.btn-solid {
  display: inline-block; background: var(--ink); color: #fff; text-decoration: none;
  padding: 0.65rem 1.6rem; border-radius: 6px; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 0.78rem; font-weight: 600; transition: 0.2s;
}
.btn-solid:hover { background: var(--teal); }

/* Print / PDF export (also used to generate media/Michelle-Wong-Resume.pdf — see README).
   Deliberately dense — this squeezes a 50+ credit resume onto as few pages as possible. */
@page { size: letter; margin: 0.25in 0.45in; }
@media print {
  html { font-size: 9.5px; }
  body { font-size: 7.4pt; line-height: 1.15; }
  .site-header, .resume-actions, .site-footer { display: none; }
  .page.container { padding: 0; max-width: none; }
  h1 { font-size: 14pt; margin: 0 0 2pt; }
  .resume-sub { font-size: 6.8pt; margin: 0; line-height: 1.3; }
  .resume-block { margin: 0; }
  .resume-block h2 {
    font-size: 7.8pt; margin: 4pt 0 1pt; padding-bottom: 1pt;
    border-bottom-width: 1pt;
  }
  .resume-block td { padding: 0.8pt 4pt; line-height: 1.1; }
  .resume-brands { font-size: 6.8pt; line-height: 1.25; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- lightbox ---------- */
dialog#lightbox {
  border: 0; background: rgba(10, 12, 16, 0.92); max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; padding: 2rem; display: none;
  align-items: center; justify-content: center;
}
dialog#lightbox[open] { display: flex; }
dialog#lightbox img { max-width: min(92vw, 1200px); max-height: 88vh; width: auto; height: auto; border-radius: 6px; }
dialog#lightbox button {
  position: absolute; background: none; border: 0; color: #fff; font-size: 2.6rem;
  cursor: pointer; padding: 0.5rem 1rem; opacity: 0.8;
}
dialog#lightbox button:hover { opacity: 1; }
#lb-close { top: 0.5rem; right: 0.8rem; }
#lb-prev { left: 0.4rem; top: 50%; transform: translateY(-50%); }
#lb-next { right: 0.4rem; top: 50%; transform: translateY(-50%); }

/* ---------- mobile nav ---------- */
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; background: rgba(20,22,27,0.97); padding: 0.5rem 0 1rem;
  }
  .nav-links.open { display: flex; }
  .nav-links li { text-align: center; }
  .nav-links a { display: block; padding: 0.7rem 0; border-bottom: 0; }
  .post img.alignleft, .post img.alignright { float: none; max-width: 100%; margin: 0.6rem 0; }

  /* Footer social icons: enlarge to a comfortable ~44px thumb target on mobile
     (they're intentionally small on desktop where a mouse is precise). */
  .footer-social-links { gap: 0.9rem; }
  .footer-social-links .icon-link { width: 44px; height: 44px; border-width: 2px; }
  .footer-social-links .icon-link svg { width: 20px; height: 20px; }
  .footer-social-links .icon-link-imdb { width: auto; height: 34px; font-size: 0.85rem; padding: 0 0.7rem; border-radius: 6px; }
}