/* Layout: night-sky hero with castle silhouette, then halls, latest tales, keeper, signup. Single committed dark look. */
:root{
  --bg:#0b0f1e;
  --bg-deep:#070a17;
  --panel:#121832;
  --panel-2:#171f42;
  --line:#2a3156;
  --fg:#e9e4d6;
  --fg-head:#f3ecd8;
  --muted:#a9aec6;
  --soft:#c3c6d8;
  --gold:#e9a93b;
  --gold-hi:#f5c56e;
  --teal:#7cc4b8;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Alegreya Sans',Georgia,system-ui,sans-serif;
  --caps:'IM Fell English SC',Georgia,'Times New Roman',serif;
  --fell:'IM Fell English',Georgia,'Times New Roman',serif;
  --gutter:clamp(16px,4vw,56px);
  --grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --grain-ink:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grain),var(--bg);color:var(--fg);font-family:var(--body);font-size:19px;line-height:1.55;padding-inline:0;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hi)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1200px;margin-inline:auto}
.pad{padding-inline:var(--gutter)}
.eyebrow{font-family:var(--caps);font-size:17px;letter-spacing:.18em;font-variant-caps:small-caps;color:var(--teal)}
.display{font-family:var(--display);font-weight:700;color:var(--fg-head);line-height:1.1}

/* hero */
.hero{position:relative;background:var(--grain),linear-gradient(180deg,#070a17 0%,#0e1530 50%,#1a2142 82%,#0b0f1e 100%);overflow:hidden}
.hero svg.scene{position:absolute;top:0;right:0;width:max(100%,900px);height:auto;pointer-events:none}
.hero svg.castle{display:block;position:relative;z-index:1;width:min(100%,1200px);height:auto;margin:8px auto 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.nav{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px;padding-block:28px}
.nav .links{flex:1 1 100%;justify-content:center;gap:4px 22px;font-size:16px}
@media (max-width:1180px){.nav .links{font-size:15px;gap:0 18px}}
@media (max-width:600px){.nav .links{gap:0 14px}}
@media (max-width:760px){.hero svg.scene .moon{opacity:.28}}
.brand{display:flex;align-items:center;gap:14px;color:var(--fg)}
.brand span{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.02em}
.links{display:flex;flex-wrap:wrap;gap:8px 32px;font-size:17px;font-weight:500}
.links a{color:#c9c6bb;min-height:44px;display:inline-flex;align-items:center}
.links a:hover{color:var(--gold-hi)}
.hero-copy{position:relative;z-index:2;max-width:1000px;margin-inline:auto;text-align:center;padding:40px var(--gutter) 16px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(42px,6vw,80px);line-height:1.02;letter-spacing:-.01em;color:var(--fg-head);margin-top:0}
.hero p.lead{margin:32px auto 0;max-width:640px;font-size:22px;color:var(--soft)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;border-radius:4px;font-family:var(--body);font-size:18px;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--bg);font-weight:700;border:0}
.btn-gold:hover{background:var(--gold-hi);color:var(--bg)}
.btn-ghost{border:1.5px solid #5a6190;color:var(--fg);font-weight:500}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}

/* sections */
.section{padding-block:96px}
.section-head{text-align:center;max-width:680px;margin:0 auto 56px;display:flex;flex-direction:column;gap:16px;align-items:center}
.section-head h2{font-size:clamp(34px,5vw,56px)}
.section-head p{color:var(--muted)}
.grid{display:flex;flex-wrap:wrap;gap:24px}
.card{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:32px 28px;color:var(--fg);transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-6px);border-color:var(--gold);color:var(--fg)}
.card h3{font-family:var(--display);font-size:30px;font-weight:700;color:var(--fg-head);line-height:1.15}
.card p{color:var(--muted);font-size:18px}
.card .go{margin-top:auto;color:var(--gold);font-weight:700;font-size:17px}
.hall{flex:1 1 300px}
.post{flex:1 1 300px;min-height:280px;background:linear-gradient(160deg,var(--panel-2),var(--panel));padding:36px 30px;gap:14px}
.post h3{font-size:32px}
.tag{font-family:var(--caps);font-size:16px;letter-spacing:.14em;font-variant-caps:small-caps;color:var(--teal)}
.row-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:40px}
.row-head h2{font-size:clamp(32px,4.6vw,52px);margin-top:12px}

/* keeper */
.keeper{background:var(--grain),#101630;border-block:1px solid #232a50}
.keeper-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px;max-width:1000px;margin-inline:auto}
.crest{width:220px;height:220px;max-width:100%;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#232c58,#0e1330);box-shadow:0 0 0 10px #101630,0 0 0 11px var(--line);flex:0 0 auto}
.crest span{font-family:var(--display);font-size:84px;font-weight:700;color:var(--gold);letter-spacing:.04em}
.keeper-text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.keeper-text h2{font-size:clamp(32px,4vw,46px)}

/* join */
.join{background:var(--grain),linear-gradient(180deg,var(--bg),var(--panel));text-align:center}
.join-in{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.join h2{font-size:clamp(36px,5vw,56px)}
.join p.sub{color:var(--soft);font-size:21px;margin-bottom:20px}
form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}
input[type=email]{flex:1 1 280px;min-width:0;min-height:52px;padding:0 20px;background:var(--bg);border:1.5px solid #3a4272;border-radius:4px;color:var(--fg-head);font-family:var(--body);font-size:18px}
input::placeholder{color:#8f94ad}
#msg{width:100%;min-height:1.5em;color:var(--teal);font-size:17px}

.proclaim{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;gap:24px;text-align:center;align-items:center}
.proclaim p{font-size:22px;color:var(--soft);line-height:1.65}
.proclaim p.first{font-family:var(--display);font-size:clamp(26px,3.4vw,36px);line-height:1.25;color:var(--fg-head);font-weight:600}

[hidden]{display:none!important}
.hero-desc{margin:28px auto 0;max-width:680px;font-size:22px;color:var(--soft)}
#hero-eyebrow{margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-tag{border:1px solid var(--line);background:var(--panel);color:var(--soft);border-radius:999px;padding:6px 16px;font-size:16px}
a.chip{border:1px solid #5a6190;color:var(--fg);border-radius:999px;padding:10px 22px;font-size:17px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;transition:border-color .15s ease,color .15s ease}
a.chip:hover{border-color:var(--gold);color:var(--gold-hi)}

.archive-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.arow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;padding:22px 4px;border-bottom:1px solid var(--line);color:var(--fg)}
.arow:hover .atitle{color:var(--gold-hi)}
.adate{font-family:var(--caps);font-size:16px;letter-spacing:.12em;font-variant-caps:small-caps;color:var(--muted);min-width:110px}
.atitle{font-family:var(--display);font-size:28px;font-weight:700;color:var(--fg-head);flex:1 1 320px;min-width:0;line-height:1.2}

/* footer */
footer{background:var(--grain),var(--bg-deep);border-top:1px solid #1d2345;padding-block:40px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.foot .name{font-family:var(--display);font-weight:700;font-size:22px}
.foot .links{font-size:16px;justify-content:center;gap:4px 20px}
.foot{flex-direction:column;align-items:center;text-align:center}
.foot small{color:#8f94ad;font-size:15px}


.unroll{overflow:hidden}
.unroll.pre{max-height:0}
.unroll.rolling{transition:max-height 2.2s cubic-bezier(.45,.05,.25,1)}
.unroll.pre .parchment{opacity:.0}
.unroll .parchment{transition:opacity 1.2s ease .3s}
.btn-seal{background:radial-gradient(circle at 35% 30%,#b02a2a,#8f1d1d 60%,#5a0d0d);color:#f3e2b0;border:2px solid #5a0d0d;font-family:var(--caps);font-size:20px;letter-spacing:.14em;font-variant-caps:small-caps;box-shadow:0 4px 8px rgba(40,10,0,.45),inset 0 1px 0 rgba(255,210,190,.35)}
.btn-seal:hover{color:#fff3cf;filter:brightness(1.12)}
@media (prefers-reduced-motion:reduce){.unroll.rolling,.unroll .parchment{transition:none}}

/* medieval touches */
.sword-div{display:flex;align-items:center;gap:14px;color:var(--gold);width:100%;max-width:520px;margin-inline:auto}
.sword-div i{flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor);opacity:.6}
.sword-div i:last-child{background:linear-gradient(270deg,transparent,currentColor)}
.sword-div svg{flex:0 0 auto;max-width:50%;height:auto}
.sword-div.ink{color:#8a6a35}

.scroll{max-width:820px;margin-inline:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.rod{position:relative;z-index:1;height:18px;border-radius:9px;background:linear-gradient(180deg,#9a6a35 0%,#5e3a18 55%,#3a220d 100%);box-shadow:inset 0 2px 0 rgba(255,225,170,.35)}
.rod::before,.rod::after{content:"";position:absolute;top:-5px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b27d42,#4a2c10 70%)}
.rod::before{left:-10px}.rod::after{right:-10px}
.parchment{margin-inline:16px;padding:48px clamp(24px,6vw,76px) 52px;display:flex;flex-direction:column;gap:22px;background:var(--grain-ink),radial-gradient(ellipse at 50% 40%,#f1e2bd 0%,#e7d3a0 62%,#d2b87c 100%);box-shadow:inset 0 0 70px rgba(120,80,30,.5);color:#3a2918}
.parchment p{font-family:var(--fell);font-size:clamp(19px,2.2vw,22px);line-height:1.65;color:#3a2918;text-align:left}
.parchment p.first{font-size:clamp(23px,3vw,31px);line-height:1.3;color:#2a1a0c}
.parchment p.first::first-letter{font-family:'UnifrakturCook','IM Fell English',Georgia,serif;float:left;font-size:3.2em;line-height:.82;padding:4px 12px 0 0;color:#8f1d1d;text-shadow:1px 1px 0 rgba(201,150,50,.6)}

.hall{background:radial-gradient(circle at 16% 0%,var(--tint-a),transparent 58%),var(--panel)}
.hall .crest-shield{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.hall,.post{outline:1px solid rgba(233,169,59,.22);outline-offset:-7px}
a.card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.banner{display:none;position:absolute;top:0;width:78px;height:auto;z-index:1;transform-origin:50% 0;animation:sway 7s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));pointer-events:none}
.banner-l{left:28px}.banner-r{right:28px;animation-delay:-3.5s}
@media (min-width:1360px){.banner{display:block}}

.seal{filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));margin-bottom:4px}
#halls{background:linear-gradient(180deg,transparent,rgba(22,30,68,.6) 35%,transparent)}

@keyframes flicker{0%,100%{opacity:.85}25%{opacity:1}50%{opacity:.7}75%{opacity:.95}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.castle .flick{animation:flicker 2.8s ease-in-out infinite}
.castle .flick.f2{animation-duration:3.4s;animation-delay:-1s}
.castle .flick.f3{animation-duration:2.4s;animation-delay:-2s}
.castle .win{animation:flicker 6s ease-in-out infinite}
.scene .tw1{animation:twinkle 5s ease-in-out infinite}
.scene .tw2{animation:twinkle 7s ease-in-out infinite;animation-delay:-3s}

@media (prefers-reduced-motion:reduce){.btn,.card{transition:none}.btn:hover,.card:hover{transform:none}.banner,.castle .flick,.castle .win,.scene .tw1,.scene .tw2{animation:none!important}}

/* multi-page additions */
.hero-sm .hero-copy{padding:20px var(--gutter) 72px}
.hero-sm h1{font-size:clamp(36px,5.2vw,64px)}
.hall-crest{display:flex;justify-content:center;margin-bottom:18px}
.hero-sm .back{margin-top:30px}
.hero-sm .byline{margin-top:22px;color:var(--muted);font-size:18px}
.hero-sm .byline a{color:var(--teal)}
.post-wrap{max-width:760px;margin-inline:auto}
.post-body{font-size:21px;line-height:1.75;color:var(--soft)}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 1.25em}
.post-body h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,42px);line-height:1.12;color:var(--fg-head);margin:2em 0 .55em}
.post-body h3{font-family:var(--display);font-weight:700;font-size:clamp(25px,2.8vw,32px);line-height:1.15;color:var(--fg-head);margin:1.7em 0 .5em}
.post-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.post-body strong{color:var(--fg-head)}
.post-body ul,.post-body ol{margin:0 0 1.25em;padding-left:1.4em}
.post-body li{margin:.35em 0}
.post-body blockquote{margin:1.6em 0;padding:.2em 0 .2em 24px;border-left:3px solid var(--gold);color:var(--fg);font-family:var(--display);font-size:1.18em;line-height:1.5}
.post-body hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
.post-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.1em .4em;color:var(--fg)}
.post-body pre{overflow-x:auto;background:var(--bg-deep);border:1px solid var(--line);border-radius:6px;padding:18px 20px;margin:0 0 1.4em}
.post-body pre code{background:none;border:0;padding:0;font-size:.85em}
.post-body table{border-collapse:collapse;width:100%;margin:0 0 1.4em;font-size:.92em;display:block;overflow-x:auto}
.post-body th,.post-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.post-body th{background:var(--panel);color:var(--fg-head)}
.post-body img{display:block;margin:1.6em auto;border-radius:6px}
.post-figure{max-width:1000px;margin:0 auto 56px}
.post-figure img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.empty{color:var(--muted);font-size:20px;padding:12px 0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;color:var(--muted);font-size:17px}
.crumbs a{color:var(--teal)}
.card.post .meta{color:var(--muted);font-size:16px}
.hero .castle-img{display:block;position:relative;z-index:1;width:min(100%,1100px);height:auto;margin:12px auto 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);
  mask-composite:intersect}
.thanks{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center}

.card.post{overflow:hidden;max-width:420px}
.card.post .card-img{display:block;width:calc(100% + 56px);max-width:none;margin:-32px -28px 0;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.read-next .grid{justify-content:center}