:root{
  --white:#fdfcfa;
  --linen:#f6f1e9;
  --sea:#bcd9e6;
  --sea-deep:#4c8fac;
  --sand:#e2d3ba;
  --ink:#1e2a30;
  --ink-soft:#5b6b70;
  --glass:rgba(255,255,255,0.45);
  --coral:#e08a68;
  --gold:#d9b06c;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  opacity:0;
  animation:pageFadeIn 0.7s ease forwards;
}
@keyframes pageFadeIn{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
a{color:inherit; text-decoration:none;}
img{display:block; width:100%; height:100%; object-fit:cover;}
::selection{background:var(--sea-deep); color:var(--white);}

.label{
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--sea-deep);
  font-weight:400;
}
.display{font-family:'Fraunces',serif; font-weight:300;}

/* ---------- SUBPAGE NAV ---------- */
.subnav{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:32px 5vw; z-index:100;
  background:linear-gradient(180deg, rgba(253,252,250,0.92), rgba(253,252,250,0));
}
.subnav-name{font-family:'Fraunces',serif; font-style:italic; font-size:18px; color:var(--ink);}
.subnav-links{display:flex; gap:40px;}
.subnav-links a{font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft); transition:color 0.3s ease;}
.subnav-links a:hover, .subnav-links a.active{color:var(--sea-deep);}
@media (max-width:760px){ .subnav-links{gap:22px;} .subnav-links span{display:none;} }

/* ---------- SECTION SHELL ---------- */
.page-hero{padding:180px 5vw 80px; text-align:center;}
.page-hero h1{
  font-family:'Fraunces',serif; font-weight:200; font-style:italic;
  font-size:clamp(40px,7vw,84px); color:var(--ink); margin-top:14px;
}
section{padding:0 5vw 160px;}
.section-head{margin-bottom:64px; text-align:center;}
.reveal{opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- MEASUREMENTS ---------- */
.measure-wrap{
  position:relative;
  background:linear-gradient(140deg, #eaf5f8 0%, #cfe7ef 45%, #f4ecd9 100%);
  padding:90px 5vw 120px; overflow:hidden;
}
.measure-wrap::before{
  content:''; position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%);
  top:-200px; right:-150px;
}
.measure-card{
  position:relative; max-width:1000px; margin:0 auto;
  background:var(--glass);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:28px; box-shadow:0 30px 80px rgba(76,143,172,0.18);
  padding:56px 5vw;
  display:grid; grid-template-columns:repeat(6,1fr); gap:36px 20px;
}
.m-stat{text-align:center; border-left:1px solid rgba(30,42,48,0.12);}
.m-stat:first-child{border-left:none;}
.m-stat .k{font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--sea-deep); margin-bottom:10px;}
.m-stat:nth-child(even) .k{color:var(--coral);}
.m-stat .v{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(20px,2.4vw,30px); color:var(--ink);}
@media (max-width:900px){ .measure-card{grid-template-columns:repeat(3,1fr); row-gap:40px;} .m-stat:nth-child(4){border-left:none;} }
@media (max-width:520px){ .measure-card{grid-template-columns:repeat(2,1fr);} .m-stat:nth-child(odd){border-left:none;} }

/* ---------- GALLERY ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.g-item{overflow:hidden; position:relative;}
.g-item img{transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.g-item:hover img{transform:scale(1.05);}
.g1{grid-column:span 4; aspect-ratio:16/10;}
.g2{grid-column:span 2; aspect-ratio:3/4;}
.g3{grid-column:span 2; aspect-ratio:3/4;}
.g4{grid-column:span 2; aspect-ratio:3/4;}
.g5{grid-column:span 2; aspect-ratio:3/4;}
.g6{grid-column:span 2; aspect-ratio:3/4;}
.g7{grid-column:span 3; aspect-ratio:4/5;}
.g8{grid-column:span 3; aspect-ratio:4/5;}
@media (max-width:860px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8{grid-column:span 1; aspect-ratio:4/5;}
}

/* ---------- SOCIAL RAIL ---------- */
.social-rail{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:19px; z-index:90;
}
.social-rail a{width:17px; height:17px; color:var(--ink-soft); transition:color 0.3s ease, transform 0.3s ease;}
.social-rail a svg{width:100%; height:100%; display:block;}
.social-rail a:hover{transform:translateY(-2px);}
.social-rail a:nth-child(1):hover{color:var(--sea-deep);}
.social-rail a:nth-child(2):hover{color:var(--coral);}
.social-rail a:nth-child(3):hover{color:var(--gold);}
.social-rail a:nth-child(4):hover{color:var(--sea-deep);}
.social-rail a:nth-child(5):hover{color:var(--coral);}
.social-rail.on-photo a{color:#fff; filter:drop-shadow(0 2px 10px rgba(0,0,0,0.35));}
.social-rail.on-photo a:hover{opacity:0.7; color:#fff;}
@media (max-width:640px){ .social-rail{right:12px; gap:14px;} .social-rail a{width:14px; height:14px;} }

/* ---------- LARGE VIDEO EMBEDS ---------- */
.video-block{max-width:1040px; margin:0 auto 110px;}
.video-label{text-align:center; margin-bottom:22px;}
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:16px; overflow:hidden; box-shadow:0 40px 90px rgba(30,42,48,0.14);
}
.video-frame.portrait{aspect-ratio:9/16; max-width:420px; margin:0 auto; box-shadow:0 40px 90px rgba(224,138,104,0.18);}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---------- RESUME ---------- */
.resume-layout{
  display:grid; grid-template-columns:300px 1fr; gap:90px;
  padding:170px 5vw 160px; align-items:start;
}
.resume-side{position:sticky; top:150px;}
.resume-side .label{display:block; margin-bottom:16px;}
.resume-side h1{
  font-family:'Fraunces',serif; font-style:italic; font-weight:300;
  font-size:38px; color:var(--ink); margin-bottom:36px;
}
.resume-side .r-btn{
  display:inline-block; padding:16px 34px; border:1px solid var(--sea-deep);
  border-radius:100px; font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sea-deep); transition:all 0.35s ease;
}
.resume-side .r-btn:hover{background:var(--sea-deep); color:#fff;}
.resume-side .r-skills{margin-top:40px; padding-top:28px; border-top:1px solid rgba(30,42,48,0.1);}
.resume-side .r-skills p{font-size:12.5px; line-height:2; color:var(--ink-soft); margin-top:14px;}
.resume-side .r-skills p strong{color:var(--ink); font-weight:500;}

.r-group-label{margin:56px 0 8px; display:block;}
.r-group-label:first-child{margin-top:0;}
.r-row{
  display:grid; grid-template-columns:74px 1fr auto; align-items:baseline; gap:22px;
  padding:22px 0; border-bottom:1px solid rgba(30,42,48,0.1);
}
.r-year{font-size:13px; letter-spacing:0.08em; font-weight:500; color:var(--ink-soft);}
.r-role{font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:21px; color:var(--ink);}
.r-cat{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); text-align:right;}

@media (max-width:860px){
  .resume-layout{grid-template-columns:1fr; gap:40px; padding-top:150px;}
  .resume-side{position:static;}
  .r-row{grid-template-columns:50px 1fr; row-gap:4px;}
  .r-cat{grid-column:2; text-align:left;}
}

/* ---------- CONTACT ---------- */
.contact-links{display:flex; justify-content:center; gap:38px; flex-wrap:wrap;}
footer{padding:26px 5vw 44px; display:flex; justify-content:center; font-size:10px; letter-spacing:0.16em; color:var(--ink-soft);}

/* ---------- PAGE TINT ---------- */
.page-tint{
  background:linear-gradient(165deg, #fdf6ea 0%, #eaf5f8 48%, #f6ecdb 100%);
  min-height:100vh;
}

/* ---------- DARK PAGE VARIANT ---------- */
body.page-dark{
  background:#0b0b0b;
  --white:#0b0b0b;
  --linen:#141414;
  --ink:#f3efe7;
  --ink-soft:#a8a29b;
  --sea-deep:#8fd0e8;
  --coral:#f2996b;
  --gold:#e8c483;
  --glass:rgba(255,255,255,0.06);
}
body.page-dark .subnav{
  background:linear-gradient(180deg, rgba(11,11,11,0.94), rgba(11,11,11,0));
}
body.page-dark .subnav-links a::after{background:var(--gold);}

/* ---------- OMERTÁ-STYLE COMPONENTS ---------- */

/* Unified top nav with CTA */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 5vw;
}
.site-nav .nav-mark{
  font-family:'Sora',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:0.02em; color:var(--ink);
}
.site-nav .nav-center{display:flex; gap:36px;}
.site-nav .nav-center a{
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:#fff; transition:opacity 0.3s ease;
}
.site-nav .nav-center a:hover, .site-nav .nav-center a.active{opacity:0.6;}
.nav-cta{
  display:inline-block; background:#fff; color:#0b0b0b;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  padding:13px 26px; border-radius:100px;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.nav-cta:hover{opacity:0.85; transform:translateY(-1px);}

/* Mobile hamburger toggle */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:34px; height:34px;
  background:none; border:none; padding:0; cursor:pointer;
  z-index:210;
}
.nav-toggle span{
  display:block; width:22px; height:1.5px; background:#fff;
  border-radius:2px; transition:transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Mobile full-screen menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:200;
  background:#0b0b0b;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:36px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-menu a{
  font-family:'Sora',sans-serif; font-weight:400; font-size:26px;
  letter-spacing:0.02em; color:#fff; opacity:0.9; transition:opacity 0.3s ease;
}
.mobile-menu a:hover, .mobile-menu a.active{opacity:0.55;}
.mobile-menu .mobile-menu-cta{
  margin-top:14px; display:inline-block; background:#fff; color:#0b0b0b;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  padding:15px 32px; border-radius:100px;
}

@media (max-width:760px){
  .site-nav .nav-center{display:none;}
  .nav-toggle{display:flex;}
}
@media (min-width:761px){
  .mobile-menu, .nav-toggle{display:none !important;}
}

/* Parenthetical eyebrow label */
.paren-label{
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-soft); display:inline-block;
}
.paren-label::before{content:"( "; }
.paren-label::after{content:" )"; }

/* Numbered feature rows */
.feature-list{max-width:920px; margin:0 auto;}
.feature-row{
  display:grid; grid-template-columns:70px 1fr; gap:28px;
  padding:38px 0; border-top:1px solid rgba(255,255,255,0.1);
}
.feature-list .feature-row:last-child{border-bottom:1px solid rgba(255,255,255,0.1);}
.feature-num{
  font-family:'Sora',sans-serif; font-weight:300; font-size:15px; color:var(--ink-soft); padding-top:3px;
}
.feature-body h3{
  font-family:'Sora',sans-serif; font-weight:500; font-size:19px; color:var(--ink); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:0.03em;
}
.feature-body p{font-size:14px; line-height:1.8; color:var(--ink-soft); max-width:56ch;}
@media (max-width:640px){
  .feature-row{grid-template-columns:40px 1fr; gap:16px;}
}

/* Pull quote */
.pull-quote{
  max-width:820px; margin:0 auto; text-align:center;
  font-family:'Sora',sans-serif; font-weight:300;
  font-size:clamp(22px,3.4vw,38px); line-height:1.5; color:var(--ink);
}
.pull-quote .attr{
  display:block; margin-top:28px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft);
}

/* Unified CTA pill button (replaces colored outline buttons) */
.pill-btn{
  display:inline-block; background:var(--ink); color:var(--white);
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  padding:17px 38px; border-radius:100px;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.pill-btn:hover{opacity:0.85; transform:translateY(-1px);}

/* Minimal footer */
.site-footer{
  padding:40px 5vw 48px; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
}