/* landing.css — seventyseven landing page styles
   Three directions live in this one stylesheet, scoped by .dir-* on each artboard.
   Light theme is the default per the user's white-background request. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  background: #fff;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   MOSAIC ENGINE
   ============================================================ */
.mosaic77 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  background: transparent;
}
.mosaic77-tile {
  position: absolute;
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity .55s cubic-bezier(0.25, 1, 0.5, 1),
              filter .35s cubic-bezier(0.25, 1, 0.5, 1);
  background: #111;
  will-change: transform;
}
.mosaic77-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.mosaic77-tile.is-fading { opacity: 0.05; }
.mosaic77-tile.is-entering {
  opacity: 0;
  animation: mosaic77-tile-enter 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes mosaic77-tile-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Treatments */
.mosaic77.tt-bw .mosaic77-tile.kind-photo img { filter: grayscale(100%) contrast(1.05); }
.mosaic77.tt-color .mosaic77-tile.kind-photo img { filter: saturate(1.05); }
.mosaic77.tt-red .mosaic77-tile.kind-photo img {
  filter: grayscale(100%) sepia(1) hue-rotate(-50deg) saturate(6) brightness(0.7);
}
.mosaic77.tt-mixed .mosaic77-tile:nth-child(3n+1).kind-photo img { filter: grayscale(100%); }
.mosaic77.tt-mixed .mosaic77-tile:nth-child(3n+2).kind-photo img { filter: saturate(1.1); }
.mosaic77.tt-mixed .mosaic77-tile:nth-child(5n+3).kind-photo img {
  filter: grayscale(100%) sepia(1) hue-rotate(-50deg) saturate(5) brightness(0.75);
}

.mosaic77-tile:hover {
  z-index: 10;
  transform: scale(1.4) !important;
  filter: none;
}
.mosaic77-tile:hover img { filter: none !important; }

.mosaic77-guide {
  position: absolute;
  pointer-events: none;
  color: #f10000;
  z-index: 20;
  mix-blend-mode: difference;
}

/* ============================================================
   SHARED LANDING CHROME
   ============================================================ */
.landing {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: #fff;
  color: #000;
}
.landing.is-dark { background: #000; color: #fff; }

.landing-nav {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landing-nav-logo {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.landing-nav-logo .red { color: #f10000; }
.landing-nav-links { display: flex; gap: 28px; }
.landing-nav-links a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}
.landing-nav-links a:hover { color: #f10000; }
.landing-nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #f10000;
}

/* ============================================================
   DIRECTION A — EDITORIAL
   Mosaic-as-hero filling above-the-fold; hard-edged red rule below;
   stacked intro and link grid in the spirit of i-D editorial.
   ============================================================ */
.dir-a .hero {
  position: relative;
  height: 92vh;
  min-height: 700px;
  background: #fff;
  border-bottom: 4px solid #f10000;
  overflow: hidden;
}
.dir-a .hero-mosaic {
  position: absolute;
  inset: 80px 32px 80px 32px;
}
.dir-a .hero-corner {
  position: absolute;
  bottom: 24px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dir-a .hero-corner .meta { display: flex; gap: 24px; }
.dir-a .hero-corner .meta span { opacity: 0.8; }
.dir-a .hero-corner .meta b { font-weight: 500; }

/* Section: intro */
.dir-a .intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding: 96px 32px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.dir-a .intro-label {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.dir-a .intro-body {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  max-width: 880px;
}
.dir-a .intro-body em {
  font-style: normal;
  border-bottom: 2px solid #f10000;
  padding-bottom: 2px;
}
.dir-a .intro-byline {
  margin-top: 32px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Section: links */
.dir-a .links {
  padding: 64px 32px 96px;
}
.dir-a .links-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #000;
  padding-top: 24px;
  margin-bottom: 0;
  font-family: var(--font-text);
}
.dir-a .links-head .title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.dir-a .links-head .count {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.dir-a .link-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 1fr 90px 70px;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  font-family: var(--font-text);
  font-size: 17px;
  text-decoration: none;
  color: inherit;
  transition: padding-left .35s cubic-bezier(0.25, 1, 0.5, 1),
              background-color .35s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}
.dir-a .link-row:hover {
  padding-left: 16px;
  background: rgba(241,0,0,0.04);
}
.dir-a .link-row:hover .link-name { color: #f10000; }
.dir-a .link-row .num {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  opacity: 0.4;
}
.dir-a .link-row .link-name {
  font-weight: 500;
  font-size: 22px;
  transition: color .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.dir-a .link-row .link-desc { opacity: 0.6; font-size: 15px; }
.dir-a .link-row .link-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
}
.dir-a .link-row .link-arrow {
  font-family: var(--font-display);
  font-size: 22px;
  text-align: right;
  opacity: 0.4;
  transition: transform .35s cubic-bezier(0.25, 1, 0.5, 1), opacity .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.dir-a .link-row:hover .link-arrow { transform: translateX(8px); opacity: 1; color: #f10000; }

/* Footer-y signoff */
.dir-a .signoff {
  padding: 96px 32px 64px;
  border-top: 4px solid #f10000;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}
.dir-a .signoff .big {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.85;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.dir-a .signoff .big .red { color: #f10000; }
.dir-a .signoff .meta {
  text-align: right;
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  line-height: 1.6;
}

/* ============================================================
   DIRECTION B — STENCIL
   Giant outlined "77" carved out of a full-canvas mosaic — the negative
   space is the type. Big dramatic hero. Below, a more minimal info plate.
   ============================================================ */
.dir-b .hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  background: #f10000;
  overflow: hidden;
}
.dir-b .hero-mosaic-wrap {
  position: absolute;
  inset: 0;
}
/* The mosaic fills the whole hero; we MASK it to ONLY the 77 silhouette using
   a giant SVG mask via -webkit-mask. */
.dir-b .hero-mosaic {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('#'); /* set inline */
  mask-image: url('#');
}
.dir-b .hero-overlay-text {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 32px 32px;
  z-index: 10;
}
.dir-b .hero-overlay-text .label {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
}
.dir-b .hero-overlay-text .label b { font-weight: 500; }

.dir-b .info {
  background: #fff;
  color: #000;
  padding: 96px 32px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.dir-b .info-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.dir-b .info-headline .red { color: #f10000; }
.dir-b .info-side {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  padding-top: 12px;
}
.dir-b .info-side em {
  font-style: normal;
  border-bottom: 2px solid #f10000;
}

/* Link rail — chips */
.dir-b .rail {
  padding: 64px 32px 96px;
}
.dir-b .rail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
}
.dir-b .rail-head .label {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.dir-b .rail-head .count {
  font-family: var(--font-display);
  font-size: 18px;
  color: #f10000;
}
.dir-b .rail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.dir-b .chip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 28px;
  height: 200px;
  font-family: var(--font-text);
  position: relative;
  overflow: hidden;
  transition: background-color .4s cubic-bezier(0.25, 1, 0.5, 1);
}
.dir-b .chip:hover { background: #f10000; }
.dir-b .chip .top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}
.dir-b .chip .name {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.dir-b .chip .arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 20px;
  transition: transform .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.dir-b .chip:hover .arrow { transform: translateX(6px) translateY(-6px); }

/* ============================================================
   DIRECTION C — MARQUEE
   Mosaic at top in a constrained frame; below it, scrolling marquees of
   links and a typographic "i-D Red"–style densely-packed footer.
   ============================================================ */
.dir-c {
  background: #fff;
  color: #000;
  font-family: var(--font-text);
}
.dir-c .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid #000;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dir-c .topbar-l, .dir-c .topbar-r { display: flex; gap: 24px; align-items: center; }
.dir-c .topbar-mark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.03em;
}
.dir-c .topbar-mark .red { color: #f10000; }

.dir-c .ticker {
  border-bottom: 1px solid #000;
  background: #f10000;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.dir-c .ticker.alt {
  background: #000;
  color: #fff;
  font-size: 22px;
  letter-spacing: 0.1em;
  font-family: var(--font-text);
  text-transform: uppercase;
  font-weight: 500;
}
.dir-c .ticker-track {
  display: inline-block;
  padding: 12px 0;
  animation: tickerScroll 40s linear infinite;
}
.dir-c .ticker.alt .ticker-track { animation-duration: 28s; padding: 14px 0; }
.dir-c .ticker-track span { padding: 0 28px; display: inline-block; }
.dir-c .ticker-track .dot { color: rgba(255,255,255,0.6); }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.dir-c .stage {
  position: relative;
  height: 78vh;
  min-height: 640px;
  border-bottom: 1px solid #000;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.dir-c .stage-mosaic {
  position: absolute;
  inset: 24px 32px;
}
.dir-c .stage-overlay {
  position: absolute;
  bottom: 24px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5;
  pointer-events: none;
}
.dir-c .stage-overlay .l {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.dir-c .stage-overlay .r {
  font-family: var(--font-display);
  font-size: 18px;
  color: #f10000;
}

.dir-c .body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  padding: 64px 32px;
  border-bottom: 1px solid #000;
}
.dir-c .body-intro {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.dir-c .body-intro em {
  font-style: normal;
  border-bottom: 2px solid #f10000;
}
.dir-c .body-aside {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.7;
  padding-top: 12px;
  border-left: 4px solid #f10000;
  padding-left: 18px;
}

.dir-c .index {
  padding: 64px 32px;
}
.dir-c .index-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #000;
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.dir-c .index-head .t {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.9;
  text-transform: uppercase;
}
.dir-c .index-head .t .red { color: #f10000; }
.dir-c .index-head .meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  align-self: flex-end;
}

.dir-c .idx-row {
  display: grid;
  grid-template-columns: 60px 1.4fr 1fr 80px 60px;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  position: relative;
  transition: background .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.dir-c .idx-row:hover { background: #000; color: #fff; padding-left: 16px; padding-right: 16px; }
.dir-c .idx-row:hover .idx-num { color: #f10000; opacity: 1; }
.dir-c .idx-row:hover .idx-tag { color: #f10000; }
.dir-c .idx-row .idx-num {
  font-family: var(--font-display);
  font-size: 22px;
  opacity: 0.4;
}
.dir-c .idx-row .idx-name { font-weight: 500; }
.dir-c .idx-row .idx-desc { opacity: 0.7; font-size: 14px; }
.dir-c .idx-row .idx-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.dir-c .idx-row .idx-arrow { text-align: right; opacity: 0.4; }
.dir-c .idx-row:hover .idx-arrow { opacity: 1; color: #f10000; }

/* DARK theme override */
.landing.is-dark { background: #000; color: #fff; }
.landing.is-dark .dir-a .hero,
.landing.is-dark .dir-a { background: #000; }
.landing.is-dark .dir-a .hero-corner .meta span { opacity: 0.4; }
.landing.is-dark .dir-a .links-head { border-top-color: #fff; }
.landing.is-dark .dir-a .link-row { border-bottom-color: rgba(255,255,255,0.15); }
.landing.is-dark .dir-a .link-row:hover { background: rgba(241,0,0,0.1); }
.landing.is-dark .dir-a .signoff { color: inherit; }
.landing.is-dark .dir-b .info { background: #000; color: #fff; }
.landing.is-dark .dir-b .info-side em { border-bottom-color: #f10000; }
.landing.is-dark .dir-b .rail { background: #000; }
.landing.is-dark .dir-c { background: #000; color: #fff; }
.landing.is-dark .dir-c .topbar,
.landing.is-dark .dir-c .stage,
.landing.is-dark .dir-c .body,
.landing.is-dark .dir-c .index-head { border-color: #fff; }
.landing.is-dark .dir-c .idx-row { border-bottom-color: rgba(255,255,255,0.15); }
.landing.is-dark .dir-c .idx-row:hover { background: #f10000; color: #fff; }
.landing.is-dark .dir-c .idx-row:hover .idx-num,
.landing.is-dark .dir-c .idx-row:hover .idx-tag,
.landing.is-dark .dir-c .idx-row:hover .idx-arrow { color: #fff; }

@media (max-width: 900px) {
  .dir-a .intro { grid-template-columns: 1fr; gap: 24px; padding: 48px 24px; }
  .dir-a .link-row { grid-template-columns: 40px 1fr 60px; }
  .dir-a .link-row .link-desc, .dir-a .link-row .link-tag { display: none; }
  .dir-b .info { grid-template-columns: 1fr; }
  .dir-b .rail-grid { grid-template-columns: 1fr 1fr; }
  .dir-c .body { grid-template-columns: 1fr; }
  .dir-c .idx-row { grid-template-columns: 32px 1fr 50px; }
  .dir-c .idx-row .idx-desc, .dir-c .idx-row .idx-tag { display: none; }
}