/* ============================================================
   components.css — reusable pieces:
   split-slider, index rows, spec-row, gallery, lab grid,
   filter pills, portrait, tools, image slots.
   ============================================================ */

/* ---------- IMAGE SLOTS ----------
   Drop a real photo at the path in the element's inline
   background-image; until the file exists the texture below
   shows through, so the layout never breaks. */
.img-slot{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
}
.img-slot .slot-note{
  position:relative; z-index:2; margin:12px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--steel);
}

/* ---------- HERO (home) ---------- */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; padding-bottom:80px;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--steel); margin-bottom:18px;
}
.hero h1{
  font-family:var(--font-display); font-weight:900; font-size:clamp(56px,11vw,148px);
  line-height:.92; letter-spacing:-0.02em; margin-bottom:20px;
}
.hero h1 .div{ color:var(--ember); }
.hero h1 .div2{ color:var(--title-blue); }
.hero-sub{
  font-family:var(--font-sub); font-weight:400; font-size:clamp(16px,2vw,20px);
  color:var(--steel); max-width:680px; margin-bottom:56px;
}

/* ---------- SPLIT SLIDER ---------- */
.slider-wrap{
  position:relative; width:100%; max-width:760px; aspect-ratio:4/5; margin:0 auto;
  border-radius:2px; overflow:hidden; cursor:ew-resize; user-select:none; touch-action:pan-y;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.35);
}
.slider-wrap.wide{ aspect-ratio:16/9; max-width:100%; }
.slider-layer{ position:absolute; inset:0; overflow:hidden; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); }

/* Craft (ember) placeholder treatment */
.craft-layer{ background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(160deg,#7a1c0f 0%, #D8361F 45%, #a82715 100%); }
.craft-layer::before{
  content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:radial-gradient(circle, rgba(0,0,0,.5) 1px, transparent 1.4px);
  background-size:6px 6px;
}
/* Tech (cobalt) placeholder treatment — this layer is the one clipped */
.tech-layer{
  background:linear-gradient(160deg,#0c1440 0%, #5799c8 55%, #10193f 100%);
  clip-path:inset(0 0 0 var(--split));
}
.tech-layer::before{
  content:''; position:absolute; inset:0; opacity:.35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 28px);
}
/* When real paired photos are supplied, add .has-img so the CSS texture
   pseudo-element is hidden and only the photograph shows. */
.slider-layer.has-img::before{ display:none; }

.garment{ position:absolute; top:8%; left:50%; transform:translateX(-50%); height:84%; width:auto; }
.garment-craft path{ fill:rgba(0,0,0,.18); stroke:#2a0805; stroke-width:2; }
.garment-tech path{ fill:none; stroke:#dfe6ff; stroke-width:1.6; stroke-dasharray:3 4; }
.garment-tech .node{ fill:#fff; }

.tag-float{
  position:absolute; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  padding:4px 8px; border:1px solid currentColor; text-transform:uppercase;
}
.tag-craft{ bottom:6%; left:6%; color:#ffe3dc; }
.tag-tech{ top:6%; right:6%; color:#dbe3ff; }

.handle{
  position:absolute; top:0; bottom:0; width:0; left:var(--split);
  display:flex; align-items:center; justify-content:center; z-index:5;
}
.handle::before{ content:''; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:var(--bone); }
.handle-grip{
  width:44px; height:44px; border-radius:50%; background:var(--bone);
  display:flex; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.handle-grip span{ width:2px; height:14px; background:var(--ink); display:block; }
.handle:focus-visible .handle-grip{ outline:3px solid var(--cobalt); outline-offset:3px; }

.slider-caption{
  display:flex; justify-content:space-between; max-width:760px; margin:16px auto 0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
}
.slider-caption.wide{ max-width:100%; margin-bottom:70px; }
.slider-caption b{ color:var(--ink); }

/* ---------- PHOTO SLIDER (image-driven) ----------
   The wrap has NO fixed aspect-ratio: its height is set by the base <img>,
   so the slider always matches the real image's proportions. The top image
   is absolutely positioned and clipped by --split. */
/* Photo sliders always span the full content width (minus page padding). */
.slider-wrap.photo{ aspect-ratio:auto; display:block; background:var(--graphite); max-width:100%; }
.slider-base{ display:block; width:100%; height:auto; }          /* defines the height */
.slider-top{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 0 var(--split)); }
.slider-top img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* stop the browser ghost-dragging the images while using the handle */
.slider-wrap img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
.photo .tag-craft{ color:#ffe3dc; background:rgba(11,12,16,.4); border-color:var(--ember); }
.photo .tag-tech{ color:#dbe3ff; background:rgba(11,12,16,.4); border-color:var(--cobalt); }

/* ---------- CAROUSEL ---------- */
.carousel{ position:relative; margin:0 0 70px; }
.carousel-heading{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2.4vw,26px);
  letter-spacing:-.01em; margin-bottom:16px; }
.carousel-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:10px; -webkit-overflow-scrolling:touch; }
.carousel-track::-webkit-scrollbar{ height:6px; }
.carousel-track::-webkit-scrollbar-thumb{ background:var(--steel); border-radius:3px; }
.carousel-slide{ flex:0 0 auto; scroll-snap-align:center;}
.carousel-slide img{ display:block; height:min(60vh,600px); width:auto; max-width:88vw; object-fit:contain; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(11,12,16,.55); color:var(--bone); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s; }
.carousel-btn:hover{ background:rgba(11,12,16,.8); }
.carousel-btn.prev{ left:8px; }
.carousel-btn.next{ right:8px; }
.carousel-btn:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; }
@media (max-width:720px){
  .carousel-slide img{ height:auto; width:82vw; }
  .carousel-btn{ width:38px; height:38px; }
}

/* ---------- GALLERY GROUP (labelled gallery section) ---------- */
.gallery-group{ margin-bottom:20px; }
.gallery-group .gallery-heading{ font-family:var(--font-display); font-weight:700;
  font-size:clamp(18px,2.4vw,26px); letter-spacing:-.01em; margin:0 0 18px; }

/* ---------- FLIPBOOK (lookbook page-turn) ----------
   A closed single page that opens into a two-page book you flip through.
   Page size is driven by --page-w; the book is two pages wide. */
.flipbook{
  --page-w:clamp(150px, 34vw, 380px);
  --page-h:calc(var(--page-w) * 1.414);   /* pages are 1414×2000 (√2) */
  --book-w:calc(var(--page-w) * 2);
  margin:0 0 70px;
}
.flipbook .carousel-heading{ margin-bottom:22px; }
.book-stage{
  perspective:2600px; display:flex; justify-content:center;
  min-height:var(--page-h); padding:6px 0 10px;
}
.book{
  position:relative; width:var(--book-w); height:var(--page-h);
  transform-style:preserve-3d; transition:transform .6s ease; will-change:transform;
}
.leaf{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.4,.15,.2,1);
}
.leaf.flipped{ transform:rotateY(-180deg); }
.leaf-face{
  position:absolute; inset:0; overflow:hidden; background:#0f1013;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.leaf-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.leaf-face.front{ box-shadow:inset 7px 0 22px -8px rgba(0,0,0,.4); }        /* gutter on right page */
.leaf-face.back{ transform:rotateY(180deg); box-shadow:inset -7px 0 22px -8px rgba(0,0,0,.4); }
/* soft shadow that reads as a stack of pages behind the closed cover */
.book::after{
  content:''; position:absolute; top:2%; bottom:2%; left:50%; width:12px;
  background:linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,0));
  transform:translateX(0); z-index:-1; border-radius:0 3px 3px 0;
}
.book-controls{
  display:flex; align-items:center; justify-content:center; gap:22px; margin-top:14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
}
.book-btn{
  background:none; border:1px solid var(--steel); color:inherit; cursor:pointer;
  padding:8px 16px; border-radius:999px; font-family:inherit; font-size:inherit;
  letter-spacing:inherit; text-transform:inherit; transition:all .2s;
}
.book-btn:hover:not(:disabled){ border-color:currentColor; color:var(--ink); }
body.theme-ink .book-btn:hover:not(:disabled),
html[data-theme="dark"] .book-btn:hover:not(:disabled){ color:var(--bone); }
.book-btn:disabled{ opacity:.35; cursor:default; }
.book-btn:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; }
.book-page-label{ min-width:120px; text-align:center; }
@media (prefers-reduced-motion:reduce){
  .book, .leaf{ transition:none; }
}

/* ---------- PROJECT INDEX (home) ---------- */
.index{ background:var(--ink); color:var(--bone); padding:120px 56px; }
.index-head{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:56px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
}
.index-head h2{ font-family:var(--font-display); font-size:20px; color:var(--bone); letter-spacing:.02em; }
.row{
  display:flex; align-items:baseline; gap:28px; padding:30px 0;
  border-top:1px solid rgba(243,239,230,.14);
  position:relative; transition:padding-left .25s ease;
}
.row:last-of-type{ border-bottom:1px solid rgba(243,239,230,.14); }
.row-num{ font-family:var(--font-mono); font-size:13px; color:var(--steel); width:32px; }
.row-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(24px,4vw,46px);
  flex:1; transition:transform .3s ease;
}
.row-tags{ display:flex; gap:10px; }
.row-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--steel); color:var(--steel); padding:4px 9px; white-space:nowrap;
}
.row-arrow{ font-family:var(--font-mono); font-size:20px; color:var(--steel); transition:transform .25s ease, color .25s ease; }
.row:hover{ padding-left:16px; }
.row:hover .row-arrow{ transform:translateX(6px); }
.row[data-accent="ember"]:hover{ border-top-color:var(--ember); }
.row[data-accent="ember"]:hover .row-arrow, .row[data-accent="ember"]:hover .row-num{ color:var(--ember); }
.row[data-accent="cobalt"]:hover{ border-top-color:var(--cobalt); }
.row[data-accent="cobalt"]:hover .row-arrow, .row[data-accent="cobalt"]:hover .row-num{ color:var(--cobalt); }

.lab-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:56px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--bone); padding-bottom:6px;
}

/* ---------- PROJECT DETAIL ---------- */
.crumb{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--steel);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:40px; }
.project-title{ font-family:var(--font-display); font-weight:900; font-size:clamp(40px,8vw,104px); line-height:.95; letter-spacing:-.02em; }
.dek{ font-family:var(--font-sub); font-weight:400; font-size:clamp(16px,2vw,22px); color:var(--steel); margin:20px 0 48px; }
.spec-row{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--steel); border-bottom:1px solid var(--steel); margin-bottom:60px; }
.spec{ padding:18px 24px; border-right:1px solid var(--steel); }
.spec:last-child{ border-right:none; }
.spec-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--steel); text-transform:uppercase; margin-bottom:6px; }
.spec-value{ font-family:var(--font-mono); font-size:13px; }
.hero-img{ width:100%; aspect-ratio:16/9; margin-bottom:60px; color:var(--steel);
  background-image:repeating-linear-gradient(135deg, var(--graphite) 0 2px, #1f2027 2px 40px); }
.narrative{ font-family:var(--font-mono); font-weight:400; font-size:clamp(17px,1.6vw,18px); line-height:1.6; margin-bottom:70px; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:100px; }
.gallery .img-slot{ aspect-ratio:3/4;
  background-image:repeating-linear-gradient(45deg, #e7e1d3 0 2px, #ddd5c1 2px 22px); }
.gallery .img-slot.tall{ grid-row:span 2; aspect-ratio:auto; }
nav.pager{ display:flex; justify-content:space-between; padding:50px 0 90px; border-top:1px solid var(--steel);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- LAB ---------- */
.lab-head h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(40px,7vw,88px); letter-spacing:-.02em; margin-bottom:16px; }
.intro{ font-family:var(--font-sub); font-weight:400; font-size:clamp(15px,1.6vw,19px); color:#a7abbb; max-width:560px; margin-bottom:48px; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:56px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.pill{ padding:8px 16px; border:1px solid var(--steel); border-radius:999px; cursor:pointer; color:#a7abbb; transition:all .2s;
  background:none; font-family:inherit; font-size:inherit; letter-spacing:inherit; text-transform:inherit; }
.pill.active{ border-color:var(--bone); color:var(--bone); }
.pill:hover{ color:var(--bone); }
.pill:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; grid-auto-rows:10px; }
.tile{ position:relative; overflow:hidden; cursor:pointer; display:flex; align-items:flex-end; padding:12px;
  background-size:cover; background-position:center;
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#dcdfe8; }
.tile span{ position:relative; z-index:2; }
.tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 60%); }
.t-tech{ background-color:#20306e; background-image:repeating-linear-gradient(45deg,#17204d 0 2px,#20306e 2px 26px); }
.t-craft{ background-color:#611c11; background-image:repeating-linear-gradient(45deg,#3a130c 0 2px,#611c11 2px 26px); }
.t-mixed{ background-color:#2c2d31; background-image:repeating-linear-gradient(45deg,#232427 0 2px,#2c2d31 2px 26px); }
.tile.is-hidden{ display:none; }
.h-sm{ grid-row:span 20; }
.h-md{ grid-row:span 28; }
.h-lg{ grid-row:span 36; }

/* ---------- LAB LIGHTBOX ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(11,12,16,.92); padding:40px; }
.lightbox.open{ display:flex; }
.lightbox-inner{ max-width:80vw; max-height:80vh; }
.lightbox-inner img{ max-width:80vw; max-height:70vh; display:block; }
.lightbox-cap{ margin-top:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#a7abbb; text-align:center; }
.lightbox-close{ position:absolute; top:24px; right:32px; font-family:var(--font-mono); font-size:20px; color:var(--bone); background:none; border:none; cursor:pointer; }

/* ---------- ABOUT ---------- */
.about-main{ display:grid; grid-template-columns:1fr 1fr; gap:72px; padding-bottom:100px; }
.portrait{ position:relative; overflow:hidden; aspect-ratio:3/4; }
.portrait .half{ position:absolute; inset:0; }
.portrait .top{ height:var(--split); overflow:hidden; background:linear-gradient(160deg,#7a1c0f,#D8361F 60%,#a82715); }
.portrait .bottom{ position:absolute; top:var(--split); bottom:0; left:0; right:0;
  background:linear-gradient(160deg,#0c1440,#2A46FF 60%,#10193f);
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 1px, transparent 1px 22px), linear-gradient(160deg,#0c1440,#2A46FF 60%,#10193f); }
/* Real portrait: add .has-photo and set background-image on .portrait */
.portrait.has-photo{ background-size:cover; background-position:center; }
.portrait.has-photo .half{ display:none; }
.portrait span{ position:absolute; bottom:14px; left:14px; font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; }
.about-body h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(36px,5vw,58px); letter-spacing:-.02em; margin-bottom:28px; }
.bio{ font-family:var(--font-sub); font-weight:400; font-size:clamp(17px,1.8vw,21px); line-height:1.7; margin-bottom:56px; }
.tools{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:70px; }
.tools h3{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-bottom:14px; border-bottom:1px solid var(--steel); padding-bottom:8px; }
.tools ul{ list-style:none; font-family:var(--font-mono); font-size:13px; line-height:2; }
.contact{ font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; line-height:1.9; }
.contact a{ border-bottom:1px solid currentColor; }

/* ---------- component breakpoints ---------- */
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px){
  .about-main{ grid-template-columns:1fr; gap:40px; }
  .tools{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .index{ padding:80px 24px 80px 40px; }
  .index-head{ flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:36px; }
  .row{ flex-wrap:wrap; gap:8px 12px; padding:22px 0; align-items:center; }
  .row:hover{ padding-left:0; }               /* no hover-shift on touch */
  .row-num{ width:auto; }
  .row-title{ flex:1 1 auto; min-width:0; font-size:22px; line-height:1.15;
    overflow-wrap:anywhere; word-break:break-word; }
  .row-arrow{ flex:0 0 auto; }
  .row-tags{ order:3; width:100%; padding-left:0; flex-wrap:wrap; gap:8px; }
  .row-tag{ white-space:normal; }             /* let long tag text wrap */
  .spec-row{ grid-template-columns:1fr; }
  .spec{ border-right:none; border-bottom:1px solid var(--steel); padding:16px 4px; }
  .spec:last-child{ border-bottom:none; }
  .gallery{ grid-template-columns:1fr; }
  .gallery .img-slot.tall{ grid-row:auto; }
}
@media (max-width:520px){ .grid{ grid-template-columns:1fr; } }