/* ===========================================================
   YouTube Creator Catalog — cool academic / "critical edition"
   Spectral (display + body) · IBM Plex Mono (data)
   =========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
img,svg{max-width:100%}

:root{
  --bg:#FCFCFE; --panel:#F1F3F8; --ink:#141621; --muted:#666C7E; --rule:#DDE0EA;
  --blue:#284A93; --blue-soft:#e3e9f6; --plum:#6A3A72; --plum-soft:#ecdcef;
  --font-display:'Spectral',Georgia,serif;
  --font-body:'Spectral',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --gutter:158px; --gap:2.6rem; --measure:588px; --stage:900px;
}

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  font-feature-settings:"onum" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
}

main{max-width:var(--stage);margin:0 auto;padding:3.4rem 2rem 3.6rem}

/* ---- running folio ---- */
.folio{
  border-bottom:1px solid var(--rule); padding-bottom:.5rem; margin-bottom:1.9rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.folio b{color:var(--ink);font-weight:600}
.folio .brand{display:inline-flex;align-items:center;gap:.6rem}
.folio .mark{height:26px;width:auto;display:block}

/* ---- two-column scholarly block ---- */
.block{
  display:grid; grid-template-columns:var(--gutter) minmax(0,var(--measure));
  gap:var(--gap); justify-content:center; align-items:baseline;
  margin-bottom:var(--vr,2.4rem);
}
.body{min-width:0}
.gutter{
  text-align:right; font-family:var(--font-mono); font-size:12px;
  color:var(--muted); line-height:1.6; padding-top:.4em; user-select:none;
}
.gutter .sec{color:var(--blue);letter-spacing:.03em;display:block}
h2.lbl,.gutter .lbl{
  display:block; margin:0; font-family:var(--font-body); font-weight:600;
  font-variant:small-caps; letter-spacing:.07em; font-size:15px; color:var(--blue);
  line-height:1.3;
}
.gutter .note{
  display:block; margin-top:.5rem; font-family:var(--font-body); font-style:italic;
  font-size:13px; color:var(--muted); line-height:1.45; letter-spacing:0;
}

/* ---- hero ---- */
.eyebrow{
  font-family:var(--font-body); font-variant:small-caps; letter-spacing:.07em;
  font-size:15px; color:var(--blue);
}
.head-note{
  display:block; margin-top:.5rem; font-style:italic; font-size:13px;
  color:var(--muted); line-height:1.45;
}
svg.wave{
  display:block; width:100%; height:30px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 70%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 70%,transparent);
}
h1.head{
  font-family:var(--font-display); font-weight:700; font-size:2.75rem;
  line-height:1.06; letter-spacing:-.012em; color:var(--ink); text-wrap:balance;
}
.offer{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:1.32rem; color:var(--muted); max-width:34ch;
}
.credential{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em;
  color:var(--muted); margin-top:1rem;
}
.credential b{color:var(--ink);font-weight:600}

/* ---- video-search demo ---- */
.vsearch{
  position:relative; background:var(--panel); border:1px solid var(--rule);
  border-radius:9px; padding:1.1rem 1.2rem 1.25rem;
}
.vs-bar{
  display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-mono);
  font-size:14.5px; border-bottom:1px solid var(--rule); padding-bottom:.75rem;
  margin-bottom:.95rem; flex-wrap:wrap;
}
.vs-mag{color:var(--blue);font-size:16px}
.vs-expert{color:var(--plum);font-weight:600}
.vs-term{color:var(--ink)}
.vs-caret{
  display:inline-block; width:8px; height:1.02em; background:var(--blue);
  vertical-align:-1px; animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.vs-results{
  list-style:none; display:flex; flex-direction:column; gap:.85rem; min-height:280px;
}
.vs-item{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  opacity:0; transform:translateY(5px); animation:rise .34s forwards;
  animation-delay:calc(var(--i)*70ms);
}
@keyframes rise{to{opacity:1;transform:none}}
.vs-thumb{
  position:relative; width:94px; height:53px; border-radius:4px; flex:none;
  overflow:hidden; border:1px solid var(--rule);
}
.vs-thumb::before{
  content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px;
  border-radius:50%; background:rgba(20,22,33,.42);
}
.vs-thumb::after{
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:9px solid #fff; border-top:6px solid transparent;
  border-bottom:6px solid transparent; transform:translateX(1px);
}
.vs-thumb .dur{
  position:absolute; right:3px; bottom:3px; background:rgba(15,16,22,.82); color:#fff;
  font:500 9px/1 var(--font-mono); padding:2px 3px; border-radius:2px; letter-spacing:.02em;
}
.vs-chip{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--blue);
  background:var(--blue-soft); border-radius:4px; padding:.12rem .42rem;
  text-decoration:none; white-space:nowrap; transition:transform .12s; display:inline-block;
}
.vs-chip:hover{transform:translateY(-1px)}
.vs-item>div{min-width:0}
.vs-snip{font-size:14.5px;line-height:1.45;color:var(--ink);margin-top:.28rem;overflow-wrap:break-word}
.vs-vid{overflow-wrap:anywhere}
mark{
  color:inherit; background:linear-gradient(var(--plum-soft),var(--plum-soft)) left/0 100% no-repeat;
  padding:0 .06em; border-radius:1px; animation:sweep .5s .2s forwards;
}
@keyframes sweep{to{background-size:100% 100%}}
.vs-vid{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-top:.35rem;letter-spacing:.02em}
.vs-count{font-family:var(--font-mono);font-size:10.5px;color:var(--plum)}

/* ---- lists ---- */
ul.get,ol.steps{list-style:none;max-width:42ch}
ul.get li{position:relative;padding-left:1.3rem;margin-bottom:.62rem;font-size:16px;line-height:1.5}
ul.get li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--blue);border-radius:1px}
ul.get .mono{font-family:var(--font-mono);font-size:13px;color:var(--plum)}
ol.steps{counter-reset:step}
ol.steps li{position:relative;padding-left:1.9rem;margin-bottom:.8rem;font-size:16px;line-height:1.5;counter-increment:step}
ol.steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:.15em;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--blue);
}

/* ---- pricing ---- */
.price{font-size:1.12rem;color:var(--ink);max-width:44ch}
.price .fig{font-family:var(--font-mono);font-weight:600;font-size:1.12rem;color:var(--ink);font-variant-numeric:tabular-nums}
.price .sub{display:block;margin-top:.6rem;font-size:1rem;color:var(--muted)}

/* ---- about ---- */
.about p{max-width:46ch;color:var(--ink)}

/* ---- FAQ ---- */
dl{margin:0;max-width:46ch}
dt{font-weight:600;margin-top:1.3rem;font-size:16px}
dt:first-child{margin-top:0}
dd{color:var(--muted);margin:.15rem 0 0;font-size:15.5px;line-height:1.55}

/* ---- form ---- */
.cta .body{max-width:var(--measure)}
form{margin-top:.4rem}
form label{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:1.1rem 0 .35rem;
}
form label:first-of-type{margin-top:0}
form input{
  display:block; width:100%; padding:.62rem .75rem; font-size:1rem;
  font-family:var(--font-body); border:1px solid var(--rule); border-radius:6px;
  background:#fff; color:var(--ink); transition:border-color .15s,box-shadow .15s;
}
form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
form input::placeholder{color:#aab0c0}
button[type=submit]{
  display:block; width:100%; margin-top:1.5rem; padding:.8rem; font-size:1rem;
  font-weight:600; font-family:var(--font-mono); letter-spacing:.03em; color:#fff;
  background:var(--ink); border:none; border-radius:6px; cursor:pointer; transition:background .15s;
}
button[type=submit]:hover{background:#000}
button[type=submit]:disabled{background:#8a90a2;cursor:wait}
.form-note{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:.7rem;text-align:center;line-height:1.5}
.alt-cta{text-align:center;margin-top:1.1rem;font-size:1rem;color:var(--muted)}
.alt-cta a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.alt-cta a:hover{color:var(--plum)}
#form-success{padding:1.5rem 0}
#form-success p{font-size:1.1rem;color:var(--ink)}

/* ---- footer ---- */
footer{
  max-width:var(--stage); margin:2rem auto 2.5rem; padding:1.5rem 2rem 0;
  border-top:1px solid var(--rule); display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
footer a{color:var(--blue);text-decoration:none}
footer a:hover{color:var(--plum)}

/* ---- responsive ---- */
@media (max-width:760px){
  main{padding:2.2rem 1.3rem 2.6rem;overflow-x:hidden}
  .block{grid-template-columns:minmax(0,1fr);gap:.55rem;margin-bottom:2rem}
  .gutter{text-align:left;padding-top:0}
  .gutter .note,.head-note{display:none}
  h1.head{font-size:2.05rem}
  .offer{font-size:1.18rem}
  .vs-results{min-height:0}
  .vs-thumb{width:72px;height:41px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .vs-caret{animation:none}
  .vs-item{animation:none;opacity:1;transform:none}
  mark{animation:none;background-size:100% 100%}
}