:root {
  --bg:#0d0f12; --surface:#131620; --bar:#1a1e28; --rail:#2a3045;
  --text:#d4cfc8; --text-dim:#7a7870; --text-bright:#ede8e0;
  --top:48px; --sw:28px;
  --ac:var(--c1); --acd:var(--c1d);
  --ease:cubic-bezier(0.77,0,0.175,1); --dur:0.62s;
  --c1:#c8a96e; --c1d:#7a6540;
  --c2:#7aab8a; --c2d:#3d6b4f;
  --c3:#b08098; --c3d:#6b4059;
  --c4:#7a9ab0; --c4d:#3d5f75;
  --c5:#c47a5a; --c5d:#7a3f25;
  --c6:#8a7ab0; --c6d:#4a3a75;
  --c7:#7aab98; --c7d:#3d6b58;
  --c8:#a0a86e; --c8d:#5f6840;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'DM Mono',monospace;font-size:13px;}
:root { --gx:0px; --gy:0px; }
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--surface) 1px,transparent 1px),linear-gradient(90deg,var(--surface) 1px,transparent 1px);background-size:48px 48px;background-position:var(--gx) var(--gy);opacity:0.28;}

/* photo parallax — images overflow container, shifted by JS */
.gallery-thumb,.leica-item,.album-grid-card { overflow:hidden; }
.gallery-thumb img,.leica-item img,.album-grid-card img { will-change:transform; transition:transform 0.1s linear, opacity 0.2s; }

/* TOP BAR */
#top-bar{position:fixed;top:0;left:0;right:0;height:var(--top);background:var(--bar);border-bottom:2px solid var(--rail);z-index:600;display:flex;align-items:center;padding:0 20px;gap:14px;}
.top-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;letter-spacing:0.1em;color:var(--text-bright);white-space:nowrap;}
.top-name em{font-style:italic;color:var(--ac);transition:color var(--dur);}
.top-div{width:1px;height:16px;background:var(--rail);flex-shrink:0;}
#breadcrumb{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-dim);transition:color 0.35s;}
body.has-section #breadcrumb{color:var(--ac);}

/* STAGE */
#stage{position:fixed;top:var(--top);bottom:0;left:0;right:0;overflow:hidden;z-index:100;}

/* IDLE — just the big name, nothing else */
#idle-layer{position:absolute;inset:0;z-index:10;display:flex;align-items:center;padding-left:clamp(40px,10vw,120px);transition:opacity 0.35s;pointer-events:all;justify-content:space-between;padding-right:clamp(32px,6vw,80px);}
body.has-section #idle-layer{opacity:0;pointer-events:none;}
.idle-big{font-family:'Cormorant Garamond',serif;font-size:clamp(52px,7vw,96px);font-weight:300;line-height:1;letter-spacing:0.04em;color:var(--text-bright);}
.idle-big em{font-style:italic;color:var(--c1);}
.idle-sub{margin-top:14px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-dim);}
.idle-hint{margin-top:8px;font-size:10px;color:var(--rail);letter-spacing:0.15em;text-transform:uppercase;}

/* SIDEBAR — starts at RIGHT edge, slides LEFT */
#sidebar{
  position:absolute;top:0;bottom:0;
  left:calc(100% - var(--sw));   /* idle: flush right */
  width:var(--sw);
  background:var(--bar);
  border-left:2px solid var(--rail);
  z-index:400;display:flex;flex-direction:column;overflow:visible;
  transition:left var(--dur) var(--ease),border-color 0.35s;
}
#sidebar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--ac),transparent 80%);transition:background var(--dur);pointer-events:none;}

/* TABS — labels fly LEFT */
#tabs{padding-top:20px;display:flex;flex-direction:column;align-items:center;gap:2px;overflow:visible;}
.tab{position:relative;width:var(--sw);height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible;}
.tab[data-section="about"]      {--tc:var(--c1);--tcd:var(--c1d);}
.tab[data-section="credentials"] {--tc:var(--c2);--tcd:var(--c2d);}
.tab[data-section="contact"]    {--tc:var(--c4);--tcd:var(--c4d);}
.tab[data-section="judo"]       {--tc:var(--c5);--tcd:var(--c5d);}
.tab[data-section="games"]      {--tc:var(--c6);--tcd:var(--c6d);}
.tab[data-section="life"]       {--tc:var(--c7);--tcd:var(--c7d);}
.tab[data-section="albums"]     {--tc:var(--c3);--tcd:var(--c3d);}
.tab[data-section="projects"]   {--tc:var(--c8);--tcd:var(--c8d);}
.tab-icon{
  width:16px; height:16px; flex-shrink:0;
  color:var(--tcd);
  transition:color 0.2s, transform 0.2s;
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.tab-icon svg { width:100%; height:100%; display:block; }
.tab:hover .tab-icon { color:var(--tc); transform:scale(1.15); }
.tab.active .tab-icon { color:var(--tc); transform:scale(1.2); }
.tab-label{
  position:absolute;
  right:calc(var(--sw) + 2px);top:0;bottom:0;
  display:flex;align-items:center;
  padding:0 14px 0 18px;
  white-space:nowrap;
  background:var(--bar);
  border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);border-left:1px solid var(--rail);
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dim);
  clip-path:polygon(0% 0%,calc(100% - 10px) 0%,100% 50%,calc(100% - 10px) 100%,0% 100%);
  opacity:0;transform:translateX(8px);
  transition:opacity 0.18s,transform 0.18s,color 0.18s,background 0.18s,border-color 0.18s;
  pointer-events:none;z-index:10;user-select:none;
}
.tab:hover .tab-label,.tab.active .tab-label{opacity:1;transform:translateX(0);pointer-events:auto;}
.tab:hover .tab-label{color:var(--text-bright);background:var(--surface);}
.tab.active .tab-label{color:var(--tc);background:var(--surface);border-color:var(--tcd);}

/* CONNECTORS */
#connectors{position:absolute;inset:0;pointer-events:none;z-index:300;overflow:visible;}

/* CONTENT LAYER */
#content-layer{position:absolute;inset:0;z-index:200;pointer-events:none;}
.section-wrap{
  position:absolute;inset:0;
  display:flex;align-items:flex-start;
  opacity:0;pointer-events:none;
  transition:opacity 0.28s;overflow:hidden;
}
.section-wrap.active{opacity:1;pointer-events:all;}

.col-l{
  flex:0 0 auto;
  overflow-y:auto;overflow-x:hidden;max-height:100%;
  padding:32px 48px 40px clamp(24px,4vw,56px);
  scrollbar-width:thin;scrollbar-color:var(--rail) transparent;
}
.col-r{
  flex:1;min-width:0;
  padding:32px 28px 40px 20px;
  overflow-y:auto;overflow-x:hidden;max-height:100%;
  scrollbar-width:thin;scrollbar-color:var(--rail) transparent;
}

/* Per-section widths and sidebar locations */
#sw-about       .col-l { width:52vw; }
#sw-credentials .col-l { width:50vw; }
#sw-contact     .col-l { width:38vw; }
#sw-judo        .col-l { width:44vw; }
#sw-games       .col-l { width:33vw; }
#sw-life        .col-l { width:40vw; }
#sw-albums      .col-l { width:28vw; }
#sw-projects    .col-l { width:28vw; }

body.section-about       #sidebar { left:calc(52vw - var(--sw)); }
body.section-credentials #sidebar { left:calc(50vw - var(--sw)); }
body.section-contact     #sidebar { left:calc(38vw - var(--sw)); }
body.section-judo        #sidebar { left:calc(44vw - var(--sw)); }
body.section-games       #sidebar { left:calc(33vw - var(--sw)); }
body.section-life        #sidebar { left:calc(40vw - var(--sw)); }
body.section-albums      #sidebar { left:calc(28vw - var(--sw)); }
body.section-projects    #sidebar { left:calc(28vw - var(--sw)); }

.section-wrap.active .col-l{animation:slideIn 0.44s var(--ease) 0.20s both;}
.section-wrap.active .col-r{animation:slideIn 0.44s var(--ease) 0.34s both;}
@keyframes slideIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
.col-l::-webkit-scrollbar,.col-r::-webkit-scrollbar{width:2px;}
.col-l::-webkit-scrollbar-thumb,.col-r::-webkit-scrollbar-thumb{background:var(--rail);}

/* RESHAPED FLOATING COMPONENTS — Borderless, boxless thoughts emerging from empty space */
.card {
  background: transparent;
  border: none;
  border-left: 2px solid var(--ac);
  padding: 10px 0 10px 20px;
  margin-bottom: 24px;
  transition: border-color var(--dur);
}
.card:last-child { margin-bottom: 0; }

.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3vw,46px);font-weight:300;letter-spacing:0.04em;color:var(--text-bright);line-height:1;}
.sec-meta{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ac);margin-top:6px;transition:color var(--dur);}
.lbl{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ac);margin-bottom:10px;margin-top:28px;display:flex;align-items:center;gap:8px;transition:color var(--dur);}
.lbl:first-child{margin-top:0;}
.lbl::after{content:'';flex:1;height:1px;background:var(--rail);}

.entry{padding:16px 0;border-bottom:1px solid rgba(42, 48, 69, 0.4);}
.entry:last-child{border-bottom:none;}
.entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.entry-title{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--text-bright);}
.entry-date{font-size:10px;color:var(--ac);white-space:nowrap;letter-spacing:0.08em;transition:color var(--dur);}
.entry-sub{font-size:11px;color:var(--text-dim);margin-top:3px;}
.entry-note{font-size:11px;color:var(--text-dim);margin-top:5px;font-style:italic;font-family:'Cormorant Garamond',serif;}

p{line-height:1.85;color:var(--text);font-size:13.5px;opacity:0.9;}
p+p{margin-top:14px;}

.chip-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.chip{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--rail);padding:3px 8px;color:var(--text-dim);transition:border-color 0.18s,color 0.18s;cursor:default;}
.chip:hover{border-color:var(--ac);color:var(--text);}

.filter-menu{display:flex;flex-direction:column;margin-top:24px;}
.filter-item{padding:11px 0;border-bottom:1px solid var(--rail);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;gap:10px;transition:color 0.2s;}
.filter-item::before{content:'';width:0;height:1px;background:var(--ac);transition:width 0.18s;}
.filter-item:hover{color:var(--text-bright);}
.filter-item:hover::before,.filter-item.selected::before{width:12px;}
.filter-item.selected{color:var(--ac);}
.filter-count{margin-left:auto;font-size:9px;color:var(--rail);}

.timeline{display:flex;flex-direction:column;padding-left:4px;}
.tl-row{display:flex;align-items:stretch;}
.tl-time{font-size:10px;color:var(--ac);letter-spacing:0.08em;white-space:nowrap;width:90px;flex-shrink:0;padding-top:3px;transition:color var(--dur);}
.tl-line{width:1px;background:var(--rail);margin:0 10px;flex-shrink:0;}
.tl-body{padding-bottom:18px;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--text-bright);}
.tl-sub{font-family:'DM Mono',monospace;font-size:10px;color:var(--text-dim);margin-top:2px;}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.proj-card{background:var(--surface);border:1px solid var(--rail);border-left:2px solid var(--ac);padding:16px 18px;transition:border-color 0.18s;display:none;cursor:pointer;position:relative;}
.proj-card.visible{display:block;}
.proj-card:hover{border-color:var(--ac);}
.proj-card h3{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--text-bright);margin-bottom:6px;}
.proj-card p{font-size:11px;color:var(--text-dim);line-height:1.6;}
.proj-card.expanded { grid-column: 1 / -1; cursor:default; border-color:var(--ac); }
.proj-card.expanded .proj-card-summary { display:none; }
.proj-card-detail { display:none; }
.proj-card.expanded .proj-card-detail { display:block; }
.proj-detail-close { position:absolute; top:14px; right:16px; font-size:14px; color:var(--text-dim); cursor:pointer; line-height:1; transition:color 0.18s; }
.proj-detail-close:hover { color:var(--text-bright); }
.proj-detail-title { font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.4vw,36px); font-weight:300; letter-spacing:0.04em; color:var(--text-bright); line-height:1; margin-bottom:16px; padding-right:32px; }

.security-card {
  margin-top: 8px;
}
.mono-faint {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  word-break: break-all;
}

.c-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--rail);}
.c-row:last-child{border-bottom:none;}
.c-icon{width:24px;height:24px;border:1px solid var(--rail);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ac);flex-shrink:0;}
.c-key{font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);min-width:50px;}
.c-val{color:var(--text-bright);}
.c-val a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rail);transition:border-color 0.18s,color 0.18s;}
.c-val a:hover{color:var(--ac);border-color:var(--ac);}

.game-select-item {
  padding:12px 0; border-bottom:1px solid var(--rail);
  font-family:'Cormorant Garamond',serif; font-size:17px;
  color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; gap:10px;
  transition:color 0.18s;
}
.game-select-item::before { content:''; width:0; height:1px; background:var(--ac); transition:width 0.18s, background var(--dur); flex-shrink:0; }
.game-select-item:hover { color:var(--text-bright); }
.game-select-item:hover::before { width:10px; }
.game-select-item.selected { color:var(--ac); }
.game-select-item.selected::before { width:10px; }
.game-detail { display:none; }
.game-detail.active { display:block; }

.grind-card { position:relative; }
.grind-card::after { content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--ac); animation:grindPulse 2.4s ease-in-out infinite; }
@keyframes grindPulse { 0%,100% { opacity:1; } 50% { opacity:0.25; } }

#recently-added { flex:0 0 auto; width:clamp(200px,20vw,280px); display:none; }
#recently-added.visible { display:block; }
.recent-header { font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ac); margin-bottom:10px; display:flex; align-items:center; gap:8px; transition:color var(--dur); }
.recent-header::after { content:''; flex:1; height:1px; background:var(--rail); }
.recent-item { border-left:2px solid var(--ac); padding:12px 16px; margin-bottom:8px; transition:border-color var(--dur); }
.recent-item:last-child { margin-bottom:0; }
.recent-item-title { font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--text-bright); line-height:1.2; }
.recent-item-section { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ac); margin-top:4px; transition:color var(--dur); }
.recent-item-note { font-size:11px; color:var(--text-dim); margin-top:5px; line-height:1.5; }

.stat-row { display:flex; align-items:baseline; gap:10px; padding:10px 0; border-bottom:1px solid var(--rail); }
.stat-row:last-child { border-bottom:none; }
.stat-val { font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--text-bright); line-height:1; flex-shrink:0; }
.stat-lbl { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); }

.life-cat-item { padding:12px 0; border-bottom:1px solid var(--rail); font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; gap:10px; transition:color 0.18s; }
.life-cat-item::before { content:''; width:0; height:1px; background:var(--ac); transition:width 0.18s, background var(--dur); flex-shrink:0; }
.life-cat-item:hover { color:var(--text-bright); }
.life-cat-item:hover::before { width:10px; }
.life-cat-item.selected { color:var(--ac); }
.life-cat-item.selected::before { width:10px; }
.life-cat-count { margin-left:auto; font-size:10px; font-family:'DM Mono',monospace; color:var(--rail); }

.gallery-feature { width:100%; aspect-ratio:16/9; background:var(--surface); border:1px solid var(--rail); border-left:2px solid var(--ac); overflow:hidden; position:relative; cursor:pointer; transition:border-color var(--dur); margin-bottom:12px; }
.gallery-feature img { width:100%; height:100%; object-fit:cover; transition:opacity 0.3s; display:block; }
.gallery-feature-caption { position:absolute; bottom:0; left:0; right:0; padding:10px 14px; background:linear-gradient(transparent, rgba(13,15,18,0.85)); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); }
.gallery-feature:hover { border-color:var(--ac); }

.gallery-strip { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:var(--rail) transparent; }
.gallery-strip::-webkit-scrollbar { height:2px; }
.gallery-strip::-webkit-scrollbar-thumb { background:var(--rail); }
.gallery-thumb { flex:0 0 80px; height:56px; background:var(--surface); border:1px solid var(--rail); overflow:hidden; cursor:pointer; position:relative; transition:border-color 0.18s; }
.gallery-thumb img { width:100%; height:100%; object-fit:contain; display:block; background:var(--bg); transition:opacity 0.2s; }
.gallery-thumb.active { border-color:var(--ac); }
.gallery-thumb:hover { border-color:var(--text-dim); }
.gallery-feature .ph, .gallery-thumb .ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--rail); background:var(--surface); }

/* ASYMMETRIC PHOTOGRAPHY STREAM — Loose, overlapping editorial drift instead of rigid grids */
.leica-gallery {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 100px;
}
.leica-item {
  position: relative;
  width: 78%;
  max-width: 620px;
  background: transparent;
  border-left: 2px solid transparent;
  transition: border-color var(--dur);
  cursor: pointer;
}
.leica-item:nth-child(even) {
  align-self: flex-end;
  width: 68%;
}
.leica-item:hover { border-left-color: var(--ac); }
.leica-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.leica-item:hover img {
  opacity: 0.95;
  transform: translateY(-4px);
}

.album-desc { margin-bottom:16px; padding:14px 18px; border-left:2px solid var(--ac); transition:border-color var(--dur); }
.album-desc p { font-size:18px; color:var(--text-dim); font-style:italic; font-family:'Cormorant Garamond',serif; line-height:1.7; }

/* LIGHTBOX */
#lightbox { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; visibility:hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s; }
#lightbox.open { opacity:1; pointer-events:auto; visibility:visible; transition: opacity 0.4s var(--ease), visibility 0s 0s; }
.lb-backdrop { position:absolute; inset:0; background:rgba(10, 11, 14, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: zoom-out; }
.lb-content-wrapper { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 95vw; height: 90vh; pointer-events: none; }
.lb-img { width: 100%; flex: 1; min-height: 0; object-fit: contain; display: block; pointer-events: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); transform: scale(0.96); transition: transform 0.5s var(--ease), opacity 0.4s; }
#lightbox.open .lb-img { transform: scale(1); }
.lb-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--rail); }
.lb-footer-float { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; pointer-events: auto; }
.lb-caption { font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 2.5vw, 28px); color: var(--text-bright); font-style: italic; text-align: center; max-width: 800px; }
.lb-btn-full { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; transition: color 0.2s; }
.lb-btn-full:hover { color: var(--ac); }
.lb-close-float, .lb-nav-float { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; transition: color 0.2s, transform 0.2s; padding: 20px; }
.lb-close-float:hover, .lb-nav-float:hover { color: var(--text-bright); transform: scale(1.1); }
.lb-close-float { top: 20px; right: 20px; font-size: 20px; }
.lb-nav-float { top: 50%; transform: translateY(-50%); width: 80px; height: 100px; }
.lb-nav-float svg { width: 32px; height: 32px; }
.lb-nav-float:hover { transform: translateY(-50%) scale(1.1); }
.lb-prev { left: 0; }
.lb-next { right: 0; }

/* ALBUM GRID (NAV) */
.leica-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; transition: opacity 0.5s ease; }
.leica-grid.hidden { display: none; opacity: 0; }
.leica-grid.visible { display: grid; opacity: 1; margin-top: 0; }
.album-block { display: block; position: relative; cursor: pointer; perspective: 1000px; }
.block-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); transform-style: preserve-3d; }
.album-block.flipped .block-inner { transform: rotateY(180deg); }
.block-front, .block-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--rail); overflow: hidden; }
.block-back { transform: rotateY(180deg); background: var(--bg); }
.album-block:hover .block-front { filter: brightness(1.2); transition: filter 0.2s; }

.blue-main { background-color: var(--c4d); }
.slate-dark { background-color: var(--surface); }
.gray-light { background-color: var(--bar); }
.blue-muted { background-color: var(--c3d); }
.gray-medium { background-color: var(--rail); }

.album-label { position: absolute; bottom: 16px; left: 16px; color: var(--text-bright); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background-color: rgba(13, 15, 18, 0.6); padding: 4px 8px; backdrop-filter: blur(2px); font-family: 'DM Mono', monospace; z-index: 2; }
.span-2x2 { grid-column: span 2; grid-row: span 2; }
.span-1x2 { grid-column: span 1; grid-row: span 2; }
.span-2x1 { grid-column: span 2; grid-row: span 1; }

.album-group-header { display: flex; align-items: flex-end; border-bottom: 1px solid var(--rail); padding-bottom: 8px; margin-top: 24px; margin-bottom: 12px; color: var(--text-dim); font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; transition: opacity 0.3s ease; }
.album-group-header:first-child { margin-top: 0; }
#album-nav-grid { transition: opacity 0.5s ease; }
#album-nav-grid.hidden { display: none; opacity: 0; }
#album-nav-grid.visible { display: block; opacity: 1; }

#album-writeup { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.5, 0, 1, 1); opacity: 1; transform: translateX(0); }
.writeup-exit-left   { opacity: 0 !important; transform: translateX(-150%) !important; }
.writeup-enter-right { opacity: 0 !important; transform: translateX(150%) !important; }
.writeup-exit-right  { opacity: 0 !important; transform: translateX(150%) !important; }
.writeup-enter-left  { opacity: 0 !important; transform: translateX(-150%) !important; }

#back-btn { appearance: none; border: 1px solid var(--rail); background: var(--surface); color: var(--text-dim); padding: 8px 16px; font-weight: 600; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; margin-bottom: 24px; display: inline-block; }
#back-btn:hover { border-color: var(--ac); color: var(--ac); }
#back-btn.visible { opacity: 1; transform: translateY(0); }
#album-photos-wrap.hidden { display: none; }
#album-photos-wrap.visible { display: block; }

.inline-img-container { flex: 1; min-height: 0; background: var(--surface); border: 1px solid var(--rail); border-left: 2px solid var(--ac); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
#inline-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); }
.inline-controls { display: flex; align-items: center; }
.inline-controls button { appearance: none; border: 1px solid var(--rail); background: var(--surface); color: var(--text-dim); padding: 6px 12px; font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s; }
.inline-controls button:hover { color: var(--ac); border-color: var(--ac); }
#inline-counter { font-size: 10px; color: var(--text-dim); margin: 0 12px; font-family: 'DM Mono', monospace; min-width: 40px; text-align: center; }
#inline-back-btn { appearance: none; border: 1px solid var(--rail); background: var(--surface); color: var(--text-dim); padding: 8px 16px; font-weight: 600; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; }
#inline-back-btn:hover { border-color: var(--ac); color: var(--ac); }

/* LIFE TIMELINE */
#life-timeline { display:flex; flex-direction:column; }
.lt-event { position:relative; display:grid; grid-template-columns:52px 3px 1fr; min-height:20px; }
.lt-year { font-size:10px; letter-spacing:0.08em; color:transparent; display:flex; align-items:flex-start; padding-top:3px; justify-content:flex-end; padding-right:14px; white-space:nowrap; transition:color var(--dur); }
.lt-spine { width:3px; background:var(--rail); transition:background 0.2s; position:relative; opacity:0.4; }
.lt-body { padding:0 0 4px 16px; }
.lt-event.lt-highlight .lt-body, .lt-event.lt-today     .lt-body { padding-bottom:22px; }
.lt-event.lt-highlight { background:rgba(122,171,152,0.04); }
.lt-event.lt-today     { background:rgba(122,171,138,0.07); }
.lt-event.lt-highlight .lt-year  { color:var(--c7); }
.lt-event.lt-highlight .lt-spine { background:var(--c7); opacity:1; }
.lt-event.lt-today .lt-year  { color:var(--c2); }
.lt-event.lt-today .lt-spine { background:var(--c2); opacity:1; }
.lt-event.lt-highlight .lt-spine::after, .lt-event.lt-today     .lt-spine::after { content:''; position:absolute; left:3px; top:7px; width:12px; height:2px; background:inherit; }
.lt-title { font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--text-bright); line-height:1.2; padding-top:2px; }
.lt-event.lt-today .lt-title { color:var(--c2); }
.lt-note { font-size:11px; color:var(--text-dim); margin-top:5px; line-height:1.65; border-left:1px solid var(--c7d); padding-left:10px; opacity:0.85; }
.lt-event.lt-today .lt-note { border-left-color:var(--c2); }

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
  html, body { overflow-x:hidden !important; overflow-y:auto !important; height:auto !important; }
  #sidebar, #connectors, #idle-layer { display:none !important; }
  #top-bar { padding:0 14px; gap:10px; }
  .top-name { font-size:16px; }
  #stage { position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; overflow:visible !important; height:auto !important; min-height:calc(100dvh - var(--top)); padding-top:var(--top); padding-bottom:64px; }
  #content-layer { position:relative !important; inset:auto !important; pointer-events:all !important; z-index:1 !important; }
  .section-wrap { position:relative !important; inset:auto !important; opacity:1 !important; pointer-events:all !important; flex-direction:column !important; overflow:visible !important; display:none !important; transition:none !important; }
  .section-wrap.active { display:flex !important; }
  .col-l, .col-r { flex:none !important; width:100% !important; max-width:100% !important; max-height:none !important; overflow:visible !important; padding:20px 18px 0 !important; margin-left:0 !important; animation:none !important; }
  .col-r { padding-bottom:20px !important; }
  body.has-section #sidebar { display:none !important; }
  #hamburger { display:flex !important; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; flex-shrink:0; margin-left:auto; -webkit-tap-highlight-color:transparent; user-select:none; }
  #hamburger span { display:block; width:18px; height:2px; background:var(--text-dim); position:relative; transition:background 0.2s; }
  #hamburger span::before, #hamburger span::after { content:''; position:absolute; left:0; width:18px; height:2px; background:var(--text-dim); transition:transform 0.25s, top 0.25s, background 0.2s; }
  #hamburger span::before { top:-5px; }
  #hamburger span::after  { top:5px; }
  body.menu-open #hamburger span { background:transparent; }
  body.menu-open #hamburger span::before { transform:rotate(45deg); top:0; background:var(--ac); }
  body.menu-open #hamburger span::after  { transform:rotate(-45deg); top:0; background:var(--ac); }
  #mobile-drawer { display:block !important; position:fixed; top:var(--top); left:0; right:0; bottom:0; background:var(--bg); z-index:8000; opacity:0; pointer-events:none; transition:opacity 0.22s; overflow-y:auto; padding:40px 28px 60px; }
  body.menu-open #mobile-drawer { opacity:1; pointer-events:all; }
  .drawer-section-link { display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--rail); cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }
  .drawer-section-link:last-child { border-bottom:none; }
  .drawer-dot { width:8px; height:8px; border-radius:50%; border:1.5px solid var(--tcd); background:transparent; flex-shrink:0; transition:background 0.18s, border-color 0.18s; }
  .drawer-label { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:300; letter-spacing:0.05em; color:var(--text-dim); transition:color 0.18s; }
  .drawer-section-link.active .drawer-label { color:var(--tc); }
  .drawer-section-link.active .drawer-dot   { background:var(--tc); border-color:var(--tc); }
  .drawer-section-link[data-section="about"]       { --tc:var(--c1); --tcd:var(--c1d); }
  .drawer-section-link[data-section="credentials"] { --tc:var(--c2); --tcd:var(--c2d); }
  .drawer-section-link[data-section="contact"]     { --tc:var(--c4); --tcd:var(--c4d); }
  .drawer-section-link[data-section="judo"]        { --tc:var(--c5); --tcd:var(--c5d); }
  .drawer-section-link[data-section="games"]       { --tc:var(--c6); --tcd:var(--c6d); }
  .drawer-section-link[data-section="life"]        { --tc:var(--c7); --tcd:var(--c7d); }
  .drawer-section-link[data-section="albums"]      { --tc:var(--c3); --tcd:var(--c3d); }
  .drawer-section-link[data-section="projects"]    { --tc:var(--c8); --tcd:var(--c8d); }
  body:not(.has-section) #stage::before { content:''; display:block; height:calc(100dvh - var(--top)); }
  #sw-about .col-l, #sw-credentials .col-l, #sw-contact .col-l, #sw-judo .col-l, #sw-games .col-l, #sw-life .col-l, #sw-albums .col-l, #sw-projects .col-l { width:100% !important; }
  #life-timeline-wrap::after { content:''; position:absolute; top:0; right:0; bottom:0; width:48px; pointer-events:none; background:linear-gradient(to right, transparent, var(--bg) 80%); z-index:1; }
  #life-timeline { flex-direction:row; overflow-x:auto; overflow-y:hidden; padding-bottom:12px; padding-top:8px; gap:0; scrollbar-width:thin; scrollbar-color:var(--c7) transparent; -webkit-overflow-scrolling:touch; }
  #life-timeline::-webkit-scrollbar { height:2px; }
  #life-timeline::-webkit-scrollbar-thumb { background:var(--c7); }
  .lt-event { grid-template-columns:1fr; grid-template-rows:3px auto; min-width:20px; flex:0 0 20px; min-height:auto; align-items:start; background:none !important; }
  .lt-event.lt-highlight, .lt-event.lt-today { min-width:140px; flex:0 0 140px; }
  .lt-spine { width:auto; height:3px; opacity:1; grid-row:1; grid-column:1; }
  .lt-event:not(.lt-highlight):not(.lt-today) .lt-spine { background:var(--rail); opacity:0.4; }
  .lt-event.lt-highlight .lt-spine::after, .lt-event.lt-today .lt-spine::after { top:3px; left:10px; width:2px; height:12px; }
  .lt-body { padding:12px 8px 0 0; grid-row:2; grid-column:1; }
  .lt-event.lt-highlight .lt-body, .lt-event.lt-today .lt-body { padding-bottom:0; }
  .lt-year { display:none; }
  .lt-event.lt-highlight .lt-year, .lt-event.lt-today .lt-year { display:block; color:var(--c7); padding:0 0 3px 0; text-align:left; font-size:9px; letter-spacing:0.12em; }
  .lt-event.lt-today .lt-year { color:var(--c2); }
  .lt-title { font-size:14px; }
  .lt-note  { font-size:10px; border-left:none; padding-left:0; margin-top:3px; }
  .leica-gallery { gap: 40px; }
  .leica-item, .leica-item:nth-child(even) { width: 100%; max-width: none; align-self: flex-start; }
}

#hamburger       { display:none; }
#mobile-drawer   { display:none; }

/* ── INLINE CSS CONSOLIDATION ── */
.col-l .lbl.top-spaced { margin-top: 32px; }
/* Only strip the top margin from the absolute first label in the right column */
.col-r .lbl.top-spaced:first-of-type { 
  margin-top: 0; 
}
.availability-note { font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--text-dim); }
#judo-featured-target .card { cursor: pointer; transition: border-color 0.18s; }
#judo-techniques-grid { margin-top: 28px; }
#games-menu-target { margin-top: 8px; }
.game-community-title, .game-setup-desc { font-size: 12px; }
.game-community-sub { font-size: 11px; font-style: italic; font-family: 'Cormorant Garamond', serif; color: var(--text-dim); margin-top: 6px; }
.game-detail .lbl { margin-top: 28px; }
.game-detail-quote { font-size: 13px; font-style: italic; font-family: 'Cormorant Garamond', serif; color: var(--text-dim); }
.game-detail-desc, .game-detail-note, .game-detail-card-desc { font-size: 12px; }
.game-detail-card-meta { font-size: 10px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
.game-detail-card-title { font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--text-bright); }
.game-detail-card-sub { font-size: 10px; color: var(--text-dim); margin-top: 3px; }
.game-mastery-wrap { display: flex; align-items: baseline; gap: 10px; }
.game-mastery-rank { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--ac); line-height: 1; }
.game-mastery-lbl, .game-modlist-meta { font-size: 10px; color: var(--text-dim); }
.game-modlist-meta { margin-bottom: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.game-modlist-chiprow { margin-top: 0; }
#inline-photo-view { display: none; flex-direction: column; height: calc(100vh - 140px); }
.inline-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.proj-detail-body .lbl { margin-top: 20px; }
.proj-detail-body .lbl.stack-lbl, .proj-detail-body .lbl.status-lbl { margin-top: 16px; }
.proj-detail-body p { font-size: 13px; color: var(--text); line-height: 1.75; }
.proj-detail-body p + p { margin-top: 10px; }
.proj-detail-status-text { font-size: 12px; }

.about-photo-card { padding:0; overflow:hidden; aspect-ratio: 4/5; display:flex; align-items:center; justify-content:center; }
#about-photo-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--surface); font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--rail); display:none; }
#about-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:grayscale(100%) sepia(91%) brightness(1.32) saturate(2.1) contrast(1.30); }

/* ── JUDO FLOATING CARDS & VIDEO FRAME ── */
.judo-tech-card {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--ac) !important;
  padding: 10px 0 10px 20px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Maintain proper spacing inside the technical stack layout */
.judo-tech-card.expanded {
  padding-bottom: 24px !important;
  margin-bottom: 24px;
}

.judo-tech-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--text-bright);
}

/* Video Layout Canvas Frame */
.judo-video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--rail);
  margin-top: 14px;
  overflow: hidden;
  position: relative;
}

.judo-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Low-contrast technical visual indicator for uncaptured footage */
.judo-video-wrapper.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(19, 22, 32, 0.6) 25%, transparent 25%), 
              linear-gradient(225deg, rgba(19, 22, 32, 0.6) 25%, transparent 25%), 
              linear-gradient(45deg, rgba(19, 22, 32, 0.6) 25%, transparent 25%), 
              linear-gradient(315deg, rgba(19, 22, 32, 0.6) 25%, var(--surface) 25%);
  background-size: 40px 40px;
}

.judo-video-wrapper.video-placeholder .ph {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-align: center;
  padding: 0 20px;
}

/* ── PHOTO METADATA & DESCRIPTION STYLING ── */
.photo-metadata {
  margin-top: 12px;
  max-width: 450px; /* Prevents long descriptions from running too wide */
}

.photo-description {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-bright);
  margin-bottom: 6px;
}

.photo-tags-row {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.inline-tag {
  cursor: pointer;
  margin-right: 8px;
  transition: color 0.2s ease;
}

.inline-tag:hover {
  color: var(--ac); /* Highlights to accent color on hover */
}