/* Floorplan Folio — printed-matter energy: part drawing set, part essay.
   The poché plates are the one bold element; everything else stays quiet. */

:root {
  --paper: #FAF8F2;
  --ink: #1C1B18;
  --graphite: #6E6A61;
  --drafting-blue: #2B4C7E;
  --paper-shadow: #E8E4DA;
  --sheet: #FFFEFA;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Spectral", Georgia, serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
}

a {
  color: var(--drafting-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible,
svg:focus-visible {
  outline: 2px solid var(--drafting-blue);
  outline-offset: 2px;
}

.eyebrow {
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 0.6rem;
}

/* ------------------------------------------------------------------ cover */

.cover {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem 2rem;
}

.cover h1 {
  font-size: clamp(3.2rem, 10vw, 6.5rem);
  font-weight: 440;
  letter-spacing: -0.015em;
}

.cover .subtitle {
  font-style: italic;
  font-size: 1.25rem;
  color: var(--graphite);
  margin: 1.4rem 0 0;
}

.cover .rule {
  border: none;
  border-top: 1px solid var(--ink);
  width: 14rem;
  margin: 2.2rem auto;
}

.cover .edition {
  font-family: var(--font-data);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}

.cover-hint { margin-top: 4rem; font-family: var(--font-data); font-size: 0.85rem; }

/* --------------------------------------------------------------- contents */

.contents {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}

.contents-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.contents-list li { margin: 0 0 1.6rem; }

.contents-entry {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
}

.contents-entry:hover .contents-title { color: var(--drafting-blue); }

.plate-no {
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--graphite);
  min-width: 1.8rem;
}

.contents-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

.leader {
  flex: 1;
  border-bottom: 1px dotted var(--graphite);
  transform: translateY(-0.28em);
  min-width: 2rem;
}

.contents-date {
  font-family: var(--font-data);
  font-size: 0.82rem;
  color: var(--graphite);
  white-space: nowrap;
}

.contents-blurb {
  margin: 0.15rem 0 0 2.55rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--graphite);
}

.contents-error { font-family: var(--font-data); font-size: 0.9rem; color: var(--graphite); }

.colophon {
  border-top: 1px solid var(--paper-shadow);
  padding: 1.5rem;
  text-align: center;
}

.colophon p {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--graphite);
  margin: 0;
}

/* ------------------------------------------------------------- plate page */

.site {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--paper-shadow);
}

.site a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.site a:hover { color: var(--drafting-blue); }

.site-note {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}

main { padding: 0 1.5rem; }

article, .not-found {
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

article h1, .not-found h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  margin-bottom: 1.4rem;
}

.rationale p {
  max-width: 65ch;
  margin: 0 0 1.1rem;
}

/* Validation panel — a development aid, not a user feature. */
.warnings {
  border: 1px solid var(--paper-shadow);
  border-left: 3px solid var(--drafting-blue);
  padding: 0.9rem 1.2rem;
  margin: 1.8rem 0;
  font-family: var(--font-data);
  font-size: 0.82rem;
}

.warnings-title {
  font-family: var(--font-data);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.warnings ul { margin: 0; padding-left: 1.1rem; }
.warnings li { margin: 0.25rem 0; }
.validation-error { color: #8A2B1D; }
.validation-warning { color: var(--graphite); }

/* The plate itself, mounted like a print. */
.plate-figure { margin: 2.6rem 0 2rem; }

.plate-mount {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--paper-shadow);
  box-shadow: 0 1px 0 var(--paper-shadow);
  padding: 0.75rem;
  overflow-x: auto;
}

.plate-mount svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 640px;
  cursor: grab;
}

.plate-mount svg.dragging { cursor: grabbing; }

.plate-controls {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.35rem;
}

.plate-control {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--paper-shadow);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-data);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.plate-control:hover {
  border-color: var(--drafting-blue);
  color: var(--drafting-blue);
}

figcaption {
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--graphite);
  margin-top: 0.7rem;
}

.render-error { font-family: var(--font-data); font-size: 0.85rem; padding: 2rem; }

/* Legend for rooms too small to label in place. */
.legend { margin: 2rem 0; }

.legend table {
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: 0.82rem;
}

.legend th {
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--graphite);
  border-bottom: 1px solid var(--ink);
  padding: 0.3rem 1.4rem 0.3rem 0;
}

.legend td {
  border-bottom: 1px solid var(--paper-shadow);
  padding: 0.35rem 1.4rem 0.35rem 0;
}

.legend .legend-index { color: var(--drafting-blue); }

.plate-nav {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--paper-shadow);
  font-family: var(--font-data);
  font-size: 0.85rem;
}

.not-found p { max-width: 55ch; }
.noscript-note { max-width: 64rem; margin: 3rem auto; }

/* -------------------------------------------------------------- the plan */
/* All plan styling lives here: the SVG carries classes only. */

.plan { font-family: var(--font-data); }

.plan .sheet { fill: var(--sheet); }

.plan .layer-grid line { stroke: var(--paper-shadow); stroke-width: 1; }

.plan .wall { fill: var(--ink); }

.plan .door-leaf { stroke: var(--ink); stroke-width: 2.5; }
.plan .door-arc { stroke: var(--ink); stroke-width: 2; fill: none; }

.plan .window-fill { fill: var(--sheet); }
.plan .window-line { stroke: var(--ink); stroke-width: 2; }

.plan .furniture { stroke: var(--ink); stroke-width: 1.5; fill: none; }

.plan .room-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-anchor: middle;
  fill: var(--ink);
}

.plan .room-dims,
.plan .room-area {
  font-size: 12px;
  text-anchor: middle;
  fill: var(--graphite);
}

.plan .room-index-badge { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.plan .room-index { font-size: 13px; text-anchor: middle; fill: var(--ink); }

.plan .dim-line, .plan .dim-ext { stroke: var(--drafting-blue); stroke-width: 1; }
.plan .dim-ext { opacity: 0.65; }
.plan .dim-tick { stroke: var(--drafting-blue); stroke-width: 1.8; }
.plan .dim-text { font-size: 12px; text-anchor: middle; fill: var(--drafting-blue); }

.plan .scalebar-seg-filled { fill: var(--ink); }
.plan .scalebar-frame { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.plan .scalebar-text { font-size: 11px; text-anchor: middle; fill: var(--graphite); }
.plan .scalebar-unit { text-anchor: start; }

.plan .north-ring { fill: none; stroke: var(--graphite); stroke-width: 1.5; }
.plan .north-line { stroke: var(--ink); stroke-width: 2; }
.plan .north-head { fill: var(--ink); }
.plan .north-text { font-size: 13px; text-anchor: middle; fill: var(--ink); }

.plan .titleblock-frame { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.plan .titleblock-rule { stroke: var(--ink); stroke-width: 1; }
.plan .tb-project { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; fill: var(--ink); }
.plan .tb-title { font-size: 12px; fill: var(--ink); }
.plan .tb-meta { font-size: 11px; fill: var(--graphite); }
.plan .tb-note { font-size: 10px; letter-spacing: 0.04em; fill: var(--graphite); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .contents-entry { flex-wrap: wrap; }
  .leader { display: none; }
}

/* ------------------------------------------------------------------ print */

@media print {
  body { background: #fff; }
  .site, .plate-controls, .warnings, .plate-nav, .colophon,
  .cover-hint, .noscript-note { display: none !important; }
  a { color: inherit; text-decoration: none; }
  article, .not-found { padding: 0; max-width: none; }
  .plate-figure { break-inside: avoid; page-break-inside: avoid; margin: 1.2cm 0 0; }
  .plate-mount { border: none; box-shadow: none; padding: 0; overflow: visible; }
  .plate-mount svg { min-width: 0; max-height: 21cm; }
  .legend { break-inside: avoid; }
}

/* -------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}