/* jeremyknox.dev Studio v2. Only the site's tokens (--paper --ink --muted --line --green --surface), the product --tab-color,
   plus Tape Architect's own violet #A78BFA and amber #F5B84C. Everything animated uses transform/opacity or canvas. */
@property --live{syntax:'<color>';inherits:true;initial-value:#77e5ed}
html{--live:var(--green);transition:--live .9s cubic-bezier(.16,1,.3,1)}
::selection{background:color-mix(in srgb,var(--live) 38%,transparent)}
.v2-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:10001;background:var(--live);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;box-shadow:0 0 12px var(--live)}

/* ---------- Tape Architect accents beyond the base palette ---------- */
.object-film i:nth-child(2){color:#c4b5fd}
.product-switcher [data-select=blueprint]{--tab-color:#4055d5}
[data-theme=dark] .product-switcher [data-select=blueprint]{--tab-color:#a6b8ff}

/* ---------- statuses ---------- */
.status-private::before{content:'';width:6px;height:6px;border-radius:50%;background:#A78BFA;box-shadow:0 0 0 3px #a78bfa33}
.status-alpha{color:var(--ink)!important;border-color:color-mix(in srgb,#efb899 55%,var(--line))!important}
.status-alpha::before{content:'';width:6px;height:6px;border-radius:50%;background:#efb899;box-shadow:0 0 0 3px #efb89955;transform:scale(var(--alpha-scale,1));opacity:var(--alpha-opacity,1)}
html[data-theme=light] .status-alpha::before{background:#9b543a}
.status-founding::before{content:'';width:8px;height:7px;background:#e2cca3;clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}
html[data-theme=light] .status-founding::before{background:#8b6b38}

/* ---------- Clarity: five seats (three named publicly + two quiet) ---------- */
.council-five{width:200px}
.council-five i{width:70px;height:70px}
.council-five i:nth-child(1){left:10px;top:6px}.council-five i:nth-child(2){left:120px;top:6px}.council-five i:nth-child(3){left:65px;top:0}
.council-five i:nth-child(4){left:30px;top:24px}.council-five i:nth-child(5){left:100px;top:24px}
.council-five i.seat-quiet{border-style:dashed;opacity:.5}
.council-five>span{left:93px;top:22px}
.perspective-buttons{flex-wrap:wrap}

/* ---------- scramble + wire (from v1) ---------- */
.mk-scr .c.s{font-family:ui-monospace,Menlo,monospace;font-style:normal;font-size:.62em;letter-spacing:0;opacity:.7;vertical-align:.18em}.mk-scr .c.w{visibility:hidden}
.mk-wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}.mk-wire path{fill:none;stroke-width:2;stroke-linecap:round}.mk-wire .track{opacity:.28}.mk-wire .head{filter:drop-shadow(0 0 5px currentColor)}
.mk-land{box-shadow:0 0 0 1px var(--mk-lc),0 0 26px color-mix(in srgb,var(--mk-lc) 30%,transparent)!important;transition:box-shadow .5s}

/* ---------- hero: the workbench assembles itself ---------- */
.v2-hero-row{display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"h1 stage" "aside stage";column-gap:24px;align-items:end}
.v2-hero-row h1{grid-area:h1;align-self:end}
.v2-hero-row .hero-aside{grid-area:aside;align-self:start;margin-top:22px}
.v2-hero-stage{grid-area:stage;position:relative;height:clamp(360px,34vw,500px);margin:-40px -28px 0 -60px}
.v2-hero-canvas{position:absolute;inset:0;display:block}
.v2-hero-tags{position:absolute;inset:0;pointer-events:none}
.v2-hero-tag{position:absolute;left:0;top:0;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:color-mix(in srgb,var(--paper) 78%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--line)) 40%,transparent);border-radius:30px;padding:6px 10px;white-space:nowrap;cursor:pointer;transition:color .25s,border-color .25s,background .25s,opacity .4s;backdrop-filter:blur(3px)}
.v2-hero-tag i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.v2-hero-tag.on,.v2-hero-tag:focus-visible{color:var(--ink);border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--paper))}
.v2-hero-hint{position:absolute;right:12px;bottom:6px;font:11px monospace;color:var(--muted);letter-spacing:.05em;opacity:.8}
@media (max-width:860px){.v2-hero-row{grid-template-columns:1fr;grid-template-areas:"h1" "aside" "stage"}.v2-hero-stage{height:330px;margin:10px -12px 0}.v2-hero-hint{display:none}.v2-hero-tag{font-size:9.5px;padding:4px 7px}}

/* ---------- the living studio ---------- */
.v2-studio{position:relative;margin:28px 0 44px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:
  radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--live) 7%,transparent),transparent 60%),
  linear-gradient(color-mix(in srgb,var(--green) 5%,transparent) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,color-mix(in srgb,var(--green) 5%,transparent) 1px,transparent 1px) 0 0/24px 24px,var(--surface)}
.v2-studio-head,.v2-studio-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;font:12px/1.5 monospace;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.v2-studio-head b{color:var(--green);font-weight:600}
.v2-studio-stage{position:relative;height:clamp(400px,40vw,560px);cursor:grab;touch-action:pan-y;outline:none}
.v2-studio-stage.dragging{cursor:grabbing}
.v2-studio-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--green)}
.v2-studio-stage canvas{position:absolute;inset:0;display:block}
.v2-room-tags{position:absolute;inset:0;pointer-events:none}
.v2-room-tag{position:absolute;left:0;top:0;pointer-events:auto;display:grid;gap:3px;text-align:left;padding:8px 11px;border-radius:6px;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(4px);color:var(--ink);cursor:pointer;transition:border-color .25s,background .25s,opacity .5s,box-shadow .25s;white-space:nowrap}
.v2-room-tag strong{font:600 15px/1.1 Inter,Arial,sans-serif;letter-spacing:-.2px}.v2-room-tag strong em{display:none;font-style:normal;color:var(--c);margin-right:5px;font-size:.85em}
.v2-room-tag span{font:10.5px/1.2 monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.v2-room-tag.on,.v2-room-tag:focus-visible{background:color-mix(in srgb,var(--c) 16%,var(--paper));border-color:var(--c);box-shadow:0 8px 30px -10px var(--c)}
.v2-legend{display:flex;flex-wrap:wrap;gap:8px 18px}
.v2-legend i{display:inline-block;width:14px;height:10px;margin-right:7px;vertical-align:-1px;border:1px solid var(--green)}
.v2-legend [data-k=live] i{background:color-mix(in srgb,var(--green) 55%,transparent);box-shadow:0 0 8px var(--green)}
.v2-legend [data-k=private] i{background:color-mix(in srgb,var(--green) 25%,transparent);border-right-style:dashed}
.v2-legend [data-k=alpha] i{background:color-mix(in srgb,var(--green) 35%,transparent);position:relative}

.v2-legend [data-k=founding] i{background:repeating-linear-gradient(0deg,transparent 0 3px,var(--green) 3px 4px);border-top-style:dashed}
.v2-studio-ctl{display:flex;align-items:center;gap:6px}
.v2-studio-ctl button{font:11px monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:4px;padding:7px 10px;min-height:44px;min-width:44px;cursor:pointer}
.v2-hero-tag,.v2-room-tag{min-width:44px;min-height:44px}
.v2-studio-ctl button[aria-pressed=true]{color:var(--ink);border-color:var(--green)}
.v2-drag-hint{margin-left:8px}
@media (max-width:600px){.v2-studio-stage{height:440px}.v2-studio-head,.v2-studio-foot{flex-direction:column;align-items:flex-start}.v2-room-tag{padding:4px 7px}.v2-room-tag strong{font-size:12px}.v2-room-tag strong em{display:inline}.v2-room-tag span{display:none}.v2-room-tag.on span{display:block;font-size:9px}.v2-drag-hint{display:none}}

/* ---------- tool cursor ---------- */
.v2-cursor{position:fixed;left:0;top:0;width:40px;height:40px;z-index:10002;pointer-events:none;opacity:0;color:var(--live);transition:opacity .2s;will-change:transform}
.v2-cursor.on{opacity:1}
.v2-cursor svg{display:block;transition:transform .25s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 0 6px color-mix(in srgb,currentColor 50%,transparent))}
.v2-cursor.is-link svg{transform:scale(1.5)}.v2-cursor.down svg{transform:scale(.85)}.v2-cursor.is-tool svg{transform:scale(1.05) rotate(-8deg)}
.v2-cursor-tag{position:absolute;left:40px;top:10px;font:600 10px/1 monospace;letter-spacing:.1em;text-transform:uppercase;color:#080c12;background:currentColor;padding:5px 7px;border-radius:3px;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;white-space:nowrap}
.v2-cursor.has-tag .v2-cursor-tag{opacity:1;transform:none}
.v2-cursor-tag{-webkit-text-fill-color:#080c12}
@media (hover:hover) and (pointer:fine){html.v2-has-cursor .v2-tool-zone,html.v2-has-cursor .v2-tool-zone *{cursor:none!important}}

/* ---------- magnetic cards ---------- */
#collection .art,#collection .blueprint-feature-visual{transform-style:preserve-3d;will-change:transform}
.v2-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;z-index:5;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 55%)}
.v2-hot .v2-glare{opacity:1}
#collection .blueprint-feature-visual{position:relative}

/* ---------- footer: engraved night workbench, in depth ---------- */
.signature-footer{position:relative;overflow:visible!important}
.v2-engr{position:relative;width:100vw;left:50%;transform:translateX(-50%);height:clamp(320px,38vw,600px);margin-top:-160px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 84%,transparent 100%)}
.v2-engr canvas{position:absolute;inset:0}
.v2-engr .v2-dust{mix-blend-mode:screen}
.v2-engr-img{position:absolute;inset:-30px 0 -10px;opacity:0;transition:opacity 1.4s cubic-bezier(.16,1,.3,1)}
.v2-engr.in .v2-engr-img{opacity:1}
.v2-engr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.v2-lamp{position:absolute;left:52%;top:29.5%;width:24vw;height:24vw;max-width:380px;max-height:380px;margin:-12vw 0 0 -12vw;border-radius:50%;background:radial-gradient(circle,rgba(240,214,160,.34),rgba(240,214,160,0) 62%);mix-blend-mode:screen;opacity:0}
@media (min-width:1584px){.v2-lamp{margin:-190px 0 0 -190px}}
.signature-footer .signature-wordmark{position:relative;z-index:2}
.signature-footer .signature-bottom{position:relative;z-index:2;background:var(--paper)}
html[data-theme=light] .v2-engr-img img.dark{display:none}
html:not([data-theme=light]) .v2-engr-img img.light{display:none}
@media (max-width:600px){.v2-engr{height:320px;margin-top:-70px}.v2-engr-img img{object-position:44% 70%}.v2-lamp{width:62vw;height:62vw;margin:-31vw 0 0 -31vw;left:55%;top:44%}}

/* ---------- page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
@view-transition{navigation:auto}
header .brand{view-transition-name:v2-brand}
::view-transition-old(root){animation:v2-vt-out .45s cubic-bezier(.7,0,.3,1) both}
::view-transition-new(root){animation:v2-vt-in .8s cubic-bezier(.16,1,.3,1) both}
@keyframes v2-vt-out{to{opacity:.35;transform:scale(.975)}}
@keyframes v2-vt-in{from{clip-path:circle(0% at var(--vt-x,50%) var(--vt-y,30%))}to{clip-path:circle(140% at var(--vt-x,50%) var(--vt-y,30%))}}

/* ---------- Behind the build: scroll-scrubbed teardown ---------- */
.v2-tear{position:relative;height:330vh;border-bottom:1px solid var(--line)}
.v2-tear-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(300px,1.15fr) minmax(260px,1fr);gap:40px;align-items:center}
.v2-tear-head h2{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:16px 0 10px}
.v2-tear-lede{color:var(--muted);font-size:15px;margin:0 0 14px}
.v2-skip{font-size:13px}
.v2-rail{display:flex;gap:8px;margin-top:28px}
.v2-rail i{width:34px;height:3px;background:var(--line);position:relative;transition:background .3s}
.v2-rail i b{position:absolute;top:8px;left:0;font:10px monospace;color:var(--muted);font-weight:400}
.v2-rail i.done{background:color-mix(in srgb,var(--green) 50%,var(--line))}.v2-rail i.on{background:var(--green)}.v2-rail i.on b{color:var(--green)}
.v2-tear-stage{position:relative;height:440px;perspective:1100px}
.v2-plates{position:absolute;left:0;right:0;bottom:30px;height:150px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.v2-plate{position:absolute;inset:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s;will-change:transform}
.v2-plate.dim{opacity:.38}
.v2-plate .face{position:absolute;inset:0;transform:rotateX(58deg) rotateZ(-38deg) scale(.86);border:1.4px solid var(--green);border-radius:6px;background:color-mix(in srgb,var(--paper) 82%,var(--green) 8%);box-shadow:0 22px 34px -20px rgba(0,0,0,.7);transition:background .3s,box-shadow .3s}
.v2-plate.on .face{background:color-mix(in srgb,var(--paper) 66%,var(--green) 24%);box-shadow:0 0 0 1px var(--green),0 0 40px -6px color-mix(in srgb,var(--green) 60%,transparent)}
.v2-plate .face>span{position:absolute;left:14px;top:10px;font:11px monospace;letter-spacing:.9px;text-transform:uppercase;color:var(--green)}
.v2-plate .chips{position:absolute;left:14px;right:14px;bottom:16px;display:flex;gap:6px}.v2-plate .chips i{flex:1;height:34px;border-radius:3px;opacity:.88}
.v2-plate .tabsk{position:absolute;left:14px;right:14px;top:40px;display:flex;gap:5px}.v2-plate .tabsk i{flex:1;height:22px;border:1px solid var(--green);border-radius:3px;opacity:.6}.v2-plate .tabsk i:first-child{background:color-mix(in srgb,var(--green) 40%,transparent)}
.v2-plate .sw{position:absolute;left:14px;top:40px;display:flex;gap:8px}.v2-plate .sw i{width:60px;height:60px;border-radius:4px;border:1px solid var(--green);background:#080c12}.v2-plate .sw i+i{background:#f6f5f0}
.v2-plate svg{position:absolute;left:14px;top:40px;width:calc(100% - 28px)}.v2-plate svg path{fill:none;stroke:var(--green);stroke-width:2}
.v2-plate .files{position:absolute;left:14px;top:40px;display:grid;gap:5px}.v2-plate .files i{font:10px monospace;font-style:normal;color:var(--ink);border:1px solid var(--line);padding:3px 6px;border-radius:3px}
.v2-tear-notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.v2-tear-notes li{padding:13px 10px 13px 14px;border-bottom:1px solid var(--line);border-left:2px solid transparent;transition:opacity .35s,border-color .35s,background .35s}
.v2-tear-notes li.on{border-left-color:var(--green);background:color-mix(in srgb,var(--green) 7%,transparent)}
.v2-tear-notes li.dim{opacity:.4}
.v2-tear-notes strong{display:block;margin:4px 0 2px;font-size:17px;color:var(--ink)}.v2-tear-notes p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.v2-tear.flat{height:auto;padding:48px 0}
.v2-tear.flat .v2-tear-sticky{position:static;height:auto;grid-template-columns:1fr;gap:24px}
.v2-tear.flat .v2-tear-lede,.v2-tear.flat .v2-skip,.v2-tear.flat .v2-rail{display:none}
.v2-tear.flat .v2-tear-stage{height:440px;max-width:340px;width:100%;margin:0 auto}
@media (max-width:600px){.v2-tear.flat .v2-tear-stage{height:360px}.v2-plates{height:120px}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{transition:none}
  .status-alpha::before{animation:none;box-shadow:0 0 0 3px #efb89955}
  .v2-cursor,.v2-cursor svg,.v2-plate,.v2-plates,.v2-engr-img{transition:none}
  ::view-transition-old(*),::view-transition-new(*){animation:none}
  .v2-engr-img{opacity:1}
}
/* reserve space before the scripts fill the containers (no layout shift) */
.v2-studio:empty{min-height:calc(clamp(400px,40vw,560px) + 112px)}
@media (max-width:600px){.v2-studio:empty{min-height:640px}}
@media (max-width:859px),(prefers-reduced-motion:reduce){.v2-tear:empty{height:auto;min-height:1100px}}