/* Components for Home, Basketball Profile, Highlights, Education, References */

.display {
  font-size: clamp(52px, 8.6vw, 96px);
  font-weight: 850; text-transform: uppercase;
  font-variation-settings: "wdth" 66;
  line-height: 0.86; letter-spacing: -0.01em;
}
.page-top { padding: var(--s-7) 0 var(--s-8); display: grid; gap: var(--s-5); }
.lede { font-size: 19px; line-height: 1.6; max-width: 60ch; color: var(--ink); }

.sec { padding-bottom: var(--s-9); }
.sec__body { padding-top: var(--s-6); }
.sec__intro { font-size: 17px; line-height: 1.7; max-width: 62ch; margin-bottom: var(--s-6); color: var(--ink-2); }
.bar .bar__aside { display: flex; align-items: center; gap: var(--s-4); font-size: 13px; opacity: 0.85; }
.bar .bar__aside img { height: 22px; width: auto; background: #fff; padding: 3px 6px; }

.sub-h {
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; text-transform: uppercase;
  font-variation-settings: "wdth" 70;
  border-bottom: 1.5px solid var(--ink); padding-bottom: var(--s-2); margin-bottom: var(--s-4);
}
.source { margin-top: var(--s-3); font-size: 14px; color: var(--ink-2); }
.source a { color: var(--ink); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }

/* ─── Stat line (season averages) ────────────────────────── */
.fields--stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fields--stats .value {
  font-size: clamp(36px, 4.6vw, 56px); font-weight: 850; line-height: 1;
  font-variation-settings: "wdth" 66; margin-top: var(--s-3);
}
.fields--stats .unit { display: block; margin-top: var(--s-2); font-size: 14px; color: var(--ink-2); }

/* ─── Rating scale: the evaluation form's 1–10 row ───────── */
.scale { border-top: 1.5px solid var(--ink); }
.scale__head, .scale__row {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3rem;
  align-items: center; gap: var(--s-3);
}
.scale__head { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.scale__head ol, .scale__dots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); justify-items: center;
}
.scale__head li { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.scale__row { min-height: 48px; border-bottom: 1px solid var(--rule); }
.scale__label { font-size: 16px; font-weight: 500; line-height: 1.25; }
.scale__dots li {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgb(21 23 28 / 0.35);
}
.scale__dots li.on { background: var(--ink); border-color: var(--ink); }
.scale__dots li.on svg {
  position: absolute; left: -9px; top: -9px; width: 31px; height: 31px; overflow: visible;
}
.scale__val {
  text-align: right; font-size: 20px; font-weight: 800; font-variation-settings: "wdth" 70;
}
.scale__val small { font-size: 12px; font-weight: 500; color: var(--ink-2); }

.tens { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-3); }
.tens li { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: 17px; }
.tens ul, ul.tens { list-style: none; padding: 0; margin: var(--s-3) 0 0; }

/* ─── Document row (PDF downloads) ───────────────────────── */
.doc {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-3) var(--s-5); border: 1.5px solid var(--ink); padding: var(--s-4) var(--s-5);
}
.doc + .doc { border-top: 0; }
.doc > svg { width: 30px; height: 36px; color: var(--ink); }
.doc__title { font-size: 19px; font-weight: 700; font-variation-settings: "wdth" 85; line-height: 1.25; }
.doc__meta { font-size: 14px; color: var(--ink-2); }
.doc__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ─── Ruled table variant with header row ────────────────── */
.log--head thead th {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; width: auto;
}
.log--head th[scope="row"] { color: var(--ink); font-weight: 700; font-variation-settings: "wdth" 85; font-size: 16px; }
.log--head td { font-weight: 400; font-size: 16px; font-variation-settings: "wdth" 100; }
.log .now { color: var(--pen); font-family: var(--f-hand); font-size: 18px; font-weight: 400; white-space: nowrap; }
.log a { color: var(--ink); }

/* ─── Level scale (languages) ────────────────────────────── */
.levels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.levels li { font-size: 14px; color: var(--ink-2); padding: 2px 4px; }
.levels li.on { color: var(--ink); font-weight: 700; }

/* ─── Films (highlights) ─────────────────────────────────── */
.films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.film { display: flex; flex-direction: column; }
.film__link { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border: 1.5px solid var(--ink); }
.film__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out), filter 0.3s var(--ease-out); }
.film__link:hover img { transform: scale(1.03); filter: brightness(0.85); }
.film__play {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  font: 700 14px/1 var(--f-print); letter-spacing: 0.04em; text-transform: uppercase; font-variation-settings: "wdth" 85;
}
.film__play svg { width: 14px; height: 14px; }
.film__link:hover .film__play { background: var(--ink); color: var(--paper); }
.film .fields { grid-template-columns: minmax(0, 1fr) auto; }
.film .fields > * { border-top: 0; }
.film .fields { border-top: 0; }
.film .fields .value { font-size: 18px; }

/* ─── Clipped print (reusable photo) ─────────────────────── */
.print { position: relative; margin: 0; }
.print__img { background: #fff; padding: 8px 8px 0; box-shadow: 0 1px 2px rgb(21 23 28 / 0.12), 0 14px 32px -12px rgb(21 23 28 / 0.35); }
.print__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.print figcaption { background: #fff; padding: var(--s-1) 10px var(--s-2); font-size: 18px; }
.print .photo__clip { top: -24px; }

/* ─── Home ───────────────────────────────────────────────── */
.home-top {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "title photo" "facts photo";
  gap: var(--s-6) var(--s-7); padding: var(--s-7) 0 var(--s-9);
}
.home-top h1 { grid-area: title; }
.home-top .photo { grid-area: photo; max-width: 440px; }
.home-top__facts { grid-area: facts; display: grid; gap: var(--s-5); align-content: start; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.index { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.index a {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-2) var(--s-6); min-height: 64px; padding: var(--s-3) 0;
  border-bottom: 1.5px solid var(--ink); text-decoration: none;
}
.index b { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 70; }
.index span { color: var(--ink-2); }
.index svg { width: 20px; height: 20px; transition: transform 0.25s var(--ease-out); }
.index a:hover b { color: var(--pen); }
.index a:hover svg { transform: translateX(4px); }

.quotes { display: grid; gap: var(--s-6); }
.quote { border: 1.5px solid var(--ink); padding: var(--s-3) var(--s-5) var(--s-5); }
.quote blockquote {
  margin: var(--s-3) 0 var(--s-4); font-size: clamp(19px, 2vw, 23px); line-height: 1.45; font-weight: 500;
  font-variation-settings: "wdth" 92; max-width: 70ch;
}
.quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); font-size: 15px; color: var(--ink-2); }
.quote figcaption b { color: var(--ink); font-size: 17px; }
.quote figcaption a { color: var(--ink); margin-left: auto; }

/* ─── Short contact slip ─────────────────────────────────── */
.slip--short { padding: var(--s-8) 0 var(--s-8); }
.slip--short .slip__grid { align-items: end; }
.slip--short h2 { margin-bottom: var(--s-3); }
.slip--short .slip__lede { margin-bottom: 0; }
.slip--short .actions { justify-content: flex-end; }

/* ─── References ─────────────────────────────────────────── */
.refs { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.ref {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-5) var(--s-7);
  padding: var(--s-6) 0; border-bottom: 1.5px solid var(--ink); text-decoration: none;
}
.ref__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ref__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-2); }
.ref__name { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 70; line-height: 1; }
.ref__role { margin-top: var(--s-2); font-size: 17px; color: var(--ink-2); }
.ref__line { margin-top: var(--s-3); font-size: 17px; max-width: 58ch; }
.ref .btn { pointer-events: none; }
.ref:hover .btn { background: var(--ink); color: var(--paper); }
.ref:hover .ref__name { color: var(--pen); }

.letter { display: grid; gap: var(--s-5); max-width: 68ch; }
.letter h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--s-4); }
.letter p { font-size: 18px; line-height: 1.75; }
.verdict { border: 1.5px solid var(--ink); padding: var(--s-3) var(--s-5) var(--s-5); max-width: 68ch; margin-top: var(--s-6); }
.verdict p { margin-top: var(--s-2); font-size: clamp(19px, 2vw, 22px); font-weight: 600; line-height: 1.45; font-variation-settings: "wdth" 92; }
.back { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 600; margin-top: var(--s-5); }
.ref-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s-7); align-items: end; padding: var(--s-6) 0 var(--s-8); }
.ref-top .ref__photos img { aspect-ratio: 3 / 4; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .home-top { grid-template-columns: 1fr; grid-template-areas: "title" "facts" "photo"; }
  .home-top .photo { justify-self: center; max-width: 300px; margin: var(--s-6) auto 0; }
  .two-col { grid-template-columns: 1fr; gap: var(--s-7); }
  .fields--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .films { grid-template-columns: 1fr; }
  .ref { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
  .ref .btn { grid-column: 1 / -1; justify-self: start; }
  .ref-top { grid-template-columns: 1fr; }
  .index a { grid-template-columns: minmax(0, 1fr) auto; }
  .index span { grid-column: 1; grid-row: 2; }
  .index svg { grid-row: 1 / span 2; grid-column: 2; }
  .slip--short .actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .fields--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields--stats > :last-child { grid-column: 1 / -1; }
  .scale__head, .scale__row { grid-template-columns: minmax(0, 1fr) 2.5rem; row-gap: var(--s-1); }
  .scale__head { display: none; }
  .scale__row { padding: var(--s-2) 0; }
  .scale__dots { grid-column: 1 / -1; grid-row: 2; justify-items: start; gap: 0; }
  .scale__dots li { width: 13px; height: 13px; }
  .scale__dots li.on svg { left: -8px; top: -8px; width: 27px; height: 27px; }
  .scale__val { grid-row: 1; grid-column: 2; }
  .doc { grid-template-columns: auto minmax(0, 1fr); }
  .doc__actions { grid-column: 1 / -1; }
  .ref { grid-template-columns: 1fr; }
  .ref__photos { max-width: 16rem; }
  .log--head thead { display: none; }
  .log--head tr { display: grid; border: 1.5px solid var(--ink); border-top: 0; }
  .log--head tbody tr:first-child { border-top: 1.5px solid var(--ink); }
  .log--head th, .log--head td { border: 0; padding: var(--s-1) var(--s-3); }
  .log--head th[scope="row"] { padding-top: var(--s-3); color: var(--ink-2); font-size: 14px; }
  .log--head td:last-child { padding-bottom: var(--s-3); }
}

/* inline check boxes inside tables */
.log .box__sq { display: inline-block; vertical-align: -4px; margin-right: var(--s-2); }
.checklist--4 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .checklist--4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Photo placeholder until the real print is uploaded */
.ref__ph {
  display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1.5px dashed var(--ink-2);
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgb(21 23 28 / 0.06) 11px 12px), var(--paper-2);
}
.ref__ph span { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-align: center; padding: var(--s-2); }

/* ─── Career timeline ────────────────────────────────────────
   A vertical ink axis with square stops. On wide screens the entries
   alternate left and right of a centered axis, with the period on the
   opposite side; on phones the axis moves to the left edge.
   Stops that are still running get the red marker circle. */
.tl {
  --node: 16px;
  list-style: none; margin: 0 auto; padding: 0; max-width: 960px;
  position: relative; display: grid; gap: var(--s-5);
}
/* axis segment from each stop down to the next */
.tl li:not(:last-child)::before {
  content: ""; position: absolute; left: 50%; top: var(--s-4); bottom: calc(var(--s-5) * -1 - var(--s-4));
  width: 2px; margin-left: -1px; background: var(--ink);
}
.tl li {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--s-8) minmax(0, 1fr);
  align-items: start; position: relative;
}
.tl__when, .tl__node, .tl__card { grid-row: 1; }
.tl__node { grid-column: 2; position: relative; height: calc(var(--s-4) * 2); }
.tl__node::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--node); height: var(--node); transform: translate(-50%, -50%);
  background: var(--paper); border: 2px solid var(--ink);
}
.tl li.is-now .tl__node::after { background: var(--ink); }
.tl__node svg {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
  transform: translate(-50%, -50%); overflow: visible; z-index: 1;
}

/* odd: card left, period right */
.tl li:nth-child(odd) .tl__card { grid-column: 1; text-align: right; }
.tl li:nth-child(odd) .tl__when { grid-column: 3; }
/* even: period left, card right */
.tl li:nth-child(even) .tl__card { grid-column: 3; }
.tl li:nth-child(even) .tl__when { grid-column: 1; text-align: right; }

.tl__when {
  margin: 0; line-height: calc(var(--s-4) * 2);
  font-size: 13px; font-weight: 700; font-variation-settings: "wdth" 85; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tl .now { color: var(--pen); font-family: var(--f-hand); font-size: 18px; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; }

.tl__num {
  display: block; font-size: clamp(36px, 4vw, 56px); font-weight: 850; line-height: 0.9;
  font-variation-settings: "wdth" 66; margin-bottom: var(--s-2);
}
.tl__club {
  font-size: 20px; font-weight: 700; line-height: 1.2; font-variation-settings: "wdth" 85;
  text-transform: uppercase;
}
.tl__level {
  display: block; margin-top: var(--s-1);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.tl__note { margin-top: var(--s-2); font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* scroll-in: armed by site.js. The stop pops in, the entry and period
   slide in from their side, then the axis grows down to the next stop.
   The red "now" circle waits for its stop before drawing. */
@media (prefers-reduced-motion: no-preference) {
  .tl.is-armed li .tl__node::after { transform: translate(-50%, -50%) scale(0); }
  .tl.is-armed li .tl__card, .tl.is-armed li .tl__when { opacity: 0; }
  .tl.is-armed li:nth-child(odd) .tl__card, .tl.is-armed li:nth-child(even) .tl__when { transform: translateX(-24px); }
  .tl.is-armed li:nth-child(even) .tl__card, .tl.is-armed li:nth-child(odd) .tl__when { transform: translateX(24px); }
  .tl.is-armed li::before { transform: scaleY(0); transform-origin: top; }
  .tl.is-armed li:not(.is-in) .draw { animation: none; }

  .tl.is-armed li.is-in .tl__node::after {
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) var(--delay, 0s);
  }
  .tl.is-armed li.is-in .tl__card, .tl.is-armed li.is-in .tl__when {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: calc(var(--delay, 0s) + 0.15s);
  }
  .tl.is-armed li.is-in::before {
    transform: none; transition: transform 0.8s var(--ease-out) calc(var(--delay, 0s) + 0.3s);
  }
  .tl.is-armed li.is-in .draw { animation-delay: calc(var(--delay, 0s) + 0.35s); }
}

/* Phones: axis on the left, period above each entry. */
@media (max-width: 720px) {
  .tl { gap: var(--s-6); }
  .tl li:not(:last-child)::before { left: 12px; top: 12px; bottom: calc(var(--s-6) * -1 - 12px); }
  .tl li { grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s-4); }
  .tl__node { grid-column: 1; grid-row: 1; height: 24px; }
  .tl li:nth-child(n) .tl__when { grid-column: 2; grid-row: 1; text-align: left; line-height: 24px; }
  .tl li:nth-child(n) .tl__card {
    grid-column: 2; grid-row: 2; text-align: left; border: 0; padding: var(--s-2) 0 0;
  }
  .tl__num { display: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .tl.is-armed li:nth-child(n) .tl__card, .tl.is-armed li:nth-child(n) .tl__when { transform: translateX(16px); }
  .tl.is-armed li.is-in:nth-child(n) .tl__card, .tl.is-armed li.is-in:nth-child(n) .tl__when { transform: none; }
}

/* ─── Awards pinboard ────────────────────────────────────────
   Photo prints clipped to the sheet. They drop into place as they
   scroll in, straighten on hover, and open large on click. */
.awards {
  list-style: none; margin: 0; padding: var(--s-5) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-7);
}
.award { --rot: -1.8deg; min-width: 0; }
.award:nth-child(3n+2) { --rot: 1.4deg; margin-top: var(--s-7); }
.award:nth-child(3n) { --rot: -0.8deg; margin-top: var(--s-4); }

.photo--award {
  margin: 0; max-width: none; justify-self: stretch; transform: rotate(var(--rot)); cursor: zoom-in;
  background: #fff; box-shadow: 0 1px 2px rgb(21 23 28 / 0.12), 0 14px 32px -12px rgb(21 23 28 / 0.35);
  transition: box-shadow 0.4s var(--ease-out);
}
.photo--award .photo__clip { left: var(--s-5); }
.photo--award .photo__print { aspect-ratio: 1 / 1; box-shadow: none; }
.photo--award figcaption { font-size: 22px; }
.photo--award .photo__frame img { transition: transform 0.6s var(--ease-out); }

.award__empty {
  display: grid; justify-items: center; gap: var(--s-2); color: var(--ink-2);
}
.award__empty svg { width: 48px; height: 48px; }
.award__empty span {
  font-size: clamp(36px, 4vw, 56px); font-weight: 850; line-height: 0.9;
  font-variation-settings: "wdth" 66; color: var(--rule);
}

.award__title {
  margin-top: var(--s-5); font-size: 20px; font-weight: 700; line-height: 1.2;
  font-variation-settings: "wdth" 85; text-transform: uppercase;
}
.award__event { margin-top: var(--s-1); font-size: 15px; line-height: 1.5; color: var(--ink-2); }

@media (hover: hover) {
  .photo--award { transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out); }
  .award:hover .photo--award {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 1px 2px rgb(21 23 28 / 0.12), 0 24px 40px -14px rgb(21 23 28 / 0.4);
  }
  .award:hover .photo__frame img { transform: scale(1.04); }
}

/* scroll-in: armed by site.js so the prints stay visible without JS */
@media (prefers-reduced-motion: no-preference) {
  .awards.is-armed .award { opacity: 0; transform: translateY(40px) rotate(4deg); }
  .awards.is-armed .award.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-out);
    transition-delay: var(--delay, 0s);
  }
  .awards.is-armed .award .photo__clip { transform: rotate(-4deg) translateY(-14px); opacity: 0; }
  .awards.is-armed .award.is-in .photo__clip {
    transform: rotate(-4deg); opacity: 1;
    transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s;
    transition-delay: calc(var(--delay, 0s) + 0.55s);
  }
}

/* enlarged print */
.award-view {
  border: 0; padding: 12px 12px 0; background: #fff; max-width: min(92vw, 720px); width: 100%;
  box-shadow: 0 30px 80px -20px rgb(21 23 28 / 0.6);
}
.award-view::backdrop { background: rgb(21 23 28 / 0.72); }
.award-view img { width: 100%; max-height: 72vh; object-fit: contain; background: var(--paper-2); }
.award-view__cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-1); }
.award-view__cap b { font-size: 17px; text-transform: uppercase; font-variation-settings: "wdth" 85; }
.award-view__cap span { display: block; font-size: 14px; color: var(--ink-2); }
.award-view button {
  flex: none; width: 44px; height: 44px; border: 2px solid var(--ink); background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.award-view button:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 900px) {
  .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
  .award:nth-child(n) { margin-top: 0; }
  .award:nth-child(even) { --rot: 1.6deg; margin-top: var(--s-6); }
}
@media (max-width: 520px) {
  .awards { grid-template-columns: 1fr; gap: var(--s-7); }
  .award:nth-child(n) { margin-top: 0; max-width: 320px; }
  .award:nth-child(even) { justify-self: end; }
}

/* Small handwritten note under an award (e.g. who is in the photo) */
.award__note { margin-top: var(--s-2); font-size: 18px; transform: rotate(-1deg); transform-origin: left; }

/* ─── Home: photo album — a shallow half-circle carousel. The front photo
   is sharp in the middle; neighbours turn away along the arc and blur. ─── */
.album {
  position: relative; overflow: hidden; height: 500px;
  perspective: 1600px; perspective-origin: 50% 50%;
}
.album__track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.album__item {
  --w: 330px; position: absolute; left: 50%; top: 50%;
  width: var(--w); aspect-ratio: 3 / 4; margin: calc(var(--w) * -2 / 3) 0 0 calc(var(--w) / -2);
  backface-visibility: hidden;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), filter 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 18px 40px -18px rgb(21 23 28 / 0.45);
}
.album__item img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .album { height: 380px; perspective: 1000px; }
  .album__item { --w: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .album__item { transition: none; }
}