:root{
  --paper:#efe5ce; --paper-deep:#e2d4b4; --card:#f6efdd;
  --ink:#33261c; --ink-soft:#5f4c3b;
  --red:#9c3325; --ochre:#c6892c; --teal:#1e5a5c; --teal-lift:#2b7a7c;
  --rule:#c3b087;
  --display:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --body:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,'SF Mono','DejaVu Sans Mono',ui-monospace,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background-color:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.55; overflow-wrap:anywhere;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
}
a{ color:var(--teal); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--teal-lift); }
:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:2px; }
[hidden]{ display:none !important; }
.shell{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

/* masthead (same as the other momatio pages) */
.masthead{ padding:26px 0 0; }
.masthead__inner{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.wordmark{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,7vw,4rem); letter-spacing:-0.02em; line-height:.9; margin:0; }
.wordmark a{ color:var(--ink); text-decoration:none; }
.wordmark span{ color:var(--red); }
.masthead__tag{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink-soft); margin:0; }
.rules{ margin:16px 0 0; }
.rules hr{ border:0; border-top:2px solid var(--ink); margin:0; }
.rules hr + hr{ border-top-width:1px; margin-top:3px; }
.masthead nav.mo-nav{
  --mo-ink:var(--ink); --mo-soft:var(--ink-soft); --mo-accent:var(--red);
  --mo-line:var(--rule); --mo-card:var(--card); --mo-hover:rgba(158,50,37,.08);
  max-width:none; margin:0; padding:13px 0 0; gap:8px 20px; min-height:44px;
  font-family:var(--mono); font-size:17px; font-weight:400; line-height:1.35;
  letter-spacing:.06em; text-transform:uppercase;
}
.masthead nav[data-mo-nav]{ min-height:44px; }
.masthead nav.mo-nav .mo-nav__brand{ display:none; }
.masthead nav.mo-nav .mo-nav__menu{ border-radius:0; padding:6px; box-shadow:0 2px 0 rgba(51,38,28,.07),0 16px 28px -18px rgba(51,38,28,.6); }
.masthead nav.mo-nav .mo-nav__menu a{ letter-spacing:.09em; }
.masthead nav.mo-nav .mo-nav__menu i{ font-family:var(--body); font-size:17px; letter-spacing:0; text-transform:none; color:#665545; }

/* hero */
.hero{ padding:40px 0 8px; }
.kicker{ font-family:var(--mono); font-size:17px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:0 0 10px; }
h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,5.4vw,3.3rem); line-height:1.1; letter-spacing:-0.015em; margin:0 0 16px; }
.tagline{ font-family:var(--display); font-style:italic; font-size:clamp(1.25rem,3vw,1.7rem); line-height:1.3; color:var(--ink-soft); margin:0 0 20px; }
.lede{ font-size:1.2rem; color:var(--ink); margin:0 0 14px; }
.lede b{ font-weight:700; }
.honest{ color:var(--ink-soft); margin:0 0 10px; }
.honest b{ color:var(--ink); }
/* Dave 10/11: the intro runs the full column on a computer, so the games start higher on the page */

h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.1rem); line-height:1.15; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--ochre); }
section.band{ padding:34px 0 8px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--body); font-size:18px; font-weight:600; line-height:1.3;
  padding:11px 24px; border:1.5px solid var(--teal); text-decoration:none; cursor:pointer;
  background:transparent; color:var(--teal); border-radius:0;
}
.btn:hover{ background:rgba(30,90,92,.09); }
.btn--go{ background:var(--teal); color:var(--card); }
.btn--go:hover{ background:var(--teal-lift); color:var(--card); }

/* featured: From Momatio. Dave 10/11: "make the Dispersed card a slim banner", so the games start higher */
.feature{
  display:grid; grid-template-columns:168px minmax(0,1fr) auto; align-items:center; gap:0 22px; background:var(--card);
  border:1px solid var(--rule); border-left:4px solid var(--red); padding:0 22px 0 0;
  box-shadow:0 2px 0 rgba(51,38,28,.07);
}
.feature__pic{ display:block; align-self:stretch; background:var(--paper-deep); }
.feature__pic img{ display:block; width:100%; height:100%; min-height:96px; object-fit:cover; object-position:57% 50%; }   /* camper + fire */
.feature__body{ padding:12px 0; min-width:0; }
.feature__label{ font-family:var(--mono); font-size:17px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0; font-weight:700; }
.feature h2{ border:0; padding:0; margin:0; font-size:1.4rem; line-height:1.2; }
.feature p{ margin:2px 0 0; }
.feature__go{ white-space:nowrap; }

/* controls */
.controls{ background:var(--card); border:1px solid var(--rule); padding:16px 18px 14px; margin:0 0 22px;
  box-shadow:0 2px 0 rgba(51,38,28,.07); }
.ctl-row{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0 0 12px; }
.ctl-row:last-child{ margin-bottom:0; }
.search{ flex:1 1 260px; min-width:0; }
.search input{
  width:100%; min-height:48px; font:inherit; font-size:18px; color:var(--ink); background:#fffdf7;
  border:1.5px solid #6b5a46; padding:9px 12px; border-radius:2px;
}
.seg{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.seg__label{ margin-right:10px; color:var(--ink-soft); font-weight:600; }
.pill{
  min-height:44px; font:inherit; font-size:17px; font-weight:600; line-height:1.2; color:var(--ink);
  background:#fffdf7; border:1.5px solid #6b5a46; padding:8px 16px; cursor:pointer; border-radius:0;
  display:inline-flex; align-items:center; gap:8px;
}
.pill + .pill{ margin-left:-1.5px; }
.pill:hover{ background:#fff7e0; }
.pill[aria-pressed="true"]{ background:var(--teal); border-color:var(--teal); color:#fff; }
.pill .n{ font-weight:400; opacity:1; }
.pill[aria-pressed="true"] .n{ color:#e6f2f2; }
.pill.is-empty{ color:#6d5d4c; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips .pill{ border-radius:22px; margin-left:0; padding:8px 14px; }
.toggles{ display:flex; flex-wrap:wrap; gap:8px; }
.toggles .pill{ border-radius:22px; margin-left:0; }
.toggles .pill::before{ content:""; width:16px; height:16px; border:2px solid currentColor; border-radius:3px; flex:none; }
.toggles .pill[aria-pressed="true"]::before{ background:currentColor; box-shadow:inset 0 0 0 2px var(--teal); }
.status{ margin:0; color:var(--ink-soft); font-weight:600; min-height:28px; }
.nojs-note{ margin:0 0 18px; color:var(--ink-soft); }

/* cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px 22px; }
.game{
  background:var(--card); border:1px solid var(--rule); display:flex; flex-direction:column; min-width:0;
  box-shadow:0 2px 0 rgba(51,38,28,.07),0 14px 24px -20px rgba(51,38,28,.6);
}
.game__pic{ display:block; aspect-ratio:16/9; background:var(--paper-deep); overflow:hidden; border-bottom:1px solid var(--rule); }
.game__pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.game__pic.ph{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  background:hsl(var(--h) 38% 82%); color:var(--ink); text-decoration:none;
  font-family:var(--display); font-size:1.5rem; font-weight:700; line-height:1.15;
}
.game__body{ padding:14px 16px 10px; display:flex; flex-direction:column; flex:1; min-width:0; }
.game__cat{ font-family:var(--mono); font-size:17px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin:0 0 4px; font-weight:700; }
.game__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 4px; }
.game__meta .game__cat{ margin:0; }
.game__mw{ font-size:17px; line-height:1.2; padding:2px 10px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--rule); border-radius:14px; white-space:nowrap; }   /* "Made with Claude": small and quiet, 6:1 on the card */
.game__title{ font-family:var(--display); font-size:1.3rem; line-height:1.2; margin:0 0 6px; }
.game__title a{ color:var(--ink); text-decoration-color:var(--ochre); text-decoration-thickness:2px; display:inline-block; min-height:44px; padding:8px 0 0; }
.game__title a:hover{ color:var(--teal); }
.game__desc{ margin:0 0 10px; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:17px; line-height:1.45; }
.game__tags{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.game__tags li{ font-size:17px; line-height:1.2; padding:4px 10px; background:var(--paper); border:1px solid var(--rule); border-radius:14px; color:var(--ink); }
.game__built{ margin:0 0 4px; font-size:17px; font-weight:600; color:var(--ink); }
.game__built::before{ content:"\2726\00a0"; color:var(--red); }
.game__credit, .game__post{ margin:0; font-size:17px; color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; }
.game__credit a, .game__post a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; font-weight:600; }
.game__credit .cr{ display:inline-flex; align-items:center; column-gap:6px; }
.game__post{ margin-top:auto; border-top:1px solid var(--rule); }
.game__more{ color:var(--ink-soft); }
.game__post .cr{ display:inline-flex; align-items:center; column-gap:6px; min-height:44px; }
.addlink{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
/* the makers list, near the top so nobody needs a link to find it (Dave 10/16) */
.makers{ margin:4px 0 12px; }
.makerslink{ font-size:1.15em; font-weight:700; }

/* "Watch the maker's video": the button is plain text until a tap; only then does the page add an X player frame (see addVideo). */
.game__vid{ margin:0 0 10px; }
.vid-btn{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:9px 14px;
  font:inherit; font-size:18px; font-weight:600; line-height:1.3; color:var(--teal); background:transparent;
  border:1.5px solid var(--teal); border-radius:0; cursor:pointer;
}
.vid-btn:hover{ background:rgba(30,90,92,.09); }
.vid-btn[aria-expanded="true"]{ background:var(--teal); color:var(--card); }
.vid-btn[aria-expanded="true"] ~ .vid-note{ display:none; }
.vid-note{ margin:4px 0 0; font-size:17px; line-height:1.4; color:var(--ink-soft); }
.vid-frame{ margin-top:10px; width:100%; background:var(--paper-deep); border:1px solid var(--rule); }
.vid-frame iframe{ display:block; width:100%; height:100%; border:0; background:#fff; color-scheme:light; }
.grid--compact .game__vid{ display:none; }

.pl-short{ display:none; }
/* hearts: a thumbs-up, nothing else.  Added by the page script only (so none without JavaScript). */
.game__foot{ margin-top:auto; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.game__foot .game__post{ margin:0; border-top:0; flex:1 1 auto; min-width:0; }
.love{
  flex:none; min-height:44px; min-width:44px; font:inherit; font-size:17px; font-weight:700; line-height:1.2; color:var(--ink);
  background:#fffdf7; border:1.5px solid #6b5a46; border-radius:22px; padding:6px 14px; margin:2px 0;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
}
.love:hover{ background:#fff7e0; }
.love[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; }
.love__h{ font-size:21px; line-height:1; }
.love__n{ min-width:1ch; }
.love__n:empty{ display:none; }
.love-note{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:20; margin:0; max-width:min(92vw,520px);
  background:var(--ink); color:#fff; font-weight:600; padding:12px 18px; border-radius:6px; box-shadow:0 8px 24px rgba(51,38,28,.35);
}

/* Compact view: the same markup as the cards with no pictures and no description, in tighter tiles.
   Line 1 is the title with its heart; line 2 is the category, the credit and the post link; "Built with" only if stated. */
.grid--compact{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:10px 14px; }
.grid--compact .game__pic, .grid--compact .game__desc, .grid--compact .game__tags, .grid--compact .game__more{ display:none; }
.grid--compact .game{ box-shadow:0 1px 0 rgba(51,38,28,.07); }
.grid--compact .game__body{ flex-direction:row; flex-wrap:wrap; align-items:center; align-content:flex-start; column-gap:10px; row-gap:0; padding:2px 12px 4px 14px; }
.grid--compact .game__body::before{ content:""; order:3; flex:0 0 100%; height:0; }
.grid--compact .game__title{ order:1; flex:1 1 0; min-width:0; margin:0; font-size:1.15rem; }
.grid--compact .game__title a{ display:flex; align-items:center; min-height:44px; padding:0; line-height:1.25; }
.grid--compact .gt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-width:0; }
.grid--compact .pl-full{ display:none; }
.grid--compact .pl-short{ display:inline; }
.grid--compact .game__foot{ display:contents; }
.grid--compact .love{ order:2; }
.grid--compact .game__meta{ display:contents; }   /* the category and its "Made with" chip are two items of the row */
.grid--compact .game__cat, .grid--compact .game__mw{ order:4; margin:0; }
.grid--compact .game__credit{ order:5; }
.grid--compact .game__post{ order:6; margin:0; border:0; }
.grid--compact .game__built{ order:7; flex:0 0 100%; margin:0 0 6px; }

.more{ text-align:center; padding:28px 0 6px; }
.more .btn{ min-width:240px; }
.empty{ padding:24px 0; text-align:center; color:var(--ink-soft); }

/* plain links under the list: every numbered page of games and the developers' A-to-Z page (the buttons above are for people with scripts) */
.pager{ padding:22px 0 4px; text-align:center; }
.pager__lead{ margin:0 0 8px; color:var(--ink-soft); font-weight:600; }
.pager__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; margin:0 0 14px; }
.pager__row .here{ font-weight:700; }
.pager__nums{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.pager__nums a, .pager__nums span{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 8px;
  font-weight:600; border:1.5px solid var(--rule); border-radius:22px; background:var(--card); color:var(--teal); text-decoration:none;
}
.pager__nums a:hover{ background:rgba(30,90,92,.09); }
.pager__nums [aria-current]{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.pager__more{ margin:10px 0 0; }

/* footer */
.foot{ padding:36px 0 64px; color:var(--ink-soft); }
.foot p{ margin:0 0 12px; max-width:66ch; }
.foot .ask{ color:var(--ink); font-weight:600; font-size:1.1rem; }
.foot a{ display:inline-flex; align-items:center; min-height:44px; }

@media (max-width:760px){
  .feature{ grid-template-columns:104px minmax(0,1fr); padding:0; }
  .feature__body{ padding:10px 14px 10px 0; }
  .feature__body br{ display:none; }   /* the two sentences run together here, so "game." is not left alone on a line */
  .feature__go{ grid-column:1 / -1; justify-content:center; border-radius:0; }
}
@media (max-width:600px){
  body{ font-size:19px; }
  .shell{ padding:0 18px; }
  .hero{ padding-top:28px; }
  .masthead nav.mo-nav{ gap:12px 20px; font-size:18px; }
  .masthead nav.mo-nav .mo-nav__menu i{ font-size:18px; }
  .controls{ padding:14px 14px 12px; }
  .chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .chips .pill{ flex:none; scroll-snap-align:start; white-space:nowrap; }
  .chips.more-right{ -webkit-mask-image:linear-gradient(to right,#000 86%,transparent); mask-image:linear-gradient(to right,#000 86%,transparent); }

  .grid{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.001ms !important; scroll-behavior:auto !important; } }

/* Spotlight: a paid row, marked as paid.  Its own band, heading and label; it never shares a list with the hearts. */
.spot{ margin-top:14px; }
.spot > .shell{ background:#f1e6c8; border:1px solid var(--rule); border-left:4px solid var(--ochre); padding-top:18px; padding-bottom:22px; }
.spot h2{ border-bottom-color:var(--ink-soft); }
.spot__tag{ font-family:var(--mono); font-size:.62em; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.spot__note{ margin:0 0 18px; color:var(--ink); }
.game__ad{
  align-self:flex-start; margin:0 0 8px; padding:3px 10px; font-family:var(--mono); font-size:17px; line-height:1.2; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:#fffdf7; border:1.5px solid var(--ink-soft);
}
.game--spot{ border-top:4px solid var(--ochre); }
#spot-foot{ margin:0 0 10px; }
/* developer pages (dev.html): everything above is the main page's own CSS; these few lines are the only additions */
.backlink{ margin:26px 0 0; }
.foot .offer a{ display:block; padding:6px 0; font-size:1.1rem; }   /* the whole offer is the link, so it is one easy target on a phone */

/* the A-to-Z list of developers (devs.html): one link per developer, the game's name under the @handle */
.az{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.az a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 8px; font-weight:700; border:1.5px solid var(--rule); border-radius:22px; background:var(--card); text-decoration:none; }
.az a:hover{ background:rgba(30,90,92,.09); }
.devgroup{ margin:34px 0 0; }
.devs{ list-style:none; margin:0; padding:0; columns:3 300px; column-gap:32px; }
.devs li{ break-inside:avoid; margin:0; }
.devs a{ display:flex; flex-direction:column; justify-content:center; min-height:56px; padding:6px 0; text-decoration:none; font-weight:700; }
.devs a:hover b{ text-decoration:underline; }
.devs a span{ font-weight:400; color:var(--ink-soft); font-size:17px; line-height:1.3; }
/* a maker's page (dev.html), "the studio wall": the main page's colors and type, laid out in the order who they are, the featured work, all the work,
   the story, the side boxes, related makers.  Nothing smaller than 17px; every tap target at least 44px. */
.mk main{ padding-bottom:20px; }
.mk h2{ border:0; padding:0; margin:0; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.12; }
.mk-crumbs{ margin:26px 0 0; font-family:var(--mono); font-size:17px; letter-spacing:.04em; color:var(--ink-soft); }
.mk-crumbs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink-soft); }
.mk-crumbs span:last-child{ color:var(--red); font-weight:700; }

/* who they are */
.mk-who{ display:flex; flex-wrap:wrap; gap:22px 40px; align-items:flex-start; padding:6px 0 0; }
.mk-av{ flex:none; width:132px; height:132px; border-radius:50%; background:var(--teal); color:var(--card); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:52px; font-weight:700; letter-spacing:.02em; }
.mk-main{ flex:999 1 520px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.mk .mk-main h1{ margin:0; font-size:clamp(2.1rem,6vw,3.6rem); line-height:1.05; overflow-wrap:anywhere; }
.mk-line{ margin:0; font-size:1.2rem; color:var(--ink-soft); }
.mk-line a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.mk-line i{ color:var(--ink); }
.mk-games, .mk-sentence{ margin:0; }
.mk-voice{ margin:0; font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--ink-soft); }
.mk-cats{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.mk-cats li{ background:var(--card); border:1px solid var(--rule); border-radius:999px; padding:6px 16px; font-size:17px; line-height:1.3; }
.mk-stats{ margin:4px 0 0; font-size:1.18rem; }
.mk-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; align-items:center; }
.mk-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 24px; border-radius:8px; border:2px solid transparent;
  font-size:19px; font-weight:700; line-height:1.25; text-decoration:none; text-align:center; }
.mk-btn--teal{ background:var(--teal); color:#fff; }
.mk-btn--teal:hover{ background:var(--teal-lift); color:#fff; }
.mk-btn--ghost{ border-color:var(--teal); color:var(--teal); background:transparent; }
.mk-btn--ghost:hover{ background:rgba(30,90,92,.09); color:var(--teal); }
.mk-btn--red{ background:var(--red); color:#fff; }
.mk-btn--red:hover{ background:#7f281d; color:#fff; }
.mk-btn--ochre{ background:var(--ochre); color:var(--ink); }
.mk-btn--ochre:hover{ background:#d89a3c; color:var(--ink); }
.mk-badgelink{ display:inline-flex; align-items:center; min-height:48px; padding:0 6px; color:var(--ink); }
.mk-check{ margin:6px 0 0; font-size:17px; color:var(--ink-soft); }
.mk-check span{ color:var(--teal); font-weight:700; }

/* the featured work */
.mk-feat{ margin-top:44px; }
.feat{ display:flex; flex-wrap:wrap; gap:26px 30px; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:26px; }
.feat__media{ flex:3 1 460px; min-width:0; padding:0; display:block; }
.feat__media .game__pic{ border:1px solid var(--rule); border-radius:10px; }
.feat__text{ flex:2 1 340px; min-width:0; display:flex; flex-direction:column; gap:12px; }
.feat__kicker{ margin:0; font-family:var(--mono); font-size:17px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); font-weight:700; }
.feat h2{ font-size:clamp(1.8rem,3.4vw,2.4rem); }
.feat__quote{ margin:0; font-size:1.2rem; font-style:italic; }
.feat__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.feat__tags li{ border:1px solid var(--rule); border-radius:6px; padding:3px 10px; font-size:17px; }
.feat__status{ margin:0; font-size:17px; color:var(--ink-soft); }
.feat__status b{ color:var(--teal); }
.feat__acts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.feat__post{ margin:0; border:0; }
.feat__more{ display:inline-flex; align-items:center; min-height:44px; font-size:17px; }
.feat .game__vid{ margin:12px 0 0; }

/* all the work */
.mk-work{ margin-top:44px; }
.mk-work__head{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:flex-end; justify-content:space-between; margin:0 0 18px; }
.mk-sub{ margin:6px 0 0; color:var(--ink-soft); }
.mk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mk-chips .pill{ border-radius:22px; margin:0; }
.mk-work .status{ min-height:0; margin:0 0 12px; font-size:17px; }
.mk-work .status:empty{ display:none; }

/* the story, and the side boxes beside it */
.story, .story--none{ margin-top:48px; display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; }
.story__main{ flex:3 1 560px; min-width:0; display:flex; flex-direction:column; gap:14px; }
.story__lede{ margin:0; color:var(--ink-soft); }
.story__list{ list-style:none; margin:0; padding:0; border-left:3px solid var(--rule); display:flex; flex-direction:column; gap:18px; }
.story__item{ padding-left:22px; position:relative; }
.story__item::before{ content:""; position:absolute; left:-10px; top:7px; width:17px; height:17px; border-radius:50%; background:var(--red); }
.story__meta{ margin:0; font-family:var(--mono); font-size:17px; color:var(--ink-soft); }
.story__text{ margin:2px 0 0; font-size:1.18rem; }
.story__links{ margin:2px 0 0; font-size:17px; display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; }
.story__links a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.story__vid{ color:var(--ink-soft); }
.story__fold{ margin-top:6px; }
.story__fold summary{ display:flex; align-items:center; min-height:44px; cursor:pointer; font-weight:700; color:var(--teal); }
.story__fold .story__list{ margin-top:12px; }
.side{ flex:2 1 340px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.story--none .side{ flex:1 1 340px; max-width:520px; }
.mk-box{ background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:20px; }
.mk-box h3{ margin:0 0 8px; font-family:var(--display); font-size:1.6rem; line-height:1.15; }
.mk-box p{ margin:0 0 10px; font-size:17px; color:var(--ink-soft); }
.mk-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mk-tag{ display:inline-flex; align-items:center; min-height:44px; border:1px solid var(--rule); border-radius:999px; padding:6px 14px; font-size:17px; color:var(--ink); }
.mk-tag--link{ border-color:var(--teal); color:var(--teal); text-decoration:none; font-weight:600; }
.mk-tag--link:hover{ background:rgba(30,90,92,.09); }
.mk-box--badge{ background:var(--ink); border-color:var(--ink); color:var(--card); }
.mk-box--badge h3{ color:var(--card); }
.mk-box--badge p{ color:#e2d4b4; }
.mk-box--badge .badge-pill{ display:inline-flex; align-items:center; gap:10px; background:var(--card); color:var(--ink); border-radius:8px; padding:8px 14px; margin:0 0 12px; }
.badge-pill__word{ font-family:var(--display); font-size:1.2rem; font-weight:700; }
.badge-pill__word span{ color:var(--red); }
.badge-pill__for{ font-size:17px; color:var(--ink); }

/* related makers, the claim line */
.mk-related{ margin-top:48px; }
.rels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:16px; }
.rel{ display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:14px 16px; color:var(--ink); text-decoration:none; min-height:44px; }
.rel:hover{ background:#fff7e0; }
.rel__av{ flex:none; width:56px; height:56px; border-radius:50%; background:var(--ochre); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:22px; }
.rel__t{ display:flex; flex-direction:column; min-width:0; }
.rel__t b{ font-size:19px; }
.rel__t span{ font-size:17px; color:var(--ink-soft); }
.mk-foot{ margin:48px 0 0; padding-top:18px; border-top:1px solid var(--rule); font-size:17px; color:var(--ink-soft); max-width:70ch; }
.mk-foot a{ display:inline-flex; align-items:center; min-height:44px; }

@media (max-width:600px){
  .mk-who{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px 14px; align-items:center; }   /* the round badge beside the @handle, everything else full width under them */
  .mk-av{ width:76px; height:76px; font-size:30px; }
  .mk-main{ display:contents; }
  .mk-main > *{ grid-column:1 / -1; }
  .mk .mk-main h1{ grid-column:2; grid-row:1; font-size:2.1rem; }
  .mk-av{ grid-column:1; grid-row:1; }
  .mk-acts{ flex-direction:column; align-items:stretch; }
  .mk-btn{ width:100%; font-size:20px; }
  .mk-badgelink{ justify-content:center; }
  .feat{ padding:16px; border-radius:12px; }
  .feat__acts{ flex-direction:column; align-items:stretch; }
  .feat__acts .game__post{ justify-content:center; }
  .mk-chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; width:100%; }
  .mk-chips .pill{ flex:none; white-space:nowrap; }
  .mk-work__head{ align-items:flex-start; }
  .story__list{ padding-left:0; }
  .mk-foot{ margin-top:36px; }
}