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

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

  body {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  ul {
    margin: 0;
  }

  img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
}

@layer tokens {
  :root {
    --ink: #fff;
    --bg: #000;
    --veil: rgb(0 0 0 / 0.7);
    --noise-base: #1a1a1a;
    --font-body: Arial, sans-serif;
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --corner-size: 20px;
    --corner-size-hover: 51px;
    --z-behind: -1;
  }
}

@layer base {
  html {
    height: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    min-height: 100%;
    background-color: var(--bg);
    color: #333;
    font: 400 14px/20px var(--font-body);
  }

  
  strong,
  b {
    font-weight: 700;
  }

  
  .noise-overlay {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--z-behind);
    background-color: var(--noise-base);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }

  .noise-overlay::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='7.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 25 -15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
    animation: noise-shift 0.3s steps(4) infinite;
  }

  @keyframes noise-shift {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .noise-overlay::after {
      animation: none;
    }
  }
}

@layer layout {
  .section-veil {
    background-color: var(--veil);
  }

  .wrap {
    margin-inline: auto;
    padding-block: 60px;
  }

  .hero {
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 40px;
  }

  .hero-grid {
    display: flex;
    flex-flow: column;
    gap: 30px;
    padding-bottom: 40px;
  }

  .hero-roles {
    padding-bottom: 0;
  }

  .projects {
    overflow: hidden;
  }

  .project-row {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
    width: 100%;
    margin-block: 10vh;
  }

  
  .footer-bar {
    position: relative;
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: auto;
    gap: 40px;
    justify-content: center;
    align-items: center;
    margin-block: 40px;
  }

  @media (min-width: 30rem) {
    .wrap {
      padding-block: 100px;
    }

    .hero {
      gap: 20px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .hero-grid > :first-child {
      align-self: start;
    }

    .hero-roles {
      justify-self: end;
    }

    .project-row {
      margin-block: 15vh;
    }
  }

  @media (min-width: 48rem) {
    .wrap {
      max-width: 728px;
    }

    .project-row {
      flex-flow: row;
      margin-block: 20vh;
    }

    .footer-bar {
      grid-template-rows: repeat(3, auto);
      grid-template-columns: auto auto auto;
      gap: 0;
      justify-content: space-between;
    }
  }

  @media (min-width: 62rem) {
    .wrap {
      max-width: 940px;
    }

    .project-row {
      margin-block: 20vw;
    }
  }

  @media (min-width: 120rem) {
    .project-row {
      gap: 10%;
    }
  }
}

@layer components {
  .page-title {
    max-width: 300px;
    margin-bottom: 10px;
    color: var(--ink);
    font: 700 30px/44px var(--font-ui);
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.45);
  }

  .page-title.hyphenated {
    max-width: 350px;
  }

  .eyebrow {
    color: var(--ink);
    text-transform: uppercase;
  }

  .tagline {
    color: var(--ink);
    font: 700 15px/36px var(--font-ui);
    text-align: right;
  }

  
  .frame-btn,
  .text-btn {
    position: relative;
    display: inline-block;
    flex: none;
    max-width: 100%;
    align-self: center;
    color: var(--ink);
    text-decoration: none;
  }

  .frame-btn::before,
  .frame-btn::after,
  .frame-btn .btn-label::before,
  .frame-btn .btn-label::after {
    content: "";
    position: absolute;
    width: var(--corner-size);
    height: var(--corner-size);
    transition: width 0.2s ease-out, height 0.2s ease-out;
  }

  .frame-btn::before {
    inset: 0 auto auto 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
  }

  .frame-btn::after {
    inset: 0 0 auto auto;
    border-top: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
  }

  .frame-btn .btn-label::before {
    inset: auto auto 0 0;
    border-bottom: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
  }

  .frame-btn .btn-label::after {
    inset: auto 0 0 auto;
    border-bottom: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
  }

  @media (hover: hover) {
    .frame-btn:hover::before,
    .frame-btn:hover::after,
    .frame-btn:hover .btn-label::before,
    .frame-btn:hover .btn-label::after {
      width: var(--corner-size-hover);
      height: var(--corner-size-hover);
    }
  }

  .frame-btn:focus-visible::before,
  .frame-btn:focus-visible::after,
  .frame-btn:focus-visible .btn-label::before,
  .frame-btn:focus-visible .btn-label::after {
    width: var(--corner-size-hover);
    height: var(--corner-size-hover);
  }

  .btn-label {
    display: block;
    padding: 30px 15px;
    color: var(--ink);
    font: 600 10px/1.2 var(--font-ui);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
  }

  .cta-row {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 40px;
  }

  .project-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    overflow: hidden;
    border: 6px solid #000;
    border-radius: 20px;
  }

  .project-card img {
    position: relative;
    min-width: 100%;
    max-width: none;
    min-height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .project-link {
    display: block;
    margin-top: 40px;
  }

  
  .hero-section {
    position: relative;
  }

  
  .hero-section .hero {
    position: relative;
    z-index: 1;
  }

  .hero-section .wrap {
    position: relative;
  }

  
  .hero-taglines {
    display: flex;
    flex-flow: column;
    gap: 8px;
  }

  .hero-tagline {
    max-width: max-content;
    color: var(--ink);
    font: 600 10px/1.6 var(--font-ui);
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.55);
  }

  .hero-tagline::before {
    content: "|";
    margin-right: 12px;
  }

  
  .hero-section .cta-row {
    flex-flow: row;
    justify-content: center;
    margin-top: 320px;
  }

  @media (min-width: 48rem) {
    .hero-section .cta-row {
      justify-content: flex-start;
      margin-top: 40px;
    }
  }

  
  .hero-section .hero {
    padding-bottom: 40px;
  }

  @media (min-width: 48rem) {
    .hero-section .hero {
      padding-bottom: 40px;
    }
  }

  .badge-figure {
    position: absolute;
    top: 0;
    margin: 0;
  }

  .badge-figure img,
  .badge-figure canvas {
    display: block;
    width: 100%;
    height: auto;
  }

  
  .badge-figure img {
    visibility: hidden;
  }

  .badge-figure.is-static img {
    visibility: visible;
  }

  .badge-figure canvas {
    position: absolute;
    inset: 0;
    visibility: hidden;
  }

  .badge-figure.is-live canvas {
    visibility: visible;
  }

  .badge-figure.is-live img {
    visibility: hidden;
  }

  
  
  .badge-cta {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
    z-index: 2;
  }

  .badge-figure.is-settled .badge-cta {
    opacity: 1;
    visibility: visible;
  }

  
  .badge-cta {
    pointer-events: none;
  }

  .badge-figure.is-resting .badge-cta {
    pointer-events: auto;
  }

  .badge-cta a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4a4a52;
    font: 600 10px/1 var(--font-ui);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
  }

  .badge-cta a + a {
    border-left: 1px solid rgb(0 0 0 / 0.18);
  }

  @media (hover: hover) {
    .badge-cta a:hover {
      background: rgb(0 0 0 / 0.05);
    }
  }

  .badge-cta a:focus-visible {
    outline: 2px solid #4a4a52;
    outline-offset: -2px;
  }

  .badge-desktop .badge-cta {
    left: 25.3%;
    width: 56.3%;
    top: 83.5%;
    height: 11.8%;
    transform-origin: 49.2% -125.6%;
  }

  .badge-mobile .badge-cta {
    left: 25.3%;
    width: 56.3%;
    top: 88.8%;
    height: 8%;
    transform-origin: 49.2% -125.5%;
  }

  .badge-desktop {
    display: none;
  }

  .badge-mobile {
    right: 16px;
    width: 280px;
  }

  
  .ki-note {
    position: absolute;
    right: 24px;
    bottom: 40px;
    margin: 0;
    color: rgb(255 255 255 / 0.55);
    font-size: 10px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    z-index: 1;
  }

  @media (min-width: 48rem) {
    .badge-desktop {
      display: block;
      right: calc((100% - 728px) / 2 + 40px);
      width: 320px;
    }

    .badge-mobile {
      display: none;
    }

    .ki-note {
      right: 0;
      bottom: 24px;
    }

    .hero-tagline {
      font-size: 13px;
      letter-spacing: 3px;
    }

    .hero-taglines {
      gap: 10px;
    }
  }

  @media (min-width: 62rem) {
    .badge-desktop {
      right: calc((100% - 940px) / 2 + 40px);
      width: 400px;
    }
  }

  
  .footer-about {
    max-width: 640px;
    margin: 0 auto 40px;
    padding-inline: 40px;
  }

  .footer-about-title {
    margin: 0 0 12px;
    color: var(--ink);
    font: 600 12px/1.4 var(--font-ui);
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .footer-about p {
    margin: 0;
    color: rgb(255 255 255 / 0.72);
    font-size: 14px;
    line-height: 1.6;
  }

  .contact-toggle-wrap {
    display: flex;
    flex-flow: column;
    gap: 10px;
    width: 100%;
    transition: opacity 1s;
  }

  @media (prefers-reduced-motion: reduce) {
    .contact-toggle-wrap {
      transition: none;
    }
  }

  .contact-toggle-wrap.is-muted {
    opacity: 0.5;
  }

  .contact-menu {
    display: none;
    flex-flow: column;
    gap: 10px;
    grid-area: 2 / 1 / 3 / 2;
    width: 100%;
    margin-top: -40px;
  }

  .contact-menu.is-open {
    display: flex;
  }

  .contact-btn {
    width: 80%;
  }

  .stack-page {
    display: flex;
    flex-flow: column;
    height: 100%;
  }

  .error-note {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
    margin-top: 60px;
  }

  
  .legal-text {
    display: flow-root;
    padding-inline: 20px;
  }

  .legal-text h2 {
    margin: 20px 0 10px;
    color: var(--ink);
    font-size: 22px;
    line-height: 36px;
  }

  .legal-text h3 {
    margin: 20px 0 10px;
    color: var(--ink);
    font-size: 20px;
    line-height: 30px;
  }

  .legal-text h4 {
    margin: 10px 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 24px;
  }

  .legal-text p {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 300;
  }

  .legal-text ul {
    margin-bottom: 10px;
    padding-left: 40px;
  }

  .legal-text li {
    color: var(--ink);
    font-size: 16px;
    font-weight: 300;
  }

  .legal-text a {
    color: var(--ink);
  }

  @media (min-width: 30rem) {
    .btn-label {
      padding: 30px 35px;
      font-size: 12px;
    }

    .cta-row {
      flex-flow: row;
      gap: 0;
    }

    .contact-btn {
      width: 100%;
    }

    .contact-toggle-wrap {
      width: auto;
    }
  }

  @media (min-width: 48rem) {
    .page-title {
      font-size: 38px;
    }

    .tagline {
      font-size: 25px;
    }

    .project-card {
      width: 80%;
    }

    .project-link {
      position: relative;
      top: 102%;
      right: 2%;
      margin-top: 0;
    }

    .contact-menu {
      grid-area: auto;
      margin-top: 0;
    }

    .error-note {
      min-height: 20vh;
    }
  }

  @media (min-width: 62rem) {
    .project-card {
      width: 65vw;
    }

    .project-card img {
      object-fit: contain;
    }

    .project-link {
      top: auto;
      bottom: 50%;
      right: 7%;
    }
  }

  @media (min-width: 90rem) {
    .project-card {
      width: 60vw;
    }

    .project-link {
      right: 10%;
    }
  }

  @media (min-width: 120rem) {
    .project-card {
      width: 50vw;
    }

    .project-link {
      right: 12%;
    }

    .error-note {
      min-height: 40vh;
    }
  }
}

@layer utilities {
  .hyphenated {
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
  }

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