/* ============================================================
   Next-Gen Studio 2.3.0 "Made" (draft v6.0.8): the laptop hero,
   the column and the still archive, front page only. Every class is prefixed v6- so nothing here
   touches main.css (rule 95).
   ============================================================ */
@font-face{font-family:'V6 Anton';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/anton-latin.woff2) format('woff2')}
@font-face{font-family:'V6 Barlow';font-style:normal;font-weight:900;font-display:block;src:url(../fonts/barlow-condensed-latin.woff2) format('woff2')}

/* ---------- hero: the laptop ---------- */
.v6-hero{position:relative;padding-top:calc(var(--nav-h,64px) + 8px);padding-bottom:clamp(20px,3vw,44px);overflow:hidden}
@media (min-width:900px){.v6-hero{min-height:100vh;min-height:100svh}}
.v6-cam{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s}
.v6-cam.v6-ready{opacity:1}
.v6-cam canvas{position:absolute;inset:0}
.v6-stage{position:relative;z-index:1;--k:.54;--sh:1465;--fy0:-380;width:calc(2461.4px*var(--k));height:calc(var(--sh)*1px*var(--k));
  margin-left:calc((100% - 2461.4px*var(--k))/2);perspective:calc(2114px*var(--k));
  perspective-origin:calc(1230.7px*var(--k)) calc((597px - var(--fy0)*1px)*var(--k))}
.v6-subs{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none;filter:drop-shadow(0 calc(5px*var(--k)) calc(9px*var(--k)) rgba(6,25,46,.26))}
.v6-subs text{font-family:'V6 Anton',Impact,'Arial Narrow Bold',sans-serif}
.v6-wg{transform-box:fill-box;transform-origin:50% 78%}
.v6-js .v6-wg{opacity:0}
.v6-floor{position:absolute;z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(6,25,46,.34),rgba(6,25,46,.12) 55%,rgba(6,25,46,0))}
.v6-floor.v6-core{background:radial-gradient(closest-side,rgba(6,25,46,.55),rgba(6,25,46,.18) 60%,rgba(6,25,46,0))}
.v6-base{position:absolute;z-index:3;max-width:none;user-select:none;-webkit-user-drag:none}
.v6-lid{position:absolute;z-index:4;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(31.42deg)}
.v6-js .v6-hero:not(.v6-go) .v6-lid{transform:rotateX(-89.38deg)}
.v6-js .v6-go .v6-lid{animation:v6LidOpen 1.85s .25s both}
@keyframes v6LidOpen{
  0%{transform:rotateX(-89.38deg);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  9%{transform:rotateX(-85deg);animation-timing-function:cubic-bezier(.5,0,.25,1)}
  78%{transform:rotateX(34.2deg);animation-timing-function:cubic-bezier(.45,0,.4,1)}
  100%{transform:rotateX(31.42deg)}}
.v6-lid>div{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.v6-lid-front{inset:0;background:url(../img/laptop-lid.webp) center/100% 100% no-repeat;transform:translateZ(.01px);overflow:hidden;
  border-radius:calc(var(--rt)*1px) calc(var(--rt)*1px) calc(var(--rb)*1px) calc(var(--rb)*1px)}
.v6-scr-off,.v6-scr-glow{position:absolute;left:1.5%;top:2.4%;right:1.5%;bottom:1.6%;border-radius:.6% .6% 0 0/.9% .9% 0 0}
.v6-scr-off{background:linear-gradient(162deg,#1b2129 0%,#07090c 38%,#050608 100%);opacity:0}
.v6-js .v6-scr-off{opacity:1}
.v6-js .v6-go .v6-scr-off{animation:v6Wake .5s 1.37s cubic-bezier(.23,1,.32,1) forwards}
.v6-scr-glow{background:radial-gradient(120% 90% at 50% 40%,rgba(255,244,230,.5),rgba(255,244,230,0) 70%);opacity:0;mix-blend-mode:screen}
.v6-js .v6-go .v6-scr-glow{animation:v6Glow 1.1s 1.4s cubic-bezier(.23,1,.32,1) forwards}
@keyframes v6Wake{to{opacity:0}}
@keyframes v6Glow{0%{opacity:0}25%{opacity:.35}100%{opacity:0}}
.v6-glare{position:absolute;inset:0;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.14) 44%,rgba(255,255,255,.04) 50%,transparent 60%) 100% 0/260% 100% no-repeat;
  mix-blend-mode:screen;opacity:0}
.v6-js .v6-go .v6-glare{animation:v6Glare 1.9s .25s cubic-bezier(.77,0,.175,1) forwards}
@keyframes v6Glare{0%{background-position:100% 0;opacity:1}75%{opacity:.9}100%{background-position:0% 0;opacity:0}}
.v6-lid-back{inset:0;transform:translateZ(calc(var(--t)*-1px)) rotateY(180deg);
  border-radius:calc(var(--rt)*1px) calc(var(--rt)*1px) calc(var(--rb)*1px) calc(var(--rb)*1px);
  background:linear-gradient(180deg,#7d8189 0%,#5b5f66 18%,#474a50 55%,#3b3e43 100%)}
.v6-e-top{left:0;right:0;top:calc(var(--t)*-1px);height:calc(var(--t)*1px);transform-origin:50% 100%;transform:rotateX(90deg);border-radius:calc(var(--t)*.5px);
  background:linear-gradient(180deg,#9aa0a8 0%,#6a6e75 16%,#4a4d53 45%,#34373c 100%)}
.v6-e-l{left:calc(var(--t)*-1px);width:calc(var(--t)*1px);top:calc(var(--rt)*1px);bottom:0;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#3a3d42,#5a5e64)}
.v6-e-r{right:calc(var(--t)*-1px);width:calc(var(--t)*1px);top:calc(var(--rt)*1px);bottom:0;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(270deg,#3a3d42,#5a5e64)}
.v6-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the column ---------- */
.v6-col{position:relative;height:150vh;height:150svh}
.v6-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.v6-scene{position:absolute;inset:0;perspective:calc(var(--R)*2.35px);perspective-origin:50% 50%}
.v6-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.v6-ring{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.v6-card{position:absolute;transform-style:preserve-3d}
.v6-card>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;overflow:hidden}
.v6-card .v6-f{background:radial-gradient(120% 90% at 28% 18%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),linear-gradient(158deg,#A9C6DE 0%,#8DB2D2 55%,#7FA6C9 100%);box-shadow:inset 0 0 0 1px rgba(11,42,74,.14)}
.v6-card .v6-f::before{content:"";position:absolute;inset:7%;border:1px solid rgba(255,255,255,.28)}
.v6-card .v6-f i{position:absolute;width:12%;aspect-ratio:1;border-color:rgba(255,255,255,.85);border-style:solid;border-width:0}
.v6-card .v6-f i:nth-child(1){left:7%;top:7%;border-left-width:1.5px;border-top-width:1.5px}
.v6-card .v6-f i:nth-child(2){right:7%;top:7%;border-right-width:1.5px;border-top-width:1.5px}
.v6-card .v6-f i:nth-child(3){left:7%;bottom:7%;border-left-width:1.5px;border-bottom-width:1.5px}
.v6-card .v6-f i:nth-child(4){right:7%;bottom:7%;border-right-width:1.5px;border-bottom-width:1.5px}
.v6-card .v6-f b{position:absolute;left:11%;bottom:11%;font-family:'Plex Mono',ui-monospace,monospace;font-weight:500;font-size:var(--fs,10px);letter-spacing:.12em;color:rgba(255,255,255,.92);text-transform:uppercase;line-height:1.3}
.v6-card .v6-f em{position:absolute;right:11%;top:11%;font-style:normal;font-family:'Plex Mono',ui-monospace,monospace;font-size:var(--fs,10px);letter-spacing:.1em;color:rgba(11,42,74,.55)}
.v6-card>div::after{content:"";position:absolute;inset:0;background:#EEF1F4;opacity:var(--fog,0);pointer-events:none}
.v6-card .v6-b{transform:rotateY(180deg);background:#e7ecf1;box-shadow:inset 0 0 0 1px rgba(11,42,74,.10)}
.v6-card .v6-b span{position:absolute;left:10%;top:10%;right:10%;font-family:'Plex Mono',ui-monospace,monospace;font-size:var(--fs,10px);letter-spacing:.14em;text-transform:uppercase;color:rgba(11,42,74,.34);line-height:1.5}
.v6-cap{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translateZ(0);margin:0;font-family:'V6 Barlow','Arial Narrow',sans-serif;font-weight:900;color:var(--ink,#0B2A4A);
  text-transform:uppercase;line-height:1;white-space:nowrap;pointer-events:none;letter-spacing:0;font-variation-settings:normal}
.v6-ln{display:block;width:max-content;transform-origin:0 0;letter-spacing:-.02em}
.v6-ln+.v6-ln{margin-top:var(--lg,10px)}
.v6-w{display:inline-block;visibility:hidden}
.v6-w.v6-in{visibility:visible;animation:v6Streak .2s cubic-bezier(.23,1,.32,1) both}
@keyframes v6Streak{
  0%{transform:translateY(.42em);opacity:.45;
     text-shadow:0 .2em 0 rgba(11,42,74,.55),0 .4em 0 rgba(11,42,74,.30),0 .6em 0 rgba(11,42,74,.17),0 .8em 0 rgba(11,42,74,.09),0 1em 0 rgba(11,42,74,.05),0 1.2em 0 rgba(11,42,74,.03),0 1.4em 0 rgba(11,42,74,.015)}
  100%{transform:none;opacity:1;
     text-shadow:0 0 0 rgba(11,42,74,0),0 0 0 rgba(11,42,74,0),0 0 0 rgba(11,42,74,0),0 0 0 rgba(11,42,74,0),0 0 0 rgba(11,42,74,0),0 0 0 rgba(11,42,74,0),0 0 0 rgba(11,42,74,0)}}
.v6-top{position:absolute;left:var(--gut);top:calc(var(--nav-h,64px) + 20px);z-index:5}
.v6-meta{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(18px,3vh,34px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;z-index:5;pointer-events:none}
.v6-note{max-width:34ch;font-size:13px;line-height:1.5;color:var(--ink-2,#154C7C);margin:0}
.v6-prog{display:flex;align-items:center;gap:12px;font-family:'Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3,#3E7CB1)}
.v6-bar{width:120px;height:2px;background:var(--line,rgba(11,42,74,.16));position:relative;overflow:hidden}
.v6-bar i{position:absolute;inset:0;background:var(--ink,#0B2A4A);transform-origin:left;transform:scaleX(0)}
@media (max-width:700px){.v6-note{display:none}}

@media (prefers-reduced-motion:reduce){
  .v6-js .v6-hero .v6-lid,.v6-js .v6-go .v6-lid{animation:none;transform:rotateX(31.42deg)}
  .v6-js .v6-hero .v6-scr-off,.v6-js .v6-hero .v6-glare,.v6-js .v6-hero .v6-scr-glow{animation:none;opacity:0}
  .v6-js .v6-wg{opacity:1}
  .v6-col{height:auto}
  .v6-pin{position:relative;height:auto;min-height:min(100vh,900px)}
  .v6-w{visibility:visible}
  .v6-w.v6-in{animation:none}
}

/* ---------- v6.0.3: The process stands still ----------
   The section no longer pins for 330vh and scrubs the film. It is one screen tall,
   the film loops behind it, and the archive block sits on the loop as it did at the
   end of the old scroll. The process words, step row, side label and bar are retired. */
#h-wash .dev-ui,#h-wash .dev-side,#h-wash .dev-bar{display:none}
@media (min-width:921px){
  #h-wash.dev-wrap{height:auto}
  #h-wash .dev-pin{position:relative;top:auto;height:100vh;height:100svh;min-height:680px}
  #h-wash .veil2{opacity:var(--v6-veil,.8)!important}
}

/* ---------- 2.3.0 additions to the approved draft ---------- */
/* phones get the lid photograph at half size; ngd_made_head() preloads the same file at the same width */
@media (max-width:900px){.v6-lid-front{background-image:url(../img/laptop-lid-1280.webp)}}
/* with no note beside it (no photographs listed) the counter keeps its place on the right */
@media (min-width:701px){.v6-meta.v6-solo{justify-content:flex-end}}
/* photograph plates: the theme's cyanotype print (grey luminosity over the blue) with the colour
   frame over it at --wash, which made.js raises as the plate turns to face you */
.v6-card .v6-f.v6-ph{isolation:isolate}
.v6-f.v6-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.v6-f.v6-ph>img.v6-neg{filter:grayscale(1) contrast(1.08) brightness(1.02);mix-blend-mode:luminosity;opacity:.92}
.v6-f.v6-ph>img.v6-pos{opacity:var(--wash,0)}
.v6-card .v6-f.v6-ph::before{z-index:1;border-color:rgba(255,255,255,.22)}
.v6-card .v6-f.v6-ph i,.v6-card .v6-f.v6-ph b,.v6-card .v6-f.v6-ph em{z-index:1}
.v6-card .v6-f.v6-ph::after{z-index:2}
.v6-card .v6-f.v6-ph i{border-color:rgba(255,255,255,.7)}
.v6-card .v6-f.v6-ph b{text-shadow:0 1px 3px rgba(6,25,46,.55)}
.v6-card .v6-f.v6-ph em{color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(6,25,46,.5)}
@media (prefers-reduced-motion:reduce){.v6-f.v6-ph>img.v6-pos{opacity:1}}
/* without JavaScript the caption is plain text in the h2: let it wrap and give it a size */
html:not(.v6-js) .v6-cap{white-space:normal;width:min(84vw,900px);text-align:center;font-size:clamp(34px,6.4vw,84px);line-height:.92}
/* the label and the note stay above the turning plates: the scene is a 3D context, so it gets an explicit layer below them */
.v6-scene{z-index:1}
.v6-top,.v6-meta{z-index:6;transform:translateZ(0)}
/* on a phone the plates are small: the photograph keeps its frame number, the ratio label goes */
@media (max-width:700px){.v6-card .v6-f.v6-ph em{display:none}.v6-card .v6-f.v6-ph b{opacity:.85}}