/* ================================================================
     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.
     ================================================================ */
  /* 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;
  }

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

  /* ---------- back link (site build only) ---------- */
  .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); }