@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Palette borrowed from the Image Direction doc — Paper/Porcelain/Line/
     Clay/Olive/Bark/Ink. Fonts stay Fraunces + Inter (kept as approved). */
  --bg:#F7F4EF;        /* Paper */
  --bg-deep:#FCFAF6;    /* Porcelain — card/seamless surfaces */
  --ink:#1C1B18;        /* Ink — text, logo */
  --ink-soft:#544F46;   /* secondary body text */
  --label:#9A9488;      /* muted uppercase labels/eyebrows */
  --line:#E4DFD5;       /* hairlines */
  --clay:#B08968;       /* warm secondary accent */
  --accent:#5E6248;     /* Olive — primary accent */
  --bark:#3A3A2E;       /* deep tone */
  --white:#FCFAF6;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:'Fraunces',serif;
  font-weight:400;
  letter-spacing:-0.01em;
  margin:0;
}

.eyebrow{
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--label);
  font-weight:500;
}

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

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 40px;
}

/* ---------- Header ---------- */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,244,239,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 40px;
  max-width:1120px;
  margin:0 auto;
}
.nav img.logo{
  height:16px;
  width:auto;
  display:block;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:40px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.nav-links a{
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav-links a:hover{border-bottom-color:var(--ink);}
.nav-links .portal-link{color:var(--ink-soft);}

/* Small "opens in new tab" mark, used after external-window links */
.ext-icon{
  display:inline-block;
  margin-left:5px;
  vertical-align:1px;
  opacity:.7;
}

/* ---------- Clock / locale tag ---------- */
.locale-tag{
  position:absolute;
  top:38px;
  right:40px;
  z-index:3;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(252,250,246,.6);
  text-align:right;
}
.locale-tag span{display:block;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--bark);
}
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.62;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(28,27,24,.25) 0%, rgba(28,27,24,.15) 40%, rgba(28,27,24,.82) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  color:var(--white);
  padding:0 40px 84px;
  max-width:1120px;
  margin:0 auto;
  width:100%;
}
.hero .eyebrow{color:rgba(252,250,246,.72);margin-bottom:22px;}
.hero h1{
  font-size:clamp(38px, 5.6vw, 74px);
  line-height:1.04;
  max-width:820px;
  color:var(--white);
}
.hero p.lede{
  margin-top:26px;
  max-width:480px;
  font-size:16.5px;
  color:rgba(252,250,246,.82);
}
.hero .cta{
  display:inline-block;
  margin-top:36px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(252,250,246,.55);
  padding-bottom:4px;
}
.hero .cta:hover{border-color:var(--white);}

/* ---------- Section rhythm ---------- */
section{
  padding:100px 0;
  border-bottom:1px solid var(--line);
}
section:last-of-type{border-bottom:none;}

/* Intro / philosophy — single restrained statement */
.intro p.lead-serif{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:clamp(22px,2.6vw,30px);
  color:var(--ink);
  max-width:640px;
  line-height:1.5;
}

/* Minimal word row — replaces long pillar copy */
.tag-row{
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  align-items:center;
}
.tag-row span{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.tag-row span:not(:last-child)::after{
  content:"";
}
.text-link{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid var(--ink);
  padding-bottom:3px;
}

/* Editorial split blocks (about) */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.split-media img{
  width:100%;
  display:block;
  aspect-ratio:4/5;
  object-fit:cover;
}
.split-media.wide img{
  aspect-ratio:16/9;
}
.split-text p{
  color:var(--ink-soft);
  font-size:16.5px;
  max-width:440px;
}

/* Homepage trade tiles */
.tile-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:56px;
}
.tile{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tile img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}
.tile span{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
}

/* Work — sparse image + short caption, no long copy */
.work-block{
  margin-bottom:16px;
}
.work-block img{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}
.work-caption{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:20px 0 60px;
  border-bottom:1px solid var(--line);
}
.work-block:last-child .work-caption{border-bottom:none;padding-bottom:0;}
.work-caption h3{font-size:clamp(20px,2.4vw,26px);}
.work-caption .idx{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent);
}

/* Quote */
.quote{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:clamp(22px,2.8vw,30px);
  line-height:1.55;
  max-width:640px;
}

/* Details rows (About) */
.details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:56px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.details h4{
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
  font-weight:500;
}
.details p{margin:0;font-size:16px;}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
}
.contact-info h4{
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
  font-weight:500;
}
.contact-info a.big{
  font-family:'Fraunces',serif;
  font-size:24px;
  display:inline-block;
  margin-bottom:32px;
  border-bottom:1px solid transparent;
}
.contact-info a.big:hover{border-bottom-color:var(--ink);}
.contact-info p{color:var(--ink-soft);margin:0;}

form.inquiry{display:flex;flex-direction:column;gap:22px;}
form.inquiry label{
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:block;
  margin-bottom:8px;
}
form.inquiry input,
form.inquiry textarea{
  width:100%;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  font-family:'Inter',sans-serif;
  font-size:16px;
  padding:8px 0;
  color:var(--ink);
}
form.inquiry input:focus,
form.inquiry textarea:focus{
  outline:none;
  border-bottom-color:var(--ink);
}
form.inquiry textarea{resize:vertical;min-height:70px;}
form.inquiry button{
  align-self:flex-start;
  margin-top:8px;
  background:none;
  border:1px solid var(--ink);
  padding:13px 30px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
form.inquiry button:hover{background:var(--ink);color:var(--white);}

/* Footer */
footer.site{
  padding:56px 0 40px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  flex-wrap:wrap;
}
.footer-top img.logo{height:14px;opacity:.8;}
.footer-links{
  display:flex;
  gap:32px;
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.footer-bottom{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  font-size:12.5px;
  color:var(--ink-soft);
}

/* Page header (Work / About / Contact) */
.page-hero{
  padding:170px 0 56px;
  border-bottom:none;
}
.page-hero .eyebrow{margin-bottom:16px;}
.page-hero h1{font-size:clamp(34px,4.6vw,52px);}

@media (max-width: 860px){
  .nav-links{gap:20px;font-size:11px;}
  .nav{padding:18px 24px;}
  .wrap{padding:0 24px;}
  section{padding:72px 0;}
  .split, .contact-grid{grid-template-columns:1fr;gap:40px;}
  .details{grid-template-columns:1fr;}
  .hero-content{padding-bottom:56px;}
  .page-hero{padding:130px 0 36px;}
  .locale-tag{display:none;}
  .tile-row{grid-template-columns:repeat(2,1fr);}
}


/* ---------- Mobile nav — hamburger + slide-out drawer ---------- */
.nav-toggle{
  display:none;
  position:relative;
  z-index:65;
  width:34px;height:34px;
  border:none;background:none;padding:0;cursor:pointer;
}
.nav-toggle span{
  position:absolute;left:7px;right:7px;height:1.5px;
  background:var(--ink);border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav-toggle span:nth-child(1){top:12px;}
.nav-toggle span:nth-child(2){top:17px;}
.nav-toggle span:nth-child(3){top:22px;}
body.nav-open .nav-toggle span:nth-child(1){top:17px;transform:rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){top:17px;transform:rotate(-45deg);}

.nav-scrim{
  position:fixed;inset:0;
  background:rgba(28,27,24,.42);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease;
  z-index:55;
}
body.nav-open .nav-scrim{opacity:1;visibility:visible;}
body.nav-open{overflow:hidden;}

@media (max-width:760px){
  .nav-toggle{display:block;}
  body.nav-open header.site{z-index:70;}
  .nav-links{
    position:fixed;top:0;right:0;
    height:100vh;height:100dvh;
    width:min(78vw,320px);
    background:var(--bg-deep);
    border-left:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    padding:92px 34px 40px;
    transform:translateX(100%);
    transition:transform .34s cubic-bezier(.4,0,.2,1);
    z-index:60;
    font-size:14px;
  }
  body.nav-open .nav-links{transform:translateX(0);}
  .nav-links a{
    width:100%;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    letter-spacing:.14em;
  }
  .nav-links a:hover{border-bottom-color:var(--line);}
  .nav-links .portal-link{color:var(--accent);}
}