/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg:            #0b0b0d;
  --bg-soft:       #131316;
  --panel:         rgba(255,255,255,0.045);
  --panel-border:  rgba(255,255,255,0.09);
  --ink:           #f5f4f1;
  --ink-dim:       rgba(245,244,241,0.66);
  --ink-faint:     rgba(245,244,241,0.4);
  --accent:        #e0904a;
  --accent-soft:   rgba(224,144,74,0.16);
  --accent2:       #8b8ff0;

  --font-display:  'Open Sans', sans-serif;
  --font-body:     'Archivo', sans-serif;

  --edge: clamp(1.5rem, 5vw, 4.5rem);
  --gap:  clamp(2.5rem, 6vw, 5rem);
  --radius: 14px;

  --ease: cubic-bezier(.16,.8,.3,1);

  /* YouTube's own maxresdefault thumbnail sometimes bakes black
     letterbox/pillarbox bars into the image itself, for source
     footage that isn't 16:9 - CSS can't crop those out on their own,
     so video thumbnails get a small permanent zoom (below) to crop
     past them. Raise this if a thin bar is still visible on a
     specific video. */
  --thumb-zoom: 1.18;

  /* reveal (on-load / scroll-into-view) transition length */
  --reveal-dur: 1.25s;
  /* focus blur/brightness transition length - kept short so it tracks scroll smoothly */
  --focus-dur: 0.45s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity; /* each block below centres itself as you scroll - proximity (not mandatory) so fast/successive scrolling never feels blocked */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; scroll-snap-type:none; } /* no forced snapping for reduced-motion visitors */
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }
::selection{ background:var(--accent); color:#0b0b0d; }
.dim{ color:var(--ink-faint); font-weight:400; }

/* ============================================================
   BACKGROUND VIDEO
   Fixed behind everything, muted/looped, ignores scrolling.
   See the HTML file for where to point the <source> at your file.
   ============================================================ */
.bg-video-wrap{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:var(--bg); /* fallback colour while/if the video isn't loaded */
  transition:filter 0.6s var(--ease);
  pointer-events:none; /* decorative only - mouse can't reach it, so no PiP hover icon etc. */
}
.bg-video{
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  min-width:100%; min-height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%);
}
/* Chromium's equivalent of disablepictureinpicture, for older builds without the attribute */
.bg-video::-webkit-media-controls-picture-in-picture-button{
  display:none !important;
}
/* Dark scrim so text stays readable over whatever footage is playing */
.bg-video-scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,8,10,0.75) 0%, rgba(8,8,10,0.55) 35%, rgba(8,8,10,0.72) 100%);
}

/* ============================================================
   LAYOUT SHELLS
   ============================================================ */
.wrap{ max-width:74rem; margin:0 auto; padding-inline:var(--edge); position:relative; }

main{ display:block; transition:filter 0.6s var(--ease); }

.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(6.5rem, 14vh, 8.5rem); /* extra bottom room for the scroll indicator */
  scroll-snap-align:center;
}

.kicker{
  font-size:0.8rem;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  margin:0 0 1.1rem;
}

h1.name{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.03em;
  font-size:clamp(3rem, 9vw, 6.2rem);
  line-height:0.98;
  margin:0 0 1.4rem;
}

.tagline{
  max-width:36rem;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:var(--ink-dim);
  font-weight:300;
  margin:0 0 2.4rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.5rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  height:3rem;
  padding-inline:1.6rem;
  border-radius:999px;
  background:var(--accent);
  color:#1a1006;
  font-family:var(--font-body);
  font-weight:500;
  font-size:0.95rem;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
  will-change:transform;
}
.btn:hover{
  background:#eea467;
  box-shadow:0 0.6rem 1.6rem -0.6rem rgba(224,144,74,0.55);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:0.95em; height:0.95em; transition:transform 0.35s var(--ease); }
.btn:hover svg{ transform:translateX(2px); }

.socials{
  display:flex;
  gap:0.65rem;
}
.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  border:1px solid var(--panel-border);
  background:var(--panel);
  text-decoration:none;
  transition:transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.socials svg{ width:1.05rem; height:1.05rem; fill:var(--ink); transition:fill 0.3s var(--ease); }
.socials a:hover{
  transform:translateY(-3px);
  border-color:rgba(224,144,74,0.5);
  background:var(--accent-soft);
}
.socials a:hover svg{ fill:var(--accent); }

/* Scroll indicator - bottom-centre of the hero, visible on all screen
   sizes. A small label above an outlined circle holding a down arrow
   that bounces gently. Not a .reveal element (that class animates
   transform, which would fight the centring), so it fades in on its
   own after the hero text has settled, then fades out again once the
   page is scrolled (JS toggles .is-hidden). */
.scroll-cue{
  position:absolute;
  left:0; right:0;
  bottom:clamp(1rem, 3.5vh, 2.25rem);
  margin-inline:auto;
  width:max-content;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8rem;
  color:var(--ink-dim);
  text-decoration:none;
  opacity:0;
  animation:cueFadeIn 0.8s var(--ease) 0.9s forwards;
  transition:color 0.3s var(--ease), opacity 0.4s var(--ease);
}
.scroll-cue:hover{ color:var(--accent); }
.scroll-cue.is-hidden{ opacity:0 !important; pointer-events:none; }
.scroll-cue-label{
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.scroll-cue-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  border:1px solid var(--ink-faint);
  animation:cueBounce 1.8s ease-in-out infinite;
  transition:border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.scroll-cue-arrow svg{ width:1.1rem; height:1.1rem; }
.scroll-cue:hover .scroll-cue-arrow{
  border-color:var(--accent);
  background:var(--accent-soft);
}
@keyframes cueBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(0.55rem); }
}
@keyframes cueFadeIn{
  to{ opacity:1; }
}

/* ============================================================
   SECTION RHYTHM
   ============================================================ */
section.project{
  padding-block: clamp(3.5rem, 8vh, 6rem);
  border-top:1px solid var(--panel-border);
  scroll-snap-align:center;
}

/* ============================================================
   SHOWREEL
   Centred, single-column - deliberately not split into the
   text+video two-column layout the project rows use below, so it
   reads as "the one big overview piece" rather than one project
   among equals. Sized larger than the individual project video
   thumbnails (which share .wrap's 74rem width split two ways).
   ============================================================ */
section.showreel{
  /* Everywhere else uses proximity snapping (gentle, skippable) so
     fast scrolling never feels blocked - but the showreel is the
     one place scrolling should always come to rest on, so this
     forces a stop here specifically rather than reintroducing
     "always" site-wide. */
  scroll-snap-stop:always;
}
.showreel-inner{
  max-width:min(58rem, 100%);
  margin-inline:auto;
  text-align:center;
}
.showreel-frame{
  margin-top:1.75rem;
}

.project-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap);
  align-items:center;
}
.project-grid.media-left .col-text{ order:2; }
.project-grid.media-left .col-media{ order:1; }

.eyebrow{
  font-size:0.78rem;
  color:var(--accent);
  margin:0 0 0.9rem;
  letter-spacing:0.01em;
}

h2.title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.015em;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  line-height:1.18;
  margin:0 0 1rem;
}

.credit{
  font-size:0.9rem;
  color:var(--ink-dim);
  margin:0 0 1.1rem;
}
.credit a{
  text-decoration:underline;
  text-decoration-color:rgba(245,244,241,0.35);
  text-underline-offset:0.2em;
  transition:text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
}
.credit a:hover{ color:var(--accent); text-decoration-color:var(--accent); }

.desc{
  font-size:0.98rem;
  color:var(--ink-dim);
  max-width:34rem;
}

/* ============================================================
   MEDIA: video / image thumbnails
   ============================================================ */
.media-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--panel-border);
  background:var(--bg-soft);
  isolation:isolate;
}
.media-frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform 0.7s var(--ease);
}
.media-frame.static:hover img{ transform:scale(1.035); }

/* video thumbnails only - crops past any baked-in pillarbox bars */
.media-frame:not(.static) img{
  transform:scale(var(--thumb-zoom));
}

.play-trigger{
  all:unset;
  position:absolute; inset:0;
  cursor:pointer;
}
/* dark gradient so the icon reads clearly against any thumbnail */
.play-trigger::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%);
  transition:background 0.3s var(--ease);
  z-index:1;
}
.play-trigger:hover::before{ background:rgba(0,0,0,0.3); }
.play-trigger:hover img{ transform:scale(calc(var(--thumb-zoom) * 1.035)); }

/* hollow circle + play triangle - pinned to the exact centre point of
   the box with a translate, rather than relying on flex centering,
   so it can't drift toward one edge in any browser. */
.play-icon-svg{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:clamp(3rem, 8%, 4rem);
  height:clamp(3rem, 8%, 4rem);
  opacity:0.78;
  filter:drop-shadow(0 0 0.4rem rgba(0,0,0,0.35));
  transition:opacity 0.25s var(--ease), transform 0.25s var(--ease), filter 0.25s var(--ease);
}
.play-trigger:hover .play-icon-svg{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.08);
  filter:drop-shadow(0 0 0.9rem rgba(255,255,255,0.45));
}

/* ============================================================
   OTHER WORKS / FOOTER
   ============================================================ */
.other{
  padding-block: clamp(3.5rem, 8vh, 6rem);
  border-top:1px solid var(--panel-border);
  scroll-snap-align:center;
}
.other .desc{ max-width:40rem; }
.other .btn{ margin-top:1.75rem; }

footer{
  padding-block:2.5rem;
  border-top:1px solid var(--panel-border);
  font-size:0.82rem;
  color:var(--ink-faint);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.5rem;
}
footer a{ text-decoration:underline; text-underline-offset:0.2em; }
footer a:hover{ color:var(--accent); }

/* ============================================================
   REVEAL - first entrance of each section (opacity/position)
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(1.1rem);
  transition:opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.hero .reveal{ transition-delay:var(--d,0s); }

/* ============================================================
   FOCUS - continuous scroll-driven blur on off-centre sections.
   The blur/brightness values themselves are set inline by
   script.js as you scroll; this just makes the change smooth.
   ============================================================ */
.focus-target{
  transition:filter var(--focus-dur) ease-out, opacity var(--focus-dur) ease-out;
  will-change:filter;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0;
  z-index:400; /* above .work-overlay (300) so videos opened from a work panel show on top */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--edge);
  background:rgba(6,6,8,0.86);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-inner{
  width:100%;
  max-width:64rem;
  aspect-ratio:16/9;
  position:relative;
  transform:scale(0.96);
  transition:transform 0.35s var(--ease);
}
.lightbox.open .lightbox-inner{ transform:scale(1); }
.lightbox-inner iframe{
  width:100%; height:100%;
  border:0;
  border-radius:10px;
  background:#000;
}
.lightbox-close{
  all:unset;
  position:absolute;
  top:-2.8rem; right:0;
  cursor:pointer;
  color:var(--ink-dim);
  font-size:0.85rem;
  display:flex; align-items:center; gap:0.4rem;
  transition:color 0.25s var(--ease);
}
.lightbox-close:hover{ color:var(--accent); }

/* ============================================================
   SIDE NAVIGATION
   A floating icon-only button in the top-right corner opens a
   glass drawer. The page behind it (main content + background
   video) blurs and dims via body.nav-open below.
   ============================================================ */
body.nav-open{ overflow:hidden; } /* locks page scroll while the drawer is open */

body.nav-open main,
body.nav-open .bg-video-wrap{
  filter:blur(14px) brightness(0.55);
  pointer-events:none; /* can't accidentally click through the blur */
}

/* -- trigger button: small floating circle, detached from the corner -- */
.nav-trigger{
  all:unset;
  position:fixed;
  top:clamp(1.25rem, 3vw, 2rem);
  right:clamp(1.25rem, 3vw, 2rem);
  z-index:210;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.1rem;
  height:3.1rem;
  cursor:pointer;
  background:rgba(19,19,22,0.55);
  backdrop-filter:blur(10px);
  border:1px solid var(--panel-border);
  border-radius:50%;
  box-shadow:0 0.5rem 1.5rem -0.6rem rgba(0,0,0,0.5);
  transition:background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-trigger:hover{
  background:var(--accent-soft);
  border-color:rgba(224,144,74,0.5);
  transform:translateY(-2px);
}
.nav-trigger-bars{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.3rem;
  width:1.1rem;
}
.nav-trigger-bars span{
  height:1.5px;
  width:100%;
  background:var(--ink);
  transition:transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
/* morph to an "x" while the drawer is open */
.nav-trigger[aria-expanded="true"] .nav-trigger-bars span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-trigger[aria-expanded="true"] .nav-trigger-bars span:nth-child(2){ opacity:0; }
.nav-trigger[aria-expanded="true"] .nav-trigger-bars span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* -- transparent click-catcher; closes the drawer on an outside click -- */
.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:190;
  background:transparent;
  pointer-events:none;
}
.nav-backdrop.open{ pointer-events:auto; }

/* -- drawer panel -- */
.nav-drawer{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:clamp(20rem, 34vw, 26rem);
  max-width:92vw;
  z-index:200;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(2rem, 4vw, 3rem);
  background:rgba(14,14,17,0.82);
  backdrop-filter:blur(20px) saturate(130%);
  border-left:1px solid var(--panel-border);
  box-shadow:-2rem 0 4rem -1.5rem rgba(0,0,0,0.6);
  transform:translateX(100%);
  transition:transform 0.6s var(--ease);
}
.nav-drawer.open{ transform:translateX(0); }

.nav-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-eyebrow{
  font-size:0.78rem;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin:0;
}
.nav-close{
  all:unset;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.4rem; height:2.4rem;
  border-radius:50%;
  color:var(--ink-dim);
  cursor:pointer;
  transition:color 0.25s var(--ease), background 0.25s var(--ease), transform 0.3s var(--ease);
}
.nav-close:hover{
  color:var(--ink);
  background:var(--panel);
  transform:rotate(90deg);
}

.nav-links{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
}
.nav-links li{ border-top:1px solid var(--panel-border); }
.nav-links li:last-child{ border-bottom:1px solid var(--panel-border); }
.nav-links a{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding-block:1.15rem;
  text-decoration:none;
  transition:padding-left 0.3s var(--ease);
}
.nav-links a:hover{ padding-left:0.4rem; }
.nav-link-index{
  font-size:0.75rem;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.nav-link-text{ display:flex; flex-direction:column; gap:0.2rem; }
.nav-link-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  transition:color 0.25s var(--ease);
}
.nav-links a:hover .nav-link-title{ color:var(--accent); }
.nav-link-desc{
  font-size:0.82rem;
  color:var(--ink-faint);
}

.nav-bottom{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.25rem;
  padding-top:1.5rem;
}
.nav-wordmark{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:1rem;
  color:var(--ink-faint);
  margin:0;
}

@media (max-width: 640px){
  .nav-trigger{ width:2.8rem; height:2.8rem; }
  .nav-drawer{ width:100%; max-width:100%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .project-grid{
    grid-template-columns:1fr;
    gap:1.75rem;
  }
  .project-grid.media-left .col-text,
  .project-grid.media-left .col-media{ order:0; }
  .col-media{ order:-1; }
}

@media (max-width: 480px){
  .hero-actions{ gap:1.1rem; }
}

/* ============================================================
   ARCHIVE PAGE - page header
   A shorter, non-full-height version of the homepage hero, used
   at the top of archive.html (and reusable for about/journal/
   contact if they want the same treatment).
   ============================================================ */
.page-header{
  padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 6vh, 4rem);
}
.page-title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.03em;
  font-size:clamp(2.5rem, 6vw, 4rem);
  line-height:1;
  margin:0 0 1.1rem;
}
.page-header .tagline{ margin:0; }
/* Archive page: no tagline under the title any more, so close up the gap
   between the title and the first row of works. */
.page-header.archive-header{ padding-bottom:clamp(0.5rem, 2vh, 1rem); }
.archive-header .page-title{ margin-bottom:0; }

/* ============================================================
   ARCHIVE PAGE - works grid
   ============================================================ */
.archive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr));
  gap:clamp(1.75rem, 3vw, 2.5rem);
  padding-block:clamp(1rem, 3vh, 2rem) clamp(4rem, 10vh, 7rem);
}

.work-card{
  all:unset;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  cursor:pointer;
}
.work-thumb{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--panel-border);
  background:var(--bg-soft);
  transition:border-color 0.3s var(--ease);
}
.work-card:hover .work-thumb{ border-color:rgba(224,144,74,0.45); }
.work-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.7s var(--ease);
}
.work-card:hover .work-thumb img{ transform:scale(1.045); }

.work-card-meta{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}
.work-year{
  font-size:0.78rem;
  color:var(--ink-faint);
}
.work-title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  font-size:1.05rem;
  color:var(--ink);
  transition:color 0.25s var(--ease);
}
.work-card:hover .work-title{ color:var(--accent); }
.work-tag{
  font-size:0.78rem;
  color:var(--accent);
}

/* ============================================================
   WORK DETAIL OVERLAY
   Shared panel populated from whichever .work-detail-source was
   clicked (see script.js). One element (.work-overlay) is both
   the backdrop AND the click-outside-to-close target - clicking
   anywhere in it that isn't the panel itself closes it, same
   pattern as the video lightbox. Sized to actually use the
   available screen instead of cramming everything into a small
   centred card: wide, tall, and lays gallery images alongside
   the text on anything wider than a tablet.
   ============================================================ */
body.work-open{ overflow:hidden; }

.work-overlay{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--edge);
  /* Heavy blur (not a flat colour panel) - strong enough that any text
     or card edges behind it turn to indistinct shapes, while the
     background video's broad colour/motion still reads faintly through
     as ambient movement. Fine detail (text) is always the first thing
     blur destroys, so this hides the page without hiding all sense of
     the video being alive back there. */
  background:rgba(6,6,8,0.55);
  backdrop-filter:blur(32px) saturate(120%);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s var(--ease);
}
.work-overlay.open{ opacity:1; pointer-events:auto; }

.work-panel{
  position:relative;
  width:100%;
  max-width:min(64rem, 92vw);   /* sized to what the sidebar+content layout actually needs, not an arbitrary large number */
  max-height:92vh;              /* was 86vh */
  overflow-y:auto;
  background:rgba(14,14,17,0.92);
  backdrop-filter:blur(20px) saturate(130%);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:clamp(2.5rem, 5vw, 4rem);
  transform:scale(0.96);
  transition:transform 0.4s var(--ease);
}
.work-overlay.open .work-panel{ transform:scale(1); }

.work-close{
  all:unset;
  position:absolute;
  top:1.5rem; right:1.5rem;
  z-index:1;
  width:2.6rem; height:2.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:var(--ink-dim);
  background:rgba(14,14,17,0.6);
  cursor:pointer;
  transition:color 0.25s var(--ease), background 0.25s var(--ease), transform 0.3s var(--ease);
}
.work-close:hover{
  color:var(--ink);
  background:var(--panel);
  transform:rotate(90deg);
}

/* Two-column layout once there's room: identity info (eyebrow,
   title, credit, facts) stays pinned in a narrow left sidebar
   while the actual narrative - body text AND gallery images
   together, in that order - scrolls on the right. Keeping images
   in the flowing column rather than the sticky sidebar means it
   scales to any number of them without the sidebar ever needing
   its own internal scroll. script.js splits .work-detail-source's
   children into .work-detail-meta / .work-detail-story before this
   runs, so this is always a clean two-item grid. */
@media (min-width: 860px){
  .work-panel-content{
    display:grid;
    grid-template-columns:minmax(14rem, 18rem) minmax(0, var(--work-content-width));
    column-gap:clamp(2.5rem, 4vw, 3.5rem);
    align-items:start;
  }
  .work-detail-meta{
    position:sticky;
    top:0;
  }
  /* the close button sits top-right of the whole panel, not the
     narrow sidebar, so the title doesn't need to dodge it here */
  .work-detail-meta .work-detail-title{ padding-right:0; }
}

/* -- content cloned in from a .work-detail-source -- */
.work-panel{ --work-content-width: 38rem; } /* shared by body text and gallery images below, so their edges line up */
.work-detail-eyebrow{
  font-size:0.78rem;
  color:var(--accent);
  margin:0 0 0.7rem;
}
.work-detail-title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.015em;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  line-height:1.15;
  margin:0 0 0.9rem;
  padding-right:2.5rem; /* keeps long titles clear of the close button */
}
.work-detail-credit{
  font-size:0.9rem;
  color:var(--ink-dim);
  margin:0 0 1.4rem;
}
.work-detail-credit a{
  text-decoration:underline;
  text-decoration-color:rgba(245,244,241,0.35);
  text-underline-offset:0.2em;
  transition:color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.work-detail-credit a:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.work-detail-body p{
  font-size:0.98rem;
  color:var(--ink-dim);
  max-width:var(--work-content-width);
  margin:0 0 1rem;
}
.work-detail-body p:last-child{ margin-bottom:0; }

.work-detail-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:1.1rem 1.5rem;
  margin:1.7rem 0;
  padding-block:1.4rem;
  border-top:1px solid var(--panel-border);
  border-bottom:1px solid var(--panel-border);
}
.work-detail-facts dt{
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 0.3rem;
}
.work-detail-facts dd{
  font-size:0.92rem;
  color:var(--ink);
  margin:0;
}

/* Capped to the same width as the body text above it (--work-content-width)
   rather than stretching to fill the whole story column - otherwise the
   images end up visibly wider than the paragraphs sitting right above
   them, which reads as misaligned. Multiple images still wrap/fit
   themselves within that shared width via auto-fit. */
.work-detail-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
  gap:1rem;
  margin-top:1.7rem;
  max-width:var(--work-content-width);
}
.work-detail-gallery img{
  width:100%;
  border-radius:calc(var(--radius) - 4px);
  border:1px solid var(--panel-border);
  display:block;
}

/* Standalone video block inside a work's detail panel - sits above the
   description, separate from the image gallery, and is deliberately
   more prominent (accent border, label, always-bright play icon). */
.work-detail-video{
  max-width:var(--work-content-width);
  margin:0 0 2rem;
}
.work-detail-video-label{
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 0.7rem;
}
.work-detail-video .media-frame{ border-color:var(--accent); }
.work-detail-video .play-icon-svg{
  opacity:1;
  width:clamp(3.5rem, 14%, 5rem);
  height:clamp(3.5rem, 14%, 5rem);
}
.work-detail-video-link{
  display:inline-block;
  margin-top:0.7rem;
  font-size:0.85rem;
  color:var(--ink-dim);
  text-decoration:underline;
  text-decoration-color:rgba(245,244,241,0.35);
  text-underline-offset:0.2em;
  transition:color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.work-detail-video-link:hover{ color:var(--accent); text-decoration-color:var(--accent); }

/* SoundCloud embed variant of the standalone media block */
.work-detail-audio iframe{
  display:block;
  width:100%;
  height:166px;
  border:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--bg-soft);
}

@media (max-width: 480px){
  .work-panel{ padding:1.75rem; max-height:90vh; }
}

/* ============================================================
   ABOUT / BIOGRAPHY PAGE
   ============================================================ */
.about-section{
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top:1px solid var(--panel-border);
}
.about-bio{
  font-size:clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight:300;
  color:var(--ink);
  margin:0 0 1.6rem;
}
.about-kit{ margin:0; font-size:0.9rem; }
.about-kit a,
.about-links a{
  text-decoration:underline;
  text-decoration-color:rgba(245,244,241,0.35);
  text-underline-offset:0.2em;
  transition:color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.about-kit a:hover,
.about-links a:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.about-note{
  font-size:0.98rem;
  color:var(--ink-dim);
  margin:0 0 1.6rem;
}
.about-links{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:1.1rem 1.5rem;
}
.about-links-label{
  display:block;
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 0.3rem;
}
.about-links a{ font-size:0.92rem; }
.about-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));
  gap:1rem;
  margin-top:1.6rem;
}
.about-gallery figure{ margin:0; }
.about-gallery img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--panel-border);
  background:var(--bg-soft);
}
/* Placeholder pages (journal.html for now): keep the footer at the bottom of
   the screen instead of floating mid-page under a short header. */
.page-placeholder main{ min-height:100svh; display:flex; flex-direction:column; }
.page-placeholder main > .wrap{ width:100%; }
.page-placeholder footer{ margin-top:auto; }