@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin.d80df8ff5a.woff2") format("woff2");font-style:normal;font-weight:300 700;font-display:swap}

body.fable{
  color-scheme:light;
  --paper:#c9ac6d;
  --paper-rgb:201,172,109;
  --surface:#ead6a2;
  --surface-2:#dfc58b;
  --ink:#2d2014;
  --muted:#58432a;
  --faint:#6b4d27;
  --line:#9a7132;
  --line-bright:#76501f;
  --accent:#28512f;
  --accent-action:#234b2b;
  --on-accent:#fff8e4;
  --gold:#b67a23;
  --red:#7d331f;
  --shadow:0 30px 80px rgba(49,28,10,.3);
  background:#b9985b;
  color:#2d2014;
  font-family:Georgia,"Times New Roman",serif;
}
body.fable::before{background:radial-gradient(circle at 20% 10%,rgba(255,244,199,.5),transparent 32%),radial-gradient(circle at 83% 54%,rgba(85,53,18,.18) 0 1px,transparent 2px),linear-gradient(90deg,rgba(84,48,13,.07),transparent 10%,transparent 90%,rgba(84,48,13,.08));background-size:auto,9px 9px,auto;mask-image:none}
body.fable::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(71,38,10,.2),transparent 6%,transparent 94%,rgba(71,38,10,.2)),radial-gradient(ellipse at center,transparent 65%,rgba(67,38,11,.22))}
.fable ::selection{background:#28512f;color:#fff8e4}
.fable h1,.fable h2,.fable h3,.fable h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:-.035em}
.fable a{color:#204828}
.fable .site-header{background:rgba(224,199,143,.92);border-color:#95703a;box-shadow:0 6px 18px rgba(65,38,13,.13)}
.fable .nav-link{color:#5c442b}.fable .nav-link:hover,.fable .nav-link[aria-current="page"]{color:#24190f}
.fable .site-footer{--muted:#49331e;--faint:#513719;background:#c5a767;border-color:#8e6429}
.fable .footer-col a{color:#4f3922}.fable .footer-col a:hover{color:#1e4426}
.fable .btn{border:1px solid #63451f;color:#2d2014;background:rgba(244,225,177,.3);font-family:var(--mono);text-shadow:none}
.fable .btn:hover{border-color:#28512f;background:rgba(244,225,177,.65)}
.fable .btn--primary{border-color:#234b2b;background:#234b2b;color:#fff8e4}

.fable-main{padding:clamp(18px,3vw,40px) 0 70px}
.storybook{position:relative;width:min(calc(100% - (2 * clamp(8px,2vw,24px))),1480px);margin:auto;padding:clamp(8px,1.5vw,22px);border:1px solid #76501f;background:linear-gradient(90deg,#9c773e,#d4b777 3%,#d4b777 97%,#936b32);box-shadow:0 35px 100px rgba(53,31,8,.42)}
.storybook::before,.storybook::after{content:"✦";position:absolute;z-index:5;display:grid;place-items:center;width:54px;height:54px;border:1px solid #815922;background:#d8bd7c;color:#714617;font-size:22px;transform:rotate(45deg)}
.storybook::before{left:-11px;top:-11px}.storybook::after{right:-11px;top:-11px}
.storybook-inner{position:relative;border:3px double #8c6226;background:#dec486;overflow:hidden}
.storybook-inner::before{content:"";position:absolute;inset:10px;z-index:4;border:1px solid rgba(117,76,24,.55);pointer-events:none}
.fable-hero{position:relative;min-height:min(760px,82svh);display:grid;align-items:end;isolation:isolate;overflow:hidden}
.fable-hero__art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.88) sepia(.08)}
.fable-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(35,22,10,.88),rgba(35,22,10,.12) 60%,rgba(54,35,13,.08)),linear-gradient(90deg,rgba(37,23,9,.5),transparent 55%)}
.fable-hero__copy{max-width:930px;padding:clamp(60px,9vw,130px);color:#fff4d6;text-shadow:0 2px 8px rgba(33,18,6,.7)}
.chapter-kicker{display:flex;align-items:center;gap:12px;color:#f1c86b;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.chapter-kicker::before,.chapter-kicker::after{content:"◆";font-size:7px}
.fable-title{margin:10px 0 18px;font-size:clamp(4.8rem,13vw,13rem);font-weight:600;line-height:.72;letter-spacing:-.065em}
.fable-title small{display:block;margin:18px 0 0 7px;color:#e6c77f;font:600 clamp(11px,1.3vw,16px)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.fable-hero__copy p{max-width:700px;color:#f7e6bd;font-size:clamp(1.03rem,1.5vw,1.28rem);text-wrap:balance}
.fable-hero__copy .button-row{margin-top:26px;text-shadow:none}
.fable-hero__copy .btn:not(.btn--primary){color:#fff4d6;border-color:#d8ad58;background:rgba(36,24,12,.35)}

.storybook-content{position:relative;padding:0 clamp(24px,6vw,92px)}
.fable-chapter{position:relative;padding:clamp(78px,10vw,145px) 0;border-top:1px solid #9b7438}
.fable-chapter::before{content:"";position:absolute;left:50%;top:-7px;width:13px;height:13px;background:#dec486;border:1px solid #90652b;transform:translateX(-50%) rotate(45deg)}
.chapter-heading{text-align:center;max-width:900px;margin:0 auto clamp(44px,7vw,84px)}
.chapter-heading .chapter-num{color:#684414;font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.chapter-heading h2{margin:14px 0;font-size:clamp(3rem,7vw,7.5rem);line-height:.86;color:#352315}
.chapter-heading p{margin-inline:auto;color:#5b4328;font-size:1.08rem}
.illuminated{font-size:clamp(1.08rem,1.4vw,1.28rem);color:#49341f}
.illuminated::first-letter{float:left;margin:.02em .13em 0 0;padding:.04em .12em .08em;border:2px double #97651f;background:#c6983f;color:#6e261b;font-family:"Cormorant Garamond",serif;font-size:4.5em;line-height:.72;text-shadow:0 1px #f5daa0}

.fable-stats{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #8f6429;background:rgba(238,216,160,.48)}
.fable-stat{min-height:125px;padding:20px 14px;border-right:1px solid #9b7438;border-bottom:1px solid #9b7438;text-align:center}
.fable-stat:nth-child(5n){border-right:0}.fable-stat:nth-child(n+6){border-bottom:0}
.fable-stat strong{display:block;font:600 clamp(1.7rem,3.5vw,3.6rem)/1 "Cormorant Garamond",serif;color:#28512f}
.fable-stat span{display:block;margin-top:8px;color:#674b2c;font:600 8px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}

.tale-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tale-card{grid-column:span 4;position:relative;min-height:330px;padding:30px;border:4px double #93682c;background:linear-gradient(145deg,rgba(246,228,180,.74),rgba(215,185,121,.65));box-shadow:inset 0 0 28px rgba(96,59,20,.12)}
.tale-card:nth-child(1),.tale-card:nth-child(4){grid-column:span 6}
.tale-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(139,92,31,.36);pointer-events:none}
.tale-card .rune{font:600 9px/1 var(--mono);color:#684414;letter-spacing:.1em;text-transform:uppercase}
.tale-card h3{margin:64px 0 14px;font-size:clamp(1.8rem,3vw,3.1rem);color:#372517}.tale-card p{color:#5b4328}
.pixel-rule{height:14px;margin:clamp(45px,7vw,85px) auto;background:linear-gradient(90deg,transparent 0 7%,#805820 7% 9%,transparent 9% 12%,#b88732 12% 88%,transparent 88% 91%,#805820 91% 93%,transparent 93%);clip-path:polygon(0 40%,7% 40%,7% 20%,9% 20%,9% 0,12% 0,12% 35%,88% 35%,88% 0,91% 0,91% 20%,93% 20%,93% 40%,100% 40%,100% 60%,93% 60%,93% 80%,91% 80%,91% 100%,88% 100%,88% 65%,12% 65%,12% 100%,9% 100%,9% 80%,7% 80%,7% 60%,0 60%)}

.fable-gallery{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:repeat(2,minmax(260px,36vw));gap:14px}
.fable-gallery figure{position:relative;margin:0;border:4px double #845b25;background:#2b1d10;overflow:hidden;cursor:zoom-in}
.fable-gallery figure:first-child{grid-row:1/3}
.fable-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .65s,filter .45s;filter:saturate(.88) sepia(.07)}
.fable-gallery figure:hover img{transform:scale(1.03);filter:saturate(1)}
.fable-gallery figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 14px;border:1px solid #b88a43;background:rgba(42,27,13,.88);color:#f5dfaa;font:600 9px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.gallery-trigger{position:absolute;inset:0;border:0;background:transparent;cursor:zoom-in}
.gallery-trigger:focus-visible{outline:3px solid #f0c35d;outline-offset:-6px}

.fable-dialog{width:min(92vw,1200px);max-height:90vh;padding:10px;border:4px double #a9792e;background:#2c1c0d;box-shadow:0 30px 90px #201306;color:#fff0c7}
.fable-dialog::backdrop{background:rgba(25,14,5,.86);backdrop-filter:blur(4px)}
.fable-dialog img{width:100%;max-height:76vh;object-fit:contain;background:#160e07}
.fable-dialog__bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 6px 2px;color:#e8cc89;font:600 9px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.fable-dialog button{min-width:42px;height:38px;border:1px solid #b88a43;background:#402b15;color:#fff0c7;cursor:pointer}
.dialog-controls{display:flex;gap:7px}

.parchment-install{display:grid;grid-template-columns:minmax(0,.7fr) minmax(300px,.3fr);gap:clamp(28px,6vw,80px);align-items:start}
.scroll-steps{counter-reset:chapter-step;border-top:1px solid #956a31}
.scroll-step{counter-increment:chapter-step;display:grid;grid-template-columns:68px 1fr;gap:20px;padding:27px 0;border-bottom:1px solid #a27b43}
.scroll-step::before{content:counter(chapter-step,upper-roman);display:grid;place-items:center;width:44px;height:44px;border:3px double #8c5d24;background:#d0a95a;color:#4b2e16;font-family:"Cormorant Garamond",serif;font-size:1.25rem;font-weight:700}
.scroll-step h3{margin:0 0 8px;font-size:1.45rem}.scroll-step p{margin:0;color:#5a4128}
.requirements-scroll{position:sticky;top:calc(var(--header) + 30px);padding:30px;border:4px double #8b6028;background:rgba(239,216,161,.72);box-shadow:inset 0 0 25px rgba(87,52,16,.12)}
.requirements-scroll .chapter-kicker{color:#684414}
.requirements-scroll h3{font-size:2rem}.requirements-scroll ul{margin:0;padding-left:1.2em;color:#574025}.requirements-scroll li{margin:10px 0}
.requirements-scroll .btn{width:100%;margin-top:20px}
.fable-note{padding:24px;border:1px solid #966e36;background:rgba(233,207,148,.45);color:#594127}
.fable-note strong{display:block;margin-bottom:8px;color:#6c2f20;font-family:"Cormorant Garamond",serif;font-size:1.4rem}
.fable-attribution{margin-top:44px;padding-top:24px;border-top:1px solid #956b30;color:#654b2d;font-size:.82rem}
.skirmish-book{padding:clamp(18px,3vw,46px)}
.skirmish-heading{padding:clamp(44px,7vw,90px) clamp(20px,5vw,72px) 38px;text-align:center}
.skirmish-heading h1{margin:10px 0 20px;color:#302313;font-family:"Cormorant Garamond",serif;font-size:clamp(3.5rem,9vw,8.5rem);line-height:.82}
.skirmish-heading p{max-width:760px;margin:0 auto 28px;color:#665033;font-size:clamp(1rem,1.6vw,1.3rem)}
.skirmish-heading .button-row{justify-content:center}
.skirmish-frame{position:relative;overflow:hidden;border:10px solid #3c2b19;outline:1px solid #9d7f4f;background:#0a0c09;box-shadow:0 24px 70px rgba(32,20,8,.35)}
.skirmish-frame::before{content:"";display:block;padding-top:min(68%,760px)}
.skirmish-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#090b08}

@media(max-width:1000px){
  .fable-stats{grid-template-columns:repeat(2,1fr)}.fable-stat:nth-child(5n){border-right:1px solid #9b7438}.fable-stat:nth-child(even){border-right:0}.fable-stat:nth-child(n+6){border-bottom:1px solid #9b7438}.fable-stat:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
  .tale-card,.tale-card:nth-child(1),.tale-card:nth-child(4){grid-column:span 6}
  .parchment-install{grid-template-columns:1fr}.requirements-scroll{position:static}
}
@media(max-width:720px){
  .storybook{width:calc(100% - 8px);padding:5px}.storybook::before,.storybook::after{width:34px;height:34px;font-size:13px}.storybook::before{left:-5px;top:-5px}.storybook::after{right:-5px;top:-5px}
  .storybook-inner{border-width:2px}.storybook-inner::before{inset:5px}
  .fable-hero{min-height:660px}.fable-hero__copy{padding:70px 30px}.fable-title{font-size:clamp(4.2rem,22vw,7.5rem)}
  .storybook-content{padding-inline:24px}.illuminated::first-letter{font-size:3.7em}
  .tale-card,.tale-card:nth-child(1),.tale-card:nth-child(4){grid-column:1/-1;min-height:280px}.tale-card h3{margin-top:48px}
  .fable-gallery{grid-template-columns:1fr;grid-template-rows:repeat(3,310px)}.fable-gallery figure:first-child{grid-row:auto}
}
@media(max-width:420px){
  .fable-hero__copy{padding:70px 22px 54px}.fable-title{font-size:3.8rem}.chapter-heading h2{font-size:3.1rem}.storybook-content{padding-inline:18px}.illuminated::first-letter{float:none;display:inline-block;font-size:2.7em;line-height:.8;margin-right:.08em}.fable-stats{grid-template-columns:1fr}.fable-stat,.fable-stat:nth-child(5n),.fable-stat:nth-child(even){border-right:0;border-bottom:1px solid #9b7438}.fable-stat:last-child{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.fable-gallery img{transition:none}}