.aw {
  position: relative;
  z-index: 6;
  padding: 13rem 0 12rem;

  background: var(--page);
  color: var(--on-dark);
}

.aw-head {
  grid-column: content;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92rem;
  text-align: center;
}

.aw-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.4rem;

  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.aw-eyebrow i {
  flex: none;
  width: 3.4rem;
  height: var(--hair);
  background: currentColor;
  opacity: .5;
}

.aw-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 5.6rem;
  line-height: 1.1;
  letter-spacing: -.016em;
  color: var(--paper);
  text-wrap: balance;
  transition: color .9s var(--ease);
}
.aw-title em {
  font-style: normal;
  color: var(--gold-lift);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .v6 .aw-title em {
    background-image: var(--gold-metal);
    background-repeat: repeat-y;
    background-size: 100% 1.08em;
    background-position: 50% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--gold-cast-mid);
  }
  html:not(.is-night) .v6 .aw-title em {
    background-image: var(--gold-line-light);
    filter: var(--gold-cast-light);
  }
}

.aw-lede {
  margin: 2.6rem 0 0;
  max-width: 64ch;
  font-size: 1.9rem;
  line-height: 1.62;
  color: var(--on-dark);
  transition: color .9s var(--ease);
}

/* Three achievements, each a card with a drawn medal: no photographs. */
.aw-list {
  grid-column: content;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--gap) * 1.4);
  margin: 7rem 0 0;
  padding: 0;
  list-style: none;
}

.aw-item { display: flex; }

.aw-card {
  --metal: var(--gold-line-light);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 5rem 3.6rem 4.2rem;
  overflow: hidden;

  text-align: center;
  color: inherit;
  text-decoration: none;

  /* One border and one shadow for both themes, so nothing heavy repaints when
     night falls; the paper face (::after) simply fades out over the dark one. */
  border: var(--hair) solid rgb(176 136 72 / .3);
  border-radius: var(--r-card, 2.2rem);
  background:
    radial-gradient(90% 60% at 50% 0%, rgb(217 179 120 / .14), transparent 70%),
    linear-gradient(180deg, #14110c, #0d0b08);
  box-shadow: 0 2.4rem 5.6rem -3rem rgb(20 12 2 / .5);
  transition: transform .9s var(--ease-arch);
}

.aw-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(90% 60% at 50% 0%, rgb(217 179 120 / .2), transparent 70%),
    linear-gradient(180deg, #fffdf8, #f5eee1);
  opacity: 1;
  transition: opacity .9s var(--ease);
  will-change: opacity;
}
html.is-night .aw-card::after { opacity: 0; }

/* A hairline of the medal's metal along the top edge. */
.aw-card::before {
  content: '';
  position: absolute;
  inset: 0 18% auto;
  height: .2rem;
  border-radius: 0 0 .4rem .4rem;
  background: var(--metal);
  opacity: .9;
}

.aw-item--platinum .aw-card { --metal: linear-gradient(90deg, #9a9fa6, #f4f5f6 50%, #9a9fa6); }
.aw-item--gold .aw-card     { --metal: linear-gradient(90deg, #a8763a, #f3d49c 50%, #a8763a); }
.aw-item--award .aw-card    { --metal: linear-gradient(90deg, #8a5a22, #f0cd8a 50%, #8a5a22); }

.aw-medal {
  display: block;
  width: clamp(120px, 15rem, 170px);
  aspect-ratio: 1;
  margin: 0 0 2.4rem;
  filter: drop-shadow(0 1.3rem 1.6rem rgb(40 24 4 / .32));
  transition: transform 1.1s var(--ease-arch);
}
.aw-medal-svg { display: block; width: 100%; height: 100%; }

.aw-issuer {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.aw-badge {
  display: block;
  margin: 1.4rem 0 .2rem;
  padding: .06em 0 .14em;
  font-family: var(--font-year, var(--font-title));
  font-weight: 400;
  font-size: clamp(38px, 5.4rem, 60px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--gold-lift);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .aw-badge {
    background-image: var(--metal);
    background-size: 220% 100%;
    background-position: 50% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .aw-item--platinum .aw-badge { background-image: linear-gradient(180deg, #ffffff 10%, #c9cdd2 55%, #8c9198 100%); }
  .aw-item--gold .aw-badge     { background-image: linear-gradient(180deg, #f7dfa8 10%, #d9b378 55%, #a8763a 100%); }
  .aw-item--award .aw-badge    { background-image: linear-gradient(180deg, #f8e2ae 10%, #cfa05a 55%, #8a5a22 100%); }
}

.aw-name {
  margin: 0 0 1.4rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 2.3rem, 25px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--paper);
  transition: color .9s var(--ease);
}

.aw-say {
  margin: 0 0 2.8rem;
  max-width: 36ch;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--on-dark);
  transition: color .9s var(--ease);
}

.aw-year {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-year, var(--font-title));
  font-size: clamp(16px, 2rem, 22px);
  letter-spacing: .14em;
  color: var(--gold);
}
.aw-year i {
  width: 2.8rem;
  height: var(--hair);
  background: currentColor;
  opacity: .55;
}

a.aw-card:focus-visible { outline: var(--hair) solid var(--gold); outline-offset: .5rem; }

@media (hover: hover) {
  a.aw-card:hover { transform: translateY(-.8rem); }
  a.aw-card:hover .aw-medal { transform: rotate(-4deg) scale(1.04); }
}

/* On paper, before the dark takeover reaches the section. */
html:not(.is-night) .aw {
  --on-dark:        rgb(var(--dark-rgb) / .72);
  --line-dark:      rgb(var(--dark-rgb) / .12);
  --line-dark-lift: rgb(var(--dark-rgb) / .26);

  background-color: var(--paper);
}
html:not(.is-night) .aw-title    { color: var(--ink); }
html:not(.is-night) .aw-title em { color: #b8934e; }
html:not(.is-night) .aw-eyebrow,
html:not(.is-night) .aw-issuer,
html:not(.is-night) .aw-year     { color: #8a6526; }
html:not(.is-night) .aw-name     { color: var(--ink); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html:not(.is-night) .aw-item--platinum .aw-badge { background-image: linear-gradient(180deg, #8c9198 10%, #5d636b 60%, #3d4249 100%); }
  html:not(.is-night) .aw-item--gold .aw-badge     { background-image: linear-gradient(180deg, #c99a52 10%, #9a6a1f 60%, #6e4a12 100%); }
  html:not(.is-night) .aw-item--award .aw-badge    { background-image: linear-gradient(180deg, #b98647 10%, #8a5a22 60%, #5e3a12 100%); }
}

@media (max-width: 1200px) {
  .aw-title { font-size: 4.6rem; }
  .aw-card  { padding: 4.4rem 2.6rem 3.8rem; }
}

@media (max-width: 991px) {
  .aw { padding: 9rem 0 7rem; }
  .aw-title { font-size: 4rem; }
  .aw-list { grid-template-columns: minmax(0, 1fr); max-width: 52rem; justify-self: center; width: 100%; margin-top: 5rem; }
}

@media (max-width: 767px) {
  .aw { padding: 7rem 0 5rem; }
  .aw-title { font-size: 3.2rem; }
  .aw-lede  { font-size: 1.6rem; }
  .aw-list  { gap: 1.6rem; }
  .aw-card  { padding: 3.8rem 2.2rem 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-card, .aw-medal { transition: none; }
}