/* Towards Night 2.0 / the Vitruvian era (WO-0-0-site-2.0, 2026-10-18). Layer on site.css + v3.css.
   Art direction: "analog objects, projected by a futuristic machine" (docs/towards-night-2.0/ART-DIRECTION-HOLODECK-HIPHOP.md):
   da Vinci ink geometry in gold, projected as light on a holodeck grid. Lane colours come from the Vitruvian TN art itself. */
:root{--gold:#e8c45a;--gold-dim:rgba(232,196,90,.5)}
.lane-mind{--lane:#ff4a4a}.lane-heart{--lane:#ffc23d}.lane-hands{--lane:#4fa8ff}.lane-body{--lane:#a8e6a0}.lane-feet{--lane:#ff8a2a}.lane-full{--lane:#a77bff}

/* holodeck floor: faint perspective grid under every page head */
.page-head::after{content:"";position:absolute;left:-20%;right:-20%;bottom:0;height:46%;pointer-events:none;z-index:0;
  background:linear-gradient(rgba(232,196,90,.16) 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,rgba(232,196,90,.16) 1px,transparent 1px) 0 0/48px 100%;
  transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%)}
.page-head .wrap{z-index:1}
.page-head .kick{color:var(--gold)}
.page-head .kick::before{background:var(--gold)}

/* home hero: the Vitruvian frame + the six lane icons from the art */
.era-hero{min-height:min(100svh,980px);display:flex;align-items:center;
  background:radial-gradient(ellipse 55% 70% at 74% 42%,rgba(232,196,90,.10),transparent 70%),radial-gradient(ellipse 60% 80% at 82% 30%,rgba(192,24,47,.16),transparent 70%)}
.vit{position:absolute;z-index:0;width:min(92vw,640px);aspect-ratio:1;right:max(-4vw,calc(50vw - 660px));top:50%;transform:translateY(-46%)}
.vit-frame{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px rgba(232,196,90,.25))}
.vit-arc{transform-origin:200px 200px;animation:spin 48s linear infinite}
.vit-fig{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.vit-lanes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.vit-lanes li{position:absolute;width:21%;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translate(-50%,-50%);
  font:600 14px/1 var(--sans);letter-spacing:.16em;color:var(--ink);text-shadow:0 1px 8px rgba(6,6,11,.95)}
.vit-lanes img{width:100%;height:auto;animation:lanepulse 6s ease-in-out infinite}
.vl-mind{left:50%;top:6%}.vl-heart{left:90%;top:28%}.vl-hands{left:90%;top:72%}.vl-feet{left:50%;top:94%}.vl-body{left:10%;top:72%}.vl-full{left:10%;top:28%}
.vl-heart img{animation-delay:1s}.vl-hands img{animation-delay:2s}.vl-feet img{animation-delay:3s}.vl-body img{animation-delay:4s}.vl-full img{animation-delay:5s}
@keyframes lanepulse{0%,100%{opacity:.55;filter:none}12%{opacity:1;filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}30%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.vit-arc,.vit-lanes img{animation:none}.vit-lanes img{opacity:.9}}
.era-hero .h{text-shadow:0 2px 30px rgba(6,6,11,.85)}
.era-hero .lede{color:var(--ink);text-shadow:0 1px 14px rgba(6,6,11,.95)}
@media (max-width:820px){
  .era-hero{min-height:0;display:block;padding-top:calc(var(--banner-h) + var(--barh) + min(96vw,460px))}
  .vit{width:min(88vw,430px);left:50%;right:auto;top:calc(var(--banner-h) + var(--barh) + 12px);transform:translateX(-50%)}
  .vit-lanes li{font-size:14px;letter-spacing:.1em}
}

/* lanes with the art's icons */
.era-lanes li{position:relative;padding-top:16px;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--lane) 9%,var(--card)),var(--card) 60%)}
.era-lanes img{width:88px;height:auto;margin:0 0 6px -6px}
.sec-lanes .lede{margin-top:10px}
.sec-lanes .btns{margin-top:22px}

/* scanline sheen on cards: projected, not printed */
.v3-cards li,.era-lanes li{position:relative}
.v3-cards li::after,.era-lanes li::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(240,236,228,.025) 0 1px,transparent 1px 3px)}
.v3-cards li:hover{border-color:var(--gold-dim)}

/* Work with me / business inquiries (2026-10-19): email line + copy button + contact form */
.biz-types{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.biz-types li{font:600 14px/1 var(--sans);letter-spacing:.02em;padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.biz-mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:22px 0 0;padding:16px 18px;border-radius:12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--crimson)}
.biz-label{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.biz-addr{font:500 clamp(19px,2.4vw,24px)/1.2 var(--sans);color:var(--ink);text-decoration:none;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.biz-addr:hover{text-decoration:underline}
.biz-copy{margin-left:auto;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer}
.biz-copy:hover,.biz-copy.ok{background:var(--ink);color:var(--bg)}
.sec-biz .btns{margin-top:18px}
.biz-form{display:grid;gap:14px;margin-top:26px;max-width:720px}
.biz-or{margin:0;color:var(--dim);font-size:16px}
.biz-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.biz-form label{display:grid;gap:6px;font:600 14px/1.2 var(--sans);color:var(--ink)}
.biz-form input,.biz-form select,.biz-form textarea{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0e0e16;color:var(--ink);font:400 16px/1.4 var(--sans)}
.biz-form textarea{resize:vertical;min-height:130px}
.biz-form input:focus,.biz-form select:focus,.biz-form textarea:focus{outline:2px solid var(--crimson);outline-offset:1px;border-color:transparent}
.biz-form .btn{justify-self:start}
.biz-form .btn[disabled]{opacity:.6;cursor:progress}
.biz-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.biz-status{margin:0;min-height:1.4em;font-size:16px;color:var(--dim)}
.biz-status.err{color:var(--crimson-text)}
.biz-thanks{margin-top:26px;max-width:720px;padding:22px;border-radius:12px;background:var(--card);border:1px solid var(--line);border-left:4px solid #6fe3a5}
.biz-thanks h3{font:400 30px/1.05 var(--display);text-transform:uppercase;margin:0 0 8px}
.biz-thanks p{margin:0;color:var(--dim)}
.foot-biz{margin:4px 0 10px;font-size:15px;color:var(--dim)}
.foot-biz a{color:var(--ink)}

/* 2026-10-18 hero fix (eyes pass row 1): headline no longer sits on the Vitruvian diagram at
   desktop widths, and the buttons stay above the fold at 1366x900; below 1200px the diagram
   stacks above the text like on phone. Verified at 390-1920 by the eyes-pass harness. */
@media (min-width:1200px){.era-hero .wrap{width:100%}.era-hero .h{font-size:clamp(88px,8.2vw,150px);max-width:4.2em}.era-hero .lede{max-width:36ch}}
@media (min-width:821px) and (max-width:1199px){.era-hero{min-height:0;display:block;padding-top:calc(var(--banner-h) + var(--barh) + min(60vw,520px) + 72px)}.vit{width:min(60vw,520px);left:50%;right:auto;top:calc(var(--banner-h) + var(--barh) + 12px);transform:translateX(-50%)}.era-hero .h{font-size:clamp(72px,11vw,120px)}}
@media (max-width:820px){.era-hero{padding-top:calc(var(--banner-h) + var(--barh) + min(96vw,460px) + 28px)}}