@layer reset, composition;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    min-height: 100%;
    margin: 0;
  }

  body {
    overflow-x: hidden;
    background: #111111;
  }
}

@layer composition {
  :root {
    color-scheme: light;
    --ink: #111111;
    --paper: #f4f0e8;
    --red: #e3322b;
    --blue: #1647d8;
    --line: rgba(17, 17, 17, 0.18);
  }

  .poster {
    isolation: isolate;
    position: relative;
    display: grid;
    min-height: 100svh;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
  }

  .grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
      linear-gradient(to right, transparent calc(100% - 1px), var(--line) 1px),
      linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) 1px);
    background-size: calc(100% / 12) 100%, 100% calc(100% / 6);
    pointer-events: none;
  }

  .route-label {
    position: absolute;
    z-index: 5;
    top: clamp(1.25rem, 2.2vw, 2rem);
    left: calc(8.3333% + 2rem);
    margin: 0;
    padding: 0.5rem 0.75rem 0.45rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(0.7rem, 0.85vw, 0.82rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .route-nav {
    position: absolute;
    z-index: 6;
    right: clamp(1.25rem, 4.1667vw, 4rem);
    bottom: clamp(1.25rem, 4vw, 3rem);
    display: grid;
    width: clamp(10rem, 16.6667vw, 15rem);
    gap: 0.45rem;
    padding: 0.65rem;
    background: var(--ink);
  }

  .route-nav a {
    display: block;
    padding: 0.62rem 0.7rem 0.55rem;
    border: 1px solid var(--paper);
    color: var(--paper);
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .route-nav a:hover,
  .route-nav a:focus-visible {
    background: var(--paper);
    color: var(--ink);
  }

  .route-nav a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
  }

  .red-field {
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    width: 25%;
    height: 100%;
    background: var(--red);
  }

  .blue-block {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 16.6667%;
    height: 33.3333%;
    background: var(--blue);
  }

  h1 {
    align-self: center;
    width: min-content;
    max-width: 8ch;
    margin: 0 0 0 8.3333%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: clamp(5.5rem, 14vw, 13.5rem);
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -0.085em;
    text-wrap: balance;
  }

  .stamp {
    position: absolute;
    top: clamp(1.5rem, 4vw, 4rem);
    right: clamp(1.5rem, 4.1667vw, 4rem);
    width: clamp(8.5rem, 15vw, 14rem);
    aspect-ratio: 1;
    border: clamp(0.3rem, 0.6vw, 0.55rem) solid var(--ink);
    border-radius: 50%;
    transform: rotate(-8deg);
  }

  .stamp::before,
  .stamp::after,
  .stamp__ring {
    content: "";
    position: absolute;
    border: clamp(0.12rem, 0.25vw, 0.22rem) solid var(--ink);
    border-radius: 50%;
  }

  .stamp::before {
    inset: 8%;
  }

  .stamp::after {
    inset: 26%;
    background: var(--paper);
  }

  .stamp__ring {
    inset: 38%;
    z-index: 1;
    background: var(--red);
  }

  .stamp__bar {
    position: absolute;
    z-index: 2;
    left: -18%;
    width: 136%;
    height: clamp(0.18rem, 0.3vw, 0.3rem);
    background: var(--ink);
  }

  .stamp__bar--one {
    top: 40%;
  }

  .stamp__bar--two {
    top: 49%;
  }

  .stamp__bar--three {
    top: 58%;
  }

  .registration-mark {
    position: absolute;
    width: 1.25rem;
    aspect-ratio: 1;
  }

  .registration-mark::before,
  .registration-mark::after {
    content: "";
    position: absolute;
    background: var(--ink);
  }

  .registration-mark::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .registration-mark::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
  }

  .registration-mark--top {
    top: clamp(1.25rem, 2.2vw, 2rem);
    left: calc(8.3333% - 0.625rem);
  }

  .registration-mark--bottom {
    right: calc(8.3333% - 0.625rem);
    bottom: clamp(1.25rem, 2.2vw, 2rem);
  }

  .corner-fold {
    position: absolute;
    right: 25%;
    bottom: 0;
    width: clamp(2.5rem, 5vw, 5rem);
    aspect-ratio: 1;
    background: var(--ink);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  .poster--grid .red-field {
    top: auto;
    bottom: 0;
    width: 33.3333%;
    height: 50%;
  }

  .poster--grid .blue-block {
    top: 0;
    bottom: auto;
    width: 25%;
    height: 33.3333%;
  }

  .poster--grid h1 {
    align-self: end;
    margin: 0 0 8.3333% 25%;
  }

  .poster--grid .stamp {
    top: auto;
    right: 25%;
    bottom: clamp(1.5rem, 4vw, 4rem);
  }

  .poster--grid .corner-fold {
    right: auto;
    left: 25%;
  }

  .poster--orbit .red-field {
    right: auto;
    left: 0;
    width: 16.6667%;
  }

  .poster--orbit .blue-block {
    right: 0;
    left: auto;
    width: 25%;
    height: 16.6667%;
  }

  .poster--orbit h1 {
    z-index: 3;
    justify-self: center;
    margin: 0;
  }

  .poster--orbit .stamp {
    top: 50%;
    right: auto;
    left: 50%;
    width: clamp(17rem, 35vw, 34rem);
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(7deg);
  }

  .poster--orbit .corner-fold {
    right: 25%;
    background: var(--red);
  }

  .poster--signal .red-field {
    right: auto;
    left: 0;
    width: 100%;
    height: 33.3333%;
  }

  .poster--signal .blue-block {
    right: 0;
    left: auto;
    width: 8.3333%;
    height: 66.6667%;
  }

  .poster--signal h1 {
    align-self: end;
    max-width: none;
    margin: 0 16.6667% 8.3333% 8.3333%;
    font-size: clamp(4.5rem, 11vw, 10.5rem);
    white-space: nowrap;
  }

  .poster--signal .stamp {
    top: clamp(1.5rem, 4vw, 4rem);
    right: 8.3333%;
  }

  .poster--signal .corner-fold {
    right: 8.3333%;
    background: var(--blue);
  }

  .poster--transit .red-field {
    right: auto;
    left: 41.6667%;
    width: 16.6667%;
  }

  .poster--transit .blue-block {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 25%;
    height: 16.6667%;
  }

  .poster--transit h1 {
    z-index: 3;
    align-self: end;
    margin: 0 8.3333% 8.3333%;
    color: var(--ink);
  }

  .poster--transit .stamp {
    top: 8.3333%;
    right: auto;
    left: 8.3333%;
    transform: rotate(12deg);
  }

  .poster--transit .corner-fold {
    right: 41.6667%;
  }

  .poster--archive {
    --line: rgba(244, 240, 232, 0.2);
    background: var(--ink);
    color: var(--paper);
  }

  .poster--archive .red-field {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 16.6667%;
  }

  .poster--archive .blue-block {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 16.6667%;
    height: 50%;
  }

  .poster--archive h1 {
    justify-self: end;
    margin: 0 16.6667% 0 0;
    color: var(--paper);
  }

  .poster--archive .stamp {
    top: auto;
    right: auto;
    bottom: clamp(2rem, 5vw, 4.5rem);
    left: 8.3333%;
    border-color: var(--paper);
    transform: rotate(-14deg);
  }

  .poster--archive .stamp::before,
  .poster--archive .stamp::after,
  .poster--archive .stamp__ring {
    border-color: var(--paper);
  }

  .poster--archive .stamp::after {
    background: var(--ink);
  }

  .poster--archive .stamp__ring {
    background: var(--blue);
  }

  .poster--archive .stamp__bar,
  .poster--archive .registration-mark::before,
  .poster--archive .registration-mark::after {
    background: var(--paper);
  }

  .poster--archive .corner-fold {
    right: 16.6667%;
    background: var(--paper);
  }

  .poster--archive .route-label {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
  }

  @media (max-width: 720px) {
    .grid {
      background-size: 25% 100%, 100% calc(100% / 8);
    }

    .route-label {
      top: 1.25rem;
      left: calc(25% + 1.25rem);
      padding: 0.45rem 0.6rem 0.4rem;
    }

    .route-nav {
      right: 1.25rem;
      bottom: 1.25rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: calc(75% - 2.5rem);
      gap: 0.35rem;
      padding: 0.45rem;
    }

    .route-nav a {
      overflow: hidden;
      padding: 0.5rem 0.45rem 0.45rem;
      font-size: 0.65rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .red-field {
      width: 25%;
      height: 37.5%;
    }

    .blue-block {
      width: 50%;
      height: 12.5%;
    }

    h1 {
      align-self: end;
      width: min-content;
      max-width: 4.5ch;
      margin: 0 1.25rem clamp(7.5rem, 20svh, 11rem);
      font-size: clamp(5.2rem, 27vw, 8.75rem);
      line-height: 0.82;
      letter-spacing: -0.09em;
    }

    .stamp {
      top: clamp(1.5rem, 6vw, 2.25rem);
      right: -2.25rem;
      width: clamp(8.5rem, 42vw, 11.5rem);
    }

    .registration-mark--top {
      left: calc(25% - 0.625rem);
    }

    .registration-mark--bottom {
      right: calc(25% - 0.625rem);
    }

    .corner-fold {
      right: 0;
      width: clamp(3rem, 15vw, 4.5rem);
    }
  }

  @media (max-height: 520px) and (orientation: landscape) {
    h1 {
      align-self: center;
      max-width: none;
      margin: 0 25% 0 8.3333%;
      font-size: clamp(4rem, 13vw, 8rem);
      line-height: 0.84;
    }

    .stamp {
      width: clamp(6rem, 18vh, 8rem);
    }
  }

  @media (max-width: 720px) {
    .poster--grid .red-field {
      width: 50%;
      height: 25%;
    }

    .poster--grid .blue-block {
      width: 50%;
      height: 25%;
    }

    .poster--grid h1 {
      margin: 0 1.25rem clamp(7.5rem, 18svh, 10rem) 25%;
    }

    .poster--grid .stamp {
      right: -2.25rem;
      bottom: 1.5rem;
    }

    .poster--orbit .red-field {
      width: 25%;
      height: 100%;
    }

    .poster--orbit .blue-block {
      width: 50%;
      height: 12.5%;
    }

    .poster--orbit h1 {
      justify-self: start;
      margin: 0 1.25rem clamp(7rem, 18svh, 9rem) 25%;
    }

    .poster--orbit .stamp {
      top: 25%;
      left: 62.5%;
      width: clamp(12rem, 62vw, 17rem);
    }

    .poster--signal .red-field {
      width: 100%;
      height: 25%;
    }

    .poster--signal .blue-block {
      width: 25%;
      height: 50%;
    }

    .poster--signal h1 {
      max-width: 4.5ch;
      margin: 0 25% clamp(6rem, 16svh, 8rem) 1.25rem;
      font-size: clamp(5rem, 26vw, 8.5rem);
      white-space: normal;
    }

    .poster--signal .stamp {
      top: 1.5rem;
      right: -2.25rem;
    }

    .poster--transit .red-field {
      left: 25%;
      width: 25%;
    }

    .poster--transit .blue-block {
      width: 50%;
      height: 12.5%;
    }

    .poster--transit h1 {
      margin: 0 1.25rem clamp(6.5rem, 17svh, 9rem) 25%;
    }

    .poster--transit .stamp {
      top: 12.5%;
      right: -2rem;
      left: auto;
    }

    .poster--archive .red-field {
      width: 75%;
      height: 12.5%;
    }

    .poster--archive .blue-block {
      width: 25%;
      height: 37.5%;
    }

    .poster--archive h1 {
      justify-self: start;
      margin: 0 1.25rem clamp(7.5rem, 20svh, 11rem) 1.25rem;
    }

    .poster--archive .stamp {
      top: 2rem;
      right: -2.25rem;
      bottom: auto;
      left: auto;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --line: rgba(17, 17, 17, 0.35);
    }
  }
}