/* housecatgame.com. Colours are the app's own (HouseCatUI Theme): cream paper, plum ink, amber accent;
   the dusk band is the intro globe's night sky. Type: Young Serif (titles, close to the wordmark's soft serif)
   and Figtree (text). */
:root {
  --paper: #fef8ec;
  --paper-deep: #f8ecd8;
  --card: #fffaf1;
  --ink: #3d2e38;
  --ink-soft: #6b5a64;
  --amber: #e38033;
  --amber-deep: #a9530f;
  --dusk: #24223f;
  --dusk-ink: #e9e2f7;
  --rule: rgba(153, 115, 97, 0.28);
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --measure: 36rem;
  --gutter: max(1rem, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--amber-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: 0.5rem; z-index: 10; }
.skip:focus { top: 1rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 32rem; }

.wrap { width: min(72rem, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
.top .brand img { width: 150px; }
.top nav { display: flex; gap: clamp(0.9rem, 2.5vw, 1.6rem); font-weight: 600; font-size: 0.95rem; }
.top nav a { color: var(--ink); text-decoration: none; padding: 0.25rem 0; }
.top nav a:hover, .top nav a[aria-current] { color: var(--amber-deep); }
@media (max-width: 420px) { .top nav a[href="/press/"] { display: none; } .top .brand img { width: 128px; } }

/* Buttons */
.pill { text-decoration: none; display: inline-block; background: var(--ink); color: var(--paper); padding: 0.85rem 1.4rem; border-radius: 999px; font-weight: 600; }
.button { display: inline-block; background: var(--amber); color: #2a1609; padding: 0.8rem 1.3rem; border-radius: 999px; font-weight: 600; text-decoration: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.14); }
.button:hover { background: #ec8f45; color: #2a1609; }
.button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--rule); }

/* Hero: the cat at the window, the same window the widget puts it in */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding: clamp(1rem, 4vw, 3.5rem) 0 clamp(3.5rem, 8vw, 6.5rem); }
.hero .soon { margin: 1.6rem 0 0.9rem; }
.hero .devices { font-size: 0.93rem; color: var(--ink-soft); max-width: 30rem; }
.window {
  aspect-ratio: 4 / 5; border-radius: 999px 999px 1.1rem 1.1rem; overflow: hidden;
  border: clamp(9px, 1.4vw, 14px) solid #fff4e2;
  box-shadow: 0 0 0 2px var(--rule), 0 32px 60px -32px rgba(70, 35, 20, 0.5);
  background: #6fa8e8;
}
.window { position: relative; }
.window img, .window .hero-film { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* The jump and the idle loop (js/hero.js) sit over the still painting; before the jump the window shows the empty sill. */
.window .hero-film { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.window .hero-film.is-on { opacity: 1; }
.window.is-arriving { background: url(/img/window_empty.webp) 50% 62% / cover; }
.window.is-arriving img { opacity: 0; }
.sill { height: 20px; margin: -5px -16px 0; background: #fff4e2; border-radius: 6px; box-shadow: 0 2px 0 var(--rule), 0 14px 24px -14px rgba(70, 35, 20, 0.35); position: relative; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; width: min(18rem, 78%); margin-inline: auto; }
}

/* Sections */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.band { background: var(--paper-deep); }
.intro { max-width: var(--measure); margin-bottom: 2rem; }
.intro p { color: var(--ink-soft); font-size: 1.12rem; }
.shot { border-radius: 1rem; box-shadow: 0 0 0 1px var(--rule), 0 20px 40px -28px rgba(70, 35, 20, 0.45); }

/* Homes: a bank of tiles, three across and two down (Josh, 23 Oct: no sideways scroller) */
.homes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.homes figure { margin: 0; }
.homes img { width: 100%; aspect-ratio: 1600 / 736; object-fit: cover; border-radius: 1rem; box-shadow: 0 0 0 1px var(--rule); }
@media (max-width: 760px) { .homes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .homes { grid-template-columns: 1fr; } }
.homes figcaption, .times figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.times { margin: 2.5rem 0 0; }
.times img { border-radius: 1rem; box-shadow: 0 0 0 1px var(--rule); }
.times .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .times .pair { grid-template-columns: 1fr; } }

/* A visit: a real sequence, so it is numbered */
.visit { list-style: none; counter-reset: visit; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); }
.visit li { counter-increment: visit; }
.visit img { border-radius: 1rem; box-shadow: 0 0 0 1px var(--rule); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.visit h3 { margin-top: 1rem; display: flex; gap: 0.6rem; align-items: baseline; }
.visit h3::before { content: counter(visit); font-family: var(--body); font-weight: 600; font-size: 0.85rem; color: var(--paper); background: var(--amber-deep); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-grid; place-items: center; flex: none; transform: translateY(-0.15rem); }
.visit p { color: var(--ink-soft); }
@media (max-width: 760px) { .visit { grid-template-columns: 1fr; } }

/* Feature rows */
.row { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.row.flip { grid-template-columns: 1.35fr 1fr; }
.row.flip .copy { order: 2; }
.row .copy p { color: var(--ink-soft); }
@media (max-width: 760px) { .row, .row.flip { grid-template-columns: 1fr; } .row.flip .copy { order: 0; } }

/* Dusk band: the widget */
.dusk { background: var(--dusk); color: var(--dusk-ink); }
.dusk h2 { color: #fff; }
.dusk .row .copy p { color: rgba(233, 226, 247, 0.84); }
.dusk .row { grid-template-columns: 1.2fr 1fr; }
.dusk .phone { width: min(16rem, 66%); margin-inline: auto; border-radius: 2.3rem; border: 8px solid #0f0e1d; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.dusk .widgets { margin: clamp(2.5rem, 6vw, 4rem) auto 0; border-radius: 1.4rem; width: min(52rem, 100%); }
@media (max-width: 760px) { .dusk .row { grid-template-columns: 1fr; } }

/* Games */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); }
.games figure { margin: 0; }
.games h3 { margin: 1rem 0 0.35rem; }
.games p { color: var(--ink-soft); font-size: 0.98rem; }
@media (max-width: 760px) { .games { grid-template-columns: 1fr; } }

/* Fair play */
.fair { background: var(--paper-deep); border-radius: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1.25fr; gap: 2rem; }
.fair > div p { color: var(--ink-soft); }
.fair > div a { font-weight: 600; }
.fair ul { margin: 0; padding: 0; list-style: none; }
.fair li { padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.fair li:first-child { border-top: 0; padding-top: 0; }
.fair li strong { display: block; font-weight: 600; }
.fair li span { color: var(--ink-soft); font-size: 0.97rem; }
@media (max-width: 760px) { .fair { grid-template-columns: 1fr; } }

/* Closing: the logo, where the cat lands on the letters and curls up (Safari plays the app's own film) */
.closing { text-align: center; padding-top: clamp(4rem, 10vw, 8rem); }
.logo-stage { width: min(34rem, 86%); margin: 0 auto 2rem; }
.logo-stage .logo-still { width: 100%; }
.logo-stage.is-film .logo-still { display: none; }
.logo-film { position: relative; aspect-ratio: 1647 / 480; margin-top: 11%; }
.logo-film img { width: 100%; height: 100%; }
.logo-film video { position: absolute; left: -80%; bottom: 0; width: 155%; height: 230%; max-width: none; pointer-events: none; transform-origin: 50% 100%; }
.logo-film.is-asleep video { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.012); } }
.closing { overflow: hidden; }
.closing h2 { margin-top: 0.5rem; }
.closing p { color: var(--ink-soft); }
.closing .close-cta { margin: 1.5rem 0 1.25rem; }
.store-badge img { height: 54px; width: auto; }
.pill:hover { background: #2b1f28; color: var(--paper); }

/* Footer */
footer { border-top: 1px solid var(--rule); padding: 3rem 0 2.5rem; font-size: 0.93rem; color: var(--ink-soft); background: var(--paper); }
footer .cols { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 2rem; align-items: start; }
footer .foot-brand img { width: 150px; margin-bottom: 0.75rem; }
footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.5rem 2rem; }
footer nav a { color: var(--ink); text-decoration: none; }
footer nav a:hover, footer nav a[aria-current] { color: var(--amber-deep); text-decoration: underline; }
footer .legal { margin: 2.5rem 0 0; font-size: 0.8rem; max-width: 52rem; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; } }

/* Document pages */
.doc { max-width: 44rem; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem); }
.doc.wide { max-width: 56rem; }
.doc h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
.doc h2 { font-size: 1.65rem; margin-top: 2.3em; }
.doc h3 { margin-top: 1.7em; }
.doc .updated, .doc .note { color: var(--ink-soft); font-size: 0.95rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.45em; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.96rem; margin: 1rem 0 1.25rem; }
.doc caption { text-align: left; color: var(--ink-soft); font-size: 0.9rem; padding-bottom: 0.4rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.65rem 0.9rem 0.65rem 0; border-top: 1px solid var(--rule); }
.doc thead th { font-weight: 600; border-top: 0; }
.doc tbody th { font-weight: 600; width: 9rem; }
@media (max-width: 560px) {
  .doc table, .doc tbody, .doc tr, .doc td, .doc th { display: block; width: auto; }
  .doc thead { display: none; }
  .doc tr { border-top: 1px solid var(--rule); padding: 0.6rem 0; }
  .doc td, .doc th { border: 0; padding: 0.1rem 0; }
  .doc td:first-child, .doc tbody th { font-weight: 600; }
}
.doc .summary, .doc .contact { background: var(--paper-deep); border-radius: 1rem; padding: 1.2rem 1.4rem; margin: 1.5rem 0; }
.doc .summary ul { margin: 0; }
.doc .contact.gap { margin-top: 2.5rem; }
.doc .contact p:last-child { margin-bottom: 0; }
.doc details { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.doc details summary { cursor: pointer; font-weight: 600; }
.doc details[open] summary { margin-bottom: 0.6rem; }
.doc details p { color: var(--ink-soft); }
.doc .perks li strong { font-weight: 600; }
.doc .quote { font-family: var(--display); font-size: 1.6rem; line-height: 1.25; }
.doc .facts th { width: 8.5rem; }
.doc.lost { min-height: 40vh; }
.doc.lost .button { margin: 0 0.5rem 0.5rem 0; }

/* Press assets */
.assets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0; }
.assets figure { margin: 0; border-radius: 1rem; padding: 1.5rem; display: grid; gap: 0.75rem; align-content: space-between; box-shadow: 0 0 0 1px var(--rule); }
.assets figure.on-light, .assets figure.icon { background: var(--card); }
.assets figure.on-dark { background: var(--dusk); color: var(--dusk-ink); }
.assets figure.icon img { width: 120px; border-radius: 26px; }
.assets figcaption { font-size: 0.9rem; }
.assets.shots img { border-radius: 0.8rem; box-shadow: 0 0 0 1px var(--rule); }
@media (max-width: 560px) { .assets { grid-template-columns: 1fr; } }

/* Credits */
.credits td:nth-child(3) { white-space: nowrap; }

/* Out now (9 Nov 2026): the store button, the launch line and the header's download link */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.now { margin: 0 0 0.6rem; color: var(--amber-deep); font-weight: 600; font-size: 1.02rem; }
.button.store { font-size: 1.12rem; padding: 0.95rem 1.7rem; }
.hero .soon { margin: 1.5rem 0 0.8rem; }
.close-cta { margin: 1.4rem 0 1rem; }
.top nav { align-items: center; }
.top nav a.get { background: var(--amber); color: #2a1609; padding: 0.42rem 0.95rem; border-radius: 999px; }
.top nav a.get:hover { color: #2a1609; background: #eb9049; }
.top nav a { white-space: nowrap; }
@media (max-width: 420px) { .top nav a[href="/cat-club/"] { display: none; } }
.doc.thanks { text-align: center; max-width: 36rem; }
.doc.thanks .window.small { width: min(13rem, 60%); margin: 0 auto 1.8rem; }
.doc.thanks .lede { margin-inline: auto; }
.doc.thanks .button { margin: 0.4rem 0.25rem; }
/* On phones (where the bio link lands) keep the download button near the top: a smaller window above the copy */
@media (max-width: 760px) {
  .page-home .hero { padding-top: 0.25rem; gap: 1.1rem; }
  .page-home .hero-art { width: min(10.5rem, 46%); }
  .page-home .hero h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .page-home .hero .lede { font-size: 1.02rem; margin-bottom: 0.4rem; }
}