/* =========================================================================
   Ann Wong — portfolio stylesheet
   Design language modeled on owengent.com (editorial): pure white field,
   Cabin small-caps navigation, centered hand-drawn signature as the logo,
   quiet gray secondary text. Gallery keeps the row-major masonry engine
   (gallery.js is shared with Josie's site and stays byte-identical — all
   Ann-specific looks, including the hover bloom, live here in CSS).
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  --bg: #ffffff;            /* pure white, like the reference */
  --ink: #262626;           /* primary text (titles, active nav) */
  --soft: #7a7a7a;          /* secondary text / resting nav */
  --faint: #b9b9b9;         /* hairlines */
  --line: #f0efed;          /* image placeholder while loading */
  --gap: 18px;
  --maxcol: 3;
  --font: 'Cabin', 'Helvetica Neue', Arial, sans-serif;
  --track: .1em;            /* the reference letter-spacing (1.45px @ 14.5px) */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--soft);
  font-family:var(--font);
  font-size:14.5px;
  letter-spacing:var(--track);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; letter-spacing:inherit; background:none; border:0; cursor:pointer; }

/* ---------- top header: centered signature + ONE nav row ---------- */
.topbar{
  text-align:center;
  padding:40px 20px 30px;
}
.sig{ display:inline-block; }
.sig img{
  width:min(220px, 56vw); height:auto; margin:0 auto;
  /* the signature is drawn on near-white paper; multiply melts that
     background into the page so it never shows as a pasted-on square */
  mix-blend-mode:multiply;
}

/* One row holds the categories, About and the Instagram icon. `display:contents`
   on the two inner <nav>s lifts their links into this flex row, so everything
   shares one set of gaps and wraps as a single list — while the .filters node
   stays a real element for gallery.js to fill. */
.navrow{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:4px 4px; margin:20px auto 0; max-width:1080px;
}
.navrow .filters,
.navrow .nav{ display:contents; }

.filter,
.nav__link{
  font-size:14px; font-weight:400; letter-spacing:var(--track); text-transform:uppercase;
  color:var(--soft);
  padding:3px 10px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.filter:hover,
.nav__link:hover{ color:var(--ink); }
.filter.is-active,
.nav__link.is-active{ color:var(--ink); border-bottom-color:var(--ink); }
.filter.is-active::after{ content:none; }
.filters__sep{ display:none; }         /* the reference separates by space, not pipes */

.nav__link--ig{ display:inline-flex; align-items:center; padding:3px 8px; }
.nav__link .ig{ width:16px; height:16px; flex:0 0 auto; opacity:.85; position:relative; top:5px; }

/* legacy hamburger (unused in this layout) */
.hamburger{ display:none; }

/* ---------- main column ---------- */
.main{
  max-width:1560px;
  margin:0 auto;
  min-height:60vh;
  padding:0 clamp(18px,3.4vw,48px) 90px;
}

/* ---------- grid (ROW-MAJOR masonry via CSS-grid row spans) ----------
   Columns fill left-to-right (so a row here == a row in the Manage tool).
   gallery.js measures each card and sets grid-row: span N from its height,
   so images keep their natural aspect (never cropped) and shorter cards let
   the next row tuck up — the masonry look, but ordered across instead of down. */
.grid{
  display:grid;
  grid-template-columns:repeat(var(--maxcol), minmax(0,1fr));
  grid-auto-rows:6px;          /* tiny row unit; JS spans each card to its height */
  column-gap:var(--gap);
  row-gap:0;                   /* vertical gap is baked into the span math (gallery.js) */
  align-items:start;
}
.grid--single{ grid-template-columns:1fr; max-width:760px; margin:0 auto; }

.card{
  position:relative; display:block; margin:0;
  overflow:hidden; background:var(--line);
}
.card__img{
  width:100%; height:auto; display:block;
  opacity:0;                   /* fades in when loaded (.is-loaded, gallery.js) */
  transition:opacity .35s ease;
}
.card__img.is-loaded{ opacity:1; }

/* ---------- hover: white bloom ----------
   A soft circular haze of white grows from the CENTER of the piece — the
   art stays visible behind it — and the title surfaces in black over the
   haze. No zoom, no geometric shapes, no edge-in sweeps: just the bloom.
   Implemented by scaling a centered radial gradient (background-size 0% →
   oversize), so leaving the card lets the bloom retract into the center. */
.card__overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,
      rgba(255,255,255,.68) 0%,
      rgba(255,255,255,.66) 52%,
      rgba(255,255,255,.36) 68%,
      rgba(255,255,255,0) 78%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:0% 0%;
  transition:background-size .7s var(--ease);
}
.card:hover .card__overlay,
.card.is-active .card__overlay{ background-size:360% 360%; }
.card__facets{ display:none; }         /* retired: the old faceted-glass hover */
.card__arrow{ display:none; }          /* retired: the old corner arrow */
.card__title{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  text-align:center; padding:0 16px; line-height:1.45; overflow-wrap:break-word;
  font-size:14px; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  /* a faint white halo keeps the black title readable on darker art, now that
     the haze itself is lighter */
  color:#1b1b1b; text-shadow:0 0 14px rgba(255,255,255,.85), 0 0 5px rgba(255,255,255,.75);
  opacity:0;
  transition:opacity .45s var(--ease) .12s;   /* surfaces just after the bloom */
}
.card:hover .card__title,
.card.is-active .card__title{ opacity:1; transform:translateY(-50%); }
/* keep the image put — explicitly no motion on hover */
.card:hover .card__img,
.card.is-active .card__img{ transform:none; }

/* ---------- detail page: meta line on top, one large artwork ---------- */
.detail{ max-width:1560px; margin:0 auto; }
.detail__back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; letter-spacing:var(--track); text-transform:uppercase;
  color:var(--soft); margin-bottom:18px; transition:color .25s var(--ease);
}
.detail__back:hover{ color:var(--ink); }
.detail__meta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  column-gap:12px; row-gap:2px;
  text-align:center;
  margin:0 auto 24px; max-width:1100px;
}
.detail__title{
  display:inline; font-size:14.5px; font-weight:400; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ink); margin:0;
}
.detail__sep{ color:var(--faint); }
.detail__date{ font-size:14.5px; color:var(--soft); font-style:italic; }
.detail__text{ font-size:14.5px; color:var(--soft); margin:0; display:inline; }
.detail__media{ text-align:center; }
.detail__img{
  display:inline-block; max-width:100%; max-height:84vh; width:auto; margin:0 auto;
  box-shadow:none;
}
.detail__nav{
  display:flex; justify-content:space-between; gap:16px;
  margin:44px auto 0;
}
.detail__nav a{
  font-size:12.5px; letter-spacing:var(--track); text-transform:uppercase;
  color:var(--soft); transition:color .25s var(--ease);
}
.detail__nav a:hover{ color:var(--ink); }
.detail__nav span{ visibility:hidden; }

/* ---------- about page ---------- */
.about{ max-width:640px; margin:0 auto; text-align:center; }
.about__body{ color:var(--soft); font-size:14.5px; line-height:2; }
.about__body p{ margin:0 0 1.3em; }

/* ---------- responsive ---------- */
@media (max-width:1180px){ :root{ --maxcol:3; } }
@media (max-width:1024px){ :root{ --maxcol:2; } }
@media (max-width:900px){
  .topbar{ padding:30px 16px 24px; }
  .sig img{ width:min(190px, 52vw); }
  .navrow{ margin-top:16px; gap:2px 2px; }
  .filter, .nav__link{ font-size:13px; padding:3px 8px; }
}
@media (max-width:700px){
  :root{ --maxcol:1; }
  .filter, .nav__link{ font-size:12.5px; padding:3px 7px; }
  /* narrow screens: the row wraps, so keep About + the Instagram icon together as
     one unit (a bare icon stranded on its own line reads as a mistake) */
  .navrow .nav{ display:inline-flex; align-items:baseline; gap:0; }
  .grid{ max-width:520px; margin:0 auto; }
  .detail__meta{ flex-direction:column; align-items:center; row-gap:4px; }
  .detail__sep{ display:none; }
}