/* ============================================================
   Blueprint × Forge — Case-study detail page stylesheet
   Shared across all 13 project pages. Page-level (no data-theme
   scoping) — detail pages always render Blueprint × Forge.
   Fonts: JetBrains Mono (body) + Saira Condensed (display).
   ============================================================ */

:root{
  /* warm paper-steel base — charcoal with a faint sepia cast */
  --paper:#16130f;        /* warm near-black */
  --paper-2:#1c1813;      /* raised warm panel */
  --paper-3:#221d17;      /* warmer panel */
  --line:#3a3128;         /* warm hairline */
  --line-soft:#2b251e;    /* fainter hairline */

  /* drafting grid — quiet, warm */
  --grid:rgba(224,176,120,0.045);
  --grid-major:rgba(224,176,120,0.075);

  /* ink */
  --ink:#ece4d8;          /* warm off-white */
  --ink-dim:#b3a896;      /* AA on paper */
  --ink-faint:#8a7f6e;    /* labels / annotations */

  /* ember lead accent */
  --ember:#ff7a18;
  --ember-deep:#e0703a;
  --ember-glow:rgba(255,122,24,.45);

  /* muted purple — small secondary accent */
  --purple:#9c8fcf;
  --purple-deep:#7b6fa6;

  --maxw:1080px;
  --readw:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ---------- Quiet drafting grid ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px, 130px 130px, 130px 130px;
  background-position:-1px -1px;
}
/* warm forge glow from below + soft paper depth on top */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 118%, rgba(255,122,24,.10), transparent 60%),
    radial-gradient(ellipse at 50% -10%, rgba(224,176,120,.05), transparent 55%);
}

a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:#1a0d04}

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:2px;
}

/* shared inner width container */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  position:relative;
}
.wrap.read{max-width:calc(var(--readw) + clamp(40px,8vw,96px))}

code{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:.86em;letter-spacing:.01em;
  background:var(--paper);
  border:1px solid var(--line-soft);
  color:var(--ember);
  padding:1px 6px;border-radius:2px;
}

/* ============================================================
   Header / nav bar
   ============================================================ */
header{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(28,24,19,.94), rgba(22,19,15,.84));
  backdrop-filter:blur(8px);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:62px;
}
.brand{
  display:flex;align-items:center;gap:11px;min-width:0;
}
.brand .mark{
  width:50px;height:50px;flex-shrink:0;
  background-color:var(--ember);
  -webkit-mask-image:url('../tryzub.png');mask-image:url('../tryzub.png');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 0 8px var(--ember-glow));
}
.brand .name{
  font-family:"Saira Condensed",sans-serif;font-size:15px;letter-spacing:.06em;
  font-weight:700;color:var(--ink);text-transform:uppercase;white-space:nowrap;
}
.brand .sep{color:var(--line);flex-shrink:0}
.brand .meta{
  font-size:9px;letter-spacing:.22em;color:var(--ember);text-transform:uppercase;
  white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-family:"Saira Condensed",sans-serif;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);padding:8px 12px;
  border:1px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.nav-links a:hover{color:var(--ember);border-color:var(--line)}
@media (max-width:620px){
  .brand .meta,.brand .sep{display:none}
  .nav-links a:not(.nav-back){display:none}
}

/* ============================================================
   Detail hero
   ============================================================ */
.detail-hero{
  padding:clamp(40px,7vw,84px) 0 clamp(28px,4vw,44px);
  border-bottom:1px solid var(--line);
  position:relative;
}

.back-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Saira Condensed",sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:28px;
  transition:color .2s,gap .2s;
}
.back-link .arrow{color:var(--ember);transition:transform .2s}
.back-link:hover{color:var(--ember);gap:13px}
.back-link:hover .arrow{transform:translateX(-3px)}

.status-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.status-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);
  border:1px solid rgba(255,122,24,.35);background:rgba(255,122,24,.06);
  padding:5px 12px;
}
.status-badge .dot{
  width:7px;height:7px;flex-shrink:0;
  background:var(--ember);transform:rotate(45deg);
  box-shadow:0 0 8px var(--ember-glow);
}
.kicker{
  font-family:"Saira Condensed",sans-serif;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--line);padding:4px 11px;
}

.detail-hero h1{
  margin:0 0 18px;
  font-family:"Saira Condensed",sans-serif;font-weight:700;
  font-size:clamp(40px,7.5vw,82px);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#ffd9a8 0%,var(--ember) 52%,var(--ember-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 36px rgba(255,122,24,.16);
}

.detail-hero .lede{
  color:var(--ink-dim);max-width:64ch;font-size:15px;line-height:1.75;margin:0 0 26px;
}
.detail-hero .lede strong{color:var(--ink);font-weight:600}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.tag{
  font-size:10.5px;letter-spacing:.06em;color:var(--ink-dim);text-transform:uppercase;
  background:var(--paper);border:1px solid var(--line-soft);padding:5px 11px;
}

/* Meta grid: Role / Stack / Status / Scale */
.meta-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
}
@media (max-width:760px){.meta-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.meta-grid{grid-template-columns:1fr}}
.meta-cell{
  padding:18px 20px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(34,29,23,.35),transparent);
}
.meta-cell .k{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:8px;
}
.meta-cell .v{
  font-family:"Saira Condensed",sans-serif;font-size:16px;letter-spacing:.03em;
  color:var(--ink);font-weight:600;line-height:1.2;
}

/* ============================================================
   Section blocks (numbered sheet-style headers)
   ============================================================ */
.block{padding:clamp(40px,6vw,68px) 0;border-bottom:1px solid var(--line-soft)}
.block:last-of-type{border-bottom:none}

.block h2{
  margin:0 0 26px;
  font-family:"Saira Condensed",sans-serif;font-size:clamp(22px,3.4vw,34px);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;
  display:flex;align-items:center;gap:14px;
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
.block h2 .no{
  font-size:12px;letter-spacing:.2em;color:var(--ember);
  border:1px solid var(--line);padding:4px 10px;flex-shrink:0;
}

.prose p{
  margin:0 0 18px;color:var(--ink-dim);font-size:15px;line-height:1.8;max-width:var(--readw);
}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- Feature / highlights list ---------- */
.feature-list{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--line);
}
.feature-list li{
  position:relative;
  padding:18px 22px 18px 48px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;line-height:1.7;color:var(--ink-dim);
  background:linear-gradient(180deg,rgba(34,29,23,.25),transparent);
}
.feature-list li:last-child{border-bottom:none}
.feature-list li::before{
  content:"";position:absolute;left:22px;top:24px;
  width:8px;height:8px;background:var(--ember);transform:rotate(45deg);
  box-shadow:0 0 8px var(--ember-glow);
}
.feature-list li strong{color:var(--ink);font-weight:600}

/* ---------- Outcome callout (ember left border) ---------- */
.callout{
  display:flex;gap:18px;align-items:flex-start;
  border:1px solid var(--line);
  border-left:3px solid var(--ember);
  background:rgba(255,122,24,.05);
  padding:24px 26px;max-width:var(--readw);
}
.callout .mark{
  color:var(--ember);font-size:18px;line-height:1.5;flex-shrink:0;
  text-shadow:0 0 12px var(--ember-glow);
}
.callout .label{
  font-family:"Saira Condensed",sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin-bottom:8px;font-weight:600;
}
.callout p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.75}

/* ============================================================
   Prev / next pager
   ============================================================ */
.pager{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
@media (max-width:560px){.pager{grid-template-columns:1fr}}
.pager a{
  display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper-3),var(--paper-2));
  padding:20px 22px;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.pager a:not(.disabled):hover{
  transform:translateY(-3px);border-color:#4a3e30;
  box-shadow:0 14px 32px rgba(0,0,0,.45);
}
.pager .next{text-align:right;align-items:flex-end}
.pager .dir{
  font-family:"Saira Condensed",sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);
}
.pager .title{
  font-family:"Saira Condensed",sans-serif;
  font-size:18px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink);font-weight:600;
}
.pager .disabled{
  opacity:.4;cursor:not-allowed;pointer-events:none;
}
.pager .disabled .dir{color:var(--ink-faint)}
.pager .disabled .title{color:var(--ink-faint)}

/* ============================================================
   Footer
   ============================================================ */
footer{
  border-top:1px solid var(--line);
  padding:clamp(36px,5vw,56px) 0;
  margin-top:24px;
}
.foot{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:11px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;
}
.foot .status{display:inline-flex;align-items:center;gap:9px;color:var(--ink-dim)}
.foot .dot-live{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--ember);box-shadow:0 0 8px var(--ember-glow);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .pager a:hover,.back-link:hover,.back-link:hover .arrow{transform:none}
  *{animation:none !important}
}