/* Plasma Game Engine
   Palette sampled from the brand mark (#0bdeb3) and the whirlpool render.
   The one bold device is the slant of the P: tan ≈ 0.642 (horizontal offset per unit of height). */

@property --reveal {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --abyss: #06181c;
  --trench: #0c262b;
  --rule: #1f3d42;
  --plasma: #0bdeb3;
  --foam: #e4efec;
  --silt: #97b0ac;

  --slant: 0.642;
  --page: 1800px;               /* widest the content gets */
  --gutter: clamp(20px, 4vw, 72px);
  --measure: 34rem;

  --display: "Chakra Petch", "Arial Narrow", sans-serif;
  --text: "Atkinson Hyperlegible", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--foam);
  font: 400 1.125rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

p { margin: 0; }

h1, h2, h3 { margin: 0; }

h1, h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--foam);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--plasma);
  color: var(--abyss);
}
.skip:focus { top: 12px; }

/* Header ---------------------------------------------------------------- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 28px var(--gutter);
}

.brand img { width: clamp(132px, 12vw, 176px); }

.site-header ul {
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 700;
}

.site-header nav a {
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(6, 24, 28, .8);
}
.site-header nav a:hover { color: var(--plasma); }

/* Inner pages sit below the header rather than under it. */
.site-header-solid {
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.site-header nav a[aria-current="page"] {
  color: var(--plasma);
}

/* Hero ------------------------------------------------------------------- */

.hero {
  --h: clamp(720px, 92svh, 1000px);
  --o: calc(var(--h) * var(--slant));
  --x: clamp(460px, 40vw, 640px);
  position: relative;
  height: var(--h);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  right: 0;
  clip-path: polygon(calc(var(--o) + var(--reveal)) 0, calc(100% + var(--reveal)) 0, calc(100% + var(--reveal)) 100%, var(--reveal) 100%);
  animation: reveal 1.1s cubic-bezier(.7, 0, .2, 1) both;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 24, 28, .75), rgba(6, 24, 28, 0) 22%);
}

/* The P's second stroke: a thin plasma band parallel to the image edge. */
.hero-sliver {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) - 34px);
  width: calc(var(--o) + 12px);
  background: var(--plasma);
  clip-path: polygon(var(--o) 0, calc(var(--o) + 12px) 0, 12px 100%, 0 100%);
  animation: sliver .5s .9s ease-out both;
}

@keyframes reveal {
  from { --reveal: calc(100% + var(--o)); }
  to { --reveal: 0px; }
}

@keyframes sliver {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: none; }
}

.hero-copy {
  position: relative;
  z-index: 1;
  padding: clamp(120px, 16vh, 168px) var(--gutter) 0;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 6rem);
  line-height: .95;
}

.hero h1 .line {
  display: block;
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) both;
}
.hero h1 .line:nth-child(1) { animation-delay: .35s; }
.hero h1 .line:nth-child(2) { animation-delay: .45s; }
.hero h1 .line:nth-child(3) { animation-delay: .55s; }

.hero .lede,
.hero .actions { animation: rise .7s .7s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(.4em); }
  to { opacity: 1; transform: none; }
}

.lede {
  max-width: 28rem;
  margin-top: 28px;
  color: var(--foam);
}

.hero-credit {
  position: absolute;
  left: var(--gutter);
  bottom: 28px;
  font-size: .875rem;
  color: var(--silt);
}

/* Buttons --------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-block;
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}

.button-primary {
  background: var(--plasma);
  color: var(--abyss);
}
.button-primary:hover { background: var(--foam); }

.button-quiet {
  border-color: var(--rule);
  color: var(--foam);
}
.button-quiet:hover { border-color: var(--plasma); }

/* Sections -------------------------------------------------------------- */

.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 144px) var(--gutter) 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 40px;
}

.section-head p {
  max-width: var(--measure);
  color: var(--silt);
}

/* Showcase -------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(110px, 11vw, 220px);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.g-sponza { grid-column: span 8; grid-row: span 3; }
.g-skin   { grid-column: span 4; grid-row: span 3; }
.g-whirl  { grid-column: span 5; grid-row: span 2; }
.g-red    { grid-column: span 3; grid-row: span 2; }
.g-vol    { grid-column: span 4; grid-row: span 2; }
.g-probes { grid-column: span 6; grid-row: span 3; }
.g-fog    { grid-column: span 6; grid-row: span 3; }

.shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--trench);
  color: var(--foam);
  font: inherit;
  cursor: zoom-in;
  overflow: hidden;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.g-skin .shot img { object-position: 50% 30%; }

.shot .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 16px 12px;
  font-size: .875rem;
  text-align: left;
  background: linear-gradient(to top, rgba(6, 24, 28, .85), rgba(6, 24, 28, 0));
}

.shot:focus-visible { outline-offset: -3px; }

/* Features -------------------------------------------------------------- */

.feature p { max-width: var(--measure); color: var(--silt); }
.feature p + p { margin-top: 12px; }
.feature h3 { margin-bottom: 8px; }

.catalogue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px clamp(24px, 4vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.feature-media { margin: 0 0 20px; }
.feature-media img { width: 100%; }

/* With JavaScript the features become a picker: the list on the left, one area's details on the right. */
.catalogue.is-tabbed {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 clamp(32px, 5vw, 80px);
  align-items: start;
  padding-top: 0;
}

/* Names sit in two columns so the list is about as tall as the open panel. */
.catalogue-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-content: start;
}

.catalogue-group {
  grid-column: 1 / -1;
  padding: 28px 0 10px;
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--silt);
}

.catalogue-group:first-child { padding-top: 20px; }

.catalogue-tabs button {
  position: relative;
  padding: 14px 0 14px 28px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--silt);
  font: 700 1.125rem/1.3 var(--text);
  text-align: left;
  cursor: pointer;
}

.catalogue-tabs button:hover { color: var(--foam); }

.catalogue-tabs button[aria-selected="true"] { color: var(--plasma); }

.catalogue-tabs button[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 16px;
  margin-top: -8px;
  background: var(--plasma);
  transform: skewX(-32.7deg);
}

.catalogue-tabs button:focus-visible { outline-offset: -3px; }

/* The open panel takes the P's cut on its lower right corner, like the post covers. */
.catalogue.is-tabbed .feature {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  background: var(--trench);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(100% - 27px) 100%, 0 100%);
  animation: open-package .2s ease-out;
}

.catalogue.is-tabbed .feature[hidden] { display: none; }

.catalogue.is-tabbed .feature-copy { padding: clamp(28px, 4vw, 48px); }

/* Not used yet. When every area has a screenshot, add <figure class="feature-media"><img …></figure>
   to each one in index.php and it runs edge to edge across the top of the panel. */
.catalogue.is-tabbed .feature-media {
  order: -1;
  margin: 0;
  aspect-ratio: 5 / 2;
  overflow: hidden;
}

.catalogue.is-tabbed .feature-media img {
  height: 100%;
  object-fit: cover;
}

.catalogue.is-tabbed .feature h3 {
  margin-bottom: 12px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
}

.catalogue.is-tabbed .feature p { color: var(--foam); }

.catalogue.is-tabbed .spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  max-width: none;
  margin-top: 28px;
}

.catalogue.is-tabbed .feature:focus-visible { outline: 3px solid var(--foam); outline-offset: -3px; }

@keyframes open-package {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Short capability lists, marked with the P's slant. */
.spec {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.spec li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.5;
}

.spec li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 7px;
  height: 12px;
  background: var(--plasma);
  transform: skewX(-32.7deg);
}

/* Beta ------------------------------------------------------------------ */

.section.beta {
  margin-top: clamp(72px, 10vw, 144px);
  padding-bottom: clamp(56px, 7vw, 96px);
  background: var(--trench);
  max-width: calc(var(--page) - 2 * var(--gutter));
  width: calc(100% - 2 * var(--gutter));
  padding-top: clamp(56px, 7vw, 96px);
}

.section.beta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(32px, 6vw, 96px);
  align-items: start;
}

/* The heading stays in view while people work down the longer form. */
.beta-copy { position: sticky; top: 32px; }

.beta h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); max-width: 14ch; }
.beta-copy p { max-width: var(--measure); margin-top: 20px; }
.beta-copy a { color: var(--plasma); text-underline-offset: 3px; }

.beta-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.beta-fields .field-wide { grid-column: 1 / -1; }

.beta-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.beta-form label,
.beta-form legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
}

.beta-form .optional {
  margin-left: 6px;
  font-weight: 400;
  color: var(--silt);
}

.beta-form input:not([type="checkbox"]),
.beta-form select,
.beta-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #3a5a5f;
  border-radius: 0;
  background: var(--abyss);
  color: var(--foam);
  font: inherit;
  font-size: 1rem;
}

.beta-form select {
  appearance: none;
  padding-right: 40px;
  background: var(--abyss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2397b0ac' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.beta-form select:has(option[value=""]:checked) { color: var(--silt); }
.beta-form option { color: var(--foam); background: var(--abyss); }

.beta-form ::placeholder { color: #6f8a86; }

/* Platforms: checkboxes set out as toggles that fill in when chosen. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }

.choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #3a5a5f;
  font-weight: 400;
  cursor: pointer;
}

.choices label:has(:checked) { border-color: var(--plasma); color: var(--plasma); }
.choices label:has(:focus-visible) { outline: 3px solid var(--foam); outline-offset: 2px; }
.choices input { accent-color: var(--plasma); width: 16px; height: 16px; margin: 0; }

.beta-form textarea { resize: vertical; min-height: 5.5rem; }

.beta-form input:not([type="checkbox"]):focus-visible,
.beta-form select:focus-visible,
.beta-form textarea:focus-visible {
  outline: 3px solid var(--foam);
  outline-offset: 0;
  border-color: var(--foam);
}

.beta-form [aria-invalid="true"] { border-color: #ffb4a8; }

.beta-form .button { margin-top: 24px; cursor: pointer; font-family: inherit; }
.beta-form .button:disabled { opacity: .7; cursor: progress; }

.beta-form .trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.beta-note { margin-top: 16px; font-size: .875rem; color: var(--silt); }

.beta-status:empty { display: none; }
.beta-status { margin-top: 12px; font-size: 1rem; }
.beta-status.is-error { color: #ffb4a8; }

.beta-done {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--plasma);
}

.beta-done + p { margin-top: 12px; }

.beta-form { color-scheme: dark; }
.beta-form:focus { outline: none; }

/* News ------------------------------------------------------------------ */

.news .more {
  font-weight: 700;
  color: var(--plasma);
  text-underline-offset: 4px;
}

/* The three newest posts, in a row under the hero. */
.section.news { padding-top: clamp(56px, 7vw, 96px); }

.news .section-head { margin-bottom: 24px; }

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.posts li { display: flex; flex-direction: column; }

/* Thumbnails take the P's cut on the lower right corner, like the post covers. */
.news-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  background: var(--trench);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 23px) 100%, 0 100%);
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.posts time { display: block; color: var(--silt); font-size: 1rem; }

.posts h3 { margin-top: 6px; }

.posts h3 a { text-decoration: none; }
.posts h3 a:hover { color: var(--plasma); text-decoration: underline; text-underline-offset: 4px; }

.posts p { margin-top: 8px; color: var(--silt); font-size: 1rem; }

/* Blog index ------------------------------------------------------------ */

.blog-head h1,
.post-header h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
}

.blog-head p {
  max-width: var(--measure);
  margin-top: 16px;
  color: var(--silt);
}

.blog-head a,
.prose a,
.post-meta a {
  color: var(--plasma);
  text-underline-offset: 3px;
}

.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.category-nav a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.category-nav a:hover { border-color: var(--plasma); }

.category-nav a[aria-current="page"] {
  border-color: var(--plasma);
  background: var(--plasma);
  color: var(--abyss);
}

.post-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.post-list li {
  display: grid;
  grid-template-columns: minmax(14rem, 28rem) 1fr;
  gap: 16px 40px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}

.post-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--trench);
  overflow: hidden;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-summary h2 {
  margin-top: 8px;
  font-family: var(--text);
  font-style: normal;
  font-stretch: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.post-summary h2 a { text-decoration: none; }
.post-summary h2 a:hover { color: var(--plasma); text-decoration: underline; text-underline-offset: 4px; }

.post-summary > p:last-child {
  max-width: var(--measure);
  margin-top: 8px;
  color: var(--silt);
}

.post-meta {
  font-size: 1rem;
  color: var(--silt);
}

.blog-empty { margin-top: 40px; color: var(--silt); }

.list-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  font-weight: 700;
}

.list-pager a { color: var(--plasma); text-underline-offset: 4px; }
.list-pager a:only-child:last-child { margin-left: auto; }

/* Post ------------------------------------------------------------------ */

/* Shown above drafts and scheduled posts in the admin preview. */
.preview-banner {
  padding: 12px var(--gutter);
  background: var(--plasma);
  color: var(--abyss);
  font-size: 1rem;
  font-weight: 700;
}

.preview-banner a { color: inherit; text-underline-offset: 3px; }

.post-cta {
  margin-top: clamp(56px, 7vw, 88px);
  font-size: 1.1875rem;
}

.post-cta a { color: var(--plasma); font-weight: 700; text-underline-offset: 3px; }


.post {
  --content: min(42rem, 100% - 2 * var(--gutter));
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, 16rem)
    [content-start] var(--content)
    [content-end] minmax(0, 16rem)
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
  padding-top: clamp(48px, 8vw, 112px);
}

.post > * { grid-column: content; }

.post-header { grid-column: wide; }
.post-header h1 { max-width: 20ch; }

.post-lede {
  max-width: var(--measure);
  margin-top: 20px;
  font-size: 1.3125rem;
  line-height: 1.5;
}

.post-header .post-meta { margin-top: 20px; }

/* The cover image takes the P's cut on its lower right corner. */
.post-cover {
  grid-column: wide;
  margin: 40px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 84px), calc(100% - 54px) 100%, 0 100%);
}

.post-cover img { width: 100%; }

.prose {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;
  margin-top: 56px;
  font-size: 1.1875rem;
  line-height: 1.7;
}

.prose > * { grid-column: content; }

.prose > * + * { margin-top: 1.1em; }

.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.prose h3 {
  margin-top: 1.8em;
  font-size: 1.3125rem;
}

.prose h2 + *,
.prose h3 + * { margin-top: .6em; }

.prose ul,
.prose ol { padding-left: 1.25em; }

.prose li + li { margin-top: .4em; }

.prose li::marker { color: var(--plasma); }

.prose strong { color: #fff; }

.prose hr {
  width: 100%;
  height: 1px;
  margin-top: 2.2em;
  margin-bottom: 1.1em;
  border: 0;
  background: var(--rule);
}

/* Images and videos in a post run wider than the text. */
.prose > p:has(> img:only-child),
.prose > p:has(> picture:only-child),
.prose > p:has(> video:only-child),
.prose > video,
.prose > figure {
  grid-column: wide;
  margin-top: 2em;
  margin-bottom: .9em;
}

.prose img,
.prose video {
  width: 100%;
  height: auto;
  background: var(--trench);
}

.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: 8px; font-size: 1rem; color: var(--silt); }

.prose code,
.prose kbd {
  padding: .1em .35em;
  background: var(--trench);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .88em;
}

.prose kbd { border: 1px solid var(--rule); border-bottom-width: 2px; }

.prose pre {
  grid-column: wide;
  padding: 20px 24px;
  overflow-x: auto;
  background: var(--trench);
  font-size: .95rem;
  line-height: 1.55;
}

.prose pre code { padding: 0; background: none; font-size: inherit; }

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  border-left: 3px solid var(--rule);
  color: var(--silt);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.prose th,
.prose td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.post-pager {
  grid-column: wide;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.post-pager a {
  display: block;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  text-decoration: none;
}

.post-pager a:hover { color: var(--plasma); }

.post-pager span {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--silt);
}

.pager-older { grid-column: 2; text-align: right; }

/* Footer ---------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  max-width: var(--page);
  margin: clamp(96px, 12vw, 176px) auto 0;
  padding: 40px var(--gutter) 48px;
  font-size: 1rem;
  color: var(--silt);
}

.site-footer img { width: 120px; }

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a { color: var(--foam); text-underline-offset: 4px; }
.site-footer p { margin-left: auto; }

/* Viewer ---------------------------------------------------------------- */

.viewer {
  width: min(92vw, 1600px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: var(--abyss);
  color: var(--foam);
}

.viewer::backdrop { background: rgba(3, 12, 14, .88); }

.viewer[open] { animation: open .2s ease-out; }

@keyframes open {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}

.viewer figure { margin: 0; }

.viewer img {
  width: 100%;
  max-height: calc(92vh - 64px);
  object-fit: contain;
  background: #000;
}

.viewer figcaption { padding: 16px 20px 0; font-size: 1rem; }

.viewer-controls {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 12px 12px;
  margin-top: -28px;
}

.viewer-controls button {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--foam);
  font: 700 .875rem/1.2 var(--text);
  cursor: pointer;
}
.viewer-controls button:hover { border-color: var(--plasma); }

/* Small screens --------------------------------------------------------- */

@media (max-width: 999px) {
  .hero { height: auto; padding-bottom: 64px; }

  .hero-media {
    position: relative;
    left: 0;
    height: clamp(320px, 58svh, 560px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 84px), calc(100% - 54px) 100%, 0 100%);
    animation: none;
  }

  .hero-sliver { display: none; }

  .hero-copy { padding-top: 32px; }

  .hero-credit { position: static; padding: 24px var(--gutter) 0; }
}

@media (max-width: 859px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 38vw; }
  .gallery > li { grid-column: span 1; grid-row: span 1; }
  .gallery > .g-sponza,
  .gallery > .g-probes { grid-column: span 2; }
  .gallery > .g-skin { grid-row: span 2; }

  .catalogue { grid-template-columns: 1fr; gap: 48px; }

  /* On small screens the package list wraps above the open package, like the blog's category buttons. */
  .catalogue.is-tabbed { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .catalogue-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
  .catalogue-group { width: 100%; padding: 16px 0 0; border: 0; }
  .catalogue-group:first-child { padding-top: 16px; }
  .catalogue-tabs button { padding: 8px 14px; border: 1px solid var(--rule); font-size: 1rem; color: var(--foam); }
  .catalogue-tabs button[aria-selected="true"] { border-color: var(--plasma); background: var(--plasma); color: var(--abyss); }
  .catalogue-tabs button[aria-selected="true"]::before { display: none; }
  .catalogue.is-tabbed .feature { grid-column: 1; grid-row: auto; }
  .catalogue.is-tabbed .spec { grid-template-columns: 1fr; }

  .posts { grid-template-columns: 1fr; gap: 28px; }

  .site-footer p { margin-left: 0; width: 100%; }

  .post-list li { grid-template-columns: 1fr; }

  .section.beta { grid-template-columns: 1fr; }
  .beta-copy { position: static; }
  .beta-fields { grid-template-columns: 1fr; }

  .post-pager { grid-template-columns: 1fr; }
  .pager-older { grid-column: 1; text-align: left; }

  .post-cover { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(100% - 27px) 100%, 0 100%); }
}

@media (max-width: 1099px) and (min-width: 860px) {
  .catalogue { grid-template-columns: 1fr 1fr; }
  .catalogue.is-tabbed { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .catalogue-tabs { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .site-header nav li:nth-child(-n+2) { display: none; }
  .site-header ul { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}