/* Shared site styles, in light and dark.
   Components use the theme tokens below, never the raw brand colours, so dark mode only has to swap tokens. */
:root {
  color-scheme: light;
  --bg: var(--paper); --surface: var(--paper); --fg: var(--ink); --muted: var(--mute-light); --accent: var(--coral-text);
  --rule: var(--ink); --shade: var(--ink); --hover: rgba(26, 18, 20, .06);
  --head-bg: rgba(255, 249, 244, .9); --block-bg: rgba(255, 249, 244, .82); --foot-bg: var(--ink);
  /* the background grid is faint on every page, so it never pulls the eye away from the content */
  --grid-a: rgba(26, 18, 20, .035); --grid-b: rgba(26, 18, 20, .06);
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  /* two shadow sizes: small for buttons, labels and tiles, large for cards and panels. Hover lifts everything by 2px. */
  --sh-s: 4px; --sh-l: 8px;
  /* pixel font, only for small labels: callouts, slots, card tags. Headings and reading text stay Poppins and Rubik. */
  --f-pixel: 'Silkscreen', 'Courier New', monospace;
}
/* light is the default; dark mode is opt-in through the header button */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ember); --surface: #221516; --fg: var(--paper); --muted: var(--mute-dark); --accent: #ff7a6e;
  --rule: rgba(255, 249, 244, .78); --shade: #6b2a20; --hover: rgba(255, 249, 244, .08);
  --head-bg: rgba(23, 12, 11, .9); --block-bg: rgba(23, 12, 11, .86); --foot-bg: #0d0706;
  --grid-a: rgba(255, 249, 244, .015); --grid-b: rgba(255, 249, 244, .03);
  --btn-bg: var(--paper); --btn-fg: var(--ink);
}

body { background: var(--bg); color: var(--fg);
  background-image: linear-gradient(var(--grid-a) 1px, transparent 1px), linear-gradient(90deg, var(--grid-a) 1px, transparent 1px),
    linear-gradient(var(--grid-b) 1px, transparent 1px), linear-gradient(90deg, var(--grid-b) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
.label { font: 700 .75rem/1 var(--f-title); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
/* highlighted words: always dark text on the brand gradient, in both themes */
.hl { display: inline-block; color: var(--ink); background: var(--grad); padding: 0 .12em .04em .1em; clip-path: polygon(.12em 0, 100% 0, calc(100% - .12em) 100%, 0 100%); }

/* mage sprites beside page titles can overhang the edge of a narrow screen: clip them instead of letting the page
   scroll sideways. clip (unlike hidden) keeps position: sticky working for the hero inside main */
main { overflow-x: clip; }

/* header */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--head-bg); backdrop-filter: blur(10px); border-bottom: 2px solid var(--rule); }
.head-in { max-width: 1280px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 20px; }
/* the masthead: the publication's name (Exploded View) with the exploded mark, and who makes it in small type */
/* the wordmark is Poppins Bold (700), like the logo lockup; ink in light mode, cream in dark */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.2rem/1 var(--f-title); min-height: 44px; white-space: nowrap; }
.logo-by { font: 600 .8125rem/1 var(--f-title); color: var(--muted); }
/* the logo mark: its viewBox leaves room around the triangles for the motion,
   so at 38 px the triangles themselves are about 28 px. overflow stays visible so the opened pieces aren't cut off */
.ev-logo__symbol { display: block; flex: none; width: 38px; height: 38px; overflow: visible; }
/* the logo motion ("Shard ripple", from the logo package's shard-ripple.css): on hover with a mouse or on keyboard focus the three pieces
   open one after another, and close the same way. Only transforms move, so the link and header never change size.
   Touch screens get no hover state, so a tap simply goes home. Reduced motion: the mark stays still */
.ev-logo__piece { transform-box: fill-box; transform-origin: center; transform: none; transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.ev-logo__piece:nth-of-type(1) { transition-delay: 0ms; }
.ev-logo__piece:nth-of-type(2) { transition-delay: 65ms; }
.ev-logo__piece:nth-of-type(3) { transition-delay: 130ms; }
/* "open" is set by shared/theme.js while a mouse or pen is over the link (from the pointer itself, because some PCs
   tell the browser they have no mouse, so a CSS hover-media check fails there); a finger never sets it */
.ev-logo.open .ev-logo__piece:nth-of-type(1), .ev-logo:focus-visible .ev-logo__piece:nth-of-type(1) { transform: translate(-16px, -12px) rotate(-5deg); }
.ev-logo.open .ev-logo__piece:nth-of-type(2), .ev-logo:focus-visible .ev-logo__piece:nth-of-type(2) { transform: translate(17px, -8px) rotate(5deg); }
.ev-logo.open .ev-logo__piece:nth-of-type(3), .ev-logo:focus-visible .ev-logo__piece:nth-of-type(3) { transform: translate(2px, 20px) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .ev-logo .ev-logo__piece { transition: none !important; transform: none !important; } }
/* "by Cas and Chary" only where it fits: not next to the full menu on small laptops, not on small phones */
@media (min-width: 901px) and (max-width: 1170px), (max-width: 580px) { .logo-by { display: none; } }
/* small laptops and phones: tighter spacing so the name, the menu and the buttons fit on one row */
@media (min-width: 901px) and (max-width: 1000px) { .head-in .nav a { padding: 0 6px; } .head-in .nav .cta { padding: 0 10px; } }
/* phones: a slightly smaller name and mark and tighter spacing, so the name, Menu, search and light/dark buttons stay
   on one row down to 320 px. The negative margins only take back the mark's empty motion room (the pieces may still
   open into it). .head-in .menu-btn so these win over the menu button's own padding further down */
@media (max-width: 440px) {
  .head-in { padding-inline: 16px; gap: 8px; }
  .logo { font-size: 1.0625rem; gap: 8px; }
  .site-head .ev-logo__symbol { width: 34px; height: 34px; margin-inline: -2px; }
  .head-in .menu-btn { padding: 0 12px; }
}
@media (max-width: 380px) {
  .head-in { padding-inline: 10px; gap: 6px; }
  .logo { font-size: .875rem; gap: 6px; }
  .site-head .ev-logo__symbol { width: 30px; height: 30px; margin-inline: -3px; }
  .head-in .menu-btn { padding: 0 10px; }
}
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font: 600 .9375rem/1 var(--f-title); }
.nav a:hover { background: var(--hover); }
/* Topics opens a list of every topic on hover or keyboard focus (on phones it's always open in the menu) */
.nav .has-sub { position: relative; }
.nav .has-sub > a::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nav .sub { position: absolute; top: 100%; left: -10px; z-index: 60; display: none; min-width: 260px; flex-direction: column; gap: 0; padding: 8px; background: var(--surface); border: 2px solid var(--rule); box-shadow: var(--sh-s) var(--sh-s) 0 var(--shade); }
.nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub { display: flex; }
.nav .sub a { width: 100%; gap: 10px; min-height: 40px; padding: 0 8px; white-space: nowrap; }
.nav .sub a[aria-current="page"] { text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav .sub b { display: grid; place-items: center; width: 26px; height: 26px; flex: none; background: var(--ink); font: 400 .6875rem/1 var(--f-pixel); color: var(--amber); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--coral); }
.nav .cta { background: var(--btn-bg); color: var(--btn-fg); padding: 0 18px; margin-left: 8px; box-shadow: var(--sh-s) var(--sh-s) 0 var(--coral); transition: transform .15s, box-shadow .15s; }
.nav .cta:hover { background: var(--btn-bg); transform: translate(-2px, -2px); box-shadow: calc(var(--sh-s) + 2px) calc(var(--sh-s) + 2px) 0 var(--coral); }
.theme-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--rule); background: var(--surface); color: var(--fg); cursor: pointer; }
/* search: the magnifier opens a bar under the header (articles, videos and guides) */
.search-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--rule); background: var(--surface); color: var(--fg); cursor: pointer; }
.search-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.search-btn[aria-expanded="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.head-in .search-btn + .theme-btn { margin-left: -10px; }
.site-search { border-top: 2px dashed var(--rule); }
.site-search .in { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; gap: 10px; }
.site-search input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; font: 400 1.0625rem/1.3 var(--f-body); color: var(--fg); background: var(--surface); border: 2px solid var(--rule); border-radius: 0; }
.site-search input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.site-search .btn { min-height: 48px; background: var(--btn-bg); color: var(--btn-fg); border-color: var(--rule); }

/* a page's own mage next to its title (Cas with her coupon on VR Deals), on a soft shadow like the topic pages */
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-mage { position: relative; flex: none; height: 150px; margin: 0 -48px -8px -40px; background-repeat: no-repeat; }
.page-mage::after { content: ""; position: absolute; left: 51%; bottom: 0; width: 34%; height: 9%; transform: translate(-50%, 40%); border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 18, 20, .3), rgba(26, 18, 20, 0)); }
:root[data-theme="dark"] .page-mage::after { background: radial-gradient(closest-side, rgba(255, 79, 163, .4), rgba(255, 79, 163, 0)); }
@media (max-width: 640px) { .page-mage { height: 104px; margin: 0 -34px -6px -30px; } }
.theme-btn:hover { background: var(--hover); }
.theme-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; min-height: 44px; padding: 0 16px; border: 2px solid var(--rule); background: none; font: 700 .9375rem/1 var(--f-title); cursor: pointer; }
/* small laptops and tablets on their side: a tighter menu so it stays one line next to the search and theme buttons */
.nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1100px) { .head-in { gap: 14px; } .nav a { padding: 0 8px; } .nav .cta { padding: 0 12px; margin-left: 4px; } }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .menu-btn { margin-left: auto; }
  .nav { position: fixed; top: 66px; left: 0; right: 0; display: none; background: var(--bg); border-bottom: 2px solid var(--rule); padding: 8px 24px 20px; margin: 0; }
  .nav.open { display: block; } .nav ul { flex-direction: column; } .nav .cta { margin: 8px 0 0; justify-content: center; }
  /* the open menu scrolls when it's taller than the screen; the topics are listed under Topics, indented */
  .nav { max-height: calc(100dvh - 66px); overflow-y: auto; }
  .nav .has-sub > a::after { display: none; }
  .nav .sub { position: static; display: flex; min-width: 0; padding: 0 0 6px 14px; background: none; border: 0; box-shadow: none; }
  .nav .sub a { min-height: 40px; font-weight: 500; }
}

/* buttons */
/* rows of buttons and links: at least 20 px between them, so nothing touches */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; text-decoration: none; font: 800 1rem/1 var(--f-title); border: 2px solid var(--rule); background: var(--surface); color: var(--fg); cursor: pointer; box-shadow: var(--sh-s) var(--sh-s) 0 var(--shade); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--sh-s) + 2px) calc(var(--sh-s) + 2px) 0 var(--shade); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shade); }
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--sh-s) var(--sh-s) 0 var(--coral); }
.btn.primary:hover { box-shadow: calc(var(--sh-s) + 2px) calc(var(--sh-s) + 2px) 0 var(--coral); }
.btn[aria-pressed="true"] { background: var(--amber); color: var(--ink); border-color: var(--ink); }

/* sections */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* sections are see-through, so the background grid looks the same everywhere */
section.block { padding: clamp(64px, 8vw, 110px) 0; border-top: 2px solid var(--rule); }
/* a jump to a section (#topics, #about, #work) stops with its top border right under the header's, so the two show as
   one line: html's scroll-padding is 96px and the header is 66px tall, border included */
section.block { scroll-margin-top: -32px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.sec-head h2, .h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 900; }
.more { font: 700 1rem/1 var(--f-title); color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 6px; }

/* article cards ("sheets"); the first one on the homepage is the featured story */
.bench { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sheet { position: relative; display: flex; background: var(--surface); border: 2px solid var(--rule); box-shadow: var(--sh-l) var(--sh-l) 0 var(--shade); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.sheet:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--sh-l) + 2px) calc(var(--sh-l) + 2px) 0 var(--coral); }
.sheet a { display: flex; flex-direction: column; width: 100%; text-decoration: none; }
.sheet .meta-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 2px solid var(--rule); font: 400 .75rem/1 var(--f-pixel); text-transform: uppercase; }
.sheet .meta-top b { color: var(--accent); }
.sheet .img { position: relative; aspect-ratio: 16/9; background: var(--grad); border-bottom: 2px solid var(--rule); overflow: hidden; }
.sheet .img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
.sheet .img::before, .sheet .img::after { content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid var(--paper); z-index: 2; }
.sheet .img::before { left: 10px; top: 10px; border-left-width: 3px; border-top-width: 3px; }
.sheet .img::after { right: 10px; bottom: 10px; border-right-width: 3px; border-bottom-width: 3px; }
.sheet .img .noimg { display: grid; place-items: center; height: 100%; color: var(--ink); }
.sheet .img .noimg .icon { width: 30%; max-width: 110px; height: auto; }
.sheet .img .noimg .icon .c { stroke: var(--paper); }
.sheet .img .noimg .icon .f { fill: var(--paper); stroke: none; }
.sheet .playmark { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; }
.sheet .playmark svg { width: 16px; height: 16px; fill: var(--coral-text); margin-left: 3px; }
.sheet .txt { padding: 18px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sheet h3 { font-size: 1.25rem; font-weight: 800; text-wrap: balance; }
.sheet p { color: var(--muted); font-size: 1rem; }
.sheet .go { margin-top: auto; padding-top: 4px; font: 700 .9375rem/1 var(--f-title); color: var(--accent); display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.sheet .rt { font: 500 .875rem/1 var(--f-body); color: var(--muted); }
.sheet.feature { grid-column: 1 / -1; }
.sheet.feature a { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
.sheet.feature .meta-top { grid-column: 1 / -1; }
.sheet.feature .img { border-bottom: 0; border-right: 2px solid var(--rule); }
.sheet.feature .txt { padding: 26px 24px; justify-content: center; }
.sheet.feature h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.sheet.feature p { font-size: 1.125rem; }
.sheet.feature .go { margin-top: 12px; }
@media (max-width: 1000px) {
  .bench { grid-template-columns: 1fr 1fr; }
  .sheet.feature a { grid-template-columns: 1fr; }
  .sheet.feature .img { border-right: 0; border-bottom: 2px solid var(--rule); }
}
@media (max-width: 640px) { .bench { grid-template-columns: 1fr; } }
/* Shorts in a row of their own: tall cards with the vertical cover, five across (three on tablets, two on phones) */
.bench.shorts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.sheet.tall .img { aspect-ratio: 9 / 16; }
.sheet.tall .txt { padding: 12px 12px 14px; gap: 8px; }
.sheet.tall h3 { font-size: 1rem; }
.sheet.tall .go { font-size: .875rem; }
@media (max-width: 1000px) { .bench.shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* phones: two across, and the top line is only the date (the whole list is Shorts) */
@media (max-width: 640px) { .bench.shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sheet.tall .meta-top b { display: none; } }
/* two links side by side in a section head (All articles, All videos) */
.more-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }

/* filter buttons over a list (All, Articles, Videos, Shorts, Livestreams): dashed chips like the topic labels, each
   with its count; the one showing is filled in */
.filters { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(24px, 3vw, 36px); }
.filters a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; text-decoration: none; color: var(--fg); background: var(--surface); border: 2px dashed var(--rule); font: 800 .9375rem/1 var(--f-title); transition: background .15s; }
.filters a span { font: 400 .75rem/1 var(--f-pixel); color: var(--accent); }
.filters a:hover, .filters a:focus-visible { background: var(--amber); color: var(--ink); border-style: solid; border-color: var(--ink); }
.filters a:hover span, .filters a:focus-visible span { color: var(--ink); }
.filters a[aria-current] { background: var(--btn-bg); color: var(--btn-fg); border-style: solid; border-color: var(--btn-bg); }
.filters a[aria-current] span { color: var(--amber); }
:root[data-theme="dark"] .filters a[aria-current] span { color: var(--coral-text); }

/* empty spot for a real photo of the two of you */
.photo-slot { margin: 0; display: grid; place-items: center; align-content: center; padding: 24px; aspect-ratio: 4 / 5; background: var(--block-bg); border: 2px dashed var(--rule); text-align: center; font: 800 1.0625rem/1.4 var(--f-title); }
.photo-slot small { display: block; margin-top: 8px; max-width: 30ch; font: 400 .9375rem/1.5 var(--f-body); color: var(--muted); }

/* the Work with us panel (homepage and contact page): a facet panel and three stat tiles; Chary cheers when
   they come in. Always dark text on the gradient. */
.work { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 72px); isolation: isolate; color: var(--ink); background: var(--grad); border: 2px solid var(--rule); box-shadow: var(--sh-l) var(--sh-l) 0 var(--shade); }
.work svg.bgfacets { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .35; }
.work-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.work h1, .work h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 900; }
.work p { margin-top: 16px; font-size: 1.125rem; max-width: 52ch; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; max-width: 580px; }
.stat { padding: 14px 16px 16px; background: var(--ink); color: var(--paper); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.stat b { display: block; font: 900 clamp(1.75rem, 3.2vw, 2.5rem)/1 var(--f-title); color: var(--amber); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 8px; font: 500 .875rem/1.35 var(--f-body); color: var(--mute-dark); }
/* the tiles rise in one after another when the panel scrolls into view: only transform and opacity change, so scrolling stays smooth */
.stats.wait .stat { opacity: 0; transform: translateY(14px); }
.stat:nth-child(2) { transition-delay: .12s; } .stat:nth-child(3) { transition-delay: .24s; }
.work p.shows { margin-top: 14px; font: 700 1rem/1.45 var(--f-title); max-width: 52ch; }
@media (max-width: 520px) { .stats { grid-template-columns: minmax(0, 1fr); } .stat { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; } .stat b { flex: none; width: 2.7em; } .stat span { margin-top: 0; } }
.work .btn { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: var(--sh-s) var(--sh-s) 0 var(--ink); }
/* "Email us:" stays on one line; on narrow phones the address drops below it */
.work .btn { flex-wrap: wrap; justify-content: center; gap: 2px 8px; padding-block: 10px; }
.work .btn .pre { font-weight: 600; white-space: nowrap; }
.work .photo { border-color: var(--ink); }
.work .photo-wrap { position: relative; }
.work .mage { position: absolute; background-repeat: no-repeat; pointer-events: none; z-index: 1; }
.work .photo-wrap .mage { left: -38px; bottom: -18px; height: 150px; }
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } .work .photo { max-width: 420px; } }
/* dark mode: the panel becomes a dark sheet with the facets glowing faintly, so it doesn't light up a dark page */
:root[data-theme="dark"] .work { color: var(--paper); background: var(--surface); border-color: var(--coral); box-shadow: var(--sh-l) var(--sh-l) 0 var(--shade); }
:root[data-theme="dark"] .work svg.bgfacets { opacity: .16; }
:root[data-theme="dark"] .work p { color: var(--mute-dark); }
:root[data-theme="dark"] .work p.shows { color: var(--paper); }
:root[data-theme="dark"] .stat { background: rgba(255, 249, 244, .06); box-shadow: inset 0 0 0 1px rgba(255, 249, 244, .16); }
:root[data-theme="dark"] .work .photo { border-color: var(--rule); }
:root[data-theme="dark"] .work .btn { box-shadow: var(--sh-s) var(--sh-s) 0 var(--coral); }

/* topic chips (other topics, explore our topics): dashed like the labels on the headset */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; text-decoration: none; color: var(--fg); background: var(--surface); border: 2px dashed var(--rule); font: 800 .9375rem/1.15 var(--f-title); transition: background .15s, border-color .15s; }
.chips a:hover, .chips a:focus-visible { background: var(--amber); color: var(--ink); border-style: solid; border-color: var(--ink); }
.chips b { display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); font: 400 .75rem/1 var(--f-pixel); color: var(--amber); }
.px { clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }

/* Guides: the written guides as a shelf above the full list, side by side (one per row on phones) */
.shelf h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; }
.shelf .list-h { margin: clamp(40px, 5vw, 60px) 0 16px; }
.guide-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.guide-list a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px; text-decoration: none; color: var(--fg); background: var(--surface); border: 2px solid var(--rule); box-shadow: var(--sh-s) var(--sh-s) 0 var(--shade); transition: transform .15s, box-shadow .15s; }
.guide-list a:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--sh-s) + 2px) calc(var(--sh-s) + 2px) 0 var(--coral); }
.guide-list .icon { width: 44px; height: 44px; }
.guide-list .icon .c { stroke: var(--coral); } .guide-list .icon .f { fill: var(--coral); stroke: none; }
.guide-list b { font: 800 1.0625rem/1.25 var(--f-title); text-wrap: balance; }
.guide-list span { margin-top: auto; font: 700 .9375rem/1 var(--f-title); color: var(--accent); }

/* cookie banner (WordPress, only with a Google Analytics ID): a card in the corner, both choices equally easy */
.consent { position: fixed; left: 24px; bottom: 24px; z-index: 80; width: min(440px, calc(100% - 32px)); padding: 20px 22px; color: var(--fg); background: var(--surface); border: 2px solid var(--rule); box-shadow: var(--sh-l) var(--sh-l) 0 var(--shade); }
.consent[hidden] { display: none; }
.consent-label { display: inline-block; padding: 5px 9px; background: var(--ink); color: var(--amber); font: 400 .75rem/1 var(--f-pixel); text-transform: uppercase; }
.consent p { margin-top: 10px; font-size: .9375rem; line-height: 1.5; }
.consent p a { color: var(--accent); text-underline-offset: 3px; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.consent-btns .btn { flex: 1; justify-content: center; min-height: 46px; padding: 0 16px; }
@media (max-width: 520px) { .consent { left: 16px; bottom: 16px; } }
/* a button that looks like the footer's links (Cookie settings) */
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* clicking a mage plays a short reaction (shared/mages.js clickable); only the character itself is clickable, not the
   empty sides of its frame */
.mage .tap, .page-mage .tap { position: absolute; left: 28%; right: 22%; top: 8%; bottom: 0; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; appearance: none; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mage .tap:focus-visible, .page-mage .tap:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }

footer { border-top: 2px solid var(--rule); background: var(--foot-bg); color: var(--paper); padding: 56px 0 120px; }
/* the brand on the left, then up to four link columns in one row; two columns on tablets and phones */
footer .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 40px; }
@media (max-width: 860px) { footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer .wrap > :first-child { grid-column: 1 / -1; } }
footer ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
footer a { color: var(--paper); text-underline-offset: 4px; min-height: 24px; min-width: 24px; display: inline-block; overflow-wrap: anywhere; }   /* 24 px: WCAG 2.2 target size */
footer .wrap > div { min-width: 0; }
footer h2 { font-size: 1rem; color: var(--amber); }
footer p { color: var(--mute-dark); max-width: 36ch; margin-top: 10px; }