@layer normalize, base, components, utilities;

@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: 7rem; }
  body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--studio-ink); background: var(--color-surface); line-height: 1.5; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { line-height: 1.02; letter-spacing: -0.055em; text-wrap: balance; }
  a { color: inherit; text-underline-offset: 0.2em; }
  button { color: inherit; }
  button, a, summary { -webkit-tap-highlight-color: var(--color-transparent); }
  :focus-visible { outline: 0.2rem solid var(--studio-ink); outline-offset: 0.3rem; }
  main:focus { outline: none; }
  section { scroll-margin-block-start: 1rem; }
  ::selection { color: var(--studio-ink); background: var(--studio-tint); }
}

@layer components {
  .studio-container { inline-size: min(84%, 80rem); margin-inline: auto; }
  .svg-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .icon { inline-size: 1.5rem; block-size: 1.5rem; fill: var(--color-transparent); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .studio-skip { position: fixed; z-index: 100; inset: 1rem auto auto 1rem; padding: 0.75rem; background: var(--color-surface); transform: translateY(-200%); }
  .studio-skip:focus { transform: none; }
  .studio-label { font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.09em; }
  .studio-link { display: inline-flex; align-items: center; gap: 1rem; padding-block: 0.75rem; min-block-size: 2.75rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; }
  .studio-link:hover { text-decoration: underline; }
  .studio-brand { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; font-weight: 650; letter-spacing: -0.075em; text-decoration: none; white-space: nowrap; }
  .studio-brand span { font-weight: 250; }
  .studio-header { position: sticky; z-index: 20; inset-block-start: 0; background: var(--color-surface); }
  .studio-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; inline-size: 84%; min-block-size: 5.5rem; margin-inline: auto; }
  .studio-header__tagline { display: none; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .studio-navigation > summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; list-style: none; font-size: 0.8rem; }
  .studio-navigation > summary::-webkit-details-marker { display: none; }
  .studio-navigation__close { display: none; transform: rotate(45deg); }
  .studio-navigation[open] .studio-navigation__open { display: none; }
  .studio-navigation[open] .studio-navigation__close { display: block; }
  .studio-navigation__panel { position: absolute; inset: 100% 0 auto; max-block-size: calc(100dvh - 5.5rem); overflow-y: auto; background: var(--color-surface); border-block: 1px solid var(--studio-line); }
  .studio-navigation__inner { inline-size: 84%; margin-inline: auto; padding-block: 2rem; }
  .studio-navigation ul { list-style: none; margin: 1.5rem 0; padding: 0; }
  .studio-navigation li a { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; font-size: clamp(1.7rem, 4vw, 3.2rem); font-weight: 550; letter-spacing: -0.04em; text-decoration: none; border-block-end: 1px solid var(--studio-line); }
  .studio-navigation li a span { font-size: 0.7rem; letter-spacing: 0; color: var(--studio-muted); }
  .studio-navigation li a .icon { margin-inline-start: auto; }
  .studio-navigation li a:hover { color: var(--studio-muted); }

  .studio-hero { position: relative; padding-block: 0 1.5rem; background: linear-gradient(var(--color-surface) 0%, var(--studio-tint) 100%); touch-action: pan-y; }
  .studio-hero__image { display: block; inline-size: 100%; block-size: clamp(18rem, 70vw, 28rem); object-fit: cover; }
  .studio-hero__title { position: relative; z-index: 1; margin: -0.12em 8% 0; max-inline-size: 16ch; font-size: clamp(3.1rem, 9vw, 8rem); font-weight: 750; text-transform: uppercase; background: var(--studio-title-background); }
  .studio-hero__description { inline-size: 84%; margin: 1.5rem auto 0; max-inline-size: 45rem; font-size: clamp(1.1rem, 2vw, 1.7rem); line-height: 1.3; letter-spacing: -0.025em; }
  .studio-hero__controls { position: relative; padding: 0.75rem 8% 1rem; }
  .studio-hero__selectors { display: flex; gap: 0.35rem; margin-block-start: 0.5rem; }
  .studio-hero__selector, .studio-icon-button { display: inline-grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; padding: 0; border: 1px solid var(--studio-ink); background: var(--color-transparent); font-size: 0.85rem; }
  .studio-hero__selector:hover, .studio-hero__selector[aria-pressed="true"], .studio-icon-button:hover { color: var(--color-surface); background: var(--studio-ink); }
  .studio-hero__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; inline-size: 84%; margin: 2rem auto 0; }
  .studio-hero__arrows { display: flex; align-items: center; gap: 0.75rem; }
  .studio-hero__counter { font-size: 0.7rem; font-variant-numeric: tabular-nums; }
  .studio-arrow--back { transform: rotate(180deg); }
  .studio-arrow--down { transform: rotate(90deg); }
  .studio-arrow--up { transform: rotate(-90deg); }

  .studio-intro { display: grid; gap: 2.5rem; padding-block: clamp(4rem, 10vw, 9rem); }
  .studio-intro h2 { font-size: clamp(2.3rem, 5vw, 4.5rem); margin-block-end: 2rem; }
  .studio-intro p:not(.studio-label) { max-inline-size: 44rem; margin-block-end: 1.5rem; color: var(--studio-muted); }
  .studio-intro .studio-intro__lead { color: var(--studio-ink); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.4; }
  .studio-journal { padding-block-end: clamp(4rem, 10vw, 9rem); }
  .studio-journal__heading { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; padding-block: 1.5rem; margin-block-end: 1.5rem; border-block-start: 1px solid var(--studio-ink); }
  .studio-journal__heading h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); }
  .studio-journal__grid { display: grid; gap: 3rem; }
  .studio-story { min-inline-size: 0; }
  .studio-story__image-link { position: relative; display: block; overflow: hidden; }
  .studio-story img { display: block; inline-size: 100%; aspect-ratio: 1.45; block-size: auto; object-fit: cover; }
  .studio-story__image-action { position: absolute; inset: auto 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem; background: var(--color-surface); font-size: 0.7rem; }
  .studio-story__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1.3rem 0.8rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--studio-muted); }
  .studio-story h3 { max-inline-size: 22ch; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.08; margin-block-end: 1rem; }
  .studio-story > p { max-inline-size: 42ch; color: var(--studio-muted); }

  .studio-contact { background: var(--studio-soft); padding-block: clamp(3.5rem, 7vw, 7rem); }
  .studio-contact h2 { margin-block: 2rem; font-size: clamp(3.2rem, 8vw, 7.5rem); font-weight: 700; text-transform: uppercase; }
  .studio-contact__link { display: inline-flex; align-items: center; gap: 1.5rem; padding-block: 0.75rem; font-size: clamp(1rem, 2vw, 1.4rem); }
  .studio-footer { padding-block: 3rem 2rem; }
  .studio-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block-end: 2.5rem; }
  .studio-footer__bottom { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--studio-line); font-size: 0.75rem; color: var(--studio-muted); }
  .studio-footer nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
  .studio-footer nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }

  .studio-lightbox { inline-size: min(94%, 90rem); max-inline-size: none; max-block-size: 94dvh; padding: 1rem; border: 0; color: var(--studio-ink); background: var(--color-surface); }
  .studio-lightbox::backdrop { background: var(--studio-backdrop); }
  .studio-lightbox__toolbar, .studio-lightbox__controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .studio-lightbox figure { margin: 1rem 0; }
  .studio-lightbox__image { display: block; inline-size: 100%; block-size: auto; max-block-size: 64dvh; object-fit: contain; }
  .studio-lightbox figcaption { margin-block-start: 0.75rem; font-size: 1rem; }
  .studio-lightbox__controls > span { font-size: 0.7rem; text-align: center; }
  .studio-lightbox__close-icon { transform: rotate(45deg); }
  .studio-page:has(.studio-lightbox[open]) { overflow: hidden; }

  @media (min-width: 48rem) {
    .studio-header__tagline { display: block; }
    .studio-header__inner { min-block-size: 7.5rem; }
    .studio-navigation__panel { max-block-size: calc(100dvh - 7.5rem); }
    .studio-navigation__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem 4rem; padding-block: 3rem; }
    .studio-navigation ul { margin: 0; }
    .studio-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 3rem; }
    .studio-story:nth-child(even) { margin-block-start: 4.5rem; }
    .studio-footer__bottom { flex-direction: row; }
  }

  @media (min-width: 56rem) {
    .studio-hero { padding-block-end: 2rem; }
    .studio-hero__image { inline-size: 75%; margin-inline-start: 25%; block-size: clamp(26rem, 42vw, 42rem); }
    .studio-hero__title { max-inline-size: none; margin-block-start: -0.44em; }
    .studio-hero__description { inline-size: 62%; margin: 2rem 0 0 20%; }
    .studio-hero__controls { position: absolute; z-index: 2; inset-block-start: clamp(18rem, 28vw, 28rem); inset-inline-start: 8%; padding: 0; }
    .studio-hero__bottom { margin-block-start: 2.5rem; }
    .studio-intro { grid-template-columns: 1fr 3fr; gap: 4rem; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .studio-hero__slide:not([hidden]) { animation: studio-fade-in 0.45s ease-out; }
    .studio-story img { transition: transform 0.6s ease; }
    .studio-story__image-link:hover img { transform: scale(1.035); }
  }
  @keyframes studio-fade-in { from { opacity: 0.35; } to { opacity: 1; } }
}

@layer utilities {
  .studio-visually-hidden { position: absolute; inline-size: 0.0625rem; block-size: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}