:root{
  --cream:      #FAF3E9;
  --cream-deep: #F3E7D6;
  --cocoa:      #4E3A2E;
  --taupe:      #96795F;
  --rose:       #CBA184;
  --charcoal:   #2E241C;
  --hair:       rgba(78,58,46,0.14);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--cocoa);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.grain{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:999;
  filter:url(#grain);
  mix-blend-mode:multiply;
}

h1,h2,h3,blockquote{
  font-family:'Fraunces', serif;
  font-weight:440;
  color:var(--cocoa);
  margin:0;
}

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--cocoa); outline-offset:4px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 48px; }
@media (max-width:680px){ .wrap{ padding:0 24px; } }

.label{
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--taupe);
  font-weight:500;
}

.wave-icon{ width:52px; height:auto; color:var(--rose); display:block; }

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(4px);
  transition:opacity 1.1s cubic-bezier(.22,.6,.24,1),
             transform 1.1s cubic-bezier(.22,.6,.24,1),
             filter 1.1s cubic-bezier(.22,.6,.24,1);
}
.reveal.in{ opacity:1; transform:translateY(0); filter:blur(0); }

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

/* ---------------- Header ---------------- */

header{ position:relative; z-index:20; padding:36px 0 0; }
.nav-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand svg.mark{ width:38px; height:auto; color:var(--cocoa); flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-name{ font-family:'Fraunces', serif; font-size:20px; letter-spacing:0.01em; }
.brand-tag{
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--taupe);
  margin-top:1px;
}
@media (max-width:520px){ .brand-tag{ display:none; } }

nav ul{ display:flex; gap:32px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
nav a{
  text-decoration:none; font-size:14px; letter-spacing:0.02em; color:var(--cocoa);
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .3s ease, color .3s ease;
}
nav a:hover{ border-color:var(--rose); }
nav a.active{ border-color:var(--cocoa); }
@media (max-width:700px){ nav ul{ gap:16px; } nav a{ font-size:12.5px; } }

/* ---------------- Home hero ---------------- */

.hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
.hero-watermark-wrap{
  position:absolute; top:-18%; right:-24%; width:78vw; max-width:1100px;
  z-index:0; pointer-events:none;
}
.hero-watermark{
  display:block; width:100%; height:auto; color:var(--rose); opacity:0.16;
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.035) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce){ .hero-watermark{ animation:none; } }

.hero-content{ position:relative; z-index:2; padding:60px 0 40px; max-width:680px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 12px;
  border:1px solid var(--hair);
  border-radius:100px;
  font-size:12px;
  color:var(--taupe);
  margin-bottom:26px;
}
.badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--rose); flex-shrink:0; }

.hero h1{
  font-size:clamp(34px, 5vw, 58px); line-height:1.22; letter-spacing:-0.01em;
  font-weight:440; max-width:15ch;
}
.hero h1 em{ font-style:italic; font-weight:440; color:var(--taupe); }
.hero-sub{ margin-top:28px; font-size:17px; color:var(--taupe); max-width:38ch; }
.cta-row{ margin-top:44px; display:flex; align-items:center; gap:22px; }

.btn{
  display:inline-block; padding:15px 30px; border-radius:100px;
  border:1px solid var(--cocoa); color:var(--cocoa); text-decoration:none;
  font-size:14.5px; letter-spacing:0.01em;
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.btn:hover{ background:var(--cocoa); color:var(--cream); transform:translateY(-1px); }
.btn-solid{ background:var(--cocoa); color:var(--cream) !important; border-color:var(--cocoa); }
.btn-solid:hover{ background:var(--charcoal); border-color:var(--charcoal); }

@media (max-width:680px){
  .hero{ min-height:auto; padding-top:20px; }
  .hero-watermark-wrap{ width:130vw; right:-40%; top:-6%; }
}

/* ---------------- Explore teaser grid (home) ---------------- */

.explore{ padding:30px 0 140px; }
.explore-head{ margin-bottom:50px; max-width:52ch; }
.explore-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; }
.explore-card{
  border-top:1px solid var(--hair);
  padding-top:22px;
  text-decoration:none;
  display:block;
  color:var(--cocoa);
}
.explore-card .label{ margin-bottom:14px; }
.explore-card h3{
  font-size:19px; line-height:1.35; margin-bottom:10px;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, color .3s ease;
}
.explore-card:hover h3{ border-color:var(--rose); color:var(--cocoa); }
.explore-card p{ font-size:14px; color:var(--taupe); margin:0; }

@media (max-width:900px){ .explore-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .explore-grid{ grid-template-columns:1fr; } }

/* ---------------- Subpage intro block ---------------- */

.page-intro{ padding:160px 0 80px; position:relative; overflow:hidden; }
.page-intro-watermark{
  position:absolute; top:-32%; right:-14%; width:42vw; max-width:480px;
  color:var(--rose); opacity:0.10; pointer-events:none;
}
.page-intro .label{ margin-bottom:20px; display:block; }
.page-intro h1{ font-size:clamp(30px, 4vw, 46px); line-height:1.28; max-width:16ch; }
.page-intro .dek{ margin-top:22px; font-size:16.5px; color:var(--taupe); max-width:48ch; }

/* ---------------- Philosophy page ---------------- */

.philosophy{ padding:20px 0 130px; position:relative; }
.phil-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start; }
.phil-quote-col{ padding-top:10px; }
.phil-quote-col .wave-icon{ margin-bottom:22px; }
blockquote{
  font-size:clamp(24px, 2.6vw, 32px); line-height:1.42; font-style:italic;
  font-weight:440; max-width:14ch;
}
.phil-body{ padding-top:64px; }
.phil-body p{ font-size:16.5px; color:var(--taupe); max-width:46ch; margin:0 0 22px; }
.phil-body p:last-child{ margin-bottom:0; }
.phil-body strong{ color:var(--cocoa); font-weight:600; }

@media (max-width:860px){
  .phil-grid{ grid-template-columns:1fr; gap:36px; }
  .phil-body{ padding-top:0; }
  blockquote{ max-width:none; }
}

/* ---------------- Two Spaces page ---------------- */

.spaces{ padding:20px 0 150px; position:relative; }
.spaces-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.space{ padding:56px 46px; position:relative; }
.space.a{
  border:1px solid var(--hair); border-radius:2px; margin-top:0;
  box-shadow:0 24px 48px -32px rgba(46,36,28,0.18);
}
.space.b{ margin-top:64px; background:var(--charcoal); color:var(--cream); border-radius:2px; }
.space .label{ margin-bottom:18px; }
.space.b .label{ color:var(--rose); }
.space h3{ font-size:25px; line-height:1.32; margin-bottom:16px; max-width:16ch; }
.space.b h3{ color:var(--cream); }
.space p{ font-size:15.5px; color:var(--taupe); max-width:34ch; margin:0; }
.space.b p{ color:#D2C1AA; }
.space .wave-icon{ position:absolute; bottom:36px; right:36px; width:38px; opacity:0.7; }
.space.b .wave-icon{ color:var(--rose); opacity:0.5; }

@media (max-width:860px){
  .spaces-grid{ grid-template-columns:1fr; gap:22px; }
  .space.b{ margin-top:0; }
}

/* ---------------- Archive page ---------------- */

.archive{ background:var(--cream-deep); padding:20px 0 140px; position:relative; overflow:hidden; }
.archive-watermark{
  position:absolute; left:-10%; bottom:-30%; width:50vw; max-width:640px;
  color:var(--rose); opacity:0.10; pointer-events:none;
}
.clippings{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; position:relative; z-index:1; }
.clip{
  background:var(--cream); border-radius:3px; padding:34px 28px;
  box-shadow:0 18px 40px -22px rgba(46,36,28,0.35);
}
.clip:nth-child(1){ transform:rotate(-1.1deg); }
.clip:nth-child(2){ transform:rotate(0.6deg) translateY(18px); }
.clip:nth-child(3){ transform:rotate(-0.4deg); }
.clip p{
  font-family:'Fraunces', serif; font-style:italic; font-size:17.5px; line-height:1.5;
  margin:0 0 18px; color:var(--cocoa);
}
.clip .clip-tag{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--taupe); }
.archive-disclaimer{
  margin-top:46px; font-size:13px; color:var(--taupe); font-style:italic;
  max-width:52ch; position:relative; z-index:1;
}

@media (max-width:860px){
  .clippings{ grid-template-columns:1fr; }
  .clip:nth-child(2){ transform:rotate(0.6deg); }
}

/* ---------------- Manual Wave page ---------------- */

.manualwave{ padding:20px 0 60px; }
.mw-expect{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:26px 44px;
  margin:56px 0 70px;
  padding-top:46px;
  border-top:1px solid var(--hair);
}
.mw-expect li{ list-style:none; display:flex; gap:14px; align-items:flex-start; }
.mw-expect svg{ width:17px; height:17px; margin-top:4px; flex-shrink:0; color:var(--rose); }
.mw-expect .mw-title{ font-weight:600; font-size:15.5px; display:block; margin-bottom:3px; }
.mw-expect .mw-body{ font-size:14.5px; color:var(--taupe); display:block; }
.mw-expect ul{ margin:0; padding:0; display:contents; }

.fw-panel{
  border:1px solid var(--hair); border-radius:3px; padding:64px 56px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center;
  position:relative;
}
.fw-panel .wave-icon{ position:absolute; top:-26px; left:56px; background:var(--cream); padding:0 10px; }
.fw-panel h2{ font-size:clamp(24px, 2.8vw, 30px); line-height:1.3; max-width:15ch; }
.fw-panel .label{ margin-bottom:16px; }
.fw-form{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.fw-micro{ font-size:12.5px; color:var(--taupe); max-width:34ch; }

@media (max-width:800px){ .fw-panel{ grid-template-columns:1fr; padding:44px 28px; } }
@media (max-width:640px){ .mw-expect{ grid-template-columns:1fr; } }

/* ---------------- Page-to-page wayfinding ---------------- */

.next-page{
  padding:0 0 110px;
}
.next-page a{
  display:flex; justify-content:space-between; align-items:baseline;
  text-decoration:none; padding:26px 0; border-top:1px solid var(--hair);
  color:var(--cocoa);
}
.next-page a:hover .np-title{ color:var(--taupe); }
.np-label{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--taupe); }
.np-title{ font-family:'Fraunces', serif; font-size:20px; transition:color .3s ease; }

/* ---------------- Footer ---------------- */

footer{ background:var(--charcoal); color:var(--cream); padding:80px 0 40px; position:relative; overflow:hidden; }
.foot-watermark{
  position:absolute; right:-8%; top:-20%; width:36vw; max-width:420px;
  color:var(--rose); opacity:0.08; pointer-events:none;
}
.foot-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;
  position:relative; z-index:1; padding-bottom:56px; border-bottom:1px solid rgba(250,243,233,0.14);
}
.foot-brand{ display:flex; align-items:center; gap:13px; }
.foot-brand svg.mark{ width:34px; height:auto; color:var(--rose); }
.foot-brand-name{ font-family:'Fraunces', serif; font-size:20px; }
.foot-tag{ font-size:12.5px; color:#C3AD95; margin-top:4px; }
.foot-links{ display:flex; gap:34px; font-size:13.5px; color:#D2C1AA; flex-wrap:wrap; }
.foot-links .disabled{ color:#86765f; }
.foot-links a{ text-decoration:none; }
.foot-links a:hover{ color:var(--rose); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:28px;
  font-size:12px; color:#948577; position:relative; z-index:1; flex-wrap:wrap; gap:10px;
}

@media (max-width:680px){ .foot-top{ flex-direction:column; gap:26px; } }