:root {
  --ink: #090909;
  --paper: #f0efe9;
  --line: rgba(240, 239, 233, .25);
  --muted: rgba(240, 239, 233, .62);
  --accent: #ff4b19;
  --grid-size: 10vw;
  --header-h: var(--grid-size);
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
::selection { color: #fff; background: var(--accent); }

.site-header {
  position: relative;
  z-index: 50;
  height: var(--header-h);
  display: grid;
  grid-template-columns: var(--grid-size) calc(var(--grid-size) * 4) 1fr var(--grid-size);
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 9, .96);
}

.brand { display: flex; align-items: center; justify-content: center; padding: 5%; border-right: 1px solid var(--line); overflow: hidden; }
.brand-logo { display: block; width: 90%; height: 90%; object-fit: contain; }
.desktop-nav { display: grid; grid-template-columns: repeat(4, 1fr); }
.desktop-nav a { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-right: 1px solid var(--line); font-size: 14px; transition: .22s ease; }
.desktop-nav a span { align-self: flex-start; margin-top: 19px; font-size: 9px; color: var(--muted); }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); background: var(--paper); }
.desktop-nav a.active::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 7px; height: 7px; background: var(--accent); }
.desktop-nav a:hover span, .desktop-nav a.active span { color: rgba(9,9,9,.56); }
.header-spacer { border-right: 1px solid var(--line); background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--line) 1px); background-size: var(--grid-size) var(--grid-size); }
.menu-mark { display: grid; place-items: center; }
.menu-mark span { width: 14px; height: 14px; background: var(--accent); border-radius: 3px; box-shadow: 0 0 20px rgba(255,75,25,.35); }
.mobile-menu { display: none; }

.site-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), var(--line) 1px),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.portfolio-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}
.hero-image { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.08) 56%, rgba(0,0,0,.65)), url('../img/hero-motion.webp') center / cover; filter: contrast(1.1) brightness(.78); }
.portfolio-hero > *:not(.hero-image, .site-grid) { position: relative; z-index: 2; }
.hero-label { grid-column: 1 / 13; align-self: start; display: flex; justify-content: space-between; margin: 0; padding: 16px 22px; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.hero-statement { grid-column: 2 / 4; grid-row: 2 / 4; align-self: center; margin: 0; padding: 18px; font-size: clamp(18px, 1.7vw, 29px); line-height: 1.08; letter-spacing: -.035em; }
.hero-description { grid-column: 10 / 12; grid-row: 2 / 4; align-self: end; margin: 0; padding: 18px; font-size: 12px; line-height: 1.4; }
.hero-word { grid-column: 2 / 12; grid-row: 3 / 6; align-self: end; margin: 0; padding: 0 0 1.5vh; display: flex; align-items: baseline; gap: 3vw; overflow: hidden; font-weight: 800; letter-spacing: -.085em; line-height: .66; white-space: nowrap; }
.hero-word > span { font-size: clamp(132px, 20vw, 330px); }
.hero-word > strong { font-size: clamp(54px, 9vw, 150px); color: transparent; -webkit-text-stroke: 1px var(--paper); }
.hero-action { grid-column: 1 / 4; grid-row: 5; align-self: end; display: flex; justify-content: space-between; padding: 20px 22px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.hero-action span { color: var(--accent); font-size: 18px; }
.hero-credit { grid-column: 11 / 13; grid-row: 5; align-self: end; margin: 0; padding: 18px; font-size: 9px; line-height: 1.45; text-align: right; text-transform: uppercase; letter-spacing: .08em; }

.page-main { position: relative; min-height: calc(100svh - var(--header-h)); overflow: hidden; border-bottom: 1px solid var(--line); }
.page-main > *:not(.site-grid) { position: relative; z-index: 2; }
.page-heading { min-height: 410px; display: grid; grid-template-columns: 2fr 8fr 2fr; border-bottom: 1px solid var(--line); }
.page-heading > * { margin: 0; padding: 34px 26px; border-right: 1px solid var(--line); }
.page-heading > *:last-child { border-right: 0; }
.page-heading > p { font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.page-heading h1 { align-self: end; font-size: clamp(68px, 8.5vw, 142px); line-height: .78; letter-spacing: -.08em; }
.page-heading h1 span { color: transparent; -webkit-text-stroke: 1px var(--paper); }
.page-heading small { align-self: end; font-size: 10px; line-height: 1.5; color: var(--muted); }

.about-content { display: grid; grid-template-columns: 7fr 5fr; min-height: 570px; }
.about-lead { margin: 0; padding: 46px 7vw 46px 16.6vw; border-right: 1px solid var(--line); font-size: clamp(30px, 4vw, 64px); line-height: 1.04; letter-spacing: -.045em; }
.about-lead strong { color: var(--accent); font-weight: inherit; }
.about-copy { padding: 46px 28px; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.about-copy p { margin: 0; max-width: 460px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.about-copy em { color: var(--paper); font-family: Georgia, serif; }
.about-disciplines { grid-column: 1 / 3; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.about-disciplines div { min-height: 150px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.about-disciplines div:last-child { border-right: 0; }
.about-disciplines span { color: var(--accent); font-size: 9px; }
.about-disciplines strong { font-size: 16px; font-weight: 500; }

.works-heading small { grid-column: 3; }
.works-grid { display: grid; grid-template-columns: 1fr 1fr; }
.work-card { border-bottom: 1px solid var(--line); }
.work-card:nth-child(odd) { border-right: 1px solid var(--line); }
.work-card a { display: block; }
.work-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, rgba(255,75,25,.1), rgba(0,0,0,.3)), url('../img/hero-motion.webp') center / cover; filter: grayscale(1); }
.work-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.7)); transition: background .25s; }
.work-card:hover .work-visual::after { background: linear-gradient(180deg, rgba(255,75,25,.06), rgba(0,0,0,.5)); }
.work-visual span { position: absolute; z-index: 2; top: 20px; left: 22px; font-size: 10px; }
.work-two .work-visual { background-position: 72% center; transform: scaleX(-1); }
.work-two .work-visual span { transform: scaleX(-1); right: 22px; left: auto; }
.work-three .work-visual { filter: grayscale(1) contrast(1.5) brightness(.66); }
.work-four .work-visual { background-position: 85% center; filter: grayscale(1) brightness(.72); }
.work-info { min-height: 105px; display: grid; grid-template-columns: 1fr 4fr auto; align-items: center; gap: 18px; padding: 20px 22px; border-top: 1px solid var(--line); }
.work-info small { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.work-info h2 { margin: 0; font-size: 15px; font-weight: 500; }

.contact-layout { min-height: calc(100svh - var(--header-h)); display: grid; grid-template-columns: 7fr 5fr; }
.contact-intro { padding: 36px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.contact-intro > p:first-child { margin: 0; font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.contact-intro h1 { margin: auto 0 40px; font-size: clamp(68px, 8vw, 132px); line-height: .79; letter-spacing: -.08em; }
.contact-intro h1 span { color: var(--accent); }
.contact-intro > p:not(:first-child) { max-width: 420px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.contact-intro > a { max-width: 420px; margin-top: 24px; padding-bottom: 12px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--paper); font-size: 14px; }
.contact-intro > a span { color: var(--accent); }
.contact-form { padding: 38px 28px; display: flex; flex-direction: column; justify-content: center; }
.contact-form label { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-form label > span { display: block; margin-bottom: 12px; color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; color: var(--paper); font-size: 15px; resize: vertical; }
.contact-form select { appearance: none; }
.contact-form option { color: var(--ink); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(240,239,233,.32); }
.contact-form button { min-height: 64px; margin-top: 24px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: .22s ease; }
.contact-form button:hover { color: #fff; background: var(--accent); }
.contact-form button:disabled { opacity: .62; cursor: wait; }
.contact-form button span { font-size: 19px; }
.honeypot { position: absolute !important; left: -9999px !important; }

.form-alert { position: fixed; z-index: 100; left: 50%; top: 18px; width: min(92vw, 620px); padding: 16px 52px 16px 18px; transform: translateX(-50%); background: var(--paper); color: var(--ink); box-shadow: 0 18px 80px rgba(0,0,0,.35); font-size: 13px; }
.form-alert-error { color: #fff; background: var(--accent); }
.form-alert button { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }

.site-footer { min-height: 108px; padding: 24px 28px; display: grid; grid-template-columns: 2fr 2fr 2fr; align-items: end; gap: 24px; border-bottom: 1px solid var(--line); }
.site-footer p, .site-footer a { margin: 0; font-size: 9px; line-height: 1.6; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.site-footer div { display: flex; gap: 20px; }
.site-footer > a { justify-self: end; }

@media (max-width: 900px) {
  :root { --grid-size: clamp(76px, 25vw, 96px); --header-h: var(--grid-size); }
  .site-header { position: sticky; top: 0; grid-template-columns: 1fr auto; }
  .brand { justify-content: flex-start; padding: 5px 12px; border-right: 0; }
  .brand-logo { height: 64px; }
  .desktop-nav, .header-spacer, .menu-mark { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { width: var(--grid-size); height: var(--grid-size); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; list-style: none; border-left: 1px solid var(--line); font-size: 10px; letter-spacing: .12em; cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { color: var(--accent); font-size: 20px; }
  .mobile-menu nav { position: absolute; top: var(--grid-size); right: 0; width: 100vw; background: var(--ink); border-top: 1px solid var(--line); }
  .mobile-menu nav a { padding: 18px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 22px; }
  .mobile-menu nav a.active { color: var(--accent); }
  .mobile-menu nav small { color: var(--muted); font-size: 9px; }

  .site-grid { background-size: var(--grid-size) var(--grid-size); }
  .portfolio-hero { min-height: calc(100svh - var(--header-h)); grid-template-columns: repeat(4, 1fr); }
  .hero-image { background-position: 58% center; }
  .hero-label { grid-column: 1 / 5; padding: 13px 14px; font-size: 7px; }
  .hero-statement { grid-column: 1 / 3; grid-row: 2 / 4; padding: 14px; font-size: 18px; }
  .hero-description { grid-column: 3 / 5; grid-row: 2 / 4; padding: 14px; font-size: 10px; }
  .hero-word { grid-column: 1 / 5; grid-row: 3 / 6; padding: 0 14px 76px; display: block; white-space: normal; line-height: .74; }
  .hero-word > span { display: block; font-size: 44vw; }
  .hero-word > strong { display: block; font-size: 16.8vw; }
  .hero-action { grid-column: 1 / 3; grid-row: 5; padding: 16px 14px; font-size: 8px; }
  .hero-credit { grid-column: 3 / 5; grid-row: 5; padding: 14px; font-size: 7px; }

  .page-heading { min-height: 370px; grid-template-columns: 1fr; }
  .page-heading > * { border-right: 0; border-bottom: 1px solid var(--line); }
  .page-heading h1 { padding-top: 70px; padding-bottom: 64px; font-size: clamp(52px, 15vw, 88px); }
  .page-heading small { display: none; }
  .about-content { grid-template-columns: 1fr; }
  .about-lead { padding: 50px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .about-copy { padding: 44px 18px; }
  .about-disciplines { grid-column: 1; grid-template-columns: 1fr; }
  .about-disciplines div { min-height: 112px; border-right: 0; border-bottom: 1px solid var(--line); }

  .works-grid { grid-template-columns: 1fr; }
  .work-card:nth-child(odd) { border-right: 0; }
  .work-info { grid-template-columns: 1fr 2fr auto; }

  .contact-layout { grid-template-columns: 1fr; }
  .contact-intro { min-height: 590px; padding: 26px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-intro h1 { font-size: clamp(58px, 16vw, 90px); }
  .contact-form { min-height: 610px; padding: 30px 18px; }

  .site-footer { grid-template-columns: 1fr 1fr; min-height: 190px; padding: 22px 18px; }
  .site-footer div { justify-self: end; flex-direction: column; gap: 4px; text-align: right; }
  .site-footer > a { grid-column: 1 / 3; justify-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-image { animation: drift 18s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: scale(1.01) translateX(-.4%); } to { transform: scale(1.055) translateX(.8%); } }
}