:root {
  --ink: #080908;
  --ink-soft: #12130f;
  --paper: #e9e3d3;
  --gold: #caa553;
  --gold-bright: #f1d283;
  --muted: #aaa18c;
  --line: rgba(230, 211, 164, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--paper); background: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
button, input, textarea { font: inherit; }
.grain { pointer-events: none; position: fixed; inset: 0; z-index: 5; opacity: .17; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.site-header { height: 77px; border-bottom: 1px solid var(--line); padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center; gap: 22px; position: relative; z-index: 1; }
.brand { color: var(--paper); text-decoration: none; font-family: Georgia, serif; letter-spacing: .07em; font-size: 27px; line-height: 1; display: flex; }
.brand i { color: var(--gold); font-style: normal; }
.brand b { color: var(--gold); font-weight: normal; }
.header-rule { height: 1px; width: 39px; background: var(--gold); }
.header-label, .header-action { text-transform: uppercase; letter-spacing: .18em; font: 500 10px "DM Mono", monospace; }
.header-label { color: var(--gold); margin: 0; }
.header-action { color: var(--paper); text-decoration: none; margin-left: auto; }
.header-action span { color: var(--gold); font-size: 16px; margin-left: 4px; }

.hero { min-height: 612px; padding: clamp(75px, 10vw, 140px) clamp(20px, 9vw, 144px) 68px; overflow: hidden; position: relative; background: radial-gradient(ellipse 52% 80% at 93% 40%, #29200d 0%, transparent 66%), linear-gradient(110deg, #0b0c0a, #090909 59%, #11100b); }
.hero:after { content: ""; position: absolute; width: min(51vw, 780px); aspect-ratio: 1; right: -12%; top: -8%; border-radius: 50%; border: 1px solid rgba(202, 165, 83, .12); box-shadow: 0 0 0 80px rgba(202, 165, 83, .035), 0 0 0 160px rgba(202, 165, 83, .02); }
.kicker { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font: 500 11px "DM Mono", monospace; margin: 0 0 25px; display: flex; gap: 10px; align-items: center; }
.kicker span { width: 23px; height: 1px; background: currentColor; }
h1, h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; margin: 0; letter-spacing: -.045em; }
h1 { font-size: clamp(54px, 8.1vw, 120px); line-height: .91; max-width: 860px; position: relative; z-index: 1; }
h1 em, h2 em { color: var(--gold-bright); font-weight: 500; }
.hero-copy { max-width: 370px; color: #c1baa8; line-height: 1.65; font-size: 15px; margin: 34px 0 28px; }
.gold-button { display: inline-flex; align-items: center; gap: 32px; padding: 14px 15px 14px 20px; background: linear-gradient(125deg, #bc9240, #edcf7e); color: #171309; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font: 500 10px "DM Mono", monospace; position: relative; z-index: 1; transition: transform .2s, filter .2s; }
.gold-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.gold-button span { font-size: 18px; }
.hero-statement { position: absolute; right: clamp(25px, 7vw, 110px); bottom: 74px; width: min(30vw, 390px); z-index: 1; text-align: right; }
.hero-statement p { color: var(--gold); text-transform: uppercase; letter-spacing: .25em; font: 500 10px "DM Mono", monospace; margin: 0 0 12px; }
.hero-wordmark { display: block; width: 100%; height: auto; opacity: .94; mix-blend-mode: screen; }

.intro { min-height: 330px; padding: 62px max(8vw, 20px); display: grid; grid-template-columns: 150px minmax(290px, 680px) 1fr; column-gap: 40px; align-items: start; background: #0d0e0c; border-bottom: 1px solid var(--line); }
.section-number { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font: 500 10px "DM Mono", monospace; margin: 7px 0; }
.intro-copy { font: 500 clamp(28px, 3.1vw, 45px)/1.18 "Playfair Display", Georgia, serif; letter-spacing: -.035em; margin: 0; }
.intro-copy i { color: var(--gold-bright); }
.intro-line { width: 1px; height: 89px; background: var(--gold); justify-self: center; }
.intro-note { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 190px; margin: 0; }

.board-section { padding: 96px max(5vw, 20px) 110px; background: radial-gradient(ellipse at 85% 0%, rgba(179, 138, 51, .13), transparent 30%), #11110e; }
.board-heading { max-width: 1320px; margin: auto; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 33px; border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(40px, 5.5vw, 77px); line-height: .95; }
.board-count { color: var(--muted); font: 400 11px "DM Mono", monospace; margin: 0 0 7px; white-space: nowrap; }
.board { max-width: 1320px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 42px 25px; min-height: 280px; }
.loading, .empty-state { grid-column: 1/-1; min-height: 260px; display: grid; place-content: center; text-align: center; color: var(--muted); font: 400 12px "DM Mono", monospace; letter-spacing: .05em; }
.loading span { display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--gold); border-radius: 50%; animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.dream-card { --accent: #c6a151; position: relative; min-height: 260px; padding: 27px 23px 20px; color: #1b1913; background: #e7dfcd; box-shadow: 9px 12px 15px rgba(0,0,0,.28); display: flex; flex-direction: column; transform: rotate(var(--tilt)); transition: transform .25s ease, box-shadow .25s ease; }
.dream-card:hover { transform: rotate(0) translateY(-5px); box-shadow: 12px 18px 25px rgba(0,0,0,.4); z-index: 1; }
.dream-card:before { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(0deg, rgba(72,55,29,.035), rgba(72,55,29,.035) 1px, transparent 1px, transparent 3px); pointer-events: none; }
.pin { width: 15px; height: 15px; position: absolute; left: calc(50% - 7px); top: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fae7a5, #bf9138 48%, #543a12 100%); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.card-label, .card-step-label { margin: 0; text-transform: uppercase; letter-spacing: .15em; font: 500 9px "DM Mono", monospace; color: #856c31; }
.card-dream { font: 600 21px/1.25 "Playfair Display", Georgia, serif; margin: 12px 0 20px; position: relative; }
.card-step-wrap { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--accent); }
.card-step-label { color: var(--accent); }
.card-step { font: 500 13px/1.45 "Playfair Display", Georgia, serif; margin: 5px 0 0; font-style: italic; }
.card-name { margin: 15px 0 0; color: #7e6a3e; text-align: right; text-transform: uppercase; letter-spacing: .09em; font: 500 9px "DM Mono", monospace; }

.share-section { padding: 100px max(8vw, 20px); display: grid; grid-template-columns: minmax(280px, .8fr) minmax(350px, 1fr); gap: clamp(50px, 10vw, 170px); background: linear-gradient(130deg, #0b0c0a, #15130d); }
.share-heading h2 { margin: 32px 0 27px; }
.share-heading > p:last-child { max-width: 330px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.dream-form { border-top: 1px solid var(--gold); padding-top: 7px; }
.field-row { position: relative; padding: 19px 0 18px; border-bottom: 1px solid var(--line); }
.field-row label { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: .15em; font: 500 10px "DM Mono", monospace; margin-bottom: 12px; }
.field-row small { color: #736b5b; margin-left: 7px; font-size: inherit; }
.field-row input, .field-row textarea { width: 100%; background: transparent; color: var(--paper); border: 0; outline: 0; padding: 0 45px 0 0; resize: vertical; font: 500 19px/1.35 "Playfair Display", Georgia, serif; }
.field-row input::placeholder, .field-row textarea::placeholder { color: #69685f; }
.character-count { position: absolute; right: 0; bottom: 20px; color: #706a5b; font: 400 9px "DM Mono", monospace; }
.form-error { min-height: 18px; margin: 13px 0 4px; color: #df9b8a; font-size: 12px; }
.submit-button { width: 100%; cursor: pointer; border: 0; padding: 15px 17px 15px 20px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(120deg, #b68936, #ecd080); color: #151107; text-transform: uppercase; letter-spacing: .15em; font: 500 10px "DM Mono", monospace; transition: filter .2s, transform .2s; }
.submit-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.submit-button:disabled { cursor: wait; opacity: .65; }
.submit-button b { font-size: 19px; font-weight: 400; }
.form-footnote { color: #797160; font-size: 10px; line-height: 1.55; margin: 15px 0 0; }

footer { padding: 37px max(8vw, 20px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--line); background: #090a08; color: #797160; text-transform: uppercase; letter-spacing: .13em; font: 400 9px "DM Mono", monospace; }
footer p { margin: 0; } footer p:last-child { text-align: right; } .footer-brand { color: var(--gold); font: 24px Georgia, serif; letter-spacing: .12em; }

@media (max-width: 850px) { .intro { grid-template-columns: 105px 1fr; row-gap: 28px; } .intro-line { display: none; } .intro-note { grid-column: 2; } .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .share-section { grid-template-columns: 1fr; } }
@media (max-width: 580px) { .site-header { gap: 12px; } .header-rule, .header-label { display: none; } .hero { min-height: 600px; padding-top: 85px; } .hero-statement { width: 82%; right: 18px; bottom: 70px; } .intro { display: block; min-height: 0; padding-block: 50px; } .intro-copy { margin-top: 22px; } .intro-note { margin-top: 26px; } .board-section, .share-section { padding-block: 70px; } .board-heading { display: block; } .board-count { margin-top: 23px; } .board { grid-template-columns: minmax(0, 1fr); max-width: 340px; } footer { grid-template-columns: 1fr auto; gap: 18px; } footer p:nth-child(2) { display: none; } }