@import url('/assets/tokens.css');

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, p { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input { font: inherit; }
}

@layer base {
  body {
    min-height: 100vh;
    color: var(--ink-0);
    background:
      radial-gradient(circle at 12% 5%, rgba(154,79,56,.07), transparent 28rem),
      radial-gradient(circle at 90% 20%, rgba(64,88,71,.08), transparent 30rem),
      linear-gradient(180deg, var(--paper-0), var(--paper-1));
    font-family: var(--font-sans);
    line-height: 1.5;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    opacity: .13;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  }
  a { color: inherit; }
  .shell { position: relative; width: min(var(--content), calc(100% - 2rem)); margin-inline: auto; }
}

@layer components {
  .masthead {
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 10vw, 8.8rem) 0 clamp(3.5rem, 7vw, 6.4rem);
  }
  .masthead::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(48rem, 70vw);
    aspect-ratio: 1.55;
    right: -10rem;
    top: clamp(1rem, 7vw, 5rem);
    opacity: .68;
    transform: rotate(-5deg);
    background: repeating-radial-gradient(ellipse at 54% 52%, transparent 0 13px, var(--sand-line) 14px 15px, transparent 16px 28px);
    -webkit-mask-image: radial-gradient(ellipse, #000 20%, transparent 72%);
    mask-image: radial-gradient(ellipse, #000 20%, transparent 72%);
  }
  .mark {
    position: relative;
    width: 7.8rem;
    height: 4.6rem;
    background: repeating-radial-gradient(ellipse at 52% 78%, transparent 0 7px, rgba(64,88,71,.28) 8px 9px, transparent 10px 16px);
  }
  .mark::before,
  .mark::after,
  .mark span {
    content: "";
    position: absolute;
    display: block;
    background: var(--moss-0);
    box-shadow: inset -.45rem -.35rem 0 rgba(255,255,255,.06);
  }
  .mark::before { width: 2.15rem; height: 1.45rem; left: 2.8rem; bottom: 1.2rem; border-radius: 54% 46% 43% 57% / 64% 56% 44% 36%; transform: rotate(-8deg); }
  .mark::after { width: 1.25rem; height: .92rem; left: 5.05rem; bottom: 1.05rem; border-radius: 61% 39% 55% 45% / 58% 66% 34% 42%; transform: rotate(11deg); background: var(--moss-1); }
  .mark span { width: .88rem; height: .7rem; left: 1.35rem; bottom: 1.02rem; border-radius: 44% 56% 48% 52% / 63% 48% 52% 37%; background: var(--clay-1); }
  .eyebrow {
    margin-top: 1.9rem;
    color: var(--clay-1);
    font-size: .72rem;
    font-weight: 780;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  h1 {
    max-width: 11.5ch;
    margin-top: .72rem;
    font: 500 clamp(3.2rem, 8vw, 7.6rem)/.93 var(--font-serif);
    letter-spacing: -.06em;
  }
  .lede {
    max-width: 40rem;
    margin-top: 1.8rem;
    color: var(--ink-1);
    font-size: clamp(1rem, 2vw, 1.22rem);
  }
  .index-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.2rem 0;
    border-block: 1px solid var(--line);
  }
  .index-head h2 { font: 500 clamp(1.8rem, 4vw, 3rem)/1 var(--font-serif); letter-spacing: -.035em; }
  .count { color: var(--ink-2); font-size: .82rem; letter-spacing: .04em; }
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.2rem; padding: 1.2rem 0 6rem; }
  .artifact {
    grid-column: span 8;
    position: relative;
    overflow: hidden;
    min-height: 25rem;
    padding: clamp(1.5rem, 3vw, 2.35rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-l) var(--radius-l) var(--radius-l) var(--radius-s);
    background: color-mix(in srgb, var(--paper-0) 76%, white);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
  }
  .artifact:nth-child(3n + 2) { grid-column: span 5; margin-top: 4rem; }
  .artifact:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--moss-1) 42%, transparent); background: rgba(255,255,255,.62); }
  .artifact::before {
    content: "";
    position: absolute;
    width: 20rem;
    aspect-ratio: 1.5;
    right: -7rem;
    bottom: -4rem;
    opacity: .46;
    transform: rotate(7deg);
    background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 9px, var(--sand-line) 10px 11px, transparent 12px 20px);
  }
  .artifact::after {
    content: "↗";
    position: absolute;
    right: 1.5rem;
    top: 1.25rem;
    font-size: 1.35rem;
    color: var(--moss-1);
  }
  .artifact-kicker { position: relative; color: var(--clay-1); font-size: .7rem; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
  .artifact h2 { position: relative; max-width: 14ch; margin-top: 1rem; font: 500 clamp(2rem, 4.2vw, 4rem)/.98 var(--font-serif); letter-spacing: -.045em; }
  .artifact p { position: relative; max-width: 36rem; margin-top: 1.25rem; color: var(--ink-1); }
  .tags { position: absolute; z-index: 1; left: 2.35rem; right: 2.35rem; bottom: 2rem; display: flex; flex-wrap: wrap; gap: .45rem; }
  .tag { padding: .38rem .67rem; border-radius: 999px; color: var(--moss-1); background: var(--moss-2); font-size: .71rem; font-weight: 720; }
  .empty { grid-column: 1 / -1; padding: 3rem; color: var(--ink-2); border: 1px dashed var(--line); border-radius: var(--radius-m); }
  footer { padding: 1.25rem 0 3rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .78rem; letter-spacing: .03em; }
}

@media (max-width: 760px) {
  .masthead { padding-top: 3.5rem; }
  .masthead::before { width: 36rem; right: -18rem; top: 6rem; opacity: .55; }
  .grid { display: block; }
  .artifact { display: block; min-height: 22rem; margin-top: 1rem; }
  .artifact:nth-child(3n + 2) { margin-top: 1rem; }
  .tags { left: 1.5rem; right: 1.5rem; bottom: 1.4rem; }
}

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