/* ==========================================================================
   WAVY OS — SINGLE-FILE BUILD
   Everything (tokens, layout, components, states) lives in this one sheet.
   ========================================================================== */
:root{
  --void:#060606; --ink:#0b0b0c; --graphite:#131315; --gunmetal:#1c1d20;
  --smoke:rgba(18,19,21,0.62); --smoke-strong:rgba(10,10,11,0.86);
  --bone:#f1efe9; --steel:#9a9a97; --steel-dim:#6b6b69; --chrome:#d8dadb;
  --line:rgba(241,239,233,0.10); --line-strong:rgba(241,239,233,0.22);
  --hairline-chrome:rgba(216,218,219,0.35);
  --accent:#7f96a0; --status-live:#9db98a;
  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-ui:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono","SFMono-Regular",Consolas,monospace;
  --size-hero:clamp(2.6rem,9vw,7.5rem); --size-xl:clamp(1.8rem,4.6vw,3.2rem);
  --size-lg:clamp(1.2rem,2.4vw,1.7rem);
  --radius-lg:28px; --radius-md:18px; --radius-sm:10px; --radius-pill:999px;
  --ease:cubic-bezier(.19,1,.22,1); --dur-fast:220ms; --dur-med:480ms; --dur-slow:780ms;
  --gutter:clamp(1.1rem,4vw,3rem); --max-w:1680px;
}
@media (prefers-reduced-motion:reduce){ :root{ --dur-fast:1ms; --dur-med:1ms; --dur-slow:1ms; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ink); color:var(--bone); font-family:var(--font-ui);
  font-size:0.95rem; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(127,150,160,0.07), transparent 60%),
    radial-gradient(900px 600px at 100% 20%, rgba(255,255,255,0.035), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(255,255,255,0.03), transparent 60%),
    var(--void);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,dl,dd,dt{ margin:0; }
button,input,textarea{ font-family:inherit; color:inherit; background:none; border:none; }
::selection{ background:var(--chrome); color:var(--ink); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; border-radius:2px; }

.display{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:0.005em; line-height:0.92; }
.technical{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.11em; font-size:0.68rem; color:var(--steel); }
.eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.16em; font-size:0.68rem; color:var(--steel); display:inline-flex; align-items:center; gap:0.6em; }
.eyebrow::before{ content:"◆"; font-size:0.6em; color:var(--accent); }

.wrap{ max-width:var(--max-w); margin-inline:auto; padding-inline:var(--gutter); position:relative; }
section{ position:relative; scroll-margin-top: 6.5rem; }

.glass{
  background:var(--smoke); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 60px -20px rgba(0,0,0,0.65);
  position:relative;
}
.glass::after{ content:""; position:absolute; top:0; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,var(--hairline-chrome),transparent); opacity:0.6; }

/* Cursor */
.cursor-dot{ position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%; background:var(--bone); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:background var(--dur-fast) ease; }
.cursor-ring{ position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--chrome); pointer-events:none; z-index:9998; transform:translate(-50%,-50%) scale(0); opacity:0; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); display:flex; align-items:center; justify-content:center; }
.cursor-ring span{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.12em; text-transform:uppercase; color:var(--bone); opacity:0; transition:opacity var(--dur-fast) ease; }
.cursor-ring.is-active{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.cursor-ring.is-active span{ opacity:1; }
.cursor-dot.is-hidden,.cursor-ring.is-hidden{ opacity:0; }
html.has-custom-cursor,html.has-custom-cursor a,html.has-custom-cursor button{ cursor:none; }

/* Top nav */
.os-topbar{ position:fixed; top:clamp(0.8rem,2vw,1.4rem); left:50%; transform:translateX(-50%); z-index:500; display:flex; align-items:center; gap:clamp(0.6rem,2vw,1.6rem); padding:0.55rem 0.6rem 0.55rem 1.1rem; border-radius:var(--radius-pill); width:min(94vw,980px); }
.os-topbar .menu-icon{ width:16px; height:11px; position:relative; flex-shrink:0; }
.os-topbar .menu-icon span{ position:absolute; left:0; right:0; height:1px; background:var(--bone); }
.os-topbar .menu-icon span:nth-child(1){ top:0; } .os-topbar .menu-icon span:nth-child(2){ top:50%; width:65%; } .os-topbar .menu-icon span:nth-child(3){ bottom:0; }
.os-topbar .brand{ font-family:var(--font-display); font-size:1rem; letter-spacing:0.04em; text-transform:uppercase; flex-shrink:0; background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; line-height:0; }
.os-topbar .brand-logo{ display:block; height:30px; width:auto; }
.os-topbar .nav-links{ display:flex; align-items:center; gap:clamp(0.9rem,2.4vw,1.8rem); margin-left:auto; }
.os-topbar .nav-links a{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--steel); transition:color var(--dur-fast) ease; padding:0.3em 0; }
.os-topbar .nav-links a:hover{ color:var(--bone); }
.os-topbar .sys-dot{ width:6px; height:6px; border-radius:50%; background:var(--status-live); flex-shrink:0; box-shadow:0 0 6px rgba(157,185,138,0.6); }
.nav-toggle{ display:none; }
@media (max-width:780px){
  .os-topbar .brand-logo{ height:24px; }
  .os-topbar .menu-icon{ display:none; }
  .os-topbar .nav-links{ display:none; }
  .os-topbar .nav-links a{ font-family:var(--font-display); font-size:2rem; text-transform:uppercase; color:var(--bone); }
  .nav-toggle{ display:none; }
  .nav-toggle span{ position:absolute; left:0; right:0; height:1px; background:var(--bone); transition:transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }
  .nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:50%; } .nav-toggle span:nth-child(3){ bottom:0; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

/* Shell */
.os-shell{ min-height:100svh; padding-top:clamp(6rem,12vh,8rem); padding-bottom:3rem; display:grid; grid-template-columns:74px 1fr 300px; gap:clamp(1rem,2vw,1.6rem); align-items:start; }
@media (max-width:1100px){ .os-shell{ grid-template-columns:60px 1fr; } .os-shell .status-col{ display:none; } }
@media (max-width:780px){ .os-shell{ grid-template-columns:1fr; padding-top:6.5rem; } .os-shell .toolbar-col{ order:3; } }

.discipline-toolbar{ position:sticky; top:clamp(6rem,12vh,8rem); display:flex; flex-direction:column; gap:0.5rem; padding:0.7rem 0.4rem; align-items:center; }
.d-tool{ width:100%; position:relative; display:flex; flex-direction:column; align-items:center; padding:0.65rem 0.2rem; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--dur-fast) ease; }
.d-tool .code{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.06em; color:var(--steel); }
.d-tool:hover,.d-tool.is-active{ background:rgba(241,239,233,0.06); }
.d-tool:hover .code,.d-tool.is-active .code{ color:var(--bone); }
.d-tool .label{ position:absolute; left:calc(100% + 0.7rem); top:50%; transform:translateY(-50%) translateX(-6px); white-space:nowrap; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; background:var(--smoke-strong); border:1px solid var(--line-strong); padding:0.5em 0.8em; border-radius:var(--radius-sm); opacity:0; pointer-events:none; transition:opacity var(--dur-fast) ease, transform var(--dur-fast) ease; backdrop-filter:blur(14px); z-index:60; }
.d-tool:hover .label{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:780px){ .discipline-toolbar{ flex-direction:row; overflow-x:auto; position:static; width:100%; justify-content:flex-start; } .d-tool{ width:auto; flex-shrink:0; padding:0.6rem 0.8rem; } .d-tool .label{ display:none; } }

.center-col{ min-width:0; }
.stage{ position:relative; min-height:clamp(560px,74vh,920px); display:flex; align-items:flex-end; justify-content:center; margin-bottom:clamp(2rem,5vw,3.5rem); }
.portrait-frame{ position:relative; width:auto; height:100%; aspect-ratio:4/5; z-index:2; transform:translateX(4%); }
.portrait-frame .media{
  width:100%; height:100%;
  border-radius:var(--radius-lg) var(--radius-lg) 60px 60px;
  background-size:contain; background-repeat:no-repeat; background-position:center bottom;
  -webkit-mask-image: radial-gradient(ellipse 64% 80% at 50% 42%, black 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 80% at 50% 42%, black 62%, transparent 100%);
}
.portrait-frame img.hero-portrait{
  display:block;
  width:100%; height:100%;
  border-radius:var(--radius-lg) var(--radius-lg) 60px 60px;
  object-fit:contain; object-position:center bottom;
  -webkit-mask-image: radial-gradient(ellipse 64% 80% at 50% 42%, black 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 80% at 50% 42%, black 62%, transparent 100%);
}
.identity-panel{ position:absolute; left:0; top:24%; width:min(52%,320px); padding:1.4rem 1.5rem; z-index:3; }
.identity-panel .name{ font-family:var(--font-display); font-size:clamp(1.6rem,3.6vw,2.4rem); text-transform:uppercase; line-height:0.95; }
.identity-panel .roles{ margin-top:0.7rem; font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--steel); display:flex; gap:0.5em; flex-wrap:wrap; }
.identity-panel .roles span:not(:last-child)::after{ content:"/"; margin-left:0.5em; color:var(--line-strong); }
.identity-panel .statement{ margin-top:1.1rem; font-family:var(--font-ui); font-size:0.92rem; line-height:1.5; color:var(--bone); }
.identity-panel .loc{ margin-top:1rem; font-family:var(--font-mono); font-size:0.66rem; color:var(--steel); text-transform:uppercase; letter-spacing:0.08em; display:flex; align-items:center; gap:0.5em; }
.identity-panel .loc::before{ content:"◎"; color:var(--accent); }
.floating-chip{ position:absolute; padding:0.6rem 1rem; border-radius:var(--radius-pill); font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); z-index:4; display:flex; align-items:center; gap:0.6em; }
.floating-chip .dot{ width:5px; height:5px; border-radius:50%; background:var(--status-live); }
.chip-battery{ right:2%; top:4%; } .chip-signal{ right:6%; top:16%; }
@media (max-width:780px){
  .identity-panel{ position:static; width:100%; margin-bottom:1.2rem; top:auto; left:auto; }
  .stage{ flex-direction:column-reverse; align-items:center; min-height:auto; margin-bottom:1.6rem; }
  .portrait-frame{
    width:min(84vw, 420px); height:auto; aspect-ratio:4/5;
    margin-top:1.2rem; transform:none;
  }
  .portrait-frame .media{
    -webkit-mask-image: radial-gradient(ellipse 70% 84% at 50% 40%, black 66%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 84% at 50% 40%, black 66%, transparent 100%);
  }
  .portrait-frame img.hero-portrait{
    -webkit-mask-image: radial-gradient(ellipse 70% 84% at 50% 40%, black 66%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 84% at 50% 40%, black 66%, transparent 100%);
  }
  .floating-chip{ display:none; }
}

.os-headline{ padding-block:clamp(1.5rem,4vw,3rem) clamp(2rem,5vw,3.5rem); }
.os-headline h1{ font-family:var(--font-display); font-size:var(--size-hero); text-transform:uppercase; line-height:0.86; }
.os-headline em{ font-style:normal; color:var(--steel); }
.os-headline .sub{ margin-top:1.4rem; font-family:var(--font-mono); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--steel); }

.status-col{ position:sticky; top:clamp(6rem,12vh,8rem); }
.status-panel{ padding:1.3rem 1.4rem; }
.status-panel .row{ display:flex; justify-content:space-between; align-items:center; padding-block:0.55rem; border-top:1px solid var(--line); }
.status-panel .row:first-child{ border-top:none; }
.status-panel .row .k{ font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); }
.status-panel .row .v{ font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--bone); display:flex; align-items:center; gap:0.4em; }
.status-panel .v .dot{ width:5px; height:5px; border-radius:50%; background:var(--status-live); box-shadow:0 0 5px rgba(157,185,138,0.6); }

/* Media placeholder — pure CSS/HTML, no file dependency. Fill data-img with a URL
   or base64 string later and it renders automatically without layout changes. */
.media{ position:relative; width:100%; height:100%; background:var(--gunmetal); background-size:contain; background-repeat:no-repeat; background-position:center; overflow:hidden; border-radius:inherit; }
.media--placeholder{ background-image:repeating-linear-gradient(135deg, rgba(241,239,233,0.045) 0 1px, transparent 1px 16px); }
.media--placeholder::before{ content:""; position:absolute; inset:0; border:1px solid var(--line-strong); border-radius:inherit; }
.media-flag{ position:absolute; top:0.8rem; left:0.8rem; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); background:var(--smoke-strong); border:1px solid var(--line-strong); padding:0.35em 0.6em; border-radius:4px; }
.media-label{ position:absolute; left:0; right:0; bottom:0; top:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1rem; font-family:var(--font-mono); font-size:0.7rem; line-height:1.6; color:var(--steel); }
.media-label strong{ display:block; color:var(--bone); font-family:var(--font-display); font-size:1.1rem; text-transform:uppercase; margin-bottom:0.3em; }
.media.is-loaded .media-label,.media.is-loaded .media-flag{ display:none; }
.media.is-loaded{ background-color:transparent; }

/* Project window system */
.window-system{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(0.6rem,1.4vw,1rem); padding-block:clamp(2rem,5vw,4rem); }
.p-window{ position:relative; border-radius:var(--radius-md); overflow:hidden; transition:transform var(--dur-med) var(--ease),opacity var(--dur-med) ease; cursor:pointer; }
.p-window.is-dimmed{ opacity:0.28; }
.p-window .titlebar{ display:flex; align-items:center; gap:0.6rem; padding:0.7rem 0.9rem; border-bottom:1px solid var(--line); }
.p-window .dots{ display:flex; gap:4px; } .p-window .dots span{ width:5px; height:5px; border-radius:2px; background:var(--steel-dim); }
.p-window .path{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.06em; color:var(--steel); text-transform:uppercase; }
.p-window .body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; height:100%; }
.p-window .p-media{ border-radius:var(--radius-sm); overflow:hidden; margin-top:0.9rem; }
.p-window .p-num{ font-family:var(--font-mono); font-size:0.62rem; color:var(--steel); }
.p-window .p-name{ font-family:var(--font-display); text-transform:uppercase; line-height:0.92; font-size:clamp(1.3rem,2.4vw,2rem); margin-top:0.5rem; }
.p-window .p-name .accent-line{ display:block; color:var(--steel); font-size:0.5em; letter-spacing:0.06em; margin-top:0.3em; }
.p-window .p-tags{ margin-top:0.6rem; font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--steel); }
.p-window .p-open{ margin-top:auto; padding-top:1rem; font-family:var(--font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--steel); display:flex; align-items:center; gap:0.5em; }
.p-window .p-open::after{ content:"→"; transition:transform var(--dur-fast) ease; }
.p-window:hover .p-open::after{ transform:translateX(4px); }
.p-window:hover{ transform:translateY(-3px); }
.pw-breet{ grid-column:span 4; grid-row:span 2; } .pw-zlatan{ grid-column:span 2; grid-row:span 2; }
.pw-jol{ grid-column:span 3; } .pw-pep{ grid-column:span 3; } .pw-wavy{ grid-column:span 6; } .pw-vs{ grid-column:span 2; }
.pw-cavemen{ grid-column:span 4; }
.pw-selectedfilms{ grid-column:span 4; }
.pw-adidas{ grid-column:span 3; }
.pw-breet .p-media{ aspect-ratio:16/10; } .pw-zlatan .p-media{ aspect-ratio:3/4; } .pw-jol .p-media{ aspect-ratio:16/9; }
.pw-pep .p-media{ aspect-ratio:16/9; } .pw-wavy .p-media{ aspect-ratio:21/9; } .pw-vs .p-media{ aspect-ratio:4/3; }
.pw-cavemen .p-media{ aspect-ratio:21/9; }
.pw-selectedfilms .p-media{ aspect-ratio:21/9; }
.pw-adidas .p-media{ aspect-ratio:3/4; }
#brandWork{ grid-template-columns:repeat(6,1fr); }
@media (max-width:1100px){ .window-system{ grid-template-columns:repeat(2,1fr); } .pw-breet,.pw-zlatan,.pw-jol,.pw-pep,.pw-wavy,.pw-vs,.pw-cavemen,.pw-adidas,.pw-selectedfilms{ grid-column:span 2; } }
.pw-pep::before{ content:""; position:absolute; inset:10px; border-radius:calc(var(--radius-md) - 6px); border:1px dashed var(--line-strong); pointer-events:none; z-index:1; }

.mini-player{ display:flex; align-items:center; gap:0.8rem; margin-top:0.9rem; }
.mp-btn{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; font-size:0.75rem; transition:background var(--dur-fast) ease; }
.mp-btn:hover{ background:rgba(241,239,233,0.06); }
.mp-bars{ display:flex; align-items:flex-end; gap:2px; height:16px; flex:1; }
.mp-bars span{ width:3px; background:var(--steel); border-radius:1px; height:30%; }
.mini-player.is-playing .mp-bars span{ animation:bar-bounce 900ms ease-in-out infinite; }
.mp-bars span:nth-child(2){ animation-delay:0.1s; } .mp-bars span:nth-child(3){ animation-delay:0.2s; } .mp-bars span:nth-child(4){ animation-delay:0.3s; } .mp-bars span:nth-child(5){ animation-delay:0.15s; }
@keyframes bar-bounce{ 0%,100%{ height:20%; } 50%{ height:90%; } }

/* App panels (WTC / About / Archive / Contact) */
.app-panel{ padding:clamp(1.6rem,3vw,2.4rem); margin-top:1.2rem; }
.app-panel .titlebar{ display:flex; align-items:center; gap:0.6rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line); margin-bottom:1.6rem; }
.app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
@media (max-width:860px){ .app-grid{ grid-template-columns:1fr; } }
.body-copy{ font-family:var(--font-ui); font-size:0.98rem; line-height:1.7; color:var(--bone); max-width:52ch; }
.body-copy + .body-copy{ margin-top:1.1rem; }
.discipline-list{ display:flex; flex-wrap:wrap; gap:0.5rem 0.7rem; margin-top:1.5rem; }
.discipline-list li{ font-family:var(--font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:0.5em 0.95em; }
.text-link{ display:inline-flex; align-items:center; gap:0.6em; margin-top:1.6rem; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; border-bottom:1px solid var(--line-strong); padding-bottom:0.4em; cursor:pointer; transition:border-color var(--dur-fast) ease, gap var(--dur-fast) ease; }
.text-link:hover{ border-color:var(--bone); gap:0.9em; }

.timeline-row{ display:grid; grid-template-columns:5.5rem 1fr; gap:1.2rem; padding-block:1.1rem; border-top:1px solid var(--line); }
.timeline-row:last-child{ border-bottom:1px solid var(--line); }
.timeline-row .yr{ font-family:var(--font-mono); font-size:0.72rem; color:var(--steel); }
.timeline-row .ev{ font-family:var(--font-ui); font-size:0.95rem; max-width:56ch; }
.timeline-row .ev span{ display:block; font-family:var(--font-mono); font-size:0.6rem; color:var(--steel); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.4em; }

.cs-meta-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:0; }
@media (max-width:720px){ .cs-meta-grid{ grid-template-columns:repeat(2,1fr); } }
.cs-meta-grid dt{ font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); margin-bottom:0.4em; }
.cs-meta-grid dd{ font-family:var(--font-display); font-size:0.95rem; text-transform:uppercase; }

/* Archive file grid */
.file-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0.8rem; }
.file-cell{ border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; }
.file-cell .media{ aspect-ratio:4/3; }
.file-cell .file-meta{ padding:0.65rem 0.8rem; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); }
.file-cell .file-meta .code{ font-family:var(--font-mono); font-size:0.6rem; color:var(--bone); letter-spacing:0.05em; }
.file-cell .file-meta .cat{ font-family:var(--font-mono); font-size:0.58rem; color:var(--steel); text-transform:uppercase; letter-spacing:0.06em; }

/* Terminal / contact */
.terminal{ padding:clamp(1.6rem,4vw,2.4rem); }
.terminal .prompt{ font-family:var(--font-mono); font-size:0.68rem; color:var(--accent); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1.3rem; }
.terminal-row{ display:flex; justify-content:space-between; align-items:center; padding:0.9rem 0; border-top:1px solid var(--line); flex-wrap:wrap; gap:0.4rem; }
.terminal-row:last-child{ border-bottom:1px solid var(--line); }
.terminal-row .label{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); }
.terminal-row .value{ font-family:var(--font-display); font-size:clamp(1rem,2.2vw,1.4rem); text-transform:uppercase; word-break:break-all; }
.terminal-row a.value:hover{ color:var(--accent); }
.inquiry-row{ display:flex; justify-content:space-between; padding:0.75rem 0; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); }
.inquiry-row:last-child{ border-bottom:1px solid var(--line); }

.page-hero{ padding-top:clamp(7rem,14vh,9rem); padding-bottom:clamp(1.4rem,4vw,2.4rem); }
.page-hero h1{ font-family:var(--font-display); font-size:var(--size-xl); text-transform:uppercase; }

/* Reveal */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
[data-reveal].is-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* Bottom dock */
.system-dock{ position:fixed; left:50%; bottom:clamp(0.9rem,2.2vw,1.5rem); transform:translateX(-50%); z-index:480; display:flex; align-items:center; gap:0.3rem; padding:0.5rem; border-radius:var(--radius-pill); }
.dock-item{ position:relative; padding:0.55rem 0.9rem; border-radius:var(--radius-pill); font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); transition:background var(--dur-fast) ease, color var(--dur-fast) ease; cursor:pointer; }
.dock-item:hover,.dock-item.is-active{ background:rgba(241,239,233,0.08); color:var(--bone); }
@media (max-width:640px){ .system-dock{ width:min(94vw,520px); overflow-x:auto; justify-content:flex-start; } .dock-item{ flex-shrink:0; } }

.site-footer{ padding:2rem var(--gutter) 6.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; border-top:1px solid var(--line); }
.site-footer .fine{ font-family:var(--font-mono); font-size:0.64rem; color:var(--steel); text-transform:uppercase; letter-spacing:0.08em; }

/* ---------------- PROJECT OVERLAY (internal case-study panel) ---------------- */
.overlay{
  position:fixed; inset:0; z-index:800;
  background:var(--smoke-strong); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  opacity:0; pointer-events:none; transition:opacity var(--dur-med) var(--ease);
  overflow-y:auto;
}
.overlay.is-open{ opacity:1; pointer-events:auto; }
.overlay-inner{ max-width:1100px; margin-inline:auto; padding:clamp(5rem,10vh,7rem) var(--gutter) 5rem; }
.overlay-topbar{ position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:1.2rem var(--gutter); z-index:5; }
.overlay-close{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; background:var(--smoke); transition:background var(--dur-fast) ease; }
.overlay-close:hover{ background:rgba(241,239,233,0.08); }
.overlay-nav{ display:flex; gap:0.6rem; }
.overlay-nav button{ padding:0.6rem 1.1rem; border-radius:var(--radius-pill); border:1px solid var(--line-strong); font-family:var(--font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); cursor:pointer; background:var(--smoke); transition:background var(--dur-fast) ease, color var(--dur-fast) ease; }
.overlay-nav button:hover{ background:rgba(241,239,233,0.08); color:var(--bone); }
.overlay-eyebrow{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--steel); }
.overlay-title{ font-family:var(--font-display); font-size:clamp(2.2rem,6vw,4.8rem); text-transform:uppercase; line-height:0.9; margin-top:0.8rem; max-width:18ch; }
.overlay-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; padding:1.3rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:1.8rem; }
@media (max-width:720px){ .overlay-meta{ grid-template-columns:repeat(2,1fr); } }
.overlay-meta dt{ font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); margin-bottom:0.4em; }
.overlay-meta dd{ font-family:var(--font-display); font-size:0.9rem; text-transform:uppercase; }
/* Overlay hero — full image, adaptive height. Placeholder (no image yet) keeps
   a sensible 16:9 shape so the layout doesn't collapse; a real photo renders
   at its own natural aspect ratio, landscape or portrait, uncropped. */
.overlay-hero-media{ margin-top:clamp(1.8rem,4vw,2.6rem); border-radius:var(--radius-md); overflow:hidden; }
.overlay-hero-media.media--placeholder{ aspect-ratio:16/9; }
.overlay-hero-media img{ display:block; width:100%; height:auto; }
.overlay-desc{ max-width:64ch; padding-block:clamp(1.6rem,4vw,2.6rem); }

/* Overlay gallery — adaptive mixed-ratio grid. Real photos are real <img>
   elements sized by their own intrinsic ratio (portrait stays tall, landscape
   stays wide, square stays square); only placeholder slots (no image yet)
   fall back to a fixed shape so empty state still looks intentional. */
.overlay-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; align-items:start; }
.overlay-gallery img{ display:block; width:100%; height:auto; border-radius:var(--radius-sm); }
.overlay-gallery .media-item{ display:block; width:100%; }
.overlay-gallery .media-item.span-2{ grid-column:1/-1; }
.overlay-gallery .media--placeholder{ aspect-ratio:4/3; border-radius:var(--radius-sm); }
.overlay-gallery .span-2{ grid-column:1/-1; }
.overlay-gallery .span-2.media--placeholder{ aspect-ratio:16/8; }
@media (max-width:720px){ .overlay-gallery{ grid-template-columns:1fr; } }
.overlay-section{ margin-top:clamp(1.6rem,4vw,2.6rem); }
.overlay-section:first-child{ margin-top:0; }
.overlay-section-head{ display:flex; align-items:baseline; gap:0.8rem; padding-bottom:0.8rem; border-bottom:1px solid var(--line); margin-bottom:0.8rem; flex-wrap:wrap; }
.overlay-section-name{ font-family:var(--font-display); font-size:clamp(1.1rem,2.4vw,1.6rem); text-transform:uppercase; }
.overlay-section-sub{ font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); }
.overlay-note{ font-family:var(--font-mono); font-size:0.76rem; color:var(--steel); border-left:1px solid var(--line-strong); padding-left:1.1rem; max-width:58ch; margin-top:clamp(1.6rem,4vw,2.4rem); }

/* ---------------- Breet: Space Transformation ---------------- */
.transform-section{ margin:clamp(2rem,5vw,3rem) 0; padding-top:clamp(1.6rem,4vw,2.4rem); border-top:1px solid var(--line); }
.transform-head{ display:flex; align-items:baseline; gap:0.9rem; flex-wrap:wrap; }
.transform-title{ font-family:var(--font-display); font-size:clamp(1.3rem,3vw,1.9rem); text-transform:uppercase; margin:0; }
.transform-sub{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--steel); }
.transform-intro{ font-family:var(--font-ui); font-size:0.92rem; line-height:1.6; color:var(--bone); max-width:52ch; margin-top:0.5rem; }

.transform-stage-head{ display:flex; align-items:center; gap:0.8rem; margin:clamp(1.8rem,4vw,2.4rem) 0 1rem; }
.transform-stage-num{ font-family:var(--font-mono); font-size:0.68rem; color:var(--steel); border:1px solid var(--line-strong); border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.transform-stage-name{ font-family:var(--font-display); font-size:1.05rem; text-transform:uppercase; }
.transform-stage-sub{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--steel); }

.before-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; }
.before-grid img{ display:block; width:100%; height:auto; border-radius:var(--radius-sm); border:1px solid var(--line); }
.before-grid .before-photo.full{ grid-column:1/-1; }
@media (max-width:720px){ .before-grid{ grid-template-columns:1fr; } }

.transform-flow{ display:flex; flex-direction:column; align-items:center; gap:0.45rem; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--steel); text-align:center; margin:clamp(2rem,5vw,3rem) 0; }
.transform-flow .arrow{ opacity:0.45; font-size:0.9rem; }
.transform-flow .stage-strong{ color:var(--bone); }

.after-frame{ position:relative; width:100%; max-width:620px; margin:0 auto; border-radius:var(--radius-md); overflow:hidden; background:#000; border:1px solid var(--line-strong); }
.after-frame video{ display:block; width:100%; height:auto; max-height:82vh; }
@media (max-width:720px){ .after-frame{ max-width:100%; } }

/* Pièce Et Patch — a slightly different visual rhythm within the same system:
   tactile, material-focused, catalog/swatch-like grid rather than the wider
   cinematic crops used elsewhere. Scoped entirely to .pep-mode so no other
   project is affected. Grid stays 3-up; item heights are still adaptive so
   garments, shoes and product shots are never cropped. */
.overlay-inner.pep-mode{ --accent:#c78c59; }
.overlay-inner.pep-mode .overlay-title{ font-style:italic; }
.overlay-inner.pep-mode .overlay-section-name{ font-style:italic; }
.overlay-inner.pep-mode .overlay-section-head{ border-bottom-color:rgba(199,140,89,0.32); }
.overlay-inner.pep-mode .overlay-gallery{ grid-template-columns:repeat(3,1fr); gap:3px; }
.overlay-inner.pep-mode .overlay-gallery .media--placeholder{ aspect-ratio:1/1; border-radius:4px; }
.overlay-inner.pep-mode .overlay-gallery .span-2{ grid-column:span 3; }
.overlay-inner.pep-mode .overlay-gallery .span-2.media--placeholder{ aspect-ratio:3/1; }
@media (max-width:720px){
  .overlay-inner.pep-mode .overlay-gallery{ grid-template-columns:repeat(2,1fr); }
  .overlay-inner.pep-mode .overlay-gallery .span-2{ grid-column:span 2; }
  .overlay-inner.pep-mode .overlay-gallery .span-2.media--placeholder{ aspect-ratio:2/1; }
}

/* Archive lightbox */
.lightbox{ position:fixed; inset:0; z-index:850; background:var(--smoke-strong); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; align-items:center; justify-content:center; padding:var(--gutter); opacity:0; pointer-events:none; transition:opacity var(--dur-fast) ease; }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ max-width:95vw; max-height:92vh; width:auto; height:auto; border-radius:var(--radius-md); overflow-y:auto; overflow-x:hidden; position:relative; }
.lightbox-inner.media--placeholder{ width:min(90vw,760px); aspect-ratio:4/3; }
.lightbox-body{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:1.6rem; max-width:95vw; }
.lightbox-body img{ display:block; max-width:min(70vw,900px); max-height:78vh; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-md); }
.lightbox-body .media-label{ max-width:min(70vw,900px); }
.lightbox-meta{ font-family:var(--font-ui); flex:0 1 260px; min-width:220px; max-width:300px; padding-top:0.3rem; }
.lightbox-meta dt{ font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); margin-top:1.1rem; }
.lightbox-meta dt:first-child{ margin-top:0; }
.lightbox-meta dd{ font-family:var(--font-display); font-size:1rem; text-transform:uppercase; margin-top:0.3em; }
.lightbox-meta dd.lightbox-desc{ font-family:var(--font-ui); font-size:0.85rem; line-height:1.55; text-transform:none; color:var(--bone); }
.lightbox-controls{ position:absolute; top:1rem; left:1rem; display:flex; gap:0.6rem; z-index:2; }
@media (max-width:820px){
  .lightbox-body{ flex-direction:column; align-items:center; }
  .lightbox-body img{ max-width:92vw; max-height:56vh; }
  .lightbox-body .media-label{ max-width:92vw; }
  .lightbox-meta{ max-width:92vw; width:92vw; flex:1 1 auto; }
}
.lightbox-close{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:var(--smoke); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }

/* ---------------- Selected Films: director's archive + video viewer ---------------- */
.film-browser{ margin-top:clamp(1.6rem,4vw,2.4rem); }

.film-featured{ display:flex; flex-direction:column; }
.film-featured-index{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); }
.film-featured-artist{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); margin-top:0.9rem; }
.film-featured-title{ font-family:var(--font-display); font-size:clamp(1.9rem,5.2vw,3.4rem); line-height:1.05; text-transform:uppercase; margin:0.25rem 0 0.35rem; }
.film-featured-format{ font-family:var(--font-mono); font-size:0.5em; letter-spacing:0.06em; color:var(--steel); text-transform:uppercase; }
.film-featured-role{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); }
.film-featured-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:var(--smoke); margin-top:1.1rem; border:1px solid var(--line); cursor:pointer; }
.film-featured-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.film-watch-btn{ align-self:flex-start; margin-top:1rem; padding:0.7rem 1.3rem; border-radius:var(--radius-pill); border:1px solid var(--line-strong); font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--bone); background:var(--smoke); cursor:pointer; transition:background var(--dur-fast) ease; }
.film-watch-btn:hover{ background:rgba(241,239,233,0.08); }

.film-selector{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem; margin-top:clamp(2rem,5vw,3rem); }
.film-selector-item{ display:flex; flex-direction:column; gap:0.55rem; padding:0.7rem; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--smoke); cursor:pointer; transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease; }
.film-selector-item:hover{ border-color:var(--line-strong); }
.film-selector-item.is-active{ border-color:var(--line-strong); background:rgba(241,239,233,0.05); }
.film-selector-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:calc(var(--radius-md) - 4px); overflow:hidden; background:var(--smoke-strong); }
.film-selector-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.film-selector-head{ display:flex; align-items:center; gap:0.5rem; }
.film-selector-index{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.08em; color:var(--steel); }
.film-selector-active-label{ display:none; font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.08em; color:var(--steel); text-transform:uppercase; }
.film-selector-status{ display:none; width:6px; height:6px; border-radius:50%; background:var(--bone); margin-left:auto; }
.film-selector-item.is-active .film-selector-active-label,
.film-selector-item.is-active .film-selector-status{ display:inline-block; }
.film-selector-artist{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel); }
.film-selector-title{ font-family:var(--font-display); font-size:0.95rem; text-transform:uppercase; line-height:1.15; color:var(--steel); }
.film-selector-item.is-active .film-selector-title{ color:var(--bone); }
.film-selector-format{ font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.06em; color:var(--steel); text-transform:uppercase; }
@media (max-width:820px){ .film-selector{ grid-template-columns:repeat(2,1fr); } }

.film-viewer{ position:fixed; inset:0; z-index:900; background:var(--smoke-strong); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; align-items:center; justify-content:center; padding:var(--gutter); opacity:0; pointer-events:none; transition:opacity var(--dur-fast) ease; }
.film-viewer.is-open{ opacity:1; pointer-events:auto; }
.film-viewer-inner{ width:min(1100px,94vw); max-height:92vh; overflow-y:auto; display:flex; flex-direction:column; gap:1.1rem; }
.film-viewer-player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius-md); overflow:hidden; }
.film-viewer-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.film-viewer-artist{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); }
.film-viewer-title{ font-family:var(--font-display); font-size:clamp(1.3rem,3.2vw,1.9rem); text-transform:uppercase; margin:0.25rem 0; }
.film-viewer-role{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); }
.film-viewer-yt-link{ display:inline-block; margin-top:0.9rem; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:0.15rem; transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.film-viewer-yt-link:hover{ color:var(--bone); border-color:var(--line-strong); }
.film-viewer-close{ position:absolute; top:1rem; right:1rem; padding:0.6rem 1.1rem; border-radius:var(--radius-pill); border:1px solid var(--line-strong); font-family:var(--font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--steel); cursor:pointer; background:var(--smoke); z-index:2; }
.film-viewer-close:hover{ background:rgba(241,239,233,0.08); color:var(--bone); }

.mt-0{ margin-top:0 !important; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px; }