/* Metal roofing page: the layer diagram drawn as a gable roof (Gold Key, Oct 19 call). Built by build_gable.py. */
.gk-gable { display: block; width: 100%; height: auto; overflow: visible; }
.gk-gable__ground { fill: rgb(16 24 32 / .07); }
.gk-gable__wall { stroke: #101820; stroke-width: 1.4; stroke-linejoin: round; }
.gk-gable__wall--front { fill: #e4e8ec; }
.gk-gable__wall--end { fill: #f4f6f8; }
.gk-gable__window { fill: #adb6bf; stroke: #101820; stroke-width: 1.2; }
.gk-gable__door { fill: #1e262d; stroke: #101820; stroke-width: 1.2; }
.gk-gable__vent { fill: none; stroke: #101820; stroke-width: 1.2; }
.gk-gable__soffit { fill: rgb(16 24 32 / .18); }
.gk-gable__outline { fill: none; stroke: #101820; stroke-width: 1.4; stroke-linejoin: round; }
.gk-gable__deck { fill: #bd9a7a; }
.gk-gable__edge-face { fill: #86694e; stroke: #101820; stroke-width: 1; }
.gk-gable__seam-wood { stroke: rgb(110 97 64 / .75); stroke-width: 1.4; }
.gk-gable__under { fill: #d4dae0; }
.gk-gable__lap { stroke: rgb(16 24 32 / .28); stroke-width: 1.2; }
.gk-gable__trim { fill: #b3a276; stroke: #101820; stroke-width: 1; }
.gk-gable__trim-face { fill: #6e6140; stroke: #101820; stroke-width: 1; }
.gk-gable__panels { fill: #1e262d; }
.gk-gable__back { fill: #46515c; }
.gk-gable__seam-back { stroke: #2b343d; stroke-width: 1.6; }
.gk-gable__seam-dark { stroke: #0b1117; stroke-width: 2.2; }
.gk-gable__seam-light { stroke: #6b7681; stroke-width: 1.2; }
.gk-gable__sheen { fill: rgb(240 242 244 / .06); }
.gk-gable__ridge { fill: #e3e829; }
.gk-gable__ridge-back { fill: #b7bb1c; stroke: #101820; stroke-width: 1; }
.gk-gable__marker circle { fill: #101820; stroke: #fff; stroke-width: 2; }
.gk-gable__marker text { fill: #e3e829; font: 800 17px/1 var(--gk-font-display, system-ui, sans-serif); }

/* Scroll build (desktop with motion only; the page script adds is-building, is-on and is-current). */
.gk-gable__layer { transition: transform .9s var(--gk-ease-reveal, cubic-bezier(.16, 1, .3, 1)), opacity .45s var(--gk-ease, ease); }
.gk-layers.is-building .gk-gable__layer:not(.is-on) { opacity: 0; transform: translateY(-90px); }
.gk-layers.is-building .gk-gable__layer.is-current { transform: translateY(-8px); }
.gk-layers.is-building .gk-gable__layer.is-current .gk-gable__outline { stroke: #e3e829; stroke-width: 3; }
.gk-layers.is-building .gk-gable__layer.is-current .gk-gable__marker circle { fill: #e3e829; }
.gk-layers.is-building .gk-gable__layer.is-current .gk-gable__marker text { fill: #101820; }
.gk-layers--gable .gk-layers__scene { aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) { .gk-gable__layer { transition: none; } }