/* Closing spread and directory follow the CoderLuii site family. */
.nav__coming { position: relative; cursor: default; }
.nav .nav__coming:hover { background: var(--paper-2); color: var(--ink); }
.nav__coming b { position: absolute; bottom: 3px; right: 8px; padding: 2px 5px; border: 1px solid var(--red-ink); color: var(--red-ink); background: var(--paper-2); font: 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; transform: rotate(-5deg); pointer-events: none; }
.closing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 80px 64px; }
.closing .sec { display: flex; flex-direction: column; min-width: 0; padding: 0; margin: 0; }
.closing .maker { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; align-items: flex-start; margin: 0; padding: 28px; box-shadow: 5px 5px 0 var(--shadow); gap: 24px; }
.closing .maker > div { flex: 0 0 auto; min-width: 0; }
.closing .maker .section-art--maker { width: 128px; height: 128px; margin: 0; }
.closing .maker h2 { font-size: 34px; }
.closing .maker p { margin-top: 16px; }
.closing .maker > .box { margin-top: auto; max-width: 100%; font-size: 14px; letter-spacing: 1.28px; padding-inline: 12px; }
.closing .win--dialog { max-width: none; flex: 1; }
.closing .win__body--dialog { padding: 28px; }
.closing .h2 { font-size: clamp(36px, 3.5vw, 48px); }
.closing .lede { font-size: 17px; }
.closing .form__row { grid-template-columns: minmax(0, 1fr); }
.closing .form__row .box { justify-self: start; }
.closing .form { margin-top: 30px; }
.directory-footer { padding-bottom: 28px; }
.footer-directory { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--ink); background: var(--paper-2); box-shadow: 5px 5px 0 var(--shadow); }
.footer-column { min-width: 0; padding: 0 24px 22px; border-bottom: 1px solid var(--ink); background-image: radial-gradient(var(--dither) .65px, transparent .65px); background-size: 4px 4px; }
.footer-column:last-child { border-bottom: 0; }
.footer-column h2 { display: table; margin: 0 0 18px; padding: 10px 16px; background: var(--ink); color: var(--paper-2); font: 14px/1.3 var(--pixel); letter-spacing: .04em; text-transform: uppercase; }
.footer-column a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; font-size: 16px; text-decoration: none; }
.footer-column a span { color: var(--red-ink); }
.footer-column a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-colophon { padding-top: 26px; color: var(--ink-2); font: 14px/1.4 var(--pixel); letter-spacing: 1.28px; text-transform: uppercase; text-align: center; }
.footer-colophon p { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 16px; margin: 0; }
.footer-colophon a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-colophon a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 599px) {
  .footer-colophon p { flex-direction: column; gap: 6px; }
  .footer-colophon .footer-separator { display: none; }
}
@media (min-width: 700px) {
  .closing { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .footer-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-column { border-bottom: 0; border-right: 1px solid var(--ink); }
  .footer-column:last-child { border-right: 0; }
}
@media (max-width: 399px) {
  .closing .maker, .closing .win__body--dialog { padding: 22px 18px; }
  .closing .maker h2 { font-size: 30px; }
}
