/* =====================================================================================================================
   Dreamt Madness — the one stylesheet for the whole site (www.dreamtmadness.com).
   Brand: "Midnight Sunset" (Dreamt Madness brand handoff v2). Deep Ocean foundation, Sand text, Sunset for key
   actions, Amber sparingly, Sky / Azure as quiet secondary accents. Cinzel for display, Inter for everything else.
   Both fonts are self-hosted (fonts/, SIL OFL 1.1): the site makes no third-party requests.

   Contents
     1. Fonts            5. Header + nav          9. Jingle Janitor pages
     2. Brand tokens     6. Buttons + links      10. Footer
     3. Base             7. Hero banner          11. Motion preferences
     4. Layout helpers   8. Studio home sections
   Pages are generated by _build/build.py (shared header / footer); edit text there, look here.
   ===================================================================================================================== */


/* ---------------------------------------------------------------------------------------------- 1. Fonts
   Latin subsets (plus arrows), variable weight. Fallback faces use local Georgia / Arial with metric overrides so the
   swap from fallback to web font barely moves the layout (values measured against the real fonts with PIL). */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 122%;
  ascent-override: 80%;
  descent-override: 30.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 105.1%;
  ascent-override: 92.1%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}


/* ---------------------------------------------------------------------------------------------- 2. Brand tokens
   The single source of truth for colour and type. Contrast on Deep Ocean: Sand 13.3:1, --text-soft 9.5:1,
   Amber 9.3:1, Sunset 5.7:1 (fine for text, used for large type and accents), Sky 5.8:1. */
:root {
  /* brand palette */
  --dm-deep-ocean: #0F2239;
  --dm-azure: #1F5D86;
  --dm-sky: #4FA3D9;
  --dm-sunset: #F0784B;
  --dm-amber: #FFB66D;
  --dm-sand: #F5E8D7;

  /* derived surfaces and text (all on top of Deep Ocean) */
  --bg: var(--dm-deep-ocean);
  --bg-deep: #0A1727;              /* footer, banner edges */
  --bg-alt: #0D1D31;               /* alternating section */
  --surface: #132A43;              /* cards, tables */
  --surface-2: #183452;            /* table heads, notes */
  --text: var(--dm-sand);
  --text-soft: #CFC6BA;            /* secondary copy */
  --line: rgb(245 232 215 / 0.14); /* hairline dividers */
  --line-strong: rgb(245 232 215 / 0.38);
  --link: var(--dm-amber);
  --on-sunset: #13263B;            /* text on Sunset buttons: 5.5:1 */

  /* Jingle Janitor accent: a subtle warm Christmas red, only inside the game section */
  --jj-red: #E0544A;

  /* type */
  --font-display: "Cinzel", "Cinzel Fallback", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", Arial, sans-serif;

  /* layout */
  --gutter: clamp(1rem, 5vw, 4rem);
  --wrap: 78rem;
  --narrow: 46rem;
  --radius: 4px;

  color-scheme: dark;
}


/* ---------------------------------------------------------------------------------------------- 3. Base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--dm-sand); text-decoration-thickness: 2px; }

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

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--text); line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.25rem; margin: 1.75rem 0 0.5rem; letter-spacing: 0; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }
strong { color: var(--dm-sand); font-weight: 600; }
::selection { background: var(--dm-sunset); color: var(--on-sunset); }

.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 50;
  background: var(--dm-sand); color: var(--dm-deep-ocean); font-weight: 600;
  padding: 0.7rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

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


/* ---------------------------------------------------------------------------------------------- 4. Layout helpers */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; }   /* short pages: footer stays at the bottom */
main { display: block; flex: 1 0 auto; }
.page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.page > :first-child { margin-top: 0; }

/* small uppercase label above headings; .dot adds the Sunset bullet */
.eyebrow {
  font-family: var(--font-body);
  margin: 0 0 1rem; color: var(--dm-amber);
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase;
}
.eyebrow .dot {
  display: inline-block; width: 7px; height: 7px; margin: 0 0.75em 0.12em 0; border-radius: 50%;
  background: var(--dm-sunset); box-shadow: 0 0 14px rgb(240 120 75 / 0.6); vertical-align: middle;
}
.period { color: var(--dm-sunset); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.75; color: var(--text); }
.soft { color: var(--text-soft); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
.grid > * { min-width: 0; }
@media (min-width: 44rem) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.5rem; }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card h3 { color: var(--dm-sand); }
a.card:hover { border-color: var(--dm-sunset); }
a.card:hover h3 { color: var(--dm-amber); }


/* ---------------------------------------------------------------------------------------------- 5. Header + nav */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.header-inner {
  width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto; min-height: 6.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.brand { flex: 0 0 auto; display: block; padding-block: 0.4rem; }
.brand img { width: clamp(13rem, 24vw, 21rem); }   /* horizontal lockup, 1600 x 430 */

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem clamp(1rem, 3vw, 3rem); }
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-block; padding: 0.55rem 0.1rem; color: var(--dm-sand); text-decoration: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--dm-amber); border-bottom-color: currentColor; }
.site-nav .nav-cta { border: 1px solid var(--line-strong); padding: 0.75rem 1.1rem; }
.site-nav .nav-cta:hover { border-color: var(--dm-amber); }
.nav-cta span { color: var(--dm-amber); padding-left: 0.45rem; }

/* phones / small tablets: logo on top, the four links in a centred row underneath */
@media (max-width: 52rem) {
  .header-inner { flex-direction: column; justify-content: center; gap: 0.35rem; padding-block: 0.6rem 0.75rem; min-height: 0; }
  .brand img { width: min(17.5rem, 78vw); }
  .site-nav ul { justify-content: center; gap: 0.25rem 1.1rem; }
  .site-nav a { font-size: 0.72rem; letter-spacing: 0.1em; }
  .site-nav .nav-cta { padding: 0.55rem 0.8rem; }
}


/* ---------------------------------------------------------------------------------------------- 6. Buttons + links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 3.1rem;
  padding: 0.85rem 1.35rem; border: 1px solid var(--dm-sunset); border-radius: 2px;
  background: var(--dm-sunset); color: var(--on-sunset); text-decoration: none;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.3;
}
.btn span { font-size: 1.05rem; line-height: 1; }
.btn:hover { background: var(--dm-amber); border-color: var(--dm-amber); color: var(--on-sunset); }
.btn.ghost { background: transparent; color: var(--dm-sand); border-color: var(--line-strong); }
.btn.ghost span { color: var(--dm-amber); }
.btn.ghost:hover { border-color: var(--dm-amber); color: var(--dm-amber); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1.75rem 0; }

/* uppercase link with an underline ("MEET THE STUDIO ↗") */
.text-link {
  display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0 0.35rem;
  color: var(--dm-sand); text-decoration: none; border-bottom: 1px solid var(--line-strong);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
.text-link span { color: var(--dm-amber); font-size: 1rem; line-height: 1; }
.text-link:hover { color: var(--dm-amber); border-bottom-color: var(--dm-amber); }
@media (prefers-reduced-motion: no-preference) {
  .btn, .text-link, .site-nav a, a.card { transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .text-link span { transition: transform 0.2s; }
  .text-link:hover span { transform: translateX(3px); }
}


/* ---------------------------------------------------------------------------------------------- 7. Hero banner
   Studio home: a cinematic strip of the fantasy art with the stacked logo centred on it, then the
   centred headline block underneath on plain Deep Ocean. The banner is tall enough for the logo at every width
   (logo height = 0.72 x its width, always smaller than the banner), so the lockup is never clipped. */
.banner {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(16.5rem, 40vw, 35rem);
  display: grid; place-items: center;
  background: var(--bg-deep) url("../assets/brand/dreamt-madness-hero.webp") center 52% / cover no-repeat;
}
@media (max-width: 50rem) { .banner { background-image: url("../assets/brand/dreamt-madness-hero-1200.webp"); background-position: 56% center; } }
.banner::after {    /* soft vignette so the logo stands out; never on the logo itself */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 58% at 50% 50%, rgb(15 34 57 / 0.38), transparent 70%),
    linear-gradient(90deg, rgb(15 34 57 / 0.32), transparent 30%, transparent 70%, rgb(15 34 57 / 0.32)),
    linear-gradient(0deg, rgb(15 34 57 / 0.55), transparent 28%);
}

.home-intro { width: min(100% - 2 * var(--gutter), 58rem); margin-inline: auto; padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3.5rem, 7vw, 5.5rem); text-align: center; }
.home-intro h1 { font-size: clamp(2.3rem, 5.2vw, 4.6rem); line-height: 1.12; letter-spacing: -0.03em; margin: 0; }
.home-intro .lead { max-width: 46rem; margin: 1.3rem auto 0; color: var(--text); }
.home-intro .btn-row { justify-content: center; margin-top: 2rem; }
/* the stacked logo on the banner: phone 84vw, else 52vw, never over 600px; its height (x 0.72) always stays inside
   the banner, so the lockup is never clipped. The supplied SVG as it is: nothing on top of it, no effects. */
.banner-logo { width: min(84vw, 37.5rem, max(22rem, 52vw)); aspect-ratio: 1500 / 1080; }
.inline-sword { display: inline-block; width: 1em; height: 0.8em; margin: 0 0.25em; vertical-align: -0.08em; transform: rotate(90deg); }


/* ---------------------------------------------------------------------------------------------- 8. Studio home sections */
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.home-intro + .section { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-heading h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.035em; }
.section-heading .soft { max-width: 23rem; margin: 0; }

/* game feature card: key art + copy */
.game-feature { display: grid; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 56rem) { .game-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); } }
.game-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1232 / 706; background: var(--bg-deep); }
@media (min-width: 56rem) { .game-art { aspect-ratio: auto; min-height: 28rem; } }
.game-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-art::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(0deg, rgb(10 23 39 / 0.7), transparent); }
.art-index, .art-link { position: absolute; z-index: 1; }
.art-index { left: 1.4rem; bottom: 1.2rem; color: var(--dm-sand); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; }
.art-link { right: 1.2rem; top: 1.2rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--dm-sunset); color: var(--on-sunset); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .game-art img { transition: transform 0.7s; }
  .game-art:hover img { transform: scale(1.03); }
}
.game-copy { padding: clamp(1.75rem, 4vw, 3.5rem); align-self: center; }
.game-copy .eyebrow { color: var(--text-soft); letter-spacing: 0.15em; }
.game-copy h3 { margin: 0.25rem 0 1.25rem; font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: 0.98; letter-spacing: -0.04em; }
.game-deck { color: var(--dm-amber); font-size: 1.12rem; line-height: 1.6; }
.game-copy .soft { font-size: 1rem; line-height: 1.8; }
.game-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1.5rem 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.game-meta span + span::before { content: "·"; color: var(--dm-sunset); padding-right: 1.1rem; }

/* creator label on a project. Variants for future games: --luke (Sunset), --bryan (Sky), --joint (Amber) */
.project-credit {
  display: inline-block; margin: 0 0 1.2rem; padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: 2px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4;
}
.project-credit--luke { border-left-color: var(--dm-sunset); }
.project-credit--bryan { border-left-color: var(--dm-sky); }
.project-credit--joint { border-left-color: var(--dm-amber); }

/* the studio: copy on the right, the dusk landscape behind */
.studio-section {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem) 1.6rem;
  background: var(--bg-deep) url("../assets/brand/dreamt-madness-hero.webp") center 63% / cover no-repeat;
}
@media (max-width: 50rem) { .studio-section { background-image: url("../assets/brand/dreamt-madness-hero-1200.webp"); background-position: 38% center; } }
.studio-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(15 34 57 / 0.55) 0%, rgb(15 34 57 / 0.72) 42%, rgb(15 34 57 / 0.9) 62%, rgb(15 34 57 / 0.9) 100%),
              linear-gradient(0deg, rgb(15 34 57 / 0.8), transparent 45%);
}
@media (max-width: 50rem) { .studio-section::before { background: rgb(15 34 57 / 0.88); } }
.studio-copy { max-width: 36rem; margin-left: auto; }
.studio-copy h2 { margin: 0 0 1.5rem; font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.035em; }
.studio-copy p { color: var(--text); }
.studio-footnote {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  padding-top: 0.8rem; border-top: 1px solid var(--line);
  color: var(--text-soft); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
}
.studio-footnote b { color: var(--dm-sunset); font-weight: 400; padding: 0 0.3em; }

/* what matters to us */
.values-section { padding-block: clamp(4rem, 8vw, 6rem); background: linear-gradient(135deg, #132A43, #16283E); }
.values-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem clamp(1.5rem, 5vw, 5rem); }
@media (min-width: 48rem) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.values-grid > div { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.value-number { font: 600 0.85rem var(--font-display); color: var(--dm-amber); }
.values-grid h3 { margin: 0.5rem 0; font-size: 1.4rem; }
.values-grid p { color: var(--text-soft); margin: 0; }

/* contact */
.contact-section {
  text-align: center; padding: clamp(5rem, 10vw, 8.5rem) var(--gutter);
  background: radial-gradient(ellipse at 50% 100%, rgb(31 93 134 / 0.3), transparent 62%), var(--bg);
}
.contact-section h2 { margin: 0 0 1.25rem; font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.035em; }
.contact-section p { max-width: 34rem; margin-inline: auto; color: var(--text-soft); }
.contact-section .btn-row { justify-content: center; }
.contact-section .btn { text-transform: none; letter-spacing: 0.02em; font-size: 0.95rem; }
.contact-more { margin-top: 1.5rem; font-size: 0.95rem; }


/* ---------------------------------------------------------------------------------------------- 9. Jingle Janitor pages
   Same Dreamt Madness chrome; the game's own art (key art, hero, logo, screenshots) and a hint of Christmas red. */
.game-nav { background: var(--bg-alt); border-bottom: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--jj-red); }
.game-nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; padding-block: 0.4rem; }
.game-nav-title { margin: 0; font: 600 1rem var(--font-display); color: var(--dm-sand); white-space: nowrap; }
.game-nav-title::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.55rem; border-radius: 50%; background: var(--jj-red); vertical-align: 0.1em; }
.game-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.game-nav li { margin: 0; }
.game-nav a {
  display: inline-block; padding: 0.6rem 0; color: var(--text-soft); text-decoration: none;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.game-nav a:hover { color: var(--dm-sand); }
.game-nav a[aria-current="page"] { color: var(--dm-sand); border-bottom-color: var(--jj-red); }
@media (max-width: 40rem) {
  .game-nav .wrap { justify-content: center; text-align: center; }
  .game-nav ul { justify-content: center; gap: 0 1rem; }
  .game-nav a { padding: 0.45rem 0; font-size: 0.72rem; }
}

/* the game's hero: library art with the Jingle Janitor logo */
.game-hero { position: relative; display: grid; background: #1D0F0C; overflow: hidden; }
.game-hero > img { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 24rem; object-fit: cover; }
.game-hero-text {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 1;
  padding: 5rem 0 2.25rem; background: linear-gradient(transparent 0%, transparent 52%, rgb(15 34 57 / 0.55) 72%, rgb(15 34 57 / 0.92) 100%);
}
.game-hero .logo-title { width: min(24rem, 72%); margin: 0 0 0.5rem; filter: drop-shadow(0 3px 10px rgb(0 0 0 / 0.5)); }
.game-hero p { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 40rem; margin: 0; text-shadow: 0 1px 3px rgb(0 0 0 / 0.85), 0 0 14px rgb(15 34 57 / 0.9); }
.game-hero .btn-row { margin-bottom: 0; }

.facts { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 0.65rem 1rem; border-bottom: 1px solid var(--line); }
.facts th { width: 36%; color: var(--text-soft); font-weight: 600; font-size: 0.92rem; }
.facts td { overflow-wrap: anywhere; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }

.features { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .features { grid-template-columns: 1fr 1fr; } }
.features li { margin: 0; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--dm-amber); min-width: 0; }

.shots { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .shots { grid-template-columns: 1fr 1fr; } }
.shots figure { margin: 0; min-width: 0; }
.shots img { width: 100%; border: 1px solid var(--line); background: var(--surface); }
.shots figcaption { margin-top: 0.45rem; font-size: 0.92rem; color: var(--text-soft); }

.letter { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--jj-red); padding: clamp(1.25rem, 4vw, 2rem); }
.letter p:last-child { margin-bottom: 0; }
.sign { font: 600 1.5rem var(--font-display); color: var(--dm-amber); }

.note { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--dm-sky); }
.note.warm { border-left-color: var(--dm-sunset); }
.note > :last-child, .note ul { margin-bottom: 0; }

.table-wrap { margin: 1rem 0 1.5rem; border: 1px solid var(--line); overflow-x: auto; }
.credits { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.95rem; }
.credits caption { text-align: left; padding: 0.85rem 1rem 0.4rem; font-weight: 700; color: var(--dm-sand); }
.credits th, .credits td { text-align: left; vertical-align: top; padding: 0.6rem 1rem; border-top: 1px solid var(--line); }
.credits th[scope="col"] { background: var(--surface-2); color: var(--text-soft); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.credits th[scope="row"] { font-weight: 600; color: var(--dm-sand); }
/* phones: each credit row becomes a small card, with the column label before every cell */
@media (max-width: 44rem) {
  .credits thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .credits tr { display: block; padding: 0.7rem 1rem; border-top: 1px solid var(--line); }
  .credits th[scope="row"], .credits td { display: block; padding: 0.12rem 0; border: 0; }
  .credits th[scope="row"] { font-size: 1.02rem; margin-bottom: 0.15rem; }
  .credits td::before { content: attr(data-label) ": "; color: var(--text-soft); font-weight: 600; }
}

.downloads { list-style: none; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .downloads { grid-template-columns: 1fr 1fr; } }
.downloads li { margin: 0; }
.downloads a { display: block; height: 100%; padding: 0.7rem 1rem; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.downloads a:hover { border-color: var(--dm-amber); }


/* ---------------------------------------------------------------------------------------------- 10. Footer */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); color: var(--text-soft); font-size: 0.9rem; }
.footer-inner {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: 2.75rem 2.25rem;
  display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 50rem) { .footer-inner { grid-template-columns: auto 1fr; } }
.footer-logo img { width: 10rem; }                     /* mono-light stacked lockup, 1500 x 1080 */
.footer-tagline { margin: 0.25rem 0 0; font: 500 0.85rem var(--font-display); letter-spacing: 0.08em; color: var(--text-soft); }
.footer-links ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-links li { margin: 0; }
.footer-links a { display: inline-block; padding: 0.3rem 0; color: var(--dm-sand); text-decoration: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-links a:hover { color: var(--dm-amber); }
.footer-mail { color: var(--dm-amber); }
.footer-small { margin: 0; font-size: 0.8rem; line-height: 1.6; }


/* ---------------------------------------------------------------------------------------------- 11. Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}