/* Cute Kitty WAR — splash landing (static hero + scroll sections)
   Layout per Tom 2026-08-05: hero up top, then trailer, recent news,
   and the door to the Command — the modern Command home's below-the-fold
   grammar, worn splash-simple. Parallax rig fossilized 2026-08-05. */

:root {
  --ink: #f7ead8;
  --ink-dim: rgba(247, 234, 216, 0.78);
  --dusk: #241338;
  --blackberry: #1a0f28;
  --panel: #2e1b44;
  --ember: #ff9d45;
  --ember-deep: #d9542b;
  --gold: #ffcf6b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--blackberry);
  overflow-x: hidden;
}

/* ---- the painting (scrolls up with the page; runs a little long so it
   melts under the trailer section's top fade) ---- */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 112vh;
  height: 112svh;
  z-index: 0;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* pest-mayhem: the painted title badge lives at the LEFT edge —
     pin left so narrower-than-16:9 screens crop the right instead */
  object-position: 0% 50%;
  user-select: none;
}

@media (max-width: 700px) {
  .hero img { object-position: 42% 50%; }
}

/* ---- first screen: the lockup ---- */
.lockup {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  animation: settle 900ms ease-out both;
}

/* THE CLUSTER HANGS FROM THE PAINTED SIGN (2026-08-08, Tom's call):
   pest-mayhem carries its own wooden CUTE KITTY WAR sign at the art's
   top-left, so the badge/tagline/door column centres UNDER it and
   tracks it as the art cover-scales. Measured on the art: the sign's
   centre sits at x=251/1672 (15.01% of width, 26.67% of height) and
   its base at y=361/941 — with object-position 0% 50% those become
   pure max() of the two axes. The box starts at the left edge and is
   twice the offset wide, so its centre IS the sign's centre and it can
   never hang off-screen. */
.title-cluster {
  position: absolute;
  left: 0;
  top: calc(50vh - max(6.55vw, 11.64vh) + 7.3rem);
  width: calc(2 * max(15.01vw, 26.67vh));
  /* floor wide enough to keep the voice line and the door's sub-line
     each on one line at laptop sizes (below it they wrap, balanced) */
  min-width: 26rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.title-cluster .badge { margin-top: 0; }

/* the art under the sign is busy (red house, possum, the mouse tide) —
   a soft edgeless scrim gives the words their own air without drawing
   a box on the painting */
.title-cluster::before {
  content: "";
  position: absolute;
  inset: -15% -9%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
              rgba(12, 8, 20, 0.72) 0%,
              rgba(12, 8, 20, 0.5) 48%,
              rgba(12, 8, 20, 0) 76%);
}

/* the voice line: kept unboxed so it still feels spoken, but given the
   art's own painted edge — a hard dark rim under the letters, then two
   soft pools — so it holds over the white fence and the green wall */
.title-cluster .tagline {
  margin-top: clamp(0.55rem, 1.7vh, 0.95rem);
  font-size: clamp(1.02rem, 2.05vw, 1.32rem);
  text-wrap: balance;
  color: #fdf7ea;
  text-shadow:
    0 1px 0 rgba(38, 20, 8, 0.8),
    0 2px 4px rgba(20, 10, 4, 0.85),
    0 6px 18px rgba(10, 6, 18, 0.9),
    0 0 30px rgba(10, 6, 18, 0.7);
}

/* the door joins the plaque family: same painted outline ring, still
   wearing the Command's plum cloth so it promises what's behind it */
.title-cluster .command-link {
  margin-top: clamp(0.8rem, 2.3vh, 1.35rem);
  /* the hero door sits in a fixed column, so it wears slightly trimmer
     shoulders than its big cousin at the foot of the page */
  padding: 0.72em 1.55em;
  max-width: 100%;
  box-shadow:
    0 0 0 3px rgba(42, 22, 8, 0.5),
    0 10px 26px rgba(10, 6, 20, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.title-cluster .command-link:hover,
.title-cluster .command-link:focus-visible {
  box-shadow:
    0 0 0 3px rgba(42, 22, 8, 0.5),
    0 14px 32px rgba(10, 6, 20, 0.68),
    0 0 0 4px rgba(240, 189, 79, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 700px) {
  /* phones crop the painted sign away — centre the cluster on the art */
  .lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16vh 1.25rem 3.5rem;
  }
  .title-cluster {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0;
  }
}

.logo img {
  width: min(46vw, 620px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(20, 8, 40, 0.55));
  user-select: none;
}

/* THE BADGE AS A SECOND SIGN (2026-08-08): the old dark-red pill was
   mixed for the night art's dusk and vanished against pest-mayhem's
   red house. Re-cut in the painted sign's own palette — gold plate,
   wood-dark ink, and the thick dark outline the sign-painter gives
   every letter up there — so it reads as a smaller plaque hung under
   the big one, and survives on any colour the art puts behind it. */
.badge {
  margin-top: 0;
  font-family: var(--sans);
  font-size: clamp(0.88rem, 1.65vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3b1e09;
  background: linear-gradient(180deg, #ffd979 0%, #f4b53c 48%, #e09a22 100%);
  border: 1px solid rgba(255, 240, 205, 0.9);
  border-radius: 999px;
  padding: 0.55em 1.6em;
  text-shadow: 0 1px 0 rgba(255, 240, 205, 0.6);
  box-shadow:
    0 0 0 3px rgba(42, 22, 8, 0.62),
    0 8px 22px rgba(20, 10, 4, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tagline {
  margin-top: clamp(0.7rem, 2vh, 1.2rem);
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  font-style: italic;
  color: var(--ink-dim);
  text-shadow: 0 2px 10px rgba(20, 8, 40, 0.85);
}

.command-link {
  margin-top: clamp(1.1rem, 3.5vh, 2.2rem);
  display: inline-flex;
  flex-direction: column;
  gap: 0.3em;
  align-items: center;
  text-decoration: none;
  color: #f5f0e6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  background: linear-gradient(180deg, rgba(26, 20, 36, 0.62), rgba(18, 14, 26, 0.86)),
              url("assets/yard_plum_texture.png");
  background-size: auto, 460px auto;
  border: 1px solid rgba(234, 187, 87, 0.75);
  border-radius: 10px;
  padding: 0.75em 1.9em;
  box-shadow: 0 8px 24px rgba(10, 6, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.command-link .sub {
  font-weight: 500;
  font-size: 0.68em;
  text-wrap: balance;
  font-style: italic;
  color: #eabb57;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.command-link:hover,
.command-link:focus-visible {
  transform: translateY(-2px);
  border-color: #f0bd4f;
  box-shadow: 0 12px 32px rgba(10, 6, 20, 0.65), 0 0 0 1px rgba(240, 189, 79, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.command-link:focus-visible {
  outline: 3px solid #f0bd4f;
  outline-offset: 3px;
}

.scroll-cue {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 2px 10px rgba(20, 8, 40, 0.9);
  animation: bob 1.8s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* ---- below the fold: the Command's cloth (ported from lab.css
   vocabulary 2026-08-07 — night surfaces, plum texture, gold eyebrows,
   hairline panels, mono numbers) ---- */
:root {
  --night: #120f19;
  --night-panel: #17121f;
  --bg-2: #2a2431;
  --cream: #f5f0e6;
  --gold-cmd: #f0bd4f;
  --eyebrow-gold: #eabb57;
  --line: rgba(255, 255, 255, 0.15);
  --ink-dim-cmd: #c8becc;
  --ink-faint: #93899b;
  --radius-cmd: 10px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ONE BACKDROP (2026-08-07, Tom's catch: the 900px tile repeated ~9x
   and read as wallpaper): the whole lower band shares a single
   page_texture.png — the vignette the modern site uses as one page
   backdrop — stretched cover, never tiled. The band's own mask fades
   its top so the painting still melts into it. */
.below-band {
  position: relative;
  z-index: 1;
}

.band-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(18, 15, 25, 0.6), rgba(18, 15, 25, 0.6)),
    url("assets/yard_plum_texture.png") center top / cover no-repeat,
    var(--night);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px);
  mask-image: linear-gradient(180deg, transparent 0, #000 240px);
}

.below {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 7vh, 5rem) 1.25rem;
  text-align: center;
  font-family: var(--sans);
  color: var(--cream);
}

.below > * { position: relative; }

.below .eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eyebrow-gold);
}

.below h2 {
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
}

/* the first section only adds breathing room; the band's masked
   backdrop handles the melt from the painting */
.trailer-section {
  padding-top: clamp(4rem, 10vh, 7rem);
}

.trailer-frame {
  position: relative;
  max-width: 860px;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
  border-radius: var(--radius-cmd);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--night-panel);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.trailer-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.trailer-frame[role="button"] { cursor: pointer; }

.trailer-frame[role="button"]:hover .play,
.trailer-frame[role="button"]:focus-visible .play {
  background: rgba(217, 84, 43, 0.85);
  border-color: var(--ink);
}

.trailer-frame:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.trailer-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.trailer-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.trailer-frame .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  padding-left: 6px;
  color: var(--ink);
  background: rgba(20, 8, 40, 0.65);
  border: 2px solid rgba(247, 234, 216, 0.7);
  border-radius: 50%;
}

/* ---- news ---- */
.notices {
  max-width: 860px;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
  display: grid;
  gap: 1rem;
  text-align: left;
}

.notices a {
  display: flex;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: var(--cream);
  background: var(--night-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-cmd);
  padding: 0.9rem 1.1rem;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.notices a:hover,
.notices a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--eyebrow-gold);
  background: var(--bg-2);
}

.notices a:focus-visible {
  outline: 2px solid var(--gold-cmd);
  outline-offset: 2px;
}

.notices img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-2);
  flex-shrink: 0;
}

.notices b {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.notices small {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-dim-cmd);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* ---- the big door: the Command's counts strip + one gold door ---- */
.counts {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 3.5vw, 2.6rem);
  flex-wrap: wrap;
  margin: clamp(1.4rem, 4vh, 2.2rem) auto 0;
  padding: 1.1rem 1.4rem;
  max-width: 860px;
  background: var(--night-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-cmd);
}

.counts div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 4.5rem;
}

.counts b {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  color: var(--gold-cmd);
}

.counts span {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.door-copy {
  max-width: 560px;
  margin: 1.1rem auto 0;
  color: var(--ink-dim-cmd);
  line-height: 1.5;
  font-size: 0.95rem;
}

.command-link.big {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-family: var(--sans);
  letter-spacing: -0.01em;
  padding: 0.85em 2.2em;
  border-radius: var(--radius-cmd);
}

/* ---- footer ---- */
footer {
  position: relative;
  z-index: 1;
  background: var(--night);
  padding: 1.4rem 1.25rem 1.6rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}

/* the reach line reads as an invitation, the legal line as fine print —
   two weights so the address is the thing the eye finds first */
.footer-reach {
  font-size: 0.9rem;
  color: var(--ink-dim-cmd);
}

.footer-reach a {
  font-weight: 700;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(234, 187, 87, 0.35);
  padding-bottom: 1px;
  transition: border-color 160ms ease, color 160ms ease;
}

.footer-reach a:hover,
.footer-reach a:focus-visible {
  color: #ffd979;
  border-bottom-color: #ffd979;
  text-decoration: none;
}

.footer-legal {
  margin-top: 0.55rem;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

footer a {
  color: var(--eyebrow-gold);
  text-decoration: none;
}

footer a:hover { text-decoration: underline; }

/* ---- helpers ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lockup { animation: none; }
  .scroll-cue { animation: none; }
  .command-link, .notices a { transition: none; }
  html { scroll-behavior: auto; }
}

/* portrait phones */
@media (max-width: 700px) {
  .notices a { align-items: flex-start; }
}


/* THE STEAM DOOR (2026-08-29, store page live): the plaque now sends
   its reader to the wishlist, and the trailer band carries its own
   door. Same leather, no new grammar. */
a.badge { text-decoration: none; cursor: pointer; }
a.badge:hover, a.badge:focus-visible { filter: brightness(1.07); }
.trailer-section .command-link { margin-top: clamp(1rem, 2.4vh, 1.5rem); }