/* ───────────────────────────────────────────────
   Sarah Hass — portfolio (classic / minimal)
   Type-driven, near-monochrome. One accent: green.
   ─────────────────────────────────────────────── */

:root{
  --ink:#111111;
  --muted:#897ead;
  --faint:#bcb2da;
  --hair:#ececec;
  --hair-2:#e3e3e3;
  --bg:#ffffff;
  --bg-2:#fafafa;
  --accent:#7d5fd6;
  --max:940px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 36px;}

/* ── Inline work gate (password-protects the Selected work section) ── */
.work-gate{overflow:hidden;max-height:260px;margin-bottom:4px;transition:opacity .35s ease, max-height .55s var(--ease), margin-bottom .45s var(--ease);}
.work-gate.gate-gone{opacity:0;max-height:0;margin-bottom:0;pointer-events:none;}
.work-unlocked .work-gate{display:none;}
.work-gate-text{font-size:15px;color:var(--muted);max-width:540px;margin:18px 0 18px;}
.work-gate-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.work-gate .gate-form{max-width:380px;}
.work-gate.shake{animation:gate-shake .4s;}
.gate-form{display:flex;gap:10px;}
.gate-input{
  flex:1;height:46px;padding:0 16px;font:inherit;font-size:15px;
  border:1px solid var(--hair-2);border-radius:10px;background:var(--bg-2);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.gate-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.06);}
.gate-btn{
  height:46px;padding:0 22px;font:inherit;font-size:15px;font-weight:600;
  border:1px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff;cursor:pointer;
  transition:opacity .2s;
}
.gate-btn:hover{opacity:.85;}
.gate-error{font-size:13px;color:#c0392b;margin-top:14px;opacity:0;transition:opacity .2s;}
.gate-error.show{opacity:1;}
@keyframes gate-shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}

/* work list reveal: same grid-rows unfurl + staggered rise as the bio "more" */
.work-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease);}
.work-reveal-inner{overflow:hidden;}
.work-reveal .work-row{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity .55s ease, transform .65s var(--ease), filter .55s ease, padding-left .45s var(--ease);}
.work-reveal.is-open{grid-template-rows:1fr;}
.work-reveal.is-open .work-row{opacity:1;transform:none;filter:none;}
.work-reveal.is-open .work-row:nth-child(1){transition-delay:.05s;}
.work-reveal.is-open .work-row:nth-child(2){transition-delay:.12s;}
.work-reveal.is-open .work-row:nth-child(3){transition-delay:.19s;}
.work-reveal.is-open .work-row:nth-child(4){transition-delay:.26s;}
.work-reveal.is-open .work-row:nth-child(5){transition-delay:.33s;}
.work-reveal.is-open .work-row:nth-child(6){transition-delay:.40s;}
/* returning visitor (already unlocked this session): show instantly.
   No load animation fires because this is the initial computed state (no change),
   while interaction transitions (hover slide) stay intact. */
.work-unlocked .work-reveal{grid-template-rows:1fr;}
.work-unlocked .work-reveal .work-row{opacity:1;transform:none;filter:none;}
@media (prefers-reduced-motion:reduce){
  .work-reveal,.work-reveal .work-row,.work-gate{transition:none;}
}

/* ── Nav ── */
.navbar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.navbar.scrolled{border-color:var(--hair);}
.nav-inner{display:flex;justify-content:space-between;align-items:center;height:68px;}
.nav-logo{font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none;}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}

/* ── Hero ── */
.hero{padding:84px 0 64px;border-bottom:1px solid var(--hair);}
.avail{display:inline-flex;align-items:center;gap:11px;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:36px;}
/* Aura blob: soft, shape-shifting, color-drifting gradient (aura-photography vibe) */
.avail .dot{
  position:relative;width:17px;height:17px;flex:none;
  border-radius:42% 58% 57% 43% / 49% 44% 56% 51%;
  background:
    radial-gradient(closest-side at 30% 28%, #a8f0d0 0%, rgba(168,240,208,0) 72%),
    radial-gradient(closest-side at 72% 36%, #c4b3ff 0%, rgba(196,179,255,0) 72%),
    radial-gradient(closest-side at 58% 74%, #ffbcdd 0%, rgba(255,188,221,0) 72%),
    radial-gradient(closest-side at 24% 70%, #9ad7ff 0%, rgba(154,215,255,0) 72%),
    conic-gradient(from 200deg at 50% 50%, #9fe1cb, #c4b3ff, #ffbcdd, #9ad7ff, #9fe1cb);
  filter:saturate(1.2);
  animation:aura-morph 9s ease-in-out infinite, aura-spin 18s linear infinite, aura-hue 16s linear infinite;
}
/* diffuse outer bloom */
.avail .dot::before{
  content:"";position:absolute;inset:-6px;z-index:-1;
  border-radius:inherit;background:inherit;
  filter:blur(6px) saturate(1.3);opacity:.55;
  animation:aura-morph 9s ease-in-out infinite reverse;
}
@keyframes aura-morph{
  0%,100%{border-radius:42% 58% 57% 43% / 49% 44% 56% 51%;}
  33%{border-radius:63% 37% 41% 59% / 56% 62% 38% 44%;}
  66%{border-radius:47% 53% 66% 34% / 38% 49% 51% 62%;}
}
@keyframes aura-spin{to{transform:rotate(360deg);}}
@keyframes aura-hue{to{filter:saturate(1.2) hue-rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .avail .dot,.avail .dot::before{animation:none;}
}
.hero h1{font-weight:800;font-size:clamp(40px,6.4vw,66px);line-height:1.02;letter-spacing:-.035em;margin-bottom:32px;}
.hero h1 .dim{color:var(--faint);}
.hero-bio{max-width:580px;font-size:18px;color:#3a3550;}
.hero-bio p+p{margin-top:16px;}
/* expandable panel: smooth height via grid-rows 0fr -> 1fr (no layout jump) */
.hero-bio-more{
  display:grid;grid-template-rows:0fr;margin-top:0;
  transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1), margin-top .55s cubic-bezier(.22,.61,.36,1);
}
.hero-bio-more-inner{overflow:hidden;}
/* each paragraph rises and sharpens from a soft blur, staggered */
.hero-bio-more-inner p{
  opacity:0;transform:translateY(12px);filter:blur(4px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.hero-bio.is-open .hero-bio-more{grid-template-rows:1fr;margin-top:16px;}
.hero-bio.is-open .hero-bio-more-inner p{opacity:1;transform:none;filter:none;}
.hero-bio.is-open .hero-bio-more-inner p:nth-child(1){transition-delay:.08s;}
.hero-bio.is-open .hero-bio-more-inner p:nth-child(2){transition-delay:.22s;}

.bio-toggle{margin-top:16px;padding:0;background:none;border:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s;}
.bio-toggle:hover{color:var(--accent);}
/* animated +/- icon: the plus spins 180° while its vertical stroke collapses into a minus */
.bt-icon{position:relative;width:11px;height:11px;display:inline-block;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.bt-icon::before,.bt-icon::after{content:"";position:absolute;background:currentColor;border-radius:1px;}
.bt-icon::before{left:0;top:50%;width:100%;height:1.6px;transform:translateY(-50%);}
.bt-icon::after{top:0;left:50%;width:1.6px;height:100%;transform:translateX(-50%);transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;}
.bio-toggle[aria-expanded="true"] .bt-icon{transform:rotate(180deg);}
.bio-toggle[aria-expanded="true"] .bt-icon::after{transform:translateX(-50%) scaleY(0);opacity:0;}
@media (prefers-reduced-motion:reduce){
  .hero-bio-more,.hero-bio-more-inner p,.bt-icon,.bt-icon::after{transition:none;}
}
.hero-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:32px;font-size:14px;color:var(--muted);font-weight:500;}
.hero-foot b{color:var(--ink);font-weight:600;}

/* ── Section label ── */
.label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin:64px 0 4px;
}
.label .note{letter-spacing:.02em;text-transform:none;font-weight:500;}
section{scroll-margin-top:80px;}

/* ── Work list ── */
.work-list{margin-top:8px;}
.work-row{
  display:grid;grid-template-columns:46px 1fr auto 24px;gap:24px;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;
  transition:padding-left .45s var(--ease);
}
.work-row:not(.is-soon):hover{padding-left:12px;}
.work-row .num{font-size:14px;color:var(--faint);font-weight:600;transition:color .4s var(--ease);}
.work-row .main h3{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;margin-bottom:7px;transition:color .4s var(--ease);}
.work-row .main p{font-size:15px;color:var(--muted);max-width:560px;}
.work-row .meta{text-align:right;font-size:13px;color:var(--muted);font-weight:500;line-height:1.7;white-space:nowrap;}
.work-row .meta .yr{color:var(--ink);font-weight:600;}
.work-row .arr{font-size:22px;color:var(--faint);justify-self:end;transition:transform .45s var(--ease), color .4s var(--ease);}
.work-row:not(.is-soon):hover .num{color:var(--accent);}
.work-row:not(.is-soon):hover .arr{transform:translateX(7px);color:var(--accent);}
.work-row.is-soon{cursor:default;}
.work-row.is-soon:hover{padding-left:0;}
.work-row.is-soon .arr{display:none;}
.soon-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair-2);border-radius:100px;padding:3px 10px;margin-left:10px;vertical-align:middle;}

/* ── Side projects (lighter list) ── */
.side-list .work-row .main h3{font-size:clamp(20px,2.6vw,25px);}

/* ── About ── */
.about{padding:8px 0 0;}
.about p{font-size:18px;color:#2c2842;max-width:640px;}
.about p+p{margin-top:18px;}

/* ── Beyond work ── */
.beyond-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:12px;
}
.beyond-card{
  border:1px solid var(--hair);border-radius:14px;padding:0;overflow:hidden;background:var(--bg);
}
.beyond-card .ph{aspect-ratio:4/3;background:var(--bg-2);overflow:hidden;}
.beyond-card .ph img{width:100%;height:100%;object-fit:cover;}
.beyond-card .body{padding:16px 18px 20px;}
.beyond-card .badge{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;}
.beyond-card h4{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;}
.beyond-card .desc{font-size:13.5px;color:var(--muted);line-height:1.55;}
.beyond-card .desc p+p{margin-top:7px;}
.beyond-card .desc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--faint);}
.beyond-card .desc a:hover{text-decoration-color:var(--ink);}

/* ── Contact ── */
.contact{padding:8px 0 0;}
.contact h2{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;margin-bottom:22px;line-height:1.05;}
.contact .links{display:flex;flex-wrap:wrap;gap:12px;}
.contact .btn{
  display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;text-decoration:none;
  border:1px solid var(--hair-2);border-radius:100px;padding:11px 22px;transition:border-color .2s,background .2s;
}
.contact .btn:hover{border-color:var(--ink);background:var(--bg-2);}
.contact .btn svg{width:17px;height:17px;}

/* ── Footer ── */
footer.foot{margin-top:80px;border-top:1px solid var(--hair);}
.foot-inner{display:flex;justify-content:space-between;align-items:center;padding:30px 0 60px;font-size:14px;color:var(--muted);}
.foot-inner a{color:var(--ink);font-weight:600;text-decoration:none;}

/* ─────────── Case-study page ─────────── */
/* graceful staggered entrance as the page renders (no flash; content fades up) */
@keyframes case-in{from{opacity:0;transform:translateY(14px);filter:blur(3px);}to{opacity:1;transform:none;filter:none;}}
.case-top,.case-head,.case-media-label,.case-media,.case-body,.case-cta,.case-next{animation:case-in .6s var(--ease) both;}
.case-head{animation-delay:.05s;}
.case-media-label{animation-delay:.12s;}
.case-media{animation-delay:.16s;}
.case-body{animation-delay:.22s;}
.case-cta{animation-delay:.28s;}
.case-next{animation-delay:.32s;}
/* poster image fades in once decoded, so it doesn't pop in */
.case-media img{animation:case-media-img .5s ease both;}
@keyframes case-media-img{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .case-top,.case-head,.case-media-label,.case-media,.case-body,.case-cta,.case-next,.case-media img{animation:none;}
}

.case-top{padding:30px 0 0;}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s,gap .2s;}
.back-link:hover{color:var(--ink);gap:11px;}
.case-head{padding:44px 0 36px;border-bottom:1px solid var(--hair);}
.case-lead{font-size:15px;font-weight:600;color:var(--accent);margin-bottom:14px;}
.case-head h1{font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:1.04;letter-spacing:-.03em;margin-bottom:20px;}
.case-tagline{font-size:19px;color:#3a3550;max-width:620px;}
.case-meta{display:flex;flex-wrap:wrap;gap:36px;margin-top:34px;}
.case-meta .m .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:5px;font-weight:600;}
.case-meta .m .v{font-size:15px;font-weight:600;}

/* media */
.case-media-label{margin:40px 0 14px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.case-media{margin:0 0 8px;overflow:hidden;border:1px solid var(--hair);background:var(--bg-2);}
.case-media img,.case-media video{width:100%;display:block;}
.case-media.has-video{position:relative;cursor:pointer;}
.case-media .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);transition:background .2s;
}
.case-media .play:hover{background:rgba(0,0,0,.28);}
.case-media .play span{
  width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
}
.case-media .play span::after{content:"";margin-left:5px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--ink);}

/* body sections */
.case-body{display:grid;grid-template-columns:200px 1fr;gap:40px;margin:56px 0 40px;}
.case-section{padding-bottom:8px;}
.case-section .sec-h{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:6px;}
.case-section .sec-body{}
.case-section .sec-body p{font-size:17px;color:#25223c;line-height:1.68;}
.case-section .sec-body p+p,
.case-section .sec-body ul+p,
.case-section .sec-body p+ul{margin-top:16px;}
.case-section .sec-body strong{font-weight:700;color:var(--ink);}
.case-section .sec-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-word;}
.case-section .sec-body ul{list-style:none;padding:0;}
.case-section .sec-body li{position:relative;padding-left:22px;font-size:17px;color:#25223c;line-height:1.6;margin-top:10px;}
.case-section .sec-body li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.case-section .sec-body li ul{margin-top:8px;}
.case-section .sec-body li ul li::before{background:transparent;border:1px solid var(--faint);}

.case-section+.case-section{margin-top:8px;}
.case-stack{display:contents;}

/* email CTA at the foot of the case body */
.case-cta{margin:8px 0 56px;font-size:17px;color:var(--muted);}
.case-cta a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .25s var(--ease);}
.case-cta a:hover{text-decoration-color:transparent;}

/* next project nav at bottom of case page */
.case-next{border-top:1px solid var(--hair);margin-top:24px;}
.case-next a{display:flex;justify-content:space-between;align-items:center;padding:36px 0 64px;text-decoration:none;color:inherit;transition:padding-left .25s;}
.case-next a:hover{padding-left:8px;}
.case-next .lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:6px;}
.case-next .nm{font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-.02em;}
.case-next .arr{font-size:24px;color:var(--faint);}
.case-next a:hover .arr{color:var(--ink);}

/* ── Responsive ── */
@media (max-width:760px){
  .wrap{padding:0 22px;}
  .nav-links{gap:18px;}
  .nav-links a.hide-sm{display:none;}
  .hero{padding:56px 0 44px;}
  .work-row{grid-template-columns:30px 1fr 22px;gap:14px;}
  .work-row .meta{display:none;}
  .case-body{grid-template-columns:1fr;gap:8px;}
  .case-section .sec-h{padding-top:24px;border-top:1px solid var(--hair);}
  .case-section:first-child .sec-h{border-top:none;padding-top:6px;}
  .case-meta{gap:22px;}
}