/* ==========================================================================
   Tin Ram Technologies
   See docs/DESIGN.md for the reasoning behind these decisions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens

   Two reds on purpose. --red-deep is the brand red and is decorative only:
   at 3.28:1 against --bg it fails the 4.5:1 body text threshold, so it is
   reserved for rules, borders, gradients and anything 24px or larger.
   --red-text is the same hue lifted until it passes at 5.93:1.
   ------------------------------------------------------------------------ */
:root {
  --red-deep: #c20736;
  --red-text: #ff3d63;
  --amber: #ffcf4d;
  --bg: #0d0206;
  --bg-raised: #1a0710;
  --fg: #f4e7e9;
  --fg-dim: #d9bfc4;

  --rule: 1px;
  --shadow-offset: 4px;
  --measure: 70ch;

  --font-mono: "Cutive Mono", "Courier New", monospace;
}

/* Windows High Contrast and friends. */
@media (prefers-contrast: more) {
  :root {
    --rule: 2px;
    --fg-dim: #f4e7e9;
  }
}

/* --------------------------------------------------------------------------
   Reset

   border-radius is zeroed globally rather than trusted to individual rules.
   There are no rounded corners anywhere on this site.
   ------------------------------------------------------------------------ */
*,
*::before,
*::after {
  border-radius: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   Typography

   One h1 per page, then h2/h3 with no level skipped. The `#` and `-` markers
   below are decoration on top of that outline, never a substitute for it.
   ------------------------------------------------------------------------ */
h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.25rem;
  margin-top: 2em;
}

h3 {
  font-size: 1.05rem;
  margin-top: 1.5em;
}

.prose > h2::before {
  content: "# ";
  color: var(--red-deep);
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1em;
  max-width: var(--measure);
}

.prose ol {
  padding-left: 1.5em;
}

/* Hyphens, not bullets — the pseudo-markdown marker from docs/DESIGN.md. Suppressing
   the list marker and rendering the hyphen by hand is what allows it to be coloured
   without the marker being pulled out of the list semantics. */
.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul > li::before {
  content: "- ";
  color: var(--red-deep);
}

.prose li {
  margin-bottom: 0.35em;
}

.prose ol > li::marker {
  color: var(--red-deep);
}

.prose strong {
  color: var(--fg);
}

.prose code {
  background-color: var(--bg-raised);
  border: var(--rule) solid var(--red-deep);
  padding: 0.1em 0.35em;
}

/* --------------------------------------------------------------------------
   Links

   Three signals — underline, colour, hover — so nothing depends on colour
   alone. Link text must make sense out of context; no "click here".
   ------------------------------------------------------------------------ */
a {
  color: var(--red-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--amber);
  text-decoration-thickness: 2px;
}

/* Never remove the ring without putting something better in its place. */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Skip link

   First focusable element on every page. Off-screen via clip rather than
   transform so revealing it involves no movement.
   ------------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0.75rem 1rem;
  background-color: var(--bg);
  color: var(--amber);
  border: 2px solid var(--amber);
  z-index: 10;
}

.skip-link:focus-visible {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* Visible to assistive tech, not to sighted users. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------ */
.bar {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.site-header {
  border-bottom: 2px solid var(--red-deep);
}

.site-main {
  padding: 2rem 1.25rem 4rem;
}

/* The skip link moves focus here. This is a programmatic focus target, not an
   interactive element, so suppressing its ring is the conventional case rather than
   the "never outline: none" one. */
.site-main:focus {
  outline: none;
}

.site-footer {
  border-top: var(--rule) solid var(--red-deep);
  color: var(--fg-dim);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Header and nav
   ------------------------------------------------------------------------ */
.site-header .bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fg);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Padding rather than a taller visual box, so the hit target clears 24px
     without the wordmark looking padded out. */
  padding: 0.25rem 0;
}

.wordmark:hover {
  color: var(--amber);
}

.wordmark-logo {
  display: block;
  width: 2rem;
  height: 2rem;
}

/* The logo is a dark mark and the background is dark; this is the filter that
   makes it white. Decorative — the wordmark text carries the name. */
.filter-white {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(218deg)
    brightness(106%) contrast(104%);
}

.site-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-link {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: var(--rule) solid var(--red-deep);
  color: var(--red-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.site-nav-link:hover {
  border-color: var(--amber);
  border-width: 2px;
  color: var(--amber);
  /* Offset the border rather than moving the box, so nothing reflows. */
  padding: calc(0.5rem - 1px) calc(0.9rem - 1px);
}

.site-nav-link.is-current {
  background-color: var(--red-deep);
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   Hero

   The old gradient survives here as the one place it's allowed to be soft.
   ------------------------------------------------------------------------ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 1.25rem 3.5rem;
  border: 2px solid var(--red-deep);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--red-deep);
  background: linear-gradient(
    158deg,
    var(--red-deep) 0%,
    #280213 41%,
    #44011f 69%,
    var(--red-deep) 100%
  );
}

.hero-logo {
  width: 10rem;
  height: 10rem;
  max-width: 60vw;
}

.hero-title {
  font-size: 1.9rem;
  margin: 0;
}

.hero-tagline {
  margin: 0;
  max-width: 46ch;
  color: var(--fg);
}

.prose {
  width: 100%;
  max-width: 60rem;
  margin: 3rem auto 0;
}

/* --------------------------------------------------------------------------
   Buttons

   Chunky, square, flat. The hard shadow moves on :active, which fires on
   keyboard activation too, so the keyboard path gets the same feedback.
   ------------------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--red-deep);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--red-deep);
  color: var(--fg);
  background-color: transparent;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  cursor: pointer;
  /* Only colour transitions, and only where the reduced-motion block allows. */
  transition: color 120ms linear, border-color 120ms linear;
}

.btn:hover {
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--amber);
}

.btn:active {
  transform: translate(var(--shadow-offset), var(--shadow-offset));
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.site-footer .bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Rows

   The list treatment for games and jams: hard rules between, title left,
   metadata right-aligned. Matches the hard-line language and costs nothing to
   render.
   ------------------------------------------------------------------------ */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule) solid var(--red-deep);
}

.row {
  border-bottom: var(--rule) solid var(--red-deep);
}

.row-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  color: var(--fg);
  text-decoration: none;
}

.row-link:hover {
  color: var(--amber);
  background-color: var(--bg-raised);
}

.row-title {
  color: var(--red-text);
}

.row-link:hover .row-title {
  color: var(--amber);
}

.row-meta {
  color: var(--fg-dim);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Placeholder slots

   Empty by design until filled in. Collapsed so they don't leave stray vertical space
   in the meantime.
   ------------------------------------------------------------------------ */
.hero-tagline:empty,
.empty:empty {
  display: none;
}

.empty {
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Page furniture

   Shared by every interior page. The h1 carries no `#` marker — it's the page title,
   not a heading in a document.
   ------------------------------------------------------------------------ */
.page-header {
  max-width: 60rem;
  margin: 0 auto;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--red-deep);
}

.page-header h1 {
  margin-bottom: 0.25em;
}

.prose-section {
  max-width: 60rem;
  margin: 2.5rem auto 0;
}

.prose-section h2::before {
  content: "# ";
  color: var(--red-deep);
}

.eyebrow {
  margin: 0 0 0.35em;
  color: var(--red-deep);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.eyebrow a {
  color: inherit;
}

.lede {
  max-width: 60ch;
  color: var(--fg-dim);
  font-size: 1.05rem;
}

.post-meta {
  margin: 0.5em 0 0;
  color: var(--fg-dim);
  font-size: 0.85rem;
}

/* Status line on a game page. Red rather than dimmed — an unreleased game is the
   headline fact on that page, not metadata. */
.status-line {
  margin: 0.5em 0 0;
  color: var(--red-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}

.more {
  margin-top: 1em;
}

/* The two-column layout and the featured-game block were both on the home page and are
   now gone: the sections stack, and games use the standard row list. The classes below
   are kept only where something still renders them. */

/* --------------------------------------------------------------------------
   Spec lists

   A real <dl>, so the label/value relationship survives for screen readers.
   ------------------------------------------------------------------------ */
.spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.5rem;
  margin: 1.25rem 0 0;
}

.spec dt {
  color: var(--red-text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.spec dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Game and jam pages
   ------------------------------------------------------------------------ */
.capsule {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  border: 2px solid var(--red-deep);
}

/* Empty state: same dimensions as a capsule so the page layout doesn't jump when art
   arrives, with the title in place of an image. */
.capsule-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  max-width: 22rem;
  padding: 1.5rem;
  border-style: dashed;
  color: var(--fg-dim);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Jam screenshot

   Page only. Not capped to a narrow column, because a screenshot is the point and
   cropping it would be worse than letting it be wide.
   ------------------------------------------------------------------------ */
.jam-shot {
  margin: 2rem 0 0;
}

.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--red-deep);
}

figcaption {
  margin-top: 0.5rem;
  color: var(--fg-dim);
  font-size: 0.85rem;
}

.steam-widget {
  max-width: 40rem;
}

.steam-widget iframe {
  display: block;
  width: 100%;
  border: 0;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.link-list-tight {
  margin: 0.5rem 0 0;
}

/* --------------------------------------------------------------------------
   Jam index entries

   A flat list, one block per jam, separated by the same hard rules used elsewhere.
   Each block is a section with its own heading so the outline stays correct — these are
   real page sections, not list items, and the h2 level is deliberate.
   ------------------------------------------------------------------------ */
.jam-entry {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: var(--rule) solid var(--red-deep);
}

.jam-entry:first-of-type {
  border-top: var(--rule) solid var(--red-deep);
}

.jam-entry-title {
  margin: 0;
  font-size: 1.15rem;
}

.jam-entry-title a {
  color: var(--fg);
  text-decoration: none;
}

.jam-entry-title a:hover {
  color: var(--amber);
}

.btn-small {
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
}

.post-back {
  max-width: 60rem;
  margin: 3rem auto 0;
}

/* --------------------------------------------------------------------------
   News posts
   ------------------------------------------------------------------------ */
.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: var(--rule) solid var(--red-deep);
}

.post-title {
  margin-bottom: 0.2em;
}

/* --------------------------------------------------------------------------
   Media and motion preferences
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  a {
    color: LinkText;
  }

  .site-nav-link,
  .btn,
  .hero,
  .rows,
  .row {
    border-color: CanvasText;
  }

  /* Box shadows are dropped in forced-colors mode, so the buttons lose their
     depth and rely on the border instead. */
  .btn,
  .hero,
  .site-nav-link:hover {
    box-shadow: none;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }
}