/* ============================================================
   SHAVANA SMILEY — PORTFOLIO
   Typography: Fraunces (display) / Inter (body)
   Palette: off-white paper, near-black ink, cosmic blue accent
   ============================================================ */

:root {
  --paper: #faf9f5;        /* main background */
  --paper-tint: #f1efe8;   /* Works on Paper background */
  --archive-bg: #dbdee2;   /* Archive muted background — "cool fog" */
  --ink: #141414;
  --ink-soft: #5c5a55;
  --accent: #2440d4;       /* cosmic blue — nav states, hovers, small marks only */
  --serif: "Fraunces", Georgia, serif;               /* name, headers */
  --serif-title: "Cormorant Garamond", Georgia, serif; /* artwork titles */
  --sans: "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --margin: clamp(1.25rem, 5vw, 5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- Scroll-reveal (JS adds .is-visible) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--margin);
  mix-blend-mode: normal;
  transition: background .4s ease, box-shadow .4s ease;
}
.nav.is-scrolled { background: rgba(250, 249, 245, .92); backdrop-filter: blur(8px); }
.nav__wordmark {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  letter-spacing: .02em;
}
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a {
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--accent); border-color: var(--accent); }
.nav__toggle { display: none; }

/* ============================================================
   SECTION 1 · HERO — three layout options (body.hero-a/b/c).
   Artwork is never cropped: object-fit: contain inside .hero__stage.
   ============================================================ */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #0c0c0c; }
.hero__stage { position: absolute; inset: 0; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;               /* full-bleed — edges crop by design */
  opacity: 0; transition: opacity 2.4s ease;
}
.hero__img.is-active { opacity: 1; }
.hero__mark {
  font-family: var(--serif); font-weight: 300;
  line-height: .95; letter-spacing: -.01em; color: var(--ink);
}
.hero__scroll {
  position: absolute; right: var(--margin); bottom: 5vh; z-index: 5;
  color: var(--ink); font-size: 1.3rem;
  animation: drift 2.6s ease-in-out infinite;
}
@keyframes drift { 50% { transform: translateY(8px); } }

/* Nav sits in white over the full-bleed hero until scrolled past it */
body:not(.subpage) .nav:not(.is-scrolled) { color: #fff; }
body:not(.subpage) .nav:not(.is-scrolled) .nav__links a:hover { color: #fff; border-color: #fff; }
.hero__scroll { color: #fff; }

/* ============================================================
   SHARED SECTION CHROME
   ============================================================ */
.section { padding: clamp(5rem, 12vh, 9rem) var(--margin); }
/* anchor jumps land below the fixed nav, not underneath it */
section[id] { scroll-margin-top: 4.5rem; }
.section__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 5.8vw, 4.9rem);
  line-height: 1; letter-spacing: -.01em;
  margin-bottom: clamp(3rem, 7vh, 5.5rem);
}

/* ---------- Artwork figure + hover caption ---------- */
.work { position: relative; cursor: pointer; }
.work img { width: 100%; transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.work:hover img { transform: scale(1.015); }
/* No hover veil — artwork stays at full color on hover. The caption
   carries its own gradient (below) so its text remains legible. */
.work .work__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1rem 1.1rem;
  color: #fff; font-size: .78rem; letter-spacing: .03em; line-height: 1.5;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  pointer-events: none;
}
.work:hover .work__caption { opacity: 1; transform: none; }
.work__caption em { font-family: var(--serif-title); font-weight: 600; font-style: italic; font-size: 1.05rem; display: block; }

/* Recent Works: image wrapper so the hover caption stops at the
   image edge, not the label below */
.work__media { position: relative; }

/* Permanent label under Recent Works: title + year only.
   Medium/dimensions appear on hover and in the lightbox. */
.work__label {
  padding-top: .6rem; font-size: .78rem; color: var(--ink-soft);
  letter-spacing: .02em;
}
.work__label em { font-family: var(--serif-title); font-weight: 600; font-style: italic; color: var(--ink); font-size: 1.05rem; }

/* ============================================================
   SECTION 2 · RECENT WORKS — asymmetric single-column flow.
   TRUE-TO-SCALE: --rw (real width, inches) set inline per figure.
   1 in ≈ 1% of container width; floored at 14% so small works
   remain legible, capped at 100%.
   ============================================================ */
/* Dense flow: works wrap into shared rows when they fit side by side
   (Koons-style density), with tighter vertical rhythm. Auto margins
   keep the placement organic — no overlap possible. */
.works__flow {
  display: flex; flex-flow: row wrap; align-items: flex-end;
  gap: clamp(3rem, 7vh, 5.5rem) 4%;
}
/* Compressed scale: big works still dominate, small works stay present.
   ~9in → 36%, ~20in → 44%, ~60in → 71%, ~100in → 100% */
.works__flow .work { width: clamp(40%, calc(28% + var(--rw, 60) * 0.72%), 100%); }
.work--left   { margin-right: auto; }
.work--right  { margin-left: auto; }
.work--center { margin-inline: auto; }

/* ============================================================
   SECTION 3 · WORKS ON PAPER — single horizontal scroll strip
   ============================================================ */
.paper { background: var(--paper-tint); overflow: hidden; }
.paper__hint { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: -2.2rem 0 2.2rem; }
.paper__scroll {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0 var(--margin) 1.5rem;
  margin: 0 calc(-1 * var(--margin));   /* strip bleeds to viewport edges */
  scrollbar-width: thin; scrollbar-color: var(--ink-soft) transparent;
}
.paper__scroll .work {
  flex: 0 0 auto; scroll-snap-align: center;
  /* figure width comes from the image alone (min-content resolves via
     the image's aspect ratio); captions wrap within it, so long
     details run to extra lines and can never skew the gaps */
  width: min-content;
}
/* Uniform strip height — one clean line of sheets */
.paper__scroll .work img { height: min(46vh, 430px); width: auto; max-width: none; }
.paper__scroll .work .work__caption {
  position: static; opacity: 1; transform: none;
  background: none; color: var(--ink-soft);
  padding: .8rem 0 0; font-size: .72rem;
  /* caption wraps to exactly the image's width; long details
     simply run to extra lines beneath */
  width: 0; min-width: 100%;
}
.paper__scroll .work .work__caption em { color: var(--ink); font-size: 1rem; }

/* ============================================================
   SUBPAGES (archive.html / shop.html) — no hero; solid nav,
   top padding to clear it, and a quiet footer.
   ============================================================ */
.subpage { background: var(--paper); }
.subpage .section { padding-top: clamp(7rem, 16vh, 11rem); min-height: 100vh; }
.subpage .nav { background: rgba(250, 249, 245, .92); backdrop-filter: blur(8px); }
.subpage__footer {
  margin-top: clamp(4rem, 10vh, 7rem);
  padding-top: 2rem; border-top: 1px solid rgba(20,20,20,.12);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-soft);
}
.subpage__footer a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.subpage__footer a:hover { color: var(--accent); }

/* ============================================================
   404 PAGE
   ============================================================ */
.notfound {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
}
.notfound__code {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(4rem, 14vw, 10rem); line-height: 1;
  color: var(--ink); letter-spacing: -.02em;
}
.notfound__title {
  font-family: var(--serif-title); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.25;
  margin: 1.2rem 0 .8rem; max-width: 20ch;
}
.notfound__text { font-size: .9rem; color: var(--ink-soft); max-width: 42ch; }
.notfound__link {
  display: inline-block; margin-top: 2.5rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.notfound__link:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   ARCHIVE — archival treatment (own page)
   ============================================================ */
.archive { background: var(--archive-bg); }
.subpage .archive { background: var(--archive-bg); }
.section__title--archive { font-size: clamp(1.8rem, 4vw, 3.2rem); color: var(--ink-soft); }
.archive__note { max-width: 46ch; font-size: .8rem; color: var(--ink-soft); margin: -2rem 0 3.5rem; }
.archive__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
/* Feature works (Installation view, Portal, Neutron Star, Spacetime
   Wormhole) run twice as large and are dispersed through the grid
   (not grouped together) via their placement order below. */
.archive__grid .work--wide { grid-column: span 2; }
.archive__grid .work img { transition: transform .8s cubic-bezier(.2,.6,.2,1); }

/* ============================================================
   SECTION 5 · SHOP
   ============================================================ */
.shop__note { font-size: .85rem; color: var(--ink-soft); margin: -2.2rem 0 3.5rem; }
.shop__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.5vw, 3.5rem);
}
.product__img { background: var(--paper-tint); padding: 1.4rem; }
.product__img img { aspect-ratio: 4 / 5; object-fit: contain; width: 100%; }
.product__img { cursor: pointer; }
.product__img:hover img { transform: scale(1.015); }
.product__img img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.product__meta { padding-top: 1rem; font-size: .8rem; color: var(--ink-soft); }
.product__meta h3 { font-family: var(--serif-title); font-weight: 600; font-style: italic; font-size: 1.25rem; color: var(--ink); }
.product__price { display: block; margin: .5rem 0 .8rem; color: var(--ink); }
.product__cta {
  display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink);
  padding-bottom: 2px; transition: color .25s, border-color .25s;
}
.product__cta:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   SECTION 6 · BIO / CV
   ============================================================ */
.bio__grid {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.bio__portrait { position: sticky; top: 6rem; }
.bio__portrait figcaption { font-size: .72rem; color: var(--ink-soft); padding-top: .7rem; letter-spacing: .04em; }
.bio__lede { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 300; line-height: 1.35; margin-bottom: 1.6rem; }
.bio__text p { margin-bottom: 1.2rem; max-width: 62ch; }
.ph { color: var(--ink-soft); } /* placeholder-copy styling — remove class when real copy goes in */

/* Artist statement */
.statement { margin-top: 3rem; padding: 1.8rem 0; border-top: 1px solid rgba(20,20,20,.15); }
.statement h3 {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 1rem;
}
.statement p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; max-width: 58ch; }

.cv { margin-top: 3.5rem; }
.cv__block { margin-bottom: 2.4rem; }
.cv__block h3 {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 1rem; color: var(--ink);
}
.cv__block ul { list-style: none; }
.cv__block li {
  position: relative; padding: .45rem 0 .45rem 5.5rem;
  font-size: .88rem;
  border-bottom: 1px solid rgba(20,20,20,.08);
}
.cv__block li span { position: absolute; left: 0; color: var(--ink-soft); }
.cv__block li em { font-family: var(--serif-title); font-weight: 500; font-style: italic; font-size: 1rem; }
.cv__full {
  display: inline-block; margin-top: 1.2rem;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color .25s, border-color .25s;
}
.cv__full:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   SECTION 7 · CONTACT
   ============================================================ */
.contact { background: var(--ink); color: var(--paper); }
.contact .section__title { color: var(--paper); }
.contact__inner { max-width: 560px; }
.contact__email {
  font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--paper); transition: color .25s, border-color .25s;
}
.contact__email:hover { color: #8fa0ff; border-color: #8fa0ff; }
.contact__city { margin: 1.4rem 0 .6rem; font-size: .85rem; color: rgba(250,249,245,.65); }
.contact__social { display: flex; gap: 1.5rem; margin-bottom: 3rem; }
.contact__social a {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(250,249,245,.4); padding-bottom: 2px;
}
.contact__social a:hover { border-color: var(--paper); }
.contact__form { display: flex; flex-direction: column; gap: 1rem; }
.contact__form input, .contact__form textarea {
  background: transparent; border: none; border-bottom: 1px solid rgba(250,249,245,.35);
  color: var(--paper); font-family: var(--sans); font-size: .9rem; padding: .6rem 0;
  resize: vertical;
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--paper); }
.contact__form button {
  align-self: flex-start; margin-top: .5rem;
  background: none; border: 1px solid var(--paper); color: var(--paper);
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .7rem 2.2rem; cursor: pointer; transition: background .3s, color .3s;
}
.contact__form button:hover { background: var(--paper); color: var(--ink); }
.contact__copyright { margin-top: 4rem; font-size: .7rem; color: rgba(250,249,245,.45); }

/* Newsletter signup */
.newsletter { margin-bottom: 3rem; padding: 1.8rem 0; border-top: 1px solid rgba(250,249,245,.18); border-bottom: 1px solid rgba(250,249,245,.18); }
.newsletter h3 { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: .6rem; }
.newsletter p { font-size: .85rem; color: rgba(250,249,245,.65); margin-bottom: 1.2rem; }
.newsletter__form { display: flex; gap: .8rem; }
.newsletter__form input {
  flex: 1; background: transparent; border: none; border-bottom: 1px solid rgba(250,249,245,.35);
  color: var(--paper); font-family: var(--sans); font-size: .9rem; padding: .6rem 0;
}
.newsletter__form input:focus { outline: none; border-color: var(--paper); }
.newsletter__form button {
  background: none; border: 1px solid var(--paper); color: var(--paper);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .6rem 1.6rem; cursor: pointer; transition: background .3s, color .3s;
}
.newsletter__form button:hover { background: var(--paper); color: var(--ink); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox[hidden] { display: none; }
/* Grid places the arrows immediately beside the artwork —
   [prev] [image] [next] — with the caption spanning underneath. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,12,12,.96);
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  grid-template-rows: auto auto;
  align-content: center; justify-content: center; align-items: center;
  column-gap: clamp(.3rem, 1.1vw, 1.1rem);
  padding: 5vh 1.2vw 7vh;
}
.lightbox__img {
  grid-column: 2; grid-row: 1;
  max-height: 84vh; max-width: 100%; width: auto; justify-self: center;
}
.lightbox__caption {
  grid-column: 1 / -1; grid-row: 2;
  color: #fff; font-size: .8rem; padding-top: 1.2rem; text-align: center; letter-spacing: .03em;
}
.lightbox__caption em { font-family: var(--serif-title); font-weight: 600; font-size: 1.2rem; }
.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.6rem;
  background: none; border: none; color: #fff; font-size: 2.2rem; cursor: pointer;
  z-index: 2;
}

/* Prev / next — sit directly to the left and right of the artwork */
.lightbox__nav {
  grid-row: 1;
  background: none; border: none; cursor: pointer;
  color: #f4f2ec;
  font-size: 1.4rem; line-height: 1;
  padding: 1rem .55rem;
  transition: color .25s, opacity .25s;
  opacity: .8;
}
.lightbox__nav:hover { color: #fff; opacity: 1; }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__counter {
  position: absolute; bottom: 1.4rem; left: 0; right: 0;
  text-align: center; pointer-events: none;
  font-size: .7rem; letter-spacing: .16em;
  color: rgba(255,255,255,.5);
}

@media (max-width: 640px) {
  .lightbox { column-gap: .15rem; padding: 5vh .5vw 7vh; }
  .lightbox__nav { font-size: 1.15rem; padding: .9rem .25rem; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .shop__grid { grid-template-columns: repeat(2, 1fr); }
  .archive__grid { grid-template-columns: repeat(3, 1fr); }
  .bio__grid { grid-template-columns: 1fr; }
  .bio__portrait { position: static; max-width: 420px; }
}

@media (max-width: 640px) {
  /* Mobile: single-column, image-forward */
  .nav__toggle {
    display: flex; flex-direction: column; gap: 6px;
    background: none; border: none; cursor: pointer; z-index: 120;
  }
  .nav__toggle span { width: 26px; height: 1.5px; background: currentColor; transition: transform .3s, opacity .3s; }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav__links {
    position: fixed; inset: 0; z-index: 110;
    height: 100dvh;
    background: var(--paper); color: var(--ink);
    flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 0 var(--margin); gap: 1.6rem;
    transform: translateX(100%); transition: transform .45s cubic-bezier(.7,0,.3,1);
  }
  .nav.is-open .nav__links { transform: none; }
  /* backdrop-filter on the scrolled nav makes it the containing block
     for fixed children, trapping the menu inside the bar — drop it
     while the menu is open so the panel truly covers the viewport */
  .nav.is-open { color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .nav__links a { font-size: 1.1rem; }

  /* Mobile: keep relative scale but raise the floor so small works stay visible */
  .works__flow .work { width: clamp(58%, calc(40% + var(--rw, 60) * 0.6%), 100%); }
  /* Touch screens: hide the hover overlay entirely — details appear
     in the lightbox when the artwork is tapped. (Works on Paper keeps
     its static caption below each sheet; the permanent title+year
     labels under Recent Works also remain.) */
  .work__media .work__caption, .archive__grid .work .work__caption { display: none; }
  /* Phone: the strip was tall enough to fill most of the screen, so
     vertical swipes kept landing on the horizontal scroller and the
     page underneath never moved. Shorter sheets leave page above and
     below to grab, and dropping the snap stops diagonal swipes from
     being pulled sideways. */
  .paper__scroll { scroll-snap-type: none; }
  .paper__scroll .work { scroll-snap-align: none; }
  .paper__scroll .work img { height: 32vh; }
  .archive__grid { grid-template-columns: 1fr 1fr; }
  .shop__grid { grid-template-columns: 1fr; }
  /* Phone: dimensions + year drop to their own line under the medium */
  .product__sep { display: none; }
  .product__dims { display: block; margin-top: .25rem; }
  .hero__scroll { bottom: 3vh; }
  .newsletter__form { flex-direction: column; }
}