/* Sunlit Elevation (SohumAI): architectural CAD sheet & specification chrome shared by a-one-door, b-the-row, c-the-face */
:root {
  --paper: #f6f4ef;
  --paper-hi: #F9F8F5;
  --ink: #121110;
  --soft: #6e6a60;
  --rule: #cfcabd;
  --accent: #FF4B12;
  --accent-hi: #FF7A4D;
  --hero-out: 0;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: 28px;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
html.locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 15px/1.45 var(--font-display);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  font-variant-numeric: tabular-nums;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .52  0 0 0 0 .47  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* CAD sheet registration frame & corner brackets */
.sheet-frame {
  position: fixed;
  inset: 12px;
  pointer-events: none;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.sheet-frame .reg {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(18, 17, 16, 0.55);
  border-style: solid;
}
.sheet-frame .reg.tl { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.sheet-frame .reg.tr { top: -1px; right: -1px; border-width: 1.5px 1.5px 0 0; }
.sheet-frame .reg.bl { bottom: -1px; left: -1px; border-width: 0 0 1.5px 1.5px; }
.sheet-frame .reg.br { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }
.sheet-frame .sheet-hud {
  position: absolute;
  left: 16px;
  bottom: -1px;
  transform: translateY(50%);
  background: var(--ink);
  color: var(--paper);
  padding: 5px 11px;
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}
.sheet-frame .sheet-hud b {
  color: var(--accent-hi);
  font-weight: 600;
}
.sheet-frame .scale-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sheet-frame .scale-bar i {
  display: inline-block;
  width: 26px;
  height: 4px;
  border: 1px solid var(--paper);
  background: linear-gradient(90deg, var(--accent-hi) 50%, transparent 50%);
}

.track { position: relative; z-index: 0; pointer-events: none; }

.mono, .lv, .plot span, .tb, .beat .n, .pill, .hint, .loader {
  font: 500 10.5px/1.35 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.soft { color: var(--soft); }

/* loader: architectural plotting status card */
.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: left;
  gap: 6px;
  z-index: 6;
  transition: opacity .65s var(--ease);
}
.loader p {
  margin: 0;
  padding: 0 4px;
}
.loader p:first-child {
  font-weight: 600;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}
.loader p span {
  color: var(--accent);
  font-weight: 600;
}
.loader.gone { opacity: 0; pointer-events: none; }

/* top bar */
.topbar {
  position: fixed;
  top: 20px;
  left: var(--gut);
  right: var(--gut);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s;
}
html.in .topbar { opacity: 1; transform: none; }

.mark {
  display: inline-flex;
  align-items: center;
  font: 800 14px/1 var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
  padding: 8px 13px;
}
.mark::before {
  content: '[ ';
  color: var(--accent);
  margin-right: 4px;
}
.mark::after {
  content: ' // ELV.02 ]';
  color: var(--accent);
  font-weight: 500;
  font-size: 11px;
  margin-left: 4px;
}
.mark small {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.72);
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(246, 244, 239, 0.24);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(246, 244, 239, 0.94);
  pointer-events: auto;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pill::after {
  content: '→';
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  transition: transform .16s ease, color .16s ease;
}
.pill:hover {
  background: var(--ink);
  color: var(--paper);
}
.pill:hover::after {
  transform: translateX(2px);
  color: var(--accent-hi);
}
.pill.solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pill.solid::after {
  color: var(--accent-hi);
}
.pill.solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.pill.solid:hover::after {
  color: var(--paper);
}

/* hero words: masked slide-up, then they leave as the drawing turns */
.hero {
  position: fixed;
  left: var(--gut);
  top: 78px;
  z-index: 4;
  pointer-events: none;
  visibility: hidden;
  opacity: calc(1 - var(--hero-out));
  transform: translateY(calc(var(--hero-out) * -26px));
}
html.in .hero { visibility: visible; }
.hero.on-card {
  padding: 14px 18px 16px;
  background: rgba(246, 244, 239, 0.92);
  border: 1.5px solid var(--ink);
  border-left: 3.5px solid var(--accent);
}
.hero .kicker {
  margin: 0 0 10px;
  opacity: 0;
  transition: opacity 1.1s var(--ease) .45s;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  letter-spacing: .1em;
}
.hero .kicker::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
html.in .hero .kicker { opacity: 1; }

.hero h1 {
  margin: 0;
  font: 800 clamp(36px, 3.8vw, 54px)/0.96 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
  background: rgba(255, 75, 18, 0.1);
  padding: 0 8px;
  border-left: 3px solid var(--accent);
  text-decoration: none;
}
.mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mask > span { display: block; transform: translateY(125%); opacity: 0; transition: transform 1.4s var(--ease), opacity 0.35s; }
.mask + .mask > span { transition-delay: .1s; }
html.in .mask > span { transform: none; opacity: 1; }

/* pinned annotations: elevation datum levels & plot schedule tags */
.pins {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: calc(1 - var(--hero-out));
}
.pins > * {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.1s var(--ease) .75s;
}
html.in .pins > * { opacity: 1; }

.lv {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -8px;
}
.lv i {
  display: block;
  width: 10px;
  height: 10px;
  border: 1.2px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(90deg, var(--ink) 50%, transparent 50%) top / 100% 50% no-repeat,
    linear-gradient(90deg, transparent 50%, var(--ink) 50%) bottom / 100% 50% no-repeat;
}
.lv em {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
}
.lv b {
  font-weight: 600;
  color: var(--ink);
  background: rgba(246, 244, 239, 0.9);
  padding: 1px 5px;
  border: 1px solid var(--rule);
}
.lv span {
  color: var(--soft);
  background: rgba(246, 244, 239, 0.84);
  padding: 1px 4px;
  font-size: 9.5px;
}

.plot {
  text-align: center;
  margin-left: -43px;
  width: 86px;
  background: rgba(246, 244, 239, 0.94);
  border: 1px solid var(--ink);
  padding: 5px 6px 5px;
}
.plot b {
  display: block;
  font: 700 20px/1 var(--font-display);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.plot span {
  display: block;
  color: var(--soft);
  font-size: 8.5px;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid var(--rule);
}
.plot.on {
  border: 1.5px solid var(--accent);
  background: rgba(18, 17, 16, 0.93);
}
.plot.on b {
  color: var(--paper);
  font-weight: 700;
}
.plot.on span {
  color: var(--accent-hi);
  font-weight: 600;
  border-top-color: rgba(255, 75, 18, 0.4);
}

/* CAD title block */
.tb {
  position: fixed;
  right: var(--gut);
  bottom: 26px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  border: 1.5px solid var(--ink);
  z-index: 4;
  background: var(--paper);
  opacity: 0;
  transition: opacity 1.1s var(--ease) .9s;
  pointer-events: none;
}
html.in .tb {
  opacity: clamp(0, calc(1 - var(--hero-out) * 1.15), 1);
  transition: none;
}
.tb div {
  padding: 6px 13px 7px;
  border-left: 1px solid var(--ink);
  font-weight: 600;
  color: var(--ink);
}
.tb div:first-child { border-left: 0; }
.tb span {
  display: block;
  color: var(--soft);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .12em;
  margin-bottom: 2px;
}

/* Live CAD townhouse plan/section radar (bottom-right, matching 10 Section Sweep v4) */
#cad-map {
  position: fixed;
  right: var(--gut);
  bottom: 26px;
  width: 236px;
  background: rgba(18, 17, 16, 0.93);
  color: var(--paper);
  border: 1px solid var(--accent);
  padding: 8px 10px 9px;
  font: 500 8.5px/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
html.in #cad-map {
  opacity: clamp(0, calc((var(--hero-out) - 0.2) * 1.25), 1);
  pointer-events: auto;
  transform: translateY(calc((1 - var(--hero-out)) * 12px));
}
#cad-map #cm-lbl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--paper);
  margin-bottom: 4px;
}
#cad-map #cm-lbl b {
  color: var(--accent-hi);
  font-weight: 600;
}
#cad-map svg {
  width: 100%;
  height: 66px;
  display: block;
  overflow: visible;
}
#cad-map .cm-zone {
  fill: rgba(255, 75, 18, 0.0);
  stroke: none;
  cursor: pointer;
  transition: fill .15s ease;
}
#cad-map .cm-zone.active {
  fill: rgba(255, 75, 18, 0.18);
  stroke: rgba(255, 75, 18, 0.55);
  stroke-width: 0.18;
}
#cad-map .cm-zone:hover {
  fill: rgba(255, 75, 18, 0.34);
  stroke: #FF7A4D;
  stroke-width: 0.25;
}
#cad-map .cm-pills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(246, 244, 239, 0.16);
}
#cad-map .cm-btn {
  appearance: none;
  border: 1px solid rgba(246, 244, 239, 0.22);
  background: rgba(246, 244, 239, 0.04);
  color: rgba(246, 244, 239, 0.78);
  font: 500 7.5px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 2px;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#cad-map .cm-btn:hover,
#cad-map .cm-btn.active {
  background: rgba(255, 75, 18, 0.24);
  border-color: var(--accent);
  color: var(--paper);
}

/* scroll hint */
.hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(246, 244, 239, 0.88);
  border: 1px solid rgba(18, 17, 16, 0.25);
  padding: 5px 10px;
  font: 500 10px var(--font-mono);
  letter-spacing: .2em;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
html.done .hint { opacity: calc(1 - var(--hero-out) * 3); }
.hint i {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.hint i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: hint 2.2s var(--ease) infinite;
}
@keyframes hint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* beats: dark/amber architectural room & detail callout cards (matching 10 Section Sweep v4) */
#beats { position: fixed; left: var(--gut); bottom: 52px; z-index: 4; pointer-events: none; }
.beat {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(430px, calc(100vw - 2 * var(--gut)));
  padding: 14px 18px 16px;
  background: rgba(18, 17, 16, 0.93);
  color: var(--paper);
  border-left: 3px solid var(--accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.beat .n {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--accent-hi);
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.beat .n::after {
  content: 'CAD // ELV.02';
  font-size: 8.5px;
  color: rgba(246, 244, 239, 0.48);
  font-weight: 500;
}
.beat p {
  margin: 0;
  font: 700 21px/1.18 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}
.beat p em {
  font-style: normal;
  color: var(--accent-hi);
  background: rgba(255, 75, 18, 0.16);
  padding: 0 6px;
  border-left: 2px solid var(--accent);
  text-decoration: none;
}
.beat .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  border: 1px solid rgba(246, 244, 239, 0.22);
  background: rgba(246, 244, 239, 0.04);
}
.beat .row div {
  padding: 6px 10px 7px;
  border-left: 1px solid rgba(246, 244, 239, 0.22);
  font: 600 10px/1.35 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.beat .row div:first-child { border-left: 0; }
.beat .row span {
  display: block;
  color: var(--accent-hi);
  font-size: 8px;
  font-weight: 500;
  margin-bottom: 2px;
}
.beat .pill {
  margin-top: 12px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.beat .pill::after {
  color: var(--paper);
}
.beat .pill:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--ink);
}
.beat .pill:hover::after {
  color: var(--ink);
}

.debug {
  position: fixed;
  right: 18px;
  top: 64px;
  z-index: 9;
  font: 500 11px var(--font-mono);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 3px 8px;
}

/* phone */
@media (max-aspect-ratio: 4/5) {
  :root { --gut: 18px; }
  .sheet-frame { inset: 8px; }
  .sheet-frame .sheet-hud { display: none; }
  .topbar { top: 14px; right: 14px; }
  .mark { font-size: 11.5px; padding: 6px 10px; }
  .mark::after { font-size: 9.5px; }
  .mark small { display: none; }
  .pill { padding: 6px 10px; font-size: 9px; }
  .hero { top: 58px; right: var(--gut); }
  .hero h1 { font-size: 34px; }
  .hero .kicker { margin-bottom: 8px; font-size: 9.5px; }
  .tb { display: none; }
  .lv { display: none; }
  .hero.on-card {
    left: var(--gut);
    right: var(--gut);
    top: 56px;
    padding: 11px 13px 13px;
  }
  .plot { width: 58px; margin-left: -29px; padding: 3px 4px; }
  .plot b { font-size: 14px; }
  .plot span { font-size: 7px; margin-top: 2px; padding-top: 2px; }
  #cad-map {
    right: var(--gut);
    bottom: 16px;
    width: 162px;
    padding: 6px 8px;
    font-size: 7.5px;
    transform: none !important;
  }
  #cad-map svg { height: 48px; }
  #cad-map .cm-pills { display: none; }
  #beats { left: var(--gut); right: var(--gut); bottom: 104px; }
  .beat { width: calc(100vw - 2 * var(--gut)); padding: 11px 14px 13px; }
  .beat p { font-size: 17px; }
}

/* B: the title block sits top right, the plots take the bottom */
.tb.tb-top { top: 76px; bottom: auto; }
@media (max-aspect-ratio: 4/5) { .tb.tb-top { display: none; } }

/* End card: the one call to action, plus the footer and credit (same as 01 to 06) */
#endcard {
  position: fixed; left: var(--gut); top: 82px; width: 340px; max-width: calc(100vw - 2 * var(--gut));
  background: rgba(246, 244, 239, 0.96); color: var(--ink);
  border: 1.5px solid var(--ink); border-left: 3px solid var(--accent);
  padding: 18px 20px 16px; opacity: 0; visibility: hidden; pointer-events: none; z-index: 6;
}
#endcard.live { pointer-events: auto; }
#endcard .ec-k { margin: 0; font: 600 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
#endcard .ec-t { margin: 10px 0 0; font: 800 26px/1.08 var(--font-display); letter-spacing: -.02em; }
#endcard .ec-cta {
  display: inline-block; margin-top: 16px;
  font: 700 14px/1 var(--font-display); letter-spacing: .01em;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 13px 18px; transition: background .15s;
}
#endcard .ec-cta:hover { background: var(--ink); }
#endcard .ec-f {
  margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--rule);
  font: 500 9.5px/1.7 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
}
#endcard .ec-f a { color: inherit; text-decoration: none; }
@media (max-aspect-ratio: 4/5) {
  #endcard { left: var(--gut); right: var(--gut); top: 54px; width: auto; padding: 14px 15px 12px; }
  #endcard .ec-t { font-size: 21px; }
  #endcard .ec-cta { font-size: 13px; padding: 11px 15px; margin-top: 12px; }
  #endcard .ec-f { margin-top: 12px; font-size: 8.5px; }
}