/* Bastion Ring Chronicles: site styles */
@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/EBG-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/EBG-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/EBG-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --space: #0c1a2e;      /* deep navy, page background */
  --hull: #16273f;       /* panels */
  --rivet: #2c4262;      /* lines and borders */
  --signal: #cfe0f2;     /* pale signal blue: headlines */
  --text: #b8c7d8;       /* reading text */
  --muted: #8297ae;      /* small print */
  --amber: #e2a93b;      /* cover-tagline gold: actions */
  --amber-hi: #f0bf5c;
  --display: "Chakra Petch", "Arial Narrow", sans-serif;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --measure: 34rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--space);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(207,224,242,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 9%, rgba(207,224,242,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 34%, rgba(207,224,242,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 52%, rgba(207,224,242,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 71%, rgba(207,224,242,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 77%, rgba(207,224,242,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 88%, rgba(207,224,242,.3) 50%, transparent 51%);
  background-size: 520px 520px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); text-decoration-color: var(--amber); text-underline-offset: .18em; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--amber); color: var(--space); padding: .5rem .75rem; z-index: 10; font-family: var(--display); }
.skip:focus { left: .75rem; }

/* page frame with the tier rail */
.frame { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.site-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; color: var(--signal); text-decoration: none; }
.site-nav a { font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--text); text-decoration: none; margin-left: 1.25rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--amber); }

.tier { position: relative; padding: 3.5rem 0 3.5rem 0; }
@media (min-width: 900px) {
  .tier { padding-left: 9.5rem; }
  .tier::before { content: ""; position: absolute; left: 1.4rem; top: 0; bottom: 0; width: 1px; background: var(--rivet); }
  .tier-mark { position: absolute; left: 0; top: 3.9rem; width: 9rem; display: flex; align-items: center; gap: .5rem;
    font-family: var(--display); font-weight: 500; font-size: .8rem; color: var(--muted); }
  .tier-mark::before { content: ""; width: 1.6rem; height: 1px; background: var(--amber); margin-left: 1.4rem; flex: none; }
  .tier-mark span { white-space: nowrap; }
}
@media (max-width: 899px) { .tier-mark { display: none; } }

/* type */
h1, h2, h3 { font-family: var(--display); color: var(--signal); font-weight: 600; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.25rem); letter-spacing: -.005em; max-width: 15ch; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 1rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
.lede { font-size: 1.3rem; line-height: 1.5; color: var(--text); }
.small { font-size: 1rem; color: var(--muted); }
em, i { font-style: italic; }

/* hero */
.hero { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; } }
.hero h1 { margin: .25rem 0 1.25rem; }
.hero-cover { justify-self: center; width: min(100%, 22rem); }
.cover { border-radius: 3px; box-shadow: 0 0 0 1px rgba(207,224,242,.08), 0 24px 60px rgba(0,0,0,.55); }

/* the signal: pulses that arrive closer together */
.signal { display: block; width: 100%; max-width: 30rem; height: 34px; margin: .25rem 0 1.5rem; overflow: visible; }
.signal path { fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .signal path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: trace 2.6s cubic-bezier(.6,0,.2,1) .4s forwards; }
  @keyframes trace { to { stroke-dashoffset: 0; } }
}

/* signup form (MailerLite markup, restyled) */
.join { max-width: 30rem; }
.ml-form-embedContainer .ml-block-form .row-form, .ml-form-embedContainer form { margin: 0; }
.join-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.join-row .ml-form-fieldRow { flex: 1 1 14rem; }
.join input[type="email"] {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--space); background: var(--signal);
  border: 1px solid var(--signal); border-radius: 3px; padding: .7rem .85rem; min-height: 3rem;
}
.join input[type="email"]::placeholder { color: #5b7088; }
.join .ml-error input { border-color: #ff8a7a; box-shadow: 0 0 0 2px #ff8a7a; }
.join button.primary {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--space);
  background: var(--amber); border: 0; border-radius: 3px; padding: .7rem 1.2rem; min-height: 3rem; cursor: pointer; flex: 0 0 auto;
}
.join button.primary:hover { background: var(--amber-hi); }
.join button.loading { display: none; }
.join .fine { font-size: .95rem; color: var(--muted); margin: .75rem 0 0; }
.join .row-success { border-left: 2px solid var(--amber); padding: .25rem 0 .25rem 1rem; }
.join .row-success h2 { font-size: 1.4rem; margin: 0 0 .4rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* mid-transit: series and books */
.pitch p { font-size: 1.3rem; line-height: 1.5; }
.books { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 700px) { .books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.book { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.25rem; align-items: start; }
.book h3 { margin: 0 0 .35rem; }
.book .order { font-family: var(--display); font-weight: 500; font-size: .9rem; color: var(--amber); margin: 0 0 .5rem; }
.book p { font-size: 1.05rem; }

/* buttons as links */
.button { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-decoration: none;
  color: var(--space); background: var(--amber); border-radius: 3px; padding: .75rem 1.25rem; }
.button:hover { background: var(--amber-hi); color: var(--space); }
.button.ghost { background: transparent; color: var(--signal); box-shadow: inset 0 0 0 1px var(--rivet); }
.button.ghost:hover { box-shadow: inset 0 0 0 1px var(--amber); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1rem; }

/* book page */
.book-hero { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .book-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4rem; } }
.book-hero .cover-wrap { justify-self: center; width: min(100%, 24rem); }
.tagline { font-family: var(--display); font-weight: 500; color: var(--amber); font-size: 1.1rem; margin: .5rem 0 1.5rem; max-width: 30rem; }
.draft-note { border: 1px dashed var(--amber); color: var(--amber); padding: .6rem .8rem; font-size: .95rem; max-width: var(--measure); margin-bottom: 1.5rem; }

/* footer / the well */
.site-foot { border-top: 1px solid var(--rivet); }
.site-foot p { font-size: 1rem; color: var(--muted); }
.site-foot nav a { font-family: var(--display); font-size: .9rem; margin-right: 1.25rem; color: var(--text); }

/* plain pages */
.prose h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; }
.prose ul { padding-left: 1.2rem; max-width: var(--measure); }
.prose li { margin-bottom: .4rem; }

.site-nav a { white-space: nowrap; }
@media (max-width: 480px) {
  .site-head { padding: 1rem 0; }
  .wordmark { font-size: .92rem; }
  .site-nav a { font-size: .85rem; margin-left: .9rem; }
}

/* depth: nebula glow behind everything */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 36rem at 85% 8%, rgba(70,110,170,.22), transparent 70%),
    radial-gradient(48rem 30rem at 5% 55%, rgba(60,70,140,.16), transparent 70%),
    radial-gradient(40rem 26rem at 70% 95%, rgba(226,169,59,.06), transparent 70%);
}
body { background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(207,224,242,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 9%, rgba(207,224,242,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 34%, rgba(207,224,242,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 52%, rgba(207,224,242,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 71%, rgba(207,224,242,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 77%, rgba(207,224,242,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 88%, rgba(207,224,242,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 4%, rgba(207,224,242,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 61%, rgba(207,224,242,.25) 50%, transparent 51%),
    radial-gradient(.8px .8px at 5% 40%, rgba(207,224,242,.35) 50%, transparent 51%),
    radial-gradient(.8px .8px at 49% 27%, rgba(207,224,242,.3) 50%, transparent 51%),
    radial-gradient(.8px .8px at 63% 46%, rgba(207,224,242,.3) 50%, transparent 51%);
  background-size: 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 310px 310px, 310px 310px, 230px 230px, 230px 230px, 230px 230px;
}

/* the ring, drawn faintly behind each cover */
.hero-cover, .book-hero .cover-wrap { position: relative; isolation: isolate; }
.ring-art { position: absolute; left: 50%; top: 50%; width: 175%; transform: translate(-50%, -50%) rotate(-12deg); z-index: -1; opacity: .55; }
.ring-art g { stroke: var(--rivet); stroke-width: 1.2; }
.ring-art ellipse:first-child { stroke: rgba(207,224,242,.35); }

/* cinematic band: the Ring from the observation deck */
.bleed { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.band { height: clamp(15rem, 38vw, 34rem); overflow: hidden; margin-top: 1rem; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.band img { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 76%, transparent 100%); opacity: .95; }
@media (max-width: 899px) {
  .band img { object-position: 22% 40%; }
  .ring-art { width: 130%; opacity: .45; }
}