:root {
    color-scheme: light;
    font: 16px/1.5 system-ui, sans-serif;
    color: #221812;
    background: #f5eee4;
    --ink: #221812;
    --muted: #6a5547;
    --orange: #ff6d00;
    --rust: #9d310e;
    --border: #e2d4c4;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
a { color: var(--rust); font-weight: 700; }
:focus-visible { outline: 3px solid #b63d13; outline-offset: 4px; }
.site-header { color: #fff4e8; background: #150e0b; border-bottom: 1px solid #39241a; }
.topbar {
    display: flex;
    align-items: center;
    gap: clamp(.6rem, 3vw, 2.5rem);
    max-width: 76rem;
    min-height: 4.6rem;
    margin: auto;
    padding: .65rem clamp(.9rem, 3vw, 2rem);
}
.brand { display: inline-flex; flex: 0 0 auto; }
.brand-logo {
    position: relative;
    display: block;
    width: clamp(5.2rem, 12vw, 8rem);
    aspect-ratio: 2691 / 859;
    overflow: hidden;
}
.brand-logo img {
    position: absolute;
    left: -27.43%;
    top: -192.55%;
    width: 154.85%;
    height: auto;
}
.topbar-label, .site-footer { font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.topbar-label { margin-left: auto; color: #e7c4aa; text-align: right; }
nav { display: flex; flex-wrap: wrap; gap: .2rem; }
nav a, .logout button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #f6e7db;
    font-size: .82rem;
    text-decoration: none;
}
nav a:hover, nav a[aria-current] { background: #392218; color: #ffbc8b; }
.logout { margin-left: auto; }
.logout button { margin: 0; background: transparent; border-color: #694333; }
.logout button:hover { background: #392218; }
.site-header :focus-visible { outline-color: #ffb477; }
main, .site-footer { max-width: 76rem; margin: auto; padding-inline: clamp(.9rem, 3vw, 2rem); }
main { padding-block: clamp(1rem, 3vw, 2rem) 2.5rem; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem 1.75rem; color: var(--muted); }
h1, h2, h3 { line-height: 1.04; letter-spacing: -.045em; }
h1 { margin: 0 0 .65rem; font-size: clamp(2rem, 5vw, 3.75rem); }
h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.35rem); }
p { margin: .65rem 0 1rem; }
section { min-width: 0; padding: clamp(1rem, 2.4vw, 1.65rem); border: 1px solid var(--border); border-radius: 1rem; background: #fffaf4; }
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: 26rem;
    overflow: hidden;
    padding: clamp(1.4rem, 5vw, 4.5rem);
    border: 0;
    border-radius: clamp(1rem, 2vw, 1.6rem);
    color: #fff9ee;
    background:
        linear-gradient(90deg, #170b08 0%, #1e0b08 33%, transparent 74%),
        radial-gradient(ellipse at 84% 7%, #ffb22f, transparent 43%),
        radial-gradient(ellipse at 68% 66%, #d7350e, transparent 66%),
        linear-gradient(148deg, #51150e, #9d260c 54%, #160c08 92%);
}
.hero-content { position: relative; z-index: 1; width: fit-content; }
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font-size: .69rem; font-weight: 850; letter-spacing: .16em; }
.eyebrow span { width: .54rem; height: .54rem; border-radius: 50%; background: #c24a1b; }
.hero .eyebrow { color: #ffd1a9; }
.hero .eyebrow span { background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.hero h1 { max-width: 12ch; margin: 0; font-size: clamp(2.85rem, 6.6vw, 6.2rem); font-weight: 950; line-height: .92; text-transform: uppercase; }
.hero h1 strong { display: block; color: var(--orange); font-weight: inherit; }
.hero-description { max-width: 32ch; margin: 1.25rem 0; color: #f4ddcf; }
.hero-link, button, #download {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    padding: .72rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--orange);
    color: #231209;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.hero-link:hover, button:hover, #download:hover { background: #ffa14f; }
.hero :focus-visible { outline-color: #fff4e8; }
.hero-art { position: absolute; inset: 0 0 0 46%; pointer-events: none; }
.art-orbit { position: absolute; width: 84%; aspect-ratio: 1; right: -8%; top: -14%; border: 1px solid #ffba6e80; border-radius: 50%; box-shadow: 0 0 0 2.2rem #ffba6e21, 0 0 0 4.8rem #ffba6e13; }
.art-sheet {
    position: absolute;
    width: clamp(10rem, 17vw, 15rem);
    aspect-ratio: .76;
    right: 23%;
    top: 17%;
    border-radius: .85rem;
    box-shadow: 0 1.5rem 3.5rem #2d0a08a6;
}
.art-sheet-back { transform: translate(31%, 5%) rotate(23deg); background: linear-gradient(165deg, #ffaf3d, #e1470e 60%, #6a190f); border: 1px solid #ffb768; }
.art-sheet-front { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: clamp(.9rem, 2vw, 1.55rem); transform: rotate(-12deg); color: #4d1a0c; background: linear-gradient(146deg, #fff7e8, #ffc491); border: 1px solid #fff1d7; }
.art-sheet-front .brand-logo { width: 80%; }
.art-sheet-front b { font-size: .75rem; letter-spacing: .1em; padding: .24rem .45rem; border: 1px solid #ad5f43; border-radius: .25rem; }
.art-lines { display: grid; gap: .45rem; width: 100%; }
.art-lines i { height: 2px; border-radius: 2px; background: #aa654975; }
.art-lines i:last-child { width: 62%; }
.document-section { margin-top: clamp(2rem, 5vw, 3.65rem); scroll-margin-top: 1.25rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: 1.25rem; }
.section-heading .eyebrow { color: var(--rust); margin-bottom: .55rem; }
.section-heading > p { margin: 0; color: var(--muted); font-size: .85rem; }
.document-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.document-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 13rem;
    padding: clamp(1rem, 2.4vw, 1.65rem);
    border: 1px solid var(--border);
    border-radius: 1rem;
    color: var(--ink);
    background: #fffaf4;
    text-decoration: none;
}
.document-card:nth-child(even) { background: linear-gradient(145deg, #35130e, #1c100b 66%, #55220e); border-color: #4d291c; color: #fff2e4; }
.document-card:hover { border-color: #c45524; box-shadow: 0 .5rem 1.25rem #50220017; }
.document-card:focus-visible { outline-offset: 3px; }
.card-top, .card-action { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.card-top { color: var(--rust); font-size: 1rem; }
.document-card:nth-child(even) .card-top { color: #ffb37c; }
.card-format { padding: .2rem .48rem; border: 1px solid currentColor; border-radius: 999px; font-size: .65rem; letter-spacing: .12em; }
.document-card h3 { margin: 1.2rem 0; font-size: clamp(1.4rem, 2.3vw, 2.05rem); }
.card-action { margin-top: auto; font-size: .85rem; }
.card-action span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; background: var(--orange); color: #26140b; }
.layout, .login-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.login-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
.login-hero { padding: clamp(1.3rem, 3.5vw, 3rem); min-height: 22rem; }
.login-hero h1 { font-size: clamp(2rem, 4.7vw, 4rem); }
.login { display: grid; align-content: center; }
.notice { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: .65rem; background: #fffaf4; }
label { display: block; margin: .8rem 0 .25rem; font-weight: 700; }
input:not([type=checkbox]), select, textarea {
    display: block;
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #b9a494;
    border-radius: .55rem;
    background: #fff;
    color: inherit;
    font: inherit;
}
input[type=checkbox] { accent-color: var(--rust); }
textarea { min-height: 8rem; resize: vertical; }
button, #download { margin-top: 1rem; }
button:disabled { opacity: .65; cursor: wait; }
iframe { width: 100%; height: 65vh; border: 1px solid var(--border); border-radius: .55rem; }
small { display: block; margin-top: .25rem; color: #93301d; }
[hidden] { display: none !important; }

@media (max-width: 690px) {
    .layout, .login-layout { grid-template-columns: 1fr; }
    .hero { align-items: start; min-height: 28rem; }
    .hero h1 { font-size: clamp(2.15rem, 8.8vw, 3.45rem); }
    .hero-art { inset: 53% 0 0 30%; }
    .art-orbit { top: -3%; }
    .art-sheet { width: clamp(5rem, 21vw, 8rem); right: 23%; top: 12%; border-radius: .55rem; }
    .art-lines { gap: .25rem; }
    .art-sheet-front b { font-size: .55rem; }
    .login-hero { min-height: auto; }
    .login-hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .topbar { gap: .55rem; }
    nav a, .logout button { padding-inline: .52rem; }
    .logout span { display: none; }
}