:root {
  --paper: #f7f4ef;
  --paper-deep: #ebe4da;
  --ink: #24241f;
  --ink-deep: #1c1c18;
  --muted: #686054;
  --line: #d8d1c5;
  --hover: #806b4d;
  --page-pad-x: clamp(1.25rem, 3.2vw, 3.5rem);
  --page-pad-y: clamp(1.15rem, 2.4vw, 2rem);
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }

html {
  min-width: 20rem;
  min-height: 100%;
  background: var(--paper);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

button, a { font: inherit; }
button { color: inherit; cursor: pointer; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--hover);
  outline-offset: 0.35rem;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
}

.site-header,
.site-footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: var(--page-pad-y) max(var(--page-pad-x), env(safe-area-inset-right)) var(--page-pad-y) max(var(--page-pad-x), env(safe-area-inset-left));
  color: #34312b;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1.25;
}

.site-header { padding-top: max(var(--page-pad-y), env(safe-area-inset-top)); }
.site-footer {
  align-items: center;
  padding-bottom: max(var(--page-pad-y), env(safe-area-inset-bottom));
}

.location-block { display: flex; flex-direction: column; gap: 0.18rem; }
.coordinates { color: var(--muted); letter-spacing: 0.025em; }
.local-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-main { min-height: 0; }
.view { width: 100%; min-height: 100%; }

/* Home — intentionally preserves the clean first direction. */
.home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-pad-x) 1rem;
}

.logo-stage {
  position: relative;
  display: block;
  width: min(31rem, 70vw);
  height: clamp(15rem, 42vh, 22rem);
  max-height: 22rem;
  isolation: isolate;
}

#logo-canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#logo-canvas:active { cursor: grabbing; }

.wordmark {
  margin-top: clamp(-1.1rem, -1.7vh, -0.35rem);
  color: var(--ink);
  font-size: clamp(0.875rem, 1.15vw, 1.075rem);
  font-weight: 400;
  letter-spacing: clamp(0.36rem, 0.85vw, 0.66rem);
  line-height: 1;
  padding-left: clamp(0.36rem, 0.85vw, 0.66rem);
  white-space: nowrap;
}

.text-action {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.75rem 0;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
}

.text-action:hover,
.contact-email:hover { color: var(--hover); }

.home-info { min-width: 7rem; margin-top: clamp(1.55rem, 4vh, 2.7rem); }
.home-info span { margin-left: 0.8rem; }

/* Shared editorial pages */
.content-view {
  width: min(86%, 76rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vh, 3.75rem) 0 3rem;
}

.eyebrow,
.contact-label {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.5;
}

.content-view h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.65rem, 5.4vw, 5.3rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.2rem, 5vh, 4.25rem);
}

.section-heading .eyebrow { margin-bottom: 1.3rem; }

.section-note {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-align: right;
  text-transform: uppercase;
}

/* Information — only the two primary destinations remain visible. */
.info-view {
  width: min(72%, 54rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-navigation {
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.info-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(6.4rem, 15vh, 8.75rem);
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  overflow: hidden;
  padding: 0;
  color: var(--ink);
  font-weight: 400;
  text-align: center;
  transition: color 420ms ease, opacity 320ms ease, transform 420ms cubic-bezier(.22,.7,0,1);
}

.info-link:last-child { border-bottom: 0; }

.info-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: width 700ms cubic-bezier(.22,.7,0,1);
}

.info-link-label {
  display: block;
  padding-left: clamp(0.34rem, 0.62vw, 0.55rem);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  font-weight: 400;
  letter-spacing: clamp(0.34rem, 0.62vw, 0.55rem);
  line-height: 1;
  transition: letter-spacing 600ms cubic-bezier(.22,.7,0,1), transform 600ms cubic-bezier(.22,.7,0,1), opacity 320ms ease;
}

.info-link:hover::before,
.info-link:focus-visible::before,
.info-link.is-selected::before { width: 100%; }

.info-link:hover .info-link-label,
.info-link:focus-visible .info-link-label {
  letter-spacing: clamp(0.39rem, 0.72vw, 0.64rem);
  transform: translateY(-1px);
}

.info-navigation.is-choosing .info-link {
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.25rem);
}

.info-navigation.is-choosing .info-link.is-selected {
  opacity: 1;
  transform: translateY(0);
}

.info-navigation.is-choosing .info-link.is-selected .info-link-label {
  letter-spacing: clamp(0.46rem, 0.85vw, 0.75rem);
  opacity: 0;
  transform: translateY(-0.18rem);
}

/* Projects */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.project-card { min-width: 0; border-right: 1px solid var(--line); }
.project-card:last-child { border-right: 0; }

.project-visual {
  position: relative;
  height: clamp(13rem, 29vh, 19rem);
  overflow: hidden;
  background: var(--paper-deep);
  perspective: 800px;
}

.project-card-rowan .project-visual { background: var(--ink-deep); }

.project-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(79, 69, 57, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 69, 57, 0.08) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  opacity: 0.45;
}

.project-card-rowan .project-visual::after {
  background-image: linear-gradient(rgba(247, 244, 239, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 244, 239, 0.05) 1px, transparent 1px);
}

.project-visual-label {
  position: absolute;
  z-index: 3;
  left: 1.25rem;
  bottom: 1rem;
  color: var(--muted);
  font-size: 0.5625rem;
  letter-spacing: 0.13em;
}

.project-card-rowan .project-visual-label { color: #aaa298; }

.mass {
  position: absolute;
  z-index: 2;
  bottom: -0.6rem;
  width: 17%;
  background: #9c856b;
  box-shadow: inset -0.7rem 0 0 rgba(56, 47, 38, 0.16);
  transform: rotateY(-13deg) skewY(-3deg);
  transform-origin: bottom;
  transition: transform 850ms cubic-bezier(.22,.7,0,1), height 850ms cubic-bezier(.22,.7,0,1);
}

.mass-a { left: 30%; height: 48%; }
.mass-b { left: 46%; height: 76%; background: #715e4b; }
.mass-c { left: 62%; height: 58%; background: #b19b80; }
.project-card:hover .mass { transform: rotateY(-6deg) skewY(-1deg) translateY(-0.55rem); }
.project-card:hover .mass-a { height: 56%; }
.project-card:hover .mass-b { height: 84%; }
.project-card:hover .mass-c { height: 68%; }

.rowan-tower {
  position: absolute;
  z-index: 2;
  left: 39%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.48rem;
  width: 25%;
  height: 82%;
  padding: 1rem 0.7rem;
  background: #b5a794;
  box-shadow: 1.25rem 0.8rem 0 #70665a;
  transform: rotateY(8deg);
  transform-origin: bottom;
  transition: transform 850ms cubic-bezier(.22,.7,0,1), height 850ms cubic-bezier(.22,.7,0,1);
}

.rowan-tower i { background: #35342f; opacity: 0.7; }
.rowan-base {
  position: absolute;
  z-index: 1;
  left: 27%;
  bottom: 0;
  width: 52%;
  height: 18%;
  background: #756b60;
  transition: transform 850ms cubic-bezier(.22,.7,0,1);
}

.project-card:hover .rowan-tower { height: 88%; transform: rotateY(2deg) translateY(-0.35rem); }
.project-card:hover .rowan-base { transform: scaleX(1.06); }

.project-card-content {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  min-height: 12.5rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
}

.project-number { color: var(--muted); font-size: 0.6875rem; line-height: 1.25; }
.project-type {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-card h2 {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-size: clamp(1.5rem, 2.75vw, 2.65rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.project-address { margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
.project-card-arrow { font-size: 1.1rem; transition: transform 500ms cubic-bezier(.22,.7,0,1); }
.project-card:hover .project-card-arrow { transform: translate(0.4rem, -0.4rem); }

/* Contact */
.contact-panel {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: start;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 6vh, 5.5rem) 0;
}

.contact-index { padding-top: 0.3rem; color: var(--muted); font-size: 0.6875rem; }
.contact-label { margin-bottom: 0.7rem; }

.contact-email {
  position: relative;
  display: inline-flex;
  gap: 0.8rem;
  max-width: 100%;
  margin: 0 0 1.4rem;
  padding: 0 0 0.6rem;
  color: var(--ink);
  font-size: clamp(2.15rem, 6.3vw, 6.4rem);
  letter-spacing: -0.06em;
  line-height: 1;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.contact-email::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0.24);
  transform-origin: left;
  transition: transform 650ms cubic-bezier(.22,.7,0,1);
}

.contact-email:hover::after,
.contact-email:focus-visible::after { transform: scaleX(1); }

.contact-description {
  max-width: 29rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.copy-email {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line);
  background: transparent;
  padding: 0.9rem 1rem;
  color: var(--ink);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  white-space: nowrap;
  transition: background 350ms ease, color 350ms ease, border-color 350ms ease;
}

.copy-email:hover,
.copy-email.is-copied { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.contact-footnote {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.2rem;
  color: var(--muted);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}

.back-action span { margin-left: 0.55rem; }
.view.is-entering { animation: view-in 520ms cubic-bezier(.22,.7,0,1) both; }
.view.is-entering .info-link,
.view.is-entering .project-card,
.view.is-entering .contact-panel { animation: reveal-up 650ms cubic-bezier(.22,.7,0,1) both; }
.view.is-entering .info-link:nth-child(2),
.view.is-entering .project-card:nth-child(2) { animation-delay: 90ms; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(0.65rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Phones */
@media (max-width: 35rem) {
  :root { --page-pad-x: 1.25rem; --page-pad-y: 1.15rem; }
  .site-header, .site-footer { font-size: 0.6875rem; }
  .content-view { width: auto; margin-inline: var(--page-pad-x); padding-top: 1.4rem; }
  .logo-stage { width: min(26rem, 95vw); height: clamp(14rem, 38vh, 19rem); }
  .wordmark { font-size: 0.8rem; letter-spacing: 0.34rem; padding-left: 0.34rem; }
  .home-info { margin-top: 1.7rem; }
  .section-heading { align-items: flex-start; margin-bottom: 2rem; }
  .section-note { max-width: 9.8rem; padding-top: 0.15rem; }
  .content-view h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .info-view { width: auto; justify-content: center; padding-top: 0; }
  .info-link { min-height: clamp(5.8rem, 14vh, 7rem); }
  .info-link-label { font-size: 1rem; letter-spacing: 0.34rem; padding-left: 0.34rem; }
  .project-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .project-card:last-child { border-bottom: 0; }
  .project-visual { height: 12.5rem; }
  .project-card-content { min-height: 10.5rem; grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .contact-panel { grid-template-columns: 2rem minmax(0, 1fr); padding: 2rem 0; }
  .copy-email { grid-column: 2; width: max-content; margin-top: 0.7rem; }
  .contact-email { font-size: clamp(2rem, 10.7vw, 3rem); }
  .contact-email span { font-size: 1.2rem; }
  .contact-footnote { flex-direction: column; gap: 0.45rem; }
}

/* Tablets and compact notebooks */
@media (min-width: 35.01rem) and (max-width: 64rem) {
  .content-view { width: min(88%, 52rem); }
  .info-view { width: min(82%, 48rem); }
  .logo-stage { width: min(30rem, 66vw); }
  .project-visual { height: 14rem; }
  .contact-email { font-size: clamp(2.7rem, 6.5vw, 4.4rem); }
}

/* Short laptop screens and landscape phones */
@media (max-height: 45rem) {
  .site-header, .site-footer { padding-block: 0.9rem; }
  .logo-stage { height: min(15rem, 42vh); width: min(24rem, 58vw); }
  .wordmark { margin-top: -0.55rem; }
  .home-info { margin-top: 1.15rem; }
  .content-view { padding-top: 0.75rem; padding-bottom: 1rem; }
  .section-heading { margin-bottom: 1.4rem; }
  .section-heading .eyebrow { margin-bottom: 0.65rem; }
  .content-view h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
  .info-link { min-height: 4.8rem; }
  .project-visual { height: 10rem; }
  .project-card-content { min-height: 8.5rem; padding-block: 1rem; }
  .project-card h2 { font-size: clamp(1.25rem, 2.4vw, 1.8rem); margin-bottom: 0.75rem; }
  .contact-panel { padding-block: 1.8rem; }
}

/* 24-inch desktop and larger */
@media (min-width: 90rem) and (min-height: 48rem) {
  .logo-stage { width: 32rem; height: 23rem; }
  .content-view { width: min(80%, 82rem); }
  .info-view { width: min(70%, 54rem); }
}

/* Ultrawide displays: preserve a composed center instead of stretching */
@media (min-width: 120rem) {
  :root { --page-pad-x: 4.5rem; }
  .logo-stage { width: 34rem; height: 24rem; }
  .content-view { width: 82rem; }
  .info-view { width: 54rem; }
}

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

  .info-navigation.is-choosing .info-link,
  .info-navigation.is-choosing .info-link.is-selected,
  .info-navigation.is-choosing .info-link.is-selected .info-link-label {
    opacity: 1;
    transform: none;
  }
}