:root {
  --ink: #141613;
  --bone: #edece6;
  --dust: #c6c3b8;
  --moss: #788065;
  --red: #e3462b;
  --line: rgba(20, 22, 19, 0.22);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", Helvetica, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button,
a { color: inherit; }

a { text-decoration: none; }

button { font: inherit; }

.site-shell { overflow: hidden; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: stretch;
  width: 100%;
  height: 88px;
  border-bottom: 1px solid var(--line);
  background: rgba(237, 236, 230, 0.94);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 260px;
  padding: 0 28px;
  border-right: 1px solid var(--line);
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: var(--red);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
}

.brand strong,
.brand small { display: block; }

.brand strong { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; }

.brand small { margin-top: 2px; color: #5a5c55; font-family: var(--mono); font-size: 10px; letter-spacing: -0.02em; }

.header-signal { display: flex; align-items: center; gap: 14px; padding: 0 28px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 10px; line-height: 1.45; }

.header-signal > span:first-child { width: 8px; height: 8px; background: var(--red); }

.menu-toggle {
  display: grid;
  grid-template-columns: auto 18px;
  grid-template-rows: repeat(2, 4px);
  align-content: center;
  column-gap: 14px;
  width: 136px;
  border: 0;
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.menu-toggle span { grid-row: 1 / 3; }
.menu-toggle i { width: 18px; height: 1px; background: currentColor; transition: transform 180ms ease; }
.menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(2px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3px) rotate(-45deg); }

.menu-panel {
  position: fixed;
  z-index: 15;
  inset: 88px 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  grid-template-rows: repeat(6, minmax(0, 1fr)) auto;
  padding: 36px 28px 24px;
  min-height: min(610px, calc(100vh - 88px));
  transform: translateY(-110%);
  border-bottom: 1px solid var(--ink);
  background: var(--red);
  color: var(--ink);
  transition: transform 420ms cubic-bezier(.77,0,.18,1);
}

.menu-panel.is-open { transform: translateY(0); }
.menu-panel .eyebrow { padding-top: 5px; }
.menu-panel a { display: flex; grid-column: 2; align-items: center; justify-content: space-between; border-top: 1px solid rgba(20, 22, 19, 0.55); font-size: clamp(28px, 4vw, 56px); font-weight: 500; letter-spacing: -0.06em; }
.menu-panel a em { font-family: var(--mono); font-size: 10px; font-style: normal; letter-spacing: 0; }
.menu-panel-foot { display: flex; grid-column: 2; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(20, 22, 19, 0.55); font-family: var(--mono); font-size: 12px; }

.eyebrow { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(40px, 0.47fr) minmax(330px, 1.15fr) minmax(400px, 1.38fr);
  min-height: 100svh;
  padding-top: 88px;
  border-bottom: 1px solid var(--line);
}

.hero-index { display: flex; grid-column: 1; flex-direction: column; justify-content: space-between; padding: 30px 20px 29px 28px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 10px; writing-mode: vertical-rl; transform: rotate(180deg); }

.hero-copy { display: flex; z-index: 1; grid-column: 2; flex-direction: column; align-items: flex-start; justify-content: center; padding: 11vw 3vw 8vw 5.5vw; }

.hero h1,
.statement h2,
.section-head h2,
.manifesto h2,
.journal h2,
.contact-block h2 { margin: 0; font-size: clamp(38px, 4.5vw, 78px); font-weight: 500; line-height: 0.95; letter-spacing: -0.065em; }

h1 i,
h2 i { font-family: var(--serif); font-weight: 500; }

.hero h1 { margin: 18px 0 34px; font-size: clamp(38px, 4.25vw, 68px); white-space: nowrap; }
.hero-intro { max-width: 390px; margin: 0; font-size: 18px; line-height: 1.55; }

.hero-image { position: relative; grid-column: 3; min-height: calc(100svh - 88px); margin: 0; overflow: hidden; }
.image-frame { background: #aaada5; }
.image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.05); transition: transform 800ms cubic-bezier(.2,.7,.1,1), filter 500ms ease; }
.image-frame:hover img { filter: saturate(1) contrast(1); transform: scale(1.035); }

.hero-image::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.38)); content: ""; pointer-events: none; }
.hero-image figcaption { position: absolute; z-index: 1; right: 22px; bottom: 21px; left: 22px; display: flex; justify-content: space-between; color: #fff; font-family: var(--mono); font-size: 9px; }

.hero-scroll { position: absolute; z-index: 2; bottom: 0; left: calc(14.3% - 1px); display: flex; align-items: center; justify-content: space-between; width: min(280px, 28vw); height: 64px; padding: 0 18px; border: 1px solid var(--ink); background: var(--bone); font-family: var(--mono); font-size: 10px; }
.hero-scroll b { font-size: 22px; font-weight: 400; }

.section-rule { border-bottom: 1px solid var(--line); }
.statement { padding: 28px 4vw 11vw; }
.statement-layout { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 11vw; margin-top: 14vw; }
.statement h2 { max-width: 800px; }
.statement-text { align-self: end; max-width: 380px; }
.statement-text p { margin: 0 0 28px; font-size: 19px; line-height: 1.65; }

.text-link { display: inline-flex; gap: 18px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; }
.text-link b { font-size: 15px; font-weight: 400; }

.work { padding: 28px 28px 110px; background: var(--ink); color: var(--bone); }
.section-head { display: grid; grid-template-columns: 0.9fr 1.2fr 0.75fr; gap: 28px; align-items: end; padding-bottom: 70px; }
.section-head .eyebrow { align-self: start; }
.project-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.project-filters button { padding: 9px 11px; border: 1px solid #5f605a; border-radius: 0; background: transparent; color: var(--bone); cursor: pointer; font-family: var(--mono); font-size: 11px; }
.project-filters button:hover,
.project-filters button.is-active { border-color: var(--red); background: var(--red); color: var(--ink); }

.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 52px 18px; align-items: start; }
.project-card { grid-column: span 4; transition: opacity 250ms ease, transform 250ms ease; }
.project-card.is-hidden { display: none; }
.project-card--large { grid-column: span 7; }
.project-card--offset { grid-column: 9 / span 4; margin-top: 190px; }
.project-card--wide { grid-column: 3 / span 8; margin-top: 20px; }
.project-visual { position: relative; height: 355px; overflow: hidden; }
.project-card--large .project-visual { height: 530px; }
.project-card--wide .project-visual { height: 430px; }
.project-number { position: absolute; top: 0; left: 0; display: grid; width: 39px; height: 39px; place-items: center; background: var(--red); color: var(--ink); font-family: var(--mono); font-size: 10px; }
.project-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-top: 13px; border-top: 1px solid #4a4c45; }
.project-meta h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.04em; }
.project-meta p { margin: 5px 0 0; color: #bdbdb4; font-family: var(--mono); font-size: 11px; }
.project-meta > span { color: var(--red); font-size: 21px; }
.outline-link { display: flex; justify-content: space-between; width: 100%; margin-top: 80px; padding: 15px 0; border-top: 1px solid #4a4c45; border-bottom: 1px solid #4a4c45; font-family: var(--mono); font-size: 12px; }
.outline-link b { color: var(--red); font-weight: 400; }

.manifesto { position: relative; padding: 28px 28px 0; background: var(--moss); color: var(--ink); }
.manifesto-stamp { position: absolute; top: 0; right: 0; display: grid; width: 102px; height: 102px; place-items: center; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; }
.manifesto h2 { max-width: 1000px; margin: 12vw 0 8vw; }
.manifesto-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8vw; padding-left: 28%; }
.manifesto-grid > p { max-width: 490px; margin: 0; font-size: 19px; line-height: 1.63; }
.manifesto ol { margin: 0; padding: 0; list-style: none; }
.manifesto li { display: flex; gap: 22px; padding: 11px 0; border-top: 1px solid rgba(20,22,19,.5); font-size: 17px; }
.manifesto li span { font-family: var(--mono); font-size: 9px; }
.manifesto li a { display: flex; gap: 22px; width: 100%; }
.manifesto-image { position: relative; height: min(37vw, 560px); margin-top: 9vw; overflow: hidden; }
.manifesto-image img { object-position: center 58%; }
.manifesto-image span { position: absolute; bottom: 14px; left: 15px; padding: 7px 9px; background: var(--bone); font-family: var(--mono); font-size: 9px; }

.journal { padding: 28px 28px 92px; }
.journal-top { display: grid; grid-template-columns: 0.8fr 1.4fr 0.7fr; gap: 24px; align-items: end; margin-bottom: 105px; }
.journal-top .text-link { justify-self: end; }
.journal-list { border-top: 1px solid var(--ink); }
.journal-item { display: grid; grid-template-columns: 0.65fr 0.8fr 2.4fr auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); transition: padding 200ms ease, background 200ms ease; }
.journal-item:hover { padding-right: 15px; padding-left: 15px; background: #deddd5; }
.journal-item time,
.journal-type { font-family: var(--mono); font-size: 9px; }
.journal-type { color: #686a62; }
.journal-item h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.05em; }
.journal-item > b { color: var(--red); font-size: 22px; font-weight: 400; }

.contact-block { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 640px; padding: 28px; background: var(--red); }
.contact-block h2 { align-self: center; max-width: 840px; margin: clamp(90px, 10vw, 170px) 0 clamp(70px, 8vw, 130px); }
.contact-block > a { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: clamp(14px, 1.4vw, 19px); }
.contact-block > a b { font-size: 24px; font-weight: 400; }
.contact-coordinate { position: absolute; right: 28px; top: 28px; font-family: var(--mono); font-size: 9px; }

.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 14px 28px; background: var(--ink); color: var(--bone); font-family: var(--mono); font-size: 11px; }
.site-footer a { color: var(--red); }

@media (min-width: 761px) and (max-width: 1023px) {
  .brand { min-width: 0; padding: 0 20px; }
  .header-signal { padding: 0 18px; }
  .hero { grid-template-columns: 40px minmax(360px, 1.1fr) minmax(300px, .9fr); }
  .hero-index { padding-right: 14px; padding-left: 14px; }
  .hero-copy { padding: 105px 24px 76px 34px; }
  .hero h1 { font-size: clamp(38px, 5vw, 42px); }
  .hero-intro { font-size: 16px; }
  .hero-scroll { left: 39px; width: min(280px, calc(50vw - 40px)); }
  .statement { padding: 24px 28px 90px; }
  .statement-layout { grid-template-columns: 1.15fr .85fr; gap: 52px; margin-top: 110px; }
  .statement h2,
  .section-head h2,
  .manifesto h2,
  .journal h2,
  .contact-block h2 { font-size: clamp(38px, 5.5vw, 52px); }
  .statement-text p,
  .manifesto-grid > p { font-size: 17px; }
  .section-head { grid-template-columns: .65fr 1.35fr; }
  .section-head h2 { grid-column: 2; }
  .project-filters { grid-column: 2; justify-content: flex-start; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 18px; }
  .project-card,
  .project-card--large,
  .project-card--offset,
  .project-card--wide { grid-column: auto; margin-top: 0; }
  .project-visual,
  .project-card--large .project-visual,
  .project-card--wide .project-visual { height: min(44vw, 390px); }
  .manifesto h2 { margin: 110px 0 75px; }
  .manifesto-grid { gap: 48px; padding-left: 8%; }
  .journal-top { grid-template-columns: .65fr 1.35fr; margin-bottom: 80px; }
  .journal-top .text-link { grid-column: 2; justify-self: start; }
  .journal-item { grid-template-columns: .55fr .75fr 2fr auto; }
}

@media (max-width: 760px) {
  .site-header { height: 68px; grid-template-columns: 1fr auto; }
  .brand { min-width: 0; padding: 0 16px; border-right: 0; }
  .brand small, .header-signal { display: none; }
  .menu-toggle { width: 104px; grid-template-columns: auto 17px; padding: 0 12px; }
  .menu-toggle span { display: block; }
  .menu-panel { inset: 68px 0 auto; display: block; min-height: calc(100vh - 68px); padding: 22px 16px; }
  .menu-panel .eyebrow { padding-bottom: 50px; }
  .menu-panel a { min-height: 12vh; font-size: clamp(29px, 10vw, 52px); }
  .menu-panel-foot { position: absolute; right: 16px; bottom: 23px; left: 16px; font-size: 10px; }
  .hero { display: block; min-height: 760px; padding-top: 68px; }
  .hero-index { position: absolute; top: 68px; right: 0; z-index: 3; display: flex; flex-direction: row; width: 100%; padding: 14px 16px; border-right: 0; color: var(--bone); writing-mode: initial; transform: none; }
  .hero-copy { position: relative; z-index: 2; min-height: 390px; padding: 110px 20px 40px; background: var(--bone); }
  .hero h1 { font-size: clamp(36px, 9.8vw, 48px); }
  .hero-intro { max-width: 320px; font-size: 17px; }
  .hero-image { min-height: 370px; }
  .hero-scroll { bottom: 0; left: 0; width: 100%; }
  .statement { padding: 20px 16px 72px; }
  .statement-layout { display: block; margin-top: 80px; }
  .statement h2, .section-head h2, .manifesto h2, .journal h2, .contact-block h2 { font-size: clamp(34px, 9.5vw, 52px); }
  .statement-text { margin-top: 55px; }
  .work { padding: 20px 16px 70px; }
  .section-head { display: block; padding-bottom: 48px; }
  .section-head h2 { margin: 48px 0 34px; }
  .project-filters { justify-content: flex-start; }
  .project-grid { display: block; }
  .project-card, .project-card--large, .project-card--offset, .project-card--wide { margin: 0 0 36px; }
  .project-card--offset { margin-top: 0; }
  .project-visual, .project-card--large .project-visual, .project-card--wide .project-visual { height: 66vw; max-height: 420px; }
  .outline-link { margin-top: 50px; }
  .manifesto { padding: 20px 16px 0; }
  .manifesto-stamp { width: 67px; height: 67px; font-size: 9px; }
  .manifesto h2 { margin: 110px 0 70px; }
  .manifesto-grid { display: block; padding-left: 0; }
  .manifesto ol { margin-top: 44px; }
  .manifesto-image { height: 70vw; margin: 70px 0 0; }
  .journal { padding: 20px 16px 70px; }
  .journal-top { display: block; margin-bottom: 62px; }
  .journal-top h2 { margin: 48px 0 30px; }
  .journal-top .text-link { justify-self: auto; }
  .journal-item { grid-template-columns: 0.8fr 1.2fr auto; gap: 5px; padding: 18px 0; }
  .journal-item h3 { grid-row: 2; grid-column: 1 / 3; margin-top: 14px; font-size: 17px; }
  .journal-item > b { grid-row: 1 / 3; grid-column: 3; }
  .contact-block { min-height: 520px; padding: 20px 16px; }
  .contact-block h2 { margin: 100px 0 80px; }
  .contact-coordinate { top: 21px; right: 16px; font-size: 10px; }
  .site-footer { flex-wrap: wrap; padding: 14px 16px; }
}

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