@charset "utf-8";

@layer tokens, base, hero, portfolio, utilities;

@layer tokens {
  :root {
    --ap-chalk: #F3EFE5;
    --ap-paper: #FCFBF7;
    --ap-shadow: #DDD6C8;
    --ap-rule: #BEB5A5;
    --ap-viridian: #0B6B4F;
    --ap-evergreen: #1C2924;
    --ap-graphite: #59645E;
    --surface-page: var(--ap-chalk);
    --surface-panel: var(--ap-paper);
    --text-primary: var(--ap-evergreen);
    --text-quiet: var(--ap-graphite);
    --accent: var(--ap-viridian);
    --focus: var(--ap-viridian);
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fs-micro: 0.75rem;
    --fs-small: 0.875rem;
    --fs-body: 1rem;
    --fs-title: clamp(2.01rem, 1.35rem + 2.6vw, 3.06rem);
    --fw-body: 400;
    --fw-emph: 600;
    --ls-display: -0.035em;
    --ls-subhead: -0.02em;
    --lh-display: 0.97;
    --lh-subhead: 1.1;
    --lh-body: 1.55;
    --space-xs: 0.625rem;
    --space-s: 0.875rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
    --tap-min: 2.75rem;
    --focus-width: 2px;
    --focus-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
  }

  @media (forced-colors: active) {
    :root { --focus: Highlight; }
  }
}

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

  html {
    color-scheme: light;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-block-size: 100vh;
    min-block-size: 100svh;
    background-color: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  h1, h2, h3, h4, p, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding-inline-start: 0; }
  ul { list-style: none; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  a { color: inherit; }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [tabindex="-1"]:focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
  }

  .ap-skip {
    position: fixed;
    z-index: 20;
    inset-block-start: var(--space-m);
    inset-inline-start: var(--space-m);
    translate: 0 -200%;
    padding: var(--space-xs) var(--space-m);
    background-color: var(--surface-panel);
    color: var(--text-primary);
  }

  .ap-skip:focus { translate: 0; }
}

@layer hero {
  .ap-hero {
    inline-size: 100%;
    align-items: center;
    overflow-anchor: none;
  }

  .ap-mark {
    display: block;
    align-self: center;
    color: var(--text-primary);
  }

  .ap-wordmark { color: var(--text-primary); }

  @media (forced-colors: active) {
    .ap-mark { color: CanvasText; }
  }
}

@layer portfolio {
  .ap-portfolios { overflow-anchor: none; }

  .ap-case,
  .ap-project,
  .ap-project__copy,
  .ap-project__main,
  .ap-project__media,
  .ap-project footer,
  .ap-case__facts > div { min-inline-size: 0; }

  .ap-case__facts dt {
    color: var(--accent);
    font-weight: var(--fw-emph);
  }

  .ap-case__facts dd { color: var(--text-quiet); }
  .ap-case__facts > div:nth-child(2) dd { color: var(--text-primary); }

  .ap-media { min-inline-size: 0; }
  .ap-media img { display: block; inline-size: 100%; block-size: auto; }
  .ap-media__portrait-pair img { object-position: top; }
  .ap-media figcaption { align-items: baseline; }
  .ap-media figcaption strong {
    color: var(--text-primary);
    font-weight: var(--fw-emph);
  }

  .ap-project footer > .ap-project__links { margin-block-start: var(--space-xs); }

  .ap-work-footer__contact {
    display: inline-flex;
    gap: var(--space-m);
    justify-self: start;
    align-items: baseline;
    min-block-size: var(--tap-min);
    letter-spacing: var(--ls-subhead);
    line-height: var(--lh-subhead);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .ap-work-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
  }

  .ap-work-footer nav a {
    display: inline-flex;
    min-block-size: var(--tap-min);
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-quiet);
    font-size: var(--fs-small);
    text-underline-offset: 0.25em;
  }

  .ap-notfound {
    display: flex;
    min-block-size: 100vh;
    min-block-size: 100svh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
    padding: var(--space-xl) var(--space-m);
    text-align: center;
  }

  .ap-notfound__title {
    font-size: var(--fs-title);
    font-weight: var(--fw-body);
    letter-spacing: var(--ls-display);
    line-height: var(--lh-display);
  }

  .ap-notfound__back { color: var(--accent); text-underline-offset: 0.25em; }
}

@layer utilities {
  .ap-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}