/* ============================================================
   Christian Salandy — Portfolio
   Global stylesheet shared by all pages.

   Design system, layout primitives, header, slide-out menu,
   scroll-reveal animations, and shared components live here.

   Dark pages (home, all-projects) use the defaults.
   Case-study pages add class="theme-light" to <body> for the
   black-title-band / white-body treatment.
   Page-specific layout rules remain in each page's own <style>.
   ============================================================ */

:root{
  --ink:#000000;
  --sheet:#000000;
  --sheet-2:#000000;
  --paper:#f3efe9;
  --muted:#9b948c;
  --faint:#5c5650;
  --copper:#b5764f;
  --copper-soft:#b0714b;
  --sage:#6f9479;
  --gold:#d6a73f;
  --chip-gray:#45403a;
  --line:rgba(243,239,233,.14);
  --line-dark:rgba(0,0,0,.13);
  --heading-dark:#15120f;
  --text-dark:#4f4a43;
  --muted-dark:#8a8378;
  --display:'Playfair Display', Georgia, serif;
  --body:'Inter', -apple-system, 'Segoe UI', sans-serif;
  --max-w:1440px;
  --pad:max(clamp(20px, 5vw, 64px), calc((100vw - var(--max-w)) / 2));
  --header-h:88px;
  --hero-h:clamp(260px, 46vw, 560px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
body.theme-light{background:#ffffff;color:var(--text-dark)}
::selection{background:var(--copper);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.12;letter-spacing:-.01em}

/* ---------- Header: hides on scroll down, reveals on scroll up ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px var(--pad);
  transition:transform .45s cubic-bezier(.33,1,.68,1), background .3s ease;
}
.site-header.is-hidden{transform:translateY(-110%)}
.site-header.is-scrolled{background:rgba(0,0,0,.95);}
.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.logo svg{display:block;width:44px;height:44px}
.menu-toggle{
  appearance:none;background:none;border:0;cursor:pointer;
  color:var(--paper);font-family:var(--body);font-size:15px;font-weight:400;
  letter-spacing:.04em;padding:8px 2px;position:relative;
}
.menu-toggle::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--copper);transform:scaleX(0);transform-origin:right;
  transition:transform .35s ease;
}
.menu-toggle:hover::after,.menu-toggle:focus-visible::after{transform:scaleX(1);transform-origin:left}
.menu-toggle:focus-visible{outline:1px solid var(--copper);outline-offset:4px}
.menu-close-icon{display:inline-flex;align-items:center;justify-content:center;padding:6px}
.menu-close-icon::after{display:none}

/* ---------- Menu flyout (right-side panel) ---------- */
.flyout{
  position:fixed;top:0;right:0;bottom:0;width:33vw;min-width:340px;max-width:560px;z-index:100;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;
  padding:24px clamp(24px,3vw,40px) clamp(32px,6vh,64px);
  transform:translateX(100%);visibility:hidden;
  box-shadow:-30px 0 60px rgba(0,0,0,.45);
  transition:transform .55s cubic-bezier(.76,0,.24,1), visibility 0s linear .55s;
}
.flyout.open{transform:translateX(0);visibility:visible;transition:transform .55s cubic-bezier(.76,0,.24,1)}
.flyout-top{display:flex;justify-content:flex-end;align-items:center}
.flyout-nav{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(4px,1.5vh,14px);padding-top:calc(25vh - var(--header-h))}
.flyout-nav a{
  font-family:var(--display);font-weight:700;color:var(--paper);text-decoration:none;
  font-size:clamp(1.4rem, 3.4vw, 2.4rem);line-height:1.25;width:max-content;max-width:100%;
  transition:color .025s ease-in-out;opacity:0;transform:translateY(24px);
}
.flyout.open .flyout-nav a{opacity:1;transform:none;transition:opacity .5s ease, transform .5s cubic-bezier(.33,1,.68,1), color .025s ease-in-out}
.flyout.open .flyout-nav a:nth-child(1){transition-delay:.15s}
.flyout.open .flyout-nav a:nth-child(2){transition-delay:.22s}
.flyout.open .flyout-nav a:nth-child(3){transition-delay:.29s}
.flyout.open .flyout-nav a:nth-child(4){transition-delay:.36s}
.flyout.open .flyout-nav a:nth-child(5){transition-delay:.43s}
.flyout-nav a:hover,.flyout-nav a:focus-visible{color:var(--copper)}
.flyout.open .flyout-nav a:hover,
.flyout.open .flyout-nav a:focus-visible{transition-delay:0s}
.flyout-nav a:focus-visible{outline:none}
.flyout-nav small{
  display:block;font-family:var(--body);font-weight:400;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:2px;
}
.flyout-foot{color:var(--faint);font-size:14px}

/* ---------- Menu backdrop (dims the page behind the flyout) ---------- */
.flyout-backdrop{
  position:fixed;inset:0;z-index:99;
  background:rgba(0,0,0,.75);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.flyout-backdrop.open{opacity:1;visibility:visible;transition:opacity .35s ease}

/* ---------- Solid-fill category chips ---------- */
.tag{
  display:inline-block;font-size:12px;font-weight:400;letter-spacing:.03em;
  padding:3px 10px;border-radius:5px;
}
.tag-digital{background:#946877;color:#FFFFFF}
.tag-case-study{background:#6f9479;color:#FFFFFF}
.tag-branding{background:#CE8544;color:#221a06}
.tag-print{background:#996666;color:#FFFFFF}

/* ---------- Shared footer ---------- */
.site-foot{
  margin-top:clamp(28px,5vh,48px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  color:var(--muted);font-size:14px;
}
.site-foot a{
  display:inline-flex;width:34px;height:34px;border-radius:6px;
  align-items:center;justify-content:center;
  background:rgba(243,239,233,.08);color:var(--paper);text-decoration:none;
  transition:background .3s ease,color .3s ease;
}
.site-foot a:hover{background:var(--copper);color:var(--ink)}
body.theme-light .site-foot{border-top:1px solid var(--line-dark);color:var(--muted-dark)}
body.theme-light .site-foot a{background:rgba(0,0,0,.08);color:var(--heading-dark)}
body.theme-light .site-foot a:hover{background:var(--copper);color:#fff}

/* ---------- Shared button ---------- */
.btn{
  display:inline-block;
  background:#8B5643;color:#fdf8f3;text-decoration:none;
  font-family:var(--body);font-size:15px;font-weight:400;
  padding:13px 26px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  transition:background .3s ease, transform .25s ease;
}
.btn:hover{background:#553A31;transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---------- Card image boxes: fixed height across the site ---------- */
.project-thumb,
.work-thumb{aspect-ratio:auto !important;height:440px}

/* ---------- Card header underline on hover ---------- */
.project h3,
.work-card h3{text-decoration:underline solid transparent;text-underline-offset:4px;transition:text-decoration-color .25s ease}
.project:hover h3,
.work-card:hover h3,
.project:focus-visible h3,
.work-card:focus-visible h3{text-decoration-color:currentColor}

/* ---------- Fade-in-and-up reveal micro-interactions ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease, transform .65s cubic-bezier(.33,1,.68,1)}
.reveal.in-view{opacity:1;transform:none}

/* ---------- Reduced motion ---------- */
@media (max-width: 720px){
  .flyout{width:100vw;min-width:0;max-width:none;box-shadow:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- Shared Chips ---------- */
  .filter[data-filter="all"]{background:#8B5643;color:#FFFFFF}
  .filter[data-filter="case-study"]{background:#6f9479;color:#FFFFFF}
  .filter[data-filter="branding"]{background:#CE8544;color:#221a06}
  .filter[data-filter="digital"]{background:#946877;color:#FFFFFF}
  .filter[data-filter="print"]{background:#996666;color:#FFFFFF}
  
  .filter[data-filter="all"]:hover{background:#79412D}
  .filter[data-filter="case-study"]:hover{background:#294F48}
  .filter[data-filter="branding"]:hover{background:#90511A}
  .filter[data-filter="digital"]:hover{background:#673D4B}
  .filter[data-filter="print"]:hover{background:#663E3E}