/* Shared case-study styles — Sarah Somsavath portfolio */
:root{
  --paper:#FFF8ED; --ink:#2A2340; --deep:#332C49; --deeper:#241E35; --soft:#6E6588;
  --accent:#7E5FC9; --gold:#F4C66B;
  --lav:#E8DEFF; --mint:#D4F5E0; --peach:#FFE8D6; --sky:#D4EEFF;
  --rule:rgba(42,35,64,.14);
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{font-family:'Switzer',system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.caps{text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600}

/* paper grain */
.grain{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* custom cursor */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:200;mix-blend-mode:difference;will-change:transform}
.cur-dot{width:7px;height:7px;background:#fff}
.cur-ring{width:40px;height:40px;border:1.5px solid #fff;transition:width .28s var(--ease),height .28s var(--ease),background .28s}
.cur-ring.grow{width:74px;height:74px;background:rgba(255,255,255,.14)}
@media (hover:hover) and (pointer:fine){ html{cursor:none} a,button{cursor:none} }
@media (hover:none),(pointer:coarse){ .cur-dot,.cur-ring{display:none} }
@media (prefers-reduced-motion:reduce){ .cur-dot,.cur-ring{display:none} html{cursor:auto} }

/* reveal */
.rise{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}.rise.d2{transition-delay:.14s}.rise.d3{transition-delay:.21s}

/* nav */
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:22px 6vw;mix-blend-mode:difference;color:#fff}
.topbar .logo{font-weight:800;font-size:21px;letter-spacing:-.01em}
.topbar .menu a{margin-left:28px;font-size:15px;font-weight:600}
.topbar .menu a:hover{opacity:.7}

.cs-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 6vw}

/* hero */
.cs-hero{padding:22vh 0 5vh}
.cs-hero .cs-kick{color:var(--accent);margin-bottom:20px}
.cs-hero h1{font-weight:900;font-size:clamp(52px,9vw,128px);line-height:.95;letter-spacing:-.035em}
.cs-hero .cs-sub{margin-top:24px;max-width:50ch;font-size:clamp(18px,2vw,24px);font-weight:500;color:#473f60}
.cs-meta{margin-top:40px;display:flex;flex-wrap:wrap;gap:34px 48px;border-top:1px solid var(--rule);padding-top:26px}
.cs-meta b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:6px;font-weight:600}
.cs-meta div{font-size:16px;font-weight:500}

/* cover */
.cs-cover{margin:5vh auto 0;max-width:1280px;padding:0 4vw}
.cs-cover img{width:100%;border:1px solid var(--ink);box-shadow:0 40px 80px -50px rgba(42,35,64,.6)}

/* body */
.cs-body{padding:11vh 0 4vh}
.cs-label{color:var(--accent);margin-bottom:26px}
.cs-lead{font-size:clamp(20px,2.4vw,30px);line-height:1.5;font-weight:500;letter-spacing:-.01em;max-width:30ch}
.cs-text{margin-top:22px;font-size:18px;line-height:1.7;color:#3c3550;max-width:62ch}
.cs-text p+p{margin-top:16px}
.cs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:5vw;align-items:start}

/* gallery */
.cs-gallery{padding:6vh 0 4vh}
.cs-figs{display:flex;flex-direction:column;gap:64px;margin-top:30px}
.cs-figs figure{margin:0}
.cs-figs img{width:100%;border:1px solid var(--rule);background:#fff}
.cs-figs figcaption{margin-top:14px;font-size:13px;letter-spacing:.04em;color:var(--soft)}
.cs-figs .pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cs-figs .pair figure{margin:0}

/* next */
.cs-next{border-top:1px solid var(--ink);margin-top:8vh;padding:8vh 6vw;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;max-width:1320px;margin-left:auto;margin-right:auto}
.cs-next .lbl{color:var(--accent);display:block;margin-bottom:10px}
.cs-next .cs-next-title{font-weight:800;font-size:clamp(34px,5vw,64px);letter-spacing:-.02em;line-height:1}
.cs-next a.go:hover .cs-next-title{color:var(--accent)}
.cs-next .cs-back{align-self:flex-end;border:1.5px solid var(--ink);padding:13px 24px;border-radius:40px;transition:.2s}
.cs-next .cs-back:hover{background:var(--ink);color:var(--paper)}
.cs-foot{text-align:center;padding:30px;color:var(--soft);border-top:1px solid var(--rule)}

@media(max-width:820px){
  .cs-hero{padding:18vh 0 4vh}
  .cs-split{grid-template-columns:1fr;gap:28px}
  .cs-figs .pair{grid-template-columns:1fr}
  .topbar .menu a{margin-left:18px;font-size:13px}
  .cs-figs{gap:40px}
}