@import "./tokens.css?v=20261006";

/* ==========================================================================
   캐스크 아카이브 — 메인 스타일시트
   구조: 왼쪽 측면 색인(sticky) + 오른쪽 본문. 첫 화면은 캐스크 번호 목록이다.
   모션은 hover·focus 상태 전환만 둔다. 등장 모션·재질 필터는 없다.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-style: none;
  font-synthesis-weight: none;
}

body {
  min-height: 100dvh;
  background: var(--surface);
  color: var(--ink);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

/* 한글 조판 정본(typography §6-5) */
:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

:lang(ko) :is(p, li, dd, figcaption) {
  letter-spacing: 0;
}

:lang(ko) :is(h1, h2, h3) {
  line-height: var(--leading-tight);
  text-wrap: balance;
}

:lang(ko) :is(em, i, cite, dfn, address) {
  font-style: normal;
}

:lang(ko) em {
  font-weight: var(--weight-strong);
}

:lang(ko) a {
  text-underline-position: under;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-soft);
}

a:hover {
  color: var(--accent);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--ink);
}

strong {
  font-weight: var(--weight-strong);
}

.num {
  font-variant-numeric: tabular-nums;
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-6);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ── 스킵 링크 ── */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  font-weight: var(--weight-strong);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── 셸: 측면 색인 + 본문 ── */
.shell {
  display: grid;
  grid-template-columns: var(--index-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.index {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100dvh;
  overflow-y: auto;
  padding: var(--space-5) var(--space-4) var(--space-5) var(--pad-inline);
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.wordmark {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-display);
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
}

.wordmark-sub {
  display: block;
  white-space: normal;
  margin-top: var(--space-1);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.toc {
  margin-top: var(--space-5);
}

.toc summary {
  display: none;
}

/* 닫힌 차례의 링크는 content-visibility 로만 숨기지 않고 상자도 없앤다 — Chromium 에서 닫힌 details 안
   링크가 상자를 가진 채 UA 기본 색으로 계산되는 경우가 있었다(실렌더 감사 320 대비 1.93 오탐) */
.toc:not([open]) nav {
  display: none;
}

.toc ol {
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

.toc a {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  min-height: var(--control-block);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: 1.4;
  transition: color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft);
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  transition: color var(--dur-quick) var(--ease-soft);
}

.toc a:hover,
.toc a[aria-current] {
  color: var(--ink);
  border-left-color: var(--accent);
}

.toc a:hover::before,
.toc a[aria-current]::before {
  color: var(--accent);
}

.index-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
}

.index-foot p {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ── 본문 ── */
.content {
  grid-column: 2;
  min-width: 0;
  padding-inline: var(--pad-inline);
}

.section {
  max-width: var(--content-max);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--space-4);
}

.section:first-child {
  border-top: 0;
  padding-top: var(--space-5);
}

.section-head {
  margin-bottom: var(--space-5);
  max-width: var(--measure);
}

.section-head h2 {
  font-size: var(--step-2);
  margin-bottom: var(--space-2);
}

.section-head p {
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ── 첫 화면: 캐스크 목록 ── */
.ledger-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
}

.ledger-head h1 {
  font-size: var(--step-1);
  font-weight: var(--weight-display);
  max-width: var(--measure);
}

.ledger-head p {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.ledger-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.filter-btn-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-btn {
  min-height: var(--control-block);
  padding-inline: var(--control-pad-inline);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--step--1);
  transition: border-color var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft), background-color var(--dur-quick) var(--ease-soft);
}

.filter-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.filter-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.search-input {
  min-height: var(--control-block);
  min-width: 16rem;
  padding-inline: var(--control-pad-inline);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: var(--step--1);
  transition: border-color var(--dur-quick) var(--ease-soft);
}

.search-input::placeholder {
  color: var(--ink-muted);
}

.search-input:focus {
  border-color: var(--accent);
}

.ledger-table-wrap {
  /* 표 안의 sr-only(absolute) 가 스크롤 상자 밖으로 새어 문서 폭을 늘리지 않게 상자를 기준점으로 둔다(200% 확대 실측) */
  position: relative;
  overflow-x: auto;
  border-top: 1px solid var(--line-strong);
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--step--1);
  line-height: 1.5;
}

.ledger-table th {
  padding: var(--space-2) var(--space-2);
  color: var(--ink-muted);
  font-weight: var(--weight-regular);
  font-size: var(--step--1);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.ledger-table td {
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.ledger-table tbody tr {
  scroll-margin-top: var(--space-4);
  transition: background-color var(--dur-quick) var(--ease-soft);
}

.ledger-table tbody tr:hover {
  background: var(--surface-raised);
}

.ledger-table .cask-no {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--weight-display);
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
  width: 1%;
  padding-top: calc(var(--space-4) + 0.07em); /* 숫자 윗선을 증류소 이름의 대문자 윗선에 맞춘다(2x 실측 8px 차) */
  padding-right: var(--space-4);
}

.ledger-table .cask-name {
  display: block;
  font-size: var(--step-0);
  font-weight: var(--weight-strong);
  color: var(--ink);
  white-space: nowrap;
}

.ledger-table .distillery {
  min-width: 12rem;
}

.ledger-table .cask-sub {
  display: block;
  color: var(--ink-muted);
}

.ledger-table .abv {
  color: var(--ink);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

.ledger-table .bottles {
  white-space: nowrap;
}

.ledger-table .bottler {
  min-width: 7rem;
}

.ledger-table .cask-type {
  min-width: 9rem;
}

.ledger-table .notes {
  min-width: 11rem;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.ledger-table .act {
  text-align: right;
}

.ledger-table .act .btn-outline {
  min-height: var(--control-block);
}

/* ── 버튼 ── */
.btn-fill,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-block);
  padding-inline: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft);
}

.btn-fill {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}

.btn-fill:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

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

/* ── 그림: 원본 비율, 캡션은 옆 ── */
.figure-aside {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4) var(--space-5);
  align-items: start;
  margin: 0;
}

.figure-aside img {
  width: 100%;
  border: 1px solid var(--line);
}

.figure-aside figcaption {
  font-size: var(--step--1);
  color: var(--ink-muted);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.figure-aside figcaption strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-display);
}

.figure-aside.is-portrait {
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
}

.figure-aside.is-reverse figcaption {
  order: -1;
}

/* ── 정의 목록(사양·병입자) ── */
.spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4) var(--space-5);
}

.spec-list dt {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}

.spec-list dd {
  color: var(--ink);
}

.bottler-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.bottler-list li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.bottler-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-display);
  margin-bottom: var(--space-1);
}

.bottler-list p {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ── 도슨트 코스 ── */
.course-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.course-card {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  transition: border-color var(--dur-quick) var(--ease-soft);
}

.course-card:hover {
  border-top-color: var(--accent);
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.course-title {
  font-size: var(--step-1);
}

.course-price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-display);
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.course-card p {
  color: var(--ink-muted);
  font-size: var(--step--1);
  margin-bottom: var(--space-2);
}

.course-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--step--1);
  color: var(--ink);
}

.course-card .lineup-table {
  margin-top: var(--space-3);
}

.course-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.lineup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.lineup-table th,
.lineup-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.lineup-table th {
  color: var(--ink-muted);
  font-weight: var(--weight-regular);
}

.lineup-table td:first-child {
  font-family: var(--font-display);
  color: var(--accent);
  width: 2.5rem;
}

.lineup-table td:last-child {
  font-variant-numeric: tabular-nums;
}

/* ── 폼 ── */
.form-panel {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.form-panel h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-4);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}

.form-input {
  width: 100%;
  min-height: var(--control-block);
  padding-inline: var(--control-pad-inline);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--step-0);
  transition: border-color var(--dur-quick) var(--ease-soft);
}

.form-input::placeholder {
  color: var(--ink-muted);
}

.form-input:focus {
  border-color: var(--accent);
}

.form-panel .btn-fill {
  width: 100%;
  margin-top: var(--space-2);
}

.demo-notice {
  max-width: var(--measure);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: var(--accent-light);
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* ── 시음회 일정 ── */
.event-list {
  list-style: none;
  display: grid;
  gap: 0;
  margin-bottom: var(--space-6);
}

.event-item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.event-item:last-child {
  border-bottom: 1px solid var(--line);
}

.event-date {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  color: var(--accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.event-date small {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  color: var(--ink-muted);
}

.event-item h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-1);
}

.event-item p {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.newsletter {
  max-width: var(--measure);
}

.newsletter h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.newsletter p {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.newsletter-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.newsletter-form .form-input {
  flex: 1 1 auto;
}

/* ── 병입 정보 모달 ── */
.cert-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(90vw, 30rem);
  max-height: calc(100dvh - var(--space-5) * 2);
  padding: var(--space-5);
  background: var(--surface-card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: auto;
  overscroll-behavior: contain;
}

.cert-dialog::backdrop {
  background: rgba(20, 15, 13, 0.8);
}

.cert-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.cert-head h3 {
  font-size: var(--step-1);
}

.cert-close {
  min-width: var(--control-block);
  min-height: var(--control-block);
  color: var(--ink-muted);
  border-radius: var(--radius);
  transition: color var(--dur-quick) var(--ease-soft);
}

.cert-close:hover {
  color: var(--ink);
}

.cert-list {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  font-size: var(--step--1);
}

.cert-list dt {
  color: var(--ink-muted);
}

.cert-list dd {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cert-foot {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
}

html:has(dialog[open]) {
  overflow: hidden;
}

/* ── 푸터: 다열 색인 ── */
.site-foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line-strong);
  padding: var(--space-6) var(--pad-inline);
  background: var(--surface-sunken);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.foot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: calc(var(--index-width) + var(--content-max));
}

.foot-grid h2 {
  font-size: var(--step-0);
  margin-bottom: var(--space-3);
}

.foot-grid ul {
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

.foot-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--ink-muted);
}

.foot-grid a:hover {
  color: var(--accent);
}

.foot-grid p + p {
  margin-top: var(--space-2);
}

.foot-note {
  max-width: calc(var(--index-width) + var(--content-max));
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ── 반응형 ── */
@media (max-width: 1023px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .index {
    grid-column: 1;
    position: static;
    max-height: none;
    overflow: visible;
    padding: var(--space-3) var(--pad-inline);
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    align-items: center;
  }

  .wordmark {
    grid-column: 1;
  }

  .toc {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .toc summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-block);
    padding-inline: var(--space-3);
    margin-top: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--step--1);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
  }

  .toc summary::-webkit-details-marker {
    display: none;
  }

  .toc summary::before {
    content: "차례";
  }

  .toc[open] summary::before {
    content: "차례 닫기";
  }

  .toc ol {
    padding-block: var(--space-2);
  }

  /* 좁은 화면에서는 차례가 접히므로 색인 아래 요약·버튼을 숨긴다. 같은 행동은 차례와 푸터에 있다 */
  .index-foot {
    display: none;
  }

  .content {
    grid-column: 1;
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1399px) {
  /* 본문 폭이 1074px을 밑돌면 8열 표가 가로 스크롤을 만든다(1280 실측 1051px > 960px, 1366 실측 1056px > 1042px).
     행을 flex 줄바꿈 목록으로 바꾼다. 행은 그대로 tr 이므로 검색·분류 스크립트는 바뀌지 않는다 */
  .ledger-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .ledger-table,
  .ledger-table tbody,
  .ledger-table td {
    display: block;
  }

  .ledger-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--line);
  }

  .ledger-table td,
  .ledger-table .distillery,
  .ledger-table .bottler,
  .ledger-table .cask-type,
  .ledger-table .notes {
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .ledger-table .cask-name {
    white-space: normal;
  }

  .ledger-table .cask-no {
    flex: 0 0 11rem;
    width: auto;
    padding: 0;
  }

  .ledger-table .distillery {
    flex: 1 1 11rem;
  }

  .ledger-table .bottler,
  .ledger-table .cask-type {
    flex: 1 1 9rem;
    white-space: normal;
  }

  .ledger-table .abv,
  .ledger-table .bottles {
    flex: 0 1 5rem;
    white-space: normal;
  }

  .ledger-table .notes {
    flex: 1 1 20rem;
    margin-left: calc(11rem + var(--space-4));
  }

  .ledger-table .act {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: left;
  }

  .ledger-table td[data-label]:not(.distillery)::before {
    content: attr(data-label) " ";
    color: var(--ink-muted);
  }

  .two-col,
  .figure-aside,
  .figure-aside.is-portrait {
    grid-template-columns: minmax(0, 1fr);
  }

  .figure-aside.is-reverse figcaption {
    order: 0;
  }
}

@media (max-width: 600px) {
  .ledger-table .cask-no {
    flex-basis: auto;
  }

  .ledger-table .notes {
    margin-left: 0;
  }

  .search-input {
    min-width: 0;
    width: 100%;
  }

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

  .spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-header,
  .course-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .newsletter-form {
    flex-direction: column;
  }

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

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}