@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(images/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(images/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(images/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(images/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    :root {
      --bone: #f2edde;
      --rust: #af6446;
      --ink: #000000;
      --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
      --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
      --caption: 14px;
      --body: 16px;
      --intro: 26px;
      --display: clamp(42px, 6vw, 60px);
      --gutter: 20px;
      --photo-gap: 18px;
      --about-nav-height: 88px;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
      height: 100%;
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      width: 100%;
      height: 100%;
      min-height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--bone);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: var(--body);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    a:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }

    .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;
    }

    .gallery {
      width: 100vw;
      height: 100vh;
      height: 100svh;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .gallery::-webkit-scrollbar { display: none; }
    .about-view::-webkit-scrollbar { display: none; }
    .content-status { margin: var(--gutter); font-size: var(--body); }

    .gallery-track {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      min-width: 0;
      height: auto;
      padding: 0;
    }

    .project {
      position: relative;
      flex: 0 0 100vh;
      flex-basis: 100svh;
      width: 100vw;
      height: 100vh;
      height: 100svh;
      margin: 0;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .project::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0 0 auto;
      height: clamp(120px, 22vh, 200px);
      background: linear-gradient(to bottom, rgba(242, 237, 222, 0.76), rgba(242, 237, 222, 0.34) 48%, transparent);
      pointer-events: none;
    }

    .project-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 1px solid var(--ink);
      background: var(--bone);
    }

    .project-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .project--landscape .project-image,
    .project--portrait .project-image,
    .project--square .project-image,
    .project--wide .project-image {
      width: 100%;
      height: 100%;
    }

    .project-caption {
      position: absolute;
      z-index: 1;
      top: calc(var(--gutter) + env(safe-area-inset-top, 0px));
      left: var(--gutter);
      width: min(540px, calc(100vw - 40px));
      margin: 0;
      padding: 10px 12px;
      background: transparent;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.45;
    }

    .project-caption span { display: block; }

    .floating-controls {
      position: fixed;
      z-index: 20;
      right: var(--gutter);
      bottom: 16px;
      left: var(--gutter);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      pointer-events: none;
    }

    .floating-controls::before {
      content: "";
      position: fixed;
      z-index: -1;
      right: 0;
      bottom: 0;
      left: 0;
      height: clamp(120px, 22vh, 200px);
      background: linear-gradient(to top, rgba(242, 237, 222, 0.76), rgba(242, 237, 222, 0.34) 48%, transparent);
      pointer-events: none;
    }

    .floating-controls a,
    .floating-controls button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 0;
      pointer-events: auto;
      font-family: var(--font-display);
      font-size: var(--display);
      font-weight: 500;
      line-height: 1.05;
    }

    .floating-controls button {
      appearance: none;
      cursor: pointer;
      position: fixed;
      top: 78%;
      right: var(--gutter);
      transform: translateY(-50%);
      width: 64px;
      height: 64px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      font-size: clamp(52px, 6vw, 72px);
      line-height: 1;
    }

    .floating-controls a:hover { opacity: 0.72; }
    .floating-controls button:hover { opacity: 0.72; }

    .floating-controls button:focus-visible {
      outline: 1px solid currentColor;
      outline-offset: 5px;
    }

    .about-view {
      position: fixed;
      z-index: 10;
      inset: 0;
      display: none;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none;
      overscroll-behavior-y: contain;
      padding: 16px var(--gutter) calc(100px + env(safe-area-inset-bottom, 0px));
      background: var(--rust);
    }

    .about-view:target {
      display: flex;
      bottom: calc(var(--about-nav-height) + env(safe-area-inset-bottom, 0px));
      padding-bottom: 24px;
    }
    .about-view:target ~ .floating-controls .back-to-first { display: none; }
    .about-view:target ~ .floating-controls::before { display: none; }
    .about-view:target ~ .floating-controls {
      right: 0;
      left: 0;
      bottom: 0;
      align-items: center;
      min-height: calc(var(--about-nav-height) + env(safe-area-inset-bottom, 0px));
      padding-inline: var(--gutter);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: var(--rust);
    }

    .about-kicker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-size: var(--caption);
      line-height: 1.35;
    }

    .about-content {
      width: 100%;
      max-width: none;
      margin: 24px 0 0;
    }

    .about-title {
      margin: 0 0 clamp(18px, 4vh, 36px);
      font-family: var(--font-display);
      font-size: var(--display);
      font-weight: 500;
      line-height: 1.05;
    }

    .about-prose {
      display: grid;
      gap: 10px;
      width: 100%;
      max-width: none;
    }

    .about-prose p {
      margin: 0;
      font-size: 18px;
      line-height: 1.4;
    }

    .about-details {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(24px, 5vw, 72px);
      width: 100%;
      max-width: 1200px;
      margin-top: 22px;
    }

    .about-contact,
    .about-social {
      font-size: 18px;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .about-social-links { display: flex; flex-wrap: wrap; gap: 12px; }

    .about-contact-title {
      margin: 0 0 7px;
      font-family: var(--font-display);
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 500;
      line-height: 1.2;
    }

    .about-contact p { margin: 0; }
    .about-contact p + p { margin-top: 8px; }
    .about-contact a {
      font-weight: 500;
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 4px;
    }
    .about-social a {
      display: inline-flex;
      align-items: center;
      min-height: 48px;
      padding: 10px 18px;
      border: 1px solid currentColor;
      font-size: 18px;
      font-weight: 500;
      text-decoration: none;
      transition: color .18s, background-color .18s;
    }
    .about-contact a:hover { opacity: .6; }
    .about-social a:hover { background-color: var(--ink); color: var(--rust); }
    .about-contact a:focus-visible,
    .about-social a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
    @media (max-width: 760px) {
      :root { --gutter: 14px; --display: clamp(38px, 8vw, 52px); }
      .project-caption {
        top: calc(var(--gutter) + env(safe-area-inset-top, 0px));
        width: calc(100vw - 28px);
        padding: 8px 10px;
      }
      .about-view {
        gap: 0;
        padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) calc(84px + env(safe-area-inset-bottom, 0px));
      }
      .about-kicker { gap: 10px; font-size: 12px; }
      .about-title { margin: 0 0 10px; }
      .about-content { margin: 12px 0 0; }
      .about-prose { gap: 5px; }
      .about-prose p { font-size: 16px; line-height: 1.32; }
      .about-details { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
      .about-contact, .about-social { font-size: 16px; line-height: 1.45; }
      .about-social-links { gap: 10px; }
      .about-social a { min-height: 46px; padding: 9px 14px; font-size: 16px; }
      .about-contact-title { margin-bottom: 6px; font-size: 20px; }
    }

    @media (max-width: 520px) {
      .floating-controls { align-items: baseline; gap: 12px; }
      .floating-controls a { padding: 11px 0; font-size: clamp(22px, 7vw, 34px); }
      .floating-controls button { width: 54px; height: 54px; font-size: clamp(42px, 11vw, 50px); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .gallery { scroll-behavior: auto; }
    }