/* Strange DNA case study, part 2: hotspot note controls, catalogue, brand band,
   arched results and responsive rules. Tokens live in case-strange-dna.css. */

.sd-note__next { justify-self: start; margin-top: 6px; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--sd-wine); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #fff; cursor: pointer; transition: background .3s; }
.sd-note__next:hover, .sd-note__next:focus-visible { background: var(--accent); outline: none; }
.sd-stage__hint { margin: 18px 0 0; font-size: 14px; text-align: center; color: rgb(255 238 240 / 55%); }

/* ---------- catalogue ---------- */
.sd-cat { background: var(--sd-night); }
.sd-cat__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.sd-cat__shot { margin: 0; border-radius: 50% 50% 28px 28px / 30% 30% 28px 28px; overflow: hidden; box-shadow: 0 0 0 1px rgb(242 184 160 / 25%); }
.sd-cat__shot img { display: block; width: 100%; height: auto; }
.sd-cat__copy { display: grid; gap: 22px; }
.sd-cat__copy .cs-kicker { margin: 0; }
.sd-cat__lead { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--sd-text); }
.sd-ways { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.sd-ways li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--sd-line); }
.sd-ways b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--sd-peach); }
.sd-ways span { font-size: 15.5px; line-height: 1.55; color: var(--sd-text); }

/* ---------- brand band at dusk ---------- */
.sd-dusk { position: relative; display: flex; align-items: flex-end; min-height: clamp(640px, 66vw, 1000px); padding: 0 var(--gutter); overflow: hidden; background: var(--sd-oxblood); }
.sd-dusk img { object-position: center 40%; }
.sd-dusk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--sd-night) 0%, rgb(34 3 13 / 0%) 16%, rgb(34 3 13 / 0%) 42%, rgb(34 3 13 / 94%) 72%, var(--sd-night)); }
.sd-dusk__copy { position: relative; z-index: 1; display: grid; gap: 16px; padding-bottom: clamp(48px, 6vw, 96px); }
.sd-dusk__copy .cs-kicker { margin: 0; }
.sd-dusk__copy .cs-h2 { max-width: 780px; }
.sd-dusk__copy p:last-child { max-width: 560px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--sd-text); }

/* ---------- results: four arched windows ---------- */
.sd-out { background: linear-gradient(180deg, var(--sd-night), var(--sd-oxblood) 60%, var(--sd-wine)); }
.sd-out__head { display: grid; justify-items: center; gap: 16px; text-align: center; }
.sd-out__head .cs-kicker { margin: 0; }
.sd-arches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: clamp(48px, 5vw, 80px) 0 0; padding: 0; list-style: none; }
.sd-arches li { display: grid; align-content: start; justify-items: center; gap: 12px; min-height: 360px; padding: 64px 26px 32px; border-radius: 999px 999px 24px 24px; background: linear-gradient(180deg, rgb(242 184 160 / 22%), rgb(255 61 110 / 6%) 60%, rgb(255 255 255 / 3%)); box-shadow: inset 0 0 0 1px rgb(242 184 160 / 28%); text-align: center; }
.sd-arches__n { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--sd-peach); }
.sd-arches h3 { margin: 8px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sd-arches p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sd-text); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .sd-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sd-arches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-arches li { min-height: 300px; }
}
@media (max-width: 900px) {
  .sd-hero { grid-template-columns: 1fr; min-height: 0; padding-right: var(--gutter); }
  .sd-hero__copy { max-width: 640px; padding-bottom: 32px; }
  .sd-hero__art { grid-column: 1; grid-row: 2; margin: 0 calc(var(--gutter) * -1); }
  .sd-hero__art img { height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%); }
  .sd-brief__grid, .sd-cat__grid { grid-template-columns: 1fr; }
  .sd-brief__copy { position: static; }
  .sd-cat__shot { max-width: 560px; }
}
@media (max-width: 720px) {
  .sd-hero__copy { padding-top: 112px; }
  .sd-spec > div { padding-right: 10px; }
  .sd-index li { grid-template-columns: 52px minmax(0, 1fr); padding: 22px 0; }
  .sd-index__n { font-size: 28px; }
  .sd-stage__shot { border-radius: 18px; }
  .sd-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; box-shadow: 0 0 0 2px rgb(255 255 255 / 85%), 0 4px 14px rgb(122 10 42 / 50%); }
  .sd-dot::after { width: 10px; height: 10px; background-size: 10px 2px, 2px 10px; }
  .sd-stage.is-live .sd-note { position: relative; left: auto; top: auto; display: none; width: auto; margin-top: 16px; }
  .sd-stage.is-live .sd-note.is-open { display: grid; }
  .sd-ways li { grid-template-columns: 1fr; gap: 4px; }
  .sd-dusk { display: block; min-height: 0; padding-bottom: 64px; }
  .sd-dusk img { position: static; display: block; width: calc(100% + 2 * var(--gutter)); max-width: none; height: auto; margin: 0 calc(var(--gutter) * -1); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .sd-dusk::after { display: none; }
  .sd-dusk__copy { margin-top: -24px; padding-bottom: 0; }
  .sd-arches { grid-template-columns: 1fr; }
  .sd-arches li { min-height: 0; padding: 56px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-dot::before { animation: none; }
  .sd-stage.is-live .sd-note { transition: none; }
}

/* ---------- the last two steps: a two-stop progress line, each stop with its screen at equal height ---------- */
.cs-kicker::before { display: none; }
.sd-send { background: radial-gradient(60% 45% at 50% 100%, rgb(255 61 110 / 16%), transparent 70%), linear-gradient(180deg, var(--sd-oxblood), var(--sd-night)); color: var(--white); }
.sd-send .cs-lead { color: var(--sd-text); }
.sd-send__steps { display: grid; grid-template-columns: minmax(0, 1.776fr) minmax(0, 1.5fr); gap: clamp(24px, 3vw, 44px); margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
.sd-send__steps li { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; }
.sd-send__top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.sd-send__n { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 3.6vw, 56px); line-height: 1; color: var(--sd-peach); }
.sd-send__rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgb(242 184 160 / 60%), rgb(242 184 160 / 15%)); }
.sd-send__end { padding: 6px 14px; border-radius: 999px; background: var(--sd-neon); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: #fff; }
.sd-send__h { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: var(--white); }
.sd-send__p { margin: 0 0 22px; max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--sd-text); }
.sd-send__art { margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 1px var(--sd-line), 0 50px 90px -50px rgb(255 61 110 / 45%); transition: transform .6s var(--ease), box-shadow .6s ease; }
.sd-send__steps li:hover .sd-send__art { transform: translateY(-6px); box-shadow: 0 0 0 1px rgb(242 184 160 / 40%), 0 60px 100px -50px rgb(255 61 110 / 60%); }
.sd-send__art img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .sd-send__steps { grid-template-columns: minmax(0, 1fr); gap: 64px; }
}
@media (prefers-reduced-motion: reduce) { .sd-send__art { transition: none; } }