/* Bob's professional pages: /screenwriter, /presenter, /projects and each
   /projects/<slug>. Loaded after films.css, so it uses the same tokens
   (--amber, --surface, --font-display ...) and works in both themes.

   HOUSE STYLE (full notes in pitchcraft/WORK-PAGES.md, not deployed):
   - One full-bleed hero with a still, a dark gradient and the title in
     Bebas Neue. Everything below sits in .w-wrap (max 1100px).
   - Section heads are small amber caps over a big display line.
   - Images are 16:9 cinematic stills unless they are posters (2:3).
   - Every page ends with the same contact band. */

.w-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;background:#000;color:#fff}
.w-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,center);opacity:.9}
.w-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,11,.15) 0%,rgba(8,8,11,.35) 45%,rgba(8,8,11,.96) 100%)}
.w-hero-in{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;padding:0 24px 56px}
.w-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#f5c842;margin-bottom:14px}
.w-hero h1{font-family:var(--font-display);font-size:clamp(54px,11vw,128px);line-height:.88;letter-spacing:2px;margin:0 0 18px;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.w-hero p.w-lede{font-size:clamp(16px,2.2vw,20px);line-height:1.6;max-width:44ch;color:rgba(255,255,255,.88);margin:0 0 26px}
.w-ctas{display:flex;gap:12px;flex-wrap:wrap}
.w-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:.3px;padding:13px 22px;border-radius:99px;text-decoration:none;transition:transform .15s,background .15s,border-color .15s}
.w-btn:hover{text-decoration:none;transform:translateY(-1px)}
.w-btn.primary{background:#f5c842;color:#111}
.w-btn.primary:hover{background:#ffd75e}
.w-btn.ghost{border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.w-btn.ghost:hover{border-color:#f5c842;color:#f5c842}

.w-wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.w-sec{padding:72px 0 8px}
.w-label{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.w-h2{font-family:var(--font-display);font-size:clamp(36px,6vw,58px);letter-spacing:1.5px;line-height:.95;color:var(--text);margin:0 0 22px}
.w-body{font-size:17px;line-height:1.75;color:var(--text2);max-width:64ch}
.w-body p{margin:0 0 16px}
.w-body strong{color:var(--text)}

/* Two columns: text and a photo. Collapses on phones. */
.w-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.w-split.flip{grid-template-columns:.9fr 1.1fr}
.w-split.flip>:first-child{order:2}
@media(max-width:820px){.w-split,.w-split.flip{grid-template-columns:1fr;gap:28px}.w-split.flip>:first-child{order:0}}
.w-photo{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#000}
.w-photo img{display:block;width:100%;height:auto}
.w-photo figcaption{font-size:12.5px;color:var(--muted);padding:10px 14px;background:var(--surface)}

/* Big numbers strip */
.w-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:40px}
.w-stat{background:var(--surface);padding:22px 22px 20px}
.w-stat b{display:block;font-family:var(--font-display);font-size:44px;letter-spacing:1px;color:var(--amber);line-height:1}
.w-stat span{font-size:13.5px;color:var(--text2);line-height:1.5}

/* Credits: poster cards. Posters are 2:3; a credit with no poster gets a
   typographic card in the same frame so the row still lines up. */
.w-credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.w-credit{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
a.w-credit:hover{border-color:var(--amber);transform:translateY(-2px);text-decoration:none}
.w-poster{aspect-ratio:2/3;background:#0c0c10;position:relative;overflow:hidden}
.w-poster img{width:100%;height:100%;object-fit:cover;display:block}
.w-poster.type{display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:linear-gradient(160deg,#1d1a10,#0b0b0f 60%)}
.w-poster.type b{font-family:var(--font-display);font-size:34px;line-height:.95;letter-spacing:1px;color:#f5c842}
.w-poster.type i{font-style:normal;font-size:12px;color:#aaa;margin-top:8px;letter-spacing:1px;text-transform:uppercase}
.w-badge{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:#f5c842;color:#111;padding:4px 9px;border-radius:99px}
.w-credit-body{padding:14px 16px 16px}
.w-credit-body h3{font-size:16px;font-weight:700;color:var(--text);margin:0 0 4px;line-height:1.3}
.w-credit-body p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}

/* Compact list for older credits / earlier gigs */
.w-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.w-list li{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:1.55;color:var(--text2)}
.w-list li b{color:var(--text);font-weight:600}
.w-list li .yr{font-family:var(--font-display);font-size:20px;letter-spacing:1px;color:var(--amber)}
@media(max-width:560px){.w-list li{grid-template-columns:1fr;gap:2px}}

/* Image tiles: courses, episodes, projects */
.w-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.w-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
a.w-tile:hover{border-color:var(--amber);transform:translateY(-3px);text-decoration:none}
.w-tile-art{aspect-ratio:16/9;overflow:hidden;background:#0c0c10}
.w-tile-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
a.w-tile:hover .w-tile-art img{transform:scale(1.04)}
.w-tile-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.w-tile-kind{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.w-tile h3{font-family:var(--font-display);font-size:28px;letter-spacing:1px;line-height:1;color:var(--text);margin:0 0 10px}
a.w-tile:hover h3{color:var(--amber)}
.w-tile p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0;flex:1}
.w-tile .w-credit-line{font-size:12.5px;color:var(--muted);margin-top:12px}
.w-tile .go{font-size:12.5px;font-weight:700;color:var(--amber);margin-top:14px;letter-spacing:.4px}

/* Pull quotes */
.w-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.w-quote{margin:0;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:var(--radius);padding:22px 24px}
.w-quote p{font-size:16px;line-height:1.65;color:var(--text);margin:0 0 12px;font-style:italic}
.w-quote cite{font-style:normal;font-size:13px;color:var(--muted)}

/* Facts table on a project page */
.w-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:0 0 8px}
.w-fact{background:var(--surface);padding:16px 18px}
.w-fact small{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.w-fact span{font-size:15px;color:var(--text);line-height:1.45}

.w-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.w-chip{font-size:12.5px;font-weight:600;color:var(--text2);background:var(--surface2);border:1px solid var(--border2);border-radius:99px;padding:5px 12px}

/* Filters on /projects */
.w-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.w-filter button{font:inherit;font-size:13px;font-weight:600;color:var(--text2);background:var(--surface);border:1px solid var(--border2);border-radius:99px;padding:7px 15px;cursor:pointer}
.w-filter button:hover{color:var(--text);border-color:var(--amber)}
.w-filter button.on{background:var(--amber);border-color:var(--amber);color:#111}

/* Closing contact band, the same on every page */
.w-contact{margin:84px 0 0;background:radial-gradient(120% 140% at 0% 0%,#2a2210 0%,#111116 55%);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
[data-theme="light"] .w-contact{background:radial-gradient(120% 140% at 0% 0%,#f3e3b5 0%,#f0ede8 60%)}
@media(max-width:760px){.w-contact{grid-template-columns:1fr;padding:34px 24px}}
.w-contact h2{font-family:var(--font-display);font-size:clamp(34px,5vw,50px);letter-spacing:1px;line-height:.95;color:var(--text);margin:0 0 12px}
.w-contact p{font-size:16px;line-height:1.65;color:var(--text2);margin:0}
.w-contact .w-ctas{justify-content:flex-end}
@media(max-width:760px){.w-contact .w-ctas{justify-content:flex-start}}
.w-contact .w-btn.ghost{color:var(--text);border-color:var(--border2);background:transparent}
.w-contact .w-btn.ghost:hover{color:var(--amber);border-color:var(--amber)}

.w-note{font-size:13px;color:var(--muted);margin-top:14px}
.w-back{display:inline-block;margin:28px 0 0;font-size:13px;font-weight:700;color:var(--amber)}

/* Gentle reveal as sections scroll in. Off for people who ask for less motion. */
.w-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.w-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.w-reveal{opacity:1;transform:none;transition:none}}
  .nav-menu{position:relative;display:inline-block}
  .nav-menu>button{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--text2);
    padding:6px 12px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
  .nav-menu>button:hover,.nav-menu.open>button{color:var(--text);background:var(--surface2)}
  .nav-menu.here>button{color:var(--amber);background:var(--amber-dim)}
  .nav-menu .caret{font-size:9px;opacity:.75;transition:transform .15s}
  .nav-menu.open .caret{transform:rotate(180deg)}
  .nav-drop{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--surface);
    border:1px solid var(--border2);border-radius:var(--radius);padding:5px;z-index:60;
    box-shadow:0 10px 28px rgba(0,0,0,.45);display:none}
  .nav-menu.open .nav-drop{display:block}
  .nav-drop a{display:block;padding:9px 11px;border-radius:6px;font-size:13px;color:var(--text2);text-decoration:none}
  .nav-drop a:hover{background:var(--surface2);color:var(--amber);text-decoration:none}
  .nav-drop a small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.w-tiles.clamp .w-tile p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}