@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f4f3ed;--ink:#20221f;--muted:#74766d;--line:#d8d9cf;--lime:#d3f882}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #639226;outline-offset:5px}.skip{position:fixed;top:-80px;background:var(--lime);padding:15px;z-index:10}.skip:focus{top:0}header{background:#20221f;color:#f7f8ef;min-height:90px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;gap:35px;position:relative;z-index:5}.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:25px;letter-spacing:-1.3px;white-space:nowrap}.brand span{color:var(--lime);margin-left:9px;font-size:32px}nav{display:flex;align-items:center;gap:24px;font-size:12px}nav>a{padding:12px 0;color:#c6c8bf}nav>a.active,nav>a:hover{color:var(--lime)}nav button{background:none;border:0;color:#c6c8bf;font-size:12px;padding:12px 0}.creator-link{border:1px solid #5d6056;border-radius:5px;padding:10px 14px}#menu-toggle{display:none}.dropdown{position:relative}.submenu{display:none;position:absolute;top:42px;left:-20px;width:160px;background:var(--ink);padding:12px;border:1px solid #555;border-radius:6px}.submenu a{display:block;padding:12px}.dropdown.open .submenu{display:block}.submenu a:hover{color:var(--lime)}main{max-width:1440px;margin:auto;padding:0 6%}.eyebrow{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px}.dot{width:7px;height:7px;border-radius:50%;background:#729844}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;padding:76px 0 68px;align-items:center}.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(60px,6.9vw,100px);line-height:1.02;letter-spacing:-6px;margin:25px 0}.hero h1 em{font-style:normal;color:#7c8868}.lead{font-size:16px;line-height:1.8;color:#6b6f63;max-width:390px}.actions{display:flex;align-items:center;gap:28px;margin-top:30px;font-size:12px;font-weight:600}.primary{display:inline-flex;gap:30px;background:var(--ink);color:#fff;padding:17px 21px;border-radius:4px}.primary:hover{background:#424b36}.collage-wrap{position:relative;transform:rotate(2deg);padding:18px 18px 45px;background:#e6e8db;border:1px solid #d2d6c6;box-shadow:0 14px 40px #313b1610}.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.collage img{width:100%;display:block;aspect-ratio:1;object-fit:cover}.collage-caption{display:flex;justify-content:space-between;padding-top:16px;font-family:monospace;font-size:10px;color:#636958}.sticker{position:absolute;background:var(--lime);right:-23px;bottom:10px;width:93px;height:93px;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:14px;line-height:1.2;transform:rotate(12deg);border:1px solid #a6bd77}.indexbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:19px 0;font-family:monospace;font-size:10px;letter-spacing:1px;color:#777d6d}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:51px 0 25px}.section-heading h2{font-family:'Space Grotesk',sans-serif;font-size:35px;font-weight:500;letter-spacing:-1.5px;margin:0}.section-heading p{font-size:12px;color:var(--muted);margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;padding-bottom:58px}.card{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fafaf6;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 10px 24px #27311210}.card-art{height:176px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.card-art img{height:137px;width:137px;object-fit:cover;transform:rotate(-9deg);box-shadow:4px 6px 0 #0002;border:5px solid #fff}.card-art img+img{margin-left:-15px;transform:rotate(10deg)}.card-top{position:absolute;left:17px;top:15px;font-family:monospace;font-size:10px;color:#404936}.card-bottom{padding:22px}.card-title{display:flex;justify-content:space-between;align-items:center}.card-title h3{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:500;letter-spacing:-.7px;margin:0}.arrow{font-size:21px}.card-bottom p{font-size:12px;line-height:1.8;color:#797d70;min-height:43px;margin:10px 0 16px}.tag{font-family:monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#697059}.art-type{font-family:'Space Grotesk',sans-serif;font-size:70px;letter-spacing:-5px}.bars{display:flex;align-items:end;gap:11px;height:100px}.bars i{display:block;width:25px;background:#566c42;border-radius:3px 3px 0 0}.quote-band{border-top:1px solid var(--line);padding:40px 0 60px;display:flex;justify-content:space-between;align-items:center}.quote-band p{font-family:'Space Grotesk',sans-serif;font-size:28px;letter-spacing:-1px;margin:0}.quote-band span{font-family:monospace;font-size:10px;color:#7c806f}footer{background:#20221f;color:#c6c8bf;padding:40px 6%;display:flex;align-items:center;gap:60px;flex-wrap:wrap}footer p{font-size:11px;line-height:1.8}footer>a:not(.brand){font-size:12px;margin-left:auto}.footer-note{width:100%;border-top:1px solid #44483e;padding-top:22px;font-family:monospace;font-size:9px;color:#939988}.detail{padding:60px 0 100px;min-height:70vh;max-width:900px}.back{font-size:12px;color:#707965}.detail h1{font-family:'Space Grotesk',sans-serif;font-size:70px;letter-spacing:-4px;margin:32px 0 15px}.detail .intro{font-size:20px;line-height:1.6;color:#727966}.detail h2{font-family:'Space Grotesk',sans-serif;margin-top:35px}.detail p,.detail li{line-height:1.9}.detail-images{display:flex;gap:12px;margin:30px 0}.detail-images img{width:30%;border-radius:6px}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-weight:600}.editor-note{padding:16px;background:#e9eddf;border-radius:6px;font-size:13px}.detail-links{display:flex;gap:15px;flex-wrap:wrap;margin:30px 0}.detail-links a{border:1px solid var(--line);padding:16px 24px;border-radius:5px}.detail-links a:hover{background:var(--lime)}
@media(min-width:1500px){header{padding-inline:calc((100vw - 1300px)/2)}}@media(max-width:1150px){nav{gap:13px}header{padding:0 3%;gap:15px}.hero{gap:35px}.hero h1{letter-spacing:-4px}.sticker{right:-10px}}@media(max-width:940px){#menu-toggle{display:block;border:1px solid #555f4b;background:transparent;color:white;padding:10px 15px;border-radius:4px}header{min-height:74px;padding:0 6%}nav{display:none;position:absolute;top:74px;left:0;right:0;background:#20221f;padding:20px 6%;flex-direction:column;align-items:stretch;gap:5px}nav.open{display:flex}.submenu{position:static;width:100%;border:0}.hero{gap:30px;padding-top:50px}.hero h1{font-size:66px}.collage-wrap{padding:10px 10px 30px}.collage-caption{font-size:8px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){main{padding:0 6%}.hero{grid-template-columns:1fr;padding:38px 0 45px;gap:35px}.hero h1{font-size:67px;letter-spacing:-4px;margin:20px 0}.lead{font-size:14px}.collage-wrap{margin:0 10px}.collage img{max-height:160px}.sticker{width:77px;height:77px}.section-heading{display:block;margin-top:35px}.section-heading p{margin-top:12px}.section-heading h2{font-size:29px}.cards{grid-template-columns:1fr;gap:18px}.card-art{height:190px}.indexbar span:last-child{display:none}.quote-band{display:block}.quote-band p{font-size:23px;margin-bottom:16px}footer{gap:20px}footer>a:not(.brand){margin-left:0}.detail h1{font-size:48px;letter-spacing:-2px}.detail .intro{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Fantasy TCG cards — original artwork is displayed in full, without crops. */
.cards { align-items: start; }
.fantasy-card {
  --metal: #b59b63;
  --banner: #203b31;
  --banner-light: #3c5742;
  display: block;
  padding: 7px;
  border: 1px solid var(--metal);
  border-radius: 14px;
  color: #332b1e;
  background: linear-gradient(135deg, #15221e, #394236 45%, #111b18);
  box-shadow: 0 7px 18px #22261928;
  isolation: isolate;
}
.fantasy-creator { --banner: #45283d; --banner-light: #785068; }
.fantasy-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 17px 30px #22261935, 0 0 0 1px #cbb47b;
}
.tcg-rim {
  padding: 5px;
  border: 1px solid var(--metal);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(125deg, #f0e5c9, #c2ac7c 45%, #e4d6b2);
}
.tcg-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  padding: 3px 8px 7px;
  font: 9px 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 1.7px;
  color: #5e4c2c;
}
.tcg-heading > span:last-child { font-size: 19px; line-height: 1; }
.tcg-art {
  border: 1px solid #8f774d;
  border-bottom: 0;
  background: #1d2420;
  overflow: hidden;
}
.tcg-art img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2 / 3;
}
.tcg-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  margin: 0 -3px;
  border: 1px solid #b69a5b;
  border-top-color: #e1c889;
  color: #f4e5bd;
  background: linear-gradient(110deg, var(--banner), var(--banner-light), var(--banner));
  box-shadow: inset 0 0 0 3px #d8bb7220, 0 3px 5px #35251526;
}
.tcg-banner::before, .tcg-banner::after {
  content: '◆';
  position: absolute;
  bottom: -5px;
  font-size: 8px;
  color: #cbb37b;
}
.tcg-banner::before { left: 4px; }
.tcg-banner::after { right: 4px; }
.tcg-banner h3 {
  margin: 0;
  font: 600 clamp(21px, 2vw, 29px)/1.15 Georgia, serif;
  letter-spacing: -.6px;
  text-shadow: 0 2px 2px #0007;
}
.tcg-banner > span { font-size: 24px; }
.tcg-type {
  padding: 10px 12px;
  font: italic 12px/1.4 Georgia, serif;
  border-bottom: 1px solid #ab9365;
  color: #5c4b30;
}
.tcg-text {
  padding: 16px 13px 12px;
  background: radial-gradient(ellipse at top left, #fff8e5a0, transparent), #eee2c7;
  min-height: 168px;
}
.tcg-text strong { font: 600 15px/1.4 Georgia, serif; }
.tcg-text p { margin: 8px 0 13px; font: 14px/1.55 Georgia, serif; }
.tcg-text blockquote {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid #c3ae84;
  font: italic 12px/1.5 Georgia, serif;
  color: #6f5a3c;
}
.tcg-base {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 8px 5px;
  font: 8px/1.5 'DM Sans', sans-serif;
  letter-spacing: 1.2px;
  color: #58492e;
}
@media (max-width: 600px) {
  .fantasy-card { max-width: 390px; width: 100%; justify-self: center; }
  .tcg-banner h3 { font-size: 27px; }
}

/* Creator biography */
.creator-page { max-width: none; }
.creator-page h1 { margin-bottom: 12px; }
.creator-page > .intro { margin-bottom: 42px; }
.creator-layout { display: grid; grid-template-columns: minmax(0, 760px); gap: clamp(30px, 5vw, 72px); align-items: start; }
.creator-story { min-width: 0; font-size: 15px; }
.creator-story > p { margin: 0 0 24px; }
.creator-story a:not(.creator-profile) { text-decoration: underline; text-decoration-color: #a9b391; text-underline-offset: 4px; }
.creator-story a:hover { color: #53683c; }
.creator-reports { padding: 18px 24px 18px 42px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 8px; background: #eceee3; }
.creator-reports li { padding-left: 5px; }
.creator-profile { display: inline-flex; align-items: center; gap: 22px; margin: 3px 0 14px; }
.creator-profile > img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px #c4c8b6, 0 8px 24px #22261918; transition: box-shadow .2s; }
.creator-profile:hover > img { box-shadow: 0 0 0 3px #94aa75, 0 8px 24px #22261920; }
.creator-profile > span { display: flex; flex-direction: column; gap: 6px; }
.creator-profile strong { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 500; }
.creator-profile span span { font-size: 12px; color: #727963; }
@media (max-width: 760px) { .creator-layout { grid-template-columns: 1fr; gap: 35px; } .creator-profile > img { width: 110px; height: 110px; } }
@media (prefers-reduced-motion: reduce) { .creator-profile > img { transition: none; } }

/* Rarity guides and overview status */
.fantasy-creyzies { --banner: #35244f; --banner-light: #665080; }
.fantasy-mfers .tcg-banner h3, .fantasy-creyzies .tcg-banner h3 { font-size: clamp(20px, 1.8vw, 26px); }
.construction-notice { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 17px 21px; border: 1px solid #cbc9a9; border-radius: 7px; background: #eeefdc; color: #4b513b; }
.construction-icon { font-size: 27px; color: #6e7e43; }
.construction-notice strong { font: 600 13px 'DM Sans', sans-serif; }
.construction-notice p { margin: 5px 0 0; font-size: 12px; line-height: 1.65; }
@media (max-width: 600px) { .construction-notice { align-items: flex-start; padding: 15px; gap: 12px; } .fantasy-mfers .tcg-banner h3, .fantasy-creyzies .tcg-banner h3 { font-size: 24px; } }

/* Community projects */
.fantasy-community { --banner: #44301e; --banner-light: #77603b; }
.fantasy-community .tcg-banner h3 { font-size: clamp(20px, 1.9vw, 27px); }
.community-copy { max-width: 760px; font-size: 15px; }
.community-copy > h2 { margin-top: 34px; }
.community-copy > p { margin-bottom: 26px; }
.community-links { list-style: none; padding: 0; margin: 30px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.community-links li + li { border-top: 1px solid var(--line); }
.community-links a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; font-size: 14px; line-height: 1.6; background: #fafaf6; transition: background .2s; }
.community-links a:hover { background: #e5ecd8; }
.community-links a span { flex-shrink: 0; color: #6b7958; font-size: 20px; }
.community-note { border-left: 3px solid #9caa7c; background: #eaece1; padding: 20px 24px; margin: 30px 0; border-radius: 0 7px 7px 0; color: #58604e; font-size: 13px; }
.community-note p { margin: 0; }
.community-copy > p a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #9caa7c; }
/* Switch to the existing mobile navigation before the longer menu gets crowded. */
@media (min-width: 941px) and (max-width: 1250px) {
  #menu-toggle { display: block; border: 1px solid #555f4b; background: transparent; color: white; padding: 10px 15px; border-radius: 4px; }
  header { min-height: 74px; padding: 0 6%; }
  nav { display: none; position: absolute; top: 74px; left: 0; right: 0; background: #20221f; padding: 20px 6%; flex-direction: column; align-items: stretch; gap: 5px; }
  nav.open { display: flex; }
  .submenu { position: static; width: 100%; border: 0; }
}

/* Glossary: readable introduction and accessible three-column reference table. */
.glossary-page { max-width: none; }
.glossary-page h1 { max-width: 950px; font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -2px; line-height: 1.13; }
.glossary-introduction { max-width: 800px; margin: 30px 0 36px; font-size: 15px; }
.glossary-introduction a, .glossary-credits a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #9caa7c; }
.glossary-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.glossary-table { width: 100%; min-width: 650px; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: 13px; line-height: 1.75; }
.glossary-table caption { caption-side: top; text-align: left; padding: 18px 20px; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 500; background: #e8ecde; }
.glossary-table th, .glossary-table td { padding: 16px 20px; vertical-align: top; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.glossary-table thead { background: #27342a; color: #f3f1e7; }
.glossary-table thead th:nth-child(1) { width: 21%; }
.glossary-table thead th:nth-child(2) { width: 29%; }
.glossary-table thead th:nth-child(3) { width: 50%; }
.glossary-table tbody th { font-weight: 600; }
.glossary-table tbody td { color: #626858; }
.glossary-table tbody tr:nth-child(even) { background: #ebeee4; }
.glossary-table tbody tr:last-child > * { border-bottom: 0; }
.glossary-credits { padding-top: 20px; font-size: 13px; color: #6e765f; }
@media (max-width:600px) { .glossary-table th, .glossary-table td { padding: 13px; } .glossary-page h1 { letter-spacing: -1px; } }

.fantasy-glossary { --banner: #203746; --banner-light: #476778; }

.overview-about { padding: 34px 0 0; max-width: 900px; }
.overview-about h2 { font: 500 29px 'Space Grotesk', sans-serif; letter-spacing: -1px; margin: 0 0 16px; }
.overview-about p { font-size: 14px; line-height: 1.9; color: #69705f; margin: 0; }
.history-story { max-width: 780px; font-size: 15px; overflow-wrap: anywhere; }
.history-story p { margin: 0 0 24px; }
.history-story h2 { padding-top: 24px; border-top: 1px solid var(--line); margin: 42px 0 22px; font-size: 28px; letter-spacing: -.7px; }

.overview-about > p + p { margin-top: 18px; }
.overview-sections { padding-left: 20px; margin: 22px 0 26px; color: #69705f; font-size: 14px; line-height: 1.85; }
.overview-sections li { padding-left: 4px; margin-bottom: 10px; }
.overview-about a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #a8b48e; }
.overview-sections a { font-weight: 600; color: #35452e; }
.overview-about a:hover { color: #5d7a3d; }

.fantasy-history { --banner: #493322; --banner-light: #826142; }

.fantasy-derivatives { --banner: #4b243c; --banner-light: #7d4963; }
.derivatives-story { max-width: 800px; font-size: 15px; overflow-wrap: anywhere; }
.derivatives-story h2 { border-top: 1px solid var(--line); padding-top: 25px; margin: 42px 0 20px; }
.derivatives-story p { margin: 0 0 24px; }
.derivative-categories { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 28px 0 18px; }
.derivative-categories table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; line-height: 1.75; }
.derivative-categories caption { text-align: left; padding: 16px 20px; background: #e8ecde; font-family: 'Space Grotesk', sans-serif; font-size: 15px; }
.derivative-categories thead { background: #27342a; color: #f3f1e7; }
.derivative-categories th, .derivative-categories td { padding: 15px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.derivative-categories tbody th { width: 24%; font-weight: 600; }
.derivative-categories tbody tr:nth-child(even) { background: #ebeee4; }
.derivative-categories tbody tr:last-child > * { border-bottom: 0; }
@media (max-width:600px) { .derivative-categories th, .derivative-categories td { padding: 12px; } }

.fantasy-data { --banner: #183c46; --banner-light: #3b6c77; }