/*  gondolgames.com — the one stylesheet.
 *
 *  The direction is "Night Arcade" (design/NightArcade.dc.html) with the hero
 *  laid out like "Struck Coin": content left, trailer framed on the right, on a
 *  warm near-black ground. Unbounded for display, Manrope for reading.
 *
 *  THE STUDIO COLOUR IS GOLD, settled 2026-09-08 by the author: the original
 *  dark disc with yellow letters, now with a light on it. It lives in mark.svg
 *  as a gradient rather than here, because the mark is one piece of metal
 *  catching one light — the rim and the letterforms are the same shape.
 *
 *  --accent is the flat gold for type and controls; each GAME may still take
 *  its own accent later (GONDOL_GAMES_BRAND.md: the mark adapts per game, the
 *  silhouette never does).
 */

:root {
  --ground:  #121210;
  --raised:  #1b1a16;
  --rule:    #33322a;
  --fg:      #f2f0e6;
  --dim:     #a9a49a;
  --faint:   #6f6c62;
  --accent:  #FFD23F;
  --ink:     #14140f;                 /* on top of gold */
  --measure: 44rem;
  --page: radial-gradient(1150px 660px at 20% 2%, #2a2517 0%, #1a1810 38%, #121210 72%);
}

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--page) no-repeat, var(--ground);
  color: var(--fg);
  font: 16px/1.65 Manrope, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.narrow { max-width: var(--measure); }

/* --- masthead ------------------------------------------------------------- */
/*  WRAPS, and on the container rather than on a guessed viewport width. The
 *  mark, the studio name and two nav links do not fit a 320px phone column,
 *  and a media query would only fix the widths somebody thought to test —
 *  flex-wrap fixes it wherever the masthead is squeezed, including inside a
 *  narrow embed. Measured: it escaped by 22px on all five pages before this. */
.top { display: flex; align-items: center; gap: 14px; row-gap: 12px;
       flex-wrap: wrap; padding: 28px 0 34px; }
.top a { color: var(--fg); text-decoration: none; }
.top .home { display: flex; align-items: center; gap: 14px; }
.top .mark { width: 38px; height: 38px; display: block; }
.top .name { font-family: Unbounded, system-ui, sans-serif; font-weight: 700;
             letter-spacing: .06em; font-size: 12px; white-space: nowrap; }
.top nav { margin-left: auto; display: flex; gap: 26px; font-size: 14px; }
.top nav a { color: var(--dim); }
.top nav a:hover, .top nav a[aria-current] { color: var(--fg); }

/* --- type ----------------------------------------------------------------- */
h1 { font-family: Unbounded, system-ui, sans-serif; font-weight: 700;
     font-size: clamp(30px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -.01em;
     margin: 0 0 20px; }
h2 { font-family: Unbounded, system-ui, sans-serif; font-weight: 400;
     font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
     color: var(--accent); margin: 3rem 0 .9rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.6rem 0 .35rem; }
p { margin: 0 0 1rem; }
ul { padding-left: 1.15rem; } li { margin: .4rem 0; }
/*  A NESTED list is a detail of the line above it, so it is set quieter and
 *  tighter — otherwise a sub-item reads with the same weight as a feature and
 *  the eight materials outshout the seven features they belong to. */
li > ul { margin: .35rem 0 .55rem; padding-left: 1.1rem; }
li > ul > li { margin: .15rem 0; color: var(--dim); font-size: .95em; }
li > ul > li::marker { color: var(--faint); }
a { color: var(--fg); text-underline-offset: .18em; text-decoration-color: var(--faint); }
a:hover { text-decoration-color: var(--accent); }
code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dim); }
.lede { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--dim); }
.dim { color: var(--dim); } .meta { color: var(--dim); font-size: .875rem; }
.lede a, .dim a { color: var(--accent); text-decoration-color: rgba(255,210,63,.45); }

/* --- the hero ------------------------------------------------------------- */
.hero { display: flex; gap: clamp(28px, 5vw, 64px); align-items: center;
        padding: 8px 0 72px; flex-wrap: wrap; }
.hero .say { flex: 1 1 430px; min-width: 0; }
.hero .bigmark { width: 132px; height: 132px; display: block; margin-bottom: 26px;
                 filter: drop-shadow(0 0 46px rgba(255, 210, 63, .40)); }
.hero .screen { flex: 1 1 460px; min-width: 0; position: relative;
                border-radius: 14px; overflow: hidden; border: 1px solid var(--rule);
                box-shadow: 0 30px 70px rgba(0,0,0,.55); background: #0c0e12; }
.hero .screen img, .hero .screen iframe { width: 100%; display: block; border: 0; }
.hero .screen .ratio { aspect-ratio: 16 / 10; width: 100%; }
.hero .screen figcaption { position: absolute; left: 16px; bottom: 12px; font-size: 11px;
    letter-spacing: .1em; text-transform: uppercase; color: #e8e3d5;
    text-shadow: 0 1px 6px rgba(0,0,0,.85); pointer-events: none; }

/* --- controls ------------------------------------------------------------- */
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px;
       border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none;
       border: 1px solid transparent; }
.btn-gold { background: var(--accent); color: var(--ink); }
.btn-gold:hover { background: #ffdc66; }
.btn-quiet { border-color: var(--rule); color: var(--fg); }
.btn-quiet:hover { border-color: var(--faint); }
.btn[aria-disabled="true"] { color: var(--faint); border-color: #2a2924;
       pointer-events: none; }
.btn small { font-weight: 400; font-size: 12px; color: inherit; opacity: .7; }

/* --- panels and tables ---------------------------------------------------- */
.panel { background: var(--raised); border: 1px solid var(--rule); border-radius: 14px;
         padding: 22px 24px; }
.panel :last-child { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 1rem 0; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule);
         vertical-align: top; }
th { color: var(--dim); font-weight: 600; font-size: .76rem; letter-spacing: .07em;
     text-transform: uppercase; }
td code { color: var(--fg); word-break: break-word; }
.scroll-x { overflow-x: auto; }

footer { margin: 72px 0 40px; padding-top: 22px; border-top: 1px solid var(--rule);
         color: var(--faint); font-size: .85rem; display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--dim); }

/*  A POLICY GETS PRINTED AND FILED — the one page here nobody reads on a
 *  screen we chose. Black on white, no furniture. */
@media print {
  :root { --ground:#fff; --raised:#fff; --fg:#000; --dim:#333; --faint:#555;
          --rule:#bbb; --accent:#000; --page:none; }
  html, body { background:#fff; color:#000; }
  .top nav, footer, .hero .screen { display: none; }
  a { color:#000; text-decoration: none; }
  .wrap { max-width: none; }
}