/* Project page: a torn sheet of textured paper pinned over the corkboard.
   Same paper, fonts and ink as the notes on the board. Text sits on the
   left, photos on the right (crops match the old site). */

body.sheet-page {
  --edge: 22px;
  min-height: 100vh;
  padding: clamp(64px, 7vw, 92px) clamp(10px, 4vw, 64px) clamp(40px, 6vw, 80px);
  color: #2f2b28;
}

/* ---------- back tab on the cork ---------- */
.back-tab {
  position: fixed;
  top: clamp(12px, 2vw, 22px);
  left: clamp(12px, 2.4vw, 30px);
  z-index: 20;
  display: inline-block;
  padding: .45em 1em .45em 1.1em;
  font-family: var(--marker);
  font-size: clamp(.95rem, 2vw, 1.15rem);
  text-decoration: none;
  background: var(--sticky-yellow);
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.back-tab:hover, .back-tab:focus-visible { transform: rotate(0) scale(1.06); box-shadow: var(--shadow-lifted); }
.back-tab .pin { font-size: .8rem; top: -.5em; left: 50%; margin-left: -.675em; }

/* ---------- the sheet ---------- */
.sheet {
  --pad: max(5cqw, 30px);
  position: relative;
  z-index: 0;
  container-type: inline-size;
  max-width: 1180px;
  margin: 0 auto;
  filter: drop-shadow(0 1px 1px rgba(40, 22, 8, .3)) drop-shadow(0 10px 14px rgba(40, 22, 8, .32));
  transform-origin: 50% 0;
  animation: sheet-open .7s cubic-bezier(.2, .8, .2, 1) both;
}
/* the paper itself: same grain + crinkle as the bio note, torn on all four sides */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(70, 45, 20, .07)),
    url("../assets/textures/paper-crinkle.jpg") 0 0 / 1100px auto,
    url("../assets/textures/paper-grain.jpg") 0 0 / 420px auto,
    #fdfbf6;
  background-blend-mode: normal, multiply, multiply, normal;
  -webkit-mask:
    url("../assets/textures/torn-edge-top.png") top left / auto var(--edge) repeat-x,
    url("../assets/textures/torn-edge-bottom.png") bottom left / auto var(--edge) repeat-x,
    url("../assets/textures/torn-edge-left.png") top left / var(--edge) auto repeat-y,
    url("../assets/textures/torn-edge-right.png") top right / var(--edge) auto repeat-y,
    linear-gradient(#000, #000) center / calc(100% - 2 * var(--edge) + 2px) calc(100% - 2 * var(--edge) + 2px) no-repeat;
  mask:
    url("../assets/textures/torn-edge-top.png") top left / auto var(--edge) repeat-x,
    url("../assets/textures/torn-edge-bottom.png") bottom left / auto var(--edge) repeat-x,
    url("../assets/textures/torn-edge-left.png") top left / var(--edge) auto repeat-y,
    url("../assets/textures/torn-edge-right.png") top right / var(--edge) auto repeat-y,
    linear-gradient(#000, #000) center / calc(100% - 2 * var(--edge) + 2px) calc(100% - 2 * var(--edge) + 2px) no-repeat;
}
@keyframes sheet-open {
  from { opacity: 0; transform: translateY(46px) scale(.96) rotate(-.8deg); }
}
.sheet.is-closing {
  animation: none;
  opacity: 0;
  transform: translateY(40px) scale(.97) rotate(.6deg);
  transition: opacity .26s ease-in, transform .26s ease-in;
}

.sheet__pin { font-size: clamp(.85rem, 1.6vw, 1.1rem); top: .5em; }
.sheet__pin--l { left: 4%; }
.sheet__pin--r { right: 10%; }

.sheet__close {
  position: absolute;
  top: calc(var(--edge) + 6px);
  right: calc(var(--edge) + 8px);
  z-index: 10;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font: 400 1.9rem/1 var(--hand);
  text-decoration: none;
  color: #2f2b28;
  transition: background .2s, transform .2s;
}
.sheet__close:hover, .sheet__close:focus-visible { background: rgba(0, 0, 0, .06); transform: rotate(90deg); }

/* ---------- type ---------- */
.sheet__body { padding: 0 var(--pad); }
.row__text h2 {
  margin: 0 0 .5em;
  font: 400 clamp(1.7rem, 3cqw, 2.4rem)/1.15 var(--marker);
  color: #2d2a32;
}
.row__text h3 {
  margin: 0 0 .55em;
  font: 400 clamp(1.3rem, 2.1cqw, 1.65rem)/1.2 var(--marker);
  color: #2d2a32;
}
.row__text p, .row__text li {
  font: 400 clamp(.98rem, 1.45cqw, 1.1rem)/1.6 var(--type);
}
.row__text p { margin: 0 0 1em; }
.row__text .label {
  margin: 1.2em 0 .1em;
  font: 700 clamp(1.35rem, 2.1cqw, 1.6rem)/1.1 var(--hand);
  color: var(--cherry);
}
.row__text h2 + .label { margin-top: .4em; }
.row__text ul { margin: 0; padding: 0; list-style: none; }
.row__text li { position: relative; padding-left: 1.2em; }
.row__text li::before { content: "✓"; position: absolute; left: 0; color: var(--cherry); }

/* ---------- rows: text left, photos right ---------- */
.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(22px, 4cqw, 52px);
  align-items: start;
  padding: clamp(34px, 5cqw, 60px) 0;
}
.row + .row { border-top: 1px dashed rgba(47, 43, 40, .18); }
.row__text { position: sticky; top: 24px; }
.row__text > :last-child { margin-bottom: 0; }
.row__media { container-type: inline-size; }
.row__media { display: flex; justify-content: flex-end; }

.m-row { display: flex; gap: 1.6cqw; align-items: flex-start; }
.m-col { display: flex; flex-direction: column; gap: 1.6cqw; }
.m-img { margin: 0; flex: none; box-shadow: 0 1px 2px rgba(40, 22, 8, .22); background: #fff; }

/* ---------- photos ---------- */
.photo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.photo:hover img { transform: scale(1.03); }
/* CAD renders sit straight on the paper (their white background disappears) */
.m-img:has(.is-fit) { background: none; box-shadow: none; }
.photo.is-fit img { object-fit: contain; mix-blend-mode: multiply; }

/* ---------- pager ---------- */
.sheet__pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 var(--pad);
  padding: 26px 0 calc(var(--edge) + 30px);
  border-top: 2px dashed rgba(47, 43, 40, .25);
}
.sheet__pager a {
  display: grid;
  font: 400 clamp(1.4rem, 2.6cqw, 2rem)/1.2 var(--marker);
  text-decoration: none;
  color: #2d2a32;
}
.sheet__pager a small { font: 700 1.3rem/1.2 var(--hand); color: var(--cherry); }
.sheet__pager .next { margin-left: auto; text-align: right; }
.sheet__pager a:hover { transform: rotate(-1.5deg); }

/* ---------- lightbox (js/scrapbook.js) ---------- */
.lightbox { border: 0; padding: 10px; background: #fff; max-width: min(94vw, 1200px); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(20, 12, 4, .8); }
.lightbox img { max-width: 100%; max-height: calc(92vh - 20px); width: auto; margin: 0 auto; }
.lightbox button {
  position: absolute; top: -14px; right: -14px;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; color: #fff; background: var(--cherry); cursor: pointer;
}

:focus-visible { outline: 2px solid #3e8ed0; outline-offset: 3px; }

/* ---------- "clean" theme (Espressivo, Headset Habitat, Spatulove, Candy Dispenser) ----------
   The bio-note type treatment: heavy grotesk title, mono body, ballpoint marks. */
.sheet--clean { padding-bottom: calc(var(--edge) + 10px); }
/* smoother paper than the other sheets: grain only, no crinkles */
.sheet--clean::before {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(70, 45, 20, .05)),
    url("../assets/textures/paper-grain.jpg") 0 0 / 420px auto,
    #fdfbf6;
  background-blend-mode: normal, multiply, normal;
}

/* back arrow */
.clean__back {
  top: calc(var(--edge) + 22px);
  right: calc(var(--edge) + 22px);
  width: 56px;
  height: 40px;
  border-radius: 20px;
}
.clean__back svg { width: 36px; fill: none; stroke: #2f2b28; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.clean__back:hover, .clean__back:focus-visible { transform: translateX(-4px); }

/* title block, top left */
.clean__head {
  max-width: 40rem;
  padding: calc(var(--edge) + 34px) var(--pad) 0;
}
.clean__title {
  margin: 0;
  font-family: var(--grotesk);
  font-weight: 900;
  font-stretch: 85%;
  font-size: clamp(2rem, 5cqw, 3.9rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #1c1c1c;
}
.clean__tagline {
  margin: .3em 0 0;
  font: italic 400 clamp(1.3rem, 2.4cqw, 1.8rem)/1.1 var(--serif);
  color: #3a3531;
}
.clean__meta {
  margin: .9em 0 1.6em;
  font: 400 .78rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a736c;
}
.clean__meta span { margin: 0 .4em; color: var(--cherry); }
.clean__body {
  margin: 0 0 1em;
  font: 400 clamp(.72rem, 1.05cqw, .76rem)/1.65 var(--mono);
  color: #3a3531;
}
.clean__body .squiggled svg { stroke-width: 2; }

/* intro photos, full width under the title block */
.clean__photos {
  container-type: inline-size;
  margin: clamp(26px, 4cqw, 44px) var(--pad) 0;
}
.sheet--clean .m-img { box-shadow: 0 1px 2px rgba(40, 22, 8, .18), 0 4px 12px -6px rgba(40, 22, 8, .25); }
.sheet--clean .m-img:has(.is-fit) { box-shadow: none; }

.clean__part {
  margin: clamp(56px, 8cqw, 100px) 0 0;
  font: italic 400 clamp(1.9rem, 4cqw, 3rem)/1.1 var(--serif);
  letter-spacing: -.01em;
  color: #1c1c1c;
}

.sheet--clean .sheet__body { counter-reset: step; }
.sheet--clean .row { padding: clamp(30px, 4cqw, 46px) 0; }
.sheet--clean .row + .row { border-top: 1px dashed rgba(47, 43, 40, .2); }
.sheet--clean .clean__part + .row,
.sheet--clean .clean__brief + .row { padding-top: clamp(48px, 7cqw, 80px); }
.clean__brief {
  max-width: 40rem;
  margin: 1.4em 0 0;
  font: 400 clamp(.8rem, 1.2cqw, .9rem)/1.6 var(--mono);
  color: #3a3531;
}
.clean__brief span {
  display: block;
  margin-bottom: .5em;
  font-size: .82em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cherry);
}
.sheet--clean .row__text h3::before {
  counter-increment: step;
  content: "no. " counter(step);
  display: block;
  margin-bottom: .15em;
  font: 400 clamp(1.9rem, 3cqw, 2.3rem)/.8 var(--pen);
  color: #1f3f9a;
  transform: rotate(-2deg);
  transform-origin: left;
}
.sheet--clean .row__text h3 {
  margin: 0 0 .7em;
  font: 800 clamp(1.1rem, 1.8cqw, 1.35rem)/1.1 var(--grotesk);
  font-stretch: 90%;
  letter-spacing: -.01em;
  color: #1c1c1c;
}
.sheet--clean .row__text h2 {
  margin: 0 0 .5em;
  font: 900 clamp(1.5rem, 2.8cqw, 2.1rem)/.95 var(--grotesk);
  font-stretch: 85%;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #1c1c1c;
}
.sheet--clean .row__text p {
  font: 400 clamp(.74rem, 1.1cqw, .8rem)/1.7 var(--mono);
  color: #3a3531;
}
.sheet--clean .row__text li {
  margin-bottom: .45em;
  padding-left: 1.4em;
  font: 400 clamp(.74rem, 1.1cqw, .8rem)/1.7 var(--mono);
  color: #3a3531;
}
.sheet--clean .row__text li::before { content: "–"; color: var(--cherry); }
.sheet--clean .row__text ul { margin: 0 0 1em; }
.sheet--clean .row__text .label {
  margin: 1.4em 0 .8em;
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cherry);
}

.sheet--clean .row--solo { grid-template-columns: minmax(0, 40rem); }

/* demo video on a strip of film */
.clean__demo {
  display: grid;
  grid-template-columns: minmax(0, .55fr) auto minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(18px, 3cqw, 40px);
  margin: clamp(48px, 7cqw, 84px) var(--pad) 0;
}
.clean__note {
  justify-self: end;
  max-width: 7.5em;
  margin: 0;
  font: 400 clamp(1.35rem, 2.3cqw, 1.8rem)/1 var(--pen);
  color: #1f3f9a;
  text-align: right;
  transform: rotate(-3deg);
}
.film {
  --rail: clamp(24px, 3cqw, 34px);
  position: relative;
  display: grid;
  gap: 10px;
  width: clamp(230px, 30cqw, 330px);
  padding: 0 var(--rail);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22'%3E%3Crect x='11' y='5' width='12' height='12' rx='2.5' fill='%23fbf8f2'/%3E%3C/svg%3E") left top / var(--rail) auto repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22'%3E%3Crect x='11' y='5' width='12' height='12' rx='2.5' fill='%23fbf8f2'/%3E%3C/svg%3E") right top / var(--rail) auto repeat-y,
    #1d1916;
  box-shadow: 0 2px 3px rgba(40, 22, 8, .3), 0 14px 26px -12px rgba(40, 22, 8, .45);
  transform: rotate(2deg);
}
.film video { display: block; width: 100%; aspect-ratio: 9 / 16; background: #000; }
.film__still { display: block; height: clamp(46px, 6cqw, 70px); overflow: hidden; }
.film__still img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: sepia(.35) saturate(.8); }
.film__edge {
  position: absolute;
  top: 12%;
  writing-mode: vertical-rl;
  font: 500 .58rem/1 var(--mono);
  letter-spacing: .2em;
  color: #e39a3b;
  opacity: .85;
  pointer-events: none;
}
.film__edge--l { left: 2px; transform: rotate(180deg); }
.film__edge--r { right: 2px; top: 55%; }

/* no toy beside it: centre the film, note on the left */
.clean__demo--solo { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
/* a landscape video: the strip runs sideways, note above */
.clean__demo--wide { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
.clean__demo--wide .clean__note { justify-self: start; max-width: none; margin-left: 4%; text-align: left; }
.clean__demo--wide .clean__note span { display: inline-block; transform: rotate(90deg); }
.film--wide {
  grid-template-columns: clamp(46px, 6cqw, 80px) minmax(0, 1fr) clamp(46px, 6cqw, 80px);
  width: min(100%, 860px);
  padding: var(--rail) 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34'%3E%3Crect x='5' y='11' width='12' height='12' rx='2.5' fill='%23fbf8f2'/%3E%3C/svg%3E") left top / auto var(--rail) repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34'%3E%3Crect x='5' y='11' width='12' height='12' rx='2.5' fill='%23fbf8f2'/%3E%3C/svg%3E") left bottom / auto var(--rail) repeat-x,
    #1d1916;
  transform: rotate(-1.2deg);
}
.film--wide video { aspect-ratio: 16 / 9; }
.film--wide .film__still { position: relative; height: auto; }
.film--wide .film__still img { position: absolute; inset: 0; }
.film--wide .film__edge { writing-mode: horizontal-tb; top: 3px; left: 12%; transform: none; }
.film--wide .film__edge--r { top: auto; bottom: 3px; left: auto; right: 12%; }
/* photo and film blocks between the process rows */
.sheet__body .clean__photos { width: var(--w, 100%); margin: clamp(30px, 4cqw, 46px) auto 0; }
.sheet__body .clean__demo { margin: clamp(56px, 8cqw, 96px) 0 clamp(20px, 3cqw, 36px); }

/* candy dispenser cut-out with a working lever */
.toy { position: relative; justify-self: start; width: min(100%, 460px); margin: 0 0 0 4%; }
.toy__stage { position: relative; }
.toy__stage > img:first-child { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.toy__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.toy__part { position: absolute; mix-blend-mode: multiply; pointer-events: none; max-width: none; }
.toy__rotor { left: -7.391%; top: 15.464%; width: 86.957%; height: 82.474%; }
.toy__spring { left: 31.304%; top: 63.299%; width: 5.435%; height: 20%; transform-origin: 50% 100%; }
.toy__lever { cursor: grab; outline: none; touch-action: none; }
.toy.is-dragging .toy__lever { cursor: grabbing; }
.toy__hit { fill: transparent; }
.toy__lever:focus-visible .toy__hit { stroke: #1f3f9a; stroke-width: 2; stroke-dasharray: 5 5; }
.toy__candy circle { pointer-events: none; }
.toy__note {
  position: absolute;
  top: 4%;
  left: 77%;
  width: 3.6em;
  margin: 0;
  font: 400 clamp(1.5rem, 2.6cqw, 2rem)/1 var(--pen);
  color: #1f3f9a;
  transform: rotate(5deg);
}
.toy__hint {
  position: absolute;
  left: -6%;
  top: 97%;
  font: 400 clamp(1.1rem, 1.8cqw, 1.35rem)/1 var(--pen);
  white-space: nowrap;
  color: #1f3f9a;
  transform: rotate(-4deg);
  pointer-events: none;
  transition: opacity .4s;
}
.toy__hint svg {
  position: absolute;
  left: 96%;
  top: -95%;
  width: 1.9em;
  height: 1.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.toy.is-touched .toy__hint { opacity: 0; }
.toy__empty {
  position: absolute;
  right: -4%;
  top: 48%;
  padding: 9px 12px 8px;
  border: 0;
  background: #fff07a;
  font: 400 1.05rem/1 var(--pen);
  color: #2a2522;
  box-shadow: 0 1px 2px rgba(40, 22, 8, .25), 0 8px 14px -8px rgba(40, 22, 8, .4);
  transform: rotate(4deg);
  cursor: pointer;
}
.toy__empty:hover { transform: rotate(1deg) scale(1.05); }

.sheet--clean .sheet__pager { border-top: 1px dashed rgba(47, 43, 40, .25); padding-top: 30px; }
.sheet--clean .sheet__pager a { font: 900 clamp(1.3rem, 2.4cqw, 1.8rem)/1 var(--grotesk); font-stretch: 85%; text-transform: uppercase; color: #1c1c1c; }
.sheet--clean .sheet__pager a small {
  margin-bottom: .7em;
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: none;
  color: var(--cherry);
}

/* ---------- narrow sheets: stack text above photos ---------- */
@container (max-width: 700px) {
  .row { grid-template-columns: 1fr; }
  .row__text { position: static; }
  .row__media { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .clean__back { top: calc(var(--edge) + 10px); right: calc(var(--edge) + 6px); }
  .clean__title { margin-right: 44px; }
  .clean__demo { grid-template-columns: 1fr; justify-items: center; }
  .film--wide { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .sheet__body .clean__photos { width: 100%; }
  .clean__note { justify-self: start; text-align: left; }
  .clean__note span { display: inline-block; transform: rotate(90deg); }
  .toy { justify-self: center; margin: 24px 0 0 8%; width: 88%; }
  .toy__hint { left: -4%; }
}
@media (max-width: 600px) {
  body.sheet-page { --edge: 14px; padding-left: 6px; padding-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .photo img, .sheet__close { transition: none; }
}

/* ---------- about page: bio beside a photo ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(20px, 4cqw, 52px);
  align-items: start;
  padding-right: var(--pad);
}
.about .clean__head { max-width: 36rem; }
.about .clean__tagline { margin-top: .5em; }
.about .clean__body { margin-top: 1.4em; }
.about__photo {
  position: relative;
  margin: calc(var(--edge) + 72px) 0 0;
  padding: 14px 14px 0;
  transform: rotate(2.5deg);
  box-shadow: 0 1px 2px rgba(40, 22, 8, .18), 0 10px 24px -8px rgba(40, 22, 8, .35);
}
.about__photo img {
  display: block;
  height: auto;
  aspect-ratio: 4 / 5;
  object-position: 50% 30%;
}
.about__photo figcaption {
  padding: .35em 0 .45em;
  font: 400 clamp(1.8rem, 2.8cqw, 2.3rem)/1 var(--pen);
  color: #1f3f9a;
}
.about__photo .tape { font-size: 15px; }

/* off the clock: the band photo as a strip of film */
.about__fun {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4cqw, 44px);
  margin-top: clamp(24px, 3cqw, 40px);
}
.about__clock {
  max-width: 34rem;
  margin: 0;
  font: 400 clamp(1.25rem, 2.1cqw, 1.6rem)/1.35 var(--serif);
  text-align: center;
}
.about__band { width: min(100%, 780px); transform: rotate(-1.5deg); margin: 0; }
.about__band-photo { display: block; width: 100%; height: auto; aspect-ratio: 1393 / 1038; object-fit: cover; }
.about__band .film__still img { filter: sepia(.35) saturate(.8) brightness(.8); }
.about__band-tape { font-size: 15px; top: -.7em; left: 44%; width: 6em; transform: rotate(4deg); }
.about__band-note {
  position: absolute;
  right: -2%;
  bottom: -2.4em;
  font: 400 clamp(1.9rem, 3cqw, 2.5rem)/1 var(--pen);
  color: var(--cherry);
  transform: rotate(-5deg);
}
.about__band-note span { font-size: .8em; }
.about__links { display: flex; flex-wrap: wrap; gap: .4em 1.6em; }
.about__links a { color: #1c1c1c; text-decoration: underline; text-decoration-color: var(--cherry); text-underline-offset: .25em; }
.about__links a:hover { color: var(--cherry); }
@media (max-width: 700px) {
  .about { grid-template-columns: 1fr; padding-right: 0; }
  .about__photo { width: min(80%, 20rem); margin: 0 auto; }
  .about__band-note { right: 2%; }
}