/* ============================================================
   SNG — Layout Option B
   Fixed left sidebar + "index" home. Loaded only by SNG-v2.html.
   Scoped under .v2 (body class) where it overrides v1 chrome.
   ============================================================ */
:root{ --side-w: 272px; }

/* ---- Option B now uses the shared TOP nav (no sidebar) ---- */
.v2 .app2{ padding-left:0; position:relative; }
.v2 .section{ padding:84px 0; }
.v2 .fw-hero{ padding-top:calc(var(--nav-h) + 44px); }
.side, .side-mobile, .smb-menu{ display:none !important; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.side{
  position:fixed; top:0; left:0; bottom:0; width:var(--side-w); z-index:60;
  background:var(--paper); border-right:1px solid var(--ink);
  display:flex; flex-direction:column; padding:30px 26px;
}
.side-top{ padding-bottom:30px; border-bottom:1px solid var(--line-2); }
.side-top img{ height:auto; width:100%; max-width:190px; }

.side-nav{ display:flex; flex-direction:column; padding-top:26px; flex:1; }
.side-link{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  background:none; border:0; text-align:left; color:var(--ink);
  padding:16px 0; border-bottom:1px solid var(--line); transition:padding-left .25s, color .2s;
}
.side-link:first-child{ border-top:1px solid var(--line); }
.side-n{ font-size:11px; color:var(--gray); transition:color .2s; }
.side-l{ font-size:18px; font-weight:700; letter-spacing:-0.02em; }
.side-link .arw{ color:var(--gray); opacity:0; transform:translateX(-6px); transition:.25s; }
.side-link:hover{ padding-left:8px; color:var(--mk); }
.side-link:hover .arw{ opacity:1; transform:none; color:var(--mk); }
.side-link:hover .side-n{ color:var(--mk); }
.side-link.active{ color:var(--mk); }
.side-link.active .side-n{ color:var(--mk); }
.side-link.active .arw{ opacity:1; transform:none; color:var(--mk); }

.side-foot{ padding-top:24px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:14px; }
.side-lang{ display:flex; align-items:center; gap:8px; }
.side-cta{ width:100%; justify-content:center; padding:13px 18px; }
.side-meta{ display:flex; flex-direction:column; gap:4px; }
.side-tag{ color:var(--mk); }

/* mobile top bar (hidden on desktop) */
.side-mobile, .smb-menu{ display:none; }

/* ============================================================
   HOME 2  (index aesthetic)
   ============================================================ */
.home2-hero{ padding:84px 0 70px; border-bottom:1px solid var(--ink); }
.home2-toprow{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:54px; flex-wrap:wrap; }
.home2-toprow .eyebrow{ display:block; }
.home2-tagcol{ text-align:right; max-width:34ch; }
.home2-tagcol p{ font-size:15px; color:var(--gray-2); line-height:1.5; }
.home2-display{
  font-weight:700; letter-spacing:-0.04em; line-height:0.86; text-transform:uppercase;
  font-size:clamp(64px,13vw,210px); margin:0;
}
.home2-display .accent{ color:var(--mk); }
.home2-hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:46px; flex-wrap:wrap; }
.home2-hero-foot .lead{ max-width:44ch; min-width:0; }
.home2-hero-actions{ display:flex; gap:12px; }

/* wide statement */
.home2-statement{ padding:90px 0; border-bottom:1px solid var(--line-2); }
.home2-statement .h2{ max-width:24ch; }
.home2-statement .lead{ max-width:60ch; margin-top:30px; color:var(--ink-2); }

/* INDEX table */
.v2label{ display:flex; align-items:baseline; gap:14px; margin-bottom:30px; }
.v2label .idx{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; color:var(--mk); font-weight:600; }
.v2label .ttl{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; }
.v2label .meta{ margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--gray-2); }

.index{ display:flex; flex-direction:column; border-top:1px solid var(--ink); }
.index-row{
  display:grid; grid-template-columns:74px minmax(0,1.1fr) minmax(0,1.4fr) auto; gap:30px; align-items:center;
  background:none; border:0; border-bottom:1px solid var(--line-2); padding:30px 0; text-align:left; color:var(--ink);
  transition:padding .3s, background .25s;
}
.index-row:hover{ padding-left:18px; padding-right:18px; background:var(--paper-2); }
.index-n{ font-family:var(--mono); font-size:13px; color:var(--mk); }
.index-name{ font-size:clamp(26px,3.2vw,44px); font-weight:700; letter-spacing:-0.03em; }
.index-desc{ font-size:15.5px; color:var(--gray-2); line-height:1.5; max-width:46ch; }
.index-row .arw{ color:var(--gray); transition:.25s; justify-self:end; }
.index-row:hover .arw{ color:var(--mk); transform:translateX(6px); }
.index-row:hover .index-name{ color:var(--mk); }
@media(max-width:760px){
  .index-row{ grid-template-columns:auto 1fr; row-gap:12px; }
  .index-desc{ grid-column:1 / -1; }
  .index-row .arw{ display:none; }
}

/* featured strip */
.home2-feat{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:0; border:1px solid var(--ink); }
.home2-feat-media{ border-right:1px solid var(--ink); }
.home2-feat-media .ph{ height:100%; min-height:360px; border:0; }
.home2-feat-body{ padding:48px 44px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; justify-content:center; }
@media(max-width:880px){
  .home2-feat{ grid-template-columns:1fr; }
  .home2-feat-media{ border-right:0; border-bottom:1px solid var(--ink); }
  .home2-feat-body{ padding:34px 26px; }
}

/* big philosophy quote full width */
.home2-quote{ padding:110px 0; text-align:center; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.home2-quote blockquote{ font-size:clamp(28px,4.4vw,62px); font-weight:700; letter-spacing:-0.03em; line-height:1.04; max-width:18ch; margin:0 auto; }
.home2-quote .src{ display:block; margin-top:30px; font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gray-2); }

/* research two-up */
.home2-rb{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.home2-rb-card{ background:var(--paper); border:0; text-align:left; padding:34px 30px; display:flex; flex-direction:column; gap:16px; color:var(--ink); transition:background .25s; }
.home2-rb-card:hover{ background:var(--paper-2); }
.home2-rb-meta{ display:flex; justify-content:space-between; align-items:center; }
.home2-rb-ttl{ max-width:24ch; transition:color .2s; }
.home2-rb-card:hover .home2-rb-ttl{ color:var(--mk); }
@media(max-width:760px){ .home2-rb{ grid-template-columns:1fr; } }

/* footer columns collapse on narrower viewports */
@media(min-width:921px) and (max-width:980px){
  .v2 .footer-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .v2 .footer-brand{ grid-column:1 / -1; }
}

/* ============================================================
   FRAMEWORK × BIG — modular home (Option B)
   ============================================================ */
.fw-hero{ padding:84px 0 90px; border-bottom:1px solid var(--ink); }
.fw-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:42px; flex-wrap:wrap; }
.fw-display{
  font-weight:700; letter-spacing:-0.04em; line-height:0.9; text-transform:uppercase;
  font-size:clamp(52px,9vw,138px); margin:0; max-width:13ch;
}
.fw-display .accent{ color:var(--accent); }
.fw-lead{ max-width:48ch; margin-top:34px; }
.fw-herocta{ display:flex; align-items:center; gap:28px; margin-top:38px; flex-wrap:wrap; }
.fw-herocta .btn{ white-space:nowrap; }
.fw-scrollcue{ display:inline-flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; color:var(--ink-2); font-family:inherit; padding:6px 0; }
.fw-scrollcue .mono-sm{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; }
.fw-scrollcue .cue-chev{ font-size:15px; line-height:1; animation:cueBob 1.8s ease-in-out infinite; }
.fw-scrollcue:hover{ color:var(--ink); }
@keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@media(prefers-reduced-motion:reduce){ .fw-scrollcue .cue-chev{ animation:none; } }

.fw-specs{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); margin-top:48px; }
.fw-spec{ display:flex; align-items:baseline; gap:13px; padding:22px 26px; border-right:1px solid var(--line-2); }
.fw-spec:first-child{ padding-left:0; }
.fw-spec:last-child{ border-right:0; }
.fw-spec .num{ color:var(--mk); font-size:12px; }
.fw-spec-k{ font-family:var(--mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }

.fw-procmarquee{ margin-top:48px; }

.fw-heroimg{ margin-top:48px; border:1px solid var(--ink); overflow:hidden; }
.fw-heroimg .ph{ border:0; }
.pixgrove{ aspect-ratio:21/9; background:#F2F1EB; }
.pixgrove canvas{ display:block; width:100%; height:100%; image-rendering:pixelated; }
.fw-heroimg-cap{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; border-top:1px solid var(--ink); flex-wrap:wrap; }

.fw-statement{ padding:96px 0; border-bottom:1px solid var(--line-2); }
.fw-statement-ttl{ max-width:18ch; margin-top:6px; }
.fw-statement-body{ max-width:62ch; margin-top:32px; color:var(--ink-2); }

/* ---- BENTO modular grid ---- */
.bento{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(232px,auto);
  gap:1px; background:var(--ink); border:1px solid var(--ink);
}
.bento-tile{
  position:relative; background:var(--paper); border:0; text-align:left; color:var(--ink);
  overflow:hidden; transition:background .25s; min-width:0;
}
.bento-tile:hover{ background:var(--paper-2); }
.t-labs{ grid-column:span 4; grid-row:span 2; }
.t-design{ grid-column:span 2; }
.t-tech{ grid-column:span 2; }
.t-research{ grid-column:span 3; }
.t-philo{ grid-column:span 3; }

/* colored tiles + pixel-art motif (one per area) */
.t-labs{ --tile:var(--labs); }
.t-design{ --tile:var(--design); }
.t-tech{ --tile:var(--tech); }
.t-research{ --tile:var(--research); }
.t-philo{ --tile:var(--philo); }

.bento-tile.t-color{ background:var(--tile); color:var(--paper); transition:filter .25s; }
.bento-tile.t-color:hover{ background:var(--tile); filter:brightness(1.08); }
.bento-tile.t-color .bento-n{ color:rgba(255,255,255,.72); }
.bento-tile.t-color .bento-tag{ color:rgba(255,255,255,.72); }
.bento-tile.t-color .bento-top .arw{ color:rgba(255,255,255,.8); }
.bento-tile.t-color:hover .bento-top .arw{ color:#fff; transform:translateX(5px); }
.bento-tile.t-color .bento-name{ color:#fff; }
.bento-tile.t-color .bento-d{ color:rgba(255,255,255,.86); }
.bento-tile.t-color .bento-quote{ color:#fff; }

.bento-ico{ position:absolute; right:24px; top:62px; z-index:1; width:clamp(52px,6vw,80px); opacity:.95; pointer-events:none; }
.t-labs .bento-ico{ top:50%; bottom:auto; transform:translateY(-50%); right:clamp(40px,7%,96px); width:clamp(130px,15vw,210px); }
.pixicon{ display:grid; gap:2px; width:100%; }
.pixicon-cell{ width:100%; aspect-ratio:1; background:transparent; }
.pixicon-cell.on{ background:#fff; }
.pixicon-cell.soft{ background:rgba(255,255,255,.74); }
.pixicon-cell.dim{ background:rgba(255,255,255,.46); }
.proc-ph{ width:100%; height:100%; background:#2FB9AC; display:flex; align-items:center; justify-content:center; }
.proc-ph .pixicon{ width:clamp(46px,26%,84px); }
.bento-tile.t-color .bento-quote{ padding-right:clamp(70px,9vw,104px); }

.bento-body{ position:relative; z-index:2; display:flex; flex-direction:column; height:100%; padding:26px; }
.bento-top{ display:flex; align-items:center; gap:12px; }
.bento-n{ font-size:12px; color:var(--mk); }
.bento-tag{ color:var(--gray); }
.bento-top .arw{ margin-left:auto; color:var(--gray); transition:.25s; }
.bento-tile:hover .bento-top .arw{ color:var(--mk); transform:translateX(5px); }
.bento-foot{ margin-top:auto; }
.bento-name{ font-size:clamp(22px,2.3vw,32px); font-weight:700; letter-spacing:-0.025em; line-height:1.02; }
.bento-d{ font-size:14.5px; color:var(--gray-2); margin-top:9px; max-width:42ch; line-height:1.5; }
.bento-quote{ font-size:clamp(19px,1.8vw,26px); font-weight:700; letter-spacing:-0.02em; line-height:1.12; margin:20px 0 auto; }

/* ---- PROJECT grid (BIG) ---- */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.proj-tile{ position:relative; background:var(--paper); border:0; text-align:left; color:var(--ink); overflow:hidden; transition:background .25s; min-width:0; }
.proj-tile:hover{ background:var(--paper-2); }
.proj-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.proj-img .ph{ border:0; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.proj-tile:hover .proj-img .ph{ transform:scale(1.06); }
.proj-badge{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  background:var(--paper); color:var(--ink); padding:6px 10px;
}
.proj-badge.up{ background:var(--accent-2); }
.proj-badge.done{ background:var(--accent); color:var(--paper); }
.proj-badge.prog{ background:#d8b54a; }
.proj-meta{ padding:22px; }
.proj-meta-top{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:13px; }
.proj-ttl{ font-size:18px; font-weight:700; letter-spacing:-0.015em; line-height:1.22; transition:color .2s; }
.proj-tile:hover .proj-ttl{ color:var(--mk); }

.fw-quote{ background:var(--ink); color:var(--paper); padding:118px 0; text-align:center; }
.fw-quote blockquote{ font-size:clamp(28px,4.2vw,60px); font-weight:700; letter-spacing:-0.03em; line-height:1.05; max-width:17ch; margin:0 auto; }
.fw-quote .src{ display:block; margin-top:28px; font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-3); }

@media(max-width:1280px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(220px,auto); }
  .bento-tile{ grid-column:span 1 !important; grid-row:span 1 !important; }
  .t-labs{ grid-column:span 2 !important; }
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:620px){
  .bento{ grid-template-columns:1fr; }
  .t-labs{ grid-column:span 1 !important; }
  .proj-grid{ grid-template-columns:1fr; }
  .fw-specs{ grid-template-columns:repeat(2,1fr); }
  .fw-spec:nth-child(2){ border-right:0; }
  .fw-spec{ padding-left:0; }
  .bento-ico{ width:42px; top:auto; bottom:22px; right:18px; transform:none; }
  .t-labs .bento-ico{ top:auto; bottom:22px; transform:none; right:18px; width:58px; }
  .bento-d{ padding-right:66px; }
  .bento-name{ padding-right:66px; }
  .t-labs .bento-d, .t-labs .bento-name{ padding-right:82px; }
  .bento-quote{ padding-right:66px; }
}

/* ---- layout switch pill (both versions) ---- */
.layout-switch{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  background:var(--ink); color:var(--paper); padding:12px 16px; border:1px solid var(--ink);
  box-shadow:0 6px 24px rgba(0,0,0,.18); transition:.2s;
}
.layout-switch:hover{ background:var(--accent); border-color:var(--mk); color:var(--ink); }
.layout-switch b{ font-weight:700; }

/* ============================================================
   RESPONSIVE — collapse sidebar to top bar
   ============================================================ */
@media(max-width:920px){
  .v2 .app2{ padding-left:0; }
  .side-mobile{
    display:flex; align-items:center; justify-content:space-between;
    position:fixed; top:0; left:0; right:0; height:64px; z-index:60;
    background:var(--paper); border-bottom:1px solid var(--ink); padding:0 22px;
  }
  .side-mobile img{ height:38px; width:auto; }
  .smb-right{ display:flex; align-items:center; gap:16px; }
  .smb-right .lang button{ padding:14px 6px; min-height:44px; }
  .smb-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; background:none; border:0; padding:14px 10px; min-height:44px; min-width:44px; }
  .smb-burger span{ width:24px; height:1.6px; background:var(--ink); transition:.28s; display:block; }
  .smb-burger.open span:nth-child(1){ transform:translateY(3.3px) rotate(45deg); }
  .smb-burger.open span:nth-child(2){ transform:translateY(-3.3px) rotate(-45deg); }
  .smb-menu{
    display:block;
    position:fixed; top:64px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--ink);
    z-index:59; max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.7,.3,1);
  }
  .smb-menu.show{ max-height:80vh; }
  .smb-link{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line-2); padding:18px 22px; font-size:20px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
  .smb-link .num{ font-size:11px; color:var(--mk); }
  .smb-link.active{ color:var(--mk); }
  .home2-tagcol{ text-align:left; }
}