:root{
  --bg:#11110f; --bg2:#191916;
  --ink:#f0ece2; --muted:#a29c8e;
  --accent:#c2986a; --accent2:#8a6a44;
  --line:#2a2924;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}

/* ---------- Nav ---------- */
.site{position:fixed;top:0;left:0;right:0;z-index:30;
background:linear-gradient(180deg,rgba(17,17,15,.94) 0%,rgba(17,17,15,.78) 65%,rgba(17,17,15,0) 100%)}
nav{max-width:1480px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:24px 48px 34px;gap:20px}
nav ul{padding-top:5px}
.logo{font-family:'Playfair Display',serif;font-size:20px;color:var(--ink);text-decoration:none}
.logo span{display:block;font-family:Inter,sans-serif;font-size:9px;letter-spacing:.5em;color:var(--accent);margin-top:3px;text-transform:uppercase}
nav ul{display:flex;gap:28px;list-style:none;flex-wrap:wrap}
nav ul a{text-decoration:none;color:#cfc9bb;font-size:13.5px}
nav ul a:hover{color:var(--accent)}

/* Mobile menu */
.menu-btn{display:none;background:none;border:none;color:var(--ink);cursor:pointer;
font-family:Inter,sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:8px 0 8px 16px;z-index:50;position:relative}
.mobilenav{position:fixed;inset:0;background:rgba(17,17,15,.98);z-index:40;
display:none;flex-direction:column;justify-content:center;align-items:center;gap:32px}
.mobilenav a{font-family:'Playfair Display',serif;font-size:28px;color:var(--ink);text-decoration:none}
.mobilenav a:hover{color:var(--accent)}
body.nav-open .mobilenav{display:flex}
body.nav-open{overflow:hidden}

/* ---------- Hero (homepage) ----------
   Photo: anchored to viewport right edge, sized by viewport HEIGHT.
   Text: layered above, may overlap the photo's faded left edge. */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden}
.hero-in{position:relative;z-index:2;width:100%;max-width:1560px;margin:0 auto;padding:130px 48px 90px}
.hero-txt{max-width:680px;min-width:0}
h1{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(58px,9vw,150px);
  line-height:.97;letter-spacing:-.015em;
  background:linear-gradient(100deg,#fdfcf9 0%,#f0ece2 60%,#a99f89 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:34px;
}
.roles{
  font-family:Newsreader,serif;font-style:italic;font-weight:300;
  font-size:clamp(17px,1.8vw,23px);color:#d8d2c4;line-height:1.55;
  margin-bottom:44px;
}
.roles em{color:var(--accent);font-style:inherit;white-space:nowrap}
.roles .role{display:block;padding-left:1.5em;text-indent:-1.5em;margin-bottom:8px}
.hlinks{display:flex;gap:32px;flex-wrap:wrap}
.hlinks a{
  color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid var(--accent2);padding-bottom:6px;white-space:nowrap;
}
.hlinks a:hover{color:var(--accent);border-color:var(--accent)}
.hero-photo{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);height:min(86vh,880px)}
.hero-photo img{height:100%;width:auto}
.hero-photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg, rgba(17,17,15,.75) 0%, rgba(17,17,15,0) 30%)}
@media (max-width:1440px){ .hero-photo{height:min(76vh,760px)} }
@media (max-width:1140px){ .hero-photo{height:min(64vh,620px)} }
.scrollcue{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
.scrollcue::after{content:"";width:1px;height:52px;background:linear-gradient(180deg,var(--accent2),transparent)}
.scrollcue:hover{color:var(--accent)}

/* ---------- Quotes ---------- */
.quotes{padding:110px 32px;text-align:center}
.qwrap{position:relative;max-width:880px;margin:0 auto;min-height:230px}
.quote{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.quote.on{opacity:1;pointer-events:auto}
.quote blockquote{font-family:Newsreader,serif;font-style:italic;font-weight:300;font-size:clamp(24px,3.4vw,44px);line-height:1.3}
.quote .cite{margin-top:24px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px}
.qdots{margin-top:36px;display:flex;gap:12px;justify-content:center}
.qdots button{width:8px;height:8px;border-radius:50%;border:none;background:#3d3b33;cursor:pointer;padding:0}
.qdots button.on{background:var(--accent)}

/* ---------- Watch ---------- */
.watch{max-width:1280px;margin:0 auto;padding:40px 32px 120px}
.kicker{color:var(--accent);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:500;margin-bottom:14px}
.watch h2,.pillars h2{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,48px);font-weight:500}
.watch h2{margin-bottom:44px}
.vframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vnote{margin-top:18px;color:var(--muted);font-size:14px}
.vnote a{color:var(--accent);text-decoration:none}

/* ---------- Pillars ---------- */
.pillars{max-width:1280px;margin:0 auto;padding:0 32px 120px}
.pillars h2{margin-bottom:54px;max-width:24ch}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.pcard{border-top:1px solid var(--accent2);padding-top:22px}
.pcard h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;margin-bottom:12px}
.pcard p{color:var(--muted);font-size:14.5px}
.pcard a{color:var(--accent);font-size:13px;letter-spacing:.08em;text-decoration:none;display:inline-block;margin-top:14px}
.pcard a:hover{color:#d3ab7c}

/* ---------- Interior pages ---------- */
.page{max-width:960px;margin:0 auto;padding:160px 32px 100px}
.page h1.title{
  font-family:'Playfair Display',serif;font-weight:500;
  font-size:clamp(40px,5.5vw,72px);line-height:1.02;
  background:none;-webkit-text-fill-color:currentColor;color:var(--ink);
  margin-bottom:40px;
}
.page .float{float:right;width:min(360px,42%);margin:6px 0 28px 40px}
.page .float.framed img{border:1px solid var(--line)}
.page .float figcaption{margin-top:10px;color:var(--muted);font-size:12.5px;letter-spacing:.06em}
.prose p{color:#c6c0b2;font-size:17px;line-height:1.8;margin-bottom:24px;max-width:70ch}
.prose p strong{color:var(--ink);font-weight:500}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent2)}
.prose a:hover{color:#d3ab7c}
.rows{margin-top:24px}
.row{border-top:1px solid var(--line);padding:34px 0}
.row h3{font-family:'Playfair Display',serif;font-size:24px;font-weight:500;margin-bottom:10px}
.row h3 .where{font-family:Newsreader,serif;font-style:italic;font-weight:300;color:var(--accent);font-size:19px;margin-left:10px}
.row p{color:var(--muted);font-size:15.5px;max-width:64ch;margin-bottom:10px}
.row a{color:var(--accent);font-size:13.5px;letter-spacing:.06em;text-decoration:none}
.row a:hover{color:#d3ab7c}
.pagecta{margin-top:50px;border-top:1px solid var(--line);padding-top:36px}
.pagecta p{color:var(--muted);font-size:15.5px;margin-bottom:16px}

/* ---------- Footer ---------- */
footer{background:var(--bg2);border-top:1px solid var(--line);padding:70px 32px}
.foot-in{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer p{color:var(--muted);margin-top:8px;font-size:14px}
footer a.mail{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent2);padding-bottom:4px;font-size:15px}
footer a.mail:hover{color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  nav{padding:18px 24px 24px}
  nav ul{display:none}
  .menu-btn{display:block}
  .scrollcue{display:none}
  .hero{display:block;min-height:auto;padding-top:96px}
  .hero-in{padding:16px 24px 40px}
  .hero-txt{max-width:none}
  .hero-photo{position:static;transform:none;height:auto;max-width:560px;margin:0 auto 10px}
  .hero-photo img{height:auto;width:100%}
  .hero-photo::after{display:none}
  h1{font-size:clamp(50px,13.5vw,84px);margin-bottom:24px}
  .roles{margin-bottom:34px}
  .quotes{padding:80px 24px}
  .qwrap{min-height:300px}
  .watch,.pillars{padding-left:24px;padding-right:24px}
  .pgrid{grid-template-columns:1fr 1fr;gap:26px}
  .page{padding:120px 24px 70px}
  .page .float{float:none;width:100%;max-width:420px;margin:0 auto 30px}
}
@media (max-width:480px){
  .qwrap{min-height:360px}
  .pgrid{grid-template-columns:1fr}
  .hlinks{gap:22px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .quote{transition:none}
}