/* Photography site — mirrors components/* and ui_kits/photography/* from the Claude Design export. */
*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1; }
img { max-width: 100%; }
button { font: inherit; }
.icon { display: inline-block; flex: none; vertical-align: middle; }
.page { max-width: var(--width-page); margin: 0 auto; width: 100%; }
.t-display { margin: 0; font: var(--type-display); font-size: min(var(--text-3xl), 19vw); letter-spacing: var(--tracking-display); }

/* ---------- Header (SiteHeader + Wordmark) ---------- */
.site-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: var(--z-header);
  height: var(--header-height); display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter-page);
  --fg: var(--night-900);
  background: rgba(246,248,250,.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border-hairline);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-header--overlay { position: fixed; }
.site-header.is-clear { --fg: var(--cloud-50); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }

.wordmark { display: inline-flex; align-items: baseline; gap: 14px; text-decoration: none; color: var(--fg); transition: color var(--dur-base) var(--ease-out); }
.wordmark:hover { color: var(--fg); }
.wordmark__name { font: var(--weight-regular) 26px/1 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; }.is-clear .wordmark__tag { color: var(--cloud-100); }

.site-nav { display: flex; gap: 32px; margin-left: auto; align-items: center; }
.site-nav a {
  display: inline-flex; align-items: center; gap: 8px; padding-block: 8px;
  font: var(--type-ui); letter-spacing: var(--tracking-ui); text-decoration: none; color: var(--fg); opacity: .72;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.is-clear .site-nav a { opacity: .9; }
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; color: var(--fg); }
.site-nav__dot { width: 5px; height: 5px; border-radius: 9px; background: transparent; transition: background var(--dur-fast); }
.site-nav a[aria-current="page"] .site-nav__dot { background: var(--dusk-500); }

@media (max-width: 720px) {
  .site-header { gap: 16px; }
  .wordmark__name { font-size: 22px; }
  .wordmark__tag { display: none !important; }
  .site-nav { gap: 18px; }
  .site-nav__dot { display: none; }
}
@media (max-width: 400px) { .wordmark__name { font-size: 19px; } }

/* ---------- Footer (SiteFooter) ---------- */
.site-footer { background: var(--surface-inverse); color: var(--text-inverse); margin-top: var(--space-10); padding: var(--space-9) var(--gutter-page) var(--space-6); }
.site-footer__top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; padding-bottom: var(--space-8); }
.site-footer__line { font: var(--type-h1); letter-spacing: var(--tracking-display); max-width: 14ch; }
.site-footer__cta { display: inline-flex; align-items: center; gap: 10px; font: var(--type-h3); color: var(--cloud-50); text-decoration-color: var(--border-inverse); }
.site-footer__cta:hover { color: var(--sky-300); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; border-top: 1px solid var(--border-inverse); padding-top: var(--space-5); }
.site-footer__bottom .mp-meta { color: var(--text-inverse-muted); }
.site-footer__links { display: flex; gap: 24px; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { color: var(--cloud-50); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 24px;
  font: var(--weight-medium) 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn .icon { width: 17px; height: 17px; }
.btn--sm { height: 36px; padding: 0 16px; font-size: 12px; }
.btn--sm .icon { width: 16px; height: 16px; }
.btn__end { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__end { transform: translateX(3px); }
.btn--primary { background: var(--action-primary); color: var(--cloud-50); }
.btn--primary:hover { background: var(--action-primary-hover); color: var(--cloud-50); }
.btn--secondary { background: transparent; color: var(--night-900); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--night-900); color: var(--cloud-50); }
.btn--inverse { background: transparent; color: var(--cloud-50); border-color: var(--cloud-50); }
.btn--inverse:hover { background: var(--cloud-0); color: var(--night-900); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.is-busy .btn__end { display: none; }

.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: var(--radius-pill); cursor: pointer; background: transparent; color: var(--night-900);
  transition: background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--cloud-100); }
.icon-btn--outlined { border: 1px solid var(--border-field); }
.icon-btn--sm { width: 40px; height: 40px; }
.icon-btn--sm .icon { width: 17px; height: 17px; }
.icon-btn--dark { color: var(--cloud-50); }
.icon-btn--dark:hover { background: rgba(246,248,250,.12); }
.icon-btn--dark.icon-btn--outlined { border-color: var(--border-inverse); }

/* ---------- Photo ---------- */
.photo { position: relative; overflow: hidden; background: var(--surface-photo-placeholder); }
.photo__tone, .photo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.photo img { object-fit: cover; display: block; opacity: 0; z-index: 1; }
.photo img.is-loaded { opacity: 1; }

/* ---------- Hero (HeroImage) ---------- */
.hero { position: relative; height: 92vh; min-height: 520px; overflow: hidden; color: var(--cloud-50); background: var(--sky-dusk); }
.hero--album { height: 78vh; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__protect { position: absolute; inset: 0; background: var(--protection-top), var(--protection-bottom); }
.hero__body { position: absolute; inset-inline: 0; bottom: 0; padding: 0 var(--gutter-page) var(--space-7); display: grid; gap: var(--space-5); }
.hero__body .mp-meta { color: var(--cloud-100); }
.hero__title { margin: 0; font: var(--type-hero); letter-spacing: var(--tracking-display); max-width: 12ch; text-wrap: balance; }
.hero__row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--border-inverse); padding-top: var(--space-4); }

/* ---------- Two-part intro (statement / facts) ---------- */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; padding: var(--space-9) var(--gutter-page); }
.intro__label { grid-column: span 3; min-width: 140px; }
.intro__text { grid-column: 4 / 12; margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-display); text-wrap: pretty; }
.intro--album .intro__text { grid-column: 6 / 13; }
.facts { grid-column: span 4; min-width: 220px; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-content: start; }
.facts dd { margin: 0; color: var(--text-primary); }
@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-8); }
  .intro__label, .intro__text, .intro--album .intro__text, .facts { grid-column: 1 / -1; }
  .intro__text { font-size: 30px; }
}

/* ---------- Album index ---------- */
.index { padding: 0 var(--gutter-page); }
.latest { padding: 0 var(--gutter-page) var(--space-9); }
.index__head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; padding-bottom: var(--space-6); }
.index__title { display: flex; align-items: baseline; gap: 16px; }
.index__title h2 { margin: 0; font: var(--type-h1); letter-spacing: var(--tracking-display); }
.index__views { display: flex; gap: 8px; align-items: center; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: var(--space-7); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-field); background: transparent; color: var(--text-primary);
  font: var(--type-ui); letter-spacing: var(--tracking-ui); cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--night-900); }
.chip[aria-pressed="true"] { background: var(--night-900); color: var(--cloud-50); border-color: transparent; }
.chip sup { font: var(--type-meta); opacity: .7; top: -.4em; position: relative; vertical-align: baseline; }

.year-group { display: grid; grid-template-columns: minmax(80px, 2fr) 10fr; gap: 16px; }
.album-index--grid .year-group { margin-bottom: var(--space-8); }
.year-group__year { font: var(--type-h2); font-style: italic; color: var(--text-muted); }
.album-index--list .year-group__year { padding-top: 30px; }
.year-group__rows { border-bottom: 1px solid var(--border-hairline); }
.year-group__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-7) var(--space-4); }

/* AlbumIndexRow */
.index-row {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 220px) 72px; align-items: center; gap: 16px;
  padding: 28px 0; border-top: 1px solid var(--border-hairline); text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.index-row:hover { color: inherit; }
.index-row__num { color: var(--text-muted); }
.index-row__title { font: var(--type-h2); letter-spacing: var(--tracking-display); transition: transform var(--dur-base) var(--ease-out); }
.index-row__where { display: grid; gap: 4px; }
.index-row__place { font: var(--type-caption); color: var(--text-secondary); }
.index-row__end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--mist-400); }
.index-row__end .icon { transition: color var(--dur-fast) var(--ease-out); }
.index-row__preview {
  position: absolute; right: calc(220px + 120px); top: 50%; width: 180px; pointer-events: none; z-index: 2; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(-50%) rotate(0deg) translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.index-row:hover, .index-row:focus-visible { border-top-color: var(--border-strong); }
.index-row:hover .index-row__num, .index-row:focus-visible .index-row__num { color: var(--text-highlight); }
.index-row:hover .index-row__title, .index-row:focus-visible .index-row__title { font-style: italic; transform: translateX(12px); }
.index-row:hover .index-row__end .icon, .index-row:focus-visible .index-row__end .icon { color: var(--text-accent); }
.index-row:hover .index-row__preview, .index-row:focus-visible .index-row__preview { opacity: 1; transform: translateY(-50%) rotate(-2deg); }

/* AlbumCard */
.album-card { display: grid; gap: 16px; text-decoration: none; color: inherit; }
.album-card__body { display: grid; gap: 6px; }
.album-card__meta { display: flex; justify-content: space-between; gap: 12px; }
.album-card__title { font: var(--type-h3); letter-spacing: var(--tracking-display); color: var(--text-primary); transition: color var(--dur-fast) var(--ease-out); }
.album-card:hover .album-card__title { color: var(--text-accent); font-style: italic; }
.album-card__count { font: var(--type-caption); color: var(--text-muted); }

@media (max-width: 820px) {
  .year-group { grid-template-columns: 1fr; gap: 8px; }
  .album-index--list .year-group__year { padding-top: var(--space-6); }
  .index-row { grid-template-columns: 36px minmax(0, 1fr) 56px; padding: 22px 0; }
  .index-row__title { font-size: 28px; }
  .index-row__where, .index-row__preview { display: none; }
}

/* ---------- Google Photos album ---------- */
.album-body { padding: 0 var(--gutter-page); }
.gp { display: grid; gap: var(--space-6); container-type: inline-size; }
.gp__bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-hairline); }
.gp__info { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.gp__info .gp__label { color: var(--text-highlight); }
.gp__open { display: inline-flex; align-items: center; gap: 8px; font: var(--type-ui); letter-spacing: var(--tracking-ui); text-decoration: none; }
.gp__grid { column-count: 3; column-gap: var(--gutter-grid); }
@container (max-width: 819px) { .gp__grid { column-count: 2; } }
@container (max-width: 479px) { .gp__grid { column-count: 1; } }
.gp__tile {
  display: block; width: 100%; padding: 0; border: 0; margin-bottom: var(--gutter-grid); break-inside: avoid;
  cursor: zoom-in; overflow: hidden; background: var(--surface-photo-placeholder); min-height: 160px;
}
.gp__tile.is-loaded { min-height: 0; }
.gp__tile img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.gp__tile.is-loaded img { opacity: 1; }
.gp__tile:hover img, .gp__tile:focus-visible img { transform: scale(1.03); }
.gp__empty { position: relative; display: grid; place-items: center; aspect-ratio: 21/9; min-height: 240px; text-decoration: none; overflow: hidden; background: var(--sky-day); color: var(--cloud-50); }
.gp__empty::before { content: ''; position: absolute; inset: 0; background: rgba(7,13,23,.35); }
.gp__empty:hover { color: var(--cloud-50); }
.gp__empty-body { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 24px; }
.gp__empty-title { font: var(--type-h2); font-style: italic; }
.gp__empty .mp-meta { color: var(--cloud-100); }
.gp__all {
  justify-self: center; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font: var(--weight-medium) 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.gp__all:hover { background: var(--night-900); color: var(--cloud-50); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay-scrim); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; color: var(--text-inverse); }
.lightbox[hidden] { display: none; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter-page); }
.lightbox .mp-meta { color: var(--text-inverse-muted); }
.lightbox__stage { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; min-height: 0; }
.lightbox__stage .icon-btn { justify-self: center; }
.lightbox__frame { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__frame img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lightbox__caption { padding: 20px var(--gutter-page) 12px; display: flex; gap: 24px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.lightbox__title { font: var(--type-h3); font-style: italic; }
.lightbox__meta { display: flex; gap: 24px; flex-wrap: wrap; }
.lightbox__strip { display: flex; gap: 6px; padding: 8px var(--gutter-page) 20px; overflow-x: auto; }
.lightbox__strip button {
  flex: none; width: 56px; height: 40px; padding: 0; border: 0; cursor: pointer; background: center / cover var(--sky-night);
  opacity: .4; outline-offset: 2px; transition: opacity var(--dur-fast) var(--ease-out);
}
.lightbox__strip button.is-active { opacity: 1; outline: 1px solid var(--cloud-50); }
@media (max-width: 560px) { .lightbox__stage { grid-template-columns: 52px minmax(0, 1fr) 52px; } }

/* ---------- Next album ---------- */
.next {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(160px, 320px); gap: var(--space-6); align-items: end; text-decoration: none; color: inherit;
  margin: var(--space-10) auto 0; max-width: var(--width-page); padding: var(--space-6) var(--gutter-page) 0;
}
.next:hover { color: inherit; }
.next__text { display: grid; gap: 16px; border-top: 1px solid var(--border-strong); padding-top: var(--space-5); }
.next__title { font: var(--type-display); font-size: min(var(--text-3xl), 12vw); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.next:hover .next__title { font-style: italic; color: var(--text-accent); }
@media (max-width: 560px) { .next { grid-template-columns: 1fr 120px; gap: var(--space-4); } }

/* ---------- About / Contact (two columns) ---------- */
.split {
  padding: var(--space-9) var(--gutter-page) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-8); align-items: start;
}
.stack { display: grid; gap: var(--space-6); align-content: start; }
.portrait { display: grid; gap: 12px; position: sticky; top: calc(var(--header-height) + 24px); }
.lead { margin: 0; font: var(--type-lead); }
.about__body { margin: 0; font: var(--type-body); font-size: var(--text-md); color: var(--text-secondary); max-width: var(--measure-text); }
.gear { display: grid; grid-template-columns: auto 1fr; gap: 14px 32px; margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); }
.gear dd { margin: 0; font: var(--type-caption); }
@media (max-width: 760px) { .portrait { position: static; } }

.contact-links { display: grid; gap: 14px; padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.contact-links a { display: flex; gap: 12px; align-items: center; text-decoration: none; font: var(--type-h3); overflow-wrap: anywhere; }
.contact { padding: var(--space-9) var(--gutter-page) 0; }
.contact .stack { max-width: 640px; }
.note { margin: 0; font: var(--type-caption); color: var(--text-muted); }