:root {
  --paper: #faf8f4;
  --ink: #24231f;
  --line: #b8b0a3;
  --field: #ece7df;
  --on-field: #24231f;
  --action: #2f392e;
  --on-action: #fff;
  --head: "Noto Serif TC", "Songti TC", PMingLiU, serif;
  --pad: clamp(1rem, 5vw, 5.5rem);
}
[data-theme=urban] { --paper: #f2f3ed; --field: #e0e6db; --action: #354638; }
[data-theme=editorial], [data-theme=dark] {
  --paper: #fcf6eb;
  --field: #eee2d1;
  --action: #513c31;
  --head: system-ui, "Microsoft JhengHei", sans-serif;
}
[data-theme=dark] { --paper: #faf1ef; --field: #eedddb; --action: #672f3f; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.7 system-ui, sans-serif; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.15; }
h1 { font-size: clamp(2.45rem, 6.2vw, 6.5rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.85rem, 3.8vw, 3.45rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
a { color: inherit; }
a:hover { text-decoration-thickness: .15em; }
img { display: block; width: 100%; height: auto; }
[hidden] { display: none !important; }
.published-work:empty { display: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.shell { width: min(100% - var(--pad) * 2, 86rem); margin-inline: auto; }
.skip { position: absolute; z-index: 2; top: .5rem; left: var(--pad); background: var(--paper); padding: .5rem 1rem; transform: translateY(-150%); }
.skip:focus { transform: none; }
.logo, .actions, .foot-inner, .jump, .preview { display: flex; align-items: center; flex-wrap: wrap; }
.top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .15rem clamp(1rem, 4vw, 4rem); padding-block: .65rem; }
.actions, .jump { gap: .25rem clamp(.65rem, 2vw, 2rem); }
.top nav a, .foot a, .link, .jump a, .preview a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .25em; }
.hair-nav {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(max-content, 1fr)) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(.15rem, 1.2vw, 1.2rem);
  min-height: 5.5rem;
}
.hair-nav > a { padding-inline: .48rem; border-radius: 100vw; background: var(--paper); }
.hair-nav > a:nth-of-type(odd) { transform: translateY(-.48rem); }
.hair-nav > a:nth-of-type(even) { transform: translateY(.48rem); }
.hair-strands { position: absolute; z-index: -1; inset: 0 2rem 0 0; width: calc(100% - 2rem); height: 100%; color: var(--action); opacity: .45; }
.hair-strands path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hair-profile { width: clamp(3rem, 6vw, 5rem); height: auto; fill: var(--action); }
.profile-strands { stroke: var(--paper); stroke-width: .9; opacity: .62; }
.top nav a:not([aria-current]) { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.logo { gap: .75rem; font-weight: 850; font-size: 1.3rem; text-decoration: none; }
.logo img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; }
.cta { border-radius: 100vw; display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: .55rem 1.1rem; font-weight: 750; background: var(--action); color: var(--on-action); text-decoration: none; }
.cta:hover { text-decoration: underline; }
.hair-nav > .top-cta { background: var(--action); color: var(--on-action); }
.preview { gap: .5rem 1rem; border-top: 1px solid var(--line); padding-block: .55rem; }
.preview select { color: var(--ink); background: var(--paper); font: inherit; min-height: 44px; max-width: 100%; padding: .4rem; }
.breeze { background: radial-gradient(ellipse at 75% 75%, var(--field), transparent 66%); overflow: clip; }
.breeze-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 6vw, 7rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 6rem);
}
.breeze-grid::before, .breeze-grid::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 25% -15% 19% -16%;
  border-top: 1px solid var(--line);
  border-radius: 50%;
  transform: rotate(-17deg);
}
.breeze-grid::after { inset: 30% -18% 12% -13%; opacity: .58; }
.breeze-copy { position: relative; z-index: 1; }
.breeze h1 {
  font-family: "Noto Serif TC", "Songti TC", PMingLiU, serif;
  font-size: clamp(2.8rem, 6.1vw, 6.6rem);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.12;
}
.breeze h1 em { color: var(--action); font-style: normal; }
.pitch { margin-block: 1.4rem 1.1rem; max-width: 24em; }
.breeze .link { gap: .35em; }
.breeze-portrait { width: 82%; justify-self: end; }
.breeze-portrait img { aspect-ratio: .9; object-fit: cover; object-position: center 58%; border-radius: 47% 47% 16% 43% / 35% 43% 13% 32%; }
.breeze--soft .breeze-portrait img { border-radius: 48% 48% 35% 15% / 36% 36% 31% 14%; }
.breeze--texture .breeze-portrait img { border-radius: 52% 35% 44% 24% / 42% 31% 32% 24%; object-position: center 43%; }
figcaption { font-size: .88rem; padding: .65rem 0; overflow-wrap: anywhere; }
.breeze-portrait figcaption { text-align: right; }
.breeze-detail {
  position: absolute;
  right: 34%;
  bottom: 10%;
  width: clamp(5rem, 13vw, 12rem);
  aspect-ratio: .77;
  object-fit: cover;
  border-radius: 50% 50% 48% 35%;
  border: .35rem solid var(--paper);
  transform: rotate(-10deg);
}
.notice { display: flex; align-items: baseline; gap: .25rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.notice h2 { font: 800 1rem/1.7 system-ui, sans-serif; flex: none; }
.notice p, address { white-space: pre-line; overflow-wrap: anywhere; min-width: 0; }
.block { padding-block: clamp(2.8rem, 7.5vw, 7rem); }
.services h2 { margin-bottom: 1.4rem; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.service-grid article { padding: 1.2rem clamp(.7rem, 2vw, 1.75rem); }
.service-grid article + article { border-left: 1px solid var(--line); }
.service-grid p { margin-top: .65rem; }
.service-note { margin-top: 1rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: 1.25rem; }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photos img { aspect-ratio: .9; object-fit: cover; background: var(--field); }
.home-photos img { aspect-ratio: 1.05; }
.home-photos figure:nth-last-child(2) { margin-top: clamp(0rem, 5vw, 5rem); }
.home-photos figure:first-child:nth-last-child(3) { grid-column: 1 / -1; width: min(100%, 48rem); }
.visit { background: var(--field); color: var(--on-field); }
.visit-grid, .consult { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 7rem); }
address { font-style: normal; margin-block: 1rem; }
.faq h3 { margin-bottom: .9rem; }
.faq details { border-block-start: 1px solid currentColor; }
.faq details:last-child { border-block-end: 1px solid currentColor; }
.faq summary { min-height: 44px; padding-block: .7rem; cursor: pointer; font-weight: 650; }
.faq details p { padding-bottom: .75rem; }
.foot-inner { gap: .2rem 1.5rem; padding-block: .75rem; }
.foot-inner span { margin-right: auto; }
.page-intro { padding: clamp(1.5rem, 5vw, 4.5rem) 0; border-block: 1px solid var(--line); }
.page-intro p { margin-top: .8rem; }
.jump { margin-top: .5rem; }
.album { display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); gap: 1rem; border-bottom: 1px solid var(--line); }
.album h2 { margin-bottom: 1.3rem; }
.published-work { margin-top: 2rem; }
.end-cta { padding-block: 2rem; }
.consult { align-items: center; }
.consult img { aspect-ratio: 1.03; object-fit: cover; }
.consult dl { margin-block: 1.4rem; }
.consult dl div { padding-block: .7rem; border-top: 1px solid var(--line); }
.consult dt { font-weight: 800; }
:is([data-theme=editorial], [data-theme=dark]) .page-intro { text-align: center; }
:is([data-theme=editorial], [data-theme=dark]) .jump { justify-content: center; }
@media (max-width: 53rem) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid article:nth-child(3) { border-left: 0; }
  .service-grid article:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 52rem) {
  .top { grid-template-columns: minmax(0, 1fr); }
  .logo { font-size: 1.05rem; gap: .4rem; }
  .logo img { width: 40px; height: 40px; }
}
@media (max-width: 30rem) {
  .hair-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) 2.5rem; gap: 0; min-height: 4rem; font-size: .78rem; }
  .hair-nav > a { justify-content: center; padding-inline: .12rem; text-align: center; line-height: 1.3; }
  .hair-nav > a > span { display: none; }
  .hair-profile { width: 2.5rem; }
}
@media (max-width: 43rem) {
  .breeze-grid, .visit-grid, .consult, .album { grid-template-columns: minmax(0, 1fr); }
  .breeze-grid { gap: 1.75rem; }
  .breeze-grid::before, .breeze-grid::after { top: 46%; }
  .breeze h1 { font-size: clamp(2.55rem, 9vw, 3.9rem); }
  .breeze-portrait { width: 78%; }
  .breeze-portrait img { aspect-ratio: 1.02; }
  .breeze-detail { right: auto; left: 4%; bottom: 13%; width: 27%; }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
}
@media (forced-colors: active) { .cta { border: 1px solid ButtonText; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:where(main, main [id]) { scroll-margin-top: 1rem; }