@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--night:#202723;--light:#efeee5;--accent:#d1d4b8;--olive:#a6aa8d;--line:#efeee544;--type:'Golos Text',Arial,sans-serif;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--light);background:var(--night);font:16px/1.65 var(--type)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}.skip{position:absolute;left:10px;top:-80px;z-index:10;background:var(--light);color:var(--night);padding:10px}.skip:focus{top:10px}header,footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px max(6vw,22px);position:relative;z-index:2}header{position:absolute;inset:0 0 auto;border-bottom:1px solid var(--line)}.name{font:500 12px/1.1 var(--mono);letter-spacing:.06em}.name span{display:block;margin-top:6px;font-size:9px;letter-spacing:.3em;color:var(--accent)}.header-link,footer>a:last-child{font-size:12px}.header-link span{margin-left:10px}.scene{min-height:min(900px,100svh);isolation:isolate;position:relative;overflow:hidden;display:grid;align-items:end}.photograph{position:absolute;inset:0 0 0 29%;z-index:-2}.photograph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 27%;filter:brightness(.78) saturate(.72)}.scene:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#202723 19%,#202723f2 29%,#20272383 46%,transparent 73%),linear-gradient(0deg,#202723 0%,#20272375 24%,transparent 56%,#151c18a0 100%)}.scene-copy{padding:135px max(6vw,22px) 7vh;max-width:1200px}.mark{display:flex;align-items:center;gap:11px;font:400 10px/1.5 var(--mono);letter-spacing:.095em}.mark span{width:24px;height:1px;background:currentColor;opacity:.5}h1,h2{font-weight:500;letter-spacing:-.068em;line-height:.96;margin:0}h1{font-size:clamp(72px,10.4vw,156px);margin:24px 0 26px}h2{font-size:clamp(55px,7.5vw,118px)}p{margin:0}.lead{max-width:29ch;font-size:clamp(15px,2vw,20px);color:#e3e4d6}.hero-link,.line-link{display:inline-flex;align-items:center;gap:28px;padding:10px 0;border-bottom:1px solid currentColor;margin-top:27px;font-size:13px}.hero-link:hover,.line-link:hover,.header-link:hover{text-decoration:underline;text-underline-offset:5px}.conversation{background:var(--light);color:var(--night);display:grid;grid-template-columns:1fr 2fr;padding:clamp(60px,9vw,145px) max(6vw,22px);gap:28px}.conversation h2{margin-bottom:30px}.conversation div>p{max-width:50ch;font-size:clamp(17px,2vw,23px)}.conversation div>.small{margin-top:18px;font-size:14px;max-width:54ch}.contact{background:var(--olive);color:#1b211d;padding:clamp(60px,9vw,145px) max(6vw,22px);display:grid;grid-template-columns:1fr 1fr;gap:9vw}.contact h2{margin:25px 0}.contact>div>p:last-child{max-width:34ch;font-size:14px}form{display:grid;gap:18px}.demo{border-block:1px solid #20272355;padding:10px 0;font-size:11px}label{font-size:12px}input,textarea{display:block;width:100%;padding:9px 0;color:inherit;background:none;border:0;border-bottom:1px solid #20272377;border-radius:0;resize:vertical}input::placeholder,textarea::placeholder{color:#363e31}.form-end{display:flex;align-items:center;justify-content:space-between;gap:12px}.form-end small{font-size:10px}button{background:var(--night);color:var(--light);border:0;padding:12px 18px;cursor:pointer}button:hover{background:#37443a}dialog{background:var(--light);color:var(--night);border:0;width:min(90%,510px);padding:38px}dialog::backdrop{background:#101912be}dialog h2{font-size:45px;margin:24px 0}dialog i{font-style:normal}dialog button{position:absolute;right:8px;top:8px}.label{font:10px var(--mono)}footer{padding-block:35px}
@media(max-width:740px){header{padding-block:18px}.scene{min-height:690px;min-height:max(630px,92svh)}.photograph{inset:0 0 16%;}.photograph img{object-position:center 18%;filter:brightness(.87) saturate(.72)}.scene:after{background:linear-gradient(0deg,#202723 8%,#202723 17%,#202723c7 35%,transparent 66%,#10191385 100%)}.scene-copy{padding-bottom:36px}.scene-copy .mark{font-size:8px}.scene h1{font-size:clamp(56px,13.5vw,96px);margin:13px 0 18px}.lead{font-size:14px}.hero-link{margin-top:13px}.conversation,.contact{grid-template-columns:1fr}.contact{gap:35px}.conversation h2{margin-bottom:22px}.form-end{align-items:flex-start;flex-direction:column}.form-end button{width:100%;text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* A shared reading column continues from the portrait through the form. */
.conversation,
.contact {
  display: block;
  padding: clamp(52px, 8vw, 112px) max(6vw, 22px) 0;
  background: transparent;
  color: var(--light);
}

.conversation > div,
.contact > div,
.contact form {
  max-width: 660px;
}

.conversation h2,
.contact h2 {
  margin: 0 0 24px;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.04;
}

.conversation div > p,
.contact > div > p:last-child {
  color: #dddcd0;
}

.contact form {
  margin-top: 32px;
}

.demo {
  border: 0;
  padding: 0;
  color: var(--accent);
}

input,
textarea {
  border-bottom-color: var(--line);
}

input::placeholder,
textarea::placeholder {
  color: #c0c4b7;
}

.form-end button {
  width: auto;
  padding: 9px 0;
  color: var(--light);
  background: transparent;
  border-bottom: 1px solid currentColor;
}

.form-end button:hover {
  color: var(--accent);
}

header {
  border: 0;
}

footer {
  margin-top: clamp(52px, 8vw, 112px);
}

.masthead {
  justify-content: flex-start;
}

.studio-signature {
  text-align: left;
  font-size: clamp(20px, 2.5vw, 31px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.studio-signature span {
  display: block;
  margin-top: 7px;
  color: var(--accent);
  font: 400 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .32em;
}

.contact-curtain summary {
  display: flex;
  justify-content: space-between;
  max-width: 660px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
}
.contact-curtain summary::-webkit-details-marker { display: none; }
.contact-curtain summary span { transition: transform .2s ease; }
.contact-curtain[open] summary span { transform: rotate(45deg); }
.contact-panel { padding-top: 34px; }
.contact-panel > div > p { color: #dddcd0; }
@media (prefers-reduced-motion: no-preference) {
  .contact-curtain[open] .contact-panel {
    animation: open-curtain .35s ease-out;
  }
  @keyframes open-curtain {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to { opacity: 1; clip-path: inset(0); }
  }
}

/* Keep the headline inside its own column beside the portrait. */
@media (min-width: 741px) {
  .scene-copy {
    width: 48%;
    min-width: 0;
    padding-right: 0;
  }

  .photograph { left: 49%; }

  .scene::after {
    background: linear-gradient(90deg, var(--night) 46%, transparent 62%), linear-gradient(0deg, var(--night), transparent 37%);
  }

  .scene h1 {
    font-size: clamp(48px, 7.3vw, 110px);
  }
}

@media (max-width: 740px) {
  .scene {
    min-height: 0;
    grid-template-rows: minmax(310px, 55svh) auto;
  }

  .photograph {
    inset: 0 0 auto;
    height: max(310px, 55svh);
  }

  .scene::after {
    inset: 0 0 auto;
    height: max(310px, 55svh);
    background: linear-gradient(0deg, var(--night), transparent 40%, transparent 72%, #10191385);
  }

  .scene-copy {
    grid-row: 2;
    padding-top: 8px;
  }
}