/* ASSJET: peach-beige page, plum ink, chartreuse marker, blood-orange sun. Unbounded for headlines, Hanken Grotesk for everything else.
   The owner's look from the Olympus After Hours boards (brands/assjet/design.md). */
@font-face { font-family: "Unbounded"; src: url("fonts/unbounded-var-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --brand: #2e0f47;          /* plum: ink, dark bands, the main button on light */
  --plum-2: #4a1d6b;         /* cards on plum */
  --lime: #def919;           /* the marker and the button on plum */
  --orange: #ff4a1c;         /* the sun, the rule: shapes only */
  --orange-ink: #b83600;     /* orange as text: 4.8:1 on paper */
  --paper: #f6e4d6;          /* page ground: peach-beige */
  --card: #fff8f1;
  --ink: #2e0f47;            /* text */
  --ink-2: #5b4670;          /* secondary text, AA on paper */
  --line: rgb(46 15 71 / .16);
  --on-plum: #fff4ea;
  --on-plum-2: #d9c6e6;
  --radius: 18px; --radius-s: 12px; --pill: 999px;
  --shadow: 6px 6px 0 var(--ink);   /* the hard shadow, no blur */
  --step-0: clamp(1.0625rem, 1.03rem + .14vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.19rem + .26vw, 1.4375rem);
  --step-2: clamp(1.5rem, 1.33rem + .7vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.5vw, 2.8rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem);
  /* names the ad picture maker reads (lib/adcreative.ts): page, band, ink, accent */
  --oat: #f6e4d6; --oat-2: #f0d4c0; --green: #2e0f47;
  --kit-accent: #2e0f47; --kit-line: rgb(46 15 71 / .22); --kit-radius: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; margin: 0; background: var(--paper); color: var(--ink); font: 500 var(--step-0)/1.55 "Hanken Grotesk", system-ui, sans-serif; }
h1, h2, h3 { font-family: "Unbounded", system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: 1.04; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: var(--step-4); transform: skewX(-8deg); transform-origin: left bottom; }
h2 { font-size: var(--step-3); transform: skewX(-8deg); transform-origin: left bottom; }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--orange); }
img { max-width: 100%; display: block; }
.aj-wrap { width: min(1080px, 100% - 40px); margin: 0 auto; }
/* the marker: one phrase, never a single word on its own line */
.mark { background: var(--lime); color: var(--brand); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* the rule and the italic lowercase punchline under a headline */
.rule { width: 160px; height: 6px; background: var(--orange); margin: 22px 0 16px; border: 0; }
.punch { font: italic 800 var(--step-2)/1.15 "Hanken Grotesk", sans-serif; text-transform: lowercase; color: var(--orange-ink); margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--radius-s);
  background: var(--brand); color: #fff; font: 800 var(--step-0)/1 "Hanken Grotesk", sans-serif; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--orange); transition: transform .12s ease-out, box-shadow .12s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--orange); color: #fff; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--orange); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.btn.lime { background: var(--lime); color: var(--brand); box-shadow: 4px 4px 0 var(--brand); }
.btn.lime:hover { color: var(--brand); box-shadow: 5px 5px 0 var(--brand); }
.btn.ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
/* the Greek key, a strip under a band */
.key { height: 28px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cpath d='M3 25V3H33V19H11V11H25' fill='none' stroke='%232e0f47' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 36px 28px; }
.key.lime { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cpath d='M3 25V3H33V19H11V11H25' fill='none' stroke='%23def919' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E"); }
/* header */
.aj-top { background: var(--brand); }
.aj-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.aj-logo img { height: 44px; width: auto; }
.aj-top-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-s); background: var(--lime); color: var(--brand); font-weight: 800; text-decoration: none; }
.aj-top-cta:hover { background: #eaff4a; color: var(--brand); }
/* footer */
.aj-foot { background: var(--brand); color: var(--on-plum); padding: 40px 0 48px; }
.aj-foot p { margin: 0 0 10px; color: var(--on-plum-2); }
.aj-foot b { color: var(--on-plum); }
.aj-foot a { color: var(--on-plum); text-decoration-color: var(--lime); }
.aj-foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0; }
.aj-foot-links a { min-height: 44px; display: inline-flex; align-items: center; }
.aj-legal { font-size: 1rem; }
/* shared page pieces (brand pages) */
.aj-page { padding: 48px 0 72px; }
.aj-page .aj-wrap { max-width: 720px; }
.aj-card { background: var(--card); border: 2px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.aj-band { background: var(--brand); color: var(--on-plum); padding-inline: 20px; }
.aj-band .aj-wrap { width: 100%; }
.aj-band h2, .aj-band h3 { color: var(--on-plum); }