/* Front Door Digital / warm architectural canvas.
   Presentation only. The approved layout, images and behavior are untouched.
   A single page-wide layer, never a panel behind an individual project. */
:root {
  --paper: #f6f2eb;
  --line: #d4cec3;
  --muted: #53564f;
}
body {
  position: relative;
  isolation: isolate;
  background: var(--paper);
}
.site-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background:
    radial-gradient(ellipse at 8% 19%, rgba(255,254,250,.98) 0%, rgba(255,254,250,.78) 25%, rgba(255,254,250,0) 58%),
    linear-gradient(119deg, transparent 0%, transparent 51.9%, rgba(137,105,75,.075) 52%, rgba(137,105,75,.015) 67.8%, rgba(255,255,255,.68) 68%, rgba(255,255,255,.06) 79%, transparent 79.2%),
    radial-gradient(ellipse at 106% -7%, #c9b493 0%, #e7d9c4 26%, rgba(241,234,222,.28) 53%, transparent 73%),
    linear-gradient(174deg, #f7f3ec 0%, #f8f5ee 50%, #e9dfd0 100%);
}
/* Fine print-like texture, built with CSS instead of a large image download. */
.site-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    repeating-linear-gradient(0deg, rgba(71,48,26,.03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(71,48,26,.028) 0 1px, transparent 1px 5px);
}
.atmosphere-contour {
  position: absolute;
  width: 1090px;
  height: 1090px;
  top: -556px;
  right: -195px;
  border: 1px solid rgba(137,106,77,.17);
  border-radius: 50%;
  transform: rotate(-15deg);
  mask-image: linear-gradient(130deg, transparent 11%, #000 45%, #000 86%, transparent 99%);
  -webkit-mask-image: linear-gradient(130deg, transparent 11%, #000 45%, #000 86%, transparent 99%);
}
.atmosphere-contour::before,
.atmosphere-contour::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(137,106,77,.14);
}
.atmosphere-contour::before { inset: 55px; }
.atmosphere-contour::after { inset: 110px; border-color: rgba(137,106,77,.1); }
.atmosphere-floor {
  position: absolute;
  width: 1250px;
  height: 740px;
  bottom: -640px;
  left: -190px;
  border: 1px solid rgba(137,106,77,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 64px rgba(255,255,255,.07), 0 0 0 65px rgba(137,106,77,.07);
  transform: rotate(-16deg);
}
/* Keep the backdrop behind content; never apply tint/filter to screenshots. */
.header, main.wrap, .footer { background: transparent; }
.nav-contact, .button-light { background-color: rgba(255,253,248,.3); }
.nav-contact:hover, .button-light:hover { background-color: rgba(255,253,248,.75); }
.launch-label { background-color: #f2e3d4; }
.scope-content { background: #f4eee4; }
.project-index, .design-note, .footer { color: #53564f; }
/* Dialog content stays solid so text and form controls remain easy to read. */
dialog { background: #faf8f3; }
@media(min-width:1700px) {
  .atmosphere-contour { right: calc((100vw - 1700px) / 2 - 160px); }
}
@media(max-width:980px) {
  .atmosphere-contour { width: 840px; height: 840px; top: -415px; right: -320px; }
  .atmosphere-floor { left: -650px; }
}
@media(max-width:640px) {
  .site-atmosphere {
    background:
      radial-gradient(ellipse 135% 40% at 0% 20%, rgba(255,254,250,.94) 0%, rgba(255,254,250,.65) 39%, transparent 74%),
      linear-gradient(118deg, transparent 0%, transparent 46%, rgba(137,105,75,.045) 46.15%, transparent 69%, rgba(255,255,255,.4) 69.15%, transparent 84%),
      radial-gradient(ellipse 120% 35% at 108% -2%, #d4c1a2 0%, rgba(226,212,190,.63) 37%, transparent 75%),
      linear-gradient(177deg, #f6f0e6 0%, #faf7f1 52%, #ece2d3 100%);
  }
  .atmosphere-contour { width: 540px; height: 540px; top: -212px; right: -275px; }
  .atmosphere-contour::before { inset: 35px; }
  .atmosphere-contour::after { inset: 70px; }
  .site-atmosphere::after { opacity: .22; }
  .atmosphere-floor { bottom: -680px; left: -800px; }
}
@media(prefers-contrast:more), (forced-colors:active) {
  .site-atmosphere { display: none; }
  body { background: #fff; }
  .nav-contact, .button-light { background: transparent; }
}
@media print {
  body { background: #fff; }
  .site-atmosphere { display: none; }
}