@layer reset, base, layout, components, responsive;

/* ---- Fonts (local, shared with R3) ---- */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("assets/fonts/archivo-narrow-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("assets/fonts/archivo-narrow-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  body, h1, h2, p, figure, dl, dd, ol, ul, address { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img { display: block; width: 100%; height: auto; }
  a { color: inherit; }
}

@layer base {
  :root {
    --paper: oklch(96.8% 0.012 78);
    --paper-deep: oklch(92.8% 0.018 76);
    --graphite: oklch(24% 0.018 55);
    --graphite-soft: oklch(31% 0.018 55);
    --muted: oklch(44% 0.018 58);
    --brick: oklch(49% 0.138 31);
    --brick-dark: oklch(40% 0.12 31);
    --brick-soft: oklch(75% 0.088 34);
    --accent: var(--brick);
    --accent-hover: var(--brick-dark);
    --on-accent: #fff;
    --rule: color-mix(in oklch, var(--graphite) 12%, transparent);
    --rule-on-dark: color-mix(in oklch, var(--paper) 18%, transparent);
    --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-narrow: "Archivo Narrow", "Arial Narrow", sans-serif;
    --page-x: clamp(1.25rem, 5vw, 6rem);
    --wrap: 78rem;
    --grid-gap: clamp(1.5rem, 3vw, 3.5rem);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --img-grade: contrast(1.05) saturate(.9) sepia(.06);
    --radius: clamp(1.25rem, 3vw, 2.5rem);
  }

  body {
    min-width: 320px;
    background: var(--paper);
    color: var(--graphite);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  h1, h2 { font-weight: 600; letter-spacing: -.028em; line-height: 1.04; text-wrap: balance; }
  h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
  h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
  p, dd { text-wrap: pretty; }

  ::selection { background: var(--accent); color: var(--paper); }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .skip-link {
    position: fixed; z-index: 200; top: .75rem; left: .75rem;
    padding: .75rem 1rem; background: var(--graphite); color: var(--paper);
    transform: translateY(-160%); transition: transform 200ms var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }

  .eyebrow {
    font-family: var(--font-narrow); font-size: .8rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--brick-dark);
  }
  .eyebrow-light { color: var(--brick-soft); }

  .list-title,
  figcaption {
    font-family: var(--font-narrow); font-size: .78rem; font-weight: 700;
    letter-spacing: .055em; text-transform: uppercase; line-height: 1.25;
  }
}

/* ================= LAYOUT ================= */
@layer layout {

  /* ---- Header ---- */
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    display: flex; align-items: center; gap: 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem) var(--page-x);
    transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease), padding 300ms var(--ease);
  }
  .site-header.is-scrolled {
    background: color-mix(in oklch, var(--paper) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: 0 1px 0 var(--rule);
    padding-top: .75rem; padding-bottom: .75rem;
  }
  .brand { flex: 0 0 auto; display: inline-flex; }
  .brand img {
    max-height: 3.25rem; width: auto;
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.35));
    transition: filter 300ms var(--ease);
  }
  .site-header.is-scrolled .brand img { filter: none; }

  nav { margin-left: auto; display: flex; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
  nav a {
    min-height: 44px; display: inline-flex; align-items: center;
    font-size: .9rem; color: var(--paper);
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
    text-decoration-thickness: 1px; text-underline-offset: 6px;
    text-decoration-color: transparent;
    transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
  }
  nav a:hover { text-decoration-color: currentColor; }
  .is-scrolled nav a { color: var(--graphite); text-shadow: none; }
  .is-scrolled nav a:hover { color: var(--brick-dark); }

  /* header CTA pill */
  .header-cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem;
    min-height: 44px; padding: .5rem .55rem .5rem 1.15rem;
    border-radius: 999px; background: var(--accent); color: var(--on-accent);
    font-family: var(--font-narrow); font-weight: 700; font-size: .95rem;
    letter-spacing: .02em; text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 20px -6px color-mix(in oklch, var(--accent) 60%, transparent);
    transition: background-color 200ms var(--ease), transform 200ms var(--ease);
  }
  .header-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
  .header-cta-icon {
    width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
    border-radius: 50%; background: #fff; color: var(--accent);
  }
  .header-cta-icon svg { width: 1rem; height: 1rem; fill: currentColor; }

  /* ---- Hero ---- */
  .hero {
    position: relative; isolation: isolate;
    min-height: 100svh; display: flex; align-items: flex-end;
    padding: 8rem var(--page-x) clamp(3rem, 6vw, 5.5rem);
  }
  .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: var(--img-grade); }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to top, color-mix(in oklch, var(--graphite) 90%, transparent) 0%, color-mix(in oklch, var(--graphite) 34%, transparent) 46%, transparent 72%),
      linear-gradient(to right, color-mix(in oklch, var(--graphite) 82%, transparent) 0%, color-mix(in oklch, var(--graphite) 34%, transparent) 44%, transparent 74%);
  }
  .hero-inner { max-width: var(--wrap); width: 100%; margin-inline: auto; color: var(--paper); }
  .hero-folio {
    font-family: var(--font-narrow); font-size: .82rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--brick-soft);
    margin-bottom: 1.5rem;
  }
  .hero h1 { max-width: 16ch; text-shadow: 0 2px 20px color-mix(in oklch, var(--graphite) 62%, transparent); }
  .hero h1 span {
    display: block; color: oklch(80% 0.11 38);
    font-family: var(--font-narrow); font-weight: 500; font-style: italic;
    letter-spacing: -.01em;
  }
  .hero-intro {
    max-width: 46ch; margin-top: 1.75rem;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: color-mix(in oklch, var(--paper) 92%, transparent);
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

  /* pills */
  .pill {
    display: inline-flex; align-items: center; gap: .7rem;
    min-height: 48px; padding: .55rem 1.5rem;
    border-radius: 999px; font-weight: 600; letter-spacing: -.005em;
    text-decoration: none; white-space: nowrap;
    transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease), border-color 220ms var(--ease);
  }
  .pill-solid { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 22px -6px color-mix(in oklch, var(--accent) 55%, transparent); }
  .pill-solid:hover { background: var(--accent-hover); transform: translateY(-2px); }
  .pill-ghost { padding-right: .55rem; color: var(--paper); border: 1px solid color-mix(in oklch, var(--paper) 55%, transparent); }
  .pill-ghost:hover { background: color-mix(in oklch, var(--paper) 14%, transparent); }
  .pill-icon {
    width: 2rem; height: 2rem; display: grid; place-items: center; flex-shrink: 0;
    border-radius: 50%; background: #fff; color: var(--accent);
    transition: transform 300ms var(--ease);
  }
  .pill-icon svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .pill:hover .pill-icon { transform: rotate(-45deg); }
  .pill-lg { min-height: 52px; padding: .6rem .6rem .6rem 1.75rem; font-size: 1.05rem; }

  /* ---- USP bar (floating light) ---- */
  .usp {
    position: relative; z-index: 2;
    max-width: var(--wrap); margin: -3.5rem auto 0; padding-inline: var(--page-x);
  }
  .usp ul {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--paper); border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -30px color-mix(in oklch, var(--graphite) 55%, transparent);
    overflow: hidden;
  }
  .usp li { padding: clamp(1.5rem, 2.2vw, 2.25rem); border-left: 1px solid var(--rule); }
  .usp li:first-child { border-left: 0; }
  .usp-mark {
    font-family: var(--font-narrow); font-weight: 700; font-size: .82rem;
    letter-spacing: .1em; color: var(--brick);
  }
  .usp-title { margin-top: .9rem; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
  .usp-text { margin-top: .3rem; color: var(--muted); font-size: .92rem; line-height: 1.5; }

  /* ---- Section shell ---- */
  .about, .band, .projects { padding-inline: var(--page-x); }

  /* ---- About (light editorial split) ---- */
  .about {
    max-width: var(--wrap); margin-inline: auto;
    padding-block: clamp(5rem, 10vw, 9rem);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
  }
  .about-copy { max-width: 34rem; }
  .about-copy h2 { margin-top: 1.25rem; max-width: 16ch; }
  .about-lead { margin-top: 1.75rem; max-width: 52ch; color: var(--muted); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
  .about-services {
    margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }
  .about-services li {
    padding-block: .85rem; border-bottom: 1px solid var(--rule);
    font-size: 1.02rem; font-weight: 500;
  }
  .about-media { position: relative; }
  .about-media img {
    aspect-ratio: 980 / 620; object-fit: cover; filter: var(--img-grade);
    border-radius: var(--radius) var(--radius) var(--radius) clamp(4rem, 9vw, 7rem);
  }
  .about-media figcaption {
    margin-top: 1rem; color: var(--muted);
  }

  /* ---- Dark method band ---- */
  .band {
    background: var(--graphite); color: var(--paper);
    border-radius: var(--radius);
    max-width: calc(var(--wrap) + 2 * var(--page-x));
    margin-inline: auto;
    padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem);
  }
  .band-head { max-width: 40rem; }
  .band-head h2 { margin-top: 1rem; }
  .band-list {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
  }
  .band-list li { padding-top: 1.5rem; border-top: 1px solid var(--rule-on-dark); }
  .band-mark {
    font-family: var(--font-narrow); font-weight: 700; font-size: 1rem;
    letter-spacing: .05em; color: var(--brick-soft); font-variant-numeric: tabular-nums;
  }
  .band-item-title { margin-top: 1rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
  .band-item-text { margin-top: .5rem; color: var(--paper-deep); font-size: .95rem; line-height: 1.6; }

  /* ---- Projects ---- */
  .projects { max-width: var(--wrap); margin-inline: auto; padding-block: clamp(5rem, 10vw, 9rem); }
  .projects-head { max-width: 40rem; }
  .projects-head h2 { margin-top: 1rem; }
  .project-grid {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .project-card figure { overflow: hidden; border-radius: calc(var(--radius) * .8); }
  .project-card img {
    aspect-ratio: 4 / 5; object-fit: cover; filter: var(--img-grade);
    transition: transform 600ms var(--ease);
  }
  .project-card:hover img { transform: scale(1.03); }
  .project-name { margin-top: 1.25rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
  .project-meta { margin-top: .3rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }

  .project-register {
    margin-top: clamp(3rem, 6vw, 5rem);
    max-width: 40rem;
  }
  .project-register .list-title { padding-bottom: .75rem; color: var(--muted); border-bottom: 1px solid var(--rule); }
  .project-register ol { margin-top: .5rem; }
  .project-register li {
    display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
    padding-block: 1.25rem; border-bottom: 1px solid var(--rule);
  }
  .project-register strong { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; }
  .project-register em {
    color: var(--muted); font-style: normal;
    font-family: var(--font-narrow); font-size: .78rem; font-weight: 700;
    letter-spacing: .055em; text-transform: uppercase;
  }

  /* ---- Closing CTA ---- */
  .closing {
    width: min(calc(var(--wrap) + 2 * var(--page-x)), 100% - 2 * var(--page-x));
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    display: grid; grid-template-columns: 1fr 1.15fr;
    background: var(--graphite); color: var(--paper);
    border-radius: var(--radius); overflow: hidden;
  }
  .closing-media { position: relative; min-height: 22rem; }
  .closing-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
  .closing-copy {
    padding: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 5rem);
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .closing-copy h2 { margin-top: 1rem; }
  .closing-text { margin-top: 1.25rem; max-width: 38ch; color: var(--paper-deep); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
  .closing-copy .pill { margin-top: 2.25rem; }
  .closing address {
    margin-top: 2.5rem; display: grid; gap: .4rem;
    font-style: normal; color: var(--paper-deep);
    font-family: var(--font-narrow); font-size: .85rem; letter-spacing: .03em;
  }

  /* ---- Footer ---- */
  footer {
    max-width: var(--wrap); margin-inline: auto; padding: 2rem var(--page-x);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-family: var(--font-narrow); font-size: .78rem; font-weight: 700;
    letter-spacing: .055em; text-transform: uppercase; color: var(--muted);
  }
}

/* ================= COMPONENTS ================= */
@layer components {
  html.js .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ================= RESPONSIVE ================= */
@layer responsive {
  @media (max-width: 960px) {
    .usp ul { grid-template-columns: repeat(2, 1fr); }
    .usp li:nth-child(3) { border-left: 0; }
    .usp li:nth-child(n+3) { border-top: 1px solid var(--rule); }

    .about { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-copy { max-width: none; }
    .about-media { order: -1; }
    .about-media img { aspect-ratio: 16 / 10; border-radius: var(--radius) var(--radius) var(--radius) clamp(2.5rem, 8vw, 4rem); }

    .band-list { grid-template-columns: 1fr; gap: 0; }
    .band-list li { padding-block: 1.5rem; }

    .project-grid { grid-template-columns: 1fr 1fr; }

    .closing { grid-template-columns: 1fr; }
    .closing-media { min-height: 15rem; }
  }

  @media (max-width: 620px) {
    :root { --page-x: 1.25rem; }
    .site-header { gap: 1rem; }
    nav { display: none; }
    .header-cta { margin-left: auto; }
    .header-cta span:first-child { font-size: .9rem; }

    .hero { min-height: 92svh; padding-top: 6.5rem; }
    .hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); max-width: 100%; }
    .hero-intro { font-size: 1.05rem; }
    .hero-actions { gap: .75rem; }
    .pill { width: 100%; justify-content: center; }
    .pill-ghost { justify-content: space-between; padding-left: 1.5rem; }

    .usp { margin-top: -2.5rem; }
    .usp ul { grid-template-columns: 1fr; }
    .usp li { border-left: 0; border-top: 1px solid var(--rule); }
    .usp li:first-child { border-top: 0; }

    .about-services { grid-template-columns: 1fr; }

    .project-grid { grid-template-columns: 1fr; }

    .closing-copy .pill { width: 100%; justify-content: space-between; padding-left: 1.75rem; }
    footer { flex-direction: column; gap: .5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
    html.js .reveal { opacity: 1; transform: none; transition: none; }
    .project-card:hover img { transform: none; }
  }
}