:root {
  --site-primary: #db061a;
  --site-secondary: #ffffff;
  --site-background: #000000;
  --site-on-primary: #ffffff;
  --site-on-secondary: #000000;
  --site-on-background: #f7f7f7;
  --site-font-body: Inter, Arial, Helvetica, sans-serif;
  --site-font-heading: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --site-heading-scale: 1;
  --site-spacing-scale: 1;
  --site-radius-scale: 1;
  --site-decoration-opacity: 1;
  color-scheme: light dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #000000; color: #f7f7f7; font-family: var(--site-font-body); }
#site-root { min-height: 100vh; width: 100%; background-color: light-dark(var(--site-background), var(--site-background)); color: light-dark(var(--site-on-background), var(--site-on-background)); border-radius: 0; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.topline { height: 7px; background: var(--site-primary); }
header { max-width: 1240px; margin: auto; padding: 23px 5.5%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { width:48px; height:48px; flex:none; }
.brand-name { line-height:.82; font-family:var(--site-font-heading); letter-spacing:.02em; font-size:25px; }
.brand-name small { display:block; font:800 9px var(--site-font-body); letter-spacing:.34em; margin-top:7px; color:#bdbdbd; }
nav { display:flex; align-items:center; gap:clamp(16px,3vw,38px); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
nav a { opacity:.82; transition:opacity .2s,color .2s; }
nav a:hover { color:#ff2a3d; opacity:1; }
.nav-cta { background:var(--site-primary); color:white; padding:12px 17px; }
.nav-contact { border:1px solid #ffffff; padding:11px 16px; }
.nav-contact:hover { border-color:#ff2a3d; }
.menu-toggle { display:none; background:none; border:1px solid #444444; color:#f7f7f7; padding:9px 12px; }
.hero { position:relative; background:#0b0b0b; border-top:1px solid #262626; border-bottom:1px solid #262626; min-height:570px; display:grid; grid-template-columns:1.03fr .97fr; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; opacity:var(--site-decoration-opacity); background:repeating-linear-gradient(135deg,transparent 0 39px,rgba(255,255,255,.025) 40px 41px); pointer-events:none; }
.hero-copy { position:relative; z-index:1; padding:clamp(58px,9vw,120px) 7vw clamp(55px,8vw,100px) max(7vw,calc((100vw - 1120px)/2)); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.eyebrow { display:flex; align-items:center; gap:11px; color:#ff2a3d; font-size:10px; font-weight:900; letter-spacing:.24em; text-transform:uppercase; }
.eyebrow:before { content:""; width:28px; height:2px; background:var(--site-primary); }
h1 { font:normal clamp(66px,9vw,126px)/.82 var(--site-font-heading); letter-spacing:-.025em; text-transform:uppercase; margin:25px 0 20px; max-width:660px; }
h1 span { color:#db061a; display:block; }
.hero-copy .tagline { font:normal clamp(28px,3.4vw,44px)/1 var(--site-font-heading); text-transform:uppercase; letter-spacing:.03em; color:#ffffff; margin:0 0 22px; max-width:none; }
.hero-copy p { max-width:440px; color:#c4c4c4; font-size:15px; line-height:1.8; margin:0 0 30px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:47px; padding:0 21px; font-size:10px; letter-spacing:.16em; font-weight:900; text-transform:uppercase; border:1px solid #ffffff; transition:transform .2s,background .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-red { background:var(--site-primary); border-color:var(--site-primary); color:#fff; }
.btn-outline { color:#f7f7f7; }
.hero-art { min-height:500px; position:relative; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 48%,#4a060c 0,#160305 35%,#0b0b0b 72%); overflow:hidden; }
.hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0b0b0b 0%,transparent 24%,transparent 100%); pointer-events:none; }
.swancircle { position:absolute; width:min(73%,480px); aspect-ratio:1; border:1px solid rgba(231,220,199,.25); border-radius:50%; box-shadow:0 0 0 18px rgba(231,220,199,.025),0 0 0 50px rgba(231,220,199,.018); }
.swan-hero { position:relative; z-index:1; width:min(83%,520px); filter:drop-shadow(18px 25px 15px rgba(0,0,0,.45)); }
.section { max-width:1240px; margin:auto; padding:88px 5.5%; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
.kicker { color:#ff2a3d; font-size:10px; font-weight:900; letter-spacing:.22em; text-transform:uppercase; }
h2 { font:normal calc(clamp(38px,5vw,62px) * var(--site-heading-scale))/.95 var(--site-font-heading); text-transform:uppercase; letter-spacing:-.01em; margin:12px 0 0; }
.section-head p { color:#b8b8b8; max-width:340px; font-size:13px; line-height:1.7; margin:0; }
.feature { display:grid; grid-template-columns: .94fr 1.06fr; background:#ffffff; color:#000000; }
.feature-art { min-height:430px; background:#000000; position:relative; display:grid; place-items:center; overflow:hidden; }
.feature-cover-image { display:block; width:100%; height:100%; min-height:430px; object-fit:contain; object-position:center; }
.feature-gallery { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.feature-gallery figure { margin:0; background:#000000; border:1px solid #333333; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.feature-gallery img { display:block; width:100%; height:auto; object-fit:contain; }
.feature-art:before { content:""; position:absolute; inset:0; opacity:.55; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.16) 5px 6px); }
.iron-cover { position:relative; width:min(67%,330px); aspect-ratio: .69; background:linear-gradient(145deg,#2a0509,#0b0b0b 62%,#5a0a10); box-shadow:18px 20px 0 rgba(0,0,0,.22); border:5px solid #ffffff; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:23px 16px; text-align:center; transform:rotate(-3deg); overflow:hidden; }
.iron-cover:before { content:""; position:absolute; width:180px; height:260px; bottom:-65px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#312d31,#a39a8c 48%,#332c30); clip-path:polygon(42% 0,61% 0,70% 18%,100% 36%,85% 100%,15% 100%,0 36%,31% 18%); opacity:.9; }
.iron-cover:after { content:""; position:absolute; width:130px; height:130px; border:9px solid #db061a; border-radius:50%; top:37%; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 8px rgba(190,42,42,.18); }
.cover-top,.cover-bottom { position:relative; z-index:1; color:#ffffff; font-family:var(--site-font-heading); text-transform:uppercase; }
.cover-top { font-size:clamp(22px,3vw,34px); line-height:.85; }
.cover-top small { display:block; font:800 8px var(--site-font-body); letter-spacing:.2em; margin-bottom:9px; }
.cover-bottom { font-size:10px; letter-spacing:.2em; }
.feature-copy { padding:clamp(30px,5vw,66px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.feature-copy h3 { font:normal clamp(45px,6vw,76px)/.84 var(--site-font-heading); text-transform:uppercase; margin:17px 0 22px; }
.feature-copy h3 span { color:#db061a; }
.feature-copy p { color:#3d3d3d; font-size:14px; line-height:1.8; max-width:470px; }
.feature-meta { display:flex; gap:22px; flex-wrap:wrap; margin:15px 0 27px; font-size:9px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:#6b6b6b; }
.feature-copy .btn { color:#fff; }
.catalogue { background:#0b0b0b; border-top:1px solid #242424; border-bottom:1px solid #242424; }
.catalogue .section { padding-top:78px; padding-bottom:85px; }
.cards { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; }
.comic-card { border:1px solid #333333; background:#111111; transition:transform .2s,border-color .2s; }
a.comic-card { display:block; color:inherit; }
.comic-card:focus-visible { outline:2px solid #ff2a3d; outline-offset:3px; }
.card-more { display:inline-block; margin-top:14px; color:#ff2a3d; font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.feature-copy h3 a:hover span { color:#000000; }
.feature-copy .btn-dark { background:#000000; border-color:#000000; }
.comic-card:hover { transform:translateY(-5px); border-color:#db061a; }
.card-art { height:300px; display:grid; place-items:center; position:relative; overflow:hidden; }
.card-art.one { background:radial-gradient(circle at 50% 45%,#6b0a12,#120304 67%); }
.card-art.two { background:radial-gradient(circle at 50% 45%,#3d3d3d,#0e0e0e 68%); }
.comic-card.next { border-style:dashed; }
.comic-card.next .card-art { filter:saturate(.75); }
.next-badge { position:absolute; z-index:2; top:14px; left:14px; background:#ffffff; color:#000000; padding:6px 10px; font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.card-art strong { position:relative; z-index:1; font:normal 45px/.82 var(--site-font-heading); text-transform:uppercase; text-align:center; color:#ffffff; text-shadow:4px 4px #000000; }
.card-art strong span { display:block; color:#ff2a3d; }
.card-art:after { content:""; position:absolute; width:170px; height:170px; border:1px solid rgba(255,255,255,.2); border-radius:50%; }
.card-art.has-image { place-items:end center; padding-bottom:18px; background:radial-gradient(circle at 50% 30%,#8a0d18,#3a0509 70%); }
.card-art.has-image:after { display:none; }
.card-art.has-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 8%; mix-blend-mode:multiply; transition:transform .4s; }
.card-art.has-image:before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 45%,rgba(17,17,16,.85) 100%); }
.card-art.has-image strong { z-index:2; font-size:36px; }
.comic-card:hover .card-art.has-image img { transform:scale(1.05); }
.card-info { padding:19px 20px 22px; }
.card-info small { color:#ff2a3d; font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.card-info h3 { font:normal 25px var(--site-font-heading); text-transform:uppercase; margin:8px 0 6px; }
.card-info p { color:#b8b8b8; font-size:12px; line-height:1.6; margin:0; }
.kickstarter { background:radial-gradient(ellipse at 15% 0%,#3a0509 0,#0b0b0b 45%,#050505 100%); border-top:1px solid #242424; border-bottom:1px solid #242424; position:relative; overflow:hidden; }
.kickstarter:before { content:""; position:absolute; inset:0; opacity:var(--site-decoration-opacity); background:repeating-linear-gradient(135deg,transparent 0 39px,rgba(255,255,255,.02) 40px 41px); pointer-events:none; }
.kickstarter .section { position:relative; }
.ks-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:start; }
.ks-intro p { color:#b8b8b8; font-size:14px; line-height:1.9; max-width:560px; }
.ks-status { display:inline-flex; align-items:center; gap:10px; margin:22px 0 8px; padding:9px 14px; border:1px solid #db061a; color:#f7f7f7; font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.ks-status i { width:8px; height:8px; border-radius:50%; background:#ff2a3d; box-shadow:0 0 0 4px rgba(224,74,64,.2); animation:ks-pulse 1.8s ease-in-out infinite; }
@keyframes ks-pulse { 50% { box-shadow:0 0 0 8px rgba(224,74,64,0); } }
@media (prefers-reduced-motion:reduce) { .ks-status i { animation:none; } }
.ks-scope { margin:24px 0 6px; padding:18px 18px 4px; border:1px solid #242424; background:#0e0e0e; max-width:560px; }
.ks-scope-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; align-items:baseline; margin-bottom:14px; }
.ks-scope-head strong { font:normal 20px var(--site-font-heading); text-transform:uppercase; letter-spacing:.02em; color:#f7f7f7; }
.ks-scope-head span { font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#ff2a3d; }
.ks-issues { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.ks-issues li { text-align:center; padding:10px 0; border:1px dashed #3a3a3a; color:#6a6a6a; font:normal 18px/1 var(--site-font-heading); }
.ks-issues li.funded { border:1px solid #db061a; background:#db061a; color:#f7f7f7; }
.ks-scope p { font-size:13px !important; margin-top:14px; }
.ks-support { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0 30px; }
.ks-support div { border-left:3px solid #db061a; background:#111111; padding:16px 16px 17px; }
.ks-support strong { display:block; font:normal 20px var(--site-font-heading); text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px; }
.ks-support span { color:#b8b8b8; font-size:12px; line-height:1.6; }
.ks-roadmap { background:#ffffff; color:#000000; padding:clamp(26px,4vw,42px); transform:rotate(-1deg); box-shadow:14px 16px 0 rgba(0,0,0,.3); }
.ks-roadmap h3 { font:normal 34px/.9 var(--site-font-heading); text-transform:uppercase; margin:10px 0 24px; }
.ks-roadmap ol { list-style:none; margin:0; padding:0; counter-reset:ks; }
.ks-roadmap li { counter-increment:ks; display:grid; grid-template-columns:44px 1fr; gap:14px; padding:15px 0; border-top:1px solid #d6d6d6; }
.ks-roadmap li:before { content:counter(ks,decimal-leading-zero); font:normal 28px/1 var(--site-font-heading); color:#bcbcbc; }
.ks-roadmap li.current:before { color:#db061a; }
.ks-roadmap li strong { display:block; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.ks-roadmap li.current strong:after { content:"  ← We are here"; color:#db061a; letter-spacing:.1em; }
.ks-roadmap li span { color:#3d3d3d; font-size:12px; line-height:1.6; }
.ks-roadmap li.done:before { content:"✓"; color:#000000; }
.ks-roadmap li.done strong { color:#6b6b6b; }
.ks-roadmap li span a { color:#db061a; font-weight:700; }
.ks-intro p a { color:#ffffff; font-weight:700; text-decoration:underline; text-decoration-color:#db061a; text-underline-offset:3px; }
.ks-intro p strong { color:#ffffff; }
.ks-badge { display:flex; align-items:center; gap:18px; max-width:560px; margin:22px 0 4px; padding:18px 20px; background:#0e0e0e; border:1px solid #242424; border-left:3px solid #05ce78; color:#f7f7f7; transition:transform .2s,border-color .2s,background .2s; }
.ks-badge:hover { transform:translateY(-2px); border-color:#05ce78; background:#111611; }
.ks-badge:focus-visible { outline:2px solid #05ce78; outline-offset:3px; }
.ks-badge-mark { width:40px; height:auto; flex:none; }
.ks-badge-body { display:flex; flex-direction:column; gap:7px; min-width:0; flex:1; }
.ks-badge-body small { font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#8a8a8a; }
.ks-badge-word { width:min(100%,190px); height:auto; }
.ks-badge-meta { font-size:11px; color:#b8b8b8; letter-spacing:.04em; }
.ks-badge-cta { flex:none; padding:10px 14px; border:1px solid #05ce78; color:#05ce78; font-size:9px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; transition:background .2s,color .2s; }
.ks-badge:hover .ks-badge-cta { background:#05ce78; color:#000000; }
.ks-roadmap-badge { display:flex; width:fit-content; align-items:center; gap:8px; margin-top:10px; padding:6px 10px 6px 8px; border:1px solid #d6d6d6; color:#000000; font-size:9px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; transition:border-color .2s; }
.ks-roadmap-badge:hover { border-color:#05ce78; }
.ks-roadmap-badge img { width:14px; height:auto; }
@media (max-width:520px) { .ks-badge { flex-wrap:wrap; } .ks-badge-cta { width:100%; text-align:center; } }
@media (prefers-reduced-motion:reduce) { .ks-badge, .ks-badge:hover { transition:none; transform:none; } }
.about { display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:center; }
.about p { color:#b8b8b8; font-size:14px; line-height:1.9; max-width:590px; }
.about-mark { border:1px solid #333333; padding:38px; text-align:center; transform:rotate(2deg); }
.about-mark svg { width:100%; max-width:260px; }
.about-mark strong { display:block; font:normal 36px var(--site-font-heading); margin-top:12px; }
.newsletter { background:#db061a; color:#ffffff; }
.newsletter-inner { max-width:1240px; margin:auto; padding:64px 5.5%; display:flex; justify-content:space-between; align-items:center; gap:40px; }
.newsletter h2 { font-size:clamp(38px,5vw,56px); }
.newsletter p { color:#ffe3e5; font-size:13px; line-height:1.7; max-width:440px; }
.signup { display:flex; width:min(100%,430px); border-bottom:1px solid #ffd0d4; }
.signup input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:white; padding:15px 4px; font-size:13px; }
.signup input::placeholder { color:#ffc2c8; }
.signup button { border:0; background:#000000; color:#fff; padding:0 19px; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
#signup-message { font-size:11px; min-height:17px; color:#ffffff; margin-top:10px; }
footer { max-width:1240px; margin:auto; padding:35px 5.5%; display:flex; justify-content:space-between; align-items:center; gap:24px; color:#9a9a9a; font-size:10px; letter-spacing:.08em; }
footer strong { color:#ffffff; font:normal 21px var(--site-font-heading); }
.footer-links { display:flex; gap:20px; text-transform:uppercase; font-weight:800; }
.footer-right { display:flex; align-items:center; gap:28px; }
.socials { display:flex; gap:10px; }
.socials a { width:36px; height:36px; display:grid; place-items:center; border:1px solid #333333; color:#ffffff; transition:background .2s,border-color .2s,color .2s; }
.socials a:hover, .socials a:focus-visible { background:#db061a; border-color:#db061a; color:#fff; }
.socials svg { width:16px; height:16px; fill:currentColor; }
@media (max-width:800px) {
  header { padding:18px 5%; }
  nav { display:none; position:absolute; z-index:10; top:82px; left:0; right:0; padding:20px 5%; background:#000000; border-bottom:1px solid #333333; flex-direction:column; align-items:flex-start; }
  nav.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:65px 7% 50px; }
  .hero-art { min-height:360px; }
  .hero-art:after { background:linear-gradient(180deg,#0b0b0b 0%,transparent 22%); }
  .section { padding:65px 6%; }
  .feature { grid-template-columns:1fr; }
  .feature-art { min-height:370px; }
  .feature-cover-image { min-height:370px; }
  .feature-gallery { grid-template-columns:1fr; }
  .ks-grid { grid-template-columns:1fr; }
  .ks-roadmap { transform:none; }
  .about { grid-template-columns:1fr; gap:35px; }
  .about-mark { max-width:420px; margin:auto; }
  .newsletter-inner { padding:55px 6%; flex-direction:column; align-items:flex-start; }
  .signup { width:100%; }
}
@media (max-width:520px) {
  .brand-mark { width:40px; height:40px; }
  .brand-name { font-size:21px; }
  h1 { font-size:72px; }
  .section-head { display:block; }
  .section-head p { margin-top:17px; }
  .cards { grid-template-columns:1fr; }
  .ks-support { grid-template-columns:1fr; }
  .card-art { height:270px; }
  footer { flex-direction:column; align-items:flex-start; }
  .footer-links { flex-wrap:wrap; }
  .footer-right { flex-direction:column; align-items:flex-start; gap:20px; }
}

/* Multi-page additions */
nav a[aria-current="page"] { color:#ff2a3d; opacity:1; }
h1.page-title { font:normal calc(clamp(42px,6vw,72px) * var(--site-heading-scale))/.92 var(--site-font-heading); text-transform:uppercase; letter-spacing:-.01em; margin:12px 0 0; max-width:none; }
h1.page-title span { display:inline; color:inherit; }
.page-intro { padding-top:64px; }
.home-feature { padding-top:72px; padding-bottom:72px; }
.newsletter-page { min-height:58vh; display:flex; align-items:center; }
.newsletter-page .newsletter-inner { width:100%; padding-top:90px; padding-bottom:90px; }
.perks { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.perks li { color:#ffffff; font-size:13px; line-height:1.6; padding-left:22px; position:relative; }
.perks li:before { content:"✳"; position:absolute; left:0; color:#000000; }
.hidden-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.about-actions { margin-top:10px; }
@media (max-width:800px) { .page-intro { padding-top:44px; } .newsletter-page .newsletter-inner { padding-top:60px; padding-bottom:60px; } }