/* Warm editorial surfaces with the existing brand violet. */
.library-guide,
.library-booking {
  --library-violet: #4b3268;
  --library-ink: #1c1b1a;
  --library-muted: #4a4741;
  --library-paper: #ffffff;
  --library-sand: #f7f1e8;
  --library-line: #e1dcd3;
  --library-gold: #684d07;
  --library-lilac: #f0eaf3;
  --library-ocean: url("/assets/optimized/ocean-1200.77e9f6effce7.webp");
  --library-serif: "Noto Serif TC", "Noto Serif CJK TC", "Songti TC", PMingLiU, serif;
  background: var(--library-sand);
  color: var(--library-ink);
}

.library-guide .wrap {
  width: min(1120px, calc(100% - clamp(28px, 6vw, 96px)));
}

.library-guide .top { min-height: 80px; gap: 12px; border-bottom: 1px solid var(--library-line); }
.library-guide .brand { font-size: clamp(17px, 3vw, 22px); letter-spacing: .08em; gap: 9px; }
.library-guide .brand img { width: 40px; height: 40px; }
.library-guide .back,
.library-booking .back {
  padding-inline: clamp(10px, 2vw, 18px);
  border: 1px solid var(--library-muted);
  border-radius: 999px;
  background: transparent;
  color: var(--library-muted);
}
.library-guide .back:hover,
.library-booking .back:hover { background: var(--library-paper); color: var(--library-violet); }
.library-guide main { padding-top: 0; }
.library-guide .paper { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; }

.guide-masthead,
.library-booking .page-intro {
  position: relative;
  isolation: isolate;
  background: var(--library-sand);
  color: var(--library-ink);
  border-bottom: 1px solid var(--library-line);
  border-radius: 0;
}

.guide-masthead::before,
.library-booking .page-intro::before {
  position: absolute;
  z-index: -1;
  inset: 28px 0 28px auto;
  width: 40%;
  pointer-events: none;
  content: "";
  background: #dbe7e7 var(--library-ocean) 69% center / cover no-repeat;
  border-radius: 24px;
}

.guide-masthead { min-height: 390px; padding: clamp(28px, 5vw, 60px) 45% clamp(28px, 5vw, 60px) 0; }
.guide-masthead .crumbs,
.guide-masthead .byline { color: var(--library-muted); }
.guide-masthead a { color: var(--library-violet); }
.guide-chapter {
  display: flex;
  align-items: center;
  gap: .85em;
  width: fit-content;
  margin: clamp(16px, 3vw, 32px) 0 12px;
  color: var(--library-gold);
  font-size: .88rem;
  letter-spacing: .12em;
}
.guide-chapter span { padding-right: .85em; border-right: 1px solid currentColor; font: 1.18rem Georgia, serif; }
.guide-masthead h1 {
  max-width: 13em;
  margin: 0;
  color: var(--library-ink);
  font-family: var(--library-serif);
  font-size: clamp(1.85rem, 4vw, 3.3rem);
  font-weight: 500;
  line-height: 1.34;
  text-wrap: balance;
}
.guide-masthead .byline { margin-block: 16px 0; font-size: .82rem; line-height: 1.65; }
.guide-masthead .intro { max-width: 38em; margin: 16px 0 0; color: var(--library-muted); font-size: clamp(.98rem, 1.5vw, 1.08rem); }
@media (min-width: 320px) {
  .guide-title-versions { white-space: nowrap; }
}

.guide-body {
  display: grid;
  grid-template-columns: minmax(175px, 226px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(26px, 5vw, 66px);
  margin: clamp(25px, 5vw, 55px) clamp(0px, 2vw, 22px) 0;
}
.guide-contents { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.guide-index { border-top: 1px solid var(--library-muted); }
.guide-index p,
.guide-index-small summary { margin: 0; padding: 13px 0; color: var(--library-violet); font-weight: 700; }
.guide-index ul,
.guide-index-small ul { margin: 0; padding: 0; list-style: none; }
.guide-index li,
.guide-index-small li { border-top: 1px solid var(--library-line); }
.guide-index a,
.guide-index-small a { display: flex; align-items: center; min-height: 44px; padding: 8px 6px; font-size: .875rem; line-height: 1.55; }
.guide-index a:hover,
.guide-index-small a:hover { background: var(--library-lilac); }
.guide-index-small { display: none; }

.guide-reading { min-width: 0; }
.guide-reading section { scroll-margin-top: 24px; }
.guide-reading > section + section { margin-top: clamp(30px, 5vw, 56px); }
.guide-reading h2 {
  margin: 0 0 14px;
  color: var(--library-ink);
  font-family: var(--library-serif);
  font-size: clamp(1.33rem, 2.5vw, 1.8rem);
  font-weight: 600;
  line-height: 1.45;
}
.guide-reading section > p { max-inline-size: 46em; }
.guide-reading .definition {
  margin: 0;
  padding: clamp(18px, 3vw, 27px);
  border: 0;
  border-inline-start: 3px solid var(--library-violet);
  border-radius: 0 12px 12px 0;
  background: var(--library-lilac);
}
.guide-reading .definition h2 { font-size: clamp(1.14rem, 2vw, 1.4rem); }
.guide-reading .definition p:last-child { margin-bottom: 0; }
.guide-reading .section-links a { display: inline-flex; align-items: center; min-height: 44px; }
.library-guide .more { margin: clamp(34px, 5vw, 60px) 0 0; padding: 20px clamp(0px, 2vw, 22px) 0; border-color: var(--library-line); }

.guide-worksheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 18px 0 0;
  border: 1px solid var(--library-line);
  border-radius: 24px;
  background: var(--library-paper);
}
.guide-worksheet > div { padding: clamp(15px, 2vw, 23px); }
.guide-worksheet > div + div { border-inline-start: 1px solid var(--library-line); }
.guide-worksheet dt { color: var(--library-violet); font-family: var(--library-serif); font-size: 1.2rem; font-weight: 700; }
.guide-worksheet dd { margin: 10px 0 0; line-height: 1.7; }
.guide-worksheet dd span { display: block; color: var(--library-muted); font-size: .77rem; font-weight: 700; }
.guide-worksheet dd + dd { border-top: 1px solid var(--library-line); padding-top: 8px; }
#reflection-questions ol li:first-child {
  padding: 10px 14px;
  border-inline-start: 3px solid var(--library-violet);
  background: var(--library-lilac);
  color: var(--library-violet);
  font-weight: 700;
}

.guide-table {
  min-width: 0;
  margin-top: 16px;
  table-layout: fixed;
  border: 1px solid var(--library-line);
  background: var(--library-paper);
  font-size: .96rem;
  overflow-wrap: anywhere;
}
.guide-table th,
.guide-table td { padding: clamp(11px, 2vw, 18px); border-bottom: 1px solid var(--library-line); line-height: 1.65; }
.guide-table thead th { background: #eee7dc; }
.guide-table th:first-child { width: 26%; }
.guide-table tbody th { background: #fbf8f3; color: var(--library-muted); }
.guide-table td + td { border-inline-start: 1px solid var(--library-line); }
.guide-table .cell-label { display: none; }

.guide-step { border-top: 1px solid var(--library-line); padding-top: 16px; }
.guide-step h2 { display: flex; align-items: flex-start; gap: .65em; }
.guide-step-number { flex: none; padding-top: .13em; color: var(--library-gold); font: 1.2em/1 Georgia, serif; }
.guide-priority { margin: 17px 0 0; }
.guide-priority > div { display: grid; grid-template-columns: minmax(4.5em, .2fr) 1fr; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--library-line); }
.guide-priority > div:first-child { border-inline-start: 3px solid var(--library-violet); border-radius: 0 12px 0 0; background: var(--library-lilac); color: var(--library-violet); }
.guide-priority dt { font-weight: 700; }
.guide-priority dd { margin: 0; }

.library-booking .page-intro {
  padding: clamp(20px, 4vw, 42px) 34% clamp(20px, 4vw, 42px) 0;
  margin: 10px 0 20px;
}
.library-booking > header { border-color: var(--library-line); background: var(--library-sand); }
.library-booking .page-intro::before { inset-block: 12px; width: 29%; }
.library-booking .page-intro h1 { color: var(--library-ink); font-family: var(--library-serif); font-weight: 500; }
.library-booking .page-intro .eyebrow { color: var(--library-gold); letter-spacing: .08em; }
.library-booking .page-intro .chip { border-color: var(--library-line); background: var(--library-paper); color: var(--library-muted); }
.library-booking .card { border-color: var(--library-line); border-radius: 24px; box-shadow: none; }
.library-booking .sidebar .card { background: var(--library-paper); }
.library-booking .sidebar .summary-title { color: var(--library-ink); font-family: var(--library-serif); }
.library-booking .sidebar .price { color: var(--library-violet); font-size: clamp(2rem, 3.5vw, 2.65rem); }
.library-booking .summary-lines { font-size: .91rem; color: var(--library-muted); }
.library-booking #service-scope {
  scroll-margin-top: 22px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--library-violet);
  border-radius: 0 7px 7px 0;
  background: var(--library-lilac);
  color: var(--library-ink);
}
.library-booking #service-scope:target { outline: 1px solid var(--library-violet); outline-offset: 2px; }
.library-booking #service-scope h3 { margin: 0 0 4px; color: var(--library-violet); font-size: .95rem; }
.library-booking #service-scope p { margin: 0; }
.library-booking .summary-order { padding-top: 11px; border-top: 1px solid var(--library-line); color: var(--library-violet); font-weight: 700; }
.library-booking .button { border-radius: 999px; }
.library-booking [aria-labelledby="confirm-time-title"] .button {
  border-color: var(--library-violet);
  background: var(--library-violet);
  color: var(--library-paper);
}
.library-booking [aria-labelledby="confirm-time-title"] .button:hover { background: #38254e; }
.library-guide :focus-visible,
.library-booking :focus-visible { outline: 2px solid var(--library-violet); outline-offset: 3px; }
.library-booking .stack { grid-column: 1; grid-row: 1; }
.library-booking .sidebar { position: static; grid-column: 2; grid-row: 1; }
.library-booking .skip {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-150%);
  background: var(--library-paper);
  color: var(--library-violet);
}
.library-booking .skip:focus { transform: none; }
.library-booking .back,
.library-booking .summary-help a { display: inline-flex; align-items: center; min-height: 44px; }

.author-cover,
.service-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 35%);
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
  padding: clamp(26px, 5vw, 56px) 0;
  border-bottom: 1px solid var(--library-line);
}
.author-cover .eyebrow { margin-top: clamp(14px, 3vw, 26px); color: var(--library-gold); letter-spacing: .1em; }
.author-cover h1,
.service-cover h1 {
  margin: 0;
  max-width: 12em;
  color: var(--library-ink);
  font: 500 clamp(1.9rem, 4.2vw, 3.55rem)/1.35 var(--library-serif);
  text-wrap: balance;
}
.author-cover .intro,
.service-cover .intro { margin: 18px 0 12px; color: var(--library-muted); }
.author-portrait { min-width: 0; margin: 0; }
.author-portrait picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1.06;
  border-radius: 24px;
  background: var(--library-lilac);
}
.author-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.author-portrait figcaption { margin-top: 8px; color: var(--library-muted); font-size: .8rem; text-align: end; }
.author-index,
.service-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(10px, 2vw, 24px);
  padding: 12px 0;
  border-bottom: 1px solid var(--library-line);
}
.author-index a,
.service-index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}
.author-index a:hover,
.service-index a:hover { background: var(--library-lilac); text-decoration: underline; }
.author-profile > section {
  scroll-margin-top: 24px;
  padding-block: clamp(24px, 4.7vw, 53px);
  border-bottom: 1px solid var(--library-line);
}
.author-profile h2 { margin-top: 0; color: var(--library-ink); font-family: var(--library-serif); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.45; }
.author-profile > section > p { max-width: 45em; }
.author-profile .author-certificates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 24px);
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.author-certificates > li {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--library-line);
  border-radius: 24px;
  background: var(--library-paper);
}
.author-certificate-link { display: block; padding: 4px; border-radius: 12px; font-weight: 700; }
.author-certificate-link img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 10px;
  background: var(--library-sand);
}
.author-certificate-link:hover { background: var(--library-lilac); }
.author-certificates > li > p { margin: 5px 4px 0; color: var(--library-muted); font-size: .84rem; line-height: 1.7; }
.author-profile #contact {
  margin-top: clamp(24px, 5vw, 50px);
  padding: clamp(19px, 4vw, 38px);
  border: 1px solid var(--library-line);
  border-radius: 24px;
  background: var(--library-lilac);
}
.author-profile #contact .button { border-radius: 999px; }
.author-profile #contact .button.primary:hover { background: #38254e; }
.author-profile #contact .button:not(.primary):hover { border-color: var(--library-violet); }
.author-profile #contact p:last-child { margin-bottom: 0; }

.service-cover > div { min-width: 0; }
.service-offer {
  min-width: 0;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--library-line);
  border-radius: 24px;
  background: var(--library-paper);
}
.service-offer-label { margin: 0; color: var(--library-muted); font-size: .875rem; font-weight: 650; }
.service-amount { margin: 5px 0 14px; color: var(--library-violet); font: clamp(1.9rem, 4vw, 2.8rem)/1.2 Georgia, serif; }
.service-offer .button { max-width: 100%; border-radius: 999px; }
.service-offer .button.primary:hover { background: #38254e; }
.service-availability { padding-top: 12px; border-top: 1px solid var(--library-line); }
.service-availability p { margin-block: 6px 12px; color: var(--library-muted); }
.service-availability .button:hover { background: var(--library-lilac); }
.service-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 3vw, 34px);
  padding-block: clamp(28px, 5vw, 54px);
}
.service-profile h2 {
  margin: 0 0 14px;
  color: var(--library-ink);
  font-family: var(--library-serif);
  font-size: clamp(1.24rem, 2.4vw, 1.65rem);
  line-height: 1.45;
}
.service-profile section { scroll-margin-top: 24px; }
.service-details > section { padding-top: 16px; border-top: 1px solid var(--library-line); }
.service-details #service-included {
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--library-line);
  border-radius: 24px;
  background: var(--library-paper);
}
.service-details ul { margin: 0; }
.service-profile .terms {
  margin: 0 0 clamp(28px, 5vw, 52px);
  border-inline-start: 3px solid var(--library-violet);
  border-radius: 0 12px 12px 0;
  background: var(--library-lilac);
}
.service-profile #questions > article { max-width: 49em; }
.service-profile #questions > article + article { border-top: 1px solid var(--library-line); }

@media (max-width: 860px) {
  .guide-masthead { min-height: auto; padding: 24px 0 calc(clamp(115px, 30vw, 210px) + 22px); }
  .guide-masthead::before { inset: auto 0 0; width: auto; height: clamp(115px, 30vw, 210px); border-radius: 12px; }
  .guide-body { grid-template-columns: 1fr; gap: 24px; }
  .guide-contents { position: static; max-height: none; overflow: visible; }
  .guide-index { display: none; }
  .guide-index-small { display: block; padding-inline: 14px; border: 1px solid var(--library-line); background: var(--library-paper); border-radius: 8px; }
  .guide-index-small summary { min-height: 44px; cursor: pointer; }
  .guide-index-small a { padding-inline: 0; }
  .service-details { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .library-booking .page-intro { padding-inline-end: 0; }
  .library-booking .page-intro::before { display: none; }
  .library-booking .sidebar { grid-column: 1; grid-row: 1; }
  .library-booking .stack { grid-column: 1; grid-row: 2; }
}

@media (max-width: 680px) {
  .author-cover,
  .service-cover { grid-template-columns: 1fr; gap: 20px; }
  .author-portrait { width: min(100%, 270px); justify-self: center; }
  .author-profile .author-certificates { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .guide-worksheet { grid-template-columns: 1fr; }
  .guide-worksheet > div + div { border-inline-start: 0; border-top: 1px solid var(--library-line); }
  .guide-table, .guide-table tbody, .guide-table tr, .guide-table tbody th, .guide-table td { display: block; }
  .guide-table { border: 0; background: transparent; }
  .guide-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .guide-table tr { border: 1px solid var(--library-line); border-radius: 8px; background: var(--library-paper); }
  .guide-table tbody tr + tr { margin-top: 12px; }
  .guide-table tbody th:first-child { width: auto; background: #eee7dc; border-radius: 7px 7px 0 0; }
  .guide-table td + td { border-inline-start: 0; border-top: 1px solid var(--library-line); }
  .guide-table td { border-bottom: 0; }
  .guide-table .cell-label { display: block; color: var(--library-violet); font-size: .82rem; font-weight: 700; }
  .guide-priority > div { grid-template-columns: 1fr; gap: 2px; }
}