/* ==========================================================================
   TABtooch — layout: utility bar, masthead, rubric nav, drawer, page frame,
   section rhythm and footer. The masthead replaces the usual logo-menu-CTA
   top bar: wordmark and rubrics are stacked like a newspaper front page.
   ========================================================================== */

/* ---------------------------------------------------------- utility bar -- */

.utility {
    background: var(--deep);
    color: var(--deep-fg-soft);
    font-size: var(--t-xs);
    border-bottom: 1px solid var(--deep-line);
}

.utility__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-2);
    min-height: 2.25rem;
}

.utility__age {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--deep);
    background: var(--deep-fg);
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
}

.utility__msg {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}

.utility__msg > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.utility__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    margin-left: auto;
}

/* The help and self-exclusion links are the ones a person in trouble reaches
   for, so they carry a 24px target rather than the bare line height. */
.utility a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--deep-fg);
    text-decoration-color: color-mix(in srgb, var(--deep-fg) 40%, transparent);
    white-space: nowrap;
}

.utility a:hover {
    color: #fff;
}

.utility__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-weight: 600;
}

/* -------------------------------------------------------------- masthead - */

.masthead {
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
}

.masthead__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--s-3) var(--s-4);
    padding-block: var(--s-4);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--fg);
}

.wordmark:hover {
    color: var(--brand);
}

.wordmark__mark {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
}

.wordmark__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.55rem, 1.25rem + 1.5vw, 2.3rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

.wordmark__text b {
    font-weight: 600;
    font-style: italic;
    color: var(--brand);
}

.masthead__aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
}

.masthead__clock {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    color: var(--fg-soft);
    text-align: right;
    line-height: 1.35;
}

.masthead__clock b {
    display: block;
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--fg);
}

.masthead__actions {
    display: none;
    gap: var(--s-2);
}

.drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--fg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
}

.drawer-toggle .icon {
    font-size: 1.15em;
}

.drawer-toggle:hover {
    border-color: var(--fg);
}

@media (min-width: 600px) {
    .masthead__clock {
        display: block;
    }
}

@media (min-width: 860px) {
    .masthead__actions {
        display: flex;
    }

    .drawer-toggle {
        display: none;
    }
}

/* ------------------------------------------------------------- rubric nav */

.rubrics {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg);
    border-top: 1px solid var(--line-strong);
    border-bottom: 3px double var(--line-strong);
    transition: box-shadow var(--speed) var(--ease);
}

.rubrics.is-stuck {
    box-shadow: var(--shadow-2);
}

.rubrics__inner {
    display: flex;
    align-items: stretch;
    gap: var(--s-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rubrics__inner::-webkit-scrollbar {
    display: none;
}

.rubric {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.85rem;
    color: var(--fg-2);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.rubric::after {
    content: "";
    position: absolute;
    inset-inline: 0.5rem;
    bottom: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--speed) var(--ease);
}

.rubric:hover,
.rubric:focus-visible {
    color: var(--brand);
}

.rubric:hover::after,
.rubric[aria-current="page"]::after {
    transform: scaleX(1);
}

.rubric[aria-current="page"] {
    color: var(--fg);
}

.rubrics__spacer {
    flex: 1;
}

/* The masthead already carries the call to action at the top of the page. This
   one belongs to the rubric bar once that bar has stuck and the masthead has
   scrolled away, so the two are never on screen together.
   The space is reserved rather than collapsed, so nothing shifts when it
   appears; visibility keeps it out of the tab order until then. */
.rubrics__cta {
    flex: none;
    display: none;
    align-items: center;
    align-self: center;
    margin-left: var(--s-2);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--speed) var(--ease),
                transform var(--speed) var(--ease),
                visibility var(--speed);
}

@media (min-width: 860px) {
    .rubrics__cta {
        display: inline-flex;
    }

    .rubrics.is-stuck .rubrics__cta {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- drawer - */

.scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(6, 3, 10, 0.72);
    backdrop-filter: blur(2px);
    animation: fade-in var(--speed) var(--ease);
}

.drawer {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 100;
    width: min(21rem, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--line-strong);
    box-shadow: 4px 0 40px -14px rgba(0, 0, 0, 0.75);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform var(--speed-slow) var(--ease);
}

.drawer.is-open {
    transform: none;
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 3px double var(--line-strong);
}

.drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    color: var(--fg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.drawer__close:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.drawer__group {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
}

.drawer__group:last-child {
    border-bottom: 0;
}

.drawer__label {
    display: block;
    margin-bottom: var(--s-2);
}

.drawer__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    color: var(--fg);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
}

.drawer__link:last-child {
    border-bottom: 0;
}

.drawer__link .icon {
    font-size: 1.15em;
    color: var(--brand);
}

.drawer__link:hover {
    color: var(--brand);
}

.drawer__link[aria-current="page"] {
    color: var(--brand);
    font-weight: 600;
}

.drawer__actions {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5) var(--s-6);
}

@media (min-width: 860px) {
    .drawer,
    .scrim {
        display: none;
    }
}

/* ------------------------------------------------------------ page frame - */

.main {
    display: block;
    padding-bottom: var(--s-8);
}

/* Editorial section: number sits in the left margin column on desktop. */
.section {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
    padding-block: var(--s-6);
}

.section--tight {
    padding-block: var(--s-5);
}

.section--flush {
    padding-top: 0;
}

.section__head {
    display: grid;
    grid-template-columns: var(--margin-col) 1fr;
    align-items: end;
    gap: 0 var(--s-4);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    border-bottom: 3px double var(--line-strong);
}

/* Signature: numbered sections, mono, in the margin. */
.section__number {
    grid-column: 1;
    align-self: start;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--brand);
    padding-top: 0.35rem;
}

.section__number::after {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    margin-top: 0.4rem;
    background: var(--line-strong);
}

.section__titles {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
}

.section__title {
    font-size: var(--t-xl);
}

.section__lead {
    grid-column: 2;
    max-width: 62ch;
    margin-top: var(--s-2);
    color: var(--fg-soft);
}

.section__body {
    display: grid;
    grid-template-columns: var(--margin-col) 1fr;
    gap: 0 var(--s-4);
}

.section__body > * {
    grid-column: 2;
}

@media (max-width: 1079px) {
    .section__number {
        grid-column: 1 / -1;
        margin-bottom: var(--s-1);
    }

    .section__number::after {
        display: none;
    }

    .section__titles,
    .section__lead,
    .section__body > * {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------- footer - */

.site-footer {
    background: var(--deep);
    color: var(--deep-fg-soft);
    border-top: 4px solid var(--brand);
    padding-block: var(--s-7) var(--s-6);
    font-size: var(--t-sm);
    line-height: 1.7;
}

.site-footer a {
    color: var(--deep-fg);
    text-decoration-color: color-mix(in srgb, var(--deep-fg) 30%, transparent);
}

.site-footer a:hover {
    color: #fff;
    text-decoration-color: currentColor;
}

.footer__masthead {
    display: grid;
    gap: var(--s-4);
    padding-bottom: var(--s-5);
    border-bottom: 3px double var(--deep-line);
}

.footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
}

.footer__brand .wordmark {
    color: var(--deep-fg);
}

.footer__brand .wordmark:hover {
    color: #fff;
}

.footer__brand .wordmark__text b {
    color: var(--brand);
}

.footer__domain {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    color: var(--deep-fg-soft);
    border-left: 1px solid var(--deep-line);
    padding-left: var(--s-4);
}

.footer__blurb {
    max-width: 68ch;
    color: var(--deep-fg-soft);
}

/* Three columns maximum — wide data lives in its own full-width band. */
.footer__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5) var(--s-6);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--deep-line);
}

@media (min-width: 560px) {
    .footer__nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .footer__nav {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer__col h2 {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep-fg);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--deep-line);
}

.footer__col ul {
    display: grid;
    gap: 0.1rem;
}

.footer__col a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.footer__col a:hover {
    border-bottom-color: var(--brand);
}

.footer__link-btn {
    color: var(--deep-fg);
    text-align: left;
    border-bottom: 1px solid transparent;
}

.footer__link-btn:hover {
    color: #fff;
    border-bottom-color: var(--brand);
}

/* WCAG 2.2 target size: standalone footer controls need a 24px hit area,
   which the 13px type does not give on its own. */
.footer__col a,
.footer__link-btn,
.footer__licence dd a,
.badge-row a {
    display: inline-block;
    min-height: 24px;
    padding-block: 0.28rem;
}

/* Licence data: full-width band, auto-fit columns, never a narrow column. */
.footer__licence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s-4) var(--s-6);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--deep-line);
}

.footer__licence dt {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--deep-fg-soft);
    margin-bottom: 0.2rem;
}

.footer__licence dd {
    margin: 0;
    color: var(--deep-fg);
    line-height: 1.5;
}

.footer__licence dd .mono {
    font-size: var(--t-sm);
}

.footer__legal {
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--deep-line);
    max-width: 92ch;
}

.footer__legal p + p {
    margin-top: var(--s-4);
}

.footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    padding-top: var(--s-5);
    font-size: var(--t-xs);
}

/* ------------------------------------------------------------- animation - */

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

/* Scroll reveal: opt-in, and switched off entirely for reduced motion. */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--speed-slow) var(--ease),
                transform var(--speed-slow) var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}