/* 德耀宮 Tak Yiu Temple — landing page
   Implemented from the Claude Design source "德耀宮 Landing Page.dc.html". */

:root {
  --ty-cream:          #F4EEE2;
  --ty-cream-card:     #FBF7EE;
  --ty-ink:            #241C17;
  --ty-crimson:        #6E1113;
  --ty-crimson-deep:   #5A0D0F;
  --ty-crimson-black:  #4A0C0E;
  --ty-red:            #9B1A20;
  --ty-gold:           #C79A3E;
  --ty-gold-soft:      #E9D9B4;
  --ty-on-red:         #F2E8D4;
  --ty-on-red-head:    #F3E7CC;

  --ty-serif:  "Noto Serif TC", "Songti TC", serif;
  --ty-sans:   "Noto Sans TC", "PingFang TC", sans-serif;
  --ty-latin:  "Cormorant Garamond", serif;

  --ty-shell:  1280px;
  --ty-inner:  1180px;
  --ty-gutter: clamp(20px, 5vw, 32px);
}

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

html, body { margin: 0; padding: 0; background: var(--ty-cream); }

body {
  font-family: var(--ty-sans);
  color: var(--ty-ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--ty-red); text-decoration: none; }
a:hover { color: var(--ty-gold); }

h1, h2, h3, p, dl, dd, figure { margin: 0; }
dt, dd { margin: 0; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--ty-gold); outline-offset: 3px; }

/* Keep in-page anchors clear of the sticky header. */
:target { scroll-margin-top: 96px; }

@keyframes tyRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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

.ty-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 22px;
  background: var(--ty-gold);
  color: var(--ty-crimson-black);
  font-size: 14px;
  letter-spacing: 0.18em;
}
.ty-skip:focus { left: 0; color: var(--ty-crimson-black); }

/* overflow-x must be `clip`, not `hidden`: `hidden` forces overflow-y to compute
   to `auto`, which makes this element a scroll container and retargets the sticky
   header's scrollport away from the viewport — the header then scrolls away with
   the page. `clip` trims the same horizontal overflow without that side effect.
   The `hidden` line stays as the fallback for browsers predating `clip`. */
.ty-page {
  background: var(--ty-cream);
  overflow-x: hidden;
  overflow-x: clip;
}

/* ------------------------------------------------------------------ header */

.ty-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(110, 17, 19, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(199, 154, 62, 0.35);
}

.ty-header__inner {
  max-width: var(--ty-shell);
  margin: 0 auto;
  padding: 14px clamp(18px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ty-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ty-on-red);
}
.ty-brand:hover { color: var(--ty-on-red); }

.ty-brand__mark { width: 42px; height: 42px; display: block; }

.ty-brand__names { display: flex; flex-direction: column; line-height: 1.1; }

.ty-brand__zh {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.22em;
  color: var(--ty-gold-soft);
}

.ty-brand__en {
  font-family: var(--ty-latin);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  color: rgba(233, 217, 180, 0.6);
  text-transform: uppercase;
}

.ty-nav {
  display: flex;
  align-items: center;
  gap: clamp(15px, 2.3vw, 34px);
  font-size: 14.5px;
  letter-spacing: 0.14em;
  color: rgba(242, 232, 212, 0.86);
}

.ty-nav__link { color: inherit; }
.ty-nav__link:hover { color: var(--ty-gold); }

.ty-nav__cta {
  padding: 10px 22px;
  border: 1px solid var(--ty-gold);
  color: var(--ty-gold-soft);
  letter-spacing: 0.2em;
  font-size: 13px;
  transition: background-color 160ms ease, color 160ms ease;
}
.ty-nav__cta:hover { background: var(--ty-gold); color: var(--ty-crimson-black); }

.ty-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(199, 154, 62, 0.6);
  color: var(--ty-gold-soft);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.24em;
  padding: 12px 18px;
  min-height: 46px;
  cursor: pointer;
}
.ty-menu-btn:hover { border-color: var(--ty-gold); }

.ty-mobile-nav {
  border-top: 1px solid rgba(199, 154, 62, 0.3);
  padding: 10px clamp(18px, 4vw, 32px) 22px;
  display: flex;
  flex-direction: column;
  font-size: 15.5px;
  letter-spacing: 0.16em;
  color: rgba(242, 232, 212, 0.9);
}
.ty-mobile-nav[hidden] { display: none; }

.ty-mobile-nav__link {
  color: inherit;
  padding: 15px 0;
  border-bottom: 1px solid rgba(199, 154, 62, 0.18);
}
.ty-mobile-nav__link:hover { color: var(--ty-gold); }

.ty-mobile-nav__cta {
  margin-top: 18px;
  text-align: center;
  padding: 15px 22px;
  background: var(--ty-gold);
  color: var(--ty-crimson-black);
  letter-spacing: 0.2em;
  font-size: 14px;
}
.ty-mobile-nav__cta:hover { background: var(--ty-gold-soft); color: var(--ty-crimson-black); }

/* Matches the source's `window.innerWidth < 900` narrow/wide switch. */
@media (max-width: 899px) {
  .ty-nav { display: none; }
  .ty-menu-btn { display: block; }
}

/* --------------------------------------------------------- shared elements */

.ty-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  letter-spacing: 0.42em;
}
.ty-eyebrow__rule { width: 46px; height: 1px; display: block; flex: none; }

.ty-eyebrow--gold { color: rgba(199, 154, 62, 0.95); }
.ty-eyebrow--gold .ty-eyebrow__rule { background: var(--ty-gold); }

.ty-eyebrow--red { font-size: 12px; color: var(--ty-red); }
.ty-eyebrow--red .ty-eyebrow__rule { width: 38px; background: var(--ty-red); }

.ty-kicker { font-size: 12px; letter-spacing: 0.42em; color: var(--ty-gold); }

.ty-h2 {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: 0.1em;
  color: var(--ty-ink);
}
.ty-h2--tall {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-wrap: pretty;
}
.ty-h2--light { letter-spacing: 0.12em; color: var(--ty-on-red-head); }

.ty-p {
  font-size: clamp(15.5px, 1.5vw, 17px);
  line-height: 2.15;
  letter-spacing: 0.06em;
  color: rgba(36, 28, 23, 0.78);
  text-wrap: pretty;
}
.ty-p--onRed {
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 2;
  letter-spacing: 0.1em;
  color: rgba(242, 232, 212, 0.72);
}
.ty-p--centered { max-width: 34em; }

.ty-btn {
  padding: 17px 36px;
  font-size: 15px;
  letter-spacing: 0.22em;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.ty-btn--gold {
  background: var(--ty-gold);
  color: var(--ty-crimson-black);
  font-weight: 500;
}
.ty-btn--gold:hover { background: var(--ty-gold-soft); color: var(--ty-crimson-black); }

.ty-btn--ghost {
  border: 1px solid rgba(199, 154, 62, 0.6);
  color: var(--ty-gold-soft);
}
.ty-btn--ghost:hover {
  border-color: var(--ty-gold);
  background: rgba(199, 154, 62, 0.12);
  color: var(--ty-gold-soft);
}

.ty-underline {
  color: var(--ty-gold-soft);
  border-bottom: 1px solid rgba(199, 154, 62, 0.45);
  align-self: flex-start;
  padding-bottom: 2px;
}
.ty-underline:hover { color: var(--ty-gold); }

/* -------------------------------------------------------------------- hero */

.ty-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  background: var(--ty-crimson);
  color: var(--ty-on-red);
  overflow: hidden;
}

.ty-hero__glow {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: radial-gradient(120% 90% at 78% 10%, rgba(199, 154, 62, 0.30), rgba(110, 17, 19, 0) 62%);
}

.ty-hero__body {
  position: relative;
  min-height: min(700px, 88vh);
  padding: clamp(64px, 9vw, 104px) clamp(22px, 6vw, 72px) clamp(56px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 3.4vw, 40px);
  animation: tyRise 900ms ease both;
}

.ty-hero__title {
  font-family: var(--ty-serif);
  font-weight: 900;
  font-size: clamp(58px, 11vw, 118px);
  line-height: 1.02;
  letter-spacing: 0.06em;
  color: var(--ty-on-red-head);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.ty-hero__lede {
  font-family: var(--ty-serif);
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: 2;
  letter-spacing: 0.18em;
  color: rgba(242, 232, 212, 0.9);
  max-width: 20em;
  text-wrap: pretty;
}

.ty-hero__words {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 26px);
  font-size: 13.5px;
  letter-spacing: 0.34em;
  color: rgba(233, 217, 180, 0.72);
}
.ty-dot { color: var(--ty-gold); }

.ty-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.ty-hero__seal {
  position: relative;
  background: var(--ty-crimson-deep);
  min-height: min(56vw, 420px);
  padding: clamp(40px, 7vw, 72px) 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(199, 154, 62, 0.28);
}
.ty-hero__seal img { width: min(62%, 460px); height: auto; }

/* ------------------------------------------------------------ announcement */

.ty-announce {
  background: var(--ty-crimson-black);
  color: rgba(242, 232, 212, 0.82);
  border-top: 1px solid rgba(199, 154, 62, 0.28);
}

.ty-announce__inner {
  max-width: var(--ty-shell);
  margin: 0 auto;
  padding: 20px clamp(18px, 4vw, 32px);
  display: flex;
  gap: clamp(14px, 3vw, 40px);
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.ty-announce__label { color: var(--ty-gold); letter-spacing: 0.3em; font-size: 12px; }

.ty-announce__link {
  color: var(--ty-gold-soft);
  border-bottom: 1px solid rgba(199, 154, 62, 0.5);
}
.ty-announce__link:hover { color: var(--ty-gold); }

/* ------------------------------------------------------------------- about */

.ty-about {
  padding: clamp(72px, 10vw, 132px) var(--ty-gutter);
  background: var(--ty-cream);
}

.ty-about__inner {
  max-width: var(--ty-inner);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.ty-photo {
  position: relative;
  margin: 0;
  border: 1px solid rgba(36, 28, 23, 0.12);
  overflow: hidden;
}
.ty-photo--portrait { aspect-ratio: 4 / 5; }

/* The photo is 2:3, so it is cropped into the 4:5 frame. Anchored to the top
   so the deity's crown stays intact; the blurred foreground takes the crop. */
.ty-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Placeholder state, for frames still awaiting photography. */
.ty-photo--empty {
  background: repeating-linear-gradient(135deg, #E4D9C2 0 14px, #EFE6D2 14px 28px);
  display: flex;
  align-items: flex-end;
  padding: 22px;
}

.ty-photo__caption {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(36, 28, 23, 0.5);
}

.ty-about__body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 30px);
}

.ty-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(36, 28, 23, 0.14);
  margin-top: 12px;
}

.ty-stat {
  background: var(--ty-cream);
  padding: clamp(18px, 2.4vw, 26px) clamp(12px, 1.8vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ty-stat__num {
  font-family: var(--ty-serif);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--ty-red);
}

.ty-stat__label {
  font-size: clamp(11.5px, 1.3vw, 13px);
  letter-spacing: 0.12em;
  color: rgba(36, 28, 23, 0.6);
}

/* ----------------------------------------------------------------- deities */

.ty-deities {
  position: relative;
  padding: clamp(72px, 10vw, 126px) var(--ty-gutter);
  background: var(--ty-crimson);
  color: var(--ty-on-red);
}

.ty-deities__glow {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background: radial-gradient(90% 70% at 50% 0%, rgba(199, 154, 62, 0.24), rgba(110, 17, 19, 0) 65%);
}

.ty-deities__inner {
  position: relative;
  max-width: var(--ty-inner);
  margin: 0 auto;
}

.ty-deities__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 76px);
}

.ty-deities__mark { width: 52px; height: 52px; }

.ty-deity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: rgba(199, 154, 62, 0.3);
}

.ty-deity {
  background: var(--ty-crimson);
  padding: clamp(32px, 3.6vw, 44px) 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  transition: background-color 160ms ease;
}
.ty-deity:hover { background: var(--ty-crimson-deep); }

/* 方位 carries as much meaning as the name — 五路 is the whole point of the
   section — so it reads as 漢字 in the serif face, not as a small-caps label. */
.ty-deity__path {
  font-family: var(--ty-serif);
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 17px);
  letter-spacing: 0.22em;
  color: var(--ty-gold);
}

.ty-deity__name {
  font-family: var(--ty-serif);
  font-size: 27px;
  letter-spacing: 0.12em;
  color: var(--ty-on-red-head);
}

.ty-deity__desc {
  font-size: 13.5px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: rgba(242, 232, 212, 0.66);
}

/* ---------------------------------------------------------------- services */

.ty-services {
  padding: clamp(72px, 10vw, 132px) var(--ty-gutter);
  background: var(--ty-cream);
}

.ty-services__inner { max-width: var(--ty-inner); margin: 0 auto; }

.ty-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(38px, 5vw, 62px);
  flex-wrap: wrap;
}

.ty-services__headline { display: flex; flex-direction: column; gap: 22px; }

.ty-services__intro {
  font-size: 15.5px;
  line-height: 2.1;
  color: rgba(36, 28, 23, 0.68);
  max-width: 26em;
  letter-spacing: 0.06em;
  text-wrap: pretty;
}

.ty-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1px;
  background: rgba(36, 28, 23, 0.14);
  border: 1px solid rgba(36, 28, 23, 0.14);
}

.ty-service {
  background: var(--ty-cream-card);
  padding: clamp(34px, 4.6vw, 52px) clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  transition: background-color 160ms ease;
}
.ty-service:hover { background: #fff; }

.ty-service__num {
  font-family: var(--ty-latin);
  font-size: 15px;
  color: var(--ty-gold);
  letter-spacing: 0.2em;
}

.ty-service__title {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: clamp(25px, 3vw, 30px);
  letter-spacing: 0.12em;
  color: var(--ty-red);
}

.ty-service__desc {
  font-size: 15.5px;
  line-height: 2.05;
  color: rgba(36, 28, 23, 0.72);
  letter-spacing: 0.04em;
  max-width: 24em;
  text-wrap: pretty;
}

.ty-service__link {
  margin-top: auto;
  font-size: 13.5px;
  letter-spacing: 0.2em;
  color: var(--ty-ink);
  border-bottom: 1px solid rgba(199, 154, 62, 0.8);
  align-self: flex-start;
  padding-bottom: 4px;
}
.ty-service__link:hover { color: var(--ty-red); }

/* ------------------------------------------------------------------- creed */

.ty-creed {
  padding: 0 var(--ty-gutter) clamp(72px, 10vw, 132px);
  background: var(--ty-cream);
}

.ty-creed__panel {
  max-width: var(--ty-inner);
  margin: 0 auto;
  position: relative;
  background: var(--ty-crimson-black);
  color: var(--ty-on-red);
  padding: clamp(48px, 7vw, 92px) clamp(26px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  overflow: hidden;
}

/* 0.16 is the ceiling set by contrast, not by taste: the mark is cream, so it
   lightens the panel behind the cream text sitting on it. At 0.16 the 說明文字
   still clears 5:1; past 0.20 it drops under the 4.5:1 floor. */
.ty-creed__watermark {
  position: absolute;
  right: -90px;
  top: -70px;
  width: 400px;
  height: 400px;
  opacity: 0.16;
}
.ty-creed__watermark img { width: 100%; height: 100%; }

.ty-creed__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ty-creed__title {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 52px);
  line-height: 1.45;
  letter-spacing: 0.16em;
  color: var(--ty-on-red-head);
}

.ty-creed__body .ty-p--onRed {
  font-size: 16px;
  line-height: 2.1;
  color: rgba(242, 232, 212, 0.76);
  letter-spacing: 0.06em;
  max-width: 24em;
}

/* The items used to be opaque cards over a gold-tinted parent, with a 1px flex
   gap letting that tint through as the hairlines. That worked, but it meant
   three solid blocks sitting on top of the 宮印 watermark. Now the items are
   transparent so the mark reads through them, and the hairlines are real
   borders — a tinted parent would otherwise flood the whole column gold. */
.ty-creed__list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ty-creed__item {
  background: transparent;
  border-top: 1px solid rgba(199, 154, 62, 0.28);
  padding: 26px 4px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ty-creed__item:first-child { border-top: none; }

.ty-creed__term {
  font-family: var(--ty-serif);
  font-size: 19px;
  letter-spacing: 0.16em;
  color: var(--ty-gold-soft);
}

.ty-creed__def {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: rgba(242, 232, 212, 0.7);
}

/* -------------------------------------------------------------------- news */

.ty-news {
  padding: 0 var(--ty-gutter) clamp(72px, 10vw, 132px);
  background: var(--ty-cream);
}

.ty-news__inner { max-width: var(--ty-inner); margin: 0 auto; }

.ty-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(30px, 4vw, 48px);
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(36, 28, 23, 0.18);
  flex-wrap: wrap;
}

.ty-news__all {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(36, 28, 23, 0.62);
}
.ty-news__all:hover { color: var(--ty-red); }

.ty-news__list { display: flex; flex-direction: column; }

.ty-news__row {
  display: grid;
  grid-template-columns: minmax(92px, 110px) minmax(84px, 108px) 1fr auto;
  gap: clamp(12px, 2.4vw, 32px);
  align-items: center;
  padding: 24px 8px;
  border-bottom: 1px solid rgba(36, 28, 23, 0.12);
  color: var(--ty-ink);
  transition: background-color 160ms ease;
}
.ty-news__row:hover { background: var(--ty-cream-card); color: var(--ty-ink); }

.ty-news__date {
  font-family: var(--ty-latin);
  font-size: 16px;
  letter-spacing: 0.14em;
  color: rgba(36, 28, 23, 0.55);
}

.ty-news__tag {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ty-red);
  border: 1px solid rgba(155, 26, 32, 0.35);
  padding: 5px 0;
  text-align: center;
}

.ty-news__title { font-size: clamp(15px, 1.6vw, 17px); letter-spacing: 0.06em; }

.ty-news__arrow { color: var(--ty-gold); font-size: 15px; }

/* The source keeps a single 4-column row at every width; below ~600px that
   crushes the headline, so the meta pair stacks above it. */
@media (max-width: 599px) {
  .ty-news__row {
    grid-template-columns: minmax(92px, 110px) minmax(84px, 108px) auto;
    gap: 14px 16px;
  }
  .ty-news__date  { grid-area: 1 / 1; }
  .ty-news__tag   { grid-area: 1 / 2; }
  .ty-news__arrow { grid-area: 1 / 3; justify-self: end; }
  .ty-news__title { grid-area: 2 / 1 / 3 / -1; }
}

/* ------------------------------------------------------------------- visit */

.ty-visit { background: var(--ty-crimson); color: var(--ty-on-red); }

.ty-visit__inner {
  max-width: var(--ty-shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.ty-visit__body {
  padding: clamp(64px, 8vw, 112px) clamp(22px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vw, 44px);
  border-right: 1px solid rgba(199, 154, 62, 0.28);
}

.ty-visit .ty-eyebrow--gold { font-size: 12px; color: var(--ty-gold); }
.ty-visit .ty-eyebrow__rule { width: 38px; }
.ty-visit .ty-h2--light { font-size: clamp(28px, 4.2vw, 42px); letter-spacing: 0.1em; }

.ty-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(199, 154, 62, 0.26);
}

.ty-info__row {
  background: var(--ty-crimson);
  padding: 26px 0;
  display: grid;
  grid-template-columns: minmax(80px, 112px) 1fr;
  gap: clamp(14px, 2.4vw, 24px);
  align-items: start;
}

.ty-info__label { font-size: 13px; letter-spacing: 0.24em; color: var(--ty-gold); }

.ty-info__value {
  font-size: clamp(15.5px, 1.7vw, 16.5px);
  line-height: 1.95;
  letter-spacing: 0.04em;
}
.ty-info__value--links { display: flex; flex-direction: column; gap: 6px; }

.ty-info__note { color: rgba(242, 232, 212, 0.62); font-size: 14.5px; }

.ty-visit__cta { align-self: flex-start; padding: 17px 38px; }

.ty-visit__map {
  position: relative;
  margin: 0;
  min-height: min(600px, 64vw);
  background: var(--ty-crimson-deep);
  overflow: hidden;
  isolation: isolate;
}

/* The interior shot is landscape in a near-square slot, so it is cropped left
   and right. The shrine alcove sits at 0.27-0.79 across the frame rather than
   dead centre, so the crop is nudged to 56% to sit the altar in the middle. */
.ty-visit__mapImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
  filter: saturate(1.14) contrast(1.06) brightness(1.02) sepia(0.16);
}

/* Warm grade: the room is lit neutral grey, which reads cold against the
   crimson section. A soft-light wash pulls it into the gold/crimson palette,
   then a multiply vignette sinks the edges into the surrounding red. */
.ty-visit__map::before,
.ty-visit__map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ty-visit__map::before {
  background: linear-gradient(
    155deg,
    rgba(199, 154, 62, 0.34),
    rgba(155, 26, 32, 0.10) 46%,
    rgba(110, 17, 19, 0.38)
  );
  mix-blend-mode: soft-light;
}

.ty-visit__map::after {
  background:
    radial-gradient(112% 78% at 52% 44%, rgba(74, 12, 14, 0) 40%, rgba(74, 12, 14, 0.42)),
    linear-gradient(to top, rgba(74, 12, 14, 0.30), rgba(74, 12, 14, 0) 32%);
  mix-blend-mode: multiply;
}

.ty-visit__map--empty {
  background:
    repeating-linear-gradient(135deg, rgba(199, 154, 62, 0.14) 0 14px, rgba(199, 154, 62, 0.04) 14px 28px),
    var(--ty-crimson-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ty-visit__mapCaption {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: rgba(233, 217, 180, 0.55);
  text-align: center;
  line-height: 2;
}

/* Once the two panels stack, the divider belongs between them, not at the side. */
@media (max-width: 859px) {
  .ty-visit__body {
    border-right: none;
    border-bottom: 1px solid rgba(199, 154, 62, 0.28);
  }
}

/* ------------------------------------------ 表單元件（法會報名頁共用）*/

.ty-apply {
  padding: clamp(72px, 10vw, 132px) var(--ty-gutter);
  background: var(--ty-cream);
}

.ty-apply__inner { max-width: 900px; margin: 0 auto; }

.ty-req { color: var(--ty-gold); font-size: 0.85em; }

.ty-form {
  background: var(--ty-cream-card);
  border: 1px solid rgba(36, 28, 23, 0.14);
  padding: clamp(28px, 4.4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 32px);
}

.ty-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}

.ty-field { display: flex; flex-direction: column; gap: 10px; }
.ty-field--full { grid-column: 1 / -1; }

.ty-field__label {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ty-ink);
}

.ty-field__input {
  font-family: inherit;
  font-size: 15.5px;
  letter-spacing: 0.04em;
  color: var(--ty-ink);
  background: #fff;
  border: 1px solid rgba(36, 28, 23, 0.2);
  border-radius: 0;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.ty-field__input::placeholder { color: rgba(36, 28, 23, 0.34); letter-spacing: 0.04em; }
.ty-field__input:hover { border-color: rgba(36, 28, 23, 0.36); }
.ty-field__input:focus-visible { outline: 2px solid var(--ty-gold); outline-offset: 1px; }

.ty-field__input--area { resize: vertical; line-height: 1.9; min-height: 120px; }

/* Native select arrow varies wildly across platforms; draw our own in gold. */
select.ty-field__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--ty-gold) 50%),
                    linear-gradient(135deg, var(--ty-gold) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Off-screen rather than display:none — bots that skip hidden fields still fill this. */
.ty-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ty-consent {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-top: 4px;
}

.ty-consent__box {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--ty-red);
}

.ty-consent__text {
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: rgba(36, 28, 23, 0.72);
  text-wrap: pretty;
}

.ty-form__turnstile:empty { display: none; }

.ty-form__foot {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  flex-wrap: wrap;
  border-top: 1px solid rgba(36, 28, 23, 0.12);
  padding-top: clamp(22px, 3vw, 30px);
}

.ty-btn--solid {
  background: var(--ty-crimson);
  color: var(--ty-on-red-head);
  font-weight: 500;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.ty-btn--solid:hover { background: var(--ty-red); color: var(--ty-on-red-head); }
.ty-btn--solid[disabled] { background: rgba(36, 28, 23, 0.28); cursor: progress; }

.ty-form__status {
  font-size: 14.5px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}
.ty-form__status:empty { display: none; }
.ty-form__status--ok { color: var(--ty-red); }
.ty-form__status--err { color: #A3341C; }

@media (max-width: 599px) {
  .ty-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ty-form__foot { align-items: stretch; flex-direction: column; }
  .ty-btn--solid { width: 100%; }
}

/* --------------------------------------------------- 法會報名 (event.html) */

.ty-eventHero {
  position: relative;
  background: var(--ty-crimson);
  color: var(--ty-on-red);
  overflow: hidden;
}

.ty-eventHero__glow {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: radial-gradient(110% 90% at 82% 6%, rgba(199, 154, 62, 0.30), rgba(110, 17, 19, 0) 60%);
}

.ty-eventHero__body {
  position: relative;
  max-width: var(--ty-inner);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--ty-gutter) clamp(46px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.8vw, 32px);
  animation: tyRise 800ms ease both;
}

.ty-eventHero__title {
  font-family: var(--ty-serif);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 68px);
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: var(--ty-on-red-head);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}

.ty-eventHero__lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: rgba(242, 232, 212, 0.78);
  max-width: 40em;
  text-wrap: pretty;
}
.ty-eventHero__lede:empty { display: none; }

.ty-eventFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: rgba(199, 154, 62, 0.3);
  border: 1px solid rgba(199, 154, 62, 0.3);
}

.ty-eventFacts__row {
  background: var(--ty-crimson);
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ty-eventFacts dt { font-size: 12px; letter-spacing: 0.26em; color: var(--ty-gold); }
.ty-eventFacts dd {
  font-family: var(--ty-serif);
  font-size: clamp(16px, 1.9vw, 19px);
  letter-spacing: 0.08em;
  color: var(--ty-on-red-head);
  line-height: 1.7;
}

.ty-eventStatus {
  align-self: flex-start;
  font-size: 13.5px;
  letter-spacing: 0.2em;
  padding: 11px 22px;
  border: 1px solid currentColor;
}
.ty-eventStatus:empty { display: none; }
.ty-eventStatus--open { color: var(--ty-gold); }
.ty-eventStatus--soon { color: rgba(242, 232, 212, 0.66); }
.ty-eventStatus--closed { color: rgba(242, 232, 212, 0.5); }

.ty-noscript {
  background: var(--ty-gold-soft);
  color: var(--ty-crimson-black);
  padding: 18px var(--ty-gutter);
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
}
.ty-noscript a { color: var(--ty-crimson); border-bottom: 1px solid currentColor; }

.ty-notes {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(30px, 4vw, 46px);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 34px);
  background: var(--ty-cream-card);
  border-left: 2px solid var(--ty-gold);
}

.ty-notes__list {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(36, 28, 23, 0.75);
  text-wrap: pretty;
}
.ty-notes__list li::marker { color: var(--ty-gold); }

.ty-fieldset {
  border: none;
  border-top: 1px solid rgba(36, 28, 23, 0.14);
  margin: 0;
  padding: clamp(26px, 3.4vw, 36px) 0 0;
}
.ty-fieldset:first-of-type { border-top: none; padding-top: 0; }

.ty-legend {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 23px);
  letter-spacing: 0.16em;
  color: var(--ty-red);
  padding: 0 0 clamp(18px, 2.4vw, 26px);
}

.ty-field__hint {
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: rgba(36, 28, 23, 0.56);
  text-wrap: pretty;
}
.ty-field__hint strong { color: rgba(36, 28, 23, 0.78); font-weight: 500; }

.ty-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 2px;
}

.ty-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(36, 28, 23, 0.82);
  cursor: pointer;
}
.ty-radio input { width: 17px; height: 17px; accent-color: var(--ty-red); margin: 0; }

/* Three controls that are one answer, so they stay on one line until they cannot. */
.ty-lunar {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.ty-lunar__part { display: flex; flex-direction: column; gap: 6px; }
.ty-lunar__cap {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(36, 28, 23, 0.5);
}

/* 陽曆／農曆兩組輸入輪流出現在同一個位置。 */
.ty-birth[hidden] { display: none; }
.ty-birth { display: grid; gap: 12px; }

/* The conversion is the whole point of offering 陽曆 — show the 信眾 what the
   疏文 will actually say, so a wrong date is caught before it is submitted. */
.ty-birth__out {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  padding: 11px 14px;
  border-left: 2px solid var(--ty-gold);
  background: rgba(199, 154, 62, 0.09);
  color: rgba(36, 28, 23, 0.8);
}
.ty-birth__out:empty { display: none; }
.ty-birth__out--err {
  border-left-color: #A3341C;
  background: rgba(163, 52, 28, 0.08);
  color: #8A2C17;
}

.ty-field__input--file {
  padding: 11px 13px;
  font-size: 14px;
  cursor: pointer;
}
.ty-field__input--file::file-selector-button {
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  color: var(--ty-crimson-black);
  background: var(--ty-gold-soft);
  border: none;
  padding: 9px 16px;
  margin-right: 14px;
  cursor: pointer;
}
.ty-field__input--file::file-selector-button:hover { background: var(--ty-gold); }

.ty-pay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: rgba(36, 28, 23, 0.14);
  border: 1px solid rgba(36, 28, 23, 0.14);
  margin-bottom: clamp(24px, 3vw, 32px);
}

.ty-pay__block {
  background: #fff;
  padding: clamp(20px, 2.8vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ty-pay__region {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
  color: var(--ty-red);
  margin: 0;
}

.ty-pay__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 16px;
  font-size: 14px;
  letter-spacing: 0.03em;
}
.ty-pay__list dt { color: rgba(36, 28, 23, 0.52); white-space: nowrap; }
.ty-pay__list dd { color: var(--ty-ink); word-break: break-all; }

/* Before reveal the block holds one button, so the account grid must not
   stretch it into a full-width card. */
.ty-pay:has(.ty-pay__reveal) {
  display: block;
  background: #fff;
  padding: clamp(20px, 2.8vw, 26px);
}

.ty-pay__reveal {
  font-family: inherit;
  font-size: 14.5px;
  letter-spacing: 0.16em;
  color: var(--ty-on-red-head);
  background: var(--ty-crimson);
  border: none;
  padding: 14px 26px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.ty-pay__reveal:hover { background: var(--ty-red); }
.ty-pay__reveal[disabled] { background: rgba(36, 28, 23, 0.28); cursor: progress; }

.ty-pay__note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: rgba(36, 28, 23, 0.56);
  text-wrap: pretty;
}
.ty-pay__note--err { color: #8A2C17; }

.ty-pay__hidden {
  grid-column: 1 / -1;
  background: #fff;
  padding: clamp(20px, 2.8vw, 28px);
  font-size: 14.5px;
  line-height: 1.9;
  color: rgba(36, 28, 23, 0.72);
}

.ty-closed {
  background: var(--ty-cream-card);
  border: 1px solid rgba(36, 28, 23, 0.14);
  padding: clamp(30px, 4.4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ty-closed__title {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--ty-red);
  text-wrap: pretty;
}

.ty-closed__body {
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(36, 28, 23, 0.7);
}

.ty-underline--onCream { color: var(--ty-red); border-bottom-color: rgba(155, 26, 32, 0.4); }
.ty-underline--onCream:hover { color: var(--ty-gold); }

@media (max-width: 599px) {
  .ty-lunar { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------ 金龍如意真經 (sutra.html) */

.ty-sutraHero {
  position: relative;
  background: var(--ty-crimson-deep);
  color: var(--ty-on-red);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.ty-sutraHero__glow {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: radial-gradient(115% 90% at 76% 12%, rgba(199, 154, 62, 0.30), rgba(90, 13, 15, 0) 62%);
}

.ty-sutraHero__body {
  position: relative;
  padding: clamp(58px, 8vw, 104px) clamp(22px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 28px);
  animation: tyRise 800ms ease both;
}

.ty-sutraHero__title {
  font-family: var(--ty-serif);
  font-weight: 900;
  font-size: clamp(40px, 7.6vw, 82px);
  line-height: 1.14;
  letter-spacing: 0.1em;
  color: var(--ty-on-red-head);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.ty-sutraHero__alt {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ty-gold);
}

.ty-sutraHero__lede {
  font-family: var(--ty-serif);
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 2.1;
  letter-spacing: 0.14em;
  color: rgba(242, 232, 212, 0.85);
  text-wrap: pretty;
}

.ty-sutraHero__seal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 5vw, 60px);
  opacity: 0.5;
}
.ty-sutraHero__seal img { width: clamp(110px, 17vw, 176px); height: auto; }

.ty-sutraIntro {
  background: var(--ty-cream);
  padding: clamp(60px, 8vw, 104px) var(--ty-gutter);
}

.ty-sutraIntro__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ty-sutraIntro__credit {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(36, 28, 23, 0.14);
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(36, 28, 23, 0.56);
  text-wrap: pretty;
}

.ty-sutraToc {
  background: var(--ty-cream-card);
  border-top: 1px solid rgba(36, 28, 23, 0.14);
  border-bottom: 1px solid rgba(36, 28, 23, 0.14);
  padding: clamp(24px, 3.4vw, 34px) var(--ty-gutter);
}

.ty-sutraToc__inner {
  max-width: var(--ty-inner);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
}

.ty-sutraToc__head {
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--ty-gold);
  flex: none;
}

.ty-sutraToc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2.4vw, 28px);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.ty-sutraToc__list a { color: rgba(36, 28, 23, 0.74); }
.ty-sutraToc__list a:hover { color: var(--ty-red); }

.ty-sutra {
  display: block;
  background: var(--ty-cream);
  padding: clamp(56px, 8vw, 100px) var(--ty-gutter);
}

.ty-sutra__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6vw, 76px);
}

.ty-chapter {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
  scroll-margin-top: 104px;
}

.ty-chapter__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(199, 154, 62, 0.5);
}

.ty-chapter__num {
  font-family: var(--ty-latin);
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--ty-gold);
  flex: none;
}

.ty-chapter__title {
  font-family: var(--ty-serif);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: 0.22em;
  color: var(--ty-red);
}

/* Scripture reads as measured lines, not prose — hold the line breaks and give
   it the loosest leading on the site. */
.ty-verse {
  font-family: var(--ty-serif);
  font-size: clamp(15.5px, 1.85vw, 18px);
  line-height: 2.5;
  letter-spacing: 0.14em;
  color: rgba(36, 28, 23, 0.86);
}

/* ------------------------------------------- 報名成功頁 (thanks.html) */

.ty-done {
  position: relative;
  display: block;
  background: var(--ty-crimson);
  color: var(--ty-on-red);
  overflow: hidden;
  padding: clamp(56px, 9vw, 110px) var(--ty-gutter);
}

.ty-done__glow {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: radial-gradient(90% 80% at 50% 0%, rgba(199, 154, 62, 0.28), rgba(110, 17, 19, 0) 62%);
}

.ty-done__inner {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 2.2vw, 22px);
  animation: tyRise 700ms ease both;
}

.ty-done__seal { width: clamp(66px, 9vw, 88px); height: auto; }
.ty-done__eyebrow { justify-content: center; }

.ty-done__title {
  font-family: var(--ty-serif);
  font-weight: 900;
  font-size: clamp(32px, 6vw, 52px);
  letter-spacing: 0.14em;
  color: var(--ty-on-red-head);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}

.ty-done__lede {
  font-family: var(--ty-serif);
  font-size: clamp(15.5px, 1.8vw, 18px);
  line-height: 2.1;
  letter-spacing: 0.1em;
  color: rgba(242, 232, 212, 0.9);
  text-wrap: pretty;
}
.ty-done__lede:empty { display: none; }

.ty-done__mail {
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.05em;
  color: rgba(242, 232, 212, 0.66);
  text-wrap: pretty;
}

/* The DM is not optional in this temple's process — without it the 信眾 never
   receives their 科儀紀錄 — so it gets its own framed block, not a footnote. */
.ty-done__step {
  width: 100%;
  margin-top: clamp(10px, 2vw, 18px);
  padding: clamp(24px, 3.6vw, 34px);
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(199, 154, 62, 0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ty-done__stepHead {
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--ty-gold);
}

.ty-done__stepBody {
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: var(--ty-on-red-head);
  text-wrap: pretty;
}
.ty-done__stepBody strong { color: var(--ty-gold-soft); font-weight: 500; }

.ty-done__note {
  font-size: 13.5px;
  line-height: 1.95;
  letter-spacing: 0.05em;
  color: rgba(242, 232, 212, 0.6);
  text-wrap: pretty;
}

.ty-done__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(8px, 1.6vw, 14px);
}

/* ---------------------------------------------- 私訊圖示（單色，跟著文字色）*/

/* Masks rather than inline SVG: the glyph takes its colour from
   background-color: currentColor, so it is monochrome by construction and
   adapts to gold-on-crimson and crimson-on-cream without a second copy.
   Keyed off the href so every 私訊 link on the site gets one — there is no
   markup to keep in sync. */
a[href^="https://m.me/"]::before,
a[href^="https://ig.me/"]::before,
a[href^="https://www.facebook.com/"]::before,
a[href^="https://www.instagram.com/"]::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.5em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

a[href^="https://m.me/"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.4c-5.4%200-9.6%203.96-9.6%209.06%200%202.82%201.29%205.28%203.36%206.96v3.18l3.09-1.7c.86.24%201.78.37%202.73.37%205.4%200%209.6-3.96%209.6-9.06S17.4%202.4%2012%202.4Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.9%2014.7l4.2-4.44%202.16%202.28%203.72-2.28-4.2%204.44-2.16-2.28z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.4c-5.4%200-9.6%203.96-9.6%209.06%200%202.82%201.29%205.28%203.36%206.96v3.18l3.09-1.7c.86.24%201.78.37%202.73.37%205.4%200%209.6-3.96%209.6-9.06S17.4%202.4%2012%202.4Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.9%2014.7l4.2-4.44%202.16%202.28%203.72-2.28-4.2%204.44-2.16-2.28z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

a[href^="https://ig.me/"]::before,
a[href^="https://www.instagram.com/"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222.6%22%20y%3D%222.6%22%20width%3D%2218.8%22%20height%3D%2218.8%22%20rx%3D%225.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217.3%22%20cy%3D%226.7%22%20r%3D%221.25%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222.6%22%20y%3D%222.6%22%20width%3D%2218.8%22%20height%3D%2218.8%22%20rx%3D%225.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217.3%22%20cy%3D%226.7%22%20r%3D%221.25%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

a[href^="https://www.facebook.com/"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%2F%3E%3Cpath%20d%3D%22M13.35%2019.2v-6.3h2.1l.32-2.44h-2.42V8.9c0-.7.2-1.18%201.2-1.18h1.28V5.54a17%2017%200%200%200-1.87-.1c-1.85%200-3.11%201.13-3.11%203.2v1.82H8.74v2.44h2.11v6.3z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%2F%3E%3Cpath%20d%3D%22M13.35%2019.2v-6.3h2.1l.32-2.44h-2.42V8.9c0-.7.2-1.18%201.2-1.18h1.28V5.54a17%2017%200%200%200-1.87-.1c-1.85%200-3.11%201.13-3.11%203.2v1.82H8.74v2.44h2.11v6.3z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

/* ------------------------------------------------ 私訊直達 (m.me / ig.me) */

.ty-dm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin-top: 6px;
}

.ty-dm__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 15px 20px;
  background: var(--ty-gold);
  color: var(--ty-crimson-black);
  transition: background-color 160ms ease;
}
.ty-dm__btn::before {
  grid-row: 1 / 3;
  width: 1.9em;
  height: 1.9em;
  margin-right: 0;
  vertical-align: baseline;
}
.ty-dm__label,
.ty-dm__hint { grid-column: 2; }
.ty-dm__btn:hover { background: var(--ty-gold-soft); color: var(--ty-crimson-black); }

.ty-dm__label { font-size: 14.5px; letter-spacing: 0.16em; font-weight: 500; }
.ty-dm__hint { font-size: 12px; letter-spacing: 0.08em; opacity: 0.75; }

/* On cream the gold fill loses its contrast, so the crimson fill takes over. */
.ty-dm--onCream .ty-dm__btn {
  background: var(--ty-crimson);
  color: var(--ty-on-red-head);
}
.ty-dm--onCream .ty-dm__btn:hover { background: var(--ty-red); color: var(--ty-on-red-head); }

/* ------------------------------------------------------------------ footer */

.ty-footer {
  background: var(--ty-crimson-black);
  color: rgba(242, 232, 212, 0.7);
  border-top: 1px solid rgba(199, 154, 62, 0.28);
}

.ty-footer__inner {
  max-width: var(--ty-shell);
  margin: 0 auto;
  padding: clamp(52px, 7vw, 72px) var(--ty-gutter) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  gap: clamp(28px, 3.4vw, 56px);
}

.ty-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.ty-footer__brand img { width: 56px; height: 56px; }

.ty-footer__name {
  font-family: var(--ty-serif);
  font-size: 22px;
  letter-spacing: 0.24em;
  color: var(--ty-gold-soft);
}

.ty-footer__address { font-size: 13.5px; letter-spacing: 0.14em; line-height: 2; }

.ty-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  letter-spacing: 0.12em;
}
.ty-footer__col a { color: inherit; }
.ty-footer__col a:hover { color: var(--ty-gold); }

.ty-footer__colhead {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ty-gold);
  margin-bottom: 6px;
}

.ty-footer__bottom {
  max-width: var(--ty-shell);
  margin: 0 auto;
  padding: 26px var(--ty-gutter) 44px;
  border-top: 1px solid rgba(199, 154, 62, 0.2);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: rgba(242, 232, 212, 0.5);
}