:root {
  color-scheme: light;
  --page-bg: #eee8db;
  --surface: #fffdf8;
  --surface-2: #f7f1e5;
  --masthead-bg: #ffffff;
  --nav-bg: #111214;
  --nav-text: #fffdf8;
  --text: #161616;
  --muted: #5d5b56;
  --gold: #b99752;
  --gold-bright: #d8bd77;
  --rule: rgba(185, 151, 82, .72);
  --shadow: 0 16px 40px rgba(24, 19, 10, .12);
  --max-width: 1440px;
  --transition: 220ms ease;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #080a0d;
  --surface: #101318;
  --surface-2: #15191f;
  --masthead-bg: #05070a;
  --nav-bg: #fffdf8;
  --nav-text: #171717;
  --text: #f5f1e7;
  --muted: #c6c0b4;
  --gold: #c9a85e;
  --gold-bright: #e6ca84;
  --rule: rgba(201, 168, 94, .74);
  --shadow: 0 18px 48px rgba(0, 0, 0, .48);
}

* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  transition: background-color var(--transition), color var(--transition);
}
button, a { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: .65rem 1rem;
  background: var(--gold-bright);
  color: #111;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-shell {
  width: min(100%, var(--max-width));
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.top-nav {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.25rem, 1.8vw, 2rem);
  padding: .45rem clamp(.8rem, 3vw, 3rem);
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 1px solid var(--gold);
  position: relative;
  z-index: 20;
  transition: background-color var(--transition), color var(--transition);
}

.nav-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: .55rem .25rem .42rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .76rem;
  cursor: pointer;
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: .08rem;
  height: 2px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after { transform: scaleX(1); }

.theme-toggle {
  position: absolute;
  right: clamp(.8rem, 2.4vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.theme-toggle__track {
  width: 42px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  padding: 2px;
  background: rgba(127,127,127,.18);
}
.theme-toggle__thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-bright);
  transition: transform var(--transition);
}
html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(19px); }

.masthead {
  min-height: clamp(315px, 43dvh, 430px);
  display: grid;
  grid-template-columns: minmax(260px, .92fr) minmax(380px, 1.15fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 5rem);
  padding: clamp(1.4rem, 3.5vh, 3rem) clamp(2rem, 7vw, 7rem);
  background: var(--masthead-bg);
  border: 1px solid var(--gold);
  position: relative;
  overflow: hidden;
  transition: background-color var(--transition);
}

.deco-corner { position: absolute; width: 74px; height: 74px; opacity: .9; }
.deco-corner::before, .deco-corner::after { content: ""; position: absolute; background: var(--gold); }
.deco-corner::before { width: 100%; height: 1px; top: 0; left: 0; box-shadow: 0 8px 0 var(--gold); }
.deco-corner::after { width: 1px; height: 100%; top: 0; left: 0; box-shadow: 8px 0 0 var(--gold); }
.deco-corner--tl { top: 18px; left: 18px; }
.deco-corner--tr { top: 18px; right: 18px; transform: rotate(90deg); }
.deco-corner--br { bottom: 18px; right: 18px; transform: rotate(180deg); }
.deco-corner--bl { bottom: 18px; left: 18px; transform: rotate(270deg); }

.masthead__logo-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
}
.brand-mark { position: relative; z-index: 2; }
.brand-mark img {
  width: clamp(205px, 20vw, 295px);
  max-height: clamp(270px, 35dvh, 350px);
  object-fit: contain;
}
.gold-rays {
  position: absolute;
  inset: 6% -8%;
  z-index: 1;
  opacity: .24;
  background: repeating-conic-gradient(from -8deg at 50% 48%, transparent 0deg 4.7deg, var(--gold-bright) 4.85deg 5.15deg, transparent 5.3deg 10deg);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 46%, rgba(0,0,0,.68) 62%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, #000 0 46%, rgba(0,0,0,.68) 62%, transparent 82%);
  animation: ray-breathe 12s ease-in-out infinite;
}
@keyframes ray-breathe { 0%,100% { opacity:.18; transform:scale(.985); } 50% { opacity:.29; transform:scale(1.02); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

.masthead__copy { max-width: 650px; position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 .65rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .69rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
h1, h2, h3 { font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
h1 { margin: 0; font-size: clamp(2.6rem, 5.1vw, 5.7rem); line-height: .94; }
h2 { margin: 0; font-size: clamp(1.65rem, 2.8vw, 3rem); }
h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 2rem); }
.masthead__intro { max-width: 650px; margin: 1.15rem 0 1.45rem; font-size: clamp(1.02rem, 1.35vw, 1.28rem); line-height: 1.55; color: var(--muted); }
.deco-rule { display:flex; align-items:center; gap:.6rem; width:min(100%, 510px); margin:.9rem 0; }
.deco-rule::before, .deco-rule::after { content:""; height:1px; flex:1; background:var(--gold); }
.deco-rule span { width:10px; height:10px; border:1px solid var(--gold); transform:rotate(45deg); }

.primary-button, .text-button {
  border: 1px solid var(--gold-bright);
  background: transparent;
  color: var(--text);
  padding: .78rem 1.7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .72rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.primary-button:hover, .primary-button:focus-visible { background: var(--gold-bright); color:#111; transform:translateY(-1px); }
.text-button { border:0; border-bottom:1px solid var(--gold); padding:.35rem 0; }

.content-frame {
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
  border-inline: 1px solid var(--gold);
  padding: clamp(1.25rem, 3vh, 2.4rem) clamp(1.3rem, 5.5vw, 5rem);
  transition: background-color var(--transition);
}
.content-view { max-width: 1180px; margin: 0 auto; animation: view-in 260ms ease both; }
@keyframes view-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.section-heading { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; text-align:center; margin-bottom:clamp(1rem, 2vh, 1.8rem); }
.section-heading__ornament { height:1px; background:linear-gradient(90deg, transparent, var(--gold)); position:relative; }
.section-heading__ornament::after { content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border:1px solid var(--gold); transform:rotate(45deg); background:var(--surface); }
.section-heading__ornament--reverse { transform:scaleX(-1); }

.home-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1rem, 2vw, 1.7rem); }
.panel, .book-card, .news-entry {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: clamp(1.2rem, 2.4vw, 2rem);
  position:relative;
}
.panel::before, .book-card::before, .news-entry::before { content:""; position:absolute; inset:7px; border:1px solid rgba(185,151,82,.28); pointer-events:none; }
.panel p, .book-card p, .news-entry p { line-height:1.55; }
.lead { font-size:clamp(1.08rem, 1.35vw, 1.3rem); }
.panel--feature h3 span { color:var(--gold-bright); }
.status-badge { display:inline-block; margin:0 0 .8rem; font-family:Arial,Helvetica,sans-serif; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-bright); }

.book-card { display:grid; grid-template-columns:minmax(190px, 300px) 1fr; gap:clamp(1.5rem, 4vw, 4rem); align-items:center; }
.cover-button { border:0; padding:0; background:transparent; cursor:zoom-in; position:relative; box-shadow:0 12px 26px rgba(0,0,0,.24); }
.cover-button img { width:100%; aspect-ratio:1034/1536; object-fit:cover; }
.cover-button__hint { position:absolute; left:0; right:0; bottom:0; padding:.6rem; background:rgba(0,0,0,.72); color:white; font: .68rem Arial,Helvetica,sans-serif; letter-spacing:.15em; text-transform:uppercase; opacity:0; transition:opacity var(--transition); }
.cover-button:hover .cover-button__hint, .cover-button:focus-visible .cover-button__hint { opacity:1; }
.series-name { margin:0; color:var(--gold-bright); text-transform:uppercase; letter-spacing:.12em; }
.book-card__details h3 { font-size:clamp(1.9rem, 3.2vw, 3.5rem); line-height:1; margin:.2rem 0 .65rem; }
.book-author { text-transform:uppercase; letter-spacing:.16em; font-family:Arial,Helvetica,sans-serif; font-size:.78rem; }
.book-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:1.2rem 0; padding:1rem 0; border-block:1px solid var(--rule); }
.book-meta dt { font: .64rem Arial,Helvetica,sans-serif; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-bright); }
.book-meta dd { margin:.25rem 0 0; }
.panel--prose { max-width:900px; margin:auto; }
.news-entry { display:grid; grid-template-columns:180px 1fr; gap:2rem; }
.news-entry time { color:var(--gold-bright); font-family:Arial,Helvetica,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.panel--contact { text-align:center; max-width:800px; margin:auto; }
.email-link { color:var(--gold-bright); font-size:clamp(1.15rem, 2vw, 1.6rem); }
.small-note { font-size:.82rem; color:var(--muted); }

.site-footer {
  min-height: 42px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem 2rem;
  flex-wrap:wrap;
  padding:.65rem 1.25rem;
  border:1px solid var(--gold);
  background:var(--nav-bg);
  color:var(--nav-text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.site-footer p { margin:0; }

.cover-modal {
  width:min(92vw, 720px);
  max-height:92dvh;
  border:1px solid var(--gold);
  background:var(--surface);
  color:var(--text);
  padding:clamp(1rem, 2vw, 1.6rem);
  box-shadow:0 24px 80px rgba(0,0,0,.62);
}
.cover-modal::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(3px); }
.cover-modal figure { margin:0; display:grid; place-items:center; gap:1rem; }
.cover-modal img { max-height:76dvh; width:auto; }
.cover-modal figcaption { text-align:center; display:grid; gap:.3rem; }
.cover-modal figcaption span { color:var(--muted); }
.modal-close { position:absolute; right:.55rem; top:.35rem; border:0; background:transparent; font-size:2rem; cursor:pointer; color:var(--gold-bright); }

@media (max-width: 960px) {
  .theme-toggle__label { display:none; }
  .masthead { grid-template-columns:.8fr 1.2fr; padding-inline:2.3rem; }
  .home-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .site-shell { display:block; }
  .top-nav { position:sticky; top:0; justify-content:flex-start; overflow-x:auto; padding-right:4.5rem; min-height:50px; }
  .nav-link { font-size:.66rem; flex:0 0 auto; }
  .theme-toggle { position:fixed; top:14px; right:.7rem; z-index:40; }
  .masthead { min-height:auto; grid-template-columns:1fr; text-align:center; gap:.4rem; padding:2rem 1.3rem 2.4rem; }
  .masthead__logo-zone { min-height:210px; }
  .brand-mark img { width:min(62vw, 235px); max-height:285px; }
  .gold-rays { inset:0 -15%; }
  .masthead__copy { margin:auto; }
  .deco-rule { margin-inline:auto; }
  .masthead__intro { margin-inline:auto; }
  .content-frame { overflow:visible; padding:1.25rem 1rem 2rem; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading__ornament { display:none; }
  .book-card { grid-template-columns:1fr; }
  .cover-button { width:min(78vw, 310px); margin:auto; }
  .book-meta { grid-template-columns:1fr; }
  .news-entry { grid-template-columns:1fr; gap:.7rem; }
  .site-footer { text-align:center; }
}

@media (max-height: 760px) and (min-width: 721px) {
  .top-nav { min-height:48px; }
  .masthead { min-height:305px; padding-block:1rem; }
  .brand-mark img { max-height:285px; width:220px; }
  h1 { font-size:clamp(2.6rem, 4.3vw, 4.4rem); }
  .masthead__intro { margin-block:.8rem 1rem; }
  .content-frame { padding-block:1rem; }
  .section-heading { margin-bottom:.8rem; }
}

/* =========================================================
   DESKTOP VIEWPORT-FIT REVISION
   Keeps the existing navigation and masthead proportions,
   uses the available browser width, and confines the changing
   lower section to the remaining visible viewport height.
   ========================================================= */

@media (min-width: 721px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    min-height: 0;
  }

  .site-shell {
    width: calc(100vw - 16px);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin-inline: auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  /* The header/masthead remains at its existing size. */
  .site-header {
    min-height: 0;
  }

  /* Only the selected lower section occupies the remaining space. */
  .content-frame {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: clamp(.55rem, 1.25vh, .9rem) clamp(1.1rem, 3vw, 3rem);
  }

  .content-view {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .section-heading {
    flex: 0 0 auto;
    margin-bottom: clamp(.4rem, .8vh, .7rem);
    gap: .75rem;
  }

  .section-heading .eyebrow {
    margin-bottom: .18rem;
  }

  .section-heading h2 {
    font-size: clamp(1.65rem, 2.25vw, 2.45rem);
    line-height: 1;
  }

  /* All changing-section bodies fill the remaining lower panel. */
  .home-grid,
  .book-card,
  .panel--prose,
  .news-entry,
  .panel--contact {
    flex: 1 1 auto;
    min-height: 0;
  }

  .home-grid {
    align-items: stretch;
  }

  .panel,
  .book-card,
  .news-entry {
    padding: clamp(.85rem, 1.6vh, 1.25rem) clamp(1rem, 2vw, 1.6rem);
  }

  /* Compact horizontal Books presentation: no page scrolling. */
  .book-card {
    height: 100%;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: clamp(1.2rem, 2.4vw, 2.6rem);
    align-items: center;
  }

  .cover-button {
    width: auto;
    height: 100%;
    max-height: 100%;
    justify-self: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
  }

  .cover-button img {
    width: auto;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1034 / 1536;
    object-fit: contain;
  }

  .book-card__details {
    min-width: 0;
    align-self: center;
  }

  .book-card__details h3 {
    font-size: clamp(1.75rem, 2.65vw, 3rem);
    line-height: .98;
    margin: .12rem 0 .45rem;
  }

  .book-card__details > p:last-child {
    margin-bottom: 0;
    font-size: clamp(.88rem, 1vw, 1rem);
    line-height: 1.38;
  }

  .status-badge {
    margin-bottom: .45rem;
  }

  .book-author {
    margin-block: .45rem;
  }

  .book-meta {
    margin: .7rem 0;
    padding: .65rem 0;
  }

  /* Keep the other sections comfortably inside the same fixed panel. */
  .panel--prose,
  .panel--contact,
  .news-entry {
    width: 100%;
    max-width: none;
    overflow: hidden;
  }

  .panel--prose p,
  .panel--contact p,
  .news-entry p {
    margin-top: .6rem;
    margin-bottom: .6rem;
  }

  .site-footer {
    min-height: 34px;
    padding: .42rem 1rem;
  }
}

/* Slightly tighter lower panel for short desktop browser viewports. */
@media (min-width: 721px) and (max-height: 860px) {
  .content-frame {
    padding-block: .45rem;
  }

  .section-heading {
    margin-bottom: .35rem;
  }

  .section-heading .eyebrow {
    font-size: .6rem;
  }

  .section-heading h2 {
    font-size: clamp(1.45rem, 2vw, 2.1rem);
  }

  .panel,
  .book-card,
  .news-entry {
    padding-block: .7rem;
  }

  .book-card {
    grid-template-columns: minmax(135px, 195px) minmax(0, 1fr);
  }

  .book-card__details h3 {
    font-size: clamp(1.55rem, 2.35vw, 2.55rem);
  }

  .book-meta {
    margin: .5rem 0;
    padding: .5rem 0;
  }

  .site-footer {
    min-height: 30px;
    padding-block: .3rem;
  }
}


/* =========================================================
   ART DECO VISUAL REVISION
   CSS-only framework. The future brand font and optional SVG
   ornaments can replace these fallbacks without restructuring.
   ========================================================= */

@font-face {
  font-family: "HiLo Deco";
  src: url("../fonts/HiLo-Deco.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --deco-font: "HiLo Deco", "Century Gothic", sans-serif;
  --deco-black: #0b0c0e;
  --deco-line: rgba(185, 151, 82, .92);
  --deco-line-soft: rgba(185, 151, 82, .42);
  --outer-gutter: 6px;
}

/* Thin black rails at the sides give the page the stronger framed look. */
.site-shell {
  border-inline: var(--outer-gutter) solid var(--deco-black);
  box-shadow:
    0 0 0 1px var(--gold),
    var(--shadow);
}

/* Brand-style display typography. */
.top-nav .nav-link,
.masthead h1,
.section-heading h2,
.book-card__details h3,
.panel--feature h3,
.primary-button,
.text-button {
  font-family: var(--deco-font);
  font-weight: 400;
}

.masthead h1 {
  letter-spacing: .115em;
  line-height: .9;
}

.top-nav .nav-link {
  font-size: clamp(.78rem, .88vw, 1rem);
  letter-spacing: .19em;
}

/* =========================================================
 *  REBUILT TOP NAVIGATION
 *  ========================================================= */

.top-nav {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px minmax(0, 1fr);
  align-items: center;
  padding: .45rem clamp(5rem, 9vw, 9rem);
  position: relative;
  z-index: 20;
  overflow: hidden;

  color: var(--nav-text);
  background-color: var(--nav-bg);

  border-top: 1px solid var(--gold);
  border-bottom: 2px solid var(--gold);

  background-image:
  linear-gradient(var(--gold), var(--gold)),
  linear-gradient(var(--gold), var(--gold)),
  linear-gradient(var(--gold), var(--gold)),
  linear-gradient(var(--gold), var(--gold)),
  linear-gradient(var(--gold), var(--gold)),
  linear-gradient(var(--gold), var(--gold)),
  linear-gradient(var(--gold), var(--gold)),
  linear-gradient(var(--gold), var(--gold));

  background-repeat: no-repeat;

  background-size:
  64px 1px, 1px 34px,
  44px 1px, 1px 24px,
  64px 1px, 1px 34px,
  44px 1px, 1px 24px;

  background-position:
  14px 10px, 14px 10px,
  22px 18px, 22px 18px,
  calc(100% - 14px) 10px, calc(100% - 14px) 10px,
  calc(100% - 22px) 18px, calc(100% - 22px) 18px;
}

.top-nav__group {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3.2vw, 3.4rem);
  min-width: 0;
}

.top-nav__group--left {
  justify-content: flex-end;
}

.top-nav__group--right {
  justify-content: flex-start;
}

.top-nav__ornament {
  width: 138px;
  height: 48px;
  align-self: end;
  position: relative;
  pointer-events: none;
}

.top-nav__ornament::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .95;

  background: repeating-conic-gradient(
    from 270deg at 50% 100%,
    transparent 0deg 7deg,
    var(--gold) 7.2deg 8deg,
                                       transparent 8.2deg 15deg
  );

  clip-path: polygon(
    0 100%,
    0 74%,
    7% 74%,
    7% 65%,
    14% 65%,
    14% 55%,
    22% 55%,
    22% 44%,
    31% 44%,
    31% 31%,
    42% 31%,
    42% 15%,
    49% 15%,
    49% 0,
    51% 0,
    51% 15%,
    58% 15%,
    58% 31%,
    69% 31%,
    69% 44%,
    78% 44%,
    78% 55%,
    86% 55%,
    86% 65%,
    93% 65%,
    93% 74%,
    100% 74%,
    100% 100%
  );
}

.top-nav__ornament::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  box-shadow: 0 -5px 0 -0.25px var(--gold);
}

.nav-link {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.theme-toggle {
  z-index: 3;
}

/* -------------------------
   Masthead frame/scrollwork
   ------------------------- */
.masthead {
  border: 1px solid var(--gold);
  outline: 1px solid var(--deco-black);
  outline-offset: -7px;
  box-shadow:
    inset 0 0 0 8px var(--masthead-bg),
    inset 0 0 0 9px var(--deco-line-soft);
}

/* More elaborate CSS corner scrollwork using the existing four elements. */
.deco-corner {
  width: 82px;
  height: 82px;
  opacity: 1;
  color: var(--gold);
  filter: drop-shadow(0 0 .15px currentColor);
}

.deco-corner::before {
  width: 76px;
  height: 1px;
  top: 0;
  left: 0;
  background: currentColor;
  box-shadow:
    0 8px 0 currentColor,
    0 16px 0 -0.25px currentColor,
    16px 24px 0 -0.25px currentColor;
}

.deco-corner::after {
  width: 1px;
  height: 76px;
  top: 0;
  left: 0;
  background: currentColor;
  box-shadow:
    8px 0 0 currentColor,
    16px 0 0 -0.25px currentColor,
    24px 16px 0 -0.25px currentColor;
}

.deco-corner {
  background:
    linear-gradient(135deg, transparent 46%, currentColor 47% 50%, transparent 51%) 18px 18px / 28px 28px no-repeat,
    linear-gradient(currentColor, currentColor) 23px 23px / 26px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 23px 23px / 1px 26px no-repeat,
    linear-gradient(currentColor, currentColor) 31px 31px / 18px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 31px 31px / 1px 18px no-repeat;
}

.deco-corner--tl { top: 15px; left: 15px; }
.deco-corner--tr { top: 15px; right: 15px; }
.deco-corner--br { bottom: 15px; right: 15px; }
.deco-corner--bl { bottom: 15px; left: 15px; }

/* Ornate divider beneath LUMENTIAN PRESS. */
.deco-rule {
  position: relative;
  width: min(100%, 560px);
  gap: 1rem;
  margin: 1rem 0 .9rem;
}

.deco-rule::before,
.deco-rule::after {
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0 1%,
      var(--gold) 1% 41%,
      transparent 41% 44%,
      var(--gold) 44% 56%,
      transparent 56% 59%,
      var(--gold) 59% 99%,
      transparent 99% 100%);
}

.deco-rule span {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  background: transparent;
  box-shadow:
    0 0 0 4px var(--masthead-bg),
    0 0 0 5px var(--gold);
}

.deco-rule span::before,
.deco-rule span::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--gold);
}
.deco-rule span::after { inset: 5px; background: var(--gold); }

/* Button frames echo the masthead corners. */
.primary-button {
  min-width: 210px;
  position: relative;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 5px var(--masthead-bg), inset 0 0 0 6px var(--deco-line-soft);
  padding: .9rem 2rem;
  letter-spacing: .2em;
}

.primary-button::before,
.primary-button::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--gold);
  pointer-events: none;
}
.primary-button::before {
  left: 5px;
  top: 5px;
  border-left: 1px solid;
  border-top: 1px solid;
  box-shadow: -1px -1px 0 -0.5px var(--gold);
}
.primary-button::after {
  right: 5px;
  bottom: 5px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

/* -------------------------
   Lower changing viewport
   ------------------------- */
.content-frame {
  position: relative;
  border: 1px solid var(--gold);
  outline: 1px solid var(--deco-black);
  outline-offset: -7px;
  box-shadow:
    inset 0 0 0 8px var(--surface),
    inset 0 0 0 9px var(--deco-line-soft);
}

.content-frame::before,
.content-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 58px;
  height: 58px;
  pointer-events: none;
  opacity: .95;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 58px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 0 / 1px 58px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 8px 8px / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 8px 8px / 1px 42px no-repeat,
    linear-gradient(135deg, transparent 46%, var(--gold) 47% 50%, transparent 51%) 16px 16px / 25px 25px no-repeat;
}
.content-frame::before { top: 14px; left: 14px; }
.content-frame::after { right: 14px; bottom: 14px; transform: rotate(180deg); }

/* Give the lower panels the same double-line Deco framing. */
.panel,
.book-card,
.news-entry {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 6px var(--surface-2), inset 0 0 0 7px var(--deco-line-soft);
}

.panel::before,
.book-card::before,
.news-entry::before {
  inset: 8px;
  border-color: var(--deco-line-soft);
}

.section-heading h2 {
  letter-spacing: .12em;
}

.section-heading__ornament {
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}

/* Dark mode keeps the navigation cream/white while the main surfaces invert. */
html[data-theme="dark"] .top-nav {
  background-color: #fffaf0;
  color: #111214;
}

html[data-theme="dark"] .masthead,
html[data-theme="dark"] .primary-button {
  --masthead-bg: #05070a;
}

@media (max-width: 1100px) {
  .top-nav { padding-inline: 4.5rem; }
  .top-nav::before,
  .top-nav::after { opacity: .55; }
}

@media (max-width: 720px) {
  .site-shell { border-inline-width: 3px; }
  .top-nav {
    background-image: none;
    padding-inline: 1rem 4.8rem;
  }
  .top-nav::before,
  .top-nav::after { display: none; }
  .masthead { outline-offset: -5px; }
  .deco-corner { transform: scale(.72); transform-origin: top left; }
  .deco-corner--tr { transform: rotate(90deg) scale(.72); }
  .deco-corner--br { transform: rotate(180deg) scale(.72); }
  .deco-corner--bl { transform: rotate(270deg) scale(.72); }
  .content-frame::before,
  .content-frame::after { transform: scale(.72); }
  .content-frame::after { transform: rotate(180deg) scale(.72); }
}
/* Lumentian Press custom wordmark */
.wordmark-title {
  margin: 0;
  width: min(100%, 620px);
  line-height: 0;
}

.wordmark-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.wordmark-image--dark {
  display: none;
}

html[data-theme="dark"] .wordmark-image--light {
  display: none;
}

html[data-theme="dark"] .wordmark-image--dark {
  display: block;
}
/* Ensure inactive content sections remain hidden */
.content-view[hidden] {
  display: none !important;
}