/* Case studies and game notes. `.case` is the article itself: it is used as-is inside the homepage drawer and on the
   standalone pages. `.case-page` is the chrome around it on the standalone pages only. */
@font-face { font-family: "Inter"; src: url("inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- the article ---- */
.case { font-size: 17px; line-height: 1.7; color: var(--charcoal); }
.case h1, .case h2, .case p, .case dl, .case dd, .case ul, .case figure { margin: 0; }
.case .kind { font-size: 13px; font-weight: 600; color: var(--viridian-deep); }
.case .kind span { color: var(--slate); font-weight: 400; }
.case h1 { margin-top: 12px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1; letter-spacing: -.05em; font-weight: 600; text-wrap: balance; }
.case .stand { margin-top: 16px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; letter-spacing: -.015em; color: var(--body); }
/* drawings sit on a white plate so their pale fills read */
.case .art { margin-top: 28px; padding: clamp(16px, 3vw, 28px); background: #fff; border: 1px solid var(--mist-line); border-radius: 16px; }
.case .art img { display: block; width: 100%; max-width: 540px; height: auto; margin-inline: auto; }
.case .art figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--slate); text-align: center; }
/* game art is shown as it is: no plate, just rounded corners, with its caption underneath */
.case .art.full { padding: 0; background: none; border: 0; border-radius: 0; }
.case .art.full img { max-width: none; border-radius: 16px; }
.case .art.full figcaption { margin-top: 10px; text-align: left; }
.case .facts { margin-top: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--mist-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.case .facts dt { font-size: 12px; color: var(--slate); }
.case .facts dd { font-size: 14px; line-height: 1.45; }
.case .part { margin-top: 30px; }
.case .part h2 { font-size: 22px; line-height: 1.15; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
.case .prose { margin-top: 10px; color: var(--body); }
.case .prose p + p, .case .prose ul + p, .case .prose p + ul { margin-top: .9em; }
.case .prose ul { padding-left: 1.1em; }
.case .prose li + li { margin-top: .5em; }
.case .prose strong { color: var(--charcoal); font-weight: 600; }
.case .pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.case .pager a { display: grid; align-content: center; gap: 4px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--mist-line); text-decoration: none; color: inherit; transition: border-color .2s, background .2s, color .2s; }
.case .pager span { font-size: 13px; color: var(--slate); }
.case .pager strong { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.2; letter-spacing: -.03em; font-weight: 600; }
.case .pager .next { text-align: right; background: var(--charcoal); border-color: var(--charcoal); color: var(--cloud); }
.case .pager .next span { color: inherit; opacity: .7; }
.case .pager .prev:hover { border-color: var(--charcoal); }
.case .pager .next:hover { background: var(--viridian-deep); border-color: var(--viridian-deep); }
@media (max-width: 560px) { .case .facts, .case .pager { grid-template-columns: minmax(0, 1fr); } .case .pager .next { text-align: left; } }

/* ---- standalone page chrome ---- */
.case-page {
  --charcoal: #2A2D30; --slate: #5B626C; --body: #3E4449; --viridian: #40826D; --viridian-deep: #2F6B58;
  --mist-line: #BFD3CA; --cloud: #F3F5F4; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(20px, 4.4vw, 72px);
  margin: 0; background: var(--cloud); color: var(--charcoal); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
.case-page *, .case-page *::before, .case-page *::after { box-sizing: border-box; }
html:has(.case-page) { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: #40826D transparent; }
.case-page a { color: inherit; }
.case-page :focus-visible { outline: 2px solid var(--viridian); outline-offset: 3px; border-radius: 4px; }
.case-page .top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding-inline: var(--gut); }
.case-page .brand { display: flex; align-items: center; gap: 14px; }
.case-page .brand .sym { width: 72px; height: auto; } .case-page .brand .word { width: 158px; height: auto; }
.case-page .top nav { display: flex; gap: 28px; }
.case-page .top nav a { font-size: 14px; color: var(--slate); text-decoration: none; white-space: nowrap; }
.case-page .top nav a:hover { color: var(--charcoal); }
.case-page main { max-width: calc(760px + 2 * var(--gut)); margin-inline: auto; padding: clamp(24px, 5vh, 56px) var(--gut) 0; }
.case-page .cta { margin-top: 40px; padding-block: 28px; border-top: 1px solid var(--mist-line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.case-page .cta h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; font-weight: 600; }
.case-page .cta a { font-size: 20px; font-weight: 600; letter-spacing: -.03em; text-decoration: underline; text-decoration-color: var(--viridian); text-decoration-thickness: 2px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.case-page .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px var(--gut) 28px; color: var(--slate); font-size: 14px; }
.case-page .foot-row .links { display: flex; gap: 24px; }
.case-page .foot-row a { text-decoration: none; } .case-page .foot-row a:hover { color: var(--charcoal); }
/* the case studies screen: a wide page of cards that can keep growing, with a filter by kind */
.case-page.wide main { max-width: calc(1280px + 2 * var(--gut)); }
.case-page.wide .case { max-width: 760px; }
.case-page .filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.case-page .filter button { padding: 8px 16px; border: 1px solid var(--mist-line); border-radius: 999px; background: none; color: var(--slate); font: 500 14px var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.case-page .filter button:hover { border-color: var(--charcoal); color: var(--charcoal); }
.case-page .filter button[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--cloud); }
.case-page .cards { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.case-page .cards a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--mist-line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .45s; }
.case-page .cards a:hover { transform: translateY(-4px); border-color: var(--viridian); box-shadow: 0 18px 40px rgb(47 107 88 / .12); }
.case-page .cards img { display: block; width: 100%; height: auto; padding: 20px 24px 4px; }
.case-page .cards img.full { padding: 0; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 12%; margin-bottom: 8px; }
.case-page .cards div { padding: 12px 22px 22px; }
.case-page .cards .kind { font-size: 13px; font-weight: 600; color: var(--viridian-deep); }
.case-page .cards h2 { margin: 6px 0 0; font-size: 21px; line-height: 1.15; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
.case-page .cards p { margin: 8px 0 0; color: var(--body); font-size: 15px; line-height: 1.5; }
@media (max-width: 560px) {
  .case-page .brand { gap: 10px; } .case-page .brand .sym { width: 44px; } .case-page .brand .word { width: 98px; }
  .case-page .top nav { gap: 18px; }
}

/* ---- the drawer (homepage and the case studies screen) ---- */
/* The drawer: case studies and notes open here, from the right, over the page. A native <dialog>, so focus, Esc and
   the inert page behind come for free. */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(760px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cloud); color: var(--charcoal); box-shadow: -32px 0 96px rgb(27 29 32 / .2); overflow: hidden; transform: translateX(104%); transition: transform .6s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), overlay .6s allow-discrete, display .6s allow-discrete; }
.drawer[open] { display: flex; flex-direction: column; transform: none; }
@starting-style { .drawer[open] { transform: translateX(104%); } }
.drawer::backdrop { background: rgb(27 29 32 / 0); transition: background .6s, overlay .6s allow-discrete, display .6s allow-discrete; }
.drawer[open]::backdrop { background: rgb(27 29 32 / .36); }
@starting-style { .drawer[open]::backdrop { background: rgb(27 29 32 / 0); } }
.drawer-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(20px, 4vw, 44px); border-bottom: 1px solid var(--mist-line); }
.drawer-bar a { font-size: 14px; color: var(--slate); text-decoration: none; }
.drawer-bar a:hover { color: var(--charcoal); }
.drawer-nav { display: flex; gap: 8px; }
.drawer-nav button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--mist-line); border-radius: 50%; background: none; color: var(--charcoal); font: 400 18px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.drawer-nav button:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cloud); }
.drawer-body { flex: 1; outline: none; overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(32px, 5vw, 56px); scrollbar-width: thin; scrollbar-color: var(--viridian) transparent; }
html:has(.drawer[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .drawer-body .case > * { animation: drawer-in .7s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both; animation-delay: .22s; }
  .drawer-body .case > :nth-child(1) { animation-delay: .1s; } .drawer-body .case > :nth-child(2) { animation-delay: .14s; } .drawer-body .case > :nth-child(3) { animation-delay: .18s; }
  @keyframes drawer-in { from { opacity: 0; transform: translateX(28px); } }
}
@media (prefers-reduced-motion: reduce) { .drawer, .drawer::backdrop { transition: none; } }
.drawer .drawer-body:focus-visible, .case-page .drawer .drawer-body:focus-visible { outline: none; } /* it is focused so the keyboard can scroll it; no ring needed */
/* narrow phones: keep the header inside the gutters */
@media (max-width: 400px) {
  .case-page .top { gap: 12px; }
  .case-page .brand .word { width: 84px; }
  .case-page .top nav { gap: 14px; }
  .case-page .top nav a { font-size: 13px; }
}
@media (max-width: 340px) { .case-page .brand .word { display: none; } }