/* v4.3 Classic Light palette (keeps all layout/animation intact) */
:root{
  color-scheme: light;
  --bg:#ffffff;
  --panel:#ffffff;
  --ink:#0b1220;
  --sub:#334155;
  --brand:#3b82f6;
  --brand2:#06b6d4;
  --muted:#e5e7eb;
  --glass:rgba(0,0,0,.025);
  --ring:0 0 0 3px rgba(59,130,246,.25);
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,12,.08);
  --w:1220px;
}

/* Page background & text color */
html,body{
  background:#ffffff;
  color:var(--ink);
}

/* Header: light frosted bar */
header.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid #e5e7eb;
}
.brand img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.1))}
.nav a{margin-left:18px;font-weight:700;color:#0b1220;opacity:.9}
.nav a:hover{opacity:1;color:#000}

/* Hero and cards/panels */
.hero .panel{background:#ffffff;border:1px solid #e5e7eb;border-radius:24px;box-shadow:var(--shadow)}
.card{background:#ffffff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--shadow)}
.card p{color:var(--sub)}

/* Slate tiles */
.m{background:#ffffff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--shadow)}
.m:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(2,6,12,.12)}
.m .ph{aspect-ratio:1/1;background:#f3f4f6;position:relative;cursor:default}
.m .nm{font-weight:900;color:#0b1220}
.m .tt{color:#475569}

/* Buttons: subtle gradient on light */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:linear-gradient(180deg, rgba(59,130,246,.12), rgba(6,182,212,.10));
  border:1px solid rgba(59,130,246,.35);
  color:#0b1220;font-weight:800;box-shadow:0 6px 16px rgba(2,6,12,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,6,12,.12)}

/* Modal panel on light */
.dialog .panel{
  width:min(920px,96vw);max-height:86vh;overflow:auto;
  background:#ffffff;border-radius:22px;border:1px solid #e5e7eb;box-shadow:0 18px 60px rgba(2,6,12,.25)
}
.panel header{border-bottom:1px solid #e5e7eb}
.close{color:#0b1220}

/* PDF preview card */
.flyer .pdf{
  aspect-ratio:4/3;border-radius:16px;border:1px solid #e5e7eb;
  overflow:hidden;background:#ffffff;box-shadow:var(--shadow)
}

/* Footer note color on light */
.note{color:#475569}


/* v4.3.1: Centered navigation; no header logo; slightly tighter header padding */
.nav-inner{display:flex;align-items:center;justify-content:center;padding:10px 0}
header.nav .nav a{margin:0 14px}
header.nav .nav{display:flex;align-items:center;gap:0}
/* Ensure brand block is hidden if any residual markup remains */
.brand{display:none !important}


/* v4.3.2: Centered, wrapping navigation with consistent spacing */
.nav-inner{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; padding:10px 0;
}
header.nav .nav{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px 22px; max-width:100%;
}
header.nav .nav a{
  margin:0; white-space:nowrap; font-weight:700; text-align:center;
  padding:6px 2px;
}

/* Avoid horizontal overflow on narrow screens */
html,body{overflow-x:hidden}

/* Make sure long labels fit gracefully on small devices */
@media (max-width: 860px){
  header.nav .nav a{font-size:15px}
  .nav-inner{padding:10px 6px}
}
@media (max-width: 720px){
  header.nav .nav{gap:8px 16px}
  header.nav .nav a{font-size:14px}
}


/* v4.3.3: Force single-row centered nav with responsive sizing */
.nav-inner{
  display:flex; align-items:center; justify-content:center;
  padding:12px 6px; /* a touch taller for easier tapping */
}
header.nav .nav{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; /* single row only */
  gap:clamp(8px, 2vw, 22px);
  max-width:100%;
  white-space:nowrap;
}
header.nav .nav a{
  margin:0;
  font-weight:700;
  text-align:center;
  padding:8px 2px; /* slightly taller buttons for mobile taps */
  font-size:clamp(13px, 1.6vw, 16px); /* scales down on small screens */
}

/* Prevent any horizontal overflow while keeping one row */
html, body { overflow-x:hidden; }

/* Extra safeguard for very narrow phones */
@media (max-width: 420px){
  header.nav .nav a{ font-size:12.5px; }
}


/* v4.3.7: Compact slate grid + native expanders for Slate & FAQ */
.slate-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(185px, 1fr));}
@media (min-width: 1200px){ .slate-grid{grid-template-columns:repeat(6, 1fr);} }

/* Slate cards */
.slate-card{background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.slate-photo{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.slate-namebar{display:flex; flex-direction:column; padding:8px 10px; border-top:1px solid #e5e7eb}
.slate-namebar .nb-name{font-weight:900; color:#0b1220; line-height:1.1}
.slate-namebar .nb-title{color:#475569; font-size:.9rem}
.slate-bio{padding:10px 12px 12px}

/* Universal expand cue for details/summary (used in Slate & FAQ) */
details > summary{
  list-style:none; cursor:pointer; position:relative; padding-right:28px;
}
details > summary::-webkit-details-marker{display:none}
details > summary .slate-toggle{display:none} /* old span present, but we use ::after for consistency */
details > summary::after{
  content:""; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:5px; border:1px solid #cbd5e1; background:#f8fafc;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
details[open] > summary::after{ transform:translateY(-50%) rotate(180deg) }

/* Ensure sections never overlap */
section{opacity:1 !important; transform:none !important; position:relative}
html,body{overflow-x:hidden}

/* Kill any injected dialog/lightbox */
.dialog{display:none !important}


/* v4.3.9: Elegant expand indicator (plus → minus), slightly larger tiles */
#slate .m details > summary,
#faq details > summary{
  list-style:none; cursor:pointer; position:relative; padding:10px 34px 10px 10px; margin:0;
  font-weight:800; color:#0b1220; user-select:none;
}
#slate .m details > summary::-webkit-details-marker,
#faq details > summary::-webkit-details-marker{ display:none; }

/* Indicator: subtle circle with + that morphs to – when open */
#slate .m details > summary::after,
#faq details > summary::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  border:1px solid #cbd5e1; background:#f8fafc;
  box-shadow:0 1px 2px rgba(2,6,12,.06);
  transition:background-color .2s ease, border-color .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000000'%3E%3Crect x='11' y='5' width='2' height='14' rx='1'/%3E%3Crect x='5' y='11' width='14' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E") center/12px 12px no-repeat;
  background-color:#64748b;
}
#slate .m details[open] > summary::after,
#faq details[open] > summary::after{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' rx='1' fill='%23000000'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  background-color:#0b1220;
  border-color:#94a3b8;
}

/* Keep thumbnails square and modest */
#slate .m .ph{ aspect-ratio:1/1; background:#f3f4f6; }
#slate .m .ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Bio content padding stays refined */
#slate .m .bio-content{ padding:12px; }


/* v4.4.0: Slate matches FAQ behavior and style; slightly larger tiles */
#slate .m details > summary,
#faq   details > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:10px 34px 10px 10px; margin:0; font-weight:800; color:#0b1220; user-select:none;
}
#slate .m details > summary::-webkit-details-marker,
#faq   details > summary::-webkit-details-marker{ display:none; }

/* Elegant plus/minus indicator, consistent across sections */
#slate .m details > summary::after,
#faq   details > summary::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  border:1px solid #cbd5e1; background:#f8fafc;
  box-shadow:0 1px 2px rgba(2,6,12,.06);
  transition:background-color .2s ease, border-color .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000000'%3E%3Crect x='11' y='5' width='2' height='14' rx='1'/%3E%3Crect x='5' y='11' width='14' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E") center/12px 12px no-repeat;
  background-color:#64748b;
}
#slate .m details[open] > summary::after,
#faq   details[open] > summary::after{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' rx='1' fill='%23000000'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  background-color:#0b1220; border-color:#94a3b8;
}

/* Slate thumbnails remain square and modest */
#slate .m .ph{ aspect-ratio:1/1; background:#f3f4f6; }
#slate .m .ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Bio content spacing */
#slate .m .bio-content{ padding:12px; }

#slate details > summary{cursor:pointer}

#slate a img{pointer-events:none}


/* v4.4.3 Option 2: Magazine Cards */
#slate .mag-grid{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); align-items:start}
#slate .mag-card{background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
#slate .mag-card > summary{list-style:none; cursor:pointer; position:relative; padding:10px 34px 10px 10px; user-select:none}
#slate .mag-card > summary::-webkit-details-marker{display:none}
#slate .mag-card > summary::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; border:1px solid #cbd5e1; background:#f8fafc;
  box-shadow:0 1px 2px rgba(2,6,12,.06);
  transition:background-color .2s ease, border-color .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000000'%3E%3Crect x='11' y='5' width='2' height='14' rx='1'/%3E%3Crect x='5' y='11' width='14' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E") center/12px 12px no-repeat;
  background-color:#64748b;
}
#slate .mag-card[open] > summary::after{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' rx='1' fill='%23000000'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  background-color:#0b1220; border-color:#94a3b8;
}
#slate .mag-card .ph{width:100%; aspect-ratio:1/1; background:#f3f4f6; border-radius:10px; overflow:hidden; margin-bottom:8px}
#slate .mag-card .ph img{width:100%; height:100%; object-fit:cover; display:block}
#slate .mag-card .namebar .nb-name{font-weight:900; color:#0b1220}
#slate .mag-card .namebar .nb-title{color:#475569; font-size:.92rem}
#slate .mag-card .drawer{padding:12px 12px 14px; border-top:1px solid #e5e7eb}
    

/* v4.4.4: Magazine Cards — make open bios spacious and elegant */
/* Desktop: full-width open card with two-column drawer */
@media (min-width: 1100px){
  #slate .mag-card[open]{ grid-column: 1 / -1; }
  #slate .mag-card[open] .drawer{
    display:grid; grid-template-columns: 260px 1fr; gap:24px; align-items:start;
  }
  #slate .mag-card[open] .ph{ width:260px; aspect-ratio:1/1; margin:0; }
  #slate .mag-card[open] .namebar{ grid-column: 1 / -1; padding-top:6px; }
  #slate .mag-card[open] .drawer p{ max-width: 68ch; }
}

/* Large tablets: span two columns so bio has room */
@media (min-width: 820px) and (max-width: 1099px){
  #slate .mag-card[open]{ grid-column: span 2; }
  #slate .mag-card[open] .drawer{
    display:grid; grid-template-columns: 200px 1fr; gap:18px;
  }
  #slate .mag-card[open] .ph{ width:200px; }
}

/* Small screens: keep single-column elegance; just give text breathing room */
@media (max-width: 819px){
  #slate .mag-card .drawer p{ max-width: 70ch; }
}

/* Micro-polish: soften animation and keep layout stable */
#slate .mag-card{ transition: box-shadow .2s ease, transform .2s ease; }
#slate .mag-card[open]{ box-shadow: 0 16px 48px rgba(2,6,12,.12); transform: translateY(-1px); }


/* v4.4.5: iPhone landscape fix — avoid skinny bios by forcing single-column open card */
@media (orientation: landscape) and (max-height: 460px){
  /* Treat as compact height: open card becomes single column */
  #slate .mag-card[open]{ grid-column: 1 / -1; }
  #slate .mag-card[open] .drawer{ display:block; }
  #slate .mag-card[open] .ph{ width:180px; margin:0 auto 10px; }
  #slate .mag-card[open] .drawer p{ max-width: 72ch; }
}

/* Extra guard for iOS Safari small-height detection */
@supports (-webkit-touch-callout: none){
  @media (orientation: landscape) and (max-height: 480px){
    #slate .mag-card[open]{ grid-column: 1 / -1; }
    #slate .mag-card[open] .drawer{ display:block; }
    #slate .mag-card[open] .ph{ width:180px; margin:0 auto 10px; }
  }
}


/* v4.4.6: Mobile portrait fix — Full-width expanded card for Option 2 */
@media (orientation: portrait) and (max-width: 820px){
  #slate .mag-grid{ grid-template-columns: 1fr; }
  #slate .mag-card[open]{ grid-column: 1 / -1; box-shadow: 0 16px 48px rgba(2,6,12,.12); transform: translateY(-1px); }
  #slate .mag-card[open] > summary{ padding:12px 34px 0 12px; }
  #slate .mag-card[open] .ph{ width:200px; max-width:60vw; margin:10px auto 12px; }
  #slate .mag-card[open] .drawer{
    display:block; padding:12px 14px 16px;
  }
  #slate .mag-card[open] .drawer p{ max-width: 72ch; margin-left:auto; margin-right:auto; }
  /* breathe a bit at the section level */
  #slate{ scroll-margin-top: 72px; }
}


/* v4.4.6a: Smaller initial cards on iPhone portrait so all 7 are visible */
@media (orientation: portrait) and (max-width: 430px){
  /* Tighter section padding to maximize viewport usage */
  #slate{ padding-top: 8px; padding-bottom: 12px; }
  #slate h2{ margin-bottom: 10px; }

  /* Smaller grid thumbs & tighter gaps */
  #slate .mag-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  #slate .mag-card{ padding: 6px; border-radius: 12px; }
  #slate .mag-card .ph{ aspect-ratio:1/1; margin-bottom:6px; }
  #slate .mag-card .namebar .nb-name{ font-size: 0.92rem; }
  #slate .mag-card .namebar .nb-title{ font-size: 0.78rem; }

  /* When opened (keeping 4.4.6 behavior): full-width single-column drawer */
  #slate .mag-card[open]{ grid-column: 1 / -1; }
  #slate .mag-card[open] .ph{ width: 180px; max-width: 58vw; margin: 8px auto 10px; }
  #slate .mag-card[open] .drawer{ display:block; padding: 10px 12px 14px; }
  #slate .mag-card[open] .drawer p{ max-width: 70ch; margin-left:auto; margin-right:auto; }
}

/* Slightly wider phones (e.g., 428–480px) still benefit from tighter thumbnails */
@media (orientation: portrait) and (min-width: 431px) and (max-width: 520px){
  #slate .mag-grid{ grid-template-columns: repeat(3, 1fr); gap:10px; }
  #slate .mag-card{ padding:7px; }
  #slate .mag-card .namebar .nb-name{ font-size: 0.98rem; }
  #slate .mag-card .namebar .nb-title{ font-size: 0.82rem; }
}


/* v4.4.6d: Headroom fix — bias crops upward so faces aren't cut off */
#slate .mag-card .ph img{ object-fit: cover; object-position: center 20%; } /* thumbnails */
#slate .mag-card[open] .ph img{ object-position: center 15%; } /* open-state portrait */
@media (min-width: 1100px){
  #slate .mag-card[open] .ph img{ object-position: center 12%; }
}
/* Also apply to any legacy .ph img in slate */
#slate .ph img{ object-position: center 20%; }


/* v4.4.6g: Zero-JS navigation helpers */
/* Inline ToC */
.toc-inline{ margin: 12px auto 18px; max-width: 1100px; padding: 6px 8px; }
.toc-inline ul{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; list-style:none; margin:0; padding:0; }
.toc-inline a{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  text-decoration:none; color:#0b1220; font-weight:700;
  box-shadow:0 4px 16px rgba(2,6,12,.06);
}
.toc-inline a:hover{ background:rgba(255,255,255,.95) }

/* Endcaps */
.endcap{ display:flex; justify-content:center; align-items:center; gap:6px; margin:16px 0 6px; color:#475569 }
.endcap .sep{ opacity:.5 }
.endcap a{ text-decoration:none; font-weight:700; color:#1f2937 }
.endcap a:hover{ text-decoration:underline }

/* Floating Jump Dial (no JS) */
.jump-dial{ position:fixed; right:14px; bottom:14px; z-index:1200 }
.jump-dial details{ position:relative }
.jump-dial summary{
  list-style:none; cursor:pointer;
  border:1px solid rgba(15,23,42,.15);
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 10px 28px rgba(2,6,12,.18);
  padding:10px 12px; border-radius:999px; font-weight:800; color:#0b1220;
}
.jump-dial summary::-webkit-details-marker{ display:none }
.jump-dial details[open] summary{ border-bottom-left-radius:10px; border-bottom-right-radius:10px }
.jump-dial ul{
  position:absolute; right:0; bottom:100%; transform:translateY(-8px);
  list-style:none; margin:0; padding:8px;
  border:1px solid rgba(15,23,42,.15);
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  border-radius:12px; box-shadow:0 18px 44px rgba(2,6,12,.22);
  display:grid; gap:6px; min-width: 180px;
}
.jump-dial a{ text-decoration:none; color:#0b1220; font-weight:700; display:block; padding:6px 8px; border-radius:8px }
.jump-dial a:hover{ background:rgba(2,6,12,.06) }

/* Smooth anchor behavior + sticky-safe offsets */
html{ scroll-behavior:smooth }
section[id], [id^="faq"], #slate{ scroll-margin-top: 76px; }
@media (max-width: 480px){
  .jump-dial{ right:10px; bottom:10px }
}


/* v4.4.6j: Subtle inline arrow for "Back to top" (static, SVG, with small gap) */
.endcap a{
  position:relative;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: opacity .18s ease, border-color .18s ease;
  color:#1f2937;
  font-weight:700;
}
.endcap a::before{
  content:"";
  display:inline-block;
  width:0.9em; height:0.9em;
  vertical-align:-0.12em;
  margin-right:0.3em; /* small gap */
  background-color:#1f2937;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpolyline points='18 15 12 9 6 15' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpolyline points='18 15 12 9 6 15' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.endcap a:hover,
.endcap a:focus-visible{
  opacity:.92;
  border-bottom-color: rgba(31,41,55,.45);
  outline:none;
}


/* v4.4.6p: Cross-device polish */
/* iOS dynamic viewport fix and safe areas */
:root{ height:100%; }
html, body{ min-height:100dvh; }
@supports not (height: 100dvh){
  html, body{ min-height:100vh; }
}

/* Floating Jump Dial respect safe-area */
.jump-dial{ right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }

/* Orientation stability for Slate grid */
#slate .mag-grid{ align-items: start; }
@media (orientation: landscape) and (max-height: 460px){
  #slate .mag-grid{ grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (orientation: portrait) and (max-width: 430px){
  #slate .mag-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Improve tap targets */
a, button, summary{ -webkit-tap-highlight-color: rgba(0,0,0,0.06); }
summary{ cursor:pointer; }

/* Avoid accidental scroll snapping from iOS carousels (none used, but defensive) */
*{ scroll-snap-type: none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation: none!important; transition: none!important; }
}


/* === v4.4.7 Tablet & Margins Fixes === */

/* 1) Add gentle side padding to all sections so text never hugs screen edges */
.section{ padding-inline: clamp(18px, 3vw, 40px); }

/* 2) iPad portrait: keep slate grid like landscape + widen expanded bios */
@media (orientation: portrait) and (min-width:768px) and (max-width:1080px){
  #slate .mag-grid{ grid-template-columns: repeat(3, 1fr); gap:16px; }
  #slate .mag-card[open]{ grid-column: 1 / -1; }
  #slate .mag-card[open] .drawer{ max-width: 900px; margin: 0 auto; }
}

/* 3) Prevent compressed PDF preview on tablets */
@media (min-width:768px) and (max-width:1080px){
  .flyer .pdf, .pdf{ width:100%; height:auto; aspect-ratio:auto; }
  .flyer .pdf object, .pdf object,
  .flyer .pdf embed,  .pdf embed,
  .flyer .pdf iframe, .pdf iframe{ width:100%; height:auto; min-height: clamp(320px, 60vh, 720px); }
}
/* === end v4.4.7 === */


/* === v4.4.7c: iPad LANDSCAPE wide bio drawer ===
   Ensure expanded bios aren't a tall, skinny column on iPad landscape.
   - Span the open card across the grid
   - Center and widen the drawer
   - Constrain text to an optimal reading width
*/
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px){
  #slate .mag-card[open]{ grid-column: 1 / -1; }
  #slate .mag-card[open] .drawer{ max-width: 1000px; margin: 0 auto; }
  #slate .mag-card[open] .slate-bio{ max-width: 72ch; margin-inline: auto; }
}
/* === end v4.4.7c === */


/* === v4.4.7d: iPad LANDSCAPE — center avatar & text, use full tray width === */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px){
  /* Center the headshot/thumb */
  #slate .mag-card[open] .ph{ width:220px; margin: 10px auto 12px; display:block; }
  /* Switch drawer to single column so the text can use full width */
  #slate .mag-card[open] .drawer{ display:block; }
  /* Center the namebar and the bio content */
  #slate .mag-card[open] .namebar{ grid-column: 1 / -1; text-align:center; }
  #slate .mag-card[open] .slate-bio{ max-width:none; margin: 0; text-align:center; }
  #slate .mag-card[open] .drawer p{ max-width:none; margin-left:0; margin-right:0; }
}
/* === end v4.4.7d === */