/* facecue.net.
 *
 * The site and the documentation are one property, so the colours here are the
 * documentation theme's own values, lifted from the Unity editor's palette.
 * Names match documentation/docs/stylesheets/facecue.css so the two can be read
 * side by side. The site has a single scheme, unlike the documentation, which
 * carries a light one as well.
 *
 * The top bar is NOT styled here. It lives in topbar.css, which both properties
 * share. See the header of that file.
 */

:root {
  /* The colours are NOT here. They come from fc-tokens.css, the one token file
     both properties share, linked ahead of this sheet. Only the site's own
     layout measures live here. */
  --fc-measure:        38rem;   /* the reading measure for prose */
  --fc-grid:           76rem;   /* the page grid, same as the documentation */
}

* { box-sizing: border-box; }

html {
  /* The bar is in normal flow, so an in-page anchor would otherwise land under
     nothing in particular. A little breathing room reads better either way. */
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--fc-panel);
  color: var(--fc-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--fc-grid);
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* Prose stops short of the full grid so line length stays readable, while
   figures, grids and the video take the whole column. */
.measure { max-width: var(--fc-measure); }

a {
  color: var(--fc-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 154, 92, 0.35);
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover, a:focus-visible {
  color: var(--fc-tan-bright);
  border-bottom-color: var(--fc-tan-bright);
}

/* ---- The hero ----------------------------------------------------------- */

.hero {
  padding: 4.5rem 0 3rem;
  border-bottom: 1px solid var(--fc-section-border);
}

.hero__mark {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--fc-tan);
  margin: 0;
}

.hero__word {
  margin: 0.7rem 0 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fc-text-label);
}

/* "Performance Studio" is the half of the product name a store browse card cuts
   off, so the site carries it in full. Quieter than the name, on its own line so
   the letterspacing has room. */
.hero__studio {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--fc-text-muted);
}

.hero h1 {
  margin: 2rem 0 0;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
  color: var(--fc-warm-white);
  max-width: 22ch;
}

.hero__lead {
  margin: 1.4rem 0 0;
  font-size: 1.08rem;
  color: var(--fc-text);
  max-width: var(--fc-measure);
}

.hero__note {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--fc-text-muted);
  max-width: var(--fc-measure);
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 2.2rem 0 0;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 2px;
  border: 1px solid var(--fc-hairline);
  background: transparent;
  color: var(--fc-tan);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover, .btn:focus-visible {
  background: var(--fc-hub-tile-hover);
  color: var(--fc-tan-bright);
  border-color: var(--fc-tan);
}

.btn--primary {
  background: var(--fc-tan);
  border-color: var(--fc-tan);
  color: var(--fc-panel);
  font-weight: 600;
}

.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--fc-tan-bright);
  border-color: var(--fc-tan-bright);
  color: var(--fc-panel);
}

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

.section {
  padding: 3.4rem 0;
  border-bottom: 1px solid var(--fc-section-border);
}

.section:last-of-type { border-bottom: 0; }

.section__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fc-amber);
}

.section h2 {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.95rem;
  line-height: 1.2;
  color: var(--fc-tan);
}

.section__lead {
  margin: 1rem 0 0;
  max-width: var(--fc-measure);
  color: var(--fc-text);
}

.section h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fc-text-bright);
}

.section p { margin: 0 0 1rem; }
.section p:last-child { margin-bottom: 0; }

/* ---- Card grids --------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1rem;
  margin: 2.2rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.grid--two { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }

/* Four across on a wide screen, folding to two and then one. ⛔ Not auto-fit:
   the four parts of the performance are a set and should break 4 / 2 / 1, where
   auto-fit would give an odd 3+1 at some widths and split the set. */
.grid--four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 68rem) {
  .grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .grid--four { grid-template-columns: 1fr; }
}

/* Three across, for a row of three tiles that sits above a card--span.
   ⛔ The span is why this has to be explicit. Plain .grid is auto-fit, which
   collapses the unused track to zero and lets three tiles fill the width on
   their own. A card--span takes 1 / -1, which keeps that fourth track alive at
   full size, so the tiles above it stop short and leave a hole where the span's
   own edge says there should be a tile. Folds straight to one: two columns
   would put a lone third tile on its own row and leave the same hole lower
   down. */
.grid--three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 54rem) {
  .grid--three { grid-template-columns: 1fr; }
}

/* The panel that runs the full width under a row of tiles, for saying how the
   things above it work on each other rather than describing another one. */
/* The full-width panels wear the hub tile, the same surface as the warm tiles
   above them, so the page has two card surfaces rather than three. */
.card--span {
  grid-column: 1 / -1;
  background: var(--fc-hub-tile);
  border-color: var(--fc-callout-border);
}

/* The panel is full width, so its prose is set in two columns.
   The alternative was one run of text across the whole card, which at this width
   is around 140 characters a line and hard to track back from. Holding the text
   to a narrow measure instead leaves a band of empty space down the right that
   reads as a layout fault. Columns fill the card and keep the lines short. */
.card--span .card__body {
  max-width: none;
}

.card {
  padding: 1.4rem 1.5rem;
  background: var(--fc-section-header);
  border: 1px solid var(--fc-section-border);
  border-radius: 3px;
}

.card--warm {
  background: var(--fc-hub-tile);
  border-color: var(--fc-callout-border);
}

.card p {
  font-size: 0.93rem;
  color: var(--fc-text);
}

.card__body p:last-child { margin-bottom: 0; }

/* Matches the documentation's inline code: the section-header surface, so a
   snippet reads as a quoted thing rather than as emphasis. */
code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  border-radius: 2px;
  background: var(--fc-section-header);
  border: 1px solid var(--fc-section-border);
  color: var(--fc-warm-white);
  overflow-wrap: break-word;
}

.card__tag {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--fc-callout-border);
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-amber);
}

/* ---- The video ---------------------------------------------------------- */

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2.2rem 0 0;
  background: var(--fc-callout);
  border: 1px solid var(--fc-section-border);
  border-radius: 3px;
  overflow: hidden;
}

.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__under {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--fc-text-muted);
}

/* ---- The compact video link -------------------------------------------- */

/* The home page shows the video as a still that leads to Media, rather than a
   full-width player. A player immediately under the hero pulls the whole page
   toward "watch this" when the page's job is to say what the thing is. Media is
   where someone goes to watch.
 */
.videolink {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 1.6rem;
  align-items: center;
}

.videolink__still {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--fc-section-border);
  border-radius: 3px;
  overflow: hidden;
  background: var(--fc-callout);
}

.videolink__still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* hqdefault is a 4:3 frame with the 16:9 image letterboxed inside it, so the
     bars have to be cropped off rather than shown. */
  transform: scale(1.36);
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.86;
}

.videolink__still:hover img,
.videolink__still:focus-visible img {
  transform: scale(1.42);
  opacity: 1;
}

/* The play affordance, drawn rather than loaded, so it costs no request and
   takes the palette. */
.videolink__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.videolink__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.35rem;
  border-style: solid;
  border-width: 0.85rem 0 0.85rem 1.4rem;
  border-color: transparent transparent transparent var(--fc-tan-bright);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}

.videolink__body h3 {
  margin: 0 0 0.6rem;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--fc-tan);
}

@media (max-width: 46rem) {
  .videolink { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ---- Lists -------------------------------------------------------------- */

.list {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
  font-size: 0.93rem;
}

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fc-gold);
}

/* A run of short factual lines, for requirements and platform support. */
.facts {
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--fc-section-border);
}

/* ⛔ A two-column grid, not flex-wrap. With flex the label kept its place until
   a long value pushed the row over, and then that one row's label dropped onto
   its own line while every other label stayed put. The column has to be fixed
   for the labels to read as a column at all. */
.facts div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.2rem 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--fc-section-border);
  font-size: 0.9rem;
}

.facts dt, .facts b {
  font-weight: 500;
  color: var(--fc-text-label);
}

.facts dd { margin: 0; color: var(--fc-text); }

/* ---- The centred single-message pages ----------------------------------- */

/* The link stubs (Discord, forum, roadmap, the store) are one short message
   each, so they keep the centred card the site used before rather than pretending
   to be a full page. */
.solo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 2.6rem - 8rem);
  padding: 3rem 1.2rem;
  text-align: center;
}

.solo__inner { max-width: 34rem; }

.solo h1 {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--fc-warm-white);
}

.solo__status {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fc-amber);
}

.solo p { margin: 1.5rem 0 0; }
.solo .actions { justify-content: center; }

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

.foot {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--fc-section-border);
  font-size: 0.85rem;
  color: var(--fc-text-muted);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0 0 1.2rem;
}

.foot a { color: var(--fc-text-muted); border-bottom-color: transparent; }
.foot a:hover { color: var(--fc-tan); border-bottom-color: transparent; }

/* ---- Narrow screens ----------------------------------------------------- */

@media (max-width: 46rem) {
  .hero { padding: 3rem 0 2.4rem; }
  .section { padding: 2.6rem 0; }
  .btn { padding: 0.65rem 1.2rem; }
  .facts div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---- The tuned-language strip -------------------------------------------- */

/* Ten names in a row, sized alike so they read as a set rather than as a
   sentence broken into pieces. Wraps to as many rows as the width allows. */
/* ⛔ Ten explicit columns, not flex wrapping. With a min-width and flex-wrap the
   ten names plus their gaps came to more than the grid is wide, so the last one
   dropped to a second row on its own. Ten equal fractions cannot do that: the
   cells divide whatever width there is, and the longest name sets how small the
   type can go rather than how many fit on a line. */
.langs {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.4rem;
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
}

.langs li {
  text-align: center;
  padding: 0.6rem 0.35rem;
  border: 1px solid var(--fc-section-border);
  border-radius: 2px;
  background: var(--fc-section-header);
  color: var(--fc-text-bright);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Ten across is too many once the page is narrow, so it halves, then halves again. */
@media (max-width: 62rem) {
  .langs { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 34rem) {
  .langs { grid-template-columns: repeat(2, 1fr); }
}

/* The one-line note under the strip. Same card as everywhere else, but it holds
   a single sentence, so it is padded down to match the strip above it. */
.langs__note {
  margin-top: 0.75rem;
  padding: 0.9rem 1.1rem;
}

.langs__note p { margin: 0; }

/* A lead that is a list rather than a sentence. The reading measure is there to
   keep prose lines short, and it works against a run of comma-separated names,
   which reads better filling the column. */
.section__lead--wide { max-width: none; }