/* ============================================================
   Shared chrome the homepage comp never contained: the mobile
   menu, the skip link, and the dark grouped colophon.
   BUILDER-OWNED. styles.css stays extraction-only from
   design/homepage.html; this file is edited directly.
   ============================================================ */

.skip { position: absolute; left: -9999px; top: 0; background: var(--teal); color: #fff;
        padding: .8rem 1.2rem; z-index: 200; font-family: var(--grot); font-weight: 700; }
.skip:focus { left: 0; }

/* ---- masthead nav at seven items ---- */
.masthead .col { gap: 1rem; }
.contents { gap: 1.15rem; flex-wrap: wrap; }
.contents a { font-size: .95rem; }
@media (max-width: 1180px) { .contents { display: none; } }

.menu-btn { display: none; font-family: var(--grot); font-weight: 700; font-size: .95rem;
            background: none; border: 1px solid var(--rule-2); border-radius: 3px;
            padding: .55rem 1rem; min-height: 44px; cursor: pointer; color: var(--ink); }
.menu-btn:hover { background: var(--vellum); }
@media (max-width: 1180px) { .menu-btn { display: block; } }

.menu-panel { border-top: 1px solid var(--rule); background: var(--sheet); }
.menu-panel[hidden] { display: none; }
.menu-panel .col { padding-block: 1.5rem 2rem; display: grid;
                   grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 2rem; }
.menu-panel h2 { font-family: var(--grot); font-weight: 700; font-size: .78rem;
                 letter-spacing: .09em; text-transform: uppercase; color: var(--pale);
                 margin-bottom: .5rem; }
.menu-panel a { display: block; font-family: var(--serif); font-size: 1.04rem;
                color: var(--body); text-decoration: none; padding-block: .5rem; min-height: 44px; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { color: var(--teal-deep); }

/* ---- the colophon: solid dark, grouped, with the full map ---- */
footer.colophon { background: #0E1B18; border-top: 0; color: #E4EDE9; }
footer.colophon .col { padding-block: clamp(2.75rem, 5.5vw, 4rem) clamp(2rem, 4vw, 2.75rem);
                       display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }

.colophon-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
                gap: 1.75rem 2rem; }
.colophon-map h2 { font-family: var(--grot); font-weight: 700; font-size: .76rem;
                   letter-spacing: .1em; text-transform: uppercase; color: #E0A12E;
                   margin-bottom: .6rem; }
.colophon-map a { display: flex; align-items: center; min-height: 40px;
                  font-family: var(--serif); font-size: 1rem; color: rgba(228,237,233,.82);
                  text-decoration: none; }
.colophon-map a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.colophon-map a[aria-current="page"] { color: #fff; }

.colophon-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                 gap: 1rem 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(228,237,233,.16); }
footer.colophon .sigil b { color: #fff; }
footer.colophon .tenure { font-family: var(--serif); font-size: 1.02rem; line-height: 1.45;
                          color: rgba(228,237,233,.8); max-width: 42ch; }
footer.colophon .tenure b { font-family: var(--grot); font-weight: 800; color: #E0A12E;
                            letter-spacing: -.02em; }

footer.colophon .smallprint { font-size: .84rem; line-height: 1.6; color: rgba(228,237,233,.6);
                              max-width: 82ch; }
footer.colophon .smallprint b { color: rgba(228,237,233,.9); font-weight: 600; }

footer.colophon .imprint { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
                           padding-top: 1.4rem; border-top: 1px solid rgba(228,237,233,.16);
                           font-size: .86rem; color: rgba(228,237,233,.55); }
footer.colophon .imprint a { color: rgba(228,237,233,.75); text-decoration: none;
                             display: inline-flex; align-items: center; min-height: 44px; }
footer.colophon .imprint a:hover { color: #fff; text-decoration: underline; }