/* The prose skin: blog, posts, help, tutorial, support and legal pages.
   One calm look, the house's (cream paper, plum ink, Instrument Sans), designed and checked once. It never loads
   costumes.css. From the costume the visitor last wore it borrows one token, the accent, for links, the ▼ marker,
   dates and rules: eight values, each checked at 4.5:1 or better on the paper (README, "The rule"). */
html {
  --bg: #fbf6ee;
  --paper: #fbf6ee;
  --ink: #1d1426;
  --ink-soft: #5e5266;
  --rule: rgba(29, 20, 38, 0.12);
  --focus: #1d1426;
  --head-bg: rgba(251, 246, 238, 0.86);
  --head-rule: 1px solid rgba(29, 20, 38, 0.08);
  --surface: #fffdf9;
  --surface-ink: #1d1426;
  --surface-soft: #5e5266;
  --edge: rgba(29, 20, 38, 0.1);
  --btn-bg: #1d1426;
  --btn-ink: #fbf6ee;
  --radius-btn: 999px;
  --f-display: 'DC Instrument', system-ui, sans-serif;
  --f-ui: 'DC Instrument', system-ui, sans-serif;
  --ui-weight: 600;
  --ui-track: 0;
  --ui-case: none;
  --accent: #a3365e;
  --link: var(--accent);
}
/* the borrowed accent (the costume's --prose-accent in costumes.css, copied here so prose pages never load the wardrobe) */
html[data-accent='quest'] {
  --accent: #3348b5;
}
html[data-accent='impact'] {
  --accent: #b80d27;
}
html[data-accent='mist'] {
  --accent: #55524b;
}
html[data-accent='velvet'] {
  --accent: #963655;
}
html[data-accent='glitter'] {
  --accent: #6447c8;
}
html[data-accent='deadline'] {
  --accent: #0b7560;
}
html[data-accent='flirt'] {
  --accent: #a1397b;
}
::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.prose-page {
  background: var(--paper);
}
.prose-page .top {
  box-shadow: inset 0 3px 0 var(--accent);
}
.prose-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
}
@media (min-width: 900px) {
  .prose-main {
    padding-top: 96px;
  }
}

/* the H1 ends on the visual novel's marker, in the borrowed accent */
.prose-h1 {
  font:
    650 clamp(38px, 7vw, 60px)/1 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.035em;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.marker {
  flex: none;
  width: 16px;
  height: 12px;
  margin-bottom: 0.22em;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: marker 0.7s var(--ease-io) infinite alternate;
}
@keyframes marker {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4px);
  }
}

/* the list: a title, one sentence, a date */
.posts {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}
.post {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--rule);
}
.post h2 {
  font:
    600 clamp(21px, 3vw, 25px)/1.22 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.post h2 a {
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
  transition:
    background-size 260ms var(--ease-out),
    color 160ms;
}
.post h2 a:hover,
.post h2 a:focus-visible {
  color: var(--accent);
  background-size: 100% 2px;
}
.post h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.post p {
  color: var(--ink-soft);
  font-size: 16.5px;
  max-width: 38em;
}
.post time {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.post::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 34px;
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: height 220ms var(--ease-out);
}
.post:hover::before {
  height: 26px;
}

/* the foot of the page: make your own */
.make {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 64px 0 0;
  padding: 28px 0 0;
  border-top: 3px solid var(--accent);
}
.make h2 {
  font:
    650 28px/1.1 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.025em;
}
@media (prefers-reduced-motion: reduce) {
  .marker {
    animation: none;
  }
}

/* the list with previews: a stage still beside each post */
.post {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.post-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--rule);
  transition: transform 260ms var(--ease-out);
}
.post:hover .post-img {
  transform: translateY(-2px);
}
.post-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.post::before {
  left: -22px;
  top: 32px;
}
@media (min-width: 700px) {
  .post {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 28px;
  }
}

/* ---------- running text: posts, support and the legal pages ---------- */
.prose {
  max-width: 68ch;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: break-word;
}
.prose a {
  overflow-wrap: anywhere;
} /* a source's long URL wraps rather than widen the page */
.prose > * + * {
  margin-top: 1.05em;
}
.prose h2 {
  margin-top: 2.1em;
  font:
    650 clamp(24px, 3.2vw, 30px)/1.18 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.prose h3 {
  margin-top: 1.7em;
  font:
    650 20px/1.3 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 0.55em;
}
.prose a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose ul {
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose li::marker {
  color: var(--accent);
}
.prose blockquote {
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-style: normal;
}
.prose blockquote p + p {
  margin-top: 0.35em;
}
.prose strong {
  font-weight: 650;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4em 0;
}
.prose code {
  font:
    500 0.92em/1 ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  background: rgba(29, 20, 38, 0.06);
  padding: 0.12em 0.35em;
  border-radius: 4px;
}
.prose img,
.prose video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 0 0 1px var(--rule);
}

/* a post's stills and clips: one frame for all of them (radius, edge, caption), its width set by its shape so
   nothing towers over the text. Landscape (r16x9, r4x3) spans the column; square, portrait and a phone screen sit
   narrower and centred, each capped near 540px tall. */
.prose .post-media {
  width: 100%;
  margin: 2em auto 2.2em;
}
.prose .post-media.r1x1 {
  width: min(100%, 420px);
}
.prose .post-media.r3x4 {
  width: min(100%, 390px);
}
.prose .post-media.r9x16 {
  width: min(100%, 304px);
}
.prose .post-media.phone {
  width: min(100%, 250px);
}
.prose .post-media img,
.prose .post-media video {
  border-radius: 14px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px var(--rule),
    0 20px 40px -30px rgba(29, 20, 38, 0.5);
}
.prose .post-media.phone img {
  border-radius: 28px;
  background: var(--surface);
}
.prose .post-media figcaption {
  margin-top: 0.75em;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: balance;
}
.prose-updated {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.prose .prose-h1 + .prose-updated + * {
  margin-top: 36px;
}
.prose > .prose-h1 {
  margin-bottom: 0;
}
.prose > .prose-h1 + * {
  margin-top: 28px;
}

/* ---------- a post ---------- */
.post-main {
  max-width: 820px;
}
.article-head {
  display: grid;
  gap: 14px;
  margin-bottom: 40px;
}
.article-meta {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.article-meta a {
  color: inherit;
  text-decoration: none;
}
.article-meta a:hover {
  text-decoration: underline;
}
.article-title {
  font:
    650 clamp(34px, 5.6vw, 52px)/1.05 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.article-lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36em;
}
.article-cover {
  width: min(100%, 220px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px var(--rule),
    0 24px 50px -30px rgba(29, 20, 38, 0.45);
  margin-top: 8px;
}
@media (min-width: 900px) {
  .article-head {
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas: 'meta cover' 'title cover' 'lede cover';
    align-items: end;
    column-gap: 40px;
  }
  .article-meta {
    grid-area: meta;
  }
  .article-title {
    grid-area: title;
  }
  .article-lede {
    grid-area: lede;
  }
  .article-cover {
    grid-area: cover;
    width: 240px;
    margin: 0;
  }
}
.read-next {
  margin-top: 56px;
}
.read-next > h2 {
  font:
    650 22px/1.2 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.015em;
}
.read-next .posts {
  margin-top: 18px;
}
.read-next .post h3 {
  font:
    600 20px/1.25 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
}
.read-next .post h3 a {
  color: var(--ink);
  text-decoration: none;
}
.read-next .post h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.read-next .post h3 a:hover {
  color: var(--accent);
}

/* ---------- not found ---------- */
.not-found {
  min-height: 56vh;
  display: grid;
  align-content: center;
  gap: 18px;
}
.not-found-code {
  font:
    700 14px/1 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.not-found-line {
  font-size: 19px;
  color: var(--ink-soft);
}
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 8px;
}
.not-found-links a:not(.btn) {
  color: var(--link);
  font-weight: 600;
}

/* ---------- the page system (design review §4) ---------- */
/* the current section in the nav */
.prose-page .nav a[aria-current='page'] {
  opacity: 1;
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 8px;
}
/* links in running text are always underlined, the underline a tint of the accent */
.prose a {
  text-decoration-color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: text-decoration-color 0.15s;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.prose h2 {
  scroll-margin-top: 88px;
  font-variant-numeric: tabular-nums;
}
/* "Last updated" and a post's date: the accent's date after a soft label */
.prose-updated span,
.article-meta .reading {
  color: var(--ink-soft);
  font-weight: 500;
}
/* not found: the empty stage after the story, then the way back */
.not-found {
  min-height: 60svh;
}
.not-found-art {
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(52, 35, 44, 0.5);
  margin-bottom: 12px;
}