/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 */
/* Hallmark · genre: atmospheric · macrostructure: shared public shell · design-system: design.md · designed-as-app · contrast: pass (40–41) */
@import url('/assets/css/tokens.css');

html,
body { overflow-x: clip; }
h1,
h2 { min-width: 0; overflow-wrap: anywhere; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.public-header {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    border-bottom: var(--rule-hair) solid var(--color-rule);
    background: var(--color-header);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.public-nav {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-paper);
    text-decoration: none;
}

.public-brand img { object-fit: contain; }
.public-brand strong,
.public-brand small { display: block; white-space: nowrap; }
.public-brand strong { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: .06em; }
.public-brand small { color: var(--color-accent); font-size: .625rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.public-nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.public-nav-links a {
    position: relative;
    padding: 31px 0 27px;
    color: var(--color-paper-2);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-short) var(--ease-out);
}

.public-nav-links a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    height: var(--rule-hair);
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-short) var(--ease-out);
}

.public-nav-links a:hover,
.public-nav-links a:focus-visible,
.public-nav-links a.active { color: var(--color-accent-strong); }
.public-nav-links a:hover::after,
.public-nav-links a:focus-visible::after,
.public-nav-links a.active::after { transform: scaleX(1); }

.public-nav-actions { display: flex; align-items: center; gap: var(--space-2xs); }
.public-account,
.public-register {
    min-width: 108px;
    min-height: 40px;
    padding: 0 var(--space-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--rule-hair) solid var(--color-rule-strong);
    color: var(--color-accent-strong);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.public-register { border-color: var(--color-success-rule); color: var(--color-success); }
.public-account:hover,
.public-account:focus-visible { border-color: var(--color-focus); background: var(--color-accent-soft); }
.public-account:active,
.public-register:active { transform: translateY(1px); }
.public-account[aria-disabled="true"],
.public-register[aria-disabled="true"],
.public-menu-toggle:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.public-register:hover,
.public-register:focus-visible { border-color: var(--color-success); background: var(--color-success-soft); }

.public-menu-toggle {
    width: 42px;
    height: 40px;
    padding: 0;
    display: none;
    place-items: center;
    border: var(--rule-hair) solid var(--color-rule-strong);
    color: var(--color-paper);
    background: transparent;
    cursor: pointer;
}
.public-menu-toggle > span:not(.sr-only) { position: absolute; width: 18px; height: 1px; background: currentColor; transition: transform var(--dur-short) var(--ease-out); }
.public-menu-toggle > span:nth-child(2) { transform: translateY(-4px); }
.public-menu-toggle > span:nth-child(3) { transform: translateY(4px); }
.public-menu-toggle:active { transform: translateY(1px); }
.public-menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: rotate(45deg); }
.public-menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: rotate(-45deg); }

.public-mobile-menu {
    padding: var(--space-sm) max(var(--space-sm), calc((100% - 1180px) / 2));
    border-top: var(--rule-hair) solid var(--color-rule);
    background: var(--color-ink);
}
.public-mobile-menu a { display: block; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-paper); font-weight: 700; text-decoration: none; white-space: nowrap; }
.public-mobile-menu a:last-child { border-bottom: 0; color: var(--color-accent-strong); }

:where(a, button, input, select, textarea):focus-visible { outline: var(--rule-fine) solid var(--color-focus); outline-offset: 3px; }

@media (max-width: 980px) {
    .public-nav-links { display: none; }
    .public-nav-actions { margin-left: auto; }
    .public-menu-toggle { display: grid; }
}

@media (max-width: 600px) {
    .public-nav { min-height: 70px; gap: var(--space-2xs); }
    .public-brand img { width: 40px; height: 40px; }
    .public-brand strong { font-size: .82rem; }
    .public-brand small { font-size: .5rem; }
    .public-account,
    .public-register { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .public-nav-links a,
    .public-nav-links a::after,
    .public-menu-toggle > span:not(.sr-only) { transition-duration: 0ms; }
}