:root{
    --paper: #F1ECE3;
    --paper-2: #E7DECB;
    --ink: #241F1A;
    --ink-soft: #58524A;
    --moss: #565B45;
    --umber: #8B5E3C;
    --wine: #7C4A46;
    --orange: #D4865F;
    --rule: rgba(36,31,26,0.15);
    --serif: 'Fraunces', serif;
    --body: 'Newsreader', serif;
    --sans: 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --max: 1160px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--body); font-weight:400; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
  :focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }

  /* ---------- aperture mark (signature) ---------- */
  .aperture{ display:inline-block; vertical-align:middle; }
  .aperture path{
    fill:none; stroke:currentColor; stroke-width:1.3;
    transition: transform 0.5s ease;
    transform-origin:center;
  }
  .aperture:hover path, .aperture.spin path{
    transform: scale(0.86) rotate(18deg);
  }
  .divider-mark{ display:flex; justify-content:center; margin:0; opacity:0.55; color:var(--moss); }

  /* ---------- nav ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(241,236,227,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--rule);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 32px;
  }
  .wordmark{
    display:flex; align-items:center; gap:10px;
    font-family:var(--serif); font-weight:500; font-size:18px;
    text-decoration:none; letter-spacing:0.01em;
  }
  .logo-mark{ height:190px; width:auto; display:block; margin-left:-18px; }
  .navlinks{
    display:flex; gap:34px; list-style:none; margin:0; padding:0;
    font-family:var(--sans); font-size:13px; font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
  }
  .navlinks a{
    text-decoration:none; color:var(--ink); padding-bottom:3px; border-bottom:1px solid transparent;
  }
  .navlinks a:hover{ color:var(--orange); }
  .navlinks .cta-link{ color:var(--ink-soft); }
  .navlinks .cta-link:hover{ color:var(--orange); }

  .nav-item{ position:relative; list-style:none; }
  .dropdown{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:18px; background:var(--paper); border:1px solid var(--rule);
    padding:16px 20px; min-width:180px;
    display:flex; flex-direction:column; gap:11px;
    opacity:0; visibility:hidden; transform:translateX(-50%) translateY(4px);
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    box-shadow:0 12px 28px rgba(36,31,26,0.10);
    z-index:60;
  }
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  .dropdown a{
    font-family:var(--sans); font-size:12px; font-weight:400; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  }
  .dropdown a:hover{ color:var(--orange); }

  .nav-toggle{
    display:none; background:none; border:0; cursor:pointer;
    font-size:22px; line-height:1; color:var(--ink); padding:4px 6px;
  }
  @media (max-width: 900px){
    .nav-toggle{ display:block; }
    .navlinks{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      background:var(--paper); border-bottom:1px solid var(--rule);
      flex-direction:column; align-items:flex-start; gap:0;
      padding:8px 32px 28px;
      max-height:80vh; overflow-y:auto;
      box-shadow:0 16px 32px rgba(36,31,26,0.12);
    }
    .navlinks.nav-open{ display:flex; }
    .navlinks > li{ width:100%; padding:14px 0; border-bottom:1px solid var(--rule); }
    .navlinks > li:last-child{ border-bottom:0; }
    .nav-item{ width:100%; }
    .dropdown{
      position:static; opacity:1; visibility:visible; transform:none;
      box-shadow:none; border:0; background:none; margin:12px 0 0; padding:0;
      min-width:0; gap:10px;
    }
  }
  @media (max-width: 600px){
    .navlinks{ padding-left:20px; padding-right:20px; }
  }

  /* ---------- showreel banner ---------- */
  .showreel{ border-top:none; padding:0; }
  .showreel-media{
    position:relative; width:100%; height:62vh; min-height:380px; max-height:640px;
    overflow:hidden; background:linear-gradient(200deg,#4a4238,#1c1712);
  }
  .showreel-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.07); }
  .showreel-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(36,31,26,0.18) 0%, rgba(36,31,26,0.12) 50%, rgba(36,31,26,0.4) 100%);
    pointer-events:none;
  }
  .showreel-tag{
    position:absolute; top:20px; left:24px; z-index:2;
    font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--paper); display:flex; align-items:center; gap:8px;
  }
  .showreel-tag .aperture{ width:16px; height:16px; }
  .showreel-toggle{
    position:absolute; bottom:20px; right:24px; z-index:2;
    background:rgba(36,31,26,0.45); color:var(--paper); border:1px solid rgba(241,236,227,0.5);
    width:38px; height:38px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:13px; line-height:1;
    transition:background 0.2s ease;
  }
  .showreel-toggle:hover{ background:rgba(36,31,26,0.7); }

  /* ---------- hero ---------- */
  .hero{ padding:88px 0 64px; overflow:hidden; }
  .hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; align-items:center; }

  .hero-roll{
    position:relative; height:560px; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .hero-roll-track{
    display:flex; flex-direction:column; gap:18px;
    animation: hero-roll-scroll 45s linear infinite;
  }
  .hero-roll-plate{
    aspect-ratio:4/5; overflow:hidden; flex-shrink:0;
  }
  .hero-roll-plate .tone{ width:100%; height:100%; }
  .hero-roll-img{ width:100%; height:100%; object-fit:cover; display:block; }
  @keyframes hero-roll-scroll{
    from{ transform:translateY(0); }
    to{ transform:translateY(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-roll-track{ animation:none; }
  }
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-roll{ display:none; }
  }
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--moss); margin:0 0 20px;
  }
  .hero-eyebrow{
    font-family:var(--sans); font-weight:300; letter-spacing:0.22em; text-transform:uppercase; font-size:13px;
  }
  h1.hero-title{
    font-family:var(--serif); font-weight:400; font-size:clamp(38px, 6vw, 68px);
    line-height:1.08; margin:0 0 26px; max-width:16ch; letter-spacing:-0.01em;
  }
  h1.hero-title em{ font-style:italic; font-weight:400; color:var(--wine); }
  .hero-dek{
    font-size:19px; color:var(--ink-soft); max-width:52ch; margin:0 0 30px; line-height:1.6;
  }
  .hero-dek a{
    color:var(--wine); text-decoration:none; border-bottom:1px solid var(--wine); padding-bottom:1px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .hero-dek a:hover{ color:var(--orange); border-color:var(--orange); }
  .hero-tools{
    display:flex; gap:28px; flex-wrap:wrap; font-family:var(--sans); font-size:13px; font-weight:300;
    letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft);
  }
  .hero-tools span{ padding-left:14px; position:relative; }
  .hero-tools span::before{ content:"—"; position:absolute; left:0; color:var(--wine); }

  section{ padding:72px 0; border-top:1px solid var(--rule); }

  /* ---------- philosophy ---------- */
  .philosophy{
    background:var(--paper-2);
    position:relative; overflow:hidden;
  }
  .philosophy::before{
    content:''; position:absolute; inset:0;
    background-image:url('../public/media/home/philosophy-boys.webp');
    background-size:cover; background-position:center;
    opacity:0.3; z-index:0;
  }
  .philosophy .wrap{ position:relative; z-index:1; }
  .philosophy-grid{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap:56px; align-items:start;
  }
  .philosophy p.lead{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(22px,2.6vw,30px); line-height:1.4; margin:0; color:var(--ink);
    align-self:center;
  }
  .philosophy .support p{ color:var(--ink-soft); font-size:17px; max-width:56ch; }
  .philosophy .support p:first-child{ margin-top:0; }

  /* ---------- tools strip ---------- */
  .tools-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:36px; }
  .tool{ border-top:1px solid var(--rule); padding-top:18px; }
  .tool h3{ font-family:var(--serif); font-weight:500; font-size:22px; margin:0 0 10px; }
  .tool h3 a{ color:var(--ink); text-decoration:none; transition:color 0.2s ease; }
  .tool h3 a:hover{ color:var(--orange); }
  .tool p{ color:var(--ink-soft); font-size:15.5px; margin:0; max-width:36ch; }

  /* ---------- portfolio index ---------- */
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap;
  }
  .section-title{ font-family:var(--serif); font-size:clamp(28px,3.4vw,40px); font-weight:400; margin:0; }
  .section-head .eyebrow{
    font-family:var(--sans); font-size:13px; font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
  }
  .section-note{
    font-family:var(--sans); font-size:13px; font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--ink-soft); max-width:34ch; text-align:right;
  }

  .cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .cat-card{ text-decoration:none; color:var(--ink); display:block; group:cat; }
  .cat-plate{
    aspect-ratio:4/5; border:1px solid var(--ink); position:relative; overflow:hidden;
  }
  .cat-plate .tone{ width:100%; height:100%; }
  .cat-plate img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
  .cat-card:hover .cat-plate img{ transform:scale(1.04); }
  .cat-plate[data-youtube-id]{ cursor:pointer; }
  .cat-plate .video-preview-frame{
    position:absolute; inset:0; width:100%; height:100%; border:0;
    opacity:0; transition:opacity 0.25s ease;
  }
  .cat-plate .play-badge{
    position:absolute; bottom:14px; right:14px; z-index:2; width:40px; height:40px;
    border-radius:50%; background:rgba(36,31,26,0.75);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; transition:opacity 0.2s ease;
  }
  .cat-plate[data-youtube-id]:hover .play-badge{ opacity:0; }
  .cat-plate .play-badge svg{ width:14px; height:14px; fill:var(--paper); }
  .cat-plate .iris-corner{
    position:absolute; bottom:10px; right:10px; color:var(--paper); opacity:0;
    transition:opacity 0.3s ease;
  }
  .cat-card:hover .iris-corner, .cat-card:focus-visible .iris-corner{ opacity:0.9; }
  .cat-label{
    display:flex; justify-content:space-between; align-items:baseline; padding-top:14px;
  }
  .cat-label h3{ font-family:var(--serif); font-weight:500; font-size:20px; margin:0; }
  .cat-label span{
    font-family:var(--sans); font-size:11px; font-weight:300; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .cat-desc{ font-size:14.5px; color:var(--ink-soft); margin:6px 0 0; }

  .tone-stories{ background:linear-gradient(200deg,#4a4238,#241f1a); }
  .tone-people{ background:linear-gradient(200deg,#5a4636,#221c16); }
  .tone-places{ background:linear-gradient(200deg,#48513f,#1c1f17); }
  .tone-purpose{ background:linear-gradient(200deg,#5a3f3a,#221815); }
  .tone-brands{ background:linear-gradient(200deg,#3f4640,#1a1e1b); }
  .tone-weddings{ background:linear-gradient(200deg,#4f463a,#201c15); }

  /* ---------- experience band ---------- */
  .experience{ background:var(--ink); color:var(--paper); }
  .experience .eyebrow{ color:#b9b09f; }
  .experience h2{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(34px,4.4vw,52px); color:var(--paper); margin:14px 0 20px; max-width:18ch;
  }
  .experience p{ font-size:17px; max-width:64ch; color:#d8d2c5; }
  .experience p.orgs{ font-family:var(--mono); font-size:13px; color:#b9b09f; letter-spacing:0.02em; }

  /* ---------- discipline index pages (e.g. Photography overview) ---------- */
  .category-hero{ padding:88px 0 40px; }
  /* Writing pages (overview, Narrative & Features, Creative) -- a faded
     photo filling the hero band behind the title/subtitle, sitting fully
     behind the text (its own layer, so it can be near-transparent
     without also fading the text). */
  .category-hero.writing-hero-photo{ position:relative; overflow:hidden; }
  .category-hero.writing-hero-photo::before{
    content:''; position:absolute; inset:0;
    background-image:url('../public/media/writing/creative/letter-and-flower.webp');
    background-size:cover; background-position:center;
    opacity:0.16; z-index:0;
  }
  .category-hero.writing-hero-photo .wrap{ position:relative; z-index:1; }
  .category-hero h1{
    font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,58px);
    line-height:1.1; margin:20px 0 24px; max-width:18ch; letter-spacing:-0.01em;
  }
  .category-list{ margin-top:8px; }
  .category-block{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
    padding:56px 0; border-top:1px solid var(--rule);
    text-decoration:none; color:var(--ink);
  }
  .category-list .category-block:last-child{ border-bottom:1px solid var(--rule); }
  .category-block:nth-child(even) .category-block-media{ order:2; }
  /* On rows where the photo sits on the right, the title/text block would
     otherwise stretch to fill its column and start flush with the page's
     outer edge -- far from the photo. Pulling it snug against the inner
     edge (next to the photo) instead matches how the text already sits
     right next to the photo on the alternating rows, where it's the
     column's own left edge that's the inner edge. Text itself stays
     left-aligned throughout -- only the block's position shifts. */
  .category-block:nth-child(even) > .category-block-copy{
    margin-left:auto; max-width:42ch;
  }
  .category-block-media{
    aspect-ratio:4/5; border:1px solid var(--ink); position:relative; overflow:hidden;
  }
  .category-block-media .tone{ width:100%; height:100%; }
  .category-block-copy .cat-index{ font-family:var(--mono); font-size:12px; color:var(--moss); }
  .category-block-copy h2{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,38px); margin:10px 0 16px; }
  .category-block-copy p{ color:var(--ink-soft); font-size:16px; max-width:42ch; margin:0 0 20px; }
  .category-block-link{
    display:inline-block; font-family:var(--sans); font-size:13px; font-weight:300;
    letter-spacing:0.22em; text-transform:uppercase;
    color:var(--wine); border-bottom:1px solid var(--wine); padding-bottom:2px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  a.category-block:hover .category-block-link{ color:var(--orange); border-color:var(--orange); }
  .category-block-soon{
    display:inline-block; font-family:var(--sans); font-size:13px; font-weight:300;
    color:var(--ink-soft); letter-spacing:0.22em; text-transform:uppercase;
  }
  .tone-events{ background:linear-gradient(200deg,#4a4032,#1d1810); }
  .tone-personal{ background:linear-gradient(200deg,#4a3e46,#1c171f); }
  .tone-features{ background:linear-gradient(200deg,#4a4438,#1d1a15); }
  .tone-creative{ background:linear-gradient(200deg,#3f4a4a,#171e1e); }
  .category-block-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .category-empty{
    padding:56px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    font-family:var(--mono); font-size:12px; color:var(--ink-soft); letter-spacing:0.05em; text-transform:uppercase;
  }

  @media (max-width: 900px){
    .category-block{ grid-template-columns:1fr; gap:24px; padding:40px 0; }
    .category-block:nth-child(even) .category-block-media{ order:0; }
    .category-block:nth-child(even) > .category-block-copy{ margin-left:0; max-width:none; }
  }

  /* ---------- individual project page (immersive image sequence) ---------- */
  .project-hero{ padding:88px 0 48px; }
  .project-hero h1{
    font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,58px);
    line-height:1.1; margin:20px 0 24px; max-width:20ch; letter-spacing:-0.01em;
  }
  .project-sequence{ display:flex; flex-direction:column; gap:64px; padding-bottom:8px; }
  .project-sequence--compact{ max-width:860px; margin-left:auto; margin-right:auto; }
  .project-figure{ margin:0; }
  .project-figure img{ width:100%; height:auto; display:block; }
  .project-figure figcaption{
    font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-soft); margin-top:10px; max-width:68ch;
  }
  .project-pair{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  .project-nav{
    display:flex; justify-content:space-between; align-items:center;
    padding:48px 0; margin-top:56px; border-top:1px solid var(--rule);
    font-family:var(--sans); font-size:13px; font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
  }
  .project-nav a{
    text-decoration:none; color:var(--wine); border-bottom:1px solid var(--wine); padding-bottom:2px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .project-nav a:hover{ color:var(--orange); border-color:var(--orange); }

  /* ---------- article body (writing pieces) ---------- */
  .article-body{
    max-width:680px; margin:0 auto; padding-bottom:8px;
  }
  .article-body p.article-source{
    font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin:0 0 32px;
  }
  .article-source a{
    color:var(--wine); text-decoration:none; border-bottom:1px solid var(--wine); padding-bottom:1px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .article-source a:hover{ color:var(--orange); border-color:var(--orange); }
  .article-lede{
    font-family:var(--serif); font-weight:400; font-style:italic;
    font-size:clamp(19px,2.4vw,23px); line-height:1.5; color:var(--ink);
    margin:0 0 32px;
  }
  .article-body p{ font-size:18px; color:var(--ink); margin:0 0 26px; }
  .article-body h2{
    font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.6vw,28px);
    margin:48px 0 22px;
  }
  .article-body blockquote.pull{ margin:40px 0; }
  .article-body figure{ margin:40px 0; }
  .article-body figure img{ width:100%; height:auto; display:block; border:1px solid var(--ink); }
  .article-body figcaption{
    font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-soft); margin-top:10px;
  }

  @media (max-width: 900px){
    .project-sequence{ gap:40px; }
    .project-pair{ grid-template-columns:1fr; gap:40px; }
  }

  /* ---------- video project page (embedded player hero) ---------- */
  .video-embed{
    position:relative; width:100%; aspect-ratio:16/9;
    background:var(--ink); border:1px solid var(--ink); overflow:hidden;
  }
  .video-embed iframe{
    position:absolute; inset:0; width:100%; height:100%; display:block; border:0;
  }

  /* ---------- flipbook embed (e.g. a designed magazine/thesis PDF) ---------- */
  .flipbook-embed{
    position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  }
  .flipbook-embed iframe{
    position:absolute; inset:0; width:100%; height:100%; display:block; border:0;
  }

  /* ---------- poem hero (creative pieces): full-bleed image, title overlaid ---------- */
  .creative-hero{
    position:relative; aspect-ratio:2/1; overflow:hidden; margin-bottom:56px;
  }
  .creative-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
  .creative-hero-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:32px;
    background:linear-gradient(180deg, rgba(20,17,13,0.2) 0%, rgba(20,17,13,0.55) 100%);
  }
  .creative-hero-overlay h1{
    font-family:var(--serif); font-style:italic; font-weight:400; color:var(--paper);
    font-size:clamp(30px,5vw,54px); text-shadow:0 2px 16px rgba(0,0,0,0.5); margin:0;
    letter-spacing:-0.01em;
  }

  /* Variant: the whole poem is pasted over a tall, uncropped photo (a single
     image+text composite) rather than just the title -- used when a piece's
     photo is portrait and the owner wants it seen in full, e.g.
     "one hundred possibilities". Not the default treatment. */
  .creative-hero--portrait{ aspect-ratio:2/3; }
  .creative-hero--full-poem{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:48px 32px;
    background:linear-gradient(180deg, rgba(20,17,13,0.45) 0%, rgba(20,17,13,0.65) 100%);
  }
  .creative-hero--full-poem h1{ margin-bottom:28px; }
  .creative-hero--full-poem .poem-stanza{
    color:var(--paper); font-size:16px; margin-bottom:22px;
    text-shadow:0 1px 10px rgba(0,0,0,0.6);
  }
  .creative-hero--full-poem .poem-stanza:last-child{ margin-bottom:0; }

  /* ---------- poem stanzas (creative pieces) ---------- */
  .poem-stanza{
    font-family:var(--body); font-style:italic; font-size:19px; line-height:1.8;
    text-align:center; color:var(--ink); margin:0 0 36px;
  }

  @media (max-width: 600px){
    .creative-hero{ aspect-ratio:4/5; }
    .creative-hero--portrait{ aspect-ratio:2/3; }
  }

  /* ---------- video category cards: full-width "banner" layout ---------- */
  .category-block.video-block{
    display:block; padding:56px 0;
  }
  .category-block.video-block .category-block-media{
    aspect-ratio:2/1;
  }

  /* Title/description sit centered on top of the video (copy is nested
     inside .video-media in the DOM -- see js/video-projects.js -- so this
     positions relative to the video itself, not the whole card). Soft/out-
     of-focus by default, sharpens on hover -- desktop only; touch devices
     have no hover state, so they just see it fully clear all the time. */
  .video-media .category-block-copy{
    position:absolute; inset:0; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:32px;
    background:linear-gradient(180deg, rgba(20,17,13,0.10) 0%, rgba(20,17,13,0.58) 100%);
  }
  .video-media .category-block-copy .cat-index{ color:rgba(241,236,227,0.75); }
  .video-media .category-block-copy h2{
    color:var(--paper); text-shadow:0 2px 16px rgba(0,0,0,0.45);
  }
  .video-media .category-block-copy p{
    color:rgba(241,236,227,0.92); margin-left:auto; margin-right:auto;
  }
  .video-media .category-block-copy .category-block-link{
    color:var(--paper); border-color:rgba(241,236,227,0.65);
  }
  @media (hover:hover){
    .video-media .category-block-copy{
      filter:blur(3px); opacity:0.8;
      transition:filter 0.35s ease, opacity 0.35s ease;
    }
    .video-block:hover .category-block-copy{
      filter:blur(0); opacity:1;
    }
  }

  /* ---------- video landing page: category tiles side by side ---------- */
  /* Wider than the site's usual 1160px content column -- at that width,
     splitting into 2 columns made each tile noticeably smaller than a
     single full-width photo inside a project page, so tiles looked small
     and lost on a large screen even though the same layout felt fine on
     a narrower one. */
  .wrap.category-grid{ max-width:1720px; }
  .category-list.category-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px;
  }
  .category-list.category-grid .category-block.video-block{
    padding:0; border-top:none;
  }
  .category-list.category-grid .video-media{
    aspect-ratio:4/3;
  }
  /* Looping muted sample clip behind each tile's title -- sits above the
     .tone gradient fallback, below the text overlay. pointer-events:none
     so clicks/hovers pass through to the tile link and copy overlay.
     The video is native 16:9 but the tile is 4:3, so a plain 100%/100%
     iframe would letterbox (black bars top and bottom). Instead the
     iframe is sized taller than the tile at the video's true ratio and
     centered, so it fills the box completely and the overflow left/right
     is simply cropped by the tile's overflow:hidden -- like cropping a
     photo to fit a frame instead of shrinking it to fit inside one. */
  .category-tile-video{
    position:absolute; top:50%; left:50%;
    width:133.4%; height:100%;
    transform:translate(-50%,-50%);
    border:0; pointer-events:none;
  }
  /* The Weddings clip has its own cinematic black letterboxing baked
     into the footage itself (the source film was edited wider than
     16:9), so on top of the fix above it needs extra zoom to crop that
     baked-in black out of frame entirely -- other clips don't have this
     and don't need the extra scale. */
  .category-tile-video.tile-video--tight-crop{
    transform:translate(-50%,-50%) scale(1.32);
  }
  @media (max-width:700px){
    .category-list.category-grid{ grid-template-columns:1fr; }
  }

  /* ---------- photo landing page: category tiles side by side, overlay titles ---------- */
  /* .category-block defaults to a 2-column grid (photo | text side-by-side)
     for the old category page layout -- cancel that here since the photo
     and its overlaid text are now a single stacked unit, not two columns.
     Without this, each tile was only using half its space and leaving the
     other half empty (matches the fix already applied to .video-block). */
  .category-block.photo-block{
    display:block;
  }
  .category-list.category-grid .category-block.photo-block{
    padding:0; border-top:none;
  }
  .photo-media{
    position:relative; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--ink);
  }
  .photo-media img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform 0.6s ease;
  }
  .photo-block:hover .photo-media img{ transform:scale(1.05); }
  .photo-media .category-block-copy{
    position:absolute; inset:0; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:32px;
    background:linear-gradient(180deg, rgba(20,17,13,0.15) 0%, rgba(20,17,13,0.62) 100%);
  }
  .photo-media .category-block-copy .cat-index{ color:rgba(241,236,227,0.75); }
  .photo-media .category-block-copy h2{
    color:var(--paper); text-shadow:0 2px 16px rgba(0,0,0,0.45);
  }
  .photo-media .category-block-copy p{
    color:rgba(241,236,227,0.92); margin-left:auto; margin-right:auto;
  }
  .photo-media .category-block-copy .category-block-link{
    color:var(--paper); border-color:rgba(241,236,227,0.65);
  }
  /* Shared by both the Photo and Video landing-page grids: the category
     name (index + h2) always stays fully readable, so the page still says
     "People, Places..." / "Stories, Weddings..." at a glance -- only the
     description + link are soft/out-of-focus by default, sharpening into
     full clarity on hover. Desktop only; touch devices have no hover
     state, so they just see everything fully clear all the time. */
  @media (hover:hover){
    .category-grid .video-media .category-block-copy{
      filter:none; opacity:1;
    }
    .category-grid .tile-reveal{
      filter:blur(4px); opacity:0.75;
      transition:filter 0.4s ease, opacity 0.4s ease;
    }
    .category-grid .category-block:hover .tile-reveal{
      filter:blur(0); opacity:1;
    }
  }

  /* ---------- video category cards: static thumbnail, hover-to-preview ---------- */
  .category-block-media.video-media{ cursor:pointer; }
  .category-block-media.video-media .video-preview-frame{
    position:absolute; inset:0; width:100%; height:100%; border:0;
    opacity:0; transition:opacity 0.25s ease;
  }
  .category-block-media.video-media .play-badge{
    position:absolute; bottom:14px; right:14px; z-index:2; width:40px; height:40px;
    border-radius:50%; background:rgba(36,31,26,0.75);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; transition:opacity 0.2s ease;
  }
  .category-block-media.video-media:hover .play-badge{ opacity:0; }
  .category-block-media.video-media .play-badge svg{ width:14px; height:14px; fill:var(--paper); }

  /* ---------- about teaser ---------- */
  .about-grid{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:48px; align-items:center; }
  .about-plate{ aspect-ratio:3/4; border:1px solid var(--ink); background:linear-gradient(200deg,#54493c,#221c16); overflow:hidden; }
  .about-plate img{ width:100%; height:100%; object-fit:cover; display:block; }
  .about-copy p{ color:var(--ink-soft); font-size:17px; max-width:56ch; }
  .about-copy p:first-child{ color:var(--ink); font-size:19px; }
  .about-link{
    display:inline-block; margin-top:8px; font-family:var(--sans); font-size:13px;
    font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
    text-decoration:none; color:var(--wine); border-bottom:1px solid var(--wine); padding-bottom:4px;
  }

  /* ---------- about page ---------- */
  .about-banner{ padding:0; border-top:none; height:320px; overflow:hidden; position:relative; }
  .about-banner img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:blur(3px) saturate(1.1); transform:scale(1.05);
  }
  .about-hero{ padding-top:4px; position:relative; z-index:1; border-top:none; }
  .about-hero-grid{ display:grid; grid-template-columns:0.6fr 1.4fr; gap:48px; align-items:start; }
  .about-portrait{
    aspect-ratio:1100/1064; border:1px solid var(--ink); overflow:hidden;
    box-shadow:0 20px 44px rgba(36,31,26,0.22);
    margin-top:-116px;
  }
  .about-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
  .about-hero-copy{ padding-bottom:22px; }
  .about-greeting{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(30px,4.2vw,52px); color:var(--wine); margin:14px 0 18px; line-height:1.1;
  }
  .about-body{ max-width:64ch; }
  .about-body p{ color:var(--ink-soft); font-size:17px; margin:0 0 22px; }
  .about-body p:first-child{ color:var(--ink); font-size:19px; font-weight:500; }

  /* ---------- words ---------- */
  .words-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; }
  blockquote.pull{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(22px,2.8vw,30px); line-height:1.4; margin:0 0 30px; color:var(--ink);
  }
  blockquote.pull cite{
    display:block; font-family:var(--mono); font-style:normal; font-size:11.5px; color:var(--moss); margin-top:12px;
  }
  ul.projects{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
  ul.projects li{
    padding:16px 0; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  }
  ul.projects .pt{ font-size:15px; }
  ul.projects .pp{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); text-align:right; white-space:nowrap; }

  /* ---------- contact ---------- */
  footer{ background:var(--wine); color:var(--paper); padding:72px 0 40px; }
  .contact-title{ font-family:var(--serif); font-size:clamp(30px,4vw,48px); font-weight:400; margin:0 0 20px; }
  .contact-title em{ font-style:italic; }
  footer p.lead{ max-width:48ch; font-size:17px; color:rgba(241,236,227,0.9); margin-bottom:36px; }

  form.enquiry{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:640px; }
  form.enquiry .full{ grid-column:1 / -1; }
  form.enquiry label{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; display:block; margin-bottom:6px; color:rgba(241,236,227,0.75); }
  form.enquiry input, form.enquiry textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(241,236,227,0.4);
    color:var(--paper); font-family:var(--body); font-size:15px; padding:8px 2px; resize:vertical;
  }
  form.enquiry input::placeholder, form.enquiry textarea::placeholder{ color:rgba(241,236,227,0.4); }
  form.enquiry input:focus, form.enquiry textarea:focus{ outline:none; border-bottom-color:var(--paper); }
  .submit-btn{
    margin-top:8px; background:var(--paper); color:var(--wine); border:none; padding:12px 26px;
    font-family:var(--sans); font-weight:300; font-size:13px; letter-spacing:0.22em; text-transform:uppercase; cursor:pointer;
  }
  .submit-btn:hover{ background:var(--ink); color:var(--paper); }
  .contact-row{
    display:flex; flex-wrap:wrap; gap:36px; align-items:flex-start; font-family:var(--mono); font-size:12.5px;
    padding-top:28px; margin-top:44px; border-top:1px solid rgba(241,236,227,0.25);
  }
  .contact-row a{ text-decoration:underline; text-underline-offset:4px; }
  .social-links{ display:flex; flex-wrap:wrap; gap:32px; }
  .contact-row .social-link{ display:flex; flex-direction:column; gap:5px; text-decoration:none; }
  .social-link .social-label{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(241,236,227,0.55);
  }
  .social-handle{
    font-family:var(--serif); font-style:italic; font-size:17px; color:var(--paper);
    text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(241,236,227,0.3);
  }
  .social-link:hover .social-handle,
  .social-handle:hover{ color:var(--orange); text-decoration-color:var(--orange); }
  .ig-icon{
    width:14px; height:14px; margin-right:6px; vertical-align:-2px;
    fill:none; stroke:currentColor; stroke-width:1.4;
  }
  .footer-logo{ height:90px; width:auto; display:block; filter:invert(1); opacity:0.9; margin:40px 0 16px; }
  .foot-note{ margin-top:30px; font-size:11px; color:rgba(241,236,227,0.55); font-family:var(--mono); }

  @media (max-width: 900px){
    .philosophy-grid, .about-grid, .words-grid{ grid-template-columns:1fr; }
    .tools-strip, .cat-grid{ grid-template-columns:1fr 1fr; }
    form.enquiry{ grid-template-columns:1fr; }
    .section-note{ text-align:left; }
    .about-hero-grid{ grid-template-columns:1fr; gap:24px; }
    .about-portrait{ max-width:280px; margin-top:-90px; }
  }
  @media (max-width: 600px){
    .tools-strip, .cat-grid{ grid-template-columns:1fr; }
    .wrap{ padding:0 20px; }
    .about-banner{ height:220px; }
    .about-portrait{ max-width:220px; margin-top:-70px; }
  }