:root {
  color-scheme: dark;
  --ink: #242722;
  --champagne: #efe8d7;
  --sand: #c8bd9f;
  --olive: #b9c78e;
  --earth: #6e5141;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ink);
  color: var(--champagne);
}
* { box-sizing: border-box; }
body { margin: 0; }
.page { width: min(1440px, 100%); margin: auto; padding: 32px clamp(22px, 5vw, 80px) 24px; }
.masthead, .footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.masthead { padding-bottom: 28px; border-bottom: 1px solid #505448; }
.wordmark { display: flex; align-items: baseline; font-size: 29px; font-weight: 800; letter-spacing: -.08em; }
.brand-dot { margin: 0 13px 0 4px; font-size: 11px; align-self: flex-start; letter-spacing: 0; }
.wordmark small { font-size: 11px; letter-spacing: .18em; font-weight: 500; }
.site-status { display: flex; align-items: center; gap: 9px; color: var(--sand); font-size: 13px; }
.site-status span { width: 7px; height: 7px; background: var(--olive); border-radius: 50%; }
main { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: center; padding: clamp(48px, 6vw, 88px) 0; }
.intro { position: relative; z-index: 1; }
.eyebrow { color: var(--sand); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7; margin: 0 0 28px; }
h1 { font-size: clamp(42px, 4.65vw, 68px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; margin: 0 0 30px; }
h1 em { color: var(--olive); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.description { max-width: 370px; color: var(--sand); font-size: 17px; line-height: 1.75; margin: 0; }
.return-note { position: relative; padding-left: 31px; margin: 36px 0 0; font-size: 13px; line-height: 1.8; color: var(--champagne); }
.return-note span { position: absolute; left: 0; top: -2px; font-size: 22px; color: var(--olive); }
.construction { min-width: 0; animation: settle .8s ease-out; }
.construction img { display: block; width: 100%; height: auto; }
.drawing-caption { display: block; text-align: right; padding-top: 14px; color: var(--sand); font-size: 10px; letter-spacing: .16em; }
.footer { border-top: 1px solid #505448; padding-top: 19px; color: var(--sand); font-size: 12px; }
.footer p { margin: 0; }
.footer nav { display: flex; gap: 26px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; }
a:hover { color: var(--champagne); }
a:focus-visible, main:focus-visible { outline: 2px solid var(--olive); outline-offset: 6px; }
.skip-link { position: absolute; top: 10px; left: 10px; padding: 12px; background: var(--champagne); color: var(--ink); z-index: 5; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
@keyframes settle { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .page { padding-top: 24px; }
  .masthead { padding-bottom: 22px; }
  main { grid-template-columns: 1fr; gap: 35px; padding: 43px 0 32px; }
  h1 { font-size: clamp(39px, 8.8vw, 60px); }
  .eyebrow { font-size: 10px; margin-bottom: 22px; }
  .description { max-width: 440px; font-size: 16px; }
  .return-note { margin-top: 24px; }
  .construction { max-width: 540px; width: 100%; justify-self: center; }
  .footer { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 25px; }
  .wordmark small { font-size: 9px; }
  .site-status { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .construction { animation: none; } }