/* ===========================================================================
   Mostacci Industrial Design — modern (HTML/CSS/JS) recreation of the Flash site
   Palette & interactions derived from the original SWF/AS3 source + component XML.
   Accent lime  #CCFF00   greys #777/#666/#333/#ccc   link red #D42025
   =========================================================================== */

/* Typeface: the original used "Aller" (a humanist sans). To keep the site fully
   self-contained and dependency-free, we approximate it with a humanist system
   stack. Drop an Aller .woff2 into assets/ and add an @font-face here to restore
   the exact face if desired. */

:root{
  --lime:#CCFF00;
  --lime-soft:#CCFF99;
  --ink:#333333;
  --grey:#777777;
  --grey2:#666666;
  --grey-light:#c1c1c1;
  --line:#cccccc;
  --shell-bg:#E8E8E8;
  --org-bg:#d4d4d4;
  --link:#D42025;
  --link-hover:#ff3300;
  --stageW:1024px;
  --stageH:600px;
  --mnav-h:46px;
  --font: 'Aller','Segoe UI',Tahoma,Verdana,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font);
  background:#ffffff;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---- Scaled stage : a fixed 1024x600 design, scaled to fit the window ---- */
#scaler{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#ffffff;
}
#stage{
  position:relative;
  width:var(--stageW); height:var(--stageH);
  overflow:hidden;
  background:#ffffff;
  transform-origin:center center;
}

/* ---- The panning "world": a 2x2 grid of full-stage quadrants ---- */
#world{
  position:absolute; top:0; left:0;
  width:calc(var(--stageW)*2);
  height:calc(var(--stageH)*2);
  will-change:transform;
}
.quad{
  position:absolute;
  width:var(--stageW); height:var(--stageH);
  overflow:hidden;
}
.quad--home{ left:0;                       top:0; background:#ffffff; }
.quad--projects{ left:var(--stageW);       top:0; background:#ffffff; }
.quad--org{ left:0;       top:var(--stageH); background:#ffffff; }
.quad--feed{ left:var(--stageW); top:var(--stageH); background:#ffffff; }

/* =========================================================================
   HOME  ·  "NO BOUNDARIES"  +  manifesto animation
   ========================================================================= */
.quad--home{ background:#ffffff; }
.home-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#f2f2f2; z-index:0;
}
/* title rotated 90° on the left edge — mirrors the original [0,.96,-.96,0] matrix */
.home-title{
  position:absolute; left:30px; top:54px; z-index:2; margin:0;
  writing-mode:vertical-rl;
  font-family:'Michroma',var(--font);
  font-weight:400; letter-spacing:.02em;
  font-size:40px; line-height:1.0; color:#262626;
  text-shadow:0 0 14px rgba(255,255,255,.85), 0 0 3px rgba(255,255,255,.9);
}
.home-copy{
  position:absolute; left:150px; top:150px; width:330px; z-index:2;
  font-family:'Michroma',var(--font);
  font-size:10px; line-height:1.7; color:#2f2f2f;
}
.home-copy p{margin:0 0 12px;}
.home-copy p:last-child{margin:0;}

/* =========================================================================
   PROJECTS  ·  portfolio gallery
   ========================================================================= */
.portfolio{ position:absolute; inset:0; padding:60px 40px 0; }
.portfolio-head{
  display:flex; align-items:baseline; gap:14px; margin-bottom:18px;
}
.portfolio-head h2{
  margin:0; font-size:15px; font-weight:700; letter-spacing:.34em; color:#3a3a3a;
}
.portfolio-head .sel{ font-size:11px; letter-spacing:.28em; color:var(--lime);
  background:#3a3a3a; padding:3px 8px; }

/* grid : 5 columns x 3 rows, item 146x75, gaps 20/15 (from config.xml) */
#caseGrid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,146px);
  grid-auto-rows:75px;
  column-gap:20px; row-gap:15px;
  transition:opacity .55s ease;
}
.case-item{
  position:relative; width:146px; height:75px; overflow:hidden;
  background:#d8d8d8; cursor:pointer;
  outline:1px solid rgba(0,0,0,.06);
}
.case-item img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:grayscale(.15) brightness(.94);
  transform:scale(1.001);
  transition:transform .5s ease, filter .5s ease;
}
.case-item:hover img{ filter:grayscale(0) brightness(1.04); transform:scale(1.06); }
.case-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  background:rgba(40,40,40,.86); color:#fff;
  font-size:10.5px; line-height:1.25; padding:6px 8px;
}
.case-item:hover .cap{ transform:translateY(0); }

/* pagination */
#caseNav{
  position:absolute; right:40px; top:464px;
  display:flex; align-items:center; gap:14px;
  font-size:12px; color:var(--grey);
}
#caseNav .pg{ letter-spacing:.18em; min-width:64px; text-align:center; }
.arrow-btn{
  width:34px; height:24px; border:none; cursor:pointer;
  background:#3a3a3a; color:var(--lime); font-size:13px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s,color .2s;
}
.arrow-btn:hover{ background:var(--lime); color:#3a3a3a; }
.arrow-btn[hidden]{ visibility:hidden; }

/* =========================================================================
   PROJECT DETAIL  ·  overlays the projects quad
   ========================================================================= */
#detail{
  position:absolute; inset:0; background:#fff;
  opacity:0; visibility:hidden; transition:opacity .5s ease;
  padding:54px 40px 0;
}
#detail.open{ opacity:1; visibility:visible; }
.detail-grid{
  display:grid; grid-template-columns:1fr 300px; gap:30px; height:100%;
}
/* left : image scroller */
.scroller{ position:relative; }
.scroller-mask{
  position:relative; width:100%; height:344px; overflow:hidden; background:#ececec;
}
.scroller-track{
  position:absolute; top:0; left:0; height:100%;
  display:flex; will-change:transform;
}
.scroller-track .slide{
  height:344px; display:flex; align-items:center; justify-content:center;
  background:#ececec;
}
.scroller-track .slide img{ max-width:100%; max-height:100%; object-fit:contain; }
.scroller-bar-wrap{
  position:relative; height:16px; margin-top:10px; background:#fff;
  border:1px solid var(--lime);
}
.scroller-bar{
  position:absolute; top:1px; left:1px; height:12px; min-width:24px;
  background:var(--lime); cursor:grab;
}
.scroller-bar:active{ cursor:grabbing; }
.scroller-controls{
  display:flex; align-items:center; gap:10px; margin-top:12px;
}
.scroller-count{ font-size:11px; color:var(--grey); letter-spacing:.14em; }

/* right : meta */
.detail-meta{ position:relative; display:flex; flex-direction:column; height:100%; padding-bottom:24px;}
.detail-meta h3{ margin:0 0 2px; font-size:18px; font-weight:700; color:#2b2b2b; }
.detail-meta .date{ font-size:11px; color:var(--grey); margin-bottom:14px; letter-spacing:.1em; }
.detail-desc{
  font-size:12px; line-height:1.55; color:var(--grey2);
  overflow:auto; flex:1; padding-right:6px;
}
.detail-desc a{ color:var(--link); text-decoration:none; }
.detail-desc a:hover{ color:var(--link-hover); text-decoration:underline; }
.detail-desc img{ max-width:100%; height:auto; margin-top:8px; }
.detail-actions{ display:flex; gap:10px; margin-top:14px; }
.btn{
  border:none; cursor:pointer; font-family:var(--font);
  font-size:11px; letter-spacing:.16em; padding:9px 14px;
  background:#3a3a3a; color:#fff; transition:background .2s,color .2s;
}
.btn:hover{ background:var(--lime); color:#3a3a3a; }
.btn--launch{ background:var(--lime); color:#3a3a3a; }
.btn--launch:hover{ background:#3a3a3a; color:var(--lime); }
.detail-pager{
  display:inline-flex; gap:8px; margin-left:auto;
}

/* =========================================================================
   ORGANIZATION
   ========================================================================= */
.org{ position:absolute; inset:0; padding:92px 60px 30px; overflow:auto; }
.mobile-label{ display:none; }
.org-cols{ display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:880px; margin:0 auto;}
.org-cols .col{
  font-style:italic; font-size:11px; line-height:1.5; color:#4a4a4a;
  white-space:pre-line;
}
.org-cols .col.right{ color:#444; }

/* =========================================================================
   FEED · posts pulled from Notion (see feed.js + update-feed.php)
   ========================================================================= */
.feed{ position:absolute; inset:0; padding:92px 44px 30px; color:#555; }
.feed h2{
  margin:0 0 22px; font-size:14px; font-weight:700; letter-spacing:.4em;
  color:#3a3a3a; text-transform:lowercase;
}
/* ---- Notion-backed post list ---------------------------------------------
   Posts come from feed.js (window.MID_FEED), generated from a Notion database
   by update-feed.php. app.js renders each one into #feedList as a .feed-item. */
.feed-list{
  height:460px; max-width:520px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding-right:6px;
}
.feed-item{
  padding:0 0 18px; margin:0 0 18px;
  border-bottom:1px solid var(--line);
}
.feed-item:last-child{ border-bottom:0; margin-bottom:0; }
.feed-item .feed-date{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); margin:0 0 6px;
}
.feed-item .feed-title{
  font-size:14px; font-weight:700; color:var(--ink); margin:0 0 7px;
  line-height:1.3;
}
.feed-item .feed-body{
  font-size:12.5px; line-height:1.55; color:#555; margin:0;
}
.feed-item .feed-body a{ color:var(--link); text-decoration:none; }
.feed-item .feed-body a:hover{ color:var(--link-hover); text-decoration:underline; }
.feed-item .feed-img{
  display:block; width:100%; height:auto; margin:10px 0 0;
  border-left:3px solid var(--lime);
}
.feed-empty{
  font-size:12.5px; line-height:1.6; color:var(--grey);
}
.feed-empty code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; background:#f2f2f2; padding:1px 5px; border-radius:3px;
}


/* =========================================================================
   NAV cluster  (fixed overlay, always reachable — mirrors the original
   central button group that sat at the junction of the four quadrants)
   ========================================================================= */
#nav{
  position:absolute; z-index:40; width:198px;
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  background:transparent; padding:0; box-shadow:none;
  transition:top 1.1s cubic-bezier(.22,1,.36,1), left 1.1s cubic-bezier(.22,1,.36,1);
}
/* corners of the 1024×600 stage (button-grid ≈ 198×80, 18px margin) */
#nav.tl{ top:18px;  left:18px;  }   /* feed  shown → junction top-left    */
#nav.tr{ top:18px;  left:808px; }   /* org   shown → junction top-right   */
#nav.bl{ top:500px; left:18px;  }   /* projects shown → junction bot-left */
#nav.br{ top:500px; left:808px; }   /* home  shown → junction bot-right   */

.nav-btn{
  font-family:var(--font); border:none; cursor:pointer;
  background:transparent; color:#888;
  font-size:10px; letter-spacing:.04em; line-height:1.15;
  padding:8px 6px; text-align:center; text-transform:lowercase;
  text-shadow:0 0 6px rgba(255,255,255,.85);
  transition:color .2s;
}
.nav-btn:hover{ color:#222; }
.nav-btn.active{ color:#1a1a1a; font-weight:700; }

/* =========================================================================
   FOOTER  (banner + contact + tagline + legal)
   ========================================================================= */
#footer{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  padding:8px 0 10px; gap:6px; pointer-events:none;
}
#footer .inner{ pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:5px; }
#footer img{ max-width:min(1057px,94vw); height:auto; opacity:.92; }
.foot-row{ font-size:11px; color:var(--grey2); display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.foot-row a{ color:var(--grey2); text-decoration:none; }
.foot-row a:hover{ color:var(--link); }
.foot-mail{ color:#06c; }

/* loading shade for the gallery flip */
#caseGrid.flip{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  #world{ transition:none !important; }
  .case-item img, .case-item .cap{ transition:none !important; }
}

/* =========================================================================
   MOBILE  ·  narrow viewports get a stacked, scrollable layout instead of
   the panning 1024×600 stage. Same content, same palette, same components —
   just flowing top-to-bottom: no boundaries → organization → projects → feed.
   ========================================================================= */
@media (max-width:760px){

  body{ overflow:auto; height:auto; }

  #scaler{
    position:static; display:block;
    height:auto; min-height:0;
  }
  #stage{
    width:100%; height:auto; overflow:visible;
    transform:none !important;
    padding-top:var(--mnav-h);
  }
  #world{
    position:relative; width:100%; height:auto;
    display:flex; flex-direction:column;
    transform:none !important;
    will-change:auto;
  }
  .quad{
    position:relative; width:100%; height:auto;
    left:auto !important; top:auto !important;
    overflow:visible;
    border-bottom:1px solid #ececec;
    scroll-margin-top:var(--mnav-h);
  }
  .quad:last-of-type{ border-bottom:none; }

  /* ---- nav becomes a fixed top banner, row of 4 ---- */
  #nav, #nav.tl, #nav.tr, #nav.bl, #nav.br{
    position:fixed; top:0; left:0; right:0; bottom:auto; width:100%;
    height:var(--mnav-h);
    display:flex; flex-direction:row;
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:0 1px 0 rgba(0,0,0,.08);
    padding:0; gap:0; z-index:500; transition:none;
  }
  .nav-btn{
    flex:1 1 0; min-width:0;
    border-right:1px solid rgba(0,0,0,.06);
    font-size:9.5px; padding:0 4px; line-height:1.2;
    display:flex; align-items:center; justify-content:center;
    text-shadow:none;
  }
  .nav-btn:last-child{ border-right:none; }
  /* mobile reads left-to-right in the same order the sections stack below;
     desktop keeps its own DOM order (home, projects, org, feed) for the 2×2
     mini-map grid, so this is handled with order rather than markup order */
  .nav-btn[data-section="home"]{ order:1; }
  .nav-btn[data-section="org"]{ order:2; }
  .nav-btn[data-section="projects"]{ order:3; }
  .nav-btn[data-section="feed"]{ order:4; }

  /* ---- HOME ---- */
  .quad--home{ height:300px; overflow:hidden; }
  .home-title{
    left:8px; top:14px; font-size:22px; line-height:1.0;
  }
  .home-copy{
    left:56px; right:12px; top:auto; bottom:12px; width:auto;
    font-size:8.5px; line-height:1.5;
  }
  .home-copy p{ margin:0 0 7px; }

  /* ---- ORGANIZATION ---- */
  .org{ position:relative; inset:auto; padding:28px 20px 36px; overflow:visible; }
  .mobile-label{
    display:block; margin:0 0 18px; font-size:13px; font-weight:700;
    letter-spacing:.3em; color:#3a3a3a; text-transform:lowercase;
  }
  .org-cols{ grid-template-columns:1fr; gap:22px; max-width:none; }

  /* ---- PROJECTS ---- */
  .portfolio{ position:relative; inset:auto; padding:28px 18px 36px; }
  .portfolio-head{ margin-bottom:14px; }
  .portfolio-head h2{ font-size:13px; letter-spacing:.24em; }
  #caseGrid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:unset; column-gap:10px; row-gap:10px;
  }
  .case-item{
    width:100%; height:auto; aspect-ratio:146/75;
    display:flex; flex-direction:column;
  }
  .case-item img{ position:relative; flex:1; }
  .case-item .cap{ transform:none; position:static; }
  #caseNav{
    position:relative; right:auto; top:auto; justify-content:center;
    margin-top:18px;
  }

  /* project detail becomes a full-screen modal on mobile */
  #detail{
    position:fixed; inset:0; padding:calc(var(--mnav-h) + 14px) 18px 18px;
    overflow:auto; z-index:600;
  }
  .detail-grid{ grid-template-columns:1fr; gap:18px; height:auto; }
  .scroller-mask{ height:230px; }
  .scroller-track .slide{ height:230px; }
  .detail-meta{ height:auto; padding-bottom:30px; }
  .detail-desc{ flex:none; overflow:visible; max-height:none; }
  .detail-actions{ flex-wrap:wrap; gap:8px 10px; }
  .detail-pager{ margin-left:0; }

  /* ---- FEED ---- */
  .feed{ position:relative; inset:auto; padding:28px 18px 36px; }
  .feed-list{ height:auto; max-width:100%; overflow:visible; padding-right:0; }

  /* ---- FOOTER : normal flow at the end of the page ---- */
  #footer{
    position:static; pointer-events:auto;
    padding:18px 0 22px;
  }
}