/* HonsHair — /about/ only. Scoped under .hh-ab. Tokens come from app.css. */

.hh-ab {
 --ab-paper: #fcfaf7;
 --ab-stone: #f3eee7;
 --ab-hair: rgba(26, 18, 14, 0.12);
 --ab-hair-strong: rgba(26, 18, 14, 0.22);
 background: var(--ab-paper);
 color: var(--hh-ink);
}

.hh-ab main {
 font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
 font-weight: 400;
 background: var(--ab-paper);
 color: var(--hh-ink);
}

.hh-ab-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 0.7rem;
 margin: 0 0 1.15rem;
 font-size: 0.72rem;
 font-weight: 400;
 letter-spacing: 0.22em;
 color: var(--hh-ink-soft);
}

.hh-ab-rule {
 display: inline-block;
 width: 1.75rem;
 height: 1px;
 background: var(--hh-orange);
 flex-shrink: 0;
}

.hh-ab h1,
.hh-ab h2,
.hh-ab h3 {
 font-family: var(--hh-serif);
 font-weight: 300;
 letter-spacing: 0.08em;
 line-height: 1.4;
 color: var(--hh-ink);
}

/* —— Immersive hero —— */
.hh-ab-hero {
 padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(2.75rem, 6vw, 4.5rem);
 background-color: var(--ab-paper);
 background-image:
 linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(252, 250, 247, 0.86) 42%, rgba(243, 238, 231, 0.9) 100%),
 url("../images/hero/hero-marble-white.webp");
 background-size: cover;
 background-position: center 30%;
 border-bottom: 1px solid var(--ab-hair);
}

.hh-ab-hero__grid {
 display: grid;
 grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
 gap: clamp(1.75rem, 4.5vw, 4rem);
 align-items: center;
}

.hh-ab-crumbs {
 display: flex;
 flex-wrap: wrap;
 gap: 0.45rem;
 margin: 0 0 1.75rem;
 font-size: 0.72rem;
 letter-spacing: 0.12em;
 color: var(--hh-muted);
}

.hh-ab-crumbs a {
 color: var(--hh-muted);
 text-decoration: none;
}

.hh-ab-crumbs a:hover { color: var(--hh-orange); }
.hh-ab-crumbs [aria-current] { color: var(--hh-ink-soft); }

.hh-ab h1.hh-ab-hero__title {
 display: block;
 max-width: none;
 margin: 0;
 font-size: clamp(1.85rem, 8vw, 2.45rem);
 font-weight: 300;
 letter-spacing: 0.04em;
 line-height: 1.35;
 text-wrap: pretty;
 hyphens: none;
}

.hh-ab-hero__lede {
 max-width: 36rem;
 margin: 1.45rem 0 0;
 font-size: 0.98rem;
 font-weight: 300;
 line-height: 2;
 letter-spacing: 0.03em;
 color: var(--hh-ink-soft);
}

.hh-ab-nowrap {
 white-space: nowrap;
}

.hh-ab-hero__actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.85rem 1.25rem;
 margin-top: 1.85rem;
}

.hh-ab-hero__media {
 margin: 0;
}

.hh-ab-hero__media img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 5 / 4;
 object-fit: cover;
 object-position: 62% center;
}

.hh-ab-hero__media figcaption {
 margin-top: 0.65rem;
 font-size: 0.78rem;
 letter-spacing: 0.1em;
 color: var(--hh-muted);
}

.hh-ab-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 3rem;
 padding: 0.85rem 1.5rem;
 border-radius: 999px;
 background: var(--hh-orange);
 border: 1px solid var(--hh-orange);
 color: #fff;
 font-size: 0.92rem;
 font-weight: 500;
 letter-spacing: 0.06em;
 line-height: 1.4;
 text-decoration: none;
}

.hh-ab-btn:hover,
.hh-ab-btn:active,
.hh-ab-btn:focus-visible {
 background: var(--hh-orange-deep, #e86f1c);
 border-color: var(--hh-orange-deep, #e86f1c);
 color: #fff;
 filter: none;
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
 text-decoration: none;
}

.hh-ab-btn:focus-visible {
 outline: 2px solid var(--hh-ink);
 outline-offset: 3px;
}

.hh-ab-textlink {
 display: inline-flex;
 align-items: center;
 min-height: 3rem;
 padding-bottom: 0.15rem;
 border-bottom: 1px solid var(--ab-hair-strong);
 color: var(--hh-ink);
 font-size: 0.88rem;
 letter-spacing: 0.06em;
 text-decoration: none;
}

.hh-ab-textlink:hover {
 color: var(--hh-orange);
 border-bottom-color: var(--hh-orange);
}

/* —— Sections —— */
.hh-ab-section {
 padding: clamp(3.5rem, 7vw, 6.25rem) 0;
}

.hh-ab-section + .hh-ab-section {
 border-top: 1px solid var(--ab-hair);
}

.hh-ab-section--stone {
 background: var(--ab-stone);
}

.hh-ab-head {
 max-width: 42rem;
 margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.hh-ab-head h2,
.hh-ab-prose h2 {
 margin: 0 0 0.9rem;
 font-size: clamp(1.65rem, 2.8vw, 2.35rem);
}

.hh-ab-lede,
.hh-ab-prose p {
 margin: 0 0 1.15rem;
 font-size: 0.98rem;
 font-weight: 300;
 line-height: 2;
 letter-spacing: 0.02em;
 color: var(--hh-ink-soft);
}

.hh-ab-lede { margin-bottom: 0; }

.hh-ab-prose {
 max-width: 44rem;
}

.hh-ab-prose p:last-child { margin-bottom: 0; }

.hh-ab-split {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: clamp(2rem, 5vw, 4.5rem);
 align-items: center;
}

.hh-ab-split--start { align-items: start; }

.hh-ab-split__media {
 margin: 0;
}

.hh-ab-split__media img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

.hh-ab-split__media figcaption {
 margin-top: 0.65rem;
 font-size: 0.82rem;
 letter-spacing: 0.06em;
 color: var(--hh-muted);
}

.hh-ab-aside {
 margin: 0;
 padding: 1.75rem 1.6rem;
 background: #fff;
 border: 1px solid var(--ab-hair);
}

.hh-ab-aside h2,
.hh-ab-aside h3 {
 margin: 0 0 1rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid var(--ab-hair);
 font-size: 1.35rem;
}

.hh-ab-aside ol {
 margin: 0;
 padding: 0;
 list-style: none;
 counter-reset: ab-step;
}

.hh-ab-aside li {
 display: grid;
 grid-template-columns: 2.15rem 2.35rem minmax(0, 1fr);
 grid-template-areas: "num icon text";
 column-gap: 0.7rem;
 row-gap: 0.35rem;
 align-items: start;
 margin: 0;
 padding: 1.05rem 0;
 border-top: 1px solid var(--ab-hair);
 list-style: none;
 color: var(--hh-ink-soft);
 font-size: 0.92rem;
 font-weight: 300;
 line-height: 1.75;
}

.hh-ab-aside li:first-child {
 border-top: 0;
}

.hh-ab-aside li::before {
 grid-area: num;
 counter-increment: ab-step;
 content: counter(ab-step, decimal-leading-zero);
 font-family: var(--hh-serif);
 font-weight: 400;
 letter-spacing: 0.08em;
 color: #ff822d;
 padding-top: 0.45rem;
}

.hh-ab-aside__icon {
 grid-area: icon;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.35rem;
 height: 2.35rem;
 margin: 0.1rem 0 0;
 border: 1px solid rgba(255, 130, 45, 0.34);
 border-radius: 50%;
 background: rgba(255, 130, 45, 0.06);
 color: #ff822d;
}

.hh-ab-aside__icon svg {
 width: 1.1rem;
 height: 1.1rem;
 display: block;
}

.hh-ab-aside li > span:not(.hh-ab-aside__icon) {
 grid-area: text;
 min-width: 0;
}

.hh-ab-aside strong {
 display: block;
 margin-bottom: 0.15rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--hh-ink);
}

/* —— Brand promise —— */
.hh-ab-promise {
 padding: clamp(4.75rem, 9vw, 7.75rem) 0;
 background-color: var(--ab-paper);
 background-image:
 linear-gradient(
 180deg,
 rgba(252, 250, 247, 0.78) 0%,
 rgba(247, 242, 235, 0.7) 48%,
 rgba(252, 250, 247, 0.8) 100%
 ),
 url("../images/hero/hero-marble-white.webp");
 background-size: cover;
 background-position: center;
}

.hh-ab-promise__inner {
 max-width: 42rem;
 margin: 0 auto;
 text-align: center;
}

.hh-ab-promise__mark {
 display: block;
 width: auto;
 height: 1.85rem;
 margin: 0 auto 1.65rem;
 opacity: 0.72;
 object-fit: contain;
}

.hh-ab-promise .hh-ab-eyebrow {
 justify-content: center;
 margin-bottom: 1.35rem;
}

.hh-ab-promise h2 {
 margin: 0 auto 1.45rem;
 max-width: 22em;
 font-family: var(--hh-serif);
 font-size: clamp(1.85rem, 3.4vw, 2.55rem);
 font-weight: 300;
 letter-spacing: 0.08em;
 line-height: 1.5;
}

.hh-ab-promise__text {
 margin: 0 auto;
 max-width: 34rem;
 font-size: 1.02rem;
 font-weight: 300;
 line-height: 2.1;
 letter-spacing: 0.04em;
 color: var(--hh-ink-soft);
}

.hh-ab-promise__text::before {
 content: "";
 display: block;
 width: 2.25rem;
 height: 1px;
 margin: 0 auto 1.55rem;
 background: #ff822d;
}

.hh-ab-points {
 margin: 1.5rem 0 0;
 padding: 0;
 list-style: none;
 display: grid;
 gap: 0.85rem;
}

.hh-ab-points li {
 display: grid;
 grid-template-columns: 2.2rem minmax(0, 1fr);
 gap: 0.55rem 0.85rem;
 padding-top: 0.85rem;
 border-top: 1px solid var(--ab-hair);
}

.hh-ab-points__num {
 font-family: var(--hh-serif);
 font-size: 0.78rem;
 letter-spacing: 0.14em;
 color: var(--hh-orange);
 padding-top: 0.2rem;
}

.hh-ab-points strong {
 display: block;
 margin-bottom: 0.2rem;
 font-family: var(--hh-serif);
 font-size: 1.05rem;
 font-weight: 400;
 letter-spacing: 0.06em;
 color: var(--hh-ink);
}

.hh-ab-points p {
 margin: 0;
 font-size: 0.92rem;
 font-weight: 300;
 line-height: 1.85;
 color: var(--hh-ink-soft);
}

/* —— Science pillars (3) —— */
.hh-ab-pillars {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1rem;
 margin: 0;
 padding: 0;
 list-style: none;
}

.hh-ab-pillar {
 display: flex;
 flex-direction: column;
 gap: 0.65rem;
 min-height: 100%;
 padding: 1.45rem 1.35rem 1.5rem;
 background: #fff;
 border: 1px solid var(--ab-hair);
}

.hh-ab-pillar__num {
 font-family: var(--hh-serif);
 font-size: 0.78rem;
 font-weight: 400;
 letter-spacing: 0.16em;
 color: var(--hh-orange);
}

.hh-ab-pillar__region {
 margin: 0;
 font-size: 0.72rem;
 letter-spacing: 0.18em;
 color: var(--hh-muted);
}

.hh-ab-pillar h3 {
 margin: 0;
 font-size: 1.2rem;
 font-weight: 400;
}

.hh-ab-pillar p {
 margin: 0;
 font-size: 0.92rem;
 font-weight: 300;
 line-height: 1.9;
 color: var(--hh-ink-soft);
 flex: 1;
}

.hh-ab-pillar__link {
 margin-top: 0.35rem;
 align-self: flex-start;
 font-size: 0.84rem;
 letter-spacing: 0.08em;
 color: var(--hh-ink);
 text-decoration: none;
 border-bottom: 1px solid var(--ab-hair-strong);
 padding-bottom: 0.15rem;
}

.hh-ab-pillar__link:hover {
 color: var(--hh-orange);
 border-bottom-color: var(--hh-orange);
}

/* —— Gallery —— */
.hh-ab-gallery {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1.25rem 1rem;
 margin: 0;
 padding: 0;
 list-style: none;
}

.hh-ab-shot { margin: 0; }

.hh-ab-shot img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 3 / 2;
 object-fit: cover;
}

.hh-ab-shot figcaption {
 margin-top: 0.55rem;
 font-size: 0.84rem;
 font-weight: 400;
 letter-spacing: 0.04em;
 line-height: 1.6;
 color: var(--hh-ink-soft);
}

.hh-ab-note {
 max-width: 44rem;
 margin: 1.75rem 0 0;
 font-size: 0.92rem;
 font-weight: 300;
 line-height: 1.9;
 color: var(--hh-muted);
}

/* —— Visit facts —— */
.hh-ab-visit {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: clamp(1.5rem, 4vw, 3rem);
 align-items: start;
}

.hh-ab-facts {
 margin: 0;
 border-top: 1px solid var(--ab-hair-strong);
}

.hh-ab-facts > div {
 display: grid;
 grid-template-columns: 7.5rem minmax(0, 1fr);
 gap: 0.75rem 1.25rem;
 padding: 1.05rem 0;
 border-bottom: 1px solid var(--ab-hair);
}

.hh-ab-facts dt {
 margin: 0;
 font-family: var(--hh-serif);
 font-size: 0.92rem;
 font-weight: 400;
 letter-spacing: 0.08em;
 color: var(--hh-ink);
}

.hh-ab-facts dd {
 margin: 0;
 font-size: 0.95rem;
 font-weight: 300;
 line-height: 1.8;
 color: var(--hh-ink-soft);
}

.hh-ab-num {
 font-family: var(--hh-num);
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.04em;
 color: var(--hh-ink);
 text-decoration: none;
}

.hh-ab-num:hover { color: var(--hh-orange); }

.hh-ab-visit__media {
 margin: 0;
}

.hh-ab-visit__media img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

.hh-ab-visit__media figcaption {
 margin-top: 0.65rem;
 font-size: 0.82rem;
 letter-spacing: 0.06em;
 color: var(--hh-muted);
}

.hh-ab-more {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.85rem;
 margin: 0;
 padding: 0;
 list-style: none;
}

.hh-ab-more a {
 display: flex;
 flex-direction: column;
 gap: 0.35rem;
 min-height: 100%;
 padding: 1.25rem 1.2rem;
 background: #fff;
 border: 1px solid var(--ab-hair);
 color: var(--hh-ink);
 text-decoration: none;
}

.hh-ab-more a:hover {
 border-color: var(--hh-orange);
 color: var(--hh-ink);
}

.hh-ab-more strong {
 font-family: var(--hh-serif);
 font-size: 1.15rem;
 font-weight: 400;
 letter-spacing: 0.08em;
}

.hh-ab-more span {
 font-size: 0.88rem;
 font-weight: 300;
 line-height: 1.7;
 color: var(--hh-ink-soft);
}

.hh-ab-disclaimer {
 padding: 1.5rem 0 2.5rem;
 border-top: 1px solid var(--ab-hair);
}

.hh-ab-disclaimer p {
 max-width: 52rem;
 margin: 0;
 font-size: 0.82rem;
 font-weight: 300;
 line-height: 1.85;
 color: var(--hh-muted);
}

@media (min-width: 861px) {
 .hh-ab h1.hh-ab-hero__title {
 white-space: nowrap;
 font-size: clamp(1.7rem, 0.45rem + 2.35vw, 3.05rem);
 letter-spacing: 0.06em;
 line-height: 1.25;
 }
}

@media (min-width: 860px) {
 .hh-ab-gallery,
 .hh-ab-pillars {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }

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

@media (max-width: 860px) {
 .hh-ab-hero__grid,
 .hh-ab-split,
 .hh-ab-visit {
 grid-template-columns: 1fr;
 }

 .hh-ab-hero__media { order: -1; }

 .hh-ab-hero__media img {
 aspect-ratio: 4 / 3;
 }

 .hh-ab-facts > div {
 grid-template-columns: 1fr;
 gap: 0.25rem;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hh-ab-btn:hover { filter: none; }
}