:root{
  /* ---- color: yours ---- */
  --paper:#ffffff;
  --ink:#000000;
  --ink-2:#000000;
  --ink-3:#000000;
  --rule:#000000;
  --rule-w:1px;              /* Rose LA uses .5px pure black; this is a touch heavier */
  --radius:20px;

  /* ---- type ---- */
  --display:"Instrument Serif", Georgia, serif;
  --text:"ABC Monument Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:"ABC Monument Grotesk Mono","ABC Monument Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.9rem, 7.4vw, 6.75rem);
  --t-h2:clamp(1.7rem, 3.4vw, 3.1rem);
  --t-lede:clamp(1.0625rem, 1.5vw, 1.4rem);
  --t-body:clamp(1rem, 1.05vw, 1.0625rem);
  --t-meta:.78rem;

  /* ---- spacing scale ---- */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem;
  --s5:4rem;  --s6:6rem; --s7:9rem;   --s8:13rem;

  --gutter:clamp(1.25rem, 4vw, 4.5rem);
  --measure:62ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}

.wrap{padding-inline:var(--gutter)}
.meta{
  font-family:var(--mono);
  font-size:var(--t-meta); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); font-weight:400;
}

/* ---- buttons: Monument Mono, uppercase ---- */
.btn{
  display:inline-block; font-family:var(--mono);
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--ink);
  padding:1.05em 2.1em; border-radius:var(--radius); line-height:1;
  transition:background-color .2s ease, color .2s ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}

/* ============ HEADER ============ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:baseline; justify-content:space-between;
  padding:var(--s3) var(--gutter);
  color:#ffffff;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:var(--paper); color:var(--ink);
  border-bottom-color:var(--rule);
  padding-block:calc(var(--s3) * .7);
}
.site-header.is-scrolled .site-nav a{color:var(--ink)}
.site-header.is-scrolled .site-nav a:hover{text-decoration:underline; text-underline-offset:.3em}
.wordmark{
  font-family:var(--display); font-size:1.15rem; letter-spacing:-.02em; line-height:1;
  white-space:nowrap;
}
.site-nav{display:flex; align-items:baseline; gap:var(--s3); white-space:nowrap}

/* centered mark — masked so it inherits the header color on video and on paper */
.nav-illo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:2.9rem; height:2.51rem;
  background-color:currentColor;
  -webkit-mask:url("/assets/eml-illo.svg") center/contain no-repeat;
          mask:url("/assets/eml-illo.svg") center/contain no-repeat;
}
@media (max-width:640px){ .nav-illo{width:2.3rem; height:1.99rem} }
/* four links plus the wordmark will not fit a phone — keep the action, drop the rest */
@media (max-width:640px){
  .site-nav a:not(.nav-cta){display:none}
}
.site-nav a{font-size:var(--t-meta); letter-spacing:.09em; text-transform:uppercase}
.site-nav a:hover{text-decoration:underline; text-underline-offset:.3em}

/* ============ HERO ============ */
.hero{position:relative; height:100svh; min-height:34rem; overflow:hidden; background:var(--ink)}
.hero video,.hero .placeholder{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Placeholder stands in for the loop. Delete when the footage lands. */
.placeholder{
  background:
    radial-gradient(120% 90% at 22% 18%, #efe2d2 0%, rgba(239,226,210,0) 58%),
    radial-gradient(100% 80% at 78% 78%, #b9a894 0%, rgba(185,168,148,0) 60%),
    linear-gradient(168deg,#dccbb6 0%,#c3b19b 42%,#9d8b77 100%);
}
.placeholder::after{
  content:""; position:absolute; inset:0; opacity:.3; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}
.hero-caption{
  position:absolute; left:var(--gutter); bottom:var(--s4); z-index:5;
  color:#ffffff;
}

/* ============ STATEMENT ============ */
.statement{padding-block:var(--s7) var(--s6)}
.statement h1{
  font-family:var(--display); font-weight:400;
  font-size:var(--t-display); line-height:.96; letter-spacing:-.04em;
  margin:0 0 var(--s4); max-width:16ch;
}
.statement p{font-size:var(--t-lede); line-height:1.5; max-width:46ch; margin:0; color:var(--ink-2)}

/* ============ SECTIONS ============ */
.sec{padding-block:var(--s6)}
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); padding-bottom:var(--s3); margin-bottom:var(--s4);
  border-bottom:var(--rule-w) solid var(--rule);
}
.sec-head h2{font-family:var(--display); font-weight:400; font-size:var(--t-h2); letter-spacing:-.035em; margin:0}

/* ============ WORK ============ */
.work{display:grid; gap:var(--s5)}
.proj figure{margin:0}
.proj .frame{
  position:relative; width:100%; overflow:hidden; background:#ededed;
  aspect-ratio:var(--ar, 3/2);
  border-radius:var(--radius);
}
.proj .frame > *{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.proj figcaption{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s1) var(--s3); padding-top:var(--s2);
}
.proj .title{font-family:var(--display); font-size:1.3rem; letter-spacing:-.03em; line-height:1}
.soon{
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
  margin-left:.7em;
}
.specs{text-align:right; line-height:1}
.specs span + span::before{content:"|"; margin:0 .62em}
@media (max-width:640px){
  .proj figcaption{flex-direction:column; align-items:flex-start}
  .specs{text-align:left}
}
.work-grid{display:grid; gap:var(--s5)}
@media (min-width:860px){
  .work-grid{grid-template-columns:1fr 1fr; gap:var(--s4)}
  .work{gap:var(--s6)}
}

/* ============ FINISHES ============ */
.finishes{display:grid; gap:0; border-top:var(--rule-w) solid var(--rule)}
/* the table supplies its own top rule — drop the section-head rule here so they don't double up */
#finishes .sec-head{border-bottom:none; padding-bottom:0; margin-bottom:var(--s3)}
.fin{
  display:grid; grid-template-columns:1fr; gap:var(--s1);
  padding-block:var(--s3); border-bottom:var(--rule-w) solid var(--rule);
}
.fin h3{font-family:var(--display); font-weight:400; font-size:1.5rem; letter-spacing:-.03em; margin:0}
.fin p{margin:0; color:var(--ink-2); max-width:54ch}
.variants{display:grid; gap:var(--s2)}
.variant{display:grid; gap:.15rem}
.v-name{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.07em;
  text-transform:uppercase;
}
.variant p{max-width:54ch}
@media (min-width:760px){
  .fin{grid-template-columns:14rem 1fr auto; align-items:baseline; gap:var(--s4)}
}

/* ============ CONTACT ============ */
.contact{padding-block:var(--s7) var(--s6); border-top:var(--rule-w) solid var(--rule)}
.contact-grid{display:grid; gap:var(--s5); align-items:center}
.contact-line{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,5.2vw,4.25rem); line-height:1.02; letter-spacing:-.04em;
  margin:0 0 var(--s4);
}
.illo{width:100%; max-width:30rem; height:auto; justify-self:center}
@media (min-width:880px){
  .contact-grid{grid-template-columns:1fr .82fr; gap:var(--s6)}
  .illo{justify-self:end; max-width:26rem}
}

/* ============ FOOTER ============ */
.site-footer{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s2) var(--s4);
  justify-content:space-between; padding:var(--s4) var(--gutter) var(--s5);
}

@media (prefers-reduced-motion:reduce){
  .hero video{display:none}
}

/* ============ INTERIOR PAGES ============ */
.page{padding-top:calc(var(--s6) + var(--s4))}
.page-head{padding-bottom:var(--s5); border-bottom:var(--rule-w) solid var(--rule)}
.page-head h1{
  font-family:var(--display); font-weight:400;
  font-size:var(--t-display); line-height:.96; letter-spacing:-.04em;
  margin:var(--s2) 0 var(--s4); max-width:14ch;
}
.page-head .lede{font-size:var(--t-lede); line-height:1.5; max-width:50ch; margin:0; color:var(--ink-2)}

/* the facts that qualify a project before anyone writes in */
.gates{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; gap:0; border-top:var(--rule-w) solid var(--rule);
}
.gates li{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s1) var(--s3);
  padding:var(--s2) 0; border-bottom:var(--rule-w) solid var(--rule);
}
.gates .g-k{font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.07em; text-transform:uppercase}
.gates .g-v{max-width:48ch}
@media (min-width:720px){ .gates .g-v{text-align:right} }

/* ============ FORM ============ */
/* .form sets display:grid, which beats the UA rule behind the hidden attribute —
   without this the form stays on screen after a successful send */
[hidden]{display:none !important}
.form{display:grid; gap:var(--s3); max-width:46rem; margin-top:var(--s4)}
.row{display:grid; gap:var(--s3)}
@media (min-width:720px){ .row{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:.55rem}
.field > label,.lgd{
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink);
}
.field .hint{font-size:.9rem; color:var(--ink-2); margin:0}
input,select,textarea{
  font-family:var(--text); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:10px;
  padding:.85em 1em; width:100%;
}
textarea{min-height:9rem; resize:vertical; line-height:1.5}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink); outline-offset:2px}
fieldset{border:0; padding:0; margin:0; display:grid; gap:.55rem}
.choices{display:flex; flex-wrap:wrap; gap:.6rem}
.choice{position:relative}
.choice input{position:absolute; opacity:0; width:1px; height:1px}
.choice span{
  display:inline-block; font-family:var(--mono); font-size:var(--t-meta);
  letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:999px; padding:.7em 1.2em; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.choice input:checked + span{background:var(--ink); color:var(--paper)}
.choice input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-actions{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s2) var(--s3); margin-top:var(--s2)}
.form button{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink);
  padding:1.05em 2.1em; border-radius:var(--radius); line-height:1; cursor:pointer; width:auto;
  transition:background-color .2s ease, color .2s ease;
}
.form button:hover{background:var(--paper); color:var(--ink)}

/* ============ DIRECT CONTACT ============ */
.direct{display:grid; gap:var(--s4); margin-top:var(--s5)}
@media (min-width:720px){ .direct{grid-template-columns:repeat(3,1fr)} }
.direct h3{font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.07em; text-transform:uppercase; margin:0 0 .6rem; font-weight:400}
.direct p{margin:0; font-size:1.05rem}
.form-note{margin:0; color:var(--ink-2); font-size:.95rem}
.form-done{max-width:46rem; margin-top:var(--s4); padding:var(--s4); border:var(--rule-w) solid var(--rule); border-radius:var(--radius)}
.form-done h3{font-family:var(--display); font-weight:400; font-size:1.6rem; letter-spacing:-.03em; margin:0 0 var(--s2)}
.form-done p{margin:0; color:var(--ink-2); max-width:44ch}
.opt{font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); opacity:.45; margin-left:.5em}

/* ============ PROCESS STEPS ============ */
.steps{list-style:none; margin:var(--s4) 0 0; padding:0; border-top:var(--rule-w) solid var(--rule)}
.steps li{
  display:grid; align-items:baseline; gap:var(--s1) var(--s4);
  padding:var(--s3) 0; border-bottom:var(--rule-w) solid var(--rule);
}
@media (min-width:720px){ .steps li{grid-template-columns:3.5rem 1fr} }
.s-n{
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.09em;
  color:var(--ink-2); opacity:.45;
}
.steps h3{
  font-family:var(--display); font-weight:400; font-size:1.3rem;
  letter-spacing:-.03em; line-height:1; margin:0 0 .65rem;
}
.steps p{margin:0; color:var(--ink-2); max-width:56ch}

/* ============ ABOUT ============ */
.about{display:grid; gap:var(--s5); align-items:start}
@media (min-width:860px){ .about{grid-template-columns:1fr .78fr; gap:var(--s6)} }
.about-copy p{font-size:var(--t-body); line-height:1.6; color:var(--ink-2); margin:0 0 var(--s3); max-width:58ch}
.about-copy p:last-child{margin-bottom:0}
.about-copy strong{color:var(--ink); font-weight:500}
.portrait{position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius); background:#ededed;
  /* figure carries a UA margin of 1em 40px, which indents it away from the copy */
  margin:0;
}
/* on a phone the portrait leads, flush left with the text below it */
@media (max-width:859px){ .portrait{order:-1} }
.portrait > *{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.portrait figcaption{
  position:absolute; inset:auto 0 0 0; height:auto; padding:var(--s2);
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-2); background:transparent;
}
.pull{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.55rem,2.9vw,2.35rem); line-height:1.18; letter-spacing:-.03em;
  margin:var(--s5) 0 0; max-width:30ch; color:var(--ink);
  /* hang the opening quote into the margin so the text block stays flush left */
  text-indent:-.42em;
}
.credentials{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s1) var(--s3);
  margin-top:var(--s5); padding-top:var(--s3); border-top:var(--rule-w) solid var(--rule);
}

/* ============ MOBILE NAV ============ */
/* The hamburger and the panel only exist on phones; above 640px the inline nav stands. */
.nav-toggle{
  display:none;
  position:relative; z-index:1;
  width:1.75rem; height:1.75rem; padding:0; margin:0;
  background:none; border:0; cursor:pointer; color:inherit;
  align-items:center; justify-content:center;
}
.nav-toggle span{
  position:absolute; left:.125rem; right:.125rem; height:1px;
  background:currentColor;
}
.nav-toggle span:first-child{top:.6rem}
.nav-toggle span:last-child{top:1.05rem}

.nav-panel{
  position:fixed; inset:0; z-index:40;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column;
  padding:var(--s3) var(--gutter) var(--s4);
  visibility:hidden; opacity:0;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.nav-panel.is-open{visibility:visible; opacity:1; transition-delay:0s}

.nav-panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  min-height:1.75rem;
}
.nav-panel-head .wordmark{color:var(--ink)}
.nav-close{
  position:relative;
  width:1.75rem; height:1.75rem; padding:0; margin:0;
  background:none; border:0; cursor:pointer; color:var(--ink);
  flex:0 0 auto; align-self:center;
}
.nav-close span{
  position:absolute; left:.125rem; right:.125rem; top:50%; height:1px;
  background:currentColor;
}
.nav-close span:first-child{transform:rotate(45deg)}
.nav-close span:last-child{transform:rotate(-45deg)}

.nav-panel nav{
  display:flex; flex-direction:column;
  margin-top:var(--s5); border-top:var(--rule-w) solid var(--rule);
}
.nav-panel nav a{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 10vw, 2.9rem); line-height:1; letter-spacing:-.02em;
  text-transform:none;
  padding:var(--s3) 0;
  border-bottom:var(--rule-w) solid var(--rule);
}
.nav-panel-foot{
  margin-top:auto; padding-top:var(--s4);
  display:flex; flex-direction:column; gap:var(--s1);
}

@media (max-width:640px){
  .nav-toggle{display:flex}
  .site-nav a{display:none}
}
@media (min-width:641px){
  .nav-panel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-panel{transition:none}
}