/* Urara Aqua document surface; independent of the listing-only card tokens. */
html {
  --page-surface: #345da7;
  --page-content: oklch(89.7519% 0.025508 261.182);
  --page-link: #ffe999;
  min-height: 100%;
  position: relative;
  isolation: isolate;
  background: var(--page-surface);
  color: var(--page-content);
  color-scheme: dark;
}

/* Use the full root box, not the constrained body, for the wallpaper layer. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--page-surface) url("images/backgrounds/metal-gear-solid.jpg") left top / auto no-repeat scroll;
  background-blend-mode: overlay;
}

body { max-width: 55rem; margin: 2rem auto; padding: 0 1rem; font: 1rem/1.6 system-ui, sans-serif; color: inherit; } article { margin: 2rem 0; } img { max-width: 100%; } .banner { width: 100%; object-fit: cover; } .card { height: 10rem; } .page { height: 22rem; } a { color: var(--page-link); }

a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Shared navigation; article headers keep their own layout rules. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.site-title { min-width: 0; overflow-wrap: anywhere; }
.site-header .site-title {
  color: #f4f7ff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.site-title__period { color: #09ecf3; }
.site-header .site-title:hover { color: var(--page-content); }
.site-header .site-title:focus-visible { outline: 3px solid #09ecf3; outline-offset: 4px; }
.home-intro, .list-intro { max-width: 48rem; margin: 2rem auto; }
.home-intro h1, .list-intro h1 { margin: 0 0 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.home-intro p { max-width: 65ch; margin: 0; }
.home-all-posts { margin: 2rem auto; text-align: center; }
.home-all-posts a { color: #09ecf3; text-decoration: underline; }
.site-nav { display: flex; flex-wrap: wrap; min-width: 0; gap: 0.25rem 1rem; }
.site-nav a { display: inline-block; padding-block: 0.25rem; }
.site-nav a:is([aria-current="page"], [aria-current="location"]) { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site-header .site-nav, .tag-grid {
  --nav-accent: #09ecf3;
  --nav-accent-content: #005355;
}
.site-header .site-nav {
  gap: 0.5rem;
}
.site-header .site-nav a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(9 236 243 / 0.45);
  border-radius: 0.5rem;
  background-color: var(--page-surface);
  color: var(--page-content);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out,
    color 150ms ease-in-out;
}
.site-header .site-nav a:is([aria-current="page"], [aria-current="location"]) {
  border-color: var(--nav-accent);
  text-decoration-line: underline;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .site-nav a:hover, .tag-tile:hover {
    background-color: var(--nav-accent);
    border-color: var(--nav-accent);
    color: var(--nav-accent-content);
  }
}
.site-header .site-nav a:focus-visible, .tag-tile:focus-visible {
  background-color: var(--nav-accent);
  border-color: var(--nav-accent);
  color: var(--nav-accent-content);
  outline: 3px solid var(--nav-accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav a { transition: none; }
}
.site-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid currentColor; font-size: 0.875rem; }

/* Native taxonomy pages share the archive width and Aqua accents. */
.tag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  max-width: 48rem;
  margin: 2rem auto;
  padding: 0;
  list-style: none;
}
.tag-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(9 236 243 / 0.45);
  border-radius: 0.5rem;
  background: var(--page-surface);
  color: var(--page-content);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tag-tile__count { flex-shrink: 0; font-size: 0.875rem; opacity: 0.8; }
.tag-tile:is(:hover, :focus-visible) .tag-tile__count { opacity: 1; }
.tag-intro p { margin: 0 0 0.5rem; }
.all-tags { font-size: 0.875rem; }
.article-tags a { color: inherit; text-decoration: none; }
.article-tags a:is(:hover, :focus-visible) { text-decoration: underline; }
@media (min-width: 40rem) {
  .tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--page-surface);
  transform: translateY(calc(-100% - 1rem));
}
.skip-link:focus { transform: none; }
#main-content:focus { outline: 2px solid currentColor; outline-offset: 3px; }

@media (min-width: 768px) {
  html {
    --page-surface: oklch(45.3464% 0.118611 261.182);
  }
  body::before {
    background-attachment: fixed;
  }
}

/* Aqua: DaisyUI 4.6.2 src/theming/themes.js. Content colors are the
   generated Aqua --bc/--nc values used by the original Urara stylesheet.
   These tokens and rules apply only to article listings. */
.article-stream {
  --card-base: #345da7;
  --card-base-content: oklch(89.7519% 0.025508 261.182);
  --card-neutral: #3b8ac4;
  --card-neutral-content: oklch(12.2124% 0.023402 243.761);
  --card-primary: #09ecf3;
  --card-primary-content: #005355;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 48rem;
  margin: 2rem auto;
}

.post-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding-top: 0.5rem;
  border-radius: 0;
  background: var(--card-base);
  color: var(--card-base-content);
  line-height: 1.5;
  transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out;
}

.post-card--image {
  overflow: hidden;
  color: var(--card-neutral-content);
}

.post-card--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--card-neutral);
  opacity: 0.65;
  pointer-events: none;
}

/* Keep the banner behind content without fixing the card height. */
.post-card__banner {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Override the existing image-only .card height, never the article page. */
.post-card__banner > .banner.card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease-in-out;
}

.post-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  padding: 2rem;
}

/* The native disclosure is the accessible revision view; its overlapping
   hover/focus preview is decorative and always hidden from screen readers. */
.card-dates {
  max-width: 100%;
  font-weight: 600;
}

.card-dates > summary {
  cursor: pointer;
  list-style: none;
}

.card-dates > summary::marker { content: ""; }
.card-dates > summary::-webkit-details-marker { display: none; }

.card-dates > summary:focus-visible {
  outline: 2px solid var(--card-primary);
  outline-offset: 4px;
}

.card-dates__faces {
  display: inline-grid;
  max-width: 100%;
  vertical-align: top;
  transition: color 300ms ease-in-out;
}

/* A publication-only card keeps its label available to screen readers. */
.card-dates__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.card-dates__faces > span {
  grid-area: 1 / 1;
  transition: opacity 500ms ease-in-out;
}

.card-dates__preview {
  opacity: 0;
  pointer-events: none;
}

.card-dates__revision {
  margin: 0.25rem 0 0;
}

.card-dates:not([open]) > summary:focus-visible .card-dates__published { opacity: 0; }
.card-dates:not([open]) > summary:focus-visible .card-dates__preview { opacity: 1; }
.card-dates > summary:focus-visible .card-dates__faces {
  color: var(--card-primary);
}

@media (hover: hover) and (pointer: fine) {
  .card-dates:not([open]) > summary:hover .card-dates__published { opacity: 0; }
  .card-dates:not([open]) > summary:hover .card-dates__preview { opacity: 1; }
  .card-dates > summary:hover .card-dates__faces {
    color: var(--card-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-dates__faces,
  .card-dates__faces > span { transition: none; }
}

.post-card__title {
  max-width: 100%;
  margin: 0;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.post-card__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.12em;
  background-image: linear-gradient(var(--card-primary), var(--card-primary));
  background-size: 100% 0%;
  background-position: 0 88%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 300ms ease-in-out, background-size 300ms ease-in-out,
    text-decoration-color 300ms ease-in-out;
}

.post-card__subtitle {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

.post-card__link:focus-visible {
  outline: 3px solid var(--card-primary);
  outline-offset: 4px;
}

/* Keep card-wide keyboard emphasis on the article link, not the date disclosure. */
.post-card:has(:where(.post-card__link:focus-visible)) {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.post-card:has(:where(.post-card__link:focus-visible)) > .post-card__banner > .banner.card {
  transform: scale(1.05);
}

.post-card:has(:where(.post-card__link:focus-visible)) .post-card__link {
  color: var(--card-primary-content);
  background-size: 100% 100%;
  text-decoration-color: var(--card-primary);
}

@media (min-width: 40rem) {
  .post-card { padding-top: 0; }
}

@media (min-width: 48rem) {
  .article-stream { gap: 2rem; }
  .post-card {
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  }
  .post-card:has(:where(.post-card__link:focus-visible)) {
    transform: translateY(-0.125rem);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  }
}

@media (hover: hover) and (pointer: fine) {
  .post-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
  .post-card:hover > .post-card__banner > .banner.card { transform: scale(1.05); }
  .post-card:hover .post-card__link { text-decoration-color: var(--card-primary); }
  .post-card__link:hover {
    color: var(--card-primary-content);
    background-size: 100% 100%;
  }
}

@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  .post-card:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-stream .post-card,
  .article-stream .post-card > .post-card__banner > .banner.card {
    transform: none;
    transition: none;
  }
  .article-stream .post-card__link { transition: none; }
}

/* Individual article reading surface. Listing/card rules above stay unchanged. */
.article-panel {
  --card-primary: #09ecf3; /* Reuse the accessible date disclosure. */
  box-sizing: border-box;
  width: calc(100% + 2rem);
  max-width: 48rem;
  margin: 2rem -1rem 0;
  padding: 2.5rem 2rem 2rem;
  background: #345da7;
  color: oklch(89.7519% 0.025508 261.182);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.article-panel > .article-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  font-weight: 600;
  line-height: 1.5;
}
.article-meta > span { opacity: 0.5; }
.article-author { color: inherit; opacity: 0.75; text-decoration: none; }
.article-author:is(:hover, :focus-visible) { color: #09ecf3; opacity: 1; }
.article-title { margin: 0 0 2rem; font-size: 1.875rem; line-height: 1.2; font-weight: 600; }
.article-subtitle { margin: 0 0 2rem; }

.article-banner {
  order: -1;
  margin: -2rem -1rem 1rem;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.article-banner > .banner.page { display: block; height: 100%; }

.article-prose > :first-child { margin-top: 0; }
.article-prose > :last-child { margin-bottom: 0; }
.article-prose p { margin: 1.25em 0; }
.article-prose h1 { margin: 0 0 0.888889em; font-size: 2.25em; line-height: 1.111111; font-weight: 800; }
.article-prose h2 { margin: 2em 0 1em; font-size: 1.5em; line-height: 1.333333; font-weight: 700; }
.article-prose :is(h3, h4, h5, h6) { margin: 1.6em 0 0.6em; line-height: 1.5; }
.article-prose blockquote {
  margin: 1.6em 0;
  padding-left: 1em;
  border-left: 0.25rem solid rgb(255 255 255 / 0.2);
  font-style: italic;
  font-weight: 500;
}
.article-prose :is(ul, ol) { margin: 1.25em 0; padding-left: 1.625em; }
.article-prose li { margin: 0.5em 0; padding-left: 0.375em; }
.article-prose ul:has(> li > input[type="checkbox"]) { padding-left: 0; }
.article-prose li:has(> input[type="checkbox"]) { list-style: none; padding-left: 0; }
.article-prose li > input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: -0.125rem 0.5rem -0.125rem 0;
  vertical-align: baseline;
  accent-color: #09ecf3;
}
/* Match Firefox's existing disabled checked surface in both states. The
   checked input keeps its native checkmark; only the unchecked paint is reset. */
.article-prose li > input[type="checkbox"]:disabled {
  box-sizing: border-box;
  background-color: #42567e;
  border: 0 solid #42567e;
  border-radius: 3px;
  opacity: 1;
}
.article-prose li > input[type="checkbox"]:disabled:not(:checked) { appearance: none; }

/* DaisyUI 4.6.2 Aqua secondary #966fb3; Urara from-secondary/50 to-secondary/40. */
.article-prose :is(p, li) > a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to top, rgb(150 111 179 / 0.5), rgb(150 111 179 / 0.4));
  background-size: 100% 0.2em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 150ms ease-in-out;
}
.article-prose :is(p, li) > a:is(:hover, :focus-visible) { background-size: 100% 100%; }
.article-prose .article-heading-anchor { color: inherit; text-decoration: none; }
.article-heading-anchor > span { padding-left: 0.5rem; opacity: 0; color: #09ecf3; }
.article-prose :is(h1, h2, h3, h4, h5, h6):hover .article-heading-anchor > span,
.article-heading-anchor:focus-visible > span { opacity: 1; }
.article-prose img { max-width: 100%; height: auto; }

@media (min-width: 640px) {
  .article-panel { padding-top: 2rem; }
}
@media (min-width: 768px) {
  .article-panel {
    width: 100%;
    margin: 2rem auto;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  }
  .article-banner { order: 1; margin-top: 0; }
}
@media (min-width: 1024px) {
  .article-panel { margin-bottom: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .article-prose :is(p, li) > a { transition: none; }
}
@media (forced-colors: active) {
  .article-prose li > input[type="checkbox"]:disabled,
  .article-prose li > input[type="checkbox"]:disabled:not(:checked) {
    appearance: auto;
    background-color: revert;
    border: revert;
  }
}

@media (max-width: 1024px) {
  body::before { background-size: cover; }
}

/* Urara md (768px): only mobile listings escape the shared 16px padding. */
@media (max-width: 767px) {
  .article-stream {
    gap: 0.5rem;
    width: calc(100% + 2rem);
    max-width: none;
    margin-inline: -1rem;
  }
  .article-stream .post-card,
  .article-stream .post-card:is(:hover, :has(.post-card__link:focus-visible)) {
    border-radius: 0;
    box-shadow: none;
  }
}

/* Reusable article tracker: scroll the table, never the document. */
.achievement-tracker {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.25em 0;
}
.achievement-tracker:focus-visible { outline: 2px solid #09ecf3; outline-offset: 3px; }
/* Intrinsic name column; equal platform tracks share the longest header's
   natural width. Subgrid keeps native table rows aligned without fixed sizes. */
.achievement-tracker table {
  display: grid;
  width: max-content;
  margin-inline: auto;
  grid-template-columns: max-content repeat(3, minmax(max-content, 1fr));
}
.achievement-tracker colgroup { display: none; }
.achievement-tracker :is(thead, tbody, tr) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
.achievement-tracker :is(th, td) { padding: 0.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.15); }
.achievement-tracker th { text-align: left; font-weight: 600; }
.achievement-tracker :is(td, thead th:not(:first-child)) { text-align: center; }
.achievement-tracker thead th { white-space: nowrap; }
.achievement-tracker__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.achievement-tracker__state {
  display: inline-grid;
  place-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  background: #42567e;
  color: #8d99b1;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

/* Click-to-visit video: one local thumbnail, no embedded player. */
.youtube-video { margin: 1.25em 0; }
.youtube-video__link {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
  background: #000;
}
.article-prose .youtube-video__link > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.youtube-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.8);
  color: #fff;
  font-size: 1.5rem;
}

.article-prose > p:has(> img:only-child) { text-align: center; }
.article-prose > p > img:only-child { border-radius: 1rem; }
.article-prose p > a > img { display: block; margin: 0.5rem 0; border-radius: 0.5rem; }

/* A small linked logo keeps its requested size and shrinks on narrow screens. */
.linked-image { margin: 1.25em 0; text-align: center; }
.article-prose .linked-image > a { display: inline-block; max-width: 100%; }
.article-prose .linked-image img { display: block; max-width: 100%; height: auto; }

/* Bundle JSON tables: keep overflow within a named, keyboard-accessible region. */
.data-table { max-width: 100%; overflow-x: auto; margin: 1.5em 0; }
.data-table:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.data-table table { border-collapse: collapse; margin: 0 auto; }
.data-table caption { font-weight: 600; margin-bottom: 0.5em; }
.data-table th, .data-table td { padding: 0.5em 0.75em; text-align: left; border-bottom: 1px solid currentColor; }
.data-table a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.star-rating { display: inline-block; white-space: nowrap; }
.star-rating__star { display: inline-block; position: relative; font-size: 1.25em; line-height: 1; }
.star-rating__star > span { position: absolute; inset: 0; width: 0; overflow: hidden; }
.star-rating__star--full > span { width: 100%; }
.star-rating__star--half > span { width: 50%; }