/* Door section: two drawings (site/princypl/door-graphics.js) replace the hexagon line drawing.
   The drawing keeps its box (door-graphics.js centres on it) but is not shown, nor the
   highlight layer hexagon.js would add; the door's text steps and the section length are untouched. */
#door .outline-wrap { visibility: hidden !important; }
#door .pw-hex-layer { display: none !important; }

/* the graphics' own sticky layer, first in #door: as tall as the door's sticky stage (height and a
   matching negative margin set by door-graphics.js) and painted under it, so the text stays on top */
#door > .pw-dgfx {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100lvh;
  margin-bottom: -100lvh;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}
#door > .pw-dgfx svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: visible;
  font-family: inherit;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* line weights, in CSS px (the drawing is not scaled): primary lines 1px, construction lines one
   device pixel (--pw-dg-hair, set by door-graphics.js from the pixel ratio) */
#door .pw-dgfx .pw-dg-line { stroke-width: 1px; stroke-opacity: 0.9; }
#door .pw-dgfx .pw-dg-edge { stroke-linecap: square; }
#door .pw-dgfx .pw-dg-hair { stroke-width: var(--pw-dg-hair, 1px); }
#door .pw-dgfx .pw-dg-faint { stroke-opacity: 0.38; }

/* colour: the cobalt accent and the surface of each application follow the theme (vars set by
   door-graphics.js); the palette chips carry a hairline so the deep blue holds on the night */
#door .pw-dgfx .pw-dg-cobalt { fill: var(--pw-dg-cobalt, #1238e8); }
#door .pw-dgfx .pw-dg-surface { fill: var(--pw-dg-surface, rgb(255 255 255 / 0.72)); }
#door .pw-dgfx .pw-dg-chip { stroke: currentColor; stroke-opacity: 0.14; stroke-width: var(--pw-dg-hair, 1px); }

/* type: the site's Helvetica only; labels 11px at 55% ink, the "Aa" token as set type */
#door .pw-dg-label {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.01em;
  fill-opacity: 0.55;
}
#door .pw-dg-aa {
  font-family: inherit;
  letter-spacing: -0.03em;
}

/* "Intent before Form": its description sat at the foot of the screen, away from its title. Set
   under the title instead, as "Brand as Grammar" does (title, 2rem, text), in the left column
   clear of the drawing. Desktop; the phone layout stacks them already */
@media (min-width: 1024px) {
  #door .content-1 .content-description {
    position: absolute;
    grid-area: 1 / 1 / 2 / 3;        /* the title's own row and columns: an absolute grid item is
                                        placed in its grid area, so this hangs it under the title */
    left: var(--padding-sm);
    top: calc(100% + 2rem);
    max-width: 21rem;
  }
}
/* phones: no progress rule cutting the screen between the drawing and the text (the user's call):
   the text sits on the same paper as the drawing */
@media (max-width: 1023px) {
  #door .progress-wrap, #door .progress-line { display: none !important; }
}
/* phones: the text sat on its own solid paper panel (.content-inner), which cut across the paper's
   colour glow like a second page under the drawing; it is see-through now, so the drawing and the
   text sit on one continuous page, and its small separator rule goes too */
@media (max-width: 1023px) {
  #door .content-inner { background: transparent !important; }
  #door .content-inner .separator { display: none !important; }
}