/* ============================================================
   studio.INTERVAL — v2 landing: randomized parallax gallery
   A scattered canvas of mixed content (projects, fragments,
   research, software, words) drifting at different rates.
   Togglable against the classic landing.
   ============================================================ */

/* mode toggle: which landing shows */
body.mode-gallery .classic-main,
body.mode-gallery .classic-teaser{ display:none; }
.land{ display:none; }
body.mode-gallery .land{ display:block; }

/* ---- Landing-Designer (edit mode) ---- */
body.land-edit{ overflow-y:auto; }
body.land-edit .start-switch,
body.land-edit .land-hint,
body.land-edit .si-lang{ display:none; }
body.land-edit .shard{ cursor:move; outline:1px dashed transparent; transition:outline-color .15s; }
body.land-edit .shard:hover{ outline-color:rgba(200,97,43,.55); }
body.land-edit .shard.is-editing{ outline:1px solid var(--accent); }
body.land-edit .shard a,
body.land-edit .shard .land-srch__in{ pointer-events:none; }   /* don't navigate while designing */
.shard__rsz{ position:absolute; right:-5px; bottom:-5px; width:14px; height:14px; z-index:5;
  background:var(--accent); border:2px solid #fff; border-radius:2px; cursor:nwse-resize;
  box-shadow:0 1px 4px rgba(0,0,0,.3); opacity:0; transition:opacity .15s; }
body.land-edit .shard:hover .shard__rsz,
body.land-edit .shard.is-editing .shard__rsz{ opacity:1; }
/* delete cross, top-left, on hover */
.shard__del{ position:absolute; left:-9px; top:-9px; width:20px; height:20px; z-index:6;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--accent); color:#fff; border:2px solid #fff; cursor:pointer;
  box-shadow:0 1px 5px rgba(0,0,0,.35); opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s; }
.shard__del svg{ width:11px; height:11px; }
.shard__del:hover{ background:var(--ink); }
body.land-edit .shard:hover .shard__del,
body.land-edit .shard.is-editing .shard__del{ opacity:1; transform:scale(1); }

/* + Element menu (top-right, left of Presets) */
.land-add{ position:fixed; top:62px; right:128px; z-index:92; font-family:var(--mono); }
.la-toggle{ font-size:11px; letter-spacing:0.04em; border:1px solid var(--accent); color:var(--accent);
  background:color-mix(in srgb,var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:7px 12px; cursor:pointer; }
.la-toggle:hover{ background:var(--accent); color:#fff; }
.la-menu{ position:absolute; top:100%; right:0; margin-top:8px; width:210px; background:#fff; border:1px solid var(--ink);
  box-shadow:0 18px 46px rgba(0,0,0,.18); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:5px; }
.la-menu[hidden]{ display:none; }
.la-sec{ font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey-2); margin:6px 2px 2px; }
.la-sec:first-child{ margin-top:0; }
.la-menu button{ font-family:var(--mono); font-size:11px; letter-spacing:0.02em; text-align:left;
  border:1px solid var(--line); background:#fff; color:var(--ink-2); padding:7px 10px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.la-menu button:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.la-cats{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.la-cats button{ text-align:center; padding:6px 8px; }

.land-editbar{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:14px; padding:10px 16px;
  background:color-mix(in srgb,var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--ink); box-shadow:0 18px 46px rgba(0,0,0,.18); border-radius:12px; }
.land-editbar .led__t{ font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.land-editbar .led__t .dot{ color:var(--accent); }
.land-editbar .led__hint{ font-family:var(--mono); font-size:10px; letter-spacing:0.04em; color:var(--grey); }
.land-editbar button, .land-editbar a{ font-family:var(--mono); font-size:11px; letter-spacing:0.03em;
  border:1px solid var(--ink); background:#fff; color:var(--ink); padding:7px 12px; cursor:pointer; text-decoration:none; transition:background .15s,color .15s; }
.land-editbar button:hover, .land-editbar a:hover{ background:var(--ink); color:#fff; }
.land-editbar #ledSave{ border-color:var(--accent); color:var(--accent); }
.land-editbar #ledSave:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.led-flash{ position:fixed; left:50%; bottom:74px; transform:translate(-50%,8px); z-index:91;
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  padding:8px 14px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.led-flash.on{ opacity:1; transform:translate(-50%,0); }

/* preset manager (top-right) */
.land-presets{ position:fixed; top:62px; right:18px; z-index:92; font-family:var(--mono); }
.lp-toggle{ font-size:11px; letter-spacing:0.04em; border:1px solid var(--ink); background:color-mix(in srgb,var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); padding:7px 12px; cursor:pointer; }
.lp-toggle:hover{ background:var(--ink); color:#fff; }
.lp-menu{ position:absolute; top:100%; right:0; margin-top:8px; width:230px; background:#fff; border:1px solid var(--ink);
  box-shadow:0 18px 46px rgba(0,0,0,.18); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.lp-menu[hidden]{ display:none; }
.lp-sel{ width:100%; font-family:var(--mono); font-size:11px; padding:6px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.lp-acts{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.lp-menu button{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.03em; border:1px solid var(--line); background:#fff; color:var(--ink-2); padding:6px 8px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.lp-menu button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.lp-new{ border-color:var(--accent) !important; color:var(--accent) !important; }
.lp-new:hover{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
.lp-def{ color:var(--grey) !important; }
/* in gallery mode the page itself doesn't scroll past the canvas chrome */
body.mode-gallery{ }

.land{ position:relative; width:100%; overflow:hidden; }
.land-stage{ position:relative; width:100%; }

/* a scattered piece */
.shard{ position:absolute; top:0; left:0; will-change:transform; }
/* on window resize, glide horizontally to the new spot (vertical handled in JS) */
body.land-resizing .shard{ transition:left .6s cubic-bezier(.45,.05,.2,1), width .6s cubic-bezier(.45,.05,.2,1); }
.shard__inner{ position:relative; }

/* image shard */
.shard--img .shard__inner{ overflow:hidden; background:#f4f3f0; }
.shard--img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.shard--img:hover img{ transform:scale(1.04); }
.shard__cap{ display:flex; justify-content:space-between; gap:12px; margin-top:9px; align-items:baseline;
  opacity:0; transition:opacity .3s ease; }
.shard--img:hover .shard__cap{ opacity:1; }
.shard__t{ font-size:13.5px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); }
.shard--img:hover .shard__t{ color:var(--accent); }
.shard__no{ font-family:var(--mono); font-size:11px; color:var(--grey); margin-right:7px; }
.shard__m{ font-family:var(--mono); font-size:11px; color:var(--grey); white-space:nowrap; }

/* striped fragment placeholder */
.shard--frag .shard__inner{ position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg,#f4f3f0 0 11px,#eeece6 11px 22px); }
.shard--frag .shard__inner::after{ content:attr(data-ph); position:absolute; left:11px; bottom:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; color:var(--grey); }

/* the brand / opener shard */
.shard--brand .wm{ font-size:clamp(30px,5vw,68px); font-weight:500; letter-spacing:-0.04em; line-height:0.95; }
.shard--brand .wm .dot{ color:var(--accent); }
.shard--brand .intro{ font-size:clamp(17px,1.7vw,24px); font-weight:400; line-height:1.22;
  letter-spacing:-0.02em; margin:18px 0 0; max-width:22ch; text-wrap:balance; }
.shard--brand .intro b{ font-weight:500; }

/* pull-quote shard */
.shard--quote p{ font-size:clamp(18px,2vw,30px); font-weight:400; line-height:1.2; letter-spacing:-0.022em;
  margin:0; text-wrap:balance; }
.shard--quote p b{ font-weight:500; }
.shard--quote .src{ font-family:var(--mono); font-size:11px; color:var(--grey); letter-spacing:0.04em; margin-top:12px; display:block; }

/* research snippet card */
.shard--research{ }
.shard--research a{ display:block; border-top:1px solid var(--ink); padding-top:14px; }
.shard--research .r__no{ font-family:var(--mono); font-size:11px; color:var(--grey); letter-spacing:0.04em; }
.shard--research .r__t{ font-size:clamp(17px,1.6vw,21px); font-weight:500; letter-spacing:-0.018em; margin:8px 0 8px; line-height:1.12; }
.shard--research a:hover .r__t{ color:var(--accent); }
.shard--research .r__ab{ font-size:13px; color:var(--ink-2); line-height:1.5; }

/* software chip */
.shard--soft a{ display:block; border:1px solid var(--line); padding:16px 18px 14px; border-radius:12px;
  transition:border-color .2s,transform .35s cubic-bezier(.2,.7,.2,1); background:#fff; }
.shard--soft a:hover{ border-color:var(--ink); transform:translateY(-3px); }
.shard--soft .top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.shard--soft .n{ font-size:15px; font-weight:500; letter-spacing:-0.015em; }
.shard--soft .v{ font-family:var(--mono); font-size:10.5px; color:var(--grey); }
.shard--soft .d{ font-size:12.5px; color:var(--ink-2); line-height:1.45; margin:10px 0 0; }
.shard--soft .ai{ font-family:var(--mono); font-size:10.5px; color:var(--accent); margin-top:10px; letter-spacing:0.04em; }

/* meta label shard */
.shard--meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; color:var(--grey); line-height:1.7; }
.shard--meta b{ color:var(--ink); font-weight:500; }

/* legibility: text-only shards flip to white over dark imagery */
.shard.shard--brand, .shard.shard--quote, .shard.shard--meta, .shard.shard--rub{
  transition:color .4s ease; }
.shard.on-dark, .shard.on-dark .wm, .shard.on-dark .intro, .shard.on-dark .intro b,
.shard.on-dark p, .shard.on-dark b, .shard.on-dark .src,
.shard.on-dark .rub__l, .shard.on-dark .shard__inner{ color:#ffffff !important; }
.shard.on-dark .dot{ color:var(--accent) !important; }
.shard.on-dark{ text-shadow:0 1px 14px rgba(0,0,0,.45); }

/* per-pixel auto-contrast for the DRIFTING text shards: white type composited
   with `difference` reads black on light areas and light on dark — replaces the
   coarse binary on-dark flip. (Brand keeps the flip so its orange dot survives.) */
.shard--quote, .shard--meta, .shard--rub{ mix-blend-mode:difference; color:#fff; text-shadow:none; }
.shard--quote p, .shard--quote p b, .shard--quote .src,
.shard--meta, .shard--meta b, .shard--rub .rub__l{ color:#fff; }
.shard--rub:hover{ mix-blend-mode:normal; }   /* let the orange hover + brackets read true */

/* research is transparent text — give it the same per-pixel negative as quote/meta */
.shard--research{ mix-blend-mode:difference; }
.shard--research a{ border-top-color:#fff; }
.shard--research .r__no, .shard--research .r__t, .shard--research .r__ab{ color:#fff; }

/* floating search shard */
.shard--search{ z-index:6; }
.land-srch{ display:flex; align-items:center; gap:9px; padding:9px 14px;
  background:color-mix(in srgb,var(--bg) 70%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--line-2); border-radius:999px; transition:border-color .2s; }
.land-srch:focus-within{ border-color:var(--ink); }
.land-srch svg{ width:16px; height:16px; flex:none; color:var(--grey-2); transition:color .2s; }
.land-srch:focus-within svg{ color:var(--accent); }
.land-srch__in{ border:none; background:none; outline:none; font:inherit; font-size:15px;
  letter-spacing:-0.01em; color:var(--ink); width:100%; }
.land-srch__in::placeholder{ color:var(--grey-2); }
.land-srch__in::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* landing search — universal suggestions dropdown (pages · projects · hashtags) */
.land-sugg{ position:absolute; top:100%; left:0; width:342px; max-width:80vw; margin-top:9px; z-index:40;
  background:color-mix(in srgb,var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--line-2); box-shadow:0 18px 46px rgba(0,0,0,.13);
  border-radius:14px; overflow:hidden; padding:6px 0; max-height:52vh; overflow-y:auto; }
.land-sugg[hidden]{ display:none; }
.land-sugg__sec{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--grey-2); padding:9px 15px 4px; }
.land-sugg__sec:first-child{ padding-top:4px; }
.land-sugg__i{ display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; border:none; background:none;
  font-family:var(--mono); font-size:12.5px; color:var(--ink-2); padding:7px 15px; cursor:pointer;
  transition:color .14s, background .14s; }
.land-sugg__i .l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.land-sugg__i .s{ margin-left:auto; padding-left:10px; color:var(--grey); font-size:10.5px; white-space:nowrap; flex:none; }
.land-sugg__i:hover, .land-sugg__i.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, transparent); }
.land-sugg__i:hover .s, .land-sugg__i.on .s{ color:color-mix(in srgb,var(--accent) 70%, var(--grey)); }

/* floating clickable rubrics */
.shard--rub{ z-index:5; }
.shard--rub .rub__l{ display:inline-block; font-size:clamp(20px,2.4vw,34px); font-weight:500;
  letter-spacing:-0.03em; color:#fff; position:relative; padding:2px 0;
  transition:color .2s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.shard--rub .rub__l::before,
.shard--rub .rub__l::after{ position:absolute; top:50%; transform:translateY(-50%);
  color:var(--accent); opacity:0; transition:opacity .2s ease; }
.shard--rub .rub__l::before{ content:"["; left:-0.55em; }
.shard--rub .rub__l::after{ content:"]"; right:-0.55em; }
.shard--rub:hover .rub__l{ color:var(--accent); }
.shard--rub:hover .rub__l::before,
.shard--rub:hover .rub__l::after{ opacity:1; }

/* scroll hint */
.land-hint{ position:fixed; left:50%; bottom:62px; transform:translateX(-50%); z-index:40;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--grey);
  text-transform:uppercase; opacity:.7; pointer-events:none; transition:opacity .4s; }
body:not(.mode-gallery) .land-hint{ display:none; }

/* start switch (corner) */
.start-switch{ position:fixed; right:16px; bottom:78px; z-index:60; font-size:12px; color:var(--grey);
  background:color-mix(in srgb,var(--bg) 86%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line); padding:6px 11px; cursor:pointer; }
.start-switch:hover{ color:var(--ink); border-color:var(--ink); }
.start-switch b{ color:var(--ink); font-weight:500; }