:root{
    --bg: #ededed;
    --bg-2: #e2e2e2;
    --ink: #14171c;
    --ink-soft: #2a2e35;
    --navy: #1f2a3a;
    --navy-ink: #f3f1ec;
    --rule: rgba(20,23,28,.35);
    --rule-soft: rgba(20,23,28,.18);
    --hover: #0b0e13;
    --accent: #c24f78;   /* rgb(194,79,120) — hover accent for nav + filter menu */

    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

    --col-w: 1440px;
    --gutter: 56px;
    --pad: 56px;

    --tile-gap: 8px;
    --tile-ratio: 16 / 9;   /* default; overridden per-project via inline style */
    --show-num: none;
  }

  /* Typography override: route everything through Inter.
     Both --sans and --mono point at Inter so the whole hierarchy stays
     visually unified — the only differentiation left is weight / size. */
  body[data-typography="inter"]{
    --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --mono: "Inter", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
  }

  /* Inter feels slightly more open at the extremes than IBM Plex —
     pull the big headlines in by 1px and lift the small captions/labels
     by 1px so the size range compresses and small text stays readable. */
  body[data-typography="inter"] .intro h1,
  body[data-typography="inter"] .intro-block h1{ font-size: 37px; }
  body[data-typography="inter"] .intro h1 em,
  body[data-typography="inter"] .intro-block h1 em{ font-size: 31px; }
  body[data-typography="inter"] .h-split .split-text h1{ font-size: 33px; }
  body[data-typography="inter"] .h-split .split-text h1 em{ font-size: 27px; }
  body[data-typography="inter"] .h-contact .contact-side h1{ font-size: 23px; }
  body[data-typography="inter"] .h-contact .contact-side h1 em{ font-size: 18px; }
  body[data-typography="inter"] .cat-head h2{ font-size: 21px; }
  body[data-typography="inter"] .proj .title{ font-size: 14px; }

  body[data-typography="inter"] .cat-head .num{ font-size: 12px; }
  body[data-typography="inter"] .cat-head .desc{ font-size: 13px; }
  body[data-typography="inter"] .cat-tag{ font-size: 13px; }
  body[data-typography="inter"] .filters .label{ font-size: 12px; }
  body[data-typography="inter"] .meta .label{ font-size: 12px; }
  body[data-typography="inter"] .panel-info dt{ font-size: 12px; }
  body[data-typography="inter"] .filmo-head{ font-size: 11.5px; }
  body[data-typography="inter"] .imprint-side .imp-label{ font-size: 11px; }
  body[data-typography="inter"] .hero-tile .h-cap,
  body[data-typography="inter"] .hero-tile .h-ratio,
  body[data-typography="inter"] .panel-media .slot .label,
  body[data-typography="inter"] .panel-media .slot .ratio-tag,
  body[data-typography="inter"] .panel-media .slot .expand,
  body[data-typography="inter"] .contact-portrait .h-cap,
  body[data-typography="inter"] .contact-portrait .h-ratio,
  body[data-typography="inter"] .h-contact .contact-side .sheet-num,
  body[data-typography="inter"] .h-split .split-img .img-meta,
  body[data-typography="inter"] .h-contact .contact-grid .hero-tile::after{ font-size: 11px; }
  body[data-typography="inter"] .h-strip .strip-meta{ font-size: 12px; }
  body[data-typography="inter"] .h-contact .contact-side .bio{ font-size: 13px; }
  body[data-typography="inter"] .contact-info dt{ font-size: 10.5px; }
  body[data-typography="inter"] .contact-info dd{ font-size: 13.5px; }
  body[data-typography="inter"] .filmo-list .ct{ font-size: 10px; }
  body[data-typography="inter"] .proj .role,
  body[data-typography="inter"] .proj .meta-cell,
  body[data-typography="inter"] .proj .view{ font-size: 13px; }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
  /* selected text: accent pink with white type instead of the system blue */
  ::selection{background:var(--accent);color:#fff;}
  body{font-family:var(--mono);font-weight:400;font-size:14px;line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  a{color:inherit;text-decoration:none}
  a:hover{color:var(--hover)}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:left}

  .frame{max-width:var(--col-w);margin:0 auto;padding:0 var(--pad);}

  /* Top */
  .top{display:grid;grid-template-columns:280px 1fr auto;gap:var(--gutter);
    padding-top:18px;padding-bottom:80px;align-items:start;
    transition:padding .22s ease;
    position:sticky;top:0;z-index:200;background:var(--bg);
    /* fine continuous rule under the header so it stays delimited even where the
       sticky filter bar has released (e.g. at the about section) */
    border-bottom:1px solid var(--rule-soft);
    /* full-bleed to the real viewport edges (not just the frame) so nothing
       shows through beside the header when content scrolls underneath */
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);}
  .brand{background:transparent;color:var(--ink);padding:18px 0 20px;
    line-height:1.2;font-weight:500;letter-spacing:.01em;cursor:pointer;
    transition:padding .22s ease;width:fit-content;}
  .brand:hover .name,.brand:hover .role{color:var(--accent);}
  /* shrink the header once scrolled */
  .top.is-shrunk{padding-top:10px;}
  body[data-hero="slider"] .top.is-shrunk{padding-bottom:10px;}
  .top.is-shrunk .brand{padding-bottom:10px;}
  /* on desktop / landscape: collapse the brand to a single line with a divider,
     "paul hirschauer | director of photography", so the header gets much smaller */
  @media (min-width:721px){
    .top.is-shrunk{grid-template-columns:auto 1fr auto;padding-top:22px;}
    body[data-hero="slider"] .top.is-shrunk{padding-bottom:16px;}
    .top.is-shrunk .brand{display:flex;align-items:baseline;padding:0;white-space:nowrap;}
    .top.is-shrunk .brand .role::before{content:"|";margin:0 9px;color:var(--rule);opacity:1;}
    .top.is-shrunk .nav{padding-top:0;}
  }
  .brand .name{font-size:13px;}
  .brand .role{font-size:13px;opacity:.92;white-space:nowrap;}

  /* case style — toggled via Tweaks. applies to top-right brand + category tags */
  body[data-case="caps"] .brand .name,
  body[data-case="caps"] .brand .role,
  body[data-case="caps"] .cat-tag{ text-transform: uppercase; letter-spacing: .08em; }
  body[data-case="lower"] .brand .name,
  body[data-case="lower"] .brand .role,
  body[data-case="lower"] .cat-tag{ text-transform: lowercase; letter-spacing: .04em; }

  .meta{display:none;}
  .meta .label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(20,23,28,.55);margin-bottom:6px;}
  .meta .row{display:flex;gap:14px;flex-wrap:wrap;}
  .meta .row span+span::before{content:"·";margin-right:14px;color:rgba(20,23,28,.45);}
  .nav{justify-self:end;text-align:right;padding-top:18px;grid-column:-2 / -1;}
  .nav .nav-block{display:none;}
  .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;align-items:center;}
  .nav li{font-size:14px;font-weight:500;}
  .nav a:hover{color:var(--accent);}
  .nav .arr{color:rgba(20,23,28,.45);margin-right:6px;}



  /* Intro */
  .intro{display:grid;grid-template-columns:280px 1fr 280px;gap:var(--gutter);margin-bottom:96px;}
  .intro h1{grid-column:2 / 3;margin:0;font-family:var(--sans);font-weight:300;
    font-size:38px;line-height:1.25;letter-spacing:-0.01em;color:var(--ink);max-width:720px;}
  .intro h1 em{font-style:normal;font-family:var(--mono);font-weight:400;font-size:32px;
    color:var(--navy-ink);background:var(--navy);padding:0 8px;line-height:1.15;display:inline-block;cursor:pointer;transition:opacity .15s;}
  .intro h1 em:hover{opacity:.82;}

  /* clickable category highlights — applied across all hero/intro variants */
  .intro-block h1 em,
  .h-split .split-text h1 em,
  .h-contact .contact-side h1 em{
    cursor:pointer;transition:opacity .15s;
  }
  .intro-block h1 em:hover,
  .h-split .split-text h1 em:hover,
  .h-contact .contact-side h1 em:hover{ opacity:.82; }
  .intro .bio{grid-column:2 / 3;margin-top:28px;max-width:640px;font-family:var(--mono);
    font-size:14px;color:var(--ink-soft);line-height:1.7;}

  /* Filters */
  .filters{display:grid;grid-template-columns:280px 1fr 280px;gap:0 var(--gutter);
    align-items:end;border-top:1px solid var(--rule);padding-top:13px;margin-bottom:28px;
    /* dock to the top as a header when scrolling; full-bleed bg so content
       scrolling underneath is covered up to the frame edges */
    position:sticky;top:calc(var(--header-h, 0px) - 1px);z-index:100;background:var(--bg);
    padding-bottom:11px;border-bottom:1px solid var(--rule-soft);
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);}
  /* zero-height marker at the filter-bar dock point; main.js reads its position
     for the one-time scroll stop when scrolling down onto the sticky header. */
  .snap-anchor{height:0;margin:0;padding:0;}
  .filters .label{display:none;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(20,23,28,.6);}
  /* filter row runs the full width, left-aligned with the brand/category tags */
  /* pulled left by the buttons' inner padding, so "> documentary" always lines up with the
     header text above; the active navy box simply hangs a few px into the margin */
  .filter-row{grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;position:relative;margin-left:-10px;}
  /* greyed-out instruction prefix at the start of the bar */
  /* the navy box is a single element that swipes to the active category */
  .filter-pill{position:absolute;top:0;left:0;width:0;height:0;background:var(--navy);
    z-index:0;pointer-events:none;opacity:0;
    transition:transform .34s cubic-bezier(.45,.05,.2,1), width .34s cubic-bezier(.45,.05,.2,1),
      height .18s ease, opacity .2s ease;}
  .filter-pill.is-ready{opacity:1;}
  .filter-btn{position:relative;z-index:1;font-family:var(--mono);font-size:14px;color:var(--ink-soft);
    background:transparent;padding:6px 10px 7px;letter-spacing:.04em;transition:color .2s ease;}
  .filter-btn .arr{color:rgba(20,23,28,.45);margin-right:6px;transition:color .2s ease;}
  .filter-btn:hover{color:var(--accent);}
  /* selected state: text turns light; the sliding pill provides the navy box */
  .filter-btn.is-active{color:var(--navy-ink);}
  .filter-btn.is-active .arr,.filter-btn.is-active .count{color:rgba(243,241,236,.55);}
  .filter-btn .count{font-size:11px;color:rgba(20,23,28,.5);margin-left:6px;transition:color .2s ease;}
  /* project strip under the filter bar: the projects of the current category, the open one marked */
  .proj-strip{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;
    gap:2px 0;margin-top:8px;}
  .proj-strip[hidden]{display:none;}
  .ps-item{font:inherit;font-size:12.5px;letter-spacing:.02em;color:rgba(20,23,28,.45);background:none;border:0;
    padding:2px 0;cursor:pointer;transition:color .15s ease;}
  .ps-item + .ps-item::before{content:"·";display:inline-block;margin:0 10px;color:rgba(20,23,28,.3);}   /* inline-block: the underline of the current item skips the dot */
  .ps-item:hover{color:var(--accent);}
  .ps-item.is-current{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:default;}

  /* ===== Project slideshow (pattern variant): one project per view ===== */
  #stage{position:relative;}
  .slide{display:none;}
  /* project switch: the newly shown project slides + fades in (direction set by JS) */
  .slide.is-active{display:block;animation:slideEnter .34s cubic-bezier(.33,.9,.35,1);}
  @keyframes slideEnter{
    from{opacity:0;transform:translateX(var(--enter-x, 28px));}
    to{opacity:1;transform:none;}
  }
  @media (prefers-reduced-motion:reduce){ .slide.is-active{animation:none;} }
  /* prev · title/info · next stay on one line; a long title breaks into two balanced
     lines instead of pushing the next button onto a new row */
  .slide-title{display:flex;align-items:baseline;justify-content:flex-start;gap:20px;flex-wrap:nowrap;padding:26px 0 16px;}
  .slide-title .slide-prev,.slide-title .slide-next{align-self:center;flex:0 0 auto;}
  .slide-title .st-info{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-width:0;flex:0 1 auto;}
  .slide-title .st-info h1{max-width:24ch;text-wrap:balance;line-height:1.2;}
  /* genre · length · country · year + the 01 / 02 counter move as ONE unit */
  .slide-title .st-meta{display:inline-flex;align-items:baseline;gap:18px;white-space:nowrap;}
  /* when title + info + buttons no longer fit on one line (main.js decides per title),
     switch straight to the stacked layout: info on its own line, buttons below */
  .slide-title.is-stacked{flex-wrap:wrap;gap:10px 14px;}
  .slide-title.is-stacked .st-info{order:-1;flex-basis:100%;justify-content:flex-start;gap:10px 14px;}
  /* category is redundant in the slideshow (you always arrive filtered) — drop it */
  .slide-title .cat-tag{display:none;}
  .slide-title h1{margin:0;font-family:var(--mono);font-weight:400;font-size:22px;letter-spacing:-.01em;}
  .slide-title .meta-line{font-size:13px;color:var(--ink-soft);}

  /* Pattern: each trio is its own flex row — one large frame plus two small ones
     beside it, side alternating. Self-contained, so it closes at any frame count. */
  .reel{display:flex;flex-direction:column;gap:6px;}
  .trio{display:flex;gap:6px;align-items:stretch;}
  .trio:nth-child(even){flex-direction:row-reverse;}
  .trio .big{flex:2 1 0;min-width:0;}
  .trio .pair{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;}
  .trio .pair .ph{flex:1 1 0;}
  /* incomplete final row: keep big left + small top-right, empty slot always on the
     right (force normal direction; never blow the leftover up to full width) */
  .reel .trio.partial{flex-direction:row;}
  .trio.partial > .big:only-child{flex:0 0 calc((100% - 6px) * 2 / 3);}
  .trio.partial .pair .ph:only-child{flex:0 0 calc((100% - 6px) / 2);}
  .ph{position:relative;background:var(--bg-2);overflow:hidden;min-height:0;}
  /* reel stills are clickable → open the lightbox at full size */
  .reel .ph{cursor:zoom-in;}
  .trio .big.ph{aspect-ratio:var(--ar, 16/9);}
  .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .ph img:not([src]),.ph img[src=""]{display:none;}
  .ph::after{content:attr(data-label);position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.06em;color:var(--ink-soft);}
  .trio .big.ph::after{left:14px;bottom:12px;}
  .ph.filled::after{display:none;}

  /* film link ("film:" in projekt.txt) — a darkened first still with a play button;
     the Vimeo/YouTube player only loads on click */
  /* sized like a big still (2/3 of the reel), and never taller than ~65% of the screen */
  .film-embed{position:relative;aspect-ratio:var(--film-ar, 16/9);margin-top:6px;
    width:min(calc((100% - 6px) * 2 / 3), calc(65vh * var(--film-ar, 1.7778)));background-color:var(--navy);background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden;}
  .film-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;}
  .film-play{position:absolute;inset:0;width:100%;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:rgba(20,23,28,.45);color:#fff;font:inherit;font-size:14px;letter-spacing:.06em;transition:background .2s ease;}
  .film-play:hover{background:rgba(20,23,28,.3);}
  .film-play[hidden]{display:none;}

  /* Credits block — after the images */
  .credits{display:grid;grid-template-columns:110px 1fr;gap:24px;margin-top:40px;padding-top:0;}   /* "CREDITS" label close to the list */
  .credits .c-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,23,28,.55);}
  .credits .c-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 40px;align-items:start;}
  .credits dl{margin:0;display:grid;grid-template-columns:82px 1fr;gap:6px 14px;font-size:13px;}
  .credits dt{font-size:12px;letter-spacing:.06em;color:rgba(20,23,28,.55);}
  .credits dd{margin:0;color:var(--ink-soft);}
  .credits p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty;}
  .credits .links{display:flex;gap:18px;margin-top:14px;font-size:12.5px;}
  .credits .links a{border-bottom:1px solid var(--rule-soft);}

  /* title-row navigation — sequence count + a single "next project" button,
     inline on the current project's title line (navy box, like the cat tag) */
  .slide-title .sl-count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
    color:rgba(20,23,28,.55);}
  .slide-next,.slide-prev{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px 7px;
    background:var(--navy);color:var(--navy-ink);font-family:var(--sans);font-size:13px;
    font-weight:500;letter-spacing:.02em;transition:background .15s;white-space:nowrap;}
  .slide-next span,.slide-prev span{font-size:15px;line-height:1;}
  .slide-next:hover,.slide-prev:hover{background:var(--accent);}
  /* the same buttons, again at the bottom — both centered, side by side */
  .stage-foot{display:flex;justify-content:center;gap:14px;margin:30px 0 8px;}

  /* ---- list view: chronological index (left) + fixed preview pane (right) ---- */
  #stage.is-list .slide{display:none;}
  #stage.is-list .stage-foot{display:none;}
  .project-list{display:none;margin-top:6px;}
  /* list on the left (on the page's left edge), fixed preview pane on the right */
  #stage.is-list .project-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:56px;align-items:start;}
  .pl-rows{min-width:0;}
  /* rubric heading above each category block */
  /* rubric as a centred chapter divider: ────── fiction 07 ────── */
  .pl-group{display:flex;align-items:center;gap:16px;padding:0 0 10px;margin-top:30px;}
  .pl-group::before,.pl-group::after{content:"";flex:1;height:1px;background:rgba(20,23,28,.18);}
  .pl-group:first-child{margin-top:4px;}
  /* rubric label: navy text instead of a filled navy box (lighter), lined up with the years */
  .pl-group .cat-tag{margin:0;padding:0;background:none;color:var(--navy);font-size:13px;font-weight:500;}
  .pl-group-n{margin-left:8px;font-size:11px;font-weight:400;color:rgba(20,23,28,.4);}
  .pl-row{position:relative;display:grid;grid-template-columns:54px 1fr;align-items:center;gap:22px;
    width:100%;padding:3px 0;text-align:left;color:var(--ink);
    border:0;border-top:1px solid rgba(20,23,28,.07);border-bottom:1px solid transparent;}
  /* the last row of a group closes its block with the same faint line */
  .pl-row:not(:has(+ .pl-row)){border-bottom-color:rgba(20,23,28,.07);}
  /* hover: title + arrow turn pink and slide a few px to the right, the year darkens —
     no box, no heavier lines */
  .pl-row .pl-year{transition:color .15s ease;}
  .pl-row .pl-title{transition:color .15s ease, transform .2s ease;}
  .pl-row:hover .pl-title,.pl-row:hover .pl-title .arr{color:var(--accent);}
  .pl-row:hover .pl-title{transform:translateX(6px);}
  .pl-row:hover .pl-year{color:var(--ink);}
  .pl-year{font-family:var(--mono);font-size:13px;color:rgba(20,23,28,.55);}
  /* arrow + name side by side, so a long title's second line starts under its first letter */
  .pl-title{display:flex;align-items:baseline;font-family:var(--mono);font-size:14px;letter-spacing:0;transition:color .15s;}
  .pl-title .arr{flex:0 0 auto;color:rgba(20,23,28,.45);margin-right:8px;}
  .pl-title .pl-name{min-width:0;}
  /* fixed preview pane on the right — sticks below the filter bar, appears only while hovering a row */
  .pl-preview{position:sticky;top:calc(var(--header-h, 0px) + 110px);pointer-events:none;
    aspect-ratio:var(--ar, 16/9);background:var(--bg-2);overflow:hidden;
    opacity:0;transition:opacity .2s ease;}
  .pl-preview.is-on{opacity:1;}
  .pl-preview img{width:100%;height:100%;object-fit:cover;display:block;}
  @media (hover:none), (max-width:720px){ .pl-preview{display:none;} }

  @media (max-width:1080px){
    .credits{grid-template-columns:1fr;}
  }
  @media (max-width:720px){
    .slide-title{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 14px;padding:20px 0 14px;}
    .slide-title .st-info{gap:10px 14px;order:-1;flex-basis:100%;justify-content:flex-start;}
    .slide-title .st-meta{gap:14px;}
    .slide-title h1{font-size:20px;}
    .slide-title .slide-next,.slide-title .slide-prev{justify-self:auto;}
    .slide-title .sl-count{font-size:11px;}
    .slide-next,.slide-prev{font-size:12px;padding:5px 10px 6px;}
    .trio,.trio:nth-child(even){flex-direction:column;}
    .trio .pair{flex-direction:column;}
    .trio .big.ph,.trio .pair .ph{aspect-ratio:var(--ph-ar, 16/9);flex:0 0 auto;}
    .reel .trio.partial{flex-direction:column;}
    .trio.partial > .big:only-child{flex:0 0 auto;}
    .trio.partial .pair .ph:only-child{flex:0 0 auto;}
    .pl-preview{display:none;}
    #stage.is-list .project-list{grid-template-columns:1fr;gap:0;}
    .pl-row{grid-template-columns:48px 1fr;gap:6px 14px;padding:6px 0;}
    .pl-title{font-size:14px;}
  }

  /* Category */
  .cat{display:grid;grid-template-columns:280px 1fr 280px;gap:var(--gutter);
    padding:36px 0 56px;border-top:1px solid var(--rule);}
  .cat:first-of-type{border-top:0;padding-top:8px;}
  /* stop just below the filter bar's grey rule (~67px), with a gap that matches
     the blue tag's own padding (~7px) so the spacing reads consistently */
  .cat-head{grid-column:1 / 2;position:sticky;top:calc(var(--header-h, 0px) + 74px);align-self:start;}
  .cat-tag{display:inline-block;background:var(--navy);color:var(--navy-ink);
    padding:6px 10px 7px;font-size:12px;letter-spacing:.04em;margin-bottom:14px;}
  .cat-head h2{margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:22px;letter-spacing:-.005em;}
  .cat-head .desc{font-size:12px;color:var(--ink-soft);line-height:1.6;max-width:230px;}
  .cat-head .num{margin-top:18px;font-size:11px;letter-spacing:.02em;color:rgba(20,23,28,.55);}

  /* cat-head variants (toggled via Tweaks). 'full' is current default. */
  body[data-cat-head="minimal"] .cat .cat-head h2,
  body[data-cat-head="minimal"] .cat .cat-head .desc { display:none; }
  body[data-cat-head="minimal"] .cat .cat-head .num { margin-top:10px; }

  body[data-cat-head="label"] .cat .cat-head .desc { display:none; }
  body[data-cat-head="label"] .cat .cat-head h2 { margin:0 0 2px; font-size:18px; }
  body[data-cat-head="label"] .cat .cat-head .num { margin-top:12px; }

  /* tag-desc — just the tag pill + the description (no h2 subtitle, no num by default) */
  body[data-cat-head="tag-desc"] .cat .cat-head h2 { display:none; }
  body[data-cat-head="tag-desc"] .cat .cat-head .desc { margin:0; }
  body[data-cat-head="tag-desc"] .cat .cat-head .num { margin-top:14px; }
  /* project-count visibility is controlled by --show-num via the tweak */
  body[data-cat-head="tag-desc"] .cat .cat-head .num { display: var(--show-num, none); }

  /* tag-only — just the tag pill, sticky in left column */
  body[data-cat-head="tag-only"] .cat .cat-head h2,
  body[data-cat-head="tag-only"] .cat .cat-head .desc,
  body[data-cat-head="tag-only"] .cat .cat-head .num { display:none; }
  body[data-cat-head="tag-only"] .cat .cat-tag { margin-bottom:0; }

  /* tag-rule — tag + horizontal hairline spanning the section width */
  body[data-cat-head="tag-rule"] .cat { border-top:0; padding-top:8px; }
  body[data-cat-head="tag-rule"] .cat:first-of-type { padding-top:8px; }
  body[data-cat-head="tag-rule"] .cat .cat-head {
    position:static; align-self:auto;
    grid-column: 1 / 4;
    display:flex; align-items:center; gap:14px;
    margin-bottom:22px;
  }
  body[data-cat-head="tag-rule"] .cat .cat-head h2,
  body[data-cat-head="tag-rule"] .cat .cat-head .desc,
  body[data-cat-head="tag-rule"] .cat .cat-head .num { display:none; }
  body[data-cat-head="tag-rule"] .cat .cat-tag { margin-bottom:0; flex-shrink:0; }
  body[data-cat-head="tag-rule"] .cat .cat-head::after {
    content:""; flex:1; height:1px; background:var(--rule);
  }

  /* tag-number — large mono "01 ─ documentary", sticky */
  body[data-cat-head="tag-number"] .cat { counter-increment: cat-counter; }
  body[data-cat-head="tag-number"] .cat .cat-head h2,
  body[data-cat-head="tag-number"] .cat .cat-head .desc,
  body[data-cat-head="tag-number"] .cat .cat-head .num { display:none; }
  body[data-cat-head="tag-number"] .cat .cat-tag {
    background:transparent; color:var(--ink);
    padding:0; margin-bottom:0;
    font-family:var(--mono); font-weight:400;
    font-size:26px; letter-spacing:-.01em;
    line-height:1.1;
    display:block;
  }
  body[data-cat-head="tag-number"] .cat .cat-tag::before {
    content: counter(cat-counter, decimal-leading-zero) "  ─  ";
    color: rgba(20,23,28,.45);
  }

  /* tag-rail — rotated vertical tag, sticky against the section's left edge */
  body[data-cat-head="tag-rail"] .cat .cat-head {
    position:sticky; top:40vh; align-self:start;
    height:0; /* let the rotated tag float without reserving column height */
  }
  body[data-cat-head="tag-rail"] .cat .cat-head h2,
  body[data-cat-head="tag-rail"] .cat .cat-head .desc,
  body[data-cat-head="tag-rail"] .cat .cat-head .num { display:none; }
  body[data-cat-head="tag-rail"] .cat .cat-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding:10px 6px 11px;
    margin:0;
    font-size:11px;
  }

  .projects{grid-column:2 / 4;display:flex;flex-direction:column;}
  .proj{display:grid;grid-template-columns:28px 1.4fr 1fr 110px 64px;gap:24px;
    align-items:center;padding:14px 0;border-bottom:1px solid var(--rule-soft);
    cursor:pointer;transition:background .15s,padding .15s;}
  .proj:hover{background:rgba(20,23,28,.05);padding-left:8px;padding-right:8px;}
  .proj .arr{
    display:inline-flex;align-items:center;justify-content:center;
    width:14px;height:14px;font-size:0;line-height:1;
    color:rgba(20,23,28,.45);transition:color .15s;
  }
  .proj .arr::before{
    content:'>';
    font-family:var(--mono);font-size:13px;line-height:1;
    display:block;width:13px;height:13px;text-align:center;
    transition:transform .2s ease;transform-origin:50% 50%;
  }
  .proj:hover .arr,.proj.is-open .arr{color:var(--ink);}
  .proj.is-open .arr::before{transform:rotate(90deg);}
  .proj .title{font-size:15px;color:var(--ink);font-weight:400;}
  .proj .role{font-size:12px;color:var(--ink-soft);font-family:var(--mono);}
  .proj .meta-cell{font-size:12px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums;}
  .proj .view{font-size:12px;color:var(--ink-soft);text-align:right;letter-spacing:.08em;}
  .proj:hover .view{color:var(--ink);}

  /* Expanded panel */
  .proj-panel{grid-column:2 / 4;display:none;padding:18px 0 36px;border-bottom:1px solid var(--rule-soft);}
  .proj-panel.is-open{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;}

  /* Hover peek — a strip of the hero still slides open under the row,
     hinting at the full panel before you click. Injected by main.js. */
  .proj-peek{
    grid-column:2 / 4;
    max-height:0;overflow:hidden;opacity:0;
    pointer-events:none;
    transition:max-height .42s cubic-bezier(.22,.61,.36,1),
               opacity .3s ease, margin-top .42s cubic-bezier(.22,.61,.36,1);
  }
  .proj-peek img{
    display:block;width:100%;height:120px;object-fit:cover;
    transform:scale(1.05);transition:transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .proj:hover + .proj-peek{ max-height:120px;opacity:1;margin-top:3px; }
  .proj:hover + .proj-peek img{ transform:scale(1); }
  /* once the panel is open, drop the peek so the hero isn't shown twice */
  .proj.is-open + .proj-peek{ max-height:0 !important;opacity:0 !important;margin-top:0 !important; }
  @media (hover:none){ .proj-peek{ display:none; } }

  /* Stills grid — landscape only. Hero spans 2 cols, rest single */
  .panel-media{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tile-gap);
    align-content: start;
  }
  .panel-media .slot{
    position:relative;
    aspect-ratio: var(--tile-ratio);
    background:var(--bg-2);
    border:1px solid var(--rule-soft);
    overflow:hidden;
    cursor: zoom-in;
    transition: transform .18s ease, outline-color .18s;
    outline: 1px solid transparent;
  }
  .panel-media .slot.hero{ grid-column: 1 / -1; }
  .panel-media .slot:not(.has-img):hover{ outline-color: var(--ink); }
  .panel-media .slot::before{
    content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(20,23,28,.05) 9px 10px);
  }
  .panel-media .slot.has-img,
  .hero-tile.has-img{
    background: var(--bg-2);
  }
  .panel-media .slot.has-img > img,
  .hero-tile.has-img > img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit: cover;
    display:block;
    z-index: 1;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }
  /* hover: no border — the image lifts by scaling up slightly instead */
  .panel-media .slot.has-img:hover > img,
  .hero-tile.has-img:hover > img{ transform: scale(1.05); }
  .panel-media .slot.has-img::before,
  .hero-tile.has-img::before{ display:none; }
  .panel-media .slot.has-img .label,
  .hero-tile.has-img .h-cap{
    color: rgba(245,243,238,.92);
    left: 0; right: 0; bottom: 0;
    padding: 22px 12px 8px;
    background: linear-gradient(to top, rgba(8,9,12,.55), rgba(8,9,12,0));
    width: auto;
  }
  .panel-media .slot.has-img .ratio-tag,
  .hero-tile.has-img .h-ratio{
    background: rgba(8,9,12,.5);
    color: rgba(245,243,238,.85);
  }
  .panel-media .slot.has-img .expand{
    color: rgba(245,243,238,.85);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
  }
  .panel-media .slot .label{
    position:absolute;left:10px;bottom:8px;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(20,23,28,.55);z-index:2;
  }
  .panel-media .slot .ratio-tag{
    position:absolute;right:10px;top:8px;
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;
    color:rgba(20,23,28,.55);
    background:rgba(166,166,164,.7);
    padding:2px 6px;
    z-index:2;
  }
  .panel-media .slot .expand{
    position:absolute;right:10px;bottom:8px;
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;
    color:rgba(20,23,28,.55);z-index:2;opacity:0;transition:opacity .15s;
  }
  .panel-media .slot:hover .expand{ opacity:1; }

  .panel-info dl{margin:0;display:grid;grid-template-columns:100px 1fr;row-gap:8px;column-gap:16px;font-size:13px;}
  .panel-info dt{color:rgba(20,23,28,.55);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;padding-top:3px;}
  .panel-info dd{margin:0;color:var(--ink);}
  .panel-info p{margin:18px 0 0;font-size:13px;line-height:1.65;color:var(--ink-soft);max-width:46ch;}
  .panel-info .links{margin-top:22px;display:flex;gap:22px;font-size:12px;}
  .panel-info .links a{border-bottom:1px solid var(--ink-soft);padding-bottom:1px;}

  /* Contact section — image LEFT, filmography RIGHT */
  .contact-block{
    display:grid;
    grid-template-columns: minmax(0,1fr) 340px minmax(240px,300px);
    gap:22px var(--gutter);
    padding:36px 0 72px;
    border-top:1px solid var(--rule);
    margin-top:48px;
    align-items:start;
  }
  /* about: the "about" box on its own row, then bio (left) · portrait (middle) · get-in-touch (right) */
  .about-head{grid-column:1 / -1;display:flex;}
  .about-head .cat-tag{display:inline-block;}
  .about-bio p{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:48ch;text-wrap:pretty;}
  .about-bio p:last-child{margin-bottom:0;}
  .about-touch h2{margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:20px;letter-spacing:-.005em;color:var(--ink);}
  .about-touch .desc{margin:0 0 22px;font-size:13px;line-height:1.6;color:var(--ink-soft);}
  .contact-block .cat-head{ position:static; }

  .contact-body{
    grid-column: 2 / 4;
    display:grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items:start;
  }

  .about-photo .portrait-tile{
    position:relative;
    background:var(--bg-2);
    border:1px solid var(--rule-soft);
    overflow:hidden;
  }
  /* real portrait: black & white, natural ratio */
  .about-photo .portrait-tile.has-img img{display:block;width:100%;height:auto;filter:grayscale(1);}
  .about-photo .h-cap{
    position:absolute;left:12px;bottom:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.85);z-index:2;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .contact-info{margin-top:22px;}
  .contact-info dl{
    margin:0;display:grid;grid-template-columns:62px 1fr;
    row-gap:6px;column-gap:12px;font-size:12.5px;
  }
  .contact-info dt{
    color:rgba(20,23,28,.55);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;padding-top:3px;
  }
  .contact-info dd{margin:0;color:var(--ink);font-size:12.5px;}
  .contact-info dd a{border-bottom:1px solid var(--rule-soft);padding-bottom:1px;}
  .contact-info dd a:hover{border-color:var(--ink);}

  /* about bio text (right of the portrait) */
  .about-text{max-width:56ch;}
  .about-text p{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--ink-soft);text-wrap:pretty;}
  .about-text p:last-child{margin-bottom:0;}

  /* Filmography — compact, two-column */
  .filmo-head{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(20,23,28,.6);
    border-bottom:1px solid var(--rule);
    padding-bottom:8px;margin-bottom:4px;
  }
  .filmo-list{
    list-style:none;margin:0;padding:0;
    display:grid;
    grid-template-columns: 1fr;
    column-gap: 28px;
  }
  .filmo-list li{
    display:grid;
    grid-template-columns: 38px 1fr auto;
    gap:10px;padding:7px 0;
    border-bottom:1px solid var(--rule-soft);
    font-size:12.5px;align-items:baseline;
  }
  .filmo-list .yr{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:11px;}
  .filmo-list .ttl{color:var(--ink);font-size:13px;line-height:1.3;}
  .filmo-list .rl{display:none;}
  .filmo-list .ct{
    font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(20,23,28,.5);text-align:right;white-space:nowrap;
  }

  /* Imprint section */
  .imprint-block{
    display:grid;
    grid-template-columns:280px 1fr 280px;
    gap:var(--gutter);
    padding:48px 0 24px;
    border-top:1px solid var(--rule);
  }
  .imprint-block .cat-head{ position:static; }
  .imprint-body{
    grid-column: 2 / 4;
    display:grid;
    grid-template-columns: 1fr 260px;
    gap: 48px;
    align-items:start;
  }
  .imprint-text h3{
    font-family:var(--mono);font-weight:500;font-size:13px;
    letter-spacing:.04em;color:var(--ink);
    margin:24px 0 8px;
  }
  .imprint-text h3:first-child{ margin-top:0; }
  .imprint-text p{
    font-size:12.5px;line-height:1.7;color:var(--ink-soft);
    margin:0 0 12px;max-width:68ch;
  }
  .imprint-side{ font-size:12px;line-height:1.65;color:var(--ink-soft); }
  .imprint-side .imp-block{ margin-bottom:18px; }
  .imprint-side .imp-label{
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(20,23,28,.55);margin-bottom:5px;font-family:var(--mono);
  }
  .imprint-side a{ border-bottom:1px solid var(--rule-soft); padding-bottom:1px; }
  .imprint-side a:hover{ border-color:var(--ink); }
  @media (max-width:1080px){
    .imprint-block{ grid-template-columns:1fr; }
    .imprint-body{ grid-column:1 / -1; grid-template-columns:1fr; gap:28px; }
  }
  @media (max-width:720px){
    .imprint-block{ padding:32px 0 16px; gap:16px; }
    .imprint-text p{ font-size:12px; }
  }

  /* Footer */
  footer{display:grid;grid-template-columns:280px 1fr 280px;gap:var(--gutter);
    border-top:1px solid var(--rule);padding:36px 0 64px;margin-top:24px;font-size:12px;color:var(--ink-soft);}
  footer .copy{grid-column:2 / 3;}
  footer .right{grid-column:3 / 4;text-align:right;}
  footer .right a+a{margin-left:18px;}

  .cat[hidden]{display:none !important;}

  /* ============================================================
     HERO REGION — 5 variants, toggled via [data-hero] on <body>
     ============================================================ */
  .hero-region{display:none;}
  .hero-tile{
    position:relative;
    background:var(--bg-2);
    border:1px solid var(--rule-soft);
    overflow:hidden;
    cursor:zoom-in;
    transition:outline-color .18s;
    outline:1px solid transparent;
  }
  .hero-tile:not(.has-img):hover{ outline-color: var(--ink); }
  .hero-tile::before{
    content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(20,23,28,.05) 11px 12px);
  }
  .hero-tile .h-cap{
    position:absolute;left:12px;bottom:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(20,23,28,.6);z-index:2;
  }
  .hero-tile .h-ratio{
    position:absolute;right:12px;top:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;
    color:rgba(20,23,28,.55);
    background:rgba(166,166,164,.7);
    padding:2px 6px;z-index:2;
  }

  /* —— variant 1: SINGLE full-bleed —— */
  body[data-hero="single"] .hero-region.h-single{display:block;margin:0 0 80px;}
  .h-single .hero-tile{ aspect-ratio: 2.39 / 1; width:100%; }
  body[data-hero="single"] .intro{ margin-bottom: 64px; }

  /* Intro variants — show only the active one */
  .intro-block{ display: none; grid-column: 2 / 3; }
  .intro[data-intro="current"]            .intro-block[data-intro-variant="current"],
  .intro[data-intro="compact"]            .intro-block[data-intro-variant="compact"],
  .intro[data-intro="personal"]           .intro-block[data-intro-variant="personal"],
  .intro[data-intro="personal-balanced"]  .intro-block[data-intro-variant="personal"],
  .intro[data-intro="personal-equal"]     .intro-block[data-intro-variant="personal"],
  .intro[data-intro="oneline"]            .intro-block[data-intro-variant="oneline"],
  .intro[data-intro="personal-compact"]   .intro-block[data-intro-variant="personal-compact"],
  .intro[data-intro="side"]               .intro-block[data-intro-variant="side"]{
    display: block;
  }
  .intro-block h1{ margin:0;font-family:var(--sans);font-weight:300;
    font-size:38px;line-height:1.25;letter-spacing:-0.01em;color:var(--ink);max-width:720px; }
  .intro-block h1 em{ font-style:normal;font-family:var(--mono);font-weight:400;font-size:32px;
    color:var(--navy-ink);background:var(--navy);padding:0 8px;line-height:1.15;display:inline-block; }
  .intro-block .bio{ margin-top:28px;max-width:640px;font-family:var(--mono);
    font-size:14px;color:var(--ink-soft);line-height:1.7; }

  /* compact tightens everything */
  .intro[data-intro="compact"]{ margin-bottom: 48px; }
  .intro[data-intro="compact"] .intro-block h1{ font-size: 24px; line-height: 1.3; }
  .intro[data-intro="compact"] .intro-block h1 em{ font-size: 20px; padding: 0 6px; }
  .intro[data-intro="compact"] .intro-block .bio{ margin-top: 14px; font-size: 13px; }

  .intro[data-intro="personal"] .intro-block h1{ font-size: 30px; }
  .intro[data-intro="personal"] .intro-block h1 em{ font-size: 26px; }

  /* current — headline shrunk to match the small bio size */
  .intro[data-intro="current"] .intro-block h1{ font-size: 14px; line-height: 1.65; font-weight: 400; }
  .intro[data-intro="current"] .intro-block h1 em{ font-size: 14px; padding: 0 5px; line-height: 1.2; }

  /* personal-balanced — headline shrunk closer to bio (rather than bloating bio) */
  .intro[data-intro="personal-balanced"] .intro-block h1{ font-size: 20px; line-height: 1.45; }
  .intro[data-intro="personal-balanced"] .intro-block h1 em{ font-size: 17px; padding: 0 6px; }
  .intro[data-intro="personal-balanced"] .intro-block .bio{ margin-top: 18px; font-size: 14px; }

  /* personal-equal — headline & bio at the exact same size */
  .intro[data-intro="personal-equal"] .intro-block h1{
    font-size: 14px; line-height: 1.65; letter-spacing: 0; font-weight: 400;
  }
  .intro[data-intro="personal-equal"] .intro-block h1 em{
    font-size: 14px; padding: 0 5px;
  }
  .intro[data-intro="personal-equal"] .intro-block .bio{
    margin-top: 14px; font-size: 14px; line-height: 1.65;
  }

  .intro[data-intro="oneline"]{ margin-bottom: 48px; }
  .intro[data-intro="oneline"] .intro-block h1{ font-size: 22px; line-height: 1.4; }
  .intro[data-intro="oneline"] .intro-block h1 em{ font-size: 19px; padding: 0 6px; }

  .intro[data-intro="personal-compact"]{ margin-bottom: 48px; }
  .intro[data-intro="personal-compact"] .intro-block h1{ font-size: 24px; line-height: 1.35; }
  .intro[data-intro="personal-compact"] .intro-block h1 em{ font-size: 20px; padding: 0 6px; }
  .intro[data-intro="personal-compact"] .intro-block .bio{ margin-top: 12px; font-size: 13px; }

  /* side-by-side variant */
  .intro[data-intro="side"]{ margin-bottom: 64px; }
  .intro[data-intro="side"] .intro-block[data-intro-variant="side"]{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: start;
    max-width: none;
  }
  .intro[data-intro="side"] .intro-block h1{
    font-size: 28px; line-height: 1.3; max-width: 100%;
  }
  .intro[data-intro="side"] .intro-block h1 em{ font-size: 23px; padding: 0 7px; }
  .intro[data-intro="side"] .side-r{
    border-top: 1px solid var(--rule);
    padding-top: 14px;
  }
  .intro[data-intro="side"] .side-r-label{
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(20,23,28,.55); margin-bottom: 10px;
  }
  .intro[data-intro="side"] .intro-block .bio{
    margin-top: 0; max-width: 42ch; font-size: 13px;
  }
  @media (max-width:1080px){
    .intro[data-intro="side"] .intro-block[data-intro-variant="side"]{
      grid-template-columns: 1fr; gap: 24px;
    }
  }

  /* —— variant 2: STRIP filmstrip —— */
  body[data-hero="strip"] .hero-region.h-strip{display:block;margin:0 0 72px;}
  .h-strip .strip-rail{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 0.85fr 0.85fr;
    gap: var(--tile-gap);
  }
  .h-strip .strip-rail .hero-tile{ aspect-ratio: 16/9; }
  .h-strip .strip-rail .hero-tile.r-239{ aspect-ratio: 2.39/1; }
  .h-strip .strip-rail .hero-tile.r-133{ aspect-ratio: 4/3; }
  .h-strip .strip-meta{
    display:flex;justify-content:space-between;
    margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(20,23,28,.55);
  }

  /* —— variant 5: SLIDER — slow continuous marquee of stills —— */
  body[data-hero="slider"] .intro{display:none;}
  body[data-hero="slider"] .hero-region.h-slider{display:block;margin:0 0 14px;width:100vw;position:relative;left:50%;transform:translateX(-50%);overflow:hidden;}
  /* two rows drifting in opposite directions, small gap between them */
  .h-slider .slider-rows{display:flex;flex-direction:column;gap:6px;}
  .h-slider .slider-track{display:flex;gap:var(--tile-gap);width:max-content;will-change:transform;cursor:var(--swipe-cursor);touch-action:pan-y;user-select:none;}
  .h-slider .slider-track.dragging{cursor:var(--swipe-cursor);}
  /* hero tiles can be grabbed/dragged — show the open grab hand, not the zoom lens.
     no border/outline around the hero images */
  /* drag label that follows the pointer over the image rows (main.js adds
     .has-drag-cursor on mouse devices): white word + chevrons on an 80% box —
     navy over light image areas, pink over dark ones */
  .slider-rows.has-drag-cursor, .slider-rows.has-drag-cursor *{cursor:none !important;}
  .drag-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform;}
  .drag-cursor svg{display:block;width:6px;height:10px;fill:none;stroke:currentColor;stroke-width:1.3;}
  .drag-cursor b{display:block;font-weight:inherit;}
  .drag-cursor span{display:flex;align-items:center;gap:5px;padding:3px 7px 4px;
    background:rgba(31,42,58,.8);color:#fff;
    font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;white-space:nowrap;
    opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .18s ease, transform .18s ease, background-color .2s ease;}
  .drag-cursor.on-dark span{background:rgba(194,79,120,.8);}   /* accent pink over dark image areas */
  .drag-cursor.is-on span{opacity:1;transform:translate(-50%,-50%) scale(1);}
  .drag-cursor.is-on.is-down span{transform:translate(-50%,-50%) scale(.88);}
  /* without the label (touch screens, no JS) the rows keep the normal pointer */
  .h-slider{--swipe-cursor:default;}
  .h-slider .hero-tile{cursor:var(--swipe-cursor);border:0;outline:0;}
  .h-slider .slider-track.dragging .hero-tile{cursor:var(--swipe-cursor);}
  .h-slider .slider-track img{pointer-events:none;-webkit-user-drag:none;}
  /* hover-to-play video: sits over the still, fades in once it can play */
  .h-slider .hero-tile .tile-vid{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;z-index:2;opacity:0;transition:opacity .25s ease;
    pointer-events:none;-webkit-user-drag:none;}
  .h-slider .hero-tile.vid-on .tile-vid{opacity:1;}
  /* hover caption: project title + category, bottom right over a soft bottom shade */
  .h-slider .hero-tile .tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
    display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:40px 16px 14px;
    text-align:right;background:linear-gradient(to top, rgba(20,23,28,.5), rgba(20,23,28,0));
    color:#fff;opacity:0;transition:opacity .25s ease;pointer-events:none;}
  .h-slider .hero-tile .tile-cap > span{transform:translateY(4px);transition:transform .25s ease;}
  .h-slider .hero-tile:hover .tile-cap{opacity:1;}
  .h-slider .hero-tile:hover .tile-cap > span{transform:none;}
  /* long titles break into two balanced lines (e.g. right at the comma) instead of one long run */
  .h-slider .hero-tile .tc-title{font-size:16px;line-height:1.3;max-width:26ch;text-wrap:balance;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
  .h-slider .hero-tile .tc-cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;}  /* size the hero to fill the first screen (header + hero + note) so the project
     section sits just below the fold — calmer home/start state. Two rows: each
     tile is half height so the pair fills the same band as a single row did. */
  .h-slider .hero-tile{height:max(150px, calc((100vh - 200px) / 2));width:auto;aspect-ratio:16/9;flex:0 0 auto;}
  .h-slider .hero-tile.r-133{aspect-ratio:4/3;}
  .h-slider .hero-tile.r-239{aspect-ratio:2.39/1;}
  .h-slider .h-cap,.h-slider .h-ratio{display:none;}
  @keyframes heroSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--tile-gap)/2),0,0)}}
  @media (prefers-reduced-motion:reduce){.h-slider .slider-track{animation:none;}}
  body[data-hero="slider"] .top{padding-bottom:18px;}
  .h-slider .slider-note{margin:20px auto;padding:0 var(--pad);text-align:left;}
  .h-slider .slider-note .note-track{display:block;}
  .h-slider .slider-note span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink-soft);}
  .h-slider .slider-note span[aria-hidden]{display:none;}
  /* phones: two bigger rows + the intro text; the hero fills the first screen (below
     the ~100px header) so the filter bar starts just under the fold, and the text
     gets breathing room underneath */
  @media (max-width:720px){
    body[data-hero="slider"] .hero-region.h-slider{display:flex;flex-direction:column;margin-bottom:0;
      min-height:calc(100vh - var(--header-h, 102px));min-height:calc(100svh - var(--header-h, 102px));}
    /* the text sits centred in the space between the images and the filter bar's line */
    .h-slider .slider-note{margin:auto 0;}
    .h-slider .hero-tile{height:calc((100vh - 360px) / 2);height:calc((100svh - 360px) / 2);min-height:150px;}
  }

  /* —— variant 3: SPLIT headline + key still —— */
  body[data-hero="split"] .intro{ display:none; }
  body[data-hero="split"] .hero-region.h-split{
    display:grid;
    grid-template-columns: 280px 1fr 280px;
    gap: var(--gutter);
    margin-bottom: 96px;
  }
  .h-split .split-text{ grid-column: 2 / 3; align-self: start; }
  .h-split .split-text h1{
    margin:0;font-family:var(--sans);font-weight:300;
    font-size:34px;line-height:1.25;letter-spacing:-0.01em;color:var(--ink);
  }
  .h-split .split-text h1 em{
    font-style:normal;font-family:var(--mono);font-weight:400;font-size:28px;
    color:var(--navy-ink);background:var(--navy);padding:0 7px;line-height:1.15;display:inline-block;
  }
  .h-split .split-text .bio{
    margin-top:24px;max-width:46ch;font-family:var(--mono);
    font-size:13px;color:var(--ink-soft);line-height:1.7;
  }
  .h-split .split-img{
    grid-column: 3 / 4;
    align-self: start;
  }
  .h-split .split-img .hero-tile{
    aspect-ratio: 3 / 4;
    width: 100%;
  }
  .h-split .split-img .img-meta{
    margin-top:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(20,23,28,.55);display:flex;justify-content:space-between;
  }

  /* —— variant 4: CONTACT SHEET —— */
  body[data-hero="contact"] .intro{ display:none; }
  body[data-hero="contact"] .hero-region.h-contact{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap: var(--gutter);
    margin-bottom: 80px;
  }
  .h-contact .contact-side{
    grid-column: 1 / 2;
    align-self:start;
    position:sticky;top:32px;
  }
  .h-contact .contact-side h1{
    margin:0 0 16px;font-family:var(--sans);font-weight:300;
    font-size:24px;line-height:1.3;color:var(--ink);
  }
  .h-contact .contact-side h1 em{
    font-style:normal;font-family:var(--mono);font-weight:400;font-size:19px;
    color:var(--navy-ink);background:var(--navy);padding:0 6px;line-height:1.15;display:inline-block;
  }
  .h-contact .contact-side .bio{
    font-size:12px;color:var(--ink-soft);line-height:1.65;max-width:240px;
  }

  /* Contact-side text sizing variants (controls "Hi, I’m Paul" vs. "Since 2020" balance)
     When sizes get close, we also unify font-family + weight + color + letter-spacing
     so the two blocks read as one consistent voice instead of two mismatched styles. */
  .h-contact .contact-side[data-text-size="balanced"] h1,
  .h-contact .contact-side[data-text-size="balanced"] .bio,
  .h-contact .contact-side[data-text-size="equal"] h1,
  .h-contact .contact-side[data-text-size="equal"] .bio{
    font-family: var(--mono);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-soft);
    max-width: 240px;
  }

  /* Balanced — headline slightly larger & darker so it still reads as the lead */
  .h-contact .contact-side[data-text-size="balanced"] h1{
    font-size: 14px; line-height: 1.55; margin-bottom: 12px;
    color: var(--ink);
  }
  .h-contact .contact-side[data-text-size="balanced"] h1 em{
    font-family: var(--mono); font-weight: 400;
    font-size: 13px; padding: 0 5px; line-height: 1.2;
  }
  .h-contact .contact-side[data-text-size="balanced"] .bio{
    font-size: 12px; line-height: 1.65;
  }

  /* Equal — both blocks identical font/size/color/leading */
  .h-contact .contact-side[data-text-size="equal"] h1{
    font-size: 13px; line-height: 1.65; margin-bottom: 14px;
  }
  .h-contact .contact-side[data-text-size="equal"] h1 em{
    font-family: var(--mono); font-weight: 400;
    font-size: 13px; padding: 0 4px; line-height: 1.2;
  }
  .h-contact .contact-side[data-text-size="equal"] .bio{
    font-size: 13px; line-height: 1.65;
  }
  /* keep equal-sizing winning over the data-typography font-size overrides */
  body[data-typography="inter"] .h-contact .contact-side[data-text-size="equal"] h1,
  body[data-typography="inter"] .h-contact .contact-side[data-text-size="equal"] h1 em{ font-size: 13px; }
  .h-contact .contact-side .sheet-num{
    margin-top:18px;font-size:10px;letter-spacing:.02em;
    color:rgba(20,23,28,.55);
  }
  .h-contact .contact-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tile-gap);
  }
  .h-contact .contact-grid .hero-tile{ aspect-ratio: 16/9; }
  .h-contact .contact-grid .hero-tile.r-239{ aspect-ratio: 2.39/1; }
  .h-contact .contact-grid .hero-tile.r-185{ aspect-ratio: 1.85/1; }
  .h-contact .contact-grid .hero-tile.r-133{ aspect-ratio: 4/3; }
  .h-contact .contact-grid .hero-tile.span-2{ grid-column: span 2; }

  /* Captions off in contact sheet — images speak for themselves; project
     list below the hero. Project name surfaces only on hover. */
  .h-contact .contact-grid .h-cap,
  .h-contact .contact-grid .h-ratio{ display: none; }
  .h-contact .contact-grid .hero-tile{ cursor: pointer; }
  .h-contact .contact-grid .hero-tile::after{
    content: attr(data-project);
    position: absolute; left: 0; right: 0; bottom: 0;
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(245,243,238,.95);
    padding: 40px 12px 10px;
    background: linear-gradient(
      to top,
      rgba(8,9,12,.72) 0%,
      rgba(8,9,12,.55) 30%,
      rgba(8,9,12,.25) 65%,
      rgba(8,9,12,0)   100%
    );
    opacity: 0; transition: opacity .18s; z-index: 3;
    pointer-events: none;
  }
  .h-contact .contact-grid .hero-tile:hover::after{ opacity: 1; }

  /* —— Layout B: uniform rows (true contact-sheet feel — all 16:9, no spans) —— */
  .h-contact .contact-grid[data-contact-layout="uniform"]{
    grid-template-columns: repeat(4, 1fr);
  }
  .h-contact .contact-grid[data-contact-layout="uniform"] .hero-tile{
    aspect-ratio: 16/9 !important;
    grid-column: span 1 !important;
  }

  /* —— Layout B2: uniform 4×2, all 4:3 (taller frames, more detail) —— */
  .h-contact .contact-grid[data-contact-layout="uniform-43"]{
    grid-template-columns: repeat(4, 1fr);
  }
  .h-contact .contact-grid[data-contact-layout="uniform-43"] .hero-tile{
    aspect-ratio: 4/3 !important;
    grid-column: span 1 !important;
  }

  /* —— Layout C: masonry columns (natural ratios, vertical flow) —— */
  .h-contact .contact-grid[data-contact-layout="masonry"]{
    display: block;
    column-count: 3;
    column-gap: var(--tile-gap);
  }
  .h-contact .contact-grid[data-contact-layout="masonry"] .hero-tile{
    break-inside: avoid;
    display: block;
    margin: 0 0 var(--tile-gap);
    width: 100%;
    grid-column: auto !important;
  }

  /* —— mobile adjustments for hero variants —— */
  @media (max-width:1080px){
    body[data-hero="split"] .hero-region.h-split,
    body[data-hero="contact"] .hero-region.h-contact{
      grid-template-columns: 1fr;
    }
    .h-split .split-text, .h-split .split-img,
    .h-contact .contact-side{ grid-column: 1 / -1; position:static; }
    /* stacked but nav not yet a burger: let the intro text use ~half the
       width so two short lines don't look stranded across the full page */
    .h-contact .contact-side h1,
    .h-contact .contact-side .bio,
    .h-contact .contact-side[data-text-size="equal"] h1,
    .h-contact .contact-side[data-text-size="equal"] .bio,
    .h-contact .contact-side[data-text-size="balanced"] h1,
    .h-contact .contact-side[data-text-size="balanced"] .bio{ max-width: 50%; }
    .h-split .split-img .hero-tile{ aspect-ratio: 16/9; }
    .h-strip .strip-rail{ grid-template-columns: repeat(3, 1fr); }
    .h-strip .strip-rail .hero-tile:nth-child(n+4){ display:none; }
  }
  @media (max-width:720px){
    body[data-hero="single"] .hero-region.h-single,
    body[data-hero="strip"]  .hero-region.h-strip,
    body[data-hero="split"]  .hero-region.h-split,
    body[data-hero="contact"] .hero-region.h-contact{
      margin-bottom: 40px;
    }
    .h-strip .strip-rail{ grid-template-columns: repeat(2, 1fr); }
    /* burger view: 2 images per row (2 across, 4 down) so they stay big.
       Must out-specify the [data-contact-layout="uniform-43"] 4-col rule. */
    .h-contact .contact-grid,
    .h-contact .contact-grid[data-contact-layout="uniform"],
    .h-contact .contact-grid[data-contact-layout="uniform-43"]{ grid-template-columns: repeat(2, 1fr); }
    .h-contact .contact-grid .hero-tile,
    .h-contact .contact-grid .hero-tile.span-2{ grid-column: span 1 !important; }
    /* burger view: intro text may now span the full width */
    .h-contact .contact-side h1,
    .h-contact .contact-side .bio,
    .h-contact .contact-side[data-text-size="equal"] h1,
    .h-contact .contact-side[data-text-size="equal"] .bio,
    .h-contact .contact-side[data-text-size="balanced"] h1,
    .h-contact .contact-side[data-text-size="balanced"] .bio{ max-width: none; }
    .h-split .split-text h1{ font-size: 22px; }
    .h-split .split-text h1 em{ font-size: 18px; padding: 0 6px; }
  }

  /* Lightbox */
  .lb{position:fixed;inset:0;z-index:9000;background:rgba(8,9,12,.94);
    display:none;align-items:center;justify-content:center;padding:48px;
    font-family:var(--mono);color:#e7e5df;}
  .lb.is-open{display:flex;}
  .lb-stage{
    position:relative;
    width: min(92vw, calc((100vh - 200px) * var(--lb-ratio, 16/9)));
    aspect-ratio: var(--lb-ratio, 16/9);
    background:#1a1c20;
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
  }
  .lb-stage::before{
    content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(255,255,255,.04) 11px 12px);
  }
  .lb-stage .lb-label{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(255,255,255,.55);}
  .lb-stage .lb-ratio{position:absolute;right:14px;top:12px;font-size:11px;letter-spacing:.12em;
    color:rgba(255,255,255,.55);}
  /* title + counter grouped on the left; the close button keeps the top-right */
  .lb-meta{position:absolute;top:24px;left:48px;right:130px;display:flex;justify-content:flex-start;
    align-items:baseline;gap:14px;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);}
  .lb-meta .title-line span+span::before{content:"·";margin:0 10px;color:rgba(255,255,255,.35);}
  /* prev / next centered along the bottom */
  .lb-bottom{position:absolute;bottom:24px;left:48px;right:48px;display:flex;justify-content:center;align-items:center;
    font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.55);}
  .lb-nav{display:flex;gap:24px;}
  .lb-btn{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.65);letter-spacing:.08em;
    padding:6px 10px;border:1px solid rgba(255,255,255,.18);}
  .lb-btn:hover{color:#fff;border-color:rgba(255,255,255,.5);}
  .lb-close{position:absolute;top:24px;right:48px;}
  .lb-counter{font-variant-numeric:tabular-nums;}

  /* Hide burger by default; mobile media query shows it */
  .burger{ display: none; width: 40px; height: 40px; flex-direction:column;
    justify-content:center; align-items:center; gap: 5px; background: var(--navy); cursor: pointer; }
  .burger span{ display:block; width: 18px; height: 1.5px; background: var(--navy-ink); transition: transform .2s, opacity .2s; }
  .burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ opacity: 0; }
  .burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

  /* ——— Tablet (≤1080px) ——— */
  @media (max-width:1080px){
    :root{ --pad: 36px; --gutter: 32px; }
    /* header stays a single row with horizontal nav on tablet too (no stacking) */
    .intro,.filters,.cat,footer{grid-template-columns:1fr;}
    .intro h1,.intro .bio,.filter-row,.projects,footer .copy,footer .right{grid-column:1 / -1;}
    /* match the sticky bar's top padding to the bottom (the empty label is
       already hidden globally) */
    .filters{ padding-top:11px; }
    .cat-head{position:static;}
    /* New cat-head variants — collapse rotated/large styles back to a normal row on tablet/mobile */
    body[data-cat-head="tag-rail"] .cat .cat-head{ position:static; height:auto; }
    body[data-cat-head="tag-rail"] .cat .cat-tag{
      writing-mode: horizontal-tb; transform:none; padding:5px 8px 6px; font-size:11px;
    }
    body[data-cat-head="tag-number"] .cat .cat-tag{ font-size:18px; }
    .proj{grid-template-columns:24px 1fr 90px;gap:16px;}
    .proj .role,.proj .view{display:none;}
    .proj-panel.is-open{grid-template-columns:1fr;gap:24px;}

    /* tablet: bio and portrait stay side by side, get-in-touch drops below */
    .contact-block{grid-template-columns:minmax(0,1fr) minmax(200px,280px);}
    .about-touch{grid-column:1 / -1;}
  }

  /* ——— Mobile (≤720px) ——— */
  @media (max-width:720px){
    :root{
      --pad: 20px;
      --gutter: 0px;
      --tile-gap: 6px;
    }
    body{ font-size: 13px; }
    .film-embed{ width: 100%; }   /* phone: stills stack full width, so does the film */

    /* Header — stack: brand block, hamburger, meta below */
    .top{
      /* phone: the header scrolls away with the page (not sticky); it keeps its
         z-index so the full-screen menu inside it still covers everything */
      position: relative;
      padding-top: 20px;
      padding-bottom: 36px;
      /* no row gap: the (hidden) meta + nav rows would otherwise add empty space
         under the name; the opened menu brings its own spacing instead */
      gap: 0 18px;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "brand burger"
        "meta meta"
        "nav nav";
      align-items: start;
    }
    .brand{
      grid-area: brand;
      padding: 14px 0 15px;
      width: max-content;
      max-width: 100%;
    }
    .brand .name, .brand .role{ font-size: 14px; }

    /* Hamburger shown on mobile */
    .burger{ display:flex; }
    .burger{
      grid-area: burger;
      width: 40px; height: 40px;
      display:flex; flex-direction:column; justify-content:center; align-items:center;
      gap: 5px;
      background: var(--navy);
      cursor: pointer;
    }

    .meta{
      grid-area: meta;
      font-size: 11px;
      gap: 4px;
    }
    .meta .label{ font-size: 10px; margin-bottom: 2px; }
    .meta .row{ gap: 8px; }
    .meta .row span+span::before{ margin-right: 8px; }

    .nav{
      grid-area: nav;
      display: none;
      padding: 10px 0 4px;
      border-top: 1px solid var(--rule-soft);
    }
    /* opened menu: covers the whole screen, the links large and centred; the name and
       the ✕ stay on top (they sit above the overlay inside the header) */
    .nav.is-open{ display:flex; position:fixed; inset:0; z-index:1; border-top:0; padding:0;
      justify-self:stretch; align-self:stretch; width:auto; height:auto;   /* desktop's justify-self:end would shrink it */
      align-items:center; justify-content:center; background:var(--bg); animation:menuIn .25s ease; }
    .brand, .burger{ position:relative; z-index:2; }
    .nav .nav-block{ display: none; }
    .nav ul{ display:flex; flex-direction:column; align-items:center; gap: 22px; }
    .nav li{ font-size: 28px; font-weight: 400; padding: 0; letter-spacing: -.01em; }
    .nav .arr{ margin-right: 10px; }
    @keyframes menuIn{ from{ opacity:0; } to{ opacity:1; } }
    html.menu-open{ overflow:hidden; }

    /* Intro */
    .intro{ margin-bottom: 48px; gap: 0; }
    .intro h1{ font-size: 22px; line-height: 1.3; max-width: 100%; }
    .intro h1 em{ font-size: 18px; padding: 0 6px; }
    .intro .bio{ margin-top: 18px; font-size: 12.5px; line-height: 1.65; }

    /* Filters — everything visible at once, no sideways scrolling: the "filter" word
       goes, the buttons spread across the width and wrap to a 2nd line only if the
       screen is really narrow */
    .filters{ padding-top: 12px; margin-bottom: 20px; gap: 10px; top: 0; }   /* docks to the very top */
    .filters .label{ font-size: 10px; }
    /* project strip wraps on phones: plain spacing instead of "·", so no dot starts a line */
    .proj-strip{ gap: 2px 16px; margin-top: 6px; }
    .ps-item + .ps-item::before{ display:none; }
    .ps-item{ font-size: 12px; }
    .filter-row{ gap: 4px 2px; flex-wrap: wrap; justify-content: space-between; padding: 2px 0 4px; margin: 0 -6px; }   /* outer words flush with the edges */
    .filter-btn{ font-size: 13px; white-space: nowrap; padding: 6px 6px 7px; }
    .filter-btn .arr{ display: none; }
    .filter-btn .count{ font-size: 10px; margin-left: 4px; }

    /* Category */
    .cat{ padding: 24px 0 32px; gap: 16px; }
    .cat-head{ display:flex; align-items:baseline; gap: 12px; flex-wrap:wrap; }
    .cat-tag{ margin-bottom: 0; padding: 5px 8px 6px; font-size: 11px; }
    .cat-head h2{ font-size: 16px; margin: 0; }
    .cat-head .desc{ display:none; }
    .cat-head .num{ margin-top: 0; font-size: 10px; }

    /* Project rows */
    .proj{
      grid-template-columns: 18px 1fr auto;
      gap: 12px;
      padding: 12px 0;
    }
    .proj:hover{ padding-left: 0; padding-right: 0; }
    .proj .title{ font-size: 13px; line-height: 1.3; }
    .proj .meta-cell{ font-size: 11px; }
    .proj .role{ display:none; }
    .proj .view{ display:none; }

    /* Expanded panel */
    .proj-panel{ padding: 12px 0 24px; }
    .proj-panel.is-open{ grid-template-columns: 1fr; gap: 18px; }

    /* Stills — single column on phone, hero behaves the same */
    .panel-media{ grid-template-columns: 1fr; }
    .panel-media .slot.hero{ grid-column: auto; }
    .panel-media .slot .label{ font-size: 9px; left: 8px; bottom: 6px; }
    .panel-media .slot .ratio-tag{ font-size: 9px; right: 8px; top: 6px; padding: 2px 5px; }
    .panel-media .slot .expand{ opacity: 1; font-size: 9px; right: 8px; bottom: 6px; }

    /* Project info */
    .panel-info dl{ grid-template-columns: 80px 1fr; row-gap: 6px; column-gap: 12px; font-size: 12px; }
    .panel-info dt{ font-size: 10px; }
    .panel-info p{ font-size: 12.5px; margin-top: 14px; }
    .panel-info .links{ margin-top: 16px; gap: 16px; flex-wrap: wrap; }

    /* Footer */
    footer{ padding: 24px 0 36px; gap: 12px; font-size: 11px; }
    footer .right{ text-align:left; }
    footer .right a{ display:block; }
    footer .right a + a{ margin-left: 0; margin-top: 6px; }

    /* Contact */
    .contact-block{ grid-template-columns: 1fr; padding: 32px 0 40px; gap: 22px; margin-top: 24px; }
    .about-photo{ max-width: 260px; }
    .filmo-head{ font-size: 10px; }
    .filmo-list{ grid-template-columns: 1fr; column-gap: 0; }
    .filmo-list li{ grid-template-columns: 38px 1fr 70px; gap: 10px; padding: 8px 0; }
    .filmo-list .ttl{ font-size: 12.5px; }
    .filmo-list .ct{ font-size: 9px; }
    .contact-info dl{ grid-template-columns: 60px 1fr; row-gap: 6px; font-size: 12px; }
    .contact-info dt{ font-size: 9.5px; }

    /* Lightbox — reclaim space, stack chrome; the still runs edge to edge */
    .lb{ padding: 56px 0 80px; background: #08090c; }   /* solid: the page must not show through */
    .lb-stage{
      width: min(100vw, calc((100svh - 150px) * var(--lb-ratio, 16/9)));
      border: 0;
    }
    .lb-stage .lb-label, .lb-stage .lb-ratio{ font-size: 10px; }
    .lb-meta{ top: 14px; left: 16px; right: 16px; font-size: 10px; gap: 12px; }
    .lb-meta .title-line{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 60%; }
    .lb-bottom{ bottom: 16px; left: 16px; right: 16px; flex-direction: column; gap: 8px; align-items:flex-start; font-size: 10px; }
    .lb-nav{ gap: 12px; width: 100%; }
    .lb-nav .lb-btn{ flex: 1; text-align: center; padding: 8px 10px; }
    .lb-close{ top: 14px; right: 16px; }
  }

  /* ——— Very small (≤380px) ——— */
  @media (max-width:380px){
    :root{ --pad: 16px; }
    .intro h1{ font-size: 19px; }
    .intro h1 em{ font-size: 16px; }
    .brand .name, .brand .role{ font-size: 13px; }
  }
  /* very narrow phones: the four filters as a tidy 2 × 2 grid instead of one word alone on line 2 */
  @media (max-width:359px){
    .filter-row{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
    .filter-btn{ text-align:left; }
  }

/* ---- added for the real-image build -------------------------------- */
/* full-size still inside the lightbox */
.lb-stage > img.lb-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; background:#0b0c0f; z-index:1;
}
.lb-stage.has-img::before{ display:none; }
/* extra stills: reachable in the lightbox, hidden in the 5-up grid */
.panel-media .slot.extra{ display:none; }


  /* ——— stills glide in while scrolling (main.js adds .reveal to <html>, then .is-in per still) ——— */
  .reveal .reel .ph, .reveal .film-embed{opacity:0;transform:translateY(28px);
    transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay, 0s);}
  .reveal .reel .ph.is-in, .reveal .film-embed.is-in{opacity:1;transform:none;}

  /* ——— film grain on the images only: a noise tile (main.js → --grain) jittering over
     each still like projected film ——— */
  .reel .ph::before, .h-slider .hero-tile::after, .pl-preview::after{
    content:"";position:absolute;inset:-50%;z-index:4;pointer-events:none;
    background-image:var(--grain, none);background-size:220px 220px;
    opacity:.08;mix-blend-mode:overlay;animation:grain .9s steps(6) infinite;}
  @keyframes grain{
    0%{transform:translate(0,0)} 17%{transform:translate(-4%,3%)} 33%{transform:translate(3%,-5%)}
    50%{transform:translate(-6%,-2%)} 67%{transform:translate(5%,4%)} 83%{transform:translate(-2%,6%)} 100%{transform:translate(0,0)}}
  /* phones: no grain — on a small screen the flicker is too restless */
  @media (max-width:720px){
    .reel .ph::before, .h-slider .hero-tile::after, .pl-preview::after{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .reel .ph::before, .h-slider .hero-tile::after, .pl-preview::after{animation:none;}
    .reveal .reel .ph, .reveal .film-embed{opacity:1;transform:none;transition:none;}
  }

/* phone turned sideways: the screen is short, so the still uses the full height and
   the title / buttons sit on top of it instead of taking space above and below */
@media (max-height:500px) and (orientation:landscape){
  .lb{ padding: 0; background: #08090c; }
  .lb-stage{ width: min(100vw, calc(100svh * var(--lb-ratio, 16/9))); border: 0; }
  .lb-stage .lb-label, .lb-stage .lb-ratio{ display: none; }
  .lb-meta{ top: 10px; left: 16px; right: 70px; font-size: 10px; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .lb-close{ top: 10px; right: 16px; z-index: 2; }
  .lb-bottom{ bottom: 10px; left: 16px; right: 16px; z-index: 2; font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
}