:root {
    --wine: #5d363e;
    --wine-deep: #3f1d25;
    --gold: #feb34c;
    --blush: #dbbeb9;
    --paper: #f2e8df;
    --ink: #28191d;
    --line: rgba(242, 232, 223, .22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--wine); }

body {
    margin: 0;
    color: var(--paper);
    background: var(--wine);
    font-family: Manrope, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; width: 100%; height: auto; }

.aj-skip {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: #fff;
    background: #000;
    transform: translateY(-160%);
}

.aj-skip:focus { transform: none; }

.aj-nav {
    position: fixed;
    z-index: 20;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 58px;
    padding: 0 clamp(16px, 3vw, 48px);
    border-bottom: 1px solid rgba(255, 255, 255, .24);
    background: rgba(35, 13, 18, .42);
    backdrop-filter: blur(16px);
    font: 500 10px/1.2 "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aj-nav a { min-height: 44px; display: inline-flex; gap: 7px; align-items: center; text-decoration: none; }
.aj-nav a:nth-child(2) { justify-self: center; }
.aj-nav a:last-child { justify-self: end; }
.aj-nav a:hover, .aj-nav a:focus-visible { color: var(--gold); outline: none; }

.aj-hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--wine-deep);
}

.aj-hero > img,
.aj-hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.aj-hero > img { object-fit: cover; }
.aj-hero__veil { background: linear-gradient(0deg, rgba(29, 8, 13, .72), transparent 48%); }

.aj-hero__copy {
    position: relative;
    z-index: 2;
    width: min(100%, 1240px);
    padding: 120px clamp(18px, 7vw, 112px) clamp(88px, 10vh, 120px);
}

.aj-hero__copy p,
.aj-hero__copy > span,
.aj-hero__cue,
.aj-index,
figcaption,
dt {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aj-hero__copy p { margin: 0 0 18px; }
.aj-hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(70px, 13vw, 200px); font-weight: 400; line-height: .82; letter-spacing: -.065em; }
.aj-hero__copy > span { display: block; max-width: 48em; margin-top: 34px; }
.aj-hero__cue { position: absolute; z-index: 3; right: clamp(18px, 4vw, 64px); bottom: 26px; display: flex; gap: 18px; text-decoration: none; }

.aj-pad { padding: clamp(82px, 11vw, 170px) clamp(18px, 8vw, 128px); }
.aj-index { margin: 0; color: rgba(242, 232, 223, .58); }

.aj-note {
    display: grid;
    grid-template-columns: .42fr 1.08fr .8fr;
    gap: clamp(28px, 5vw, 86px);
    align-items: start;
    border-bottom: 1px solid var(--line);
}

.aj-note h2,
.aj-archive h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 7.2vw, 112px);
    font-weight: 400;
    line-height: .91;
    letter-spacing: -.055em;
}

.aj-note h2 em { color: var(--gold); font-style: normal; }
.aj-note__copy > p { max-width: 35em; margin: 0; color: rgba(242, 232, 223, .72); font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; }
.aj-note dl { margin: 48px 0 0; border-top: 1px solid var(--line); }
.aj-note dl div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.aj-note dt { color: rgba(242, 232, 223, .48); }
.aj-note dd { margin: 0; font-size: 13px; }

.aj-archive { background: var(--wine-deep); }
.aj-archive__head { display: grid; grid-template-columns: .5fr 1.5fr; gap: clamp(28px, 5vw, 86px); align-items: end; margin-bottom: clamp(54px, 8vw, 112px); }
.aj-archive__boards { display: grid; gap: clamp(48px, 8vw, 130px); }
.aj-archive figure { margin: 0; }
.aj-archive figure:nth-child(even) { width: min(92%, 1460px); margin-left: auto; }
.aj-archive img { background: var(--wine); box-shadow: 0 30px 90px rgba(14, 3, 6, .2); }
.aj-archive figcaption { display: flex; justify-content: space-between; padding-top: 12px; color: rgba(242, 232, 223, .48); }

.aj-next {
    min-height: 68svh;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: space-between;
    padding: clamp(60px, 8vw, 120px) clamp(18px, 7vw, 112px);
    color: #fff;
    background: #02040b;
    text-decoration: none;
}

.aj-next > span, .aj-next em { font: 500 10px/1.4 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.aj-next strong { grid-column: 1 / -1; font-size: clamp(78px, 18vw, 270px); font-weight: 600; line-height: .72; letter-spacing: -.085em; }
.aj-next em { align-self: end; justify-self: end; font-style: normal; }
.aj-next strong { transition: transform .35s ease; }
.aj-next:hover strong, .aj-next:focus-visible strong { transform: translateX(10px); }

.aj-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .75, .2, 1); }
.aj-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .aj-note { grid-template-columns: 1fr; }
    .aj-note__copy { max-width: 680px; }
}

@media (max-width: 640px) {
    .aj-nav { grid-template-columns: 1fr auto; }
    .aj-nav a:nth-child(2) { display: none; }
    .aj-hero > img { object-position: 50% center; }
    .aj-hero__copy { padding-bottom: 108px; }
    .aj-hero h1 { max-width: 7ch; }
    .aj-archive__head { grid-template-columns: 1fr; }
    .aj-archive figure:nth-child(even) { width: 100%; }
    .aj-next { min-height: 56svh; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .aj-reveal { opacity: 1; transform: none; transition: none; }
}