/* Palette taken from the Knitted Cats logo + Night Shift Hospital key art */
:root {
  --bg: #161414;
  --bg-2: #211e1d;
  --cream: #efe6d4;
  --cream-dim: #b9b0a2;
  --amber: #e8a317;       /* cat eyes */
  --amber-dark: #b37b08;
  --pink: #e9a3b3;        /* cat ears */
  --lilac: #b9a6e8;
  --grey: #a3a3a3;        /* cat wool */
  --navy: #1b1f5c;        /* NSH night sky */
  --teal: #43d0cf;        /* NSH emblem */
  --teal-dark: #23a09f;
  --green: #63c48c;
  --red: #ec5a4f;
  --radius: 24px;
  --spring: cubic-bezier(.3, 1.25, .5, 1);
  --font: "Nunito", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 66px; } /* land below the sticky header */
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font: 400 18px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-weight: 900; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 6vw, 4.4rem); }
h1, h2, h3 { text-wrap: balance; }   /* even line lengths in headings */
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
p { margin: 0 0 1em; text-wrap: pretty; }   /* no lone last word */
a { color: inherit; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-weight: 900; font-size: .78rem; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.1rem;
}
.eyebrow-teal { color: var(--teal); }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px max(16px, calc((100% - 1120px) / 2)) 12px;
  background: rgba(22, 20, 20, .92);
  -webkit-backdrop-filter: blur(10px); /* older iOS Safari only understands the prefixed form */
  backdrop-filter: blur(10px);
  border-bottom: 2px dashed rgba(239, 230, 212, .12);
}
.brand { display: flex; align-items: baseline; /* cat sits on the text baseline */ gap: 10px; text-decoration: none; font-weight: 900; font-size: 1.25rem; letter-spacing: -.01em; }
.brand img { width: 52px; height: auto; }
.nav { display: flex; align-items: center; gap: 24px; font-weight: 800; }
.nav a { text-decoration: none; position: relative; color: var(--cream-dim); transition: color .2s; }
.nav a:hover { color: var(--cream); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 10px);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav a:hover::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; border-radius: 999px;
  font: 900 1rem/1.3 var(--font); text-decoration: none;
  transition: transform .15s;
}
/* Stitched line inside the pill. Drawn as a pseudo-element border, not an outline:
   older iOS Safari draws outlines on fully rounded pills off-centre. */
.btn::after {
  content: ""; position: absolute; inset: 5px; border-radius: inherit;
  border: 2px dashed var(--stitch, transparent); pointer-events: none;
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn-amber { background: var(--amber); color: var(--bg); box-shadow: 0 4px 0 var(--amber-dark); --stitch: rgba(22,20,20,.35); }
.btn-teal  { background: var(--teal); color: var(--navy); box-shadow: 0 4px 0 var(--teal-dark); --stitch: rgba(27,31,92,.35); }
.btn-dark  { background: var(--bg); color: var(--cream); --stitch: rgba(239,230,212,.3); } /* no 3D edge: a black edge under a black pill reads as part of it and makes the stitches look off-centre */
.btn-ghost { border: 2px solid rgba(239,230,212,.35); }
.btn-ghost:hover { border-color: var(--cream); }

/* ---------- Hero ---------- */
.hero {
  position: relative; text-align: center; overflow: hidden;
  padding: clamp(56px, 10vw, 120px) 0 0;
}
.hero-inner { max-width: 860px; }
.lead { font-size: 1.18rem; color: var(--cream-dim); max-width: 34em; margin-inline: auto; }
.hero .cta-row { justify-content: center; }

/* The mascot "peeks" over the edge below it. The image has extra knitted body below the
   visible part: the wrapper keeps the old visible height and the body hangs below the edge,
   so when the cat rises it climbs out instead of lifting off the line.
   The wrapper stays put and catches the hover, so the rising cat never slips out from under the cursor. */
.peek-hero, .peek-contact { aspect-ratio: 600 / 325; }
.peek { position: absolute; top: 0; left: 0; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; transition: transform .35s var(--spring); }
.cat-stage { position: relative; width: min(460px, 78vw); margin: clamp(40px, 7vw, 72px) auto 0; }
.peek-hero { position: relative; z-index: 2; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* z 2: dizzy mice pass behind it (z 1) and in front (z 3) */
.peek-hero:focus-visible { outline: 2px dashed var(--amber); outline-offset: 6px; border-radius: 12px; }

/* Click/tap: no animation on the cat image itself (that would restart its peek-in).
   Mouse users already see it raised by hover; on touch screens a tap lifts it the same way. */
@media (hover: none) {
  .peek-hero.boop .peek,
  .peek-hero.boop .cat-eyes { transform: translateY(-10px); }
  .peek-hero.boop .cat-tongue { translate: 0 -10px; }
}

/* Speech bubble. script.js picks a fresh spot around the head every time
   (left/bottom/tilt) and points the tail (--tail) at the cat. */
.cat-say {
  --tail: 24px; --tilt: 0deg;
  position: absolute; left: 60%; bottom: 82%; z-index: 4; margin: 0;   /* above the hearts */
  max-width: min(230px, 78vw); width: max-content;
  padding: 12px 18px; border-radius: 18px;
  background: var(--cream); color: var(--bg);
  font-weight: 900; font-size: 1rem; line-height: 1.3; text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  opacity: 0; transform: rotate(var(--tilt)) scale(.6); transform-origin: var(--tail) 100%;
  transition: opacity .2s, transform .35s var(--spring);
  pointer-events: none;
}
.cat-say::before {                    /* stitched line, like the other patches */
  content: ""; position: absolute; inset: 5px; border-radius: 14px;
  border: 2px dashed rgba(22,20,20,.28); pointer-events: none;
}
.cat-say::after {                     /* tail pointing down at the cat's head */
  content: ""; position: absolute; left: calc(var(--tail) - 9px); top: 100%;
  border: 9px solid transparent; border-top-color: var(--cream); border-bottom-width: 0;
}
.cat-say.show { opacity: 1; transform: rotate(var(--tilt)); pointer-events: auto; }
.cat-say a { color: inherit; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }

/* Knitted hearts: few, big, drifting up */
.cat-heart {
  position: absolute; bottom: 84%; z-index: 3; pointer-events: none;   /* start at the top of the head, between the ears */
  width: var(--size, 44px); height: calc(var(--size, 44px) * .9);
  color: var(--pink); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  animation: heart 1.9s cubic-bezier(.25,.6,.4,1) forwards;
}
.cat-heart.c2 { color: var(--amber); }
.cat-heart.c3 { color: #e8798f; }
@keyframes heart {
  0%   { opacity: 0; transform: translate(0, 12px) scale(.4) rotate(0deg); }
  15%  { opacity: 1; transform: translate(calc(var(--dx) * .15), -8px) scale(1.05) rotate(calc(var(--rot) * .3)); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -120px) scale(.92) rotate(var(--rot)); }
}

/* Eyes that follow the cursor. An SVG laid exactly over the cat image (600×398 units) clips to
   each pupil (and the cheek fur, y 194), covers the stitched glint with a patch of the pupil's own
   black embroidery and slides the real glint around the pupil. script.js sets the glint offsets. */
.cat-eyes {
  position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 600 / 398;
  pointer-events: none; transition: transform .35s var(--spring);
}
.cat-eyes .glint { transition: transform .7s ease-out; }   /* the glints glide around the pupils */

/* Both paws (yarn reaction + cursor swat) draw the same chubby knitted #knit-paw (70×160) */
.cat-paw svg, .cat-swat svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Swat: comes up under the cursor and bats at it (script.js drives it) */
.cat-swat {
  position: absolute; left: 0; bottom: 0; z-index: 3; width: 66px; height: 151px;
  pointer-events: none; transform: translateY(102%); transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.35));
}

/* Dizzy: knitted mice circling the head. script.js moves them along an ellipse each frame,
   shrinking them and dropping them behind the cat (z 1) on the far side, in front (z 3) on the near side. */
.cat-mouse {
  position: absolute; left: 0; top: 0; z-index: 3; width: 76px; height: 48px;
  pointer-events: none; opacity: 0; color: var(--cream);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.35));
}
.cat-mouse.c2 { color: var(--amber); }
.cat-mouse.c3 { color: var(--pink); }

/* Tongue: comes out of the mouth's Λ. The wrapper covers x 291–335, y 236–300 of the 600px
   image (the cat shows 325 units tall) and is clipped to the inside of the two mouth lines,
   open below their ends at y≈282, so the lines stay on top like lips. The tongue then slides
   down inside that window instead of stretching. */
.cat-tongue {
  position: absolute; left: 48.5%; top: 72.6%; z-index: 2;
  width: 7.33%; height: 19.7%; pointer-events: none;
  clip-path: polygon(37.5% 0, 55.7% 0, 100% 31.1%, 100% 100%, 0 100%, 0 27.7%);
  translate: 0 0; transition: translate .35s var(--spring);
}
.cat-tongue svg { display: block; width: 100%; height: 100%; transform: translateY(-100%); transform-origin: 50% 0; }
.peek-hero.tongue .cat-tongue svg { animation: tongue 1.8s var(--spring); }
/* Never moves past -10%: any lower and its flat top edge shows inside the mouth (looks detached) */
@keyframes tongue {
  0%   { transform: translateY(-100%); animation-timing-function: ease-out; }
  24%  { transform: translateY(-10%); }
  36%  { transform: translateY(-10%) rotate(3deg); }
  48%  { transform: translateY(-10%) rotate(-3deg); }
  80%  { transform: translateY(-10%) rotate(0deg); animation-timing-function: ease-in; }
  100% { transform: translateY(-100%); }
}

/* Sulk: when the swat misses, the cat turns around – the face squeezes to nothing, then the back
   (round knitted rump, wagging tail, a little stitched star) opens out in its place; then back again.
   The turn uses the separate `scale` property so it stacks with the hover/peek `transform`. */
.peek-hero .peek, .peek-hero .cat-eyes, .peek-hero .cat-tongue { scale: 1 1; transform-origin: 50% 100%; }
.peek-hero .peek, .peek-hero .cat-eyes { transition: transform .35s var(--spring), scale .2s ease-in .2s; }
.peek-hero.sulk .peek, .peek-hero.sulk .cat-eyes, .peek-hero.sulk .cat-tongue { scale: 0 1; transition: transform .35s var(--spring), scale .2s ease-in; }
.cat-back {
  position: absolute; inset: 0; pointer-events: none;
  scale: 0 1; transform-origin: 50% 100%;
  transition: transform .35s var(--spring), scale .2s ease-out;
  filter: drop-shadow(1.5px 0 0 #5a5555) drop-shadow(-1.5px 0 0 #5a5555) drop-shadow(0 -1.5px 0 #5a5555);
}
.peek-hero.sulk .cat-back { scale: 1 1; transition: transform .35s var(--spring), scale .2s ease-out .2s; }
.cat-rump, .cat-tail { position: absolute; background: url("assets/knit-gray.webp") 0 0 / 360px 104px repeat; }
.cat-rump {
  left: 12%; width: 76%; bottom: 0; height: 60%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140C0 62 30 14 92 12C127 11 149 25 160 42C171 25 193 11 228 12C290 14 320 62 320 140Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140C0 62 30 14 92 12C127 11 149 25 160 42C171 25 193 11 228 12C290 14 320 62 320 140Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.cat-star { position: absolute; left: 50%; bottom: 22%; width: 30px; height: 30px; translate: -50% 0; }
.cat-tail {
  left: 45.5%; bottom: 40%; width: 18%; aspect-ratio: 70 / 180;
  transform-origin: 30% 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 180'%3E%3Cpath d='M28 178C26 142 16 116 24 88C32 60 58 60 60 38C62 20 48 12 40 19' fill='none' stroke='black' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 180'%3E%3Cpath d='M28 178C26 142 16 116 24 88C32 60 58 60 60 38C62 20 48 12 40 19' fill='none' stroke='black' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.cat-foot { position: absolute; bottom: -4%; width: 17%; height: auto; }
.cat-foot.l { left: 13%; } .cat-foot.r { right: 13%; }
.peek-hero.sulk .cat-tail { animation: tail-wag .7s ease-in-out .4s infinite alternate; }
@keyframes tail-wag { from { rotate: -9deg; } to { rotate: 9deg; } }

/* Clicking the sulking cat only gets you a toot: the rump gives a little squish and knitted puffs
   of gas drift out from under the tail (the stitched star). */
.cat-rump { transform-origin: 50% 100%; }
.peek-hero.toot .cat-rump { animation: toot .45s ease-out; }
@keyframes toot {
  0%, 100% { transform: none; }
  30% { transform: scale(1.05, .93); }
  60% { transform: scale(.98, 1.03); }
}
.cat-puff {
  position: absolute; left: 50%; bottom: 13%; z-index: 3; pointer-events: none;
  width: var(--size, 46px); height: calc(var(--size, 46px) * .71); margin-left: calc(var(--size, 46px) / -2);
  color: #c2d07e; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  animation: puff 1.6s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes puff {
  0%   { opacity: 0; transform: translate(0, 10px) scale(.3); }
  12%  { opacity: 1; }
  30%  { transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .35)) scale(.85) rotate(calc(var(--rot) * .4)); }
  70%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
}

/* Yarn ball + a paw that comes up from behind the knitted band and bats it away.
   The stage's bottom edge is the band, and .hero clips everything below it. */
.cat-yarn {
  position: absolute; left: 82%; bottom: 0; z-index: 3; width: 84px; height: 68px;
  pointer-events: none; opacity: 0; transform-origin: 59.4% 53.8%;   /* centre of the ball itself, so it rolls instead of swinging */
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.35));
}
/* The paw is raised in front of the cat's chest. */
.cat-paw {
  /* placed from the ball (left 82%, its round part starts 21px in): paw edge 8px short of it, so the tap lands */
  position: absolute; left: calc(82% - 47px); bottom: 0; z-index: 3; width: 60px; height: 137px;
  pointer-events: none; transform: translateY(105%); transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.35));
}
.cat-stage.yarn .cat-yarn { animation: yarn 2.6s linear forwards; }   /* linear: the roll-off must not slow down between keyframes */
.cat-stage.yarn .cat-paw  { animation: paw 2.6s cubic-bezier(.3,1.2,.5,1) forwards; }
/* After the boop the ball keeps rolling at an even pace along the top of the gray band and
   rolls over behind it in one motion: sideways speed stays about the same while it sinks
   faster and faster. .hero clips everything below the band, so it vanishes by rolling away.
   Rotation ≈ 2° per px travelled, so it rolls rather than slides. */
@keyframes yarn {
  0%   { opacity: 0; transform: scale(.3); animation-timing-function: ease-out; }
  12%  { opacity: 1; transform: scale(1.08); animation-timing-function: ease-in-out; }
  18%  { transform: scale(1); }
  46%  { transform: translateX(0) rotate(0deg); }
  52%  { transform: translateX(-4px) translateY(0) rotate(-8deg); }    /* the boop */
  60%  { transform: translateX(14px) translateY(0) rotate(28deg); }
  68%  { transform: translateX(32px) translateY(0) rotate(64deg); }
  76%  { transform: translateX(50px) translateY(8%) rotate(100deg); }  /* starts to tip over the edge */
  84%  { transform: translateX(66px) translateY(30%) rotate(132deg); }
  92%  { transform: translateX(80px) translateY(68%) rotate(160deg); }
  100% { opacity: 1; transform: translateX(92px) translateY(115%) rotate(184deg); }
}
/* Rises ~70px: toes, beans and the pad show above the band */
@keyframes paw {
  0%, 14% { transform: translateY(105%); }
  32%  { transform: translateY(calc(100% - 68px)); }
  42%  { transform: translateY(calc(100% - 71px)) rotate(0deg); }
  50%  { transform: translateY(calc(100% - 71px)) rotate(22deg); }     /* tap the ball */
  60%  { transform: translateY(calc(100% - 68px)) rotate(4deg); }
  78%  { transform: translateY(calc(100% - 65px)) rotate(0deg); }
  100% { transform: translateY(105%); }
}
.peek-hero .peek,
.peek-hero .cat-eyes { animation: peek 1s .2s cubic-bezier(.2,.9,.3,1.1) backwards; }   /* the eyes ride with the cat */
@media (hover: hover) {
  .peek-hero:hover .peek,
  .peek-hero:hover .cat-eyes { transform: translateY(-10px); }   /* not .cat-back: the rump stays seated on the band */
  .peek-hero:hover .cat-tongue { translate: 0 -10px; }   /* the tongue rides along with the cat */
  .peek-contact:hover .peek { transform: translateY(-5px); } /* smaller cat, smaller climb */
}
@keyframes peek { from { transform: translateY(100%); } to { transform: none; } }

/* Everything that's "sewn on" at an angle reacts the same way on hover.
   Scaling up (not shifting) keeps the cursor inside, so there's no flicker at the edges. */
.tilt { transform: rotate(var(--tilt, 0deg)); transition: transform .35s var(--spring); }
@media (hover: hover) { .tilt:hover { transform: rotate(0deg) scale(1.03); } }

/* Knitted band: rows of V-stitches in cat-grey */
.knit-band {
  height: 36px;
  background-color: #8e8e8e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 2q2.5 8 6 14'/%3E%3Cpath d='M15 2q-2.5 8-6 14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 3q2.5 8 6 14'/%3E%3Cpath d='M15 3q-2.5 8-6 14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 18px 18px;
  box-shadow: inset 0 3px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.25);
}

/* ---------- Night Shift Hospital ---------- */
.night {
  position: relative; overflow: hidden;
  background: var(--navy);
  color: #dfe2ff;
  padding: clamp(60px, 9vw, 110px) 0;
}
.stars {
  position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 4px 4px;
  background-repeat: no-repeat;
  background-position: 8% 12%, 28% 6%, 47% 18%, 66% 9%, 88% 15%, 95% 4%;
}
.night .wrap { position: relative; }
.nsh-head { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.nsh-title {
  font-size: clamp(2.8rem, 7vw, 5.2rem); color: #fff;
  text-transform: uppercase; line-height: .92; letter-spacing: -.02em;
}
.nsh-tag { font-size: 1.2rem; color: #fff; }
.nsh-joke { color: rgba(223,226,255,.7); margin: 0; }
.night .cta-row { align-items: center; gap: 22px; }
.publisher {
  display: flex; align-items: center; gap: 12px;
  padding-left: 22px; border-left: 2px dashed rgba(223,226,255,.2);
  font-size: .85rem; color: rgba(223,226,255,.7);
}

/* Key art with an embroidered wishlist patch sewn onto its corner */
.nsh-media { position: relative; }
.wl-patch {
  position: absolute; top: -46px; left: -40px; margin: 0;
  width: 150px; height: 150px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-top: 20px; /* nudge the text block down: the bold number reads as sitting high */
  background: var(--teal); color: var(--navy);
  outline: 2px dashed rgba(27,31,92,.45); outline-offset: -9px;
  box-shadow: 0 0 0 4px var(--teal-dark), 0 14px 30px rgba(0,0,0,.4);
  --tilt: -12deg;
}
.wl-patch b { font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; }
.wl-patch span { font-weight: 800; font-size: .78rem; line-height: 1.3; margin-top: 4px; max-width: 8em; }
.publisher img { width: 104px; transition: transform .2s; }
@media (hover: hover) { .publisher a:hover img { transform: scale(1.05); } }

.keyart {
  margin: 0; border-radius: var(--radius); overflow: hidden; position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  --tilt: 1.2deg;
}
.keyart::after {
  content: ""; position: absolute; inset: 10px; border-radius: 16px;
  border: 2px dashed rgba(255,255,255,.45); pointer-events: none;
}

.triage { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; margin-top: clamp(64px, 9vw, 100px); }
.triage h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; }
.triage p { font-size: 1.08rem; }

.chart {
  background: #fbf6ec; color: #2a2433; border-radius: 18px; padding: 18px 20px 8px;
  font-size: .95rem; line-height: 1.45;
  box-shadow: 0 18px 0 rgba(0,0,0,.2);
  --tilt: -1.5deg;
  outline: 2px dashed rgba(42,36,51,.18); outline-offset: -8px;
}
.chart p { margin-bottom: .55em; }
.ecg-row { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: .72rem; letter-spacing: .1em; color: #6e6678; margin-bottom: 8px; }
.ecg { flex: 1; height: 34px; }
.ecg path {
  fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 500; animation: pulse 2.8s linear infinite;
}
@keyframes pulse { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.chart-label { font-weight: 900; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #6e6678; }
.chart-name { font-weight: 900; font-size: 1.35rem; }
.chart-triage { font-weight: 900; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); display: inline-block; }

/* ---------- Embroidered patch card ---------- */
.patch {
  position: relative;
  background: var(--bg-2); border-radius: var(--radius);
  outline: 2px dashed rgba(232,163,23,.7); outline-offset: -11px;
  box-shadow: 0 0 0 5px var(--bg-2), 0 0 0 7px rgba(239,230,212,.08);
}
.patch-cream {
  background: var(--cream); color: var(--bg);
  outline-color: rgba(22,20,20,.3);
  box-shadow: 0 0 0 5px var(--cream), 0 0 0 7px rgba(239,230,212,.25);
}

/* ---------- Studio ---------- */
.studio { padding: clamp(60px, 9vw, 110px) 0 40px; }
.studio-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.studio p { color: var(--cream-dim); }
.stitch-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 12px; font-weight: 800; }
.stitch-list li { display: flex; gap: 12px; align-items: center; }
.stitch-list li::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px dashed var(--pink);
  background: radial-gradient(circle, var(--pink) 0 4px, transparent 5px);
}
.location { padding: 38px 34px; --tilt: -1.5deg; }
.location-city { font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.1; color: var(--cream); }
.location-note { margin: 0; }

/* ---------- Team ---------- */
.team { padding: 70px 0; }
.people { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 1.8rem; }
.person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; font-size: .9rem; color: var(--cream-dim); }
/* Each patch is a cat head: the round patch plus logo-style ears behind it.
   The colour lives on the badge so the ears and the patch read the same --c. */
.badge {
  --c: var(--amber);
  position: relative; margin: 16px 0 10px; color: var(--c);
  transition: transform .35s var(--spring);
}
.badge svg { position: absolute; left: -8px; top: -16px; width: 100px; height: 100px; overflow: visible; z-index: 0; }
.ear-outer { fill: currentColor; stroke: rgba(22,20,20,.28); stroke-width: 1.6; stroke-linejoin: round; }
.ear-inner { fill: var(--ear-inner, var(--pink)); }   /* via a custom property: plain selectors don't reach into the shared <use> drawing */
.badge.on-pink { --ear-inner: var(--cream); }   /* pink patch: cream inner ear (same as the "Say hi" card), pink-on-pink disappears */
.person i {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  font-style: normal; font-weight: 900; font-size: 1.3rem; color: var(--bg);
  line-height: 1; letter-spacing: .02em;
  text-box: trim-both cap alphabetic; /* center the capitals themselves, not the line box */
  background: var(--c);
  outline: 2px dashed rgba(22,20,20,.4); outline-offset: -8px;
}
@media (hover: hover) { .person:hover .badge { transform: rotate(-10deg) scale(1.06); } }
.person b { color: var(--cream); font-size: 1rem; }

/* ---------- Contact ---------- */
.contact { padding: 120px 0 100px; }
.contact-box { padding: clamp(40px, 6vw, 64px) 24px; text-align: center; max-width: 760px; margin-inline: auto; }
.contact-box p { color: #5a524a; }
.mail-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: .4rem; }
.contact-box .btn { word-break: break-all; }
.btn-copy {
  cursor: pointer; border: 2px solid rgba(22,20,20,.35); background: transparent; color: var(--bg);
  min-width: 7.5em;
}
.btn-copy:hover { border-color: var(--bg); }
.btn-copy.is-copied { background: var(--teal); border-color: var(--teal); }
.peek-contact {
  position: absolute; left: 50%; bottom: 100%;
  width: 220px; transform: translateX(-50%);
  margin-bottom: 7px;
  clip-path: inset(-60px -60px 0 -60px); /* hide the body below the card's edge, keep room above for the rise */
}

/* ---------- Footer ---------- */
.foot { border-top: 2px dashed rgba(239,230,212,.12); padding: 24px 0; font-size: .9rem; color: var(--cream-dim); }
.foot-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .nsh-head, .triage, .studio-grid { grid-template-columns: 1fr; }
  .people { grid-template-columns: repeat(3, 1fr); }
  .keyart, .chart { --tilt: 0deg; }
  .nsh-media { margin-top: 36px; }
  .wl-patch { left: auto; right: -6px; --tilt: 10deg; }
  /* Single column is tall and narrow, so percentage-placed stars landed on the text.
     Keep them in the empty strip above the first line instead. */
  .stars { inset: 0 0 auto 0; height: 52px; background-position: 8% 30%, 28% 75%, 47% 40%, 66% 85%, 84% 25%, 95% 60%; }
}
/* Menu button only exists on phones */
.menu-btn {
  display: none;
  font: 900 .8rem/1.3 var(--font); letter-spacing: .06em; cursor: pointer;
  color: var(--cream); background: transparent;
  border: 2px dashed rgba(239,230,212,.45); border-radius: 999px; padding: 7px 16px;
}
.top.is-open .menu-btn { border-color: var(--amber); color: var(--amber); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  /* The page is short: on phones the header stays at the top and scrolls away */
  .top { position: relative; }
  section[id] { scroll-margin-top: 0; }
  .menu-btn { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 16px 14px;
    background: var(--bg);
    border-bottom: 2px dashed rgba(239,230,212,.12);
  }
  .top.is-open .nav { display: flex; }
  .nav a { padding: 12px 0; font-size: 1.1rem; color: var(--cream); }
  .nav a + a { border-top: 1px dashed rgba(239,230,212,.12); }
  .nav a::after { display: none; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .peek-contact { width: 170px; }
  .publisher { padding-left: 0; border-left: 0; }
  .wl-patch { width: 120px; height: 120px; top: -40px; padding-top: 16px; }
  .wl-patch b { font-size: 1.35rem; }
  .wl-patch span { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}