/* 06-components/_doorway.css — .c-doorway: one per module on the home page. */
.c-doorway { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--pad-panel); background: var(--surface); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--dur-fast) var(--ease-out); }
.c-doorway:hover { border-color: var(--accent); color: inherit; }
.c-doorway__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.c-doorway__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.c-doorway__text { color: var(--ink-muted); font-size: var(--text-sm); flex: 1; }
.c-doorway__facts { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); padding-top: var(--space-sm); border-top: var(--stroke) solid var(--rule); }
.c-doorway__fact { display: flex; align-items: baseline; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-muted); }
.c-doorway__fact b { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--band-ink, var(--ink)); }
.c-doorway.is-coming { border-style: dashed; box-shadow: none; background: transparent; }
.c-doorway.is-coming:hover { border-color: var(--rule-strong); cursor: default; }
.c-doorway.is-coming .c-doorway__title { color: var(--ink-muted); }
/* added for pages/site-home.html — a doorway on the public site carries a small screenshot above its eyebrow */
.c-doorway__image { aspect-ratio: 4 / 3; margin: calc(-1 * var(--pad-panel)) calc(-1 * var(--pad-panel)) var(--space-2xs); overflow: hidden; background: var(--surface-sunken); border-bottom: var(--stroke) solid var(--rule); border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); }
.c-doorway__image picture, .c-doorway__image img { display: block; width: 100%; height: 100%; }
.c-doorway__image img { object-fit: cover; object-position: top left; }