/* =====================================================================
 * 版面 v3（2026-10-29，User 指定）：恢復 v1 的編排與字型
 * （右起直書標題、英文章節小標、置中段落標題、頁碼），
 * 只把最像參考範例的兩樣換成自己的：水彩紙 → 棉紙、朱紅大圓 → 朱砂大方印「正域」；
 * 段落標題下的小紅點 → 「正」字筆畫。v2（橫書版，10-28 正式站）備份在 washi-src-v2/。
 * ===================================================================== */

/* 英文章節小標：很小、全大寫、字距很開 */
.wa-eyebrow {
  display: block;
  margin: 0 0 18px;
  font-family: var(--font-latin);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--soft);
}

/* 段落標題：英文小標 → 標題（電腦直書）→ 「正」字筆畫，置中 */
.section-title,
.svc-block .head,
.svc-end .head {
  text-align: center;
}

.wa-head {
  flex-direction: column;
  gap: 0;
  margin-bottom: clamp(40px, 5vw, 72px);
  text-align: center;
}

.wa-head .section-title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.5;
}

.wa-head .wa-tally {
  order: 3;
  width: 36px;
  height: 36px;
  margin-top: 22px;
}

@media (min-width: 900px) {
  .wa-head .section-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    max-height: 14em;
    line-height: 1.6;
    letter-spacing: 0.18em;
    text-align: start;
  }

  /* 直書時逗號後換欄；橫書（手機）時不換 */
  .wa-head .wa-br {
    display: inline;
  }
}

.wa-br {
  display: none;
}

/* ---------- 首頁開頭：右起直書標題 → 朱砂大方印 → 說明與按鈕 ---------- */
.intro {
  padding-block: clamp(56px, 8vw, 128px);
}

.intro__grid {
  display: flex;
  justify-content: center;
}

.intro__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40em;
  text-align: center;
}

.intro .hub {
  display: none;
}

.intro__title {
  font-size: clamp(1.625rem, 8vw, 2.25rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.intro .intro__lead {
  margin-inline: auto;
  margin-top: 28px;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--sumi);
}

.wa-catch {
  margin-top: 18px;
  letter-spacing: 0.12em;
}

.intro .intro__actions {
  justify-content: center;
}

.intro .intro__note {
  letter-spacing: 0.08em;
}

/* 大方印：方形、兩字由上往下、內外雙框，像真的蓋在紙上 */
.intro__text .wa-seal--hero {
  width: clamp(96px, 11vw, 168px);
  height: auto;
  aspect-ratio: 1;
  margin-top: 28px;
  padding: 0;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1;
  border-radius: 0.06em;
  box-shadow:
    inset 0 0 0 0.06em var(--shu),
    inset 0 0 0 0.11em rgb(255 248 242 / 0.85); /* taste-skill-ignore：印章內框 */
  transform: rotate(-3deg);
}

@media (min-width: 900px) {
  .intro__title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(2rem, 1rem + 1.8vw, 2.75rem);
    line-height: 1.75;
    letter-spacing: 0.16em;
    text-align: start;
  }

  .intro__text {
    display: grid;
    grid-template-columns: minmax(0, 30em) auto auto;
    grid-template-areas:
      "eyebrow seal title"
      "lead    seal title"
      "catch   seal title"
      "actions seal title"
      "note    seal title";
    align-items: center;
    align-content: center;
    column-gap: clamp(48px, 6vw, 112px);
    max-width: none;
    text-align: left;
  }

  .intro__text > .wa-eyebrow { grid-area: eyebrow; align-self: end; margin: 0; }
  .intro__text > .intro__title { grid-area: title; }
  .intro__text > .wa-seal--hero { grid-area: seal; margin: 0; }
  .intro__text > .intro__lead { grid-area: lead; margin: 20px 0 0; }
  .intro__text > .wa-catch { grid-area: catch; align-self: start; }
  .intro__text > .intro__actions { grid-area: actions; align-self: start; justify-content: flex-start; margin-top: 28px; }
  .intro__text > .intro__note { grid-area: note; align-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .intro .wa-eyebrow,
  .js .intro .wa-catch {
    animation: mo-rise 1000ms var(--ease-expo) backwards;
  }

  .js .intro .wa-catch { animation-delay: 900ms; }

  .js .intro__text .wa-seal--hero {
    animation: wa-stamp-hero 620ms cubic-bezier(0.3, 1.4, 0.5, 1) 900ms backwards;
  }
}

@keyframes wa-stamp-hero {
  from {
    opacity: 0;
    transform: rotate(-3deg) scale(1.45);
  }
}

/* 每段下方的頁碼：像書頁的頁腳 */
.wa-folio {
  display: block;
  margin-top: clamp(48px, 5vw, 80px);
  padding-inline: var(--margin);
  font-family: var(--font-latin), var(--font-serif);
  font-size: 0.875rem;
  letter-spacing: 0.32em;
  text-align: center;
  color: var(--soft);
}

@media (max-width: 599px) {
  .wa-head .section-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}

.wa-catch {
  text-wrap: balance;
}