/* 청담동 왕선생 — 공통 스타일
   근거: DESIGN.md (기획안 07 디자인 방향)
   종이 미색 바탕 + 먹색 본문 + 짙은 녹색 포인트, 제목 명조/본문 고딕 */

:root {
  --bg: #f5f1e8;
  --surface: #fffdf8;
  --soft: #ece5da;
  --text: #24231f;
  --muted: #746f66;
  --primary: #24453d;
  --primary-soft: #3a5f55;
  --line: #d8d0c4;
  --line-strong: #bcb4a8;
  --quote-bg: #f7f3ec;
  --max: 1120px;
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.35;
  margin: 0;
}

.container {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
}

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 241, 232, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.brand {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.18em;
  line-height: 1.2;
}

.gnb {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15.5px;
}

/* 버튼(.btn)은 제외한다 — .gnb a가 .btn-primary보다 특이도가 높아
   제외하지 않으면 CTA 글자가 muted 색으로 덮여 대비가 무너진다. */
.gnb a:not(.btn) { color: var(--muted); transition: color 0.2s; }
.gnb a:not(.btn):hover { color: var(--text); }
.gnb a:not(.btn)[aria-current="page"] { color: var(--primary); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;
  font-size: 15.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-soft); }

.intro-band .btn-primary,
.intro-band .btn-primary:link,
.intro-band .btn-primary:visited,
.intro-band .btn-primary:hover,
.intro-band .btn-primary:active { color: #fff !important; }

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-ghost:hover { background: var(--primary); color: #fff; }

.gnb .btn { padding: 9px 18px; font-size: 14.5px; }

/* 모바일 메뉴 버튼 */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 공통 섹션 ---------- */
section { padding: 72px 0; }

.section-eyebrow {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.section-title {
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -0.03em;
}

.section-lead {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--muted);
}

/* ---------- 히어로 ---------- */
.hero { padding: 0; border-bottom: 1px solid var(--line); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0;
}

.hero-copy h1 {
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.hero-copy .hero-sub {
  max-width: 480px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-figure { margin: 0; position: relative; }

.hero-figure img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(44, 39, 31, 0.1);
}

.hero-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

/* ---------- 카드 ---------- */
.card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { margin: 0; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ---------- 글 카드 ---------- */
.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.25s, box-shadow 0.25s;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(44, 39, 31, 0.1);
}

.article-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.article-card .article-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.article-card .article-card-meta {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 8px;
}

.article-card h3 { font-size: 20px; margin-bottom: 10px; }

.article-card p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15.5px;
  flex: 1;
}

.article-card .read-more {
  color: var(--primary);
  font-weight: 600;
  font-size: 14.5px;
}

/* ---------- 소개 밴드 ---------- */
.intro-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }

.intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.intro-grid img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
}

.intro-grid .intro-copy p { color: #4b4842; }

/* ---------- 상담 흐름 ---------- */
/* 상담 접수 흐름.
   간격을 --flow-gap 한 곳에서 관리하고 화살표를 그 간격의 정중앙에 놓는다.
   이전에는 gap:12px 에 right:-13px 를 손으로 맞춰, 좁은 틈에 화살표가 끼어
   양쪽 카드에 붙어 보였다. 이제 gap 을 바꾸면 화살표가 따라 움직인다. */
.flow {
  --flow-gap: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--flow-gap);
}

.flow-item {
  position: relative;
  padding: 24px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}

/* 화살표는 단계를 잇는 보조 기호다. 숫자(01~04)와 무게를 겨루지 않게 가늘게 둔다. */
.flow-item:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(100% + var(--flow-gap) / 2);
  transform: translate(-50%, -50%);
  color: var(--primary);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}

.flow-item strong {
  display: block;
  color: var(--primary);
  margin-bottom: 5px;
}

/* ---------- 글 상세 ----------
   폭은 목록·다른 화면과 같은 .container 폭을 쓴다(사이트 전체 폭 통일, 2026-08-05). */
.article-page {
  margin: 0 auto;
  padding: 64px 0 80px;
}

.article-category { color: var(--primary); font-size: 14px; font-weight: 700; }

.article-page h1 {
  margin: 12px 0 10px;
  font-size: clamp(28px, 4.6vw, 40px);
  letter-spacing: -0.03em;
}

.article-meta { color: var(--muted); font-size: 14px; }

.article-summary {
  margin: 30px 0;
  padding: 22px 24px;
  background: var(--soft);
  border-radius: 12px;
  font-size: 16px;
}

.article-summary strong { display: block; margin-bottom: 6px; color: var(--primary); }

.article-body { color: #4b4842; }

.article-body h2 {
  margin: 40px 0 14px;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text);
}

.article-body p { margin: 0 0 18px; }

.article-quote {
  margin: 36px 0;
  padding: 24px 26px;
  border-left: 4px solid var(--primary);
  background: var(--quote-bg);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
}

.article-footer-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ---------- 상담 CTA 밴드 ---------- */
.consult-band {
  background: var(--primary);
  color: #f2ede2;
  text-align: center;
}

.consult-band h2 { color: #fffdf8; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -0.02em; }

.consult-band p { max-width: 560px; margin: 16px auto 0; color: #cfddd6; }

.consult-band .hero-actions { justify-content: center; }

.consult-band .btn-primary,
.consult-band .btn-primary:link,
.consult-band .btn-primary:visited { background: #fffdf8; color: var(--primary) !important; }
.consult-band .btn-primary:hover,
.consult-band .btn-primary:active { background: var(--soft); color: var(--primary) !important; }

.consult-band .btn-ghost { color: #f2ede2; border-color: rgba(255, 253, 248, 0.55); }
.consult-band .btn-ghost:hover { background: rgba(255, 253, 248, 0.12); color: #fff; }

/* ---------- 폼 ---------- */
.form-card {
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.form-row { margin-bottom: 20px; }

.form-row label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
}

.form-row label .req { color: #a3542f; }

.form-row input[type="text"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid rgba(36, 69, 61, 0.35);
  outline-offset: 1px;
  border-color: var(--primary);
}

.form-row textarea { min-height: 140px; resize: vertical; }

.form-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: var(--soft);
  border-radius: 10px;
  font-size: 14.5px;
  color: #544b3e;
}

.form-agree input { margin-top: 4px; accent-color: var(--primary); }

.form-agree a { color: var(--primary); text-decoration: underline; }

.form-error {
  display: none;
  background: #f3e4dc;
  border: 1px solid #d9b8a5;
  border-radius: 10px;
  color: #7c3f1d;
  font-size: 14.5px;
}

/* 플랫폼 base.css의 .editorOutput p { margin:0; padding:3px 0 } 는 특이도(0,1,1)가
   .form-error(0,1,0)보다 높아 로딩 순서와 무관하게 항상 이긴다.
   .editorOutput .form-error(0,2,0)로 특이도를 올려서 이긴다. */
.editorOutput .form-error { margin: 16px 0 0; padding: 12px 16px; }

.form-error.show { display: block; }

.form-success {
  display: none;
  padding: 40px 24px;
  text-align: center;
}

.form-success.show { display: block; }

.form-success h3 { font-size: 24px; margin-bottom: 12px; color: var(--primary); }
.form-success p { color: var(--muted); margin: 0; }

/* ---------- 안내 노트 ---------- */
.note {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid #c6b89f;
  border-radius: 12px;
  background: #efe8dc;
  color: #544b3e;
  font-size: 15.5px;
}

.note strong { color: #3d372c; }

/* ---------- 서브페이지 헤더 ---------- */
/* 서브페이지 상단 타이틀.
   배경 이미지는 각 페이지가 --page-head-image 로 넣는다(없으면 기존처럼 미색 바탕).
   이미지는 background-size:cover 로 잘라 쓰므로 생성물의 정확한 비율에 의존하지 않는다. */
.page-head {
  position: relative;
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

/* 배경이 있는 헤더.
   - 밝기: 미색 바탕(--bg) 위에 이미지를 --page-head-dim 만큼만 얹는다.
     이 한 값으로 전체 밝기를 조절한다(낮추면 밝아진다).
   - 폭: 화면 전체폭(full-bleed)으로 흘린다. 콘텐츠만 .container 폭에 들어가고
     배경 띠는 좌우 끝까지 닿는다 — 상단 배너는 가둬 두면 답답해 보인다.
   - 띠 자체가 아래에서 끊기며 경계가 되므로 전체폭 구분선은 지운다. */
.page-head.has-bg {
  --page-head-dim: 0.5;
  padding: 84px 0 64px;
  border-bottom: 0;
}

/* 배경 레이어를 별도 요소로 둔다 — 제목까지 함께 확대되지 않게 하려는 것이다. */
.page-head.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--page-head-image, none);
  background-size: cover;
  /* 하단 정렬. 배너 이미지는 피사체(마루·소반·벼루)를 아래쪽에 낮게 깔고 위를 비운
     파노라마 구도다. cover 가 세로를 잘라낼 때 위쪽 여백만 깎이도록 아래를 붙인다
     (가운데 정렬로 두면 피사체가 잘려 "짤린 느낌"이 난다). */
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: var(--page-head-dim);
}

/* 스크림. 좌측만 미색으로 덮어 명조 제목 가독성을 지키고, 우측은 사진을 남긴다.
   배너 좌측 상단은 원래 빈 벽·하늘이라 예전만큼 강하게 가릴 필요가 없다. */
.page-head.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 전체폭이라 제목은 화면 좌측 끝이 아니라 container 안쪽(넓은 화면에서 20% 지점부터)에
     놓인다. 그래서 강한 구간을 중간까지 길게 끌어 제목이 지나는 자리를 덮는다. */
  background: linear-gradient(100deg,
    rgba(245, 241, 232, 0.88) 0%,
    rgba(245, 241, 232, 0.78) 35%,
    rgba(245, 241, 232, 0.55) 62%,
    rgba(245, 241, 232, 0.26) 85%,
    rgba(245, 241, 232, 0.10) 100%);
}

/* 서브페이지 제목.
   예전 clamp(30px, 5vw, 46px) 은 기울기가 급해 창 너비에 따라 30~46px(53%)까지 출렁였다.
   660px 창에서 33px, 800px 창에서 40px 이 되어 페이지마다 제목 크기가 달라 보였다.
   기울기를 낮추고 최대값에 일찍 도달하게 해서 약 1070px 이상 화면에서는 항상 44px 로
   고정된다 — 데스크탑에서 페이지 간 제목 크기가 어긋나지 않는다. */
.page-head h1 {
  font-size: clamp(32px, calc(3vw + 12px), 44px);
  letter-spacing: -0.04em;
}

.page-head .section-lead { margin-top: 14px; }

/* 배경 등장 — 1회만. 스크롤 패럴랙스나 반복 확대는 쓰지 않는다(톤을 깎는다).
   .reveal 과 달리 JS 없이 동작하지만, 애니메이션 대상이 배경 레이어뿐이라
   실패해도 콘텐츠가 숨지 않는다(::before 는 opacity 1 로 끝난다). */
/* 끝 투명도는 --page-head-dim 과 같은 값이어야 애니메이션이 끝난 뒤 밝기가 튀지 않는다.
   (배경이 전체폭이 되어 가운데 정렬용 translateX 는 더 필요하지 않다.) */
@keyframes pageHeadIn {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: var(--page-head-dim); transform: none; }
}

.page-head.has-bg::before {
  animation: pageHeadIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---------- 개인정보처리방침 ----------
   폭은 다른 화면과 같은 .container 폭을 쓴다(사이트 전체 폭 통일, 2026-08-05).
   시안은 760px 로 좁혔지만 운영에서 모든 페이지 폭을 맞추기로 했다. */
.legal {
  margin: 0 auto;
  padding: 56px 0 80px;
}

.legal h2 { font-size: 21px; margin: 36px 0 12px; }
.legal p, .legal li { color: #4b4842; font-size: 15.5px; }
.legal ul { padding-left: 22px; margin: 0 0 14px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 16px 0 24px;
}
.legal th, .legal td {
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal th { background: var(--soft); font-weight: 600; }

/* 플랫폼 base.css의 .editorOutput th/td { padding:0 } 가 특이도가 같아
   app.css보다 뒤에 로드되며 이 padding을 0으로 덮는다(위 .editorOutput 타이포 복구와 같은 문제).
   body .editorOutput .legal ... 로 특이도를 올려서 이긴다. */
body .editorOutput .legal th,
body .editorOutput .legal td { padding: 16px 20px; }

/* ---------- 푸터 ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 14px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.footer-brand { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--text); }

.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--text); }

.footer-note { width: 100%; margin: 6px 0 0; font-size: 13px; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .gnb {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }

  .gnb.open { display: flex; }

  /* 구분선은 실제 내비 링크에만 준다. .btn까지 포함하면
     :last-of-type이 버튼을 가리켜 마지막 메뉴에 선이 남는다. */
  .gnb a:not(.btn) { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .gnb a:not(.btn):last-of-type { border-bottom: 0; }
  .gnb .btn { margin-top: 14px; justify-content: center; }

  .menu-toggle { display: flex; }

  .hero-grid,
  .intro-grid { grid-template-columns: 1fr; gap: 28px; }

  .hero-figure img { height: 320px; }
  .intro-grid img { height: 260px; }

  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }

  /* 줄바꿈이 생기면 화살표가 가리키는 방향이 어긋나므로 숨긴다.
     화살표가 없어지는 만큼 간격도 다른 그리드와 같은 18px 로 좁힌다
     (넓은 간격은 화살표를 놓기 위한 것이었다). */
  .flow { --flow-gap: 18px; grid-template-columns: 1fr 1fr; }
  .flow-item::after { display: none; }
}

@media (max-width: 560px) {
  .container { width: min(calc(100% - 28px), var(--max)); }

  section { padding: 48px 0; }
  .hero-grid { padding: 44px 0 48px; }
  .page-head { padding: 44px 0 36px; }

  .grid-2, .grid-3, .grid-4, .flow { grid-template-columns: 1fr; }

  .hero-figure img { height: 260px; }
  .form-card { padding: 22px; }
  .article-page { padding: 44px 0 60px; }
}

/* ---------- 플랫폼 페이지 모듈(.editorOutput) 타이포 복구 ----------
   /page/{code} 는 page_contents 를 플랫폼 페이지 모듈의 .editorOutput 컨테이너 안에 넣는다.
   그 플랫폼 CSS 는 app.css 보다 뒤에 로드되면서 다음을 강제한다(2026-08-05 실측):
     .editorOutput, .editorOutput th, .editorOutput td { font-size:13px; font-family:'apple SD gothic neo',... }
     .editorOutput p                                   { font-size:13px; font-family:'apple SD gothic neo',... }
   그래서 서브페이지(about·consult·privacy)의 모든 문단이 13px 애플고딕으로 나와
   게시판 페이지(17px Pretendard)와 어긋났다. 제목류는 app.css 에 크기가 명시돼 살아남았다.

   `.editorOutput p` 는 특이도 (0,1,1) 이므로 앞에 body 를 붙여 (0,1,2) 로 이긴다.
   크기는 고정값이 아니라 inherit 로 되돌려, 컴포넌트별 설계값을 덮지 않게 한다. */
body .editorOutput,
body .editorOutput p,
body .editorOutput li,
body .editorOutput td,
body .editorOutput th {
  font-family: var(--sans);
  font-size: inherit;
  line-height: inherit;
}

/* 위 inherit 규칙(0,1,2)에 가려지는 "크기를 따로 정해둔" 문단만 설계값을 다시 세운다.
   클래스를 하나 더 써서 (0,2,2) 로 올린 것이다. 새 컴포넌트에 고유 크기를 줄 때는
   여기에도 추가해야 한다. */
body .editorOutput p.section-eyebrow { font-size: 13.5px; }
body .editorOutput p.form-error { font-size: 14.5px; }
body .editorOutput .legal p,
body .editorOutput .legal li { font-size: 15.5px; }
body .editorOutput .article-card p { font-size: 15.5px; }

/* ---------- 스크롤 등장 애니메이션 ----------
   .reveal 은 app.js 가 붙인다. JS 가 없거나 IntersectionObserver 미지원,
   또는 prefers-reduced-motion 이면 클래스가 붙지 않아 콘텐츠가 그대로 보인다
   (숨은 채로 남는 사고를 막기 위한 설계다). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .article-card, .btn, .menu-toggle span { transition: none; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-head.has-bg::before { animation: none; }
}