/* ------------------------------------------------------------------ *
 * Grimmtale Studios - public site.
 *
 * The palette, type and furniture are the key ledger's, so the shop
 * front and the back office read as one hand: warm stock, ink-black
 * type, oxblood for anything that matters, hairline rules and a double
 * rule at the masthead and the foot.
 *
 * One deliberate difference from the ledger. That page is served
 * offline to one machine, so it can name Windows-only faces and know
 * it will get them. This one is served to strangers on any platform,
 * so the same stacks are kept for continuity but every one of them
 * ends at Georgia and then generic serif. Visitors without Rockwell or
 * Constantia get the ledger's shape and colour in a face they do have,
 * which is the closest thing to fidelity that does not mean shipping a
 * font we have no licence for.
 * ------------------------------------------------------------------ */

:root {
  --stock: #f2ede1;
  --stock-2: #e8e1d1;
  --rule: #cfc5ae;
  --rule-hard: #a89b7e;
  --ink: #1d1a15;
  --ink-soft: #5d564a;
  --ink-faint: #8a8172;
  --blood: #8c2a1f;
  --blood-soft: #b8503f;
  --moss: #3c5c3a;
  --brass: #8a6a1f;

  --font-display: "Rockwell", "Sitka Banner", "Cambria", Georgia, serif;
  --font-body: "Constantia", "Sitka Text", Georgia, serif;
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --stock: #17150f;
    --stock-2: #1f1c15;
    --rule: #35301f;
    --rule-hard: #4d4530;
    --ink: #ece4d0;
    --ink-soft: #a89f89;
    --ink-faint: #7a7260;
    --blood: #c9553f;
    --blood-soft: #e0765d;
    --moss: #7ea36f;
    --brass: #c9a24a;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Scrollbars, as on the ledger. Left alone, Windows drops a grey system bar
   with stepper arrows into a warm paper palette, which reads as a seam. */
html, dialog {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-hard) var(--stock-2);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--stock-2); }
::-webkit-scrollbar-thumb {
  background: var(--rule-hard);
  border: 3px solid var(--stock-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--blood); }
::-webkit-scrollbar-corner { background: var(--stock-2); }
::-webkit-scrollbar-button { display: none; }

body {
  margin: 0;
  padding: 0 1.5rem 6rem;
  background: var(--stock);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
  position: relative;
}

/* Paper tooth. Above the background, below everything else. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.28;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  body::before { mix-blend-mode: screen; opacity: 0.14; }
}

.sheet { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }

/* Keyboard users land here first and can skip the masthead. Off screen until
   focused rather than hidden, or it would not be reachable at all. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--stock);
  font: 400 0.74rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --- masthead ----------------------------------------------------- */

header.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.75rem 0 0.9rem;
  border-bottom: 3px double var(--rule-hard);
}

h1 {
  font: 400 2.6rem/1 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0;
}
h1 em {
  font-style: normal;
  color: var(--blood);
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font: 400 0.72rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding-bottom: 0.35rem;
}
.masthead nav a {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: color 140ms ease, border-color 140ms ease;
}
.masthead nav a:hover,
.masthead nav a:focus-visible { color: var(--blood); border-bottom-color: var(--blood); }

/* --- section furniture -------------------------------------------- */

section { margin-top: 2.75rem; }

h2 {
  font: 400 0.72rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin: 0 0 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
}

p { margin: 0 0 0.85rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--blood); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--blood-soft); }

/* --- standfirst --------------------------------------------------- */

/* The one place on the page set larger than body copy. It carries what the
   studio is, so it gets the display face and a measure narrow enough to read
   in one pass rather than the full width of the sheet. */
.standfirst {
  margin-top: 2.25rem;
  max-width: 34rem;
  font: 400 1.32rem/1.4 var(--font-display);
  color: var(--ink-soft);
}
.standfirst strong { color: var(--ink); font-weight: 400; }

/* --- buttons ------------------------------------------------------ */

/* Anchors, not buttons, because every one of them navigates. Styled as the
   ledger's buttons so the two surfaces match. */
.btn {
  display: inline-block;
  font: 400 0.74rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stock);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.62rem 1.15rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 90ms ease, background 140ms ease, color 140ms ease;
}
.btn:hover { background: var(--blood); border-color: var(--blood); color: var(--stock); }
.btn:active { transform: translateY(1px); }

.btn.ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule-hard);
}
.btn.ghost:hover {
  color: var(--stock);
  background: var(--ink);
  border-color: var(--ink);
}

.btn.tiny { padding: 0.34rem 0.6rem; font-size: 0.64rem; letter-spacing: 0.1em; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.6rem;
}

/* --- modules ------------------------------------------------------ */

/* One module is one ledger entry: name in the display face, tags pushed to
   the right edge, hairline rule underneath. */
.entry {
  border-bottom: 1px solid var(--rule);
  padding: 1.35rem 0 1.5rem;
}
.entry:last-of-type { border-bottom: 0; }

.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}
.entry-head .who { font: 400 1.35rem/1.15 var(--font-display); }
/* A dedicated spacer rather than an auto margin on a tag, which would move
   the whole group whenever that tag was not rendered. */
.entry-head .grow { flex: 1 1 auto; }

.entry-body {
  margin-top: 0.55rem;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.entry-body strong { color: var(--ink); font-weight: 400; }

.tag {
  font: 400 0.6rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.32rem 0.5rem;
  border: 1px solid currentColor;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tag.live { color: var(--moss); }
.tag.dep { color: var(--brass); }

/* --- numbered steps ----------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.15rem 2.6rem;
  border-bottom: 1px dotted var(--rule);
  margin-bottom: 1.15rem;
  max-width: 46rem;
}
.steps li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  font: 400 1.5rem/1 var(--font-display);
  color: var(--blood);
}
.steps h3 {
  font: 400 1.05rem/1.3 var(--font-body);
  margin: 0 0 0.3rem;
}
.steps p { font-size: 0.93rem; color: var(--ink-soft); }

/* A pasteable URL. Boxed on the alternate stock like the ledger's minted
   card, and allowed to break anywhere, because it is one long unspaced
   string that would otherwise force a horizontal scrollbar on a phone. */
.url {
  display: block;
  margin: 0.7rem 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-hard);
  background: var(--stock-2);
  font: 400 0.78rem/1.5 var(--font-mono);
  color: var(--ink-soft);
  word-break: break-all;
}
.url b { color: var(--blood); font-weight: 400; }

/* --- notice ------------------------------------------------------- */

.notice {
  margin-top: 1.25rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--rule-hard);
  background: var(--stock-2);
  font-size: 0.92rem;
  max-width: 46rem;
}
.notice.good { border-left-color: var(--moss); }
.notice.bad { border-left-color: var(--blood); }

/* --- subscribe ---------------------------------------------------- */

.offer {
  border: 1px solid var(--rule-hard);
  background: var(--stock-2);
  padding: 1.5rem 1.6rem 1.6rem;
}
.offer h3 {
  font: 400 1.5rem/1.1 var(--font-display);
  margin: 0 0 0.2rem;
}
.offer .price {
  font: 400 0.78rem/1.5 var(--font-mono);
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.offer ul {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
  list-style: disc;
}
.offer li { font-size: 0.94rem; margin-bottom: 0.25rem; }
.offer li::marker { color: var(--blood); }

/* --- footer ------------------------------------------------------- */

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.1rem;
  border-top: 3px double var(--rule-hard);
  font-size: 0.82rem;
  color: var(--ink-faint);
}
footer .studio {
  font: 400 1.05rem/1 var(--font-display);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
footer .studio span { color: var(--blood); }
footer nav { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* --- dialog ------------------------------------------------------- */

dialog {
  max-width: 46rem;
  width: calc(100% - 2rem);
  max-height: 82vh;
  padding: 0;
  border: 1px solid var(--rule-hard);
  background: var(--stock);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  /* The dialog is the only scroller. Giving the inner panel its own
     max-height and overflow as well produces two scrollbars side by side. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgba(20, 16, 10, 0.55); }

.notes-body { padding: 1.75rem 2rem 2rem; }
.notes-body h3 {
  font: 400 1.9rem/1.05 var(--font-display);
  margin: 0 0 1.5rem;
}
.notes-body h4 {
  font: 400 0.68rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin: 1.85rem 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.notes-body p { margin: 0 0 0.75rem; font-size: 0.94rem; }
.notes-body ul {
  margin: -0.15rem 0 0.85rem;
  padding-left: 1.3rem;
  list-style: disc;
}
.notes-body li { font-size: 0.94rem; margin-bottom: 0.2rem; }
.notes-body li::marker { color: var(--blood); }
.notes-body strong { color: var(--blood); font-weight: 400; }
.notes-body code {
  font: 400 0.82rem/1.4 var(--font-mono);
  background: var(--stock-2);
  padding: 0.1em 0.35em;
  border: 1px solid var(--rule);
}
.notes-close { margin-top: 1.9rem; }

@media (max-width: 620px) {
  h1 { font-size: 2rem; }
  .standfirst { font-size: 1.15rem; }
  .entry-head .grow { display: none; }
}