:root{
  --bg:#f0ede5;--ink:#171714;--muted:#777269;--line:rgba(23,23,20,.16);
  --panel:#f7f4ed;--radius:22px;--header:62px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body[data-tone=charcoal]{--bg:#555552;--ink:#f5f1e9;--muted:#d2cec6;--line:rgba(245,241,233,.24);--panel:#62625e}
body[data-tone=lavender]{--bg:#dfe3f2;--ink:#171714;--muted:#686a75;--line:rgba(23,23,20,.18);--panel:#eceef7}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img,video{display:block;max-width:100%}
.site-header{
  position:sticky;top:0;z-index:60;height:var(--header);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px)
}
.brand,.nav a,.tone-label,.eyebrow,.caption,.read-statement,.close{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase
}
.header-right{display:flex;align-items:center;gap:22px}.nav{display:flex;gap:14px}
.tones{display:flex;align-items:center;gap:7px}.tone-label{color:var(--muted)}
.tone{width:11px;height:11px;border-radius:50%;border:1px solid #777;padding:0;cursor:pointer}
.tone[data-tone=offwhite]{background:#f2eee6}.tone[data-tone=charcoal]{background:#555552}.tone[data-tone=lavender]{background:#dfe3f2}
.tone.active{outline:2px solid rgba(0,0,0,.1);outline-offset:3px}

.intro{min-height:84vh;padding:13vh 5vw 8vh;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid var(--line)}
.intro h1{font-size:clamp(86px,14vw,210px);font-weight:400;line-height:.76;letter-spacing:-.08em;margin:.12em 0}
.intro p{font-family:Georgia,serif;font-size:clamp(20px,2.2vw,34px);line-height:1.18;max-width:700px}

.project{position:relative;padding:10vw 5vw 12vw;border-bottom:1px solid var(--line);min-height:100vh}
.project-head{display:grid;grid-template-columns:.25fr 1.4fr .8fr;gap:4vw;align-items:end;margin-bottom:8vw}
.project-head h2{font-size:clamp(70px,10vw,150px);font-weight:400;line-height:.8;letter-spacing:-.075em;margin:0}
.project-head p{font-family:Georgia,serif;font-size:18px;line-height:1.35;max-width:340px}
.read-statement{border:0;border-bottom:1px solid currentColor;background:none;padding:0 0 5px;cursor:pointer;margin-top:20px}

.canvas{display:grid;grid-template-columns:repeat(12,1fr);gap:3vw;align-items:start}
.media{margin:0;cursor:zoom-in}.media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.media figcaption{margin-top:7px;color:var(--muted)}
.media:nth-child(1){grid-column:1/6;height:56vw;max-height:690px}
.media:nth-child(2){grid-column:8/12;height:28vw;margin-top:13vw}
.media:nth-child(3){grid-column:3/7;height:34vw;margin-top:5vw}
.media:nth-child(4){grid-column:7/13;height:42vw;margin-top:-5vw}
.media:nth-child(5){grid-column:1/5;height:31vw;margin-top:12vw}
.media:nth-child(6){grid-column:6/11;height:47vw}
.media:nth-child(7){grid-column:9/13;height:27vw;margin-top:8vw}
.media:nth-child(8){grid-column:2/8;height:40vw;margin-top:5vw}
.media:nth-child(9){grid-column:8/11;height:38vw;margin-top:-3vw}
.media:nth-child(10){grid-column:4/12;height:42vw;margin-top:10vw}
.project-end{
  margin-top:10vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:24px;
}

.project-end-nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.about{padding:12vw 5vw;border-bottom:1px solid var(--line)}
.about h2{font-size:clamp(80px,13vw,190px);font-weight:400;line-height:.76;letter-spacing:-.08em;margin:0 0 9vw}
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:8vw}
.about-placeholder{
  border:0;
  border-radius:0;
  min-height:0;
  display:block;
}
.about-placeholder img{
  width:100%;
  height:auto;
  display:block;
}
.about-copy{
  font-family:inherit;
  font-size:clamp(18px,1.65vw,28px);
  line-height:1.35;
  margin-top:0;
  max-width:680px;
}
.about-links{margin-top:7vw;display:flex;gap:28px;font-size:10px;letter-spacing:.13em;text-transform:uppercase}

.statement-backdrop{position:fixed;inset:0;z-index:89;background:rgba(20,20,18,.16);opacity:0;pointer-events:none;transition:opacity .42s ease}
.statement-panel{
  position:fixed;z-index:90;right:0;top:0;bottom:0;width:min(620px,74vw);
  background:var(--panel);border-left:1px solid var(--line);border-bottom-left-radius:38px;
  padding:8vw 5vw;transform:translateX(102%);
  transition:transform .5s cubic-bezier(.22,.8,.2,1);overflow:auto
}
.statement-panel.open{transform:translateX(0)}.statement-backdrop.open{opacity:1;pointer-events:auto}
.statement-panel h3{font-size:clamp(52px,6vw,88px);font-weight:400;line-height:.9;letter-spacing:-.055em;margin:4vw 0 2vw}
.statement-panel p{font-family:Georgia,serif;font-size:20px;line-height:1.45}
.close{position:absolute;right:26px;top:24px;border:0;background:none;cursor:pointer}

.lightbox{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(15px);display:none;align-items:center;justify-content:center;padding:5vw}
.lightbox.open{display:flex}.lightbox img{max-width:90vw;max-height:82vh;border-radius:20px}.lightbox .close{z-index:2}

footer{padding:30px 26px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
@media(max-width:760px){
  .site-header{padding:0 14px}.brand{max-width:115px}.nav{gap:8px}.nav a{font-size:8px}.tones{display:none}
  .intro{padding:18vh 18px 10vh}.intro h1{font-size:21vw}
  .project{padding:20vw 18px}.project-head{display:block}.project-head>*{margin-bottom:24px}
  .canvas{display:block}.media{width:82%!important;height:auto!important;margin:0 0 14vw!important}.media:nth-child(even){margin-left:auto!important}.media img{height:auto}
  .about{padding:22vw 18px}.about-grid{grid-template-columns:1fr}.about-placeholder{min-height:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.statement-panel,.statement-backdrop{transition:none}}


/* ============================================================
   SINGLE PAGE 02 — SOFT MOTION / TABLE INTERACTION
   ============================================================ */

/* Keep layouts clearly separated. Images never intentionally overlap. */
.canvas{
  row-gap:6vw;
}
.media{
  position:relative;
  z-index:1;
  transition:transform .34s cubic-bezier(.22,.8,.2,1);
  touch-action:pan-y;
}
.media.is-dragging{
  transition:none;
  z-index:3;
  cursor:grabbing;
}
.media:not(.is-dragging){
  cursor:grab;
}

/* Give each image a little breathing room so small nudges remain isolated. */
.media{
  padding:8px;
}
.media img{
  box-shadow:0 1px 0 rgba(23,23,20,.04);
}

/* Gentle scroll-reveal movement: creates a slower visual rhythm
   without forcing images to overlap. */
.project,
.about,
.intro{
  --soft-shift:0px;
}
.media[data-scroll-soft]{
  transform:translate3d(0,var(--soft-shift),0);
}

/* Anchor jumps should feel calm rather than instantaneous. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header) + 18px);
}

@media(prefers-reduced-motion:reduce){
  .media{transition:none!important}
}


/* ============================================================
   SINGLE PAGE 03 — CLICK vs DRAG + NAV FADE
   ============================================================ */

/* Soft fade below the sticky navigation.
   Content visually dissolves as it moves under the header. */
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:100%;
  height:72px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    color-mix(in srgb,var(--bg) 96%,transparent) 0%,
    color-mix(in srgb,var(--bg) 74%,transparent) 34%,
    color-mix(in srgb,var(--bg) 30%,transparent) 70%,
    transparent 100%
  );
}

/* Cursor language: grab until a real click opens the image. */
.media{
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.media.is-dragging{
  cursor:grabbing;
}


/* ============================================================
   SINGLE PAGE 04 — FULL-WIDTH MOMENTS + REFERENCE SCROLL FEEL
   ============================================================ */

/* A project can now contain true full-width media without overlap. */
.fullwidth-stage{
  position:relative;
  height:145vh;
  margin:4vw -5vw 10vw;
}
.fullwidth-sticky{
  position:sticky;
  top:calc(var(--header) + 28px);
  height:calc(100vh - var(--header) - 56px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.fullwidth-media{
  width:46vw;
  height:54vh;
  max-width:none;
  margin:0;
  cursor:grab;
  will-change:width,height,transform,opacity;
  transition:box-shadow .3s ease;
}
.fullwidth-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
}

/* editorial canvas remains non-overlapping, but less restrained */
.canvas{
  grid-template-columns:repeat(12,1fr);
  column-gap:3vw;
  row-gap:10vw;
}
.media:nth-child(1){grid-column:1/7;height:48vw;max-height:650px}
.media:nth-child(2){grid-column:8/13;height:34vw;margin-top:7vw}
.media:nth-child(3){grid-column:2/6;height:31vw;margin-top:0}
.media:nth-child(4){grid-column:6/13;height:46vw;margin-top:0}
.media:nth-child(5){grid-column:1/5;height:34vw;margin-top:0}
.media:nth-child(6){grid-column:5/11;height:45vw;margin-top:0}
.media:nth-child(7){grid-column:9/13;height:30vw;margin-top:0}
.media:nth-child(8){grid-column:1/8;height:44vw;margin-top:0}
.media:nth-child(9){grid-column:8/13;height:38vw;margin-top:0}
.media:nth-child(10){grid-column:3/12;height:48vw;margin-top:0}

/* nav fade adapts correctly when page mood changes */
.site-header::after{
  background:linear-gradient(
    to bottom,
    color-mix(in srgb,var(--bg) 98%,transparent) 0%,
    color-mix(in srgb,var(--bg) 76%,transparent) 34%,
    color-mix(in srgb,var(--bg) 28%,transparent) 72%,
    transparent 100%
  );
}

/* Black mode: make lightbox and panels feel intentional rather than inverted. */
body[data-tone=charcoal] .media img,
body[data-tone=charcoal] .fullwidth-media img{
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}

@media(max-width:760px){
  .fullwidth-stage{height:auto;margin:0 0 16vw}
  .fullwidth-sticky{position:relative;top:auto;height:auto}
  .fullwidth-media{width:100%;height:auto}
  .fullwidth-media img{height:auto}
}


/* ============================================================
   SINGLE PAGE 06 — EVERY IMAGE EXPANDS
   ============================================================ */

/* Retire the previous mixed-grid image system. */
.canvas,
.fullwidth-stage{
  display:none!important;
}

/* Each image gets its own clear vertical moment. */
.image-sequence{
  display:block;
  margin:0 -5vw;
}

.image-stage{
  position:relative;
  height:132vh;
  border-top:1px solid transparent;
}

.image-sticky{
  position:sticky;
  top:calc(var(--header) + 30px);
  height:calc(100vh - var(--header) - 60px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.expanding-media{
  width:42vw;
  height:52vh;
  margin:0;
  cursor:grab;
  will-change:width,height,transform,opacity;
  transition:box-shadow .3s ease;
  position:relative;
}

.expanding-media.is-dragging{
  cursor:grabbing;
}

.expanding-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(23,23,20,.04);
}

.expanding-media figcaption{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  color:var(--muted);
}

/* Slight alternation in starting size so the rhythm doesn't feel mechanical.
   All still expand to nearly full width. */
.image-stage:nth-child(3n+2) .expanding-media{width:36vw;height:58vh}
.image-stage:nth-child(3n+3) .expanding-media{width:48vw;height:48vh}

/* Project spacing after the image sequence. */
.project-end{
  margin-top:5vw;
}

body[data-tone=charcoal] .expanding-media img{
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}

@media(max-width:760px){
  .image-sequence{margin:0}
  .image-stage{height:auto;margin-bottom:14vw}
  .image-sticky{position:relative;top:auto;height:auto}
  .expanding-media,
  .image-stage:nth-child(3n+2) .expanding-media,
  .image-stage:nth-child(3n+3) .expanding-media{
    width:100%;
    height:auto;
  }
  .expanding-media img{height:auto}
}


/* ============================================================
   SINGLE PAGE 08 — PROJECT IMAGE RHYTHM
   01 grows in / 02–09 full / 10 contracts out
   ============================================================ */

/* Square image/video edges throughout the scrolling page. */
.expanding-media img,
.expanding-media video,
.media img,
.media video,
.fullwidth-media img,
.fullwidth-media video{
  border-radius:0 !important;
}

/* Keep the lightbox treatment separate from the scrolling page. */
.lightbox img,
.lightbox video{
  border-radius:18px;
}

/* Every project image has a clear viewport moment. */
.image-stage{
  height:112vh;
  margin:0;
}

.image-sticky{
  top:calc(var(--header) + 22px);
  height:calc(100vh - var(--header) - 44px);
}

/* Middle images: already at full editorial width. */
.expanding-media{
  width:94vw;
  height:88vh;
  max-width:none;
}

/* First image has extra travel so it can grow into full width. */
.image-stage:first-child{
  height:140vh;
}

/* Last image has extra travel so it can contract out. */
.image-stage:last-child{
  height:140vh;
}

/* No decorative rounding or shadows on scrolling media. */
.expanding-media img,
.expanding-media video{
  box-shadow:none !important;
}

/* Slightly more pause before next project after the contracting image. */
.project-end{
  margin-top:7vw;
  padding-top:28px;
}

@media(max-width:760px){
  .image-stage,
  .image-stage:first-child,
  .image-stage:last-child{
    height:auto;
    margin-bottom:14vw;
  }
  .expanding-media{
    width:100% !important;
    height:auto !important;
  }
  .expanding-media img,
  .expanding-media video{
    height:auto;
  }
}


/* ============================================================
   SINGLE PAGE 09 — TRUE FULL-WIDTH + TIGHTER PROJECT TRANSITIONS
   ============================================================ */

/* Full means edge-to-edge across the user's viewport. */
.image-sequence{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}

.expanding-media{
  max-width:none;
}

/* Reduce the amount of vertical travel per image. */
.image-stage{
  height:92vh;
}

.image-stage:first-child{
  height:112vh;
}

.image-stage:last-child{
  height:104vh;
}

/* Less empty space between the final image and the next project. */
.project{
  padding-bottom:6vw;
}

.project-end{
  margin-top:2.5vw;
  padding-top:20px;
}

/* Pull the next project's heading closer to the transition. */
.project + .project{
  padding-top:7vw;
}

/* When an image is full width, it can genuinely touch both screen edges. */
.expanding-media img,
.expanding-media video{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(max-width:760px){
  .image-sequence{
    width:auto;
    margin-left:0;
    margin-right:0;
  }
  .image-stage,
  .image-stage:first-child,
  .image-stage:last-child{
    height:auto;
  }
}


/* ============================================================
   SINGLE PAGE 10 — SLOWER IMAGE 10 + IMAGE 05 TRIPTYCH
   ============================================================ */

/* Give Image 10 more scroll distance so its contraction feels slower. */
.image-stage:last-child{
  height:132vh;
}

/* Image 05 remains one full-width viewport moment, but contains 3 images. */
.triptych-media{
  width:100vw !important;
  height:88vh !important;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.25vw,22px);
  padding:0 clamp(12px,1.5vw,26px);
  align-items:stretch;
  opacity:1 !important;
}

.triptych-item{
  margin:0;
  min-width:0;
  height:100%;
  position:relative;
  cursor:grab;
}

.triptych-item.is-dragging{
  cursor:grabbing;
}

.triptych-item img,
.triptych-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0 !important;
}

.triptych-item figcaption{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  color:var(--muted);
}

/* The three images do not overlap one another. */
.triptych-item{
  overflow:visible;
}

@media(max-width:760px){
  .image-stage:last-child{height:auto}
  .triptych-media{
    width:100% !important;
    height:auto !important;
    grid-template-columns:1fr;
    gap:8vw;
    padding:0;
  }
  .triptych-item{height:auto}
  .triptych-item img,
  .triptych-item video{height:auto}
}


/* ============================================================
   SINGLE PAGE 11 — SYMMETRIC ENTRY/EXIT + AUTO-CLOSING STATEMENT
   ============================================================ */

/* First and last image now get equal transition travel. */
.image-stage:first-child,
.image-stage:last-child{
  height:154vh;
}

/* Remove all seams between the Image 05 triptych. */
.triptych-media{
  gap:0 !important;
  padding:0 !important;
}

.triptych-item{
  margin:0 !important;
  border:0 !important;
}

.triptych-item img,
.triptych-item video{
  border:0 !important;
  outline:0 !important;
}

/* Statement can gently reduce before it closes itself. */
.statement-panel.auto-reducing{
  transform:translateX(14%) scale(.90);
  transform-origin:right center;
  opacity:.82;
  border-bottom-left-radius:54px;
}

.statement-panel,
.statement-backdrop{
  transition:
    transform .62s cubic-bezier(.22,.8,.2,1),
    opacity .58s ease,
    border-radius .58s ease;
}

/* Slower close state when auto-closing from project progression. */
.statement-panel.auto-closing{
  transform:translateX(102%) scale(.88);
  opacity:0;
}

.statement-backdrop.auto-closing{
  opacity:0;
}

@media(max-width:760px){
  .image-stage:first-child,
  .image-stage:last-child{
    height:auto;
  }
}


/* ============================================================
   SINGLE PAGE 12 — TRANSLUCENT STATEMENT / CLEAN AUTO-CLOSE
   ============================================================ */

/* The statement now feels like translucent material over the portfolio.
   The work remains visible behind it while still keeping text readable. */
.statement-panel{
  background:color-mix(in srgb,var(--panel) 72%,transparent) !important;
  -webkit-backdrop-filter:blur(18px) saturate(105%);
  backdrop-filter:blur(18px) saturate(105%);
  border-left:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
}

/* Reduce the darkening behind the sheet so imagery remains visible. */
.statement-backdrop{
  background:rgba(20,20,18,.07) !important;
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
}

/* Remove the previous shrink/reduce stage completely. */
.statement-panel.auto-reducing{
  transform:none !important;
  opacity:1 !important;
  border-bottom-left-radius:38px !important;
}

/* Auto-close is now one continuous, calm slide to the right. */
.statement-panel.auto-closing{
  transform:translateX(102%) !important;
  opacity:0 !important;
  transition:
    transform 1.15s cubic-bezier(.22,.72,.18,1),
    opacity .95s ease !important;
}

.statement-backdrop.auto-closing{
  opacity:0 !important;
  transition:opacity 1.05s ease !important;
}


/* ============================================================
   SINGLE PAGE 13 — CORNER TRANSITION ON IMAGE 01 / IMAGE 10
   ============================================================ */

/* Allow JS to control one editorial corner without restoring
   rounded edges to the other scrolling images. */
.image-stage:first-child .expanding-media img,
.image-stage:first-child .expanding-media video,
.image-stage:last-child .expanding-media img,
.image-stage:last-child .expanding-media video{
  border-radius:0 !important;
}

/* The single corner is bottom-left, echoing the statement sheet language. */
.image-stage:first-child .expanding-media,
.image-stage:last-child .expanding-media{
  overflow:hidden;
}

/* Lightbox remains separate and unchanged. */
.lightbox img,
.lightbox video{
  border-radius:18px;
}


/* ============================================================
   SINGLE PAGE 14 — VIDEO HERO + IMAGE 10 BEVEL TRANSITION
   ============================================================ */

/* Replace the text-only opening with a full-viewport video moment. */
.video-intro{
  position:relative;
  min-height:calc(100vh - var(--header));
  padding:0;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}

.intro-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}

.intro-video-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(12,12,11,.38) 0%,
    rgba(12,12,11,.08) 48%,
    rgba(12,12,11,.02) 100%
  );
  pointer-events:none;
}

.intro-video-copy{
  position:absolute;
  left:5vw;
  bottom:7vh;
  z-index:2;
  color:#f4f0e8;
  max-width:760px;
}

.intro-video-copy h1{
  font-size:clamp(86px,14vw,210px);
  font-weight:400;
  line-height:.76;
  letter-spacing:-.08em;
  margin:.12em 0;
}

.intro-video-copy p{
  font-family:Georgia,serif;
  font-size:clamp(18px,2vw,30px);
  line-height:1.18;
  max-width:650px;
}

.intro-scroll-cue{
  position:absolute;
  right:28px;
  bottom:26px;
  z-index:2;
  color:#f4f0e8;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Image 10 is clipped by JS into progressively beveled corners. */
.image-stage:last-child .expanding-media{
  overflow:visible;
}

.image-stage:last-child .expanding-media img,
.image-stage:last-child .expanding-media video{
  border-radius:0 !important;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  will-change:clip-path,width,height,opacity;
}

@media(max-width:760px){
  .video-intro{min-height:80vh}
  .intro-video-copy{left:18px;bottom:60px;right:18px}
  .intro-video-copy h1{font-size:21vw}
  .intro-scroll-cue{right:18px;bottom:18px}
}


/* ============================================================
   SINGLE PAGE 15 — RELIABLE BEVEL + REFINED ABOUT
   ============================================================ */

/* Image 10: CSS custom property drives a true 4-corner bevel.
   JS updates --bevel continuously from 0px upward while contracting. */
.image-stage:last-child .expanding-media img,
.image-stage:last-child .expanding-media video{
  --bevel:0px;
  clip-path:polygon(
    var(--bevel) 0,
    calc(100% - var(--bevel)) 0,
    100% var(--bevel),
    100% calc(100% - var(--bevel)),
    calc(100% - var(--bevel)) 100%,
    var(--bevel) 100%,
    0 calc(100% - var(--bevel)),
    0 var(--bevel)
  ) !important;
  border-radius:0 !important;
  will-change:clip-path,width,height,opacity;
}

/* About: quieter, clearer hierarchy. */
.about-intro-grid{
  grid-template-columns:36% 1fr;
  column-gap:6vw;
  align-items:center;
  margin-bottom:7vw;
}

.about-subhead{
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:16px;
  color:var(--muted);
}

.about-detail-row{
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:6vw;
  padding:34px 0;
  border-top:1px solid var(--line);
}

.about-detail-row:last-of-type{
  border-bottom:1px solid var(--line);
}

.about-detail-copy{
  font-family:Georgia,serif;
  font-size:clamp(18px,1.7vw,27px);
  line-height:1.35;
}

/* About — Experience */

.experience-list{
  font-family:inherit;
  font-size:inherit;
  line-height:1.3;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:6vw;
  row-gap:38px;
}

.experience-item{
  margin-bottom:0;
}

.experience-item:last-child{
  margin-bottom:0;
}

.experience-company{
  font-size:clamp(15px,1.25vw,19px);
  font-weight:500;
  letter-spacing:.02em;
}

.experience-role{
  margin-top:5px;
  font-size:clamp(14px,1.1vw,17px);
  font-weight:400;
}

.experience-meta{
  margin-top:6px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
/* About — Education */

.education-list{
  font-family:inherit;
  font-size:inherit;
  line-height:1.3;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:3vw;
}

.education-item{
  margin:0;
}

.education-school{
  font-size:clamp(14px,1.1vw,17px);
  font-weight:500;
  letter-spacing:.02em;
}

.education-degree{
  margin-top:5px;
  font-size:clamp(13px,1vw,16px);
  font-weight:400;
}

.education-meta{
  margin-top:6px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.about-links{
  margin-top:6vw;
  margin-left:32%;
  display:flex;
  gap:34px;
  align-items:center;
}

.about-links a{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:5px;
}

@media(max-width:760px){

  .about-detail-row{
    grid-template-columns:1fr;
    gap:18px;
  }

  .experience-list{
    grid-template-columns:1fr;
    row-gap:28px;
  }

.education-list{
  grid-template-columns:1fr;
  row-gap:28px;
}	

 .about-links{
  margin-left:0;
  flex-direction:column;
  align-items:flex-start;
}

}


/* ============================================================
   SINGLE PAGE 16 — READ STATEMENT GLASS TREATMENT
   ============================================================ */

/*
  IMPORTANT:
  The page/background itself is NOT blurred.
  Only pixels physically underneath the statement panel receive
  the subtle blur through backdrop-filter.
*/

.statement-panel{
  background:color-mix(in srgb, var(--bg) 72%, transparent) !important;
  -webkit-backdrop-filter:blur(10px) saturate(105%);
  backdrop-filter:blur(10px) saturate(105%);
}

/* Remove any full-screen blur/filter from the statement backdrop. */
.statement-backdrop,
body.statement-open main,
body.statement-open .project,
body.statement-open .image-stage,
body.statement-open .expanding-media{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Keep the rest of the page visually clear behind the translucent sheet. */
.statement-backdrop{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background:rgba(0,0,0,.04) !important;
}


/* ============================================================
   SINGLE PAGE 17 — SAFARI-SAFE IMAGE 10 BEVEL MORPH
   ============================================================ */

/* Image 10 begins perfectly square. JS writes the polygon directly
   on every scroll frame for a continuous Safari-safe chamfer morph. */
.image-stage:last-child .expanding-media img,
.image-stage:last-child .expanding-media video{
  border-radius:0 !important;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%) !important;
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%) !important;
  will-change:clip-path,-webkit-clip-path,width,height,opacity;
}


/* ============================================================
   SINGLE PAGE 18 — IMAGE 10 ROUNDED-CORNER TRANSITION
   ============================================================ */

/* Image 10 no longer bevels. It transitions from square to
   smoothly rounded corners as the image contracts. */
.image-stage:last-child .expanding-media img,
.image-stage:last-child .expanding-media video{
  clip-path:none !important;
  -webkit-clip-path:none !important;
  border-radius:0;
  will-change:border-radius,width,height,opacity;
}

/* Optional: show complete image without cropping */
.contain-image {
  object-fit: contain !important;
  background: var(--bg);
}

/* =========================================================
   REUSABLE IMAGE-FIT SYSTEM
   ========================================================= */

/* Show the entire image when cropping is undesirable */
.contain-image {
  object-fit: contain !important;
  background: var(--bg);
}

/* Optional focal-position controls for regular images */
.focus-left {
  object-fit: cover !important;
  object-position: left center !important;
}

.focus-center {
  object-fit: cover !important;
  object-position: center center !important;
}

.focus-right {
  object-fit: cover !important;
  object-position: right center !important;
}

.focus-top {
  object-fit: cover !important;
  object-position: center top !important;
}

.focus-bottom {
  object-fit: cover !important;
  object-position: center bottom !important;
}

/* =========================================================
   IMAGE 05 / TRIPTYCH
   Automatically protects the three-image composition
   ========================================================= */

.triptych-item img,
.triptych-item video {
  object-fit: cover !important;
}

/* Left panel favors the left side of its source image */
.triptych-item:nth-child(1) img,
.triptych-item:nth-child(1) video {
  object-position: left center !important;
}

/* Center panel stays centered */
.triptych-item:nth-child(2) img,
.triptych-item:nth-child(2) video {
  object-position: center center !important;
}

/* Right panel favors the right side */
.triptych-item:nth-child(3) img,
.triptych-item:nth-child(3) video {
  object-position: right center !important;
}

/* UNIVERSAL IMAGE POSITIONING OPTIONS */

.focus-left {
  object-position: left center !important;
}

.focus-right {
  object-position: right center !important;
}

.focus-top {
  object-position: center top !important;
}

.focus-bottom {
  object-position: center bottom !important;
}

.focus-top-left {
  object-position: left top !important;
}

.focus-top-right {
  object-position: right top !important;
}

.focus-bottom-left {
  object-position: left bottom !important;
}

.focus-bottom-right {
  object-position: right bottom !important;
}
/* ============================================================
   LIGHTBOX — DETAIL INSPECTION
   ============================================================ */

.lightbox-stage{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  touch-action:none;
}

.lightbox-zoom-media{
  max-width:90vw;
  max-height:82vh;
  width:auto;
  height:auto;

  transform-origin:center center;

  cursor:zoom-in;

  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;

  transition:
    transform .42s cubic-bezier(.22,.72,.18,1);
}

.lightbox-zoom-media.is-panning{
  cursor:grabbing;
  transition:none;
}

/* ============================================================
   STATEMENT — PARAGRAPH TYPOGRAPHY
   ============================================================ */

.statement-body {
  max-width: 440px;
  padding-bottom: 8vh;
}

.statement-body p {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0;
}

.statement-body p + p {
  margin-top: 1.35em;
}

/* --------------------------------
   PROJECT 01 — INDIVIDUAL IMAGE WIDTHS
-------------------------------- */

.image-06 {
  width: 100vw !important;
  max-width: 100vw !important;
}

.image-08 {
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ============================================================
   REUSABLE — FULL IMAGE / NO CROPPING
   ============================================================ */

.full-natural-image{
  width:100vw !important;
  max-width:100vw !important;
  height:auto !important;
}

.full-natural-image img,
.full-natural-image video{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

/* ============================================================
   FULL NATURAL IMAGE
   Tall boards / documents / layouts
   Full width + natural proportional height
   ============================================================ */

.full-natural-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

.full-natural-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

.natural-stage {
    height: auto !important;
    min-height: 0 !important;
}

.natural-stage .image-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ============================================================
   TABLET PORTRAIT — 761px to 900px
   Simplify standard image stages without changing desktop
   ============================================================ */

@media (min-width:761px) and (max-width:900px){

  /* Standard project images become natural-height on portrait tablets */
  .image-stage:not(.triptych-stage){
    height:auto !important;
    min-height:0 !important;
    margin-bottom:10vw;
  }

  .image-stage:not(.triptych-stage) .image-sticky{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible;
  }

  .image-stage:not(.triptych-stage) .expanding-media{
    width:100vw !important;
    max-width:100vw !important;
    height:auto !important;
  }

  .image-stage:not(.triptych-stage) .expanding-media img,
  .image-stage:not(.triptych-stage) .expanding-media video{
    width:100% !important;
    height:auto !important;
  }
  /* Tablet portrait — inset hero video */
  .video-intro{
    width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
  }

  .intro-video{
    width:100%;
  }
}

/* Hide internal image index captions */
.caption{
  display:none;
}

/* ============================================================
   MOBILE — IMAGE 05 TRIPTYCH REFINEMENT
   Portrait + Landscape only
   ============================================================ */

/* MOBILE PORTRAIT */
@media (max-width:760px) and (orientation:portrait){

  .triptych-stage{
    height:auto !important;
    min-height:0 !important;
    margin-bottom:10vw !important;
  }

  .triptych-stage .image-sticky{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .triptych-media{
    width:100% !important;
    height:auto !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:0 !important;
  }

  .triptych-item{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 5;
    overflow:hidden !important;
  }

  .triptych-item img,
  .triptych-item video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}


/* MOBILE LANDSCAPE */
@media (max-width:760px) and (orientation:landscape){

  .triptych-stage{
    height:auto !important;
    min-height:0 !important;
    margin-bottom:6vw !important;
  }

  .triptych-stage .image-sticky{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .triptych-media{
    width:100% !important;
    height:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important;
    padding:0 !important;
    align-items:stretch !important;
  }

  .triptych-item{
    height:auto !important;
    aspect-ratio:4 / 5;
    overflow:hidden !important;
  }

  .triptych-item img,
  .triptych-item video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* ============================================================
   MOBILE PORTRAIT — TIGHTER PROJECT IMAGE RHYTHM
   ============================================================ */

@media (max-width:760px) and (orientation:portrait){

  .image-stage,
  .image-stage:first-child,
  .image-stage:last-child{
    margin-bottom:7vw !important;
  }

  .triptych-stage{
    margin-bottom:7vw !important;
  }

}