:root {
  --paper: #efeae1;
  --paper-2: #e3d9c8;
  --ink: #241e18;
  --muted: #5e564c;
  --line: #d4cbbd;
  --tint: #e6dece;
  --card: #f7f3eb;
  --accent: #6f3424;
  --shadow: 0 16px 40px rgba(36, 30, 24, 0.12);
  --font: ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", "Avenir Next", sans-serif;
  --display: 84px;
  --display-s: 60px;
  --section: 52px;
  --title: 25px;
  --lead: 21px;
  --body: 17px;
  --body-s: 16px;
  --pad-s: 120px;
  --pad-m: 144px;
  --pad-l: 176px;
  --wrap: 1200px;
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-144: 144px;
}

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

html,
body {
  overflow-x: clip;
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 400;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
figure {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: var(--body);
  color: var(--ink);
}

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

[id] {
  scroll-margin-top: 96px;
}

.skip {
  position: absolute;
  left: var(--s-16);
  top: -200px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-12) var(--s-16);
  z-index: 6;
  text-decoration: none;
}

.skip:focus {
  top: var(--s-16);
}

.wrap {
  width: min(100%, var(--wrap));
  max-width: var(--wrap);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--s-24);
}

.lead {
  font-size: var(--lead);
  line-height: 1.45;
}

.intro {
  margin-top: var(--s-24);
  max-width: 40em;
}

.quiet {
  color: var(--muted);
  font-size: var(--body-s);
}

.copy p + p,
.policy p + p,
.note p + p,
.mode p + p,
.spread-copy p + p,
.stack p + p {
  margin-top: var(--s-16);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-24);
  min-height: 80px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 32px;
}

.brand-plate {
  fill: var(--ink);
}

.brand-stroke {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
  stroke-linecap: round;
}

.nav-bar {
  display: flex;
  gap: var(--s-24);
  margin-left: var(--s-16);
}

.nav-bar a,
.nav-fold a,
.phone {
  font-size: var(--body-s);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.nav-bar a:hover,
.nav-fold a:hover,
.phone:hover,
.site-footer a:hover,
.journal-row a:hover,
.modes-switch a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-24);
}

.nav-fold {
  display: none;
}

.nav-fold summary {
  font-size: var(--body-s);
  list-style: none;
}

.nav-fold summary::-webkit-details-marker {
  display: none;
}

.brief-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-12) var(--s-24);
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  border: 0;
  font-weight: 600;
  font-size: var(--body-s);
  letter-spacing: -0.02em;
  line-height: 1;
}

.brief-link-ink {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.hero {
  padding: var(--s-32) 0 var(--s-64);
}

.hero h1,
.statement h2 {
  font-size: var(--display-s);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hero-grid,
.project-feature,
.process-grid,
.journal-layout,
.about-grid,
.contact-grid,
.spread,
.showcase,
.footer-grid,
.mode-plan,
.case-line,
.close-grid,
.showcase-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-32);
}

.hero-grid > *,
.project-feature > *,
.process-grid > *,
.journal-layout > *,
.about-grid > *,
.contact-grid > *,
.spread > *,
.showcase > *,
.footer-grid > *,
.bento > *,
.close-grid > * {
  min-width: 0;
}

.showcase-pair {
  gap: var(--s-16);
}

.hero-copy,
.project-feature .copy,
.spread-copy,
.stack {
  display: grid;
  gap: var(--s-24);
  align-content: end;
}

.hero-frame {
  box-shadow: var(--shadow);
}

.hero-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.zoom {
  overflow: clip;
  display: block;
}

.pad-s,
.pad-m,
.pad-l {
  padding: var(--s-64) 0;
}

.project-index h2,
.modes > .wrap > h2,
.process h2,
.studio-bento h2,
.journal-home h2,
.studio-hall h2,
.studio-rail h2,
.studio-fees h2,
.about-practice h2,
.contact-reach h2,
.faq h2,
.journal-page h2 {
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.page-head {
  padding: var(--s-64) 0 var(--s-48);
}

.page-head h1,
.close-band h2,
.note h1,
.policy h1,
.model-line {
  font-size: 40px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.project-feature,
.project-row,
.spread,
.journal-row {
  color: inherit;
  text-decoration: none;
}

.project-feature img,
.spread img,
.journal-layout img,
.about-grid img,
.contact-grid img,
.mode-plan img,
.mode-review img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.project-rows {
  margin-top: var(--s-16);
}

.project-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--s-24);
  align-items: center;
  padding: var(--s-24) 0;
  border-top: 1px solid var(--line);
}

.project-row img {
  width: 120px;
  height: 160px;
  object-fit: cover;
}

.project-feature h3,
.project-row h3,
.spread h2,
.mode h3,
.bento-note h3,
.journal-row a,
.note h2,
.policy h2,
.faq-row h3 {
  font-size: var(--title);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 600;
}

.statement {
  padding: var(--s-96) 0;
}

.statement-rule {
  display: grid;
  gap: var(--s-32);
  border-left: 1px solid var(--line);
  padding-left: var(--s-32);
}

.statement-rule .lead {
  max-width: 36em;
}

.modes-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12) var(--s-24);
  margin-top: var(--s-32);
}

.modes-switch a {
  font-size: var(--title);
  letter-spacing: -0.02em;
  font-weight: 600;
  text-decoration: none;
}

.modes:not(:has(.mode:target)) a[href="#desk"],
.modes:has(#plan:target) a[href="#plan"],
.modes:has(#model:target) a[href="#model"],
.modes:has(#review:target) a[href="#review"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.modes:has(.mode:target) .mode:not(:target) {
  display: none;
}

.mode {
  margin-top: var(--s-48);
  padding-top: var(--s-48);
  border-top: 1px solid var(--line);
}

.modes:has(.mode:target) .mode:target {
  border-top: 0;
  margin-top: var(--s-48);
}

.mode-model {
  background: var(--tint);
  padding: var(--s-48);
  border-top: 0;
  display: grid;
  gap: var(--s-32);
}

.mode-review img {
  max-width: 480px;
  margin-top: var(--s-32);
}

.mode ul,
.note ul,
.policy ul,
.policy ol {
  padding-left: var(--s-24);
}

.mode li + li,
.policy li + li,
.note li + li {
  margin-top: var(--s-8);
}

.case-line div {
  display: grid;
  gap: var(--s-12);
  align-content: start;
}

.process-frame {
  position: static;
}

.process-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.process-steps {
  list-style: decimal;
  padding: 0 0 0 var(--s-24);
}

.process-step {
  padding: var(--s-40) 0;
  border-top: 1px solid var(--line);
}

.process-step h3 {
  margin-bottom: var(--s-16);
}

.process-steps li::marker {
  color: var(--muted);
  font-size: var(--body-s);
}

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-48);
}

.bento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.bento-note {
  background: var(--tint);
  padding: var(--s-32);
  display: grid;
  gap: var(--s-16);
  align-content: end;
  min-height: 280px;
}

.journal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  padding: var(--s-24) 0;
  border-top: 1px solid var(--line);
}

.journal-row a {
  text-decoration: none;
}

.journal-layout figure {
  display: grid;
  gap: var(--s-12);
}

.close-band {
  background: var(--paper-2);
  padding: var(--s-96) 0;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s-64) 0 var(--s-48);
}

.footer-grid a {
  text-decoration: none;
}

.footer-end {
  margin-top: var(--s-32);
}

.photo-wide,
.faq-photo,
.showcase-wide {
  width: 100%;
  object-fit: cover;
}

.faq-photo,
.showcase-wide {
  aspect-ratio: 16 / 9;
}

.showcase-pair {
  display: grid;
  gap: var(--s-16);
}

.showcase-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.rail-track {
  display: flex;
  gap: var(--s-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: var(--s-48);
  padding-bottom: var(--s-8);
  list-style: none;
  padding-left: 0;
}

.rail-track li {
  flex: 0 0 84%;
  scroll-snap-align: start;
  min-width: 0;
  display: grid;
  gap: var(--s-12);
  align-content: start;
}

.rail-track img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.fees,
.faq-list {
  margin-top: var(--s-32);
}

.fees div,
.faq-row {
  display: grid;
  gap: var(--s-12);
  padding: var(--s-24) 0;
  border-top: 1px solid var(--line);
}

.fees dt {
  font-size: var(--title);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.spread-top {
  display: grid;
  gap: var(--s-32);
}

.spread-top .photo-wide {
  aspect-ratio: 16 / 9;
  max-height: 520px;
}

.page-section + .page-section {
  border-top: 1px solid var(--line);
}

.brief,
.cookie-choice {
  display: grid;
  gap: var(--s-24);
  margin-top: var(--s-32);
}

.brief label,
.cookie-choice label,
.field span {
  display: block;
  margin-bottom: var(--s-8);
  font-size: var(--body-s);
}

.brief input:not([type="radio"]),
.brief textarea,
.brief select {
  display: block;
  width: 100%;
  margin-top: var(--s-8);
  background: var(--card);
  border: 1px solid var(--line);
  padding: var(--s-12) var(--s-16);
  border-radius: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-8);
}

legend {
  font-size: var(--body-s);
  padding: 0;
  margin-bottom: var(--s-8);
}

.brief textarea {
  min-height: var(--s-144);
  resize: vertical;
}

.choice-row {
  display: grid;
  gap: var(--s-12);
}

.choice-row label {
  display: flex;
  gap: var(--s-12);
  align-items: center;
  margin: 0;
}

.policy {
  padding-bottom: var(--pad-m);
}

.policy h2 {
  margin-top: var(--s-48);
}

.policy-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-24);
  margin-top: var(--s-32);
}

.policy-nav a {
  color: var(--accent);
}

.policy p,
.policy li,
.note p,
.note li {
  max-width: 68ch;
}

.note {
  padding-bottom: var(--s-96);
}

.note-meta {
  margin-top: var(--s-24);
}

.note img {
  width: min(100%, 720px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: var(--s-48) 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-16);
  align-items: center;
}

@media (min-width: 800px) {
  .hero-grid,
  .about-grid,
  .contact-grid,
  .journal-layout,
  .close-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-48);
    align-items: end;
  }

  .hero-grid {
    align-items: center;
  }

  .hero-photo {
    width: 100%;
    height: min(720px, calc(100vh - 180px));
    aspect-ratio: auto;
    object-fit: cover;
  }

  .journal-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
    align-items: start;
  }

  .contact-grid {
    align-items: start;
  }

  .project-feature {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
    gap: var(--s-48);
    align-items: end;
    margin-top: var(--s-48);
  }

  .project-feature img {
    max-height: 760px;
  }

  .spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-48);
    align-items: start;
  }

  .spread-long {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .spread-reverse .spread-photo {
    order: 2;
  }

  .mode-plan {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s-48);
    align-items: start;
  }

  .case-line {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.72fr);
    gap: var(--s-32);
  }

  .process-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: var(--s-48);
    align-items: start;
  }

  .process-frame {
    position: sticky;
    top: 96px;
  }

  .process-photo {
    height: min(720px, calc(100vh - 128px));
    aspect-ratio: auto;
  }

  .bento {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  }

  .bento-call {
    grid-row: span 2;
  }

  .bento-call img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }

  .journal-row {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--s-24);
    align-items: start;
  }

  .close-grid {
    align-items: end;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    align-items: start;
  }

  .fees div,
  .faq-row {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: var(--s-32);
    align-items: start;
  }

  .brief {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .brief .wide,
  .brief .actions,
  .brief .form-note {
    grid-column: 1 / -1;
  }

  .showcase {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--s-16);
    align-items: stretch;
  }

  .showcase-wide {
    height: 100%;
    min-height: 360px;
    aspect-ratio: 16 / 9;
  }

  .showcase-pair {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .showcase-pair img {
    aspect-ratio: auto;
    min-height: 180px;
  }

  .rail-track li {
    flex-basis: 42%;
  }

  .rail-track img {
    min-height: 360px;
  }

  .journal-layout img,
  .about-grid img,
  .contact-grid img {
    min-height: 360px;
  }
}

@media (min-width: 960px) {
  .pad-s { padding: var(--pad-s) 0; }
  .pad-m { padding: var(--pad-m) 0; }
  .pad-l { padding: var(--pad-l) 0; }

  .hero {
    padding: var(--s-48) 0 var(--s-96);
  }

  .hero-grid {
    align-items: center;
  }

  .hero h1,
  .statement h2 {
    font-size: var(--display);
  }

  .page-head h1,
  .close-band h2,
  .note h1,
  .policy h1,
  .model-line {
    font-size: var(--display-s);
  }

  .project-index h2,
  .modes > .wrap > h2,
  .process h2,
  .studio-bento h2,
  .journal-home h2,
  .studio-hall h2,
  .studio-rail h2,
  .studio-fees h2,
  .about-practice h2,
  .contact-reach h2,
  .faq h2,
  .journal-page h2 {
    font-size: var(--section);
  }

  .page-head {
    padding: var(--s-96) 0 var(--s-64);
  }

  .statement {
    padding: var(--pad-l) 0;
  }

  .faq-photo {
    height: 360px;
    aspect-ratio: auto;
    margin: var(--s-32) 0 var(--s-16);
  }
}

@media (max-width: 959px) {
  .nav-bar {
    display: none;
  }

  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-12);
    row-gap: var(--s-12);
    min-height: 0;
    padding-block: var(--s-12);
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .nav-fold {
    display: contents;
  }

  .nav-fold summary {
    display: inline-flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: 48px;
  }

  .nav-fold nav {
    display: none;
  }

  .header-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-12);
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    margin: 0;
  }

  .hero-copy {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .hero .lead {
    max-width: 30ch;
  }

  .hero-copy .lead,
  .hero-copy .brief-link {
    margin-top: var(--s-24);
  }

  .lead,
  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .nav-fold[open] {
    display: contents;
  }

  .nav-fold[open] summary {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .nav-fold[open] nav {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    width: 100%;
    gap: var(--s-12);
    padding: var(--s-16) 0 var(--s-4);
    border-top: 1px solid var(--line);
  }

  .faq-photo {
    height: 240px;
    margin: var(--s-24) 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fade.is-waiting {
    opacity: 0;
  }

  .fade.is-in {
    opacity: 1;
    transition: opacity 0.8s ease;
  }

  .zoom img,
  .hero-photo {
    transition: transform 0.6s ease;
  }

  .zoom:hover img,
  a.project-feature:hover img {
    transform: scale(1.03);
  }

  .brief-link {
    transition: transform 0.2s ease;
  }

  .brief-link:hover {
    transform: translateY(-2px);
  }

  .process-photo {
    transition: opacity 0.4s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade.is-waiting,
  .fade.is-in,
  .process-photo {
    opacity: 1;
    transition: none;
  }
}