/* GROWLMASTER V2'S PUBLIC PAGES (components/growlmaster-v2/seo): the kit's look (tokens.css, ui.css) on a reading page.
   Apple's way, GrowlMaster's night: one column of words, large serif titles, cards and inset lists; every value a
   token. Nothing is ever wider than the screen: rows that hold more scroll sideways inside themselves. */
html, body, .site-content { background: var(--g-bg); }
.gs { min-height: 100vh; background: var(--g-bg); color: var(--g-text); font-family: var(--g-font); font-size: var(--g-t); line-height: 1.5; overflow-x: clip; }
.gs a:not(.g-btn):not(.g-card):not(.g-row) { color: var(--g-accent); }
.gs img { max-width: 100%; height: auto; }

/* the header: the logo, a row of pages that scrolls sideways on a phone, the language and the account */
.gs .g-header { z-index: 30; }
.gs-brand { display: inline-flex; align-items: center; min-height: var(--g-touch); padding: 0 var(--g-2); }
.gs-brand img { width: auto; height: var(--g-logo-bar); }
.gs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-1) var(--g-2); box-sizing: border-box; max-width: calc(2 * var(--g-column)); margin: 0 auto; padding: var(--g-2) var(--g-margin); }
.gs-nav .g-btn { flex: none; white-space: nowrap; }
.gs-nav .g-btn--plain { color: var(--g-text-2); }
.gs-nav .g-btn--plain[aria-current="page"] { color: var(--g-accent); }
.gs .g-header__end .g-btn { white-space: nowrap; }
@media (max-width: 599px) { .gs-lang .lp__mine, .gs-lang .lp__caret { display: none; } }

/* the page's column */
.gs-main { box-sizing: border-box; max-width: calc(var(--g-column) + 2 * var(--g-margin)); margin: 0 auto; padding: var(--g-5) var(--g-margin) var(--g-8); }
.gs-main--wide { max-width: calc(2 * var(--g-column)); }
.gs-h1 { margin: var(--g-3) 0 var(--g-2); font-family: var(--g-font-display); font-weight: 900; font-size: var(--g-t-large); line-height: 1.12; letter-spacing: var(--g-track-tight); }
.gs-h2 { margin: var(--g-7) 0 var(--g-3); font-family: var(--g-font-display); font-weight: 700; font-size: var(--g-t-title); line-height: 1.2; }
.gs-h3 { margin: var(--g-5) 0 var(--g-2); font-size: var(--g-t-title3); font-weight: var(--g-w-semibold); line-height: 1.25; }
.gs-lead { margin: 0 0 var(--g-4); font-size: var(--g-t-title3); color: var(--g-text-2); line-height: 1.45; }
.gs-tagline { margin: 0 0 var(--g-2); font-style: italic; color: var(--g-text-2); }
.gs-quiet-line { margin: 0 0 var(--g-2); color: var(--g-text-3); font-size: var(--g-t-sub); }
.gs-main p { margin: 0 0 var(--g-3); }
.gs-main ul:not(.g-list):not(.gs-tiles), .gs-main ol { padding-inline-start: var(--g-5); margin: 0 0 var(--g-4); }
.gs-main li { margin: var(--g-1) 0; }
.gs-actions { display: flex; flex-wrap: wrap; gap: var(--g-2); align-items: center; margin: var(--g-4) 0; }
.gs-crumbs { display: flex; flex-wrap: wrap; gap: var(--g-2); align-items: center; color: var(--g-text-3); font-size: var(--g-t-sub); }
.gs-crumbs a { min-height: var(--g-touch); display: inline-flex; align-items: center; text-decoration: none; }
.gs-crumbs [aria-current] { color: var(--g-text-2); }
.gs .g-list__head { margin-top: var(--g-5); }
.gs .g-row__value { white-space: normal; text-align: end; max-width: 60%; }
.gs .g-row__body { min-width: 30%; }

/* a grid of things: two across on a phone, more where there is room */
.gs-tiles { list-style: none; margin: 0 0 var(--g-5); padding: 0; display: grid; gap: var(--g-3); grid-template-columns: repeat(auto-fill, minmax(min(var(--g-card-min), calc(50% - var(--g-3))), 1fr)); }
.gs-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(calc(2 * var(--g-field-min)), 100%), 1fr)); }
.gs-tiles > li { min-width: 0; display: grid; }
.gs-tiles .g-card { height: 100%; }
.gs-tile__pic { display: grid; place-items: center; aspect-ratio: 1; background: var(--g-surface-2); overflow: hidden; }
.gs-tile__pic img { width: 100%; height: 100%; object-fit: contain; }
.gs-tile__pic--cover { aspect-ratio: auto; }
.gs-tile__pic--cover img { height: auto; object-fit: cover; }
.gs-tile__plus { font-size: var(--g-8); font-weight: var(--g-w); color: var(--g-accent); background: var(--g-accent-tint); }
.gs-tile__name { font-weight: var(--g-w-semibold); line-height: 1.25; overflow-wrap: anywhere; }
.gs-tile__line { color: var(--g-text-3); font-size: var(--g-t-caption); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* a growl's page: its picture beside what it is, one column on a phone */
.gs-item__top { display: grid; gap: var(--g-5); grid-template-columns: minmax(0, 1fr); margin: var(--g-4) 0; }
@media (min-width: 760px) { .gs-item__top:not(.gs-item__top--one) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.gs-item__pic { margin: 0; border-radius: var(--g-r); overflow: hidden; background: var(--g-surface); box-shadow: var(--g-shadow); }
.gs-item__pic img { display: block; width: 100%; }
.gs-item__side > section:first-child .g-list__head { margin-top: 0; }
.gs-words { margin: var(--g-5) 0; }

/* an adventure: its cover beside its words */
.gs-advfeat .g-card { flex-direction: column; align-items: stretch; }   /* a phone: the cover over its words (final-review 27) */
@media (min-width: 600px) { .gs-advfeat .g-card { flex-direction: row; align-items: flex-start; } }
.gs-advfeat .g-card__body { min-width: 0; }
.gs-advfeat .gs-actions .g-btn { max-width: 100%; white-space: normal; }
.gs-advfeat__pic { flex: 0 0 auto; width: min(100%, calc(var(--g-card-min) + var(--g-8))); border-radius: var(--g-r-sm); overflow: hidden; }
.gs-advfeat__pic img { display: block; width: 100%; }
.gs-advfeat .gs-h3 { margin-top: 0; }
.gs-book { display: grid; gap: var(--g-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .gs-book { grid-template-columns: minmax(0, calc(2 * var(--g-field-min))) minmax(0, 1fr); align-items: start; } }
.gs-book__cover { width: 100%; border-radius: var(--g-r-sm); box-shadow: var(--g-shadow-lift); }
.gs-locked { position: relative; max-height: calc(2 * var(--g-field-min)); overflow: hidden; }
.gs-locked::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--g-bg) 85%); }
.gs-gate { margin-top: calc(-1 * var(--g-4)); padding: var(--g-5); text-align: center; border-radius: var(--g-r); background: var(--g-surface); box-shadow: var(--g-shadow); }
.gs-chapters > li { margin: var(--g-3) 0; }
.gs-text .gm-snipwrap { max-width: 420px; margin: var(--g-3) 0; }

/* About: plates and tables, as a reading page */
.gs-plate { margin: var(--g-5) 0; }
.gs-plate img { display: block; width: 100%; height: auto; border-radius: var(--g-r); box-shadow: var(--g-shadow); }
.gs-plate figcaption { margin-top: var(--g-2); color: var(--g-text-3); font-size: var(--g-t-caption); font-style: italic; }
.gs-shot { position: relative; margin: var(--g-4) 0; }
.gs-shot img { display: block; width: 100%; height: auto; border-radius: var(--g-r-sm); }
.gs-mark { position: absolute; border: var(--g-stroke) solid var(--g-accent); border-radius: var(--g-r-sm); box-shadow: var(--g-ring); }
.gs-mark b { position: absolute; top: calc(-1 * var(--g-3)); inset-inline-start: calc(-1 * var(--g-3)); display: grid; place-items: center; width: var(--g-5); height: var(--g-5); border-radius: var(--g-r-round); background: var(--g-accent); color: var(--g-on-accent); font-size: var(--g-t-caption); }
.gs-scroll { overflow-x: auto; margin: 0 0 var(--g-4); }
.gs-table { width: 100%; border-collapse: collapse; border-radius: var(--g-r); overflow: hidden; background: var(--g-surface); font-size: var(--g-t-sub); }
.gs-table th, .gs-table td { padding: var(--g-3) var(--g-4); text-align: start; vertical-align: top; }
.gs-table th { color: var(--g-text-3); font-size: var(--g-t-caption); text-transform: uppercase; letter-spacing: var(--g-track-caps); }
.gs-table tr + tr td { border-top: var(--g-hair) solid var(--g-separator); }
.gs-table--ages { min-width: var(--g-window); }
.gs-roll { color: var(--g-accent); font-weight: var(--g-w-bold); }
.gs-gorak { display: flex; gap: var(--g-4); align-items: flex-start; }
.gs-gorak img { flex: none; width: var(--g-face-xl); height: auto; }
@media (max-width: 559px) { .gs-gorak { flex-direction: column; } }
.gs-faq dt { margin-top: var(--g-4); font-weight: var(--g-w-semibold); }
.gs-faq dd { margin: var(--g-1) 0 0; color: var(--g-text-2); }
.gs-tabs { display: flex; gap: var(--g-2); overflow-x: auto; margin: var(--g-3) 0; }

/* GrowlMaster itself, at the foot */
.gs-promo { margin-top: var(--g-8); padding: var(--g-6) var(--g-5); text-align: center; border-radius: var(--g-r); background: var(--g-surface); box-shadow: var(--g-shadow); }
.gs-promo__brand { display: flex; justify-content: center; align-items: center; gap: var(--g-3); }
.gs-promo__brand img:last-child { height: var(--g-7); width: auto; }
.gs-promo .gs-h2 { margin-top: var(--g-3); }

/* the dice page: the dice take the first screen, the words under them */
.gs-dice { position: relative; min-height: calc(100vh - var(--g-bar)); }
.gs-free { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gs-dicewords { position: relative; }

/* GrowlMaster's legal lines (GmLegal, v1's one), quiet at the foot */
.gs-legal { padding: var(--g-5) var(--g-margin) var(--g-7); color: var(--g-text-3); font-size: var(--g-t-caption); text-align: center; }
.gs-legal a { color: var(--g-text-2); }
.gs-tile__icon { display: grid; width: var(--g-7); height: var(--g-7); color: var(--g-text-3); }
.gs-tile__icon svg { width: 100%; height: 100%; }

/* About's DM guide: one page at a time by its state (AboutGuide.astro); its Segmented scrolls sideways, never shrinks */
.gs-guide__panel { display: none; }
.gs-tabs { min-height: calc(var(--g-touch) + 2 * var(--g-1)); }
.gs-tabs .g-seg { width: max-content; }
.gs-tabs .g-seg__opt { flex: none; padding: 0 var(--g-4); white-space: nowrap; }

/* what one can do with a growl (GrowlActions.astro): a wrapping row, real touch sizes */
.gs-growlacts { display: flex; flex-wrap: wrap; gap: var(--g-2); margin: var(--g-4) 0; }

/* the lobby home: GrowlMaster's story below the tables, on the table's parchment (the kit's paper scheme), so the app
   above and the story below read as two places */
.gs-homeseo { margin-top: var(--g-8); padding: var(--g-6) var(--g-5) var(--g-8); border-radius: var(--g-r);
  background: var(--g-bg) url(/growlmaster/page-texture-1.webp) center / cover; box-shadow: var(--g-shadow); }