/* Chosen design: Version A (The Drafting Archive) with Version B's systems map as one section.
   Loaded after a.css. Same brand: #2B3D65 paper, white ink, #A2DBE1 accent, and their tints. */

/* ── The systems map, as a section between the opening and the tracing sheets ── */
.v-ab .map-panel { padding: 40px 5vw 90px; }
.v-ab .map-intro { max-width: 1240px; margin: 0 auto 18px; }
.v-ab .map-intro h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 4px 0 6px; }
.v-ab .map-frame { position: relative; max-width: 1400px; margin: 0 auto; height: min(78vh, 760px); min-height: 520px;
  background: rgba(43,61,101,0.92); box-shadow: 0 30px 80px rgba(10,16,30,0.55); overflow: hidden; }
.v-ab .map { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-ab .map .ticks line { stroke: rgba(255,255,255,.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-ab .map .coord { fill: rgba(255,255,255,.4); font: 12px var(--mono); letter-spacing: .1em; }
.v-ab .map .ring { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.v-ab .map .ring.thin { stroke: rgba(255,255,255,.3); stroke-width: .8; }
.v-ab .map .link { fill: none; stroke: rgba(255,255,255,.22); stroke-width: .8; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke;
  transition: stroke .5s var(--ease), opacity .5s var(--ease), stroke-width .5s var(--ease); animation: flow 24s linear infinite; }
.v-ab .map .link.strong { stroke: rgba(162,219,225,.6); stroke-width: 1.2; stroke-dasharray: 8 6; }
.v-ab .map.focusing .link { opacity: .1; }
.v-ab .map.focusing .link.on { opacity: 1; stroke: var(--aqua); stroke-width: 1.8; }
.v-ab .map .dot { fill: var(--ink); }
.v-ab .map .halo { fill: none; stroke: var(--aqua); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.v-ab .map.focusing .nd { opacity: .25; transition: opacity .5s var(--ease); }
.v-ab .map.focusing .nd.on, .v-ab .map.focusing .nd.near { opacity: 1; }
.v-ab .map .nd.on .dot { fill: var(--aqua); }
.v-ab .map .nd { cursor: pointer; }
@keyframes flow { to { stroke-dashoffset: -400; } }
.v-ab .map-labels { position: absolute; inset: 0; }
.v-ab .map-node { position: absolute; transform: translate(-50%, 16px); font-family: var(--mono); font-size: 12px; line-height: 1.3; letter-spacing: .04em;
  color: var(--ink); background: rgba(24,35,61,.86); border: 1px solid rgba(255,255,255,.4); padding: 5px 8px; max-width: 170px; text-align: center; cursor: pointer;
  transition: opacity .4s var(--ease), background .3s, color .3s; }
.v-ab.node-focus .map-node { opacity: .3; }
.v-ab.node-focus .map-node.on, .v-ab.node-focus .map-node.near { opacity: 1; }
.v-ab .map-node.on, .v-ab .map-node:hover, .v-ab .map-node:focus-visible { background: var(--ink); color: var(--paper); }
.v-ab .map-marks .m2 { position: absolute; right: 22px; top: 18px; }
.v-ab .readout { position: absolute; left: 22px; top: 22px; width: 330px; background: rgba(24,35,61,.92); border: 1px solid rgba(255,255,255,.45); padding: 20px 22px; }
.v-ab .ro-title { font-size: 22px; line-height: 1.3; margin: 6px 0 10px; }
.v-ab .ro-text { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ── Full case study, on a tracing sheet ── */
.v-ab .cs-full { padding: 110px 5vw 0; }
.v-ab .cs-full .wrap { position: relative; max-width: 900px; margin: 0 auto; padding: 56px 56px 70px 92px;
  background: rgba(43,61,101,0.97); box-shadow: 0 30px 80px rgba(10,16,30,0.55);
  border: 1.5px solid rgba(255,255,255,0.75); outline: 1px solid rgba(255,255,255,0.28); outline-offset: -8px; }
.v-ab .cs-margin { position: absolute; left: 30px; top: 56px; bottom: 56px; display: flex; flex-direction: column; justify-content: space-between;
  writing-mode: vertical-rl; transform: rotate(180deg); }
.v-ab .cs-full .eyebrow { margin-bottom: 16px; }
.v-ab .cs-full h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.12; margin-bottom: 14px; }
.v-ab .cs-full .subtitle { font-style: italic; font-size: clamp(16px, 2.1vw, 20px); color: var(--aqua); margin-bottom: 40px; }
.v-ab .cs-full .spec-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.4); margin-bottom: 56px; }
.v-ab .cs-full .spec-cell { background: var(--paper-deep); padding: 16px 18px; }
.v-ab .cs-full .spec-label { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--aqua); margin-bottom: 6px; }
.v-ab .cs-full .spec-value { font-size: 14px; line-height: 1.5; }
.v-ab .cs-full h2 { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--aqua); margin: 60px 0 22px; display: flex; align-items: center; gap: 14px; }
.v-ab .cs-full h2::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.44); }
.v-ab .cs-full p.body { font-size: 17px; line-height: 1.8; margin-bottom: 18px; max-width: 68ch; }
.v-ab .cs-full p.body a { color: var(--aqua); }
.v-ab .cs-full .record { border: 1px dashed rgba(162,219,225,.8); background: var(--paper-deep); padding: 26px 28px 22px; margin: 30px 0 34px; position: relative; }
.v-ab .cs-full .record::before { content: attr(data-ref); position: absolute; top: -9px; left: 18px; background: var(--paper); padding: 0 10px;
  font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--aqua); }
.v-ab .cs-full .record p { font-size: 14.5px; line-height: 1.85; margin-bottom: 14px; }
.v-ab .cs-full .record .attr { font-size: 12px; color: var(--ink-soft); text-align: right; margin-top: 14px; }
.v-ab .cs-full .prompt-q { border-left: 2px solid var(--aqua); padding: 6px 0 6px 22px; margin: 26px 0; font-style: italic; font-size: 15px; line-height: 1.8; }
.v-ab .cs-full .prompt-q .q-label { display: block; font-style: normal; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--aqua); margin-bottom: 8px; }
.v-ab .cs-full .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 10px; }
.v-ab .cs-full .cta { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 13px 20px; border: 1px solid var(--ink); color: var(--ink); }
.v-ab .cs-full .cta.primary { background: var(--ink); color: var(--paper); }
.v-ab .cs-full .cta:hover, .v-ab .cs-full .cta:focus-visible { background: var(--aqua); border-color: var(--aqua); color: var(--paper); }
.v-ab .cs-full .cta-note { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.v-ab .cs-full .status-box { border: 1px dashed rgba(162,219,225,.8); background: var(--paper-deep); padding: 18px 22px; margin: 6px 0 36px; font-size: 13.5px; line-height: 1.8; }
.v-ab .cs-full .viewer { background: var(--paper-deep); border: 1px solid rgba(255,255,255,.44); margin: 26px 0 8px; padding: 22px 22px 18px; }
.v-ab .cs-full .viewer-frame { display: flex; align-items: center; justify-content: center; background: #23345A; min-height: 200px; overflow: hidden; }
.v-ab .cs-full .viewer-frame img { max-width: 100%; height: auto; display: block; }
.v-ab .cs-full .viewer-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 13px; color: var(--aqua); }
.v-ab .cs-full .viewer-btn { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font-family: var(--mono); font-size: 13px; padding: 9px 16px; cursor: pointer; }
.v-ab .cs-full .viewer-btn:hover, .v-ab .cs-full .viewer-btn:focus-visible { background: var(--aqua); border-color: var(--aqua); }
.v-ab .cs-full .viewer-caption { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 12px; }
.v-ab .cs-full .viewer-dots { display: flex; gap: 6px; }
.v-ab .cs-full .viewer-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; }
.v-ab .cs-full .viewer-dot.active { background: var(--aqua); }
.v-ab .cs-full .watermark-note { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--aqua); text-align: center; margin-top: 14px; }

/* ── Full glossary ── */
.v-ab .gl-list { max-width: 1100px; margin: 0 auto 40px; padding: 0 6vw; display: grid; gap: 16px; }
.v-ab .gl-list .term { background: rgba(43,61,101,0.97); border: 1px solid rgba(255,255,255,.45); padding: 26px 30px; scroll-margin-top: 100px;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.v-ab .gl-list .term:target { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(162,219,225,.35); }
.v-ab .gl-list .term h2 { font-size: 26px; margin-bottom: 8px; }
.v-ab .gl-list .term-plain { color: var(--aqua); font-size: 16px; margin-bottom: 10px; }
.v-ab .gl-list .term-body { font-size: 15px; color: var(--ink-soft); margin-bottom: 10px; max-width: 72ch; }
.v-ab .gl-list .term-source { text-transform: none; letter-spacing: .02em; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.6); border-top: 1px dashed rgba(255,255,255,.3); padding-top: 10px; }
.v-ab .gl-list .term-source .src-note { display: block; margin-top: 4px; }
.v-ab .first-screen.gl { min-height: 0; padding-bottom: 36px; }

/* ── Contact form ── */
.v-ab .contact { scroll-margin-top: 90px; }
.v-ab .contact-form { display: grid; gap: 14px; margin-top: 22px; }
.v-ab .contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v-ab .contact-form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua); }
.v-ab .contact-form input, .v-ab .contact-form textarea { font-family: var(--mono); font-size: 16px; color: var(--ink); background: var(--paper-night);
  border: 1px solid rgba(255,255,255,.4); padding: 11px 12px; text-transform: none; letter-spacing: 0; }
.v-ab .contact-form input:focus, .v-ab .contact-form textarea:focus { border-color: var(--aqua); outline: none; }
.v-ab .contact-form .btn { justify-self: start; }
.v-ab .form-note { text-transform: none; letter-spacing: .02em; color: var(--aqua); }

@media (max-width: 860px) {
  .v-ab .map-panel { padding: 20px 12px 60px; }
  .v-ab .map-frame { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .v-ab .map { position: relative; height: 52vh; }
  .v-ab .map-labels { display: none; }
  .v-ab .map-marks { display: none; }
  .v-ab .readout { position: relative; left: auto; top: auto; width: auto; margin: 0; border-width: 1px 0 0; }
  .v-ab .cs-full { padding: 130px 12px 0; }
  .v-ab .cs-full .wrap { padding: 32px 20px 40px 48px; }
  .v-ab .cs-margin { left: 16px; }
  .v-ab .gl-list { padding: 0 12px; }
  .v-ab .gl-list .term { padding: 20px; }
  .v-ab .contact-form .row { grid-template-columns: 1fr; }
}

/* Instructions must be readable, unlike decorative margin notes */
.v-ab .map-intro .annot { color: var(--ink-soft); }


/* Section labels inside the sheets are read, not decorative, so they need full contrast */
.v-ab .sheet .purpose .annot, .v-ab .node .q .annot, .v-ab .question .annot { color: var(--aqua); }


/* Spec boxes: no grey filler cell when the row is not full */
.v-ab .cs-full .spec-strip { background: var(--paper-deep); gap: 0; }
.v-ab .cs-full .spec-cell { box-shadow: 0 0 0 .5px rgba(255,255,255,.4); }


/* ── Case study as tracing sheets, matching the layer sheets on the main page ── */
.v-ab .cs-full { padding: 110px 0 0; }
.v-ab .cs-opening { padding: 0 5vw 70px; }
.v-ab .cs-open-sheet { box-shadow: 0 30px 80px rgba(10,16,30,0.55); }
.v-ab .cs-open-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 56px; align-items: center; }
.v-ab .cs-intro .spec-strip { margin-bottom: 0; }
.v-ab .cs-cover { position: relative; background: var(--paper-deep); padding: 30px 26px 18px; margin: 0; justify-self: center; max-width: 340px; }
.v-ab .cs-cover img { width: 100%; height: auto; display: block; }
.v-ab .cs-cover figcaption { margin-top: 10px; color: var(--ink-soft); }
.v-ab .cs-cover .reg { position: absolute; width: 18px; height: 18px; color: var(--ink-faint); }
.v-ab .cs-cover .reg:nth-of-type(1) { top: 6px; left: 6px; } .v-ab .cs-cover .reg:nth-of-type(2) { top: 6px; right: 6px; }
.v-ab .cs-cover .reg:nth-of-type(3) { bottom: 6px; left: 6px; } .v-ab .cs-cover .reg:nth-of-type(4) { bottom: 6px; right: 6px; }
.v-ab .cs-sheet .sheet-inner { padding-top: 44px; padding-bottom: 48px; }
.v-ab .cs-sheet-body { max-width: 860px; }
.v-ab .cs-full .cs-sheet h2 { display: block; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: .03em; text-transform: none; color: var(--ink); margin: 0 0 26px; line-height: 1.2; }
.v-ab .cs-full .cs-sheet h2::after { content: none; }
.v-ab .cs-full .cs-sheet h2::before { content: "Section"; display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--aqua); margin-bottom: 8px; }
@media (max-width: 860px) {
  .v-ab .cs-full { padding-top: 130px; }
  .v-ab .cs-opening { padding: 0 12px 30px; }
  .v-ab .cs-open-grid { grid-template-columns: 1fr; gap: 28px; }
  .v-ab .cs-cover { max-width: 260px; }
  .v-ab .cs-sheet .sheet-inner { padding: 28px 18px 28px 50px; }
}

/* Sheets are fully solid, so nothing beneath shows through */
.v-ab .sheet-inner { background: var(--paper); }


/* ── Information pages (introduction, manual, about the ENM, about the developer) ── */
.v-ab .info-page .lede-sub { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: -26px; margin-bottom: 26px; }
.v-ab .info-page .cs-sheet-body p { font-size: 17px; line-height: 1.8; margin-bottom: 16px; max-width: 68ch; }
.v-ab .info-page .cs-sheet-body em { color: var(--aqua); }
.v-ab .info-page .cs-sheet-body a { display: block; text-decoration: none; border: 1px dashed rgba(255,255,255,.4); padding: 16px 18px; margin-bottom: 12px; background: var(--paper-deep); }
.v-ab .info-page .cs-sheet-body a:hover, .v-ab .info-page .cs-sheet-body a:focus-visible { border-color: var(--aqua); }
.v-ab .info-page .cs-sheet-body a p { font-size: 14px; margin-bottom: 6px; }
.v-ab .info-lens { display: flex; align-items: center; padding: 34px 22px; min-width: 300px; }
.v-ab .info-lens .lens { width: 100%; color: var(--ink); } .v-ab .info-lens .lens .thin { stroke-width: .7; opacity: .7; } .v-ab .info-lens .lens .aqua { stroke: var(--aqua); }
.v-ab .layer-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 8px; }
.v-ab .layer-card { background: var(--paper-deep); border: 1px solid rgba(255,255,255,.4); padding: 16px; }
.v-ab .layer-card h3 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); margin-bottom: 8px; }
.v-ab .layer-card p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.v-ab .steps { list-style: none; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.3); }
.v-ab .steps .step { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px dashed rgba(255,255,255,.3); }
.v-ab .steps .step-mark { font-size: 30px; line-height: 1; color: var(--aqua); }
.v-ab .steps h3 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.v-ab .steps p { font-size: 16px !important; margin: 0 !important; color: var(--ink-soft); }

/* Header with eight menu items */
.v-ab .site-head { gap: 18px; }
.v-ab .site-nav { gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.v-ab .site-nav a { font-size: 11px; letter-spacing: .12em; }
@media (max-width: 1200px) and (min-width: 861px) {
  .v-ab .site-head { flex-wrap: wrap; }
  .v-ab .site-nav { order: 3; width: 100%; justify-content: flex-start; margin: 0; }
  .v-ab .view-switch { margin-left: auto; }
  .v-ab .cs-full, .v-ab .first-screen { padding-top: 140px; }
}
@media (max-width: 860px) {
  .v-ab .site-nav { flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; padding-bottom: 4px; }
  .v-ab .layer-cards { grid-template-columns: 1fr; }
  .v-ab .info-lens { min-width: 0; max-width: 300px; }
  .v-ab .steps .step { grid-template-columns: 46px 1fr; gap: 12px; }
}

/* ── "About" menu grouping the four reading pages ── */
.v-ab .site-nav { flex-wrap: nowrap; align-items: center; gap: 22px; }
.v-ab .site-nav a, .v-ab .nav-menu-btn { font-size: 12px; letter-spacing: .16em; }
.v-ab .nav-menu { position: relative; }
.v-ab .nav-menu-btn { font-family: var(--mono); text-transform: uppercase; color: var(--ink-soft); background: none; border: 0;
  border-bottom: 1px solid transparent; padding: 4px 0; cursor: pointer; }
.v-ab .nav-menu-btn:hover, .v-ab .nav-menu-btn.current, .v-ab .nav-menu.open .nav-menu-btn { color: var(--ink); border-color: var(--aqua); }
.v-ab .nav-sub { list-style: none; position: absolute; top: calc(100% + 14px); left: -18px; min-width: 250px; z-index: 60;
  background: var(--paper-deep); border: 1.5px solid rgba(255,255,255,.75); outline: 1px solid rgba(255,255,255,.28); outline-offset: -7px;
  padding: 12px 8px; display: none; box-shadow: 0 20px 50px rgba(10,16,30,.6); }
.v-ab .nav-menu.open .nav-sub { display: block; }
.v-ab .nav-sub a { display: block; padding: 10px 12px; border: 0; white-space: nowrap; }
.v-ab .nav-sub a:hover, .v-ab .nav-sub a:focus-visible, .v-ab .nav-sub a[aria-current] { background: rgba(162,219,225,.15); color: var(--ink); }
.v-ab .nav-sub a[aria-current]::before { content: "\25B8  "; color: var(--aqua); }
@media (max-width: 1200px) and (min-width: 861px) {
  .v-ab .site-head { flex-wrap: nowrap; }
  .v-ab .site-nav { order: 0; width: auto; margin-left: auto; justify-content: flex-end; }
  .v-ab .cs-full, .v-ab .first-screen { padding-top: 110px; }
}
@media (max-width: 860px) {
  .v-ab .site-nav { overflow: visible; gap: 16px; flex-wrap: wrap; }
  .v-ab .site-nav a, .v-ab .nav-menu-btn { font-size: 11px; letter-spacing: .12em; }
  .v-ab .nav-sub { position: fixed; left: 12px; right: 12px; top: 96px; min-width: 0; }
}

@media (max-width: 860px) {
  .v-ab .site-nav { flex-wrap: nowrap; gap: 14px; overflow-x: auto; }
  .v-ab .site-nav a, .v-ab .nav-menu-btn { font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; }
}


@media (max-width: 860px) {
  .v-ab .site-head { row-gap: 8px; }
  .v-ab .brand img { height: 10px; }
  .v-ab .view-switch a, .v-ab .view-switch span { padding: 6px 8px; font-size: 10px; letter-spacing: .1em; }
  .v-ab .cs-full, .v-ab .first-screen { padding-top: 110px; }
}


@media (max-width: 860px) {
  .v-ab .site-nav { gap: 12px; }
  .v-ab .site-nav a, .v-ab .nav-menu-btn { font-size: 11px; letter-spacing: .06em; }
  .v-ab .view-switch a, .v-ab .view-switch span { font-size: 11px; letter-spacing: .06em; padding: 6px 7px; }
}


@media (max-width: 860px) { .v-ab .map { height: 58vw; min-height: 220px; } .v-ab .map .ticks { display: none; } }