/* Hallmark · shape: Letter · genre: playful · theme: Paste-up (deal 1/3, seed belle-pour-installer-modpack-0b00·167a66f2·2026-11-13·r0) · job: join · draw: 035797
 * hero: Poster · nav: slab · footer: statement · imagery: none · signature: the server address on the fluorescent sheet · pasteup: kraft
 * axes: mid/display-condensed/chromatic-yellow · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P6 H4 E5 S5 R5 V5 · weakest: P, the kit is words so the yellow sheet carries the address instead of a photograph */
/* waive: 83 — no photograph; the page is a flyer of facts the players must read */
@import url("./tokens.css");
@import url("./base.css");

body.fibre { position: relative; isolation: isolate; }
body.fibre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

h1, h2 { font-weight: 400; text-transform: uppercase; line-height: 1; }
h3 { font: 500 var(--text-title)/1.2 var(--font-body); letter-spacing: 0; text-transform: none; }

.slab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 72px;
  padding: var(--space-sm) var(--gutter);
  background: var(--color-paper-3);
  color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-ink);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.slab a:not(.btn) { text-decoration: none; }

.hero {
  min-height: 92dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--gap-columns);
  align-items: end;
  padding: var(--space-3xl) var(--gutter) var(--space-2xl);
}
.hero h1 { font-size: calc(var(--text-display) * 1.35); max-width: 8ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

.btn {
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: var(--space-sm) var(--space-md);
  font: 500 15px/1.2 var(--font-body);
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--color-ink);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.btn:hover { translate: 1px 1px; box-shadow: 3px 3px 0 var(--color-ink); }
.btn:active { translate: 4px 4px; box-shadow: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { background: var(--color-paper-3); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.sheet {
  background: var(--color-paper-3);
  box-shadow: var(--shadow-sheet);
  padding: var(--space-lg);
}
.sheet--fluoro {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  rotate: -1.5deg;
  max-width: 100%;
  justify-self: start;
}
.address {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.sheet p { margin-top: var(--space-md); }

.section { padding: var(--section-gap-s) var(--gutter); }
.section h2 { margin-bottom: var(--space-xl); }

.flyers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: stretch;
}
.flyers article:nth-child(2) { rotate: 1.2deg; margin-top: var(--space-lg); }
.flyers article:nth-child(4) { rotate: -1deg; }
.flyer h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); line-height: 1; }
.flyer p { margin-top: var(--space-md); }

.ruled { rotate: -0.6deg; }
.ruled row, .ruled .row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: var(--rule-hair) solid var(--color-rule-2);
}
.ruled .row:last-child { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.ruled strong {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--text-xl);
}

.close {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-3xl) var(--gutter);
}
.close h2 { color: var(--color-paper); max-width: 16ch; }
.close p { margin-top: var(--space-lg); max-width: 36ch; color: var(--color-paper); }
.footer {
  padding: var(--space-xl) var(--gutter) var(--space-2xl);
}
.footer p {
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: 1;
  text-transform: uppercase;
  max-width: 45ch;
}

@media (max-width: 60rem) {
  .hero, .flyers { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: var(--space-2xl); }
  .flyers article:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { translate: none; }
}