/* ============================================================
   SERENA BRANCH — shared brand styles
   wine #2e0812 · blush #fcdae2 · Space Mono
   ============================================================ */

:root{
  --wine:#2e0812;
  --wine-2:#210510;
  --wine-3:#451522;
  --wine-4:#5c1f2c;
  --blush:#fcdae2;
  --blush-2:#f6c6d1;
  --blush-3:#eeb0bf;
  --cream:#fbf2ec;
  --accent:#e0483a;
  --ink:#2e0812;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--wine);
  color:var(--cream);
  font-family:'Space Mono', monospace;
  letter-spacing:.01em;
  -webkit-font-smoothing:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
}
h1,h2,h3,h4,p{margin:0;}
a{color:inherit;}
img{display:block; max-width:100%;}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
.section{padding:88px 0;}
.eyebrow{font-size:13px; letter-spacing:.4em; text-transform:uppercase; opacity:.7;}

/* ---------- site nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(46,8,18,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(251,242,236,.12);
}
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  color:var(--cream); font-size:24px; padding:4px 8px; line-height:1; flex-shrink:0;
}
.site-nav .inner{
  max-width:var(--maxw); margin:0 auto; padding:18px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-nav .wordmark{font-weight:700; font-size:15px; letter-spacing:.18em; text-decoration:none; color:var(--cream);}
.site-nav .links{display:flex; align-items:center; gap:28px; font-size:14px;}
.site-nav .links a{color:var(--cream); text-decoration:none; opacity:.78; transition:opacity .15s;}
.site-nav .links .pill{color:var(--ink); width:auto; border-bottom:none !important; margin-top:8px; padding:11px 18px;}
.site-nav .links a:hover{opacity:1;}
.site-nav .links a.on{opacity:1; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px;}

/* ---------- buttons / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--blush); color:var(--ink);
  font-weight:700; font-size:13px; padding:11px 18px; border-radius:999px;
  text-decoration:none; letter-spacing:.02em; border:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.pill:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.3);}
.btn-line{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:12px;
  border:1.5px solid rgba(251,242,236,.4); color:var(--cream);
  font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; background:transparent;
  transition:border-color .15s, background .15s;
}
.btn-line:hover{border-color:var(--cream); background:rgba(251,242,236,.06);}
.btn-dark{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--blush);
  font-family:inherit; font-weight:700; font-size:14px;
  padding:15px 26px; border-radius:12px; border:none; cursor:pointer; letter-spacing:.03em;
  transition:transform .15s, opacity .15s;
}
.btn-dark:hover{transform:translateY(-2px);}
.btn-blush{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blush); color:var(--ink);
  font-family:inherit; font-weight:700; font-size:14px;
  padding:15px 26px; border-radius:12px; border:none; cursor:pointer; letter-spacing:.03em;
  transition:transform .15s;
}
.btn-blush:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.3);}

/* ---------- cards ---------- */
.card{background:var(--blush); color:var(--ink); border-radius:22px;}

/* ---------- stickers ---------- */
.sticker{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blush); color:var(--ink);
  font-weight:700; font-size:13px; padding:9px 15px; border-radius:999px;
  letter-spacing:.02em; box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.sticker.accent{background:var(--accent); color:var(--cream);}

/* ---------- placeholders ---------- */
.ph{
  position:relative; background-color:var(--wine-3);
  border:1px solid rgba(252,218,226,.16); overflow:hidden;
  background-image:repeating-linear-gradient(45deg, transparent 0 10px, rgba(252,218,226,.05) 10px 20px);
  display:flex; align-items:flex-end;
}
.ph > .tag{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--blush);
  background:rgba(46,8,18,.6); padding:6px 10px; margin:10px; border-radius:6px;
}
.ph.lite{
  background-color:var(--blush-2); border-color:rgba(46,8,18,.18);
  background-image:repeating-linear-gradient(45deg, transparent 0 10px, rgba(46,8,18,.05) 10px 20px);
}
.ph.lite > .tag{color:var(--blush); background:rgba(46,8,18,.78);}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; white-space:nowrap; border-top:1px solid rgba(251,242,236,.18); border-bottom:1px solid rgba(251,242,236,.18);}
.marquee .track{display:inline-block; padding:16px 0; animation:scroll 26s linear infinite;}
.marquee .track span{font-size:22px; font-weight:700; letter-spacing:.04em; margin:0 26px; opacity:.92;}
.marquee .track span.dot{opacity:.5;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .marquee .track{animation:none;} }

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.8;}
.field .inp, .field input, .field textarea, .field select{
  background:rgba(46,8,18,.06); border:1.5px solid rgba(46,8,18,.25); border-radius:10px;
  padding:14px 15px; font-family:inherit; font-size:14px; color:var(--ink); width:100%;
}
.field textarea{min-height:120px; resize:vertical;}
.field .inp::placeholder, .field input::placeholder, .field textarea::placeholder{color:rgba(46,8,18,.45);}
.field .inp:focus, .field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--ink);}
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chip{
  border:1.5px solid rgba(46,8,18,.3); border-radius:999px; padding:9px 15px;
  font-size:13px; font-weight:700; cursor:pointer; background:transparent; color:var(--ink);
  font-family:inherit; transition:background .12s, color .12s;
}
.chip.sel{background:var(--ink); color:var(--blush); border-color:var(--ink);}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid rgba(251,242,236,.14); padding:48px 0;}
.site-foot .inner{
  max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.site-foot .col h4{font-size:12px; letter-spacing:.24em; text-transform:uppercase; opacity:.6; margin-bottom:12px; font-weight:700;}
.site-foot .col a, .site-foot .col p{font-size:15px; opacity:.9; text-decoration:none; display:block; margin-bottom:7px;}
.site-foot .col a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px;}

/* ============================================================
   PROJECT DETAIL PAGES
   each page sets --acc (accent bg) + --acc-ink (text on accent)
   ============================================================ */
.proj-top{padding:40px 0 20px;}
.crumb{display:flex; align-items:center; gap:10px; font-size:13px; opacity:.7; margin-bottom:30px;}
.crumb a{color:var(--cream); text-decoration:none;}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px;}

.proj-intro{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:40px;}
.proj-intro h1{font-size:62px; font-weight:700; line-height:1; letter-spacing:-.015em;}
.proj-intro .disc{font-style:italic; font-size:16px; opacity:.85; margin-top:14px;}
.proj-intro .lede{font-size:16px; line-height:1.75; opacity:.92;}
.proj-intro .lede p + p{margin-top:16px;}

/* full-bleed hero image */
.proj-hero{width:100%; height:clamp(320px, 52vh, 620px); border-radius:0;}
.proj-hero.framed{border-radius:18px;}

/* accent band */
.band{background:var(--acc, var(--wine-3)); color:var(--acc-ink, var(--cream));}
.band .wrap{padding-top:72px; padding-bottom:72px;}

.proj-section{padding:72px 0;}
.proj-section h2{font-size:34px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px;}
.proj-section .sub{font-size:13px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-bottom:24px;}
.proj-section p.txt{font-size:16px; line-height:1.75; max-width:62ch; opacity:.92;}
.proj-section p.txt + p.txt{margin-top:16px;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;}
.two-col.wide-left{grid-template-columns:1.4fr 1fr;}
.two-col.wide-right{grid-template-columns:1fr 1.4fr;}

.gal{display:grid; gap:20px;}
.gal.g2{grid-template-columns:repeat(2,1fr);}
.gal.g3{grid-template-columns:repeat(3,1fr);}
.gal .ph{height:300px; border-radius:16px;}

.cap{font-size:13px; opacity:.6; margin-top:10px; line-height:1.5;}

/* process steps */
.steps{display:flex; flex-direction:column; gap:30px;}
.step{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;}
.step .idx{font-size:13px; font-weight:700; letter-spacing:.1em; opacity:.6; padding-top:4px; white-space:nowrap;}
.step h3{font-size:20px; font-weight:700; margin-bottom:8px;}
.step p{font-size:15px; line-height:1.7; opacity:.9; max-width:60ch;}

/* swatches + typeface */
.swatches{display:flex; gap:0; border-radius:14px; overflow:hidden; height:90px;}
.swatches span{flex:1;}
.spec-card{padding:26px; border:1px solid rgba(251,242,236,.18); border-radius:16px;}
.spec-card .lbl{font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:10px;}
.spec-card .face{font-size:30px; font-weight:700;}
.spec-card .face.reg{font-weight:400; opacity:.8;}

/* stats */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.stat{border:1px solid rgba(251,242,236,.2); border-radius:16px; padding:24px;}
.stat .big{font-size:34px; font-weight:700; line-height:1;}
.stat .lbl{font-size:13px; opacity:.7; margin-top:8px; line-height:1.5;}

/* next / prev project */
.proj-nav{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(251,242,236,.15); border-top:1px solid rgba(251,242,236,.15); border-bottom:1px solid rgba(251,242,236,.15);}
.proj-nav a{padding:36px 40px; text-decoration:none; color:var(--cream); background:var(--wine); transition:background .15s;}
.proj-nav a:hover{background:var(--wine-3);}
.proj-nav .dir{font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-bottom:8px;}
.proj-nav .nm{font-size:24px; font-weight:700;}
.proj-nav a.next{text-align:right;}

.cta-band{text-align:center; padding:84px 0;}
.cta-band h2{font-size:44px; font-weight:700; letter-spacing:-.01em; margin-bottom:24px;}
.cta-band h2 .hl{color:var(--accent);}

@media (max-width:820px){
  .proj-intro{grid-template-columns:1fr; gap:24px;}
  .proj-intro h1{font-size:42px;}
  .two-col, .two-col.wide-left, .two-col.wide-right{grid-template-columns:1fr;}
  .gal.g3{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .proj-nav{grid-template-columns:1fr;}
  .proj-nav a.next{text-align:left;}
  .proj-section{padding:48px 0;}
}

@media (max-width:980px){
  .serena-emblem{max-height:120px !important; transform:rotate(-3deg) !important;}
}
@media (max-width:820px){
  .serena-emblem{max-height:80px !important; transform:none !important;}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .wrap, .site-nav .inner, .site-foot .inner{padding-left:22px; padding-right:22px;}
  .section{padding:56px 0;}
  .nav-toggle{display:flex; align-items:center;}
  .site-nav .links{
    display:none; flex-direction:column; align-items:flex-start; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(46,8,18,.97); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(251,242,236,.14);
    padding:10px 22px 18px;
  }
  .site-nav .links a{
    padding:13px 0; font-size:16px; opacity:.9; width:100%;
    border-bottom:1px solid rgba(251,242,236,.1);
  }
  .site-nav .links a:last-child{border-bottom:none;}
  .site-nav.open .links{display:flex;}
  .site-nav .links .nav-hide{display:flex; margin-top:6px; align-self:flex-start;}
}