:root{
  --bg:#EFE7DC;
  --ink:#2F2A26;
  --card:#FFFFFF;

  --shadow: 0 14px 50px rgba(0,0,0,.32);
  --inset: inset 0 0 28px rgba(0,0,0,.14);
  --radius:2px;

  --frameGap: clamp(6px, 1.2vw, 10px);

  /* HEADER == burger height */
  --headerH: 36px;
  --brandSubtitleGap: 9px;      /* increase more space between */
  --headerRightInset: clamp(2px, 0.6vw, 8px);      /* distance from burger to brand/subtitle block */
  
  /* FOOTER */
  --footerGap: clamp(2px, 0.6vh, 6px);
  --footerPillH: clamp(26px, 3.6vw, 34px);
  --footerFont: clamp(9px, 1.05vw, 11px);

  /* MENU */
  --menuDrop: 10px;   /* increase = menu goes lower */
  --menuInset: 2px;   /* tiny nudge from the left edge */
  --menuFadeW: 26px;  /* fade width (same as edge labels) */

  /* VIEWPORT */
  --maxFilmH: 83vh;
  --cornerRadius: 14px;

  /* DECK SPLIT */
  --deckGap: clamp(10px, 2.2vh, 18px);

  /* UI */
  --panelToButtonsGap: 12px;
  --pillH: 40px;

  /* DECK UI (attached pills on panels) */
  --deckPillH: clamp(26px, 3.6vw, 38px);
  --deckPillFont: clamp(9px, 1.05vw, 12px);
  --deckPillPadX: clamp(8px, 1.6vw, 12px);

  /* PANEL sizing (height-limited so it fits half-decks) */
  --panelH: clamp(180px, 36vh, 520px);
  --panelW: calc(var(--panelH) * (420 / 297));

  /* PRINT */
  --printPad: 16px;

  /* Layout tuning */
  --angleStep: 34deg;
  --maxAngle: 88deg;
  --zStep: 260px;
  --xStep: 110%;
  --persp: 4800px;

  --sideAngleMult: 1.35;
  --sideDepthMult: 1.55;
  --sideXMult: 1.15;

  --zoomMin: .65;
  --zoomMax: 1.35;

  --brand: #C4A160;

  /* header type */
  --leftLabelSize: clamp(9px, 1.2vw, 12px);
  --leftLabelTrack: 1.6px;
  --leftLabelWeight: 200;

  /* overview tilt */
  --overviewTopTilt: -20deg;
  --overviewBottomTilt: 20deg;

  /* edge label */
  --edgeTabW: clamp(28px, 4vw, 44px);
  --edgeTabFade: 26px;
  /* arrows */
  --edgeArrowFade: 26px;
  /* logo */
  --logoW: 44px;
}

html, body{
  height: 100%;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.page,
.frame,
.frame-viewportWrap,
.space-viewport{
  max-width: 100%;
  overflow-x: clip;
}

/* Hide Posts button only on Home page */
    #menu a[href="posts.html"]{
      display: none;
    }

@supports not (overflow: clip){
  .page, .frame, .frame-viewportWrap, .space-viewport{
    overflow-x: hidden;
  }
}
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  opacity:0;
}
body.noscroll{ overflow:hidden; }

html.ready body{
  opacity:1;
  transition: opacity 1.05s ease;
}

.page{
  width:100%;
  padding: clamp(14px, 3vw, 34px);
  display:flex;
  justify-content:center;
}

/* ======= FRAME ======= */
.frame{
  width:min(96vw, 1400px);
  margin:0 auto;

  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--headerH) var(--maxFilmH) auto;
  gap: var(--frameGap);

  align-items:stretch;
  position:relative;
  min-height:100vh;
}

/* ======= HEADER ======= */
.frame-header{
  position:relative;
  z-index:5000;
  grid-row: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-inner{
  width:100%;
  height: var(--headerH);
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.header-bay-left{
  min-width: 0;
  height: 100%;
  display:flex;
  align-items:flex-start; /* allow vertical nudging */
}

.header-bay-right{
  min-width: 0;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-end; /* pushes stack all the way right */
  position:relative;
}

/* ======= UNIFIED TAB STYLE (menu/select/labels/arrows) ======= */
.tabBtn,
.menu a,
.edgeTab,
.film-arrow{
  height: var(--pillH);
  min-height: var(--pillH);
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  color: rgba(47,42,38,.92);
  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
}

.tabBtn{ padding: 0 14px; }
/* ===== Smoke — Header Menu Buttons ===== */
.menu a{
  position: relative;
  isolation: isolate;          /* keeps layers contained */
  overflow: hidden;
  border-radius: 2px;
  padding: 0 10px;
  letter-spacing: .08em;
  
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  color: rgba(47,42,38,1); /* strong readable text */
  /* fade at the bottom edge (connecting to viewport) */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--menuFadeW)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--menuFadeW)), transparent 100%);
}

/* smoke layer */
.menu a::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(40% 35% at 30% 40%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(45% 40% at 70% 60%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(50% 45% at 50% 50%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);

  opacity:.5;
  filter: blur(14px);
}

/* glass sheen layer */
.menu a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.06)
    );

  mix-blend-mode: soft-light;
  opacity:.9;
}

/* ensure text is always above everything */
.menu a{
  z-index:0;
}
.menu a > *{
  position:relative;
  z-index:2;
}

/* Arrows size */
.film-arrow{
  width: var(--edgeTabW);
  padding: 10px 8px;
}

.film-arrow svg{ width: 29px; height: 29px; } /* bigger icon */

.tabBtn:hover,
.menu a:hover,
.edgeTab:hover,
.film-arrow:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  transform: translateY(-1px);
}
.tabBtn:active,
.menu a:active,
.edgeTab:active,
.film-arrow:active{
  transform: translateY(0);
}

/* Fullscreen buttons: main bg tone */
.tabBtn--bg{
  background: rgba(239,231,220,.70);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

/* ======= HEADER MENU ======= */
.menu{
  display:flex;
  gap:10px;
  align-items:center;
  white-space:nowrap;
  font-size: var(--leftLabelSize);
  font-weight: var(--leftLabelWeight);
  letter-spacing: var(--leftLabelTrack);
  text-transform: uppercase;
  line-height: 1;
  margin-top: var(--menuDrop);
  margin-left: var(--menuInset);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.18,.9,.2,1);
}
.menu.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ======= HEADER RIGHT STACK ======= */
.header-layer-stack{
  position: relative;
  height: 100%;
  width: 100%;
}

/* Base layer */
.layer-bay{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  pointer-events:none;
}

/* ===== NEW: LOGO (spans both rows) ===== */
.layer-bay-0{
  left:0;
  right: auto; /* reserve for monogram+burger */
  width: var(--logoW, 44px);       /* the lane width */
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left: var(--menuInset, 2px);
  z-index:2;
  pointer-events:auto;
}

/* clickable logo */
.brand-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  line-height:0;
  text-decoration:none;
  pointer-events:auto;
}

/* logo size */
.brand-logo img{
  display:block;
  height: calc(var(--headerH) - 2px);
  width:auto;
  margin-right: 0;
}

/* ===== Brand + subtitle — LEFT side =====
   Now they start AFTER the logo width using padding-left. */
.layer-bay-1,
.layer-bay-2{
  left:0;
  height:100%;
  right: calc(var(--headerH) + 1px); /* reserve for monogram+burger */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left: calc(var(--menuInset, 2px) + var(--logoW, 44px)); /* space for logo + gap */
  z-index:1;
  min-width: 0;
  overflow:hidden;
  white-space: nowrap;
  box-sizing: border-box;
  border-right: 1px solid rgba(0,0,0,.22);
}

/* ===== Monogram — right (slot 1) ===== */
.layer-bay-3{
  left:auto;
  right: 0;
  height:100%;
  width: var(--headerH);
  justify-content:flex-end;
  pointer-events:auto;
  z-index:2;
}

/* ===== Burger — far right (slot 2) ===== */
.layer-bay-4{
  left:auto;
  right:0;
  height:100%;
  width: var(--headerH);
  justify-content:flex-end;
  pointer-events:auto;
  z-index:3;
}

/* text styles */
.brand-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 2.2vw, 26px);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(calc(-1 * var(--brandSubtitleGap)));
  transition: opacity .22s ease, transform .32s cubic-bezier(.18,.9,.2,1), filter .22s ease;
  color: rgba(47,42,38,.82);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.subtitle-inline{
  font-size: var(--leftLabelSize);
  font-weight: var(--leftLabelWeight);
  letter-spacing: var(--leftLabelTrack);
  white-space: nowrap;
  text-transform: uppercase;
  opacity:.80;
  transform: translateY(var(--brandSubtitleGap));
  transition: opacity .22s ease, transform .22s cubic-bezier(.18,.9,.2,1);
  color: rgba(47,42,38,.55);
}

/* monogram + burger (yours) */
.brand-mark{
  width: var(--headerH);
  height: var(--headerH);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  opacity:0;
  color: var(--brand);
  transform: translateX(0px) scaleX(.25);
  transform-origin: 100% 50%;
  transition: opacity .22s ease, transform .32s cubic-bezier(.18,.9,.2,1), filter .22s ease;
}
.brand-mark svg{
  width:100%;
  height:100%;
  display:block;
  transform: scale(0.99);
  transform-origin:center;
}

.menu-btn{
  width: var(--headerH);
  height: var(--headerH);
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--brand);
  transition: transform .28s cubic-bezier(.18,.9,.2,1);
}
.menu-btn svg{ width:100%; height:100%; display:block; overflow:visible; }

/* fold animation */
.film-header.menu-open .brand-text{
  opacity:0;
  transform: translateX(16px) scaleX(.05) skewY(6deg);
  filter: blur(.6px);
}
.film-header.menu-open .subtitle-inline{
  opacity:0;
  transform: translateX(-8px);
}
.film-header.menu-open .brand-mark{
  opacity:1;
  transform: translateX(0) scaleX(1);
}

.icon-monogram,
.icon-burger{
  overflow: visible;
  shape-rendering: geometricPrecision;  
}

/* Outline for BOTH icons (monogram + burger) */
.icon-monogram path,
.icon-burger path{
  stroke: rgba(0,0,0,.65);
  stroke-width: 1.1;              /* tweak: 1.0–1.6 */
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;         /* keeps fill clean */
}

.icon-monogram path{ stroke-width: .95; }
.icon-burger path{ stroke-width: .75; }

/* ======= VIEWPORT WRAP ======= */
.frame-viewportWrap{
  grid-row: 2;
  position: relative;
  min-height: 0;
}

/* ======= VIEWPORT ======= */
.space-viewport{
  position:relative;
  width:100%;
  height:100%;
  border-radius: var(--cornerRadius);
  overflow:hidden;

  perspective: var(--persp);
  perspective-origin: 50% 55%;
  isolation:isolate;

  background: rgba(255,255,255,.10);
  box-shadow: 0 12px 44px rgba(0,0,0,.10);

  opacity:0;
  transform: translateY(8px);
  transition: opacity 1.05s ease, transform 1.05s ease;
}
html.ready .space-viewport{ opacity:1; transform:none; }

/* background drift plate */
#spaceBg{
  position:absolute;
  inset:0;
  border-radius: var(--cornerRadius);
  pointer-events:none !important;
  z-index:0;

  /* restored original plate so it always shows */
  background:
    radial-gradient(140% 90% at 50% 55%,
      rgba(255,255,255,.10) 0%,
      rgba(0,0,0,.10) 62%,
      rgba(0,0,0,.22) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.08),
      rgba(0,0,0,.12));
  opacity:.95;

  overflow:hidden; /* keep overlay clipped */
}

/* edge fade overlay (only fades edges; does not replace plate) */
#spaceBg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;

  /* fade outer ~20% inward */
  background: radial-gradient(circle at 50% 55%,
    rgba(239,231,220,0) 0%,
    rgba(239,231,220,0) 80%,
    rgba(239,231,220,1) 100%
  );

  mix-blend-mode: multiply;
  opacity: .80;
}

.viewport-layer{
  position:absolute;
  inset:0;
  border-radius: var(--cornerRadius);
}

/* WebGL */
#viewportWebgl{
  z-index: 1;
  pointer-events:none;
  opacity: .22;
  transition: opacity .35s ease;
}
#webglCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Glass overlay */
.viewport-glass{
  z-index: 2;
  pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 50%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.05) 30%,
      rgba(0,0,0,0) 70%),
    linear-gradient(180deg,
      rgba(255,255,255,.10),
      rgba(0,0,0,.08));
  mix-blend-mode: soft-light;
  opacity: .95;
}

/* vignette */
.space-viewport::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--cornerRadius);
  pointer-events:none;
  z-index: 3;
  background:
    radial-gradient(120% 55% at 50% 56%,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.07) 22%,
      rgba(0,0,0,0) 62%),
    radial-gradient(120% 120% at 50% 50%,
      rgba(0,0,0,0) 58%,
      rgba(0,0,0,.10) 84%,
      rgba(0,0,0,.18) 100%);
  mix-blend-mode: multiply;
  opacity:.85;
}

.viewport-glass,
.space-viewport::after,
#spaceBg,
#spaceBg::after{
  pointer-events:none;
}

/* ======= EDGE LABELS (IMPORTANT: visible & clickable) ======= */
.edge-bay{
  position:absolute;
  top:0;
  height:100%;
  z-index: 999;     /* always above viewport layers */
  pointer-events:none;
}
.edge-bay-left{ left:0; }
.edge-bay-right{ right:0; }

.edgeTab{
  pointer-events:auto;
  width: var(--edgeTabW);
  height: 50%;
  padding: 10px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* the ACTUAL vertical text */
.edgeTab-label{
  display:inline-block; /* important for reliable transform */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;

  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transform-origin: center;
  transform-origin: center;

  white-space: nowrap;
  line-height: 1;
}

/* Photography: top-left -> down */
.edgeTab--photo{
  position:absolute;
  left: 0;
  top: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edgeTabFade));
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--edgeTabFade));
}

/* Digital Art: bottom-right -> up */
.edgeTab--digital{
  position:absolute;
  right: 0;
  bottom: 0;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 var(--edgeTabFade));
  mask-image: linear-gradient(270deg, transparent 0, #000 var(--edgeTabFade));
}

/* ======= DECKS ======= */
.deck-layer{
  position:absolute;
  left:0;
  width:100%;
  z-index: 4;         /* above webgl + glass */
  overflow: visible;  /* don’t clip panels while rotating */
}

.deck-layer-top{
  top:0;
  height: calc(50% - (var(--deckGap) / 2));
}
.deck-layer-bottom{
  bottom: 0;
  height: calc(50% - (var(--deckGap) / 2));
}

/* Base stacking */
#deckLayerTop{ z-index: 4; }
#deckLayerBottom{ z-index: 4; }

/* When user interacts with TOP deck, bring it above bottom */
.space-viewport.front-top #deckLayerTop{ z-index: 7; }
.space-viewport.front-top #deckLayerBottom{ z-index: 6; }

/* When user interacts with BOTTOM deck, bring it above top */
.space-viewport.front-bottom #deckLayerBottom{ z-index: 7; }
.space-viewport.front-bottom #deckLayerTop{ z-index: 6; }

/* Focus mode should still win */
.space-viewport.focus-top #deckLayerTop{ z-index: 10 !important; }
.space-viewport.focus-bottom #deckLayerBottom{ z-index: 10 !important; }

.deck-viewport{
  position:absolute;
  inset:0;
  pointer-events:auto;
  touch-action:none;

  --panX: 0px;
  --panY: 0px;
  --zoom: 1;
  --zoomZ: 0px;

  --tiltX: 0deg;
  --tiltY: 0deg;
  --hoverX: 0px;
  --hoverY: 0px;
  --hoverZ: 0px;
  --rollZ: 0deg;
  

  transition: top .35s cubic-bezier(.18,.9,.2,1),
              height .35s cubic-bezier(.18,.9,.2,1),
              opacity .25s ease,
              transform .25s ease;
}

/* overview tilt */
.space-viewport:not(.focus-top):not(.focus-bottom) #deckTop{
  transform: rotateX(var(--overviewTopTilt));
  transform-origin: 50% 50%;
}
.space-viewport:not(.focus-top):not(.focus-bottom) #deckBottom{
  transform: rotateX(var(--overviewBottomTilt));
  transform-origin: 50% 50%;
}

/* focus mode */
.space-viewport.focus-top #deckLayerTop{
  top:0 !important;
  height:100% !important;
  z-index: 6;
}
.space-viewport.focus-top #deckLayerBottom{
  opacity:0;
  pointer-events:none;
}
.space-viewport.focus-bottom #deckLayerBottom{
  top:0 !important;
  bottom:auto !important;
  height:100% !important;
  z-index: 6;
}
.space-viewport.focus-bottom #deckLayerTop{
  opacity:0;
  pointer-events:none;
}

/* pan + zoom wrappers */
.space-pan{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  transform:
    translate3d(
      calc(var(--panX) + var(--hoverX)),
      calc(var(--panY) + var(--hoverY)),
      0
    )
    translateZ(var(--hoverZ))
    rotateX(var(--tiltX))
    rotateY(var(--tiltY))
    rotateZ(var(--rollZ, 0deg));
}
.space-zoom{
  position:absolute;
  inset:0;
  transform-origin: 50% 50%;
  transform:
    translateZ(var(--zoomZ))
    scale(var(--zoom));
  z-index:2;
  overflow: visible; /* IMPORTANT */
}

.leporello{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
}

.panel{
  position:absolute;
  width: var(--panelW);
  height: var(--panelH);
  left:50%;
  top:50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  cursor:pointer;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  contain: layout paint style;
}

.print{
  width:100%;
  height:100%;
  background:var(--card);
  padding: var(--printPad);
  border-radius: var(--radius);
  box-shadow: var(--inset), var(--shadow);
  overflow:hidden;
  display:grid;
  place-items:center;
  position:relative;
  clip-path: inset(0 round var(--radius));
}
.print img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

/* noise */
.noise{
  position:absolute;
  inset:0;
  background-image:url("images/noise.png");
  background-repeat:repeat;
  background-size:520px 520px;
  opacity:.13;
  mix-blend-mode:overlay;
  pointer-events:none;
  animation:noiseMove .45s steps(2) infinite;
}
@keyframes noiseMove{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-40px,25px); }
  50%{ transform:translate(-10px,-30px); }
  75%{ transform:translate(30px,10px); }
  100%{ transform:translate(0,0); }
}

/* arrows */
.arrow-slot{
  position:absolute;
  z-index: 6000;       /* ABOVE .edge-bay (999) */
  pointer-events:none; /* slot never blocks */
  overflow: hidden;   /* avoid mask clipping weirdness */
  width: var(--edgeTabW);
}

.arrow-slot--top-left{
  right: 0;
  top: 0;
  left: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edgeArrowFade));
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--edgeArrowFade));
}

.arrow-slot--bottom-right{
  left: 0;
  bottom: 0;
  right: auto;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 var(--edgeArrowFade));
  mask-image: linear-gradient(270deg, transparent 0, #000 var(--edgeArrowFade));
}

/* the actual arrow button is clickable */
.arrow-slot .film-arrow{
  pointer-events:auto;
  height: 100%;
  min-height: 100%;
  width: 100%;
  padding: 10px 8px;    
}

/* Top arrow occupies TOP half */
.deck-layer-top .arrow-slot--top-left{
  top: 0;
  bottom: 0;
  height: auto;
}

/* Bottom arrow occupies BOTTOM half */
.deck-layer-bottom .arrow-slot--bottom-right{
  bottom: 0;
  top: 0;
  height: auto;
}

/* SPLIT MODE */
.space-viewport:not(.focus-top):not(.focus-bottom) #deckLayerTop .arrow-slot--top-left,
.space-viewport:not(.focus-top):not(.focus-bottom) #deckLayerBottom .arrow-slot--bottom-right{
  top: 0;
  bottom: 0;
  height: auto;
}

/* FOCUS MODE */
.space-viewport.focus-top #deckLayerTop .arrow-slot--top-left{
  top: 0;
  bottom: auto;
  height: 50%;
}

.space-viewport.focus-bottom #deckLayerBottom .arrow-slot--bottom-right{
  bottom: 0;
  top: auto;
  height: 50%;
}

.film-arrow svg{ width:22px; height:22px; }

/* ===== Active UI follows active (middle) panel ===== */
.active-ui{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  pointer-events: none; /* default: UI wrapper doesn't steal clicks */
}

/* ===== Untitled + status: bottom-left of active panel ===== */
.active-meta{
  position: absolute;
  left: var(--printPad, 16px);
  top: calc(100% - var(--printPad, 16px));
  right: auto;
  bottom: auto;
  height: auto;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;

  /* responsive */
  font-size: clamp(10px, 1.0vw, 12px);
  line-height: 1;

  /* label-tab styling (keep vibe) */
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  backdrop-filter: blur(10px) saturate(120%);

  text-transform: uppercase;
  letter-spacing: .08em;

  overflow: hidden;
  pointer-events: none;

  /* leave space for Select on the right */
  max-width: calc(100% - 120px);
}

.active-meta::after{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: var(--edgeTabFade, 26px);
  pointer-events: none;

  /* fade edge (like tabs) */
  background: linear-gradient(
    to right,
    rgba(239,231,220,0) 0%,
    rgba(239,231,220,0.45) 100%
  );
}

.am-title, .am-status{
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-title{ font-size: var(--deckPillFont); opacity:.92; }
.am-status{ font-size: var(--deckPillFont); opacity:.70; }

/* ===== Select: bottom-right of active panel ===== */
.active-actions{
  position: absolute;
  right: var(--printPad, 16px);
  top: calc(100% - var(--printPad, 16px));
  left: auto;
  bottom: auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: auto;
  transform: none;

  pointer-events: none; /* container doesn't catch clicks */
}

/* make Select clickable */
.active-actions button,
.active-actions .abtn{
  pointer-events: auto;
}

/* Make the meta tab and Select tab feel identical in scale */
.active-meta,
.active-actions .abtn-primary,
#selectBtnTop,
#selectBtnBottom{
  height: var(--deckPillH);
  min-height: var(--deckPillH);
  padding: 0 var(--deckPillPadX);
  font-size: var(--deckPillFont);
  letter-spacing: .08em;
  border-radius: 2px;
}

/* Fade TOP edge of the active tabs */
.active-meta,
#selectBtnTop,
#selectBtnBottom{
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0,
    #000 var(--edgeTabFade)
  );
  mask-image: linear-gradient(180deg,
    transparent 0,
    #000 var(--edgeTabFade)
  );
}

/* ======= FOOTER ======= */
.frame-footer{
  grid-row: 3;
  margin-top: var(--footerGap);
}
.footer-inner{
  display:flex;
  align-items: center;
  justify-content:center;
  gap: clamp(4px, 1vw, 8px);
  padding: 0 clamp(6px, 2vw, 14px);
  font-size: var(--footerFont);  /* responsive */
  opacity:.55;
  
  flex-wrap: nowrap;          /* stop wrapping */
  white-space: nowrap;
  min-width: 0;
}

/* Footer pill styled like edgeTab */
.footer-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  flex: 0 0 auto;             /* don’t reflow/wrap */
  white-space: nowrap;

  height: var(--footerPillH);
  min-height: var(--footerPillH);
  padding: 0 clamp(8px, 1.6vw, 12px);      /* responsive */

  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow: 0 12px 26px rgba(0,0,0,.12);

  font-size: var(--footerFont);   /* responsive */
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;

  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--edgeTabFade));
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--edgeTabFade));
}

.footer-monogram{
  height: 1em;
  width: auto;
  display:block;
  color: var(--brand);
}

/* ======= FULLSCREEN (CLEAN) ======= */

.fullscreen{
  position:fixed;
  top:0;
  left:30vw;
  width:40vw;
  height:100dvh;
  
  background: rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2147483647;
  padding: clamp(14px, 3vw, 34px);
  overflow:hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.fullscreen.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility 0s linear 0s;
}

.fs-inner{
  width:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height: calc(100dvh - 2 * clamp(14px, 3vw, 34px));
}

/* The print card is the anchor for the attached UI */
.fullscreen .print.fs-frame{
  position: relative; /* critical: anchors absolute meta/actions */
  flex: 1 1 auto;
  min-height: 0;
  width:100%;
  margin: 0 auto;
  /* keep image fully visible */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* fullscreen print padding can be a bit smaller */
  padding: clamp(8px, 1.6vw, 16px);
  max-height: calc(
    100dvh
    - 2 * clamp(14px, 3vw, 34px)
    - (var(--deckPillH) + 12px)
  );
}

/* image sizing inside fullscreen */
.fullscreen .fs-frame img{
  width: auto;
  height: auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* ===== Attached meta ===== */

.fullscreen .fs-meta{
  position: absolute;
  left: 0;
  bottom: 0; /* sits in the reserved padding area */
  align-items: center;
  gap: 2px;
  height: var(--deckPillH);
  min-height: var(--deckPillH);
  padding: 0 var(--deckPillPadX);
  /* KEY: keep away from the right side */
  right: calc(var(--deckPillPadX) + 10px);

  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.07);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  text-transform: uppercase;
  letter-spacing: .08em;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
  min-width: max-content !important;
  display: flex;
  --fsMetaScale: 1;
  width: auto !important;   /* size to content, like a button */
  max-width: none !important; /* only prevent collision with Collect */
  flex: 0 0 auto !important;
}

/* Inner row can be scaled down */
.fullscreen .fs-metaInner{
  display: inline-flex;
  align-items: center;
  gap: 2px;

  transform: scale(var(--fsMetaScale, 1));
  transform-origin: left center;
  white-space: nowrap;
}

.fullscreen .fs-actions{
  position: absolute;
  right: 0;
  bottom: 0; /* sits in the reserved padding area */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  pointer-events: none;
  z-index: 20;
}

.fullscreen #fsCollect{
  pointer-events: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: 110px; /* must match the lane number */

  height: var(--deckPillH);
  min-height: var(--deckPillH);
  padding: 0 var(--deckPillPadX);
  font-size: var(--deckPillFont);

  border-radius: 2px;
  letter-spacing: .08em;
  text-decoration: none;

  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.07);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

/* fade edge like active-meta */
.fullscreen .fs-meta::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-1px;
  width: var(--edgeTabFade, 22px);
  pointer-events:none;
  background: linear-gradient(
    to right,
    rgba(239,231,220,0) 0%,
    rgba(239,231,220,0.20) 100%
  );
}

.fullscreen .fs-title,
.fullscreen .fs-status{
  color: rgba(255,255,255,.92);
  line-height: 1;

  /* scaling behavior */
  display: inline-block;
  transform: scale(var(--fsMetaScale, 1));
  transform-origin: left center;

  /* no wrapping, no ellipsis */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(10px, 1.05vw, 13px);
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
}

.fullscreen .fs-title{ opacity:.92; }
.fullscreen .fs-status{ opacity:.78; }

/* Wrap print card + attached pills */
.fs-cardWrap{
  position: relative;
  width: 100%;
  padding-bottom: calc(var(--deckPillH) + 12px); /* room for pills under card */
}

/* IMPORTANT: allow pills to be visible outside the white print card */
.fullscreen,
.fullscreen .fs-inner,
.fs-cardWrap{
  overflow: visible;
}

/* ===== Smoke layer in fullscreen ONLY (won’t affect rest of site) ===== */
.fullscreen .fs-meta,
.fullscreen #fsCollect{
  isolation: isolate;
}
.fullscreen .fs-meta::before,
.fullscreen #fsCollect::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:0;
  background:
    radial-gradient(40% 32% at 30% 35%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(44% 36% at 70% 55%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(38% 28% at 55% 25%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(46% 40% at 45% 75%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 62%);
  opacity: .55;
  filter: blur(10px);
  pointer-events:none;
}

.fullscreen .fs-meta > *,
.fullscreen #fsCollect > *{
  position: relative;
  z-index: 1;
}

.fullscreen #fsCollect{
  position: relative;
  font-size: clamp(10px, 1.05vw, 13px);
}

/* Hide deck UI while fullscreen is open (working method) */
body.noscroll .active-ui,
body.noscroll .active-actions,
body.noscroll .active-meta{
  display:none !important;
}

.fullscreen .fs-meta,
.fullscreen .fs-actions{
  transform: translateY(-2px);
}

/* =========================================================
   RESPONSIVE + SAFARI DEBUG PACK
   - mobile + small blocks
   - mobile landscape height-limited block (+ footer scaling)
   - Safari edgeTab mask fallback (vertical tabs visible)
========================================================= */
@media (max-width: 760px){
  :root{ 
    --maxFilmH: 72vh;
    --panelW: 88vw;
    --panelH: calc(var(--panelW) * (297 / 420));
    --pillH: 34px;
    --headerH: 40px;
    --persp: 3200px;
    --angleStep: 16deg;
    --zStep: 62px;
    --xStep: 74%;
  }

  .brand-text{ 
    font-size: clamp(11px, 4.2vw, 16px);
    letter-spacing: .05em;
  }
  .subtitle-inline{ 
    font-size: clamp(9px, 3.2vw, 11px);
    letter-spacing: .08em;
  }
}

@media (max-width: 520px){
  :root{
    --maxFilmH: 72vh;
    --panelW: 88vw;
    --panelH: calc(var(--panelW) * (297 / 420));
    --pillH: 34px;
    --headerH: 40px;
    --persp: 3200px;
    --angleStep: 16deg;
    --zStep: 62px;
    --xStep: 74%;
  }

  .brand-text{ 
    font-size: clamp(11px, 4.2vw, 16px);
    letter-spacing: .05em;
  }
  .subtitle-inline{ 
    font-size: clamp(9px, 3.2vw, 11px);
    letter-spacing: .08em;
  }
}

/* ======= MOBILE LANDSCAPE (HEIGHT-LIMITED) ======= */
/* Prevents viewport/decks from being cut off in landscape phones */
@media (max-height: 520px) and (orientation: landscape){
  :root{
    --maxFilmH: 78vh;
    --headerH: 36px;
    --pillH: 32px;
    --deckGap: clamp(6px, 1.6vh, 12px);

    /* panels shrink more when height is small */
    --panelH: clamp(140px, 56vh, 320px);
    --panelW: calc(var(--panelH) * (420 / 297));

    --persp: 3200px;
    --angleStep: 14deg;
    --zStep: 56px;
    --xStep: 72%;

    /* footer scaling in landscape */
    --footerPillH: 28px;
    --footerFont: 10px;
    --footerGap: 2px;
  }

  .page{ padding: clamp(10px, 2vw, 18px); }
}

@media (max-width: 420px){
  :root{
    --headerRightInset: 0px;  /* give brand more room */
  }

  .brand-text{
    font-size: clamp(12px, 4.2vw, 15px);
    letter-spacing: .05em;
  }
}

/* ===== Fullscreen scene: calm header ===== */
body.noscroll .brand-text,
body.noscroll .subtitle-inline{
  opacity: 0 !important;
  transform: translateY(-6px) scale(0.98);
  filter: blur(1px);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  pointer-events: none;
}

body.noscroll .brand-mark,
body.noscroll .menu-btn{
  opacity: 0.2 !important;
  pointer-events: auto;
}

.brand-mark,
.menu-btn{
  transition: opacity .35s ease;
}

/* ===== Fullscreen scene: decks dissolve into the space ===== */
body.noscroll #deckLayerTop,
body.noscroll #deckLayerBottom{
  opacity: 0.08 !important;
  filter: blur(2px) saturate(0.95);  /* less dramatic */
  transform: translateZ(0); /* keeps GPU stable */
  transition: opacity .45s ease .08s, filter .45s ease .08s;
  pointer-events: none !important;
}

body.noscroll #viewportWebgl{ opacity: .10 !important; }  /* calmer */
body.noscroll #spaceBg{
  filter: brightness(.95) contrast(1.05);
  transition: filter .45s ease;
}

/* Default layer order */
#deckLayerTop{ z-index: 4; }
#deckLayerBottom{ z-index: 4; }

/* Bring one deck above the other while still split */
.space-viewport.front-top #deckLayerTop{ z-index: 7; }
.space-viewport.front-top #deckLayerBottom{ z-index: 6; }

.space-viewport.front-bottom #deckLayerBottom{ z-index: 7; }
.space-viewport.front-bottom #deckLayerTop{ z-index: 6; }

/* Focus should always win */
.space-viewport.focus-top #deckLayerTop{ z-index: 10 !important; }
.space-viewport.focus-bottom #deckLayerBottom{ z-index: 10 !important; }

/* ======= REDUCED MOTION ======= */
@media (prefers-reduced-motion: reduce){
  .noise{ animation:none !important; }
}