/* ============================================================
   GateIron — gateiron.css
   
   Image paths are ../image/ (this file lives in /css/).
   Palette: warm Pacific-NW earthy — clay, pine, sand, paper.
   Fonts:   Fraunces (headings) + Hanken Grotesk (body text).
   ============================================================ */
 
/* The palette - in base.css since 2026-09-10 (C5). */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html { scroll-behavior: smooth; }
 
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
 
/* subtle paper grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  /* Faint film-grain texture, embedded as an inline SVG image (data URI).
     This value must stay on one line — a URL can't be split across lines. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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%;
  display: block;
}
 
a { color: inherit; }
 
h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
 
/* .wrap - in base.css since 2026-09-10 (C5). */
/* The buttons (.btn, .btn-primary, .nav .btn) - in base.css since 2026-09-10 (C5). */
.btn-ghost {
  background: transparent;
  border-color: rgba(245, 239, 227, 0.55);
  color: #fbf7ee;
}
 
.btn-ghost:hover {
  background: rgba(245, 239, 227, 0.12);
  transform: translateY(-2px);
}
 
/* .btn-line - in base.css since 2026-09-10 (C5). */
/* The header, .nav, .brand, .nav-actions - in base.css since 2026-09-10 (C5). */
/* ---------------- cover ---------------- */
.cover {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: #fbf7ee;
  overflow: hidden;
}
 
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cover-img);
  background-size: cover;
  background-position: center 38%;
  transform: scale(1.05);
  animation: slowzoom 18s ease-out forwards;
}
 
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 14, 0.42) 0%,
    rgba(20, 17, 14, 0.05) 32%,
    rgba(24, 18, 13, 0.55) 78%,
    rgba(20, 15, 11, 0.82) 100%
  );
}
 
@keyframes slowzoom {
  to { transform: scale(1); }
}
 
.cover-content {
  position: relative;
  z-index: 2;
  padding: 0 0 8vh;
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
}
 
.cover-content .wrap { padding: 0 28px; }
 
.cover-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.1rem;
}
 
/* .cover-label::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--sand);
  display: inline-block;
} */
 
.cover h1 {
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  max-width: 14ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
 
.cover h1 em {
  font-style: italic;
  color: #f1d8b6;
}
 
.cover p.cover-lead {
  max-width: 46ch;
  margin: 1.4rem 0 2rem;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  color: rgba(251, 247, 238, 0.92);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}
 
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
 
/* cover load stagger */
.reveal-on-load {
  opacity: 0;
  transform: translateY(22px);
  animation: fade-up 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
 
.cover .cover-label { animation-delay: 0.15s; }
.cover h1 { animation-delay: 0.3s; }
.cover p.cover-lead { animation-delay: 0.5s; }
.cover .btn-row { animation-delay: 0.68s; }
 
@keyframes fade-up {
  to {
    opacity: 1;
    transform: none;
  }
}
 
/* ---------------- generic section ---------------- */
section { position: relative; }
 
.section-pad { padding: clamp(64px, 9vw, 118px) 0; }
 
.section-label {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-dark);
  display: inline-block;
  margin-bottom: 1rem;
}
 
.h2-size {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  max-width: 18ch;
  text-wrap: pretty;
}
 
.section-lead {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  color: var(--ink-light);
  max-width: 54ch;
}
 
/* ---------------- manifesto ---------------- */
.manifesto {
  background: var(--pine-dark);
  color: #f3ecdd;
  text-align: center;
  position: relative;
  overflow: hidden;
}
 
.manifesto::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 82%);
  aspect-ratio: 745/482;
  /* Was '..\image\gateironLogoLight.png' - Windows backslashes and a lowercase i, so the browser
     asked for "css/..imagegateironLogoLight.png" and got a 404 on every page (found 2026-08-22 in
     the console while testing the definitions dialog). The file is gateIronLogoLight.png. */
  background: url('../image/gateIronLogoLight.png') center/contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
 
.manifesto .wrap {
  max-width: 880px;
  position: relative;
  z-index: 1;
}
 
.manifesto .quotemark {
  font-family: 'Fraunces', serif;
  font-size: 5rem;
  line-height: 0;
  color: var(--clay);
  display: block;
  height: 0;
  transform: translateY(0.35em);
}
 
.manifesto blockquote {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 24ch;
  text-wrap: balance;
}
 
.manifesto cite {
  display: block;
  margin-top: 1.8rem;
  font-family: 'Hanken Grotesk', sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sand);
  font-size: 0.98rem;
}
 
.manifesto cite span {
  display: block;
  font-weight: 500;
  color: rgba(243, 236, 221, 0.6);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}
 
/* ---------------- how it works ---------------- */
.how-it-works .section-head {
  margin-bottom: 1.6rem;
  max-width: 60ch;
}
 
.how-it-works .intro {
  max-width: 66ch;
  margin: 0 0 3rem;
}
 
.how-it-works .intro p {
  color: var(--ink-light);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.1rem;
}
 
.how-it-works .intro p:last-child { margin-bottom: 0; }
 
.how-it-works .intro em {
  font-style: italic;
  color: var(--ink);
}
 
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
 
.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 38px 36px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
 
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(42, 37, 32, 0.08), 0 26px 46px -18px rgba(42, 37, 32, 0.28);
}
 
.card .card-label {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clay);
}
 
.card.card-featured { background: linear-gradient(155deg, #fbf7ee, #f6ead4); }
 
.card.card-featured::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(187, 90, 49, 0.18), transparent 70%);
}
 
.card h3 {
  font-size: 1.55rem;
  margin: 1rem 0 0.7rem;
}

 
.card p {
  color: var(--ink-light);
  font-size: 1.02rem;
}
 
.card .card-link {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  color: var(--clay-dark);
  text-decoration: none;
}
 
.card .card-link:hover { text-decoration: underline; }
.card .card-link .arrow { transition: transform 0.18s; }
.card .card-link:hover .arrow { transform: translateX(4px); }
 
.pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clay);
  padding: 0.3em 0.7em;
  border-radius: 999px;
  margin-bottom: 1rem;
}
 
.pill.alt {
  background: var(--pine);
  color: #f3ecdd;
}

.card .pill {
  margin-bottom: 0;
  vertical-align: middle;
}
 
/* ---------------- marquee feature ---------------- */
.feature { background: var(--paper-dark); }
 
.feature .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
 
.feature .figure {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3/2;
}
 
.feature .figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
 
.feature .figure:hover img { transform: scale(1.04); }
 
.feature .figure figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(20, 17, 14, 0.62);
  backdrop-filter: blur(4px);
  color: #f3ecdd;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4em 0.8em;
  border-radius: 999px;
}
 
.feature h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  margin-bottom: 1rem;
}
 
.feature h2 em {
  font-style: italic;
  color: var(--clay-dark);
}
 
.feature p {
  color: var(--ink-light);
  font-size: 1.08rem;
  max-width: 44ch;
  margin-bottom: 1rem;
}
 
/* ---------------- category grid ---------------- */
.categories .section-head {
  text-align: center;
  margin: 0 auto 3.2rem;
  max-width: 60ch;
}
 
.categories .section-head .section-lead { margin: 1rem auto 0; }
 
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
 
.tile {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 30px 28px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
 
.tile:hover {
  transform: translateY(-4px);
  border-color: rgba(187, 90, 49, 0.4);
  box-shadow: var(--shadow);
}
 
.icon {
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
  color: var(--clay);
}
 
.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
 
.tile h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}
 
.tile p {
  font-size: 0.96rem;
  color: var(--ink-lighter);
}
 
/* ---------------- principles ---------------- */
.principles {
  background: var(--pine);
  color: #f3ecdd;
}
 
.principles .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 80px);
}
 
.principles h3 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: #fff;
  margin-bottom: 0.7rem;
}
 
.principles h3 .accent-dot { color: var(--clay); }
 
.principles p {
  color: rgba(243, 236, 221, 0.82);
  font-size: 1.06rem;
  max-width: 42ch;
}
 
/* ---------------- about ---------------- */
.about .grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
 
.about .portrait { position: relative; }
 
.about .portrait img {
  border-radius: 18px;
  box-shadow: var(--shadow);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3/3.4;
}
 
.about .portrait .badge {
  position: absolute;
  right: -14px;
  bottom: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
  text-align: center;
}
 
.about .portrait .badge b {
  font-family: 'Fraunces', serif;
  display: block;
  font-size: 1.4rem;
  color: var(--clay-dark);
}
 
.about .portrait .badge span {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-lighter);
}
 
.about h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin-bottom: 1.1rem;
}
 
.about p {
  color: var(--ink-light);
  font-size: 1.08rem;
  margin-bottom: 1rem;
  max-width: 52ch;
}
 
.about p .name {
  font-weight: 600;
  color: var(--ink);
}
 
/* ---------------- closing CTA ---------------- */
.closing-section {
  position: relative;
  color: #fbf7ee;
  text-align: center;
  overflow: hidden;
}
 
.closing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cta-img);
  background-size: cover;
  background-position: center 30%;
}
 
.closing-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 19, 14, 0.82), rgba(35, 25, 16, 0.9));
}
 
.closing-section .wrap {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
 
.closing-section h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin-bottom: 1rem;
}
 
.closing-section h2 em {
  font-style: italic;
  color: #f1d8b6;
}
 
.closing-section p {
  color: rgba(251, 247, 238, 0.9);
  font-size: 1.12rem;
  max-width: 46ch;
  margin: 0 auto 2rem;
}
 
.closing-section .btn-row { justify-content: center; }
 
/* The footer - in base.css since 2026-09-10 (C5). */
/* ---------------- scroll reveal ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
 
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
 
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }
.reveal.delay-5 { transition-delay: 0.4s; }
.reveal.delay-6 { transition-delay: 0.48s; }
 
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-on-load {
    opacity: 1!important;
    transform: none!important;
    animation: none!important;
    transition: none!important;
  }
  .cover::before { animation: none; }
}
 
/* ---------------- responsive ---------------- */
@media (max-width: 860px) {
  .cards, .feature .grid, .principles .two-col, .about .grid, .tiles { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .feature .grid .figure { order: -1; }
  .about .portrait .badge { right: 14px; }
}
 
/* The brand and sign-in breakpoints - in base.css since 2026-09-10 (C5). */
@media (max-width: 520px) {
  .tiles { grid-template-columns: 1fr; }
  .cover { min-height: 88vh; }
}

/* ---------------- tools listing (games/index.html) ----------------

   One row per tool: the button in a narrow left column, a line or two saying what
   the thing is in a wide right one. A table rather than a grid because that is what
   this is - a list of things with the same two facts about each - and it degrades to
   a sensible stacked order with no styling at all.

   Invisible by design: no borders, no zebra, no header row. The reset at the top of
   this file already strips table margins/padding, so everything here is additive. */
.tools-table {
  border-collapse: collapse;
  width: 100%;
  /* Jeff, 2026-08-09: "the existing button is too close to the paragraph above it".
     Sits against .section-lead, which has no bottom margin of its own here. */
  margin-top: 1.75rem;
}

.tools-table td {
  vertical-align: middle;
  padding: 0.6rem 0;
}

/* width: 1% + nowrap collapses this column onto its content - the button decides how
   wide it is, and the description gets every remaining pixel. A fixed width would be
   a guess that breaks the first time a button's label changes length. */
.tools-table .tool-action {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding-right: 1.5rem;
}

/* Every button fills the action column, and the column is already shrink-to-fit on its
   widest member - so the widest label (DDOCraft's, which Jeff called the perfect size)
   sets one shared size and the shorter ones grow to match. No hardcoded width to go
   stale when a label changes. */
.tools-table .tool-action .btn {
  width: 100%;
  justify-content: center;
}

.tools-table .tool-about {
  color: var(--ink-light);
  line-height: 1.55;
}

/* No display property on the note - it carries the `hidden` attribute when the
   visitor is signed in, and a display rule here would override it and show it to
   everyone. */
.tools-table .tool-about .form-note {
  margin-top: 0.5rem;
}

/* Stacked on a narrow screen: side by side, the description column gets squeezed to
   about three words per line. Button first, then its description, which is the same
   reading order the table already has. */
@media (max-width: 620px) {
  .tools-table, .tools-table tbody, .tools-table tr, .tools-table td { display: block; width: auto; }
  /* width/white-space repeated here on purpose: .tools-table .tool-action outranks the
     .tools-table td reset above, so the shrink-to-content column would otherwise stay 1% wide
     with the button hanging out of its box. */
  .tools-table .tool-action {
    width: auto;
    white-space: normal;
    text-align: left;
    padding-right: 0;
    padding-bottom: 0.2rem;
  }
  /* Stacked, the cell is the full page width - a 100%-wide button here would be a
     banner. Content-sized again, like every other button on a phone. */
  .tools-table .tool-action .btn { width: auto; }
  .tools-table tr + tr { margin-top: 1.25rem; }
}

/* The accessibility helpers - in base.css since 2026-09-10 (C5). */
/* ---------------- contact page ---------------- */
.contact-section {
  background-color: var(--paper);                 /* fallback if the image is missing */
  background-image:
    linear-gradient(
      180deg,
      rgba(245, 239, 227, 0.92) 0%,
      rgba(245, 239, 227, 0.74) 16%,
      rgba(245, 239, 227, 0)    40%,
      rgba(245, 239, 227, 0)    66%,
      rgba(245, 239, 227, 0.62) 88%,
      rgba(245, 239, 227, 0.94) 100%
    ),
    url('../image/20251121_FoggyValley.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-head { margin-bottom: clamp(28px, 4vw, 44px); }

.contact-head .section-lead { margin-top: 1rem; }

.contact-layout {
  max-width: 660px;
  margin: 0 auto;
}

/* .form-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 40px);
} */

.form-panel {
  background: rgba(238, 238, 238, 0.00);
/*   backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);  /* Safari still wants the prefix */

}

.field { margin-bottom: 20px; }

/* .field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-light);
  margin-bottom: 7px;
} */

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fbf7ee;                              /* light cream — matches the cover's light text */
  text-shadow: 0 1px 3px rgba(20, 17, 14, 0.55);
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-lightest);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 0.7em 0.85em;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.field textarea {
  min-height: 152px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--clay);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(187, 90, 49, 0.14);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-lightest); }

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 4px;
}

.form-actions .btn { cursor: pointer; }

.form-actions .btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.form-note {
  font-size: 0.88rem;
  color: var(--ink-darker);
}

/* Honeypot — hidden from people, visible to dumb bots. */
.contact-extra {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#form-status {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  display: none;
}

#form-status.is-shown { display: block; }

#form-status.success {
  background: #e6ecdb;
  border: 1px solid #c4cdb3;
  color: var(--pine-dark);
}

#form-status.error {
  background: #f7e2dd;
  border: 1px solid #e3b3a6;
  color: #842016;
}

.contact-alt {
  margin-top: 26px;
  font-size: 0.96rem;
  color: var(--ink-light);
}

.contact-alt a {
  color: var(--clay-dark);
  font-weight: 600;
  text-decoration: none;
}

.contact-alt a:hover { text-decoration: underline; }

/* ---------------- long-form text ----------------
   For pages that are mostly words: policies, terms, about, help. The site's
   section styles are built for short marketing copy inside a 1140px wrap,
   which is far too wide to read a paragraph across, and they set no rhythm
   between headings and body text. This does both.

   Measure is capped in ch rather than px so it tracks the font size.
   Vertical spacing is set on one side only — margin-top on headings,
   margin-bottom on paragraphs — so margins never collapse unpredictably and
   the gaps stay even regardless of what follows what. */

.prose {
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.7;
}

.prose > h1 {
  margin: 0 0 0.35em;
}

.prose > .prose-meta {
  color: var(--ink-light);
  font-size: 0.94rem;
  margin: 0 0 2.6em;
}

.prose > h2 {
  font-size: 1.28rem;
  margin: 2.4em 0 0.6em;
}

.prose > h2:first-of-type {
  margin-top: 0;
}

.prose > p {
  margin: 0 0 1.1em;
}

.prose > ul {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

.prose > ul > li {
  margin-bottom: 0.55em;
}

.prose > ul > li:last-child {
  margin-bottom: 0;
}

.prose a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The account menu - in base.css since 2026-09-10 (C5). */

/* The games landing page dims the DDOCraft link for a signed-out visitor. It used to set
   opacity and cursor from an inline script, which the CSP forbids; the script is
   webroot/js/gamesLanding.js now and it only adds this class (TODO 503). */
.tools-table a.is-signed-out {
  opacity: 0.65;
  cursor: default;
}