@font-face{
  font-family:Manrope;
  src:url("./assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight:200 800;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("./assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-display:swap;
}

:root{
  --bg:#07110e;
  --ink:#f1eee3;
  --soft:#d6d5c9;
  --dim:#a3a99c;
  --line:#26332e;
  --lime:#dceca0;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:Manrope,"Segoe UI",Arial,sans-serif;
  --g:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.65,.25,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-user-select:none;user-select:none}
p,h1,h2,h3,figure,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;-webkit-user-drag:none}
button{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
@media(hover:none) and (pointer:coarse){a:focus-visible,button:focus-visible{outline:none}}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:20px;top:-100px;z-index:20;padding:10px 20px;background:var(--ink);color:var(--bg)}
.skip-link:focus{top:20px}

/* Header */
.header{position:absolute;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:30px var(--g)}
.wordmark{display:flex;gap:10.5px;align-items:center;font-weight:700;font-size:21px;letter-spacing:-.6px;line-height:1.05}
.brand-mark{width:28.7px;height:31.75px;fill:currentColor;flex:none;transform:translateY(1.3px)}
.wordmark-sub{display:block;font-size:9px;font-weight:500;letter-spacing:3.2px;text-transform:uppercase;margin-top:5px}
.navigation{display:flex;gap:34px;font-size:14px;font-weight:500}
.navigation a{display:inline-flex;align-items:center;min-height:44px;color:var(--soft);transition:color .2s}
.navigation a:hover{color:var(--ink)}
.menu-toggle{display:none;border:0;background:none;padding:10px 0;color:var(--ink);cursor:pointer}

/* Hero */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--bg);isolation:isolate}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#07110e00 95%,#07110e)}
.hero-copy{position:absolute;z-index:2;inset:0;padding:clamp(92px,12vh,118px) var(--g) 0;text-align:center}
h1{font:400 clamp(46px,min(7.4vw,12.4vh),136px)/.94 var(--serif);letter-spacing:-.025em}
h1 span{display:block;color:var(--lime)}
h1 .h1-lead{color:var(--ink)}

/* Lower page: ivory for reading, dark for Crowns, glowing green close. */
.wrap{width:min(100% - var(--g)*2,1120px);margin-inline:auto}
.section-title{font:600 14px/1.5 var(--sans)}
.ivory{--i-ink:#07110e;--i-soft:#2c3a34;--i-line:#07110e2b;--i-green:#1d5647;background:var(--ink);color:var(--i-ink)}
.ivory .section-title{color:var(--i-ink)}
.text-link{font-size:14px;font-weight:500;padding-block:4px;border-bottom:1px solid currentColor;white-space:nowrap;transition:opacity .2s}
.text-link:hover{opacity:.7}

/* Intro */
.intro{padding-block:clamp(32px,3.6vw,48px);border-bottom:1px solid var(--i-line)}
.intro-row{display:flex;justify-content:space-between;align-items:center;gap:40px}
.intro-row p{max-width:35em;font-size:clamp(17px,1.4vw,19px);line-height:1.55}
.button{display:inline-block;flex:none;padding:13px 26px;border-radius:40px;background:var(--i-ink,#07110e);color:var(--ink);font-size:14px;font-weight:600;transition:background .2s}
.button:hover{background:#1d5647}

/* Studio and What we do */
.studio,.expertise{padding-block:clamp(40px,4.4vw,60px) clamp(56px,6.4vw,88px)}
.expertise{padding-top:0;scroll-margin-top:clamp(40px,4.4vw,60px)}
.statement{font:400 clamp(36px,4.5vw,64px)/1.05 var(--serif);letter-spacing:-.018em;margin-top:clamp(18px,2vw,26px);max-width:20em;text-wrap:pretty}
.statement span{padding-inline:.07em;margin-inline:-.07em;background:linear-gradient(transparent 13%,var(--lime) 13%,var(--lime) 97%,transparent 97%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,48px);margin-top:clamp(22px,2.6vw,32px)}
.services article{border-top:2px solid var(--i-ink);padding-top:18px}
.services h3{font:400 clamp(26px,2.4vw,34px)/1.08 var(--serif);letter-spacing:-.012em;margin-bottom:10px}
.services p{color:var(--i-soft);font-size:16px;line-height:1.55}

/* Crowns */
.projects{color:var(--ink);overflow:hidden;background:radial-gradient(65% 58% at 50% 46%,#1d5647 0,#10362c 52%,#07110e 100%);padding-block:clamp(40px,4.4vw,60px) clamp(56px,6.4vw,88px)}
.projects .section-title{color:var(--lime);margin-bottom:24px}
.project-title{font:400 clamp(110px,23vw,376px)/.8 var(--serif);letter-spacing:-.035em;text-align:center}
.project-art{position:relative;width:min(50vw,672px);margin:clamp(-40px,-2.4vw,-14px) auto 0;filter:drop-shadow(0 50px 60px #000c)}
.project-art img{width:100%;height:auto}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(32px,5vw,72px)}
.project-details{position:relative;margin-top:clamp(36px,4vw,56px)}
.project-tagline{font:400 clamp(26px,2.3vw,32px)/1.12 var(--serif);margin-bottom:8px}
.project-description{color:var(--soft);font-size:16px;line-height:1.55}
.project-meta{color:var(--soft);font-size:15px;line-height:1.75}
.project-status{color:var(--lime)}

/* Contact */
.footer{color:var(--ink);background:radial-gradient(76% 90% at 50% 130%,#5f9c82 0,#1d5647 40%,#0f3b32 78%,#0b2a23 100%);padding-top:clamp(48px,5.4vw,76px)}
.footer-main{align-items:end;color:var(--ink);font-size:17px;line-height:1.6}
.footer h2{font:400 clamp(68px,8.6vw,124px)/.95 var(--serif);letter-spacing:-.025em;margin-bottom:24px}
.footer-email{margin-top:12px;font:500 clamp(18px,1.84vw,26px)/1.25 var(--sans);letter-spacing:-.015em;-webkit-user-select:text;user-select:text}
.footer-email a{color:var(--lime);transition:opacity .2s}
.footer-email a:hover{opacity:.75}
.footer-email ::selection{background:var(--lime);color:#0b2a23}
.footer h3{font:600 14px/1.5 var(--sans);color:var(--lime);margin-bottom:8px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(40px,4.6vw,64px);padding-block:18px 24px;border-top:1px solid #f1eee333;color:var(--ink);font-size:14px}

/* Motion. Entrance runs on page load. Highlight and Lines only start from their hidden state once script.js confirms motion is welcome. */
@keyframes rise{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  h1 span{animation:rise 1.1s var(--ease) .38s both}
  h1 .h1-lead{animation-delay:.15s}
  .hero-image{transform-origin:50% 100%;animation:settle 1.8s var(--ease) both}
}
.has-motion .statement span{background-size:0 100%;background-repeat:no-repeat;transition:background-size 1.1s cubic-bezier(.65,0,.2,1) .1s}
.has-motion .statement span.is-drawn{background-size:100% 100%}
.has-motion .services article{position:relative;border-top-color:transparent}
.has-motion .services article::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--i-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease);transition-delay:var(--delay,0s)}
.has-motion .services article.is-drawn::before{transform:none}

@media(max-width:800px){
  body{font-size:16px}
  .header{padding:22px var(--g)}
  .menu-toggle:not([hidden]){display:flex;align-items:center;min-height:44px;padding-left:20px;font-size:16px;font-weight:500;letter-spacing:-.01em;transform:translateY(-4px)}
  .wordmark,.footer-email a,.text-link{position:relative}
  .wordmark::after,.footer-email a::after,.text-link::after{content:"";position:absolute;inset:-10px 0}
  .js .navigation{display:none;position:absolute;top:88px;left:0;right:0;padding:12px var(--g) 20px;background:var(--bg)}
  .js .navigation.is-open{display:flex;flex-direction:column;gap:2px}
  .js .navigation a{font-size:16px;color:var(--ink)}
  /* The opening fills the screen. --W is the image width; the terrace rises .258 of it from the bottom. */
  .hero{--W:max(100vw,min(290vw,150svh));height:100svh;min-height:520px}
  .hero-image{inset:auto auto 0 calc(50% - var(--W)/2);width:var(--W);max-width:none;height:auto}
  .hero-copy{inset:0 0 auto;height:calc(100% - .258*var(--W));display:flex;flex-direction:column;justify-content:center;padding:76px var(--g) 0}
  h1{font-size:min(17.6vw,10.4svh,76px)}
  .header:has(.navigation.is-open)~main h1{visibility:hidden}
  .intro-row{display:block}
  .intro{padding-block:44px}
  .intro-row p{font-size:min(5.6vw,28px);line-height:1.36;letter-spacing:-.015em}
  .intro-row .button{margin-top:26px;padding:16px 30px;font-size:15px}
  .studio{padding-block:44px 76px}
  .statement{font-size:min(13vw,76px);line-height:1;letter-spacing:-.025em;margin-top:22px}
  .expertise{padding-bottom:84px}
  .services h3{font-size:min(10.8vw,60px);line-height:1;letter-spacing:-.02em;margin-bottom:12px}
  .services,.split{grid-template-columns:1fr}
  .services{gap:40px;margin-top:22px}
  /* Same proportions as desktop: the title slightly wider than the board, which overlaps its base. */
  .projects{--title:min(36vw,240px);padding-bottom:84px}
  .project-details{margin-top:44px;gap:30px}
  .project-tagline{font-size:min(12.4vw,64px);line-height:1;letter-spacing:-.02em;margin-bottom:18px;text-wrap:balance}
  .project-title{font-size:var(--title)}
  .project-art{width:min(78vw,490px);margin:calc(var(--title)*-.105) auto 0}
  .footer{padding-top:60px}
  .footer h2{font-size:min(19vw,104px);line-height:.95;letter-spacing:-.028em;margin-bottom:18px}
  .footer-email{font-size:min(5.4vw,26px);margin-top:14px}
  .footer-main{gap:0}
  .footer-main>section:last-child{margin-top:36px;padding-top:24px;border-top:1px solid #f1eee333}
  .footer-main>section:last-child p{font-size:15px;line-height:1.65;color:#f1eee3d9}
  /* One closing line: copyright left, Back to top right, in the same type. */
  .footer-bottom{align-items:baseline;margin-top:44px;padding-block:0 28px;border-top:0;font-size:13px;line-height:1.5;color:#f1eee3d9}
  .footer-bottom .text-link{padding-block:0;border-bottom:0;font-size:13px}
}
@media(max-width:520px){
  .copyright-rest{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .has-motion .statement span{background-size:100% 100%}
  .has-motion .services article::before{transform:none}
}