/* ============================================================
   BEZALEL.DESIGN — stylesheet v2
   Fixed, non-scrolling app shell. Palette: white / black / red / grey.
   Type: Helvetica Condensed Black (display) + Courier New (system/mono)
   ============================================================ */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --red:#ff0000;
  --grey:#8c8c8c;
  --grey-light:#c9c9c9;
  --grey-line:#dcdcdc;
  --mono: 'Courier New', Courier, monospace;
  --cond: 'Helvetica Neue Condensed Black','Arial Narrow',Arial,sans-serif;
  --dur: 420ms;
  --ease: cubic-bezier(.65,0,.35,1);
  --header-h: 56px;
  --footer-h: 38px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
html{ overflow:hidden; }
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  overflow:hidden;
  cursor:default;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
input,textarea{ font-family:var(--mono); }
::selection{ background:var(--black); color:var(--white); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:1px solid var(--red); outline-offset:2px;
}

.mono{ font-family:var(--mono); }
.cond{ font-family:var(--cond); font-weight:900; text-transform:uppercase; }
.red{ color:var(--red); }
.grey{ color:var(--grey); }
.hide{ display:none !important; }
.sr-only{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.tri{ display:inline-block; font-size:.85em; margin-right:.5em; color:var(--grey); }
.sq{ display:inline-block; width:.42em; height:.42em; background:currentColor; margin:0 .5em; vertical-align:middle; }

/* ============================================================
   APP SHELL — fixed header + footer, non-scrolling body
   ============================================================ */
.app{ position:fixed; inset:0; display:flex; flex-direction:column; }

/* thin top loading bar for route transitions */
.toploader{
  position:fixed; top:0; left:0; height:3px; width:0; background:var(--red); z-index:300;
  transition:width 420ms var(--ease), opacity 200ms linear;
  opacity:0;
}
.toploader.run{ opacity:1; width:100%; }

/* ---------- header ---------- */
.app-header{
  height:var(--header-h); flex:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; border-bottom:1px solid var(--black); background:var(--white);
  position:relative;
}
.brand-mark{ display:flex; align-items:center; gap:8px; }
.brand-mark .glyph{
  width:20px; height:20px; border:1px solid var(--black); position:relative; flex:0 0 auto;
}
.brand-mark .glyph::before{
  content:''; position:absolute; inset:5px; background:var(--black);
}
.brand-mark .word{ font-family:var(--cond); font-size:16px; letter-spacing:0; }
.brand-mark .sub{ color:var(--grey); font-size:8.5px; letter-spacing:.14em; display:none; }

.nav{ display:flex; gap:6px; align-items:center; }
.nav-item{
  font-size:10.5px; letter-spacing:.06em; padding:6px 10px; border-radius:1px;
  color:var(--black); transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item::before{ content:'['; color:var(--grey-light); }
.nav-item::after{ content:']'; color:var(--grey-light); }
.nav-item.active{ background:var(--black); color:var(--white); }
.nav-item.active::before,.nav-item.active::after{ color:#555; }
.nav-item:not(.active):hover{ color:var(--red); }

.header-status{
  display:flex; align-items:center; gap:16px; font-size:9.5px; color:var(--grey); letter-spacing:.05em;
}
.header-status .status-dot{
  display:inline-block; width:5px; height:5px; background:var(--red); border-radius:50%;
  margin-right:5px; animation:blink 1.4s step-start infinite;
}
@keyframes blink{ 50%{ opacity:.15; } }

/* ---------- footer ---------- */
.app-footer{
  height:var(--footer-h); flex:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; border-top:1px solid var(--black); background:var(--white);
  font-size:9px; letter-spacing:.05em; color:var(--grey);
}
.app-footer a:hover{ color:var(--red); }
.foot-left{ display:flex; gap:14px; }
.foot-mid{ display:flex; align-items:center; gap:10px; }
.foot-right{ display:flex; gap:14px; text-align:right; }

.prog{ display:flex; align-items:center; gap:8px; }
.prog .arrows{ display:flex; gap:4px; letter-spacing:0; }
.prog .arrows button{ font-size:10px; padding:0 2px; color:var(--black); }
.prog .arrows button:hover{ color:var(--red); }
.prog .bar{ width:120px; height:1px; background:var(--grey-line); position:relative; }
.prog .bar .fill{ position:absolute; left:0; top:0; height:1px; background:var(--black); transition:width var(--dur) var(--ease); }
.prog .frac{ font-variant-numeric:tabular-nums; }

/* ---------- main / pages ---------- */
.app-main{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
.page{
  position:absolute; inset:0;
  opacity:0; filter:blur(10px); transform:translateY(8px);
  transition:opacity var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events:none;
  padding:20px 22px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.page.active{
  opacity:1; filter:blur(0); transform:translateY(0); pointer-events:auto;
}
.page-scroll{ overflow-y:auto; }
.page-scroll::-webkit-scrollbar{ width:4px; }
.page-scroll::-webkit-scrollbar-thumb{ background:var(--grey-light); }

/* corner registration ticks — reusable frame decoration */
.framed{ position:relative; }
.framed .tick{ position:absolute; width:6px; height:6px; background:var(--black); z-index:2; }
.framed .tick.tl{ top:-1px; left:-1px; }
.framed .tick.tr{ top:-1px; right:-1px; }
.framed .tick.bl{ bottom:-1px; left:-1px; }
.framed .tick.br{ bottom:-1px; right:-1px; }

/* section header used on process/project/people/place/ping */
.sec-head{
  display:flex; justify-content:space-between; align-items:flex-start; flex:0 0 auto;
  margin-bottom:14px; gap:14px;
}
.sec-head .eyebrow{ font-size:9.5px; color:var(--grey); letter-spacing:.08em; display:block; margin-bottom:4px; }
.sec-title{ font-family:var(--cond); font-size:clamp(26px,3.6vw,42px); line-height:.9; }
.sec-sub{ max-width:420px; font-size:10.5px; color:var(--grey); line-height:1.6; text-align:right; }

/* ============================================================
   HOME
   ============================================================ */
#page-home{ text-align:center; position:relative; }
.home-center{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.home-word{
  font-family:var(--cond); font-size:clamp(52px,10vw,140px); line-height:.86;
  display:flex; align-items:flex-end; justify-content:center; letter-spacing:-.01em;
}
.home-word .dot{ width:.15em; height:.15em; background:var(--black); margin:0 .05em 0.08em .02em; }
.home-word .design{ font-size:.22em; color:var(--grey); font-weight:700; margin-left:.1em; margin-bottom:.12em; }
.home-byline{ margin-top:14px; font-size:11px; letter-spacing:.05em; }
.home-byline .role{ color:var(--red); margin-left:8px; }
.home-tagline{ margin-top:22px; font-family:var(--cond); font-weight:700; font-size:clamp(13px,1.8vw,19px); min-height:1.4em; }
.home-tagline .l2{ color:var(--grey); display:block; }

.home-ticker-wrap{
  flex:0 0 auto; border-top:1px solid var(--black); border-bottom:1px solid var(--black);
  overflow:hidden; padding:8px 0; margin-top:10px;
}
.home-ticker{ display:flex; white-space:nowrap; width:max-content; animation:ticker 24s linear infinite; font-family:var(--cond); font-size:13px; }
.home-ticker span{ padding:0 18px; display:flex; align-items:center; gap:18px; }
.home-ticker span::after{ content:'▪'; color:var(--red); font-size:8px; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.home-coords{
  position:absolute; top:14px; left:0; right:0; display:flex; justify-content:space-between;
  font-size:9.5px; color:var(--grey); letter-spacing:.06em; padding:0 4px;
}

/* ============================================================
   PROCESS
   ============================================================ */
#page-process .proc-wrap{ flex:1; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; min-height:0; }
.proc-left{ display:flex; flex-direction:column; gap:14px; min-height:0; }
.proc-left .lead{ font-family:var(--cond); font-size:clamp(16px,2vw,22px); line-height:1.28; text-transform:none; }
.proc-left p{ font-size:11px; line-height:1.7; margin:0; color:var(--black); }
.proc-founder{ margin-top:auto; display:flex; gap:14px; align-items:center; border-top:1px solid var(--grey-line); padding-top:14px; }
.proc-founder img{ width:64px; height:64px; object-fit:cover; filter:grayscale(1) contrast(1.08); flex:0 0 auto; }
.proc-founder .name{ font-family:var(--cond); font-size:15px; line-height:1; }
.proc-founder .role{ color:var(--red); font-size:9px; letter-spacing:.04em; }

.proc-steps{ display:flex; flex-direction:column; min-height:0; border-top:1px solid var(--black); }
.pstep{
  display:grid; grid-template-columns:34px 100px 1fr; gap:14px; align-items:center;
  padding:0; border-bottom:1px solid var(--grey-line); flex:1; min-height:0;
}
.pstep .num{ font-family:var(--cond); font-size:15px; color:var(--grey-light); }
.pstep .name{ font-family:var(--cond); font-size:15px; display:flex; align-items:center; }
.pstep .desc{ font-size:10px; line-height:1.55; color:var(--black); }
.pstep:hover .num{ color:var(--red); }

/* ============================================================
   PROJECT — discipline rail
   ============================================================ */
#page-project{ min-height:0; }
.proj-subnav{ display:flex; gap:16px; font-size:9.5px; color:var(--grey); margin:-6px 0 10px; letter-spacing:.04em; }
.proj-subnav .on{ color:var(--black); }
.proj-subnav .tri{ margin-right:4px; }

.rail-hint{ font-size:9.5px; color:var(--grey); letter-spacing:.05em; margin:0 0 8px; flex:0 0 auto; }
.blink-tri{ display:inline-block; animation:blink-tri 1.4s step-start infinite; margin:0 4px; color:var(--red) !important; }
@keyframes blink-tri{ 50%{ opacity:.2; } }
.rail-area{ flex:1; min-height:0; display:flex; flex-direction:column; }
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc(20% - 13px);
  gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; flex:1; min-height:0; padding:2px;
  align-items:center;
}
.rail::-webkit-scrollbar{ height:3px; }
.rail::-webkit-scrollbar-thumb{ background:var(--black); }
.rail::-webkit-scrollbar-track{ background:var(--grey-line); }

.tile{ display:flex; flex-direction:column; scroll-snap-align:start; }
.tile .t-label{ font-size:10.5px; margin-bottom:6px; display:flex; align-items:center; flex:0 0 auto; }
.tile .t-label b{ font-family:var(--cond); font-size:13px; font-weight:400; letter-spacing:.01em; }
.tile .t-frame{ position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--black); background:#000; }
.tile .t-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1); opacity:.62; transition:opacity var(--dur), transform 700ms var(--ease);
}
.tile:hover .t-frame img{ opacity:.95; transform:scale(1.05); }
.tile .t-cap{ font-size:8.5px; color:var(--grey); margin-top:6px; letter-spacing:.03em; flex:0 0 auto; }

/* project list (within one discipline) */
.crumb{ font-size:9.5px; color:var(--grey); letter-spacing:.04em; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.crumb button{ color:var(--black); }
.crumb button:hover{ color:var(--red); }
.crumb .sep{ color:var(--grey-light); }

.plist-area{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.plist{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:start; }
.pcard{ display:flex; flex-direction:column; cursor:pointer; }
.pcard .p-label{ font-size:10px; margin-bottom:6px; flex:0 0 auto; display:flex; align-items:center; }
.pcard .p-label b{ font-family:var(--cond); font-weight:400; font-size:12px; }
.pcard .p-frame{ position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--grey-line); }
.pcard .p-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08); transition:transform 700ms var(--ease), filter var(--dur);
}
.pcard:hover .p-frame img{ transform:scale(1.06); filter:grayscale(.2); }
.pcard:hover .p-frame{ border-color:var(--black); }
.pcard .p-cap{ font-size:8.5px; color:var(--grey); margin-top:6px; flex:0 0 auto; }

/* ============================================================
   PROJECT OVERLAY (detail)
   ============================================================ */
.overlay{
  position:fixed; inset:0; background:var(--white); z-index:200;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform 480ms var(--ease), visibility 0s linear 480ms; visibility:hidden;
}
.overlay.open{ transform:translateY(0); visibility:visible; transition:transform 480ms var(--ease); }

.ov-header{
  height:var(--header-h); flex:0 0 auto; border-bottom:1px solid var(--black);
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
}
.ov-breadcrumb{ font-size:9.5px; color:var(--grey); letter-spacing:.04em; display:flex; align-items:center; gap:6px; }
.ov-breadcrumb button{ color:var(--black); }
.ov-breadcrumb button:hover{ color:var(--red); }
.ov-breadcrumb .cur{ color:var(--black); }
.ov-stats{ display:flex; gap:22px; font-size:9.5px; color:var(--grey); }
.ov-stats b{ color:var(--black); font-weight:400; margin-left:4px; }
.ov-close{
  width:30px; height:30px; border:1px solid var(--black); display:flex; align-items:center; justify-content:center;
  font-size:14px; flex:0 0 auto;
}
.ov-close:hover{ background:var(--black); color:var(--white); }

.ov-body{ flex:1; min-height:0; display:grid; grid-template-columns:44px 1fr 44px; }
.ov-side{ display:flex; align-items:center; justify-content:center; border-left:1px solid var(--grey-line); position:relative; }
.ov-side:first-child{ border-left:none; border-right:1px solid var(--grey-line); }
.ov-side button{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:9.5px; letter-spacing:.1em; color:var(--grey); white-space:nowrap; }
.ov-side button:hover{ color:var(--red); }

.ov-main{ min-height:0; display:grid; grid-template-columns:1fr 1.15fr; }
.ov-text{ padding:22px 26px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.ov-text p{ font-size:11px; line-height:1.75; margin:0; }
.ov-text p::before{ content:'▪ '; color:var(--red); font-size:9px; }
.ov-hero{ position:relative; overflow:hidden; background:#000; }
.ov-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.ov-hero .tick{ background:var(--white); }

.ov-foot{
  height:var(--footer-h); flex:0 0 auto; border-top:1px solid var(--black); display:flex; align-items:center;
  justify-content:space-between; padding:0 20px; font-size:9px; color:var(--grey); letter-spacing:.05em;
}

/* ============================================================
   PEOPLE
   ============================================================ */
#page-people{ min-height:0; }
.people-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(8,1fr); align-content:center; gap:14px 12px; }
.person{ display:flex; flex-direction:column; }
.person .pe-label{ font-size:9px; margin-bottom:6px; flex:0 0 auto; }
.person .pe-frame{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#000; border:1px solid var(--grey-line); }
.person .pe-frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); transition:transform 650ms var(--ease), filter var(--dur); }
.person:hover .pe-frame img{ transform:scale(1.08); filter:grayscale(.15); }
.person:hover .pe-frame{ border-color:var(--black); }
.person .pe-name{ font-family:var(--cond); font-size:11px; margin-top:7px; line-height:1.15; }
.person .pe-role{ font-size:7.8px; color:var(--grey); letter-spacing:.02em; line-height:1.35; margin-top:2px; }

/* ============================================================
   PLACE
   ============================================================ */
#page-place{ min-height:0; }
.place-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--black); border-left:1px solid var(--black); }
.place-cell{ border-right:1px solid var(--black); border-bottom:1px solid var(--black); padding:20px; display:flex; flex-direction:column; justify-content:space-between; min-height:0; transition:background var(--dur), color var(--dur); }
.place-cell .idx{ font-size:9.5px; color:var(--grey); display:flex; align-items:center; }
.place-cell h3{ font-family:var(--cond); font-size:clamp(22px,3vw,32px); margin:10px 0 0; }
.place-cell .tag{ color:var(--red); font-size:9.5px; margin-top:4px; display:block; }
.place-cell address{ font-style:normal; font-size:10px; line-height:1.85; }
.place-cell address b{ display:block; color:var(--grey); font-weight:400; font-size:8.5px; letter-spacing:.06em; margin-top:8px; }
.place-cell:hover{ background:var(--black); color:var(--white); }
.place-cell:hover .idx, .place-cell:hover address b{ color:#999; }

/* ============================================================
   PING
   ============================================================ */
#page-ping{ min-height:0; }
.ping-wrap{ flex:1; min-height:0; display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; }
.ping-intro{ display:flex; flex-direction:column; min-height:0; }
.ping-intro p{ font-size:10.5px; line-height:1.7; margin:0 0 14px; }
.ping-direct{ margin-top:auto; font-size:10.5px; line-height:1.9; }
.ping-direct b{ display:block; color:var(--grey); font-size:8.5px; letter-spacing:.06em; margin-top:10px; }
.ping-direct a:hover{ color:var(--red); }

#ping-form{ display:flex; flex-direction:column; min-height:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:12px; border-bottom:1px solid var(--black); padding-bottom:5px; position:relative; }
.field label{ display:block; font-size:9px; letter-spacing:.04em; color:var(--grey); margin-bottom:4px; }
.field label .br{ color:var(--grey-light); }
.field input, .field textarea{ width:100%; border:none; outline:none; background:none; font-size:12px; color:var(--black); resize:none; padding:0 0 3px; }
.field textarea{ min-height:38px; }
.field::after{ content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--red); transition:width var(--dur) var(--ease); }
.field.focused::after{ width:100%; }

.check-row{ display:flex; align-items:flex-start; gap:8px; margin:4px 0 12px; font-size:9px; color:var(--grey); line-height:1.5; }
.check-row input{ margin-top:2px; accent-color:var(--black); }

.ping-actions{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.ping-submit{ border:1px solid var(--black); padding:9px 20px; font-family:var(--cond); font-size:12px; display:inline-flex; align-items:center; gap:8px; }
.ping-submit:hover{ background:var(--black); color:var(--white); }
.ping-status{ font-size:9.5px; }
.ping-status.ok{ color:var(--red); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  #page-process .proc-wrap{ grid-template-columns:1fr; }
  .proc-steps{ display:none; } /* keep desktop content dense; shown via scroll on smaller rigs */
  .plist{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); }
  .people-grid{ grid-template-columns:repeat(4,1fr); }
  .ov-main{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  html,body{ overflow-y:auto; }
  .app{ position:static; height:auto; min-height:100vh; }
  .app-main{ overflow:visible; }
  .page{ position:relative; overflow:visible; padding:86px 16px 70px; min-height:calc(100vh - var(--header-h) - var(--footer-h)); }
  .page-scroll{ overflow-y:visible; }
  .app-header{ position:fixed; top:0; left:0; right:0; }
  .app-footer{ position:fixed; bottom:0; left:0; right:0; }
  .page{ display:none; }
  .page.active{ display:flex; }
  .nav{
    position:fixed; bottom:0; left:0; right:0; top:auto; z-index:70;
    display:flex; justify-content:space-between; background:var(--white);
    border-top:1px solid var(--black); padding:8px 10px; gap:0;
  }
  .app-footer{ display:none; }
  .page{ padding-bottom:56px; }
  .rail{ grid-auto-columns:60%; }
  .plist{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); height:auto; }
  .people-grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,1fr); height:auto; }
  .place-grid{ grid-template-columns:1fr; height:auto; }
  .ping-wrap{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  #page-process .proc-wrap{ height:auto; }
  .proc-steps{ display:flex; }
  .foot-left,.foot-right{ display:none; }

  /* overlay: stack + scroll on small screens */
  .overlay{ overflow-y:auto; }
  .ov-header{ height:auto; min-height:var(--header-h); flex-wrap:wrap; padding:10px 14px; gap:6px 10px; }
  .ov-breadcrumb{ flex:1 1 100%; order:1; }
  .ov-stats{ display:none; }
  .ov-close{ order:2; margin-left:auto; }
  .ov-body{ display:block; }
  .ov-side{ display:flex; border:none; padding:8px 14px; justify-content:flex-start; }
  .ov-side:last-child{ justify-content:flex-end; }
  .ov-side button{ writing-mode:horizontal-tb; transform:none; font-size:9px; }
  .ov-main{ display:block; }
  .ov-text{ padding:16px 14px; overflow-y:visible; }
  .ov-hero{ aspect-ratio:4/3; }
  .ov-foot{ height:auto; padding:10px 14px; flex-wrap:wrap; gap:4px; }
}