:root {
  --ink: #171512;
  --paper: #f5f0e6;
  --red: #d82128;
  --blue: #315cd2;
  --muted: #756f65;
  --line: #d2cabd;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Mono", monospace; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
.site-header { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: auto; padding: 25px 4vw; position: relative; z-index: 2; }
.brand { font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 16px; letter-spacing: -1px; display: inline-flex; align-items: center; gap: 8px; }
.brand span { display: grid; place-items: center; width: 29px; height: 29px; font: 700 10px "DM Mono", monospace; color: var(--paper); background: var(--ink); border-radius: 50%; }
nav { display: flex; align-items: center; gap: 25px; font-size: 11px; letter-spacing: .08em; }
nav a:not(.nav-cta) { border-bottom: 1px solid transparent; padding-bottom: 3px; }
nav a:not(.nav-cta):hover { border-color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--paper); padding: 10px 13px; }
.hero { min-height: min(760px, calc(100vh - 80px)); max-width: 1440px; margin: auto; padding: 75px 4vw 0; position: relative; overflow: hidden; display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; }
.eyebrow, .section-label { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.eyebrow i { display: inline-block; width: 8px; height: 8px; background: var(--red); border-radius: 50%; margin-right: 8px; }
h1, h2 { font-family: "Unbounded", sans-serif; letter-spacing: -.08em; margin: 0; text-transform: uppercase; }
h1 { font-size: clamp(43px, 5.8vw, 88px); line-height: .98; position: relative; z-index: 2; }
h1 em { font-style: normal; color: var(--red); }
.hero-text { max-width: 420px; line-height: 1.75; font-size: 14px; margin: 28px 0; }
.hero-actions { display: flex; gap: 25px; align-items: center; flex-wrap: wrap; }
.button { padding: 15px 17px; display: inline-flex; gap: 20px; align-items: center; font-size: 11px; letter-spacing: .05em; transition: transform .2s; }
.button:hover { transform: translate(-3px, -3px); }
.button-red { color: white; background: var(--red); box-shadow: 4px 4px 0 var(--ink); }
.button span { font-size: 18px; }
.text-link { font-size: 11px; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.hero-art-wrap { min-height: 610px; position: relative; display: grid; align-items: end; justify-items: center; }
.sun-disc { position: absolute; width: min(36vw, 510px); height: min(36vw, 510px); border-radius: 50%; background: var(--red); right: 2%; bottom: 53px; box-shadow: 19px 19px 0 #9f131d; }
.hero-art { max-height: 600px; width: min(100%, 700px); object-fit: contain; object-position: bottom; position: relative; z-index: 1; filter: drop-shadow(20px 25px 0 rgba(23,21,18,.17)); }
.hero-stamp { position: absolute; z-index: 2; font-size: 9px; line-height: 1.4; letter-spacing: .1em; border: 1px solid var(--ink); padding: 9px; background: var(--paper); }
.stamp-left { left: 5%; bottom: 150px; transform: rotate(-8deg); }.stamp-right { right: 1%; top: 80px; transform: rotate(8deg); }
.ticker { position: absolute; z-index: 3; height: 37px; bottom: 0; left: 0; right: 0; overflow: hidden; background: var(--ink); color: var(--paper); display: grid; align-items: center; white-space: nowrap; font: 500 12px "Unbounded", sans-serif; letter-spacing: .1em; }
.ticker span { animation: marquee 20s linear infinite; } @keyframes marquee { to { transform: translateX(-32%); } }
.section-shell { max-width: 1440px; padding: 130px 4vw; margin: auto; }
.lore-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 150px); align-items: center; margin-top: 30px; }
h2 { font-size: clamp(30px, 4vw, 60px); line-height: 1.08; } h2 span { color: var(--red); }
.body-copy { max-width: 430px; font-size: 14px; line-height: 1.8; color: #36322d; }
.storm-card { margin: 0; position: relative; transform: rotate(2deg); border: 8px solid var(--ink); box-shadow: 12px 12px 0 var(--red); }
.storm-card img { width: 100%; display: block; }.storm-card figcaption { padding: 12px; background: var(--paper); font-size: 10px; letter-spacing: .08em; }
.dojo { background: var(--ink); color: var(--paper); min-height: 610px; display: grid; grid-template-columns: 1fr 1fr; }
.dojo-image { min-height: 490px; overflow: hidden; }.dojo-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dojo-copy { padding: 100px clamp(30px, 9vw, 145px) 70px clamp(30px, 6vw, 95px); }.dojo-copy .section-label { color: #aaa297; }.dojo-copy p { max-width: 390px; line-height: 1.8; font-size: 14px; }.principles { display: grid; gap: 11px; margin-top: 36px; font-size: 11px; letter-spacing: .08em; color: #d8d0c5; }
.contract { padding-bottom: 80px; }.contract-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; margin-top: 25px; }.contract-panel { background: #e7dfd2; padding: 28px; border: 1px solid var(--ink); box-shadow: 7px 7px 0 var(--blue); }.contract-panel label { display: block; font-size: 10px; letter-spacing: .1em; margin-bottom: 12px; }.copy-row { display: flex; border: 1px solid var(--ink); background: var(--paper); }.copy-row input { min-width: 0; flex: 1; border: 0; padding: 15px; background: transparent; color: var(--ink); font: 11px "DM Mono", monospace; outline: none; }.copy-row button { border: 0; background: var(--ink); color: var(--paper); padding: 0 17px; font: 11px "DM Mono", monospace; cursor: pointer; }.copy-row button:hover { background: var(--red); }.copy-status { min-height: 17px; margin: 14px 0 0; font-size: 10px; color: var(--muted); }.fine-print { max-width: 710px; color: var(--muted); font-size: 10px; line-height: 1.6; margin: 55px 0 0; }
footer { max-width: 1440px; margin: auto; padding: 28px 4vw; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .05em; } footer > a:last-child { font-size: 22px; }
@media (max-width: 760px) { .site-header { padding-top: 18px; } nav { gap: 13px; font-size: 9px; } nav a:not(.nav-cta) { display: none; }.hero { padding-top: 35px; display: flex; flex-direction: column; align-items: stretch; min-height: auto; }.hero-art-wrap { min-height: 440px; margin-top: -5px; }.hero-art { max-height: 440px; }.sun-disc { width: 320px; height: 320px; bottom: 38px; }.stamp-left { left: 0; bottom: 95px; }.stamp-right { right: 0; top: 20px; }.lore-grid, .contract-grid, .dojo { grid-template-columns: 1fr; }.section-shell { padding-top: 85px; padding-bottom: 85px; }.lore-grid { gap: 35px; }.dojo-copy { padding: 70px 7vw; }.dojo-image { min-height: 300px; }.contract-grid { gap: 34px; }.copy-row { flex-direction: column; }.copy-row button { padding: 13px; } footer p { display: none; } }