/* Sonic_Gio: the five views. Phase 2 shell; Phases 3 to 7 fill each view. */

/* Headings take focus on a view change so assistive tech lands on the new view. They are not
   controls, so they draw no ring; the next Tab lands on a control that does. Same for the
   "Got it." status after the form is sent. */
.view h1[tabindex="-1"]:focus,
.letter__done:focus {
  outline: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Home (Phase 3)                                                      */
/* ------------------------------------------------------------------ */

.home {
  --home-gap: clamp(32px, 5vw, 72px);
  margin-top: auto; /* sits at the bottom; scrolls from the top if it ever overflows */
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 12px var(--home-gap);
  align-items: end;
  padding: 0 var(--pad-x);
  width: 100%;
}

.home__places {
  display: flex;
  flex-direction: column;
  /* "Your place" is 4.41em wide in Anton. The left column is 7/12 of the row; cap the size
     so the widest line never wraps (the token still governs at 1280x800: 120px). */
  font-size: min(var(--fs-places), calc((100vw - 2 * var(--pad-x) - var(--home-gap)) * 7 / 12 / 4.45));
  white-space: nowrap;
  line-height: var(--lh-places);
  color: var(--sand);
  padding-bottom: 22px;
  margin-left: -.03em; /* optical: pulls the Anton side bearing to the padding edge */
}

.home__place {
  display: block;
  /* Anton's content box (ascent + descent) is taller than the 1.03 line box; the caps
     never reach it. Clipping keeps that invisible overflow out of the view's scroll height. */
  overflow: clip;
}

.home__place--you {
  color: var(--orange-text);
}

.home__side {
  display: flex;
  flex-direction: column;
  padding-bottom: 22px;
  min-width: 0;
}

.home__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
  margin-bottom: 14px;
  text-wrap: balance;
}

.home__note {
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.home__cta {
  margin-top: 18px;
  align-self: flex-end; /* the button sits at the right edge of the column */
}

@media (max-width: 760px) {
  .home {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .home__places {
    font-size: min(var(--fs-places), calc((100vw - 2 * var(--pad-x)) / 4.45));
    padding-bottom: 6px;
  }

  .home__side {
    padding-bottom: 14px;
  }

  .home__lead {
    margin-bottom: 8px;
  }

  .home__note {
    padding: 7px 0;
  }

  .home__cta {
    margin-top: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Listen (Phase 4)                                                    */
/* ------------------------------------------------------------------ */

.view--listen {
  overflow: hidden; /* the list scrolls, not the view */
}

.listen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0 var(--pad-x);
}

.listen__head {
  flex: none;
  padding-top: 6px;
}

.listen__title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  overflow: clip;
}

.listen__line {
  font-weight: 500;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  margin: 8px 0 34px;
  text-wrap: balance;
}

.listen__body {
  flex: 1 1 auto;
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(44px, 5vw, 72px);
  gap: clamp(8px, 1.6vw, 20px);
  padding-bottom: 8px;
}

.listen__scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline-offset: 4px;
  /* 6px of inner room on both sides, so the focus rings of the thumbnails (left edge) and of
     the title links (right edge) are not clipped by the overflow; the content stays put */
  padding: 0 6px;
  margin: 0 -6px;
}

.listen__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* The last 56px fade until the end, except at the end or with keyboard focus */
.listen__scroll.is-scrollable:not(.is-at-end):not(:focus-visible) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
}

/* One row: the artwork as a play/pause button, then the title (a link to the Play view),
   the length and how the set moves. The current set gets a warm wash and a progress line. */
.set {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  border-top: 1px solid var(--line);
}

.set:last-child {
  border-bottom: 1px solid var(--line);
}

.set.is-current {
  background: linear-gradient(90deg, rgba(232, 96, 28, .16), rgba(232, 96, 28, 0) 72%);
}

.set__thumb {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 16px 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(244, 234, 220, .08);
  color: var(--cream);
}

.set__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.set__badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 16, 14, .22);
  transition: background-color var(--t-fast) ease;
}

.set__badge::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(18, 16, 14, .66);
  border: 1.5px solid rgba(244, 234, 220, .6);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.set__glyph {
  position: relative;
  width: 16px;
  height: 16px;
}

.set__glyph--play {
  transform: translateX(1px); /* optical centre of the triangle */
}

.set__glyph--pause {
  display: none;
}

.set.is-playing .set__glyph--play {
  display: none;
}

.set.is-playing .set__glyph--pause {
  display: block;
}

.set__thumb:hover .set__badge,
.set__thumb:focus-visible .set__badge {
  background: rgba(18, 16, 14, .08);
}

.set__thumb:hover .set__badge::before,
.set__thumb:focus-visible .set__badge::before,
.set.is-current .set__badge::before {
  background: var(--orange);
  border-color: var(--orange);
}

.set__thumb:hover .set__glyph,
.set__thumb:focus-visible .set__glyph,
.set.is-current .set__glyph {
  color: #12100E;
}

.set__thumb[aria-busy="true"] .set__badge::before {
  animation: busy 1s ease-in-out infinite;
}

.set__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  box-shadow: 0 0 10px var(--glow);
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}

.set.is-current .set__progress {
  opacity: 1;
}

.set__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title minutes"
    "moves moves";
  column-gap: 16px;
  align-items: baseline;
  min-width: 0;
  padding: 14px 0;
  color: var(--cream);
  text-decoration: none;
}

.set__link:hover {
  color: var(--cream);
}

.set__title {
  grid-area: title;
  font-size: var(--fs-set);
  line-height: var(--lh-set);
  transition: color var(--t-fast) ease;
}

.set__link:hover .set__title,
.set__link:focus-visible .set__title {
  color: var(--orange-hover);
}

.set.is-current .set__title {
  color: var(--orange-text);
}

.set__minutes {
  grid-area: minutes;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.set__moves {
  grid-area: moves;
  font-size: 17px;
  line-height: 1.35;
  margin-top: 4px;
}

/* Custom scroll bar */
.rail {
  position: relative;
  min-height: 0;
  user-select: none;
  touch-action: none;
  cursor: pointer;
}

.rail[hidden] {
  display: none;
}

.rail__track {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  width: 2px;
  background: rgba(244, 234, 220, .24);
}

.rail__thumb {
  position: absolute;
  top: 0;
  right: 2px;
  width: 6px;
  height: 56px;
  border-radius: 3px;
  background: var(--orange);
  box-shadow: 0 0 14px var(--glow);
  will-change: transform;
  transition: background-color var(--t-fast) ease;
}

.rail:hover .rail__thumb,
.rail.is-dragging .rail__thumb {
  background: var(--orange-hover);
}

.rail__counter {
  position: absolute;
  top: 0;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  will-change: transform;
  pointer-events: none;
}

.rail__index {
  font-size: 22px;
  line-height: 1;
  color: var(--orange-text);
}

.rail__total {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-top: 3px;
}

@media (max-width: 760px) {
  .listen__line {
    margin-bottom: 22px;
  }

  .set {
    column-gap: 14px;
  }

  .set__thumb {
    width: 56px;
    height: 56px;
    margin: 14px 0;
  }

  .set__badge::before {
    width: 30px;
    height: 30px;
  }

  .set__link {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Small phones: the length goes under the title, and a title word longer than the column
   (TRANSATLANTIC at 320px) may break rather than run under the scroll bar */
@media (max-width: 360px) {
  .set__link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "minutes"
      "moves";
  }

  .set__title {
    overflow-wrap: anywhere;
  }

  .set__minutes {
    margin-top: 2px;
  }
}

/* ------------------------------------------------------------------ */
/* Play (Phase 5)                                                      */
/* ------------------------------------------------------------------ */

.play {
  margin: auto 0; /* centers when short, scrolls from the top when tall */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px var(--pad-x) 24px;
}

.play__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cream);
}

.play__title {
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
}

.play__toggle {
  /* "Pause" is 2.31em wide in Anton; cap the size so it fits the content width on phones */
  font-size: min(var(--fs-play), calc((100vw - 2 * var(--pad-x)) / 2.35));
  line-height: var(--lh-play);
  color: var(--cream);
  text-align: left;
  margin-left: -.03em;
  overflow: clip;
  transition: color var(--t-fast) ease;
}

.play__toggle:hover,
.play__toggle:focus-visible {
  color: var(--orange-hover);
}

.play .wave--big {
  margin-top: 4px;
}

.play__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 17px;
  font-weight: 500;
  min-height: 44px;
}

.play__open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}

.play__open:hover {
  text-decoration-color: currentColor;
}

.play__open--off {
  text-decoration: none;
  color: var(--sand);
}

.play__open[hidden] {
  display: none; /* inline-flex above would otherwise beat the hidden attribute */
}

/* The set's SoundCloud description, word for word, line breaks kept */
.play__desc {
  max-width: var(--measure-body);
  margin-top: 4px;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--sand);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.play__desc[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .play {
    padding-top: 8px;
    gap: 8px;
  }
}

/* ------------------------------------------------------------------ */
/* Mission (Phase 6)                                                   */
/* ------------------------------------------------------------------ */

.view--mission {
  overflow: hidden; /* the chapters scroll, not the view */
}

.mission {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  outline-offset: -3px;
}

.chapter {
  display: grid;
  grid-template-columns: clamp(48px, 8vw, 104px) minmax(0, 1fr);
  gap: 16px;
  padding: clamp(26px, 4.6vw, 56px) var(--pad-x);
  border-top: 1px solid var(--line-soft);
}

.chapter:first-child {
  border-top: 0;
}

.chapter__num {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--orange-text);
  padding-top: .35em;
}

.chapter__text {
  min-width: 0;
}

.chapter__title {
  font-size: var(--fs-chapter);
  line-height: var(--lh-chapter);
  text-wrap: balance;
  margin-bottom: 18px;
  overflow: clip;
}

.chapter__title--first {
  font-size: var(--fs-chapter-1);
}

.chapter__text p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure-body);
}

.chapter__text p + p {
  margin-top: 12px;
}

.chapter__text p.chapter__cta {
  margin-top: 18px;
  max-width: none;
}

.nowrap {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .chapter {
    gap: 12px;
  }

  .chapter__num {
    padding-top: .3em;
  }
}

/* ------------------------------------------------------------------ */
/* Info and the form (Phase 7)                                         */
/* ------------------------------------------------------------------ */

.info {
  margin: auto 0; /* centers when short, scrolls from the top when tall */
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
  padding: 16px var(--pad-x) 24px;
}

.info__title {
  font-size: var(--fs-info-title);
  line-height: var(--lh-info-title);
  text-wrap: balance;
  margin-bottom: 16px;
  overflow: clip;
}

.info__about {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.36;
  margin-bottom: 14px;
  max-width: none; /* uses the whole intro column */
}

/* SoundCloud and Instagram: the logo and the name, side by side, no underline */
.info__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
}

.info__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

.info__link .ico {
  width: 24px;
  height: 24px;
}

.info__link .placeholder-note {
  margin-left: .35em;
}

/* The letter: on a sheet that darkens downwards, so the Info photo shows through its top (behind
   "Dear Gio," and the pills, which carry their own backgrounds) and the small labels lower down
   stay legible. Lightly frosted. */
.letter {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px 26px;
  border: 1px solid rgba(244, 234, 220, .12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 16, 14, .3) 0%, rgba(18, 16, 14, .62) 38%, rgba(18, 16, 14, .76) 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.letter__dear {
  font-size: 24px;
  font-weight: 500;
}

.letter__kind {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.letter__legend {
  font-size: 15px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 8px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(244, 234, 220, .55);
  border-radius: 999px;
  background: rgba(18, 16, 14, .72); /* opaque enough for the label over the Info photo */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pill__dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-sizing: border-box;
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.pill:hover {
  border-color: var(--cream);
}

.pill:has(input:checked),
.pill.is-picked {
  background: var(--orange);
  border-color: var(--orange);
  color: #12100E;
  box-shadow: 0 6px 20px -6px rgba(232, 96, 28, .7);
}

.pill:has(input:checked) .pill__dot,
.pill.is-picked .pill__dot {
  background: #12100E;
  box-shadow: inset 0 0 0 3px var(--orange);
}

.pill:has(input:focus-visible),
.pill.is-focus {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--bg);
}

/* Fields */
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  font-size: 15px;
  font-weight: 700;
  transition: color var(--t-fast) ease;
}

.field:focus-within .field__label {
  color: var(--orange-hover);
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(244, 234, 220, .55);
  border-radius: 10px;
  background: rgba(18, 16, 14, .72);
  color: var(--cream);
  font-size: 17px;
  line-height: 1.3;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.field__input::placeholder {
  color: rgba(244, 234, 220, .55);
  opacity: 1;
}

.field__input:hover {
  border-color: var(--cream);
}

.field__input:focus,
.field__input:focus-visible {
  outline: none;
  border-color: var(--orange);
  background: rgba(40, 22, 12, .92);
  box-shadow: 0 0 0 3px rgba(232, 96, 28, .5), 0 0 30px rgba(232, 96, 28, .3);
}

.field__input--area {
  min-height: 96px;
  resize: vertical;
}

.field__error {
  font-size: 14px;
  font-weight: 500;
  color: var(--orange-text);
}

.field__error:empty,
.field__error[hidden] {
  display: none;
}

.field.has-error .field__input {
  border-color: var(--orange-text);
}

/* Consent: the HubSpot form's own GDPR text */
.consent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consent__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--sand);
}

.consent__text a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The consent checkbox and the Send button share a line; Send sits at the right edge */
.consent__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.consent__row .check {
  flex: 1 1 260px;
}

.check {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-right: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cream);
  cursor: pointer;
  border-radius: 8px;
}

.check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.check__box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(244, 234, 220, .75);
  border-radius: 6px;
  box-sizing: border-box;
  background: rgba(18, 16, 14, .6);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.check__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #12100E;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.check:hover .check__box {
  border-color: var(--cream);
}

.check:has(input:checked) .check__box,
.check.is-picked .check__box {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 6px 20px -6px rgba(232, 96, 28, .7);
}

.check:has(input:checked) .check__box::after,
.check.is-picked .check__box::after {
  opacity: 1;
}

.check:has(input:focus-visible),
.check.is-focus {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* Honeypot: off-screen, never shown, never tabbed */
.letter__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.letter__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.letter__demo {
  font-size: 14px;
  font-weight: 500;
}

.letter__failure {
  font-size: 16px;
  line-height: 1.4;
}

.letter__failure a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.letter__done {
  outline-offset: 8px;
}

.letter__done-title {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  overflow: clip;
}

.letter__done-line {
  font-size: 21px;
  margin-top: 8px;
}

.letter__noscript {
  font-size: 16px;
  margin-top: 12px;
}

.letter__noscript a {
  text-decoration: underline;
}

html.js .letter__noscript {
  display: none;
}

@media (max-width: 760px) {
  .info {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 8px;
  }

  .info__title {
    margin-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill,
  .pill__dot,
  .check__box,
  .field__label,
  .field__input {
    transition: none;
  }
}