/* Layout: same skeleton as the reference — sticky header, full-bleed hero, framed news grid, three seals, feature+registry split, media mosaic, knowledge rows, Discord band, 4-column footer */
:root{
  --bg:#090706;
  --bg-2:#120d0a;
  --panel:#17110d;
  --panel-2:#1f1712;
  --line:rgba(230,189,104,.16);
  --line-2:rgba(230,189,104,.32);
  --gold:#e6bd68;
  --gold-hi:#fff0c2;
  --gold-lo:#9a7234;
  --ember:#a43d18;
  --wine:#602b37;
  --red:#7d1d10;
  --red-hi:#b33a1c;
  --ink:#eadfc8;
  --muted:#a99b85;
  --f-display:"Noto Serif KR","Noto Serif",Georgia,serif;
  --f-body:"Noto Sans",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.65;letter-spacing:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;line-height:1.08;text-wrap:balance;color:var(--ink)}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.eyebrow{font-family:var(--f-body);font-weight:700;font-size:.875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.eyebrow.line{display:flex;align-items:center;gap:14px}
.eyebrow.line::before{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.arrow-link{font-family:var(--f-body);font-weight:700;font-size:.875rem;letter-spacing:.075em;text-transform:uppercase;color:var(--gold);transition:color .2s}
.arrow-link:hover{color:var(--gold-hi)}
.center{text-align:center}

/* ornate button: gold frame + ember core with pointed ends */
.btn-ornate{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:68px;padding:0 64px;font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.055em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 2px 6px rgba(0,0,0,.7);isolation:isolate;clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,22px 100%,0 50%);background:linear-gradient(180deg,#ffe9a8,#c8963f 45%,#7a5420 55%,#e6bd68);transition:filter .25s,transform .25s}
.btn-ornate::before{content:"";position:absolute;inset:3px;z-index:-1;clip-path:inherit;background:radial-gradient(ellipse 70% 120% at 50% 0%,#d4562c,transparent 70%),linear-gradient(180deg,var(--red-hi),var(--red) 60%,#3a0c05)}
.btn-ornate::after{content:"";position:absolute;inset:7px;z-index:-1;clip-path:inherit;border:1px solid rgba(255,220,150,.35)}
.btn-ornate:hover{filter:brightness(1.15) drop-shadow(0 0 18px rgba(212,86,44,.55));transform:translateY(-1px)}
.btn-ornate.sm{min-height:52px;padding:0 44px;font-size:.95rem}
.btn-line{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border:1px solid var(--line-2);font-family:var(--f-body);font-weight:700;font-size:.85rem;color:var(--gold-hi);background:rgba(9,7,6,.6);transition:border-color .2s,background .2s}
.btn-line:hover{border-color:var(--gold);background:rgba(230,189,104,.08)}

/* Header */
.vm-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:80px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(122,55,27,.1),transparent 28%,transparent 68%,rgba(164,61,24,.18)),linear-gradient(180deg,rgba(9,7,6,.96),rgba(9,7,6,.9));backdrop-filter:blur(8px)}
.vm-header .wrap{height:100%;display:flex;align-items:center;gap:28px;max-width:1320px}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:56px;height:56px}
.logo span{font-family:var(--f-display);font-weight:900;font-size:1.25rem;letter-spacing:.12em;color:var(--gold-hi)}
.menu{flex:1;display:flex;align-items:center;gap:20px}
.nav{display:flex;gap:6px;margin-inline:auto}
.nav a{font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:.04em;color:var(--ink);padding:10px 14px;position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .25s}
.nav a:hover{color:var(--gold-hi)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--gold)}
.actions{display:flex;align-items:center;gap:12px}
.lang{font-family:var(--f-body);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);padding:6px 10px}
.btn-login{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--ink);padding:10px 14px}
.btn-login:hover{color:var(--gold-hi)}
.btn-create{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--gold-hi);padding:10px 20px;border:1px solid var(--gold);background:linear-gradient(180deg,rgba(179,58,28,.5),rgba(125,29,16,.5));transition:background .2s}
.btn-create:hover{background:linear-gradient(180deg,rgba(179,58,28,.85),rgba(125,29,16,.85))}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-2);background:transparent;color:var(--gold);font-size:1.3rem;cursor:pointer}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg svg{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,7,6,.92) 0%,rgba(9,7,6,.55) 45%,rgba(9,7,6,.15) 75%),linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
#embers{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:24px;padding-top:72px}
.hero-copy{padding-bottom:110px}
.hero-art{position:relative;align-self:end;justify-self:center;width:100%;max-width:440px}
.hero-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 40px rgba(164,61,24,.45));-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent);animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.hero-crest{display:block;width:150px;margin:0 0 18px -6px;filter:drop-shadow(0 0 24px rgba(230,150,60,.45))}
.hero h1{font-size:clamp(2.6rem,6vw,3.6rem);letter-spacing:-.01em;margin:16px 0 14px;text-shadow:0 4px 30px rgba(0,0,0,.8)}
.hero .sub{color:var(--ink);opacity:.86;max-width:46ch;margin-bottom:30px}

/* Section shells */
.sec{padding-block:96px;position:relative}
.sec-head{display:grid;gap:12px;margin-bottom:44px}
.sec-head h2{font-size:clamp(2rem,4.4vw,2.72rem);letter-spacing:-.01em}
.sec-head p.lede{color:var(--muted);font-size:1.0625rem}
.divider{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* News */
.news-frame{border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(31,23,18,.85),rgba(18,13,10,.9));padding:28px 28px 0;box-shadow:inset 0 0 0 6px rgba(9,7,6,.6),inset 0 0 0 7px var(--line)}
.news-frame>h2{text-align:center;font-size:2rem;letter-spacing:-.01em;margin:6px 0 26px;display:flex;align-items:center;justify-content:center;gap:18px}
.news-frame>h2::before,.news-frame>h2::after{content:"";height:1px;flex:1;max-width:220px;background:linear-gradient(90deg,transparent,var(--gold-lo))}
.news-frame>h2::after{transform:scaleX(-1)}
.news-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:18px}
.news-side{display:grid;gap:18px}
.post{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);background:var(--panel);min-width:0;transition:border-color .25s}
.post:hover{border-color:var(--gold-lo)}
.post time{font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--gold)}
.post h3{font-size:1.05rem;letter-spacing:-.01em}
.post p{color:var(--muted);font-size:.95rem;flex:1}
.post .arrow-link{border-top:1px solid var(--line);padding-top:12px;font-size:.8rem}
.post.featured{justify-content:flex-end;min-height:520px;padding:32px;overflow:hidden}
.post.featured .art{position:absolute;inset:0;z-index:0}
.post.featured .art svg{width:100%;height:100%}
.post.featured::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(9,7,6,.97) 18%,rgba(9,7,6,.55) 55%,rgba(9,7,6,.1))}
.post.featured>*:not(.art){position:relative;z-index:2}
.post.featured h3{font-size:1.66rem;letter-spacing:-.01em;max-width:22ch}
.news-all{display:block;margin:22px -28px 0;padding:18px;text-align:center;border-top:1px solid var(--line);background:rgba(9,7,6,.35)}

/* Seals */
.seals{background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(96,43,55,.18),transparent 70%),var(--bg-2);border-block:1px solid var(--line)}
.seal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.seal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.medal{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#3b2a1d,#120c08 70%);box-shadow:0 0 0 2px #6d5025,0 0 0 6px #1a120c,0 0 0 7px var(--gold-lo),0 10px 30px rgba(0,0,0,.6);transition:box-shadow .3s}
.seal:hover .medal{box-shadow:0 0 0 2px var(--gold),0 0 0 6px #1a120c,0 0 0 7px var(--gold),0 0 36px rgba(230,150,60,.35)}
.medal svg{width:62px;height:62px}
.medal .n{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.1em;color:var(--gold-hi);padding:3px 12px;background:#1a120c;border:1px solid var(--gold-lo)}
.seal h3{font-size:1.375rem;letter-spacing:-.01em;margin-top:14px}
.seal p{color:var(--muted);font-size:1rem;max-width:30ch}

/* Feature + registry */
.legacy{overflow:hidden}
.legacy .ghost{position:absolute;left:-40px;bottom:0;width:420px;max-width:55%;opacity:.12;transform:scaleX(-1);-webkit-mask-image:linear-gradient(0deg,transparent,#000 35%);mask-image:linear-gradient(0deg,transparent,#000 35%);pointer-events:none}
.legacy .wrap{position:relative;display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:center}
.legacy h2{font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.01em;margin:14px 0 22px}
.legacy .body{color:var(--muted);max-width:60ch;margin-bottom:26px}
.registry{border-left:1px solid var(--line-2);padding-left:32px}
.registry .eyebrow{font-size:.75rem;margin-bottom:10px}
.registry dl{margin:0}
.registry .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.registry dt{color:var(--muted);font-size:.95rem}
.registry dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--gold-hi);font-variant-numeric:tabular-nums}

/* Media */
.media{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(164,61,24,.12),transparent 70%),var(--bg-2);border-block:1px solid var(--line)}
.mosaic{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:12px;border:1px solid var(--line-2);padding:12px;background:var(--bg)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:260px;padding:22px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.tile.big{grid-row:1/3;min-height:540px}
.tile .scene{position:absolute;inset:0;z-index:0}
.tile .scene svg{width:100%;height:100%}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(9,7,6,.96) 12%,rgba(9,7,6,.2) 60%,transparent)}
.tile>*:not(.scene):not(.play){position:relative;z-index:2}
.tile .k{font-weight:700;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.tile h3{font-size:1.5rem;letter-spacing:-.01em}
.tile .btn-line{align-self:flex-start;margin-top:8px}
.play{position:absolute;z-index:2;top:50%;left:50%;width:72px;height:72px;margin:-56px 0 0 -36px;border-radius:50%;border:1px solid var(--gold);background:rgba(9,7,6,.55);display:grid;place-items:center;transition:background .2s,transform .2s}
.tile:hover .play{background:rgba(125,29,16,.75);transform:scale(1.06)}
.tile:not(.big) .play{width:54px;height:54px;margin:0;top:18px;left:auto;right:18px}
.media-more{display:flex;justify-content:flex-end;margin-top:22px}

/* Knowledge */
.knowledge .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.knowledge h2{font-size:clamp(2rem,4.4vw,2.8rem);letter-spacing:-.01em;margin:14px 0 18px}
.knowledge .body{color:var(--muted);max-width:36ch}
.doors{border-top:1px solid var(--line)}
.door{display:grid;grid-template-columns:44px 170px 1fr 28px;align-items:center;gap:16px;padding:26px 0;border-bottom:1px solid var(--line);transition:background .2s}
.door:hover{background:linear-gradient(90deg,rgba(230,189,104,.06),transparent)}
.door .n{font-family:var(--f-display);font-weight:700;font-size:.8rem;color:var(--gold);align-self:start;padding-top:6px}
.door h3{font-size:1.3rem;letter-spacing:-.01em}
.door p{color:var(--muted);font-size:.95rem}
.door .go{color:var(--gold);font-size:1.2rem;transition:transform .2s}
.door:hover .go{transform:translateX(4px)}

/* Discord band */
.brother{background:radial-gradient(ellipse 60% 90% at 20% 30%,rgba(96,43,55,.45),transparent 70%),linear-gradient(180deg,#1b0f10,#110a09);border-block:1px solid var(--line)}
.brother .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.brother h2{font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.01em;margin:14px 0 22px}
.brother .body{font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.02em;max-width:48ch;margin-bottom:32px}
.dc-widget{border:1px solid var(--line-2);background:#141010;min-width:0}
.dc-widget header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#5865f2;color:#fff;font-family:var(--f-body);font-weight:700}
.dc-widget header svg{width:26px;height:20px}
.dc-widget .tags{padding:14px 16px;color:var(--ink);font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.06)}
.dc-widget ul{list-style:none;margin:0;padding:10px 16px;display:grid;gap:8px}
.dc-widget li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--muted)}
.dc-widget li i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--gold-lo),var(--wine));position:relative}
.dc-widget li i::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#3ba55d;border:2px solid #141010}
.dc-widget footer{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);font-size:.85rem;color:var(--muted)}
.dc-widget footer a{padding:6px 14px;background:rgba(255,255,255,.08);color:var(--ink);font-weight:700}

/* Footer */
.vm-footer{padding-block:64px 28px;background:radial-gradient(circle at 16% 0%,rgba(162,79,94,.1),transparent 544px),linear-gradient(180deg,rgba(16,11,8,.7),rgba(9,7,6,.98));font-family:var(--f-body)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-brand svg{width:64px;height:64px}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:30ch;margin-top:12px}
.foot-col h4{margin:0 0 16px;font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.foot-col a{display:block;color:var(--muted);font-size:.95rem;padding:5px 0}
.foot-col a:hover{color:var(--gold-hi)}
.copy{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);text-align:center;font-family:var(--f-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.copy small{display:block;margin-top:8px;font-family:var(--f-body);letter-spacing:.02em;text-transform:none;opacity:.7}

/* Floating vote + discord */
.floaters{position:fixed;z-index:40;right:max(20px,calc(env(safe-area-inset-right,0px) + 12px));bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.vote-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--gold);background:linear-gradient(180deg,#2a1b12,#140d09);color:var(--gold-hi);font-family:var(--f-display);font-weight:700;font-size:.85rem;letter-spacing:.08em;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.vote-btn:hover{box-shadow:0 0 22px rgba(230,150,60,.4)}
.dc-btn{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#5865f2;box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.08)}
.dc-btn svg{width:30px;height:23px}
.dc-btn::after{content:"";position:absolute;right:2px;bottom:2px;width:12px;height:12px;border-radius:50%;background:#3ba55d;border:2px solid var(--bg)}

/* Vote modal */
dialog{border:1px solid var(--line-2);background:linear-gradient(180deg,var(--panel-2),var(--bg));color:var(--ink);padding:36px;max-width:560px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(5,3,2,.78);backdrop-filter:blur(4px)}
dialog h2{font-size:1.9rem;letter-spacing:-.01em;margin:8px 0 12px}
dialog .body{color:var(--muted);font-size:1rem;margin-bottom:24px}
.vote-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vote-card{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);background:var(--bg)}
.vote-card b{font-family:var(--f-display);font-size:1.15rem}
.vote-card span{color:var(--muted);font-size:.9rem}
.vote-card a{margin-top:12px;text-align:center;padding:10px;border:1px solid var(--gold);color:var(--gold-hi);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.vote-card a:hover{background:rgba(230,189,104,.1)}
dialog .note{margin-top:18px;font-size:.85rem;color:var(--muted);text-align:center}
.x{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;background:transparent;color:var(--muted);font-size:1.5rem;cursor:pointer}
.x:hover{color:var(--gold-hi)}

/* Responsive */
@media (max-width:1080px){
  .menu{display:none}
  .burger{display:block}
  .vm-header.open .menu{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;align-items:stretch;gap:12px;padding:8px var(--gr) 18px var(--gl);background:var(--bg);border-bottom:1px solid var(--line)}
  .vm-header.open .nav{flex-direction:column;gap:0;margin:0}
  .vm-header.open .actions{flex-wrap:wrap}
}
@media (max-width:900px){
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr}
  .hero-copy{padding-bottom:24px}
  .hero-art{max-width:260px;order:-1;margin-bottom:-30px}
  .news-grid,.legacy .wrap,.knowledge .wrap,.brother .wrap{grid-template-columns:1fr}
  .post.featured{min-height:380px}
  .seal-grid{grid-template-columns:1fr;gap:56px}
  .registry{border-left:0;padding-left:0;border-top:1px solid var(--line-2);padding-top:24px}
  .mosaic{grid-template-columns:1fr;grid-template-rows:none}
  .tile.big{grid-row:auto;min-height:340px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec{padding-block:72px}
  .knowledge .wrap{gap:28px}
}
@media (max-width:560px){
  .door{grid-template-columns:32px 1fr 20px}
  .door p{grid-column:2/3}
  .door .go{grid-row:1;grid-column:3}
  .news-frame{padding:18px 16px 0}
  .news-all{margin-inline:-16px}
  .vote-list,.foot-grid{grid-template-columns:1fr}
  .btn-ornate{padding:0 40px;width:100%}
  dialog{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}