:root {
    color-scheme: dark;
    --black: #0c0b09;
    --panel: #11100e;
    --line: #32291d;
    --gold: #e3bd83;
    --gold-deep: #a57a42;
    --cream: #f6efdf;
    --muted: #bcb3a3;
    --mono: "Cascadia Mono", Consolas, monospace;
    --gutter: clamp(1rem, 4.8vw, 5rem);
    --section-space: clamp(3.25rem, 7.5vw, 7rem);
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--black);
    color: var(--cream);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
::selection { background: var(--gold); color: var(--black); }
[id] { scroll-margin-top: clamp(1rem, 3vw, 1.5rem); }
.shell { width: min(82rem, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

.skip-link {
    position: absolute;
    z-index: 5;
    inset: 12px auto auto 12px;
    padding: 12px;
    transform: translateY(-180%);
    background: var(--cream);
    color: var(--black);
}
.skip-link:focus { transform: none; }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner, .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem clamp(.8rem, 2vw, 1.5rem);
}
.header-inner { min-height: clamp(4rem, 6vw, 4.875rem); padding-block: .45rem; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img { flex: none; }
.brand > span { font-size: 15px; font-weight: 750; letter-spacing: .18em; line-height: 1.25; }
.brand small { display: block; margin-top: 4px; color: var(--gold); font: 9px/1.2 var(--mono); letter-spacing: .085em; }
.navigation { display: flex; flex-wrap: wrap; gap: 0 clamp(.7rem, 2.7vw, 2.8rem); align-items: center; }
.navigation a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; }
.navigation a:hover, .text-link:hover { color: var(--gold); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 48px;
    padding: 0 17px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 650;
    transition: background-color .2s, border-color .2s, color .2s;
}
.button span, .text-link span { font: 17px/1 var(--mono); }
.button-outline { border-color: #594329; color: var(--gold); }
.button-outline:hover { border-color: var(--gold); background: #241b10; }
.button-gold { min-height: 52px; background: var(--gold); border-color: var(--gold); color: #19120b; }
.button-gold:hover { background: #f3d5a6; border-color: #f3d5a6; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: var(--cream); }
.text-link span { color: var(--gold); }

.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(ellipse at 73% 49%, #382715 0, #19130d 34%, transparent 62%),
        var(--black);
}
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(#d7a56313 1px, transparent 1px), linear-gradient(90deg, #d7a56313 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 77% 46%, #000 0, transparent 67%);
}
.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
    align-items: center;
    gap: clamp(1.25rem, 3.5vw, 3.5rem);
    padding-block: clamp(2.5rem, 7svh, 5rem);
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow { color: var(--gold); font: 650 11px/1.55 var(--mono); letter-spacing: .15em; }
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; }
.signal { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 14px #f0bc73a0; }
h1, h2 { font-weight: 610; letter-spacing: -.065em; overflow-wrap: anywhere; }
h1 { margin-top: clamp(.85rem, 1.6vw, 1.35rem); font-size: clamp(2.65rem, 6.65vw, 6.3rem); line-height: .98; }
h1 em, h2 em { font-family: Georgia, serif; font-weight: 400; color: var(--gold); }
h1 em { display: block; line-height: 1.04; }
.hero-intro { max-width: 41ch; margin-top: clamp(1rem, 2vw, 1.65rem); color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.17rem); line-height: 1.68; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem clamp(.85rem, 2vw, 1.6rem); margin-top: clamp(1.15rem, 2.5vw, 1.95rem); }

.instrument { position: relative; width: 100%; max-width: 37.25rem; justify-self: center; }
.dial { display: block; width: 100%; height: auto; overflow: visible; }
.dial-guides { stroke: #936a37; stroke-opacity: .4; stroke-dasharray: 3 7; }
.dial-labels { fill: #edc893; font: 15px var(--mono); }
.dial-rings, .dial-ticks, .dial-sweep, .dial-needle { transform-origin: 50% 50%; transform-box: view-box; }
.dial-trace { stroke: #ebc183; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100 100; opacity: .42; }
.dial-beacons { opacity: .55; }
.dial-sweep { transform: rotate(39deg); }
.dial-needle { transform: rotate(23deg); filter: drop-shadow(0 0 16px #d49b5155); }
.instrument-tag { position: absolute; color: var(--muted); font: 10px/1.5 var(--mono); letter-spacing: .15em; }
.instrument-tag b { color: var(--gold); font-weight: 400; }
.instrument-tag-top { top: 3%; right: 1%; }
.instrument-tag-bottom { bottom: 3%; left: 0; }

.identity-band { background: #12100d; border-block: 1px solid var(--line); }
.identity-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.75rem, 2vw, 1.4rem); min-height: 74px; padding-block: .85rem; }
.identity-inner > p { padding-inline-start: clamp(.75rem, 2vw, 1.4rem); border-inline-start: 1px solid #624929; color: var(--muted); font-size: 14px; }
.identity-inner > a { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--line); color: var(--gold); font-family: var(--mono); }
.identity-inner > a:hover { border-color: var(--gold); }

.content-section, .process-inner { padding-block: var(--section-space); }
.section-heading .eyebrow > span { color: var(--muted); margin-right: 9px; }
h2 { margin-top: 14px; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1.06; }
.section-heading > p:last-child { max-width: 48ch; margin-top: 15px; color: var(--muted); line-height: 1.65; }
.award-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(16rem, 30%)), 1fr));
    gap: clamp(.7rem, 1.3vw, 1.1rem);
    margin-top: clamp(1.35rem, 3vw, 2.25rem);
}
.award-card {
    padding: clamp(20px, 2.6vw, 32px);
    background: linear-gradient(135deg, #1a1510, var(--panel) 65%);
    border: 1px solid var(--line);
    transition: border-color .24s;
}
.award-card:hover { border-color: var(--gold-deep); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--gold); }
.card-top > span { font: 12px var(--mono); color: var(--muted); }
.award-card h3 { margin-top: 24px; font-size: 19px; font-weight: 630; }
.award-card p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.62; }

.process-section { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 6% 68%, #241a10, transparent 48%), #100e0c; }
.process-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 5vw, 6rem); }
.process-inner h2 em { display: block; }
.stages { border-top: 1px solid var(--line); }
.stage { border-bottom: 1px solid var(--line); }
.stage summary {
    display: grid;
    grid-template-columns: 30px 1fr 18px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 8px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.stage summary::-webkit-details-marker { display: none; }
.stage summary:hover, .stage[open] summary, .stage-number, .stage-toggle { color: var(--gold); }
.stage-number, .stage-toggle { font: 13px var(--mono); }
.stage-toggle::before { content: "+"; }
.stage[open] .stage-toggle::before { content: "−"; }
.stage p { padding: 0 28px 17px 50px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.site-footer { padding-block: clamp(1rem, 2.5vw, 1.75rem); }
.footer-inner > p { color: var(--muted); font-size: 13px; }
.footer-inner > p span { color: var(--gold); }

@media (min-width: 48rem) and (max-height: 40rem) {
    .hero-inner { padding-block: clamp(1.5rem, 5svh, 2.5rem); }
    .instrument { max-width: min(37.25rem, 65svh); }
}

@media (width < 48rem) {
    .navigation a { font-size: 13px; }
    .header-action { display: none; }
    .hero { background: radial-gradient(ellipse at 60% 78%, #382715, #19130d 28%, transparent 62%), var(--black); }
    .hero::before { mask-image: radial-gradient(ellipse at 50% 76%, #000, transparent 64%); }
    .hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: clamp(1.75rem, 7vw, 3.25rem) clamp(1rem, 4vw, 1.75rem); }
    h1 { font-size: clamp(2.35rem, 10vw, 4.7rem); }
    .instrument { max-width: clamp(13rem, 54svh, 25rem); }
    .identity-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    .identity-inner > p { grid-column: 1; grid-row: 2; border: 0; padding: 0; }
    .identity-inner > a { grid-column: 2; grid-row: 1 / 3; }
    .process-inner { grid-template-columns: minmax(0, 1fr); }
    .footer-inner > p { order: 1; flex-basis: 100%; }
}

@media (38rem <= width < 48rem) and (max-height: 32rem) {
    .hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); padding-block: 1.25rem; }
    h1 { font-size: clamp(2.4rem, 6.1vw, 3.1rem); }
    .instrument { max-width: 70svh; }
}

@media (max-width: 29rem) {
    .brand { gap: .5rem; }
    .brand > span { font-size: 13px; }
    .brand img { width: 29px; height: 29px; }
    .brand small { font-size: 8px; }
}

@media (max-width: 22rem) {
    .header-inner { padding-top: .75rem; }
    .navigation { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button, .award-card { transition: none; }
}