/* REIMAGINED: the site as an album.
   A track-list rail instead of a top menu, big numbered section titles, portfolio as film strips you slide sideways,
   the brand wall as an arcade character-select screen, and the whole page tinted by whatever music is playing
   (--vz-a is set live by js/visualizer.js). Same content, same player, same visualizer, same game.
   Loaded only by reimagined.html; index.html never sees this file. */
html.re{--rail:88px;--acc:var(--vz-a,#6f86a8)}

/* ---- the page breathes in the colour of the music ---- */
html.re body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70vw 70vh at 88% 8%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%),radial-gradient(60vw 60vh at 6% 96%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 70%);transition:opacity 1.2s}
html.re ::selection{background:var(--acc);color:#050505}

/* ---- section titles: large, left, numbered like tracks ---- */
html.re main{counter-reset:trk 1}
html.re main>section[id]{counter-increment:trk}
html.re main h2.lbl{font:300 clamp(44px,7.4vw,124px)/.95 var(--serif)!important;letter-spacing:-.025em!important;text-transform:none!important;color:var(--fg)!important;text-align:left!important;margin:0 0 clamp(34px,4.5vw,72px)!important;display:block;width:100%}
html.re main h2.lbl::before{content:"0" counter(trk);display:block;font:300 11px/1 var(--sans);letter-spacing:.34em;color:var(--acc);margin:0 0 18px;transition:color 1s}
html.re main .nl h2.lbl{font-size:clamp(30px,3.6vw,54px)!important;margin-bottom:18px!important}
html.re main .nl h2.lbl::before{content:none}
html.re #about h2.lbl,html.re #portfolio h2.lbl{display:block!important}
html.re #portfolio h2.lbl{grid-column:1/-1}
html.re main h3.lbl.sub{text-align:left!important;color:var(--fg)!important;opacity:.8;display:flex;align-items:center;gap:16px}
html.re main h3.lbl.sub::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- hero: the line gets the whole stage ---- */
html.re .hero h1{font-size:clamp(46px,9.2vw,168px)!important;letter-spacing:-.035em;line-height:.92}
html.re .hero h1::after{content:"";display:block;width:clamp(60px,9vw,150px);height:2px;margin-top:clamp(18px,2.4vw,34px);background:var(--acc);transition:background 1s}

/* ---- portfolio: film strips (desktop; phones keep their one-screen-per-page portfolio) ---- */
.re-strip-nav{display:none}
@media (min-width:901px){
html.re #portfolio [data-cards][data-cards],html.re #portfolio .v2-port .v2-grid [data-cards],html.re #portfolio [data-ads][data-ads],html.re #portfolio .v2-port .v2-grid [data-ads]{display:flex!important;gap:clamp(12px,1.5vw,22px)!important;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 0 10px}
html.re #portfolio .cards::-webkit-scrollbar,html.re #portfolio .ads::-webkit-scrollbar{display:none}
html.re #portfolio .cards>*,html.re #portfolio .ads>*{flex:0 0 clamp(250px,31vw,470px);scroll-snap-align:start;display:block!important}
html.re #portfolio .pf .th{transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
@media (hover:hover){html.re #portfolio .pf:hover .th{transform:translateY(-6px);box-shadow:0 22px 50px -18px color-mix(in srgb,var(--acc) 70%,transparent)}}
html.re #portfolio .pf b{font:300 clamp(15px,1.3vw,19px)/1.3 var(--serif)!important;color:var(--fg)!important;margin-top:12px;display:block}
html.re .more-mob{display:none!important}
html.re #portfolio .re-strip-nav{position:sticky;right:0;z-index:3;flex:0 0 auto!important;display:flex!important;align-items:center;gap:8px;align-self:stretch;margin-left:-150px;padding:0 4px 0 64px;background:linear-gradient(90deg,transparent,rgba(5,5,5,.92) 60%);scroll-snap-align:none;pointer-events:none}
html.re .re-strip-nav button{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,239,233,.35);background:rgba(5,5,5,.6);color:var(--fg);cursor:pointer;font:300 16px/1 var(--sans);transition:border-color .3s,background .3s,color .3s}
html.re .re-strip-nav button:hover{border-color:var(--fg);background:var(--fg);color:#050505}
@media (hover:none){html.re #portfolio .re-strip-nav{display:none!important}}
}
@media (max-width:900px){html.re #about h2.lbl,html.re #portfolio h2.lbl{display:none!important}}

/* ---- credits: names as a quiet marquee wall, brands as the arcade ---- */
html.re #credits .row{justify-items:stretch!important;text-align:left}
html.re #credits .row>h3.lbl{text-align:left!important}
html.re #credits .names{display:flex!important;flex-wrap:wrap;gap:6px 0!important;font:300 clamp(20px,2.5vw,38px)/1.25 var(--serif)!important}
html.re #credits .names li{display:flex;align-items:center}
html.re #credits .names li:not(:last-child)::after{content:"/";color:var(--acc);opacity:.7;margin:0 .5em;font-size:.6em;transition:color 1s}
html.re #credits .names .art{font:inherit!important;color:var(--fg);opacity:.72;transition:opacity .3s}
html.re #credits .names .art:hover{opacity:1}

html.re #credits .row:last-child{position:relative;margin-top:clamp(40px,5vw,72px);padding:clamp(22px,3vw,40px)!important;border:2px solid #EEF3EF!important;background:#000;box-shadow:0 0 0 6px #000,0 0 0 8px rgba(238,243,239,.25),0 0 60px -10px color-mix(in srgb,var(--acc) 60%,transparent);image-rendering:pixelated}
html.re #credits .row:last-child>h3.lbl{font:clamp(11px,1.5vw,18px)/1.6 "Press Start 2P",monospace!important;letter-spacing:.04em!important;color:#EEF3EF!important;text-align:center!important;margin:0 0 6px!important;font-size:0!important}
html.re #credits .row:last-child>h3.lbl::before{content:"CHOOSE YOUR BRAND";display:block;font:clamp(13px,1.9vw,24px)/1.5 "Press Start 2P",monospace;color:#EEF3EF;text-shadow:0 0 14px rgba(220,255,236,.55)}
html.re #credits .pong-hint{display:block;margin:10px 0 0!important;font-size:clamp(7px,.8vw,10px)!important}
html.re #credits .logos{gap:10px!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;margin-top:18px}
html.re #credits .lg2{height:auto;aspect-ratio:16/10;border:2px solid rgba(238,243,239,.16);background:#070707;padding:10px;transition:border-color .12s steps(2),background .12s steps(2),transform .12s steps(2)}
html.re #credits .lg2::after{content:"1P";position:absolute;top:-2px;left:-2px;font:8px/1 "Press Start 2P",monospace;background:#ffe600;color:#000;padding:4px 5px;opacity:0}
html.re #credits .lg2:hover,html.re #credits .lg2:focus-visible{border-color:#ffe600;background:#141200;transform:none!important;outline:0}
html.re #credits .lg2:hover::after,html.re #credits .lg2:focus-visible::after{opacity:1;animation:flBlink .5s steps(1) infinite}
@media (max-width:900px){html.re #credits .logos{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* ---- the rail (desktop): a track list down the left edge ---- */
.re-rail{display:none}
@media (min-width:901px){
  html.re #hdr{display:none!important}
  html.re main,html.re footer{padding-left:var(--rail)}
  html.re .hero{margin-left:calc(var(--rail) * -1)!important;width:calc(100% + var(--rail))!important;max-width:none!important}
  html.re .hero .in{left:calc(var(--rail) + var(--pad))!important}
  html.re .re-rail{display:flex;flex-direction:column;align-items:center;position:fixed;z-index:40;left:0;top:0;bottom:0;width:var(--rail);padding:26px 0 22px;border-right:1px solid var(--line);background:linear-gradient(90deg,rgba(5,5,5,.72),rgba(5,5,5,.35));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .re-rail .re-wm{writing-mode:vertical-rl;transform:rotate(180deg);font:300 12px/1 var(--sans);letter-spacing:.5em;color:var(--fg);text-decoration:none;white-space:nowrap}
  .re-rail ol{list-style:none;margin:auto 0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
  .re-rail li a{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 0;text-decoration:none;color:var(--fg);opacity:.45;transition:opacity .35s}
  .re-rail li a b{font:300 17px/1 var(--serif);font-style:italic}
  .re-rail li a span{font:300 8px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
  .re-rail li a::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;background:var(--acc);transform:translateY(-50%);transition:height .45s cubic-bezier(.2,.7,.2,1),background 1s}
  .re-rail li a:hover,.re-rail li a.here{opacity:1}
  .re-rail li a.here::before{height:100%}
  .re-rail .re-pong{font:8px/1.5 "Press Start 2P",monospace;color:#ffe9a8;background:none;border:2px solid rgba(255,233,168,.5);padding:8px 6px 6px;cursor:pointer;text-align:center;animation:flBlink 1.4s steps(1) infinite}
  .re-rail .re-pong:hover{background:#ffe9a8;color:#000;animation:none}
  html.vz-on .re-rail,html.pong-on .re-rail{opacity:0;pointer-events:none}
  .re-rail{transition:opacity .5s}
  html.re .fl-cue{right:var(--pad)}
}