/* =========================================================================
   angasaba portfolio viewer
   black · deep wood brown accent · white text · no borders, only shadow
   and background contrast (design language carried over from the dashboard)
   ========================================================================= */

:root {
  --bg:      #0B0B0C;
  --panel:   #141416;
  --panel-2: #1D1D20;
  --accent:  #8D6E4F;
  --text:    #F2EFEA;
  --muted:   #8A8A90;
  --project:  var(--accent);

  --sidebar: 268px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,.6), 0 18px 48px rgba(0,0,0,.45);
  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --- the african print: brown line motif on black, used very sparingly ---- */
.print {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 15px, rgba(141,110,79,.30) 15px 16px),
    repeating-linear-gradient(-45deg, transparent 0 15px, rgba(141,110,79,.30) 15px 16px),
    repeating-linear-gradient(90deg,  transparent 0 47px, rgba(141,110,79,.20) 47px 49px),
    repeating-linear-gradient(0deg,   transparent 0 47px, rgba(141,110,79,.20) 47px 49px);
  background-size: 32px 32px, 32px 32px, 96px 96px, 96px 96px;
}

/* =========================  LOGIN  ====================================== */

.login { display: grid; grid-template-columns: 420px 1fr; height: 100%; height: 100dvh; }
@media (max-width: 760px) { .login { grid-template-columns: 1fr; } .login__art { display: none; } }

.login__form {
  background: var(--panel);
  padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
/* Plain black. No pattern, no glow — the drawings supply the colour. */
.login__art { background: var(--bg); }

.wordmark { font-size: 26px; letter-spacing: -.02em; font-weight: 600; }

.field { display: block; }
.field input {
  width: 100%; padding: 13px 16px; border: 0; border-radius: 10px;
  background: var(--panel-2); color: var(--text); font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  outline: none; transition: box-shadow .18s var(--ease);
}
.field input:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.field input::placeholder { color: var(--muted); }

.btn {
  padding: 13px 18px; border-radius: 10px; background: var(--accent);
  color: #fff; font-weight: 600; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-1); transition: transform .16s var(--ease), filter .16s var(--ease);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }

/* Collapses entirely when there is nothing to say, so the button sits
   directly under the password field. */
.err { color: #E8850C; font-size: 13px; }
.err:empty { display: none; }
.hint { color: var(--muted); font-size: 12.5px; }

/* =========================  APP SHELL  ================================== */

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100%; height: 100dvh; }
.app.is-collapsed { grid-template-columns: 0 1fr; }

.side {
  background: var(--panel); overflow: hidden auto;
  display: flex; flex-direction: column; padding: 22px 0 16px;
  transition: opacity .2s var(--ease);
}
.app.is-collapsed .side { opacity: 0; pointer-events: none; }

.side__head { display: flex; align-items: baseline; padding: 0 24px 18px; }
.side__head .wordmark { font-size: 19px; }

/* One line, not two: the project name is also the way back to the index. */
.side__crumb {
  display: flex; align-items: center; gap: 10px;
  padding: 0 24px 14px; color: var(--text); font-weight: 600;
  font-size: 14px; letter-spacing: -.01em; text-decoration: none;
}
/* The chevron's LEFT EDGE sits on the same column as the nav dots below it,
   and it grows rightward only. At 6px the name lands within 1px of the section
   names underneath. */
.side__crumb .chev { color: var(--muted); flex: none; width: 6px; }
.side__crumb--back:hover .chev { color: var(--text); }

.nav { display: flex; flex-direction: column; gap: 1px; padding: 0 12px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; text-decoration: none;
  color: var(--muted); transition: background .14s var(--ease), color .14s var(--ease);
}
.nav a:hover { background: var(--panel-2); color: var(--text); }
.nav a.is-active { background: var(--panel-2); color: var(--text); }
/* The dots track the text, not the project: grey, white when you are on it. */
.nav a:hover .dot { background: var(--muted); }
.nav a.is-active .dot { background: var(--text); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3e; flex: none;
  transition: background .14s var(--ease); }

.nav__sub { display: flex; flex-direction: column; margin: 2px 0 6px 22px; }
.nav__sub a {
  padding: 6px 12px; font-size: 13px; color: var(--muted);
  border-radius: 8px; text-decoration: none;
}
.nav__sub a:hover { color: var(--text); }
.nav__sub a.is-active { color: var(--text); }

.side__foot {
  margin-top: auto; padding: 18px 24px 0;
  color: var(--muted); font-size: 11.5px; line-height: 1.7;
}
/* padding:0 — a button's default padding would indent it off the column. */
.side__foot button { color: var(--accent); font-size: 11.5px; padding: 0; text-align: left; }

/* --- main --------------------------------------------------------------- */

.main { display: flex; flex-direction: column; overflow: hidden auto; position: relative; }
#view { flex: 1 1 auto; min-height: 0; }

.scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(6,6,7,.6);
  opacity: 0; pointer-events: none; transition: opacity .24s var(--ease);
}
.app.is-nav-open .scrim { opacity: 1; pointer-events: auto; }

.toggle {
  position: fixed; bottom: 16px; left: calc(var(--sidebar) + 14px); z-index: 40;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(20,20,22,.72); color: var(--muted); backdrop-filter: blur(10px);
  display: grid; place-items: center; box-shadow: var(--shadow-1);
  transition: left .26s var(--ease), color .14s var(--ease), opacity .2s var(--ease);
  opacity: .45;
}
.toggle:hover { opacity: 1; }
.app.is-collapsed .toggle { left: 14px; }
.toggle:hover { color: var(--text); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 26px 34px 90px; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 20px;
}
.topbar h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.topbar .sub { color: var(--muted); font-size: 13.5px; }
.chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; background: var(--panel);
  font-size: 12px; color: var(--muted);
}
.chip .dot { background: var(--project); }

/* --- project index (the map / grid view) -------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

.card {
  background: var(--panel); border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit; display: block;
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card__art { height: 132px; background: var(--panel-2); position: relative; }
.card__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--c) 0%, transparent 68%); opacity: .5;
}
/* the card image is the project's own drawing — no stock art anywhere.
   Plans are drawn on white, so they are dimmed hard to sit on the black. */
.card__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  display: block; filter: brightness(.40) contrast(1.15) saturate(.55);
  transition: filter .3s var(--ease), transform .5s var(--ease);
}
.card:hover .card__art img { filter: brightness(.60) contrast(1.1) saturate(.75); transform: scale(1.03); }
.card__art::after { transition: opacity .25s var(--ease); }
.card:hover .card__art::after { opacity: .34; }
.card__body { padding: 16px 18px 18px; }
.card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.card .meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.card p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- sections ----------------------------------------------------------- */

.section { margin: 0 0 34px; }
.section > h2 {
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 12px;
}
.panel {
  background: var(--panel); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-1);
}
.caption { color: var(--muted); font-size: 12.5px; padding: 12px 18px; }

.summary { font-size: 16px; line-height: 1.65; max-width: 68ch; color: #ddd7cd; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 1px;
  background: var(--panel-2); border-radius: var(--r); overflow: hidden; }
.facts div { background: var(--panel); padding: 14px 16px; }
.facts dt { color: var(--muted); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.facts dd { margin: 5px 0 0; font-size: 15px; }

.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; }
.metric { background: var(--panel); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-1); }
.metric .k { color: var(--muted); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.metric .v { font-size: 22px; margin-top: 6px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--project); }

.caveat {
  background: var(--panel); border-radius: var(--r); padding: 14px 18px;
  box-shadow: var(--shadow-1); color: #d8cfc2; font-size: 13.5px; line-height: 1.6;
  display: flex; gap: 12px;
}
.caveat b { color: var(--accent); flex: none; }

/* =====================  FULL-BLEED SECTION PAGES  =======================
   A section page is its content and nothing else — no title bar, no chip,
   no caption, no control strip. Controls that are genuinely needed sit ON
   the content and fade in on hover.
   ======================================================================== */

.app.is-bleed .main { overflow: hidden; }
.bleed { height: 100%; }
.bleed--fill   { overflow: hidden; }
.bleed--scroll { overflow: auto; }

/* 3D viewer — edge to edge */
.viewer { position: relative; background: #0f1013; width: 100%; height: 100%; }
.viewer iframe { display: block; width: 100%; height: 100%; border: 0; }
.viewer__status {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: 13px; background: #0f1013;
  transition: opacity .4s var(--ease);
}
.viewer__status.is-hidden { opacity: 0; pointer-events: none; }

/* plan (svg) — edge to edge; zoom buttons appear on hover only */
.plan { position: relative; background: #101114; width: 100%; height: 100%;
  overflow: hidden; cursor: grab; }
.plan.is-drag { cursor: grabbing; }
.plan svg { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; }
.plan__tools {
  position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px;
  opacity: 0; transition: opacity .2s var(--ease);
}
.plan:hover .plan__tools, .plan__tools:focus-within { opacity: 1; }
.plan__tools button {
  width: 32px; height: 32px; border-radius: 8px; background: rgba(16,17,20,.82);
  color: var(--text); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1); display: grid; place-items: center;
}

/* pdf — the document fills the pane; the browser's own viewer has the
   download and print controls, so we add none of our own */
iframe.pdf { display: block; width: 100%; height: 100%; border: 0; background: #23242a; }

/* gallery — a wall of images, no cards, no captions */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px; background: var(--bg); }
.gal figure { margin: 0; overflow: hidden; cursor: zoom-in; background: var(--panel-2);
  display: grid; place-items: center; }
/* contain, not cover — these are drawings and wide renders; cropping them to a
   square makes two different floor plans look like the same picture */
.gal img { display: block; width: 100%; height: 300px; object-fit: contain;
  transition: transform .5s var(--ease), filter .3s var(--ease);
  filter: brightness(.88); }
.gal figure:hover img { transform: scale(1.03); filter: brightness(1); }

.lightbox { position: fixed; inset: 0; background: rgba(6,6,7,.95); z-index: 90;
  display: grid; place-items: center; padding: 40px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; box-shadow: var(--shadow-2); }

/* tables — the sheet fills the pane; sheet switching lives in the sidebar */
table.sheet { border-collapse: collapse; width: 100%; font-size: 13px; }
table.sheet td { padding: 8px 16px; vertical-align: top; color: #cfc8bd; }
/* the sheet is full-bleed, so the outer columns need the page's own margin */
table.sheet td:first-child { padding-left: 46px; }
table.sheet td:last-child  { padding-right: 46px; }
table.sheet tr.sheettitle td { font-size: 16px; color: var(--text); padding: 22px 16px 4px;
  letter-spacing: -.01em; }
table.sheet tr.sheetnote td { color: var(--muted); font-size: 12.5px; padding: 0 16px 18px; }
table.sheet tr.head td { position: sticky; top: 0; background: var(--panel-2);
  color: var(--text); font-weight: 600; z-index: 2; }
table.sheet tr.group td { background: rgba(141,110,79,.14); color: var(--text);
  font-weight: 600; letter-spacing: .04em; }
table.sheet tr.total td { background: var(--panel-2); color: var(--text); font-weight: 600; }
table.sheet tr:hover td { background: rgba(255,255,255,.03); }
table.sheet tr.sheettitle:hover td, table.sheet tr.sheetnote:hover td { background: none; }
table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sheet td.formula { color: #E8850C; font-style: italic; }
table.sheet tr.spacer td { height: 10px; padding: 0; }

/* prose + metrics keep inner padding — that is typography, not chrome */
.bleed .prose { padding: 40px 56px 80px; max-width: 78ch; color: #d6cfc4; }
.prose h1, .prose h2, .prose h3 { color: var(--text); letter-spacing: -.01em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 14px 0; }
.prose th, .prose td { padding: 7px 12px; text-align: left; }
.prose thead th { background: var(--panel-2); }
.prose tbody tr:nth-child(odd) td { background: rgba(255,255,255,.02); }
.prose a { color: var(--accent); }
.prose blockquote { margin: 0; padding-left: 16px; color: var(--muted);
  box-shadow: inset 3px 0 0 var(--accent); }

.bleed .metrics { padding: 40px 46px; }

.empty { color: var(--muted); padding: 60px 0; text-align: center; }
.spin { color: var(--muted); padding: 34px 0; text-align: center; font-size: 13px; }

/* =========================  THE MAP  ====================================
   The index is a map of Tanzania with a dot per project. The card is the
   hover state, not the furniture — the point of the page is where these
   things are in relation to each other.
   ======================================================================== */

.wrap--index { max-width: none; height: 100%; display: flex; flex-direction: column;
  padding: 0; }
.app.is-index .main { overflow: hidden; }

/* The index is the map, edge to edge, the same way a section page is its
   content. Grabbing works once there is somewhere to go. */
.map { position: relative; flex: 1 1 auto; min-height: 320px; overflow: hidden; }
.map.is-zoomed { cursor: grab; touch-action: none; }
.map.is-zoomed:active { cursor: grabbing; }
.map__svg { display: block; width: 100%; height: 100%; }

/* Same control cluster as the plan viewer, same behaviour. */
.map__tools {
  position: absolute; right: 14px; bottom: 30px; display: flex; gap: 6px;
  opacity: 0; transition: opacity .2s var(--ease); z-index: 3;
}
.map:hover .map__tools, .map__tools:focus-within { opacity: 1; }
.map__tools button {
  width: 32px; height: 32px; border-radius: 8px; background: rgba(16,17,20,.82);
  color: var(--text); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1); display: grid; place-items: center;
}

/* Layer order matters: land, borders, rivers, lakes on top. No country is
   drawn differently from any other — Tanzania is just the one with pins on it. */
.map__land   { fill: var(--panel); }
.map__border { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1;
               stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map__river  { fill: none; stroke: #24333B; stroke-width: 1;
               vector-effect: non-scaling-stroke; }
.map__lake   { fill: #0D141A; stroke: #1F2E37; stroke-width: 1;
               vector-effect: non-scaling-stroke; }

/* Towns give the map a sense of scale without competing with the projects. */
.city       { transition: opacity .18s var(--ease); }
.city.is-off { opacity: 0; pointer-events: none; }
.city__dot   { fill: #55555C; }
.city__label { fill: #5E5E65; font-size: 17px; letter-spacing: -.01em;
               paint-order: stroke; stroke: var(--bg); stroke-width: 4px;
               stroke-linejoin: round; }

/* The lake outlines are ODbL, so the credit travels with the map. It sits in
   the container rather than the svg, so panning does not carry it off-screen. */
.map__credit {
  position: absolute; right: 12px; bottom: 10px;
  color: #43434A; font-size: 11px; pointer-events: none;
}

.pin { cursor: pointer; }
.pin__halo { fill: transparent; }                    /* generous hover target */
.pin__ring { fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: 0;
  vector-effect: non-scaling-stroke; transition: opacity .18s var(--ease); }
.pin__dot  { fill: var(--muted); transition: fill .18s var(--ease), r .18s var(--ease); }
.pin__label {
  fill: var(--muted); font-size: 21px; font-weight: 500;
  letter-spacing: -.01em; paint-order: stroke;
  stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round;
  transition: fill .18s var(--ease);
}
.pin:hover .pin__dot, .pin:focus .pin__dot, .pin.is-on .pin__dot { fill: var(--text); }
.pin:hover .pin__label, .pin:focus .pin__label, .pin.is-on .pin__label { fill: var(--text); }
.pin:hover .pin__ring, .pin:focus .pin__ring, .pin.is-on .pin__ring { opacity: 1; }
.pin:focus { outline: none; }

/* the card follows the dot; it never intercepts the pointer, so the dot
   underneath stays clickable */
.mapcard {
  position: absolute; top: 0; left: 0; width: auto; max-width: 260px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.mapcard.is-on { opacity: 1; }
.mapcard .card { box-shadow: var(--shadow-2); }
.mapcard .card:hover { transform: none; }
.card--mini { padding: 12px 15px; white-space: nowrap; }
.card--mini h3 { margin: 0 0 3px; font-size: 14.5px; }
.card--mini .meta { font-size: 12.5px; }

.map__list { display: none; }          /* phones only — see the mobile block */
.map__rest { padding-top: 18px; }
.map__rest .sub { color: var(--muted); font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: 12px; }

@media (max-width: 720px) {
  .mapcard { width: 260px; }
  .pin__label { font-size: 26px; }
}


/* =========================  PHONES  =====================================
   One breakpoint, 760px. Above it nothing here applies and the desktop
   layout is untouched. Below it the sidebar cannot share the screen at all:
   268px of a 390px phone leaves 122px for the content.
   ======================================================================== */

@media (max-width: 760px) {

  /* --- shell: sidebar becomes an overlay drawer ------------------------- */
  .app { grid-template-columns: 1fr; }

  .side {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
    width: min(82vw, 320px);
    padding-top: max(22px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    transform: translateX(-100%);
    transition: transform .26s var(--ease);
    box-shadow: var(--shadow-2);
  }
  .app.is-nav-open .side { transform: none; }
  /* the desktop collapse rule would otherwise blank the drawer out */
  .app.is-collapsed .side { opacity: 1; pointer-events: auto; }
  .app.is-collapsed { grid-template-columns: 1fr; }

  /* the button is the only way into the menu here, so it reads as a control
     rather than a hint, and sits where a thumb reaches */
  .toggle {
    left: max(14px, env(safe-area-inset-left)); z-index: 70;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 44px; height: 44px; border-radius: 12px;
    opacity: 1; background: rgba(20,20,22,.9); color: var(--text);
  }
  .app.is-collapsed .toggle { left: max(14px, env(safe-area-inset-left)); }
  /* once the drawer is open the button would sit on top of its footer, so it
     steps aside to the drawer's edge, where it now means "close" */
  .app.is-nav-open .toggle { left: calc(min(82vw, 320px) + 12px); }

  /* --- index: the map keeps its shape, the cards do the navigating ------ */
  .wrap--index { height: auto; }
  .app.is-index .main { overflow: hidden auto; }
  .map { min-height: 0; aspect-ratio: 1 / 1; }
  .map__tools { opacity: 1; right: 10px; bottom: 26px; }
  .map__tools button { width: 40px; height: 40px; }
  .map__credit { font-size: 10px; right: 8px; bottom: 8px; }
  .wrap--index { padding: 0 18px 96px; }
  .mapcard { display: none; }           /* there is no hover to reveal it */
  .map__list { display: block; padding-top: 14px; }
  /* mark sizes are literal pixels now — a touch target, not a cursor target */
  .pin__label  { font-size: 14px; }
  .city__label { font-size: 11px; }
  .city__dot   { r: 2.5; }
  .pin__dot    { r: 5; }
  .pin__ring   { r: 12; }
  .pin__halo   { r: 26; }

  /* --- content ---------------------------------------------------------- */
  .wrap { padding: 18px 18px 96px; }
  .topbar { padding: 4px 0 16px; }
  .topbar h1 { font-size: 19px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .facts, .metrics { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .summary { font-size: 15px; }

  /* full-bleed pages: the sheet is the widest thing on the site, so it keeps
     its own horizontal scroll and gives back the big desktop edge padding */
  table.sheet { font-size: 12px; }
  table.sheet td { padding: 7px 10px; }
  table.sheet td:first-child { padding-left: 16px; }
  table.sheet td:last-child { padding-right: 16px; }
  .bleed--scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .bleed .prose { padding: 26px 20px 72px; }
  .bleed .metrics { padding: 26px 20px 72px; }
  .gal { grid-template-columns: 1fr; }
  .gal img { height: 240px; }
  .lightbox { padding: 16px; }

  /* --- login ------------------------------------------------------------ */
  .login__form { padding: 40px 24px; gap: 18px; }
}

/* --- touch, at any width -------------------------------------------------
   Anything that only appears on hover is unreachable on a touch screen.
   ------------------------------------------------------------------------ */

@media (hover: none) {
  /* the plan's zoom buttons are hover-revealed on desktop; here they stay */
  .plan__tools { opacity: 1; }
  .plan__tools button { width: 40px; height: 40px; }
  /* stop the browser panning the page when the gesture is meant for the SVG */
  .plan { touch-action: none; }
  .card:hover { transform: none; }

  /* iOS renders only the first page of an iframed PDF */
  .pdf__open {
    position: absolute; right: 14px; bottom: 14px; z-index: 5;
    padding: 11px 16px; border-radius: 10px;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
    text-decoration: none; box-shadow: var(--shadow-1);
  }
}

.pdf__open { display: none; }
@media (hover: none) { .pdf__open { display: inline-block; } }
.bleed--fill { position: relative; }   /* anchors .pdf__open */


/* ---------------------------------------------------------- the numbers --
   Six rows, always the same six, always in the same order. A figure that has
   not been modelled shows an em-dash and keeps its row rather than vanishing:
   an absent number is information too, and a missing row would quietly make
   two projects look comparable when they are not.
   ----------------------------------------------------------------------- */

/* Exactly three across, so the six land as two clean rows rather than a
   ragged four-plus-two with a hole in it. */
.facts--numbers { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .facts--numbers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .facts--numbers { grid-template-columns: 1fr; } }
.facts--numbers dd { font-size: 17px; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; }
.facts--numbers .is-absent dd { color: var(--muted); }
.facts__note { margin-top: 7px; color: var(--muted); font-size: 11.5px;
  line-height: 1.5; }

/* ------------------------------------------------- combined plans document --
   One page, a heading per drawing. Each drawing keeps a generous fixed height
   so it is readable at rest; pan/zoom is per drawing, the page scrolls between
   them.
   ----------------------------------------------------------------------- */

.plandoc { padding: 40px 56px 96px; max-width: 1400px; }
.plandoc__part { margin: 0 0 46px; }
.plandoc__part > h2 {
  margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.plandoc__note { margin: 0 0 14px; color: #cfc7bb; font-size: 13px; line-height: 1.6; }
/* Sized to the drawing's own aspect ratio (set inline from the SVG viewBox),
   capped so a tall drawing cannot push the next heading off the screen. A wide
   site plan then gets a wide, shallow stage instead of 760px of empty dark
   above and below it. */
.plan--inline {
  width: 100%; height: auto; max-height: min(82vh, 900px);
  min-height: 300px; aspect-ratio: 16 / 10;
  border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.plandoc__index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.plandoc__index a {
  padding: 6px 13px; border-radius: 999px; background: var(--panel);
  color: var(--muted); font-size: 12px; text-decoration: none;
}
.plandoc__index a:hover { background: var(--panel-2); color: var(--text); }

@media (max-width: 720px) {
  .plandoc { padding: 24px 16px 72px; }
  .plan--inline { max-height: 62vh; min-height: 240px; }
}

/* ------------------------------------------------------------- location --
   The only third-party frame on the site. The bar under it carries the
   coordinates in text, so the page still answers "where is it" if the frame
   is blocked.
   ----------------------------------------------------------------------- */

.geo { display: flex; flex-direction: column; height: 100%; background: #101114; }
.geo__frame { flex: 1; width: 100%; border: 0; display: block; filter: saturate(.92); }
.geo__bar {
  flex: none; display: flex; align-items: center; gap: 18px;
  padding: 13px 20px; background: var(--panel); font-size: 12.5px;
}
.geo__place { color: #cfc7bb; flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.geo__coords { color: var(--muted); font-variant-numeric: tabular-nums; }
.geo__open { color: var(--text); text-decoration: none; padding: 6px 13px;
  border-radius: 999px; background: var(--panel-2); flex: none; }
.geo__open:hover { background: #26262a; }

@media (max-width: 720px) {
  .geo__bar { flex-wrap: wrap; gap: 8px 14px; }
  .geo__place { flex: 1 0 100%; white-space: normal; }
}

/* -------------------------------------------------------------- pending --
   A standard slot this project has nothing for yet. It stays in the sidebar so
   every project navigates the same way, and says what is missing.
   ----------------------------------------------------------------------- */

.pending { padding: 80px 56px; max-width: 60ch; }
.pending h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.01em; }
.pending p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }