/* ---------- Animatable custom properties ---------- */
@property --focus-progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* ============================================
   ROOT & DESIGN TOKENS
   ============================================ */
:root{
  --bg:#0f1115;
  --panel:#171a20;
  --panel2:#12151b;
  --text:#e6e8ec;
  --muted:#9aa3af;
  --accent:#f04d61;
  --core-art:#4da3ff;
  --core-code:#84cc16;
  --core-product:#f472b6;
  --border:#2a2f38;
  --shadow: rgba(0,0,0,.35);
}

/* Adjustable layout constants */
:root{
  --stage-pad: 80px; /* aligns pinned headings with the timeline line start */
  --timeline-year-height: 46px;
  
  /* Timeline positioning */
  --timeline-top: 70px;
  --timeline-bottom: 110px;
  --track-bottom: 34px;
  --year-label-bottom: 2px;
  
  /* Panel dimensions */
  --radar-width: 395px;
  --detail-width: 640px;
  --container-max-width: 1100px;
}

/* ============================================
   BASE & RESETS
   ============================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit;text-decoration:none}
code{color:#c7d2fe}

.muted{color:var(--muted)}
.small{font-size:.9rem}

/* ============================================
   NAVIGATION
   ============================================ */
.nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(15,17,21,.88);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.nav-inner{
  max-width:1100px;margin:0 auto;padding:8px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand-wrapper{position:relative;display:flex;align-items:center;gap:8px}
.brand{font-weight:700;letter-spacing:.2px}
.nav-timeline-controls{
  display:flex;
  gap:10px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.nav-timeline-controls.visible{
  opacity:1;
  pointer-events:auto;
}
.nav-links{display:flex;gap:14px;flex-wrap:wrap}
.nav-links a,
.nav-link-btn{
  opacity:.9;
  color:var(--text);
  background:none;
  border:none;
  padding:0;
  font:inherit;
  cursor:pointer;
}
.nav-links a,
.nav-link-btn{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
}
.nav-link-with-status{
  gap:0;
  align-items:stretch;
}
.nav-links .nav-link-with-status::after,
.nav-link-btn.nav-link-with-status::after{
  content:none;
  display:none;
}
.nav-link-label{
  display:block;
}
.nav-links a::after,
.nav-link-btn::after{
  content:"";
  display:block;
  height:2px;
  margin-top:6px;
  background:transparent;
  border-radius:999px;
}
.nav-links a:hover,
.nav-link-btn:hover{color:var(--accent);opacity:1}
.nav-links a.active,
.nav-link-btn.active{color:var(--accent);opacity:1}
.nav-links a.active::after,
.nav-link-btn.active::after{
  background:var(--accent);
}
.nav-status{
  position:relative;
  display:block;
  width:calc(100% - 2px);
  min-width:46px;
  height:8px;
  margin-top:6px;
  color:currentColor;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.nav-link-with-status.active .nav-status{
  opacity:1;
}
.nav-status-track,
.nav-status-line{
  position:absolute;
  height:2px;
  background:currentColor;
  opacity:1;
}
.nav-status-pixel{
  position:absolute;
  width:2px;
  height:2px;
  background:currentColor;
  box-shadow:0 0 0 1px rgba(15,17,21,.88);
}
.nav-status-samples .nav-status-line-left{
  left:0;
  top:3px;
  width:100%;
}
.nav-status-samples .nav-status-line-right{
  left:0;
  top:3px;
  width:0;
}
.nav-status-samples .nav-status-pixel-left{
  left:0;
  top:3px;
}
.nav-status-samples .nav-status-pixel-center{
  left:calc(50% - 1px);
  top:3px;
}
.nav-status-samples .nav-status-pixel-right{
  left:calc(100% - 2px);
  top:3px;
}
.nav-status-samples .nav-status-pixel,
.nav-status-samples .nav-status-line{
  opacity:0;
}
.nav-status-samples[data-level="2"] .nav-status-line-left,
.nav-status-samples[data-level="3"] .nav-status-line-left{
  opacity:1;
}
.nav-status-samples[data-level="2"] .nav-status-line-left{
  left:4px;
  width:calc(100% - 4px);
}
.nav-status-samples[data-level="3"] .nav-status-line-left{
  left:0;
  width:calc(100% - 4px);
}
.nav-status-samples[data-level="2"] .nav-status-pixel-left,
.nav-status-samples[data-level="3"] .nav-status-pixel-right{
  opacity:1;
}
.nav-status-timeline,
.nav-status-projects{
  --status-progress: 0;
  --status-progress-pos: calc(4px + (var(--status-progress) * (100% - 10px)));
  --status-projects-lock: 0;
  --status-projects-phase: 1;
}
.nav-status-timeline .nav-status-track,
.nav-status-projects .nav-status-track{
  left:4px;
  right:4px;
  top:3px;
}
.nav-status-timeline .nav-status-track{
  background:linear-gradient(
    90deg,
    currentColor 0 calc(var(--status-progress-pos) - 4px),
    transparent calc(var(--status-progress-pos) - 4px) calc(var(--status-progress-pos) + 4px),
    currentColor calc(var(--status-progress-pos) + 4px) 100%
  );
}
.nav-status-pixel-moving{
  top:3px;
  left:var(--status-progress-pos);
}
.nav-status-projects .nav-status-track{
  left:4px;
  right:4px;
  transition:left .18s ease, right .18s ease, opacity .18s ease;
}
.nav-status-projects[data-aligned="true"] .nav-status-track{
  left:0;
  right:0;
}
.nav-status-pixel-project-left{
  left:0;
  top:calc(3px - (var(--status-projects-phase) * 2px));
}
.nav-status-pixel-project-right{
  left:calc(100% - 2px);
  top:calc(3px + (var(--status-projects-phase) * 2px));
}
.nav-status-projects[data-aligned="true"] .nav-status-pixel-project-left,
.nav-status-projects[data-aligned="true"] .nav-status-pixel-project-right{
  opacity:0;
}
.nav-cta{display:flex;gap:10px}

.btn{
  background:var(--accent);
  border:1px solid rgba(255,255,255,.08);
  padding:7px 10px;border-radius:10px;
  font-weight:600;
  font-size:.92rem;
  box-shadow:0 10px 20px var(--shadow);
}
.btn:hover{filter:brightness(1.04)}
.btn-ghost{
  background:transparent;border:1px solid var(--border);
  color:var(--text);
  box-shadow:none;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.18);color:var(--accent)}

/* ============================================
   HERO SECTION
   ============================================ */
.hero{
  max-width:none;
  margin:0;
  min-height:calc(100svh - 56px);
  padding:76px 20px 120px;
  display:flex;
  align-items:stretch;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:24px;
  align-items:start;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  min-height:100%;
  padding-top:clamp(60px, 12vh, 140px);
}
.hero h1{line-height:1.05;margin:0 0 12px}
.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:100%;
  transition:transform .55s ease, opacity .35s ease;
}
.hero-name-main{
  display:block;
  font-size:clamp(3rem,5.6vw,5rem);
  font-weight:800;
  letter-spacing:.01em;
  will-change: transform, opacity;
  transform-origin: center center;
  position: relative;
}
.hero-name-sub{
  display:block;
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--muted);
  margin-top:4px;
}
.brand{
  transition: opacity .2s ease, color .2s ease;
  cursor: pointer;
  position: relative;
}
.brand:hover{
  color: var(--accent);
}
.brand-gear{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  opacity: .75;
  cursor: pointer;
  padding: 0;
  transition: opacity .2s ease, color .2s ease, transform .35s ease;
}
.brand-gear:hover{
  opacity: 1;
  color: var(--accent);
  transform: rotate(45deg);
}
.brand-gear:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.brand-hint{
  font-size: 0.85rem;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.brand-hint.visible{
  opacity: 1;
}
.hero-name-flyer{
  position: fixed;
  display: block;
  margin: 0;
  padding: 0;
  transform-origin: center center;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2001;
  will-change: transform, opacity;
}
.lead{font-size:1.05rem;color:var(--muted);margin:8px 0 18px;max-width:62ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:16px;padding:18px;
  box-shadow:0 20px 40px var(--shadow);
  transition:transform .55s ease, opacity .35s ease;
}
.hero-copy .lead,
.hero-copy .pill-row,
.hero-name-sub{
  transition:opacity .35s ease, transform .55s ease;
}
.stat{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.10)}
.stat:last-child{border-bottom:none}
.stat-k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.stat-v{font-weight:650;margin-top:4px}
.hero-proofs{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hero-proofs li{
  position:relative;
  padding-left:14px;
  line-height:1.45;
}
.hero-proofs li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(245,194,76,.7); /* soft gold to echo the highlight tone */
}
.hero-proofs strong{ color:var(--text); font-weight:650; }

/* ============================================
   SECTIONS & LAYOUT
   ============================================ */
.section{max-width:1100px;margin:0 auto;padding:104px 20px 88px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.section h2{margin:0;font-size:1.8rem}
.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px;border-radius:999px;
  font-weight:600;color:#dbe3ef
}

/* ============================================
   PROJECTS SECTION
   ============================================ */
.filters{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:8px 16px;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.025);
  margin:0;
}
.filter{display:flex;align-items:center;white-space:nowrap}
.filter-role{justify-self:end}
.filter-domain{justify-self:start}
.filters select{
  text-align:center;
  text-align-last:center;
}
.filter label{margin:0}
label{font-size:.85rem;color:var(--muted)}
select{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 12px;
  border-radius:16px;
  min-width:160px;
  font-size:.92rem;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select:hover{
  border-color:color-mix(in oklab, var(--border) 50%, var(--accent));
}
/* No persistent click-focus highlight — the change handler also blur()s the
 * element. Keyboard navigation still gets a clear ring via :focus-visible. */
select:focus{
  outline:none;
}
select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}
select option:disabled{
  color:#666;
  opacity:0.5;
}
.filter-tip{
  justify-self:center;
  text-align:center;
  font-size:0.88rem;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  padding:6px 10px;
  color:var(--muted);
  cursor:help;
  overflow:visible;
  font:inherit;
  line-height:1.2;
  border-radius:6px;
  transition:color .2s ease, background .2s ease;
}
.filter-tip:hover,
.filter-tip:focus-visible{
  color:var(--text);
  background:rgba(255,255,255,.05);
  outline:none;
}
.project-color-legend{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:30;
  width:min(420px, calc(100vw - 40px));
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(10,14,20,.94);
  box-shadow:0 18px 44px rgba(0,0,0,.36);
  color:rgba(230,232,236,.92);
  font-size:.78rem;
  text-align:left;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, 6px) scale(.98);
  transform-origin:50% 100%;
  transition:opacity .18s ease, transform .18s ease;
}
.project-color-legend::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:10px;
  height:10px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(10,14,20,.94);
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.filter-tip:hover .project-color-legend,
.filter-tip:focus-visible .project-color-legend{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}
.project-color-legend span{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  white-space:nowrap;
}
.legend-dot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 0 14px currentColor;
}
.legend-purple{color:rgba(168, 85, 247, 0.96);background:currentColor}
.legend-gold{color:rgba(245, 194, 76, 0.98);background:currentColor}
.legend-red{color:rgba(248, 113, 113, 0.96);background:currentColor}
.legend-blue{color:rgba(96, 165, 250, 0.96);background:currentColor}
.legend-green{color:rgba(74, 222, 128, 0.95);background:currentColor}
.legend-gray{color:rgba(180, 184, 190, 0.85);background:currentColor}
@media (max-width: 620px){
  .project-color-legend{
    grid-template-columns:1fr;
    width:min(240px, calc(100vw - 28px));
  }
}
.filter-hint{margin-left:auto;min-width:220px}

.project-grid-wrapper{
  position:relative;
  margin-top:18px;
  overflow-x:clip;
  overflow-y:visible;
  padding:28px 0 12px;
  perspective:1400px;
}

#projects{
  min-height:calc(100svh - 56px);
  scroll-margin-top:56px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  padding-top:88px;
  /* No padding-bottom: the snap aligns .filters.bottom with the viewport
   * bottom, and .filters is the last child of #projects. Any padding here
   * would sit below the snap anchor (off-screen) AND push section.top down
   * by the same amount, exposing the timeline section above the nav. */
  padding-bottom:0;
}

#projects .section-head,
#projects .filters,
#projects .project-grid-wrapper{
  width:100%;
}

#projects .project-grid-wrapper{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  /* break out of the 1100px section box and span the full content width */
  width:var(--page-content-width, 100%);
  max-width:var(--page-content-width, 100%);
  margin-left:var(--page-bleed-offset, 0px);
  margin-right:var(--page-bleed-offset, 0px);
  margin-top:auto;     /* push coverflow toward bottom; leaves empty space above */
  height:clamp(420px, 58svh, 660px);
  padding-bottom:8px;
}

#projects .filters{
  flex:0 0 auto;
  margin-top:0;
  width:var(--page-content-width, 100%);
  margin-left:var(--page-bleed-offset, 0px);
  margin-right:var(--page-bleed-offset, 0px);
}

#projects .project-grid{
  width:100%;
}
.project-grid{
  position:relative;
  flex:1 1 100%;
  align-self:stretch;
  width:100%;
  min-height:380px;
  overflow:visible;
  transform-style:preserve-3d;
  isolation:isolate;
}
.project-card{
  --cover-motion-duration:.32s;
  --cover-motion-ease:cubic-bezier(.22,1,.36,1);
  --cover-scale:1;
  --cover-rotate:0deg;
  --cover-lift:0px;
  --cover-z:1;
  --cover-left:0px;
  --cover-width:200px;
  --project-frame-color:rgba(255,255,255,.16);
  --project-frame-glow:rgba(255,255,255,.12);
  --grab-extra-scale:1;
  --grab-shift-y:0px;
  --grab-shrink-y:1;
  position:absolute;
  top:0;
  left:0;
  width:var(--cover-width);
  height:100%;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:2px solid color-mix(in oklab, var(--project-frame-color) 50%, var(--border));
  border-radius:16px;
  padding:16px;
  box-shadow:0 16px 30px var(--shadow), 0 0 0 1px rgba(255,255,255,.04);
  cursor:grab;
  transition:
    border-color .26s ease,
    box-shadow .26s ease,
    transform .28s cubic-bezier(.2,.7,.2,1),
    width .28s cubic-bezier(.2,.7,.2,1);
  display:flex;
  flex-direction:column;
  overflow:visible;
  transform:
    translate3d(var(--cover-left), calc(var(--cover-lift) + var(--grab-shift-y)), 0)
    rotateY(var(--cover-rotate))
    scale(calc(var(--cover-scale) * var(--grab-extra-scale)))
    scaleY(var(--grab-shrink-y));
  transform-origin:center center;
  z-index:var(--cover-z);
  opacity:calc(1 - (var(--cover-abs-distance, 0) * 0.04));
  filter:saturate(calc(1 - (var(--cover-abs-distance, 0) * 0.04)));
  will-change:transform, width;
}
.project-nav{
  /* Hidden on desktop coverflow — re-shown on mobile by the @media block
     below, where the project grid becomes a horizontal flex strip. */
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:60px;
  z-index:5;
  background:rgba(20,24,30,.72);
  color:#e8ecf2;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .15s ease, opacity .15s ease;
}
.project-nav:hover{ background:rgba(40,46,56,.88); }
.project-nav:disabled{ opacity:.35; cursor:default; }
.project-nav-left{  left:6px; }
.project-nav-right{ right:6px; }
.project-card.is-cover-active{
  border-color:var(--project-frame-color);
  border-width:3px;
  box-shadow:
    0 28px 56px rgba(0,0,0,.34),
    0 0 0 3px rgba(0,0,0,.3),
    0 0 0 6px var(--project-frame-glow);
  filter:none;
  opacity:1;
}
.project-card.is-cover-compressed{
  padding-inline:8px;
  border-color:color-mix(in oklab, var(--project-frame-color) 60%, var(--border));
  box-shadow:0 16px 30px var(--shadow), 0 0 0 2px color-mix(in oklab, var(--project-frame-glow) 50%, transparent);
}
.project-card.is-cover-compressed .project-card-header,
.project-card.is-cover-compressed .project-card-title,
.project-card.is-cover-compressed .project-card-subtitle,
.project-card.is-cover-compressed .project-card-details,
.project-card.is-cover-compressed .tag-row,
.project-card.is-cover-compressed .proj-thumb-dots{
  opacity:0;
  max-height:0;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
.project-card-header{
  /* Dots are absolutely positioned within this row so they don't steal width
   * from the title — title can fill the full row, dots draw on top of it.
   * overflow:hidden so dots get clipped at the card edge in compressed/narrow
   * states instead of poking out (the card itself stays overflow:visible to
   * preserve the focus ring). */
  position:relative;
  min-width:0;
  margin-bottom:10px;
  overflow:hidden;
}
.project-card-title{
  margin:0;
  font-size:clamp(1rem, 1.15vw, 1.18rem);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:
    opacity var(--cover-motion-duration) var(--cover-motion-ease),
    max-height var(--cover-motion-duration) var(--cover-motion-ease),
    margin var(--cover-motion-duration) var(--cover-motion-ease);
}
.project-card-subtitle{
  margin:8px 0 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Reserve the slot even when subtitle text is empty so card heights stay
   * stable across the row. */
  min-height:1.3em;
  line-height:1.2;
  font-size:clamp(1rem, 1.15vw, 1.18rem);
  font-weight:700;
  color:var(--text);
  transition:
    opacity var(--cover-motion-duration) var(--cover-motion-ease),
    max-height var(--cover-motion-duration) var(--cover-motion-ease),
    margin var(--cover-motion-duration) var(--cover-motion-ease);
}
.project-card-subtitle:empty::before{
  content:"\00a0"; /* non-breaking space keeps the line height even when empty */
}
.project-card-details{
  /* Allowed to grow — flex auto fills the space between subtitle and tag-row.
   * Long copy gets clamped only when there's truly no room. tag-row uses
   * margin-top:auto so this block claims everything in between. */
  margin:0 0 10px;
  flex:1 1 auto;
  min-height:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  /* High clamp acts as an upper safety bound; flexbox shrinks before the
   * clamp kicks in. The visible line count is governed by the available
   * height, not a fixed N. */
  -webkit-line-clamp:99;
  line-clamp:99;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:
    opacity var(--cover-motion-duration) var(--cover-motion-ease),
    margin var(--cover-motion-duration) var(--cover-motion-ease);
}
.project-card:hover,
.project-card:focus-within{
  border-color:color-mix(in oklab, var(--project-frame-color) 60%, rgba(255,255,255,.16));
}

/* ---------- Focus ring (clockwise border fill) ---------- */
.project-card::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:19px;
  background:conic-gradient(
    from -90deg,
    var(--project-frame-color) calc(var(--focus-progress) * 360deg),
    transparent calc(var(--focus-progress) * 360deg)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  padding:3px;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .15s ease;
}
.project-card.is-focusing::after{
  opacity:1;
  --focus-progress:1;
  transition:opacity .15s ease, --focus-progress 650ms linear;
}
.project-card.is-grabbed::after{
  opacity:1;
  --focus-progress:1;
  transition:opacity .15s ease;
}

/* ---------- Grabbed card state ---------- */
.project-card.is-grabbed{
  cursor:grabbing;
  transform-origin:bottom center;
  border-color:var(--project-frame-color);
  border-width:3px;
  box-shadow:
    0 28px 56px rgba(0,0,0,.38),
    0 0 0 3px rgba(0,0,0,.3),
    0 0 0 8px var(--project-frame-glow);
  filter:none;
  opacity:1;
  /* Sit above .grab-drops (z-index 200) so dropped images can never
     visually cover the grabbed card. */
  z-index:300 !important;
}

/* ---------- Grab choreography ----------

   Three overlapping stages, all driven by long CSS transitions so the user
   sees one continuous ~3s motion. JS just sets classes and CSS variables at
   the right moments.

     Stage 1 (t=0): .is-grab-grow on grabbed card → slow scale grow (3s)
     Stage 2 (t=220ms): .has-grab-align on grid → neighbors translate down
     Stage 3 (t=950ms): .has-grab-reorg on grid → neighbor widths/scales
                         redistributed by renderLayout on the long width-tween
*/

/* Stage 1 — grabbed card slowly grows over 3 full seconds. */
.project-card.is-grabbed.is-grab-grow{
  --grab-extra-scale:1.42;
  transition:
    transform 3000ms cubic-bezier(.22, 1, .36, 1),
    width 3000ms cubic-bezier(.22, 1, .36, 1),
    border-color .26s ease,
    box-shadow .26s ease;
}

/* Stage 2 transitions are set per-neighbor inline by JS so they can be
   staggered + scaled by distance from the grabbed card. */

/* Stage 3 — height equalization on a long slow tween while the grabbed
   card is still growing. Sine ease-in-out matches the per-card wave easing
   so the height-shrink rides smoothly on top of the bottom-align wave
   without a visible hand-off. !important is needed because Stage-2 inline
   per-card transitions (set by JS) would otherwise win the cascade. */
.project-grid.has-grab-reorg .project-card:not(.is-grabbed){
  transform-origin:bottom center;
  transition:
    transform 1800ms cubic-bezier(.45, .05, .55, .95),
    width 1800ms cubic-bezier(.45, .05, .55, .95),
    border-color .4s ease,
    box-shadow .4s ease !important;
}

/* ---------- Stack-of-paper visual ---------- */
.project-thumb.has-stack{
  position:relative;
  overflow:visible;
}
.project-thumb.has-stack::before,
.project-thumb.has-stack::after{
  content:'';
  position:absolute;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
}
.project-thumb.has-stack::before{
  inset:4px -3px -4px 3px;
  z-index:-1;
  transform:rotate(0.6deg);
  opacity:.7;
}
.project-thumb.has-stack::after{
  inset:7px -5px -7px 5px;
  z-index:-2;
  transform:rotate(1.1deg);
  opacity:.45;
}
.project-card.is-grabbed .project-thumb.has-stack::before{
  transform:rotate(0.8deg) translate(1px,2px);
}
.project-card.is-grabbed .project-thumb.has-stack::after{
  transform:rotate(1.4deg) translate(2px,3px);
}

.project-thumb{
  height:148px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transform-origin:center center;
  transition:
    height var(--cover-motion-duration) var(--cover-motion-ease),
    margin-bottom var(--cover-motion-duration) var(--cover-motion-ease);
}
.project-card-video-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:3;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(7,11,16,.68);
  color:#fff;
  font-size:.82rem;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  pointer-events:none;
}
.project-card.is-cover-active .project-thumb,
.project-card.is-grabbed .project-thumb{
  height:204px;
}
.project-card.is-cover-compressed .project-thumb{
  height:210px;
  margin-bottom:0;
}
.project-card .tag-row{margin-top:auto;position:relative}
.tag-row{display:flex;gap:6px;margin-top:12px}
.project-card .tag-row{
  flex-wrap:nowrap;
  overflow:hidden;
  opacity:1;
  /* Mask the right edge so clipped tags fade out instead of getting cut hard. */
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  transition:
    opacity var(--cover-motion-duration) var(--cover-motion-ease),
    margin var(--cover-motion-duration) var(--cover-motion-ease);
}
.project-card .tag-row .tag{
  flex:0 0 auto;
  font-size:.74rem;
  padding:2px 8px;
  white-space:nowrap;
}
.tag{
  font-size:.85rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:4px 8px;border-radius:999px;
  color:#dbe3ef;
  /* Keep icon + label on one line inside each pill, even in narrow containers
   * like the modal aside (280px). */
  white-space:nowrap;
}

@media (max-width: 980px){
  .project-grid{
    position:static;
    display:flex;
    justify-content:flex-start;
    align-items:stretch;
    gap:8px;
    height:auto;
    min-height:0;
    overflow-x:auto;
    overflow-y:visible;
    padding:8px 8px 20px;
    transform:none;
    scrollbar-width:none;
  }
  .project-grid::-webkit-scrollbar{
    display:none;
  }
  .project-card,
  .project-card.is-cover-active{
    position:static;
    flex:0 0 min(72vw, 290px);
    width:min(72vw, 290px);
    min-width:min(72vw, 290px);
    height:auto;
    transform:none;
    opacity:1;
    filter:none;
  }
}


/* ============================================
   TIMELINE SECTION
   ============================================ */
/* TIMELINE */
.timeline-section{height:420vh}
.timeline-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.timeline-top{
  position:absolute;left:0;right:0;top:70px;
  z-index:20;
}
.timeline-top-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:20;
  text-align:center;
  align-items:center;
  padding:10px 18px;
  border-radius:16px;
  background:rgba(15,17,21,.72);
  box-shadow:0 0 26px 16px rgba(15,17,21,.8);
}
.timeline-top-inner p{
  margin-top:6px;
}
.timeline-top-inner h2,
.timeline-top-inner p{
  text-shadow:0 2px 14px rgba(15,17,21,.9);
}
.timeline-top{
  transition: opacity 2s ease .5s;
}
.timeline-top.is-faded{
  opacity:0;
}
.timeline-mini{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:10px 12px;
  display:flex;gap:12px;
  backdrop-filter: blur(10px);
}
.mini-item{display:flex;flex-direction:column}
.mini-k{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.mini-v{font-weight:700}

.timeline-stage{position:relative;height:100%}

.sticky-toggle{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  padding: 6px 10px;
  z-index: 30;
}
.sticky-toggle:hover{ border-color: rgba(255,255,255,.20); }

.sticky-toggle.is-on{
  border-color: color-mix(in oklab, var(--accent) 70%, rgba(255,255,255,.12));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

.now-line{
  position:absolute;top:70px;height:calc(100% - 70px);width:2px;background:var(--accent);
  left:var(--stage-pad); z-index:15;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.timeline-year-pill{
  transition: box-shadow .4s ease;
}
.timeline-year-pill.glow{
  box-shadow:0 0 0 4px rgba(77,163,255,.16);
}

/* content wrapper that will be translated */
.timeline-content{
  position:absolute;left:0;top:0;height:100%;width:100%;
  transform: translateX(0px);
  will-change: transform;
  z-index:20;
}
.timeline-track{
  position:absolute;
  bottom:34px;
  height:2px;
  background:rgba(255,255,255,.14);
  border-radius:999px;
  z-index:23;
}
.event-dot{
  position:absolute;
  top:-10px;
  width:21px;height:21px;border-radius:50%;
  background:#ffffff;
  transform:translateX(-50%);
  border:1px solid rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  z-index:24;
}

.event-dot.minor{
  top:-7px;
  width:15px;
  height:15px;
  background:#6f7b8c;
  border-color: rgba(0,0,0,.35);
}
.event-dot.phase-milestone{
  box-shadow:0 0 0 3px rgba(245,194,76,.18), 0 0 18px rgba(245,194,76,.26);
  border-color:rgba(245,194,76,.92);
}
.event-dot.active{
  background:var(--accent);
  border:2px solid #ffffff;
  box-shadow:0 0 0 6px rgba(77,163,255,.20);
  transform:translateX(-50%) scale(1.7);
}
.event-dot.phase-milestone.active{
  box-shadow:0 0 0 6px rgba(77,163,255,.20), 0 0 22px rgba(245,194,76,.34);
}
.event-dot.minor.active{
  top:-10px;
  width:21px;
  height:21px;
  background:color-mix(in srgb, var(--accent) 75%, #2b3b52 25%);
  border-color:#ffffff;
}
.event-dot:hover{
  box-shadow:0 0 0 4px rgba(255,255,255,.16);
  transform:translateX(-50%) scale(1.08);
}
.event-dot.active:hover{
  transform:translateX(-50%) scale(1.75);
}
.event-dot.pop{
  animation: event-pop .18s ease-out;
}

@keyframes event-pop{
  0%{ transform:translateX(-50%) scale(1.7); }
  60%{ transform:translateX(-50%) scale(2.15); }
  100%{ transform:translateX(-50%) scale(1.7); }
}

.event-label{
  position:absolute;
  top:-34px;
  transform: translateX(-50%);
  font-size:.82rem;
  color:#dbe3ef;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.12);
  padding:3px 8px;border-radius:999px;
  white-space:nowrap;
  opacity:.0;
  transition: opacity .15s ease;
}

.event-label.minor{
  font-size:.76rem;
  color: rgba(219,227,239,.65);
  background: rgba(0,0,0,.18);
}
/* Hide labels in compressed mode when they would overlap */
.event-label.compressed-hidden{
  display:none;
}
/* But always show the label for the active dot, even if compressed-hidden */
.event-dot.active + .event-label.compressed-hidden{
  display:block;
  opacity:1;
}
.event-dot.active + .event-label{opacity:1}
.event-dot.active + .event-label {
  font-size: 1.08rem;
  font-weight: 600;
  top: -52px;
  background: rgba(20,24,30,.78);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px var(--shadow);
  padding: 8px 16px;
  z-index: 10;
}
.event-dot:hover + .event-label{opacity:1}

.chip-tier{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.chip-tier.tier-major{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.10));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.chip-tier.tier-minor{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.chip-milestone{
  color:rgba(245,194,76,.98);
  border-color:rgba(245,194,76,.34);
  background:rgba(245,194,76,.14);
}

.skill-graph{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

/* Hide graph visualization */
.timeline-section.hide-graph .skill-graph{
  display:none;
}
.timeline-section.hide-graph .curve-labels{
  display:none;
}

/* Hide skillset panel and expand details */
.timeline-section.hide-skillset .radar-overlay{
  display:none;
}
.timeline-section.hide-skillset .timeline-detail{
  left: calc((100vw - 1100px) / 2 + 20px);
  width: calc(1100px - 40px);
  max-width: calc(100vw - 40px);
}

.skill-legend{
  position:absolute;left:20px;top:88px;z-index:20;
  display:flex;gap:10px;flex-wrap:wrap;
}
.legend-chip{
  font-size:.82rem;color:#dbe3ef;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 8px;border-radius:999px;
}

/* Radar overlay (medium) */
.radar-overlay {
  position: absolute;
  top: 70px;
  bottom: 110px;
  left: calc((100vw - 1100px) / 2 + 20px);
  width: 395px;
  /* Match the detail panel's vertical span (top: 70px, bottom: 110px) so the
     two panels are visually equal in height. The SVG sits inside; the
     surrounding card chrome fills the rest of the box. */
  height: calc(100vh - 70px - 110px);
  max-height: calc(100vh - 70px - 120px);
  z-index: 30;
  pointer-events: none;
  background: rgba(20,24,30,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px var(--shadow);
  padding: 10px 10px 10px;
  opacity: 0;
  transform: translateX(-56px);
  transition: transform 0.26s ease-out, opacity 0.22s ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.radar-overlay.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-duration: 0.14s, 0.14s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), linear;
}

.skillset-close-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  font-size:0.9rem;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  padding:0;
  color:rgba(255,255,255,.65);
}
.skillset-close-btn:hover{
  background:rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.20);
  color:rgba(255,255,255,.85);
}
.skillset-reopen-btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  left:calc((100vw - 1100px) / 2 + 20px - 33px);
  width:32px;
  height:48px;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  font-size:1.4rem;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  padding:0;
  color:rgba(255,255,255,.65);
  z-index:26;
}
.skillset-reopen-btn:hover{
  background:rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.20);
  color:rgba(255,255,255,.85);
}
.timeline-section.hide-skillset .skillset-reopen-btn{
  display:flex;
}

.overlay-title{
  font-size:.8rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
  margin:2px 2px 4px;
}
.radar{width:100%;height:auto;display:block;transform:translate(-6px,-10px) scale(.92);transform-origin:center;overflow:visible;flex-shrink:1;min-height:0}
.radar .radar-vertex-value{
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.radar:hover .radar-vertex-value,
.radar:focus-within .radar-vertex-value{
  opacity:1;
}

.overlay-sub{
  margin-top:auto;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.overlay-subtitle{
  font-size:.72rem;
  color:rgba(255,255,255,.65);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 2px;
}

.bars-compact{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.bars-compact .bar{
  grid-template-columns:64px 1fr;
  font-size:.84rem;
}
.bars-compact .meter{height:7px}
.bars-compact .name{
  display:flex;
  align-items:center;
  gap:6px;
}
.meter-core{display:flex}
.fill-core-base{background:rgba(255,255,255,.22)}
.fill-core-step{background:rgba(245,194,76,.82)}
.core-step-note{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:999px;
  font-size:.68rem;
  line-height:1.2;
  color:rgba(245,194,76,.98);
  background:rgba(245,194,76,.12);
  border:1px solid rgba(245,194,76,.24);
}

.core-label{font-weight:600}
.core-art{color:var(--core-art)}
.core-code{color:var(--core-code)}
.core-product{color:var(--core-product)}

.timeline-detail {
  position: absolute;
  left: calc((100vw - 1100px) / 2 + 431px);
  top: 70px;
  bottom: 110px;
  height: auto;
  max-height: calc(100vh - 70px - 120px);
  transform: translateX(56px);
  width: 640px;
  background: rgba(20,24,30,.62);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  padding: 8px 16px 16px;
  z-index: 25;
  box-shadow: 0 22px 44px var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.26s ease-out, opacity 0.22s ease-out, width 0.26s ease-out, left 0.26s ease-out;
}

.timeline-detail.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-duration: 0.14s, 0.14s, 0.22s, 0.22s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), linear, ease-out, ease-out;
}
.detail-scroll{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
  max-height:calc(66.666% - 6px);
  overflow-y:hidden;
  overflow-x:hidden;
  padding-right:0;
}
/* Pin the image strip to the bottom of .detail-scroll so it sits flush
   against the bars separator. Everything before it (description, outcomes,
   keystone) flows naturally from the top. The 10px margin-top keeps the
   keystone "Key achievement" card from visually colliding with the top of
   the image strip when the panel is short. */
.detail-scroll > .detail-links{
  margin-top:auto;
  padding-top:10px;
}

.detail-fixed{
  flex:0 0 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.detail-scroll::-webkit-scrollbar{
  width: 8px;
}
.detail-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 4px;
}
.detail-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 4px;
}
.detail-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.18);
}


.timeline-section:not(.is-active) .radar-overlay,
.timeline-section:not(.is-active) .timeline-detail{
  transition-duration:.2s;
}

@media (prefers-reduced-motion: reduce){
  .radar-overlay,
  .timeline-detail{
    transition:none;
    opacity:1;
    transform:none;
  }
}
/* ── Outcomes block (Task 1) ── */
.detail-outcomes{
  margin:0;
}
.detail-outcomes:empty{
  display:none;
}
.detail-outcomes-heading{
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin:8px 0 4px;
}
.detail-outcomes-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.detail-outcomes-list li{
  position:relative;
  padding-left:14px;
  font-size:.92rem;
  line-height:1.4;
  color:rgba(255,255,255,.86);
}
.detail-outcomes-list li::before{
  content:"▸";
  position:absolute;
  left:0;
  top:0;
  color:rgba(255,255,255,.45);
  font-size:.85em;
}
.detail-outcomes-list li strong{
  color:#fff;
  font-weight:600;
}

/* ── Description bold emphasis (Task 2) ── */
#detailDesc strong{
  color:#fff;
  font-weight:600;
}

/* ── Inline header: title left, contribution + org chips right (same row) ── */
.detail-head--inline{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:nowrap;
}
.detail-head--inline .detail-head-text{
  flex:1 1 auto;
  min-width:0;
}
.chip-row--inline{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:4px 6px;
  margin-top:0;
  max-width:50%;
  white-space:nowrap;
}
.chip-row--inline .chip{
  white-space:nowrap;
}

.detail-top-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  flex:0 0 auto;
}
.detail-tier{
  display:flex;
  justify-content:flex-end;
  margin:0;
  flex:0 0 auto;
}
.detail-gains{
  margin-top:0;
}
.detail-keystone{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:40px;
  flex:0 0 40px;
  margin-top:0;
  padding-top:4px;
}
.gain-source-val{
  font-weight:600;
  margin-left:4px;
}
.detail-head{display:flex;gap:8px;align-items:center;padding-right:0;margin-top:10px;flex:0 0 auto}
.detail-head h3{
  margin:0;
  line-height:1.12;
  font-size:1.34rem;
  letter-spacing:.01em;
}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.chip{
  font-size:.82rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:4px 8px;border-radius:999px;
}
.detail-scroll .chip-row{
  gap:6px 8px;
  row-gap:8px;
  margin-bottom:0;
  padding-top:2px;
  padding-bottom:4px;
  padding-right:0;
}
.detail-scroll .chip-row--inline{
  flex:0 0 auto;
  justify-content:flex-end;
  margin-left:auto;
  flex-wrap:nowrap;
  white-space:nowrap;
}
#detailChips.chip-row{
  display:flex;
  flex-wrap:nowrap;
}
.detail-scroll .chip{
  font-size:.62rem;
  padding:2px 6px;
  border-color:rgba(255,255,255,.08);
  color:rgba(219,227,239,.78);
}
.detail-tier .chip{
  font-size:.62rem;
  padding:2px 6px;
  letter-spacing:.02em;
}
.chip-keystone{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.02em;
  color:color-mix(in srgb, var(--accent) 84%, #fff 16%);
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.10));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
#detailSubtitle{
  display:none;
}
#detailDesc{
  margin:6px 0 0;
  flex:0 0 6.4em;
  max-height:6.4em;
  overflow:hidden;
}
.detail-keystone{
  margin-top:6px;
}
.keystone-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:100%;
}
.keystone-copy{
  margin:0;
  font-size:.68rem;
  line-height:1.25;
  color:rgba(219,227,239,.82);
  text-align:left;
  flex:1 1 auto;
  min-width:0;
}
.detail-split{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
.detail-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.bars{display:flex;flex-direction:column;gap:4px}
.timeline-detail .bars{gap:2px}
.bar{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:7px;align-items:center;
  font-size:.9rem;
}
.bar-with-slot{
  align-items:end;
}
.bar-main{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.gain-slot{
  min-height:20px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}
.gain-slot-content{
  min-height:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:flex-start;
  gap:2px 8px;
  width:100%;
  text-align:left;
}
.gain-slot-content-empty{
  visibility:hidden;
}
.gain-slot-item{
  font-size:.68rem;
  line-height:1.1;
  color:rgba(219,227,239,.85);
  white-space:nowrap;
}
.bar .name{
  color:rgba(219,227,239,.75);
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.bar-with-slot .name{
  align-self:end;
  padding-bottom:1px;
}
.meter{height:8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.fill{
  height:100%;
  background:rgba(255,255,255,.22);
  width:0%;
  transition: width .55s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .fill{transition:none}
}
.val{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.detail-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1 1 0;
  min-height:0;
  justify-content:center;
  margin-top:8px;
  margin-bottom:0;
}
.detail-link-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.detail-project-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
  width:100%;
}
.detail-project-links--pattern{
  position:relative;
  flex:0 1 clamp(170px, 22vh, 230px);
  min-height:clamp(170px, 22vh, 230px);
  height:clamp(170px, 22vh, 230px);
  gap:0;
  overflow:hidden;
  --milestone-gap:6px;
}
.link-pill{
  font-size:.9rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:7px 10px;border-radius:999px;
}
.link-pill:hover{border-color:rgba(255,255,255,.18);color:var(--accent)}
.link-pill-btn{
  color:var(--text);
  cursor:pointer;
  font:inherit;
  line-height:inherit;
}

.timeline-footer{position:absolute;left:20px;bottom:18px;z-index:20}

.timeline-footer{left:var(--stage-pad)}

.timeline-year{
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  z-index:22;
  user-select:none;
  cursor:grab;
}
.timeline-stage.dragging .timeline-year{
  cursor:grabbing;
}
.timeline-year-pill{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.timeline-year-v{font-weight:800;letter-spacing:.02em}

/* Floating curve labels */
.curve-labels{
  position:absolute;
  right:20px;
  top:70px;
  bottom:34px;
  pointer-events:none;
  z-index:19;
}
.curve-label{
  position:absolute;
  right:0;
  font-size:0.88rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:4px 10px;
  background:rgba(20,24,30,.62);
  border:1px solid currentColor;
  border-radius:8px;
  backdrop-filter:blur(8px);
  transform:translateY(-50%);
  transition:top 0.3s ease;
}

/* Secret settings */
.settings{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:12px;
  z-index:5000;
  background:rgba(0,0,0,.55);
  overflow-y:auto;
}
.settings.open{display:flex}
.settings-card{
  width:min(520px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  padding:18px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) rgba(255,255,255,.06);
}
.settings-card::-webkit-scrollbar{width:10px}
.settings-card::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
.settings-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px;border:2px solid rgba(0,0,0,0)}
.settings-card::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.30)}
.settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.settings-title{font-weight:800;font-size:1.2rem;margin-bottom:4px}
.icon-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}
.icon-btn:hover{border-color:rgba(255,255,255,.28);color:var(--accent)}
.settings-row{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-row label{font-weight:500;font-size:0.95rem}
.settings-row input[type="color"]{
  width:60px;height:40px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:transparent;cursor:pointer;
}
.settings-section-label{
  margin-top:16px;
  margin-bottom:8px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
  font-weight:700;
  font-size:.85rem;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.8px;
}
.settings-section-label:first-of-type{border-top:none;padding-top:0}
.settings-presets{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.preset{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-size:0.9rem;
  font-weight:500;
  transition:all 0.2s ease;
}
.preset:hover{border-color:rgba(255,255,255,.22);color:var(--accent);background:rgba(255,255,255,.08)}
.settings-actions{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:flex-end;gap:10px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 40px var(--shadow);
}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}

.contact-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.contact-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 10px;border-radius:12px;
}

.footer{
  max-width:1100px;margin:0 auto;padding:26px 20px 40px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08);
}

.robot-line{display:flex;align-items:center;gap:8px}
.robot-btn{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
  transition: transform .2s ease;
}
.robot-btn:hover{transform:translateY(-1px)}

.robot-settings{
  position:fixed;
  right:20px;
  bottom:20px;
  display:none;
  z-index:2200;
}
.robot-settings.open{display:block}
.robot-settings-card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  padding:14px 16px 16px;
  min-width:260px;
}
.robot-settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.robot-settings-title{font-weight:700;font-size:.95rem}
.robot-settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.robot-range{display:flex;align-items:center;gap:10px}
.robot-range input[type="range"]{
  width:120px;
}
.robot-range-val{
  min-width:30px;
  text-align:right;
  color:var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .hero{padding:56px 20px 88px}
  .hero-copy{justify-content:flex-start}
  body.hero-samples-active .hero-card{transform:translateY(48px)}
  .filter-hint{margin-left:0}
  .filter-tip{margin-left:0}
  .filters{grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px}
  .filter-tip{display:none}
  .filter{flex-direction:column;align-items:flex-start;gap:6px}
  .two-col{grid-template-columns:1fr}
  /* Mobile timeline: the radar (hex graph) used to hold its full desktop
     vertical band (top:70px → bottom:110px) which collided with the detail
     panel that re-stacks below it. On mobile the radar takes the UPPER
     portion only, leaving the lower portion free for the detail content. */
  .radar-overlay{
    width:260px;
    left:20px;
    right:auto;
    bottom:auto;
    height:auto;
    max-height:calc(50vh - 70px);
  }
  .now-line{left:20px}
  :root{--stage-pad:20px}
  .timeline-detail{position:absolute;left:20px;right:20px;top:auto;bottom:calc(var(--timeline-year-height) + 8px);transform:none;max-height:unset;width:auto}
  .timeline-track{bottom:64px}
  .timeline-footer{left:20px}
  .nav-timeline-controls{gap:8px}
  .sticky-toggle{font-size:0.78rem;padding:5px 8px}
  .overlay-float-controls{left:8px;bottom:calc(var(--timeline-year-height) + 18px)}
  /* Re-enable the prev/next buttons on mobile — desktop coverflow hides
     them because grab-mode replaces their function. The mobile flex strip
     scrolls horizontally and the buttons are the obvious affordance. */
  .project-nav{ display:flex; }
  .project-nav-left{  left:4px; }
  .project-nav-right{ right:4px; }
  .project-grid-wrapper{ position:relative; }
  .project-card{flex:0 0 calc((100% - 18px) / 2);min-width:200px;}
}


/* Detail panel density */
.timeline-detail{font-size:0.92rem;}
.timeline-detail h3{font-size:1.05rem;}
.timeline-detail .muted{font-size:0.92em;}

/* Project Modal */
.project-modal{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
}
.project-modal.open{
  display:flex;
}
.project-modal-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(8px);
  animation:fadeIn 0.3s ease;
}
.project-modal-content{
  position:relative;
  max-width:none;
  width:100%;
  max-height:100vh;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:0;
  box-shadow:0 30px 60px rgba(0,0,0,.6);
  overflow-y:auto;
  animation:slideUp 0.4s cubic-bezier(.4,0,.2,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) rgba(255,255,255,.04);
}
.project-modal-content::-webkit-scrollbar{
  width:10px;
}
.project-modal-content::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:5px;
}
.project-modal-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:5px;
}
.project-modal-content::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.18);
}
.project-modal-close{
  position:static;
  width:44px;
  height:44px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:flex-end;
  flex:0 0 auto;
}
.project-modal-close:hover{
  background:rgba(0,0,0,.85);
  border-color:var(--accent);
  color:var(--accent);
}
.project-modal-header{
  max-width:1100px;
  margin:0 auto;
  padding:72px 40px 28px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
}
.project-modal-header-main{
  flex:1 1 auto;
  min-width:0;
}
.project-modal-header-aside{
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-end;
  text-align:right;
  max-width:46%;
}
.project-modal-header-block h3{
  margin:0 0 6px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.project-modal-header-block:empty{ display:none; }
.project-modal-header-aside .tag-row{
  justify-content:flex-end;
  margin-top:0;
}
.project-modal-header h2{
  margin:0 0 8px;
  font-size:2.25rem;
  line-height:1.2;
}
.project-modal-meta{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:0.9rem;
}
.project-modal-body{
  max-width:1100px;
  margin:0 auto;
  padding:32px 40px 56px;
}
.project-modal-section{
  margin-bottom:28px;
}
.project-modal-body-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:40px;
  align-items:start;
}
.project-modal-body-main > .project-modal-section:last-child{
  margin-bottom:0;
}
.project-modal-body-aside{
  display:flex;
  flex-direction:column;
  gap:22px;
  position:sticky;
  top:24px;
}
.project-modal-body-aside > .project-modal-close{
  margin-bottom:2px;
}
.project-modal-meta-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.project-modal-meta-block h3{
  margin:0;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.project-modal-meta-block .tag-row,
.project-modal-meta-block .chip-row{
  margin:0;
}
.project-modal-meta-block .project-modal-list{
  padding-left:18px;
  font-size:0.92rem;
  line-height:1.55;
}
.project-modal-meta-block:empty{ display:none; }
.project-modal-section:last-child{
  margin-bottom:0;
}
.project-modal-section h3{
  margin:0 0 12px;
  font-size:1.15rem;
  color:var(--text);
}
.project-modal-section p{
  margin:0;
  line-height:1.6;
}
.project-modal-videos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:16px;
}
.project-modal-video-item{
  min-width:0;
}
.project-modal-video-wrap{
  width:100%;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.project-modal-video-label{
  margin-top:8px;
  font-size:0.9rem;
}
.project-modal-video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.project-modal-images{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
  margin-bottom:24px;
}
.project-modal-image{
  width:100%;
  aspect-ratio:16/9;
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
}
.project-modal-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-modal-list{
  margin:0;
  padding-left:20px;
  color:var(--muted);
  line-height:1.8;
}
.project-modal-list li{
  margin-bottom:6px;
}
.project-modal-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.project-modal-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  font-size:0.9rem;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.project-modal-link:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:var(--accent);
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes slideUp{
  from{ 
    transform:translateY(30px);
    opacity:0;
  }
  to{ 
    transform:translateY(0);
    opacity:1;
  }
}

@media (max-width: 860px){
  .project-modal-content{
    border-radius:0;
  }
  .project-modal-header{
    padding:50px 20px 16px;
    flex-direction:column;
    gap:18px;
  }
  .project-modal-header-aside{
    align-items:flex-start;
    text-align:left;
    max-width:100%;
  }
  .project-modal-header-aside .tag-row{
    justify-content:flex-start;
  }
  .project-modal-body{
    padding:20px;
  }
  .project-modal-body-grid{
    grid-template-columns:minmax(0, 1fr);
    gap:24px;
  }
  .project-modal-body-aside{
    position:static;
  }
  .project-modal-close{
    align-self:flex-start;
  }
  .project-modal-header h2{
    font-size:1.5rem;
  }
}

/* ============================================
   PORTKEY ACCESS
   ============================================ */
.portkey-locked-surface{
  position:relative;
}
.portkey-locked-surface > :not(.portkey-overlay){
  filter:blur(12px);
  opacity:.18;
  pointer-events:none;
  user-select:none;
}
.portkey-overlay{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.portkey-card{
  width:min(540px, 100%);
  padding:24px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(23,26,32,.96), rgba(18,21,27,.98));
  box-shadow:0 22px 54px rgba(0,0,0,.4);
}
.portkey-eyebrow{
  margin-bottom:10px;
  color:#f7c66a;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.76rem;
  font-weight:700;
}
.portkey-card h3{
  margin:0 0 10px;
  font-size:1.45rem;
}
.portkey-card p{
  margin:0 0 14px;
  color:var(--muted);
}
.portkey-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.portkey-input{
  flex:1 1 240px;
  min-width:220px;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.portkey-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.portkey-status{
  margin-top:14px;
  min-height:1.4em;
  color:var(--muted);
}
.portkey-status.is-error{
  color:#ff9b95;
}
.portkey-status.is-success{
  color:#9ce0bb;
}
/* Extra locked-state hiding below the full-surface PortKey overlays. Currently:
      - Grey-category project cards (early/foundation work)
      - The very first timeline milestone (Digital Visual Foundation)
   Any unlock (welcome link or any other invite) removes the overlays and
   reveals these hidden items. */
body.portkey-locked .project-card[data-category="gray"]{
  display:none !important;
}
body.portkey-locked .event-dot[data-event-id="evt-2001-photoshop-studio"],
body.portkey-locked .event-label[data-event-id="evt-2001-photoshop-studio"]{
  display:none !important;
}

/* Experimental-only contact links (X, YouTube): hidden in the locked state and
   under curated/neutral invites; revealed for experimental, private, and
   discovery categories. Add data-portkey-experimental to any other link that
   should follow the same rule. */
body.portkey-locked .contact-item--experimental,
body.portkey-cat-curated .contact-item--experimental,
body.portkey-cat-neutral .contact-item--experimental,
body.portkey-cat-none .contact-item--experimental{
  display:none !important;
}

/* PortKey nav popup (enter different key while unlocked) */
.portkey-nav-popup{
  position:fixed;
  inset:0;
  z-index:7000;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:60px 16px 16px;
}
.portkey-nav-popup.is-contextual{
  align-items:center;
  justify-content:center;
  padding:16px;
}
.portkey-nav-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  animation:riddleFadeIn .2s ease;
}
.portkey-nav-popup-card{
  position:relative;
  width:min(360px, calc(100vw - 32px));
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(23,26,32,.97), rgba(18,21,27,.99));
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  z-index:1;
  animation:riddleConsoleIn .25s ease;
}
.portkey-nav-popup.is-contextual .portkey-nav-popup-card{
  width:min(440px, calc(100vw - 32px));
  padding:22px;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 24px 70px rgba(0,0,0,.62);
}
.portkey-nav-popup-copy{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.45;
}
.portkey-nav-popup-card .portkey-form{
  margin-top:12px;
}
.portkey-nav-popup-card .portkey-status{
  margin-top:8px;
  font-size:.82rem;
}

/* PortKey reset button (after 3 failures) */
.portkey-reset-btn{
  margin-top:10px;
  font-size:.88rem;
  min-width:0;
  padding:6px 14px;
  animation:riddleFadeIn .3s ease;
}

/* ============================================
   IMAGE SYSTEM — cards, modal, lightbox, hero
   ============================================ */

/* ---------- Project card carousel ---------- */
.project-thumb{
  position:relative;
  overflow:hidden;
}
.proj-thumb-frames{
  position:absolute;
  inset:0;
}
.proj-thumb-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.proj-thumb-frame.is-active{
  opacity:1;
}
.proj-thumb-frame.is-static{
  position:static;
  opacity:1;
  transition:none;
  border-radius:inherit;
}
.proj-thumb-dots{
  position:absolute;
  bottom:8px;
  right:8px;
  display:flex;
  gap:5px;
  z-index:2;
  pointer-events:none;
  max-height:24px;
  opacity:1;
  transition:
    opacity var(--cover-motion-duration) var(--cover-motion-ease),
    max-height var(--cover-motion-duration) var(--cover-motion-ease),
    margin var(--cover-motion-duration) var(--cover-motion-ease);
}
/* Card dots live in the header row above the image, anchored to its right.
 * Absolutely positioned so they overlay the title rather than reserving width
 * — the title's ellipsis simply ignores the dots area. The vertical nudge
 * lines them up with the visual baseline where a "..." would sit. */
.proj-thumb-dots.proj-thumb-dots-above{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(calc(-50% + 3px));
  align-items:center;
  pointer-events:none;
}
.carousel-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  border:none;
  padding:0;
  cursor:default;
  transition:background .2s ease, transform .2s ease;
}
.carousel-dot.is-active{
  background:var(--accent);
  transform:scale(1.25);
}
/* Star marker for dots whose image also appears in the hero samples.
 * Wired in Slice 6, lit up in Slice 7 once images carry an isSample flag. */
.proj-thumb-dots-above .carousel-dot.is-sample-marker{
  background:transparent;
  width:auto;
  height:auto;
  font-size:.78rem;
  line-height:1;
  color:rgba(255,255,255,.55);
  transform:translateY(-1px);
}
.proj-thumb-dots-above .carousel-dot.is-sample-marker::before{
  content:"\2605"; /* ★ */
}
.proj-thumb-dots-above .carousel-dot.is-sample-marker.is-active{
  color:var(--accent);
  transform:translateY(-1px) scale(1.2);
}

/* FLIP clone of a project card during modal-open transition. Sits at z=2999
 * (just below the modal at 3000), inherits the card chrome but suppresses
 * stateful overlays and stack pseudo-elements that don't make sense in a
 * one-shot animation. */
.project-card-flip-clone{
  /* All position/size/transform/transition values are set inline by JS. */
  display:flex;
  flex-direction:column;
}
.project-card-flip-clone::before,
.project-card-flip-clone::after{
  display:none !important;
}

/* ---------- Modal carousel ---------- */
.modal-carousel{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}
.modal-carousel-frames{
  position:absolute;
  inset:0;
}
.modal-carousel-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  opacity:0;
  transition:opacity .6s ease;
  cursor:zoom-in;
  pointer-events:none;
}
.modal-carousel-frame.is-active{
  opacity:1;
  pointer-events:auto;
}
.modal-carousel.is-fullscreen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  aspect-ratio:auto;
  margin:0;
  border:0;
  border-radius:0;
  background:rgba(0,0,0,.94);
  z-index:2600;
}
.modal-carousel.is-fullscreen .modal-carousel-frame{
  cursor:zoom-out;
}
.modal-carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.modal-carousel-nav:hover{
  background:rgba(0,0,0,.85);
  border-color:var(--accent);
  color:var(--accent);
}
.modal-carousel-nav.prev{ left:18px; }
.modal-carousel-nav.next{ right:18px; }
.modal-carousel-caption{
  position:absolute;
  top:8px;
  left:10px;
  font-size:0.75rem;
  color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.45);
  padding:3px 8px;
  border-radius:999px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.modal-carousel-caption:empty{ display:none; }

/* Modal gallery dots. */
.modal-carousel-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(7,11,16,.5);
  backdrop-filter:blur(14px);
  z-index:3;
}
.modal-carousel-dots:empty{ display:none; }
.modal-carousel-dots .carousel-dot{
  position:relative;
  width:10px;
  height:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.18);
  cursor:pointer;
  pointer-events:auto;
  transition:width .25s ease, background .2s ease, border-color .2s ease;
}
.modal-carousel-dots .carousel-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 80%, #fff) 0%, var(--accent) 100%);
  transform:scaleX(0);
  transform-origin:left center;
}
.modal-carousel-dots .carousel-dot.is-active{
  width:10px;
  background:var(--accent);
  border-color:color-mix(in oklab, var(--accent) 70%, #fff);
  transform:none;
}

.project-modal-images{
  display:block;
  margin-bottom:24px;
}
/* ---------- Timeline project thumbnail link ---------- */
.project-thumb-link{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  flex:0 1 calc((100% - 40px) / 5);
  width:auto;
  min-width:88px;
  max-width:calc((100% - 40px) / 5);
  aspect-ratio:1 / 1;
  padding:0;
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s ease, transform .15s ease;
  position:relative;
}
.detail-project-links--pattern .project-thumb-link--detail-layout{
  position:absolute;
  left:calc(var(--thumb-left) + var(--milestone-gap) / 2);
  top:calc(var(--thumb-top) + var(--milestone-gap) / 2);
  width:calc(var(--thumb-w, var(--thumb-size)) - var(--milestone-gap));
  height:calc(var(--thumb-h, var(--thumb-size)) - var(--milestone-gap));
  min-width:0;
  max-width:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  transform:none;
  z-index:1;
}
.project-thumb-link img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--thumb-image-pos, center center);
  transform:scale(var(--thumb-image-scale, 1));
  transform-origin:center center;
  display:block;
}
.project-thumb-link-video-play{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(7,11,16,.72);
  color:#fff;
  font-size:1rem;
  line-height:1;
  transform:translate(-50%, -50%);
  box-shadow:0 14px 28px rgba(0,0,0,.38);
  pointer-events:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.project-thumb-link.has-video img{
  filter:saturate(.96) brightness(.86);
}
.project-thumb-link.has-video:hover .project-thumb-link-video-play,
.project-thumb-link.has-video:focus-visible .project-thumb-link-video-play{
  background:rgba(0,0,0,.88);
  border-color:var(--accent);
  color:var(--accent);
  transform:translate(-50%, -50%) scale(1.08);
}
.project-thumb-link-title{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  font-size:.68rem;
  line-height:1.15;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.85));
  color:#fff;
  padding:14px 4px 4px;
  text-align:center;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-thumb-link:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.detail-project-links--pattern .project-thumb-link:hover{
  transform:none;
  filter:brightness(1.08);
}
.project-thumb-link.is-preview,
.link-pill-btn.is-preview{
  opacity:.76;
}
.project-thumb-link.is-preview{
  border-color:rgba(255,255,255,.08);
}
.project-thumb-link.is-preview img{
  filter:saturate(.72) brightness(.84);
}
.project-thumb-link.is-preview:hover,
.project-thumb-link.is-preview:focus-visible{
  opacity:.92;
  border-color:rgba(245,194,76,.4);
}
.link-pill-btn.is-preview{
  border-color:rgba(255,255,255,.08);
  color:rgba(230,232,236,.78);
}
.project-thumb-link:hover .project-thumb-link-title,
.project-thumb-link:focus-visible .project-thumb-link-title{
  opacity:1;
}

/* ---------- Hero slideshow ---------- */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:0;
  opacity:.2;
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.85) 30%, rgba(0,0,0,0) 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.85) 30%, rgba(0,0,0,0) 80%);
  transition:opacity .45s ease, mask-image .45s ease, -webkit-mask-image .45s ease;
}
.hero-slideshow-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:var(--hero-slide-fit, cover);
  object-position:var(--hero-slide-object-position, center 18%);
  transform:scale(var(--hero-slide-scale, 1));
  transform-origin:center center;
  opacity:0;
  will-change:opacity, transform;
  transition:
    opacity 1.2s ease,
    transform var(--hero-slide-duration-ms, 16000ms) linear;
}
.hero-slideshow-frame.is-active{
  opacity:1;
  transform:scale(var(--hero-slide-active-scale, 1.08));
}
.hero-slideshow.is-samples-view .hero-slideshow-frame,
.hero-slideshow.is-mode-switching .hero-slideshow-frame{
  transition:
    opacity .9s ease,
    transform .7s cubic-bezier(.2,.7,.2,1);
}
.hero-slideshow.is-samples-view[data-samples-zoom="1"]{
  --hero-slide-fit: cover;
  --hero-slide-object-position: center 18%;
  --hero-slide-scale: 1;
  --hero-slide-active-scale: 1;
}
.hero-slideshow.is-samples-view[data-samples-zoom="2"]{
  --hero-slide-fit: contain;
  --hero-slide-object-position: center center;
  --hero-slide-scale: .985;
  --hero-slide-active-scale: .985;
}
.hero-slideshow.is-manual{
  background:rgba(5,10,16,.72);
}
.hero-slideshow.is-manual .hero-slideshow-frame{
  transition:opacity .6s ease, transform .35s ease;
}
.hero-slideshow.is-manual .hero-slideshow-frame.is-active{
  transform:scale(var(--hero-slide-active-scale, 1));
}
.hero-slideshow-edge-nav{
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(72px, 9vw, 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:linear-gradient(90deg, rgba(5,10,16,.66), rgba(5,10,16,0));
  color:rgba(255,255,255,.92);
  font-size:clamp(2.6rem, 6vw, 4.25rem);
  font-weight:300;
  opacity:0;
  pointer-events:none;
  z-index:2;
  cursor:pointer;
  transition:opacity .22s ease, transform .22s ease, background .22s ease;
}
.hero-slideshow-edge-nav.is-left{
  left:0;
  transform:translateX(-12px);
}
.hero-slideshow-edge-nav.is-right{
  right:0;
  transform:translateX(12px);
  background:linear-gradient(270deg, rgba(5,10,16,.66), rgba(5,10,16,0));
}
.hero-slideshow-edge-nav.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
.hero-slideshow-edge-nav:hover{
  background:linear-gradient(90deg, rgba(5,10,16,.82), rgba(5,10,16,.08));
}
.hero-slideshow-edge-nav.is-right:hover{
  background:linear-gradient(270deg, rgba(5,10,16,.82), rgba(5,10,16,.08));
}
.hero-slideshow-edge-nav:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 72%, white);
  outline-offset:-2px;
}
.hero-slideshow-dots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(10px);
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(7,11,16,.42);
  backdrop-filter:blur(14px);
  z-index:2;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.hero-slideshow-dots .carousel-dot{
  position:relative;
  width:10px;
  height:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.18);
  cursor:pointer;
  pointer-events:auto;
  transition:width .25s ease, background .2s ease, border-color .2s ease;
}
.hero-slideshow-dots .carousel-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 80%, #fff) 0%, var(--accent) 100%);
  transform:scaleX(0);
  transform-origin:left center;
}
.hero-slideshow-dots .carousel-dot.is-active{
  width:34px;
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.32);
  transform:none;
}
.hero-slideshow-dots.is-autoplay .carousel-dot.is-active::after{
  animation:heroDotProgress var(--hero-slide-progress-ms, 16000ms) linear forwards;
}
.hero-slideshow-dots:not(.is-autoplay) .carousel-dot.is-active::after{
  transform:scaleX(1);
}
.hero-slideshow-dots .carousel-dot:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 72%, white);
  outline-offset:2px;
}
@keyframes heroDotProgress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
.hero-grid{
  position:relative;
  z-index:1;
}
body.hero-samples-active .hero-slideshow{
  opacity:.78;
  mask-image:none;
  -webkit-mask-image:none;
}
body.hero-samples-active .hero-slideshow-dots{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
body.hero-samples-active .hero-slideshow.is-manual .hero-slideshow-frame{
  object-fit:contain;
  object-position:center center;
}
body.hero-samples-active .hero-copy{
  transform:translateY(-18px);
}
body.hero-samples-active .hero-copy .lead,
body.hero-samples-active .hero-copy .pill-row,
body.hero-samples-active .hero-name-sub{
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
}
body.hero-samples-active .hero-card{
  opacity:0;
  transform:translateX(120px);
  pointer-events:none;
}

/* ===== Riddle celebration overlay ===== */
.riddle-celebration{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.riddle-celebration.open{display:flex}
.riddle-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(12px);
  animation:riddleFadeIn .4s ease;
}
@keyframes riddleFadeIn{from{opacity:0}to{opacity:1}}

.riddle-console{
  position:relative;
  width:min(520px,calc(100vw - 40px));
  max-height:calc(100dvh - 40px);
  background:#0a0e14;
  border:1px solid #1a3a1a;
  border-radius:14px;
  box-shadow:0 0 80px rgba(0,255,65,.12), 0 0 2px rgba(0,255,65,.3), 0 30px 60px rgba(0,0,0,.7);
  padding:28px 24px 24px;
  overflow:hidden;
  z-index:1;
  animation:riddleConsoleIn .5s ease;
}
@keyframes riddleConsoleIn{
  from{opacity:0;transform:scale(.92) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* Scanlines */
.riddle-scanlines{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,65,.03) 2px,
    rgba(0,255,65,.03) 4px
  );
  pointer-events:none;
  border-radius:14px;
  z-index:2;
}

/* Terminal text */
.riddle-terminal{
  font-family:'Courier New',Courier,monospace;
  font-size:.88rem;
  line-height:1.7;
  color:#00ff41;
  min-height:140px;
  position:relative;
  z-index:3;
  text-shadow:0 0 6px rgba(0,255,65,.4);
}
.riddle-terminal .riddle-line{
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .25s ease, transform .25s ease;
  white-space:pre;
}
.riddle-terminal .riddle-line.visible{
  opacity:1;
  transform:translateX(0);
}
.riddle-terminal .riddle-line .cursor{
  display:inline-block;
  width:8px;
  height:1.1em;
  background:#00ff41;
  vertical-align:text-bottom;
  animation:riddleBlink .6s step-end infinite;
  margin-left:2px;
}
@keyframes riddleBlink{50%{opacity:0}}

/* Emoji stage */
.riddle-emoji-stage{
  position:relative;
  text-align:center;
  min-height:100px;
  margin:18px 0 8px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.riddle-present{
  font-size:4rem;
  display:inline-block;
  opacity:0;
  transform:scale(0);
}
.riddle-present.growing{
  opacity:1;
  animation:riddleGrow 1.2s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes riddleGrow{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.15);opacity:1}
  70%{transform:scale(.95)}
  100%{transform:scale(1);opacity:1}
}
.riddle-present.popping{
  animation:riddlePop .5s ease forwards;
}
@keyframes riddlePop{
  0%{transform:scale(1);opacity:1}
  40%{transform:scale(1.6);opacity:.8}
  100%{transform:scale(2.5);opacity:0;filter:blur(6px)}
}

.riddle-gieskanne{
  position:absolute;
  width:96px;
  height:96px;
  opacity:0;
  transform:scale(0);
  filter:drop-shadow(0 0 20px rgba(74,222,128,.5));
}
.riddle-gieskanne.revealed{
  animation:riddleReveal .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes riddleReveal{
  0%{transform:scale(0) rotate(-20deg);opacity:0}
  60%{transform:scale(1.15) rotate(5deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}

/* Sparkle burst around revealed emoji */
.riddle-emoji-stage .riddle-sparkle{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#00ff41;
  opacity:0;
  pointer-events:none;
}
.riddle-emoji-stage .riddle-sparkle.burst{
  animation:riddleSparkleBurst .7s ease-out forwards;
}
@keyframes riddleSparkleBurst{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}
}

/* Footer */
.riddle-footer{
  text-align:center;
  z-index:3;
  position:relative;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
.riddle-footer.visible{
  opacity:1;
  transform:translateY(0);
}
.riddle-attribution{
  display:block;
  font-family:'Courier New',Courier,monospace;
  font-size:.72rem;
  color:#1a5a2a;
  letter-spacing:.12em;
  margin-bottom:6px;
}
.riddle-label{
  display:block;
  font-size:1.1rem;
  font-weight:700;
  color:#4ade80;
  text-shadow:0 0 16px rgba(74,222,128,.4);
  letter-spacing:.06em;
}

/* Close button */
.riddle-close{
  position:absolute;
  top:10px;
  right:12px;
  background:none;
  border:none;
  color:#1a5a2a;
  font-size:1.4rem;
  cursor:pointer;
  z-index:4;
  padding:4px 8px;
  border-radius:6px;
  transition:color .2s, background .2s;
}
.riddle-close:hover{
  color:#00ff41;
  background:rgba(0,255,65,.1);
}

/* Rainbow body glow while celebration is open */
.riddle-celebration.open ~ main,
body.riddle-rainbow{
  transition:none;
}

/* ---------- D2: coverflow background key-image reveal ----------
   Mounted on #projects (full viewport height). Fills the entire section so
   the bg fades from the top of the page region all the way down to behind
   the coverflow. The radial mask shapes the visible bright spot in the
   upper-middle area where the cards aren't. */
.grab-bg{
  position:absolute;
  /* Break out of the section's 1100px max-width + padding so the bg
     actually spans the full viewport width. */
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.4s ease;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 42%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 85%);
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 42%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 85%);
}
.grab-bg.is-active{opacity:.42}
.grab-bg-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--hero-slide-object-position, center 25%);
  filter:saturate(0.45) brightness(0.85);
  opacity:0;
  transform:scale(1.05);
  transition:transform 13000ms linear, object-position 13000ms linear, opacity 1.4s ease;
}
.grab-bg-frame.is-active{
  opacity:1;
  transform:scale(var(--hero-slide-active-scale, 1.18));
}

/* ---------- D3: dropped-image canvas (cap = 2) ----------
   Mounted on #projects. Fills the empty region above the coverflow
   (section is ~100svh tall; cards live in the bottom clamp(420px, 58svh,
   660px)). The bottom: 58svh leaves the entire empty top region available
   for drops without overlapping the cards. */
.grab-drops{
  position:absolute;
  /* Same full-viewport-width breakout as .grab-bg so we can place drops
     anywhere on the screen, not only inside the section's 1100px column. */
  top:64px;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  bottom:max(54svh, 392px);
  z-index:200;
  pointer-events:none;
  overflow:visible;
}
.grab-drop{
  position:absolute;
  left:var(--drop-left);
  top:var(--drop-top);
  width:var(--drop-w);
  height:var(--drop-h);
  background-image:var(--drop-image);
  background-repeat:no-repeat;
  background-size:var(--drop-zoom, cover);
  background-position:var(--drop-pos, center);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  box-shadow:
    0 24px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35);
  opacity:0;
  transform:scale(.7) rotate(var(--drop-rotate, 0deg)) translateY(-30px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.grab-drop.is-active{
  opacity:1;
  transform:scale(1) rotate(var(--drop-rotate, 0deg)) translateY(0);
}
.grab-drop.is-leaving{
  opacity:0;
  transform:scale(.85) rotate(var(--drop-rotate, 0deg)) translateY(20px);
  transition:opacity .4s ease, transform .5s ease-in;
}

/* ===== POI Dev Tool ===== */
/* Full-screen overlay wrapper */
.poi-dev-overlay{
  position:fixed;
  inset:0;
  display:none;
  z-index:9000;
  background:rgba(0,0,0,.72);
  align-items:stretch;
  justify-content:center;
  padding:12px;
  overflow-y:auto;
  /* Don't let wheel events leak to the portfolio page underneath. */
  overscroll-behavior:contain;
}
.poi-dev-overlay.open{display:flex}

/* Inner card */
.poi-dev-wrap{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1400px;
  background:#0e1118;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  box-shadow:0 28px 80px rgba(0,0,0,.7);
  overflow:hidden;
  min-height:0;
}

/* Header */
.poi-dev-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:#151923;
  border-bottom:1px solid rgba(255,255,255,.09);
  flex-shrink:0;
}
.poi-dev-badge{
  background:#f04d61;
  color:#fff;
  font-family:monospace;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  padding:3px 7px;
  border-radius:5px;
  flex-shrink:0;
}
.poi-dev-title{
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.04em;
  font-family:monospace;
  color:#e8ecf2;
  flex-shrink:0;
}
.poi-dev-select{
  flex:1;
  max-width:380px;
  background:#0e1118;
  border:1px solid rgba(255,255,255,.14);
  color:#e8ecf2;
  border-radius:8px;
  padding:6px 10px;
  font-family:monospace;
  font-size:.9rem;
  cursor:pointer;
}
.poi-dev-select:focus{outline:1px solid rgba(255,255,255,.3)}

/* Close button — pinned to the far-right edge of the header. */
.poi-dev-close{
  margin-left:auto;
  flex-shrink:0;
}

/* Draft banner */
.poi-dev-draft-banner{
  background:#2a1a00;
  border-bottom:1px solid #f59e0b55;
  color:#f59e0b;
  font-family:monospace;
  font-size:.82rem;
  padding:6px 18px;
  flex-shrink:0;
}

/* Body */
.poi-dev-body{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:0;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* Left metadata column */
.poi-dev-meta{
  background:#0b0e14;
  border-right:1px solid rgba(255,255,255,.07);
  padding:16px;
  overflow-y:auto;
  font-family:monospace;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.poi-meta-label{
  font-size:.72rem;
  color:#4e6080;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:14px;
}
.poi-meta-label:first-of-type{margin-top:0}
.poi-meta-val{
  font-size:.85rem;
  color:#b8c4d8;
  line-height:1.45;
  word-break:break-word;
}
.poi-meta-title{font-weight:700;color:#e8ecf2;font-size:.95rem}
.poi-meta-sub{color:#7a90b0;font-size:.82rem;margin-top:2px}
.poi-meta-tags{color:#7dbcff}
.poi-meta-id{color:#a88af0;font-size:.78rem}
.poi-meta-desc{font-size:.8rem;color:#8898b0;font-style:italic}

/* Center column */
.poi-dev-center{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
.poi-dev-empty{
  padding:24px;
  color:#4e6080;
  font-family:monospace;
  font-size:.9rem;
}

/* Image grid */
.poi-dev-img-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:16px;
  overflow-y:auto;
  /* Stop wheel events from chaining to the page once the grid hits its edge. */
  overscroll-behavior:contain;
  align-content:flex-start;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.poi-dev-img-card{
  width:140px;
  cursor:pointer;
  border:1.5px solid rgba(255,255,255,.10);
  border-radius:10px;
  overflow:hidden;
  background:#111520;
  transition:border-color .15s ease, transform .15s ease;
  display:flex;
  flex-direction:column;
}
.poi-dev-img-card:hover{
  border-color:rgba(255,255,255,.30);
  transform:translateY(-2px);
}
.poi-dev-img-card img{
  width:100%;
  height:90px;
  object-fit:cover;
  display:block;
}
.poi-dev-img-label{
  padding:5px 8px;
  font-family:monospace;
  font-size:.7rem;
  color:#7a90b0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-top:1px solid rgba(255,255,255,.06);
}
.poi-dev-img-badge{
  margin:0 8px 6px;
  display:inline-block;
  font-family:monospace;
  font-size:.68rem;
  color:#4e6080;
  background:rgba(255,255,255,.04);
  border-radius:4px;
  padding:2px 5px;
}
.poi-dev-img-badge.has-pois{
  color:#27ae60;
  background:rgba(39,174,96,.12);
}
.poi-dev-img-card{
  position:relative;
}
/* Stacked meta groups in the top-right corner of each image card.
   Each group: tiny label on top, pill button below. */
.poi-dev-meta-group{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  user-select:none;
}
.poi-dev-meta-tier  { top:6px; right:6px; }
.poi-dev-meta-label{
  font-family:monospace;
  font-size:.62rem;
  letter-spacing:.06em;
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  pointer-events:none;
}
.poi-dev-series-btn,
.poi-dev-tier-btn{
  width:28px;
  height:24px;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-family:monospace;
  font-weight:700;
  font-size:.85rem;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.poi-dev-series-btn:hover,
.poi-dev-tier-btn:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
}
.poi-dev-series-btn:active,
.poi-dev-tier-btn:active{
  transform:scale(.92);
}
/* Tier color coding — same hue ramp as a classic tier list. */
.poi-dev-tier-S{ background:#c0392b; border-color:rgba(255,90,80,.55);  color:#fff; }
.poi-dev-tier-A{ background:#d68910; border-color:rgba(255,170,60,.55); color:#fff; }
.poi-dev-tier-B{ background:#2e7d32; border-color:rgba(120,200,120,.55); color:#fff; }
.poi-dev-tier-C{ background:#1f6dbf; border-color:rgba(120,170,230,.45); color:#fff; }
.poi-dev-tier-D{ background:#555;    border-color:rgba(255,255,255,.18); color:#ddd; }

/* ─── Chain mode ─── */
.poi-dev-chainbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:8px;
  font-size:.85rem;
}
.poi-dev-chainbar.is-collapsed{
  padding:0;
  margin-bottom:8px;
  border:none;
  background:transparent;
}
.poi-dev-chainbar-start{
  font-size:.78rem;
  opacity:.75;
}
.poi-dev-chainbar-start:hover{ opacity:1; }
.poi-dev-chainbar.is-active{
  border-color:rgba(255,180,80,.55);
  background:rgba(255,180,80,.08);
}
.poi-dev-chainbar-status{
  flex:1;
  color:rgba(255,255,255,.7);
}
.poi-dev-chainbar.is-active .poi-dev-chainbar-status{
  color:#ffd189;
}
.poi-dev-chainbar-hint{
  font-size:.75rem;
  color:rgba(255,255,255,.5);
  font-style:italic;
}

/* Per-card chain badge row (sits at the bottom of each image card). */
.poi-dev-chain-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  padding:4px 6px;
  background:rgba(0,0,0,.55);
  border-top:1px solid rgba(255,255,255,.08);
}
.poi-dev-chain-rowlabel{
  font-family:monospace;
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-right:4px;
}
.poi-dev-chain-empty{
  font-family:monospace;
  font-size:.75rem;
  color:rgba(255,255,255,.35);
}
.poi-dev-chain-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  padding:0 6px;
  border-radius:10px;
  border:1px solid rgba(255,180,80,.45);
  background:rgba(255,180,80,.18);
  color:#ffd189;
  font-family:monospace;
  font-weight:700;
  font-size:.78rem;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.poi-dev-chain-badge:hover{
  background:rgba(255,180,80,.32);
  border-color:rgba(255,180,80,.7);
}
.poi-dev-chain-badge:active{ transform:scale(.92); }
.poi-dev-chain-badge.is-active{
  background:rgba(255,180,80,.55);
  border-color:#ffb84a;
  color:#1a0e00;
}

/* Active-chain card visual cue — outline + cursor swap while in chain mode. */
.poi-dev-img-card.is-chain-mode{ cursor:crosshair; }
.poi-dev-img-card.is-in-active-chain{
  outline:2px solid #ffb84a;
  outline-offset:2px;
}

/* Footer */
.poi-dev-footer{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  background:#151923;
  border-top:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.poi-dev-status-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:#4e6080;
  flex-shrink:0;
  transition:background .2s;
}
.poi-dev-status-dot.dirty{background:#f59e0b}
.poi-dev-status-txt{
  font-family:monospace;
  font-size:.82rem;
  color:#7a90b0;
  flex:1;
}

/* ── Editor layout ── */
.poi-dev-editor{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.poi-dev-editor-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:#0b0e14;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
  flex-wrap:wrap;
}
.poi-dev-editor-imgname{
  font-family:monospace;
  font-size:.82rem;
  color:#7dbcff;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Image-position dots inside the editor topbar. One dot per image in the
   project; the active image's dot is filled. Click to jump. */
.poi-dev-editor-dots{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  max-width:280px;
}
.poi-dev-editor-dot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background:transparent;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease, border-color .15s ease;
}
.poi-dev-editor-dot:hover{
  background:rgba(255,255,255,.25);
  border-color:rgba(255,255,255,.7);
}
.poi-dev-editor-dot:active{ transform:scale(.85); }
.poi-dev-editor-dot.is-active{
  background:#7dbcff;
  border-color:#7dbcff;
  cursor:default;
}
.poi-dev-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.poi-dev-toolbar input[type="radio"]{ display:none }
.poi-dev-mode-label{
  padding:5px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  cursor:pointer;
  font-family:monospace;
  font-size:.82rem;
  color:#8898b0;
  transition:all .15s;
  user-select:none;
}
.poi-dev-toolbar input[type="radio"]:checked + .poi-dev-mode-label{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.30);
  color:#fff;
}
.poi-toolbar-sep{
  width:1px;height:22px;
  background:rgba(255,255,255,.10);
  flex-shrink:0;
}

/* Main area: canvas + right panel */
.poi-dev-main-area{
  display:grid;
  grid-template-columns:1fr 200px;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.poi-dev-canvas-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#08090d;
  overflow:hidden;
  padding:12px;
  cursor:crosshair;
}
.poi-dev-canvas-img{
  max-width:100%;
  max-height:70vh;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
}
.poi-dev-svg-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  overflow:visible;
}
.poi-dev-svg-overlay *{ pointer-events:auto }

/* Right panel */
.poi-dev-right{
  border-left:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0b0e14;
}
.poi-dev-list-title{
  font-family:monospace;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#4e6080;
  padding:10px 12px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.poi-dev-poi-list{
  flex:1;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.poi-list-empty{
  padding:12px;
  font-family:monospace;
  font-size:.78rem;
  color:#4e6080;
  text-align:center;
}
.poi-list-row{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s;
}
.poi-list-row:hover{ background:rgba(255,255,255,.05) }
.poi-list-row.selected{ background:rgba(255,255,255,.09) }
.poi-list-icon{
  font-size:1rem;
  flex-shrink:0;
  line-height:1;
}
.poi-list-coords{
  font-family:monospace;
  font-size:.7rem;
  color:#8898b0;
  flex:1;
  min-width:0;
  word-break:break-all;
}
.poi-list-del{
  background:transparent;
  border:1px solid rgba(255,100,100,.25);
  color:#ff6b6b;
  border-radius:5px;
  width:22px;height:22px;
  cursor:pointer;
  font-size:.9rem;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  padding:0;
}
.poi-list-del:hover{
  background:rgba(255,100,100,.15);
  border-color:#ff6b6b;
}

/* ── Symmetric radar (hex) + detail-panel pair on desktop ──────────────────
   Replaces the legacy `.timeline-detail { left: calc(...) + 431px }` and the
   earlier ≥1280px-only reflow. From the mobile breakpoint upward, both panels
   anchor to a SHARED outer margin so the gap from screen-left to the radar
   always matches the gap from screen-right to the detail panel. As the
   viewport widens the radar drifts LEFT (smaller outer margin, capped) and
   the detail panel grows in both directions to fill the freed space.

   Geometry budget per viewport width:
     outer-margin  +  radar  +  inner-gap  +  detail  +  outer-margin  ≤ 100vw
   The radar width tightens at narrow widths so the detail never has to drop
   below its own minimum, which is what was causing the previous overlap.   */
@media (min-width: 861px){
  .timeline-section{
    /* Detail panel right edge aligns with the right edge of .nav-inner
       (which is the right edge of the PortKey/Register button). The nav
       inner is `max-width: 1100px; margin: 0 auto; padding: 8px 18px;`,
       so its right edge sits at `(viewport - 1100)/2 + 18` from the right
       on viewports >= 1100px, and at 18px on narrower viewports. */
    --pk-detail-right: max(18px, calc((100vw - 1100px) / 2 + 18px));
    /* Outer margin used by the radar (left side). Tracks the same nav-edge
       math so the radar's left margin mirrors the detail panel's right
       margin → symmetric pair. */
    --pk-outer-margin: var(--pk-detail-right);
    --pk-inner-gap: 24px;
    /* Radar narrows on smaller desktops so the detail panel keeps its floor
       without overlapping. Hits its 395px ceiling around 1320px+. */
    --pk-radar-width: clamp(320px, 30vw, 395px);
  }
  .radar-overlay{
    left: var(--pk-outer-margin);
    width: var(--pk-radar-width);
  }
  .timeline-detail{
    /* Right-anchor: the panel's right edge sits exactly at nav-inner's
       right edge. Width is clamped tighter (max 760px) so the body text
       stays readable rather than spreading into a hard-to-read line.
       At wider viewports the LEFT edge moves further from the radar
       rather than the panel growing more text-width. */
    left: auto;
    right: var(--pk-detail-right);
    width: clamp(
      420px,
      calc(100vw - var(--pk-radar-width) - var(--pk-outer-margin) - var(--pk-detail-right) - var(--pk-inner-gap)),
      760px
    );
    max-height: calc(100vh - 70px - 100px);
  }
  .timeline-detail .detail-fixed{
    padding-top: 12px;
  }
  .timeline-detail .bars{
    gap: 2px;
  }
  .timeline-detail .bar{
    min-height: 22px;
  }
  .detail-project-links--pattern{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }
}