/* =========================================================
   lunatic.dev — Software for the Moonstruck
   Interactions: motion + state transitions implement a moonlit cadence.
   Palette:
     #0A0A14  void
     #1A1A2E  asphalt
     #F4ECD8  moon cream (primary text)
     #E8E4D9  soft white
     #C9A961  lunar gold
     #6B5B95  twilight purple
     #A85B5B  red giant
     #7BA098  pale green
   Font: Inter / Inter Tight (Google Fonts)
========================================================= */

:root {
    --void: #0A0A14;
    --asphalt: #1A1A2E;
    --cream: #F4ECD8;
    --soft: #E8E4D9;
    --gold: #C9A961;
    --twilight: #6B5B95;
    --red-giant: #A85B5B;
    --pale-green: #7BA098;
    --rule: rgba(244, 236, 216, 0.18);
    --rule-soft: rgba(244, 236, 216, 0.08);

    --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --body: 'Inter', system-ui, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--body);
    background: var(--void);
    color: var(--cream);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    font-feature-settings: "ss01", "ss02", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* Subtle film grain --------------------------------------- */
.grain {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(rgba(244, 236, 216, 0.7) 1px, transparent 1px),
        radial-gradient(rgba(244, 236, 216, 0.5) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    animation: grainShift 6s steps(8) infinite;
}

@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-1px, 1px); }
    50%  { transform: translate(1px, -1px); }
    75%  { transform: translate(-2px, 2px); }
    100% { transform: translate(0, 0); }
}

.cursor-glow {
    pointer-events: none;
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.12), transparent 60%);
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.3s ease;
    mix-blend-mode: screen;
    will-change: transform;
}

/* Header --------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem 2.5rem;
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--display);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.logo {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 1.05rem;
}

.logo-mark {
    display: inline-block;
    color: var(--gold);
    font-size: 1.2rem;
    animation: spinSlow 24s linear infinite;
}

@keyframes spinSlow {
    to { transform: rotate(360deg); }
}

.logo-text em {
    font-style: normal;
    color: var(--gold);
    font-weight: 400;
}

.primary-nav {
    display: flex;
    gap: 1.75rem;
    justify-content: center;
}

.primary-nav a {
    position: relative;
    color: var(--soft);
    text-decoration: none;
    text-transform: lowercase;
    transition: color 0.25s ease;
    padding: 0.25rem 0;
}

.primary-nav a::before {
    content: attr(data-link);
    color: var(--gold);
    margin-right: 0.5rem;
    font-size: 0.7rem;
    opacity: 0.7;
    vertical-align: top;
}

.primary-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.primary-nav a:hover {
    color: var(--cream);
}

.primary-nav a:hover::after {
    width: 100%;
}

.moon-clock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cream);
}

.moon-clock #moonPhase {
    color: var(--gold);
    font-size: 1.1rem;
}

/* Hero ------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 9rem 2.5rem 4rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(107, 91, 149, 0.18), transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(201, 169, 97, 0.08), transparent 55%);
    z-index: 0;
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    font-family: var(--display);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--soft);
    opacity: 0.65;
}

.meta-line {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-line::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--gold);
}

.hero-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--cream);
}

.hero-title .word {
    display: inline-block;
    transform: translateY(120%);
    opacity: 0;
    animation: wordRise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
    margin-right: 0.25em;
}

.hero-title .word:nth-child(1) { animation-delay: 0.1s; }
.hero-title .word:nth-child(2) { animation-delay: 0.22s; }
.hero-title .word:nth-child(3) { animation-delay: 0.34s; }
.hero-title .word:nth-child(4) { animation-delay: 0.46s; color: var(--gold); }

.hero-title .italic {
    font-style: italic;
    font-weight: 500;
}

@keyframes wordRise {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-lede {
    max-width: 32rem;
    font-size: 1.1rem;
    color: var(--soft);
    opacity: 0.85;
    line-height: 1.65;
    border-left: 1px solid var(--rule);
    padding-left: 1.25rem;
}

.hero-stats {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-num {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 300;
    color: var(--gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--soft);
    opacity: 0.65;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.5rem;
    text-decoration: none;
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--rule);
    cursor: pointer;
    background: transparent;
    color: var(--cream);
    letter-spacing: 0.02em;
}

.cta.primary {
    background: var(--cream);
    color: var(--void);
    border-color: var(--cream);
}

.cta.primary:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.cta.ghost:hover {
    border-color: var(--cream);
    background: rgba(244, 236, 216, 0.06);
}

.cta-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.cta:hover .cta-arrow {
    transform: translate(3px, -3px);
}

/* Moon stage ----------------------------------------------- */
.moon-stage {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 32rem;
    justify-self: center;
    color: var(--rule);
    z-index: 1;
}

.moon-shadow {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.25), transparent 60%);
    filter: blur(40px);
}

.moon-body {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #FFF8E0, #E8DCB0 50%, #B89860 100%);
    box-shadow:
        inset -20px -20px 60px rgba(20, 10, 0, 0.35),
        inset 10px 10px 30px rgba(255, 248, 224, 0.2),
        0 0 80px rgba(201, 169, 97, 0.2);
    overflow: hidden;
    transition: transform 0.4s ease;
    will-change: transform;
}

.moon-craters {
    position: absolute;
    inset: 0;
}

.crater {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(50, 30, 10, 0.4), rgba(50, 30, 10, 0.1));
    box-shadow: inset 1px 1px 2px rgba(50, 30, 10, 0.3);
}

.crater.c1 { width: 18%; height: 18%; top: 22%; left: 26%; }
.crater.c2 { width: 11%; height: 11%; top: 55%; left: 60%; }
.crater.c3 { width: 7%;  height: 7%;  top: 68%; left: 28%; }
.crater.c4 { width: 14%; height: 14%; top: 18%; left: 62%; }
.crater.c5 { width: 5%;  height: 5%;  top: 42%; left: 45%; }

.moon-terminator {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        linear-gradient(90deg, rgba(10, 10, 20, 0.85) 0%, rgba(10, 10, 20, 0.6) 38%, transparent 50%);
    transform: translateX(0%);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.orbit-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(244, 236, 216, 0.18);
    animation: spinSlow 90s linear infinite;
}

.orbit-tick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    transform-origin: 0 0;
    transform: rotate(var(--angle)) translate(195px) translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(201, 169, 97, 0.7);
    animation: spinSlow 90s linear infinite;
}

/* Ticker --------------------------------------------------- */
.ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    background: rgba(26, 26, 46, 0.4);
    z-index: 3;
}

.ticker-track {
    display: inline-flex;
    gap: 3rem;
    padding: 0.85rem 0;
    white-space: nowrap;
    animation: tickerScroll 60s linear infinite;
    font-family: var(--display);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft);
    opacity: 0.75;
}

.ticker-track span {
    flex-shrink: 0;
}

.ticker-track span::after {
    content: "·";
    margin-left: 3rem;
    color: var(--gold);
}

@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Section heads ------------------------------------------- */
section {
    position: relative;
    padding: 8rem 2.5rem 6rem;
}

.section-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1.5rem;
}

.section-num {
    font-family: var(--display);
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 0.2em;
}

.section-head h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -0.02em;
    color: var(--cream);
    line-height: 1.05;
}

.section-rule {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 0.7rem;
}

/* Manifesto ------------------------------------------------- */
.manifesto-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
}

.tenet {
    padding: 2.5rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    transition: background 0.4s ease;
    position: relative;
}

.tenet:nth-child(2n) {
    border-right: none;
}

.tenet:nth-last-child(-n+2) {
    border-bottom: none;
}

.tenet:hover {
    background: rgba(201, 169, 97, 0.05);
}

.tenet-num {
    display: inline-block;
    font-family: var(--display);
    font-size: 0.85rem;
    color: var(--gold);
    margin-bottom: 1rem;
    letter-spacing: 0.15em;
    font-weight: 500;
}

.tenet h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.65rem;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--cream);
}

.tenet p {
    color: var(--soft);
    opacity: 0.78;
    font-size: 0.98rem;
    line-height: 1.7;
    max-width: 32rem;
}

/* Phases --------------------------------------------------- */
.phase-track {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
    margin-bottom: 0;
    background: rgba(26, 26, 46, 0.3);
}

.phase {
    background: transparent;
    border: none;
    border-right: 1px solid var(--rule);
    color: var(--soft);
    padding: 1.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--body);
}

.phase:last-child {
    border-right: none;
}

.phase:hover {
    background: rgba(201, 169, 97, 0.06);
    color: var(--cream);
}

.phase[aria-pressed="true"] {
    background: rgba(201, 169, 97, 0.12);
    color: var(--cream);
}

.phase[aria-pressed="true"] .phase-glyph {
    color: var(--gold);
    transform: scale(1.2);
}

.phase-glyph {
    font-size: 1.6rem;
    color: var(--soft);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.phase-name {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
}

.phase-stage {
    font-size: 0.7rem;
    opacity: 0.5;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--soft);
}

.phase-detail {
    border: 1px solid var(--rule);
    border-top: none;
    padding: 3rem;
    background: var(--asphalt);
    min-height: 22rem;
}

.phase-display {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: start;
}

.phase-art {
    font-size: 12rem;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 60px rgba(201, 169, 97, 0.4);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.phase-copy {
    max-width: 38rem;
}

.phase-tag {
    display: inline-block;
    font-family: var(--display);
    font-size: 0.78rem;
    color: var(--gold);
    letter-spacing: 0.2em;
    margin-bottom: 0.75rem;
}

.phase-copy h3 {
    font-family: var(--display);
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--cream);
}

.phase-copy p {
    color: var(--soft);
    opacity: 0.85;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.phase-copy code {
    font-family: 'Inter', monospace;
    font-feature-settings: "tnum";
    background: rgba(244, 236, 216, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    color: var(--gold);
    font-size: 0.92em;
}

.phase-rituals {
    list-style: none;
    border-top: 1px dashed var(--rule);
    padding-top: 1.25rem;
}

.phase-rituals li {
    padding: 0.4rem 0;
    color: var(--soft);
    opacity: 0.78;
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
}

.phase-rituals li::before {
    content: "◐";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 0.8rem;
}

/* Projects ------------------------------------------------- */
.project-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
}

.project {
    padding: 2rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--void);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 22rem;
    overflow: hidden;
}

.project::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent, var(--gold));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.project:hover::before {
    opacity: 0.08;
}

.project > * {
    position: relative;
    z-index: 1;
}

.project:nth-child(3n) {
    border-right: none;
}

.project:nth-last-child(-n+3) {
    border-bottom: none;
}

.project header {
    display: flex;
    justify-content: space-between;
    font-family: var(--display);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--soft);
    opacity: 0.6;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule-soft);
}

.proj-id {
    color: var(--gold);
}

.project h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.04em;
    color: var(--cream);
    line-height: 1;
    transition: color 0.3s ease;
}

.project:hover h3 {
    color: var(--accent, var(--gold));
}

.proj-tag {
    font-style: italic;
    color: var(--soft);
    opacity: 0.85;
    font-size: 0.95rem;
    line-height: 1.5;
}

.proj-body {
    color: var(--soft);
    opacity: 0.7;
    font-size: 0.92rem;
    line-height: 1.65;
    flex: 1;
}

.proj-body code {
    font-family: 'Inter', monospace;
    font-size: 0.88em;
    background: rgba(244, 236, 216, 0.06);
    padding: 0.05rem 0.3rem;
    border-radius: 2px;
    color: var(--cream);
}

.project footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--rule-soft);
    padding-top: 0.75rem;
    font-family: var(--display);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--soft);
    opacity: 0.7;
}

.proj-link {
    color: var(--gold);
    transition: transform 0.3s ease;
}

.project:hover .proj-link {
    transform: translateX(4px);
}

/* Almanac --------------------------------------------------- */
.almanac-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.almanac-cell {
    background: var(--void);
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    min-height: 14rem;
}

.almanac-cell.now {
    background: var(--asphalt);
    border-left: 4px solid var(--gold);
}

.almanac-cell.tape {
    grid-row: span 1;
}

.almanac-cell.weather {
    grid-row: span 1;
}

.almanac-cell.stack {
    grid-column: 1 / 2;
}

.almanac-cell.quote {
    grid-column: 2 / 3;
}

.almanac-cell.terminal {
    grid-column: 3 / 4;
    background: #06060d;
}

.cell-label {
    font-family: var(--display);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
}

.cell-big {
    font-family: var(--display);
    font-size: 1.45rem;
    line-height: 1.3;
    font-weight: 300;
    color: var(--cream);
    letter-spacing: -0.01em;
}

.cell-foot {
    font-size: 0.78rem;
    color: var(--soft);
    opacity: 0.5;
    font-style: italic;
}

.stack-list {
    list-style: none;
}

.stack-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--rule-soft);
    font-size: 0.95rem;
}

.stack-list li:last-child {
    border-bottom: none;
}

.stack-list em {
    font-style: normal;
    color: var(--gold);
    font-family: 'Inter', monospace;
    font-size: 0.85em;
    opacity: 0.85;
}

.almanac-cell.quote blockquote {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--cream);
    border-left: 2px solid var(--gold);
    padding-left: 1rem;
    quotes: """ """;
}

.almanac-cell.terminal pre {
    font-family: 'Inter', monospace;
    font-size: 0.92rem;
    color: var(--pale-green);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal .prompt-cmd {
    color: var(--cream);
}

.caret {
    display: inline-block;
    width: 8px;
    margin-left: 2px;
    background: var(--gold);
    color: transparent;
    animation: blink 1.1s steps(2) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Contact --------------------------------------------------- */
.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
    align-items: start;
}

.contact-copy {
    border-right: 1px solid var(--rule);
    padding-right: 3rem;
}

.contact-lede {
    font-family: var(--display);
    font-size: 1.4rem;
    line-height: 1.45;
    font-weight: 300;
    color: var(--cream);
    margin-bottom: 2.5rem;
    letter-spacing: -0.01em;
}

.channels {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.channels li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 1rem;
    color: var(--soft);
}

.ch-key {
    font-family: var(--display);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.ch-val {
    color: var(--cream);
}

/* Form ------------------------------------------------------ */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label {
    font-family: var(--display);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--soft);
    opacity: 0.7;
}

.field input,
.field select,
.field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.65rem 0;
    color: var(--cream);
    font-family: var(--body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
    resize: vertical;
}

.field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gold) 50%),
        linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
    cursor: pointer;
}

.field select option {
    background: var(--asphalt);
    color: var(--cream);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--soft);
    opacity: 0.35;
    font-style: italic;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-bottom-color: var(--gold);
}

.cta.submit {
    align-self: flex-start;
    margin-top: 0.5rem;
}

.form-status {
    font-family: var(--display);
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 0.04em;
    min-height: 1.2rem;
}

/* Footer ---------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--rule);
    padding: 2.5rem 2.5rem 2rem;
    background: var(--asphalt);
}

.footer-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 0.75rem 0;
    font-family: var(--display);
    font-size: 0.85rem;
    color: var(--soft);
}

.footer-row span:nth-child(2) {
    text-align: center;
    opacity: 0.7;
}

.footer-row.faint {
    border-top: 1px dashed var(--rule-soft);
    opacity: 0.6;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.footer-mark {
    color: var(--gold);
    font-weight: 800;
}

#footerMoon {
    color: var(--gold);
    font-size: 1.1rem;
}

/* Responsive ----------------------------------------------- */
@media (max-width: 1100px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 7rem;
    }
    .moon-stage {
        max-width: 22rem;
        order: -1;
    }
    .project-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .project:nth-child(3n) {
        border-right: 1px solid var(--rule);
    }
    .project:nth-child(2n) {
        border-right: none;
    }
    .almanac-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .almanac-cell.stack,
    .almanac-cell.quote,
    .almanac-cell.terminal {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .site-header {
        grid-template-columns: 1fr auto;
        padding: 1rem 1.25rem;
        gap: 1rem;
    }
    .primary-nav {
        display: none;
    }
    section {
        padding: 5rem 1.25rem 4rem;
    }
    .hero {
        padding: 6rem 1.25rem 4rem;
    }
    .section-head {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }
    .section-rule {
        display: none;
    }
    .manifesto-grid,
    .project-list {
        grid-template-columns: 1fr;
    }
    .tenet,
    .project {
        border-right: none !important;
    }
    .project:last-child {
        border-bottom: none;
    }
    .phase-track {
        grid-template-columns: repeat(4, 1fr);
    }
    .phase:nth-child(4) {
        border-right: none;
    }
    .phase-display {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .phase-art {
        font-size: 7rem;
        text-align: center;
    }
    .almanac-grid {
        grid-template-columns: 1fr;
    }
    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .contact-copy {
        border-right: none;
        border-bottom: 1px solid var(--rule);
        padding-right: 0;
        padding-bottom: 2rem;
    }
    .footer-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }
    .footer-row span:nth-child(2) {
        text-align: center;
    }
}

/* Reveal-on-scroll ---------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}