/*
 * Four Suit Studio, gallery look (approved mockup, 25 Oct 2026).
 * Loaded only when the option fss_gallery_look is on (see functions.php), so
 * merging this file changes nothing until scripts/gallery-golive.sh switches it on.
 *
 * Two layers:
 *   1. Site chrome (header, footer) under body.fss-gallery.
 *   2. Page content under .fssg, the wrapper every gallery page uses.
 * Page classes are short (.label, .room, .btn) and always scoped under .fssg so
 * they cannot collide with Astra, Spectra or SureCart.
 */

@font-face { font-family: "Roc Wide"; src: url("gallery/fonts/roc-wide-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roc Wide"; src: url("gallery/fonts/roc-wide-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roc"; src: url("gallery/fonts/roc-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Roc"; src: url("gallery/fonts/roc-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

body.fss-gallery {
  --g-wall: #e4ded2;       /* FSS cream, the gallery wall */
  --g-paper: #f3efe6;      /* label card and print paper */
  --g-plinth: #f6f3ec;     /* light ground under product shots */
  --g-sheet: #fbf9f4;      /* the print sheet itself */
  --g-ink: #1d1d1b;
  --g-ink-soft: #57534b;
  --g-rule: rgba(29, 29, 27, 0.2);
  --g-accent: #a33e32;     /* FSS pip red, the one working accent */
  --g-accent-ink: #f3efe6;
  --g-band: #1d1d1b;       /* quote wall */
  --g-band-ink: #e4ded2;
  --g-gutter: 16px;
  --g-max: 1320px;
  --g-wide: "Roc Wide", "Helvetica Neue", Arial, sans-serif;
  --g-text: "Roc", "Helvetica Neue", Arial, sans-serif;
  background: var(--g-wall);
}
@media (min-width: 760px) { body.fss-gallery { --g-gutter: 40px; } }

/* ---------- 1. Site chrome ---------- */

body.fss-gallery .main-header-bar,
body.fss-gallery .ast-primary-header-bar { background-color: var(--g-wall) !important; border-bottom: 1px solid var(--g-rule) !important; }
body.fss-gallery .main-header-menu .menu-link,
body.fss-gallery .main-header-menu .menu-item > a,
body.fss-gallery .ast-mobile-popup-content .menu-link,
body.fss-gallery #ast-mobile-header .menu-link {
  font-family: var(--g-wide) !important; font-weight: 500 !important; font-size: 0.82rem !important;
  text-transform: none !important; letter-spacing: 0 !important; color: var(--g-ink) !important;
}
body.fss-gallery .main-header-menu .menu-link:hover,
body.fss-gallery .main-header-menu .current-menu-item > .menu-link { color: var(--g-ink) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* The logo already links home, so the Home item is hidden instead of deleted. */
body.fss-gallery .main-header-menu .menu-item-1958,
body.fss-gallery #ast-hf-mobile-menu .menu-item-1958 { display: none !important; }

body.fss-gallery .site-footer { background-color: var(--g-wall) !important; border-top: 1px solid var(--g-rule); }
body.fss-gallery .site-footer,
body.fss-gallery .site-footer p,
body.fss-gallery .site-footer li,
body.fss-gallery .site-footer span,
body.fss-gallery .site-footer a,
body.fss-gallery .site-footer h2,
body.fss-gallery .site-footer h3,
body.fss-gallery .site-footer .widget-title { color: var(--g-ink) !important; font-family: var(--g-text) !important; }
body.fss-gallery .site-footer h2,
body.fss-gallery .site-footer h3,
body.fss-gallery .site-footer .widget-title { font-family: var(--g-wide) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
body.fss-gallery .site-footer a:hover { color: var(--g-accent) !important; }
body.fss-gallery .site-footer svg,
body.fss-gallery .site-footer [class*="social"] svg { fill: var(--g-ink) !important; color: var(--g-ink) !important; }
body.fss-gallery .site-footer .ast-builder-html-element img[src*=".svg"] { filter: none; }
body.fss-gallery .site-footer .footer-nav-wrap .menu-link { font-family: var(--g-wide) !important; font-size: 0.82rem !important; text-transform: none !important; }
body.fss-gallery .site-footer input[type="email"],
body.fss-gallery .site-footer input[type="text"] { background: var(--g-paper) !important; color: var(--g-ink) !important; border: 1px solid var(--g-ink) !important; border-radius: 0 !important; }
body.fss-gallery .site-footer .formkit-form[data-uid] .formkit-input { border-color: var(--g-ink) !important; border-radius: 0 !important; }
body.fss-gallery .site-footer .formkit-form[data-uid] .formkit-submit { border-color: var(--g-ink) !important; box-shadow: none !important; border-radius: 0 !important; }
body.fss-gallery .site-footer .formkit-form[data-uid] .formkit-submit > span { font-family: var(--g-wide) !important; text-transform: none !important; letter-spacing: 0 !important; }
body.fss-gallery .site-footer .formkit-form[data-uid] .formkit-guarantee,
body.fss-gallery .site-footer .formkit-form[data-uid] .formkit-disclaimer { color: var(--g-ink-soft) !important; opacity: 1; }

/* Gallery pages own their full width and background. */
body.fss-gallery .site-content,
body.fss-gallery #content { background-color: var(--g-wall) !important; }
body.fss-gallery .entry-content > .fssg { margin-top: 0; margin-bottom: 0; }
/* Same fixes the design system applies to .fss: no #primary padding, no block-editor
   root padding on the wrapper, no block-gap margin between sections. */
body.fss-gallery:has(.fssg) #primary,
body.fss-gallery:has(.fssg) .site-content > .ast-container { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
.wp-block-group.fssg { padding: 0 !important; }
.fssg > * { margin-block-start: 0; margin-top: 0; }
/* Full bleed whatever container Astra puts around the content. */
/* 100vw would include the scrollbar and push content past the right edge, so the
   container itself is opened up instead. */
body.fss-gallery:has(.fssg) .site-content > .ast-container { max-width: none; padding-left: 0; padding-right: 0; }
body.fss-gallery:has(.fssg) #primary { width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
body.fss-gallery .entry-content > .fssg.alignfull { width: auto; max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
/* "Games" is a link to a section of the home page; do not mark it as the current page. */
body.fss-gallery .main-header-menu .current-menu-item > .menu-link[href*="#"] { text-decoration: none; }

/* ---------- 2. Page content ---------- */

.fssg { background: var(--g-wall); color: var(--g-ink); font-family: var(--g-text); font-weight: 400; font-size: 17px; line-height: 1.6; overflow-x: clip; }
.fssg *, .fssg *::before, .fssg *::after { box-sizing: border-box; }
.fssg img { display: block; max-width: 100%; height: auto; }
.fssg a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fssg a:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 3px; }
.fssg figure { margin: 0; }
.fssg .wrap { max-width: var(--g-max); margin: 0 auto; padding: 0 var(--g-gutter); }

/* Type */
.fssg h1, .fssg h2, .fssg h3, .fssg .wide { font-family: var(--g-wide); font-weight: 500; letter-spacing: -0.01em; color: var(--g-ink); text-transform: none; }
.fssg h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.04; margin: 0; font-weight: 700; }
.fssg h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.1; margin: 0 0 0.6em; }
.fssg h3 { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.fssg p { margin: 0 0 1em; max-width: 62ch; }
.fssg .lede { font-size: 1.15rem; font-weight: 300; line-height: 1.55; margin-top: 20px; }
.fssg .kind { font-family: var(--g-wide); font-size: 0.8rem; color: var(--g-ink-soft); margin: 0 0 14px; }
.fssg .muted { color: var(--g-ink-soft); }

/* Buttons: plain, rectangular, labelled with what they do */
.fssg .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; font-family: var(--g-wide); font-weight: 500; font-size: 0.86rem; line-height: 1.2; text-decoration: none; border: 1px solid var(--g-ink); background: var(--g-ink); color: var(--g-wall); cursor: pointer; border-radius: 0; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.fssg .btn:hover { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-accent-ink); }
.fssg .btn.quiet { background: transparent; color: var(--g-ink); }
.fssg .btn.quiet:hover { background: var(--g-ink); color: var(--g-wall); border-color: var(--g-ink); }
.fssg .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; }
.fssg .btns .text-link { font-size: 0.95em; }
.fssg .textlink { font-family: var(--g-wide); font-size: 0.86rem; display: inline-block; padding: 12px 0; }

/* Wall label: the core component */
.fssg .label { font-size: 0.95rem; line-height: 1.45; }
.fssg .label p { margin: 0; }
.fssg .label .t { font-family: var(--g-wide); font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin: 0 0 4px; }
.fssg .label .m { font-style: italic; margin: 0 0 10px; }
.fssg .label .d { color: var(--g-ink-soft); }
.fssg .label .price { font-family: var(--g-wide); font-weight: 500; margin-top: 10px; font-variant-numeric: tabular-nums; }
.fssg .credit { font-size: 0.78rem; color: var(--g-ink-soft); margin-top: 8px; }

/* Hero: one work on the wall with its label */
.fssg .hero { padding: 40px 0 56px; }
.fssg .hero-grid { display: grid; gap: 24px; }
.fssg .hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; animation: fssg-hang 700ms ease-out both; }
@keyframes fssg-hang { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fssg .hero img { animation: none; } .fssg .btn { transition: none; } }
.fssg .hero-copy h1 { margin-bottom: 20px; }
@media (min-width: 900px) { .fssg .hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 40px; } }

/* Mission */
.fssg .mission { border-top: 1px solid var(--g-rule); border-bottom: 1px solid var(--g-rule); padding: 56px 0; }
.fssg .mission .wrap { display: grid; gap: 16px; }
.fssg .mission h2 { font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); max-width: 22ch; margin: 0; }
@media (min-width: 900px) { .fssg .mission .wrap { grid-template-columns: 7fr 5fr; align-items: end; } }

/* Rooms: one big image and one label per game */
.fssg .rooms { padding: 72px 0 24px; scroll-margin-top: 16px; }
.fssg .rooms-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 40px; }
.fssg .rooms-head h2 { margin: 0; }
/* Every room frame is 3:2. Photos are shot 3:2 and fill it exactly; product shots on
   white sit whole on the plinth with room around them. Nothing is ever cropped. */
.fssg .room { display: grid; gap: 24px; padding: 0 0 88px; }
.fssg .room figure { background: var(--g-plinth); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 7% 12%; }
.fssg .room figure img { width: 100%; height: 100%; object-fit: contain; }
.fssg .room figure.photo { padding: 0; background: none; }
.fssg .room .label { border-top: 1px solid var(--g-ink); padding-top: 16px; max-width: 36ch; }
.fssg .room .label .t { font-size: 1.35rem; margin-bottom: 6px; }
.fssg .room .kind { margin-bottom: 10px; }
@media (min-width: 900px) {
  .fssg .room { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 72px; }
  .fssg .room.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .fssg .room.flip figure { order: 2; }
}

/* Exhibition band (photos hung in a grid) */
.fssg .show { padding: 72px 0; border-top: 1px solid var(--g-rule); }
.fssg .hang { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 32px; }
.fssg .hang img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
/* Photos keep their own 3:2 shape: two to a row, never cropped to fit a slot. */
@media (min-width: 700px) {
  .fssg .hang { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}

/* Editions row (prints on the home page) */
.fssg .editions { padding: 72px 0; background: var(--g-paper); }
.fssg .prints { display: grid; gap: 28px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
@media (min-width: 760px) { .fssg .prints { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fssg .sheet { background: var(--g-sheet); padding: 9% 10% 13%; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }
/* Card art keeps the card's own rounded corners (25px on an 811px card). */
.fssg { --g-card-radius: 3.4% / 2.55%; }
.fssg .sheet img { width: 100%; aspect-ratio: 480 / 644; object-fit: contain; border-radius: var(--g-card-radius); }
.fssg .print figcaption { margin-top: 14px; }
.fssg .print .label .t { font-size: 0.95rem; }
.fssg .print .label { font-size: 0.88rem; }

/* Quote wall */
.fssg .quotes { background: var(--g-band); color: var(--g-band-ink); padding: 72px 0; }
.fssg .quotes .grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .fssg .quotes .grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.fssg .quotes blockquote { margin: 0; padding: 0; border: 0; background: none; }
.fssg .quotes blockquote p { font-size: 1.12rem; font-weight: 300; line-height: 1.5; color: var(--g-band-ink); font-style: normal; }
.fssg .quotes cite { font-style: normal; font-family: var(--g-wide); font-size: 0.8rem; color: var(--g-band-ink); }
.fssg .quotes .kind { color: var(--g-band-ink); opacity: 0.75; }

/* Newsletter (the real Mailerlite embed sits inside .form) */
.fssg .letter { padding: 72px 0; }
.fssg .letter .wrap { display: grid; gap: 20px; }
@media (min-width: 900px) { .fssg .letter .wrap { grid-template-columns: 6fr 5fr; align-items: end; } }

/* Exhibition page */
.fssg .entrance { padding: 40px 0 64px; }
.fssg .entrance-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .fssg .entrance-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; } }
.fssg .buy { border-top: 1px solid var(--g-ink); margin-top: 28px; }
.fssg .buy-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--g-rule); }
.fssg .buy-item .label .t { font-size: 1rem; }
.fssg .buy-item .btn { grid-row: span 2; }
.fssg .wing-nav { position: sticky; top: 0; z-index: 10; background: var(--g-wall); border-top: 1px solid var(--g-rule); border-bottom: 1px solid var(--g-rule); }
.admin-bar .fssg .wing-nav { top: 32px; }
.fssg .wing-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 26px; overflow-x: auto; scrollbar-width: none; }
.fssg .wing-nav li { margin: 0; }
.fssg .wing-nav a { display: inline-block; padding: 14px 0; white-space: nowrap; font-family: var(--g-wide); font-size: 0.82rem; text-decoration: none; }
.fssg .wing-nav a:hover { text-decoration: underline; }
@media (min-width: 900px) { .fssg .wing-nav ul { flex-wrap: wrap; overflow: visible; } }
.fssg .wing { padding: 64px 0; border-bottom: 1px solid var(--g-rule); scroll-margin-top: 56px; }
.fssg .wing-head { display: grid; gap: 12px; margin-bottom: 32px; }
@media (min-width: 900px) { .fssg .wing-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; } }
.fssg .wing-head h2 { margin: 0; }
.fssg .suit { font-family: var(--g-wide); font-size: 0.85rem; color: var(--g-ink-soft); margin: 0 0 8px; }
.fssg .cardrow { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .fssg .cardrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fssg .cardrow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } }
.fssg .cardrow img,
.fssg .rankwall img { width: 100%; aspect-ratio: 480 / 644; object-fit: contain; border-radius: var(--g-card-radius); }
.fssg .cardrow figcaption,
.fssg .rankwall figcaption { margin-top: 10px; font-size: 0.82rem; line-height: 1.4; }
.fssg .cardrow figcaption b,
.fssg .rankwall figcaption b { font-family: var(--g-wide); font-weight: 500; display: block; }

/* Same rank, four movements: one row per rank, one column per suit */
.fssg .ranks { padding: 64px 0; border-bottom: 1px solid var(--g-rule); scroll-margin-top: 56px; }
.fssg .rankwall { display: grid; gap: 40px; margin-top: 32px; }
.fssg .rankrow { display: grid; gap: 12px; }
.fssg .rankrow h3 { font-size: 1rem; }
.fssg .rankrow .four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fssg .rankwall figcaption { font-size: 0.74rem; }
@media (min-width: 900px) {
  .fssg .rankwall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 48px; }
  .fssg .rankrow .four { gap: 16px; }
  .fssg .rankwall figcaption { font-size: 0.8rem; }
}

.fssg .artist { padding: 72px 0; }
.fssg .artist .wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .fssg .artist .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; } }
.fssg .artist blockquote { margin: 0 0 1em; padding: 0; border: 0; font-style: normal; }
.fssg .artist blockquote p { font-size: 1.12rem; font-weight: 300; line-height: 1.55; }

/* Shop page */
.fssg .shop-head { padding: 48px 0 32px; }
.fssg .terms { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.88rem; color: var(--g-ink-soft); margin: 16px 0 0; padding: 0; list-style: none; }
.fssg .terms li { margin: 0; }
.fssg .shop-nav { border-top: 1px solid var(--g-rule); border-bottom: 1px solid var(--g-rule); }
.fssg .shop-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 28px; overflow-x: auto; }
.fssg .shop-nav li { margin: 0; }
.fssg .shop-nav a { display: inline-block; padding: 14px 0; font-family: var(--g-wide); font-size: 0.84rem; text-decoration: none; white-space: nowrap; }
.fssg .shelf { padding: 56px 0; border-bottom: 1px solid var(--g-rule); scroll-margin-top: 8px; }
.fssg .shelf-head { display: grid; gap: 8px; margin-bottom: 28px; }
@media (min-width: 900px) { .fssg .shelf-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; } }
.fssg .shelf-head h2 { margin: 0; }
.fssg .goods { display: grid; gap: 32px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .fssg .goods { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 24px; } }
.fssg .goods.big { grid-template-columns: 1fr; }
@media (min-width: 700px) { .fssg .goods.big { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fssg .goods.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fssg .item { display: flex; flex-direction: column; }
.fssg .item .img { background: var(--g-plinth); padding: 8%; }
.fssg .item .img img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.fssg .item .img.photo { background: none; }
.fssg .goods.big .item .img { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.fssg .goods.big .item .img img { width: 100%; height: 100%; aspect-ratio: auto; }
.fssg .item figcaption { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fssg .item .btn { align-self: flex-start; margin-top: auto; }
.fssg .postcards .sheet { padding: 7%; }
.fssg .subshelf { margin: 56px 0 24px; font-size: 1.2rem; }

/* Product shots on white sit on a light plinth; multiply drops their white ground into it */
.fssg .room figure:not(.photo) img,
.fssg .item .img:not(.photo) img { mix-blend-mode: multiply; }

@media (max-width: 520px) {
  .fssg .buy-item { grid-template-columns: 1fr; }
  .fssg .buy-item .btn { grid-row: auto; justify-self: start; margin-top: 8px; }
}

/* On phones the four-up rank rows become two by two, so suit names never break. */
@media (max-width: 599px) {
  .fssg .rankrow .four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .fssg .rankwall figcaption { font-size: 0.8rem; }
}

/* Exhibition page: the game and the deck, each one object on a plinth with its label */
.fssg .feature { padding: 72px 0; border-bottom: 1px solid var(--g-rule); scroll-margin-top: 56px; }
.fssg .feature-grid { display: grid; gap: 28px; }
.fssg .plinth { background: var(--g-plinth); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 6% 8%; }
.fssg .plinth img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fssg .feature .label { max-width: 46ch; }
.fssg .feature .label h2 { margin-bottom: 0.5em; }
.fssg .feature .label p:not(.kind) { margin-bottom: 0.8em; }
.fssg .feature .label .d { margin-top: 0.4em; }
@media (min-width: 900px) {
  .fssg .feature-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
  .fssg .feature.flip .feature-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .fssg .feature.flip .plinth { order: 2; }
}

/* How it plays: the high point of the exhibition page. A paper band, three photographs
   from the game shoot at their own 16:9, numbered because the steps are a sequence. */
.fssg .howto { background: var(--g-paper); padding: 88px 0 96px; scroll-margin-top: 56px; }
.fssg .howto-head { display: grid; gap: 16px; margin-bottom: 48px; }
.fssg .howto-head h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-weight: 700; margin: 0; }
.fssg .howto-head p { margin-bottom: 20px; }
@media (min-width: 900px) { .fssg .howto-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; } }
.fssg .steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; counter-reset: none; }
.fssg .steplist li { margin: 0; display: flex; flex-direction: column; }
.fssg .steplist img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.fssg .step-text { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; margin-top: 20px; border-top: 1px solid var(--g-ink); padding-top: 16px; }
.fssg .step-text .num { font-family: var(--g-wide); font-weight: 700; font-size: 2.6rem; line-height: 0.9; margin: 0; }
.fssg .step-text h3 { font-size: 1.1rem; margin: 2px 0 8px; }
.fssg .step-text p { margin: 0; font-size: 0.95rem; }
@media (min-width: 760px) { .fssg .steplist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* Quote walls: names sit on one baseline whatever the quote length */
.fssg .quotes .grid blockquote { display: flex; flex-direction: column; }
.fssg .quotes .grid blockquote p { flex: 1 1 auto; }
.fssg .quotes cite { display: block; padding-top: 14px; border-top: 1px solid rgba(228, 222, 210, 0.3); }
.fssg .reviews .featured { display: grid; gap: 28px; margin: 8px 0 56px; align-items: center; }
.fssg .reviews .featured blockquote p { font-family: var(--g-wide); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem); line-height: 1.25; max-width: 30ch; letter-spacing: -0.01em; }
.fssg .reviews .featured cite { border-top: 0; padding-top: 0; }
.fssg .reviews .featured figure { max-width: 220px; }
.fssg .reviews .featured img { width: 100%; aspect-ratio: 480 / 644; object-fit: contain; border-radius: var(--g-card-radius); }
@media (min-width: 900px) { .fssg .reviews .featured { grid-template-columns: minmax(0, 1fr) 220px; gap: 72px; } }
.fssg .quotes { scroll-margin-top: 56px; }

/* Framed objects: the frame keeps its ratio whatever the image's own shape, and the
   image sits whole inside the padding (contain), so every frame in a row matches. */
.fssg .room figure:not(.photo),
.fssg .plinth,
.fssg .goods.big .item .img { position: relative; padding: 0; }
.fssg .room figure:not(.photo) img,
.fssg .plinth img,
.fssg .goods.big .item .img img { position: absolute; inset: 9% 12%; width: 76%; height: 82%; object-fit: contain; }
/* Full-bleed photograph variant (the Kickstarter hero): fills the frame, no plinth padding or blend */
.fssg .plinth.full { aspect-ratio: 16 / 9; }
.fssg .plinth.full img { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.fssg .goods:not(.big) .item .img:not(.sheet) { position: relative; aspect-ratio: 1 / 1; padding: 0; }
.fssg .goods:not(.big) .item .img:not(.sheet) img { position: absolute; inset: 10%; width: 80%; height: 80%; aspect-ratio: auto; object-fit: contain; }

/* Narrow Astra layouts (Partners) open up to the gallery container too. */
body.fss-gallery:has(.fssg) .site-content > .ast-container,
body.fss-gallery:has(.fssg) .entry-content,
body.fss-gallery:has(.fssg) .ast-article-single { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Phones: the three other games stack, so their labels and buttons get the full width. */
@media (max-width: 699px) {
  .fssg .goods.three { grid-template-columns: 1fr; }
  .fssg .goods .btn { padding: 12px 16px; }
}