@layer tokens, layout, components, responsive;

@layer tokens {
  :root,
  [data-theme='light'] {
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
    --text-hero: clamp(3.5rem, 1.2rem + 6.8vw, 7.5rem);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --color-bg: #f5e7c4;
    --color-surface: #fff3d5;
    --color-surface-2: #e8d3a5;
    --color-text: #17120d;
    --color-muted: #6b5941;
    --color-ink: #17120d;
    --color-cream: #fff3d5;
    --color-red: #bd161e;
    --color-red-dark: #8e0f16;
    --color-yellow: #ffc928;
    --color-green: #2f7d3a;
    --color-border: color-mix(in oklab, var(--color-ink) 18%, transparent);
    --font-display: 'Clash Display', 'Arial Black', sans-serif;
    --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-card: 0 2px 0 #17120d, 0 10px 24px color-mix(in oklab, #5f2b08 18%, transparent);
    --content-narrow: 640px;
    --content-default: 960px;
    --content-wide: 1240px;
  }

  [data-theme='dark'] {
    --color-bg: #17120d;
    --color-surface: #241c13;
    --color-surface-2: #352719;
    --color-text: #f6e5bd;
    --color-muted: #bca67c;
    --color-ink: #100d0a;
    --color-cream: #fff3d5;
    --color-red: #e82a32;
    --color-red-dark: #b9161f;
    --color-yellow: #ffc928;
    --color-green: #77b95d;
    --color-border: color-mix(in oklab, var(--color-cream) 18%, transparent);
    --shadow-card: 0 2px 0 #050403, 0 12px 28px rgb(0 0 0 / 35%);
  }
}

@layer layout {
  section,
  footer {
    padding-inline: max(var(--space-5), calc((100vw - var(--content-wide)) / 2));
  }

  .site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 76px;
    padding-inline: max(var(--space-5), calc((100vw - var(--content-wide)) / 2));
    color: var(--color-ink);
    background: color-mix(in oklab, var(--color-yellow) 94%, transparent);
    border-bottom: 2px solid var(--color-ink);
    backdrop-filter: blur(12px);
  }

  .hero {
    position: relative;
    display: grid;
    min-height: calc(100svh - 112px);
    padding: 0;
    overflow: clip;
    color: var(--color-cream);
    background: var(--color-ink);
  }

  .hero__art,
  .hero__art::after {
    position: absolute;
    inset: 0;
  }

  .hero__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__art::after {
    content: '';
    background: linear-gradient(90deg, rgb(20 12 4 / 90%) 0%, rgb(20 12 4 / 62%) 42%, rgb(20 12 4 / 8%) 72%);
  }

  .hero__copy {
    position: relative;
    z-index: 1;
    align-self: center;
    width: min(680px, 92vw);
    padding: var(--space-20) max(var(--space-5), calc((100vw - var(--content-wide)) / 2));
  }

  .story {
    padding-block: clamp(var(--space-20), 9vw, var(--space-32));
  }

  .chapter {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: clamp(var(--space-8), 5vw, var(--space-20));
    align-items: center;
    margin-block: clamp(var(--space-20), 11vw, calc(var(--space-32) * 1.5));
  }

  .chapter--reverse figure {
    order: 2;
  }

  .token {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
    gap: clamp(var(--space-12), 7vw, var(--space-24));
    align-items: center;
    padding-block: clamp(var(--space-20), 9vw, var(--space-32));
    color: var(--color-cream);
    background: var(--color-red);
  }

  .buy {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--space-10), 7vw, var(--space-24));
    padding-block: clamp(var(--space-20), 9vw, var(--space-32));
  }

  .contract {
    grid-column: 1 / -1;
  }

  .roadmap {
    padding-block: clamp(var(--space-20), 9vw, var(--space-32));
    color: var(--color-cream);
    background: var(--color-ink);
  }

  .career {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--space-16);
  }

  .final-cta {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(var(--space-8), 7vw, var(--space-24));
    align-items: center;
    padding-block: clamp(var(--space-16), 8vw, var(--space-24));
    color: var(--color-cream);
    background: var(--color-red);
  }
}

@layer components {
  body::before {
    position: fixed;
    z-index: 1000;
    inset: 0;
    pointer-events: none;
    content: '';
    opacity: 0.09;
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  .ticker {
    overflow: hidden;
    color: var(--color-cream);
    background: var(--color-red);
    border-bottom: 2px solid var(--color-ink);
  }

  .ticker__track {
    display: flex;
    width: max-content;
    padding-block: var(--space-2);
    animation: ticker 28s linear infinite;
    font-size: var(--text-xs);
    font-weight: 900;
    letter-spacing: 0.09em;
  }

  .ticker__track span::after {
    padding-inline: var(--space-6);
    color: var(--color-yellow);
    content: '◆';
  }

  @keyframes ticker {
    to { transform: translateX(-50%); }
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: fit-content;
    color: inherit;
    text-decoration: none;
  }

  .brand__mark {
    width: 42px;
    color: var(--color-red);
  }

  .brand span {
    display: grid;
    line-height: 1;
  }

  .brand strong {
    font-family: var(--font-display);
    font-size: var(--text-lg);
  }

  .brand small {
    font-size: var(--text-xs);
    font-weight: 700;
  }

  nav {
    display: flex;
    gap: var(--space-8);
  }

  nav a {
    padding-block: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
  }

  nav a:hover {
    color: var(--color-red);
  }

  .header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
  }

  .icon-button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 2px solid currentColor;
  }

  .icon-button:hover {
    color: var(--color-cream);
    background: var(--color-ink);
  }

  .icon-button svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .icon-sun,
  [data-theme='dark'] .icon-moon {
    display: none;
  }

  [data-theme='dark'] .icon-sun {
    display: block;
  }

  .button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    color: var(--color-ink);
    background: var(--color-yellow);
    border: 2px solid var(--color-ink);
    box-shadow: 4px 4px 0 var(--color-red);
    font-size: var(--text-sm);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-red);
  }

  .button:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--color-red);
  }

  .button--small {
    min-height: 44px;
    padding-inline: var(--space-4);
  }

  .button--cream {
    background: var(--color-cream);
  }

  .eyebrow {
    font-size: var(--text-xs);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
  }

  .hero h1 {
    max-width: 9ch;
    margin-block: var(--space-5) var(--space-6);
    font-size: var(--text-hero);
    letter-spacing: -0.055em;
    text-transform: uppercase;
  }

  .hero h1 span {
    color: var(--color-yellow);
  }

  .hero__lede {
    max-width: 52ch;
    color: color-mix(in oklab, var(--color-cream) 83%, transparent);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
    margin-top: var(--space-8);
  }

  .text-button {
    min-height: 44px;
    padding: var(--space-2);
    color: var(--color-cream);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  .text-button:hover {
    color: var(--color-yellow);
  }

  .shift-card {
    display: grid;
    width: fit-content;
    margin-top: var(--space-12);
    padding: var(--space-4) var(--space-5);
    color: var(--color-ink);
    background: color-mix(in oklab, var(--color-cream) 93%, transparent);
    border: 1px solid var(--color-ink);
    box-shadow: var(--shadow-card);
    transform: rotate(-1.5deg);
  }

  .shift-card span,
  .shift-card small {
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .shift-card strong {
    color: var(--color-red);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .manifesto {
    padding-block: clamp(var(--space-12), 7vw, var(--space-24));
    color: var(--color-ink);
    background: var(--color-yellow);
    text-align: center;
  }

  .manifesto p {
    max-width: none;
    margin-bottom: var(--space-2);
    font-weight: 700;
  }

  .manifesto h2 {
    font-size: var(--text-3xl, var(--text-2xl));
    letter-spacing: -0.04em;
    text-transform: uppercase;
  }

  .manifesto h2 span {
    color: var(--color-red);
  }

  .section-heading {
    max-width: var(--content-default);
  }

  .section-heading h2,
  .token h2,
  .buy h2,
  .final-cta h2 {
    margin-block: var(--space-3);
    font-size: var(--text-2xl);
    letter-spacing: -0.035em;
    text-transform: uppercase;
  }

  .section-heading > p:last-child {
    color: var(--color-muted);
  }

  .chapter figure {
    background: var(--color-ink);
    border: 2px solid var(--color-ink);
    box-shadow: var(--shadow-card);
    transform: rotate(-0.6deg);
  }

  .chapter--reverse figure {
    transform: rotate(0.7deg);
  }

  .chapter figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .chapter figcaption {
    padding: var(--space-3) var(--space-4);
    color: var(--color-cream);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .chapter__copy {
    position: relative;
  }

  .chapter__number {
    position: absolute;
    z-index: -1;
    top: calc(var(--space-16) * -1);
    right: 0;
    color: color-mix(in oklab, var(--color-red) 14%, transparent);
    font-family: var(--font-display);
    font-size: calc(var(--text-hero) * 1.2);
    font-weight: 700;
    line-height: 1;
  }

  .chapter h3 {
    margin-block: var(--space-3) var(--space-5);
    font-size: var(--text-xl);
    text-transform: uppercase;
  }

  .chapter__copy > p:not(.eyebrow) {
    color: var(--color-muted);
  }

  blockquote {
    margin-top: var(--space-6);
    color: var(--color-red);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .plain-list {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }

  .plain-list li {
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in oklab, var(--color-cream) 35%, transparent);
  }

  .order-board {
    padding: var(--space-5);
    color: var(--color-yellow);
    background: var(--color-ink);
    border: 3px solid var(--color-yellow);
    box-shadow: 10px 10px 0 var(--color-red-dark);
    font-weight: 700;
  }

  .order-board__head,
  .order-board dl div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .order-board__head {
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-yellow);
    font-size: var(--text-xs);
    letter-spacing: 0.13em;
  }

  .order-board dl div {
    padding-block: var(--space-4);
    border-bottom: 1px dashed color-mix(in oklab, var(--color-yellow) 38%, transparent);
  }

  .order-board dd {
    color: var(--color-cream);
    text-align: right;
  }

  .order-board > p {
    margin-top: var(--space-4);
    color: color-mix(in oklab, var(--color-cream) 70%, transparent);
    font-size: var(--text-xs);
  }

  .buy__copy > p:last-child {
    color: var(--color-muted);
  }

  .steps {
    list-style: none;
  }

  .steps li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .steps li > span {
    color: var(--color-red);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
  }

  .steps strong {
    font-size: var(--text-lg);
  }

  .steps p {
    color: var(--color-muted);
  }

  .contract {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
    color: var(--color-cream);
    background: var(--color-ink);
    border: 2px solid var(--color-ink);
  }

  .contract div {
    display: grid;
    min-width: 0;
  }

  .contract small {
    color: var(--color-yellow);
    font-weight: 900;
  }

  .contract code {
    overflow: hidden;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
  }

  .contract button {
    min-width: 110px;
    min-height: 44px;
    padding-inline: var(--space-4);
    color: var(--color-ink);
    background: var(--color-yellow);
    font-weight: 900;
  }

  .contract button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .section-heading--light > p:last-child {
    color: var(--color-muted);
  }

  .career article {
    min-height: 270px;
    padding: var(--space-6);
    border-top: 1px solid color-mix(in oklab, var(--color-cream) 22%, transparent);
    border-right: 1px solid color-mix(in oklab, var(--color-cream) 22%, transparent);
  }

  .career article:first-child {
    background: var(--color-red);
  }

  .career span {
    color: var(--color-yellow);
    font-size: var(--text-xs);
    font-weight: 900;
    letter-spacing: 0.12em;
  }

  .career h3 {
    margin-block: var(--space-12) var(--space-4);
    font-size: var(--text-lg);
    text-transform: uppercase;
  }

  .career p {
    color: color-mix(in oklab, var(--color-cream) 65%, transparent);
    font-size: var(--text-sm);
  }

  .final-cta img {
    width: min(420px, 100%);
    border: 3px solid var(--color-ink);
    box-shadow: 10px 10px 0 var(--color-yellow);
    transform: rotate(-3deg);
  }

  .final-cta h2 {
    font-size: var(--text-3xl, var(--text-2xl));
  }

  .final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
    margin-top: var(--space-8);
  }

  .text-button--light {
    color: var(--color-cream);
  }

  footer {
    display: grid;
    grid-template-columns: 0.5fr 1.7fr 0.8fr;
    gap: var(--space-8);
    align-items: start;
    padding-block: var(--space-12);
    color: var(--color-cream);
    background: var(--color-ink);
    border-top: 1px solid color-mix(in oklab, var(--color-cream) 15%, transparent);
  }

  .footer-brand {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--text-xl);
  }

  .footer-brand .brand__mark {
    color: var(--color-yellow);
  }

  footer p,
  footer small {
    color: color-mix(in oklab, var(--color-cream) 58%, transparent);
    font-size: var(--text-xs);
  }

  .toast {
    position: fixed;
    z-index: 100;
    right: var(--space-5);
    bottom: var(--space-5);
    max-width: calc(100vw - var(--space-10));
    padding: var(--space-4) var(--space-5);
    color: var(--color-ink);
    background: var(--color-yellow);
    border: 2px solid var(--color-ink);
    box-shadow: 5px 5px 0 var(--color-red);
    font-size: var(--text-sm);
    font-weight: 900;
    transform: translateY(calc(100% + var(--space-12)));
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .toast.is-visible {
    transform: translateY(0);
  }
}

@layer responsive {
  @media (max-width: 900px) {
    .site-header {
      grid-template-columns: 1fr auto;
    }

    nav {
      display: none;
    }

    .chapter,
    .token,
    .buy,
    .final-cta {
      grid-template-columns: 1fr;
    }

    .chapter--reverse figure {
      order: 0;
    }

    .career {
      grid-template-columns: 1fr 1fr;
    }

    footer {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 620px) {
    .brand small,
    .header-actions .button {
      display: none;
    }

    .hero {
      min-height: 820px;
      align-items: end;
    }

    .hero__art::after {
      background: linear-gradient(0deg, rgb(20 12 4 / 97%) 0%, rgb(20 12 4 / 70%) 55%, rgb(20 12 4 / 10%) 88%);
    }

    .hero__art img {
      object-position: 65% center;
    }

    .hero__copy {
      align-self: end;
      width: 100%;
      padding-block: var(--space-24) var(--space-10);
    }

    .hero h1 {
      font-size: clamp(3rem, 16vw, 4.4rem);
    }

    .shift-card {
      width: 100%;
      margin-top: var(--space-8);
    }

    .chapter {
      gap: var(--space-8);
      margin-block: var(--space-20);
    }

    .token,
    .buy,
    .roadmap,
    .final-cta {
      padding-block: var(--space-16);
    }

    .career {
      grid-template-columns: 1fr;
    }

    .career article {
      min-height: auto;
    }

    .career h3 {
      margin-top: var(--space-8);
    }

    .contract {
      align-items: stretch;
      flex-direction: column;
    }

    .final-cta img {
      width: min(320px, 90%);
      margin-inline: auto;
    }
  }
}