/* Version A: The Drafting Archive. A draughtsman's archive at night, tracing paper over the grid. */
body.v-a { background-color: var(--paper-night); }
.v-a .hero { min-height: 100vh; padding: 120px 6vw 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.v-a .hero-annots .annot { position: absolute; opacity: 0; animation: fadeIn 1.6s var(--ease) 2.2s forwards; }
.v-a .hero-annots .tl { top: 88px; left: 28px; } .v-a .hero-annots .tr { top: 88px; right: 28px; }
.v-a .hero-annots .bl { bottom: 24px; left: 28px; } .v-a .hero-annots .br { bottom: 24px; right: 28px; }

/* The drawing sits on a sheet of tracing paper */
.v-a .hero-drawing { position: relative; width: min(640px, 90vw); padding: 34px 28px 26px; background: rgba(43,61,101,0.55);
  box-shadow: 0 30px 80px rgba(10,16,30,0.55); backdrop-filter: blur(2px); margin-bottom: 30px; }
.v-a .hero-drawing .reg { position: absolute; width: 22px; height: 22px; color: var(--ink-faint); }
.v-a .hero-drawing .reg:nth-of-type(1) { top: 10px; left: 10px; } .v-a .hero-drawing .reg:nth-of-type(2) { top: 10px; right: 10px; }
.v-a .hero-drawing .reg:nth-of-type(3) { bottom: 10px; left: 10px; } .v-a .hero-drawing .reg:nth-of-type(4) { bottom: 10px; right: 10px; }
.v-a .lens { width: 100%; height: auto; color: var(--ink); display: block; }
.v-a .lens .thin { stroke-width: .7; opacity: .7; } .v-a .lens .aqua { stroke: var(--aqua); }
/* Lines draw themselves, slowly, as if drafted in front of the visitor */
.v-a .lens .draw { stroke-dasharray: 700; stroke-dashoffset: 700; }
.v-a.drawn .lens .draw { animation: draw 3.2s var(--ease) forwards; }
.v-a.drawn .lens .ring.r1 .draw { animation-delay: .5s; } .v-a.drawn .lens .ring.r2 .draw { animation-delay: 1s; }
.v-a.drawn .lens .aqua { animation-delay: 1.8s; }
/* Dimension lines, like a measured drawing */
.v-a .dim { position: absolute; background: var(--ink-faint); }
.v-a .dim-w { left: 28px; right: 28px; bottom: -14px; height: 1px; transform: scaleX(0); transform-origin: left; animation: grow 1.6s var(--ease) 2.4s forwards; }
.v-a .dim-h { top: 34px; bottom: 26px; right: -14px; width: 1px; transform: scaleY(0); transform-origin: top; animation: growY 1.6s var(--ease) 2.6s forwards; }
.v-a .motto { opacity: 0; animation: fadeIn 1.2s var(--ease) 1.8s forwards; }
.v-a .tagline { font-size: clamp(22px, 3vw, 34px); line-height: 1.35; max-width: 26ch; margin: 14px auto 18px; opacity: 0; animation: rise 1.4s var(--ease) 2.2s forwards; }
.v-a .definition { max-width: 64ch; color: var(--ink-soft); font-size: 16px; opacity: 0; animation: rise 1.4s var(--ease) 2.6s forwards; }
.v-a .hero-routes { width: min(1180px, 100%); margin-top: 46px; text-align: left; opacity: 0; animation: rise 1.4s var(--ease) 3s forwards; }
.v-a .route { background: rgba(43,61,101,0.6); backdrop-filter: blur(2px); }

.v-a .note-strip { max-width: 820px; margin: 40px auto 80px; padding: 26px 30px; border-left: 2px solid var(--aqua); background: rgba(43,61,101,0.5); }
.v-a .note-strip p:last-child { font-size: 18px; margin-top: 6px; }

/* Sheets of tracing paper: each layer lies on its own sheet. Scrolling lifts one to reveal the next. */
.v-a .sheets { position: relative; padding: 0 5vw; }
.v-a .sheet { position: sticky; top: 84px; padding: 18px 0 40px; }
.v-a .sheet-inner { position: relative; padding: 40px 48px 40px 120px; background: rgba(43,61,101,0.97);
  box-shadow: 0 -24px 60px rgba(10,16,30,0.6); transform-origin: 50% 0; will-change: transform, opacity; }
.v-a .margin { position: absolute; left: 22px; top: 40px; bottom: 40px; display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-rl; transform: rotate(180deg); }
.v-a .sheet-head { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; margin-bottom: 34px; }
.v-a .sheet-head .lens.small .draw { stroke-dashoffset: 0; }
.v-a .sheet-head h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 4px 0 10px; }
.v-a .purpose { color: var(--ink-soft); max-width: 60ch; }
.v-a .sheet-nodes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--ink-faint); }
.v-a .sheet-nodes .node { padding: 22px 24px 10px 0; border-right: 1px dashed var(--ink-faint); margin-right: 24px; }
.v-a .sheet-nodes .node:last-child { border-right: 0; margin-right: 0; }
.v-a .question { max-width: 980px; margin: 120px auto 0; padding: 0 6vw; text-align: center; }
.v-a .question .big { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.45; margin-top: 12px; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow { to { transform: scaleX(1); } } @keyframes growY { to { transform: scaleY(1); } }

/* First screens: the page itself sits on a tracing sheet */
.v-a .first-screen .fs-text { background: rgba(43,61,101,0.82); box-shadow: 0 30px 80px rgba(10,16,30,0.55); position: relative; padding-left: 70px; }
.v-a .first-screen .fs-text::before { content: "Archive sheet \00B7  drawn by K. Salihy"; position: absolute; left: 22px; top: 28px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

@media (max-width: 860px) {
  .v-a .hero { padding: 140px 16px 50px; }
  .v-a .hero-annots { display: none; }
  .v-a .sheets { padding: 0 12px; }
  .v-a .sheet { position: relative; top: 0; }
  .v-a .sheet-inner { min-height: 0; padding: 26px 20px 20px 52px; }
  .v-a .margin { left: 14px; }
  .v-a .sheet-head { grid-template-columns: 1fr; gap: 14px; }
  .v-a .sheet-head .lens { max-width: 200px; }
  .v-a .sheet-nodes { grid-template-columns: 1fr; }
  .v-a .sheet-nodes .node { border-right: 0; margin-right: 0; border-bottom: 1px dashed var(--ink-faint); padding-right: 0; }
  .v-a .first-screen .fs-text { padding-left: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-a .lens .draw { stroke-dashoffset: 0; }
  .v-a .hero-annots .annot, .v-a .motto, .v-a .tagline, .v-a .definition, .v-a .hero-routes { opacity: 1; }
  .v-a .dim-w, .v-a .dim-h { transform: none; }
  .v-a .sheet { position: relative; top: 0; }
}