/* ============================================================
   Case-studies shell. Shares the home page's visual language
   (tokens, paper sheet, typography, theme + font modes).
   Loaded by /case-studies and every /case-studies/* detail page.

   Background photos (bottom-anchored scene, gradient sky above):
   - Light: "white clouds during daytime" by Dominik Schröder
     https://unsplash.com/photos/FIKD9t5_5zQ  (@wirhabenzeit)
   - Dark: "snow-capped mountain at night" by Haseeb Jamil
     https://unsplash.com/photos/3s85IxVDyXE  (@haseebjkhan)
   Accent: shared from accent.css (single source of truth, imported below).
   ============================================================ */
@import url("accent.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root,
html[data-theme="light"] {
  --bg:#f3f1ec; --paper:#fbfaf7; --card:#ffffff; --border:#e3e0d8;
  --text:#1a1a18; --text2:#6f6d66; --ink2:#3a392f; --muted:#9a988f;
  --faint:#bdbbb1; --divider:#ece9e1; --rule:#d9d6cd;
  --chip-bg:#ffffff; --chip-border:#e3e0d8; --chip-text:#6f6d66;
  --scene-filter:saturate(1.04);
  /* sky → clouds, behind the bottom-anchored photo */
  --grad-top:#c7dbed; --grad-bot:#eef3f7;
}
html[data-theme="dark"] {
  --bg:#0e0e0c; --paper:#161613; --card:#17171c; --border:#2a2a26;
  --text:#f3f2ec; --text2:#a4a299; --ink2:#cfcdc2; --muted:#7c7a71;
  --faint:#56564f; --divider:#242420; --rule:#2c2c27;
  --chip-bg:#201f1b; --chip-border:#34332d; --chip-text:#cbc9bf;
  --scene-filter:brightness(.92) contrast(1.04);
  /* near-black top → night sky, behind the bottom-anchored photo */
  --grad-top:#08090a; --grad-bot:#141518;
}

body {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  color: var(--text); min-height: 100vh;
  /* fixed sky-to-horizon gradient; the photo (scene) sits over the bottom */
  background: var(--grad-bot);
  background: linear-gradient(to bottom, var(--grad-top) 0%, var(--grad-bot) 62%);
  background-attachment: fixed;
  transition: color .25s ease;
}
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* typeface modes (same toggle + storage key as home): Sans → Mono → Serif */
html[data-font="mono"] body { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html[data-font="serif"] body { font-family: 'Lora', Georgia, "Times New Roman", serif; }
html[data-font="serif"] .salutation,
html[data-font="serif"] .quote span,
html[data-font="serif"] .glance-v,
html[data-font="serif"] .study-title {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
}
html[data-font="mono"] .para { font-size: 14px; }
html[data-font="mono"] .salutation { font-size: clamp(24px, 4.4vw, 34px); }
html[data-font="mono"] .quote span { font-size: clamp(16px, 2.5vw, 19px); }
html[data-font="mono"] .glance-v { font-size: 16px; }
html[data-font="mono"] .meta-place,
html[data-font="mono"] .meta-no,
html[data-font="mono"] .contacts a,
html[data-font="mono"] .glance-title,
html[data-font="mono"] .eyebrow,
html[data-font="mono"] .glance-k,
html[data-font="mono"] .crumbs { font-size: 13px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
@keyframes letterIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- page shell ----
   The body holds a viewport-fixed gradient (sky / night) as the backdrop.
   The photo is pinned to the BOTTOM OF THE DOCUMENT (not the viewport), so
   at the top you see only the gradient; scrolling down reveals the scene.
   --reveal is both the scene height and the page's bottom space. */
.page {
  --reveal: clamp(420px, 70vh, 880px);
  position: relative; min-height: 100vh;
  color: var(--text);
  padding: 0 0 var(--reveal);
  overflow: hidden;
}
.scene {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--reveal); z-index: 0; pointer-events: none;
  background-size: cover; background-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
  filter: var(--scene-filter);
}
.main {
  position: relative; z-index: 1;
  min-height: 100vh; /* keep the photo below the fold on short pages */
  max-width: 940px; margin: 0 auto;
  padding: clamp(30px, 6vw, 64px) clamp(20px, 5vw, 36px) 0;
}

/* ---- breadcrumb (replaces the home tablist) ---- */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px; margin-bottom: clamp(26px, 4vw, 44px);
  font-size: 14px; letter-spacing: 0.01em;
}
.crumbs a {
  color: var(--muted); text-decoration: none; font-weight: 500;
  transition: color .15s;
}
.crumbs a:hover { color: var(--accent); }
.crumb-sep { color: var(--faint); user-select: none; }
.crumb-current { color: var(--text); font-weight: 600; }

/* ---- paper sheet ---- */
.sheet {
  background: var(--paper); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20,18,10,.04), 0 22px 50px -28px rgba(20,18,10,.28);
  padding: clamp(30px, 5.5vw, 68px) clamp(26px, 6vw, 86px) clamp(34px, 5vw, 60px);
  position: relative; overflow: hidden; isolation: isolate;
}
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  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.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .2; mix-blend-mode: multiply;
}
html[data-theme="dark"] .sheet::before { mix-blend-mode: screen; opacity: .15; }

.meta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 26px; margin-bottom: 8px;
  border-bottom: 1px solid var(--divider); flex-wrap: wrap;
}
.meta-place { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); }
.meta-no {
  font-size: 14px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}

.body { max-width: 640px; }

.salutation {
  font-weight: 600; font-size: clamp(26px, 4.6vw, 38px); line-height: 1.14;
  letter-spacing: -0.02em; color: var(--text); margin: 22px 0 6px;
  text-wrap: balance;
}
.lede {
  font-size: clamp(18px, 2.4vw, 21px); line-height: 1.55; color: var(--text2);
  margin: 14px 0 0; text-wrap: pretty; font-weight: 400;
}
.para { font-size: 17px; line-height: 1.72; color: var(--ink2); margin: 16px 0 0; text-wrap: pretty; }
.para.first { margin: 0; }
.para a, .body a.inline-link {
  color: var(--accent); text-decoration: none; transition: opacity .15s;
}
.para a:hover, .body a.inline-link:hover { opacity: .68; }

.body ul { margin: 14px 0 0; padding-left: 1.15em; list-style: none; }
.body ul li {
  position: relative; font-size: 17px; line-height: 1.66; color: var(--ink2);
  margin-top: 10px; text-wrap: pretty; padding-left: 4px;
}
.body ul li::before {
  content: ""; position: absolute; left: -0.9em; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.body ul li b, .body ul li strong { color: var(--text); font-weight: 600; }

/* section eyebrow (Context / Approach / Outcome …) */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin: 38px 0 2px; padding-top: 26px; border-top: 1px solid var(--divider);
}
.eyebrow.first { margin-top: 30px; }

.quote {
  margin: 30px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent);
}
.quote span {
  font-weight: 500; font-size: clamp(19px, 3vw, 23px); line-height: 1.45;
  color: var(--text); letter-spacing: -0.01em; text-wrap: balance;
}

/* ---- figure (ready for real screenshots) ---- */
.figure { margin: 30px 0 6px; }
.figure img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 1px 2px rgba(20,18,10,.04), 0 18px 40px -26px rgba(20,18,10,.32);
}
.figure figcaption {
  font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.5;
  text-wrap: pretty;
}

/* ---- embedded live prototype (iframe), matches .figure treatment ---- */
.embed-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 1px 2px rgba(20,18,10,.04), 0 18px 40px -26px rgba(20,18,10,.32);
}
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- testimonials as quotes (leadership: personal, letter-like) ---- */
.says { margin-top: 6px; }
.say {
  margin: 28px 0 0; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--accent);
}
.say p {
  margin: 0; font-size: clamp(17px, 2.2vw, 19px); line-height: 1.55;
  color: var(--text); letter-spacing: -0.01em; text-wrap: pretty;
}
.say cite {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 14px; color: var(--muted);
}
.say cite b { color: var(--text); font-weight: 600; }

/* ---- outcome stat grid (same component as home's "At a glance") ---- */
.glance { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--divider); }
.glance-title {
  font-size: 14px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.glance-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
}
.glance-v {
  font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.glance-k { font-size: 14px; color: var(--text2); margin-top: 5px; line-height: 1.4; }

/* ---- link chips (live link, next case …) ---- */
.contacts {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--divider);
}
.contacts-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contacts a {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  font-size: 14px; font-weight: 500; color: var(--chip-text); text-decoration: none;
  padding: 10px 14px; border: 1px solid var(--chip-border); border-radius: 999px;
  background: var(--chip-bg); white-space: nowrap;
  transition: color .15s, border-color .15s, background-color .15s, transform .12s ease;
}
.contacts a:hover {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--chip-bg));
}
.contacts a:active { transform: scale(.96); }
.contacts a svg { width: 15px; height: 15px; display: block; }

/* ---- index: list of studies ---- */
.study-list { margin-top: clamp(30px, 4vw, 46px); }
.study-row {
  display: block; text-decoration: none; color: var(--text);
  padding: 13px 0; border-top: 1px solid var(--divider);
  transition: color .15s;
}
.study-row:first-child { border-top: none; padding-top: 0; }
.study-eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.study-title {
  font-size: 18px; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--text); margin: 0;
  display: block; transition: color .15s;
}
.study-nm { font-weight: 600; color: var(--text); }
.study-desc { font-weight: 400; color: var(--text2); }
.study-row:hover .study-nm,
.study-row:hover .study-desc { color: var(--accent); }
.study-row.is-soon .study-nm,
.study-row.is-soon .study-desc { color: var(--muted); }
/* cap the text width so every title breaks to two balanced lines, for a
   consistent rhythm down the list (the arrow stays right-aligned). */
.study-titletext { max-width: 30ch; text-wrap: balance; }
.study-arrow { flex: none; font-size: 16px; opacity: .5; transition: transform .18s ease, opacity .15s; }
.study-row:hover .study-title { color: var(--accent); }
.study-row:hover .study-arrow { transform: translateX(3px); opacity: 1; }
.study-sum { font-size: 16px; line-height: 1.6; color: var(--ink2); margin: 8px 0 0; max-width: 620px; text-wrap: pretty; }
.study-stat {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* not-yet-written studies: present but un-clickable */
.study-row.is-soon { cursor: default; }
.study-row.is-soon .study-title { color: var(--muted); }
.study-row.is-soon:hover .study-title { color: var(--muted); }
.soon-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); margin-left: 2px;
}

/* ---- footer / toggles (same as home) ---- */
.footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--divider);
}
@media (min-width: 600px) { .footer { justify-content: space-between; } }
.toggles { display: inline-flex; align-items: center; gap: 8px; }
.copyright { font-size: 14px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.theme-toggle, .font-toggle {
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
  min-width: 40px; min-height: 40px;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; padding: 9px;
  cursor: pointer; transition: color .15s, border-color .15s, transform .12s ease;
}
.theme-toggle:hover, .font-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle:active, .font-toggle:active { transform: scale(.96); }
.theme-toggle svg, .font-toggle svg { width: 18px; height: 18px; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle svg, .font-toggle svg { animation: iconIn .3s cubic-bezier(.2,0,0,1); }
}
@keyframes iconIn {
  from { opacity: 0; transform: scale(.25); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ---- back-to-top (same as home) ---- */
.backtotop-wrap {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  margin-top: clamp(30px, 5vw, 52px);
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.2,0,0,1), transform .55s cubic-bezier(.2,0,0,1);
}
.backtotop-wrap.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .backtotop-wrap { transition: none; transform: none; }
}
.back-to-top {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--chip-text); background: var(--chip-bg);
  border: 1px solid var(--chip-border); border-radius: 999px;
  padding: 11px 18px; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(20,18,10,.04), 0 14px 30px -22px rgba(20,18,10,.4);
  transition: color .15s, border-color .15s, background-color .15s, transform .12s ease;
}
.back-to-top:hover {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--chip-bg));
}
.back-to-top:active { transform: translateY(1px) scale(.97); }
.back-to-top svg { width: 16px; height: 16px; display: block; }

/* staggered enter for the sheet sections */
@media (prefers-reduced-motion: no-preference) {
  .intro .meta, .intro .body, .intro .contacts, .intro .glance, .intro .study-list {
    animation: letterIn .5s cubic-bezier(.2,0,0,1) both;
  }
  .intro .body      { animation-delay: .06s; }
  .intro .study-list{ animation-delay: .06s; }
  .intro .contacts  { animation-delay: .12s; }
  .intro .glance    { animation-delay: .12s; }
}