/* Shared by every page: both colour themes, type, header and footer.
   Home uses landing.css; supporting pages add a layout in a <style> block. */

/* Archivo, one file. Its width axis sets the roles: wide for interface labels, normal for text,
   narrow for drawing annotations and figures. Licence: fonts/OFL.txt */
@font-face { font-family: Archivo; src: url(fonts/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

@font-face { font-family: "KhaMetric Monument"; src: url(fonts/KhaMetricMonument-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* Light theme: the plotted sheet. */
:root {
  color-scheme: light;
  --ground: #f3f0e9;      /* page ground */
  --paper: #ffffff;       /* the drawing and the form fields */
  --ink: #0a2c4b;         /* KhaMetric navy: text and wall lines */
  --brass: #c69d5d;       /* KhaMetric gold: fills and lines */
  --brass-text: #8a6420;  /* gold that stays readable as text */
  --muted: #55636f;
  --rule: #d3dae0;
  --row-rule: #e8ecef;
  --field-border: #9aa9b5;
  --placeholder: #55636f;
  --button: #0a2c4b;
  --button-text: #ffffff;
  --button-hover: #134066;
  --room: #c69d5d;        /* room fill on the drawing, and how strong it is */
  --room-off: .15;
  --room-lit: #c69d5d;    /* the room that is pointed at */
  --room-on: .42;
  --row-on: #f5ecdc;
  --shadow: 0 28px 50px -34px rgb(10 44 75 / .45);
  --scan-paper: #e9e7e2;  /* the photographed plan that goes in */
  --scan-ink: #3d4349;
  --band: #0a2c4b;        /* the demos band */
  --band-card: #113858;
  --band-well: #0d3352;   /* behind a video */
  --band-rule: #2b5072;
  --band-title: #ffffff;
  --band-text: #e4ecf2;
  --band-muted: #a9bdcc;
  --band-link: #e6c995;
  --wide: 114%;
  --narrow: 78%;
}
/* Dark theme: the drawing as it looks on a CAD screen, light lines on deep navy. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #071b2e;
  --paper: #0b2740;
  --ink: #e8eef3;
  --brass: #d2aa69;
  --brass-text: #e0bf88;
  --muted: #a3b7c7;
  --rule: #234160;
  --row-rule: #1a3652;
  --field-border: #456583;
  --placeholder: #7f97ab;
  --button: #d2aa69;
  --button-text: #071b2e;
  --button-hover: #e0bd83;
  --room: #9dbfdc;
  --room-off: .1;
  --room-lit: #9dbfdc;
  --room-on: .36;
  --row-on: #1d3a52;
  --shadow: 0 28px 50px -34px rgb(0 0 0 / .8);
  --scan-paper: #cdd1d3;
  --scan-ink: #33393f;
  --band: #0b2740;
  --band-card: #0f3151;
  --band-well: #0a2339;
  --band-rule: #2a4d6d;
  --band-title: #ffffff;
  --band-text: #e4ecf2;
  --band-muted: #a9bdcc;
  --band-link: #e6c995;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 Archivo, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button, input { font: inherit; }
button, a, input, summary { touch-action: manipulation; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
body h1, body h2 { font-family: "KhaMetric Monument", Archivo, sans-serif; font-synthesis: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -100px; background: var(--paper); padding: 12px 16px; z-index: 5; }
.skip:focus { top: 16px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 4px; background: var(--button); color: var(--button-text); font-weight: 650; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--button-hover); }
.button:disabled { opacity: .6; cursor: default; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; }
.site-header img { height: 56px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.site-nav a { text-decoration: none; padding: 12px 0; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; }
/* The logo's navy letters are redrawn light for the dark theme. */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

/* Theme switch: a disc, half filled, that turns over. */
.theme-switch { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.theme-switch:hover { border-color: var(--ink); }
.theme-switch span { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform .3s ease; }
[data-theme="dark"] .theme-switch span { transform: rotate(180deg); }

/* Footer */
.site-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 52px 0 44px; font-size: 14.5px; color: var(--muted); }
.site-footer img { width: 168px; height: auto; }
.tagline { margin-top: 12px; font-stretch: var(--wide); font-weight: 600; color: var(--brass-text); }
.footer-notes { text-align: right; }
.footer-notes p + p { margin-top: 4px; }
.site-footer a { color: var(--ink); }

@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 36px); }
  .site-header { padding: 16px 0; }
  .site-header img { height: auto; width: 136px; }
  .site-header { gap: 16px; }
  .site-nav .roomy-only { display: none; }
  .site-nav { gap: 12px; font-size: 14px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 0 36px; }
  .footer-notes { text-align: left; }
}
/* Narrow screens keep the links that lead somewhere new; the signup is the next thing on the page. */
@media (max-width: 440px) {
  .site-nav .wide-only { display: none; }
}
@media (max-width: 380px) {
  .site-nav .roomy-only { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .theme-switch span { transition: none; }
}

/* Architectural headings and drafting-sheet details across the supporting pages. */
.eyebrow { font: 550 12px/1.6 Archivo, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-text); }
body h1, body h2 { font-weight: 400; font-stretch: normal; }
.about section { border-top-color: var(--brass); }
.about .agent { box-shadow: 6px 6px 0 #c69d5d20; border-top: 3px solid var(--brass); }
.about .about-heading { max-width: 900px; padding-bottom: 28px; border-bottom: 1px solid var(--brass); }
.news .post-top { border-bottom-color: var(--brass); }
@media (max-width: 360px) { .site-nav { gap: 8px; font-size: 13px; } .site-header img { width: 120px; } }