:root{
    --cream:#FBF3E3;
    --paper:#FFFDF7;
    --ink:#3A2B1E;
    --ink-soft:#6b5842;
    --barn:#B5432E;
    --barn-dark:#8f3324;
    --sky:#4FA8D8;
    --sky-deep:#2E75A0;
    --grass:#6FA84B;
    --grass-deep:#4f7d34;
    --wood:#7a5230;
    --wood-dark:#54371f;
    --wheat:#E8C88A;
    --line: rgba(58,43,30,0.14);
    --radius: 14px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Zilla Slab', Georgia, serif;
    font-size:17px;
    line-height:1.6;
  }
  h1,h2,h3, .brand, .btn, nav.tabs a{
    font-family:'Baloo 2', 'Zilla Slab', sans-serif;
  }
  img{max-width:100%; display:block;}
  a{color:var(--barn-dark);}

  /* ---------- Fence-rail nav ---------- */
  header.topbar{
    position:sticky; top:0; z-index:50;
    background:
      repeating-linear-gradient(180deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 34px),
      linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
    border-bottom:6px solid var(--wood-dark);
    box-shadow:0 6px 16px rgba(58,43,30,0.25);
  }
  .nav-inner{
    max-width:1180px; margin:0 auto; padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    flex-wrap:wrap;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    color:var(--wheat); font-weight:700; font-size:1.5rem;
    text-decoration:none; letter-spacing:0.2px;
  }
  .brand svg{flex:0 0 auto;}
  .brand small{
    display:block; font-family:'Zilla Slab',serif; font-weight:400;
    font-size:0.62rem; color:#e3d3b0; letter-spacing:0.5px; margin-top:-2px;
  }
  nav.tabs{display:flex; gap:6px; flex-wrap:wrap;}
  nav.tabs a{
    border:none; background:transparent; color:#f1e4c6; text-decoration:none; display:inline-block;
    font-size:1rem; font-weight:600; padding:9px 16px; border-radius:999px;
    cursor:pointer; transition:background 0.2s ease, color 0.2s ease;
  }
  nav.tabs a:hover{background:rgba(255,255,255,0.10);}
  nav.tabs a[aria-current="page"]{
    background:var(--barn); color:#fff8ee;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15);
  }
  /* hamburger button: hidden on desktop */
  .nav-toggle{
    display:none; flex:0 0 auto; width:46px; height:46px; padding:0; margin-left:auto;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(241,228,198,0.35); border-radius:10px;
    cursor:pointer;
  }
  .nav-toggle:hover{background:rgba(255,255,255,0.16);}
  .nav-toggle:focus-visible{outline:3px solid var(--sky); outline-offset:2px;}
  .nav-toggle-bar{
    display:block; width:22px; height:2.5px; border-radius:2px; background:#f1e4c6;
    transition:transform 0.25s ease, opacity 0.2s ease;
  }
  .nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-open .nav-toggle-bar:nth-child(2){opacity:0;}
  .nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  /* mobile + tablet: menu becomes a dropdown under the header */
  @media (max-width:860px){
    .nav-inner{position:relative; flex-wrap:nowrap;}
    .nav-toggle{display:flex;}
    nav.tabs{
      position:absolute; top:100%; left:0; right:0; margin-top:6px; /* sits under the 6px bottom border */
      flex-direction:column; flex-wrap:nowrap; gap:4px; padding:10px 16px 16px;
      background:var(--wood-dark); box-shadow:0 14px 24px rgba(58,43,30,0.35);
      visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none;
      transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }
    .nav-open nav.tabs{
      visibility:visible; opacity:1; transform:none; pointer-events:auto;
      transition:opacity 0.2s ease, transform 0.2s ease;
    }
    nav.tabs a{display:block; padding:12px 16px; border-radius:10px; font-size:1.05rem;}
  }
  @media (prefers-reduced-motion: reduce){
    nav.tabs, .nav-toggle-bar{transition:none !important;}
  }

  nav.tabs a:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:3px solid var(--sky); outline-offset:2px;
  }

  /* ---------- Panels ---------- */
  .panel{display:block; animation:riseIn 0.5s ease both;}
  @keyframes riseIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .panel{animation:none;}
    .hero-media img{animation:none !important;}
  }

  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  section{padding:64px 0;}
  section + section{border-top:1px solid var(--line);}

  h2{
    font-size:2.1rem; margin:0 0 18px; color:var(--barn-dark); font-weight:700;
    line-height:1.15;
  }
  h3{font-size:1.25rem; margin:0 0 8px; color:var(--wood-dark); font-weight:600;}
  p{margin:0 0 16px; max-width:62ch;}
  .lede{font-size:1.15rem; color:var(--ink-soft);}

  /* ---------- Hero ---------- */
  /* taller banner, content vertically centered on the left */
  .hero{
    position:relative; overflow:hidden; display:flex; align-items:center;
    min-height:clamp(520px, 82vh, 820px);
    min-height:clamp(520px, 82svh, 820px);
  }
  .hero-media{position:absolute; inset:0;}
  /* home: banner starts right under the header (no section padding above it) */
  section.panel-hero{padding-top:0;}
  .hero-media img{
    width:100%; height:100%; object-fit:cover; object-position:center 40%;
    animation:heroIn 1.1s ease both;
  }
  @keyframes heroIn{from{opacity:0; transform:scale(1.06);} to{opacity:1; transform:scale(1);}}
  .hero-media::after{
    content:""; position:absolute; inset:0;
    /* dark on the left (behind the text), fading out so the family stays visible on the right */
    background:
      linear-gradient(90deg, rgba(30,20,12,0.82) 0%, rgba(30,20,12,0.62) 32%, rgba(30,20,12,0.22) 62%, rgba(30,20,12,0.05) 100%),
      rgba(30,20,12,0.18);
  }
  .hero-content{
    position:relative; z-index:2; padding:72px 24px; max-width:1180px; margin:0 auto; width:100%;
    color:#fff8ee;
  }
  .hero-content > *{max-width:560px;}
  .hero-content .kicker{
    display:inline-block; background:var(--barn); color:#fff8ee;
    font-family:'Baloo 2',sans-serif; font-weight:600; font-size:0.9rem;
    padding:5px 14px; border-radius:8px; margin-bottom:16px; transform:rotate(-1.5deg);
  }
  .hero-content h1{
    font-size:clamp(2.1rem, 5vw, 3.6rem); line-height:1.05; margin:0 0 14px;
    font-weight:800; text-shadow:0 3px 14px rgba(0,0,0,0.35);
    max-width:16ch;
  }
  .hero-content .tag{font-size:1.15rem; max-width:44ch; color:#f4ead2; margin-bottom:26px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

  .btn{
    display:inline-block; border:none; cursor:pointer; text-decoration:none;
    font-weight:600; font-size:1rem; padding:13px 26px; border-radius:999px;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--barn); color:#fff8ee; box-shadow:0 6px 0 var(--barn-dark);}
  .btn-primary:hover{box-shadow:0 8px 0 var(--barn-dark);}
  .btn-outline{background:transparent; color:#fff8ee; border:2px solid rgba(255,248,238,0.7);}
  .btn-outline:hover{background:rgba(255,248,238,0.12);}
  .btn-grass{background:var(--grass); color:#fff8ee; box-shadow:0 6px 0 var(--grass-deep);}

  /* ---------- Split / two column ---------- */
  .split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
  .split.reverse .split-media{order:2;}
  .split-media img{border-radius:var(--radius); box-shadow:0 14px 30px rgba(58,43,30,0.22);}
  @media (max-width:860px){
    .split, .split.reverse{grid-template-columns:1fr;}
    .split.reverse .split-media{order:0;}
  }

  /* ---------- Cast grid ---------- */
  .cast-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px; margin-top:28px;
  }
  .cast-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 18px 20px; display:flex; gap:14px; align-items:flex-start;
  }
  .avatar{
    flex:0 0 auto; width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2',sans-serif; font-weight:700; color:#fff8ee; font-size:1.1rem;
  }
  .cast-card p{margin:0; font-size:0.95rem; color:var(--ink-soft); max-width:none;}
  .cast-card h3{margin-bottom:4px;}

  /* palette rotation for avatars */
  .c1{background:var(--barn);} .c2{background:#2b2b2b;} .c3{background:var(--sky-deep);}
  .c4{background:var(--grass-deep);} .c5{background:#7a5230;} .c6{background:#a3762f;}
  .c7{background:#c48a3c;} .c8{background:#9a5f78;} .c9{background:#3f8f8a;} .c10{background:#5b6b9a;}

  /* ---------- Gallery ---------- */
  .gallery{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:8px;
  }
  .gallery figure{margin:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .gallery img{aspect-ratio:1/1; object-fit:cover; width:100%;}
  .gallery figcaption{padding:10px 14px 14px; font-size:0.88rem; color:var(--ink-soft);}
  @media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:480px){.gallery{grid-template-columns:1fr;}}

  /* ---------- Editions ---------- */
  .editions{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px;}
  .edition{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; text-align:left;
  }
  .edition .fmt{font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--barn-dark); font-size:1.05rem; margin-bottom:4px;}
  .edition .isbn{font-size:0.86rem; color:var(--ink-soft);}
  @media (max-width:700px){.editions{grid-template-columns:1fr;}}

  .values{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
  .value-card{
    background:linear-gradient(180deg, var(--paper), var(--cream)); border:1px solid var(--line);
    border-radius:var(--radius); padding:22px 20px;
  }
  .value-card h3{color:var(--grass-deep);}
  @media (max-width:760px){.values{grid-template-columns:1fr;}}

  /* ---------- Author panel ---------- */
  .author-hero{display:flex; gap:40px; align-items:center; flex-wrap:wrap;}
  .author-photo{
    width:190px; height:190px; border-radius:50%; flex:0 0 auto;
    background:linear-gradient(160deg, var(--sky), var(--sky-deep));
    overflow:hidden; border:5px solid var(--paper);
    box-shadow:0 12px 26px rgba(46,117,160,0.35);
  }
  .author-photo img{width:100%; height:100%; object-fit:cover; object-position:center 20%; border-radius:50%;}
  .facts{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px;}
  .facts li{
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    padding:14px 16px; display:flex; gap:12px; align-items:flex-start; font-size:0.98rem;
  }
  .facts li svg{flex:0 0 auto; margin-top:3px;}
  .side-note{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 20px; margin-top:20px;
  }
  .side-note img{border-radius:10px; margin-bottom:12px;}
  .side-note p{font-size:0.92rem; color:var(--ink-soft); margin:0;}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
  @media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
  .contact-card{
    background:var(--wood); background:linear-gradient(160deg, var(--wood), var(--wood-dark));
    color:#f6ead1; border-radius:18px; padding:30px 28px;
  }
  .contact-card h3{color:#fff8ee;}
  .contact-card a{color:#ffd9a8;}
  .contact-list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px;}
  .contact-list li{display:flex; gap:12px; align-items:flex-start; font-size:0.98rem;}

  form.contact-form{display:grid; gap:14px;}
  .field{display:grid; gap:6px;}
  .field label{font-weight:600; font-size:0.92rem; color:var(--ink-soft);}
  .field input, .field textarea{
    font-family:'Zilla Slab', serif; font-size:1rem; padding:12px 14px;
    border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink);
  }
  .field textarea{resize:vertical; min-height:120px;}
  .form-note{font-size:0.85rem; color:var(--ink-soft); margin-top:4px;}

  footer{
    background:var(--wood-dark); color:#e6d8bd; padding:34px 0; font-size:0.88rem;
  }
  footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  footer a{color:#f4d998;}
  footer .isbns{display:flex; gap:16px; flex-wrap:wrap; font-size:0.82rem; color:#c9b892;}

  /* ---------- Blog grid (home) ---------- */
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:8px;}
  .blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:28px;}
  .blog-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 8px 20px rgba(58,43,30,0.08);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .blog-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(58,43,30,0.16);}
  .blog-thumb{display:block; overflow:hidden; aspect-ratio:3/2; background:var(--wheat);}
  .blog-thumb img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
  .blog-card:hover .blog-thumb img{transform:scale(1.04);}
  .blog-body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1;}
  .blog-tag{
    align-self:flex-start; background:var(--grass-deep); color:#fff8ee;
    font-family:'Baloo 2',sans-serif; font-weight:600; font-size:0.78rem;
    padding:3px 12px; border-radius:999px; margin-bottom:12px; letter-spacing:0.3px;
  }
  .blog-body h3{font-size:1.3rem; line-height:1.25; margin-bottom:10px;}
  .blog-body h3 a{color:var(--wood-dark); text-decoration:none;}
  .blog-body h3 a:hover{color:var(--barn);}
  .blog-body p{font-size:0.97rem; color:var(--ink-soft); max-width:none; flex:1;}
  .read-more{
    align-self:flex-start; font-family:'Baloo 2',sans-serif; font-weight:700;
    color:var(--barn-dark); text-decoration:none; border-bottom:2px solid var(--barn);
  }
  .read-more:hover{color:var(--barn);}
  @media (max-width:760px){.blog-grid{grid-template-columns:1fr;}}

  /* ---------- Article detail page ---------- */
  .article-wrap{max-width:860px; margin:0 auto; padding:0 24px;}
  .breadcrumb{font-size:0.9rem; color:var(--ink-soft); margin-bottom:18px;}
  .breadcrumb a{color:var(--barn-dark); text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}
  .article-head h1{
    font-size:clamp(1.9rem, 4.2vw, 2.9rem); line-height:1.12; color:var(--barn-dark);
    margin:10px 0 18px; font-weight:800;
  }
  .article-head .lede{max-width:none;}
  .article-cover{margin:30px 0 34px;}
  .article-cover img{width:100%; border-radius:var(--radius); box-shadow:0 14px 30px rgba(58,43,30,0.22);}
  .article-body p{font-size:1.08rem; line-height:1.75; max-width:none;}
  .article-body .pull{
    font-family:'Baloo 2',sans-serif; font-size:1.35rem; font-weight:600; color:var(--wood-dark);
    border-left:5px solid var(--barn); padding:6px 0 6px 20px; margin:28px 0;
  }
  .article-end{
    margin-top:40px; padding:22px 24px; background:var(--paper);
    border:1px solid var(--line); border-radius:var(--radius);
    display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  }
  .article-end p{margin:0; max-width:none;}
  .more-articles{margin-top:56px; padding-top:36px; border-top:1px solid var(--line);}
  .more-articles .blog-grid{grid-template-columns:1fr; max-width:420px;}
  .btn-wood{background:var(--wood); color:#fff8ee; box-shadow:0 6px 0 var(--wood-dark);}
  .form-success{color:var(--grass-deep); font-weight:600;}
  .contact-form .form-success, .form-error{
    margin:0; padding:12px 16px; border-radius:10px; max-width:none;
  }
  .contact-form .form-success{background:rgba(111,168,75,0.14); border:1px solid rgba(79,125,52,0.35);}
  .form-error{background:rgba(181,67,46,0.10); border:1px solid rgba(181,67,46,0.35); color:var(--barn-dark); font-weight:600;}
  .form-error p{margin:0; max-width:none;}
  .form-error p + p{margin-top:4px;}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}


  /* ---------- Reel button (crew cards) ---------- */
  .cast-body{flex:1; min-width:0;}
  .reel-btn{
    margin-top:12px; display:inline-flex; align-items:center; gap:6px;
    background:var(--barn); color:#fff8ee; border:0; border-radius:999px;
    padding:6px 14px; font-family:'Baloo 2',sans-serif; font-weight:600; font-size:0.85rem;
    cursor:pointer; box-shadow:0 3px 0 var(--barn-dark); transition:transform .15s, box-shadow .15s;
  }
  .reel-btn:hover{transform:translateY(-1px); box-shadow:0 4px 0 var(--barn-dark);}
  .reel-btn:focus-visible{outline:3px solid var(--sky); outline-offset:2px;}
  .reel-btn span{font-size:0.7rem;}

  /* ---------- Video popup (portrait 9:16, responsive) ---------- */
  .vm{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:10px;}
  .vm.open{display:flex;}
  .vm-backdrop{position:absolute; inset:0; background:rgba(28,18,10,0.85);}
  .vm-dialog{
    position:relative; display:flex; flex-direction:column; background:#16110c;
    border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.5);
    /* width follows the available height so the 9:16 video + controls always fit the screen */
    width:min(100%, 420px, calc((100vh - 170px) * 0.5625));
    width:min(100%, 420px, calc((100dvh - 170px) * 0.5625));
    min-width:min(100%, 260px);
  }
  .vm-head{
    position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:space-between;
    padding:8px 10px 18px 14px; color:#fff8ee; background:linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
    pointer-events:none;
  }
  .vm-head h3{margin:0; color:#fff8ee; font-size:1rem; text-shadow:0 1px 3px rgba(0,0,0,0.6);}
  .vm-close{
    pointer-events:auto; background:rgba(0,0,0,0.45); border:0; color:#fff8ee; width:34px; height:34px; border-radius:50%;
    font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  }
  .vm-close:hover{background:rgba(0,0,0,0.7);}
  .vm-stage{position:relative; width:100%; aspect-ratio:9/16; background:#000; flex:0 0 auto;}
  .vm-stage video{width:100%; height:100%; object-fit:contain; display:block; background:#000;}
  .vm-msg{
    position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    text-align:center; color:#fff8ee; padding:20px; font-size:1rem;
  }
  .vm-stage.err .vm-msg{display:flex;}
  .vm-stage.err video{visibility:hidden;}
  .vm-bar{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px 10px; background:#16110c; color:#fff8ee;}
  .vm-bar button{
    background:rgba(255,248,238,0.1); border:0; color:#fff8ee; border-radius:8px;
    min-width:36px; height:36px; padding:0 9px; cursor:pointer; font-size:0.9rem; font-family:inherit;
  }
  .vm-bar button:hover{background:rgba(255,248,238,0.22);}
  .vm-bar button:focus-visible, .vm-close:focus-visible{outline:3px solid var(--sky); outline-offset:2px;}
  .vm-seek{flex:1 1 100%; width:100%; margin:0 0 2px; accent-color:var(--barn); cursor:pointer;}
  .vm-time{font-size:0.82rem; font-variant-numeric:tabular-nums; margin:0 2px; white-space:nowrap;}
  .vm-vol{flex:1 1 60px; min-width:40px; accent-color:var(--barn); cursor:pointer;}
  .vm-spacer{flex:1;}
  .vm-break{flex-basis:100%; height:0;}
  /* phones / tablets use the device volume keys: hide the slider, keep the mute button */
  @media (hover:none), (pointer:coarse){ .vm-vol{display:none;} .vm-vol ~ #vm-fs{margin-left:auto;} #vm-mute{margin-right:auto;} }

  /* fullscreen: whole player (video + controls) fills the screen */
  .vm-dialog:fullscreen{width:100vw; height:100vh; max-width:none; border-radius:0;}
  .vm-dialog:fullscreen .vm-stage{aspect-ratio:auto; flex:1 1 auto; min-height:0;}
  .vm-dialog:-webkit-full-screen{width:100vw; height:100vh; max-width:none; border-radius:0;}
  .vm-dialog:-webkit-full-screen .vm-stage{aspect-ratio:auto; flex:1 1 auto; min-height:0;}

  /* phone in landscape (short screen): video on the left, controls on the right */
  @media (max-height:520px) and (orientation:landscape){
    .vm{padding:6px;}
    .vm-dialog{flex-direction:row; width:auto; max-width:calc(100vw - 12px); min-width:0; height:calc(100vh - 12px); height:calc(100dvh - 12px);}
    .vm-stage{width:auto; height:100%; aspect-ratio:9/16;}
    .vm-bar{flex:1 1 240px; min-width:240px; align-content:center; padding:12px;}
    .vm-head{right:auto; width:calc((100vh - 12px) * 0.5625); width:calc((100dvh - 12px) * 0.5625);}
  }



  .avatar.c10 {
    background-color: #79cf02;
}

/* ---------- Reel popup (<dialog>, portrait 9:16 videos) ---------- */
/* Width follows the screen height so the whole 9:16 video always fits — phone, tablet, laptop, desktop */
.video-modal {
    border: none;
    background: transparent;
    padding: 0;
    overflow: visible;
    max-width: none;
    max-height: none;
    width: min(calc(100vw - 24px), 420px, calc((100vh - 32px) * 0.5625));
    width: min(calc(100vw - 24px), 420px, calc((100dvh - 32px) * 0.5625));
}

.video-modal::backdrop {
    background: rgba(28, 18, 10, 0.88);
}

/* Close button sits inside the video corner so it never goes off-screen */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 50%;
    color: #fff8ee;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.close-btn:hover { background: rgba(0, 0, 0, 0.8); }
.close-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.video-modal video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    object-fit: contain;
    background: #000;
    border-radius: var(--radius);
    outline: none;
}

/* Small phones: use (almost) the full screen */
@media (max-width: 480px) {
    .video-modal {
        width: min(100vw, calc(100vh * 0.5625));
        width: min(100vw, calc(100dvh * 0.5625));
    }
    .video-modal video {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
}

/* Phone in landscape: fit by height */
@media (max-height: 520px) and (orientation: landscape) {
    .video-modal {
        width: calc((100vh - 16px) * 0.5625);
        width: calc((100dvh - 16px) * 0.5625);
    }
    .video-modal video {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
}

/* ---------- General mobile / tablet tweaks ---------- */
@media (max-width: 860px) {
    section { padding: 52px 0; }
    .split { gap: 32px; }
    .contact-grid { gap: 32px; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap, .article-wrap { padding: 0 16px; }
    section { padding: 40px 0; }
    h2 { font-size: 1.7rem; }
    .lede { font-size: 1.05rem; }

    .nav-inner { padding: 10px 16px; }
    .brand { font-size: 1.3rem; }

    .hero { min-height: 520px; min-height: max(520px, 75svh); }
    .hero-content { padding: 48px 16px; }
    /* text spans the full width on phones, so darken evenly */
    .hero-media::after {
        background: linear-gradient(90deg, rgba(30,20,12,0.72) 0%, rgba(30,20,12,0.5) 100%);
    }
    .hero-content .tag { font-size: 1.02rem; }
    .hero-ctas .btn { flex: 1 1 auto; text-align: center; }

    .cast-grid { grid-template-columns: 1fr; gap: 14px; }
    .blog-body { padding: 18px 18px 22px; }
    .author-hero { gap: 24px; }
    .author-photo { width: 150px; height: 150px; }
    .contact-card { padding: 24px 20px; }
    .article-end { padding: 18px; }
    .more-articles .blog-grid { max-width: none; }
    footer .wrap { flex-direction: column; }
}

@media (max-width: 380px) {
    .brand { font-size: 1.15rem; }
    .brand svg { width: 28px; height: 28px; }
}