/* =========================================================
   AM SOUND — amsound.co
   Every size is written in design pixels and multiplied by --u.
   Desktop design: 1920 wide (1 design px = 1px from 1600px up, scaled below).
   Mobile design: 390 wide (scaled up to a cap on larger phones / small tablets).
   ========================================================= */

@font-face {
  font-family: "AMSOUND";
  src: url("../fonts/helvetica-neue-condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AMSOUND";
  src: url("../fonts/sharp-grotesk-black.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --u: 1px;
  --as: 53px; /* arrow size */
  --bg: #222222;
  --white: #ffffff;
  --black: #000000;
  --accent: #ee451c;
  --tile: rgba(255, 255, 255, 0.05);
}
/* Same steps as the Tilda version: each range is the 1920 layout scaled down */
@media (max-width: 1727px) { :root { --u: 0.8263px; --as: 47px; } }
@media (max-width: 1439px) { :root { --u: 0.6788px; --as: 41px; } }
@media (max-width: 1199px) { :root { --u: 0.4942px; --as: 29px; } }
@media (max-width: 739px)  { :root { --u: min(1px, calc(100vw / 390)); } }

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

/* white underneath, so the page fades in from white like on Tilda */
html { -webkit-text-size-adjust: 100%; background: #ffffff; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: "AMSOUND", Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: page-in 4s ease-in-out 0.2s both;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

h1, h2, h3, p { margin: 0; font-weight: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.display {
  font-weight: 500;
  font-size: calc(320 * var(--u));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.grain { mix-blend-mode: overlay; }


.br-m { display: none; }
@media (max-width: 739px) {
  .br-m { display: inline; }
  .br-d { display: none; }
}

/* ---------- Arrows ---------- */
.arrow {
  position: absolute;
  width: var(--as);
  height: var(--as);
  background: center / contain no-repeat;
}
.arrow--black { background-image: url("../img/arrow-black.svg"); }  /* points ↖ */
.arrow--white { background-image: url("../img/arrow-white.svg"); }  /* points ↘ */

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: calc(800 * var(--u));
  overflow: hidden;
  color: var(--black);
}
.hero__bg { position: absolute; inset: 0; background: url("../img/hero-blur.webp") center / cover no-repeat; }

/* live grain: an oversized noise layer jumps to a new offset ~6 times a second */
.hero__grain {
  position: absolute;
  inset: -10%;
  background: url("../img/grain.webp") center / cover no-repeat;
  animation: grain 1s steps(1) infinite;
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-5%, 3%); }
  25%  { transform: translate(4%, -6%); }
  37%  { transform: translate(-7%, -2%); }
  50%  { transform: translate(6%, 5%); }
  62%  { transform: translate(-3%, 7%); }
  75%  { transform: translate(7%, -4%); }
  87%  { transform: translate(-6%, -7%); }
  100% { transform: translate(2%, 4%); }
}

.hero { --inset: 32px; }
.hero .arrow--tl { top: var(--inset); left: var(--inset); }
.hero .arrow--tr { top: var(--inset); right: var(--inset); transform: rotate(90deg); }
.hero .arrow--br { bottom: var(--inset); right: var(--inset); transform: rotate(180deg); }
.hero .arrow--bl { bottom: var(--inset); left: var(--inset); transform: rotate(270deg); }
@media (max-width: 1199px) { .hero { --inset: 28px; } }

.hero__name {
  position: absolute;
  top: calc(20 * var(--u));
  width: calc(749 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1;
  text-align: center;
}
.hero__name--left { left: calc(85 * var(--u)); }
.hero__name--right { right: calc(85 * var(--u)); }

.hero__bar {
  position: absolute;
  top: calc(33 * var(--u));
  left: 50%;
  width: calc(260 * var(--u));
  height: calc(15 * var(--u));
  background: var(--black);
  transform: translateX(-50%);
}

.hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  font-size: calc(500 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.hero__tagline {
  position: absolute;
  bottom: calc(20 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(40 * var(--u));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   INTRO (team + manifesto + "Our portfolio")
   ========================================================= */
.intro {
  position: relative;
  padding: calc(300 * var(--u)) 0 calc(289 * var(--u));
}
.intro::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(2300 * var(--u));
  background: url("../img/intro-bg.png") center bottom / cover no-repeat;
  pointer-events: none;
}
.intro > * { position: relative; }

.intro__photos {
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--u));
}
.intro__photos img {
  width: calc(536 * var(--u));
  height: calc(680 * var(--u));
  object-fit: cover;
}

.intro__text {
  width: calc(1370 * var(--u));
  margin: calc(280 * var(--u)) auto 0;
  font-size: calc(56 * var(--u));
  line-height: calc(64 * var(--u));
  text-indent: calc(141 * var(--u));
}

.intro__para { display: block; margin-top: calc(64 * var(--u)); } /* one empty line between paragraphs */ /* “From crafting…” starts a new indented paragraph */

.intro__heading { margin-top: calc(374 * var(--u)); }

/* =========================================================
   PORTFOLIO
   ========================================================= */
.portfolio { padding-bottom: calc(169 * var(--u)); }

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(1370 * var(--u));
  margin: 0 auto;
  padding: calc(150 * var(--u)) calc(139 * var(--u)) calc(135 * var(--u));
  background: var(--tile);
}

.panel__lead {
  font-size: calc(56 * var(--u));
  line-height: calc(64 * var(--u));
}

.panel__video {
  position: relative;
  margin-top: calc(150 * var(--u));
  aspect-ratio: 1092 / 614;
  background: var(--black);
}
.panel__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.label {
  position: relative;
  margin-top: calc(150 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1;
}
.label--second { margin-top: calc(148 * var(--u)); }
/* the words are dimmed, the small arrow (mobile only) is not */
.label { color: rgba(255, 255, 255, 0.3); }
.arrow--label { display: none; }
.label--showreel { display: none; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, calc(536 * var(--u)));
  column-gap: calc(20 * var(--u));
  row-gap: calc(19 * var(--u));
  margin-top: calc(40 * var(--u));
}

.card { display: block; }
.card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.card__caption {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  height: calc(96 * var(--u));
  padding: 0 calc(20 * var(--u));
  background: var(--tile);
}
.card__play {
  flex: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  background: var(--black) url("../img/play.svg") center / calc(24 * var(--u)) no-repeat;
  transition: background-color 0.2s ease-in-out;
}
.card:hover .card__play,
.card:focus-visible .card__play { background-color: var(--accent); }
.card__title {
  font-size: calc(24 * var(--u));
  line-height: 1;
}

/* Arrows aiming at the panel corners (sizes/offsets per breakpoint, as on Tilda) */
.panel {
  --tl-x: 52px; --tl-y: 102px;
  --tr-x: 72px; --tr-y: 122px;
  --bl-x: 72px; --bl-y: 89px;
  --br-x: 52px; --br-y: 69px;
}
.panel-arrow { width: var(--as); height: var(--as); }
.panel-arrow--tl { right: calc(100% + var(--tl-x)); bottom: calc(100% + var(--tl-y)); }
.panel-arrow--tr { left: calc(100% + var(--tr-x)); bottom: calc(100% + var(--tr-y)); transform: rotate(90deg); }
.panel-arrow--bl { right: calc(100% + var(--bl-x)); top: calc(100% + var(--bl-y)); transform: rotate(270deg); }
.panel-arrow--br { left: calc(100% + var(--br-x)); top: calc(100% + var(--br-y)); transform: rotate(180deg); }
@media (max-width: 1727px) {
  .panel { --tl-x: 43px; --tl-y: 43px; --tr-x: 61px; --tr-y: 63px; --bl-x: 63px; --bl-y: 62px; --br-x: 41px; --br-y: 43px; }
}
@media (max-width: 1439px) {
  .panel { --tl-x: 35px; --tl-y: 34px; --tr-x: 53px; --tr-y: 54px; --bl-x: 55px; --bl-y: 54px; --br-x: 33px; --br-y: 34px; }
}
@media (max-width: 1199px) {
  .panel { --tl-x: 12px; --tl-y: 10px; --tr-x: 7px; --tr-y: 10px; --bl-x: 12px; --bl-y: 9px; --br-x: 7px; --br-y: 9px; }
}

/* =========================================================
   AWARDS + CONTACT share one gradient background
   ========================================================= */
.lower {
  position: relative;
  overflow: hidden;
  --contact-h: max(100vh, calc(800 * var(--u)));
}
.lower__gradient {
  position: absolute;
  left: 0;
  right: 0;
  /* image starts 2300 design px above the contact section and is 3400 tall */
  bottom: min(0px, calc(var(--contact-h) - 1100 * var(--u))); /* never leave a gap at the very bottom */
  height: calc(3400 * var(--u));
  background: url("../img/gradient-bg.png") center / 100% 100% no-repeat; /* stretched, never cropped: a crop showed a hard edge */
}

/* ---------- Awards ---------- */
.awards {
  position: relative;
  /* bottom gap to the orange tile ≈ the gap between other blocks (289 design px),
     minus the tile's own inset inside the contact section */
  padding: calc(255 * var(--u)) 0 calc(289 * var(--u) - var(--contact-h) * 0.045);
}
.awards::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(1755 * var(--u));
  background: linear-gradient(0turn, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 1) 65%);
}
.awards > * { position: relative; }

.awards__grid {
  display: grid;
  grid-template-columns: repeat(3, calc(443 * var(--u)));
  gap: calc(20 * var(--u));
  justify-content: center;
  margin-top: calc(236 * var(--u));
}

.award {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(452 * var(--u)); /* grows if a caption wraps to more lines */
  padding: calc(60 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u));
  background: var(--tile);
  text-align: center;
}
.award__badge {
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  object-fit: contain;
}
.award--grammy .award__badge {
  width: calc(148 * var(--u));
  height: calc(160 * var(--u));
  margin-top: calc(-10 * var(--u));
}
.award__title {
  margin-top: calc(40 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1;
}
.award__artist {
  margin-top: calc(10 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1;
}
.award__note {
  max-width: calc(263 * var(--u));
  margin-top: calc(40 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1;
  opacity: 0.3;
}
.award--grammy .award__note { max-width: calc(353 * var(--u)); }
.award--gold .award__note { max-width: calc(230 * var(--u)); }

/* ---------- Contact ---------- */
.contact {
  position: relative;
  height: var(--contact-h);
  text-align: center;
}

.contact__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 91%;
  transform: translate(-50%, -50%);
}
.contact__frame { overflow: hidden; }
.contact__bg { position: absolute; inset: 0; background: url("../img/contact-bg.webp") center / cover no-repeat; }
/* static orange grain — it is what tints the photo orange */
.contact__grain { position: absolute; inset: 0; background: url("../img/contact-grain.webp") center / cover no-repeat; }


.arrow--in-tl { top: 9%; left: 4%; }
.arrow--in-tr { top: 9%; right: 4%; transform: rotate(90deg); }
.arrow--in-br { bottom: 9%; right: 4%; transform: rotate(180deg); }
.arrow--in-bl { bottom: 9%; left: 4%; transform: rotate(270deg); }

.contact__label {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  font-size: calc(40 * var(--u));
  line-height: 1;
}

.contact__email {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  font-size: calc(280 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.contact__copy {
  position: absolute;
  top: calc(50% + 35 * var(--u));
  left: calc(50% + 372 * var(--u));
  transform: translate(-50%, -50%);
  min-width: calc(74 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--black);
  font-size: calc(14 * var(--u));
  line-height: 1.55;
}
.contact__copy::before { /* little tooltip tail */
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 12 * var(--u));
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--black);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: -1;
}
.contact__copy-text { position: relative; }

.contact__text {
  position: absolute;
  bottom: 19%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(1073 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1;
}

/* 740–1199: small captions stay readable (as on Tilda) */
@media (max-width: 1199px) {
  .label, .card__title, .award__artist, .award__note { font-size: 14px; }
  .award__note, .award--gold .award__note, .award--grammy .award__note { max-width: 180px; }
}

/* =========================================================
   MOBILE (design width 390)
   ========================================================= */
@media (max-width: 739px) {
  .display { font-size: calc(100 * var(--u)); }

  /* hero */
  .hero { min-height: calc(600 * var(--u)); }
  .hero .arrow { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .hero .arrow--tl { top: calc(8 * var(--u)); left: calc(8 * var(--u)); }
  .hero .arrow--tr { top: calc(8 * var(--u)); right: calc(8 * var(--u)); }
  .hero .arrow--br { bottom: calc(8 * var(--u)); right: calc(8 * var(--u)); }
  .hero .arrow--bl { bottom: calc(8 * var(--u)); left: calc(8 * var(--u)); }
  .hero__name {
    left: 50%;
    right: auto;
    width: calc(243 * var(--u));
    transform: translateX(-50%);
    font-size: calc(18 * var(--u));
    line-height: calc(21 * var(--u));
  }
  .hero__name--left { top: calc(6 * var(--u)); }
  .hero__name--right { top: calc(27 * var(--u)); }
  .hero__bar { display: none; }
  .hero__title { font-size: calc(160 * var(--u)); }
  .hero__tagline {
    bottom: calc(6 * var(--u));
    width: calc(164 * var(--u));
    white-space: normal;
    font-size: calc(18 * var(--u));
    line-height: 1.15;
  }

  /* intro */
  .intro { padding: calc(120 * var(--u)) 0 calc(82 * var(--u)); }
  .intro::before { height: calc(1000 * var(--u)); }
  .intro__photos { flex-direction: column; align-items: center; gap: calc(12 * var(--u)); }
  .intro__photos img { width: calc(272 * var(--u)); height: calc(343 * var(--u)); }
  .intro__text {
    width: calc(364 * var(--u));
    margin-top: calc(100 * var(--u));
    font-size: calc(25 * var(--u));
    line-height: calc(29 * var(--u));
    text-indent: calc(46 * var(--u));
  }
  .intro__para { margin-top: calc(29 * var(--u)); }
  .intro__heading { margin-top: calc(232 * var(--u)); }
  .panel-arrow { display: none; }

  /* portfolio — mobile layout from the Figma mockup (FINAL_390):
     no panel box, full-width video and cards, small arrow labels */
  .portfolio { padding-bottom: calc(10 * var(--u)); }
  .panel {
    width: calc(366 * var(--u));
    padding: calc(19 * var(--u)) 0 0;
    background: none;
  }
  .panel__lead {
    padding: 0 calc(2 * var(--u));
    font-size: calc(26 * var(--u));
    line-height: calc(30 * var(--u));
    text-indent: calc(46 * var(--u)); /* same first-line indent as the intro text */
  }
  .label {
    margin-top: calc(76 * var(--u));
    padding-left: calc(30 * var(--u));
    font-size: calc(14 * var(--u));
  }
  .label--showreel { display: block; }
  .arrow--label {
    display: block;
    left: 0;
    top: calc(-2 * var(--u));
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    transform: none;
  }
  .panel__video { margin-top: calc(16 * var(--u)); }
  .cards {
    grid-template-columns: 1fr;
    row-gap: calc(12 * var(--u));
    margin-top: calc(16 * var(--u));
  }
  .card { background: var(--tile); }
  .card__caption { height: calc(60 * var(--u)); padding: 0 calc(12 * var(--u)); gap: calc(16 * var(--u)); background: none; }
  .card__play { width: calc(36 * var(--u)); height: calc(36 * var(--u)); background-size: calc(16 * var(--u)); }
  .card__title { font-size: calc(14 * var(--u)); }

  /* awards */
  .lower { --contact-h: max(100vh, calc(600 * var(--u))); }
  .lower__gradient {
    left: 50%;
    right: auto;
    width: calc(740 * var(--u));
    transform: translateX(-50%);
    bottom: min(0px, calc(var(--contact-h) - 800 * var(--u)));
    height: calc(1900 * var(--u));
  }
  .awards { padding: calc(231 * var(--u)) 0 calc(241 * var(--u) - var(--contact-h) * 0.02); }
  .awards::before { height: calc(1549 * var(--u)); }
  .awards__grid {
    grid-template-columns: repeat(2, calc(177 * var(--u)));
    column-gap: calc(10 * var(--u));
    row-gap: calc(12 * var(--u));
    margin-top: calc(80 * var(--u));
  }
  /* mobile order: Donda, Praise God, Off the grid, Hurricane, … */
  .award { order: 3; min-height: calc(252 * var(--u)); padding: calc(32 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)); }
  .award:nth-child(-n+2) { order: 1; }
  .award--m2 { order: 2; }
  .award__badge { width: calc(80 * var(--u)); height: calc(80 * var(--u)); }
  .award--grammy .award__badge { width: calc(80 * var(--u)); height: calc(90 * var(--u)); }
  .award__title { margin-top: calc(24 * var(--u)); font-size: calc(19 * var(--u)); }
  .award__artist { margin-top: calc(5 * var(--u)); font-size: calc(14 * var(--u)); }
  .award__note { max-width: calc(150 * var(--u)); margin-top: calc(34 * var(--u)); font-size: calc(14 * var(--u)); }
  .award--grammy .award__note { max-width: calc(153 * var(--u)); margin-top: calc(20 * var(--u)); }
  .award--gold .award__note { max-width: calc(126 * var(--u)); }

  /* contact */
  .contact__frame { width: 94%; height: 96%; }
  .contact .arrow { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .arrow--in-tl { top: 4%; left: 6%; }
  .arrow--in-tr { top: 4%; right: 6%; }
  .arrow--in-br { bottom: 4%; right: 6%; }
  .arrow--in-bl { bottom: 4%; left: 6%; }
  .contact__label { top: 23%; font-size: calc(14 * var(--u)); }
  .contact__email { top: calc(50% + 5 * var(--u)); font-size: calc(80 * var(--u)); }
  .contact__copy {
    top: 50%;
    left: calc(50% + 106 * var(--u));
    min-width: calc(60 * var(--u));
    height: calc(32 * var(--u));
    font-size: calc(12 * var(--u));
  }
  .contact__copy::before { top: calc(50% + 10 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .contact__text {
    bottom: 20%;
    width: calc(254 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.15;
  }
  .contact__text br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .hero__grain { animation: none; }
}