/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* dark surfaces */
  --bg:        #0e0e10;
  --bg-2:      #15151a;
  --surface:   #1a1a20;
  --surface-2: #20202a;
  --border:    #2a2a35;

  /* text on dark */
  --text:      #f1ece2;
  --text-dim:  #a8a39a;
  --text-mute: #6f6a62;

  /* light surfaces */
  --light-bg:        #f3ede1;   /* warm off-white that complements gold */
  --light-bg-2:      #ffffff;
  --light-border:    rgba(20,18,12,0.10);
  --light-text:      #1a1812;
  --light-text-dim:  #4d473b;
  --light-text-mute: #8a8478;

  /* palette accents (used everywhere, not just hero blobs) */
  --gold:    #e9b46c;
  --coral:   #d97a5b;
  --violet:  #7c5cff;
  --teal:    #57d68d;

  /* radii / shadows / layout */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 12px 40px rgba(0,0,0,.45);
  --shadow-light: 0 12px 40px rgba(20,18,12,.12);

  --container: 1200px;
  --space-section: 96px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--coral); }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--space-section) 0; }
.section-dark { background: var(--bg); color: var(--text); }
.section-light { background: var(--light-bg); color: var(--light-text); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--gold); color: #1a1a20; padding: 8px 12px; border-radius: 8px; z-index: 100; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 500; }
h1 em { font-style: italic; color: var(--gold); }
h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1em; color: var(--text-dim); }
.lede { font-size: 1.13rem; color: var(--text); max-width: 56ch; }

.section-light p { color: var(--light-text-dim); }
.section-light h2, .section-light h3, .section-light h4 { color: var(--light-text); }
.section-light a { color: var(--coral); }
.section-light a:hover { color: var(--violet); }

/* utility color classes */
.accent-violet { color: var(--violet); font-weight: 600; }
.accent-coral  { color: var(--coral);  font-weight: 600; }
.accent-gold   { color: var(--gold);   font-weight: 600; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--text-dim);
  margin: 0 0 1.2rem;
  font-weight: 500;
}
.section-sub { color: var(--text-dim); max-width: 56ch; margin-top: .25em; }
.section-light .section-sub { color: var(--light-text-dim); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              background .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--gold); color: #1a1a20; }
.btn-primary:hover { background: var(--coral); color: #1a1a20; box-shadow: 0 10px 28px rgba(217,122,91,.35); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--violet); color: var(--violet); }

/* ============================================================
   Hero + About combined zone (sticky photo rail)
   ============================================================ */
.hero-about-zone { position: relative; }

/* Hero — exactly one viewport tall */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.hero .hero-wrap { width: 100%; }
.aurora {
  position: absolute; inset: -120px -40px -40px -40px;
  pointer-events: none; z-index: 0;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.aurora .blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora .blob-1 { width: 520px; height: 520px; left: -80px; top: -60px;   background: radial-gradient(circle, var(--gold),  transparent 60%); animation: drift1 22s ease-in-out infinite alternate; }
.aurora .blob-2 { width: 460px; height: 460px; right:-60px; top: 80px;    background: radial-gradient(circle, var(--coral), transparent 60%); animation: drift2 28s ease-in-out infinite alternate; }
.aurora .blob-3 { width: 380px; height: 380px; left: 40%;  top: 320px;    background: radial-gradient(circle, var(--violet),transparent 60%); animation: drift3 26s ease-in-out infinite alternate; opacity: .7; }
.hero-wrap { position: relative; z-index: 1; }

@keyframes drift1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(80px, 60px) scale(1.08); } }
@keyframes drift2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-60px, 40px) scale(1.12); } }
@keyframes drift3 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px,-50px) scale(1.06); } }

.hero-text { max-width: 600px; }

.meta-row {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 8px;
  color: var(--text); font-size: .95rem;
}
.meta-row li { display: flex; align-items: baseline; gap: 14px; }
.meta-label {
  font-family: 'Inter', sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700;
  min-width: 78px;
}
.label-coral  { color: var(--coral); }
.label-violet { color: var(--violet); }
.label-gold   { color: var(--gold); }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero headline — gradient text mask, reduced size, word-by-word reveal */
.hero-headline {
  /* slightly smaller than the global h1 step */
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.18;
  margin-top: 12px;
  margin-bottom: 24px;
  padding-bottom: 0.05em;
}
.hero-headline em { font-style: italic; }
.hero-headline .word {
  display: inline-block;
  vertical-align: bottom;
  padding-right: .12em;
  /* clip-path masks the top (so the slide-up is hidden) but extends below for descenders */
  clip-path: inset(-0.05em -0.2em -0.35em -0.05em);
}
.hero-headline .word-inner {
  display: inline-block;
  padding-bottom: 0.15em;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s ease;

  /* Gradient text fill, replicating the warm cream → gold → coral mood
     from the original site. Applied per word-inner so the gradient survives
     the transform stacking context that the slide-up animation creates. */
  background: linear-gradient(180deg, #f5e4c0 0%, #e9b46c 45%, #d97a5b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-headline.split-in .word-inner { transform: translateY(0); opacity: 1; }

/* About — sized to mirror the hero (100vh). Vertically centers content via
   flex so the section reads cleanly at viewport height. */
.about {
  position: relative;
  min-height: 100vh;
  padding: 96px 0 120px;
  display: flex;
  align-items: center;
}
.about-wrap { position: relative; z-index: 1; width: 100%; }
.about-content { max-width: 600px; }
.about-content p { font-size: 1.02rem; }
.about-content strong { font-weight: 600; }
.section-light .about-content p { color: var(--light-text-dim); }
.section-light .about-content em { color: var(--coral); font-style: italic; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pill {
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              background .2s ease, color .2s ease, border-color .2s ease;
}
.pill:hover { transform: translateY(-2px); }
.section-light .pill {
  background: var(--light-bg-2);
  border-color: var(--light-border);
  color: var(--light-text);
}
.pill-coral  { color: var(--coral);  border-color: rgba(217,122,91,.35); }
.pill-violet { color: var(--violet); border-color: rgba(124,92,255,.35); }
.pill-gold   { color: #b88142;       border-color: rgba(233,180,108,.45); }
.section-light .pill-coral { background: rgba(217,122,91,.08); }
.section-light .pill-violet { background: rgba(124,92,255,.08); }
.section-light .pill-gold { background: rgba(233,180,108,.12); }

/* === The portrait that travels from hero into about ===
   Rail spans the full hero+about zone (top:0 to bottom:0) so the sticky
   photo stays centered through the entire second section. The previous
   100px bottom buffer caused the photo to unstick before reaching center
   on short laptop viewports. The about section is min-height: 100vh and
   the photo is centered, so there's natural clearance from about's edges. */
.photo-rail {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  pointer-events: none;
  z-index: 5;
}
.photo-rail-inner {
  position: sticky;
  /* Sticky engages from scroll=0 because the natural top of the rail (= top
     of the hero) is above this offset. The photo therefore lives at this
     fixed viewport-y on first load AND while scrolling — and since both the
     hero and the about each fill roughly one viewport, that y is also the
     vertical center of whichever section is currently in view.

     `--photo-half` is set by JS (inherited from :root) so the centering
     adapts when the rail clamps the photo at narrower viewport widths.
     The fallback 331px = ½ of the max photo height (530 × 5/4 = 662.5). */
  top: max(40px, calc(50vh - var(--photo-half, 331px)));
  display: flex;
  justify-content: center;
  padding: 0 24px 80px;
}

/* Outer card: dark rounded rectangle backdrop (matches the original site).
   `max-height` caps the photo at 80% of viewport so it always has visible
   top/bottom margin, even on shorter laptop screens. */
.hero-photo {
  pointer-events: auto;
  width: 100%;
  max-width: 530px; /* +15% from previous 460px */
  max-height: 80vh;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #1c1c24 0%, #131318 100%);
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  padding: 28px;
  position: relative;
  overflow: hidden;
}

/* The image carries its own silhouette via PNG transparency, so this
   wrapper is just a layout container — no shape, no background. */
.hero-photo-mask {
  width: 100%;
  height: 100%;
  display: grid; place-items: center;
  position: relative;
}
/* The PNG carries its own silhouette via transparency — `contain` preserves
   the whole shape without cropping; nothing else needed. */
.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   Section heads
   ============================================================ */
.section-head { margin-bottom: 48px; max-width: 720px; }
.section-head h2 { margin-bottom: 14px; }

/* ============================================================
   Two-column generic
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
}

/* ============================================================
   Work
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.work-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease, background .25s ease, box-shadow .35s ease;
}
.work-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  background: var(--surface-2);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.work-card.featured {
  grid-column: span 3;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 28px; align-items: center;
}
.work-card.featured .work-thumb { aspect-ratio: 16 / 10; margin-bottom: 0; }

.work-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  margin-bottom: 16px;
  display: grid; place-items: center;
  color: rgba(255,255,255,.55);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.work-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.work-card:hover .work-thumb { transform: scale(1.04); filter: saturate(1.15) brightness(1.05); }

.thumb-1 { background: linear-gradient(135deg, var(--violet), #1f3a8a); }
.thumb-2 { background: linear-gradient(135deg, var(--coral), var(--gold)); }
.thumb-3 { background: linear-gradient(135deg, var(--teal), #1f8a7d); }
.thumb-4 { background: linear-gradient(135deg, var(--violet), var(--coral)); }

.work-meta { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tag {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-mute);
  font-weight: 600;
}
.tag-coral  { color: var(--coral);  border-color: rgba(217,122,91,.45); }
.tag-violet { color: var(--violet); border-color: rgba(124,92,255,.45); }
.tag-gold   { color: var(--gold);   border-color: rgba(233,180,108,.45); }

.work-card h3 { color: var(--text); margin-bottom: 8px; }
.work-card p { color: var(--text-dim); font-size: .95rem; margin-bottom: 14px; }

.link-arrow {
  color: var(--gold);
  font-weight: 600; font-size: .9rem;
  display: inline-block;
  transition: transform .25s ease, color .2s ease;
}
.link-arrow:hover { transform: translateX(4px); color: var(--coral); }

.btn-reset {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.work-cta { display: flex; gap: 12px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }

/* ============================================================
   Playground (light)
   ============================================================ */
.playground-grid {
  display: grid;
  /* 4 cards → 2 columns × 2 rows */
  grid-template-columns: repeat(2, 1fr);
  /* row gap > max parallax travel (~±20px) so adjacent rows never overlap
     when cards drift; column gap stays tight for a denser visual rhythm */
  gap: 56px 32px;
}
.play-card {
  background: var(--light-bg-2);
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--light-text);
  display: block;

  /* Parallax via the modern `translate:` property — composes cleanly with
     `transform:` from hover lift and reveal animation, no conflicts. */
  translate: 0 var(--py, 0px);
  will-change: translate;

  transition: translate .35s cubic-bezier(.2,.8,.2,1),
              transform .35s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease,
              box-shadow .35s ease;
}
.play-card:hover {
  transform: translateY(-6px);
  border-color: var(--coral);
  color: var(--light-text);
  box-shadow: var(--shadow-light);
}
.play-thumb {
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.play-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.play-card:hover .play-thumb img {
  transform: scale(1.04);
}
.play-1 { background: linear-gradient(135deg, var(--violet), #2c3e50); }
.play-2 { background: linear-gradient(135deg, var(--gold),   var(--coral)); }
.play-3 { background: linear-gradient(135deg, var(--teal),   var(--violet)); }
.play-4 { background: linear-gradient(135deg, #6b1f3a,       var(--coral)); }
.play-5 { background: linear-gradient(135deg, var(--teal),   #1f5a3a); }

.play-card h4 { margin-bottom: 4px; }
.play-card p { color: var(--light-text-dim); font-size: .9rem; margin: 0; }

/* ============================================================
   Contact
   ============================================================ */
.contact { background: var(--bg-2); border-top: 1px solid var(--border); }
.contact-direct { list-style: none; padding: 0; margin: 24px 0 0; color: var(--text-dim); }
.contact-direct li { margin-bottom: 8px; }
.contact-direct a { color: var(--gold); }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
  border-radius: var(--radius);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 16px; }
.field span {
  display: block;
  font-size: .8rem; color: var(--text-dim);
  margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
}
.field select {
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a39a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}
.contact-form .btn { width: auto; margin-top: 8px; }
.form-success { color: var(--teal); margin-top: 16px; font-size: .9rem; }
.form-error   { color: var(--coral); margin-top: 16px; font-size: .9rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { padding: 32px 0; border-top: 1px solid var(--border); color: var(--text-mute); font-size: .9rem; }
.footer-wrap { text-align: center; }
.footer-wrap p { margin: 0; color: var(--text-mute); }

/* ============================================================
   Motion: scroll reveals
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger { transform: translateY(24px) scale(.985); }
.reveal-stagger.is-in { transform: none; }

/* ============================================================
   Gallery (sub-pages under /playground)
   ============================================================ */
.gallery-page { background: var(--light-bg); color: var(--light-text); }

.gallery-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,237,225,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--light-border);
}
.gallery-nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
  gap: 24px;
}
.nav-home {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--light-text);
}
.nav-home:hover { color: var(--coral); }
.gallery-nav nav { display: flex; gap: 22px; flex-wrap: wrap; }
.gallery-nav nav a {
  color: var(--light-text-dim);
  font-size: .9rem;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.gallery-nav nav a:hover { color: var(--light-text); }
.gallery-nav nav a.active {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

.gallery-intro {
  padding: 96px 0 48px;
  position: relative;
}
.gallery-intro .eyebrow {
  color: var(--coral);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 20px;
}
.gallery-intro h1 {
  color: var(--light-text);
  margin-bottom: 16px;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
}
.gallery-intro h1 em { color: var(--coral); }
.gallery-intro .lede {
  color: var(--light-text-dim);
  max-width: 60ch;
  font-size: 1.08rem;
}

.gallery-grid-section { padding: 0 0 var(--space-section); }

/* Pagination — tiles beyond the page size are hidden until the user clicks "Load more". */
.gallery-tile.is-hidden { display: none; }

.gallery-load-more {
  display: block;
  margin: 48px auto 0;
  padding: 13px 36px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral);
  background: transparent;
  border: 1.5px solid var(--coral);
  border-radius: 999px;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease,
              box-shadow .22s ease;
}
.gallery-load-more:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217,122,91,.28);
}

/* True CSS-columns masonry — tiles flow into columns and pack by height,
   filling the layout based on each picture's aspect ratio. */
.gallery-grid {
  column-count: 3;
  column-gap: 16px;
}
.gallery-tile {
  /* required so a tile never splits across columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;

  display: block;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change: transform;
  box-shadow: 0 4px 14px rgba(20,18,12,.08);

  /* default tile is a soft portrait */
  aspect-ratio: 4 / 5;
}
.gallery-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,18,12,.18); }

/* Label sits in the bottom-left of each tile */
.gallery-tile span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(0,0,0,.45);
  padding: 6px 12px;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  font-size: .82rem;
  z-index: 2;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}

/* Aspect ratio variants — drive the masonry rhythm (portrait galleries) */
.tile-tall  { aspect-ratio: 2 / 3; }
.tile-wide  { aspect-ratio: 5 / 4; }
.tile-large { aspect-ratio: 1 / 1; }

/* ---- Horizontal / landscape gallery layout (drone, travel) ---- */
.layout-horizontal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  column-count: unset; /* override the masonry column-count */
}
.layout-horizontal .gallery-tile {
  margin-bottom: 0;
  break-inside: auto;
  aspect-ratio: auto;   /* reset base 4/5 — row height is driven by spanning tiles */
  min-height: 220px;
}
.layout-horizontal .tile-wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}
.layout-horizontal .tile-large {
  grid-column: span 3;
  aspect-ratio: 21 / 9;
}
.layout-horizontal .tile-tall {
  aspect-ratio: 2 / 3;
}

/* Play icon overlay on video tiles */
.gallery-tile.is-video::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='25' fill='rgba(0,0,0,0.45)'/%3E%3Ccircle cx='26' cy='26' r='25' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none'/%3E%3Cpolygon points='20,16 36,26 20,36' fill='white'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 3;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.gallery-tile.is-video:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Video element inside spotlight */
.spotlight-frame video {
  display: block;
  width: 100%;
  max-height: 82vh;
  background: #000;
}

/* Hide labels until hover (used on photo-led galleries — drone, travel) */
.hide-labels .gallery-tile span {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.hide-labels .gallery-tile:hover span,
.hide-labels .gallery-tile:focus-within span {
  opacity: 1;
  transform: none;
}

/* Gallery tile color themes — one per playground topic */
.theme-drone .gallery-tile { background: linear-gradient(135deg, #2c3e50, var(--violet)); }
.theme-drone .gallery-tile:nth-child(3n+1) { background: linear-gradient(135deg, #1f3a8a, var(--violet)); }
.theme-drone .gallery-tile:nth-child(3n+2) { background: linear-gradient(135deg, var(--violet), var(--coral)); }
.theme-drone .gallery-tile:nth-child(3n)   { background: linear-gradient(135deg, #2c3e50, #4a90e2); }

.theme-travel .gallery-tile { background: linear-gradient(135deg, var(--gold), var(--coral)); }
.theme-travel .gallery-tile:nth-child(3n+1) { background: linear-gradient(135deg, #b88142, var(--coral)); }
.theme-travel .gallery-tile:nth-child(3n+2) { background: linear-gradient(135deg, var(--coral), #6b1f3a); }
.theme-travel .gallery-tile:nth-child(3n)   { background: linear-gradient(135deg, var(--gold), #d97a5b); }

.theme-3d .gallery-tile { background: linear-gradient(135deg, var(--teal), var(--violet)); }
.theme-3d .gallery-tile:nth-child(3n+1) { background: linear-gradient(135deg, #1f8a7d, var(--teal)); }
.theme-3d .gallery-tile:nth-child(3n+2) { background: linear-gradient(135deg, #444b5a, var(--violet)); }
.theme-3d .gallery-tile:nth-child(3n)   { background: linear-gradient(135deg, var(--teal), #1f5a3a); }

.theme-mixology .gallery-tile { background: linear-gradient(135deg, #6b1f3a, var(--coral)); }
.theme-mixology .gallery-tile:nth-child(3n+1) { background: linear-gradient(135deg, #4a1518, var(--coral)); }
.theme-mixology .gallery-tile:nth-child(3n+2) { background: linear-gradient(135deg, var(--coral), var(--gold)); }
.theme-mixology .gallery-tile:nth-child(3n)   { background: linear-gradient(135deg, #6b1f3a, #b88142); }

.theme-animals .gallery-tile { background: linear-gradient(135deg, var(--teal), #1f5a3a); }
.theme-animals .gallery-tile:nth-child(3n+1) { background: linear-gradient(135deg, #1f5a3a, var(--teal)); }
.theme-animals .gallery-tile:nth-child(3n+2) { background: linear-gradient(135deg, var(--teal), var(--gold)); }
.theme-animals .gallery-tile:nth-child(3n)   { background: linear-gradient(135deg, #2a4a3a, var(--violet)); }

/* ============================================================
   Spotlight / lightbox
   ============================================================ */
.spotlight {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 16, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  cursor: pointer;
}
.spotlight.is-open {
  opacity: 1;
  pointer-events: auto;
}

.spotlight-frame {
  position: relative;
  max-width: min(92vw, 1280px);
  max-height: 86vh;
  border-radius: 0;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  transform: scale(.94) translateY(14px);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.spotlight.is-open .spotlight-frame {
  transform: scale(1) translateY(0);
}

.spotlight-media {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
}
.spotlight-media.is-placeholder {
  min-width: 480px;
}

.spotlight-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: 0;
  padding: 48px 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 40%, transparent 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .03em;
  pointer-events: none;
}
.spotlight-caption:empty { display: none; }

.spotlight-btn {
  position: fixed;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
  z-index: 301;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.spotlight-btn:hover {
  background: rgba(255,255,255,.22);
  transform: scale(1.08);
}
.spotlight-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 3px;
}
.spotlight-close { top: 20px; right: 20px; font-size: 1.4rem; }
.spotlight-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.spotlight-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.spotlight-prev:hover { transform: translateY(-50%) scale(1.08); }
.spotlight-next:hover { transform: translateY(-50%) scale(1.08); }

.spotlight-counter {
  position: fixed;
  bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .08em;
  pointer-events: none;
  z-index: 301;
}

/* Gallery footer matches the home footer but on light bg */
.gallery-page .site-footer {
  background: transparent;
  border-top: 1px solid var(--light-border);
  color: var(--light-text-mute);
}
.gallery-page .site-footer p { color: var(--light-text-mute); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-headline .word-inner { transform: none; opacity: 1; }
  .play-card { translate: 0 0 !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  :root { --space-section: 64px; }
  .hero { padding: 64px 0 40px; }
  .about { padding: 56px 0 72px; }

  .photo-rail { display: none; }

  .hero-text { max-width: none; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card.featured { grid-column: span 2; grid-template-columns: 1fr; }
  .playground-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .gallery-grid { column-count: 2; }
  .layout-horizontal { grid-template-columns: repeat(2, 1fr); }
  .layout-horizontal .tile-large { grid-column: span 2; }
}
@media (max-width: 600px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.featured { grid-column: span 1; }
  .playground-grid { grid-template-columns: 1fr; }
  .gallery-grid { column-count: 1; }
  .layout-horizontal { grid-template-columns: 1fr; }
  .layout-horizontal .tile-wide,
  .layout-horizontal .tile-large { grid-column: span 1; }
  .meta-row li { flex-direction: column; gap: 2px; align-items: flex-start; }
  .meta-label { min-width: 0; }
  .nav-arrow { display: none; }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,15,19,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  z-index: 800;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: rgba(30,30,38,.9);
  border-color: rgba(255,255,255,.32);
}
.spotlight.is-open ~ .back-to-top {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   BLOG PAGES (shipped.html, 3d-print-server.html)
   ============================================================ */
/* WCAG: body copy → --light-text (#1a1812, ~14:1); muted → #5c5549 (5.7:1); both pass AA */
.blog-page {
  background: var(--light-bg);
  color: var(--light-text);
  --light-text-mute: #5c5549;
}

/* Decorative banner at top of blog — no photo, just a layered visual on brand colors */
.blog-banner {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 20% 30%, rgba(123,104,238,0.55), transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 70%, rgba(217,122,91,0.55), transparent 60%),
    radial-gradient(ellipse 40% 60% at 60% 20%, rgba(233,180,108,0.35), transparent 60%),
    linear-gradient(135deg, #1a0f2e 0%, #2a1a4a 100%);
}
/* Abstract arc texture — two layers of concentric circles at different anchors/scales */
.blog-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cg stroke='white' stroke-opacity='0.07' stroke-width='1' fill='none'%3E%3Ccircle cx='0' cy='0' r='70'/%3E%3Ccircle cx='0' cy='0' r='140'/%3E%3Ccircle cx='0' cy='0' r='210'/%3E%3Ccircle cx='280' cy='0' r='70'/%3E%3Ccircle cx='280' cy='0' r='140'/%3E%3Ccircle cx='280' cy='0' r='210'/%3E%3Ccircle cx='0' cy='280' r='70'/%3E%3Ccircle cx='0' cy='280' r='140'/%3E%3Ccircle cx='0' cy='280' r='210'/%3E%3Ccircle cx='280' cy='280' r='70'/%3E%3Ccircle cx='280' cy='280' r='140'/%3E%3Ccircle cx='280' cy='280' r='210'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 280px 280px;
  pointer-events: none;
}
.blog-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg stroke='white' stroke-opacity='0.04' stroke-width='1.5' fill='none'%3E%3Ccircle cx='100' cy='0' r='55'/%3E%3Ccircle cx='100' cy='0' r='110'/%3E%3Ccircle cx='100' cy='0' r='165'/%3E%3Ccircle cx='100' cy='200' r='55'/%3E%3Ccircle cx='100' cy='200' r='110'/%3E%3Ccircle cx='100' cy='200' r='165'/%3E%3Ccircle cx='0' cy='100' r='55'/%3E%3Ccircle cx='0' cy='100' r='110'/%3E%3Ccircle cx='200' cy='100' r='55'/%3E%3Ccircle cx='200' cy='100' r='110'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-position: 100px 100px;
  pointer-events: none;
}

.blog-article {
  max-width: 720px;
  padding-top: 56px;
  padding-bottom: 120px;
}
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.blog-article h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 32px;
  color: var(--light-text);
}
.blog-body { font-size: 1.0625rem; line-height: 1.8; color: var(--light-text); }
.blog-body p,
.blog-body li,
.blog-body ul,
.blog-body ol { color: var(--light-text); }
.blog-body p { margin: 0 0 1.4em; }
.blog-body h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--light-text);
  margin: 2.4em 0 .8em;
}
.blog-body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--light-text);
  margin: 1.8em 0 .5em;
}
.blog-body ul, .blog-body ol {
  padding-left: 1.4em;
  margin: 0 0 1.4em;
}
.blog-body li { margin-bottom: .4em; }
.blog-body blockquote {
  border-left: 3px solid var(--gold);
  margin: 2em 0;
  padding: .6em 0 .6em 1.4em;
  color: var(--light-text-mute);
  font-style: italic;
}
.blog-cta { margin-top: 48px; }
.blog-page .site-footer {
  background: transparent;
  border-top: 1px solid var(--light-border);
  color: var(--light-text-mute);
}
.blog-page .site-footer p { color: var(--light-text-mute); }

/* ============================================================
   WEB-APP MODAL
   ============================================================ */
.webapp-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.webapp-modal.is-open { display: flex; }
.webapp-modal-inner {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 10px;
  background: #1a1a22;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  scroll-behavior: smooth;
}
.webapp-modal-close {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 12px 0 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(26,26,34,.9);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background .2s;
}
.webapp-modal-close:hover { background: rgba(50,50,60,.95); }
.webapp-modal-img {
  display: block;
  width: 100%;
  height: auto;
  clear: both;
}
.webapp-modal-caption {
  padding: 16px 24px 24px;
  font-size: .875rem;
  color: rgba(245,244,240,.5);
  font-style: italic;
  text-align: center;
}