/*
 * Snowblown Studios — studio site.
 *
 * The two structural rules come from the Fablewood Chronicles style bible
 * (`render/ui/hud.css` in the game repo), because they are craft rules rather
 * than colour ones and they are what stop a games site sliding back into
 * looking like a web page:
 *
 *   1. Corners are near-square (3–5px). Nothing a smith or a joiner made has a
 *      16px radius.
 *   2. Every raised surface carries a dark outer edge with a pale hairline just
 *      inside it. That is a band of metal around a panel; a single 1px stroke
 *      is a border around a div, and the difference is most of the effect.
 *
 * The palette does NOT come from the game, and that is deliberate. The game is
 * oiled leather and aged brass. The studio is Snowblown — cold light, deep
 * winter sky, frost on steel. Chronicles keeps its own warmth inside its
 * artwork, and the site it sits in is the weather outside it.
 *
 * One inversion worth naming: in the game, verdigris is the single cool note in
 * a warm set. Here an ember warm (`--ember`) is the single warm note in a cold
 * one, and it is spent only on the thing that is actually finished and out —
 * We'reWolves. A fully cold palette reads sterile; one warm mark stops it.
 *
 * This design commits to the single dark look rather than offering a light
 * theme. A light inversion of deep-winter-sky is a different studio.
 */

:root {
  /* Surfaces. Cold slate, always well below the page ground in value so a
     panel reads as an object rather than a stain. */
  --panel-bg: rgba(18, 26, 38, 0.95);
  --panel-bg-lit: rgba(33, 47, 65, 0.95);
  --well: rgba(6, 10, 16, 0.6);
  --edge: rgba(4, 8, 13, 0.92);

  /* Fittings. Frost on steel where the game would use brass. */
  --frost: #9dbdd6;
  --frost-lit: #e2f1fb;
  --panel-border: rgba(157, 189, 214, 0.55);
  --rule: rgba(157, 189, 214, 0.24);

  --text: #eef5fb;
  --muted: #9fb3c6;

  /* Ice is what numbers are set in — the cold equivalent of the game's gold. */
  --ice: #bfe8f7;
  /* The one cool-on-cold accent, for what is still being made. */
  --accent: #7fd4e8;
  /* The one warm note in the whole set. Spent only on what has shipped. */
  --ember: #f0b968;

  --ground: #0a0f16;
  --ground-alt: #0e141d;

  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style",
    Georgia, serif;
  --display: Georgia, "Times New Roman", "Iowan Old Style", serif;

  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  position: relative;
  background: var(--ground);
  /* A cold pool of light at the top of the page — sun through overcast, not a
     flame overhead. This is the single biggest tell that the site is winter. */
  background-image:
    radial-gradient(1200px 680px at 50% -12%, rgba(127, 212, 232, 0.13), transparent 70%),
    radial-gradient(900px 500px at 82% 4%, rgba(157, 189, 214, 0.07), transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Snow. Two layers of small cold dots at different sizes and speeds, drifting
   sideways as they fall so it reads as blown rather than dropped — the studio
   is called Snowblown. Kept faint on purpose: at any opacity where you actively
   notice it, it has become a novelty background and started competing with the
   type. Pointer-events off, aria-hidden by virtue of being a pseudo-element,
   and killed entirely under prefers-reduced-motion by the rule above. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20% 0 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
}

body::before {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 8%,  rgba(226, 241, 251, 0.85), transparent),
    radial-gradient(1.4px 1.4px at 43% 22%, rgba(226, 241, 251, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 71% 12%, rgba(226, 241, 251, 0.8), transparent),
    radial-gradient(1.3px 1.3px at 88% 31%, rgba(226, 241, 251, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 27% 47%, rgba(226, 241, 251, 0.75), transparent),
    radial-gradient(1.4px 1.4px at 59% 63%, rgba(226, 241, 251, 0.7), transparent);
  background-size: 420px 420px;
  opacity: 0.5;
  animation: drift-near 26s linear infinite;
}

body::after {
  background-image:
    radial-gradient(1.1px 1.1px at 22% 15%, rgba(191, 232, 247, 0.6), transparent),
    radial-gradient(1px 1px   at 66% 38%, rgba(191, 232, 247, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 91% 9%,  rgba(191, 232, 247, 0.55), transparent),
    radial-gradient(1px 1px   at 38% 72%, rgba(191, 232, 247, 0.45), transparent);
  background-size: 300px 300px;
  opacity: 0.38;
  animation: drift-far 44s linear infinite;
}

@keyframes drift-near {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-60px, 420px, 0); }
}
@keyframes drift-far {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(38px, 300px, 0); }
}

/* Everything real sits above the weather. */
.topbar, main, footer { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--frost-lit); }
a:hover { color: var(--ice); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px;
  z-index: 10;
  background: var(--panel-bg-lit);
  border: 1px solid var(--panel-border);
  padding: 10px 16px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- topbar --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(10, 15, 22, 0.97), rgba(10, 15, 22, 0.86));
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 -1px 0 var(--rule);
  backdrop-filter: blur(6px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: 0.02em;
}

/* The brand element is the floating island with a rocky underside. At wordmark
   size that reduces to a silhouette, and here it wears snow: a bright cap over
   a cold keel. */
.wordmark-mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(175deg, var(--frost-lit) 0 38%, #46617c 38% 100%);
  box-shadow: 0 0 0 1px var(--edge), 0 0 10px rgba(191, 232, 247, 0.3);
}

.wordmark-thin { color: var(--muted); font-weight: normal; }

.topbar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.topbar nav a:hover {
  color: var(--frost-lit);
  border-bottom-color: var(--panel-border);
}

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

.hero { padding: 84px 0 60px; text-align: center; }

.eyebrow {
  margin: 0 0 18px;
  color: var(--frost);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.92rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  line-height: 1.12;
  margin: 0 auto 22px;
  max-width: 16ch;
  color: var(--text);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65);
}

.lede {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--muted);
  font-size: 1.09rem;
}

/* The island strip. Decorative; hidden from the accessibility tree in markup.
   The sprites stay true to the game's warm palette rather than being tinted
   cold — a warm island against a winter sky is a better image than a uniformly
   blue one, and it is the same art the player will actually see. Only the
   shadow is cold, so they sit in this world rather than float over it. */
.isle-strip {
  margin-top: 52px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(4px, 1.6vw, 20px);
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.isle-strip img {
  width: clamp(58px, 10.5vw, 116px);
  image-rendering: pixelated;
  filter:
    drop-shadow(0 10px 16px rgba(4, 10, 18, 0.7))
    drop-shadow(0 0 22px rgba(127, 212, 232, 0.12));
  animation: bob 7s ease-in-out infinite;
}
.isle-strip img:nth-child(2n) { animation-duration: 8.4s; animation-delay: -1.4s; }
.isle-strip img:nth-child(3n) { animation-duration: 6.3s; animation-delay: -2.9s; }
.isle-strip img:nth-child(5n) { animation-duration: 9.1s; animation-delay: -0.7s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* -------------------------------------------------------------- bands --- */

.band { padding: 66px 0; }
.band-alt {
  background: var(--ground-alt);
  box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule);
}

/* ------------------------------------------------------------ feature --- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.feature-flip .feature-art { order: 2; }
.feature-flip .feature-body { order: 1; }

/* Dark outer edge, pale hairline just inside it. */
.feature-art {
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--panel-border),
    0 14px 38px rgba(2, 6, 12, 0.6);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--panel-bg-lit), var(--panel-bg));
  padding: 14px;
  overflow: hidden;
}
.feature-art img { border-radius: 3px; width: 100%; }
.feature-art-wide { align-self: center; }

.feature-art-glyph {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 34%, rgba(127, 212, 232, 0.16), transparent 62%),
    linear-gradient(180deg, var(--panel-bg-lit), var(--panel-bg));
}
.glyph {
  font-size: clamp(72px, 13vw, 132px);
  line-height: 1;
  color: var(--frost-lit);
  text-shadow: 0 4px 26px rgba(191, 232, 247, 0.32);
}

.feature-body h2 {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(1.85rem, 4vw, 2.55rem);
  line-height: 1.15;
  margin: 0 0 6px;
}

.feature-body p { margin: 0 0 16px; color: var(--muted); }
.feature-body p:last-of-type { margin-bottom: 22px; }

.tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ice) !important;
  margin-bottom: 20px !important;
}

/* ------------------------------------------------------------- status --- */

.status {
  display: inline-block;
  margin: 0 0 14px !important;
  padding: 3px 11px;
  border-radius: 3px;
  font-variant: small-caps;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  border: 1px solid var(--edge);
  background: var(--well);
}
.status-soon { color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(127, 212, 232, 0.45); }
.status-out  { color: var(--ember) !important;  box-shadow: inset 0 0 0 1px rgba(240, 185, 104, 0.42); }
.status-beta { color: var(--frost-lit) !important; box-shadow: inset 0 0 0 1px var(--panel-border); }

/* -------------------------------------------------------------- facts --- */

.facts {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 7px;
}
.facts li {
  position: relative;
  padding-left: 21px;
  color: var(--muted);
  font-size: 0.98rem;
}
/* A frozen rivet rather than a bullet. */
.facts li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--frost);
  box-shadow: 0 0 0 1px var(--edge), 0 0 6px rgba(191, 232, 247, 0.35);
}
.facts b { color: var(--ice); font-weight: normal; }

/* --------------------------------------------------------------- ctas --- */

.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 4px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: #0b131c;
  background: linear-gradient(180deg, var(--frost-lit), var(--frost));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 14px rgba(2, 6, 12, 0.5);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover {
  color: #0b131c;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-disabled {
  background: var(--well);
  color: var(--muted);
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--rule);
  cursor: default;
}
.btn-disabled:hover { filter: none; transform: none; }

.price { color: var(--ember); font-size: 1.05rem; }

/* ----------------------------------------------------------- workshop --- */

/* The side projects. Deliberately a tier down from the three feature blocks —
   smaller type, no artwork, two to a row — because the moment a mod card is as
   loud as Chronicles the page stops having a headline. */

.section-head { text-align: center; margin-bottom: 38px; }

.section-head h2 {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin: 0 0 8px;
}

.section-head p { margin: 0; color: var(--muted); font-size: 1rem; }

.minor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px;
}

.minor {
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--rule), 0 8px 22px rgba(2, 6, 12, 0.42);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--panel-bg-lit), var(--panel-bg));
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
}

.minor-where {
  margin: 0 0 8px;
  color: var(--frost);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
}

.minor h3 {
  font-family: var(--display);
  font-weight: normal;
  font-size: 1.35rem;
  margin: 0 0 10px;
  color: var(--text);
}

.minor p { margin: 0 0 18px; color: var(--muted); font-size: 0.97rem; }

/* Push the link to the bottom so two cards of unequal copy still line their
   links up. */
.minor .link-arrow { margin-top: auto; }

.link-arrow {
  align-self: flex-start;
  text-decoration: none;
  color: var(--frost-lit);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 2px;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--ice); border-bottom-color: var(--ice); }

/* ------------------------------------------------------------- footer --- */

footer {
  border-top: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--rule);
  padding: 40px 0 52px;
  background: rgba(4, 8, 13, 0.55);
}

.footer-inner { text-align: center; }

.footer-mark {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 14px;
  color: var(--text);
}

footer nav {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
footer nav a {
  color: var(--muted);
  text-decoration: none;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}
footer nav a:hover { color: var(--frost-lit); }

.copyright { margin: 0; color: var(--muted); font-size: 0.86rem; opacity: 0.75; }

/* ----------------------------------------------------------- narrower --- */

@media (max-width: 760px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  /* On one column the art always leads, so the flip has nothing to swap. */
  .feature-flip .feature-art { order: 0; }
  .feature-flip .feature-body { order: 0; }
  .feature-art { max-width: 340px; }
  .feature-art-wide { max-width: 460px; }

  .hero { padding: 58px 0 44px; }
  .band { padding: 50px 0; }
}