@layer global, component, utility;

@layer global {
  /* Design tokens */
  :root {
    --font-title: 'Montserrat', Arial, sans-serif;
    --font-title-weight: 700;
    --font-wordmark: 'futura-100', Arial, sans-serif;
    --font-wordmark-weight: 700;
    --font-body: 'General Sans', Arial, Helvetica, sans-serif;
    --font-body-weight: 400;
    --card-tint-opacity: .80;
    --color-background: #fff;
    --color-text: #242424;
    --color-muted: #626262;
    --color-rule: #dedbd7;
    --space-section: clamp(3rem, 7vw, 6rem);
  }

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

  * { margin: 0; }
  html { scroll-padding-top: 2rem; }

  body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
  }

  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-underline-offset: .3em; }
  h1, h2 { line-height: 1.1; text-wrap: balance; }
  h2 { font-size: clamp(2rem, 4vw, 3rem); }

  :focus-visible { outline: 3px solid #75401c; outline-offset: 6px; }
}

@layer component {
  /* Navigation */
  .topnav {
    border-bottom: 1px solid var(--color-rule);
  }

  .topnav__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    padding-block: 1.5rem;
  }

  .topnav__wordmark {
    font-family: var(--font-wordmark);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: var(--font-wordmark-weight);
    font-synthesis: none;
    letter-spacing: -.06em;
    line-height: 1;
    text-decoration: none;
  }

  .topnav__links {
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 0;
    list-style: none;
  }

  .topnav__link {
    font-family: 'General Sans', Arial, sans-serif;
    display: inline-block;
    padding-block: .5rem;
    text-decoration: none;
  }

  .topnav__link:hover { text-decoration: underline; }

  /* Hero */
  .hero__wrapper {
    display: grid;
    align-items: center;
    gap: 2rem;
    padding-block: var(--space-section);
  }

  .hero__text { max-width: 35rem; }

  .hero__title {
    margin-block: 1rem 1.5rem;
    font-family: var(--font-title);
    font-size: clamp(2.5rem, 5vw, 4.75rem);
    font-weight: var(--font-title-weight);
    font-synthesis: none;
    letter-spacing: -.045em;
  }

  .hero__graphic { letter-spacing: -.015em; }

  /* Supporting typography */
  .hero__description { max-width: 36ch; font-size: 1.125rem; color: var(--color-muted); }

  .hero__description,
  .project-card__category,
  .gallery__hint {
    font-family: var(--font-body);
    font-weight: var(--font-body-weight);
  }

  .hero__artwork { min-width: 0; }
  .hero__logo { width: 100%; }
  .text-link { display: inline-flex; gap: 1.5rem; margin-top: 2rem; padding-block: .5rem; font-weight: 700; }

  .hero .text-link { font-family: 'Montserrat', Arial, sans-serif; }

  /* Sections */
  .section {
    padding-block: var(--space-section);
    border-top: 1px solid var(--color-rule);
    scroll-margin-top: 2rem;
  }

  .section h2 {
    margin-top: .75rem;
    font-family: 'General Sans', Arial, sans-serif;
    font-weight: 600;
  }

  .section__copy {
    max-width: 65ch;
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
  }
  .section__copy p + p { margin-top: 1rem; }

  /* Project gallery */
  .gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
  }

  .project-card {
    min-width: 0;
    position: relative;
    border-radius: 12px;
    --card-inset: 1.5rem;
    --card-duration: 350ms;
    --card-ease: ease;
    transition: transform var(--card-duration) var(--card-ease);
  }

  /* Card color variations */
  .project-card--one { --card-tint: #05aff2; }
  .project-card--two { --card-tint: #97bf04; }
  .project-card--three { --card-tint: #f29f05; }
  .project-card--four { --card-tint: #f24c27; }

  /* Card link */
  .project-card__preview {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    border-radius: inherit;
  }

  /* Card image frame */
  .project-card__image {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1efec;
    border-radius: inherit;
    isolation: isolate;
  }

  /* Card image */
  .project-card__image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    filter: grayscale(1);
    transition: filter var(--card-duration) var(--card-ease),
      transform var(--card-duration) var(--card-ease);
  }

  /* Image variations */
  .project-card__image--photo img { object-fit: cover; }

  .project-card__image--kingdom img {
    transform: scale(1.18);
    transform-origin: 70% 57%;
  }

  .project-card__image--atoz img {
    position: absolute;
    width: 174%;
    max-width: none;
    height: auto;
    left: -36.5%;
    top: -27.5%;
  }

  .project-card__image--social img {
    position: absolute;
    width: 367%;
    max-width: none;
    height: auto;
    left: -89.8%;
    top: -88.5%;
  }

  /* Enlarge the full composition inside the clipping window; the source stays intact. */
  .project-card__image--brandfolder img {
    position: absolute;
    width: 210%;
    max-width: none;
    height: auto;
    left: -3.45%;
    top: -43.5%;
  }

  /* Blur only the source image beneath the title, before the color is painted. */
  .project-card--punched .project-card__image::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(var(--title-left) - 12px);
    top: calc(var(--title-top) - 12px);
    width: calc(var(--title-width) + 24px);
    height: calc(var(--title-height) + 24px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Feather the image blur into the surrounding photo on all four edges. */
    mask-image:
      linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent),
      linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-composite: intersect;
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent),
      linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    -webkit-mask-composite: source-in;
    pointer-events: none;
    transition: opacity var(--card-duration) var(--card-ease);
  }

  /* Card overlay */
  .project-card__image::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--card-tint);
    mask-image: var(--title-mask, none);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
    transition: opacity var(--card-duration) var(--card-ease);
    opacity: var(--card-tint-opacity);
  }

  /* Card interaction */
  .project-card:focus-within,
  .project-card:hover {
    z-index: 1;
    transform: scale(1.025);
  }

  .project-card__preview:focus-visible .project-card__image::after,
  .project-card:hover .project-card__image::after,
  .project-card__preview:focus-visible .project-card__image::before,
  .project-card:hover .project-card__image::before {
    opacity: 0;
  }

  .project-card__preview:focus-visible .project-card__image img,
  .project-card:hover .project-card__image img {
    filter: grayscale(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-card__image img,
    .project-card__image::before,
    .project-card__image::after { transition: none; }
    .project-card:hover,
    .project-card:focus-within { transform: none; }
    .project-card__preview .project-card__image img { transform: none; }
  }

  /* Card title and category */
  .gallery__hint {
    margin-top: 1.5rem;
    color: var(--color-muted);
    font-size: .875rem;
  }

  .project-card__title {
    position: absolute;
    z-index: 1;
    padding: 0;
    inset: auto var(--card-inset) var(--card-inset);
    color: #fff;
    font-family: 'Raleway', Arial, sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    line-height: 1.1;
    pointer-events: none;
  }
  .project-card--one .project-card__title,
  .project-card--two .project-card__title {
    font-size: clamp(1.1rem, 2vw, 1.6rem);
  }

  .project-card__title-line {
    display: block;
    white-space: nowrap;
  }
  .project-card--punched .project-card__title {
    color: transparent;
  }

  .project-card__category {
    padding-inline: var(--card-inset);
    margin-top: .75rem;
    color: var(--color-muted);
    font-size: .875rem;
  }

  /* Footer */
  .footer {

    padding-block: 2rem;
    border-top: 1px solid var(--color-rule);
    font-family: var(--font-body);
    font-weight: 700;
  }

  /* Responsive layout */
  @media (min-width: 40rem) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 50rem) {
    .hero__wrapper { position: relative; grid-template-columns: 1fr 1fr; }
    /* Frame the artwork itself, excluding the source PNG's empty margins. */
    .hero__artwork {
      position: absolute;
      top: var(--logo-top, 5rem);
      left: 75%;
      transform: translateX(-50%);
      height: var(--logo-height, 15rem);
      width: auto;
      max-width: calc(50% - 1rem);
      aspect-ratio: 611 / 536;
      overflow: hidden;
      justify-self: center;
      margin-top: 0;
    }
    .hero__logo {
      position: absolute;
      width: 316.694%;
      max-width: none;
      height: auto;
      left: -102.782%;
      top: -116.604%;
    }
  }
}

@layer utility {
  .wrapper {
    width: min(calc(100% - 3rem), 75rem);
    margin-inline: auto;
  }

  .eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    padding: .75rem 1rem;
    background: #fff;
    transform: translateY(-200%);
  }

  .skip-link:focus { transform: translateY(0); }
}

@layer component {
  .about-layout {
    width: 84%;
    display: grid;
    gap: 2rem;
    padding-block: clamp(3rem, 7vw, 7rem) clamp(2rem, 4vw, 4rem);
  }

  .about-layout h1 {
    font-family: var(--font-title);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -.035em;
    color: #05aff2;
  }
  .about-layout h2 {
    font-family: var(--font-body);
    font-weight: 10;
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
    line-height: 1.2;
  }
  .about-layout .section__copy {
    font-size: .9375rem;
    line-height: 1.8;
    margin-top: 1.5rem;
  }
  .about-layout .section__copy p + p {
    margin-top: 1.25rem;
   }
  .about-layout .section__copy a {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .about-story__accent {
    color: #f24c27;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }
  .about-followup {
    grid-column: 1 / -1;
    margin-top: -1.25rem;
    font-size: .9375rem;
    line-height: 1.8;
  }
  .about-followup a {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .about-interests {
    grid-column: 1 / -1;
    margin-top: -2rem;
  }
  .about-interests h2 {
    color: #05aff2;
    font-size: clamp(1.6rem, 2.4vw,2rem);
  }
  .about-portrait {
    min-width: 0;
    width: min(100%, 26rem);
    justify-self: center;
    aspect-ratio: 2 / 3;
    background: #f1efec;
    border: 1px solid var(--color-rule);
    display: grid; place-items: center;
    color: var(--color-muted);
    font-family: var(--font-body);
  }
  .about-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
  }
  .topnav__link[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: .3em;
  }
  @media (min-width: 48rem) {
    .about-layout .section__copy p + p {
    margin-top: 1.75rem; }
    .about-story__accent { margin-bottom: 1.5rem; }
  }
  @media (min-width: 64rem) {
    .about-layout { width: 80%; max-width: 1064px; padding-top: 8.75rem; padding-right: clamp(1rem, 2vw, 2rem); grid-template-columns: 1.1fr 1fr; column-gap: clamp(4rem, 8vw, 8rem); align-items: start; }
    .about-portrait { width: 100%; justify-self: stretch; }
    .about-interests { margin-top: -4rem; }
  }
}