/* =========================================================================
   Bart Niedbalski — Selected Design Works
   Desktop layout is built on the 1600px Figma frame: 1 design px = var(--u).
   ========================================================================= */

@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Semibold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-font.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-ExtraBold.otf") format("opentype"); font-weight: 800; font-display: swap; }

:root {
  --u: calc(min(100vw, 1920px) / 1600);

  --red: #f82900;
  --black: #000;
  --panel: #0f0f0f;
  --orange: #f84600;
  --orange-tile: #ff5900;
  --navy: #090657;
  --strobe: #ff4c00;
  --white: #fff;
  --dim: #cac7c7;

  --display: "Clash Display", "Arial Black", sans-serif;
  --body: "Gilroy", "Helvetica Neue", Arial, sans-serif;

  --wrap: calc(var(--u) * 1231);
  --radius-section: calc(var(--u) * 80);
  --radius-card: calc(var(--u) * 40);
  --gap: calc(var(--u) * 32);
}

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

html { background: var(--black); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--red); color: var(--black); }

.page { position: relative; }
.wrap { width: var(--wrap); margin-inline: auto; }
.mask { display: block; overflow: hidden; }
.mask > span { display: block; }

/* Split-text helpers (created by main.js) */
.char { display: inline-block; will-change: transform; }
.word { display: inline-block; white-space: nowrap; }
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-mask > .line { display: block; }

/* ============================ SECTIONS ================================= */

.panel {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--radius-section) * -1);
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  overflow: hidden;
}
.panel--black  { background: var(--black); }
.panel--orange { background: var(--orange); }
.panel--navy   { background: var(--navy); }

.section-inner { position: relative; will-change: transform; }

.shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* ============================== HERO =================================== */

.hero {
  position: relative;
  /* Hero unit: the 1600px design fitted to the window width AND height, so the whole
     composition (arrow included) is visible on load, with a sliver of the next panel. */
  --uh: min(var(--u), calc(100vh / 1118));
  --uh: min(var(--u), calc(100svh / 1118));
  height: calc(var(--uh) * 1094 + var(--radius-section));
  background: var(--red);
  color: var(--black);
  overflow: hidden;
  isolation: isolate;
}
.hero__inner { position: absolute; inset: 0; }
.hero__stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--uh) * 1600);
  margin-left: calc(var(--uh) * -800);
}

.hero__dots { position: absolute; inset: 0; }
.hero__dot {
  position: absolute;
  width: calc(var(--uh) * 10);
  height: calc(var(--uh) * 10);
  margin: calc(var(--uh) * -5) 0 0 calc(var(--uh) * -5);
  border-radius: 50%;
  background: var(--black);
  /* design grid: 216.33px pitch; columns beyond 0-6 fill wide screens */
  left: calc(var(--uh) * (172.5 + var(--c) * 216.33));
  top: calc(var(--uh) * (138 + var(--r) * 216.33));
}

/* Floating crystals (Blender renders) sit above the dots and below the type */
.hero__crystals { position: absolute; inset: 0; pointer-events: none; }
.crystal { position: absolute; display: block; will-change: transform; }
.crystal img { display: block; width: 100%; height: auto; will-change: transform; }
.crystal--big   { left: calc(var(--uh) * 332.7); top: calc(var(--uh) * 138.7); width: calc(var(--uh) * 407.7); }
.crystal--small { left: calc(var(--uh) * 975.7); top: calc(var(--uh) * 755.7); width: calc(var(--uh) * 259.6); }

.hero__name,
.hero__services {
  position: absolute;
  font-family: var(--display);
  font-weight: 700;
  font-size: max(calc(var(--uh) * 23), 12px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}
.hero__name { left: calc(var(--uh) * 72); top: calc(var(--uh) * 182); }
.hero__services { left: calc(var(--uh) * 1268); top: calc(var(--uh) * 192); }

.hero__title { font: inherit; }
.hero__line,
.hero__year {
  position: absolute;
  display: block;
  clip-path: inset(0 -100vw); /* masks vertically only, so lines can drift sideways */
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--uh) * 180);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.hero__line-inner { display: block; }
.hero__line--1 { left: calc(var(--uh) * 66);  top: calc(var(--uh) * 363); }
.hero__line--2 { right: calc(var(--uh) * 104); top: calc(var(--uh) * 506); }
.hero__line--3 { left: calc(var(--uh) * 454); top: calc(var(--uh) * 651); }
.hero__year    { right: calc(var(--uh) * 104); top: calc(var(--uh) * 827); }

.hero__scroll {
  position: absolute;
  left: calc(var(--uh) * 747);
  top: calc(var(--uh) * 936);
  width: calc(var(--uh) * 106);
  height: calc(var(--uh) * 106);
  color: var(--black);
}
.hero__scroll svg { width: 100%; height: 100%; }

/* ============================== WORKS ================================== */

.works { padding-bottom: calc(var(--u) * 237); }

.works__title {
  padding-top: calc(var(--u) * 71);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--u) * 36);
  line-height: 1;
  color: var(--red);
}

.icon { fill: currentColor; overflow: visible; }

.intro {
  display: flex;
  margin-top: calc(var(--u) * 126);
}
.intro__icons {
  display: flex;
  gap: calc(var(--u) * 57);
  padding-left: calc(var(--u) * 8);
  color: var(--red);
}
.intro__icons .icon {
  width: calc(var(--u) * 94);
  height: calc(var(--u) * 94);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.intro__icons .icon:hover { transform: rotate(90deg); }

.intro__text {
  margin-left: auto;
  width: calc(var(--u) * 693);
  padding-top: calc(var(--u) * 4);
  font-size: max(calc(var(--u) * 21), 15px);
  line-height: 1.238;
  color: var(--dim);
}
.intro__text p + p { margin-top: 1.238em; }

/* SHOTT_ random-cut panel */
.shott {
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--u) * 87);
  aspect-ratio: 1231 / 692;
  border-radius: calc(var(--u) * 44);
  background: var(--panel);
}
.shott__stage { position: absolute; inset: 0; }
.shott__stage > img,
.shott__stage > .shott__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shott__video { background: #f84600; display: grid; place-items: center; overflow: hidden; }
.shott__video video { height: 113.1%; width: auto; max-width: none; }
.shott__video--full { background: #000; }
.shott__video--full video { width: 100%; height: 100%; object-fit: cover; }
.shott__label {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(var(--u) * 32);
  letter-spacing: 0.04em;
  color: var(--white);
  transition: opacity 0.4s;
}
.shott__label i { font-style: normal; animation: blink 1s steps(1) infinite; }
.shott.is-playing .shott__label { opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }

/* Experience */
.jobs {
  display: grid;
  grid-template-columns: calc(var(--u) * 310) calc(var(--u) * 299) calc(var(--u) * 339) 1fr;
  margin-top: calc(var(--u) * 181);
  padding-left: calc(var(--u) * 28);
}
.job__years {
  display: inline-block;
  padding: 0 calc(var(--u) * 8);
  border-radius: 999px;
  background: var(--red);
  color: var(--black);
  font-family: var(--display);
  font-weight: 700;
  font-size: max(calc(var(--u) * 15.5), 11px);
  line-height: calc(var(--u) * 30);
  letter-spacing: 0.01em;
}
.job__role {
  margin-top: calc(var(--u) * 20);
  font-family: var(--display);
  font-weight: 700;
  font-size: max(calc(var(--u) * 24), 15px);
  line-height: 0.96;
  text-transform: uppercase;
}
.job__company {
  margin-top: calc(var(--u) * 14);
  font-family: var(--body);
  font-weight: 700;
  font-size: max(calc(var(--u) * 15), 11px);
  line-height: 1;
  text-transform: uppercase;
}

/* Pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 252));
  justify-content: center;
  margin-top: calc(var(--u) * 210);
}
.pillar { display: flex; flex-direction: column; align-items: center; }
.pillar__icon { display: block; color: var(--red); }
.pillar__icon .icon { width: calc(var(--u) * 157); height: calc(var(--u) * 157); }
.pillar__label {
  margin-top: calc(var(--u) * 50);
  font-family: var(--display);
  font-weight: 700;
  font-size: max(calc(var(--u) * 24), 14px);
  line-height: 1;
}

/* Marquee */
.marquee {
  margin-top: calc(var(--u) * 181);
  height: calc(var(--u) * 60);
  background: var(--red);
  color: var(--black);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.marquee__track { display: flex; white-space: nowrap; will-change: transform; }
.marquee__item {
  font-family: var(--display);
  font-weight: 700;
  font-size: max(calc(var(--u) * 24), 14px);
  line-height: 1;
  padding-right: 0.3em;
}

/* ============================ PROJECTS ================================= */

.project__title {
  padding-top: calc(var(--u) * 165);
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: max(calc(var(--u) * 32), 20px);
  line-height: 1;
}

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.04);
  isolation: isolate;
}
.media > img,
.media > video {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
.media--contain > img,
.media--contain > video,
.media--page > img { top: 0; height: 100%; }
.media--flat { border-radius: 0; background: none; }

/* Starchild */
#starchild { padding-bottom: calc(var(--u) * 358); }
.starchild__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 28) calc(var(--u) * 31);
  margin-top: calc(var(--u) * 92);
}
.media--tile { aspect-ratio: 1; background: var(--orange-tile); }

.starchild__cube {
  width: calc(var(--u) * 702);
  aspect-ratio: 1;
  margin: calc(var(--u) * 53) auto 0;
}
.starchild__cube video { width: 100%; height: 100%; object-fit: cover; }

/* About blocks */
.about {
  display: grid;
  grid-template-columns: calc(var(--u) * 647) calc(var(--u) * 470);
  padding-left: calc(var(--u) * 50);
  margin-top: calc(var(--u) * 49);
}
.about__head {
  font-family: var(--display);
  font-weight: 600;
  font-size: max(calc(var(--u) * 20), 15px);
  line-height: 1;
}
.about__body {
  max-width: calc(var(--u) * 430);
  margin-top: calc(var(--u) * 20);
  font-size: max(calc(var(--u) * 16), 14px);
  line-height: 1.5;
  opacity: 0.9;
}
.about__col:last-child .about__body { max-width: calc(var(--u) * 460); }

/* Mesha */
#mesha { padding-bottom: calc(var(--u) * 239); }
.mesha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: calc(var(--u) * 99);
}
.mesha__hero   { width: 100%; aspect-ratio: 1231 / 584; }
.mesha__laptop { width: calc((100% - var(--gap)) * 0.6034); aspect-ratio: 721 / 405; }
.mesha__poster { width: calc((100% - var(--gap)) * 0.3966); aspect-ratio: 474 / 405; }
.mesha__split  { width: calc((100% - var(--gap)) * 0.4);    aspect-ratio: 480 / 537; background: #c7ff4f; }
.mesha__mobile { width: calc((100% - var(--gap)) * 0.6);    aspect-ratio: 720 / 537; }
.mesha__site   { width: 100%; aspect-ratio: 1231 / 734; }
.mesha__cards  { width: calc((100% - var(--gap)) * 0.6294); aspect-ratio: 754 / 424; }
.mesha__coin   { width: calc((100% - var(--gap)) * 0.3706); aspect-ratio: 444 / 424; }
.mesha__stage  { width: calc(var(--u) * 968); aspect-ratio: 1936 / 900; margin: calc(var(--u) * 43) auto 0; }
.mesha + .about { margin-top: calc(var(--u) * 93); }

/* Injective */
#injective { padding-bottom: calc(var(--u) * 234); }
.injective {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 40);
  margin-top: calc(var(--u) * 95);
}
.injective__hero,
.injective__wide { width: 100%; aspect-ratio: 1231 / 692; background: #000; }
.injective__arc  { width: calc((100% - var(--u) * 40) * 0.5084); aspect-ratio: 603 / 327; background: #000; }
.injective__logo { width: calc((100% - var(--u) * 40) * 0.4916); aspect-ratio: 592 / 332; background: #000; }
.injective + .about { margin-top: calc(var(--u) * 100); }

/* Strobe */
#strobe { padding-bottom: calc(var(--u) * 203); }
.strobe {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 40);
  margin-top: calc(var(--u) * 105);
}
.media--page { aspect-ratio: 1231 / 769; background: none; }
.media--page > img { object-fit: contain; }
.strobe__reel { aspect-ratio: 1231 / 692; background: #0c0b14; }
.strobe + .about { margin-top: calc(var(--u) * 118); }

/* Strobe keyword pile (rebuilt from the Figma frame so the pills can drop) */
.pile {
  position: relative;
  aspect-ratio: 1231 / 550.3;
  border-radius: var(--radius-card);
  background: var(--strobe);
  overflow: hidden;
}
.pile > img {
  position: absolute;
  left: calc(var(--x) / 1231 * 100%);
  top: calc(var(--y) / 550.3 * 100%);
  width: calc(var(--w) / 1231 * 100%);
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pile__pill { cursor: grab; transition: filter 0.3s; }

/* Shared helpers for the newer sections */
.media--clear { background: none; }
.media--small { border-radius: calc(var(--u) * 13); }
.cutout { position: relative; }
.cutout > img { width: 100%; height: auto; will-change: transform; }

/* WOO */
#woo { padding-bottom: calc(var(--u) * 374); }
.woo__laptop { width: calc(var(--u) * 1247); margin: calc(var(--u) * 162) auto 0; }
.woo__pages  { width: calc(var(--u) * 1237.5); margin: calc(var(--u) * 152) auto 0; }
.woo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 29);
  margin-top: calc(var(--u) * 143);
}
.woo__banner { aspect-ratio: 1194 / 672; border-radius: calc(var(--u) * 26); }
.woo__stats  { grid-column: 1 / -1; aspect-ratio: 2460 / 1384; border-radius: calc(var(--u) * 26); }
.woo__future {
  position: relative;
  width: calc(var(--u) * 729);
  aspect-ratio: 729 / 586;
  margin: calc(var(--u) * 161) auto 0;
}
.woo__render {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(586.5 / 729 * 100%);
  height: auto;
  margin-left: calc(586.5 / 729 * -50%);
  will-change: transform;
}
.woo__headline {
  position: absolute;
  left: 50%;
  top: calc(182 / 586 * 100%);
  width: calc(723 / 729 * 100%);
  margin-left: calc(723 / 729 * -50%);
  overflow: hidden;
}
.woo__headline img { width: 100%; height: auto; }
.woo + .about { margin-top: calc(var(--u) * 70); }

/* Dango Exchange */
.panel--dango { background: #302723; }
#dango { padding-bottom: calc(var(--u) * 266); }
.dango {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 104);
}
.dango__hero { aspect-ratio: 2460 / 1538; border-radius: calc(var(--u) * 30); }
.dango__cards {
  display: grid;
  grid-template-columns: 649fr 551fr;
  gap: calc(var(--u) * 31) calc(var(--u) * 30);
}
.dango__deposits { grid-row: span 2; aspect-ratio: 1; border-radius: calc(var(--u) * 30); }
.dango__sprints,
.dango__pizza { aspect-ratio: 1102 / 618; border-radius: calc(var(--u) * 30); }
.dango__testnet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 34.5);
}
.dango__testnet .media { aspect-ratio: 1; }
.dango__gang { aspect-ratio: 2452 / 1379; border-radius: calc(var(--u) * 28); }

.dango__stickers {
  position: relative;
  aspect-ratio: 1226 / 566;
  margin-top: calc(var(--u) * 136);
}
.sticker {
  position: absolute;
  left: calc(var(--x) / 1226 * 100%);
  top: calc(var(--y) / 566 * 100%);
  width: calc(var(--w) / 1226 * 100%);
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.dango__covers {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--u) * 586));
  justify-content: center;
  gap: calc(var(--u) * 44) calc(var(--u) * 43);
  margin-top: calc(var(--u) * 136);
}
.dango__covers .media { aspect-ratio: 1172 / 391; }

/* Meme lines: full-bleed rows that drift in opposite directions */
.memes {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 157);
}
.memes__track {
  display: flex;
  gap: calc(var(--u) * 26);
  width: max-content;
  will-change: transform;
}
.memes__track img {
  flex: none;
  width: auto;
  height: calc(var(--u) * 284);
  max-width: none;
  border-radius: calc(var(--u) * 12);
  user-select: none;
  -webkit-user-drag: none;
}
.memes + .about { margin-top: calc(var(--u) * 135); }

/* Community tweets, laid out as in Figma */
.tweets {
  position: relative;
  width: calc(var(--u) * 1268);
  height: calc(var(--u) * 385);
  margin: calc(var(--u) * 174) auto 0;
}
.tweet {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  border-radius: calc(var(--u) * 7);
}
.tweet--round { border-radius: calc(var(--u) * 12); }

/* ====================== INITIAL STATES (JS ON) ========================= */

.js .hero__line-inner:not(.is-split),
.js [data-reveal="chars"]:not(.is-split),
.js [data-reveal="lines"]:not(.is-split) { visibility: hidden; }
.js .hero__dot { transform: scale(0); }
.js .hero__line-inner .char { transform: translateY(105%); }
.js [data-hero="side"] .mask > span { transform: translateY(110%); }
.js .hero__scroll { opacity: 0; }
.js .crystal img { opacity: 0; }
.js [data-reveal="up"] { opacity: 0; transform: translateY(40px); }
.js [data-reveal="chars"] .char { transform: translateY(110%); }
.js [data-reveal="chars"] .word { overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js [data-reveal="lines"] .line { transform: translateY(105%); }
.js .intro__icons .icon,
.js .pillar__icon { transform: scale(0) rotate(-120deg); }
.js .sticker { transform: scale(0); }
.js .tweet { opacity: 0; }

/* ============================ RESPONSIVE =============================== */

@media (max-width: 1100px) {
  .intro { align-items: flex-start; gap: 32px; }
  .intro__text { width: auto; flex: 1; }
}

@media (max-width: 760px) {
  :root {
    --wrap: calc(100% - 32px);
    --radius-section: 28px;
    --radius-card: 16px;
    --gap: 10px;
  }

  /* Hero fills the phone screen; positions switch to proportional values */
  .hero { height: max(100vh, 620px); height: max(100svh, 620px); } /* vh fallback for iOS before 15.4 */
  .hero__stage { left: 0; width: 100%; margin-left: 0; }
  .hero__dot {
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    left: calc((172.5 + var(--c) * 216.33) / 1600 * 100%);
    top: calc((138 + var(--r) * 216.33) / 1174 * 100%);
  }
  .hero__dot.is-extra { display: none; }
  .hero__name,
  .hero__services { top: 24px; font-size: 12px; }
  .hero__name { left: 16px; }
  .hero__services { left: auto; right: 16px; text-align: right; }
  .hero__line,
  .hero__year { font-size: 16.4vw; }
  .hero__line--1 { left: 14px; top: 34%; }
  .hero__line--2 { right: 14px; top: calc(34% + 13.2vw); }
  .hero__line--3 { left: 14px; top: calc(34% + 26.4vw); }
  .hero__year { right: 14px; top: calc(34% + 46vw); }
  .hero__scroll { left: 50%; top: auto; bottom: 44px; width: 64px; height: 64px; margin-left: -32px; }
  .crystal--big   { left: 6%; top: calc(34% - 33vw); width: 40vw; }
  .crystal--small { left: 38%; top: calc(34% + 38vw); width: 27vw; }

  .works { padding-bottom: 96px; }
  .works__title { padding-top: 40px; font-size: 26px; }
  .intro { flex-direction: column; gap: 28px; margin-top: 48px; }
  .intro__icons { gap: 16px; padding-left: 0; }
  .intro__icons .icon { width: 52px; height: 52px; }
  .intro__text { width: auto; padding-top: 0; font-size: 17px; line-height: 1.4; }
  .intro__text p + p { margin-top: 1em; }
  .br-desk { display: none; }

  .shott { margin-top: 40px; border-radius: var(--radius-card); }
  .shott__label { font-size: 18px; }

  .jobs { grid-template-columns: 1fr 1fr; gap: 40px 16px; margin-top: 64px; padding-left: 0; }
  .job__years { padding: 0 8px; font-size: 12px; line-height: 24px; }
  .job__role { margin-top: 14px; font-size: 17px; line-height: 1; }
  .job__company { margin-top: 10px; font-size: 12px; }

  .pillars { grid-template-columns: repeat(3, 1fr); width: var(--wrap); margin: 80px auto 0; }
  .pillar__icon .icon { width: 64px; height: 64px; }
  .pillar__label { margin-top: 18px; font-size: 13px; }

  .marquee { margin-top: 80px; height: 40px; }
  .marquee__item { font-size: 16px; }

  .project__title { padding-top: 64px; font-size: 22px; }
  #starchild, #mesha, #injective { padding-bottom: 104px; }
  #strobe, #woo { padding-bottom: 104px; }
  #dango { padding-bottom: 72px; }

  .starchild__grid { gap: 10px; margin-top: 36px; }
  .starchild__cube { width: 92%; margin-top: 12px; }

  .mesha, .injective, .strobe { gap: var(--gap); margin-top: 36px; }
  .mesha__laptop, .mesha__poster, .mesha__split, .mesha__mobile,
  .mesha__cards, .mesha__coin, .injective__arc, .injective__logo { width: 100%; }
  .mesha__stage { width: 100%; margin-top: 8px; }

  .about { grid-template-columns: 1fr; gap: 36px; padding-left: 0; margin-top: 48px; }
  .mesha + .about, .injective + .about, .strobe + .about { margin-top: 56px; }
  .about__head { font-size: 16px; }
  .about__body,
  .about__col:last-child .about__body { max-width: none; margin-top: 14px; font-size: 15px; }

  .woo__laptop, .woo__pages { width: calc(100% - 16px); margin-top: 36px; }
  .woo__grid { grid-template-columns: 1fr; gap: var(--gap); width: var(--wrap); margin-top: 36px; }
  .woo__future { width: calc(100% - 32px); margin-top: 48px; }
  .woo + .about { margin-top: 32px; }

  .dango { gap: var(--gap); margin-top: 36px; }
  .dango__cards, .dango__testnet { grid-template-columns: 1fr; gap: var(--gap); }
  .dango__deposits { grid-row: auto; }
  .dango__stickers { margin-top: 56px; }
  .dango__covers { grid-template-columns: 1fr; gap: var(--gap); margin-top: 56px; }
  .memes { gap: 8px; margin-top: 64px; }
  .memes__track { gap: 8px; }
  .memes__track img { height: 132px; border-radius: 8px; }
  .memes + .about { margin-top: 56px; }
  .tweets { display: flex; flex-direction: column; gap: 8px; width: var(--wrap); height: auto; margin-top: 48px; }
  .tweet { position: static; width: 100%; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .shott__label i { animation: none; }
  .intro__icons .icon { transition: none; }
}