:root{
  color-scheme:light only;
  --bg:#FFFFFF;
  --ink:#0A0A0A;
  --muted:#6E6E6E;
  --rust:#C25A33;
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;background:#FFFFFF;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--rust);color:#fff;}
a{color:inherit;}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 34px;
  color:#fff;
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  pointer-events:none;
  mix-blend-mode:difference;
}
header a{pointer-events:auto;opacity:0.85;}
header a:hover{opacity:1;}
header .wordmark{font-weight:700;letter-spacing:0.1em;}

/* ---------- SLIDE DECK ---------- */
.deck{
  scroll-snap-type:y proximity;
}
.slide{
  min-height:100svh;
  width:100%;
  position:relative;
  scroll-snap-align:start;
  display:flex;
}

/* Title slide (page 1) */
.slide.title{position:relative;}
.slide.title .t-num{
  position:absolute;right:6vw;top:36%;
  font-size:clamp(70px,11vw,160px);font-weight:700;letter-spacing:-0.02em;color:var(--ink);
}
.slide.title .t-name{
  position:absolute;left:6vw;top:53%;
  font-size:clamp(22px,3vw,34px);font-weight:700;color:var(--ink);
}
.slide.title .t-tagline{
  position:absolute;left:6vw;top:calc(53% + 46px);max-width:340px;
  font-size:14px;line-height:1.6;color:var(--muted);font-weight:400;
}
.slide.title .t-year{
  position:absolute;left:6vw;bottom:9%;
  font-size:clamp(16px,2vw,20px);font-weight:700;color:var(--ink);
}

/* Closing slide (last page) */
.slide.closing{position:relative;}
.slide.closing .c-block{
  position:absolute;left:6vw;top:44%;
}
.slide.closing .c-num{font-size:clamp(40px,6vw,64px);font-weight:700;color:var(--ink);line-height:1.1;}
.slide.closing .c-name{font-size:clamp(20px,2.6vw,28px);font-weight:700;color:var(--ink);line-height:1.3;}
.slide.closing .c-phone{font-size:clamp(20px,2.6vw,28px);font-weight:700;color:var(--ink);line-height:1.3;}
.slide.closing .c-phone a{text-decoration:none;}
.slide.closing .c-email{
  display:inline-block;margin-top:34px;font-size:clamp(20px,2.6vw,28px);font-weight:700;color:var(--ink);
  text-decoration:underline;
}
.slide.closing .c-ig{
  display:inline-block;margin-top:18px;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.slide.closing .c-ig:hover{color:var(--rust);}

/* Work slides */
.slide.work{
  align-items:flex-end;
}
.work-text{
  position:absolute;top:110px;left:6vw;z-index:5;max-width:420px;
}
.work-plate{font-size:12px;color:var(--rust);letter-spacing:0.14em;font-weight:700;margin-bottom:16px;}
.work-title{font-size:clamp(32px,4.4vw,56px);font-weight:700;letter-spacing:-0.02em;line-height:1.02;color:var(--ink);}
.work-dim{margin-top:16px;font-size:15px;color:#3A3A3A;letter-spacing:0.02em;}
.work-desc{margin-top:16px;font-size:15px;line-height:1.6;color:#3A3A3A;font-weight:400;}
.work-frame{margin-top:10px;font-size:13px;color:var(--muted);font-weight:400;}
.work-note{margin-top:10px;font-size:13px;color:var(--muted);font-weight:400;line-height:1.5;}

/* Availability / price row */
.work-avail{margin-top:22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.work-price{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:0.02em;}
.avail-label{font-size:12px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;}
.inquire{
  font-size:12px;font-weight:700;color:var(--rust);text-decoration:none;
  letter-spacing:0.08em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.inquire:hover{border-color:var(--rust);}
.tag-sold{
  font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid rgba(0,0,0,0.18);padding:4px 10px;
}

/* Image (button so it is keyboard-accessible) */
.work-imgwrap{
  margin-left:auto;
  width:60%;
  height:100svh;
  cursor:zoom-in;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh 4vw 6vh 0;
  /* button reset */
  border:0;background:none;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;
}
.work-imgwrap img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
  box-shadow:0 20px 45px -18px rgba(0,0,0,0.25);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.work-imgwrap:hover img{transform:scale(1.02);}
.work-imgwrap:focus-visible{outline:2px solid var(--rust);outline-offset:-6px;}
.work-imgwrap::after{
  content:'View ＋';
  position:absolute;bottom:24px;right:24px;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,0.45);padding:9px 14px;
  opacity:0;transition:opacity .3s ease;
}
.work-imgwrap:hover::after,.work-imgwrap:focus-visible::after{opacity:1;}
.work-imgwrap[data-has-process]::after{content:'View process ＋';}

@media(max-width:820px){
  .slide.work{flex-direction:column;align-items:stretch;padding-top:140px;}
  .work-text{position:static;padding:0 6vw 30px;max-width:none;}
  .work-imgwrap{width:100%;height:64svh;margin-left:0;padding:0 6vw 4vh;}
}

/* Index rail (right side dots) */
.rail{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;z-index:90;
}
.rail a{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,0,0,0.25);
  display:block;
  transition:background .2s ease, transform .2s ease;
}
.rail a:hover, .rail a.active{background:var(--rust);transform:scale(1.4);}
@media(max-width:820px){.rail{display:none;}}

/* ---------- LIGHTBOX / PROCESS VIEW ---------- */
#lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.97);
  overflow-y:auto;
  padding:80px 24px 60px;
}
#lightbox.open{display:block;}
.lb-close{
  position:fixed;top:22px;right:26px;z-index:1010;
  color:#fff;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
  background:none;border:1px solid rgba(255,255,255,0.35);
  padding:9px 16px;cursor:pointer;font-family:inherit;
}
.lb-close:hover{border-color:#fff;}
.lb-inner{max-width:1000px;margin:0 auto;}
.lb-head{color:#fff;text-align:center;margin-bottom:36px;}
.lb-head .lb-num{color:var(--rust);font-size:12px;letter-spacing:0.14em;font-weight:700;}
.lb-head .lb-title{font-size:clamp(28px,5vw,48px);font-weight:700;margin-top:10px;letter-spacing:-0.02em;}
.lb-head .lb-sub{color:#B9B4A8;font-size:14px;margin-top:10px;font-weight:400;}
.lb-hero{width:100%;display:block;box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);}
.lb-process-label{
  color:#D9D5C9;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  margin:50px 0 18px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.15);
}
.lb-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.lb-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1b1a17;}
.lb-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.lb-ph video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
.lb-ph .tag{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:10.5px;letter-spacing:0.06em;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);}
@media(max-width:640px){.lb-process-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- LANDSCAPE PHONES ----------
   A phone held sideways keeps the PDF's page composition — text left,
   artwork right — scaled down so one full slide fits the short screen.
   (Placed last so it overrides the narrow-portrait stacking above.) */
@media (orientation: landscape) and (max-height: 520px) {
  header{padding:14px 24px;}

  .slide.work{flex-direction:row;align-items:flex-end;padding-top:0;}
  .work-text{position:absolute;top:50%;left:5vw;transform:translateY(-50%);max-width:38vw;padding:0;}
  .work-plate{font-size:10.5px;margin-bottom:8px;}
  .work-title{font-size:clamp(20px,8vh,32px);}
  .work-dim{margin-top:8px;font-size:12.5px;}
  .work-desc{margin-top:8px;font-size:12px;line-height:1.5;}
  .work-frame{margin-top:6px;font-size:11px;}
  .work-note{margin-top:6px;font-size:11px;}
  .work-avail{margin-top:12px;gap:10px;}
  .work-price{font-size:13.5px;}
  .avail-label{font-size:10.5px;}
  .inquire{font-size:10.5px;}
  .tag-sold{font-size:10.5px;padding:3px 8px;}
  .work-imgwrap{width:58%;height:100svh;margin-left:auto;padding:0;}
  .work-imgwrap img{box-shadow:none;}

  .slide.title .t-num{top:30%;}
  .slide.title .t-name{top:52%;font-size:clamp(18px,6vh,26px);}
  .slide.title .t-year{bottom:10%;font-size:clamp(13px,4vh,16px);}

  .slide.closing .c-block{top:34%;}
  .slide.closing .c-num{font-size:clamp(28px,9vh,40px);}
  .slide.closing .c-name,.slide.closing .c-phone{font-size:clamp(15px,5.5vh,20px);}
  .slide.closing .c-email{margin-top:16px;font-size:clamp(15px,5.5vh,20px);}

  #lightbox{padding:56px 20px 40px;}
  .lb-close{top:12px;right:16px;padding:7px 12px;font-size:11px;}
}

/* ---------- PORTRAIT PHONES: PDF-PAGE VIEW ----------
   A vertically held phone reads the deck the way the PDF does: each slide
   is a wide page card — text left, artwork right — stacked with thin gaps,
   instead of full-screen slides. Tap a page's artwork for the enlarged view. */
@media (orientation: portrait) and (max-width: 820px) {
  /* Black canvas + thin black lines between pages, like the iOS PDF viewer */
  html{background:#000;}
  body{background:#000;}
  header{padding:16px 20px;}
  .deck{padding:56px 0 24px;}

  .slide{
    min-height:0;
    height:56.25vw;              /* true 16:9 PDF page */
    background:#fff;
    margin:0 0 3px;              /* the thin black line between pages */
    scroll-snap-align:none;      /* pages flow freely, like a PDF scroll */
    overflow:hidden;
  }

  /* title page — same proportions as the PDF's page 1 */
  .slide.title .t-num{font-size:8vw;top:36%;right:6%;}
  .slide.title .t-name{font-size:3.2vw;top:53%;left:6%;}
  .slide.title .t-tagline{display:none;}
  .slide.title .t-year{font-size:2vw;bottom:9%;left:6%;}

  /* work pages — text block vertically centered, like the PDF */
  .slide.work{flex-direction:row;align-items:stretch;padding:0;}
  .work-text{position:absolute;top:50%;left:6%;transform:translateY(-50%);max-width:36%;padding:0;}
  .work-plate{font-size:max(1.4vw,7px);letter-spacing:0.12em;margin-bottom:1.6vw;}
  .work-title{font-size:6vw;}
  .work-dim{margin-top:1.6vw;font-size:max(1.8vw,7px);}
  .work-desc{margin-top:1.6vw;font-size:max(1.8vw,7px);line-height:1.5;}
  .work-frame{margin-top:1.4vw;font-size:max(1.6vw,7px);}
  .work-note{margin-top:1.4vw;font-size:max(1.6vw,7px);}
  .work-avail{margin-top:2.6vw;gap:2.4vw;}
  .work-price{font-size:max(2vw,9px);}
  .avail-label{font-size:max(1.5vw,7px);}
  .inquire{font-size:max(1.5vw,7.5px);}
  .tag-sold{font-size:max(1.5vw,7px);padding:0.6vw 1.6vw;}
  /* artwork bleeds to the page edges, like the PDF — no padding, no shadow */
  .work-imgwrap{width:56%;height:100%;margin-left:auto;padding:0;}
  .work-imgwrap img{box-shadow:none;}
  .work-imgwrap::after{display:none;}

  /* closing page */
  .slide.closing .c-block{top:28%;left:6%;}
  .slide.closing .c-num{font-size:6vw;line-height:1.15;}
  .slide.closing .c-name,.slide.closing .c-phone{font-size:3.2vw;}
  .slide.closing .c-email{font-size:3.2vw;margin-top:3vw;}
  .slide.closing .c-ig{font-size:max(1.8vw,8px);margin-top:2.2vw;}
}