/* ============================================================
   THE DESIGN ARTISTRY — v2 EXPERIMENT
   "The Drawing Set" — architectural drafting language,
   continuous horizontal walk-through structure.
   Deliberately NO editorial display-serif, NO gold kicker.
   ============================================================ */

:root{
  --paper:#E9E6DC;        /* cool drafting paper */
  --paper-2:#F4F2EA;      /* lighter plate */
  --panel:#F7F5EF;
  --ink:#15171A;          /* graphite near-black */
  --ink-2:#4A4D52;        /* secondary */
  --ink-3:#85847C;        /* muted mono */
  --line:#C4C0B4;         /* hairline */
  --line-2:#D7D3C7;       /* soft grid */
  --red:#C13F27;          /* architect's redline */
  --red-ink:#A8331E;
  --dur:.6s;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --bar:64px;             /* minimap rail height */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;            /* JS engine drives motion */
  text-rendering:optimizeLegibility;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

/* ---- drafting grid background (very faint) ---- */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:46px 46px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 55%,transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 50%,#000 55%,transparent 100%);
}

/* ---- mono label primitive (drafting annotation) ---- */
.lbl{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:400;
}
.lbl.red{color:var(--red)}
.lbl .tick{color:var(--red);margin-right:.5em}

/* ============================================================
   VIEWPORT + TRACK (horizontal engine)
   ============================================================ */
.viewport{position:fixed;inset:0 0 var(--bar) 0;overflow:hidden;z-index:1}
.track{display:flex;align-items:stretch;height:100%;will-change:transform}
.panel{
  position:relative;flex:0 0 auto;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,5vw,6rem) clamp(2rem,5vw,7rem);
  border-right:1px solid var(--line);
}
.panel.w-screen{width:100vw}
.panel.w-wide{width:min(82vw,1080px)}

/* corner drafting ticks on plates */
.ticks::before,.ticks::after{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--red);pointer-events:none;
}
.ticks::before{top:18px;left:18px;border-right:0;border-bottom:0}
.ticks::after{bottom:18px;right:18px;border-left:0;border-top:0}

/* ---- panel index marker (top-left of every panel) ---- */
.p-idx{
  position:absolute;top:clamp(1.4rem,3vw,2.4rem);left:clamp(2rem,5vw,7rem);
  display:flex;align-items:baseline;gap:.7rem;z-index:3;
}
.p-idx b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--red);letter-spacing:.1em}
.p-idx span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   ARRIVAL PANEL
   ============================================================ */
.arrival{align-items:flex-start;justify-content:center;gap:1.6rem;max-width:none}
.arrival .eyebrow{display:flex;gap:1.4rem;align-items:center;margin-bottom:.4rem}
.wordmark{
  font-weight:300;
  font-size:clamp(2.8rem,8.5vw,8.2rem);
  line-height:.92;
  letter-spacing:-.02em;
  max-width:14ch;
}
.wordmark b{font-weight:500}
.wordmark .u{
  position:relative;font-weight:500;
}
.wordmark .u::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:3px;background:var(--red);
}
.arrival .sub{
  font-size:clamp(1rem,1.5vw,1.25rem);color:var(--ink-2);max-width:42ch;font-weight:400;
  margin-top:.4rem;
}
.arrival .meta-row{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:1.4rem}
.arrival .meta-row div b{display:block;font-family:var(--mono);font-size:1.05rem;font-weight:500;color:var(--ink)}

.walk-hint{
  display:flex;align-items:center;gap:.9rem;margin-top:2.2rem;
}
.walk-hint .ln{width:70px;height:1px;background:var(--ink);position:relative;overflow:hidden}
.walk-hint .ln::after{content:"";position:absolute;top:-2px;right:0;width:8px;height:5px;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg);transform-origin:top right}
.walk-hint .ln i{position:absolute;inset:0;background:var(--red);transform:translateX(-100%);animation:slide 2.6s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* north arrow chrome */
.north{position:absolute;top:clamp(1.4rem,3vw,2.4rem);right:clamp(2rem,5vw,7rem);text-align:center;z-index:3}
.north .arr{width:0;height:0;margin:0 auto 4px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:16px solid var(--ink)}
.north b{font-family:var(--mono);font-size:12px;color:var(--red);font-weight:500}

/* ============================================================
   PRACTICE PANEL (about / spec sheet)
   ============================================================ */
.practice{justify-content:center;gap:2rem;max-width:none}
.practice .stmt{
  font-weight:300;font-size:clamp(1.6rem,3.2vw,3.1rem);line-height:1.18;letter-spacing:-.01em;max-width:18ch;
}
.practice .stmt em{font-style:normal;color:var(--red)}
.specsheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);max-width:760px}
.specsheet div{padding:1.1rem 1.2rem 1.1rem 0;border-right:1px solid var(--line)}
.specsheet div:last-child{border-right:0}
.specsheet .n{font-family:var(--mono);font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:500;display:block;line-height:1}
.specsheet .k{margin-top:.5rem}

/* ============================================================
   PROJECT ROOM (walk-through filmstrip)
   ============================================================ */
.room{flex-direction:row;align-items:stretch;padding:0;width:auto}
.room .plate{
  flex:0 0 clamp(320px,30vw,440px);height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(2.4rem,4vw,4rem) clamp(2rem,3vw,3.2rem);
  background:var(--panel);border-right:1px solid var(--line);position:relative;
}
.room .plate .num{font-family:var(--mono);font-size:13px;color:var(--red);letter-spacing:.1em;font-weight:500}
.room .plate h2{font-weight:300;font-size:clamp(1.9rem,2.8vw,2.9rem);line-height:1.04;letter-spacing:-.01em;margin-top:auto}
.room .plate .idea{font-size:1.02rem;color:var(--ink-2);margin-top:.9rem;max-width:34ch}
.room .plate .spec{margin-top:1.8rem;border-top:1px solid var(--line);padding-top:1.2rem;display:grid;gap:.7rem}
.room .plate .spec .r{display:flex;justify-content:space-between;gap:1rem}
.room .plate .spec .r span:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.room .plate .spec .r span:last-child{font-size:13.5px;text-align:right;color:var(--ink)}

.room .strip{display:flex;height:100%}
.frame{
  flex:0 0 auto;height:100%;width:auto;position:relative;border-right:1px solid var(--line);overflow:hidden;
  background:var(--paper-2);max-width:none;
}
/* width follows the image's true aspect ratio (set inline) so the FULL room shows, uncropped */
.frame img{object-fit:cover;width:100%;height:100%}
.frame .cap{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(21,23,26,.74);color:#fff;backdrop-filter:blur(4px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;
}
.frame .plate-tick{position:absolute;top:12px;right:12px;width:10px;height:10px;border-top:1px solid #fff;border-right:1px solid #fff;opacity:.8}

/* ============================================================
   CAPABILITY PANEL
   ============================================================ */
.cap .stmt{font-weight:300;font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.2;max-width:20ch;margin-bottom:.4rem}
.caplist{border-top:1px solid var(--line);max-width:880px}
.caprow{display:grid;grid-template-columns:64px 1fr auto;gap:1.4rem;align-items:baseline;
  padding:1.25rem 0;border-bottom:1px solid var(--line)}
.caprow .no{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.1em}
.caprow h3{font-weight:500;font-size:clamp(1.15rem,1.8vw,1.5rem)}
.caprow p{color:var(--ink-2);font-size:.98rem;margin-top:.25rem;max-width:52ch;font-weight:400}
.caprow .meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   CONTACT PANEL
   ============================================================ */
.contact{justify-content:center;gap:1.6rem;max-width:none}
.contact h2{font-weight:300;font-size:clamp(2.2rem,5vw,4.6rem);line-height:1;letter-spacing:-.02em;max-width:16ch}
.contact .lines{display:flex;flex-wrap:wrap;gap:2.6rem;margin-top:1rem}
.contact .lines a{display:block}
.contact .lines .k{margin-bottom:.4rem}
.contact .lines .v{font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:500;border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:border-color var(--dur) var(--ease)}
.contact .lines a:hover .v{border-color:var(--red)}
.contact .foot{margin-top:2.4rem;display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center}

/* ============================================================
   MINIMAP — plan-view spatial navigation rail
   ============================================================ */
.minimap{
  position:fixed;left:0;right:0;bottom:0;height:var(--bar);z-index:20;
  background:var(--paper-2);border-top:1px solid var(--line);
  display:flex;align-items:stretch;
}
.minimap .mm-id{
  flex:0 0 auto;display:flex;align-items:center;gap:.8rem;padding:0 1.2rem;border-right:1px solid var(--line);
}
.minimap .mm-id b{font-weight:500;font-size:13px;letter-spacing:.02em}
.minimap .mm-id .lbl{display:none}
.plan{flex:1 1 auto;position:relative;display:flex;align-items:stretch;overflow:hidden}
.cell{
  flex:0 0 auto;position:relative;border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:0 14px;cursor:pointer;background:transparent;border-top:0;border-bottom:0;border-left:0;
  font-family:var(--mono);text-align:left;transition:background var(--dur) var(--ease);
  min-width:54px;
}
.cell:hover{background:rgba(193,63,39,.06)}
.cell .cn{font-size:11px;color:var(--red);font-weight:500;letter-spacing:.08em}
.cell .ct{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:120px}
.cell.active{background:rgba(193,63,39,.1)}
.cell.active .ct{color:var(--ink)}
.youhere{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:3;pointer-events:none;
  transition:left .08s linear}
.youhere::before{content:"";position:absolute;top:-1px;left:-4px;width:10px;height:5px;background:var(--red);
  clip-path:polygon(0 0,100% 0,50% 100%)}
.mm-prog{flex:0 0 auto;display:flex;align-items:center;padding:0 1.2rem;border-left:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.mm-prog b{color:var(--ink);font-weight:500}

/* ---- top thin progress line ---- */
.toprog{position:fixed;top:0;left:0;height:2px;background:var(--red);z-index:30;width:0}

/* ============================================================
   REDUCED MOTION / NO-JS FALLBACK
   ============================================================ */
.no-js .viewport{position:static;inset:auto;overflow-x:auto;overflow-y:hidden}
.no-js .minimap{display:none}

@media (prefers-reduced-motion:reduce){
  .frame img{transition:none}
  .walk-hint .ln i{animation:none;display:none}
}

/* ============================================================
   MOBILE — same horizontal full-screen walk-through, swipeable.
   (Layout stays horizontal; only sizing / chrome adapts.)
   ============================================================ */
@media (max-width:860px){
  :root{--bar:46px}
  .viewport{touch-action:none}              /* engine owns the gesture */
  .panel{padding:clamp(3.4rem,11vw,4.5rem) 1.4rem clamp(2rem,7vw,3rem)}
  .panel.w-wide{width:92vw}
  .p-idx{left:1.4rem;top:1.2rem}
  .north{top:1.2rem;right:1.4rem}
  .arrival{gap:1.1rem}
  .arrival .meta-row{gap:1.6rem;margin-top:1rem}
  .arrival .walk-hint{margin-top:1.4rem}
  .specsheet{grid-template-columns:repeat(2,1fr)}
  .specsheet div{border-bottom:1px solid var(--line)}
  /* project room: keep the side-by-side filmstrip, just slimmer plate */
  .room .plate{flex:0 0 80vw;padding:clamp(2rem,8vw,3rem) 1.4rem}
  .frame.lead,.frame.std{width:auto}        /* (legacy) aspect-ratio drives width */
  .caprow{grid-template-columns:40px 1fr;gap:.8rem}
  .caprow .meta{grid-column:2;margin-top:.4rem}
  /* compact minimap: numbers only, full-width plan */
  .minimap .mm-id,.minimap .mm-prog{display:none}
  .cell{min-width:0;flex:1 1 0;padding:0 4px;align-items:center;justify-content:center}
  .cell .ct{display:none}
  .cell .cn{font-size:12px}
}