/* =========================================================================
   REGINE — PORTFOLIO DESIGN SYSTEM
   Clean, minimalist, warm-cream palette with a muted terracotta/gold accent.
   Serif (Fraunces) for titles, Sans-serif (Inter) for body copy.
   Mobile-first: base rules target small screens, sidebar layout kicks in
   at 900px+. Scroll/JS work is throttled to keep scrolling smooth.
   ========================================================================= */

:root{
  --light-text: #ffffff;  /* light/neutral text */
  --bg:        #FAF6EF;   /* warm cream page background */
  --surface:   #FFFFFF;   /* sidebar / cards */
  --surface-2: #F2ECE0;   /* subtle secondary surface / hover fill */
  --text:      #2A2420;   /* warm near-black */
  --muted:     #837868;   /* warm gray for secondary text */
  --accent:    #B5642E;   /* terracotta — primary accent */
  --accent-2:  #c99a48;   /* muted gold — secondary accent */
  --accent-rgb: rgb(201, 154, 72,0.5);   /* rgb gold — secondary accent */
  --green:        #439825;   /* for success or positive status */
  --border:        rgba(42,36,32,0.13);
  --border-soft:   rgba(42,36,32,0.08);
  --hover:         rgba(181,100,46,0.06);

  --sidebar-w: 272px;
  --topbar-h: 64px;

  --font-title:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-weight:400; font-size:15.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  width:100%;
}
::selection{background:var(--accent); color:#fff;}
h1,h2,h3{font-family:var(--font-title); font-weight:500; letter-spacing:-0.01em; color:var(--text);}
p{color:var(--text);}
a{color:var(--accent); text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

.eyebrow{font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

/* -------------------------------------------------------------------------
   MOBILE TOPBAR (visible < 900px)
   ------------------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h); padding:0 20px;
  background:var(--bg); border-bottom:1px solid var(--border-soft);
}
.topbar-brand{font-family:var(--font-title); font-size:19px; font-weight:500; color:var(--text);}
.menu-btn{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width:28px; height:auto; background:none; border:none; cursor:pointer;
}
.menu-btn span{display:block; width:100%; height:2.5px; background:var(--muted); transition:transform .3s ease, opacity .3s ease;}
.menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.sidebar-overlay{
  position:fixed; inset:0; background:rgba(30,24,18,.38);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:150;
}
.sidebar-overlay.open{opacity:1; pointer-events:auto;}

/* -------------------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------------------- */
.sidebar{
  position:fixed; top:0; left:0; height:100%; width:min(80vw,300px);
  background:var(--surface); border-right:1px solid var(--border);
  transform:translateX(-100%); transition:transform .35s cubic-bezier(.3,.9,.4,1);
  z-index:200; display:flex; flex-direction:column;
  padding:24px 20px; overflow-y:auto;
}
.sidebar.open{transform:translateX(0);}
.sidebar-head{display:flex; align-items:flex-start; justify-content:space-between;}
.sidebar-logo {display:grid; grid-template-columns:auto 1fr; gap:0.5rem; align-items: center;}
.sidebar-brand{ width:50px; height:50px; background:var(--accent); display:grid; align-items:center; border-radius:2px;}
.sidebar-brand span{color:var(--light-text); text-align:center; font-style:italic; font-family:var(--font-title); font-size:30px; font-weight:700;}
.sidebar-close{background:none; border:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:2px;}
.sidebar-name {font-weight:600; color:var(--text);}
.sidebar-tag{font-family:var(--font-body); font-size:10px; letter-spacing:.05em; color:var(--muted);}

.sidebar-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px;
  border-radius:30px; background:var(--green);
  margin-bottom:1rem;
}
.sidebar-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--light-text);}
.sidebar-badge .txt{font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--light-text); text-transform:uppercase;}

.sidebar-nav{display:flex; flex-direction:column; margin-top:30px;}
.sidebar-nav a{
  font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--muted);
  padding:11px 4px 11px 14px; border-left:2px solid transparent; border-radius:0 3px 3px 0;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.sidebar-nav a:hover{color:var(--text); background:var(--hover); border-radius:4px;}
.sidebar-nav a.active{color:var(--accent); background:var(--hover); font-weight:600; border-radius:4px;}

.sidebar-foot{margin-top:auto; padding-top:26px; border-top:1px solid var(--border-soft);}
.sidebar-foot a{display:block; font-size:12.5px; color:var(--text); margin-bottom:6px;}
.sidebar-foot a:hover{color:var(--accent);}

@media (min-width:900px){
  .topbar{display:none;}
  .sidebar-overlay{display:none;}
  .sidebar{
    position:fixed; transform:none; width:var(--sidebar-w);
    padding:32px 24px 24px;
  }
  .sidebar-close{display:none;}
}

/* -------------------------------------------------------------------------
   CONTENT WRAPPER
   ------------------------------------------------------------------------- */
.content{width:100%; max-width:100%;}
@media (min-width:900px){
  .content{margin-left:var(--sidebar-w); width:calc(100% - var(--sidebar-w));}
}

/* -------------------------------------------------------------------------
   SHARED CHAPTER / SECTION SCAFFOLDING
   ------------------------------------------------------------------------- */
.band{width:100%; border-top:1px solid var(--border-soft);}
.band:first-of-type{border-top:none;}
.band.band-journey{background:linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);}

.chapter{padding:64px 24px; scroll-margin-top:24px; margin: 0 auto; max-width: 1200px;}
.chapter-label{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.chapter-label .line{width:28px; height:1px; background:var(--accent-2);}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal:nth-child(2){transition-delay:.05s;}
.reveal:nth-child(3){transition-delay:.1s;}

.section-title{font-family:var(--font-title); font-size:clamp(25px,3.6vw,36px); font-weight:500; letter-spacing:-0.01em; color:var(--text);}
.section-sub{font-family:var(--font-body); color:var(--muted); margin-top:14px; max-width:650px; font-size:14.5px;}

/* -------------------------------------------------------------------------
   WELCOME / HERO (index)
   ------------------------------------------------------------------------- */
/* .welcome-kicker{font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:18px;} */
.welcome-center h1{font-family:var(--font-title); font-size:clamp(34px,7vw,54px); line-height:1.1; font-weight:500; letter-spacing:-0.01em; color:var(--text);}
.welcome-center h1 em{font-style:italic; color:var(--accent);}
.welcome-sub{font-family:var(--font-body); font-size:15px; color:var(--muted); margin-top:22px; max-width:650px; line-height:1.75;}
.welcome-ctas{display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; margin-top:34px;}
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.01em;
  padding:14px 24px; border-radius:3px;
  transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.cta-btn svg{width:14px; height:14px;}
.cta-btn.primary{color:#fff; background:var(--accent);}
.cta-btn.primary:hover{background:color-mix(in srgb, var(--accent) 88%, black 8%); transform:translateY(-1px);}
.cta-btn.secondary{color:var(--text); background:transparent; border:1px solid var(--border);}
.cta-btn.secondary:hover{border-color:var(--accent); color:var(--accent); background:var(--hover);}

@media (min-width:900px){
  .welcome-ctas{flex-wrap:nowrap;}
}

/* -------------------------------------------------------------------------
   JOURNEY / TIMELINE
   ------------------------------------------------------------------------- */
#journey-title {font-size:clamp(24px,3.6vw,28px);}

.journey-layout{display:flex; flex-direction:column; gap:36px;}
.journey-aside .section-title{margin-top:0;}
.journey-progress-wrap{margin-top:30px;}
.journey-progress-labels{display:flex; justify-content:space-between; font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.journey-progress-track{height:2px; background:var(--border); position:relative; margin-top:10px; border-radius:2px; overflow:hidden;}
.journey-progress-fill{position:absolute; left:0; top:0; height:100%; background:var(--accent); width:0%; transition:width .15s ease-out;}
.journey-main{flex:1; min-width:0;}

.timeline{position:relative; padding-left:28px;}
.timeline::before{content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--border);}
.timeline-progress{position:absolute; left:5px; top:6px; width:1px; background:var(--accent); height:0%; transition:height .2s ease-out;}
.t-item{position:relative; padding-bottom:48px;}
.t-item:last-child{padding-bottom:0;}
.t-dot{position:absolute; left:-28px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--bg); border:1.5px solid var(--border); transition:border-color .3s ease, background .3s ease;}
.t-item.in .t-dot{border-color:var(--accent); background:var(--accent);}
.t-role{font-family:var(--font-body); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.t-sep{font-weight:400; background-color:var(--accent); width:6px; height:6px; border-radius:50%; display:inline-block; opacity:50%;}
.t-meta {margin-top:5px; display:inline-grid; grid-template-columns:repeat(3,auto); gap:0.5rem; justify-content: center; align-items: center;}
.t-meta span {font-family:var(--font-body); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--text); line-height: 1.25 !important;}
.t-heading{font-family:var(--font-title); font-weight:500; font-size:clamp(21px,2.6vw,28px); color:var(--text); margin-top:14px;}
.t-note{color:var(--muted); margin-top:12px; max-width:100%; font-size:14px; line-height:1.75;}
.t-note em{color:var(--text); font-style:italic;}

@media (min-width:900px){
  .journey-layout{flex-direction:row; gap:40px; align-items:flex-start;}
  .journey-aside{width:270px; flex-shrink:0; position:sticky; top:40px;}
  .timeline{padding-left:34px;}
  .t-dot{left:-34px;}
}

/* -------------------------------------------------------------------------
   STORIES / PROJECT CARDS  (shared: index + projects.html)
   ------------------------------------------------------------------------- */
.stories-head{display:flex; flex-direction:column; gap:18px; margin-bottom:36px;}
.stories-head .section-title, .stories-head .section-sub{margin-top:0;}
.view-more{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--text);
  border:1px solid var(--border); padding:11px 16px; border-radius:3px;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
  margin-top:14px;
}
.view-more:hover{border-color:var(--accent); color:var(--accent); background:var(--hover);}
.view-more svg{width:13px; height:13px;}

.story-grid{display:grid; grid-template-columns:1fr; gap:36px;}
.story-card{
  display:flex; flex-direction:column; color:inherit; text-decoration:none;
  padding:14px; margin:-14px; border-radius:6px; border:1px solid transparent;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.story-card:hover{border-color:var(--border); background:var(--surface); transform:translateY(-3px);}
.s-media{overflow:hidden; border-radius:3px; border:1px solid var(--border); position:relative; background:var(--surface-2); height:200px;}
.s-media img{width:100%; height:100%; object-fit:contain; display:block; transition:transform .9s cubic-bezier(.2,.8,.2,1); filter:saturate(0.92) contrast(1.02);}
.story-card:hover .s-media img{transform:scale(1.035);}
.s-index{position:absolute; top:12px; left:12px; font-family:var(--font-body); font-weight:700; font-size:11px; line-height:1.25; color:#fff; background:var(--accent-rgb); padding:5px 10px; border-radius:20px;}
.s-meta{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 12px;}
.s-meta span{font-family:var(--font-body); font-size:10.5px; font-weight:500; letter-spacing:.02em; color:var(--muted);}
.s-title{font-family:var(--font-title); font-size:19px; line-height:1.3; font-weight:500; color:var(--text); transition:color .25s ease;}
.story-card:hover .s-title{color:var(--accent);}
.s-desc{color:var(--muted); margin-top:10px; font-size:13.5px;}
.s-stat{display:flex; align-items:baseline; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border);}
.s-stat .num{font-family:var(--font-title); font-weight:600; font-size:20px; color:var(--accent);}
.s-stat .label{font-size:11.5px; color:var(--muted); line-height:1.4;}
.s-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.s-tags span{font-family:var(--font-body); font-size:10px; font-weight:500; letter-spacing:.02em; color:var(--muted); border:1px solid var(--border); border-radius:20px; padding:4px 10px;}
.s-read{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--accent);}
.s-read svg{width:13px; height:13px; transition:transform .25s ease;}
.story-card:hover .s-read svg{transform:translateX(4px);}

@media (min-width:900px){ .stories-head{flex-direction:row; align-items:flex-end; justify-content:space-between;} }
@media (min-width:1130px){ .story-grid{grid-template-columns:repeat(3,1fr); gap:36px;} }

/* -------------------------------------------------------------------------
   TESTIMONIALS
   ------------------------------------------------------------------------- */
.testi-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:36px;}
.testi-card{border:1px solid var(--border); border-radius:5px; padding:24px 22px; background:var(--surface); display:flex; flex-direction:column; justify-content:space-between; transition:border-color .25s ease, transform .25s ease;}
.testi-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.testi-quote{font-family:var(--font-body); font-size:14px; line-height:1.60; color:var(--text);}
.testi-who{display:flex; align-items:center; gap:12px; margin-top:20px;}
.testi-avatar{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-title); font-weight: 600; font-size: 14px; color:#fff; background:var(--accent); flex-shrink:0;}
.testi-name{font-family:var(--font-title); font-weight:500; font-size:14px; color:var(--accent);}
.testi-role{font-family:var(--font-body); font-size:12px; color:var(--muted);}
@media (min-width:640px){ .testi-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1100px){ .testi-grid{grid-template-columns:repeat(3,1fr);} }

.testi-more{
  align-self:flex-start; margin-top:10px; padding:0; border:none; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--accent-2);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.testi-more:hover{border-bottom-color:var(--accent-2);}

/* -------------------------------------------------------------------------
   TESTIMONIAL DRAWER (slide-in from right + overlay)
   ------------------------------------------------------------------------- */
.testi-drawer-overlay{
  position:fixed; inset:0; background:rgba(30,24,18,.42);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:250;
}
.testi-drawer-overlay.open{opacity:1; pointer-events:auto;}

.testi-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(88vw,420px);
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:-12px 0 32px rgba(30,24,18,.14);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.3,.9,.4,1);
  z-index:260; padding:24px; overflow-y:auto;
  display:flex; flex-direction:column;
  gap:0.5rem;
}
.testi-drawer.open{transform:translateX(0);}
.testi-drawer-head{display:flex; justify-content:flex-end;}
.testi-drawer-close{background:none; border:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:2px;}
.testi-drawer-close:hover{color:var(--accent);}
.testi-drawer-quote{font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--text); margin-top:10px;}
.testi-drawer .testi-who{padding-top:16px; border-top:1px solid var(--border-soft);}

/* -------------------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------------------- */
.contact-msg{font-family:var(--font-title); font-weight:400; font-size:clamp(24px,4.2vw,38px); line-height:1.35; max-width:640px; color:var(--text);}
.contact-msg em{font-style:italic; color:var(--accent);}
.contact-cta-row{display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:34px;}
.contact-cta{display:inline-flex; align-items:center; gap:12px; padding:16px 28px; background:var(--accent); color:#fff; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.02em; border-radius:3px; transition:background .25s ease, transform .25s ease;}
.contact-cta:hover{background:color-mix(in srgb, var(--accent) 88%, black 8%); transform:translateY(-1px);}
.contact-email{font-family:var(--font-body); font-size:13px; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:3px; transition:color .25s ease, border-color .25s ease;}
.contact-email:hover{color:var(--accent); border-color:var(--accent);}

@media (min-width:640px){
  .contact-cta-row{flex-direction:row; align-items:center;}
}

/* -------------------------------------------------------------------------
   STORY / PROJECT DETAIL PAGES  (project-1/2/3/sample.html)
   ------------------------------------------------------------------------- */
.back-link{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--muted); margin-bottom:8px;}
.back-link:hover{color:var(--accent);}
.back-link svg{width:14px; height:14px;}

.cover{padding-top:8px; padding-bottom:8px;}
.cover .s-meta{display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 6px;}
.cover .s-meta span{font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--muted);}
.cover h1{font-size:clamp(28px,5.2vw,44px); line-height:1.18; margin-top:10px; font-weight:500;}
.cover .cover-desc{color:var(--muted); font-size:15px; margin-top:16px; max-width:560px;}
.cover-media{aspect-ratio:16/9; overflow:hidden; border-radius:4px; border:1px solid var(--border); margin-top:30px; background:var(--surface-2);}
.cover-media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.92) contrast(1.02);}

.beat{padding:32px 0; border-top:1px solid var(--border-soft);}
.beat-label{font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;}
.beat h2{font-size:21px; font-weight:500; margin-bottom:12px;}
.beat p{font-size:14.5px; color:var(--muted); max-width:620px;}
.beat.reflection{font-family:var(--font-title); font-style:italic; font-size:18px; color:var(--text); border-bottom:1px solid var(--border-soft); padding-bottom:44px; border-left:2px solid var(--accent-2); padding-left:20px;}

.next-project{display:flex; flex-direction:column; gap:16px; padding:32px 0 0;}
.next-project a{font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:4px; align-self:flex-start;}
.next-project a:hover{color:var(--accent); border-color:var(--accent);}

@media (min-width:600px){
  .beat h2{font-size:23px;}
  .next-project{flex-direction:row; align-items:center; justify-content:space-between;}
}

/* -------------------------------------------------------------------------
   ALL-PROJECTS PAGE (projects.html)
   ------------------------------------------------------------------------- */
.page-head{margin-bottom:40px;}
.page-head h1{font-size:clamp(27px,4.6vw,42px); margin-top:12px; font-weight:500;}
.page-head p{font-family:var(--font-body); color:var(--muted); margin-top:14px; max-width:520px; font-size:14px;}

.load-sentinel{display:flex; align-items:center; justify-content:center; padding:48px 0;}
.load-msg{font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--muted); display:flex; align-items:center; gap:10px;}
.spinner{width:14px; height:14px; border-radius:50%; border:1.6px solid var(--border); border-top-color:var(--accent); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.end-msg{font-family:var(--font-title); font-style:italic; color:var(--muted); font-size:15px;}

/* -------------------------------------------------------------------------
   FOCUS STATES (accessibility)
   ------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;}