:root{
  --ink:#14120F;
  --ink-lift:#1B1814;
  --graphite:#7C7466;
  --ecru:#C6BCA9;
  --bone:#F2EDE3;
  --edge:rgba(242,237,227,.13);
  --display:"Poiret One",system-ui,sans-serif;
  --body:"Spectral",Georgia,serif;
  --measure:34rem;
  --gutter:clamp(1.5rem,5vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--ecru);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1.02rem,.55vw + .9rem,1.14rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--bone);text-decoration-color:var(--graphite);text-underline-offset:.25em}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:4px;
}

/* ---------- type ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:1.08;
  color:var(--bone);
  letter-spacing:.005em;
}
.eyebrow{
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 1.6rem;
}
.lede{
  font-size:1.22em;
  line-height:1.6;
  color:var(--bone);
  font-weight:300;
}

/* ---------- masthead ---------- */
.masthead{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1.05rem var(--gutter);
  background:linear-gradient(to bottom,rgba(20,18,15,.94),rgba(20,18,15,.78) 62%,transparent);
  opacity:0;
  transform:translateY(-100%);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.masthead.is-visible{opacity:1;transform:none;pointer-events:auto}
.masthead img{width:clamp(190px,22vw,280px);opacity:.96}
.masthead a{text-decoration:none}
.masthead nav{
  display:flex;
  gap:clamp(1.1rem,2.4vw,2.4rem);
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.masthead nav a{color:var(--ecru);transition:color .25s}
.masthead nav a:hover{color:var(--bone)}
@media(max-width:640px){.masthead nav a:not(.nav-contact){display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero picture,.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero img{object-fit:cover;object-position:58% 50%}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,var(--ink) 2%,rgba(20,18,15,.72) 34%,rgba(20,18,15,.05) 68%),
    linear-gradient(to right,rgba(20,18,15,.82),rgba(20,18,15,.12) 55%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 var(--gutter) clamp(3.5rem,9vh,7rem);
}
.hero h1{
  margin:0 0 1.5rem;
  max-width:19ch;
  font-size:clamp(2.6rem,7.2vw,6.1rem);
}
.hero p{max-width:46ch;margin:0 0 2.4rem}

/* ---------- buttons ---------- */
.cta{
  display:inline-block;
  font-family:var(--display);
  font-size:.86rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  padding:1.05rem 2.3rem;
  border:1px solid var(--edge);
  background:rgba(242,237,227,.03);
  transition:background .3s ease,border-color .3s ease;
}
.cta:hover{background:rgba(242,237,227,.1);border-color:rgba(242,237,227,.4)}

/* ---------- sections ---------- */
.section{padding:clamp(5.5rem,13vh,10rem) var(--gutter);position:relative}
.section + .section{border-top:1px solid var(--edge)}
.section h2{margin:0 0 2rem;font-size:clamp(1.9rem,4vw,3.2rem)}
.wrap{max-width:78rem;margin:0 auto}
.measure{max-width:var(--measure)}

/* the spotlight: content emerges from the dark, like the dioramas */
.lit{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);
}
.lit.is-lit{opacity:1;transform:none}

.thesis{text-align:left}
.thesis .wrap{max-width:46rem}
.thesis p{margin:0 0 1.5rem}
.thesis p:last-child{margin-bottom:0}

/* ---------- split with artwork ---------- */
.split{
  display:grid;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .split.reverse .split-art{order:-1}
}
.split-art img{width:100%;height:auto}
.split-art figcaption{
  margin-top:.9rem;
  font-size:.82rem;
  color:var(--graphite);
  font-style:italic;
}

/* ---------- services ---------- */
.services{list-style:none;margin:0;padding:0}
.services li{padding:1.7rem 0;border-top:1px solid var(--edge)}
.services li:last-child{border-bottom:1px solid var(--edge)}
.services h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--bone);
  font-size:1.42rem;
  margin:0 0 .5rem;
  line-height:1.2;
}
.services p{margin:0;font-size:.97rem;line-height:1.65}

/* ---------- clients ---------- */
.clients ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.9rem clamp(1.6rem,4vw,3.4rem);
  font-family:var(--display);
  font-size:clamp(1rem,1.9vw,1.42rem);
  color:var(--bone);
  letter-spacing:.07em;
}
.clients p{color:var(--graphite);font-size:.92rem;margin:1.8rem 0 0}

/* ---------- training feature ---------- */
.feature{background:var(--ink-lift)}
.feature .lede{margin-top:0}
.feature ul{margin:1.8rem 0 2.4rem;padding:0;list-style:none}
.feature li{
  padding-left:1.5rem;
  position:relative;
  margin-bottom:.7rem;
  font-size:.98rem;
}
.feature li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:.55rem;
  height:1px;
  background:var(--graphite);
}

/* ---------- contact ---------- */
.contact .wrap{max-width:46rem}
.contact h2{font-size:clamp(2.1rem,5vw,3.6rem)}
.contact-links{
  margin:2.6rem 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem 2.6rem;
  font-family:var(--display);
  letter-spacing:.1em;
  font-size:1.02rem;
}

/* ---------- footer ---------- */
.foot{
  padding:3.2rem var(--gutter) 3.6rem;
  border-top:1px solid var(--edge);
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem;
  align-items:center;
  justify-content:space-between;
  font-size:.82rem;
  color:var(--graphite);
}
.foot img{width:88px;opacity:.6}
.foot p{margin:0}

/* editorial note, delete before launch */
.todo{
  border:1px dashed rgba(242,237,227,.28);
  padding:1.4rem 1.6rem;
  margin-top:2.4rem;
  font-size:.86rem;
  color:var(--graphite);
  font-style:italic;
}

@media(prefers-reduced-motion:reduce){
  .lit{opacity:1;transform:none;transition:none}
  .masthead{transition:none}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}


/* ============ interior pages ============ */
body.interior .masthead{
  position:sticky;
  opacity:1;
  transform:none;
  pointer-events:auto;
  background:rgba(20,18,15,.93);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--edge);
}
.masthead nav a[aria-current="page"]{color:var(--bone)}

.page-head{padding:clamp(3.5rem,9vh,7rem) var(--gutter) clamp(2.5rem,6vh,4.5rem)}
.page-head .wrap{max-width:56rem}
.page-head h1{margin:0 0 1.5rem;font-size:clamp(2.3rem,5.6vw,4.4rem)}
.page-head .lede{max-width:48ch;margin:0}

/* ============ long-form prose ============ */
.prose{max-width:38rem}
.prose p{margin:0 0 1.45rem}
.prose h2{
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin:3.2rem 0 1.2rem;
}
.prose h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--bone);
  font-size:1.3rem;
  margin:2.4rem 0 .8rem;
  line-height:1.25;
}
.prose ul{margin:0 0 1.6rem;padding:0;list-style:none}
.prose ul li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:.65rem;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:.55rem;
  height:1px;
  background:var(--graphite);
}
.prose blockquote{
  margin:2.4rem 0;
  padding-left:1.6rem;
  border-left:1px solid var(--edge);
  font-family:var(--display);
  font-size:1.4rem;
  line-height:1.4;
  color:var(--bone);
}
.prose strong{font-weight:600;color:var(--bone)}
.prose a{text-decoration:underline}

/* ============ meta line ============ */
.meta{
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 1.4rem;
}
.meta span + span::before{content:"\2004\00b7\2004"}

/* ============ card grids ============ */
.cards{
  display:grid;
  gap:1px;
  background:var(--edge);
  border:1px solid var(--edge);
  grid-template-columns:1fr;
}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{
  background:var(--ink);
  padding:clamp(1.8rem,3.5vw,2.8rem);
  display:flex;
  flex-direction:column;
  gap:.85rem;
  text-decoration:none;
  transition:background .35s ease;
}
.card:hover,.card:focus-visible{background:var(--ink-lift)}
.card h2,.card h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--bone);
  margin:0;
  font-size:1.55rem;
  line-height:1.2;
}
.card p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ecru)}
.card .meta{margin:0}
.card-more{
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-top:auto;
  padding-top:.6rem;
}

/* ============ case study structure ============ */
.facts{
  list-style:none;
  margin:0 0 3rem;
  padding:1.6rem 0;
  border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
  display:grid;
  gap:1.2rem;
  grid-template-columns:1fr;
  max-width:38rem;
}
@media(min-width:620px){.facts{grid-template-columns:1fr 1fr}}
.facts dt{
  font-family:var(--display);
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:.3rem;
}
.facts dd{margin:0;color:var(--bone);font-size:.98rem;line-height:1.5}

.figure-wide{margin:3rem 0}
.figure-wide img{width:100%;height:auto}
.figure-wide figcaption{
  margin-top:.9rem;
  font-size:.82rem;
  color:var(--graphite);
  font-style:italic;
}

/* ============ next / back links ============ */
.pagenav{
  padding:0 var(--gutter) clamp(4rem,9vh,7rem);
}
.pagenav a{
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ecru);
}
.pagenav a:hover{color:var(--bone)}

/* ============ 404 ============ */
.notfound{
  min-height:70svh;
  display:flex;
  align-items:center;
  padding:var(--gutter);
}