@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    --color-paper: #f3f1ea;
    --color-ink: #15120d;
    --color-muted: #6b6358;
    --color-hairline: #dcd6ca;
    --color-surface: #e8e3d8;
    --color-accent: #ff5a2e;
    --color-accent-soft: #ff8154;
    --color-error: #7c2d12;
    --color-field: #fbfaf7;

    --font-display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", sans-serif;
    --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

    --measure: 64ch;
    --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
    --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem;
    --maxw: 1280px;
    --radius: 6px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-card: 0 22px 48px -28px rgba(21, 18, 13, .5);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; cursor: pointer; }
  ::selection { background: var(--color-accent); color: #fff; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  /* subtle paper grain for atmosphere */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
  h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
  h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.025em; }
  h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
  main { flex: 1; position: relative; z-index: 1; }

  .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.75rem); }
  .accent { color: var(--color-accent); }
  .label { font-family: var(--font-sans); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }
  .lede { font-size: 1.08rem; color: var(--color-muted); max-width: var(--measure); line-height: 1.6; }
  .contact-email, .contact-whatsapp { margin-top: .5rem; }
  .contact-email a, .contact-whatsapp a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
  /* keep the phone number from breaking mid-digits on narrow screens */
  .contact-whatsapp a { white-space: nowrap; }
  .section { padding-block: var(--space-5) var(--space-3); }
}

@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .section-end { padding-bottom: var(--space-5); }
  .mt-3 { margin-top: var(--space-3); }
  body.nav-lock { overflow: hidden; }

  /* scroll reveal — only active once JS adds .reveal-ready (degrades to visible) */
  [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(22px); }
  .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  }
}

/* ---------- buttons ---------- */
@layer components {
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .9rem 1.6rem; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-weight: 600; font-size: .78rem;
    letter-spacing: .06em; text-transform: uppercase; border: 1px solid transparent;
    -webkit-user-select: none; user-select: none;
    transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .35s, border-color .3s;
  }
  .btn--primary { background: var(--color-ink); color: var(--color-paper); }
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(21, 18, 13, .55); }
  .btn--accent { background: var(--color-accent); color: #fff; }
  .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(224, 83, 58, .6); }
  .btn--ghost { background: transparent; color: var(--color-ink); border-color: color-mix(in srgb, var(--color-ink) 30%, transparent); }
  .btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); transform: translateY(-2px); }
  .btn[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }
}

/* ---------- logo ---------- */
@layer components {
  .logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--color-ink); }
  .logo__mark { width: 32px; height: 32px; transition: transform .5s var(--ease); }
  .logo:hover .logo__mark { transform: rotate(30deg); }
  .logo__lockup { display: inline-flex; flex-direction: column; align-items: center; }
  .logo__mono { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1; }
  .logo__amp { font-style: italic; font-weight: 300; }
  .logo__sub { align-self: stretch; text-align: center; font-family: var(--font-sans);
    font-size: .54rem; letter-spacing: .42em; color: var(--color-muted);
    margin-top: .3em; padding-top: .3em; border-top: 1px solid var(--color-hairline); }
  .logo--stacked { flex-direction: column; gap: .5rem; }
  .logo--stacked .logo__mark { width: 46px; height: 46px; }

  /* larger header (horizontal) logo */
  .logo--horizontal { gap: .95rem; }
  .logo--horizontal .logo__mark { width: 54px; height: 54px; }
  .logo--horizontal .logo__mono { font-size: 2.25rem; }
  .logo--horizontal .logo__sub { font-size: .72rem; letter-spacing: .46em; }
}

/* ---------- language switcher ---------- */
@layer components {
  .lang { display: inline-flex; gap: .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; }
  .lang__item { color: var(--color-muted); transition: color .25s; }
  .lang__item.lang--active { color: var(--color-ink); }
  .lang__item:hover { color: var(--color-accent); }
}

/* ---------- nav ---------- */
@layer components {
  .nav { position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--color-paper) 82%, transparent);
    backdrop-filter: blur(12px) saturate(1.1); border-bottom: 1px solid transparent;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: border-color .3s; }
  .nav__bar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--space-3); }
  .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
  .nav__link { position: relative; font-family: var(--font-sans); font-weight: 600; font-size: .76rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); opacity: .68; transition: opacity .25s; }
  .nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1.5px;
    background: var(--color-accent); transition: right .35s var(--ease); }
  .nav__link:hover { opacity: 1; }
  .nav__link:hover::after, .nav__link.is-current::after { right: 0; }
  .nav__link.is-current { opacity: 1; }
  /* Contact rendered as a pill (last nav anchor) */
  .nav__link:last-of-type { background: var(--color-ink); color: var(--color-paper); opacity: 1;
    padding: .6rem 1.2rem; border-radius: var(--radius-pill); transition: background .3s, transform .3s var(--ease); }
  .nav__link:last-of-type::after { display: none; }
  .nav__link:last-of-type:hover { background: var(--color-accent); transform: translateY(-1px); }
  .nav__toggle { display: none; background: none; border: 0; flex-direction: column; gap: 5px; }
  .nav__toggle span { width: 24px; height: 1.5px; background: var(--color-ink); display: block; transition: transform .3s var(--ease); }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  @media (max-width: 860px) {
    .nav__toggle { display: flex; }
    .nav__links { position: fixed; top: 76px; left: 0; right: 0; height: calc(100vh - 76px); height: calc(100dvh - 76px);
      flex-direction: column; align-items: flex-start; gap: var(--space-3);
      background: var(--color-paper); padding: var(--space-4) var(--space-3); overflow-y: auto;
      opacity: 0; visibility: hidden; transform: translateY(-10px);
      transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; }
    .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: translateY(0); }
  }
}

/* ---------- hero ---------- */
@layer components {
  .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
  .hero__title { margin: .7rem 0 1.3rem; max-width: 13ch; }
  .hero__lede { max-width: 38ch; }
  .hero__cta { display: flex; gap: .75rem; margin-top: 1.9rem; flex-wrap: wrap; }
  .hero__media { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(118px, 1fr); gap: .75rem; }
  /* Fixed ratio (not left to the source photo's own proportions) so a portrait-
     oriented replacement image can't blow out this row's height against the
     16:9 lg shot next to it — see .hero__shot--lg below for the matching lg ratio. */
  .hero__shot { overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); aspect-ratio: 8 / 9; }
  .hero__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
  .hero__shot:hover img { transform: scale(1.06); }
  .hero__shot--lg { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .hero__tile { background: var(--color-accent); color: #fff; border-radius: var(--radius-lg);
    display: flex; align-items: flex-end; padding: 1.1rem; min-height: 118px; overflow: hidden; position: relative; }
  .hero__tile::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 85% 15%, rgba(255,255,255,.22), transparent 60%); }
  .hero__tile-label { position: relative; font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: .01em; font-size: .95rem; line-height: 1.05; }

  /* staggered page-load entrance */
  html:not(.turbo-nav) :is(.hero__kicker, .hero__title, .hero__lede, .hero__cta, .hero__media) { animation: hero-in .85s var(--ease) both; }
  .hero__title { animation-delay: .06s; }
  .hero__media { animation-delay: .1s; }
  .hero__lede { animation-delay: .16s; }
  .hero__cta { animation-delay: .22s; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero__title { max-width: none; } }
}

/* ---------- section heading ---------- */
@layer components {
  .sh { margin-bottom: var(--space-3); max-width: 60ch; }
  .sh .label { margin-bottom: .6rem; }
}

/* ---------- USP band ---------- */
@layer components {
  .usp { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-lg);
    padding: clamp(1.9rem, 4vw, 3.25rem); position: relative; overflow: hidden; }
  .usp::before { content: ""; position: absolute; right: -10%; top: -40%; width: 55%; height: 180%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 70%);
    opacity: .9; pointer-events: none; }
  .usp .label { color: var(--color-accent-soft); }
  .usp__title { position: relative; font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 24ch; margin-top: .8rem;
    letter-spacing: -.02em; }
}

/* ---------- service cards ---------- */
@layer components {
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .svc { background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.7rem 1.6rem;
    display: flex; flex-direction: column; min-height: 210px; border: 1px solid transparent;
    transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
  .svc:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--color-ink) 8%, transparent); }
  .svc__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
  .svc__body { color: var(--color-muted); margin: .65rem 0 1.3rem; flex: 1; max-width: 38ch; }
  .svc__cta { margin-top: auto; font-weight: 600; font-size: .82rem; letter-spacing: .02em;
    display: inline-flex; gap: .35rem; transition: gap .3s var(--ease); }
  .svc:hover .svc__cta { gap: .65rem; }
  .svc-grid [data-reveal]:nth-child(2) { transition-delay: .08s; }
  .svc-grid [data-reveal]:nth-child(3) { transition-delay: .16s; }
  @media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } }
}

/* ---------- photographers (/photographers) ---------- */
@layer components {
  .photographers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
    padding-block: var(--space-2) var(--space-4); }
  .photographer { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column; border: 1px solid transparent;
    transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
  .photographer:hover { transform: translateY(-5px); box-shadow: var(--shadow-card);
    border-color: color-mix(in srgb, var(--color-ink) 8%, transparent); }
  .photographer__portrait { aspect-ratio: 4 / 5; background: var(--color-paper); overflow: hidden; }
  .photographer__img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1s var(--ease); }
  .photographer:hover .photographer__img { transform: scale(1.05); }
  .photographer__portrait--mono { display: grid; place-items: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 20%, var(--color-surface)), var(--color-surface)); }
  .photographer__initials { font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.6rem, 7vw, 4rem); letter-spacing: -.02em; color: var(--color-accent); }
  .photographer__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
  .photographer__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
  .photographer__specialty { color: var(--color-accent); font-size: .78rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; margin-top: .3rem; }
  .photographer__bio { color: var(--color-muted); margin: .7rem 0 1.2rem; flex: 1; }
  .photographer__link { margin-top: auto; font-weight: 600; font-size: .82rem; letter-spacing: .02em;
    display: inline-flex; gap: .35rem; transition: gap .3s var(--ease); }
  .photographer:hover .photographer__link { gap: .65rem; }
  @media (max-width: 980px) { .photographers { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .photographers { grid-template-columns: 1fr; } }
}

/* ---------- home teaser grid ---------- */
@layer components {
  .work { columns: 3 300px; column-gap: 1rem; padding-block: var(--space-4); }
  .work__item { break-inside: avoid; margin-bottom: 1rem; position: relative; overflow: hidden;
    border-radius: var(--radius-lg); background: var(--color-surface); }
  .work img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); }
  .work__item:hover img { transform: scale(1.06); }
}

/* ---------- sports gallery (/work) ---------- */
@layer components {
  .gallery { padding-block: var(--space-2) var(--space-5); }

  .gallery__index { position: sticky; top: 76px; z-index: 5;
    background: color-mix(in srgb, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px) saturate(1.1);
    border-block: 1px solid var(--color-hairline); margin-bottom: var(--space-3); }
  .gallery__index ol { display: flex; gap: clamp(1rem, 3vw, 2rem); list-style: none; margin: 0;
    padding: .85rem 0; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gallery__index ol::-webkit-scrollbar { display: none; }
  .gallery__index a { display: inline-flex; gap: .4rem; align-items: baseline; white-space: nowrap;
    font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-muted); transition: color .25s; scroll-snap-align: start; }
  .gallery__index a:hover { color: var(--color-ink); }
  .gallery__index b { font-family: var(--font-display); color: var(--color-ink); }
  /* On phones the row scrolls horizontally — hide the hard cut, hint with a fade */
  @media (max-width: 760px) {
    .gallery__index ol { gap: 1.25rem; padding-inline-end: 1.6rem;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
              mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  }

  .gallery__chapter { scroll-margin-top: 130px; padding-top: var(--space-4); }
  .gallery__head { display: grid; grid-template-columns: auto 1fr; align-items: end;
    gap: clamp(1rem, 3vw, 2.4rem); margin-bottom: var(--space-3); }
  .gallery__no { font-family: var(--font-display); font-weight: 800; line-height: .72;
    font-size: clamp(3.5rem, 13vw, 9rem); letter-spacing: -.03em; }
  .gallery__name { font-family: var(--font-display); font-weight: 800; line-height: 1;
    letter-spacing: -.02em; font-size: clamp(1.8rem, 5vw, 3.2rem); margin: .35rem 0 .4rem; }
  .gallery__desc { color: var(--color-muted); font-size: .95rem; }

  /* masonry: every photo keeps its natural proportions — no cropping */
  .gallery__masonry { columns: 3 340px; column-gap: clamp(.6rem, 1.4vw, 1rem); }
  .gallery__shot { break-inside: avoid; margin: 0 0 clamp(.6rem, 1.4vw, 1rem);
    overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); }
  .gallery__shot img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
  .gallery__shot:hover img { transform: scale(1.03); }

  /* grid masonry: gapless column packing (row-span set per photo by JS from its
     height) — avoids the balancing gaps of CSS multi-column. */
  .gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    grid-auto-rows: 8px; gap: clamp(.6rem, 1.4vw, 1rem); align-items: start; }
  .gallery__grid .gallery__shot { margin: 0; }

  @media (max-width: 680px) {
    .gallery__head { grid-template-columns: 1fr; }
  }
}

/* ---------- footer ---------- */
@layer components {
  .footer { background: var(--color-ink); color: var(--color-paper); margin-top: var(--space-6);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: relative; z-index: 1; }
  .footer .logo { color: var(--color-paper); }
  .footer .logo__sub { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .65); }
  .footer__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4);
    padding-block: var(--space-5); flex-wrap: wrap; }
  .footer__meta { text-align: right; }
  .footer__rights { color: rgba(255, 255, 255, .55); font-size: .85rem; }
  .footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; justify-content: flex-end; margin: .7rem 0 .9rem; }
  .footer__legal a { color: rgba(255, 255, 255, .6); font-size: .78rem; transition: color .25s; }
  .footer__legal a:hover { color: var(--color-paper); }
  /* Facebook icon sits inline at the end of the legal-links row. */
  .footer__social-link { display: inline-flex; align-items: center; color: rgba(255, 255, 255, .6); transition: color .25s, transform .2s; }
  .footer__social-link:hover { color: var(--color-paper); transform: translateY(-1px); }
  .footer__social-link svg { display: block; }
  @media (max-width: 620px) { .footer__inner { flex-direction: column; align-items: flex-start; } .footer__meta { text-align: left; } .footer__legal { justify-content: flex-start; } }
}

/* ---------- legal pages ---------- */
@layer components {
  .legal { max-width: 760px; }
  .legal__meta { color: var(--color-muted); font-size: .8rem; letter-spacing: .02em; margin-top: -.4rem; margin-bottom: var(--space-3); }
  .legal__body h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; margin: var(--space-3) 0 .5rem; }
  .legal__body p { margin-bottom: .9rem; line-height: 1.7; max-width: var(--measure); }
  .legal__body ul { margin: 0 0 .9rem 1.1rem; line-height: 1.7; }
  .legal__body li { margin-bottom: .35rem; }
  .legal__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
}

/* ---------- flash ---------- */
@layer components {
  .flash-stack { position: fixed; top: 92px; right: 1rem; z-index: 60; display: grid; gap: .5rem; }
  .flash { padding: .8rem 1.1rem; border-radius: var(--radius); font-size: .9rem;
    background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-card); }
  .flash--alert { background: var(--color-error); }
}

/* ---------- lead form ---------- */
@layer components {
  .lead-form { display: grid; gap: var(--space-2); max-width: 720px; }
  .lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .lead-form label { display: grid; gap: .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--color-muted); }
  .lead-form input, .lead-form select, .lead-form textarea {
    font: inherit; text-transform: none; letter-spacing: normal; padding: .8rem .9rem;
    background: var(--color-field); border: 1px solid var(--color-hairline); border-radius: 12px; color: var(--color-ink);
    transition: border-color .25s, box-shadow .25s; }
  .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
    outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }

  /* Replace the native <select> chrome with our own chevron (the default OS
     dropdown looked out of place against the editorial fields). */
  .lead-form select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 2.6rem;
    background-color: var(--color-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6358' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px; }
  .lead-form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff5a2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

  /* Tame the native date input: brand-coloured picker popup, a custom calendar
     icon, no spin/clear buttons, same height as the other fields. */
  .lead-form input[type="date"] { appearance: none; -webkit-appearance: none; cursor: pointer; accent-color: var(--color-accent); }
  .lead-form input[type="date"]::-webkit-datetime-edit { color: var(--color-ink); }
  .lead-form input[type="date"]::-webkit-inner-spin-button,
  .lead-form input[type="date"]::-webkit-clear-button { display: none; }
  .lead-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .6; width: 17px; height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%236b6358' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain; }
  .lead-form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
  .lead-form .btn { justify-self: start; }
  .lead-form__consent { font-size: .8rem; color: var(--color-muted); max-width: var(--measure); }
  .lead-form__consent a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
  .lead-form__error { color: var(--color-error); font-weight: 600; margin-bottom: var(--space-2); }
  .lead-success { padding: var(--space-3); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); background: var(--color-surface); }

  /* ===== Custom select + date controls (Stimulus-enhanced) =====
     The native <select>/<input type=date> stay in the DOM (submit value, no-JS
     and mobile fallback, styled above). When the controller connects it adds
     .is-ready / .is-custom and we swap in the branded UI below. */
  .lead-form__field { display: grid; gap: .4rem; position: relative; }
  .lead-form__field-label { font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--color-muted); }

  /* Shared trigger: looks exactly like a text field. */
  .field-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    font: inherit; text-align: left; cursor: pointer; padding: .8rem .9rem; color: var(--color-ink);
    background: var(--color-field); border: 1px solid var(--color-hairline); border-radius: 12px;
    transition: border-color .25s, box-shadow .25s; }
  .field-trigger:focus-visible { outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
  .field-trigger[aria-expanded="true"] { border-color: var(--color-accent); }
  .field-trigger__chev { flex: none; width: 9px; height: 9px; margin-right: 3px; transform: translateY(-2px) rotate(45deg);
    border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transition: transform .15s; }
  .field-trigger[aria-expanded="true"] .field-trigger__chev { transform: translateY(2px) rotate(-135deg); border-color: var(--color-accent); }
  .field-trigger__cal { flex: none; width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; opacity: .65;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6358' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }

  /* Custom select: hide the native control once enhanced; show the trigger. */
  .cselect__button { display: none; }
  .cselect.is-ready .cselect__native { display: none; }
  .cselect.is-ready .cselect__button { display: flex; }
  .cselect__list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 5px;
    list-style: none; background: #fff; border: 1px solid var(--color-hairline); border-radius: 12px;
    box-shadow: 0 14px 32px -12px rgba(21, 18, 13, .35); max-height: 264px; overflow-y: auto; }
  .cselect__option { padding: .55rem .6rem; border-radius: 8px; cursor: pointer; text-transform: none; letter-spacing: normal;
    font-weight: 400; color: var(--color-ink); }
  .cselect__option:hover, .cselect__option:focus-visible { outline: none; background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .cselect__option.is-selected { font-weight: 600; color: var(--color-accent); }

  /* Custom date field: one styled box (placeholder + calendar icon) with a
     transparent interactive overlay. On touch/no-JS the overlay is the native
     <input type=date> (opens the OS picker — fixes the blank iOS field); on
     desktop (.is-custom) the native input is hidden and a transparent button
     opens the branded calendar instead. */
  .datefield__field { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .8rem .9rem; background: var(--color-field); border: 1px solid var(--color-hairline); border-radius: 12px;
    color: var(--color-ink); transition: border-color .25s, box-shadow .25s; }
  .datefield__field:focus-within { border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
  .datefield__display { text-transform: none; letter-spacing: normal; }
  .datefield__display.is-empty { color: var(--color-muted); }
  .datefield__native, .datefield__trigger { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
    opacity: 0; border: 0; background: none; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; }
  .datefield__trigger { display: none; }
  .datefield.is-custom .datefield__native { display: none; }
  .datefield.is-custom .datefield__trigger { display: block; }
  .cal { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 286px; max-width: 100%; padding: 12px;
    background: #fff; border: 1px solid var(--color-hairline); border-radius: 14px; box-shadow: 0 14px 32px -12px rgba(21, 18, 13, .35); }
  .cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .cal__title { font-weight: 600; }
  .cal__nav { border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 10px;
    border-radius: 8px; color: var(--color-ink); }
  .cal__nav:hover { background: var(--color-surface); }
  .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal__grid--dow { margin-bottom: 4px; }
  .cal__dow { text-align: center; font-size: .68rem; color: var(--color-muted); padding: 2px 0; }
  .cal__day { aspect-ratio: 1; border: 0; background: none; cursor: pointer; font: inherit; border-radius: 8px; color: var(--color-ink); }
  .cal__day--pad { cursor: default; }
  .cal__day:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
  .cal__day.is-today { box-shadow: inset 0 0 0 1px var(--color-hairline); }
  .cal__day.is-selected { background: var(--color-accent); color: #fff; }
  .cal__foot { margin-top: 8px; text-align: right; }
  .cal__clear { border: 0; background: none; cursor: pointer; font: inherit; font-size: .8rem; color: var(--color-muted); }
  .cal__clear:hover { color: var(--color-accent); }

  @media (max-width: 620px) { .lead-form__row { grid-template-columns: 1fr; } }
}

/* ---------- PhotoAtlas (event pages) ---------- */
@layer components {
  .pa { --pa-ink: #f4f1ea; --pa-bg: #0b0b0c; color: var(--pa-ink);
    background: var(--pa-bg); -webkit-user-select: none; user-select: none; }
  .pa-showcase { color: var(--color-ink); background: var(--color-paper); user-select: auto; }

  .pa-hub { position: relative; min-height: 100svh; overflow: hidden; }
  /* The cover is full-bleed — drop the footer's usual top gap so it meets it. */
  body:has(.pa-hub) .footer { margin-top: 0; }
  .pa-cover { position: absolute; inset: 0; }
  .pa-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pa-cover__veil { position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(0,0,0,.45)),
                linear-gradient(180deg, rgba(0,0,0,.35), transparent 25%); }
  /* Brand sits in one of four corners (chosen per event in the atlas editor). */
  .pa-hub__brand { position: absolute; z-index: 4; max-width: min(88%, 42rem);
    --pa-edge-x: clamp(1.25rem, 4vw, 3rem); --pa-edge-y: clamp(1.5rem, 5vh, 3rem); }
  .pa-hub__brand--top-left { top: var(--pa-edge-y); left: var(--pa-edge-x); }
  .pa-hub__brand--top-right { top: var(--pa-edge-y); right: var(--pa-edge-x); text-align: right; }
  .pa-hub__brand--bottom-left { bottom: var(--pa-edge-y); left: var(--pa-edge-x); }
  .pa-hub__brand--bottom-right { bottom: var(--pa-edge-y); right: var(--pa-edge-x); text-align: right; }
  .pa-hub__kicker { font: 600 .72rem/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; opacity: .82; }
  .pa-hub__title { font-family: var(--font-display); font-weight: 800; line-height: .92;
    letter-spacing: -.03em; font-size: clamp(2.4rem, 7vw, 5rem); text-transform: uppercase; margin-top: .4rem; }
  /* Optional editorial lead under the title (event.intro) — adds real, crawlable
     copy to an otherwise image-only page. Constrained + shadowed to stay legible
     over the cover; flushes to the anchored edge for right-corner placements. */
  .pa-hub__lead { margin-top: .85rem; max-width: 40ch;
    font: 500 clamp(.95rem, 1.6vw, 1.12rem)/1.45 var(--font-sans);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    /* Cap the on-cover teaser at 3 lines so a long intro never sprawls across
       the lenses; the full text stays in the DOM (and in meta/JSON-LD). */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .pa-hub__brand--top-right .pa-hub__lead,
  .pa-hub__brand--bottom-right .pa-hub__lead { margin-left: auto; }

  .pa-pill { position: absolute; left: 50%; top: clamp(1rem, 4vh, 2.2rem); transform: translateX(-50%); z-index: 5;
    padding: 12px 30px; border-radius: 999px; color: #fff; cursor: pointer;
    font: 600 clamp(.9rem,2.4vw,1.05rem)/1 var(--font-sans); letter-spacing: .03em;
    backdrop-filter: blur(18px) saturate(1.4) brightness(1.05);
    background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.5); text-shadow: 0 1px 4px rgba(0,0,0,.5);
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.5);
    transition: transform .3s var(--ease), box-shadow .3s; }
  .pa-pill:hover { transform: translateX(-50%) scale(1.04); }

  .pa-lens { position: absolute; z-index: 3; left: var(--pa-x); top: var(--pa-y);
    width: var(--pa-size); min-width: 96px; transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.4); border-radius: 50%; overflow: hidden; cursor: pointer; padding: 0;
    background: transparent;
    /* clip-path reliably clips to a circle on iOS Safari, where overflow+border-radius
       on a transformed element does not. Outer shadow/glow via filter so clip keeps them. */
    -webkit-clip-path: circle(50%); clip-path: circle(50%);
    box-shadow: inset 0 3px 5px rgba(255,255,255,.78), inset 0 -18px 30px rgba(0,0,0,.34);
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)) drop-shadow(0 0 13px rgba(255,90,46,.3));
    transition: transform .4s var(--ease), filter .4s; }
  /* Square height with the universal padding-top hack — no aspect-ratio/calc/vw/JS,
     works on every Safari. % is relative to the lens's own width, so the circle
     is exact even when min-width clamps the size. */
  .pa-lens::before { content: ""; display: block; padding-top: 100%; }
  .pa-lens:hover { transform: translate(-50%,-50%) scale(1.06);
    box-shadow: inset 0 1.5px 3px rgba(255,255,255,.65), inset 0 -12px 22px rgba(0,0,0,.2);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(255,90,46,.42)); }
  .pa-lens__glass { position: absolute; inset: -2px; border-radius: 50%; background-image: var(--pa-cover-url);
    background-size: var(--pa-bgw, cover); background-position: var(--pa-bgx, center) var(--pa-bgy, center);
    filter: blur(1.2px) saturate(1.28) brightness(1.04); }
  .pa-lens__shade { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(115% 115% at 33% 22%, rgba(255,255,255,.36), rgba(255,255,255,.06) 26%, transparent 46%),
                radial-gradient(125% 125% at 68% 86%, rgba(0,0,0,.36), transparent 50%),
                radial-gradient(circle at 50% 42%, transparent 42%, rgba(0,0,0,.30) 86%, rgba(0,0,0,.48) 100%),
                radial-gradient(circle at 50% 50%, transparent 58%, rgba(255,90,46,.14) 100%); }
  .pa-lens__spec { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(34% 22% at 31% 20%, rgba(255,255,255,.92), rgba(255,255,255,.12) 44%, transparent 60%),
                radial-gradient(12% 8% at 64% 27%, rgba(255,255,255,.6), transparent 70%); }
  /* Подпись центрируется в круге. letter-spacing небольшой и padding узкий,
     чтобы длинные одиночные слова (PERFORMANCE, DISCUSSIONS) целиком влезали в
     линзу даже при min-width на мобильном (одно слово не переносится). */
  .pa-lens__cap { position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .35rem;
    font: 700 clamp(.62rem,1.5vw,.78rem)/1.1 var(--font-sans);
    letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.65); }

  /* Sits ABOVE the gallery during the dive: you fall through the cover and the
     gallery is revealed beneath as the cover zooms, blurs and fades away. */
  .pa-stage { position: fixed; inset: 0; z-index: 70;
    background-image: var(--pa-cover-url); background-size: cover; background-position: center;
    transform-origin: var(--pa-ox, 50%) var(--pa-oy, 50%);
    will-change: clip-path, transform, opacity, filter; }

  .pa-gallery { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--pa-bg);
    padding: clamp(4.5rem, 9vh, 7rem) clamp(1rem, 4vw, 2.75rem) clamp(3rem, 6vh, 4rem);
    opacity: 0; transform: translateY(14px);
    transition: opacity .45s var(--ease), transform .55s var(--ease); }
  .pa-gallery[data-open] { opacity: 1; transform: translateY(0); }
  .pa-gallery__head { position: fixed; top: clamp(1rem,3vh,1.6rem); left: clamp(1rem,4vw,2.75rem); right: clamp(1rem,4vw,2.75rem);
    z-index: 2; display: flex; align-items: center; gap: 1rem; }
  .pa-gallery__back { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.06); color: #fff; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(10px);
    transition: background .25s, transform .25s; }
  .pa-gallery__back:hover { background: rgba(255,255,255,.14); transform: translateX(-2px); }
  .pa-gallery__name { font-family: var(--font-display); font-weight: 800; letter-spacing: .02em;
    text-transform: uppercase; font-size: clamp(1.3rem, 4vw, 2rem); }
  .pa-gallery__foot { display: flex; justify-content: center; padding-top: clamp(1.5rem, 4vh, 3rem); }
  .pa-gallery__foot-back { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.6rem;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06);
    color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(10px);
    transition: background .25s, transform .25s; }
  .pa-gallery__foot-back:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
  /* Masonry: each photo keeps its natural proportions (aspect-ratio per item),
     widths vary by column span. Muuri positions items absolutely; the same
     packing runs in the admin editor so the public page mirrors it. */
  .pa-masonry { position: relative; max-width: var(--maxw); margin-inline: auto; }
  /* Masonry spaces frames with padding, not gap (Muuri positions items
     absolutely), so the lens gutter is halved: two neighbouring paddings add up
     to one gutter. The default keeps the pre-feature look — every lens ships
     margin: 12 (DB default), and 12 / 2 = 6px, exactly the value this used to
     hardcode. Changing the gutter in the toolbar now actually moves masonry. */
  .pa-masonry__item { position: absolute; box-sizing: border-box;
    padding: calc(var(--pa-gap, 12px) / 2); margin: 0; }
  .pa-masonry__inner { position: relative; overflow: hidden; border-radius: 10px; background: #161616; }
  .pa-masonry__inner img { display: block; width: 100%; height: auto; }
  @media (max-width: 700px) {
    .pa-masonry__item { width: 100% !important; }
  }

  /* NB: the admin layout editor renders these very same partials but loads
     admin.css, not this file (see app/views/layouts/admin.html.erb), so every
     `.pa-*` layout selector below is duplicated there. Add, rename or remove
     one here and you must do the same in admin.css —
     spec/assets/photoatlas_layout_css_spec.rb fails if the two sets drift. */

  /* Series: justified rows. The packer decides which frames share a row; the
     flex-grow below (each frame's aspect ratio) makes every frame in a row land
     on the same height and fills the row exactly. */
  .pa-series { max-width: var(--maxw); margin-inline: auto; display: grid; gap: var(--pa-gap, 12px); }
  .pa-series__row { display: flex; gap: var(--pa-gap, 12px); }
  .pa-series__item { position: relative; margin: 0; min-width: 0; overflow: hidden;
    border-radius: 10px; background: #161616; }
  .pa-series__item img { display: block; width: 100%; height: auto; }
  @media (max-width: 700px) {
    /* Rows are computed server-side and cannot re-pack for a phone, so they
       stack — one frame per line, matching what masonry already does. */
    .pa-series__row { flex-direction: column; }
    /* flex-direction: column moves the main axis to vertical, so the item's
       inline `flex: <ar> 1 0` shorthand (still set for the desktop row, see
       _series.html.erb) would now apply its flex-basis: 0 to HEIGHT instead
       of width, and the row's height is content-based — nothing left to grow
       into, so every frame collapses to 0px tall and its image gets clipped.
       Force the item off the main axis here so its height comes from its
       content (the image) again. The !important is required: an inline
       style="flex: ..." attribute outranks any stylesheet selector on
       specificity alone, media query or not. Do not remove this as
       "redundant" with the base rule above. */
    .pa-series__item { flex: 0 0 auto !important; }
  }

  /* Sequence: one frame per row, full width, natural height. */
  .pa-sequence { max-width: var(--maxw); margin-inline: auto; display: grid; gap: var(--pa-gap, 12px); }
  .pa-sequence__item { margin: 0; overflow: hidden; border-radius: 10px; background: #161616; }
  .pa-sequence__item img { display: block; width: 100%; height: auto; }

  /* Filmstrip: a single row panned horizontally — a swipe on a phone. Frames
     share one height and take their width from their own proportions. */
  .pa-filmstrip { display: flex; gap: var(--pa-gap, 12px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding-inline: clamp(1.25rem, 4vw, 2.75rem); scrollbar-width: thin; }
  .pa-filmstrip__item { flex: 0 0 auto; height: min(70vh, 620px); margin: 0; scroll-snap-align: center;
    overflow: hidden; border-radius: 10px; background: #161616; }
  .pa-filmstrip__item img { display: block; height: 100%; width: auto; }
  @media (max-width: 700px) { .pa-filmstrip__item { height: min(60vh, 460px); } }

  /* Tile: masonry that keeps the curated order. Columns are fixed; the row-span
     controller gives each frame a grid-row-end matching its rendered height, so
     the columns pack tightly with no balancing gaps and no CDN dependency. */
  .pa-tile { max-width: var(--maxw); margin-inline: auto; display: grid;
    grid-template-columns: repeat(var(--pa-cols, 3), 1fr);
    gap: var(--pa-gap, 12px); grid-auto-rows: 8px; align-items: start; }
  .pa-tile__item { margin: 0; overflow: hidden; border-radius: 10px; background: #161616; }
  .pa-tile__item img { display: block; width: 100%; height: auto; }
  @media (max-width: 700px) { .pa-tile { grid-template-columns: 1fr; } }

  /* Crop: a uniform grid. Every frame is cut to the lens ratio and held in
     place by its own focal point, so faces survive the crop. */
  .pa-crop { max-width: var(--maxw); margin-inline: auto; display: grid;
    grid-template-columns: repeat(var(--pa-cols, 3), 1fr); gap: var(--pa-gap, 12px); }
  .pa-crop__item { position: relative; margin: 0; overflow: hidden; border-radius: 10px; background: #161616; }
  .pa-crop__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 700px) { .pa-crop { grid-template-columns: 1fr; } }

  .pa-showcase__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem;
    padding-block: var(--space-2) var(--space-5); }
  .pa-showcase__card { display: grid; gap: .8rem; }
  .pa-showcase__media { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); }
  .pa-showcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
  .pa-showcase__card:hover .pa-showcase__media img { transform: scale(1.05); }
  .pa-showcase__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
  .pa-showcase__sub { color: var(--color-muted); font-size: .85rem; }

  .pa-lock { overflow: hidden; }
  /* Raise <main> above sticky nav when a gallery is open */
  .pa-lock main { z-index: 55; }

  /* Immersive transparent nav over the dark event hub (pa-dark on <body>) */
  body.pa-dark { background: #0b0b0c; }
  body.pa-dark .nav { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
  body.pa-dark .logo { color: #fff; }
  body.pa-dark .logo__sub { color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.22); }
  body.pa-dark .nav__link { color: #fff; opacity: .78; }
  body.pa-dark .nav__link:hover, body.pa-dark .nav__link.is-current { opacity: 1; }
  body.pa-dark .nav__link:last-of-type { background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); }
  body.pa-dark .nav__link:last-of-type:hover { background: var(--color-accent); border-color: transparent; }
  body.pa-dark .nav__toggle span { background: #fff; }
  body.pa-dark .lang__item { color: rgba(255,255,255,.55); }
  body.pa-dark .lang__item.lang--active { color: #fff; }
  body.pa-dark .lang__item:hover { color: var(--color-accent); }
  /* Open mobile menu on a pa-dark page: make the whole overlay solid dark so the
     white nav links read (the panel's default paper bg gave white-on-white). */
  @media (max-width: 860px) {
    body.pa-dark .nav.is-open { background: #0d0d0f; }
    body.pa-dark .nav__links { background: #0d0d0f; border-top: 1px solid rgba(255,255,255,.08); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pa-stage, .pa-gallery, .pa-lens { transition: none !important; }
  }
}

@layer components {
  /* ---------- on-site printing ---------- */
  .prn-hero { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .prn-hero__cta { margin-top: 2rem; }
  .prn-hero__art, .prn-kit__art {
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, #efece3, #e6e0d4);
    border: 1px solid var(--color-hairline);
    overflow: hidden;
  }
  .prn-hero__art { box-shadow: var(--shadow-card); }
  .prn-svg { width: 100%; height: auto; display: block; }

  .prn-steps { list-style: none; padding: 0; margin-top: var(--space-3);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
  .prn-step { padding: 1.7rem 1.5rem; border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); background: var(--color-field); }
  .prn-step__icon { color: var(--color-accent); display: block; width: 48px; height: 48px; margin-bottom: 1.1rem; }
  .prn-step__icon svg { width: 100%; height: 100%; }
  .prn-step__n { font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .14em; color: var(--color-muted); margin-bottom: .35rem; }
  .prn-step h3 { margin-bottom: .45rem; }
  .prn-step p { color: var(--color-muted); }
  .prn-steps [data-reveal]:nth-child(2) { transition-delay: .08s; }
  .prn-steps [data-reveal]:nth-child(3) { transition-delay: .16s; }

  .prn-kit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); margin-top: var(--space-3); }
  .prn-kit__card { border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-field); }
  .prn-kit__art { border: 0; border-bottom: 1px solid var(--color-hairline); border-radius: 0; }
  .prn-kit__card h3 { margin: 1.5rem 1.6rem .45rem; }
  .prn-kit__card p { margin: 0 1.6rem 1.7rem; color: var(--color-muted); }
  .prn-kit [data-reveal]:nth-child(2) { transition-delay: .08s; }

  .prn-uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: var(--space-3); }
  .prn-use { padding: 1.4rem 1.3rem 1.6rem; border-top: 2px solid var(--color-ink); }
  .prn-use__n { font-family: var(--font-display); font-weight: 800; color: var(--color-accent); font-size: .85rem; letter-spacing: .12em; }
  .prn-use h3 { margin: .7rem 0 .4rem; }
  .prn-use p { color: var(--color-muted); font-size: .96rem; }
  .prn-uses [data-reveal]:nth-child(2) { transition-delay: .06s; }
  .prn-uses [data-reveal]:nth-child(3) { transition-delay: .12s; }
  .prn-uses [data-reveal]:nth-child(4) { transition-delay: .18s; }

  .prn-cta { text-align: center; border-radius: var(--radius-lg); background: var(--color-surface);
    border: 1px solid var(--color-hairline); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
  .prn-cta .lede { margin: 1rem auto 1.8rem; }

  @media (max-width: 980px) { .prn-uses { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 860px) {
    .prn-hero { grid-template-columns: 1fr; }
    .prn-steps { grid-template-columns: 1fr; }
    .prn-kit { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) { .prn-uses { grid-template-columns: 1fr; } }
}

@layer components {
  /* ---------- studio / brand manifesto ---------- */
  .studio-hero__title { margin: .6rem 0 1.3rem; max-width: 16ch; }
  .studio-hero__lede { max-width: 44ch; }
  .studio-hero__cta { margin-top: 2rem; }

  .studio-manifesto { max-width: 52rem; border-left: 3px solid var(--color-accent);
    padding-left: clamp(1.2rem, 3vw, 2.4rem); }
  .studio-manifesto__head { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.1rem; }
  .studio-manifesto__body { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.5; color: var(--color-ink); }

  .studio-principles { display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 2rem); margin-top: var(--space-3); }
  .studio-principle { padding: 1.6rem 1.6rem 1.7rem; border-top: 2px solid var(--color-ink); }
  .studio-principle__n { font-family: var(--font-display); font-weight: 800; color: var(--color-accent);
    font-size: .9rem; letter-spacing: .12em; }
  .studio-principle h3 { margin: .7rem 0 .45rem; font-size: 1.3rem; }
  .studio-principle p { color: var(--color-muted); }
  .studio-principles [data-reveal]:nth-child(2) { transition-delay: .06s; }
  .studio-principles [data-reveal]:nth-child(3) { transition-delay: .12s; }
  .studio-principles [data-reveal]:nth-child(4) { transition-delay: .18s; }

  .studio-cta { text-align: center; border-radius: var(--radius-lg); background: var(--color-surface);
    border: 1px solid var(--color-hairline); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
  .studio-cta .lede { margin: 1rem auto 1.8rem; }

  @media (max-width: 760px) { .studio-principles { grid-template-columns: 1fr; } }
}