/* Takoma: the red field and the white "1" stay; a whole set of eight seals stands on it; head gaskets on Takoma green below. */
.tko { position: relative; overflow: clip; background: #FF030D; --slant: 6.25vw; }
.tko-stage { position: relative; width: min(100%, 1800px); margin: 0 auto; aspect-ratio: 1440 / 860; clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.tko-one { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.tko-one-m { display: none; }

/* the name: top of the white area, the rule is one bar */
.tko-name { position: absolute; left: 42.5%; top: 21.8%; width: 27%; }
.tko-h { margin: 0; line-height: 0; font-size: 0; }
.tko-lockup { display: block; width: 100%; height: auto; }

/* eight seals: the rear-focused photograph under, the front-focused one fading in over it, so the focus travels and nothing dips */
.tko-set { position: absolute; left: 3.8%; top: 33%; width: 63.5%; margin: 0; aspect-ratio: 1900 / 1060; }
.tko-layer { position: absolute; inset: 0; display: block; }
.tko-layer img { display: block; width: 100%; height: 100%; }
.tko-front { opacity: var(--focus, 1); }
.tko-set { transform: scale(calc(1.035 - .035 * var(--focus, 1))); transform-origin: 60% 90%; will-change: transform; }

/* head gaskets, on Takoma green: rises on the site's shared slope */
.tko-bandwrap { background: #FF030D; }
.tko-band { position: relative; background: #00A008; clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); min-height: calc(47vw); color: #fff; overflow: clip; }
.tko-band::before { content: ""; position: absolute; inset: 0; height: calc(var(--slant) + 7px); background: #fff; clip-path: polygon(0 var(--slant), 100% 0, 100% 7px, 0 calc(var(--slant) + 7px)); z-index: 3; }
.tko-band-in { position: relative; z-index: 2; width: min(100%, 1800px); margin: 0 auto; padding: calc(var(--slant) + 3.4vw) 0 3.6vw 6.1%; box-sizing: border-box; }
.tko-band-h { margin: 0; font: 600 clamp(52px, 7.6vw, 130px)/.92 var(--display); letter-spacing: -.008em; text-transform: uppercase; color: #fff; }
.tko-whole { display: block; width: 60.5%; margin: 1.2vw 0 3.2vw -.6%; }
.tko-whole img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .9vw 1.1vw rgba(0, 46, 6, .42)); }
.tko-macro { position: absolute; right: 0; bottom: 0; width: 32.5%; height: 92%; margin: 0; z-index: 1; border-top-left-radius: 62% 40%; overflow: hidden; box-shadow: 0 0 0 7px #fff; }
.tko-macro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* the composition fits the window below the header: the stage is full width and as tall as it may be, and the name and the seals sit on the same box the "1" mark is fitted to */
@media (min-width: 761px) {
  .tko-stage { width: 100%; aspect-ratio: auto; height: min(calc(min(100vw, 1800px) * 860 / 1440), var(--fit)); container-type: size;
    --kw: min(100cqw, calc(100cqh * 1440 / 860)); --kh: calc(var(--kw) * 860 / 1440); --kx: calc(50cqw - var(--kw) / 2); --ky: calc(50cqh - var(--kh) / 2); }
  .tko-name { left: calc(var(--kx) + var(--kw) * .425); top: calc(var(--ky) + var(--kh) * .218); width: calc(var(--kw) * .27); }
  .tko-set { left: calc(var(--kx) + var(--kw) * .038); top: calc(var(--ky) + var(--kh) * .33); width: calc(var(--kw) * .635); }
}

/* the chequers appear cell by cell, once */
.tko-armed .tko-cell { opacity: 0; }
.tko-armed.tko-in .tko-cell { opacity: 1; transition: opacity .18s linear; transition-delay: calc(var(--i) * 28ms); }
@media (prefers-reduced-motion: reduce) { .tko-armed .tko-cell { opacity: 1 !important; transition: none !important; } }

@media (max-width: 760px) {
  .tko-stage { width: 100%; aspect-ratio: 390 / 1000; clip-path: none; }
  .tko-one-d { display: none; }
  .tko-one-m { display: block; }
  .tko-name { left: 18.5%; top: 28.2%; width: 69%; }
  .tko-set { left: -17%; top: 49.5%; width: 134%; }
  .tko-band { min-height: 0; }
  .tko-band-in { padding: calc(var(--slant) + 34px) 16px 0; }
  .tko-band-h { font-size: clamp(52px, 15vw, 72px); }
  .tko-whole { width: 100%; margin: 14px 0 26px; }
  .tko-whole img { filter: drop-shadow(0 6px 8px rgba(0, 46, 6, .4)); }
  .tko-macro { position: relative; width: 86%; height: auto; aspect-ratio: 1 / .78; margin-left: auto; border-top-left-radius: 56% 44%; }
}