/* Punchwork site. Tokens match the game's Jacquard theme (src/ui/theme-jacquard.css). */
:root {
  --manila: #e8d8c3;
  --manila-2: #efe3cf;
  --manila-3: #dcc9ad;
  --iron: #1c1917;
  --vermilion: #c84b31;
  --indigo: #2b5b6c;
  --navy: #17283a;
  --brass: #d99b26;
  --grid: rgba(140, 127, 112, 0.16);
  --head: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --rivet: radial-gradient(circle, #f3c766 0 1.2px, #d99b26 1.4px 2.4px, rgba(28, 25, 23, 0.85) 2.6px 3.1px, transparent 3.4px);
  --shadow: 6px 6px 0 rgba(28, 25, 23, 0.9);
  --edge: 24px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--iron);
  background-color: var(--manila);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  font: 500 17px/1.6 var(--head);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vermilion); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; margin: 0; line-height: 1.08; }
em { font-style: normal; font-family: var(--mono); color: var(--indigo); font-weight: 700; font-size: 0.92em; }

/* The teal felt border with brass eyelets, like the title screen. */
.frame { position: fixed; inset: 0; pointer-events: none; z-index: 50;
  border: 7px solid transparent; border-image: url(/assets/felt-teal.webp) 30 round; }
.frame::after { content: ''; position: absolute; inset: 1px; border: 1.5px dashed rgba(239, 227, 207, 0.55); }
.eye { position: absolute; width: 26px; height: 26px; background: url(/assets/eyelet.webp) center / contain no-repeat; z-index: 2; }
.eye.tl { top: -10px; left: -10px; } .eye.tr { top: -10px; right: -10px; }
.eye.bl { bottom: -10px; left: -10px; } .eye.br { bottom: -10px; right: -10px; }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; isolation: isolate; text-align: center; padding: clamp(56px, 10vh, 104px) var(--edge) 0; }
.hero-mark { --logo: clamp(62px, 14vw, 164px); position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 2vw, 22px); }
.ribbon {
  position: absolute; z-index: -1; top: 13%; bottom: 13%; left: calc(50% - 50vw); width: 100vw;
  background: url(/assets/ribbon-weave.webp) 0 0 / 96px;
  box-shadow: inset 0 3px 0 rgba(28, 25, 23, 0.35), inset 0 -3px 0 rgba(28, 25, 23, 0.35);
  opacity: 0.8;
}
.ribbon::before, .ribbon::after { content: ''; position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(200, 75, 49, 0.85); }
.ribbon::before { top: 7%; } .ribbon::after { bottom: 7%; }
.holes {
  --h: calc(var(--logo) * 0.62);
  position: absolute; left: 0; right: 0; top: 50%; height: var(--h); translate: 0 -50%;
  background: url(/assets/holes.svg) 0 0 / auto 100% repeat-x; opacity: 0.9;
  animation: step 9.6s steps(24) infinite;
}
@keyframes step { to { background-position-x: calc(var(--h) * -4.8); } }

.logo { font-size: var(--logo); letter-spacing: 0.1em; text-align: left; line-height: 0.98; }
.logo .line { display: block; color: var(--iron); text-shadow: 0.04em 0.04em 0 var(--manila-3), 0.05em 0.05em 0 var(--iron); }
.logo .line + .line { margin-top: 0.08em; }
.logo .hl { color: var(--vermilion); }
.hero-bot { width: clamp(80px, 16vw, 196px); margin-bottom: -2%; filter: drop-shadow(0 6px 0 rgba(28, 25, 23, 0.18));
  animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-1.5deg); } }

.tagline { font-family: var(--mono); font-size: clamp(17px, 2.3vw, 24px); line-height: 1.45; margin: clamp(22px, 4vh, 36px) auto 10px; max-width: 44ch; }
.tagline b { color: var(--indigo); }
.sub { max-width: 50ch; margin: 0 auto; color: rgba(28, 25, 23, 0.78); }

/* Riveted plates, the game's buttons. */
.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.plate {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; font: 700 17px/1.2 var(--head); color: var(--iron); text-decoration: none;
  background: var(--rivet) 6px 6px / 12px 12px no-repeat, var(--rivet) calc(100% - 6px) 6px / 12px 12px no-repeat,
              var(--rivet) 6px calc(100% - 6px) / 12px 12px no-repeat, var(--rivet) calc(100% - 6px) calc(100% - 6px) / 12px 12px no-repeat,
              var(--manila-2);
  border: 2.5px solid var(--iron); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--iron);
  outline: 1.5px dashed rgba(28, 25, 23, 0.35); outline-offset: -8px;
  transition: transform 0.15s, box-shadow 0.15s;
}
a.plate:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--iron); }
a.plate:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--iron); }
.plate.primary { background-color: var(--vermilion); color: var(--manila-2); outline-color: rgba(239, 227, 207, 0.5); }
.plate .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 2px rgba(28, 25, 23, 0.4); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- Poster + phones */
.poster-wrap { position: relative; max-width: 1240px; margin: clamp(48px, 7vw, 80px) auto 0; padding: 0 var(--edge); }
.poster { position: relative; margin: 0; padding: 12px; background: url(/assets/felt-teal.webp) 0 0 / 160px; border-radius: 6px;
  box-shadow: 10px 10px 0 rgba(28, 25, 23, 0.9); }
.poster::after { content: ''; position: absolute; inset: 5px; border: 2px dashed rgba(239, 227, 207, 0.6); border-radius: 4px; pointer-events: none; }
.poster img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 2px var(--iron); }
.poster .eye { width: 30px; height: 30px; }
.poster .eye.tl { top: -8px; left: -8px; } .poster .eye.tr { top: -8px; right: -8px; }
.poster .eye.bl { bottom: -8px; left: -8px; } .poster .eye.br { bottom: -8px; right: -8px; }

.phones { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 3vw, 40px);
  margin-top: clamp(-260px, -18vw, -80px); }
.phone { margin: 0; width: min(28vw, 270px); border: 3px solid var(--iron); border-radius: clamp(14px, 3vw, 30px); overflow: hidden;
  background: var(--iron); padding: clamp(3px, 0.6vw, 7px); box-shadow: 8px 8px 0 rgba(28, 25, 23, 0.85); }
.phone img { border-radius: clamp(10px, 2.4vw, 24px); }
.phones .p1 { rotate: -5deg; translate: 0 28px; }
.phones .p2 { width: min(33vw, 310px); }
.phones .p3 { rotate: 5deg; translate: 0 28px; }

/* A laced chain of punch cards between sections. */
.chain { position: relative; margin: clamp(48px, 7vw, 90px) 0 0; overflow: hidden; height: clamp(90px, 15vw, 190px); }
.chain img { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; translate: -50% 0;
  filter: drop-shadow(4px 5px 0 rgba(28, 25, 23, 0.22)); animation: sway 7s ease-in-out infinite alternate; }
.chain.flip img { scale: -1 1; animation-delay: -3s; }
@keyframes sway { from { transform: translateX(-3%) rotate(-1deg); } to { transform: translateX(3%) rotate(1deg); } }

/* ---------------------------------------------------------------- Sections */
main { position: relative; }
.block { max-width: 1120px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--edge) 0; }
.kicker { display: inline-block; font: 700 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--manila-2);
  background: var(--vermilion); padding: 7px 10px 6px; margin: 0 0 16px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.block h2 { font-size: clamp(32px, 5.2vw, 56px); max-width: 18ch; }
.lede { font-size: clamp(17px, 1.8vw, 20px); max-width: 44ch; margin: 18px 0 0; }
.block > h2 + * { margin-top: 36px; }

/* Steps: punch cards with a clipped corner. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: var(--manila-2); border: 2.5px solid var(--iron); border-radius: 4px; padding: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 18px;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); }
.step:nth-child(2) { rotate: 0.6deg; } .step:nth-child(3) { rotate: -0.5deg; }
.step-art { height: 210px; display: grid; place-items: center; background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 11px 11px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 11px 11px, var(--manila);
  border: 1.5px dashed rgba(28, 25, 23, 0.35); border-radius: 3px; overflow: hidden; }
.board-art { padding: 8px; }
.board-art img { width: 100%; height: 100%; object-fit: contain; }
.step .words { position: relative; }
.step .n { position: absolute; right: 0; top: -2px; font: 700 13px/1 var(--mono); color: var(--manila-2); background: var(--iron); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.step h3 { font-size: 22px; padding-right: 34px; margin-bottom: 8px; }
.step p { margin: 0; font-size: 16px; }
.aside { font-family: var(--mono); font-size: 16px; max-width: 60ch; margin: 34px 0 0; padding-left: 16px; border-left: 3px solid var(--brass); }

.mini-card { position: relative; width: 132px; background: var(--manila-2); border: 2px solid var(--iron); border-radius: 3px; padding: 6px 6px 8px;
  box-shadow: 3px 3px 0 rgba(28, 25, 23, 0.4); display: grid; justify-items: center; rotate: -2deg; }
.mini-card img { width: 100%; aspect-ratio: 1.24; object-fit: cover; border: 1.5px solid rgba(28, 25, 23, 0.6); }
.mini-card .name { width: calc(100% + 12px); background: var(--vermilion); color: var(--manila-2); font-size: 12px; letter-spacing: 0.04em; text-align: center; padding: 5px 0; margin-top: 6px; }
.mini-card .cost, .card .cost { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--iron); color: var(--manila-2);
  font: 700 14px/26px var(--mono); text-align: center; box-shadow: 0 0 0 2.5px var(--brass); z-index: 1; }
.pips { display: flex; gap: 4px; justify-content: center; padding-top: 7px; }
.pips i { width: 10px; height: 15px; border: 1.6px solid rgba(28, 25, 23, 0.55); border-radius: 2px; }
.pips i.on { background: var(--iron); border-color: var(--iron); }
.pips i.punch { border-color: var(--vermilion); }
.io .step.in .pips i.punch { animation: punch 0.5s 0.6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes punch { 0% { transform: scale(1); } 40% { transform: scale(1.6); background: var(--vermilion); } 100% { transform: scale(1); background: var(--iron); border-color: var(--iron); } }
.stamp { position: absolute; top: 46px; left: 50%; translate: -50% 0; rotate: -12deg; font: 700 16px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--vermilion); border: 3px solid var(--vermilion); padding: 6px 9px; background: var(--manila-2); z-index: 2; white-space: nowrap; }
.io .step .stamp { opacity: 0; scale: 1.8; }
.io .step.in .stamp { animation: stamp 0.35s 0.5s ease-out forwards; }
@keyframes stamp { to { opacity: 1; scale: 1; } }

/* A fanned hand of real card art. */
.hand-wrap { padding: clamp(64px, 10vw, 120px) var(--edge) 0; text-align: center; overflow: hidden; }
.hand { position: relative; height: clamp(220px, 30vw, 310px); }
.card { --w: clamp(104px, 14vw, 160px); position: absolute; bottom: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2);
  background: var(--manila-2); border: 2px solid var(--iron); border-radius: 4px; padding: 6px 6px 8px; display: grid; justify-items: center;
  box-shadow: 0 2px 0 rgba(28, 25, 23, 0.32), 0 8px 16px rgba(40, 26, 10, 0.22);
  transform-origin: 50% 160%; transform: translateX(calc(var(--i) * var(--w) * 0.52)) rotate(calc(var(--i) * 5deg)) translateY(calc(var(--i) * var(--i) * 3px));
  transition: transform 0.25s cubic-bezier(.2, .9, .3, 1.2); }
.card:hover { transform: translateX(calc(var(--i) * var(--w) * 0.52)) rotate(calc(var(--i) * 5deg)) translateY(-26px) scale(1.06); z-index: 5; }
.card img { width: 100%; aspect-ratio: 1.24; object-fit: cover; border: 1.5px solid rgba(28, 25, 23, 0.6); }
.card b { width: calc(100% + 12px); background: var(--vermilion); color: var(--manila-2); font-size: clamp(9px, 1.15vw, 12px); padding: 5px 2px; margin-top: 6px; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; }
.card.c-skl b { background: var(--indigo); }
.caption { position: relative; font-family: var(--mono); font-size: 14px; color: rgba(28, 25, 23, 0.7); margin: 44px auto 0; }

/* Crew. */
.crew-head { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: end; }
.crew-group { width: 100%; filter: drop-shadow(6px 6px 0 rgba(28, 25, 23, 0.2)); }
.bots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.bot { background: var(--manila-2); border: 2.5px solid var(--iron); border-radius: 4px; padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.bot header { display: flex; align-items: center; gap: 16px; }
.bot header img { width: 64px; height: 84px; object-fit: contain; object-position: bottom; flex: none; }
.bot h3 { font-size: 26px; }
.board-name { font: 700 13px/1.3 var(--mono); color: var(--vermilion); margin: 4px 0 0; letter-spacing: 0.08em; text-transform: uppercase; }
.bot > p { margin: 0; font-size: 16px; }
.bot .board { margin-top: auto; width: 100%; border: 2px solid var(--iron); border-radius: 3px; }
.bot.tock { background: var(--indigo); color: var(--manila-2); }
.bot.tock .board-name { color: var(--brass); }

/* Yard. */
.yard { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.yard-phone { width: min(36vw, 300px); rotate: -2.5deg; }
.yard-copy p { max-width: 48ch; }
.facts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.facts li { font-size: 16px; padding: 10px 14px; background: var(--manila-2); border: 1.5px dashed rgba(28, 25, 23, 0.45); border-radius: 3px; }
.facts b { display: inline-block; min-width: 9.5em; font-family: var(--mono); color: var(--indigo); }

/* Screens gallery: a row of phones that scrolls sideways on small screens. */
.gallery-wrap { padding: clamp(56px, 9vw, 110px) 0 0; }
.gallery { display: flex; gap: clamp(16px, 2.5vw, 32px); justify-content: center; padding: 8px var(--edge) 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery .phone { flex: none; width: min(22vw, 250px); scroll-snap-align: center; position: relative; }
.gallery .phone:nth-child(odd) { rotate: -1.5deg; } .gallery .phone:nth-child(even) { rotate: 1.5deg; translate: 0 14px; }
.gallery figcaption { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; font: 700 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--iron); color: var(--manila-2); padding: 7px 10px; border-radius: 3px; white-space: nowrap; }

.wide { padding: clamp(48px, 8vw, 96px) var(--edge) 0; }
.desk { margin: 0 auto; max-width: 1180px; border: 3px solid var(--iron); border-radius: 8px; overflow: hidden; box-shadow: 10px 10px 0 rgba(28, 25, 23, 0.9); }

.closer { text-align: center; padding-bottom: 40px; }
.closer h2 { margin: 0 auto; }
.closer p { margin: 18px auto 0; }
.closer-art { width: min(520px, 90%); margin: 0 auto 26px; }

.foot { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; padding: 30px var(--edge) 46px; font: 14px var(--mono); border-top: 2px dashed rgba(28, 25, 23, 0.3); margin: 40px var(--edge) 0; }
.foot a { color: var(--iron); }

/* Scroll reveals (only when JS added .io). */
.io .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s, transform 0.6s cubic-bezier(.2, .9, .3, 1); }
.io .reveal.in { opacity: 1; transform: none; }
.io .bots .bot:nth-child(2) { transition-delay: 0.08s; } .io .bots .bot:nth-child(4) { transition-delay: 0.08s; }
.io .steps .step:nth-child(2) { transition-delay: 0.1s; } .io .steps .step:nth-child(3) { transition-delay: 0.2s; }

/* ---------------------------------------------------------------- Narrow */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; max-width: 560px; }
  .crew-head { grid-template-columns: 1fr; }
  .crew-group { max-width: 520px; }
  .yard { grid-template-columns: 1fr; }
  .yard-phone { justify-self: center; order: 2; }
  .gallery { justify-content: flex-start; }
  .gallery .phone { width: min(56vw, 250px); }
}
@media (max-width: 640px) {
  :root { --edge: 16px; --shadow: 4px 4px 0 rgba(28, 25, 23, 0.9); }
  body { font-size: 16px; }
  .bots { grid-template-columns: 1fr; }
  .poster { padding: 7px; box-shadow: 5px 5px 0 rgba(28, 25, 23, 0.9); }
  .poster .eye { width: 22px; height: 22px; }
  .phones { gap: 6px; margin-top: -40px; }
  .phone { border-width: 2px; box-shadow: 4px 4px 0 rgba(28, 25, 23, 0.85); }
  .phones .p1, .phones .p3 { translate: 0 16px; }
  .yard-phone { width: min(70vw, 280px); }
  .facts b { display: block; min-width: 0; }
  .card { --w: 92px; }
  .plate { padding: 12px 18px; font-size: 16px; }
  .step-art { height: 190px; }
}

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