/* ================================================================
     Wood or Die — patch notes

     Colour is taken off the logo itself: the wood orange of WOOD, the
     pale stone of OR DIE, and the near-black the letters are outlined
     in. That outline becomes --edge, which every card is drawn with,
     so the page is built the way the game UI is: chunky dark keyline,
     hard bevel underneath, no soft shadows anywhere.

     Type is Fredoka, which is the font the game itself renders in.
     ================================================================ */
  :root {
    --ground: #E9E4D8;
    --surface: #F3EFE5;
    --raised: #FCFAF3;
    --ink: #241B12;
    --ink-soft: #6B5B4A;
    --ink-faint: #9A8B78;

    --accent: #B85A17;
    --on-accent: #FFF6E8;
    --accent-soft: #E08A2E;
    --on-accent-soft: #1B1209;

    --edge: #241B12;
    --bevel: #C6BCA7;
    --rule: #D6CDBA;
    --watermark: 0.07;
    --tile: 132px;
    --tile-gap: 72px;

    --display: "Fredoka", "Trebuchet MS", sans-serif;
    --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --col: 62rem;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #16120E;
      --surface: #1F1913;
      --raised: #271F18;
      --ink: #F2EADC;
      --ink-soft: #B5A493;
      --ink-faint: #857567;

      --accent: #F0A030;
      --on-accent: #1B1209;
      --accent-soft: #C8791F;
      --on-accent-soft: #1B1209;

      --edge: #0C0906;
      --bevel: #0C0906;
      --rule: #342A20;
      --watermark: 0.06;
    }
  }

  :root[data-theme="dark"] {
    --ground: #16120E;
    --surface: #1F1913;
    --raised: #271F18;
    --ink: #F2EADC;
    --ink-soft: #B5A493;
    --ink-faint: #857567;

    --accent: #F0A030;
    --on-accent: #1B1209;
    --accent-soft: #C8791F;
    --on-accent-soft: #1B1209;

    --edge: #0C0906;
    --bevel: #0C0906;
    --rule: #342A20;
    --watermark: 0.06;
  }

  * { 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;
  }

  /* ---------- backdrop ---------- */
  /* The wordmark, small, tiled with even space around every side.

     Laid out as a grid of elements rather than background-repeat: a repeat cell is always the
     size of the image, and the artwork runs edge to edge horizontally, so tiled as a background
     the wordmarks would touch side by side with padding only above and below. A grid lets the
     gap be set on both axes. Each tile crops the source to the artwork so the spacing is even.

     Content sits on solid cards above this, so the backdrop stays a texture, not a distraction. */
  .bg-logo {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: var(--watermark);
  }

  /* Three things stop this reading as a grid, and it needs all three: the whole field is tilted
     off the horizontal, every other row is pushed along by half a tile so columns never line up,
     and each stamp is nudged and turned slightly on its own. The field is oversized and offset so
     the tilt cannot expose a bare corner. */
  .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%;
  }

  a { color: var(--accent); }

  :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; }

  /* ---------- masthead ---------- */
  .masthead .wrap { padding-top: 2.5rem; padding-bottom: 1.5rem; }

  .brand {
    display: flex; align-items: center; gap: 1.15rem;
    margin: 0 0 1.15rem;
  }
  .brand__icon {
    flex: none; width: 4.75rem; height: 4.75rem;
    border-radius: 22%; display: block;
    border: 3px solid var(--edge);
    box-shadow: 0 4px 0 var(--bevel);
  }
  /* Transparent PNG, so it needs no plate in either theme. */
  .brand__mark {
    flex: 1 1 auto; max-width: 23rem; min-width: 0;
    aspect-ratio: 2.08; overflow: hidden;
  }
  .brand__mark img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: 50% 49%;
  }

  .eyebrow {
    font-family: var(--display);
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 0.6rem;
  }
  .vh {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .sub {
    margin: 0; color: var(--ink-soft); font-size: 1.05rem;
    max-width: 42rem; text-wrap: pretty;
  }
  .sub b {
    font-family: var(--display); font-weight: 600;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }

  /* ---------- feature cards ---------- */
  .features { padding-top: 2rem; }
  .features h2, .stream h2 {
    font-family: var(--display); font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 1rem;
  }
  .cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
  }
  .card {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 1.1rem 1.15rem 1rem;
    background: var(--raised);
    border: 3px solid var(--edge); border-radius: 12px;
    box-shadow: 0 5px 0 var(--bevel);
    text-decoration: none; color: inherit;
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .card:hover, .card:focus-visible {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--bevel);
  }
  .card__name {
    font-family: var(--display); font-weight: 600; font-size: 1.12rem;
    color: var(--ink); line-height: 1.2;
  }
  .card__hook { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; flex: 1; }
  .card__n {
    font-family: var(--display); font-weight: 600;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); font-variant-numeric: tabular-nums;
  }

  /* ---------- controls ---------- */
  .controls {
    position: sticky; top: 0; z-index: 5;
    margin-top: 2.5rem; padding: 0.85rem 0;
    background: var(--ground);
    border-bottom: 3px solid var(--edge);
  }
  .controls .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

  .search { flex: 1 1 14rem; position: relative; display: flex; align-items: center; }
  .search input {
    width: 100%; font: inherit; font-size: 0.94rem;
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    color: var(--ink); background: var(--raised);
    border: 3px solid var(--edge); border-radius: 10px;
  }
  .search input::placeholder { color: var(--ink-faint); }
  .search button {
    position: absolute; right: 0.45rem; border: 0; background: none;
    color: var(--ink-faint); cursor: pointer; font-size: 1.2rem;
    line-height: 1; padding: 0.2rem 0.3rem; border-radius: 4px; display: none;
  }
  .search button:hover { color: var(--ink); }
  .search.has-value button { display: block; }

  .filters { display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .pill {
    font-family: var(--display); font-size: 0.85rem; font-weight: 500;
    padding: 0.45rem 0.9rem; cursor: pointer;
    color: var(--ink); background: var(--raised);
    border: 3px solid var(--edge); border-radius: 999px;
    box-shadow: 0 3px 0 var(--bevel);
    transition: transform 0.1s, box-shadow 0.1s, background 0.1s, color 0.1s;
  }
  .pill:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--bevel); }
  .pill[aria-pressed="true"] {
    background: var(--accent); color: var(--on-accent);
    transform: translateY(2px); box-shadow: 0 1px 0 var(--bevel);
  }

  .count {
    width: 100%; font-size: 0.82rem; color: var(--ink-faint);
    font-variant-numeric: tabular-nums; margin: 0;
  }
  .count b { font-family: var(--display); color: var(--ink-soft); font-weight: 600; }

  /* ---------- sections ---------- */
  .stream { padding: 2rem 0 5rem; }

  details.sec {
    background: var(--raised);
    border: 3px solid var(--edge); border-radius: 12px;
    box-shadow: 0 5px 0 var(--bevel);
    margin-bottom: 0.9rem;
    scroll-margin-top: 5.5rem;
  }

  details.sec > summary {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.9rem 1.15rem; cursor: pointer; list-style: none;
    border-radius: 9px;
  }
  details.sec > summary::-webkit-details-marker { display: none; }
  details.sec > summary::after {
    content: ""; flex: none; margin-left: 0.15rem;
    width: 0.55rem; height: 0.55rem;
    border-right: 3px solid var(--ink-faint);
    border-bottom: 3px solid var(--ink-faint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s;
  }
  details.sec[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  details.sec > summary:hover .sec__name { color: var(--accent); }

  .sec__name {
    font-family: var(--display); font-weight: 600; font-size: 1.08rem;
    line-height: 1.25; flex: 1; min-width: 0; transition: color 0.12s;
  }
  .sec__n {
    flex: none; font-size: 0.78rem; color: var(--ink-faint);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .sec__n b { font-family: var(--display); color: var(--ink-soft); font-weight: 600; }

  .chip {
    flex: none; font-family: var(--display);
    font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--on-accent-soft); background: var(--accent-soft);
    border: 2px solid var(--edge); border-radius: 999px;
    padding: 0.1rem 0.5rem; white-space: nowrap;
  }

  .sec__body { padding: 0 1.15rem 1.15rem; }
  .sec__body > .lede {
    margin: 0 0 0.9rem; color: var(--ink-soft);
    max-width: 62ch; text-wrap: pretty;
  }

  ul.changes { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
  ul.changes > li {
    position: relative; padding-left: 1.2rem; margin-bottom: 0.5rem;
    text-wrap: pretty;
  }
  /* A chunky chip rather than a dot, cut on the diagonal like a felled log end. */
  ul.changes > li::before {
    content: ""; position: absolute; left: 0; top: 0.55em;
    width: 8px; height: 8px; background: var(--accent-soft);
    border: 2px solid var(--edge); border-radius: 2px;
  }
  ul.nested {
    list-style: none; margin: 0.55rem 0 0.3rem; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.25rem 1rem;
  }
  ul.nested li {
    font-size: 0.9rem; color: var(--ink-soft); margin: 0;
    font-variant-numeric: tabular-nums; padding-left: 0.85rem; position: relative;
  }
  ul.nested li::before {
    content: ""; position: absolute; left: 0; top: 0.6em;
    width: 5px; height: 5px; background: var(--ink-faint); border-radius: 1px;
  }

  .kids { margin-top: 1.15rem; display: grid; gap: 0.6rem; }
  details.sec--sub {
    background: var(--surface);
    border-width: 2px; border-radius: 9px;
    box-shadow: 0 3px 0 var(--bevel);
  }
  details.sec--sub > summary { padding: 0.7rem 0.95rem; }
  details.sec--sub .sec__name { font-size: 0.96rem; }
  details.sec--sub .sec__body { padding: 0 0.95rem 0.95rem; }

  mark {
    background: var(--accent-soft); color: var(--on-accent-soft);
    border-radius: 3px; padding: 0 0.15em; font-weight: 500;
  }

  .empty { display: none; padding: 2.5rem 0; color: var(--ink-soft); text-align: center; }
  .empty b { font-family: var(--display); color: var(--ink); }

  [hidden] { display: none !important; }

  .foot {
    border-top: 3px solid var(--rule); padding-top: 1.25rem;
    color: var(--ink-faint); font-size: 0.86rem; max-width: 62ch;
  }

  @media (max-width: 560px) {
    .brand { gap: 0.85rem; }
    .brand__icon { width: 3.4rem; height: 3.4rem; }
    .filters { width: 100%; }
    .pill { flex: 1 1 auto; text-align: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    .card:hover, .pill:hover { transform: none; }
  }

  /* ---------- home page ---------- */
  /* Everything above this point is shared with the patch notes page. These rules only ever
     apply on the home page, so they are additive: no shared selector is redefined here. */

  .masthead--home .wrap { padding-top: 3rem; padding-bottom: 2rem; }

  .tagline {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.5rem, 4.5vw, 2.15rem);
    line-height: 1.15; color: var(--ink);
    margin: 0 0 0.85rem; max-width: 20ch;
    text-wrap: balance;
  }

  .cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
  .btn {
    font-family: var(--display); font-weight: 600; font-size: 0.98rem;
    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.6rem 1.15rem;
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .btn:hover, .btn:focus-visible {
    transform: translateY(2px); box-shadow: 0 2px 0 var(--bevel);
  }
  .btn--go { background: var(--accent); color: var(--on-accent); }

  .band { padding-top: 2.75rem; }
  .band > h2 {
    font-family: var(--display); font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 1rem;
  }

  /* ---------- the loop ---------- */
  .phases {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
  .phase {
    padding: 1.2rem 1.25rem 1.15rem;
    background: var(--raised);
    border: 3px solid var(--edge); border-radius: 12px;
    box-shadow: 0 5px 0 var(--bevel);
  }
  .phase__tag {
    display: inline-block; font-family: var(--display);
    font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--on-accent-soft); background: var(--accent-soft);
    border-radius: 999px; padding: 0.1rem 0.6rem; margin-bottom: 0.6rem;
  }
  .phase h3 {
    font-family: var(--display); font-weight: 600; font-size: 1.2rem;
    color: var(--ink); margin: 0 0 0.4rem; line-height: 1.2;
  }
  .phase p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

  /* ---------- who makes it ---------- */
  .maker {
    display: grid; gap: 1.4rem;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    align-items: start;
  }
  .maker__portrait {
    border: 3px solid var(--edge); border-radius: 14px;
    box-shadow: 0 5px 0 var(--bevel);
    overflow: hidden; background: var(--raised);
    aspect-ratio: 1;
  }
  .maker__portrait img {
    width: 100%; height: 100%; display: block; object-fit: cover;
  }
  .maker__text p { margin: 0 0 0.8rem; color: var(--ink-soft); max-width: 60ch; }
  .maker__text p:last-child { margin-bottom: 0; }
  .maker__text b { color: var(--ink); font-family: var(--display); font-weight: 600; }

  /* The portrait stops being a sidebar and becomes a header once there is no room beside the
     text; capped so it does not blow up to full width on a phone. */
  @media (max-width: 34rem) {
    .maker { grid-template-columns: minmax(0, 1fr); }
    .maker__portrait { max-width: 11rem; }
  }

  /* ---------- by the numbers ---------- */
  .figures {
    display: grid; gap: 0.75rem; margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }
  .figure {
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 3px solid var(--edge); border-radius: 10px;
    box-shadow: 0 4px 0 var(--bevel);
  }
  .figure dt {
    font-family: var(--display); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 0.15rem;
  }
  .figure dd {
    margin: 0; font-family: var(--display); font-weight: 600;
    font-size: 1.32rem; line-height: 1.15; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .figure__plus { color: var(--accent); }
  .figures__note {
    margin: 0.9rem 0 0; color: var(--ink-soft);
    font-size: 0.92rem; max-width: 60ch;
  }

  /* ---------- footer ---------- */
  .foot {
    margin-top: 3.5rem;
    border-top: 3px solid var(--edge);
    background: var(--surface);
  }
  .foot .wrap { padding-top: 1.4rem; padding-bottom: 2rem; }
  .foot p {
    margin: 0 0 0.3rem; color: var(--ink-soft); font-size: 0.9rem;
  }

  /* ---------- back link on the patch notes page ---------- */
  /* Site build only. The artifact is a single page with nowhere to go back to. */
  .backlink { border-bottom: 3px solid var(--rule); background: var(--surface); }
  .backlink .wrap { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .backlink a {
    font-family: var(--display); font-weight: 600; font-size: 0.85rem;
    text-decoration: none; color: var(--ink-soft);
  }
  .backlink a:hover { color: var(--accent); }