:root {
  --ink: #0a0a0a;
  --paper: #fbfbfa;
  --line: #e6e4e1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 2.75vw;
  padding: 1.8rem 0 2.7rem;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  transition: padding 180ms ease;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-size: clamp(1.3rem, 2.05vw, 2.1rem);
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 1;
  white-space: nowrap;
}
.brand-name { text-transform: uppercase; }
.wordmark-segment {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: none;
}
.active-section {
  display: none;
}
.site-header.has-section .active-section {
  display: inline-flex;
}
.wordmark, .site-header nav { transition: transform 180ms ease; }
.site-header.is-condensed { padding-top: .85rem; padding-bottom: .95rem; }
.site-header.is-condensed .wordmark { transform: scale(.86); transform-origin: left center; }
.site-header.is-condensed nav { transform: scale(.9); transform-origin: right center; }
nav { display: flex; align-items: center; gap: clamp(.65rem, 1.25vw, 1.1rem); }
nav a {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
  letter-spacing: .055em;
  text-transform: uppercase;
}
nav a { transition: opacity 150ms ease; }
nav a:hover, nav a:focus-visible { opacity: .45; }
.phone-link { text-decoration: underline; text-underline-offset: .25rem; white-space: nowrap; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
  padding: 2.1vw 2.75vw 4vw;
}
.work-section { grid-column: 1 / -1; padding: clamp(.8rem, 2vw, 1.75rem) 0 .25rem; }
.work-section.is-in-header { visibility: hidden; }
.work-section h1 {
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(2.22rem, 4.2vw, 4.2rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .82;
}
.menu-button { display: none; }
.menu { display: contents; }
.view-label { display: none; }
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.view-button {
  display: grid;
  width: 2.2rem;
  height: 2rem;
  place-items: center;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.view-button + .view-button { border-left: 1px solid var(--ink); }
.view-button.is-active { background: var(--ink); color: var(--paper); }
.view-icon { display: block; position: relative; width: .9rem; height: .7rem; }
.icon-slider { border: 1px solid currentColor; }
.icon-slider::after {
  content: "";
  position: absolute;
  top: -.12rem;
  bottom: -.12rem;
  left: calc(50% - .5px);
  width: 1px;
  background: currentColor;
}
.icon-split { display: grid; grid-template-columns: 1fr 1fr; gap: .14rem; }
.icon-split::before, .icon-split::after { content: ""; border: 1px solid currentColor; }
.comparison {
  --position: 50%;
  position: relative;
  justify-self: center;
  width: min(100%, 28rem);
  aspect-ratio: var(--ratio, 3 / 4);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #e8e8e6;
  touch-action: pan-y;
  user-select: none;
}
.comparison > img, .comparison-after img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.comparison > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}
.comparison-after {
  position: absolute;
  z-index: 0;
  inset: 0;
}
.comparison-line {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 1px;
  background: rgba(255, 255, 255, .95);
  pointer-events: none;
}
.comparison-line span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid rgba(0, 0, 0, .66);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  transform: translate(-50%, -50%);
}
.comparison-line span::before, .comparison-line span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: translateY(-50%);
}
.comparison-line span::before { left: .4rem; border-right: 4px solid var(--ink); }
.comparison-line span::after { right: .4rem; border-left: 4px solid var(--ink); }
.comparison-control {
  appearance: none;
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
  pointer-events: none;
}
.gallery[data-view="side-by-side"] .comparison {
  justify-self: center;
  width: min(100%, 52rem);
  aspect-ratio: 3 / 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(.75rem, 1.35vw, 1.5rem);
  background: transparent;
}
.gallery[data-view="side-by-side"] { grid-template-columns: 1fr; }
.gallery[data-view="side-by-side"] .comparison-before,
.gallery[data-view="side-by-side"] .comparison-after {
  position: relative;
  inset: auto;
  width: auto;
  height: 100%;
  z-index: auto;
  clip-path: none;
  overflow: hidden;
  background: #e8e8e6;
}
.gallery[data-view="side-by-side"] .comparison-before,
.gallery[data-view="side-by-side"] .comparison-after img {
  transform: none;
  object-position: 50% 50%;
}
.gallery[data-view="side-by-side"] .comparison-line,
.gallery[data-view="side-by-side"] .comparison-control { display: none; }

@media (max-width: 720px) {
  .site-header { margin: 0 1.1rem; padding: 1.1rem 0 1.35rem; gap: .9rem; }
  .site-header.is-condensed { padding-top: .75rem; padding-bottom: .85rem; }
  .site-header.is-condensed .wordmark,
  .site-header.is-condensed nav { transform: none; }
  .wordmark { font-size: 1.26rem; }
  .wordmark .brand-discipline { display: none; }
  nav { gap: .9rem; }
  nav a { font-size: .78rem; }

  .menu-button {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2rem;
    appearance: none;
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
  }
  .menu-icon { position: relative; display: block; width: .95rem; height: .7rem; }
  .menu-icon::before, .menu-icon::after, .menu-line {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .menu-icon::before { top: 0; }
  .menu-line { top: calc(50% - .5px); }
  .menu-icon::after { bottom: 0; }
  .site-header.is-menu-open .menu-button { background: var(--ink); color: var(--paper); }
  .site-header.is-menu-open .menu-icon::before { transform: translateY(calc(.35rem - .5px)) rotate(45deg); }
  .site-header.is-menu-open .menu-line { opacity: 0; }
  .site-header.is-menu-open .menu-icon::after { transform: translateY(calc(-.35rem + .5px)) rotate(-45deg); }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: .3rem 0 .55rem;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
  }
  .site-header.is-menu-open .menu { display: block; }
  .view-toggle { display: block; width: 100%; border: 0; background: transparent; }
  .view-button {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    padding: .9rem .1rem;
  }
  .view-button + .view-button { border-left: 0; border-top: 1px solid var(--line); }
  .view-button.is-active { background: transparent; color: var(--ink); }
  .view-label {
    display: block;
    font-family: "Times New Roman", Times, serif;
    font-size: .78rem;
    letter-spacing: .055em;
    text-transform: uppercase;
  }
  .view-button.is-active .view-label { text-decoration: underline; text-underline-offset: .25rem; }

  .gallery { grid-template-columns: 1fr; gap: 1rem; padding: .7rem 1.1rem 2rem; }
  .work-section { padding: 1rem 0 .35rem; }
  .comparison { width: min(100%, 24rem); }
  .gallery[data-view="side-by-side"] .comparison { width: 100%; aspect-ratio: 3 / 2; }
  .comparison-line span { width: 1.7rem; height: 1.7rem; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 1.05rem; }
  nav { gap: .7rem; }
  nav a { font-size: .69rem; }
  .menu-button { width: 1.9rem; height: 1.8rem; }
  .comparison { width: min(100%, 22rem); }
}

@media (max-width: 359px) {
  .site-header.has-section .active-section { display: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }