/* ============================================================
   CASE.CSS — Case study page styles.
   Used alongside base.css for individual case pages.
   ============================================================ */


/* ============================================================
   1. PORTADA (COVER)
   ============================================================ */
.wrap{ max-width: 1180px; margin:0 auto; padding: 0 var(--pad); }

.lede{ padding: clamp(48px, 9vh, 110px) 0 clamp(30px, 5vh, 56px); }
.lede__idx{
  font-family: var(--mono); font-size: clamp(9.5px,.82vw,12px);
  letter-spacing:.16em; text-transform:uppercase; color: var(--acid-hi);
  display:block; margin-bottom: clamp(14px,2.4vh,26px);
}
.lede h1{
  font-family: var(--display); font-weight:800;
  font-size: min(108px, 7.6vw,
                 calc((100vw - var(--pad) * 2) / (var(--title-ch, 14) * 1.05)));
  line-height:.92; letter-spacing:-.045em; text-transform:uppercase;
  overflow-wrap:normal;
  word-break:normal;
  white-space:nowrap;
  max-width:100%;
  margin:0; color: var(--paper);
}
.lede__thesis{
  font-family: var(--display); font-weight:600;
  font-size: clamp(19px, 2.5vw, 34px); line-height:1.14;
  letter-spacing:-.022em;
  max-width: 24ch; margin: clamp(20px,3.4vh,38px) 0 0;
}
.lede__thesis em{ font-style:normal; color: var(--acid-hi); }

.facts{
  margin: clamp(34px,6vh,66px) 0 0;
  display:grid; gap:0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: var(--line) solid var(--ink-dim);
  font-family: var(--mono);
  font-size: clamp(9.5px,.8vw,11.5px);
  letter-spacing:.05em; text-transform:uppercase;
}
.facts > div{
  padding: 14px 0 15px;
  border-bottom: var(--line) solid var(--ink-dim);
  padding-right: 20px;
}
.facts dt{ opacity:.55; margin-bottom:5px; }
.facts dd{ margin:0; color: var(--acid-hi); }


/* ============================================================
   2. LOS CUATRO ESTADOS (THE FOUR STATES)
   ============================================================ */
.band{
  background: var(--ink); color: var(--bg);
  border-block: var(--line) solid var(--bg);
  padding: clamp(9px,1.3vw,15px) var(--pad);
  font-family: var(--display); font-weight:800;
  font-size: clamp(22px,3.8vw,52px);
  letter-spacing:-.035em; text-transform:uppercase; line-height:1;
  display:flex; align-items:baseline; gap: clamp(12px,2.4vw,30px);
}
.band--acid{ background: var(--acid); color:#151508; }
.band small{
  font-family: var(--mono); font-weight:400;
  font-size: clamp(9px,.8vw,11px); letter-spacing:.16em;
  opacity:.72; text-transform:uppercase;
}

.state{ padding: clamp(46px,8vh,100px) 0; }
.state__grid{
  display:grid; gap: clamp(26px,5vw,72px);
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  align-items:start;
}
.state__grid > *{ min-width:0; }
.code, .code pre{ min-width:0; max-width:100%; }


/* ============================================================
   3. PROSE
   ============================================================ */
.prose{ font-size: clamp(15.5px,1.06vw,17.5px); line-height:1.62; color: var(--ink-hi); }
.prose > *:first-child{ margin-top:0; }
.prose > *:last-child{ margin-bottom:0; }
.prose p{ margin: 0 0 1.1em; }
.prose strong{ color: var(--paper); font-weight:600; }
.prose em{ font-style:normal; color: var(--acid-hi); }
.prose h3{
  font-family: var(--mono); font-weight:500;
  font-size: clamp(10px,.85vw,12px); letter-spacing:.16em;
  text-transform:uppercase; color: var(--acid-hi);
  margin: 2.4em 0 .9em;
}
.prose ul{ margin:0 0 1.1em; padding-left:1.1em; }
.prose li{ margin-bottom:.45em; }
.prose li::marker{ color: var(--acid); }

.pull{
  font-family: var(--display); font-weight:600;
  font-size: clamp(20px,2.2vw,30px); line-height:1.16; letter-spacing:-.02em;
  color: var(--paper);
  border-left: 3px solid var(--acid-hi);
  padding: 2px 0 2px 20px; margin: 1.8em 0;
}


/* ============================================================
   4. DIAGRAMS (CSS patterns)
   ============================================================ */
.fig{ position:sticky; top: calc(var(--ribbon-h) + 30px); }
.fig__box{
  border: var(--line) solid var(--ink-dim);
  background: var(--bg);
  aspect-ratio: 4/3; position:relative; overflow:hidden;
}
.fig__box i{ position:absolute; inset:0; }
.fig figcaption{
  font-family: var(--mono); font-size: clamp(9px,.76vw,10.5px);
  letter-spacing:.08em; line-height:1.5; text-transform:uppercase;
  color: var(--acid-hi); opacity:.75;
  border-top: var(--line) solid var(--ink-dim);
  padding-top: 9px; margin-top: 10px;
}

/* multi-tenant: columns sharing a base */
.f-tenant i{ background:
  linear-gradient(0deg, transparent 0 47%, var(--ink) 47% 49%, transparent 49%),
  repeating-linear-gradient(90deg, var(--acid) 0 15px, #1f1f10 15px 17px, var(--bg) 17px 32px); }

/* coupling: everything crossed */
.f-coupled i{ background:
  repeating-linear-gradient(38deg,  var(--ink-dim) 0 2px, transparent 2px 12px),
  repeating-linear-gradient(-38deg, var(--ink-dim) 0 2px, transparent 2px 12px),
  linear-gradient(140deg, #2a1730, var(--bg)); }

/* factory: one node, many outputs */
.f-factory i{ background:
  radial-gradient(circle at 5% 50%, var(--ink) 0 8px, transparent 9px),
  conic-gradient(from 0deg at 5% 50%,
    transparent 0 57deg,
    var(--acid)  57deg  60deg, transparent  60deg  65deg,
    var(--ink)   65deg  68deg, transparent  68deg  73deg,
    var(--acid)  73deg  76deg, transparent  76deg  81deg,
    var(--ink)   81deg  84deg, transparent  84deg  89deg,
    var(--acid)  89deg  92deg, transparent  92deg  97deg,
    var(--ink)   97deg 100deg, transparent 100deg 105deg,
    var(--acid) 105deg 108deg, transparent 108deg 113deg,
    var(--ink)  113deg 116deg, transparent 116deg 121deg,
    var(--acid) 121deg 124deg, transparent 124deg),
  var(--bg); }

/* waterfall shortening */
.f-perf i{ background:
  linear-gradient(90deg, var(--ink) 0 79%, transparent 79%)  0 15%/100% 8% no-repeat,
  linear-gradient(90deg, var(--ink) 0 62%, transparent 62%)  0 31%/100% 8% no-repeat,
  linear-gradient(90deg, var(--acid) 0 45%, transparent 45%) 0 47%/100% 8% no-repeat,
  linear-gradient(90deg, var(--acid) 0 30%, transparent 30%) 0 63%/100% 8% no-repeat,
  linear-gradient(90deg, var(--acid) 0 18%, transparent 18%) 0 79%/100% 8% no-repeat,
  var(--bg); }


/* ============================================================
   5. CODE BLOCKS
   ============================================================ */
.code{
  border: var(--line) solid var(--ink-dim);
  background: #141414;
  margin: 1.8em 0;
  overflow:hidden;
}
.code__head{
  display:flex; justify-content:space-between; gap:12px;
  border-bottom: var(--line) solid var(--ink-dim);
  padding: 7px 13px;
  font-family: var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--acid-hi);
}
.code pre{
  margin:0; padding: 15px 16px; overflow-x:auto;
  font-family: var(--mono); font-size: clamp(11px,.85vw,12.5px);
  line-height:1.62; color: var(--ink-hi);
  scrollbar-width:thin;
}
.code b{ color: var(--acid-hi); font-weight:400; }
.code u{ color: var(--paper); text-decoration:none; }
.code i{ color: var(--ink-dim); font-style:normal; }


/* ============================================================
   6. METRIC
   ============================================================ */
.metric{
  border: var(--line) solid var(--acid-hi);
  padding: clamp(22px,4vw,38px);
  margin: clamp(30px,5vh,54px) 0 0;
  display:grid; gap: clamp(18px,3vw,38px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items:end;
}
.metric__big{
  font-family: var(--display); font-weight:800;
  font-size: clamp(46px,8vw,104px); line-height:.82; letter-spacing:-.05em;
  color: var(--acid-hi); margin:0;
}
.metric__lbl{
  font-family: var(--mono); font-size: clamp(9.5px,.8vw,11.5px);
  letter-spacing:.1em; text-transform:uppercase;
  margin: 12px 0 0; color: var(--ink-hi); opacity:.8;
}
.bars{ display:grid; gap:11px; font-family: var(--mono); font-size:10px;
       letter-spacing:.1em; text-transform:uppercase; }
.bars > div{ display:grid; gap:5px; }
.bars span{ display:flex; justify-content:space-between; opacity:.7; }
.bars i{ display:block; height:11px; background: var(--ink-dim); }
.bars .after i{ background: var(--acid-hi); }


/* ============================================================
   7. NEXT CASE NAVIGATION
   ============================================================ */
.next{
  border-top: var(--line) solid var(--ink-dim);
  padding: clamp(46px,8vh,96px) 0;
  display:flex; flex-wrap:wrap; gap: 18px clamp(20px,4vw,60px);
  align-items:baseline; justify-content:space-between;
}
.next a{
  font-family: var(--display); font-weight:800;
  font-size: clamp(24px,3.6vw,50px); letter-spacing:-.035em;
  text-transform:uppercase; text-decoration:none;
  color: var(--paper);
  transition: color .25s;
}
.next a:hover{ color: var(--acid-hi); }
.next small{
  display:block; font-family: var(--mono); font-weight:400;
  font-size:10px; letter-spacing:.16em; color: var(--ink); opacity:.7;
  margin-bottom:8px;
}


/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .state__grid{ grid-template-columns: 1fr; }
  .fig{ position:static; order:-1; }
  .fig__box{ aspect-ratio: 16/9; }
}
@media (max-width: 620px){
  .ribbon__readout{ display:none; }
  .band{ flex-direction:column; gap:4px; }
}