/* ==========================================================================
   sections.css — page composition.

   Hero banner · the main + sidebar column layout · feature grids · books ·
   publications · courses · videos · gallery · contact · footer.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   Hero banner
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  padding-block: var(--sp-6) 0;
}

.hero__slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-block-size: clamp(18rem, 34vw, 24rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(
    to var(--flow-to-end, left),
    var(--surface-alt),
    var(--sand)
  );
}

/* Portrait sits at the reading edge, as in the reference */
.hero__portrait {
  position: relative;
  justify-self: start;
  inline-size: min(100%, 18rem);
}

.hero__portrait img {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

.hero__body {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
}

.hero__title {
  font-family: var(--font-read);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--fg-strong);
}

.hero__name {
  color: var(--accent);
}

.hero__text {
  font-size: var(--fs-md);
  line-height: var(--lh-read);
  color: var(--fg-mute);
  max-inline-size: 44ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}

/* Figures strip under the banner */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-4);
  margin-block-start: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.figure {
  display: grid;
  gap: var(--sp-1);
  justify-items: center;
  text-align: center;
}

.figure__value {
  font-family: var(--font-read);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.figure__label {
  font-size: var(--fs-3xs);
  color: var(--fg-faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   Main + sidebar layout
   ══════════════════════════════════════════════════════════════════════════ */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: var(--section-y);
}

.layout__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-y);
  min-inline-size: 0;
}

/* The sidebar tracks the reader on tall screens only — sticky on a short
   viewport would trap the widgets mid-scroll. */
@media (min-width: 69rem) and (min-height: 46rem) {
  .layout__side {
    position: sticky;
    inset-block-start: calc(var(--nav-h) + var(--sp-4));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Section heads
   ══════════════════════════════════════════════════════════════════════════ */
.head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-3);
  border-block-end: 2px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

.head__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--fg-strong);
}

.head__title svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Grids
   ══════════════════════════════════════════════════════════════════════════ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-4);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   Library list — filters + article rows
   ══════════════════════════════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--fg-mute);
  transition: background-color var(--d-1), color var(--d-1), border-color var(--d-1);
}

.filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-scrim);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: min(100%, 14rem);
}

.search-box svg {
  position: absolute;
  inset-inline-start: var(--sp-3);
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--fg-faint);
  pointer-events: none;
}

.search-box input {
  inline-size: 100%;
  padding: var(--sp-2) var(--sp-4);
  padding-inline-start: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-faint);
}

.is-filtered {
  display: none;
}

.empty {
  grid-column: 1 / -1;
  padding: var(--sp-8);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--fg-faint);
}

/* Paper row — a compact horizontal record for the library list */
.paper {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color var(--d-1), box-shadow var(--d-2), transform var(--d-2) var(--e-out);
}

.paper:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.paper__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.paper__icon svg {
  inline-size: 1.3rem;
  block-size: 1.3rem;
}

.paper__title {
  font-family: var(--font-read);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.paper__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.paper__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-3xs);
  color: var(--fg-faint);
}

.paper__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.paper__meta svg {
  inline-size: 0.8rem;
  block-size: 0.8rem;
}

/* Download chip has to outrank the row's stretched link */
.paper__file {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--fg-mute);
  white-space: nowrap;
  transition: background-color var(--d-1), color var(--d-1), border-color var(--d-1);
}

.paper__file svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
}

.paper__file:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-scrim);
}

/* The download and save controls travel together in the trailing column, so
   the row keeps its three-column grid whether or not a file exists. */
.paper__tools {
  position: relative;
  z-index: 2; /* above the title's stretched link */
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.paper__save {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--fg-faint);
  transition: color var(--d-1), border-color var(--d-1), background-color var(--d-1),
    transform var(--d-1) var(--e-out);
}

.paper__save svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: none;
  transition: fill var(--d-1);
}

.paper__save:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-1px);
}

/* Pressed means saved: the bookmark fills in. */
.paper__save[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.paper__save[aria-pressed="true"] svg {
  fill: currentColor;
}

.paper__save:disabled {
  opacity: 0.5;
}

.paper__size {
  padding-inline-start: var(--sp-2);
  margin-inline-start: var(--sp-2);
  border-inline-start: 1px solid var(--border);
  font-weight: 500;
  color: var(--fg-faint);
}

.paper__file:hover .paper__size {
  color: inherit;
  border-inline-start-color: color-mix(in srgb, var(--on-scrim) 40%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Updates carousel
   ══════════════════════════════════════════════════════════════════════════ */
.updates .carousel__slide {
  padding-inline-end: var(--sp-4);
}

.update {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-block-size: 100%;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  /* The wash leans away from the reading edge in both directions, so the
     card opens toward the text rather than against it. */
  background:
    linear-gradient(
      to var(--flow-to-end, left) bottom,
      color-mix(in srgb, var(--accent) 7%, transparent),
      transparent 62%
    ),
    var(--surface);
}

.update__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.update__badge {
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: var(--fs-3xs);
  font-weight: 700;
}

.update__date {
  font-size: var(--fs-3xs);
  color: var(--fg-faint);
}

.update__title {
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: balance;
}

.update__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-read);
  color: var(--fg-mute);
  max-inline-size: var(--measure);
}

@media (max-width: 44rem) {
  .update {
    padding: var(--sp-4);
  }

  .update__title {
    font-size: var(--fs-md);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Books
   ══════════════════════════════════════════════════════════════════════════ */
/* Each book sits inside a carousel slide; the slide supplies the width and
   this supplies the gutter between them. */
.books .carousel__slide {
  padding-inline-end: var(--sp-4);
}

.book {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.book__cover {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2);
}

.book:hover .book__cover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
}

.book__cover img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.book__title {
  font-family: var(--font-read);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.book__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--fg-faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   Publications
   ══════════════════════════════════════════════════════════════════════════ */
.pubs {
  display: grid;
  gap: var(--sp-3);
}

.pub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  transition: background-color var(--d-1);
}

.pub:hover {
  background: var(--surface-alt);
}

.pub__year {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--accent);
}

.pub__title {
  font-family: var(--font-read);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.pub__where {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--fg-faint);
}

.pub__type {
  font-size: var(--fs-3xs);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Courses
   ══════════════════════════════════════════════════════════════════════════ */
.course {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color var(--d-1), box-shadow var(--d-2), transform var(--d-2) var(--e-out);
}

.course:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.course__date {
  display: grid;
  place-items: center;
  gap: 0.1rem;
  inline-size: 3.75rem;
  block-size: 3.75rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-scrim);
  flex-shrink: 0;
}

.course__day {
  font-family: var(--font-read);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
}

.course__month {
  font-size: var(--fs-3xs);
  opacity: 0.9;
}

.course__title {
  font-family: var(--font-read);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--fg-strong);
}

.course__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-1);
  font-size: var(--fs-3xs);
  color: var(--fg-faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   Videos
   ══════════════════════════════════════════════════════════════════════════ */
.video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink);
  box-shadow: var(--sh-1);
}

.video img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: sepia(0.4) saturate(1.1);
  transition: transform var(--d-4) var(--e-out), opacity var(--d-2), filter var(--d-2);
}

.video:hover img {
  transform: scale(1.05);
  opacity: 0.55;
  filter: sepia(0) saturate(1);
}

.video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  color: var(--on-scrim);
  transition: transform var(--d-2) var(--e-spring);
}

.video:hover .video__play {
  transform: translate(-50%, -50%) scale(1.12);
}

.video__play svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  transform: scaleX(var(--flow-scale, 1));
}

.video__label {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(transparent, color-mix(in srgb, #1b1209 88%, transparent));
  color: var(--on-scrim);
  display: grid;
  gap: var(--sp-1);
}

.video__title {
  font-family: var(--font-read);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.video__time {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  opacity: 0.75;
}

/* ══════════════════════════════════════════════════════════════════════════
   Gallery
   ══════════════════════════════════════════════════════════════════════════ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--sp-3);
}

.gallery__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: var(--sh-1);
}

.gallery__item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: sepia(0.4) saturate(1.1);
  transition: transform var(--d-4) var(--e-out), filter var(--d-2);
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
  transform: scale(1.06);
  filter: sepia(0) saturate(1);
}

.gallery__item figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: linear-gradient(transparent, color-mix(in srgb, #1b1209 82%, transparent));
  color: var(--on-scrim);
  font-size: var(--fs-3xs);
  opacity: 0;
  transition: opacity var(--d-2);
}

.gallery__item:hover figcaption,
.gallery__item:focus-visible figcaption {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   About
   ══════════════════════════════════════════════════════════════════════════ */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.about__portrait img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  filter: sepia(0.35) saturate(1.1);
  transition: filter var(--d-3);
}

.about__portrait:hover img {
  filter: sepia(0) saturate(1);
}

.about__text {
  display: grid;
  gap: var(--sp-4);
}

.about__text p {
  font-size: var(--fs-base);
  line-height: var(--lh-read);
  color: var(--fg);
  max-inline-size: var(--measure);
}

.record {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}

.record__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--border-soft);
}

.record__year {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--accent);
}

.record__title {
  font-weight: 700;
  color: var(--fg-strong);
}

.record__org {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--fg-faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact
   ══════════════════════════════════════════════════════════════════════════ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.form-grid > .field--full {
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--surface);
  border-block-start: 1px solid var(--border-soft);
  padding-block: var(--sp-8) var(--sp-5);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-6);
}

.footer__brand {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.footer__blurb {
  font-size: var(--fs-sm);
  line-height: var(--lh-read);
  color: var(--fg-mute);
  max-inline-size: 34ch;
}

.footer__col h3 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--sp-3);
}

.footer__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.footer__list a,
.footer__list button {
  color: var(--fg-mute);
  text-align: start;
  transition: color var(--d-1);
}

.footer__list a:hover,
.footer__list button:hover {
  color: var(--accent);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border-soft);
  font-size: var(--fs-2xs);
  color: var(--fg-faint);
}

/* Quiet by design — an ordinary visitor has no reason to click it, and the
   page it leads to is its own gate (auth.py never trusts this link). */
.footer__admin {
  color: var(--fg-faint);
  opacity: 0.7;
  transition: opacity var(--d-1), color var(--d-1);
}

.footer__admin:hover,
.footer__admin:focus-visible {
  opacity: 1;
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 68rem) {
  .layout {
    grid-template-columns: 1fr;
  }

  .about,
  .contact {
    grid-template-columns: 1fr;
  }

  .about__portrait {
    max-inline-size: 22rem;
  }
}

@media (max-width: 52rem) {
  .hero__slide {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hero__portrait {
    justify-self: center;
    inline-size: min(100%, 13rem);
  }

  .hero__body {
    justify-items: center;
  }

  .hero__actions {
    justify-content: center;
  }
}

@media (max-width: 44rem) {
  .paper {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .paper__tools {
    grid-column: 1 / -1;
    justify-self: start;
  }

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

  .course > .btn {
    grid-column: 1 / -1;
  }

  .pub {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }

  .pub__type {
    justify-self: start;
  }

  .record__row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) {
  .gallery__item figcaption {
    opacity: 1;
  }

  .gallery__item img,
  .about__portrait img,
  .video img {
    filter: none;
  }
}