.ht-ph { margin: 0; min-width: 0; }
.ht-ph__link { position: relative; display: block; overflow: hidden; aspect-ratio: calc(var(--space-7) / var(--space-6)); background: var(--c-line); }
.ht-ph__link img { height: 100%; object-fit: cover; transition: transform var(--t-3) var(--ease); }
.ht-ph__link:is(:hover, :focus-visible) img { transform: scale(var(--scale)); }
.ht-ph__zoom { position: absolute; right: var(--space-3); bottom: var(--space-3); display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border: var(--bd) solid var(--c-mv-dot); background: var(--c-veil); color: var(--c-bg); opacity: 0; transition: opacity var(--t-1); }
.ht-ph__zoom svg { width: var(--space-3); height: var(--space-3); fill: none; stroke: currentColor; stroke-width: var(--ext-stroke); }
.ht-ph__link:is(:hover, :focus-visible) .ht-ph__zoom { opacity: 1; }
@media (hover: none) { .ht-ph__zoom { opacity: 1; } }
.ht-ph figcaption { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--fs-2); line-height: var(--lh-2); letter-spacing: calc(var(--fs-2) * 7 / 100); color: var(--c-ink-sub); }
.ht-ph__no { flex: none; font-family: var(--ff-serif); font-size: var(--fs-1); }
.ht-ph--drop { padding-top: var(--space-7); }

.ht-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-7); }
.ht-head .h2 { margin-top: var(--space-4); }
.ht-head__lead { font-size: var(--fs-3); color: var(--c-ink-sub); }
.ht-sec + .ht-sec { padding-top: 0; }

.ht-approach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.ht-approach__main { grid-column: span 2; }
.ht-approach .ht-ph:not(.ht-approach__main) .ht-ph__link { aspect-ratio: calc(var(--space-5) / var(--space-6)); }

.ht-feature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); align-items: end; }
.ht-feature__main { grid-column: span 2; }
.ht-feature__side .ht-ph__link { aspect-ratio: calc(var(--space-6) / var(--space-5)); }
.ht-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); align-items: start; }

#main-content > .ht-view { padding-block: var(--space-8); }
.ht-view__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
.ht-view__head { display: block; margin: 0; }
.ht-view__head .ht-head__lead { margin-top: var(--space-5); }
.ht-view__ph { grid-column: span 2; }

#main-content > .ht-night { background: var(--c-accent); color: var(--c-bg); }
.ht-night :is(.h2, .ht-sub) { color: var(--c-bg); }
.ht-night .label, .ht-night .ht-head__lead, .ht-night .ht-ph figcaption { color: var(--c-line); }
.ht-night .ht-ph__link { background: var(--c-ink); }
.ht-sub { margin: var(--space-8) 0 var(--space-5); padding-top: var(--space-6); border-top: var(--bd) solid var(--c-mv-dot); font-family: var(--ff-serif); font-size: var(--fs-6); font-weight: var(--fw-regular); line-height: var(--lh-2); letter-spacing: calc(var(--fs-6) * 7 / 100); }
.ht-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.ht-four .ht-ph__link { aspect-ratio: calc(var(--space-6) / var(--space-5)); }

.ht-info__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.ht-info__name { font-family: var(--ff-serif); font-size: var(--fs-7); font-weight: var(--fw-regular); line-height: var(--lh-2); letter-spacing: calc(var(--fs-7) * 7 / 100); }
.ht-info .tbl { margin-top: var(--space-5); border-top-color: var(--c-accent); }

.ht-contact__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
.ht-contact__lead { margin: var(--space-4) 0 0; font-size: var(--fs-3); color: var(--c-ink-sub); }
.ht-contact__act { display: flex; flex-direction: column; gap: var(--space-4); }
.ht-contact__tel { display: flex; flex-direction: column; color: var(--c-accent); transition: color var(--t-1); }
.ht-contact__tel:is(:hover, :focus-visible) { color: var(--c-accent-2); }
.ht-contact__tel-h { font-size: var(--fs-2); color: var(--c-ink-sub); }
.ht-contact__tel-no { font-family: var(--ff-serif); font-size: var(--fs-9); line-height: var(--lh-2); letter-spacing: calc(var(--fs-9) * 7 / 100); }
a.pill-link.ht-contact__form { width: 100%; justify-content: space-between; border-bottom: var(--bd) solid var(--c-accent); }

.ht-lb { width: calc(var(--space-9) * 15); max-width: calc(var(--w-view) - var(--space-6)); max-height: calc(var(--h-view) - var(--space-6)); padding: var(--space-5); border: 0; background: var(--c-accent); color: var(--c-bg); overflow: auto; }
.ht-lb::backdrop { background: var(--c-veil); backdrop-filter: blur(var(--space-1)); }
.ht-lb button { font: inherit; color: inherit; background: transparent; cursor: pointer; }
.ht-lb svg { fill: none; stroke: currentColor; stroke-width: var(--ext-stroke); }
.ht-lb__top { display: flex; align-items: center; gap: var(--space-5); }
.ht-lb__title { font-family: var(--ff-serif); font-size: var(--fs-5); }
.ht-lb__count { margin-left: auto; font-family: var(--ff-serif); font-size: var(--fs-3); color: var(--c-line); }
.ht-lb__close { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-2) var(--space-5); border: 0; border-left: var(--bd) solid var(--c-mv-dot); }
.ht-lb__close svg { width: var(--space-4); height: var(--space-4); }
.ht-lb__stage { display: grid; grid-template-columns: var(--space-7) minmax(0, 1fr) var(--space-7); gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.ht-lb__img { width: 100%; height: min(calc(var(--h-view) - var(--space-9) * 3), calc(var(--space-9) * 8)); object-fit: contain; }
.ht-lb__nav { display: grid; place-items: center; height: var(--space-8); padding: 0; border: var(--bd) solid var(--c-mv-dot); transition: background var(--t-1); }
.ht-lb__nav:is(:hover, :focus-visible) { background: var(--c-veil); }
.ht-lb__nav svg { width: var(--space-4); height: var(--space-4); }
.ht-lb__cap { margin: var(--space-3) 0; font-size: var(--fs-3); text-align: center; }
.ht-lb__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; scrollbar-color: var(--c-line) var(--c-accent); }
.ht-lb__thumbs button { flex: 0 0 var(--space-8); aspect-ratio: calc(var(--space-7) / var(--space-6)); padding: 0; border: var(--bd-2) solid transparent; opacity: var(--op); transition: opacity var(--t-1); }
.ht-lb__thumbs button[aria-current="true"], .ht-lb__thumbs button:is(:hover, :focus-visible) { opacity: 1; border-color: var(--c-bg); }
.ht-lb__thumbs img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .ht-feature, .ht-view__in, .ht-info__in, .ht-contact__in { gap: var(--space-6); }
}
@media (max-width: 768px) {
  .ht-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
  .ht-approach, .ht-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .ht-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .ht-row .ht-ph { grid-column: span 2; }
  .ht-approach__main { grid-column: 1 / -1; }
  .ht-approach .ht-ph--drop { padding-top: var(--space-6); }
  .ht-feature { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .ht-feature__main { grid-column: 1 / -1; }
  .ht-feature__side { grid-column: 2 / -1; }
  .ht-row { margin-top: var(--space-6); }
  .ht-row .ht-ph--drop { padding-top: 0; }
  .ht-row .ht-ph:last-child { grid-column: 2 / -1; }
  #main-content > .ht-view { padding-block: var(--space-7); }
  .ht-view__in, .ht-info__in, .ht-contact__in { grid-template-columns: minmax(0, 1fr); }
  .ht-view__ph { grid-column: auto; }
  .ht-sub { margin-top: var(--space-7); padding-top: var(--space-5); font-size: var(--fs-5); }
  .ht-contact__tel-no { font-size: var(--fs-8); letter-spacing: calc(var(--fs-8) * 7 / 100); }
  .ht-lb { max-width: var(--w-view); max-height: var(--h-view); width: var(--w-view); padding: var(--space-3); }
  .ht-lb__stage { grid-template-columns: var(--space-6) minmax(0, 1fr) var(--space-6); gap: var(--space-1); }
  .ht-lb__img { height: calc(var(--h-view) - var(--space-9) * 2 - var(--space-8)); }
  .ht-lb__thumbs button { flex-basis: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) { .ht-ph__link img { transition: none; } }