/* TOMITA — full-viewport photographs with quiet, in-image descriptions. */
#top {
  box-sizing:border-box; height:100svh!important; min-height:0!important;
  padding:78px 0 0!important; overflow:hidden!important;
  background:var(--tm-paper,#f3eee6)!important;
}
#heroImages {
  position:relative; width:100%; height:calc(100svh - 78px);
  margin:0; outline:none;
}
#heroImages:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.hero-image-stage {
  position:relative; width:100%; height:100%; min-height:0;
  isolation:isolate; overflow:hidden; background:var(--tm-paper,#f3eee6);
  touch-action:pan-y pinch-zoom;
}
.hero-image-frame {
  position:absolute; inset:0; margin:0; opacity:0; z-index:0;
  visibility:hidden; transition:opacity 450ms ease;
}
.hero-image-frame.is-active { opacity:1; visibility:visible; z-index:2; }
.hero-image-frame.is-outgoing { opacity:1; visibility:visible; z-index:1; transition:none; }
.hero-image-frame::after {
  content:""; position:absolute; z-index:1; inset:auto 0 0;
  height:62%; max-height:520px; pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 25%,rgba(0,0,0,.54) 70%,rgba(0,0,0,.72) 100%);
}
.hero-image-frame img {
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:50% 50%;
  filter:none!important; transform:none!important; opacity:1!important;
  user-select:none; -webkit-user-drag:none;
}
#heroImages .hero-image-caption {
  position:absolute; z-index:2; left:clamp(24px,3.6vw,56px); right:24px; bottom:104px;
  width:auto; max-width:560px; margin:0; padding:0; color:#fff;
  text-align:left; text-transform:none; letter-spacing:normal;
  text-shadow:0 1px 12px rgba(0,0,0,.15);
}
.hero-image-frame.is-outgoing .hero-image-caption { opacity:0; }
#heroImages .hero-image-caption h2 {
  margin:0 0 12px; padding:0; font-family:var(--tm-serif,"Playfair Display",Georgia,serif);
  font-size:clamp(30px,2.65vw,42px); font-weight:400; line-height:1.16;
  letter-spacing:-.025em; text-transform:none; color:inherit;
}
#heroImages .hero-image-caption p {
  margin:0; padding:0; max-width:44ch;
  font-family:var(--tm-sans,Inter,sans-serif); font-size:14px; font-weight:400;
  line-height:1.65; letter-spacing:.005em; text-transform:none; color:inherit;
}
.hero-image-footer {
  position:absolute; z-index:5; inset:auto 0 20px; height:44px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:0 clamp(24px,3.6vw,56px); color:#fff; background:transparent;
}
.hero-collection-link {
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--tm-sans,Inter,sans-serif); font-size:12px; font-weight:400;
  letter-spacing:.1em; text-decoration:none; color:inherit;
}
.hero-collection-link span { border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:3px; }
.hero-collection-link:hover span { border-color:currentColor; }
.hero-image-controls { display:flex; align-items:center; gap:8px; }
.hero-image-controls[hidden] { display:none; }
.hero-image-controls button {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:0; background:transparent; color:inherit; cursor:pointer;
  transition:opacity 160ms ease;
}
.hero-image-controls button:hover { opacity:.55; }
.hero-image-controls button:disabled { opacity:.25; cursor:wait; }
.hero-image-controls button:focus-visible,.hero-collection-link:focus-visible {
  outline:1px solid currentColor; outline-offset:3px;
}
.hero-image-counter {
  display:flex; align-items:baseline; justify-content:center; gap:10px; min-width:63px;
  font-family:var(--tm-sans,Inter,sans-serif); font-size:12px; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:.08em;
}
.hero-image-counter .hero-image-total,.hero-image-counter .hero-image-divider { opacity:.65; }
@media(max-width:767px) {
  .hero-image-frame img { object-position:var(--mobile-position,50% 50%); }
  #heroImages .hero-image-caption { left:24px; right:24px; bottom:98px; }
  #heroImages .hero-image-caption h2 { font-size:30px; margin-bottom:12px; }
  #heroImages .hero-image-caption p { font-size:13px; line-height:1.65; max-width:36ch; }
  .hero-image-footer { padding-inline:24px; gap:12px; bottom:18px; }
  .hero-image-controls { gap:0; }
  .hero-collection-link { font-size:11px; letter-spacing:.075em; }
}
@media(max-height:500px) and (orientation:landscape) {
  #heroImages .hero-image-caption { bottom:72px; max-width:520px; }
  #heroImages .hero-image-caption h2 { font-size:26px; margin-bottom:8px; }
  #heroImages .hero-image-caption p { font-size:12px; line-height:1.5; max-width:60ch; }
  .hero-image-footer { bottom:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-image-frame,.hero-image-controls button { transition:none; }
}

/* Keep the existing gallery content in readable mobile flow below the landscape hero. */
@media(max-width:767px) {
  #homeGallery .g-row {
    height:auto!important; min-height:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto auto auto!important;
    align-content:start!important; row-gap:32px!important;
    padding:64px 24px!important;
  }
  #homeGallery .g-row:first-child .g-a,
  #homeGallery .g-row.g-flip .g-a {
    grid-column:1 / -1!important; grid-row:1!important;
    width:78%!important; margin:0!important; align-self:start!important;
  }
  #homeGallery .g-row:first-child .g-a { justify-self:start!important; }
  #homeGallery .g-row.g-flip .g-a { justify-self:end!important; }
  #homeGallery .g-row:first-child .g-a a,
  #homeGallery .g-row.g-flip .g-a a { height:auto!important; }
  #homeGallery .g-row .g-a img { height:auto!important; object-fit:contain!important; }
  #homeGallery .g-row:first-child .g-text,
  #homeGallery .g-row.g-flip .g-text {
    grid-column:1 / -1!important; grid-row:2!important;
    width:100%!important; max-width:none!important;
    align-self:start!important; margin:0!important; padding:0!important;
  }
  #homeGallery .g-row:first-child .g-b {
    grid-column:2!important; grid-row:3!important;
    width:86%!important; align-self:start!important;
    justify-self:end!important; margin:0!important; transform:none!important;
  }
}

/* Occasional philosophy quotes remain separate from the photograph descriptions. */
#heroImages .hero-image-quote {
  position:absolute; z-index:2; top:18%; left:clamp(24px,3.6vw,56px);
  width:calc(100% - 104px); max-width:480px; margin:0; padding:0;
  border:0; background:none; color:#fff; text-align:left;
  text-shadow:0 1px 12px rgba(0,0,0,.16);
}
#heroImages .hero-image-quote p {
  margin:0; padding:0; color:inherit;
  font-family:var(--tm-serif,"Playfair Display",Georgia,serif);
  font-size:clamp(22px,2.25vw,34px); font-style:italic; font-weight:400;
  line-height:1.4; letter-spacing:-.02em; text-transform:none;
  text-wrap:pretty;
}
#heroImages [data-source="06"] .hero-image-quote,
#heroImages [data-source="10"] .hero-image-quote,
#heroImages [data-source="18"] .hero-image-quote { color:#241c13; text-shadow:none; }
.hero-image-frame.is-outgoing .hero-image-quote { opacity:0; }
@media(max-width:767px) {
  #heroImages .hero-image-quote { left:24px; width:calc(100% - 48px); max-width:400px; }
  #heroImages .hero-image-quote p { font-size:24px; }
  #heroImages [data-source="10"] .hero-image-quote {
    top:auto; bottom:242px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.16);
  }
}
@media(max-height:500px) and (orientation:landscape) {
  #heroImages .hero-image-quote,
  #heroImages [data-source="10"] .hero-image-quote {
    top:28px; bottom:auto; max-width:470px;
  }
  #heroImages .hero-image-quote p { font-size:21px; line-height:1.35; }
  #heroImages [data-source="10"] .hero-image-quote { color:#241c13; text-shadow:none; }
}

/* Lower the opening gallery photograph and philosophy together. */
@media(min-width:768px) {
  #homeGallery .g-row:first-child .g-space,
  #homeGallery .g-row:first-child .g-thesis {
    position:relative;
    top:clamp(24px,4svh,40px);
  }
}