:root{
    --bg:#0b1114; --ink:#fbe3c0; --dim:#8fa3ab;
    --teal:#6e9daa; --orange:#e8471c; --blue:#3d9be9; --yellow:#f2d024;
    --line:#1b262b; --panel:#0f171b;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);
    font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
    letter-spacing:-.01em;overflow-x:hidden}
  /* film grain + vignette = "you are inside a scene" */
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
    background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);}
  .wrap{max-width:780px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
  section{padding:84px 0;border-bottom:1px solid var(--line)}

  .brand{font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
  .brand b{color:var(--orange)}
  h1{font-size:clamp(36px,8.6vw,70px);line-height:.98;font-weight:800;letter-spacing:-.035em;margin:24px 0 18px}
  h1 em{font-style:normal;color:var(--orange)}
  .lede{font-size:clamp(17px,4.3vw,20px);color:var(--dim);max-width:36ch}
  h2{font-size:clamp(26px,6.2vw,40px);line-height:1.03;letter-spacing:-.03em;font-weight:800;margin-bottom:12px}
  .kicker{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
  .muted{color:var(--dim)}

  /* ---------- WHICH ONE ARE YOU ---------- */
  .cast{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0 20px}
  .who{background:transparent;border:1px solid var(--line);border-radius:6px;
    padding:16px 8px 13px;cursor:pointer;transition:.2s;text-align:center;color:var(--dim)}
  .who:hover{border-color:#2e3d44}
  .face{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;
    border:3px solid currentColor;display:grid;place-items:center;
    font:800 20px/1 var(--mono);background:#0b1114;transition:.2s}
  .who[aria-selected="true"]{background:#101a1f;border-color:currentColor}
  .who[aria-selected="true"] .face{background:currentColor;color:#0b1114}
  .who small{display:block;font:600 9.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
  .who strong{display:block;font-size:15px;letter-spacing:-.01em;margin-top:3px;color:var(--ink)}
  #kasey{color:var(--orange)} #adam{color:var(--blue)} #zack{color:var(--yellow)}

  /* ---------- the scenario ---------- */
  .film{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
  .bar{background:#070c0e;padding:9px 14px;display:flex;justify-content:space-between;align-items:center;
    font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
  .bar .lens{color:var(--ink)}
  .body{padding:22px}
  .body p{font-size:16.5px;transition:opacity .22s}
  .body.cut p{opacity:0}
  .hosts{margin-top:18px;padding-top:16px;border-top:1px dashed #26343a;display:none}
  .hosts.on{display:block;animation:rise .5s ease}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .host{display:flex;gap:12px;margin-top:12px;font-size:15.5px;line-height:1.55}
  .host i{font-style:normal;font:600 9.5px/1.5 var(--mono);letter-spacing:.12em;
    min-width:58px;padding-top:4px;text-transform:uppercase}
  .host.good i{color:var(--yellow)} .host.fall i{color:var(--orange)}
  .reveal{margin-top:18px;width:100%;background:transparent;border:1px solid var(--yellow);color:var(--yellow);
    font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:15px;border-radius:5px;
    cursor:pointer;transition:.2s}
  .reveal:hover{background:var(--yellow);color:#0b1114}
  .reveal[disabled]{opacity:.4;cursor:default}

  .grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:24px}
  @media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
  .cell{background:var(--bg);padding:19px;text-decoration:none;color:inherit;display:block;transition:.2s}
  .cell:hover{background:#111a1e}
  .cell b{display:block;font-size:16px;margin-bottom:3px}
  .cell span{font-size:13.5px;color:var(--dim)}
  footer{padding:42px 0 62px;color:var(--dim);font-size:13.5px}
  a{color:var(--blue)} footer a{color:var(--dim)}

/* ---------- La Fortaleza: reading layout ---------- */
.issue-meta{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
article{max-width:64ch}
article h2{margin-top:0}
article p{font-size:17.5px;line-height:1.72;margin-top:18px}
article h3{font-size:clamp(20px,4.6vw,26px);letter-spacing:-.02em;margin-top:38px;font-weight:700}
.pull{border-left:3px solid var(--orange);padding:4px 0 4px 18px;margin:30px 0;
  font-size:clamp(19px,4.6vw,24px);line-height:1.35;letter-spacing:-.02em;color:var(--ink)}
.scenario{border:1px solid var(--line);border-left:3px solid var(--yellow);background:var(--panel);
  border-radius:5px;padding:18px;margin:28px 0}
.scenario b{display:block;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:9px}
.scenario p{margin-top:0;font-size:16px}
.issues{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.issue{background:var(--bg);padding:20px;display:block;text-decoration:none;color:inherit;transition:.2s}
.issue:hover{background:#111a1e}
.issue b{display:block;font-size:17px;margin:5px 0 4px}
.issue span{font-size:14px;color:var(--dim)}
.back{display:inline-block;margin-bottom:26px;font:600 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);text-decoration:none}
.back:hover{color:var(--ink)}

/* ---------- character art in the selector ---------- */
.face{width:64px;height:64px}
.art-face{background:transparent!important;border-color:transparent!important;padding:0}
.art-face img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2),filter .28s,opacity .28s}
.who[aria-selected="false"] .art-face img{filter:grayscale(.9) brightness(.55);opacity:.5;transform:scale(.9)}
.who[aria-selected="true"]  .art-face img{filter:none;opacity:1;transform:scale(1.12)}
.who:hover .art-face img{opacity:.85;transform:scale(.98)}