/* ===========================================================
   The Emberlands — Vintage Story server site
   Deadclaim-grade polish · warm "aged field-journal" theme
   Cinzel + Barlow · self-hosted · canvas voxel hero
   =========================================================== */

@font-face { font-family:'Cinzel'; font-style:normal; font-weight:500 900; font-display:swap; src:url('fonts/cinzel.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/barlow-700.woff2') format('woff2'); }

:root {
  /* warm gunmetal / aged iron surfaces */
  --ash-950:#0d0b07; --ash-900:#13100b; --ash-850:#191410; --ash-800:#201a12;
  --ash-700:#2c2418; --ash-600:#3b3020; --ash-500:#52422b;
  /* bone / parchment type */
  --bone:#ece2cf; --bone-dim:#bcac92; --bone-faint:#8a7c63;
  /* ember amber (primary accent) */
  --amber:#e8a23c; --amber-bright:#ffc061; --amber-700:#96631f;
  /* pine (nature) + rust (secondary) */
  --pine:#829a5c; --pine-700:#4c5f37; --pine-900:#28331b;
  --rust:#c4562f; --rust-bright:#e36a3c;

  --bg:var(--ash-950); --surface:var(--ash-850); --border:var(--ash-700);

  --font-display:'Cinzel', Georgia, 'Times New Roman', serif;
  --font-sans:'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw:1200px; --readw:780px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --glow:rgba(232,162,60,0.35);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--bone);
  font-family:var(--font-sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(232,162,60,0.06), transparent 60%),
    radial-gradient(100% 60% at 50% 120%, rgba(40,51,27,0.28), transparent 70%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:0.01em; line-height:1.05; text-wrap:balance;}
a{color:var(--amber-bright); text-decoration:none;}
a:hover{color:var(--amber);}
::selection{background:var(--amber); color:var(--ash-950);}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
img{max-width:100%;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.kicker{font-family:var(--font-sans); font-weight:600; font-size:0.74rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--amber);}

/* film grain */
body::after{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.05; background-image:var(--grain); background-size:170px 170px; mix-blend-mode:overlay;}

/* global overlays */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg,var(--amber-700),var(--amber),var(--amber-bright)); box-shadow:0 0 12px var(--glow); transition:width .1s linear;}
.cursor-glow{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .5s; mix-blend-mode:screen; background:radial-gradient(360px circle at var(--mx,-200px) var(--my,-200px), rgba(232,162,60,0.12), rgba(232,162,60,0.03) 42%, transparent 60%);}
body.has-cursor .cursor-glow{opacity:1;}

/* divider with amber tick */
.rule-tick{position:relative; height:1px; max-width:var(--maxw); margin:0 auto; background:linear-gradient(90deg,transparent,var(--ash-600) 20%,var(--ash-600) 80%,transparent);}
.rule-tick::after{content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; rotate:45deg; translate:-50% -50%; background:var(--amber); box-shadow:0 0 10px var(--glow);}

/* ---------------- Header ---------------- */
.site-header{position:fixed; inset:0 0 auto 0; z-index:100; transition:background .35s var(--ease), border-color .35s, box-shadow .35s, padding .35s; border-bottom:1px solid transparent; background:linear-gradient(180deg, rgba(13,11,7,0.6), transparent);}
.site-header[data-scrolled]{background:rgba(13,11,7,0.9); backdrop-filter:blur(12px) saturate(1.1); border-bottom-color:var(--ash-700); box-shadow:0 8px 30px rgba(0,0,0,0.5);}
.nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px 24px; max-width:var(--maxw); margin:0 auto; transition:padding .35s;}
.site-header[data-scrolled] .nav{padding:11px 24px;}
.brand{display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:20px; text-transform:uppercase; letter-spacing:0.04em; color:var(--bone);}
.brand:hover{color:var(--bone);}
.brand .seal{width:30px; height:30px; flex:none;}
.nav-links{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; align-items:center;}
.nav-links a{color:var(--bone-dim); padding:8px 13px; font-family:var(--font-sans); font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; transition:color .18s;}
.nav-links a:hover{color:var(--bone);}

/* ---------------- Buttons ---------------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; font-family:var(--font-sans); font-weight:700; font-size:14px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; border:1px solid transparent; transition:transform .18s var(--ease), box-shadow .25s, filter .25s, background .2s, color .2s, border-color .2s; will-change:transform;}
.btn svg{width:18px; height:18px;}
.btn-primary{color:#2a1707; background:linear-gradient(180deg,var(--amber-bright),var(--amber) 58%,var(--amber-700)); box-shadow:0 10px 26px var(--glow), inset 0 1px 0 rgba(255,255,255,0.3); clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 18px 38px var(--glow);}
.btn-ghost{color:var(--bone); background:rgba(32,26,18,0.5); border-color:var(--ash-600); backdrop-filter:blur(6px); clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
.btn-ghost:hover{border-color:var(--amber-700); color:var(--bone); background:var(--ash-800); transform:translateY(-2px);}
.btn.sm{padding:9px 16px; font-size:12px;}
.btn.sm svg{width:15px; height:15px;}
.btn.lg{padding:17px 32px; font-size:15px;}

/* ---------------- Hero ---------------- */
.hero{position:relative; isolation:isolate; min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; border-bottom:1px solid var(--ash-800);}
.hero-canvas{position:absolute; inset:0; z-index:-2; width:100%; height:100%; display:block;}
.hero-vignette{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 24%, transparent 38%, rgba(8,6,4,0.6) 100%),
    linear-gradient(180deg, rgba(13,11,7,0.55) 0%, transparent 26%, transparent 52%, rgba(13,11,7,0.92) 100%);}
.hero-inner{position:relative; max-width:900px; margin:0 auto; padding:120px 24px 90px; width:100%;}

.badge{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); border:1px solid var(--ash-600); background:rgba(20,16,11,0.65); padding:8px 16px; margin-bottom:30px; backdrop-filter:blur(6px); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);}
.badge .dot{width:7px; height:7px; rotate:45deg; background:var(--amber); box-shadow:0 0 8px var(--glow);}

.emblem{width:clamp(150px,20vw,208px); height:auto; margin:0 auto 26px; display:block; filter:drop-shadow(0 12px 34px rgba(0,0,0,0.55)) drop-shadow(0 0 26px rgba(232,162,60,0.25));}

.wordmark{font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(44px,9vw,104px); line-height:0.92; letter-spacing:0.02em; margin:0 0 20px; color:var(--bone);
  background:linear-gradient(180deg,#fff5e0 8%,var(--amber-bright) 46%,var(--amber) 66%,var(--amber-700) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 1px rgba(0,0,0,0.4)) drop-shadow(0 0 40px rgba(232,162,60,0.25));}
.wordmark .the{display:block; font-size:0.3em; letter-spacing:0.55em; font-weight:600; color:var(--bone-dim); -webkit-text-fill-color:var(--bone-dim); margin-bottom:0.15em; filter:none;}

.hero .lede{font-size:clamp(17px,2.1vw,21px); color:var(--bone-dim); max-width:600px; margin:0 auto 34px;}
.cta-row{display:flex; gap:15px; flex-wrap:wrap; justify-content:center;}
.meta-row{display:flex; flex-wrap:wrap; gap:0; justify-content:center; margin-top:34px; border:1px solid var(--ash-700); background:rgba(20,16,11,0.5); backdrop-filter:blur(6px); width:fit-content; margin-inline:auto; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
.meta-row .m{display:flex; align-items:center; gap:9px; padding:11px 20px; font-size:13.5px; color:var(--bone-dim); border-right:1px solid var(--ash-700);}
.meta-row .m:last-child{border-right:none;}
.meta-row .m svg{width:16px; height:16px; color:var(--amber);}
.meta-row .m b{color:var(--bone); font-weight:700;}
.meta-row .m .ph{color:var(--amber-bright);}

.scroll-cue{position:absolute; left:50%; bottom:24px; translate:-50% 0; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--bone-faint); font-family:var(--font-sans); font-weight:600; font-size:10px; letter-spacing:0.3em; text-transform:uppercase;}
.scroll-cue svg{width:20px; height:20px; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.55;} 50%{transform:translateY(6px); opacity:1;}}

/* ---------------- Sections ---------------- */
section.block{padding:100px 0; scroll-margin-top:80px; position:relative;}
.section-head{text-align:center; max-width:680px; margin:0 auto 56px;}
.section-head .kicker{display:block; margin-bottom:16px;}
.section-title{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(30px,4.6vw,50px); letter-spacing:0.01em; margin:0 0 14px; color:var(--bone);}
.section-title .em{color:var(--amber);}
.section-sub{color:var(--bone-dim); margin:0; font-size:17.5px;}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--ash-700); background:var(--ash-900);}
.stat{position:relative; text-align:center; padding:30px 18px; border-right:1px solid var(--ash-700);}
.stat:last-child{border-right:none;}
.stat::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--amber),transparent); opacity:.7;}
.stat .sv{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.6vw,42px); color:var(--bone); line-height:1; display:flex; align-items:center; justify-content:center; gap:9px;}
.stat .sv svg{width:24px; height:24px; color:var(--amber);}
.stat .sl{margin-top:9px; font-size:12px; letter-spacing:0.14em; color:var(--bone-faint); text-transform:uppercase;}

/* feature cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1px; background:var(--ash-700); border:1px solid var(--ash-700); perspective:1400px;}
.card{position:relative; background:var(--ash-900); padding:32px 28px; transform-style:preserve-3d; transition:background .25s; overflow:hidden;}
.card:hover{background:var(--ash-850);}
.card .glare{position:absolute; inset:0; background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%), rgba(255,220,150,0.1), transparent 55%); opacity:0; transition:opacity .3s; pointer-events:none;}
.card:hover .glare{opacity:1;}
.card > *{position:relative; transform:translateZ(26px);}
.card .cnum{font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.2em; color:var(--bone-faint);}
.seal-ico{width:52px; height:52px; display:grid; place-items:center; color:var(--amber); background:radial-gradient(circle at 50% 30%, rgba(232,162,60,0.18), rgba(20,16,11,0.3)); border:1px solid var(--ash-600); box-shadow:inset 0 0 20px rgba(232,162,60,0.12); margin:14px 0 18px; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.seal-ico svg{width:27px; height:27px;}
.card h3{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:19px; letter-spacing:0.01em; margin:0 0 9px; color:var(--bone);}
.card p{margin:0; font-size:15.5px; color:var(--bone-dim); line-height:1.65;}

/* plaque */
.plaque{position:relative; max-width:880px; margin:40px auto 0; background:var(--ash-900); border:1px solid var(--ash-700); padding:26px 30px;}
.plaque::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,transparent,var(--amber),transparent);}
.plaque-row{display:flex; flex-wrap:wrap; gap:24px 46px; align-items:center;}
.plaque-item{display:flex; flex-direction:column; gap:4px;}
.plaque-item .lbl{font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bone-faint);}
.plaque-item .val{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--bone); text-transform:uppercase;}
.plaque-item .val .ph{color:var(--amber-bright); text-transform:none;}

/* lore band */
.lore{position:relative; overflow:hidden; border-top:1px solid var(--ash-800); border-bottom:1px solid var(--ash-800);}
.lore-bg{position:absolute; inset:-15% 0; z-index:0; opacity:0.9;}
.lore-bg svg{width:100%; height:100%;}
.lore::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--bg) 0%, rgba(13,11,7,0.35) 42%, var(--bg) 100%);}
.lore-inner{position:relative; z-index:2; text-align:center; max-width:820px; margin:0 auto; padding:120px 24px;}
.lore blockquote{font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3.8vw,42px); line-height:1.3; color:var(--bone); margin:0 0 16px; text-transform:uppercase; letter-spacing:0.01em;}
.lore blockquote .em{color:var(--amber);}
.lore cite{font-style:normal; color:var(--bone-faint); font-size:13px; letter-spacing:0.18em; text-transform:uppercase;}

/* steps */
.steps{display:grid; gap:1px; max-width:820px; margin:0 auto; background:var(--ash-700); border:1px solid var(--ash-700);}
.step{display:flex; gap:20px; align-items:flex-start; background:var(--ash-900); padding:24px 26px; transition:background .25s;}
.step:hover{background:var(--ash-850);}
.step .num{flex:none; width:44px; height:44px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:19px; color:#2a1707; background:linear-gradient(180deg,var(--amber-bright),var(--amber)); box-shadow:0 0 18px var(--glow); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.step h3{font-family:var(--font-display); font-weight:700; text-transform:uppercase; margin:5px 0 6px; font-size:18px; color:var(--bone);}
.step p{margin:0; font-size:15.5px; color:var(--bone-dim);}
.step code{background:var(--ash-950); border:1px solid var(--ash-600); padding:2px 9px; font-size:14px; color:var(--amber-bright); font-family:ui-monospace,"Cascadia Code",Consolas,monospace;}
.center-cta{display:flex; justify-content:center; margin-top:44px;}

/* ---------------- Legal ---------------- */
.legal{max-width:var(--readw); margin:0 auto; padding:130px 24px 30px;}
.legal .crumb{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:22px;}
.legal .crumb a{color:var(--bone-dim);}
.legal h1{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(34px,6vw,52px); line-height:1.02; margin:0 0 8px; color:var(--bone);}
.legal .updated{color:var(--bone-faint); font-size:14px; margin:0 0 32px;}
.legal h2{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:22px; margin:42px 0 12px; padding-top:18px; border-top:1px solid var(--ash-800); color:var(--bone); letter-spacing:0.01em;}
.legal h2 .n{color:var(--amber); font-family:var(--font-sans); font-weight:700; font-size:15px; margin-right:10px;}
.legal h3{font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:17px; margin:24px 0 8px; color:var(--bone);}
.legal p,.legal li{color:var(--bone-dim);}
.legal ul{padding-left:22px;} .legal li{margin:7px 0;}
.legal strong{color:var(--bone); font-weight:600;}
.toc{background:var(--ash-900); border:1px solid var(--ash-700); padding:22px 26px; margin-bottom:26px;}
.toc-title{font-family:var(--font-display); font-weight:700; text-transform:uppercase; color:var(--bone); margin-bottom:10px; font-size:16px;}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:30px;}
.toc a{color:var(--bone-dim);} .toc a:hover{color:var(--amber-bright);}
.placeholder{color:var(--amber-bright); border-bottom:1px dashed var(--amber-700);}

/* ---------------- Footer ---------------- */
.site-footer{border-top:1px solid var(--ash-800); padding:44px 24px; color:var(--bone-faint); font-size:13px; letter-spacing:0.04em; background:var(--ash-900);}
.footer-inner{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a{color:var(--bone-dim); text-transform:uppercase; font-weight:600; font-size:12px; letter-spacing:0.08em;}
.footer-links a:hover{color:var(--amber-bright);}
.footer-brand{display:inline-flex; align-items:center; gap:10px; color:var(--bone); font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;}
.footer-brand .seal{width:24px; height:24px;}

/* ---------------- reveal ---------------- */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1 !important; transform:none !important; transition:none;}
  .scroll-cue svg,.badge .dot{animation:none !important;}
}

/* ---------------- responsive ---------------- */
@media (max-width:860px){ .stats{grid-template-columns:repeat(2,1fr);} .stat:nth-child(2){border-right:none;} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--ash-700);} }
@media (max-width:720px){
  section.block{padding:64px 0;}
  .toc ol{columns:1;}
  .hero-inner{padding:110px 24px 80px;}
  .nav{gap:8px; padding:12px 18px;}
  .nav-links a{padding:6px 8px; font-size:11.5px; letter-spacing:0.05em;}
  .cursor-glow{display:none;}
  .meta-row{flex-direction:column; width:100%;}
  .meta-row .m{border-right:none; border-bottom:1px solid var(--ash-700); justify-content:center;}
  .meta-row .m:last-child{border-bottom:none;}
}