/* D-026: architectural drawing, selected by the owner. Decorative SVGs contain no technical claims. */
:root {
  --paper: #e6ece8;
  --white: #f8faf7;
  --ink: #232d30;
  --muted: #52635f;
  --line: #b8c8c0;
  --drawing-surface: #d9e4de;
  --drawing-sheet: #f0f3ee;
  background: var(--paper);
}

.site-header { background: var(--paper); border-bottom-color: var(--line); }
.hero { background: var(--paper); }
.hero-intro, .page-intro { position: relative; isolation: isolate; }
.hero-intro::before, .page-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: url('./ceiling-plan.svg') no-repeat right -62px top -60px / 700px auto;
  opacity: .62;
  mask-image: linear-gradient(90deg, transparent 35%, #000 63%), linear-gradient(#000 28%, transparent 62%);
  mask-composite: intersect;
}
.hero-intro-copy { position: relative; }
.hero-intro-copy::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: -24px -8px -10px -28px;
  background: linear-gradient(90deg, transparent, var(--paper) 28%);
}
.light-stage {
  width: min(100% - 96px, 1344px);
  margin-inline: auto;
  border: 1px solid #9aafa6;
}
.concept-caption { color: var(--muted); }
.structure-section {
  position: relative;
  isolation: isolate;
  background: var(--drawing-surface);
  border-block-color: var(--line);
}
.structure-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: url('./shadow-joint.svg') no-repeat right -40px top -175px / 580px auto;
  opacity: .3;
  mask-image: linear-gradient(#000, transparent 250px);
}
.structure-model { background: transparent; }
.structure-model .sm-toolbar, .structure-model .sm-stage { background: var(--drawing-sheet); }
.structure-model .sm-toolbar { border-top: 1px solid #a2b7ac; }
.structure-model .sm-stage { border-bottom: 1px solid #a2b7ac; }
.structure-model .sm-heading p, .structure-model .sm-status { color: var(--muted); }
.solutions-section { position: relative; isolation: isolate; }
.solutions-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  bottom: 230px;
  width: 34%;
  height: 270px;
  background: url('./shadow-joint.svg') no-repeat left bottom / 340px auto;
  opacity: .36;
  mask-image: linear-gradient(transparent, #000 50%);
}
.projects-section { background: var(--drawing-sheet); border-block: 1px solid var(--line); }
.materials-note { border-top-color: #9fb5a9; }
.process-list li { border-top-color: #9fb5a9; }
.article-aside { background: var(--paper); }
.article-aside .button { background: var(--accent); }
.page-intro::before {
  background-position: right -150px top -85px;
  background-size: 560px auto;
  opacity: .34;
  mask-image: linear-gradient(90deg, transparent 50%, #000), linear-gradient(#000 45%, transparent 96%);
}
.page-intro h1, .page-lead, .breadcrumbs { position: relative; }
.site-footer { background: var(--paper); }

@media (min-width: 1537px) {
  .light-stage { height: 720px; }
}
@media (max-width: 1050px) {
  .hero-intro::before { background-position: right -135px top -40px; background-size: 600px auto; }
  .solutions-section::before { display: none; }
}
@media (max-width: 850px) {
  .light-stage { width: calc(100% - 48px); }
  .hero-intro::before { background-position: right -120px top -20px; background-size: 500px auto; opacity: .46; }
  .hero-intro-copy::before { display: none; }
  .hero-intro::before { mask-image: linear-gradient(90deg, transparent 18%, #000), linear-gradient(#000 35%, transparent 70%); }
  .structure-section::before { background-size: 430px auto; background-position: right -130px top -140px; opacity: .22; }
}
@media (max-width: 600px) {
  .light-stage { width: calc(100% - 40px); }
  .hero-intro::before { background-size: 420px auto; background-position: right -180px top -18px; opacity: .4; }
  .page-intro::before { background-size: 420px auto; background-position: right -190px top -30px; opacity: .28; }
}
@media print {
  :root { --paper: #fff; --ink: #000; --muted: #333; }
  .hero-intro::before, .hero-intro-copy::before, .page-intro::before,
  .structure-section::before, .solutions-section::before { display: none; }
}