/* Karina Ye — Layout B4 "Horizontal Wall" */

:root {
  --wall: #e8ece8;
  --wall-floral: #ece8e1;
  --floor: #d9ddd9;
  --floor-floral: #ddd8d0;
  --ink: #3f5560;
  --ink-soft: #6f8189;
  --label: #55666d;
  --floor-y: 82vh;           /* where the floor line sits */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* the name only: Marcellus in spaced Roman capitals (the artist's pick, option 09 in _fonts/).
     Separate from the serif used for titles. Preview alternatives with ?font=a|b|c|original */
  --name-font: "Marcellus", "Trajan Pro", var(--serif);
  --name-style: normal;
  --name-weight: 400;
  --name-size: clamp(20px, 2.1vw, 30px);
  --name-tracking: .18em;
  --name-transform: uppercase;
}
/* A — Fraunces, light italic: soft and hand-drawn, sits with the floral / sculpture work */
html[data-namefont="a"] { --name-font: "Fraunces", var(--serif); --name-style: italic; --name-weight: 300; --name-size: clamp(30px, 3.4vw, 50px); --name-tracking: -.005em; --name-transform: none; }
/* B — Bodoni Moda: sharp, high-contrast editorial serif */
html[data-namefont="b"] { --name-font: "Bodoni Moda", "Didot", var(--serif); --name-style: normal; --name-weight: 400; --name-size: clamp(28px, 3.1vw, 44px); --name-tracking: .02em; --name-transform: none; }
/* C — Jost, light, spaced small caps: modern gallery signage */
html[data-namefont="c"] { --name-font: "Jost", "Futura", var(--sans); --name-style: normal; --name-weight: 300; --name-size: clamp(20px, 2.1vw, 30px); --name-tracking: .28em; --name-transform: uppercase; }
/* original — Cormorant Garamond, as before */
html[data-namefont="original"] { --name-font: var(--serif); --name-style: normal; --name-weight: 300; --name-size: clamp(28px, 3.2vw, 46px); --name-tracking: .01em; --name-transform: none; }

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; background: var(--wall); color: var(--ink); }
body { font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---------- fixed chrome ---------- */
.chrome--left {
  position: fixed; left: clamp(28px, 4vw, 64px); top: clamp(56px, 12vh, 120px); z-index: 20;
  pointer-events: none;
}
.chrome--left > * { pointer-events: auto; position: relative; }
/* soft frosted pool behind the name/nav so works walking past stay behind a haze, not on top of the type */
.chrome--left::before {
  content: ""; position: absolute; inset: -56px -80px -56px -60px; z-index: -1;
  background: rgba(238, 240, 236, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: radial-gradient(ellipse at 40% 45%, #000 45%, transparent 95%);
          mask-image: radial-gradient(ellipse at 40% 45%, #000 45%, transparent 95%);
}
.name {
  display: block; font-family: var(--name-font); font-style: var(--name-style); font-weight: var(--name-weight); font-size: var(--name-size);
  letter-spacing: var(--name-tracking); text-transform: var(--name-transform); color: var(--ink); line-height: 1;
}
.nav { margin-top: clamp(28px, 5vh, 56px); display: flex; flex-direction: column; gap: 16px; border-left: 1px solid rgba(63,85,96,.28); padding-left: 16px; }
.nav a { font-size: 15.5px; letter-spacing: .04em; color: var(--ink-soft); transition: color .3s; position: relative; }
.nav a:hover, .nav a.is-active { color: var(--ink); }

.hint {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; animation: hintIn 1.2s 1.4s var(--ease) forwards; transition: opacity .6s;
}
.hint svg { animation: nudge 2.4s ease-in-out infinite; }
.hint.is-hidden { opacity: 0 !important; pointer-events: none; }
@keyframes hintIn { to { opacity: 1; } }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* floor plan indicator */
.plan {
  position: fixed; right: clamp(24px, 3vw, 48px); bottom: 30px; z-index: 20; height: 14px; width: clamp(120px, 14vw, 200px);
  display: flex; gap: 3px;
}
.plan__room { position: relative; height: 100%; border: 1px solid rgba(63,85,96,.35); }
.plan__room--work { flex: 0 0 66%; }
.plan__room--floral { flex: 1; }
.plan__room span { position: absolute; top: -16px; left: 0; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.plan__dot { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--ink); transition: left .12s linear; }

/* ---------- gallery: a 3D room ---------- */
.gallery {
  position: fixed; inset: 0; overflow: hidden; z-index: 1; background: var(--wall);
  perspective: 1300px; perspective-origin: 50% 52%;
}
/* the camera stands in the room, turned so the wall recedes to the right */
.camera {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(21deg) translateX(-4vw);
  transform-origin: 50% 50% 0;
}
.camera--flat { transform: none; }
.track { position: absolute; top: 0; left: 0; height: 100vh; will-change: transform; transform-style: preserve-3d; }
.floor {
  position: absolute; left: -120vw; width: 340vw; height: 2400px; transform-origin: top; transform: rotateX(90deg);
  background-color: color-mix(in srgb, var(--floor-floral) var(--mix, 0%), var(--floor));
  background-image: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.02) 18%, rgba(0,0,0,0) 40%, rgba(0,0,0,.06) 100%);
}
.floorseg { display: none; }

/* wall: tall so it still fills the frame where it recedes */
.wallseg { position: absolute; top: -120vh; height: calc(120vh + var(--floor-y)); background: var(--wall);
  background-image: radial-gradient(90% 50% at 50% 70%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); }
.wallseg--floral { background-color: var(--wall-floral); }
/* soft shadow line where wall meets floor */
.wallseg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6vh; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.07)); }

.floorseg { position: absolute; top: 0; height: 100%; background: var(--floor);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.02) 18%, rgba(0,0,0,0) 40%, rgba(0,0,0,.06) 100%); }
.floorseg--floral { background-color: var(--floor-floral); }

.corner {            /* seam between rooms */
  position: absolute; top: -120vh; height: calc(120vh + var(--floor-y)); width: 1px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.12));
}

.work { position: absolute; margin: 0; cursor: pointer; transform: translate3d(0, 0, var(--z, 0px)); transform-style: preserve-3d; }
.work__img { height: 100%; width: auto; user-select: none; -webkit-user-drag: none; transition: transform .55s var(--ease); transform-origin: 50% 50%; }
/* hover: the piece steps forward a touch so the click target reads clearly */
.work:hover .work__img { transform: scale(1.05); }
/* pieces standing on the floor / a plinth grow from their base (transform-origin set inline to the foot line) so they stay planted */
.work--floor .work__img, .work--plinth .work__img { transform-origin: 50% 100%; }
.work--floor:hover .work__img, .work--plinth:hover .work__img { transform: scale(1.045); }

/* AI gallery renders carry their own angle + shadow: no CSS shadows, no contact ellipse */
.work--render .work__img { filter: none !important; }
.work--render::after { display: none; }
.work--render.work--drawing .work__img { mix-blend-mode: normal; opacity: 1; }
.work--wall .work__img,
.work--floor .work__img,
.work--plinth .work__img,
.work--ceiling .work__img { filter: drop-shadow(var(--sx, 10px) var(--sy, 18px) 22px rgba(40,50,55,.28)); }
.work--drawing .work__img { mix-blend-mode: multiply; filter: none; opacity: .96; }

.work--floor .work__img { filter: drop-shadow(var(--sx, 8px) 10px 14px rgba(40,50,55,.32)); }
/* contact shadow on the floor (cut mode only; renders carry their own) */
.work--floor::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -1.2vh; height: 2.4vh; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(40,50,55,.28), rgba(40,50,55,0) 70%);
}
/* plinth: a real box — front face plus a lit side face, so it reads as 3D in the room */
.plinth {
  position: absolute; left: 50%; transform: translateX(-50%); width: 68%; height: 14vh; z-index: -1;
  background: linear-gradient(to bottom, #f4f5f2, #e9ebe7);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 18px 8px 28px -14px rgba(40,50,55,.28);
}
.plinth::before {    /* side face, receding to the right */
  content: ""; position: absolute; top: 0; left: 100%; width: 30px; height: 100%;
  background: linear-gradient(to right, #dcdfdb, #d3d6d2);
  transform-origin: left; transform: rotateY(-72deg);
}
.plinth::after {     /* top face */
  content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; height: 30px;
  background: #f8f9f7; transform-origin: bottom; transform: rotateX(78deg);
}

/* suspended pieces: a thin line from the ceiling down to the object (drawn behind it) */
.work--hang::before {
  content: ""; position: absolute; left: 50%; top: -140vh; height: calc(140vh + var(--hang-to, 0%)); width: 1px; z-index: -1;
  background: linear-gradient(to bottom, rgba(63,85,96,0), rgba(63,85,96,.28) 30%, rgba(63,85,96,.4));
}
.work--hang .work__img, .work--hang.work--render .work__img { filter: drop-shadow(14px 28px 26px rgba(40,50,55,.22)) !important; }

/* label sits inside the figure (same depth as the piece, so it travels with it); cursor stays a pointer */
.label {
  position: absolute; width: max-content; max-width: 250px; font-size: 11.5px; line-height: 1.5; color: var(--label); letter-spacing: .01em;
  opacity: .92; transform: translateZ(0);
}
.label__title { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); line-height: 1.25; margin-bottom: 3px; }
.label__meta { font-weight: 300; }
.label::before { content: ""; position: absolute; left: 0; top: -10px; width: 22px; height: 1px; background: rgba(63,85,96,.35); }

/* room title on the floral wall */
.roomtitle { position: absolute; top: 18vh; font-family: var(--serif); font-weight: 300; color: var(--ink); }
.roomtitle h2 { margin: 0 0 12px; font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; }
.roomtitle p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--label); max-width: 300px; }

.endnote { position: absolute; top: 40vh; font-family: var(--serif); font-size: 15px; color: var(--ink-soft); font-style: italic; display: flex; flex-direction: column; gap: 18px; transform: translateZ(6px); }
.endnote a { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid rgba(63,85,96,.3); padding-bottom: 3px; width: max-content; }
.endnote a:hover { color: var(--ink); }

/* native scroll spacer */
.spacer { width: 1px; height: 300vh; visibility: hidden; }

/* ---------- overlay / sheet ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; }
.overlay[hidden] { display: none; }
.overlay__scrim { position: absolute; inset: 0; background: rgba(232,236,232,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s; }
.overlay.is-open .overlay__scrim { opacity: 1; }
.sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 92vw); background: #f4f5f2; color: var(--ink);
  overflow-y: auto; transform: translateX(40px); opacity: 0; transition: transform .7s var(--ease), opacity .5s;
  box-shadow: -30px 0 60px -30px rgba(40,50,55,.25);
}
.overlay.is-open .sheet { transform: none; opacity: 1; }
.sheet__close { position: sticky; top: 22px; float: right; margin-right: 26px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; padding: 6px; z-index: 2; }
.sheet__close:hover { color: var(--ink); }
.sheet__inner { padding: clamp(48px, 9vh, 96px) clamp(28px, 6vw, 72px) 96px; }
.sheet h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; margin: 0 0 10px; }
.sheet .meta { font-size: 12.5px; letter-spacing: .02em; color: var(--label); margin-bottom: 40px; }
.sheet .portrait { margin: 28px 0 40px; width: min(320px, 60%); }
.sheet .portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; display: block; }
.sheet .statement { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: #33454d; max-width: 560px; margin: 0 0 64px; }
.sheet .statement p { margin: 0 0 1.2em; }
.sheet .photos { display: grid; gap: 32px; }
.sheet .photos figure { position: relative; margin: 0; cursor: zoom-in; }
.sheet .photos img { width: 100%; height: auto; display: block; }
/* magnifier badge: appears in the photo's corner on hover to say "this opens larger" */
.sheet .photos figure::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(244,245,242,.88) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%233f5560' stroke-width='1.2' stroke-linecap='round'><circle cx='6.5' cy='6.5' r='4.5'/><path d='M10 10l4 4M6.5 4.5v4M4.5 6.5h4'/></svg>") center / 16px no-repeat;
  box-shadow: 0 2px 10px rgba(40,50,55,.18); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); pointer-events: none;
}
.sheet .photos figure:hover::after { opacity: 1; transform: none; }
@media (hover: none) { .sheet .photos figure::after { opacity: .9; transform: none; } }   /* touch: always show the badge */
.sheet .photos figcaption { font-size: 11px; color: var(--ink-soft); margin-top: 8px; letter-spacing: .04em; }
.sheet .contact a { display: block; font-family: var(--serif); font-size: 26px; margin: 6px 0; }
.sheet .note { font-size: 12px; color: var(--ink-soft); margin-top: 24px; }

/* ---------- photo lightbox (zoom + pan) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(28,34,37,.94); opacity: 0; transition: opacity .35s; touch-action: none; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage { position: absolute; inset: 0; overflow: hidden; cursor: zoom-in; }
.lightbox__stage.is-zoomed { cursor: grab; }
.lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox__stage img {
  position: absolute; left: 50%; top: 50%; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); width: auto; height: auto;
  transform-origin: center; user-select: none; -webkit-user-drag: none; will-change: transform;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lightbox__stage.is-animating img { transition: transform .35s var(--ease); }
.lightbox__close { position: absolute; top: 22px; right: 26px; z-index: 2; background: none; border: 0; color: rgba(244,245,242,.85); cursor: pointer; padding: 8px; }
.lightbox__close:hover { color: #fff; }
.lightbox__hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,245,242,.6); pointer-events: none; transition: opacity .6s; white-space: nowrap;
}
.lightbox.is-quiet .lightbox__hint { opacity: 0; }
@media (max-width: 820px) { .lightbox__hint { display: none; } }

/* ---------- cursor (desktop only) ---------- */
@media (hover:hover) and (pointer:fine) {
  .cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
            border: 1px solid var(--ink); background: rgba(232,236,232,.4); transition: transform .35s var(--ease), background .35s; }
  .cursor.is-hover { transform: scale(2.4); background: rgba(232,236,232,.0); }
  .cursor.is-hidden { opacity: 0; }
}
@media not ((hover:hover) and (pointer:fine)) { .cursor { display: none; } }

/* ---------- mobile: fall back to a vertical wall ---------- */
@media (max-width: 820px) {
  .gallery, .spacer, .plan, .hint { display: none; }
  /* compact bar that stays pinned to the top while the stack scrolls */
  .chrome--left {
    position: sticky; top: 0; left: auto; z-index: 30; pointer-events: auto;
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
    padding: 14px 24px 12px; background: rgba(232,236,232,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(63,85,96,.10);
  }
  .chrome--left::before { display: none; }
  .name { font-size: 22px; }
  .nav { flex-direction: row; border-left: 0; padding-left: 0; gap: 18px; margin-top: 0; }
  .mobile { padding: 0; display: flex; flex-direction: column; }
  .mobile__room { display: flex; flex-direction: column; gap: 64px; padding: 40px 24px 80px; }
  .mobile__room--floral { background: var(--wall-floral); padding-top: 64px; }   /* the floral room's warmer wall, as on desktop */
  .mobile .work { position: static; margin: 0; }
  /* fit each piece inside a box: wide pieces fill 82% of the width, tall pieces are capped so nothing runs longer than ~60% of the screen */
  .mobile .work__img { width: auto; height: auto; max-width: 82%; max-height: 60vh; margin: 0 auto; filter: drop-shadow(6px 10px 14px rgba(40,50,55,.25)); }
  .mobile .work--drawing .work__img { max-width: 100%; }
  .mobile .work[data-slug="whisper"] .work__img { max-height: 44vh; }   /* Whisper of Youth is tall and wide — cap it tighter so it sits with the rest */
  .mobile .work[data-slug="untitled2"] .work__img { max-width: 58%; }   /* the tall oil-on-wood panel reads too large at full width */
  .mobile .work--hang::before { display: none; }     /* no ceiling line in the stacked layout — it would run over the pieces above */
  .mobile .work--floor::after { display: none; }     /* no floor contact-shadow either: in the stack it lands under the caption */
  .mobile .work--hang .work__img { filter: drop-shadow(6px 10px 14px rgba(40,50,55,.25)) !important; }
  .mobile .label { position: static; margin: 16px auto 0; width: 82%; max-width: none; }
  .mobile .label::before { display: none; }
  .mobile .roomtitle { position: static; margin: 40px auto 0; width: 82%; }
  .sheet { width: 100vw; }
}
@media (min-width: 821px) { .mobile { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hint svg { animation: none; }
  .work__img, .sheet, .overlay__scrim { transition: none; }
}