/* ==========================================================
   C,WATTS — Fashion Production + Styling Portfolio
   One page. Horizontal scroll. Resolution-agnostic imagery.
   ========================================================== */

:root{
  --ink:#111111;
  --ink-60:rgba(17,17,17,.60);
  --ink-38:rgba(17,17,17,.38);
  --ink-14:rgba(17,17,17,.14);
  --ink-07:rgba(17,17,17,.07);
  --paper:#fdfdfc;
  --panel:#f4f3f1;
  --rule:rgba(17,17,17,.13);
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Roboto Mono",monospace;
  --sans:"Helvetica Neue",Helvetica,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --pad:clamp(28px,4.2vw,72px);
  --bar:64px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%;margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

a{color:inherit}

/* ---------- Fixed chrome ---------- */

/* The header rides in on movement and steps back out when the page
   is still, so nothing sits on top of the photographs at rest. */
.masthead{
  position:fixed; inset:0 0 auto 0; height:var(--bar);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:0 var(--pad);
  z-index:60; pointer-events:none;
  background:linear-gradient(to bottom,var(--paper) 62%,rgba(253,253,252,0));
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .34s ease,transform .34s ease;
}
.masthead.show{opacity:1;transform:translateY(0)}
/* keyboard users must always be able to reach the nav */
.masthead:focus-within{opacity:1;transform:translateY(0)}


.brand{display:flex;align-items:center;gap:14px;pointer-events:auto;text-decoration:none}
.brand img{display:block;height:26px;width:auto}
.brand .tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-38);white-space:nowrap;padding-left:14px;border-left:1px solid var(--rule);
}

.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);pointer-events:auto}
.nav button{
  appearance:none;background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-38);transition:color .2s;position:relative;
}
.nav button:hover{color:var(--ink)}
.nav button[aria-current="true"]{color:var(--ink)}
.nav button[aria-current="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);
}

.progress{
  position:fixed;left:0;bottom:0;height:2px;width:100%;z-index:60;
  background:var(--ink-07);pointer-events:none;
}
.progress span{display:block;height:100%;width:0;background:var(--ink);transition:width .12s linear}

.arrows{
  position:fixed;right:var(--pad);bottom:26px;z-index:60;display:flex;gap:8px;
}
.arrows button{
  width:38px;height:38px;border:1px solid var(--rule);background:rgba(253,253,252,.86);
  backdrop-filter:blur(6px);border-radius:50%;cursor:pointer;color:var(--ink);
  font-size:14px;line-height:1;display:grid;place-items:center;
  transition:background .2s,border-color .2s,opacity .2s;
}
.arrows button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.arrows button:disabled{opacity:.28;pointer-events:none}

.hint{
  position:fixed;left:var(--pad);bottom:30px;z-index:60;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-38);transition:opacity .4s;
}
.hint.gone{opacity:0}

/* ---------- Horizontal track ---------- */

.track{
  position:fixed;inset:0;
  display:flex;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:var(--bar) 0 58px;
}
.track::-webkit-scrollbar{display:none}

section{
  flex:0 0 auto;height:100%;
  display:flex;align-items:stretch;
  padding:0 var(--pad);
  border-right:1px solid var(--rule);
}
/* the closing panel fills the viewport so it can scroll flush to the left edge */
section:last-child{border-right:0;min-width:100vw;justify-content:center}

/* ---------- Intro ---------- */

#intro{align-items:center;min-width:min(94vw,1080px)}
.intro-inner{max-width:min(62vw,780px);padding-right:clamp(40px,6vw,110px)}
.intro-mark{height:clamp(58px,7.4vw,104px);width:auto;display:block;margin-bottom:34px}
.intro-inner h1{
  font-size:clamp(30px,4.4vw,64px);line-height:1.02;margin:0 0 20px;
  font-weight:600;letter-spacing:-.02em;text-transform:uppercase;
}
.intro-inner .lede{
  font-size:clamp(14px,1.15vw,17px);line-height:1.55;color:var(--ink-60);
  max-width:56ch;margin:0 0 30px;
}
.intro-title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 26px;
}
.intro-meta{display:flex;flex-wrap:wrap;gap:10px}
.intro-meta span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);border:1px solid var(--rule);border-radius:100px;padding:6px 13px;
}

/* ---------- Project sections ---------- */

/* Title row pinned, detail text scrolls under it, photo rail spans both. */
.proj{
  display:grid;
  grid-template-columns:clamp(280px,24vw,380px) auto;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"head rail" "body rail";
  column-gap:clamp(28px,3.4vw,60px);
  align-items:stretch;
}

.proj-head{
  grid-area:head;
  padding:clamp(18px,3.4vh,44px) 0 0;
  align-self:end;
}
.proj-text{
  grid-area:body;
  padding:0 0 30px;
  overflow-y:auto;scrollbar-width:none;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);
}
.proj-text::-webkit-scrollbar{display:none}
.proj-text.fits{mask-image:none;-webkit-mask-image:none}

.proj-num{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-38);margin-bottom:10px;
}
.proj-head h2{
  font-size:clamp(20px,2.1vw,30px);line-height:1.06;margin:0 0 8px;
  font-weight:600;letter-spacing:-.015em;text-transform:uppercase;
}
.proj-sub{
  font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-60);margin:0 0 18px;line-height:1.6;
  padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.field{margin-bottom:13px}
.field:first-child{padding-top:2px}
.field:last-child{margin-bottom:0}
.field dt{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-38);margin-bottom:4px;
}
.field dd{margin:0;font-size:12px;line-height:1.5;color:var(--ink-60)}
.field dd strong{color:var(--ink);font-weight:500}

/* ---------- Image rail ---------- */

.rail{
  grid-area:rail;
  display:flex;align-items:center;gap:clamp(14px,1.5vw,26px);
  padding:clamp(20px,4vh,44px) 0;
}

figure{
  margin:0;flex:0 0 auto;height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}

/* The frame is a fixed-height slot. The image inside is capped at its
   OWN natural pixel size, so a 300px source is never blown up and a
   4000px source is downsampled cleanly. */
.frame{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:min(64vh,620px);
  min-width:120px;
  background:var(--panel);
  border:1px solid var(--ink-07);
  overflow:hidden;
  cursor:zoom-in;
  transition:border-color .25s;
}
figure.wide .frame{min-width:min(52vh,460px)}
.frame:hover{border-color:var(--ink-14)}

.frame img{
  display:block;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  opacity:0;transition:opacity .5s ease;
  image-rendering:auto;
  -ms-interpolation-mode:bicubic;
}
.frame img.ready{opacity:1}

/* low-resolution sources get a soft mat instead of hard upscaling */
.frame.lowres{padding:clamp(10px,2.2vh,26px)}

.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.4),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.frame:hover::after{opacity:1}

figcaption{
  font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-38);max-width:34ch;line-height:1.6;
}

/* ---------- Resume ---------- */

#resume .sheet{
  align-self:center;width:clamp(420px,52vw,860px);
  padding:clamp(18px,3vh,34px) 0;max-height:100%;overflow-y:auto;scrollbar-width:none;
}
#resume .sheet::-webkit-scrollbar{display:none}
.sheet h2,#contact h2{
  font-size:clamp(21px,2.2vw,32px);margin:0 0 22px;font-weight:600;
  letter-spacing:-.015em;text-transform:uppercase;
}

/* both closing panels scroll internally when the viewport is short;
   the fade tells the visitor there is more below */
.sheet{
  mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);
}
.sheet.fits{mask-image:none;-webkit-mask-image:none}
.rrow{
  display:grid;grid-template-columns:minmax(140px,.34fr) 1fr;gap:clamp(16px,2.4vw,40px);
  padding:12px 0;border-top:1px solid var(--rule);
}
.rrow:last-child{border-bottom:1px solid var(--rule)}
.rrow dt{
  font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-38);line-height:1.7;
}
.rrow dd{margin:0;font-size:13px;line-height:1.55;color:var(--ink-60)}

/* ---------- Contact ---------- */

#contact{align-items:center}
#contact .sheet{width:clamp(400px,48vw,760px);max-height:100%;overflow-y:auto;scrollbar-width:none;padding:clamp(18px,3vh,34px) 0}
#contact .sheet::-webkit-scrollbar{display:none}
#contact .blurb{font-size:13.5px;line-height:1.55;color:var(--ink-60);max-width:58ch;margin:0 0 22px}
.crow{
  display:grid;grid-template-columns:minmax(120px,.3fr) 1fr;gap:clamp(16px,2.4vw,36px);
  padding:10px 0;border-top:1px solid var(--rule);align-items:baseline;
}
.crow:last-of-type{border-bottom:1px solid var(--rule)}
.crow dt{
  font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-38);
}
.crow dd{margin:0;font-size:13.5px}
.crow a{text-decoration:none;border-bottom:1px solid var(--ink-14);padding-bottom:1px;transition:border-color .2s}
.crow a:hover{border-color:var(--ink)}
.closing{margin:22px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-60);max-width:60ch}
.dl{
  display:inline-block;margin-top:20px;padding:10px 20px;border:1px solid var(--ink);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;transition:background .2s,color .2s;
}
.dl:hover{background:var(--ink);color:var(--paper)}

/* ---------- Lightbox ---------- */

.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(250,250,249,.97);backdrop-filter:blur(10px);
  align-items:center;justify-content:center;padding:70px var(--pad);
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;cursor:zoom-out;
  box-shadow:0 24px 70px rgba(17,17,17,.14);
}
.lb-cap{
  position:absolute;left:var(--pad);bottom:26px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-38);
}
.lb-close{
  position:absolute;top:22px;right:var(--pad);width:38px;height:38px;border-radius:50%;
  border:1px solid var(--rule);background:none;cursor:pointer;font-size:15px;color:var(--ink);
  display:grid;place-items:center;transition:background .2s,color .2s;
}
.lb-close:hover{background:var(--ink);color:var(--paper)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule);background:rgba(253,253,252,.8);cursor:pointer;color:var(--ink);
  display:grid;place-items:center;font-size:14px;transition:background .2s,color .2s;
}
.lb-nav:hover{background:var(--ink);color:var(--paper)}
.lb-prev{left:14px} .lb-next{right:14px}

/* ---------- Mobile ---------- */

@media (max-width:820px){
  :root{--bar:56px}
  .hint{display:none}
  .brand .tag{display:none}
  .nav{gap:12px}
  .nav button{font-size:9px;letter-spacing:.1em}
  section{padding:0 var(--pad)}
  .intro-inner{max-width:86vw;padding-right:0}
  /* photos lead on a phone; the write-up sits underneath */
  .proj{
    display:flex;flex-direction:column;gap:18px;align-items:flex-start;
    overflow-y:auto;scrollbar-width:none;padding:16px 0 24px;
    width:84vw;min-width:290px;
  }
  .proj::-webkit-scrollbar{display:none}
  .proj-head{order:1;padding:0;width:100%;flex:0 0 auto}
  .rail{order:2;padding:0;height:auto;width:100%;flex:0 0 auto;overflow-x:auto;scrollbar-width:none;gap:12px}
  .rail::-webkit-scrollbar{display:none}
  .proj-text{
    order:3;width:100%;padding:0;overflow:visible;flex:0 0 auto;
    mask-image:none;-webkit-mask-image:none;
  }
  figure{height:auto}
  .frame{height:min(44vh,380px)}
  .field dd{font-size:13px}
  #resume .sheet,#contact .sheet{width:84vw;min-width:290px}
  .rrow,.crow{grid-template-columns:1fr;gap:6px}
  .arrows{right:16px;bottom:18px}
  .lb-nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}