/* Hallmark · shape: Bento Grid · genre: playful · theme: Hum (deal 1/3, seed kedai-game-digital-interaktif-aa8a·caaf01d8·2026-11-15·r0) · job: buy · draw: bb5024
 * hero: Stage (swapped from Corridor: the try-it question needs the first screen beside the head) · nav: wordmark and one action (swapped from search-led: two products, nothing to search) · footer: mast · imagery: the product · signature: one real question from the game, answerable in the hero
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R2 V3 · weakest: R, only two products and no photographs, so the range is carried by card-stock tiles of the games' own drawings */
/* Hallmark · waive F4: the secondary is Hum's card-stock control (paper fill, edge below), the theme's own second control, not a second primary */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .16 0 0 0 .07 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='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.008 .22' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .06 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.00% calc(100% - 3.0px), 97.73% calc(100% - 13.1px), 95.45% calc(100% - 6.2px), 93.18% calc(100% - 5.3px), 90.91% calc(100% - 11.0px), 88.64% calc(100% - 8.9px), 86.36% calc(100% - 6.6px), 84.09% calc(100% - 11.3px), 81.82% calc(100% - 11.3px), 79.55% calc(100% - 9.0px), 77.27% calc(100% - 10.5px), 75.00% calc(100% - 10.0px), 72.73% calc(100% - 12.0px), 70.45% calc(100% - 5.7px), 68.18% calc(100% - 7.1px), 65.91% calc(100% - 10.8px), 63.64% calc(100% - 10.7px), 61.36% calc(100% - 3.6px), 59.09% calc(100% - 10.5px), 56.82% calc(100% - 8.1px), 54.55% calc(100% - 13.1px), 52.27% calc(100% - 11.9px), 50.00% calc(100% - 4.4px), 47.73% calc(100% - 8.6px), 45.45% calc(100% - 13.2px), 43.18% calc(100% - 10.6px), 40.91% calc(100% - 10.1px), 38.64% calc(100% - 9.4px), 36.36% calc(100% - 13.0px), 34.09% calc(100% - 13.0px), 31.82% calc(100% - 7.1px), 29.55% calc(100% - 6.7px), 27.27% calc(100% - 12.2px), 25.00% calc(100% - 6.7px), 22.73% calc(100% - 4.7px), 20.45% calc(100% - 6.3px), 18.18% calc(100% - 7.7px), 15.91% calc(100% - 6.2px), 13.64% calc(100% - 13.3px), 11.36% calc(100% - 9.1px), 9.09% calc(100% - 11.0px), 6.82% calc(100% - 12.7px), 4.55% calc(100% - 3.6px), 2.27% calc(100% - 6.0px), 0.00% calc(100% - 9.2px));
  --tear-top: polygon(0.00% 7.6px, 2.27% 6.6px, 4.55% 4.1px, 6.82% 12.0px, 9.09% 2.6px, 11.36% 6.0px, 13.64% 5.8px, 15.91% 9.3px, 18.18% 12.2px, 20.45% 7.7px, 22.73% 3.8px, 25.00% 6.5px, 27.27% 5.1px, 29.55% 6.0px, 31.82% 6.7px, 34.09% 5.7px, 36.36% 7.8px, 38.64% 8.8px, 40.91% 4.6px, 43.18% 12.0px, 45.45% 7.0px, 47.73% 11.5px, 50.00% 9.0px, 52.27% 9.0px, 54.55% 7.7px, 56.82% 7.6px, 59.09% 9.6px, 61.36% 12.3px, 63.64% 6.4px, 65.91% 9.8px, 68.18% 4.8px, 70.45% 8.5px, 72.73% 5.9px, 75.00% 5.6px, 77.27% 6.3px, 79.55% 10.7px, 81.82% 11.7px, 84.09% 3.2px, 86.36% 11.0px, 88.64% 2.9px, 90.91% 6.5px, 93.18% 3.7px, 95.45% 2.9px, 97.73% 13.0px, 100.00% 4.4px, 100% 100%, 0 100%);
  --container: 1200px;
  --tile-pakaian: var(--color-accent-2);
}

body { background: var(--grain), var(--fibre), var(--color-paper); font-size: 1.0625rem; font-weight: 500; }
h1, h2, h3 { font-weight: var(--display-weight); }
mark { background: color-mix(in oklab, var(--color-accent) 60%, transparent); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: 0.12em; border-radius: 4px; }
.small { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- controls: card stock ---------- */
.btn {
  --edge: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 54px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-stock);
  font-weight: 600; 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), background-color 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; transition: none; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn--sm { min-height: 46px; padding: 0 var(--space-md); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- nav ---------- */
.nav { position: relative; z-index: var(--z-raised); background: var(--grain), var(--fibre), var(--color-paper-2); clip-path: var(--tear-bottom); padding-bottom: var(--space-sm); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 76px; }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-display); text-decoration: none; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 6px; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links a:not(.btn) { text-decoration: none; color: var(--color-ink-2); }
.nav__links a:not(.btn):hover { text-decoration: underline; }
.nav__links a:not(.btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }

/* ---------- hero ---------- */
.hero { min-height: calc(100svh - 88px); display: grid; align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { max-width: 11ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* the signature: one real question from the game */
.try { position: relative; padding: var(--space-lg); }
.try__mat { position: absolute; inset: 0 var(--space-md) var(--space-md) 0; border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-sugar); rotate: -2deg; filter: var(--shadow-paper); }
.try__card { position: relative; border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); filter: var(--shadow-paper); padding: var(--space-lg); display: grid; gap: var(--space-md); }
.try__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.chip { display: inline-block; border-radius: var(--radius-pill); background: var(--color-paper-2); padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.try__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.try__art { border-radius: var(--radius-stock); background: var(--grain), var(--fibre), var(--color-kraft); padding: var(--space-sm); }
.try__q { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.01em; }
.try__opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.opt { justify-content: flex-start; text-align: left; }
.opt b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-paper-2); font-size: var(--text-sm); flex: none; }
.opt[data-state="right"] { background: var(--grain), var(--fibre), var(--color-mint); box-shadow: 0 var(--edge) 0 0 var(--color-mint-deep); }
.opt[data-state="wrong"] { background: var(--grain), var(--fibre), color-mix(in oklab, var(--color-accent-3) 45%, var(--color-card)); }
.try__result { min-height: 3em; color: var(--color-ink-2); }
.sticker {
  position: absolute; top: -34px; right: -26px; z-index: 2;
  width: 112px; height: 112px; display: grid; place-items: center; text-align: center;
  background: var(--grain), var(--color-accent-3); color: var(--color-ink);
  clip-path: polygon(50% 0%, 61% 9%, 75% 6%, 80% 19%, 94% 25%, 91% 39%, 100% 50%, 91% 61%, 94% 75%, 80% 81%, 75% 94%, 61% 91%, 50% 100%, 39% 91%, 25% 94%, 20% 81%, 6% 75%, 9% 61%, 0% 50%, 9% 39%, 6% 25%, 20% 19%, 25% 6%, 39% 9%);
  rotate: 8deg; line-height: 1.05; font-weight: 600;
}
.sticker strong { display: block; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
.sticker span { font-size: var(--text-sm); }

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap-s); }
.section__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.section__head p { color: var(--color-ink-2); max-width: 52ch; font-size: var(--text-lead); }

/* range */
.range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.game { border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); filter: var(--shadow-paper); padding: var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.game__art { border-radius: var(--radius-stock); aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--grain), var(--fibre), var(--color-paper-3); }
.game__art svg { height: 78%; width: auto; }
.game__art--dash { background: var(--grain), var(--fibre), var(--color-hill-2); }
.game__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.price { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.game ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.game ul li::marker { color: var(--color-accent-deep); }
.topic { color: var(--color-muted); font-size: var(--text-sm); }

/* how to buy: bento */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.tile { border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-paper-2); padding: var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; }
.tile h3 { font-size: var(--text-xl); }
.tile p { color: var(--color-ink-2); }
.tile--pear { grid-column: span 2; grid-row: span 2; background: var(--grain), var(--fibre), var(--color-accent); align-content: space-between; gap: var(--space-xl); }
.tile--pear h3 { font-size: var(--text-section); max-width: 12ch; }
.figures { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); }
.figure strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-display-s); letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
.figure span { font-size: var(--text-sm); color: var(--color-ink-2); }

/* close: torn ink sheet */
.close { margin-top: var(--section-gap-s); background: var(--grain), var(--color-ink); color: var(--color-paper); clip-path: var(--tear-top); padding-block: var(--section-gap-s); }
.close__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: end; }
.close p { color: color-mix(in oklab, var(--color-paper) 78%, transparent); margin-top: var(--space-md); font-size: var(--text-lead); }
.facts { margin: 0; display: grid; gap: var(--space-md); }
.facts div { border-top: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent); padding-top: var(--space-sm); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: color-mix(in oklab, var(--color-paper) 72%, transparent); }

/* footer: mast */
.foot { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-xl) var(--space-lg); }
.foot__mast { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: clamp(3rem, 11vw, 9rem); line-height: 0.9; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent); font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 72%, transparent); }
.foot a { color: var(--color-paper); }
.foot a:focus-visible { outline-color: var(--color-accent); }

/* ink fills for drawn game items */
.ink { stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.f-paper { fill: var(--color-card); } .f-coral { fill: var(--color-accent-3); } .f-blue { fill: var(--color-accent-2); }
.f-pear { fill: var(--color-accent); } .f-mint { fill: var(--color-mint); } .f-kraft { fill: var(--color-sand); }
.stitch { fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: 0.5; }

@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__grid, .range, .close__grid { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__links a:not(.btn) { display: none; }
}
@media (max-width: 40rem) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile--pear { grid-column: auto; grid-row: auto; }
  .try { padding: var(--space-sm) 0 0; }
  .try__body { grid-template-columns: 88px minmax(0, 1fr); }
  .try__q { font-size: var(--text-lg); }
  .try__top { padding-right: 72px; }
  .try__opts { grid-template-columns: minmax(0, 1fr); }
  .sticker { width: 92px; height: 92px; top: -30px; right: -6px; }
  .sticker strong { font-size: var(--text-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { translate: none; }
}