/* ================================================================
     Wood or Die — home

     An overview page, not a pitch: what the game is, how long it has
     taken, and who is behind it. Screenshots will replace the
     illustrated hero once there are some.

     Same construction as the patch notes page — colour off the logo,
     a chunky dark keyline on everything, a hard bevel under it, no
     soft shadows. Fredoka is the font the game renders in.
     ================================================================ */
  /* Palette lives in tokens.css, loaded before this file. */

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

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

  .wrap { max-width: var(--col); margin: 0 auto; padding: 0 1.25rem; }

  /* ---------- backdrop ---------- */
  .bg-logo {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none; overflow: hidden; opacity: var(--watermark);
  }
  .bg-logo__field {
    position: absolute; left: -25%; top: -25%;
    width: 150%; height: 150%;
    transform: rotate(-8deg); transform-origin: center;
    display: flex; flex-direction: column; gap: var(--tile-gap);
  }
  .bg-logo__row { display: flex; gap: var(--tile-gap); }
  .bg-logo__row span {
    flex: none; display: block; width: var(--tile);
    aspect-ratio: 2.08; overflow: hidden;
  }
  .bg-logo img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: 50% 49%;
  }

  /* ---------- buttons ---------- */
  /* One press idiom everywhere: the element drops onto its own bevel. */
  .btn {
    display: inline-block; font-family: var(--display);
    font-weight: 600; font-size: 0.95rem; line-height: 1.35;
    text-decoration: none; color: var(--ink); background: var(--raised);
    border: 3px solid var(--edge); border-radius: 10px;
    box-shadow: 0 4px 0 var(--bevel);
    padding: 0.55rem 1.05rem; cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--bevel); }
  .btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--bevel); }
  .btn--go { background: var(--accent); color: var(--on-accent); }
  .btn--big { font-size: 1.1rem; padding: 0.75rem 1.5rem; border-radius: 12px; }

  /* ---------- top bar ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--surface);
    border-bottom: 3px solid var(--edge);
  }
  .topbar__in {
    max-width: var(--col); margin: 0 auto; padding: 0.6rem 1.25rem;
    display: flex; align-items: center; gap: 0.6rem;
  }
  .topbar__brand {
    display: flex; align-items: center; gap: 0.55rem;
    text-decoration: none; color: var(--ink); margin-right: auto;
  }
  .topbar__brand img {
    width: 2rem; height: 2rem; border-radius: 24%;
    border: 2px solid var(--edge); display: block;
  }
  .topbar__brand span { font-family: var(--display); font-weight: 600; font-size: 1rem; }

  /* ---------- changelog picker ---------- */
  /* Two triggers on the page — the top bar and the hero — each with its own menu, so both
     behave the same way rather than one linking straight through. */
  .log { position: relative; display: inline-block; }
  .log__menu {
    position: absolute; right: 0; top: calc(100% + 0.55rem);
    width: min(23rem, 80vw);
    background: var(--raised);
    border: 3px solid var(--edge); border-radius: 12px;
    box-shadow: 0 5px 0 var(--bevel);
    padding: 0.5rem; z-index: 30;
    transform-origin: top right;
    animation: pop 0.16s ease-out;
    text-align: left;
  }
  .log__menu[hidden] { display: none; }
  @keyframes pop {
    from { opacity: 0; transform: scale(0.94) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .log__caret { font-size: 0.65rem; transition: transform 0.18s; display: inline-block; }
  [aria-expanded="true"] .log__caret { transform: rotate(180deg); }
  .log__head {
    font-family: var(--display); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-faint); padding: 0.35rem 0.5rem 0.5rem; margin: 0;
  }
  .log__item {
    display: block; text-decoration: none; color: inherit;
    padding: 0.6rem 0.65rem; border-radius: 9px;
    border: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
  }
  .log__item:hover { background: var(--surface); border-color: var(--edge); transform: translateY(-1px); }
  .log__row { display: flex; align-items: baseline; gap: 0.5rem; }
  .log__name { font-family: var(--display); font-weight: 600; font-size: 1rem; }
  .log__tag {
    font-family: var(--display); font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--accent-soft); color: var(--on-accent-soft);
    border-radius: 999px; padding: 0.05rem 0.45rem;
  }
  .log__meta { font-size: 0.83rem; color: var(--ink-soft); margin-top: 0.1rem; display: block; }
  .log__empty {
    font-size: 0.83rem; color: var(--ink-faint);
    padding: 0.3rem 0.65rem 0.45rem; margin: 0;
  }

  /* ---------- hero ---------- */
  /* Logo, one line, two buttons, on the page's own ground. Gameplay footage goes here later. */
  .hero { border-bottom: 3px solid var(--edge); }
  .hero__in {
    max-width: var(--col); margin: 0 auto;
    padding: 3rem 1.25rem 3.5rem; text-align: center;
  }
  .hero__logo { width: min(30rem, 84%); height: auto; display: block; margin: 0 auto 1.2rem; }
  .hero__line {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.25rem, 3.2vw, 1.7rem); line-height: 1.25;
    color: var(--ink); margin: 0 auto 1.6rem; max-width: 30ch; text-wrap: balance;
  }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

  /* ---------- sections ---------- */
  .band { padding: 3rem 0 0; }
  .band__head {
    font-family: var(--display); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 0.9rem;
  }
  .lead { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 1rem; max-width: 60ch; }
  .lead:last-child { margin-bottom: 0; }
  .lead b { color: var(--ink); font-family: var(--display); font-weight: 600; }

  /* ---------- by the numbers ---------- */
  .figures {
    display: grid; gap: 0.75rem; margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
  .figure {
    padding: 1rem 1.1rem; text-align: center;
    background: var(--surface);
    border: 3px solid var(--edge); border-radius: 12px;
    box-shadow: 0 4px 0 var(--bevel);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .figure:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--bevel); }
  .figure dd {
    margin: 0; font-family: var(--display); font-weight: 600;
    font-size: 1.85rem; line-height: 1.05; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .figure dd.is-date { font-size: 1.25rem; }
  .figure dt {
    font-family: var(--display); font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); margin-top: 0.3rem;
  }
  .figures__note { margin: 0.9rem 0 0; color: var(--ink-faint); font-size: 0.85rem; }

  /* ---------- who ---------- */
  .maker {
    display: grid; gap: 1.5rem;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: start;
    background: var(--raised);
    border: 3px solid var(--edge); border-radius: 14px;
    box-shadow: 0 5px 0 var(--bevel);
    padding: 1.5rem;
  }
  .maker__portrait {
    border: 3px solid var(--edge); border-radius: 12px;
    overflow: hidden; aspect-ratio: 1; background: var(--surface);
    transition: transform 0.2s;
  }
  .maker__portrait:hover { transform: rotate(-2deg) scale(1.02); }
  .maker__portrait img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .maker__text p { margin: 0 0 0.85rem; color: var(--ink-soft); max-width: 58ch; }
  .maker__text p:last-child { margin-bottom: 0; }
  .maker__text b { color: var(--ink); font-family: var(--display); font-weight: 600; }

  @media (max-width: 38rem) {
    .maker { grid-template-columns: minmax(0, 1fr); }
    .maker__portrait { max-width: 9.5rem; }
  }

  /* ---------- closing ---------- */
  .close {
    margin-top: 3.5rem; padding: 2.75rem 0;
    background: var(--surface);
    border-top: 3px solid var(--edge);
    border-bottom: 3px solid var(--edge);
    text-align: center;
  }
  .close h2 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.2;
    margin: 0 0 1.2rem; color: var(--ink); text-wrap: balance;
  }

  .foot { padding: 1.6rem 0 2.5rem; }
  .foot p { margin: 0 0 0.3rem; color: var(--ink-soft); font-size: 0.88rem; }
  .foot a { color: var(--accent); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }