/* Hallmark · macrostructure: Split Hero + Card Index · tone: warm institutional · anchor hue: orange #ff5a0a
 * pre-emit critique: P5 H5 E4 S4 R5 V4
 * 2026-09-04 UI pass — token system (hex baseline + OKLCH override), Fraunces/Figtree pairing, masthead nav
 * with segmented view switcher, CSS-art hero panel, card index, form/footer/modal polish, 320-768px verified.
 * Behaviour unchanged: same data-view handlers, same element ids, same promo modal, no new fixed-position
 * chrome (the site chatbot bubble keeps its corner).
 */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --vsp-font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --vsp-font-body:"Figtree","Segoe UI",Roboto,Arial,sans-serif;

  /* 4pt scale */
  --space-1:.25rem;  --space-2:.5rem;   --space-3:.75rem;  --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem;  --space-8:2rem;    --space-10:2.5rem;
  --space-12:3rem;   --space-14:3.5rem; --space-16:4rem;   --space-20:5rem;
  --space-24:6rem;

  --text-display:clamp(2.3rem, 1.45rem + 3.5vw, 4rem);
  --text-h1:clamp(1.85rem, 1.38rem + 2vw, 2.75rem);
  --text-h2:clamp(1.5rem, 1.22rem + 1.25vw, 2.05rem);
  --text-h3:1.0625rem;
  --text-lead:clamp(1rem, .95rem + .28vw, 1.15rem);
  --text-body:1rem;
  --text-sm:.875rem;
  --text-xs:.78rem;

  --radius-sm:.625rem; --radius-md:.875rem; --radius-lg:1.25rem; --radius-pill:999px;
  --rule:1px;

  --dur-fast:140ms; --dur:220ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* colour — hex baseline so nothing un-styles on pre-2023 browsers */
  --vsp-paper:#fffdfb;
  --vsp-paper-2:#faf6f1;
  --vsp-paper-3:#f2ebe2;
  --vsp-ink:#231d18;
  --vsp-ink-2:#4a423b;
  --vsp-muted:#6d635b;
  --vsp-line:#e8e1d8;
  --vsp-line-strong:#d6cbbd;
  --vsp-accent:#ff5a0a;
  --vsp-accent-press:#d84a00;
  --vsp-accent-soft:#fff1e7;
  --vsp-accent-ink:#a13800;
  --vsp-focus:#1f5fd0;
  --vsp-ok:#15803d;
  --vsp-err:#c2371f;
  --vsp-night:#211c18;
  --vsp-night-2:#332b25;
  --vsp-night-ink:#ede5db;
  --vsp-night-muted:#a89d92;
  --vsp-shadow-1:0 1px 2px rgba(35,29,24,.05),0 10px 28px rgba(35,29,24,.06);
  --vsp-shadow-2:0 2px 6px rgba(35,29,24,.07),0 22px 54px rgba(35,29,24,.10);
  --vsp-orange:var(--vsp-accent); /* legacy alias — older rules still reference it */
}
@supports (color:oklch(50% .1 40)){
  :root{
    --vsp-paper:oklch(99.3% .006 75);
    --vsp-paper-2:oklch(97.2% .011 72);
    --vsp-paper-3:oklch(94.2% .019 70);
    --vsp-ink:oklch(23% .017 55);
    --vsp-ink-2:oklch(38% .015 58);
    --vsp-muted:oklch(52% .015 60);
    --vsp-line:oklch(91% .013 72);
    --vsp-line-strong:oklch(84% .019 70);
    --vsp-accent:oklch(68.9% .204 41.4);
    --vsp-accent-press:oklch(59% .19 40);
    --vsp-accent-soft:oklch(96.5% .028 55);
    --vsp-accent-ink:oklch(50% .17 42);
    --vsp-focus:oklch(48% .17 258);
    --vsp-ok:oklch(52% .13 150);
    --vsp-err:oklch(52% .17 30);
    --vsp-night:oklch(22% .012 60);
    --vsp-night-2:oklch(30% .013 60);
    --vsp-night-ink:oklch(92% .011 75);
    --vsp-night-muted:oklch(72% .014 72);
  }
}

/* ── base ───────────────────────────────────────────────────────────────── */
.vsp-app{
  font-family:var(--vsp-font-body);
  font-size:var(--text-body);
  line-height:1.62;
  color:var(--vsp-ink);
  background:var(--vsp-paper);
  min-height:100vh;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.vsp-app *,.vsp-app *::before,.vsp-app *::after{box-sizing:border-box}
.vsp-app [hidden]{display:none!important}
.vsp-app img{max-width:100%}
.vsp-app h1,.vsp-app h2,.vsp-app h3{
  font-family:var(--vsp-font-display);
  font-style:normal;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--vsp-ink);
  margin:0;
  text-wrap:balance;
  overflow-wrap:anywhere;
  min-width:0;
}
.vsp-app p{margin:0}
.vsp-app button,.vsp-app a{cursor:pointer}
.vsp-app :focus-visible{
  outline:3px solid var(--vsp-focus);
  outline-offset:2px;
  border-radius:4px;
}

.vsp-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.vsp-section{padding:var(--space-16) 0}
.vsp-section-head{max-width:60ch;margin-bottom:var(--space-8)}
.vsp-section-head h1,.vsp-section-head h2{font-size:var(--text-h1)}
.vsp-section-head>p{
  margin-top:var(--space-3);
  font-size:var(--text-lead);
  color:var(--vsp-muted);
  max-width:56ch;
}
.vsp-band{background:var(--vsp-paper-2);border-block:var(--rule) solid var(--vsp-line)}

.vsp-eyebrow{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--vsp-accent-ink);
}
.vsp-badge{
  display:inline-block;
  padding:var(--space-2) var(--space-4);
  border:var(--rule) solid var(--vsp-line-strong);
  border-radius:var(--radius-pill);
  background:var(--vsp-accent-soft);
  color:var(--vsp-accent-ink);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ── buttons — 8 states ─────────────────────────────────────────────────── */
.vsp-app button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  margin:0;
  -webkit-appearance:none;
  appearance:none;
}
.vsp-app .primary,
.vsp-app .ghost,
.vsp-papers a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:48px;
  padding:var(--space-3) var(--space-6);
  border-radius:var(--radius-sm);
  font-family:var(--vsp-font-body);
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.2;
  text-decoration:none!important;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.vsp-app .primary,.vsp-papers a{
  border:var(--rule) solid var(--vsp-accent)!important;
  background:var(--vsp-accent)!important;
  color:#fff!important;
  box-shadow:0 1px 2px rgba(35,29,24,.10);
}
.vsp-app .primary:hover,.vsp-papers a:hover{
  background:var(--vsp-accent-press)!important;
  border-color:var(--vsp-accent-press)!important;
  color:#fff!important;
}
.vsp-app .primary:active,.vsp-papers a:active{transform:translateY(1px);box-shadow:none}
.vsp-app .primary[disabled],
.vsp-app .primary[aria-disabled="true"],
.vsp-papers a[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.vsp-papers a[aria-disabled="true"]{pointer-events:none}
.vsp-app .ghost{
  border:var(--rule) solid var(--vsp-line-strong)!important;
  background:var(--vsp-paper)!important;
  color:var(--vsp-ink)!important;
}
.vsp-app .ghost:hover{
  border-color:var(--vsp-accent)!important;
  background:var(--vsp-accent-soft)!important;
  color:var(--vsp-accent-ink)!important;
}
.vsp-app .ghost:active{transform:translateY(1px)}
.vsp-app .ghost[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.vsp-app .outline{
  border:var(--rule) solid var(--vsp-line-strong);
  background:var(--vsp-paper);
  border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-6);
  font-weight:700;
}
.vsp-app .link{
  border:0;
  background:none;
  padding:0;
  color:var(--vsp-accent-ink);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.vsp-app .link:hover{color:var(--vsp-accent)}

.vsp-cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* ── header + nav (N6 masthead · segmented switcher) ────────────────────── */
.vsp-header{
  background:rgba(255,253,251,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:var(--rule) solid var(--vsp-line);
  position:sticky;
  top:0;
  z-index:20;
}
body.admin-bar .vsp-header{top:32px}
.vsp-header-inner{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  padding-block:var(--space-3);
}
.vsp-nav{display:flex;align-items:center;gap:var(--space-6);min-width:0}
.vsp-nav-links{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-pill);
  background:var(--vsp-paper-2);
  min-width:0;
}
.vsp-app .vsp-nav-links button{
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-pill);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--vsp-ink-2);
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vsp-app .vsp-nav-links button:hover{color:var(--vsp-ink);background:rgba(255,255,255,.7)}
.vsp-app .vsp-nav-links button.active{
  background:var(--vsp-paper);
  color:var(--vsp-accent-ink);
  box-shadow:0 1px 2px rgba(35,29,24,.08);
}
.vsp-nav-actions{display:flex;align-items:center;gap:var(--space-2)}
.vsp-app .vsp-nav-actions .primary,
.vsp-app .vsp-nav-actions .ghost{min-height:44px;padding:var(--space-3) var(--space-5)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.vsp-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:var(--space-12);
  align-items:center;
  padding:var(--space-20) 0 var(--space-16);
}
.vsp-hero-body{min-width:0}
.vsp-hero h1{
  font-size:var(--text-display);
  margin:var(--space-6) 0 0;
  letter-spacing:-.028em;
}
.vsp-hero h1 span{
  display:block;
  margin-top:var(--space-2);
  font-size:.56em;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--vsp-accent-ink);
}
.vsp-hero .vsp-lead{
  margin-top:var(--space-5);
  max-width:48ch;
  font-size:var(--text-lead);
  color:var(--vsp-muted);
  line-height:1.7;
}
.vsp-hero-note{
  margin-top:var(--space-5);
  font-size:var(--text-sm);
  color:var(--vsp-muted);
}

/* Tier-A CSS art: stacked forecast papers on a warm desk horizon */
.vsp-hero-art{
  position:relative;
  min-height:392px;
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--vsp-paper-2) 62%,var(--vsp-paper-3) 62%);
  overflow:hidden;
}
.vsp-sheet{
  position:absolute;
  left:50%;
  top:50%;
  width:min(62%,248px);
  aspect-ratio:1/1.34;
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:var(--vsp-shadow-1);
}
.vsp-sheet-3{transform:translate(-50%,-54%) rotate(-9.5deg)}
.vsp-sheet-2{transform:translate(-50%,-52%) rotate(-4deg)}
.vsp-sheet-1{
  transform:translate(-50%,-50%) rotate(1.75deg);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-6) var(--space-5);
  box-shadow:var(--vsp-shadow-2);
}
.vsp-sheet-tab{
  display:block;
  width:72px;
  height:10px;
  margin-bottom:var(--space-2);
  border-radius:var(--radius-pill);
  background:var(--vsp-accent);
}
.vsp-sheet-1 i{display:block;height:8px;border-radius:var(--radius-pill);background:var(--vsp-line)}
.vsp-sheet-1 i:nth-of-type(2){width:84%}
.vsp-sheet-1 i:nth-of-type(4){width:66%}
.vsp-sheet-1 i:nth-of-type(5){width:44%;background:var(--vsp-accent-soft)}

/* ── paper card index ───────────────────────────────────────────────────── */
.vsp-papers{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));
  gap:var(--space-4);
}
.vsp-papers article{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:var(--space-6) var(--space-5);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-md);
  background:var(--vsp-paper);
  transition:transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.vsp-papers article:hover{
  transform:translateY(-3px);
  border-color:var(--vsp-line-strong);
  box-shadow:var(--vsp-shadow-1);
}
.vsp-papers .icon{
  width:48px;
  height:48px;
  border-radius:var(--radius-sm);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.01em;
}
.blue{background:#eaf1ff;color:#2f6fd0}
.pink{background:#ffe9ef;color:#c22a53}
.gold{background:#fff2d4;color:#a86a00}
.green{background:#e2f5e9;color:#137a3d}
.purple{background:#ece7fb;color:#5b3fb0}
.vsp-papers h3{font-size:var(--text-h3);margin:var(--space-5) 0 var(--space-1)}
.vsp-papers article>p{
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--vsp-muted);
}
.vsp-app .vsp-papers a{
  min-height:42px;
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-xs);
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}
/* ── video subject filter ─────────────────────────────────────────────── */
.vsp-filter{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-6)}
.vsp-app .vsp-filter button{
  min-height:40px;
  padding:var(--space-2) var(--space-4);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-pill);
  background:var(--vsp-paper);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--vsp-ink-2);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.vsp-app .vsp-filter button:hover{border-color:var(--vsp-line-strong);color:var(--vsp-ink)}
.vsp-app .vsp-filter button[aria-pressed="true"]{background:var(--vsp-accent-soft);border-color:var(--vsp-accent);color:var(--vsp-accent-ink)}
.vsp-filter{align-items:center}
.vsp-filter:has(+.vsp-filter){margin-bottom:var(--space-3)}
.vsp-filter-label{min-width:4.5rem;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vsp-muted)}

/* ── textbook chapters ─────────────────────────────────────────────────── */
.vsp-chapter-group+.vsp-chapter-group{margin-top:var(--space-12)}
.vsp-chapter-group h2{font-size:var(--text-h2);margin:0 0 var(--space-1)}
.vsp-group-meta{margin:0 0 var(--space-5);font-size:var(--text-sm);color:var(--vsp-muted)}
.vsp-textbook .vsp-filter+.vsp-filter{margin-bottom:var(--space-10)}
/* Form is the primary choice (solid); Subject chips stay soft and carry a chapter count */
.vsp-app .vsp-filter-form button[aria-pressed="true"]{background:var(--vsp-accent);border-color:var(--vsp-accent);color:#fff}
.vsp-app .vsp-filter .vsp-count{margin-left:var(--space-2);font-size:var(--text-xs);font-weight:700;opacity:.6}
.vsp-app .vsp-chapter-no{display:block;margin:var(--space-5) var(--space-2) 0;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vsp-accent-ink)}
.vsp-app .vsp-videos .vsp-chapter-no+h3{margin-top:var(--space-1)}
.vsp-empty{color:var(--vsp-muted)}

/* one button per PDF (Kertas 1, Kertas 2, Skema...) */
.vsp-paper-files{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-5)}

/* ── tips ───────────────────────────────────────────────────────────────── */
.vsp-tips{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));
  gap:var(--space-4);
}
.vsp-tips article{
  display:flex;
  gap:var(--space-5);
  align-items:flex-start;
  min-width:0;
  padding:var(--space-6);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-md);
  background:var(--vsp-paper);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.vsp-tips article:hover{transform:translateY(-2px);box-shadow:var(--vsp-shadow-1)}
.vsp-tips article>div{min-width:0}
.vsp-tip-mark{
  flex:0 0 auto;
  position:relative;
  width:40px;
  height:48px;
  border:2px solid var(--vsp-accent);
  border-radius:4px 4px var(--radius-sm) var(--radius-sm);
  background:var(--vsp-accent-soft);
}
.vsp-tip-mark::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:12px;
  height:2px;
  border-radius:2px;
  background:var(--vsp-accent);
  box-shadow:0 8px 0 var(--vsp-line-strong),0 16px 0 var(--vsp-line-strong);
}
.vsp-tips h3{font-size:var(--text-h3);margin:0 0 var(--space-2)}
.vsp-tips p{font-size:var(--text-sm);color:var(--vsp-muted);line-height:1.6}
/* whole card is the click target: the Read more button's ::after covers it */
.vsp-tips article{position:relative;cursor:pointer}
.vsp-app .vsp-tip-more{margin-top:var(--space-3);font-size:var(--text-sm)}
.vsp-app .vsp-tip-more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.vsp-tip-detail{max-width:70ch}
.vsp-tip-detail h1{font-size:var(--text-h1);margin:var(--space-6) 0 var(--space-4)}
.vsp-tip-detail h2{font-size:var(--text-h2);margin:var(--space-10) 0 var(--space-3)}
.vsp-tip-detail h3{font-size:var(--text-h3);margin:var(--space-6) 0 var(--space-2)}
.vsp-tip-detail ul,.vsp-tip-detail ol{padding-left:1.25em;margin:0 0 var(--space-4)}
.vsp-tip-detail li{margin:var(--space-1) 0;line-height:1.6}
.vsp-tip-detail p{line-height:1.7;margin:0 0 var(--space-4)}

/* ── login gate (logged-out view of papers / tips / videos) ────────────── */
.vsp-gate{
  max-width:34rem;
  padding:var(--space-8);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-md);
  background:var(--vsp-paper);
}
.vsp-gate p{margin:0;color:var(--vsp-muted)}
.vsp-gate .vsp-cta-row{margin-top:var(--space-5)}

/* ── auth + forms ───────────────────────────────────────────────────────── */
.vsp-auth{
  width:min(540px,calc(100% - 40px));
  margin:var(--space-16) auto;
  padding:var(--space-10);
  background:var(--vsp-paper);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--vsp-shadow-1);
}
.vsp-auth h1{font-size:var(--text-h2);text-align:center}
.vsp-auth>p{text-align:center;margin-top:var(--space-3);color:var(--vsp-muted)}
.vsp-auth form{display:grid;grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--space-8)}
.vsp-auth label{display:grid;gap:var(--space-2);font-size:var(--text-sm);font-weight:600}
.vsp-auth input,.vsp-auth select{
  width:100%;
  min-height:50px;
  padding:var(--space-3) var(--space-4);
  border:var(--rule) solid var(--vsp-line-strong);
  border-radius:var(--radius-sm);
  background:var(--vsp-paper);
  color:var(--vsp-ink);
  font:inherit;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.vsp-auth input::placeholder{color:var(--vsp-muted);opacity:1}
.vsp-auth input:hover,.vsp-auth select:hover{border-color:var(--vsp-muted)}
.vsp-auth input:focus-visible,.vsp-auth select:focus-visible{
  outline:none;
  border-color:var(--vsp-accent);
  box-shadow:0 0 0 3px var(--vsp-accent-soft);
}
.vsp-auth input[disabled],.vsp-auth select[disabled]{background:var(--vsp-paper-2);opacity:.7;cursor:not-allowed}
.vsp-auth input:user-invalid{border-color:var(--vsp-err)}
.vsp-auth form>button,.vsp-auth .vsp-message{grid-column:1/-1}
.vsp-auth form>button.primary{width:100%;min-height:52px;font-size:var(--text-body)}
.vsp-message{
  font-size:var(--text-sm);
  text-align:center;
  min-height:1.2em;
  color:var(--vsp-muted);
}
.vsp-message.ok{color:var(--vsp-ok);font-weight:600}
.vsp-message.error{color:var(--vsp-err);font-weight:600}
#vsp-verify input{text-align:center;font-size:1.6rem;letter-spacing:.5em;text-indent:.5em}

/* ── dashboard ──────────────────────────────────────────────────────────── */
.vsp-dashboard{background:var(--vsp-paper-2);border-block:var(--rule) solid var(--vsp-line);padding:var(--space-16) 0}
.vsp-welcome{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-5);
}
.vsp-welcome h1{font-size:var(--text-h1);margin:var(--space-2) 0 var(--space-2);overflow-wrap:anywhere;min-width:0}
.vsp-welcome p{color:var(--vsp-muted)}
.vsp-welcome>b{
  padding:var(--space-3) var(--space-6);
  background:var(--vsp-paper);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-pill);
  font-size:var(--text-sm);
  letter-spacing:.04em;
  white-space:nowrap;
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.vsp-app footer{background:var(--vsp-night);color:var(--vsp-night-ink);padding:var(--space-16) 0 var(--space-8)}
.vsp-footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-10);
  padding-bottom:var(--space-10);
  border-bottom:var(--rule) solid var(--vsp-night-2);
}
.vsp-footer-brand{display:flex;flex-direction:column;gap:var(--space-4);max-width:38ch}
.vsp-app footer p{margin:0;color:var(--vsp-night-muted)}
.vsp-footer-nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.vsp-app .vsp-footer-nav button{
  padding:var(--space-2) 0;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--vsp-night-muted);
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.vsp-app .vsp-footer-nav button:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.vsp-footer-base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--space-3);
  padding-top:var(--space-6);
  font-size:var(--text-sm);
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .vsp-nav{gap:var(--space-3)}
  .vsp-app .vsp-nav-links button{padding:var(--space-3) var(--space-3)}
}
@media(max-width:1000px){
  .vsp-hero{grid-template-columns:minmax(0,1fr);gap:var(--space-10);padding-top:var(--space-14)}
  .vsp-hero-art{min-height:320px;order:-1}
  .vsp-hero .vsp-lead{max-width:none}
}
/* two-row header from 1000px: six nav tabs no longer fit beside the logo */
@media(max-width:1000px){
  .vsp-header{position:static;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vsp-paper)}
  .vsp-header-inner{
    min-height:0;
    flex-wrap:wrap;
    gap:var(--space-3);
    padding-block:var(--space-4);
  }
  .vsp-nav{order:3;flex:1 0 100%;flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .vsp-nav-links{
    order:2;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .vsp-nav-links::-webkit-scrollbar{display:none}
  .vsp-app .vsp-nav-links button{flex:0 0 auto;scroll-snap-align:start;padding:var(--space-3) var(--space-4)}
  .vsp-nav-actions{order:1;justify-content:flex-start}
  .vsp-app .vsp-nav-actions .primary,
  .vsp-app .vsp-nav-actions .ghost{flex:1 1 auto;max-width:220px}
}
@media(max-width:860px){
  .vsp-section{padding:var(--space-12) 0}
  .vsp-auth{margin:var(--space-10) auto;padding:var(--space-8) var(--space-6)}
  .vsp-dashboard{padding:var(--space-12) 0}
}
@media(max-width:560px){
  .vsp-wrap{width:min(1180px,calc(100% - 32px))}
  .vsp-hero{padding:var(--space-10) 0 var(--space-12)}
  .vsp-hero-art{min-height:268px}
  .vsp-cta-row{gap:var(--space-2)}
  .vsp-cta-row .primary,.vsp-cta-row .ghost{flex:1 1 100%}
  .vsp-tips article{gap:var(--space-4);padding:var(--space-5)}
  .vsp-auth{width:calc(100% - 32px);padding:var(--space-6) var(--space-5)}
  .vsp-welcome>b{width:100%;text-align:center}
  .vsp-footer-top{gap:var(--space-8)}
  #vsp-verify input{font-size:1.3rem;letter-spacing:.35em}
}

@media(prefers-reduced-motion:reduce){
  .vsp-app *,.vsp-app *::before,.vsp-app *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .vsp-papers article:hover,.vsp-tips article:hover{transform:none}
}

/* Portal page wrapper: remove the theme content constraint without shifting the portal off-screen. */
body:has(#vsp-app) .wp-block-post-content{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
body:has(#vsp-app) .wp-block-post-title{display:none!important}
html:has(#vsp-app),body:has(#vsp-app){overflow-x:clip}
body:has(#vsp-app) footer.wp-block-template-part{display:none!important}
body:has(#vsp-app) header.wp-block-template-part{display:none!important}
body:has(#vsp-app) #vsp-app{max-width:none!important;width:100%!important}
/* The theme frames the (hidden) post title with 70px main margin + 70px group
   padding + a 19.2px block gap. The portal brings its own full-bleed header and
   footer, so that becomes 159px of dead space up top and 70px at the tail.
   Vertical only — the inline padding is what keeps narrow screens off the edge. */
body:has(#vsp-app) main.wp-block-group{margin-block:0!important}
body:has(#vsp-app) main > .wp-block-group{padding:0!important}
body:has(#vsp-app) .wp-block-post-content{margin-block:0!important}
/* papers with no subject term / no description leave an empty slot — collapse it */
.vsp-papers p:empty,.vsp-papers .paper-description:empty{display:none}