/* ============================================================
   The Darkwood Inn — flat-file rebuild
   Theme: "candlelit tavern at night"
   Display: IM Fell English SC  |  Body: EB Garamond
   ============================================================ */

@import url("../fonts/FantasyFonts.css");

/* ---------- Fonts (local, in assets/fonts) ---------- */
@font-face {
  font-family: "IM Fell English SC";
  src: url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/im-fell-english-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #14100b;  /* deepest background */
  --bark:       #201810;  /* wood panel */
  --bark-2:     #2b2016;  /* raised wood */
  --iron:       #3a3128;  /* wrought-iron lines / borders */
  --parchment:  #e9dcbf;  /* reading surface */
  --parchment-2:#f2e8d0;  /* raised parchment */
  --parch-line: #cdb98f;  /* rules on parchment */
  --read-ink:   #2c2216;  /* text on parchment */
  --read-dim:   #6b5a3f;  /* muted text on parchment */
  --lantern:    #e0a94e;  /* lantern gold — primary accent */
  --lantern-dim:#b9822f;  /* deeper gold */
  --ember:      #c56a2b;  /* ember orange — dividers */
  --oxblood:    #7e2a24;  /* wax seals / restricted / warning */
  --oxblood-2:  #9a3a2c;
  --eldritch:   #56a89b;  /* THE UNCANNY — reserved, used sparingly */
  --paper-glow: rgba(224,169,78,.10);

  --font-display: "IM Fell English SC", "EB Garamond", Georgia, serif;
  --font-fell:    "IM Fell English", "EB Garamond", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;

  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 3px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, .55rem + .7vw, 1.2rem);
  line-height: 1.7;
  color: #d9c7a4;
  background-color: var(--ink);
  background-image:
    radial-gradient(1200px 600px at 50% -8%, rgba(224,169,78,.10), transparent 60%),
    radial-gradient(900px 500px at 12% 8%,  rgba(197,106,43,.06), transparent 55%),
    radial-gradient(900px 600px at 90% 12%, rgba(86,168,155,.045), transparent 55%),
    linear-gradient(180deg, #17110b 0%, #120d09 40%, #0e0a06 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
/* faint grain over everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lantern); text-underline-offset: .18em; text-decoration-color: rgba(224,169,78,.4); }
a:hover { color: #f2c877; text-decoration-color: var(--lantern); }
:focus-visible { outline: 2px solid var(--lantern); outline-offset: 3px; border-radius: 2px; }

/* ---------- Layout scaffolding ---------- */
.wrap { position: relative; z-index: 1; }
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) 4rem;
}
.lede { max-width: var(--measure); }

/* ---------- Header / nav ("carved beam") ---------- */
.beam {
  position: sticky; top: 0; z-index: 50;
  background:
    linear-gradient(180deg, #2a1f15, #1c140d 70%, #140e09);
  border-bottom: 2px solid #0c0805;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(224,169,78,.08);
}
.beam__inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem var(--gutter);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(224,169,78,.35); }
.brand span {
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lantern); white-space: nowrap;
}
.nav { display: flex; gap: .25rem; align-items: center; }
.nav a {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .82rem; color: #cdb891; text-decoration: none;
  padding: .5rem .8rem; border-radius: var(--radius);
  position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .35rem;
  height: 1px; background: var(--lantern); transform: scaleX(0);
  transform-origin: left; transition: transform .28s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--lantern); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--lantern); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--iron);
  color: var(--lantern); border-radius: var(--radius);
  padding: .45rem .6rem; font-size: 1rem; cursor: pointer;
}

@media (max-width: 640px) {
  .brand span { font-size: 1rem; letter-spacing: .1em; }
  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; top: 100%; right: var(--gutter);
    flex-direction: column; gap: 0; align-items: stretch;
    background: #1c140d; border: 1px solid var(--iron);
    border-radius: var(--radius); padding: .35rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.55);
    display: none; min-width: 190px;
  }
  .nav.open { display: flex; }
  .nav a { padding: .7rem .9rem; }
  .nav a::after { display: none; }
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; color: #f0dcb0; }
.page > h1, .parchment h1 { letter-spacing: .04em; }
h1.title {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
  margin: 0 0 .3rem;
  color: var(--lantern);
  text-shadow: 0 2px 18px rgba(224,169,78,.18);
}

/* ---------- Breadcrumbs (engraved trail) ---------- */
.trail {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem;
  color: #a08a63; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem;
}
.trail a { color: #bfa572; text-decoration: none; }
.trail a:hover { color: var(--lantern); }
.trail .sep { color: var(--ember); }

/* ---------- Parchment reading panel ---------- */
.parchment {
  background:
    radial-gradient(120% 100% at 50% 0%, var(--parchment-2), var(--parchment) 55%, #e0d0ac 100%);
  color: var(--read-ink);
  border: 1px solid #b49a68;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 0 60px rgba(140,105,55,.12);
  padding: clamp(1.4rem, 3.5vw, 3rem);
  position: relative;
}
.parchment::after { /* worn edge vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius);
  box-shadow: inset 0 0 40px rgba(90,60,25,.18), inset 0 0 4px rgba(60,40,15,.4);
}
.parchment h1, .parchment h2, .parchment h3, .parchment h4 { color: #3a2c1a; }
.parchment a { color: #8a4a1c; text-decoration-color: rgba(138,74,28,.4); }
.parchment a:hover { color: var(--oxblood); text-decoration-color: var(--oxblood); }
.parchment p, .parchment li { color: var(--read-ink); }
.parchment .muted { color: #6b5a3f; }

/* section heading with wax-seal marker */
.seal-h {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.5rem; margin: 2.2rem 0 .9rem;
  padding-top: 1.4rem; border-top: 1px solid var(--parch-line);
}
.seal-h::before {
  content: ""; flex: 0 0 auto; width: 30px; height: 30px;
  background: no-repeat center/contain;
  background-image: url("../img/wax-seal.svg");
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.parchment > .seal-h:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; text-align: center;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}
.hero__windows { /* candlelit windows glow behind the sign */
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(220px 260px at 28% 62%, rgba(230,170,70,.28), transparent 70%),
    radial-gradient(220px 260px at 72% 62%, rgba(230,170,70,.24), transparent 70%),
    radial-gradient(600px 380px at 50% 40%, rgba(224,169,78,.12), transparent 70%);
  animation: flicker 6s ease-in-out infinite;
}
.hero__bracket { position: relative; z-index: 1; display: inline-block; }
.hero__bar { /* the iron bar the sign hangs from */
  width: min(520px, 82vw); height: 8px; margin: 0 auto;
  background: linear-gradient(180deg, #4a3f31, #221a11);
  border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.hero__sign {
  transform-origin: top center;
  animation: sway 8s ease-in-out infinite;
  display: inline-block; margin-top: -2px;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.55));
}
.hero__sign img { width: min(260px, 60vw); height: auto; }
/* The hanging board: yellow banner as the field, the logo laid over it
   (off to the left, like the old header). Both scale together. */
.hero__board {
  position: relative;
  width: min(600px, 90vw);
  border: 10px solid #2a1f14;         /* wooden frame */
  border-radius: 5px;
  background: #e8c944;                 /* banner yellow, shows through any transparency */
  box-shadow: 0 0 0 2px #4a3a22, inset 0 0 0 2px rgba(224,169,78,.35);
  overflow: hidden;
}
.hero__board .hero__board-bg { width: 100%; height: auto; display: block; }
.hero__board .hero__logo {
  position: absolute; top: 50%; left: 5%;
  transform: translateY(-50%);
  height: 80%; width: auto; max-width: 42%;
  filter: drop-shadow(0 2px 3px rgba(120,90,30,.4));
}
/* To center the logo instead of setting it to the side, use:
   .hero__board .hero__logo { left: 50%; transform: translate(-50%, -50%); } */
.hero__chains { display: flex; justify-content: center; gap: min(430px, 66vw); margin-bottom: -6px; }
.hero__chains span { width: 2px; height: 26px; background: linear-gradient(180deg,#5a4b39,#2a2016); }
.hero h1.title { margin-top: 1.4rem; }
.hero .kicker {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .32em; font-size: .8rem; color: var(--ember);
  margin: 0 0 .2rem;
}

@keyframes sway {
  0%,100% { transform: rotate(-1.3deg); }
  50%     { transform: rotate(1.3deg); }
}
@keyframes flicker {
  0%,100% { opacity: 1; }
  45%     { opacity: .82; }
  60%     { opacity: .93; }
  75%     { opacity: .78; }
}

/* ---------- The uncanny (reserved eldritch accent) ---------- */
.uncanny {
  color: var(--eldritch);
  text-decoration: underline dotted rgba(86,168,155,.55);
  text-underline-offset: .22em; cursor: help;
  transition: text-shadow .3s ease;
}
.uncanny:hover { text-shadow: 0 0 12px rgba(86,168,155,.65); }
.parchment .uncanny { color: #2f7a70; text-decoration-color: rgba(47,122,112,.5); }

.keeper {
	font-size: 1.5em;
	font-family: Keeper;
}

/* ---------- Cards / boards ---------- */
.board {
  display: grid; gap: clamp(1rem, 3vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 2rem;
}
.card {
  display: flex; flex-direction: column; text-decoration: none;
  background: linear-gradient(180deg, var(--bark-2), var(--bark));
  border: 1px solid var(--iron); border-radius: var(--radius);
  overflow: hidden; color: inherit;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--lantern-dim);
  box-shadow: 0 18px 34px rgba(0,0,0,.55), 0 0 24px rgba(224,169,78,.12);
}
.card__art { aspect-ratio: 16/10; background: linear-gradient(180deg, #efe3c6, #e2cfa4); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--iron); }
.card__art img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.card__body { padding: 1rem 1.1rem 1.2rem; }
.card__title { font-family: var(--font-display); font-size: 1.35rem; color: var(--lantern); margin: 0 0 .25rem; letter-spacing: .02em; }
.card__note { font-size: .95rem; color: #b3a079; margin: 0; }

/* ---------- Figures ("click to enlarge") ---------- */
.plates { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2rem); margin: 1.6rem 0; }
figure.plate { margin: 0; max-width: 320px; }
figure.plate img {
  border: 6px solid #efe4c8; outline: 1px solid #b49a68;
  border-radius: 2px; box-shadow: 0 12px 26px rgba(0,0,0,.5);
  background: #efe4c8;
}
figure.plate a { display: block; }
figure.plate figcaption {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; color: #a08a63; margin-top: .55rem; text-align: center;
}
figure.plate .enlarge { color: var(--ember); }

/* seal figures on lore pages */
.seals { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: .6rem 0 1.2rem; }
.seals img { filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }

/* ---------- Reference lists (library) ---------- */
.refs { list-style: none; padding: 0; margin: .6rem 0; }
.refs > li { margin: 0 0 1rem; }
.refs .grp-title { font-family: var(--font-display); letter-spacing: .04em; color: #4a3826; font-size: 1.05rem; }
.refs ul { margin: .3rem 0 .3rem 1.1rem; padding-left: .8rem; border-left: 2px solid var(--parch-line); }
.refs ul ul { border-left-color: #d8c49a; }

/* definition-style lore blocks */
.lore-term { margin: 1.2rem 0; }
.lore-term > dt { font-family: var(--font-display); font-size: 1.15rem; color: #4a3826; letter-spacing: .02em; }
.lore-term > dd { margin: .2rem 0 0; }
.script-note {
  font-style: italic; color: #6b5a3f;
  border-left: 3px solid var(--ember); padding-left: .8rem; margin: .5rem 0;
}

/* jump nav on long lore pages */
.jump {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; padding: .7rem 0; margin: 0;
  border-top: 1px solid var(--parch-line); border-bottom: 1px solid var(--parch-line);
}
.jump a { color: #8a4a1c; text-decoration: none; }
.jump a:hover { color: var(--oxblood); }

/* hierarchy tables (guild) */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1.2rem; margin: 1rem 0; }
.tiers h4 { margin: 0 0 .3rem; color: var(--oxblood); font-size: 1.1rem; }
.tiers ol { margin: 0; padding-left: 1.2rem; }
.tiers li { margin: .1rem 0; }

/* ---------- Calendar ---------- */
.cal-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; margin-bottom: 1rem;
}
.cal-nav a { color: var(--lantern); text-decoration: none; }
.cal-nav .now { color: #f0dcb0; font-size: 1.5rem; letter-spacing: .06em; }
.cal-nav .disabled { color: #6a5a3f; }

.calendar {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  background: linear-gradient(180deg, var(--parchment-2), var(--parchment));
  border: 1px solid #b49a68; box-shadow: 0 16px 34px rgba(0,0,0,.5);
}
.calendar caption { caption-side: top; }
.calendar th {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem; color: #6b4a24; background: #d8c49a;
  border: 1px solid #b49a68; padding: .5rem .3rem;
}
.calendar td {
  border: 1px solid #cdb98f; vertical-align: top;
  height: 84px; padding: .35rem .4rem; color: var(--read-ink);
  position: relative;
}
.calendar td.empty { background: repeating-linear-gradient(45deg, #e0d0ac, #e0d0ac 6px, #d8c69f 6px, #d8c69f 12px); }
.cal-day { font-family: var(--font-display); font-size: 1.05rem; color: #4a3826; }
.cal-moon { position: absolute; top: .3rem; right: .3rem; width: 24px; height: 24px; opacity: .9; }
.cal-event { display: block; font-size: .8rem; line-height: 1.3; margin-top: 1.6rem; color: var(--oxblood); }
.cal-event a { color: var(--oxblood); font-weight: 600; }
@media (max-width: 620px) {
  .calendar td { height: 58px; font-size: .85rem; }
  .cal-moon { width: 16px; height: 16px; }
  .cal-event { font-size: .68rem; margin-top: 1.1rem; }
}

/* ---------- Sealed / placeholder pages (protected content) ---------- */
.sealed {
  text-align: center; border: 1px dashed #b49a68; border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.6rem); margin-top: 1.4rem;
  background: rgba(126,42,36,.05);
}
.sealed img { width: 84px; margin: 0 auto 1rem; opacity: .85; }
.sealed h2 { color: var(--oxblood); }
.sealed .hint { color: #6b5a3f; font-style: italic; max-width: 52ch; margin: .6rem auto 0; }

/* ---------- Buttons / quick links ---------- */
.quicklinks { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.btn {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; text-decoration: none;
  color: var(--lantern); border: 1px solid var(--lantern-dim);
  padding: .6rem 1.1rem; border-radius: var(--radius);
  transition: background .25s ease, color .25s ease;
}
.btn:hover { background: var(--lantern); color: #1a1209; }

/* ---------- Footer ---------- */
.foot {
  border-top: 2px solid #0c0805;
  background: linear-gradient(180deg, #1c140d, #120d09);
  color: #8f7c5b; text-align: center;
  padding: 1.6rem var(--gutter);
  font-size: .9rem;
}
.foot a { color: #b7a079; }
.to-top {
  display: inline-block; margin-top: .4rem;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .74rem; color: var(--ember); text-decoration: none;
}
.to-top:hover { color: var(--lantern); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(8,5,3,.9); align-items: center; justify-content: center;
  padding: 4vw; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; border: 8px solid #efe4c8; box-shadow: 0 20px 60px rgba(0,0,0,.7); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero__sign { transform: rotate(0); }
}

/* ---------- Missing-asset placeholder (pre-download) ---------- */
.img-missing {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 90px; padding: 1rem; width: 100%;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem; color: #7a6647;
  background:
    repeating-linear-gradient(45deg, rgba(180,154,104,.14), rgba(180,154,104,.14) 8px, transparent 8px, transparent 16px),
    linear-gradient(180deg, #241b12, #1b140d);
  border: 1px dashed #5a4a33; border-radius: var(--radius);
}
.card__art .img-missing { min-height: 130px; }
.brand .img-missing { min-width: 34px !important; min-height: 34px; padding: 0; font-size: 0; border: 0; background: none; }