:root {
  --ink: #111111;
  --paper: #f3f0ea;
  --white: #fffdf9;
  --wine: #7c1726;
  --gold: #d5a24c;
  --muted: #827b72;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
.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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

.topbar {
  height: 76px; padding: 0 clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--ink); background: rgba(243,240,234,.88); backdrop-filter: blur(12px); position: relative; z-index: 10;
}
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.04em; font-size: 1.4rem; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--white); background: var(--ink); border-radius: 44% 44% 52% 48%; box-shadow: inset -4px -4px 0 #000, inset 3px 3px 0 #363636; transform: rotate(-3deg); }
.ticker { font-weight: 900; letter-spacing: .12em; }

.hero { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.02fr .98fr; border-bottom: 2px solid var(--ink); }
.hero-copy { padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 94px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.hero-copy::before { content: ""; width: 96px; height: 12px; background: var(--wine); border-radius: 60% 35% 45% 55%; transform: rotate(-4deg); margin-bottom: 28px; box-shadow: 0 4px 0 #4d0914; }
.eyebrow, .section-kicker { margin: 0 0 12px; font-weight: 900; font-size: .82rem; letter-spacing: .21em; color: var(--wine); }
h1 { margin: 0; font-size: clamp(5rem, 12vw, 11rem); line-height: .72; letter-spacing: -.09em; font-weight: 1000; }
h1 span { display: block; margin-left: .05em; font-size: .38em; letter-spacing: .02em; -webkit-text-stroke: 2px var(--ink); color: transparent; }
.lead { max-width: 570px; margin: 40px 0 38px; font-family: Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.5; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; }
.character-button {
  min-height: 62px; padding: 0 25px 0 12px; display: inline-flex; align-items: center; gap: 13px;
  color: var(--white); background: var(--ink); text-decoration: none; font-weight: 900; letter-spacing: .05em;
  border: 2px solid var(--ink); border-radius: 45% 48% 42% 44% / 30% 36% 32% 40%;
  box-shadow: 0 7px 0 #000, inset 0 2px 0 rgba(255,255,255,.22); transition: transform .18s ease, box-shadow .18s ease;
}
.character-button:nth-child(2) { background: var(--wine); border-color: #4d0914; box-shadow: 0 7px 0 #4d0914, inset 0 2px 0 rgba(255,255,255,.2); transform: rotate(1deg); }
.character-button:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 11px 0 #000; }
.character-button:nth-child(2):hover { transform: translateY(-4px) rotate(1deg); box-shadow: 0 11px 0 #4d0914; }
.character-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #000; }
.button-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.15rem; }

.portrait-wrap { position: relative; overflow: hidden; display: grid; place-items: end center; background: var(--white); border-left: 2px solid var(--ink); }
.portrait-wrap::before, .portrait-wrap::after { content: ""; position: absolute; width: 340px; height: 340px; border: 32px solid var(--wine); border-radius: 50%; opacity: .9; }
.portrait-wrap::before { top: -180px; right: -160px; }
.portrait-wrap::after { bottom: -220px; left: -190px; border-color: var(--ink); }
.portrait-wrap img { width: min(100%, 850px); height: 92%; object-fit: contain; object-position: center bottom; position: relative; z-index: 2; filter: drop-shadow(0 28px 22px rgba(0,0,0,.18)); animation: settle .8s cubic-bezier(.2,.8,.2,1) both; }
.portrait-halo { position: absolute; width: 68%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f6d796 0 34%, #d5a24c 35% 47%, transparent 48%); top: 12%; animation: breathe 5s ease-in-out infinite; }
.portrait-label { position: absolute; z-index: 3; right: 4%; bottom: 6%; padding: 13px 16px; color: var(--white); background: var(--wine); font-weight: 900; font-size: .76rem; line-height: 1.2; letter-spacing: .16em; transform: rotate(3deg); box-shadow: 5px 5px 0 var(--ink); }

.contract { padding: clamp(55px, 7vw, 100px) clamp(22px, 6vw, 90px); display: grid; grid-template-columns: .6fr 1.4fr; gap: 40px; align-items: end; background: var(--ink); color: var(--white); }
.contract h2 { margin: 0; font: italic 700 clamp(2.5rem, 5vw, 5.6rem)/.9 Georgia, serif; letter-spacing: -.05em; }
.ca-card { width: 100%; min-width: 0; padding: 24px 28px; border: 2px solid var(--gold); background: #1a1a1a; color: var(--white); display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; text-align: left; box-shadow: 8px 8px 0 var(--wine); transition: transform .18s ease; }
.ca-card:hover { transform: translate(-3px,-3px); }
.ca-value { font: 700 clamp(.9rem, 1.6vw, 1.15rem)/1.4 "Courier New", monospace; overflow-wrap: anywhere; }
.copy-state { flex: 0 0 auto; padding: 10px 13px; border-radius: 999px; background: var(--wine); font-weight: 900; font-size: .78rem; letter-spacing: .12em; }

.manifesto { padding: clamp(70px, 10vw, 150px) clamp(22px, 7vw, 110px); display: grid; grid-template-columns: 1fr .42fr; column-gap: 9vw; align-items: end; }
.manifesto > .section-kicker { grid-column: 1 / -1; }
.statement { margin: 10px 0 0; font-weight: 1000; font-size: clamp(3rem, 8vw, 8.5rem); line-height: .85; letter-spacing: -.075em; text-transform: uppercase; }
.statement em { color: var(--wine); font-family: Georgia, serif; font-weight: 700; text-transform: none; }
.detail-card { border-top: 2px solid var(--ink); padding-top: 20px; }
.detail-number { display: block; font-weight: 900; color: var(--wine); margin-bottom: 50px; }
.detail-card p { margin: 0; font-family: Georgia, serif; font-size: 1.2rem; line-height: 1.45; }
footer { padding: 24px clamp(22px, 4vw, 64px); display: flex; justify-content: space-between; gap: 20px; color: var(--white); background: var(--wine); font-weight: 900; font-size: .78rem; letter-spacing: .16em; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 30; padding: 15px 20px; color: var(--white); background: var(--ink); border: 2px solid var(--gold); font-weight: 900; letter-spacing: .1em; transform: translate(-50%, 120px); transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 6px 6px 0 var(--wine); }
.toast.show { transform: translate(-50%, 0); }

@keyframes settle { from { opacity: 0; transform: translateY(42px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes breathe { 50% { transform: scale(1.045) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 670px; }
  .portrait-wrap { min-height: 620px; border-left: 0; border-top: 2px solid var(--ink); }
  .contract, .manifesto { grid-template-columns: 1fr; }
  .detail-card { margin-top: 50px; max-width: 520px; }
}
@media (max-width: 520px) {
  .topbar { height: 66px; }
  .hero { min-height: auto; }
  .hero-copy { min-height: 590px; }
  h1 { font-size: clamp(4.6rem, 27vw, 7rem); }
  .character-button { width: 100%; justify-content: flex-start; }
  .portrait-wrap { min-height: 480px; }
  .portrait-wrap img { height: 88%; width: 130%; max-width: none; }
  .contract { padding-top: 64px; padding-bottom: 72px; }
  .ca-card { align-items: flex-start; flex-direction: column; }
  .statement { font-size: 16vw; }
  footer { flex-direction: column; }
}