/* Hallmark · shape: Manifesto (home), Poster teaser (catnap) · genre: editorial · theme: Carnival (deal 3/3, seed indie-game-studio-drunken-9b28·0600bec6·2026-11-09·r0) · job: hire (contact) and follow · draw: b60f60 (home), 9bfe9c (catnap, photo swapped for a type canvas)
 * hero: Settled (home), Poster on a night canvas (catnap) · nav: edge-aligned on a plum bar on home (by request), the night bar on catnap, wordmark and one link plus Email us · footer: colophon block · imagery: none, the user's logo only · signature: the wonky monkey set huge and tilted on a cyan print · motion: the print staggers in once and settles at its tilt, the monkey sways on hover, the house-rules cards are dealt onto the board once when they scroll in and lift when hovered, buttons press into their shadow, the social icon buttons too, their glyph tipping on hover · carnival: studio-night, paper cooled to a near-white cool grey by request, Catnap in a declared night block, the house rules back on a plum band by request
 * axes: light/display-heavy/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, a studio with one unannounced game has few facts; leaned on the logo, the idea-box house rules as tilted cards and a night world for Catnap instead of filler */
/* Hallmark · dismissed 23 · posture full-palette is declared: the cyan print, the plum house-rules band and the night band and poster are whole fields, never two accents filling one surface */
/* Hallmark · waive 77 · the close is one line and an action, once a page · the studio email set at poster size with its copy button is the page’s one job */
/* Hallmark · dismissed F20 · ul.cards is one row of three at 1440; the second card’s 16px drop reads as a new row to the measure */
@import url("./tokens.css");
@import url("./base.css");

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Cursor: the arrow everywhere, the hand only on things you can click */
html { cursor: default; }
a[href], button:not(:disabled), label[for], summary { cursor: pointer; }

/* The logo: the user's SVG inline, filled with currentColor so it takes the ink token */
.mark { display: block; width: 100%; height: auto; aspect-ratio: 1; color: inherit; }

/* Night surfaces own their paper */
.night { background: var(--color-paper); color: var(--color-ink); }

/* Nav: edge-aligned on a plum bar, the wordmark and one link plus the email action */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-plum); color: var(--color-on-plum); border-bottom: var(--rule-bar) solid var(--color-ink); }
.bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-on-plum); text-decoration: none; font: 800 var(--text-xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); white-space: nowrap; }
.wordmark .mark { width: 36px; flex-shrink: 0; }
.bar nav ul { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.bar nav a:not(.btn) { color: var(--color-on-plum); font-weight: 500; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.bar nav a:not(.btn):hover { color: var(--color-accent); }
.bar :focus-visible, .bar .btn:focus-visible { outline-color: var(--color-focus-on-dark); }

/* Controls: the pair, first-accent fill and the ink outline, both on the hard shadow */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); background: var(--color-paper); color: var(--color-ink); font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); }
/* Pressed: the button drops into its own hard shadow */
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-paper-3); color: var(--color-ink); }
.bar .btn { background: transparent; color: var(--color-on-plum); border-color: var(--color-on-plum); box-shadow: 4px 4px 0 var(--color-accent); }
.bar .btn:hover { background: var(--color-on-plum); color: var(--color-accent-ink); }
.bar .btn:active { box-shadow: 1px 1px 0 var(--color-accent); }
/* Catnap keeps its night bar: the plum header is the home page's only */
.night .bar { background: var(--color-paper); color: var(--color-ink); }
.night .wordmark, .night .bar nav a:not(.btn) { color: var(--color-ink); }
.night .bar nav a:not(.btn) { text-decoration-color: var(--color-accent-2); }
.night .bar nav a:not(.btn):hover { color: var(--color-accent-2); }
.night .bar .btn { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-ink); box-shadow: var(--shadow-card); }
.night .bar .btn:hover { background: var(--color-paper-3); color: var(--color-ink); }
.night .bar .btn:active { box-shadow: 1px 1px 0 var(--color-ink); }
.night .bar :focus-visible, .night .bar .btn:focus-visible { outline-color: var(--color-focus); }
.btn--small { min-height: 44px; font-size: var(--text-md); padding: 0 var(--space-md); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* Home hero: Settled, text on seven, the monkey on five */
.hero { padding-block: var(--space-2xl); min-height: calc(100dvh - 74px); display: grid; align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: clamp(3.5rem, 8.2vw, 9rem); line-height: 1; text-transform: uppercase; max-width: 13ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; }
.hero .actions { margin-top: var(--space-xl); }
.print { margin: 0; padding: var(--space-2xl); background: var(--color-accent); color: var(--color-accent-ink); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transform: rotate(-3deg); animation: print-in 800ms var(--ease-out) 120ms both; }
.print .mark { transform-origin: 50% 85%; }
@media (hover: hover) { .print:hover .mark { animation: monkey-sway 900ms var(--ease-out); } }

/* The one authored moment: the print staggers in like it had one too many, then settles at its tilt */
@keyframes print-in {
  0% { opacity: 0; transform: translateY(-28px) rotate(9deg); }
  30% { opacity: 1; }
  55% { transform: translateY(4px) rotate(-6deg); }
  78% { transform: translateY(0) rotate(-1.5deg); }
  100% { opacity: 1; transform: rotate(-3deg); }
}
@keyframes monkey-sway {
  25% { transform: rotate(-7deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}

/* Bands */
.band { padding-block: var(--section-gap-s); }
.band--paper { background: var(--color-paper-2); color: var(--color-ink); }
/* Plum band: the house rules pinned to a plum board, the cards casting cyan shadows */
.band--plum { --card-shadow: var(--color-accent); background: var(--color-accent-2); color: var(--color-paper); }
.band--plum .card { box-shadow: 4px 4px 0 var(--card-shadow); }
.band--plum :focus-visible { outline-color: var(--color-focus-on-dark); }
h2 { text-transform: uppercase; line-height: 1.02; }

/* House rules: idea-box cards pinned up at the print's tilt */
.house__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.card { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-xl); background: var(--color-paper); color: var(--color-ink); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transform: rotate(-1.5deg); }
.card:nth-child(2) { transform: rotate(1deg) translateY(var(--space-md)); }
.card:nth-child(3) { transform: rotate(-0.5deg); }
.card.is-waiting { opacity: 0; }
@media print { .card.is-waiting { opacity: 1; } }
.card { transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
/* Hover: the card is picked up off the board, straightened, its shadow longer */
@media (hover: hover) { .cards .card:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 8px 8px 0 var(--card-shadow, var(--color-ink)); } }
.card h3 { font-size: var(--text-2xl); line-height: 1.05; text-transform: uppercase; }
.card p { font-size: var(--text-lead); line-height: 1.45; }

/* Catnap teaser: a slice of the night page on the home page */
.teaser { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: end; }
.teaser__name { font-size: clamp(5rem, 15vw, 14rem); line-height: 1.02; letter-spacing: -0.005em; text-transform: uppercase; white-space: nowrap; max-width: none; }
.teaser__pitch { font-size: var(--text-lead); line-height: 1.45; max-width: 30ch; margin-bottom: var(--space-lg); }

/* Stars: the halftone screen scattered in two sizes, kept to the empty top corner */
.stars { position: relative; isolation: isolate; }
.stars::before { content: ""; position: absolute; inset: 0 0 auto 45%; height: 55%; z-index: -1; pointer-events: none; opacity: 0.45;
  background-image: radial-gradient(var(--color-ink) 1px, transparent 1.6px), radial-gradient(var(--color-ink) 1.6px, transparent 2.2px);
  background-size: 29px 37px, 71px 59px; background-position: 0 0, 13px 21px;
  -webkit-mask-image: linear-gradient(to bottom left, var(--color-ink), transparent 75%); mask-image: linear-gradient(to bottom left, var(--color-ink), transparent 75%); }

/* The close: the address set as the action, with a copy fallback */
.hello { padding-block: var(--section-gap); }
.hello h2 { margin-bottom: var(--space-lg); }
.hello__lead { font-size: var(--text-lead); line-height: 1.45; max-width: 40ch; margin-bottom: var(--space-xl); }
.hello__mail { display: inline-block; font: 800 clamp(2.5rem, 6.2vw, 6.5rem)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-2); text-decoration-thickness: 6px; text-underline-offset: 0.12em; text-decoration-skip-ink: none; transition: color var(--dur-short) var(--ease-out); }
.hello__mail span { white-space: nowrap; }
.hello__mail:hover { color: var(--color-accent-2); }
.hello__mail:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; }
.copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.copy__status { min-height: 1lh; color: var(--color-muted); }
.copy__status.is-new { animation: status-in var(--dur-short) var(--ease-out); }
@keyframes status-in { from { opacity: 0; transform: translateY(4px); } }

/* Follow: the socials as round icon buttons, pressing into their shadow like every other button */
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-bar) solid var(--color-rule); }
.follow p { font-size: var(--text-lead); }
.follow ul { display: flex; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.btn--icon { width: 56px; min-height: 56px; padding: 0; }
.btn--icon .icon { width: 26px; height: 26px; transition: transform var(--dur-short) var(--ease-out); }
.btn--icon:hover { background: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) { .btn--icon:hover .icon { transform: rotate(-8deg) scale(1.08); } }

/* Catnap: Poster on the night canvas */
.poster { min-height: calc(100dvh - 74px); display: grid; align-items: end; padding-block: var(--space-3xl); }
.poster h1 { font-size: clamp(6rem, 22vw, 20rem); line-height: 1.02; letter-spacing: -0.005em; text-transform: uppercase; white-space: nowrap; max-width: none; }
.poster__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-bar) solid var(--color-rule); }
.poster .lead { font-size: clamp(1.5rem, 1.6vw + 0.75rem, 2.25rem); line-height: 1.3; max-width: 26ch; }
.poster .actions { justify-content: end; }
.poster__meta { margin-top: var(--space-sm); font-size: var(--text-lead); color: var(--color-ink-2); }

/* Footer: a colophon block */
.colophon { border-top: var(--rule-bar) solid var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); }
.colophon__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xl); align-items: start; }
.colophon .mark { width: 72px; color: var(--color-ink); }
.colophon p { max-width: 52ch; }
.colophon ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.colophon a { text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; }
.colophon a:hover { color: var(--color-accent-2); }
.colophon small { display: block; margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero__grid, .house__head, .teaser, .poster__foot, .cards { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { gap: var(--space-2xl); }
  .print { max-width: 420px; padding: var(--space-xl); }
  .cards { gap: var(--space-xl); }
  .card, .card:nth-child(2), .card:nth-child(3) { transform: rotate(-1deg); }
  .card:nth-child(even) { transform: rotate(1deg); }
  .teaser__name, .poster h1 { white-space: normal; }
  .poster .actions { justify-content: start; }
  .poster { min-height: 0; padding-block: var(--space-2xl); }
  .stars::before { inset: 0 0 auto 30%; height: 40%; }
  .colophon__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .bar nav ul { gap: var(--space-md); }
  .wordmark__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wordmark .mark { width: 40px; }
  .hello__mail span { display: block; }
}