/* Case-study pages.
 *
 * Single theme by design: the homepage ships two backgrounds (starfield and
 * ocean), but a case study is a document, and giving it two variants would
 * double the maintenance for no reader benefit. Tokens are copied from the
 * starfield shell so the pages sit in the same visual system.
 */

:root{
  --bg:#07080B;
  --panel:rgba(255,255,255,0.04);
  --panel-solid:#101218;
  --text:#F2F3F5;
  --text-soft:#9BA0AC;
  --line:rgba(255,255,255,0.11);
  --line-soft:rgba(255,255,255,0.06);
  --signal:#5C63FF;
  --signal-btn:#555CFF;
  --signal-btn-hover:#4A52FF;
  --signal-bright:#7B81FF;
  --signal-soft:rgba(92,99,255,0.14);
  --available:#34D399;
  --radius-sm:6px;
  --radius-md:10px;
  --container:920px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; font-weight:500; line-height:1.1; letter-spacing:-0.02em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.mono{ font-family:'IBM Plex Mono',monospace; }

/* The [hidden] attribute must beat any component display rule. Without this a
   hidden overlay keeps its place in the layer stack and swallows every click. */
[hidden]{ display:none !important; }

.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;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--signal-btn); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

:where(a,button):focus-visible{
  outline:2px solid var(--signal-bright); outline-offset:3px; border-radius:var(--radius-sm);
}

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ── page chrome ─────────────────────────────────────────────────────────── */
.case-nav{
  border-bottom:1px solid var(--line-soft);
  padding:20px 0;
  position:sticky; top:0; z-index:20;
  background:rgba(7,8,11,0.82); backdrop-filter:blur(10px);
}
.case-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.case-nav__logo{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.02em; }
.case-nav__back{ font-size:0.9rem; color:var(--text-soft); }
.case-nav__back:hover{ color:var(--text); }

/* ── header ──────────────────────────────────────────────────────────────── */
.case__head{ padding:64px 0 40px; border-bottom:1px solid var(--line-soft); }
.case__tier{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--signal-bright);
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  background:var(--signal-soft);
}
.case__head h1{ font-size:clamp(2.1rem,6vw,3.2rem); margin:20px 0 14px; }
.case__lede{ color:var(--text-soft); font-size:1.08rem; max-width:60ch; }
.case__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px;
  border-radius:var(--radius-sm); font-weight:600; font-size:0.93rem;
  border:1px solid transparent; transition:background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-primary{ background:var(--signal-btn); color:#fff; }
.btn-primary:hover{ background:var(--signal-btn-hover); }
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-soft); }

/* ── shot ────────────────────────────────────────────────────────────────── */
.case__shot{
  margin:44px 0 0; border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; background:var(--panel-solid);
}
.case__shot img{ width:100%; }

/* ── body ────────────────────────────────────────────────────────────────── */
.case__body{ padding:52px 0 24px; }
.case-section{ padding:34px 0; border-bottom:1px solid var(--line-soft); }
.case-section:last-of-type{ border-bottom:0; }
.case-section > h2{
  font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--text-soft); font-weight:600; margin-bottom:18px;
}
.case-section p{ max-width:68ch; }
.case-section p + p{ margin-top:16px; }
.case-section h3{ font-size:1.18rem; margin:30px 0 10px; }
.case-section h3:first-of-type{ margin-top:0; }

/* A decision: what was chosen, and what it cost. */
.decision{
  border-left:2px solid var(--signal); padding:2px 0 2px 22px; margin:28px 0;
}
.decision h3{ margin:0 0 8px; font-size:1.12rem; }
.decision__cost{
  margin-top:12px; font-size:0.92rem; color:var(--text-soft);
  border-top:1px dashed var(--line); padding-top:12px;
}
.decision__cost b{ color:var(--text); font-weight:600; }

.constraints{ list-style:none; display:grid; gap:14px; margin-top:6px; }
.constraints li{ padding-left:26px; position:relative; max-width:68ch; }
.constraints li::before{
  content:''; position:absolute; left:4px; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--signal);
}

.stack{ display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; }
.stack li{
  list-style:none; font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; color:var(--text-soft);
}

.note{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:18px 20px; margin-top:24px;
  font-size:0.94rem; color:var(--text-soft); max-width:68ch;
}
.note b{ color:var(--text); }

/* ── breadcrumb ──────────────────────────────────────────────────────────── */
.crumbs{ padding:20px 0 0; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:0.82rem; color:var(--text-soft); }
.crumbs li{ display:flex; align-items:center; gap:8px; }
.crumbs li + li::before{ content:'/'; color:var(--line); }
.crumbs a{ color:var(--text-soft); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line); }
.crumbs a:hover{ color:var(--text); }
.crumbs [aria-current]{ color:var(--text); }

/* ── related work ────────────────────────────────────────────────────────── */
/* A case study used to end in three buttons and nothing else. Someone who read
   the whole thing is the most engaged reader the site gets, and the page gave
   them no reason to read a second one. */
.related{ padding:44px 0 0; border-top:1px solid var(--line-soft); margin-top:20px; }
.related > h2{
  font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--text-soft); font-weight:600; margin-bottom:20px;
}
.related__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.related__card{
  display:block; border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; background:var(--panel-solid);
  transition:border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.related__card:hover{ border-color:var(--signal); transform:translateY(-2px); }
.related__card img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.related__meta{ padding:14px 16px; }
.related__meta h3{ font-size:1rem; margin-bottom:5px; }
.related__meta p{ font-size:0.84rem; color:var(--text-soft); line-height:1.5; }

/* ── prev / next ─────────────────────────────────────────────────────────── */
.pager{ padding:36px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pager__link{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px;
  transition:border-color 0.2s var(--ease);
}
.pager__link:hover{ border-color:var(--signal); }
.pager__link--next{ grid-column:2; text-align:right; }
.pager__dir{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--text-soft); margin-bottom:6px;
}
.pager__name{ font-family:'Space Grotesk',sans-serif; font-weight:500; letter-spacing:-0.02em; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.case__foot{
  margin-top:20px; padding:44px 0 64px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.case__foot p{ color:var(--text-soft); width:100%; margin-bottom:6px; }

.site-foot{
  border-top:1px solid var(--line-soft); padding:26px 0;
  color:var(--text-soft); font-size:0.87rem;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}
.site-foot a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.site-foot a:hover{ color:var(--text); }

/* ── notes index ─────────────────────────────────────────────────────────── */
.note-list{ list-style:none; display:grid; gap:14px; }
.note-entry{
  display:block; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px 26px; transition:border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.note-entry:hover{ border-color:var(--signal); transform:translateY(-2px); }
.note-entry__meta{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-soft); margin-bottom:10px;
}
.note-entry h2{ font-size:1.35rem; margin-bottom:8px; }
.note-entry__summary{ color:var(--text-soft); font-size:0.95rem; max-width:68ch; }

/* The notes body reuses .case-section, so a plain prose page inherits the same
   measure and rhythm as a case study without a second set of rules. */
.case-section ul:not(.constraints):not(.stack){ margin:14px 0 0 20px; display:grid; gap:8px; max-width:66ch; }
.case-section a{ color:var(--signal-bright); text-decoration:underline; text-underline-offset:3px; }
.case-section b{ color:var(--text); font-weight:600; }

@media (max-width:640px){
  .case__head{ padding:44px 0 32px; }
  .case-section{ padding:28px 0; }
  /* Two 50% columns leave no room for a project name; stack them and let the
     next link keep its right alignment so the direction still reads. */
  .pager{ grid-template-columns:1fr; }
  .pager__link--next{ grid-column:1; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}