/* Layout styles for the public official site. Kept external so the
   CloudFront CSP can remain strict and disallow inline CSS. */
:root {
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 72px; --s-8: 112px;
  --measure: 62ch;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--sq-ink); scroll-behavior: smooth; scrollbar-color: var(--sq-panel-2) var(--sq-ink); }
body { margin: 0; background: var(--sq-ink); color: var(--sq-parchment); font-family: var(--app-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: var(--sq-gold); color: var(--sq-ink); }
:focus-visible { outline: 2px solid var(--sq-gold); outline-offset: 3px; border-radius: var(--r-sm); }
a { color: var(--sq-lilac); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--sq-parchment); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--sq-ink); }
::-webkit-scrollbar-thumb { background: var(--sq-panel-2); border: 3px solid var(--sq-ink); border-radius: 8px; }

h1, h2, h3 { font-family: var(--app-disp); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
h1 { font-size: clamp(40px, 4.5vw, 56px); }
h2 { font-size: clamp(28px, 3vw, 40px); }
h3 { font-size: 22px; }
p { margin: 0; max-width: var(--measure); }
.data { font-family: var(--app-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--sq-gold); font-variant-numeric: tabular-nums; }
.quiet { color: var(--sq-lilac); }

.wrap { width: min(1200px, 100% - 2 * var(--s-4)); margin-inline: auto; }
@media (min-width: 1024px) { .wrap { width: min(1200px, 100% - 2 * var(--s-6)); } }

/* Header: wordmark and a quiet sign-in link, per the direction contract. */
.top { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) 0; gap: var(--s-3); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sq-parchment); }
.brand .mark { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--sq-gold); color: var(--sq-ink); font-family: var(--app-disp); font-size: 17px; display: grid; place-items: center; letter-spacing: 0.02em; }
.brand .name { font-family: var(--app-disp); font-size: 22px; }
.top .signin { font-weight: 500; text-decoration: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: var(--r-md); font-weight: 700; font-size: 19px; text-decoration: none; border: 1px solid transparent; transition: transform 160ms cubic-bezier(.2,.8,.2,1), background-color 160ms, border-color 160ms; min-height: 48px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sq-red); color: var(--sq-ink); }
.btn-primary:hover { background: #e95b71; color: var(--sq-ink); }
.btn-outline { background: transparent; color: var(--sq-lilac); border-color: var(--sq-lilac); }
.btn-outline:hover { color: var(--sq-parchment); border-color: var(--sq-parchment); }
.btn svg { width: 18px; height: 18px; }

/* Quest entry */
.box { width: 18px; height: 18px; border: 2px solid var(--sq-gold); border-radius: 3px; position: relative; flex: none; }
.box.done::after { content: ""; position: absolute; inset: 3px; background: var(--sq-gold); border-radius: 1px; }
.box.muted { border-color: var(--sq-lilac); }
.objectives { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.objectives li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; font-size: 20px; line-height: 1.35; }
.objectives .box { margin-top: 5px; }
.reward { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.reward .data::before { content: "REWARD"; color: var(--sq-lilac); margin-right: 10px; }
.pill { font-family: var(--app-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--sq-lilac); border-radius: 999px; color: var(--sq-lilac); white-space: nowrap; }
.pill.live { border-color: var(--sq-gold); color: var(--sq-gold); }

/* Main quest */
.main-quest { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7); align-items: start; padding: var(--s-6) 0 var(--s-8); }
@media (max-width: 1023px) { .main-quest { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-4) 0 var(--s-7); } }
.main-quest h1 { margin-bottom: var(--s-4); }
.main-quest .lede { font-size: 20px; max-width: 44ch; }
.main-quest .objectives { margin-top: var(--s-5); max-width: 46ch; }
.main-quest .reward { margin-top: var(--s-4); }
.actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.fineprint { margin-top: var(--s-3); font-size: 14px; }

/* Trail */
.trail { position: relative; background: var(--sq-panel); border: 1px solid var(--sq-border); border-radius: var(--r-xl); padding: var(--s-4); }
.trail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: var(--s-3); flex-wrap: wrap; }
.trail-head h3 { font-size: 18px; }
.chain { list-style: none; margin: 0; padding: 0; }
.link { display: grid; grid-template-columns: 28px 1fr; gap: 14px; opacity: 1; transform: none; }
.link.pending { opacity: 0; transform: translateY(8px); }
.link.revealed { transition: opacity 360ms cubic-bezier(.2,.8,.2,1), transform 360ms cubic-bezier(.2,.8,.2,1); opacity: 1; transform: none; }
.rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.node { width: 12px; height: 12px; border-radius: 50%; background: var(--sq-gold); flex: none; margin-top: 22px; box-shadow: 0 0 0 4px var(--sq-panel); }
.wire { flex: 1; width: 2px; background: var(--sq-border); position: relative; overflow: hidden; }
.wire-hidden { visibility: hidden; }
.wire::after { content: ""; position: absolute; inset: 0; background: var(--sq-gold); transform: scaleY(0); transform-origin: top; transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.link:hover .wire::after, .link:focus-within .wire::after, .link.lit .wire::after { transform: scaleY(1); }
.game { display: block; background: var(--sq-panel-2); border: 1px solid var(--sq-border); border-radius: var(--r-lg); padding: 12px 14px; text-decoration: none; color: inherit; margin-top: 8px; transition: border-color 160ms; }
.game:hover, .game:focus-visible { border-color: var(--sq-gold); }
.game .meta { font-family: var(--app-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sq-lilac); }
.game .title { font-family: var(--app-disp); font-size: 20px; line-height: 1.3; margin-top: 4px; }
.track { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; padding: 12px 6px 18px; }
.track .t { font-weight: 700; }
.track .a { color: var(--sq-lilac); font-size: 15px; }
.track .why { color: var(--sq-lilac); font-size: 14px; margin-top: 6px; font-style: italic; }
.track .d { font-family: var(--app-mono); font-size: 13px; color: var(--sq-gold); font-variant-numeric: tabular-nums; padding-top: 2px; }
.chain .link:last-child .track { padding-bottom: 6px; }
.trail-foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--sq-border); font-size: 14px; }

/* Log sections */
section.log { padding: var(--s-7) 0; border-top: 1px solid var(--sq-border); }
.log-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.log-head p { max-width: 52ch; }
.logbook { background: var(--sq-panel); border: 1px solid var(--sq-border); border-radius: var(--r-xl); padding: var(--s-2) var(--s-4); }
.entry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--sq-border); align-items: start; }
.entry:first-child { border-top: 0; }
@media (max-width: 860px) { .entry { grid-template-columns: 1fr; gap: var(--s-3); } }
.entry .head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.entry h3 { color: var(--sq-gold); }
.entry .objectives { margin-top: 10px; }
.entry .objectives li { font-size: 17px; }
.entry .objectives .box { width: 16px; height: 16px; margin-top: 4px; }
.entry .state { margin-top: 10px; font-size: 15px; }
.entry .desc { display: grid; gap: 12px; }
.mood { display: flex; gap: 8px; flex-wrap: wrap; }
.mood span { border: 1px solid var(--sq-lilac); color: var(--sq-lilac); border-radius: 999px; padding: 4px 10px; font-size: 14px; }
.mood span.on { background: var(--sq-gold); color: var(--sq-ink); border-color: var(--sq-gold); }

/* Signals */
.how { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--sq-border); border-radius: var(--r-xl); overflow: hidden; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; } }
.how > div { padding: var(--s-4); background: var(--sq-panel); display: grid; gap: 10px; align-content: start; transition: background-color 160ms; }
.how > div:hover { background: var(--sq-panel-2); }
.how > div + div { border-left: 1px solid var(--sq-border); }
@media (max-width: 860px) { .how > div + div { border-left: 0; border-top: 1px solid var(--sq-border); } }

/* Party (artists) */
.party { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
@media (max-width: 860px) { .party { grid-template-columns: 1fr; } }
.party .objectives { margin-top: var(--s-3); }
.party .objectives li { font-size: 17px; }
.party .objectives .box { width: 16px; height: 16px; margin-top: 4px; }
.party-lede { margin-top: 12px; }

/* Save points */
.saves { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 860px) { .saves { grid-template-columns: 1fr; } }
.save { background: var(--sq-panel); border: 1px solid var(--sq-border); border-radius: var(--r-xl); padding: var(--s-4); display: grid; gap: 12px; align-content: start; transition: border-color 160ms; }
.save:hover { border-color: var(--sq-lilac); }
.save.primary { border-color: var(--sq-gold); }
.save .head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.save .btn { justify-self: start; margin-top: 8px; }

footer { border-top: 1px solid var(--sq-border); padding: var(--s-5) 0; display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: 14px; }
footer nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .wire::after { transform: scaleY(1); transition: none; }
  .btn, .save, .how > div, .link.revealed { transition: none; }
  html { scroll-behavior: auto; }
}