/* Ashquill site styles. Design contract: Ashquill-redesign-notes/design-contract.md
   System fonts only. No external requests. */

:root {
  --bg: #0e141c;
  --panel: #151d28;
  --panel-2: #1b2533;
  --line: #2a3544;
  --line-strong: #5d6b7d;
  --text: #e6dfcc;
  --muted: #a79f8a;
  --gold: #e8c268;
  --gold-2: #f1d58a;
  --ember: 240, 160, 75; /* rgb triplet, glow only */
  --ink: #0e141c;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --gutter: 16px;
  --prose: 720px;
  --wide: 960px;
  --radius: 4px;
  color-scheme: dark;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s5); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 var(--serif);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--gold-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: normal; line-height: 1.2; color: var(--gold); }
h1 { font-size: 2.25rem; margin: 0 0 var(--s2); letter-spacing: .02em; }
h2 { font-size: 1.5rem; margin: 0 0 var(--s4); letter-spacing: .03em; }
h3 { font-size: 1.25rem; margin: 0 0 var(--s2); }

p { margin: 0 0 var(--s4); }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .05em .4em;
  color: var(--gold-2);
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: var(--s3); top: -100px; z-index: 10;
  background: var(--gold); color: var(--ink);
  font: 600 1rem/1 var(--sans); padding: 14px 18px; border-radius: var(--radius);
  text-decoration: none;
}
.skip:focus { top: var(--s3); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container--prose { max-width: calc(var(--prose) + 2 * var(--gutter)); }

/* ---------- Header / nav ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s4); padding-top: var(--s3); padding-bottom: var(--s2);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px;
  color: var(--gold); text-decoration: none; font-size: 1.125rem; letter-spacing: .2em;
}
.brand img { width: 36px; height: 36px; border-radius: 50%; display: block; }
.site-nav { order: 3; flex-basis: 100%; }
.site-nav ul { list-style: none; margin: 0 0 0 calc(-1 * var(--s3)); padding: 0; display: flex; flex-wrap: wrap; }
.site-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3);
  color: var(--muted); text-decoration: none; font: 1rem/1 var(--sans);
}
.site-nav a:hover { color: var(--gold-2); }
.site-nav a[aria-current="page"] { color: var(--gold-2); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }

@media (min-width: 760px) {
  .site-header .container { flex-wrap: nowrap; padding-bottom: var(--s3); }
  .site-nav { order: 0; flex-basis: auto; margin-left: auto; }
  .site-nav ul { margin: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  background: var(--gold); color: var(--ink);
  font: 600 1rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; text-align: center;
  border: 1px solid var(--gold); border-radius: var(--radius);
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn:focus-visible { outline-offset: 3px; }
.btn--small { min-height: 44px; padding: 0 var(--s4); font-size: .9375rem; }
.btn svg { width: 18px; height: 18px; flex: none; }

.text-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s2);
  font: 1rem/1.2 var(--sans); color: var(--gold-2);
}

/* ---------- Ornament rule ---------- */
.rule {
  position: relative; height: 12px; margin: 0 auto; max-width: 420px;
  display: block; border: 0;
}
.rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: .7;
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 4px var(--bg);
}

/* ---------- Sections ---------- */
.section { padding: var(--s8) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: var(--s6); max-width: 62ch; }
.kicker {
  display: block; font: 600 .8125rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s2);
}
.lede { color: var(--text); font-size: 1.125rem; }
.note { color: var(--muted); font-size: .9375rem; }

@media (min-width: 900px) { .section { padding: var(--s9) 0; } }

/* ---------- Hero ---------- */
.hero { padding: var(--s7) 0 var(--s8); text-align: center; }
.hero-logo {
  width: 168px; height: 168px; margin: 0 auto var(--s5); border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px rgba(232, 194, 104, .35), 0 0 70px rgba(var(--ember), .22);
}
.hero h1 {
  font-size: clamp(2.25rem, 9vw, 3.25rem); letter-spacing: .22em; text-transform: uppercase;
  margin: 0 0 var(--s2); padding-left: .22em; /* balance trailing tracking */
}
.hero .kicker { margin-bottom: var(--s4); letter-spacing: .32em; color: var(--muted); }
.hero .rule { margin-bottom: var(--s5); max-width: 280px; }
.hero .tagline { font-size: 1.25rem; font-style: italic; color: var(--text); margin-bottom: var(--s3); }
.hero .what { max-width: 52ch; margin: 0 auto var(--s5); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: center; align-items: center; }

@media (min-width: 600px) { .hero-logo { width: 192px; height: 192px; } .hero { padding-top: var(--s8); } }

/* ---------- Feature ledger ---------- */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.ledger > li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 var(--s3);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
.ledger .num {
  font-family: var(--serif); color: var(--gold); font-size: 1.125rem; letter-spacing: .05em;
  padding-top: 2px; border-right: 1px solid var(--line); text-align: left;
}
.ledger h3 { font-size: 1.25rem; margin-bottom: var(--s2); }
.ledger p { margin: 0 0 var(--s3); }
.ledger .try { margin: 0; font: .9375rem/1.4 var(--sans); color: var(--muted); }
.ledger .try code { font-size: .9375rem; }

@media (min-width: 720px) {
  .ledger { grid-template-columns: 1fr 1fr; column-gap: var(--s7); border-top: 0; }
  .ledger > li { border-top: 1px solid var(--line); border-bottom: 0; }
  .ledger > li:last-child { grid-column: 1 / -1; }
  .ledger > li:last-child > div { max-width: 60ch; }
}

.sourced { margin-top: var(--s5); color: var(--muted); font-size: .9375rem; max-width: 62ch; }

/* ---------- Screenshots ---------- */
.shots { display: grid; grid-template-columns: 1fr; gap: var(--s6); margin: 0; padding: 0; list-style: none; }
.shot { margin: 0; }
.shot-frame {
  padding: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px rgba(232, 194, 104, .25);
}
.shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: auto 4 / 3; /* natural ratio once the file exists; 4:3 box if it is missing */
  object-fit: contain; background: var(--panel-2);
  color: var(--muted); font: italic .875rem/1.4 var(--serif); /* alt text styling if the image is missing */
}
.shot figcaption { margin-top: var(--s3); color: var(--muted); font-style: italic; font-size: .9375rem; line-height: 1.5; }
.shot figcaption code { font-style: normal; }

.shot-frame > a { display: block; }
@media (min-width: 900px) {
  .shots { grid-template-columns: repeat(2, 1fr); gap: var(--s5); align-items: start; }
  .shots > li:last-child { grid-column: 1 / -1; } /* the wide Daggerfall shot gets a full row so its text stays readable */
}

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-left: 60px; min-height: 44px; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font: 1.375rem/1 var(--serif); color: var(--gold);
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--line);
}
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 48px; bottom: calc(-1 * var(--s5) + 4px); width: 1px; background: var(--line);
}
.steps h3 { font-size: 1.125rem; margin-bottom: var(--s1); color: var(--gold-2); }
.steps p { margin: 0 0 var(--s2); }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .steps > li { padding-left: 0; padding-top: 60px; }
  .steps > li:not(:last-child)::after { left: 56px; right: calc(-1 * var(--s6)); top: 22px; bottom: auto; width: auto; height: 1px; }
}

.aside {
  margin-top: var(--s6); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; max-width: 62ch;
}
.aside p { margin: 0; }
.aside p + p { margin-top: var(--s3); }
.aside strong { color: var(--gold-2); font-weight: normal; }

/* ---------- Command list ---------- */
.filter { margin: 0 0 var(--s6); max-width: 420px; }
.filter label { display: block; font: 600 .875rem/1.4 var(--sans); color: var(--muted); margin-bottom: var(--s2); }
.filter input {
  width: 100%; min-height: 48px; padding: 0 var(--s4);
  background: var(--panel); color: var(--text); font: 1rem/1.2 var(--mono);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.filter input::placeholder { color: var(--muted); opacity: 1; }
.filter input:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-color: var(--gold); }
.filter-status { margin: var(--s2) 0 0; font: .875rem/1.4 var(--sans); color: var(--muted); min-height: 1.4em; }

.cmd-group { margin-bottom: var(--s7); }
.cmd-group:last-child { margin-bottom: 0; }
.cmd-group h3 {
  display: flex; align-items: center; gap: var(--s3);
  font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2);
}
.cmd-group h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cmd-group > .note { margin-bottom: var(--s3); max-width: 62ch; }

.cmds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cmds > li {
  display: grid; grid-template-columns: 1fr; gap: var(--s1) var(--s5);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.cmds > li > code:first-child {
  justify-self: start; background: transparent; border: 0; padding: 0;
  font-size: 1rem; color: var(--gold-2); white-space: normal;
}
.cmds .desc { font-size: 1rem; line-height: 1.6; }
.cmds .desc code { font-size: .875em; }
@media (min-width: 640px) { .cmds > li { grid-template-columns: 13rem 1fr; align-items: baseline; } }

.notes { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.notes > li { position: relative; padding-left: var(--s5); color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.notes > li::before, .legal li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px;
  background: var(--gold); transform: rotate(45deg);
}
.notes strong { color: var(--text); font-weight: normal; }

.no-match { color: var(--muted); font-style: italic; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: var(--prose); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 56px; padding: var(--s3) 0; font-size: 1.125rem; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--gold-2); }
.faq .answer { padding: 0 0 var(--s4); max-width: 62ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Policies strip ---------- */
.policies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.policies a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Legal pages ---------- */
.legal { padding: var(--s7) 0 var(--s8); }
.legal h1 { font-size: clamp(2rem, 7vw, 2.5rem); }
.legal h1 + .meta { color: var(--muted); font: .9375rem/1.4 var(--sans); margin: 0 0 var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); position: relative; }
.legal h2 { font-size: 1.3125rem; color: var(--gold-2); margin: var(--s7) 0 var(--s3); }
.legal ul { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.legal li { position: relative; padding-left: var(--s5); margin: 0 0 var(--s3); }
.legal strong { color: var(--gold-2); font-weight: normal; }
.legal p, .legal li { max-width: 68ch; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 0; padding: var(--s7) 0 var(--s8);
  border-top: 1px solid var(--gold);
  box-shadow: inset 0 3px 0 var(--bg), inset 0 4px 0 rgba(232, 194, 104, .35);
  color: var(--muted); font-size: .9375rem;
}
.footer-top { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
.footer-brand { display: flex; align-items: center; gap: var(--s3); color: var(--gold); letter-spacing: .2em; font-size: 1rem; margin: 0; }
.footer-brand img { width: 32px; height: 32px; border-radius: 50%; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); }
.disclaimer { margin: 0; padding-top: var(--s5); border-top: 1px solid var(--line); max-width: 72ch; line-height: 1.6; }

@media (min-width: 760px) {
  .footer-top { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s6); }
}

/* ---------- Touches (see Ashquill-redesign-notes/whimsy-notes.md) ---------- */

/* 1. Quill-ink underline: a faint hairline at rest; on hover/focus a 2px gold stroke
   is drawn over it from left to right. Only background-size changes: no layout shift. */
main a:not([class]), .site-footer a:not([class]), .text-link {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(rgba(241, 213, 138, .5), rgba(241, 213, 138, .5));
  background-repeat: no-repeat;
  background-size: 0% 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  transition: background-size .45s cubic-bezier(.4, 0, .2, 1);
}
/* flex links are 44-48px tall boxes: put the line under the text, not at the box bottom */
.site-footer a:not([class]), .policies a:not([class]), .text-link { background-position: 0 calc(50% + .72em), 0 calc(50% + .72em); }
.text-link { background-origin: content-box; } /* line spans the words, not the padding */
main a:not([class]):hover, main a:not([class]):focus-visible,
.site-footer a:not([class]):hover, .site-footer a:not([class]):focus-visible,
.text-link:hover, .text-link:focus-visible { background-size: 100% 2px, 100% 1px; }
@media (forced-colors: active) {
  main a:not([class]), .site-footer a:not([class]), .text-link { text-decoration: underline; background-image: none; }
}

/* 2. Ember breath: a soft amber glow behind the hero logo slowly brightens and dims.
   Opacity only, on a pseudo-element behind the logo. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: calc(var(--s7) + 84px); width: 280px; height: 280px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--ember), .26), rgba(var(--ember), .08) 60%, transparent);
  opacity: .7;
  animation: ember-breath 9s ease-in-out infinite;
}
@media (min-width: 600px) { .hero::before { top: calc(var(--s8) + 96px); width: 330px; height: 330px; } }
@keyframes ember-breath {
  0%, 100% { opacity: .55; }
  30% { opacity: .85; }
  52% { opacity: .62; }
  78% { opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .hero::before { animation: none; opacity: .7; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header .btn, .skip, .filter { display: none !important; }
  a { color: #000; }
  main a:not([class]), .site-footer a:not([class]), .text-link { text-decoration: underline; background-image: none; }
  .hero::before { display: none; }
}