/* Hallmark · shape: Ecosystem Index · genre: playful · theme: Hum (deal 2/3, seed developer-indie-app-studio-09b9·2b90ce34·2026-11-13·r0) · job: try · draw: 6b1b9b
 * hero: Banner · nav: banner over a retracting bar · footer: index columns · imagery: the product · signature: the six real app icons as card stock on a torn kraft strip
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the catalogue is the page so the two tiers of app cards change ratio to keep it from reading as one grid */
/* waive 8: shape swapped from the drawn Stat-Led to Ecosystem Index, the studio has no figures to lead with and six real products to list */
/* waive 83: on the game page the pictures are the product itself, three captured screens and one wide capture, not photographs */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .19 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.008 .7' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tear-bottom: polygon(0% 0%, 100% 0%, 100.0% calc(100% - 1.0px), 97.4% calc(100% - 0.7px), 94.7% calc(100% - 6.2px), 92.1% calc(100% - 6.5px), 89.5% calc(100% - 3.1px), 86.8% calc(100% - 5.6px), 84.2% calc(100% - 2.8px), 81.6% calc(100% - 6.4px), 78.9% calc(100% - 5.0px), 76.3% calc(100% - 6.2px), 73.7% calc(100% - 5.0px), 71.1% calc(100% - 3.3px), 68.4% calc(100% - 6.1px), 65.8% calc(100% - 0.2px), 63.2% calc(100% - 2.1px), 60.5% calc(100% - 4.1px), 57.9% calc(100% - 5.3px), 55.3% calc(100% - 0.4px), 52.6% calc(100% - 4.7px), 50.0% calc(100% - 5.2px), 47.4% calc(100% - 3.7px), 44.7% calc(100% - 6.1px), 42.1% calc(100% - 4.4px), 39.5% calc(100% - 1.1px), 36.8% calc(100% - 4.5px), 34.2% calc(100% - 3.3px), 31.6% calc(100% - 5.9px), 28.9% calc(100% - 3.3px), 26.3% calc(100% - 7.0px), 23.7% calc(100% - 1.6px), 21.1% calc(100% - 1.8px), 18.4% calc(100% - 5.9px), 15.8% calc(100% - 0.1px), 13.2% calc(100% - 0.5px), 10.5% calc(100% - 4.4px), 7.9% calc(100% - 4.2px), 5.3% calc(100% - 2.6px), 2.6% calc(100% - 3.8px), 0.0% calc(100% - 1.7px));
  --tear-top: polygon(0.0% 1.6px, 2.6% 6.7px, 5.3% 0.9px, 7.9% 4.9px, 10.5% 0.6px, 13.2% 1.7px, 15.8% 7.0px, 18.4% 1.5px, 21.1% 4.5px, 23.7% 3.2px, 26.3% 3.2px, 28.9% 3.5px, 31.6% 1.3px, 34.2% 5.8px, 36.8% 0.6px, 39.5% 1.6px, 42.1% 0.1px, 44.7% 1.9px, 47.4% 2.9px, 50.0% 6.3px, 52.6% 2.7px, 55.3% 0.8px, 57.9% 1.8px, 60.5% 6.9px, 63.2% 0.4px, 65.8% 4.3px, 68.4% 2.6px, 71.1% 4.6px, 73.7% 2.4px, 76.3% 4.8px, 78.9% 3.5px, 81.6% 4.5px, 84.2% 6.3px, 86.8% 4.1px, 89.5% 1.0px, 92.1% 0.5px, 94.7% 6.6px, 97.4% 3.4px, 100.0% 1.4px, 100% 100%, 0% 100%);
  --tear-both: polygon(0.0% 4.4px, 3.3% 5.2px, 6.7% 5.6px, 10.0% 6.6px, 13.3% 5.2px, 16.7% 6.5px, 20.0% 0.2px, 23.3% 3.3px, 26.7% 6.6px, 30.0% 4.5px, 33.3% 6.3px, 36.7% 0.8px, 40.0% 3.3px, 43.3% 1.7px, 46.7% 3.8px, 50.0% 4.0px, 53.3% 0.1px, 56.7% 1.5px, 60.0% 2.0px, 63.3% 6.4px, 66.7% 5.4px, 70.0% 1.1px, 73.3% 5.6px, 76.7% 1.0px, 80.0% 4.3px, 83.3% 0.9px, 86.7% 0.0px, 90.0% 6.1px, 93.3% 1.5px, 96.7% 1.5px, 100.0% 6.9px, 100.0% calc(100% - 5.9px), 96.7% calc(100% - 5.2px), 93.3% calc(100% - 0.2px), 90.0% calc(100% - 6.8px), 86.7% calc(100% - 0.4px), 83.3% calc(100% - 4.9px), 80.0% calc(100% - 3.4px), 76.7% calc(100% - 2.2px), 73.3% calc(100% - 3.4px), 70.0% calc(100% - 5.7px), 66.7% calc(100% - 2.2px), 63.3% calc(100% - 2.4px), 60.0% calc(100% - 4.7px), 56.7% calc(100% - 0.0px), 53.3% calc(100% - 4.2px), 50.0% calc(100% - 2.1px), 46.7% calc(100% - 0.5px), 43.3% calc(100% - 1.0px), 40.0% calc(100% - 1.2px), 36.7% calc(100% - 2.5px), 33.3% calc(100% - 2.1px), 30.0% calc(100% - 6.3px), 26.7% calc(100% - 6.8px), 23.3% calc(100% - 4.8px), 20.0% calc(100% - 6.6px), 16.7% calc(100% - 1.4px), 13.3% calc(100% - 4.7px), 10.0% calc(100% - 3.8px), 6.7% calc(100% - 6.7px), 3.3% calc(100% - 2.0px), 0.0% calc(100% - 6.1px));
  --container: 1240px;
  --nav-h: 72px;
}

body { background: var(--grain), var(--fibre), var(--color-paper); font-weight: 500; font-size: 1.0625rem; }
a { color: var(--color-accent-2); }
.muted, small, figcaption { color: var(--color-muted); font-size: var(--text-sm); }
mark { background: color-mix(in oklab, var(--color-accent) 55%, transparent); color: inherit; padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* controls: card stock that presses down */
.btn { --edge: 5px; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--color-ink); cursor: pointer; background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.btn--primary { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"] { color: var(--color-muted); cursor: default; box-shadow: inset 0 0 0 1px var(--color-rule); translate: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* nav: a banner line over a bar that retracts */
.banner { background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); text-align: center; padding: var(--space-xs) var(--gutter); }
.banner a { color: var(--color-accent); font-weight: 600; }
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--grain), var(--fibre), var(--color-paper); clip-path: var(--tear-bottom); padding-bottom: var(--space-xs); transition: translate var(--dur-short) var(--ease-snap); }
.nav.is-away { translate: 0 -110%; }
.nav .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); gap: var(--space-lg); }
.wordmark { font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.nav ul { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav li a:not(.btn) { color: var(--color-ink); text-decoration: none; font-weight: 600; padding: var(--space-xs) 0; }
.nav li a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav .btn { min-height: 44px; padding: 0 var(--space-md); }

/* hero: Banner posture, the icon strip is the signature */
.hero { padding-block: var(--space-2xl) var(--section-gap-s); }
.hero .lead { margin-top: var(--space-lg); }
.hero .actions { margin-top: var(--space-xl); }
.strip { position: relative; margin-top: var(--space-2xl); filter: var(--shadow-paper); }
.strip__kraft { background: var(--grain), var(--fibre), var(--color-kraft); clip-path: var(--tear-both); padding: var(--space-xl) var(--space-lg); }
.strip ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.tile { display: block; border-radius: 22.5%; overflow: hidden; aspect-ratio: 1; box-shadow: 0 6px 0 0 color-mix(in oklab, var(--color-ink) 28%, transparent); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.strip .tile:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.band .btn:focus-visible { outline-color: var(--color-accent); }
.tile:hover { translate: 0 -3px; box-shadow: 0 9px 0 0 color-mix(in oklab, var(--color-ink) 28%, transparent); }
.tile:active { translate: 0 5px; box-shadow: 0 1px 0 0 color-mix(in oklab, var(--color-ink) 28%, transparent); }
.strip li:nth-child(odd) .tile { rotate: -2.5deg; }
.strip li:nth-child(even) .tile { rotate: 2deg; }
.strip li:nth-child(3n) .tile { rotate: -1deg; }

/* sections */
.section { padding-block: var(--section-gap-s); }
.section--tight { padding-block: var(--space-2xl) var(--section-gap-s); }
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { justify-self: end; }

/* showcase: one full-width picture on a sugar-paper mat */
.showcase { position: relative; }
.showcase__mat { background: var(--grain), var(--fibre), var(--color-sugar); border-radius: var(--radius-card); padding: var(--space-lg); filter: var(--shadow-paper); rotate: -0.6deg; }
.showcase__mat img { width: 100%; border-radius: var(--radius-stock); aspect-ratio: 3 / 2; object-fit: cover; }
.showcase__mat--wide img { aspect-ratio: 21 / 9; }
.showcase__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); }
.sticker { position: absolute; right: var(--space-xl); top: calc(var(--space-xl) * -1); z-index: var(--z-raised); display: grid; place-items: center; width: 132px; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--grain), var(--color-accent-3); color: var(--color-ink); font-weight: 600; line-height: 1.1; text-align: center; rotate: 9deg; filter: var(--shadow-paper); }

/* the catalogue: two large cards, then three */
.apps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.app { grid-column: span 4; display: grid; grid-template-rows: auto 1fr; background: var(--grain), var(--fibre), var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.app--wide { grid-column: span 6; grid-template-rows: none; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.app__shot { background: var(--grain), var(--color-paper-3); padding: var(--space-lg) var(--space-lg) 0; display: grid; place-items: end center; overflow: hidden; }
.app__shot img { width: min(100%, 230px); border-radius: var(--radius-stock) var(--radius-stock) 0 0; box-shadow: var(--shadow-card); }
.app:not(.app--wide) .app__shot { max-height: 300px; }
.app--wide .app__shot { order: 2; }
.app__body { padding: var(--space-xl); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.app__icon { width: 72px; border-radius: 22.5%; box-shadow: 0 4px 0 0 var(--color-edge); }
.app__body p { color: var(--color-ink-2); }
.app__body .btn { margin-top: auto; }

/* band: one torn ink sheet */
.band { background: var(--grain), var(--color-ink); color: var(--color-paper); clip-path: var(--tear-both); padding-block: var(--section-gap-s); }
.band .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.band h2 { color: var(--color-paper); }
.band p { color: var(--color-paper-3); margin-top: var(--space-lg); }
.band a:not(.btn) { color: var(--color-accent); }
.band .actions { justify-content: flex-end; }

/* footer: index columns */
.footer { padding-block: var(--space-3xl) var(--space-xl); }
.footer .container { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 3fr)); gap: var(--space-xl) var(--gap-columns); }
.footer h2 { font-size: var(--text-title); }
.footer h3 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer a { color: var(--color-ink); }
.footer .legal { grid-column: 1 / -1; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }

/* game page */
.stage { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-2xl) var(--section-gap-s); }
.stage__shot { justify-self: center; width: min(100%, 330px); rotate: 2deg; filter: var(--shadow-paper); }
.stage__shot img, .moments img { border-radius: var(--radius-card); }
.note { display: inline-block; margin-top: var(--space-xl); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--grain), var(--color-mint); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); }
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.moments li { display: grid; gap: var(--space-lg); align-content: start; }
.moments img { filter: var(--shadow-paper); width: min(100%, 300px); }
.moments li:nth-child(odd) img { rotate: -1.5deg; } .moments li:nth-child(even) img { rotate: 1.5deg; }
.moments p { color: var(--color-ink-2); margin-top: var(--space-xs); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); background: var(--grain), var(--fibre), var(--color-accent); border-radius: var(--radius-card); padding: var(--space-2xl) var(--space-xl); list-style: none; margin: 0; }
.facts b { display: block; font-size: var(--text-display-s); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: var(--space-xs); color: var(--color-ink-2); }

/* documents: privacy, support */
.doc { padding-block: var(--space-2xl) var(--section-gap-s); }
.doc .container { max-width: 880px; }
.doc h1 { font-size: var(--text-display-s); }
.doc h2 { font-size: var(--text-xl); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
.doc p, .doc li { color: var(--color-ink-2); }
.doc p + p { margin-top: var(--space-md); }
.doc ul { padding-left: 1.2em; display: grid; gap: var(--space-xs); }
.doc .lead { margin-block: var(--space-lg) var(--space-xl); color: var(--color-ink); }
.doc table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
.doc th, .doc td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.doc th { font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); }
.crumb { display: inline-block; margin-bottom: var(--space-lg); font-weight: 600; }

@media (max-width: 60rem) {
  .head, .band .container, .stage { grid-template-columns: minmax(0, 1fr); }
  .head .lead, .band .actions { justify-self: start; justify-content: flex-start; }
  .stage { gap: var(--space-xl); }
  .app, .app--wide { grid-column: span 12; }
  .app:not(.app--wide) { grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .app:not(.app--wide) .app__shot { order: 2; max-height: none; }
  .moments { grid-template-columns: minmax(0, 1fr); } .moments img { max-width: 320px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer .container > :first-child { grid-column: 1 / -1; }
  .sticker { width: 104px; right: var(--space-md); font-size: var(--text-sm); }
}
@media (max-width: 40rem) {
  .strip ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav ul li:not(:last-child) { display: none; }
  .app, .app--wide, .app:not(.app--wide) { grid-template-columns: minmax(0, 1fr); }
  .app--wide .app__shot, .app:not(.app--wide) .app__shot { order: 0; max-height: 260px; }
  .showcase__mat { padding: var(--space-sm); }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .footer .container { grid-template-columns: minmax(0, 1fr); }
  .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .btn, .tile, .nav { transition: none; } .nav.is-away { translate: none; } }
.stage .lead { margin-top: var(--space-lg); }
.stage .actions { margin-top: var(--space-xl); }
.showcase__row .lead { margin-top: var(--space-md); }