/* ============================================================
   Shared styles for Nancy Xing project / case-study pages
   Matches the home page system (Switzer + Cabinet Grotesk).
   ============================================================ */
:root{
  --paper:#FCFCF9;
  --ink:#17171A;
  --ink-60:rgba(23,23,26,.6);
  --ink-40:rgba(23,23,26,.4);
  --ink-12:rgba(23,23,26,.12);
  --accent:#F7A341;
  --accent-deep:#F08A1E;   /* decorative: fills, active indicator */
  --accent-text:#E0791A;   /* small text & hovers */
  --accent-soft:#FCEEDD;
  --display:'Cabinet Grotesk', system-ui, sans-serif;
  --body:'Switzer', system-ui, -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  position:relative;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-40);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--accent-text);text-decoration-color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
img{display:block;max-width:100%}

/* ---------- Subtle aurora (echoes home, lighter) ---------- */
.hero-bg{
  display:none;
  position:absolute;top:0;left:0;right:0;height:380px;
  overflow:hidden;pointer-events:none;z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 40%, transparent 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;will-change:transform}
.blob-1{width:480px;height:480px;background:#94D873;top:-160px;left:-120px;animation:drift1 26s ease-in-out infinite alternate}
.blob-2{width:420px;height:420px;background:#BFE8D9;top:-80px;left:38%;animation:drift2 32s ease-in-out infinite alternate}
.blob-3{width:360px;height:360px;background:#EAF2B8;top:60px;left:64%;animation:drift3 24s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,50px) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.1)}}
@keyframes drift3{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,-30px) scale(1.15)}}
@media (prefers-reduced-motion: reduce){.blob{animation:none}}

/* ---------- Layout ---------- */
.content{max-width:760px;margin:0;padding:72px 24px 96px clamp(24px, 7vw, 110px)}

/* ---------- Side nav (matches home) ---------- */
.sidenav{
  position:fixed;top:50%;right:clamp(20px,4vw,56px);transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;z-index:40;
}
.sidenav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-40);display:flex;align-items:center;gap:10px;transition:color .2s}
.sidenav a::after{content:'';display:block;width:18px;height:1.5px;background:var(--ink-12);transition:width .25s,background .25s}
.sidenav a:hover{color:var(--ink)}
.sidenav a:hover::after{background:var(--ink-40)}
.sidenav a.active{color:var(--accent-text)}
.sidenav a.active::after{width:34px;background:var(--accent-deep)}
.sidenav .home-link{color:var(--ink-60);font-weight:600}
.sidenav .home-link::after{display:none}

/* ---------- Back link ---------- */
.backlink{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-60);text-decoration:none;margin-bottom:40px}
.backlink:hover{color:var(--accent-text)}
.backlink span{transition:transform .2s}
.backlink:hover span{transform:translateX(-3px)}

/* ---------- Intro ---------- */
h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,44px);letter-spacing:-.02em;line-height:1.05;margin-bottom:14px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-60);margin-bottom:28px}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- Meta grid ---------- */
.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px;padding:24px 0;margin-bottom:8px;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12)}
.meta dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:4px}
.meta dd{font-size:16px;color:var(--ink)}

/* ---------- Lead image ---------- */
.lead-media{margin:32px 0 8px;border-radius:12px;overflow:hidden;border:1px solid var(--ink-12)}

/* ---------- Sections ---------- */
section{padding-top:72px}
.section-label{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:12px;margin-bottom:16px}
.section-label::after{content:'';height:1px;flex:1;background:var(--ink-12)}
section h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.01em;margin-bottom:14px}
section p{color:var(--ink-60);margin-bottom:16px}
section p strong{color:var(--ink);font-weight:600}

/* ---------- Lists ---------- */
.list{list-style:none;margin:8px 0 16px}
.list li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-60)}
.list li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.list.numbered{counter-reset:n}
.list.numbered li::before{content:counter(n);counter-increment:n;width:auto;height:auto;background:none;border-radius:0;top:0;font-family:var(--display);font-weight:700;font-size:14px;color:var(--accent-text)}

/* ---------- Inline media + caption ---------- */
figure{margin:24px 0}
figure .media{border-radius:12px;overflow:hidden;border:1px solid var(--ink-12);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
figure:hover .media{transform:translateY(-3px);box-shadow:0 14px 36px rgba(23,23,26,.1)}
figure .media img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
figure:hover .media img{transform:scale(1.03)}
figure .placeholder{border-radius:12px;border:1.5px dashed var(--ink-12);padding:48px 24px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
figcaption{margin-top:10px;font-size:13px;color:var(--ink-40)}

/* ---------- Next project ---------- */
.next{margin-top:80px;padding:32px 0;border-top:1px solid var(--ink-12);display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-decoration:none}
.next:hover h3{color:var(--accent-text);transform:translateX(6px)}
.next .label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.next h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;transition:color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}

/* ---------- Footer (matches home) ---------- */
footer{margin-top:40px;padding-top:24px;border-top:1px solid var(--ink-12);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px}
footer a{text-decoration:none;color:var(--ink-60)}
footer a:hover{color:var(--accent-text)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .content{padding:88px 24px 72px;margin:0 auto}
  .sidenav{
    top:0;right:0;left:0;transform:none;flex-direction:row;align-items:center;justify-content:flex-end;gap:18px;padding:16px 20px;
    background:color-mix(in srgb, var(--paper) 85%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--ink-12);overflow-x:auto;
  }
  .sidenav a::after{display:none}
  .meta{grid-template-columns:1fr}
}

/* ============================================================
   DARK MODE
   ============================================================ */
html[data-theme="dark"]{
  --paper:#15171E;
  --ink:#ECEDF0;
  --ink-60:rgba(236,237,240,.64);
  --ink-40:rgba(236,237,240,.42);
  --ink-12:rgba(236,237,240,.14);
  --accent:#F7A341;
  --accent-deep:#F7A341;
  --accent-text:#F9B563;
  --accent-soft:rgba(247,163,65,.16);
  color-scheme:dark;
}
html[data-theme="dark"] figure:hover .media{box-shadow:0 14px 40px rgba(0,0,0,.55)}
html[data-theme="dark"] .placeholder{background:rgba(236,237,240,.03)}

/* ---------- Light/Dark toggle pill ---------- */
.theme-toggle{
  position:fixed;top:18px;right:20px;z-index:120;
  width:60px;height:32px;padding:0;border-radius:100px;
  border:1px solid var(--ink-12);
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;box-shadow:0 4px 16px rgba(23,23,26,.10);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.theme-toggle:hover{border-color:var(--ink-40)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tt-knob{
  position:absolute;top:3px;left:3px;
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform .38s cubic-bezier(.2,.85,.25,1),background .3s;
}
.theme-toggle.is-dark .tt-knob{transform:translateX(28px);background:var(--accent)}
.tt-knob svg{width:15px;height:15px}
.tt-moon{display:none}
.theme-toggle.is-dark .tt-sun{display:none}
.theme-toggle.is-dark .tt-moon{display:block}
@media (max-width:900px){.theme-toggle{top:auto;bottom:18px;right:18px}}
@media (prefers-reduced-motion: reduce){.tt-knob{transition:none}}

/* ---------- Footer petals (shared; activates on illustrated footers) ---------- */
.petal{position:absolute;width:14px;height:9px;background:rgba(110,170,222,.34);
  border-radius:50%;filter:blur(.5px);pointer-events:none;z-index:2}
.petal-inner{display:block;width:100%;height:100%;background:inherit;border-radius:inherit;
  animation:petalFloat var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes petalFloat{
  from{transform:translate(0,0) rotate(var(--rot,0deg))}
  to{transform:translate(var(--dx,18px), var(--dy,-26px)) rotate(calc(var(--rot,0deg) + 40deg))}
}
.petal.burst{transition:transform 1.4s cubic-bezier(.15,.8,.3,1), opacity 1.4s ease}
@media (prefers-reduced-motion: reduce){.petal-inner{animation:none}}

/* ---------- Blog post hero visual ---------- */
.post-hero{margin:24px 0 10px;border-radius:18px;border:1px solid var(--ink-12);
  background:linear-gradient(170deg, color-mix(in srgb, var(--accent) 12%, var(--paper)), var(--accent-soft));
  padding:26px 24px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.post-hero svg{width:min(440px,98%);height:auto;display:block;overflow:visible}
.post-hero svg path,.post-hero svg circle,.post-hero svg rect,.post-hero svg line,
.post-hero svg polyline,.post-hero svg polygon{
  fill:none;stroke:var(--accent-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.post-hero svg .fillnode{fill:var(--accent-text);stroke:none}
.post-hero svg .soft{fill:color-mix(in srgb, var(--accent) 18%, transparent)}
.post-hero svg .softdeep{fill:color-mix(in srgb, var(--accent) 34%, transparent)}
.post-hero svg .paper{fill:var(--paper)}
.post-hero svg .thin{stroke-width:1.5}
.post-hero svg .ink{stroke:var(--ink-40)}
.post-hero svg .dash{stroke-dasharray:2 6}
.post-hero svg .spark{fill:none;stroke:var(--accent);stroke-width:2}