/* VECTOR STRATEGY ENGINE — manual
   La máquina habla en monoespaciada. La explicación, en serif. */

:root{
  --ink:#0A0A0B;
  --ink-raised:#121214;
  --brass:#C9A24E;
  --brass-dim:#6B5527;
  --brass-faint:#2A2317;
  --paper:#EDEBE6;
  --paper-muted:#A29E95;
  --ember:#C0563A;
  --rule:#232326;

  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --measure:64ch;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.72;
  font-weight:380;
}

::selection{background:var(--brass);color:var(--ink)}

a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass-dim)}
a:hover{border-bottom-color:var(--brass)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- shell ---------- */

.shell{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px 140px;
  display:grid;
  grid-template-columns:1fr;
  gap:0 72px;
}

@media(min-width:1000px){
  .shell{grid-template-columns:210px minmax(0,1fr)}
}

/* ---------- masthead ---------- */

.masthead{
  grid-column:1/-1;
  padding:56px 0 0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.wordmark{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.34em;
  font-weight:700;
  color:var(--paper);
}
.wordmark span{color:var(--brass)}

.langswitch{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--paper-muted);
  border:0;
}
.langswitch a{border:0;color:var(--paper-muted)}
.langswitch a:hover{color:var(--brass)}
.langswitch .on{color:var(--brass)}

/* ---------- hero ---------- */

.hero{
  grid-column:1/-1;
  border-top:1px solid var(--rule);
  margin-top:28px;
  padding:76px 0 84px;
}
.hero h1{max-width:24ch}  /* tanda 11: el límite va en el titular, no en todo el bloque (en móvil estrechaba el párrafo) */

.hero h1{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(30px,5.4vw,54px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0;
  color:var(--paper);
}
.hero h1 em{font-style:normal;color:var(--brass);display:block}

.hero p{
  max-width:52ch;
  margin:34px 0 0;
  color:var(--paper-muted);
  font-size:20px;
}

.hero .kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--brass-dim);
  margin:0 0 26px;
}

/* ---------- index ---------- */

.index{
  display:none;
}
@media(min-width:1000px){
  .index{
    display:block;
    position:sticky;
    top:44px;
    align-self:start;
    padding-top:8px;
  }
}
.index ol{
  list-style:none;
  margin:0;padding:0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.5;
}
.index li{margin-bottom:16px;display:flex;gap:10px}
.index .n{color:var(--brass-dim);font-variant-numeric:tabular-nums}
.index a{color:var(--paper-muted);border:0}
.index a:hover{color:var(--brass)}

/* ---------- sections ---------- */

.body{min-width:0}

section{
  padding:0 0 78px;
  scroll-margin-top:36px;
}

section > h2{
  font-family:var(--mono);
  font-size:19px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--brass);
  margin:0 0 4px;
}

section > h2 .num{
  color:var(--brass-dim);
  margin-right:14px;
  font-variant-numeric:tabular-nums;
}

section > .deck{
  color:var(--paper-muted);
  margin:0 0 30px;
  max-width:var(--measure);
  font-size:17px;
}

section p{max-width:var(--measure)}

h3{
  font-family:var(--mono);
  font-size:15px;
  font-weight:700;
  color:var(--paper);
  margin:38px 0 10px;
  letter-spacing:.01em;
}

.pull{
  font-family:var(--mono);
  font-size:17px;
  line-height:1.6;
  color:var(--brass);
  border-left:2px solid var(--brass-dim);
  padding:4px 0 4px 22px;
  margin:34px 0;
  max-width:54ch;
}

/* ---------- the regime ladder (signature) ---------- */

.ladder{
  margin:34px 0 8px;
  border-top:1px solid var(--rule);
}

.rung{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:0 20px;
  align-items:start;
  padding:22px 0 24px;
  border-bottom:1px solid var(--rule);
}
@media(min-width:640px){
  .rung{grid-template-columns:44px 132px 1fr}
}

.rung .lvl{
  font-family:var(--mono);
  font-weight:700;
  font-size:22px;
  color:var(--brass-dim);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.rung:last-child .lvl{color:var(--brass)}

.rung .name{
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  color:var(--paper);
  padding-top:5px;
}
.rung .name small{
  display:block;
  font-weight:400;
  color:var(--paper-muted);
  letter-spacing:.02em;
  margin-top:3px;
}

.rung .what{
  font-size:17px;
  color:var(--paper-muted);
  grid-column:2/-1;
  padding-top:8px;
}
@media(min-width:640px){
  .rung .what{grid-column:3;padding-top:5px}
}

/* weight bar: the deeper the regime, the heavier the mark */
.bar{
  display:block;
  height:3px;
  background:var(--brass);
  margin-top:11px;
  opacity:.34;
}
.rung:nth-child(2) .bar{width:22%;opacity:.34}
.rung:nth-child(3) .bar{width:44%;opacity:.52}
.rung:nth-child(4) .bar{width:70%;opacity:.74}
.rung:nth-child(5) .bar{width:100%;opacity:1}

/* ---------- window strip ---------- */

.window{
  display:flex;
  gap:6px;
  margin:32px 0 6px;
  flex-wrap:wrap;
}
.day{
  font-family:var(--mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--brass-faint);
  border:1px solid var(--rule);
  padding:9px 0;
  width:38px;
  text-align:center;
}
.day.open{color:var(--ink);background:var(--brass);border-color:var(--brass);font-weight:700}
.window-note{font-family:var(--mono);font-size:12.5px;color:var(--paper-muted);margin:14px 0 0}

/* ---------- definition rows ---------- */

.rows{margin:26px 0 0;border-top:1px solid var(--rule)}
.row{
  display:grid;
  grid-template-columns:1fr;
  gap:2px 24px;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
@media(min-width:640px){.row{grid-template-columns:190px 1fr}}
.row dt{
  font-family:var(--mono);
  font-size:14px;
  color:var(--paper);
  font-weight:700;
}
.row dd{margin:0;color:var(--paper-muted);font-size:17px}

/* ---------- the boundary block ---------- */

.boundary{
  border:1px solid var(--brass-dim);
  padding:34px 30px 30px;
  margin:8px 0 0;
  background:var(--ink-raised);
}
.boundary h2{margin-top:0}
.boundary ul{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.5;
  columns:1;
}
@media(min-width:700px){.boundary ul{columns:2;column-gap:40px}}
.boundary li{
  padding:0 0 14px 22px;
  position:relative;
  break-inside:avoid;
  color:var(--paper);
}
.boundary li::before{
  content:"—";
  position:absolute;left:0;top:0;
  color:var(--ember);
}
.boundary .after{
  margin:20px 0 0;
  color:var(--paper-muted);
  font-size:16px;
  max-width:56ch;
}

/* ---------- faq ---------- */

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:19px 34px 19px 0;
  font-family:var(--mono);
  font-size:15px;
  color:var(--paper);
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;right:6px;top:18px;
  color:var(--brass);
  font-size:17px;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--brass)}
.faq .a{padding:0 0 22px;color:var(--paper-muted);max-width:var(--measure)}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- colophon ---------- */

.colophon{
  grid-column:1/-1;
  border-top:1px solid var(--rule);
  padding:36px 0 0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.9;
  color:var(--paper-muted);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.colophon a{color:var(--paper-muted);border-bottom-color:var(--rule)}
.colophon a:hover{color:var(--brass)}

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