@font-face {
  font-family:Hanken;
  src:url('/fonts/hanken-grotesk-400-600.woff2') format('woff2');
  font-weight:400 600;
  font-display:swap
}

@font-face {
  font-family:Martian;
  src:url('/fonts/martian-mono-400-500.woff2') format('woff2');
  font-weight:400 500;
  font-display:swap
}

:root {
  --paper:#f7f3eb;
  --ink:#302e2a;
  --muted:#72685c;
  --line:#d9d0c3;
  --tan:#b88b5f;
  --blue:#426b86;
  --mono:Martian,monospace
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 Hanken,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

a,summary {
  touch-action:manipulation
}

a:focus-visible,summary:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:6px
}

::selection {
  background:#ccdde5
}

.wrap {
  width:min(1184px,calc(100% - 96px));
  margin-inline:auto
}

.header {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:inline-flex;
  align-items:center;
  font-size:26px;
  font-weight:600;
  letter-spacing:-1px;
  gap:10px
}

.brand>span:not(.footer-portrait) {
  margin-left:-10px;
  color:#8b7156
}

.brand>img {
  mix-blend-mode:multiply
}

.header nav {
  display:flex;
  gap:34px;
  font-size:14px
}

.header nav a:hover {
  color:var(--blue)
}

sup {
  font:9px var(--mono);
  color:var(--muted);
  padding-left:4px
}

.eyebrow {
  font:10px/1.8 var(--mono);
  letter-spacing:1.2px;
  color:var(--muted);
  margin:0 0 22px
}

.hero {
  min-height:632px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:20px;
  padding-block:64px
}

.hero-copy {
  position:relative;
  z-index:1
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px
}

.tiny-diamond {
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:var(--blue)
}

h1 {
  font-size:clamp(66px,7.5vw,108px);
  line-height:1.03;
  letter-spacing:-6px;
  font-weight:500;
  margin:0 0 28px
}

h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:#a77748;
  letter-spacing:-5px
}

.intro {
  font-size:18px;
  color:#6c6257;
  line-height:1.7;
  margin:0 0 30px
}

.button {
  display:inline-flex;
  align-items:center;
  gap:38px;
  background:var(--ink);
  color:#fffaf0;
  padding:15px 22px;
  font-size:14px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)
}

.button:hover {
  background:var(--blue)
}

.button span {
  font-size:22px;
  line-height:1
}

.hero-dog {
  margin:0;
  position:relative;
  align-self:center
}

.hero-dog>img {
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:multiply;
  position:relative
}

figcaption {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font:8px/1.7 var(--mono);
  letter-spacing:.8px;
  color:#7b6c5b;
  margin-top:14px
}

.small-rule {
  width:23px;
  height:1px;
  background:var(--tan)
}

.baseline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:19px;
  font:9px/1.6 var(--mono);
  letter-spacing:.6px;
  color:var(--muted)
}

.baseline>span:last-child {
  color:var(--blue);
  font-size:20px;
  line-height:1
}

.work {
  padding-block:82px 88px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:36px
}

.section-heading .eyebrow {
  margin-bottom:15px
}

h2 {
  font-size:42px;
  line-height:1.14;
  letter-spacing:-1.7px;
  font-weight:400;
  margin:0
}

.section-heading>p {
  font:10px/1.9 var(--mono);
  color:var(--muted);
  text-align:right;
  margin:0
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px
}

.project-card {
  background:#fbf9f4;
  border:1px solid var(--line);
  min-width:0;
  display:flex;
  flex-direction:column
}

.project-visual {
  height:177px;
  position:relative;
  overflow:hidden;
  background:var(--tile);
  border-bottom:1px solid var(--line)
}

.project-visual>svg {
  width:100%;
  height:100%;
  padding:18px 55px
}

.project-number {
  position:absolute;
  top:15px;
  left:17px;
  font:9px var(--mono);
  color:#605647
}

.project-body {
  padding:24px
}

.project-body .eyebrow {
  font-size:8px;
  letter-spacing:.7px;
  margin-bottom:9px
}

.project-body h3 {
  font-size:30px;
  line-height:1.2;
  letter-spacing:-1px;
  font-weight:500;
  margin:0 0 10px
}

.project-body .tagline {
  margin:0 0 10px;
  font-size:16px
}

.project-body .description {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:0
}

.project-card details {
  position:relative;
  margin-top:auto;
  border-top:1px solid var(--line);
  font-size:13px
}

.project-card summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
  padding:15px 24px;
  color:#536d7c
}

.project-card summary::-webkit-details-marker {
  display:none
}

.project-card summary:after {
  content:'+';
  font-size:22px;
  line-height:1
}

.project-card details[open] summary:after {
  content:'−'
}

.project-card details>div {
  position:absolute;
  bottom:100%;
  left:-1px;
  right:-1px;
  max-height:min(400px, 65svh);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:23px 24px;
  color:var(--muted);
  background:#fbf9f4;
  border:1px solid var(--line);
  box-shadow:0 -12px 24px #302e2a14
}

.project-card details[open] {
  z-index:2
}

.project-card details[open] summary {
  background:#eee3d2
}

.project-card details p {
  margin:0 0 13px
}

.project-card details .stack {
  font:8px/1.9 var(--mono)
}

.project-card details a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:4px
}

.project-card details a + a {
  display:table;
  margin-top:10px;
}

.behind {
  background:#eee3d2;
  position:relative;
  overflow:hidden
}

.behind-inner {
  padding-block:75px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:90px;
  position:relative
}

.behind h2 {
  font-size:46px;
  line-height:1.15
}

.behind em {
  font-family:Georgia,serif;
  color:#9c7047
}

.behind-copy {
  padding-top:35px;
  color:#6a5d4e;
  position:relative;
  z-index:1
}

.behind-copy .lead {
  font-size:22px;
  line-height:1.4;
  color:var(--ink);
  margin:0 0 20px
}

.behind-copy>p:not(.lead) {
  font-size:15px
}

.note {
  margin-top:27px;
  border-top:1px solid #cdbda8;
  padding-top:18px
}

.note .eyebrow {
  font-size:8px
}

.note p {
  margin:7px 0 0;
  font-size:14px
}

.corner-facet {
  position:absolute;
  width:140px;
  right:-60px;
  bottom:0;
  opacity:.5;
  pointer-events:none
}

.elsewhere {
  padding-block:63px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:35px;
  border-bottom:1px solid var(--line)
}

.elsewhere h2 {
  font-size:28px
}

.elsewhere .eyebrow {
  font-size:8px;
  margin-bottom:14px
}

.elsewhere>a {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-left:1px solid var(--line);
  padding-left:30px
}

.elsewhere>a>span:last-child {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:25px;
  letter-spacing:-.8px
}

.elsewhere b {
  font-weight:400;
  color:var(--blue)
}

.elsewhere a:hover {
  color:var(--blue)
}

.closing {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:clamp(60px,10vw,130px);
  font-weight:500;
  line-height:1;
  letter-spacing:-7px;
  padding-block:58px
}

.closing>span {
  margin-right:auto;
  margin-left:-20px;
  color:var(--tan)
}

.closing svg {
  width:120px;
  flex-shrink:0;
  transform:rotate(-8deg)
}

footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:26px 38px
}

.footer-brand {
  font-size:22px;
  gap:12px
}

.footer-portrait {
  position:relative;
  width:44px;
  height:44px;
  flex-shrink:0
}

.footer-portrait img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  transition:opacity .3s ease
}

.portrait-now {
  filter:grayscale(1)
}

.portrait-then {
  opacity:0
}

.footer-brand:hover .portrait-now,.footer-brand:focus-visible .portrait-now {
  opacity:0
}

.footer-brand:hover .portrait-then,.footer-brand:focus-visible .portrait-then {
  opacity:1
}

.footer-note,.back-top {
  font:8px/1.8 var(--mono);
  letter-spacing:.7px;
  color:var(--muted)
}

.back-top span {
  margin-left:12px;
  color:var(--blue);
  font-size:15px
}

.skip {
  position:absolute;
  top:-100px;
  left:20px;
  z-index:10;
  background:var(--ink);
  color:white;
  padding:14px
}

.skip:focus {
  top:10px
}

@media(min-width:1450px) {
  .hero {
    min-height:690px
  }


}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px)
  }

  .hero {
    min-height:590px;
    gap:0
  }

  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.5px
  }

  h1 {
    letter-spacing:-4px
  }

  .project-grid {
    gap:16px
  }

  .project-body {
    padding:20px
  }

  .project-body h3 {
    font-size:26px
  }

  .project-visual>svg {
    padding-inline:32px
  }

  .behind-inner {
    gap:45px
  }

  .behind h2 {
    font-size:39px
  }

  .elsewhere {
    gap:20px
  }

  .elsewhere>a {
    padding-left:20px
  }

  .elsewhere>a>span:last-child {
    font-size:21px
  }

  .footer-note {
    font-size:7px
  }


}

@media(max-width:720px) {
  .wrap {
    width:calc(100% - 40px)
  }

  .header {
    height:80px
  }

  .brand {
    font-size:23px;
    gap:7px
  }

  .brand>img {
    width:34px;
    height:34px
  }

  .brand>span:not(.footer-portrait) {
    margin-left:-7px
  }

  .header nav {
    gap:19px;
    font-size:12px
  }

  .header nav>a:last-child {
    display:none
  }

  .hero {
    grid-template-columns:1fr;
    gap:25px;
    padding-block:44px 32px;
    min-height:0
  }

  .hero .eyebrow {
    font-size:8px;
    margin-bottom:20px
  }

  .hero h1 {
    font-size:72px;
    letter-spacing:-4px;
    margin-bottom:24px
  }

  h1 em {
    letter-spacing:-4px
  }

  .intro {
    font-size:16px;
    margin-bottom:23px
  }

  .hero-dog {
    width:min(350px,90%);
    justify-self:center
  }

  .hero-dog figcaption {
    font-size:7px;
    margin-top:3px
  }

  .baseline {
    font-size:8px;
    padding-block:16px
  }

  .baseline>span:nth-child(2) {
    display:none
  }

  .work {
    padding-block:49px
  }

  .section-heading {
    align-items:start;
    margin-bottom:26px
  }

  .section-heading h2 {
    font-size:33px
  }

  .section-heading>p {
    display:none
  }

  .eyebrow {
    font-size:9px
  }

  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px
  }

  .project-visual {
    height:135px
  }

  .project-visual>svg {
    padding:15px 20px
  }

  .project-body {
    padding:17px
  }

  .project-body h3 {
    font-size:23px
  }

  .project-body .eyebrow {
    font-size:7px;
    letter-spacing:0
  }

  .project-body .tagline {
    font-size:14px
  }

  .project-body .description {
    font-size:13px
  }

  .project-card summary {
    padding:13px 17px;
    font-size:12px
  }

  .project-card details>div {
    padding:17px
  }

  .behind-inner {
    padding-block:45px;
    grid-template-columns:1fr;
    gap:24px
  }

  .behind h2 {
    font-size:38px
  }

  .behind-copy {
    padding-top:0
  }

  .behind-copy .lead {
    font-size:21px
  }

  .elsewhere {
    padding-block:42px;
    grid-template-columns:1fr;
    gap:26px
  }

  .elsewhere>a {
    border-left:0;
    border-top:1px solid var(--line);
    padding:20px 0 0;
    gap:0
  }

  .elsewhere>a>span:last-child {
    font-size:25px
  }

  .closing {
    font-size:15vw;
    letter-spacing:-3px;
    padding-block:38px;
    gap:5px
  }

  .closing>span {
    margin-left:-5px
  }

  .closing svg {
    width:60px
  }

  footer {
    flex-wrap:wrap;
    gap:18px;
    padding-bottom:26px
  }

  .footer-note {
    order:3;
    width:100%;
    font-size:7px
  }

  .footer-brand {
    font-size:22px
  }

  .back-top {
    font-size:7px
  }

  .corner-facet {
    right:-20px;
    width:110px
  }


}

@media(max-width:430px) {
  .project-grid {
    grid-template-columns:1fr
  }

  .project-visual {
    height:180px
  }

  .project-visual>svg {
    padding:18px 70px
  }

  .project-body {
    padding:23px
  }

  .project-body h3 {
    font-size:30px
  }

  .project-body .eyebrow {
    font-size:8px
  }

  .project-body .tagline {
    font-size:16px
  }

  .project-body .description {
    font-size:14px
  }

  .project-card summary {
    padding:15px 23px
  }

  .project-card details>div {
    padding:23px
  }

  .header nav {
    gap:15px
  }

  .hero h1 {
    font-size:67px
  }


}

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

  .footer-portrait img {
    transition:none
  }


}

.visual-agmen {
  --tile:#ebe0cd
}

.visual-castra {
  --tile:#dfe6e5
}

.visual-split {
  --tile:#e9e3d9
}

.visual-retrofactum {
  --tile:#e9dfda
}

.visual-goddamnit {
  --tile:#e2e4d7
}

.visual-cfb {
  --tile:#e4e7da
}

.visual-travel {
  --tile:#dfe7e6
}


.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}