/**
 * @fileoverview The Home below step 5, as Eneko chose in workbench round phase3/home r3 on
 * 03/11/2026 (BD): the doors drawn as terminal blocks, "Open by design" as an engraved plate, and
 * the closing statement beside the logo drawn as the device's terminals (scripts/lower.js).
 *
 * @remarks
 * The doors, the vision and the closing statement sit in the cable's column (the lane of
 * styles/story.css), so the page no longer jumps left after step 5, and the door arrow is tied to
 * its last word, so it never falls to a line of its own. The footer keeps its own column.
 */
:root { --lane-lower: 112px; }
@media (max-width: 760px) { :root { --lane-lower: 56px; } }

:is(.doors, .vision, .close) > * { margin-left: var(--lane-lower); }
.door-title::after { content: '\00a0\2192'; }

/* The doors are terminal blocks; "Open by design" is an engraved plate. */
/* The three-line rule of directions.css goes from the doors: (0,3,0), so this has to outrank it. */
:root .doors.wrap h2::before { display: none; }
.door-list .door { grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.door-list .door > :not(.terminal) { grid-column: 2; }
.door .terminal { grid-row: 1 / span 2; width: 72px; height: 64px; }
/* On a phone the terminal goes above its door: beside it, "infrastructure." and its arrow did not
   fit at 360 and pushed the page sideways (07/11/2026). */
@media (max-width: 420px) {
  .door-list .door { grid-template-columns: minmax(0, 1fr); }
  .door-list .door > :not(.terminal) { grid-column: 1; }
  .door .terminal { grid-row: auto; width: 54px; height: 48px; }
}
.terminal .body { fill: var(--chalk); stroke: var(--ink); stroke-width: 1.4; }
.terminal .bar { stroke: var(--carbon); stroke-width: 1.4; }
.terminal.t1 .bar { fill: var(--l1); }
.terminal.t2 .bar { fill: var(--ink); }
.terminal .screw { fill: var(--rule); stroke: var(--ink); stroke-width: 1.2; }
.terminal .slot { stroke: var(--ink); stroke-width: 1.2; }
.door:hover .terminal .body, .door:focus-visible .terminal .body { fill: color-mix(in srgb, var(--l1) 14%, var(--chalk)); }

.plate { position: relative; padding: 22px 26px 18px; border: 1.4px solid var(--ink); border-radius: 4px; background:
  radial-gradient(circle at 10px 10px, var(--muted) 2.5px, transparent 3px),
  radial-gradient(circle at calc(100% - 10px) 10px, var(--muted) 2.5px, transparent 3px),
  radial-gradient(circle at 10px calc(100% - 10px), var(--muted) 2.5px, transparent 3px),
  radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--muted) 2.5px, transparent 3px),
  var(--chalk); }
.plate-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plate-tags span { padding: 3px 9px; border-radius: 2px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; color: var(--fg-muted); background: rgb(32 35 32 / .05); box-shadow: inset 0 1px 1.5px rgb(32 35 32 / .35), inset 0 -1px 0 rgb(255 255 255 / .6); }

/* The closing statement beside the logo, drawn as the device's terminals. */
.close.with-finale { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.finale { width: 112px; height: 140px; }
.finale .bar { fill: var(--ink); stroke: var(--carbon); stroke-width: 1.4; }
.finale .body { fill: var(--chalk); stroke: var(--ink); stroke-width: 1.4; }
.finale .led { fill: var(--l1); }
/* The footer in the cable's column, reached by the signal from the closing logo's LED (B, chosen
   07/11/2026). The legal line keeps the full width. */
.site-foot .talk { margin-left: var(--lane-lower); }
.signal { position: absolute; top: 0; left: 0; z-index: 1; overflow: visible; pointer-events: none; }
.signal .line { fill: none; stroke: var(--l1); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; animation: signal 1.6s linear infinite; }
.signal .end { fill: var(--l1); }
@keyframes signal { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .signal .line { animation: none; } }

@media (min-width: 900px) {
  .close.with-finale { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 56px; }
  .close.with-finale > .statement { margin-left: 0; }
  .finale { width: 160px; height: 200px; }
}