/* ————————————————————————————————————————————————
   LANDING KIT · the Alejandro signature layer for app landing pages
   Web sibling of the brandkit Compose module.
   Canon: PersonalBrand/authority-system/brand/brand-kit.md (v0.4, §13)

   Rule: personality yes, palette no. Override the --lk-* color tokens
   per app; never adopt the founder's editorial palette wholesale.
   ———————————————————————————————————————————————— */

@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plexmono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plexmono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/publicsans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* —— palette tokens: OVERRIDE THESE PER APP (§4: one loud accent) —— */
  --lk-paper: #faf6ee;          /* page background */
  --lk-ink: #1c1917;            /* text + borders */
  --lk-surface: #fffdf8;        /* cards */
  --lk-accent: #b4452c;         /* THE app accent: stamps, hand notes, CTAs */
  --lk-accent-contrast: #fff;   /* text on accent */
  --lk-soft: #e9e2d2;           /* quiet fills (eyebrows, chips) */
  --lk-line: rgba(28, 25, 23, .28);

  /* —— shared skeleton: DO NOT override (§3 typography, §6 motion) —— */
  --lk-display: "Bricolage", "Arial Black", sans-serif;
  --lk-hand: "Caveat", "Bradley Hand", cursive;
  --lk-mono: "Plex Mono", "Courier New", monospace;
  --lk-body: "Public Sans", Arial, sans-serif;
  --lk-max: 1180px;
  --lk-shadow: 7px 7px 0 var(--lk-ink);
  --lk-slam: 340ms cubic-bezier(.2, 1.6, .3, 1);
  --lk-scrawl: 500ms ease-out;
  --lk-settle: 160ms ease-out;
}

/* —— base —— */

.lk * { box-sizing: border-box; }
.lk {
  margin: 0;
  background: var(--lk-paper);
  color: var(--lk-ink);
  font-family: var(--lk-body);
  font-optical-sizing: auto;
  overflow-x: hidden;
}
.lk::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.lk a { color: inherit; }
.lk :is(button, input, select) { font: inherit; }
.lk :is(h1, h2, h3) { text-wrap: balance; }
.lk :is(a, button, input):focus-visible { outline: 4px solid var(--lk-accent); outline-offset: 3px; }

.lk-wrap { width: min(calc(100% - 40px), var(--lk-max)); margin-inline: auto; }
.lk-section { padding-block: 90px; }

/* —— type roles —— */

.lk-display {
  margin: 0;
  font: 800 clamp(2.6rem, 6.5vw, 5.2rem)/.92 var(--lk-display);
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.lk-display--hero { font-size: clamp(3.4rem, 9.5vw, 7.6rem); line-height: .88; }
.lk-hand {
  display: inline-block;
  color: var(--lk-accent);
  font: 600 clamp(1.9rem, 4.5vw, 3.4rem)/1 var(--lk-hand);
  transform: rotate(-2.5deg);
}
.lk-mono, .lk-eyebrow {
  margin: 0;
  font: 600 .72rem/1.35 var(--lk-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lk-eyebrow {
  display: inline-block;
  padding: 6px 10px;
  background: var(--lk-soft);
  border: 2px solid var(--lk-ink);
}
.lk-deck { max-width: 620px; font-size: 1.18rem; line-height: 1.5; font-weight: 500; }

/* —— motifs (§5: max three per page beyond type) —— */

.lk-stamp {
  display: inline-block;
  padding: 11px 18px;
  border: 5px double var(--lk-accent);
  color: var(--lk-accent);
  font: 700 1.05rem/1.15 var(--lk-mono);
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-7deg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .82 .2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.lk-note {
  position: relative;
  width: fit-content;
  max-width: 280px;
  padding: 22px 18px 16px;
  border: 2px solid var(--lk-ink);
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow);
  font: 600 1.24rem/1.15 var(--lk-hand);
  transform: rotate(2.6deg);
}
.lk-tape {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 105px;
  height: 25px;
  background: color-mix(in srgb, var(--lk-soft) 78%, transparent);
  border-inline: 1px dashed var(--lk-line);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.lk-corners {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  --c: var(--lk-ink);
  background:
    linear-gradient(var(--c) 0 0) left top / 24px 3px,
    linear-gradient(var(--c) 0 0) left top / 3px 24px,
    linear-gradient(var(--c) 0 0) right top / 24px 3px,
    linear-gradient(var(--c) 0 0) right top / 3px 24px,
    linear-gradient(var(--c) 0 0) left bottom / 24px 3px,
    linear-gradient(var(--c) 0 0) left bottom / 3px 24px,
    linear-gradient(var(--c) 0 0) right bottom / 24px 3px,
    linear-gradient(var(--c) 0 0) right bottom / 3px 24px;
  background-repeat: no-repeat;
}
/* REC possession rule (§5): use only next to explicit "your" copy. */
.lk-rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 2px solid var(--lk-ink);
  background: var(--lk-surface);
  font: 600 .7rem/1 var(--lk-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--lk-ink);
}
.lk-rec i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lk-accent);
  animation: lk-blink 1.4s steps(1) infinite;
}

/* —— controls —— */

.lk-btn {
  display: inline-block;
  padding: 14px 22px;
  border: 2px solid var(--lk-ink);
  border-radius: 0;
  background: var(--lk-accent);
  color: var(--lk-accent-contrast);
  box-shadow: 4px 4px 0 var(--lk-ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font: 700 .98rem/1.1 var(--lk-body);
  transition: transform .1s, box-shadow .1s;
}
.lk-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--lk-ink); }
.lk-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--lk-ink); }
.lk-btn--ink { background: var(--lk-ink); color: var(--lk-paper); }
.lk-btn--quiet { background: var(--lk-soft); color: var(--lk-ink); }

/* —— the graduation dialog mock (§8c) —— */

.lk-dialog {
  position: relative;
  width: min(430px, 100%);
  padding: 30px 28px 26px;
  border: 3px solid var(--lk-ink);
  border-radius: 14px;
  background: var(--lk-surface);
  box-shadow: 8px 8px 0 var(--lk-ink);
  text-align: center;
}
.lk-dialog-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto;
  place-items: center;
  border: 3px solid var(--lk-ink);
  border-radius: 14px;
  background: var(--lk-soft);
  font-size: 1.6rem;
}
.lk-dialog-title { margin: 18px 0 6px; font: 750 1.45rem/1.1 var(--lk-display); }
.lk-dialog-body { margin: 0 0 22px; font-size: .95rem; }
.lk-dialog-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.lk-dialog-btn {
  padding: 11px 10px;
  border: 2px solid var(--lk-ink);
  border-radius: 9px;
  background: var(--lk-paper);
  cursor: pointer;
  font: 600 .88rem/1.1 var(--lk-body);
}
.lk-dialog-btn--primary { background: var(--lk-accent); color: var(--lk-accent-contrast); font-weight: 700; }

/* —— lockup (§8d) —— */

.lk-lockup {
  font: 600 .72rem/1.4 var(--lk-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lk-lockup a { text-underline-offset: 4px; }

/* —— motion grammar (§6) —— */

@keyframes lk-slam {
  from { opacity: 0; transform: scale(1.7) rotate(-16deg); }
  to { opacity: 1; transform: scale(1) rotate(-7deg); }
}
@keyframes lk-scrawl {
  from { opacity: 0; transform: rotate(-2.5deg) translateY(10px); }
  to { opacity: 1; transform: rotate(-2.5deg) translateY(0); }
}
@keyframes lk-blink { 50% { opacity: .15; } }
.lk-anim-slam { animation: lk-slam var(--lk-slam) both; }
.lk-anim-scrawl { animation: lk-scrawl var(--lk-scrawl) both; }

@media (prefers-reduced-motion: reduce) {
  .lk-anim-slam, .lk-anim-scrawl { animation: none; opacity: 1; }
  .lk-rec i { animation: none; }
  .lk-btn { transition: none; }
}

/* —— responsive floor —— */

@media (max-width: 640px) {
  .lk-wrap { width: min(calc(100% - 24px), var(--lk-max)); }
  .lk-section { padding-block: 60px; }
  .lk-dialog-actions { grid-template-columns: 1fr; }
}