/* The shared page frame: header with hexagon tabs, footer, home, blog, donation banner and dialog.
   Loaded on every server-rendered page after tokens.css (all colours, the font, radii and spacing
   come from the --dm-* tokens there; see docs/design-system.md) and before /assets/account.css.
   No third-party resources. */

/* Deprecated names used by older page styles (account, lobby, Power word-le, character sheet).
   They only point at the tokens; new code uses --dm-* directly. */
:root {
  --brand: var(--dm-bar);
  --brand-2: var(--dm-bar-raised);
  --cream: var(--dm-on-bar);
  --sage: var(--dm-on-bar-muted);
  --bg: var(--dm-surface);
  --card: var(--dm-surface-raised);
  --text: var(--dm-text);
  --muted: var(--dm-text-muted);
  --border: var(--dm-border);
  --accent: var(--dm-accent);
  --accent-text: var(--dm-on-accent);
  --danger: var(--dm-danger);
  --ok: var(--dm-ok);
  --focus: var(--dm-focus);
}

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* the hex battle mat: faint grid lines plus a soft glow at the top */
  background-color: var(--dm-surface);
  background-image:
    radial-gradient(ellipse 90% 28rem at 50% 0, var(--dm-mat-glow), transparent 75%),
    var(--dm-mat-image);
  background-repeat: no-repeat, repeat;
  background-position:
    0 0,
    0 var(--mat-y, 0px);
  background-size:
    auto,
    var(--dm-hex-tile-width) var(--dm-hex-tile-height);
  color: var(--dm-text);
  line-height: 1.5;
  /* Alegreya Sans is small for its size */
  font-size: 1.0625rem;
  font-family: var(--dm-font-sans);
  font-weight: var(--dm-weight-body);
}
main {
  flex: 1 0 auto;
  width: 100%;
  margin: 0 auto;
  padding: var(--dm-space-5) var(--dm-space-4) var(--dm-space-7);
  box-sizing: border-box;
}
main.narrow {
  max-width: 30rem;
}
main.wide {
  max-width: 60rem;
}
main.full {
  max-width: 78rem;
}
h1,
h2,
h3 {
  font-weight: var(--dm-weight-strong);
  color: var(--dm-heading);
}
h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
}
h2 {
  font-size: 1.4rem;
}
strong,
b,
th,
dt,
label {
  font-weight: var(--dm-weight-strong);
}
a {
  color: var(--dm-link);
}
img {
  max-width: 100%;
  height: auto;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 30;
  padding: var(--dm-space-2) var(--dm-space-4);
  background: var(--dm-on-bar);
  color: var(--dm-bar);
}
.skip-link:focus {
  left: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible {
  outline: var(--dm-focus-width) solid var(--dm-focus);
  outline-offset: var(--dm-focus-offset);
}

/* ---------- hexagon tabs (header menu, sign-in links, menu button) ---------- */
.hex-tab {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0 calc(var(--dm-hex-notch) + 0.7rem);
  margin: 0;
  border: 0;
  background: var(--dm-bar-edge);
  color: var(--dm-on-bar);
  clip-path: var(--dm-hex-clip);
  font: inherit;
  font-size: 0.95rem;
  font-weight: var(--dm-weight-strong);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.hex-tab::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--dm-hex-clip);
  background: var(--dm-bar);
}
.hex-tab:hover {
  background: var(--dm-on-bar-muted);
}
.hex-tab:hover::before {
  background: var(--dm-bar-raised);
}
.hex-tab:focus-visible {
  outline: none;
  background: var(--dm-bar-focus);
}
.hex-tab:focus-visible::before {
  inset: 3px;
  background: var(--dm-bar-raised);
}
.hex-tab[aria-current='page'],
.hex-tab[aria-expanded='true'] {
  background: var(--dm-gold);
  color: var(--dm-on-gold);
}
.hex-tab[aria-current='page']::before,
.hex-tab[aria-expanded='true']::before {
  background: var(--dm-gold);
}
.hex-tab[aria-current='page']:focus-visible::before,
.hex-tab[aria-expanded='true']:focus-visible::before {
  background: var(--dm-gold);
}
.hex-tab[aria-current='page']:focus-visible {
  background: var(--dm-bar-focus);
}
.hex-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.nav-hint {
  font-size: 0.75rem;
  font-weight: var(--dm-weight-body);
}

/* ---------- header ---------- */
.site-header {
  position: relative;
  z-index: 20;
  background-color: var(--dm-bar);
  background-image: var(--dm-mat-dark);
  background-size: var(--dm-hex-tile-width) var(--dm-hex-tile-height);
  /* the header is the first thing on the page (top 0), so the page background's offset puts its
     hexagons on the same grid as the page, the footer band and the footer */
  background-position: 0 var(--mat-y, 0px);
  color: var(--dm-on-bar);
  box-shadow: var(--dm-shadow-md);
}
.site-header-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--dm-space-2) var(--dm-space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dm-space-2) var(--dm-space-4);
}
.site-logo {
  display: block;
  flex: none;
}
.site-logo img {
  display: block;
  height: 2.4rem;
  width: auto;
}
.site-logo:focus-visible {
  outline-color: var(--dm-bar-focus);
}
.site-header.slim {
  border-bottom-width: 2px;
  box-shadow: none;
}
.site-header.slim .site-header-inner {
  flex-wrap: nowrap;
  padding-block: var(--dm-space-1);
  min-height: 2.9rem;
}
.site-header.slim .site-logo img {
  height: 2rem;
}
.slim-back {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 var(--dm-space-3);
  border-radius: var(--dm-radius-pill);
  color: var(--dm-on-bar);
  font-weight: var(--dm-weight-strong);
  text-decoration: none;
}
.slim-back:hover {
  background: var(--dm-bar-raised);
}
.slim-back:focus-visible {
  outline-color: var(--dm-bar-focus);
}
.site-nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dm-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li {
  position: relative;
}
.nav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.caret {
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.35rem solid currentColor;
}
.nav-group-toggle[aria-expanded='true'] .caret {
  transform: rotate(180deg);
}
.nav-group-toggle.is-current {
  background: var(--dm-gold);
  color: var(--dm-on-gold);
}
.nav-group-toggle.is-current::before {
  background: var(--dm-gold);
}
.site-account {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dm-space-1);
}
.site-account .nav-register::before {
  background: var(--dm-on-bar-muted);
}
.site-account .nav-register {
  color: var(--dm-bar);
}
.site-account .nav-register:hover::before {
  background: var(--dm-on-bar);
}
.site-account .nav-register[aria-current='page']::before {
  background: var(--dm-gold);
}
.tier-badge {
  font-size: 0.75rem;
  font-weight: var(--dm-weight-strong);
  text-transform: capitalize;
  padding: 0.1rem 0.6rem;
  --dm-cut: var(--dm-cut-sm);
  --dm-fill: transparent;
  --dm-edge: var(--dm-on-bar-muted);
  color: var(--dm-on-bar);
}
.menu-button {
  display: none;
}
.menu-bars,
.menu-bars::before,
.menu-bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
}
.menu-bars {
  position: relative;
}
.menu-bars::before,
.menu-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.menu-bars::before {
  top: -6px;
}
.menu-bars::after {
  top: 6px;
}
.nav-account {
  max-width: 11rem;
}
.nav-account .hex-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* wide screens (48rem and up): logo left, a compact bar of smaller hexagon tabs (Tools in one
   dropdown, the other pages inline), account links on the right. The dropdown is a disclosure:
   it opens with a click, Enter, Space or the Down arrow, and closes with Escape or when focus
   leaves it. Without JavaScript the tools simply sit inline. */
@media (min-width: 48rem) {
  .site-header .hex-tab {
    --dm-hex-notch: 0.6rem;
    min-height: 2.25rem;
    font-size: 0.9rem;
    padding: 0 calc(var(--dm-hex-notch) + 0.5rem);
  }
  .site-header-inner {
    flex-wrap: nowrap;
  }
  .site-menu {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-space-3);
    min-width: 0;
  }
  .site-nav > ul {
    flex-wrap: nowrap;
  }
  .js .nav-sub {
    display: none;
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 30;
    min-width: 11rem;
    flex-direction: column;
    gap: var(--dm-space-1);
  }
  .js .nav-group.is-open > .nav-sub {
    display: flex;
  }
  .js .nav-sub .hex-tab {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
  html:not(.js) .nav-group-toggle,
  html:not(.js) .caret {
    display: none;
  }
  html:not(.js) .nav-sub {
    display: flex;
    gap: var(--dm-space-1);
  }
  html:not(.js) .site-nav > ul,
  html:not(.js) .site-header-inner {
    flex-wrap: wrap;
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .site-header-inner {
    gap: var(--dm-space-2);
    padding-left: var(--dm-space-3);
    padding-right: var(--dm-space-3);
  }
  .site-header .hex-tab {
    --dm-hex-notch: 0.5rem;
    padding: 0 calc(var(--dm-hex-notch) + 0.3rem);
    font-size: 0.85rem;
  }
  .site-logo img {
    height: 2rem;
  }
  .tier-badge {
    display: none;
  }
}

/* phones: one hexagon menu button opens a tidy panel with every link as a tab (the Tools group is
   open inside it). Without JavaScript (no "js" class on <html>, set by site.js) the panel is
   simply shown under the logo. */
@media (max-width: 47.99rem) {
  .site-header-inner {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .site-menu {
    flex: 1 0 100%;
    padding: var(--dm-space-2) 0 var(--dm-space-3);
  }
  .js .menu-button {
    display: inline-flex;
  }
  .js .site-menu {
    display: none;
  }
  .js .site-menu.is-open {
    display: block;
  }
  .site-nav .nav-group > .nav-group-toggle,
  .caret {
    display: none;
  }
  .site-nav > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dm-space-2);
  }
  .nav-group,
  .nav-sub {
    display: contents;
  }
  .site-nav .hex-tab {
    display: flex;
    width: 100%;
  }
  /* a hint that does not fit beside its label goes under it, inside the hexagon */
  .site-nav .hex-label {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0;
    column-gap: 0.4rem;
  }
  .site-account {
    margin-top: var(--dm-space-3);
    padding-top: var(--dm-space-3);
    border-top: 1px solid var(--dm-bar-edge);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dm-space-2);
  }
  .site-account .hex-tab {
    display: flex;
    width: 100%;
    max-width: none;
  }
  .site-account .tier-badge {
    justify-self: start;
  }
}
@media (min-width: 30rem) and (max-width: 47.99rem) {
  .site-nav > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .site-account {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- footer ---------- */
/* The band above the footer: three rows of hexagons on the SAME grid as the hex mat of the page
   background (same size, same offsets; site.js sets --mat-y so the grid lines up wherever the
   footer lands). Each row is one flat colour, stepping from the page colour toward the footer
   colour, so it reads as hexagons fading in, not a gradient. The last row is the footer colour. */
.footer-band {
  position: relative;
  flex: none;
  height: 144px;
  margin-top: var(--dm-space-7);
  overflow: hidden;
}
.band-row {
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 55.4256px 160px;
  mask-size: 55.4256px 160px;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.band-row-1 {
  background: var(--dm-band-1);
  -webkit-mask-image: url('/media/hexrow-1.svg');
  mask-image: url('/media/hexrow-1.svg');
}
.band-row-2 {
  background: var(--dm-band-2);
  -webkit-mask-image: url('/media/hexrow-2.svg');
  mask-image: url('/media/hexrow-2.svg');
}
.band-row-3 {
  background: var(--dm-band-3);
  -webkit-mask-image: url('/media/hexrow-3.svg');
  mask-image: url('/media/hexrow-3.svg');
}
.site-footer {
  position: relative;
  background-color: var(--dm-footer);
  background-image: var(--dm-mat-dark);
  background-size: var(--dm-hex-tile-width) var(--dm-hex-tile-height);
  /* the footer starts one band (144px) below the grid's origin: the same grid as the band and page */
  background-position: 0 -144px;
  color: var(--dm-on-bar);
  margin-top: 0;
  padding: var(--dm-space-4) var(--dm-space-4) var(--dm-space-5);
}
.site-footer a {
  color: var(--dm-on-bar-muted);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--dm-gold-light);
}
.site-footer a:focus-visible {
  color: var(--dm-gold-light);
  outline: var(--dm-focus-width) solid var(--dm-bar-focus);
  outline-offset: var(--dm-focus-offset);
}
.site-footer :focus-visible {
  outline-color: var(--dm-bar-focus);
}
.footer-columns {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  gap: var(--dm-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .footer-columns {
    grid-template-columns: 8rem 1fr 1fr;
  }
}
.footer-column a {
  display: block;
  padding: 0.3rem 0;
}
.footer-column p {
  margin: 0.4rem 0;
  font-size: 0.9rem;
}
.footer-heading {
  font-size: 1rem;
  margin: 0 0 0.4rem;
  color: var(--dm-on-bar);
}
.footer-logo {
  display: block;
  width: 6rem;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.footer-bottom {
  max-width: 78rem;
  margin: var(--dm-space-5) auto 0;
  padding-top: var(--dm-space-4);
  border-top: 1px solid var(--dm-bar-edge);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dm-space-3) var(--dm-space-5);
}
.footer-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dm-on-bar-muted);
}
.theme-toggle {
  display: none;
  align-items: center;
  gap: var(--dm-space-1);
}
.js .theme-toggle {
  display: inline-flex;
}
.theme-label {
  font-size: 0.85rem;
  color: var(--dm-on-bar-muted);
  margin-right: var(--dm-space-1);
}
.theme-toggle button {
  box-sizing: border-box;
  min-height: 2.75rem;
  min-width: 3.5rem;
  margin: 0;
  padding: 0 var(--dm-space-3);
  --dm-cut: var(--dm-cut-sm);
  --dm-fill: transparent;
  --dm-edge: var(--dm-bar-edge);
  font: inherit;
  font-size: 0.9rem;
  font-weight: var(--dm-weight-strong);
  color: var(--dm-on-bar);
  cursor: pointer;
}
.theme-toggle button:hover {
  --dm-fill: var(--dm-bar-raised);
}
.theme-toggle button[aria-pressed='true'] {
  --dm-fill: var(--dm-on-bar-muted);
  --dm-edge: var(--dm-on-bar-muted);
  color: var(--dm-bar);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.4rem;
  /* its own cut: never the size of the panel it sits in (the hero is extra large) */
  --dm-cut: var(--dm-cut-md);
  --dm-edge-w: 2px;
  --dm-fill: var(--dm-accent);
  --dm-edge: var(--dm-accent);
  font: inherit;
  font-weight: var(--dm-weight-strong);
  text-decoration: none;
  color: var(--dm-on-accent);
  font-size: 1rem;
  cursor: pointer;
  margin: 0;
}
.btn:hover {
  --dm-fill: var(--dm-accent-hover);
  --dm-edge: var(--dm-accent-hover);
}
.btn.secondary {
  --dm-fill: transparent;
  --dm-edge: var(--dm-border-strong);
  color: var(--dm-text);
}
.btn.secondary:hover {
  --dm-fill: var(--dm-surface-sunken);
}
.btn.discord {
  --dm-fill: var(--dm-discord);
  --dm-edge: var(--dm-discord);
  color: var(--dm-on-discord);
}
.btn.discord:hover {
  --dm-fill: var(--dm-discord-hover);
  --dm-edge: var(--dm-discord-hover);
}
.btn img {
  width: 1.4rem;
  height: 1.4rem;
}

/* ---------- donation: banner above the footer, card in the posts grid, dialog ---------- */
.donate-banner {
  padding: var(--dm-space-6) var(--dm-space-4) 0;
}
.donate-frame {
  max-width: 62rem;
  margin: 0 auto;
  padding: 6px;
  --dm-cut: var(--dm-cut-lg);
  background: var(--dm-gold-gradient);
}
.donate-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dm-space-4) var(--dm-space-5);
  padding: var(--dm-space-5);
  --dm-cut: calc(var(--dm-cut-lg) - 0.3rem);
  background-color: var(--dm-bar);
  background-image: var(--dm-mat-dark);
  background-size: var(--dm-hex-tile-width) var(--dm-hex-tile-height);
  color: var(--dm-on-bar);
}
.donate-icon {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.donate-text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--dm-weight-strong);
  line-height: 1.4;
}
.donate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-3);
  align-items: center;
}
.donate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.7rem;
  --dm-fill: var(--dm-gold);
  --dm-edge: var(--dm-gold-light);
  --dm-edge-w: 2px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: var(--dm-weight-strong);
  text-decoration: none;
  color: var(--dm-on-gold);
}
.donate-button:hover {
  --dm-fill: var(--dm-gold-light);
}
.site-header,
.site-footer,
.donate-banner {
  --dm-focus-ring: var(--dm-bar-focus);
}
.donate-hide {
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: var(--dm-weight-strong);
  --dm-fill: transparent;
  --dm-edge: var(--dm-on-bar-muted);
  color: var(--dm-on-bar);
  cursor: pointer;
}
.donate-hide:hover {
  --dm-fill: var(--dm-bar-raised);
}
/* "Hide This" only does something with JavaScript (it opens the dialog) */
.donate-hide {
  display: none;
}
.js .donate-hide {
  display: inline-block;
}
.donate-banner :focus-visible,
.donate-card :focus-visible {
  outline-color: var(--dm-gold);
}
.donate-card :focus-visible {
  outline-color: var(--dm-bar);
}

.dm-dialog {
  box-sizing: border-box;
  width: min(26rem, calc(100vw - 2rem));
  padding: var(--dm-space-5);
  --dm-cut: var(--dm-cut-lg);
  --dm-edge: var(--dm-gold);
  --dm-edge-w: 3px;
  color: var(--dm-text);
}
.dm-dialog::backdrop {
  background: rgba(4, 33, 27, 0.7);
}
.dm-dialog h2 {
  margin: 0 0 var(--dm-space-2);
  font-size: 1.3rem;
}
.dm-dialog p {
  margin: 0 0 var(--dm-space-4);
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-3);
}

/* ---------- home ---------- */
/* the hero: no panel, the words on the left and the screenshot collage on the right (not cropped
   to a shape), straight on the page */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dm-space-5);
  align-items: center;
  margin: 0 0 var(--dm-space-6);
  padding: var(--dm-space-5) 0;
}
@media (min-width: 52rem) {
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--dm-space-6);
    padding: var(--dm-space-6) 0;
  }
}
.hero h1 {
  font-size: 2.4rem;
  margin: var(--dm-space-3) 0;
}
.hero p {
  font-size: 1.15rem;
  max-width: 36rem;
}
.hero .btn:not(.discord) {
  --dm-fill: var(--dm-gold);
  --dm-edge: var(--dm-gold-light);
  color: var(--dm-on-gold);
}
.hero .btn:not(.discord):hover {
  --dm-fill: var(--dm-gold-light);
}
.hero-logo {
  width: 100%;
  max-width: 16rem;
  height: auto;
}
.hero-art {
  display: flex;
  justify-content: center;
}
.hero-image {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-3);
  margin: var(--dm-space-4) 0 0;
}
.tiles {
  display: grid;
  gap: var(--dm-space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--dm-space-7);
}
@media (min-width: 40rem) {
  .tiles {
    grid-template-columns: 1fr 1fr;
  }
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  --dm-cut: var(--dm-cut-lg);
  --dm-fill: var(--dm-bar);
  --dm-edge: var(--dm-bar);
  --dm-edge-w: 3px;
  --dm-focus-ring: var(--dm-gold);
  aspect-ratio: 4 / 3;
  color: #fff;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
@media (min-width: 40rem) {
  .tile {
    aspect-ratio: 16 / 10;
  }
}
/* The picture and the text sit over the tile, so the picture would cover the slanted corners of
   the edge. The slants are drawn again on top of everything (same gradients as the shared
   cut shape in tokens.css). The thumbnail of a post card is
   simply clipped to the inner cut (only its top corners touch the edge). */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* only the four slants: the straight sides are the tile's own border, which nothing covers. The
     padding box starts one border width in, so the squares are moved out by that much. */
  --_o: calc(var(--_b, 1px) * -1);
  background:
    linear-gradient(135deg, var(--_s)) left var(--_o) top var(--_o) / var(--dm-cut) var(--dm-cut)
      no-repeat,
    linear-gradient(225deg, var(--_s)) right var(--_o) top var(--_o) / var(--dm-cut) var(--dm-cut)
      no-repeat,
    linear-gradient(315deg, var(--_s)) right var(--_o) bottom var(--_o) / var(--dm-cut)
      var(--dm-cut) no-repeat,
    linear-gradient(45deg, var(--_s)) left var(--_o) bottom var(--_o) / var(--dm-cut) var(--dm-cut)
      no-repeat;
}
.post-card .thumb {
  --_ci: max(0px, calc(var(--dm-cut) - var(--dm-edge-w, 1px) * 0.586));
  clip-path: polygon(
    var(--_ci) 0,
    calc(100% - var(--_ci)) 0,
    100% var(--_ci),
    100% 100%,
    0 100%,
    0 var(--_ci)
  );
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the tool screenshots keep their interesting part at the top; the bottom sits under the shade */
  object-position: top;
  display: block;
  transition: filter 0.3s ease;
}
.tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(4, 33, 27, 0.95) 0%,
    rgba(4, 33, 27, 0.7) 38%,
    rgba(4, 33, 27, 0) 72%
  );
}
.tile-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: var(--dm-space-4) var(--dm-space-5) var(--dm-space-5);
}
.tile-title {
  display: block;
  font-size: 1.7rem;
  font-weight: var(--dm-weight-strong);
  line-height: 1.15;
  margin-bottom: 0.3rem;
}
.tile-desc {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 34rem;
}
.tile::after {
  content: '\2192';
  position: absolute;
  top: var(--dm-space-3);
  right: var(--dm-space-3);
  /* a regular pointy hexagon is 0.866 as wide as it is tall: a square box would squash it */
  width: 2.771rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: var(--dm-hex-clip-pointy);
  background: var(--dm-gold);
  color: var(--dm-on-gold);
  font-size: 1.3rem;
  font-weight: var(--dm-weight-strong);
  opacity: 0.9;
  transition: transform 0.2s ease;
}
.tile:hover,
.tile:focus-visible {
  --dm-edge: var(--dm-gold);
  transform: translateY(-3px);
}
.tile:hover img,
.tile:focus-visible img {
  filter: brightness(1.15);
}
.tile:hover::after,
.tile:focus-visible::after {
  opacity: 1;
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .tile,
  .tile img,
  .tile::after {
    transition: none;
  }
  .tile:hover,
  .tile:focus-visible,
  .tile:hover::after,
  .tile:focus-visible::after {
    transform: none;
  }
}

/* ---------- post cards ---------- */
.post-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--dm-space-5);
  display: grid;
  gap: var(--dm-space-5);
  grid-template-columns: minmax(0, 1fr);
}
/* the blog list: 1 card per row on phones, 2 on tablets, 3 from 64rem (a 16 inch laptop shows 3) */
@media (min-width: 40rem) {
  .post-grid:not(.big):not(.small) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .post-grid:not(.big):not(.small) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dm-space-6);
  }
}
.post-grid:not(.big):not(.small) .post-card .post-title {
  font-size: 1.3rem;
}
.post-grid:not(.big):not(.small) .post-card .post-excerpt {
  font-size: 1rem;
}
.post-grid:not(.big):not(.small) .post-card .post-card-body {
  padding: var(--dm-space-4) var(--dm-space-5) var(--dm-space-5);
  gap: 0.5rem;
}
.post-grid > li {
  display: flex;
  min-width: 0;
}
.post-grid > li > .post-card {
  flex: 1;
}
.post-grid.big {
  grid-template-columns: 1fr;
}
.post-grid.small {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dm-space-4);
}
@media (min-width: 40rem) {
  .post-grid.big {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 56rem) {
  .post-grid.small {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.post-card {
  display: flex;
  flex-direction: column;
  --dm-cut: var(--dm-cut-lg);
  /* the same width at rest and on hover: only the colour changes, nothing shifts inside */
  --dm-edge-w: 2px;
  overflow: hidden;
  color: var(--dm-text);
  text-decoration: none;
  transition: transform 0.2s ease;
}
/* the same hover as the home tiles: the card lifts, the edge takes the highlight colour and the
   picture brightens */
a.post-card:hover,
a.post-card:focus-visible {
  --dm-edge: var(--dm-accent);
  transform: translateY(-3px);
}
a.post-card:hover .thumb img,
a.post-card:focus-visible .thumb img {
  filter: brightness(1.15);
}
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-card .thumb img {
    transition: none;
  }
  a.post-card:hover,
  a.post-card:focus-visible {
    transform: none;
  }
}
.post-card .thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--dm-bar-raised), var(--dm-bar));
}
.post-card .thumb img {
  transition: filter 0.3s ease;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card .post-card-body {
  padding: var(--dm-space-3) var(--dm-space-4) var(--dm-space-4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.post-card .post-title {
  font-size: 1.1rem;
  font-weight: var(--dm-weight-strong);
  line-height: 1.3;
  color: var(--dm-heading);
}
.post-card .post-excerpt {
  color: var(--dm-text-muted);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card .post-more {
  margin-top: auto;
  color: var(--dm-link);
  font-weight: var(--dm-weight-strong);
  font-size: 0.9rem;
}
.big .post-card .post-title {
  font-size: 1.3rem;
}
.post-card.compact .thumb {
  aspect-ratio: 16 / 10;
}
.post-card.compact .post-card-body {
  padding: var(--dm-space-2) var(--dm-space-3) var(--dm-space-3);
}
.post-card.compact .post-title {
  font-size: 1rem;
}
.post-card.donate-card {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--dm-space-4);
  gap: 0.2rem;
  min-height: 11rem;
  color: var(--dm-on-gold);
  --dm-fill: var(--dm-gold);
  --dm-edge: var(--dm-gold-shadow);
  --dm-edge-w: 3px;
}
.donate-card .donate-icon {
  width: 3rem;
  height: 3rem;
}
.donate-card-title {
  margin: 0.3rem 0 0;
  font-size: 1.15rem;
  font-weight: var(--dm-weight-strong);
  line-height: 1.25;
}
.donate-card-text {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}
.donate-card .donate-button {
  --dm-fill: var(--dm-bar);
  --dm-edge: var(--dm-bar);
  color: var(--dm-on-bar);
}
.donate-card .donate-button:hover {
  --dm-fill: var(--dm-bar-raised);
}
.section-actions {
  margin: var(--dm-space-5) 0 0;
  text-align: center;
}
.home-posts h2 {
  font-size: 1.6rem;
  margin: 0 0 var(--dm-space-4);
}

/* ---------- blog ---------- */
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--dm-space-5);
}
.category-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  --dm-cut: var(--dm-cut-sm);
  --dm-edge: var(--dm-border-strong);
  text-decoration: none;
  color: var(--dm-text);
  font-size: 0.95rem;
}
.category-list a[aria-current='true'] {
  --dm-fill: var(--dm-accent);
  --dm-edge: var(--dm-accent);
  color: var(--dm-on-accent);
}
.pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--dm-space-4);
  margin-top: var(--dm-space-6);
  align-items: center;
}
.post-meta {
  color: var(--dm-text-muted);
  font-size: 0.95rem;
  margin: 0 0 var(--dm-space-4);
}
.post-meta a {
  color: var(--dm-link);
}
.prose {
  overflow-wrap: anywhere;
  max-width: 46rem;
  margin: 0 auto;
  font-size: 1.05rem;
}
/* the page heading (and a post's date line) sits in the same centred column as the text under it */
main > h1:has(+ .prose),
[data-page='post'] main > h1,
[data-page='post'] .post-meta {
  box-sizing: border-box;
  max-width: 46rem;
  margin-inline: auto;
}
.prose img {
  --dm-cut: var(--dm-cut-sm);
  display: block;
  margin: var(--dm-space-4) auto;
}
.prose figure {
  margin: var(--dm-space-5) 0;
}
.prose figcaption {
  text-align: center;
  color: var(--dm-text-muted);
  font-size: 0.9rem;
}
.prose blockquote {
  margin: var(--dm-space-4) 0;
  padding: 0.25rem var(--dm-space-4);
  border-left: 4px solid var(--dm-accent);
  color: var(--dm-text-muted);
}
.prose pre {
  overflow-x: auto;
  padding: var(--dm-space-3);
  --dm-cut: var(--dm-cut-sm);
  --dm-fill: var(--dm-surface-raised);
}
.prose code {
  font-family: var(--dm-font-mono);
  font-size: 0.92em;
}
.prose table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.prose th,
.prose td {
  border: 1px solid var(--dm-border);
  padding: 0.4rem 0.7rem;
  text-align: left;
  /* whole words in table cells (the prose's break-anywhere split "Contract" on phones);
     a table that is still too wide scrolls inside its own box */
  overflow-wrap: normal;
  hyphens: auto;
}
@media (max-width: 30rem) {
  .prose table {
    font-size: 0.95rem;
  }
  .prose th,
  .prose td {
    padding: 0.35rem 0.45rem;
  }
}
.prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.prose a {
  color: var(--dm-link);
}
.prose h2,
.prose h3 {
  margin-top: var(--dm-space-6);
}
.hero-figure {
  max-width: 46rem;
  margin: 0 auto var(--dm-space-5);
}
.hero-figure img {
  width: 100%;
  --dm-cut: var(--dm-cut-lg);
  display: block;
}
.post-nav {
  max-width: 46rem;
  margin: var(--dm-space-6) auto 0;
  display: flex;
  justify-content: space-between;
  gap: var(--dm-space-4);
  flex-wrap: wrap;
}
.post-nav a {
  max-width: 20rem;
}
.sample-note {
  max-width: 46rem;
  margin: 0 auto var(--dm-space-4);
  padding: var(--dm-space-3) var(--dm-space-4);
  border: 1px dashed var(--dm-border-strong);
  color: var(--dm-text-muted);
}

/* ---------- about page ---------- */
.page-about main > h1 {
  text-align: center;
  font-size: 2.4rem;
}
.page-about main {
  max-width: 64rem;
}
.about-lead {
  margin: 0 0 var(--dm-space-5);
  padding: var(--dm-space-5);
  background-color: var(--dm-bar);
  background-image: var(--dm-mat-dark);
  background-size: var(--dm-hex-tile-width) var(--dm-hex-tile-height);
  color: var(--dm-on-bar);
}
.about-lead .lead {
  margin: 0 auto;
  max-width: 44rem;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: var(--dm-weight-strong);
  text-align: center;
}
@media (min-width: 40rem) {
  .about-lead {
    padding: var(--dm-space-7) var(--dm-space-6);
  }
  .about-lead .lead {
    font-size: 1.55rem;
  }
}
.about-stats,
.about-features {
  list-style: none;
  margin: 0 0 var(--dm-space-6);
  padding: 0;
  display: grid;
  gap: var(--dm-space-4);
}
.about-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-features {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .about-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .about-stats,
  .about-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--dm-space-4);
  --dm-edge: var(--dm-border-strong);
}
.stat-number {
  font-size: 2.6rem;
  font-weight: var(--dm-weight-strong);
  line-height: 1.1;
  color: var(--dm-accent);
}
.stat-label {
  color: var(--dm-text-muted);
}
.about-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about-feature svg {
  width: 4.5rem;
  height: 4.5rem;
}
.about-feature .hex-bg {
  fill: var(--dm-bar);
  stroke: var(--dm-gold);
  stroke-width: 3;
  stroke-linejoin: round;
}
.about-feature .hex-glyph {
  fill: none;
  stroke: var(--dm-gold-light);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-feature h3 {
  margin: var(--dm-space-3) 0 var(--dm-space-1);
  font-size: 1.15rem;
}
.about-feature p {
  margin: 0;
  color: var(--dm-text-muted);
}
.about-quote {
  margin: 0 auto var(--dm-space-6);
  max-width: 48rem;
  padding: var(--dm-space-4) 0 var(--dm-space-4) var(--dm-space-5);
  border-left: 0.5rem solid var(--dm-gold);
}
.about-quote p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.35;
  font-weight: var(--dm-weight-strong);
  color: var(--dm-heading);
}
.page-about .prose {
  --dm-cut: var(--dm-cut-lg);
  padding: var(--dm-space-5);
}
.page-about .prose > p {
  margin: 0 0 var(--dm-space-4);
}
@media (min-width: 40rem) {
  .page-about .prose {
    padding: var(--dm-space-6);
  }
}
.about-callouts {
  display: grid;
  gap: var(--dm-space-4);
  margin-top: var(--dm-space-6);
  --dm-hex-notch: 1.6rem;
}
@media (min-width: 40rem) {
  .about-callouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* coloured hexagon-shaped callouts */
.about-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2rem;
  min-height: 7.5rem;
  padding: var(--dm-space-4) calc(var(--dm-hex-notch) + 1rem);
  text-decoration: none;
  clip-path: var(--dm-hex-clip);
  border: 0;
  background: var(--dm-bar);
  color: var(--dm-on-bar);
}
.about-callout.callout-gold {
  background: var(--dm-gold);
  color: var(--dm-on-gold);
}
.about-callout.callout-green {
  background: var(--dm-bar);
}
.about-callout:hover {
  filter: brightness(1.12);
}
.about-callout:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 4px var(--dm-focus-ring);
}
.callout-title {
  font-size: 1.35rem;
  font-weight: var(--dm-weight-strong);
}

/* The serif of the headings, the menu tabs and the buttons; everything else is the text face. Last in
   the file because several rules above reset the font with `font: inherit`. */
h1,
h2,
h3,
h4,
.hex-tab,
.btn,
.donate-button,
.donate-hide,
.plan-flag,
.tile-title,
.plan-name,
.plan-price,
.stat-number,
.footer-heading,
.theme-toggle button {
  font-family: var(--dm-font-display);
  /* Alegreya's own figures are old-style (some drop below the line): prices and counts want lining */
  font-variant-numeric: lining-nums;
}