/* Oral Clinique Jiyugaoka · photo layout v9.1 · 2026-10-02.
   Every override is scoped to the homepage marker so subpages keep their styles. */
@font-face {
  font-family: "OC Postcard Script";
  src: url("assets/hero-photo-v9/pinyon-script.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.un_fv.oc-photo-v9 {
  display: grid;
  grid-template-columns: minmax(0, 24fr) minmax(0, 76fr);
  grid-template-areas: "copy photos";
  align-items: center;
  column-gap: 20px;
  min-height: 450px;
  padding: 38px 3.4vw 42px;
  overflow: hidden;
  background: #f4ecdf;
}
.un_fv.oc-photo-v9::before {
  background-image: radial-gradient(ellipse at 69% 36%, #fffaf2 0, #f4ecdf 65%);
  background-size: auto;
  background-position: center;
  filter: none;
}
.un_fv.oc-photo-v9::after {
  content: "";
  position: absolute;
  inset: 15px 18px;
  z-index: -1;
  border: 1px solid #a7865929;
  pointer-events: none;
}
.un_fv.oc-photo-v9 .un_fv_content {
  grid-area: copy;
  position: relative;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: -30px 0 0;
}
.un_fv.oc-photo-v9 .oc-editorial-title {
  top: 0;
  margin-bottom: 12px;
}
.un_fv.oc-photo-v9 .oc-editorial-title .oc-wordmark,
.un_fv.oc-photo-v9 .oc-editorial-title em {
  font-size: clamp(37px, 3.8vw, 70px);
  line-height: .91;
}
.un_fv.oc-photo-v9 .un_fv_text {
  top: 0;
  left: 0;
  width: auto;
  margin: 12px 0 0;
  font-size: clamp(14px, 1.3vw, 20px) !important; /* Existing inline and v8 rules use !important. */
  letter-spacing: .04em;
  white-space: nowrap;
}
.oc-v9-letter {
  position: absolute;
  left: 3.6vw;
  top: calc(50% + 97px);
  display: grid;
  justify-items: start;
  color: #a4855c;
  pointer-events: none;
}
.oc-v9-script { font: 400 clamp(23px, 2.25vw, 36px)/1.15 "OC Postcard Script", cursive; }
.oc-v9-letter svg { width: 158px; height: 35px; margin: -1px 0 2px 11px; opacity: .77; }
.oc-v9-address { margin-left: 14px; font: 400 8px/1.6 Georgia, serif; letter-spacing: .29em; }
.oc-v9-gallery { grid-area: photos; position: relative; aspect-ratio: 1000 / 510; min-width: 0; width: 100%; pointer-events: none; }
.oc-v9-photo {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: clamp(4px, .45vw, 8px) clamp(4px, .45vw, 8px) clamp(18px, 1.7vw, 27px);
  margin: 0;
  background: #fffdf7;
  box-shadow: 0 13px 20px #5a40242e, 0 2px 4px #5a40241a;
}
.oc-v9-photo::after {
  content: "";
  position: absolute;
  width: 25%;
  height: 15px;
  top: -8px;
  left: 13%;
  background: #d3bd94b3;
  transform: rotate(-24deg);
  clip-path: polygon(3% 2%, 97% 5%, 100% 48%, 96% 100%, 0 97%);
}
.oc-v9-photo img { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; object-fit: cover; }
.oc-v9-photo figcaption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 1px;
  color: #967249;
  font: 400 clamp(15px, 1.65vw, 25px)/1 "OC Postcard Script", cursive;
  text-align: center;
  white-space: nowrap;
}
.oc-v9-reception { left: 0; top: 5%; width: 28%; height: 44%; transform: rotate(-3deg); z-index: 1; }
.oc-v9-reception img { object-position: 36% 55%; }
.oc-v9-care { left: 25.4%; top: 1%; width: 28%; height: 47%; transform: rotate(1.7deg); z-index: 2; }
.oc-v9-care img { object-position: 40% 32%; }
.oc-v9-care::after { left: 69%; background: #aabb9ebf; transform: rotate(23deg); }
.oc-v9-room { left: 51%; top: 4%; width: 26%; height: 44%; transform: rotate(-1.5deg); z-index: 1; }
.oc-v9-room::after { left: 39%; background: #d6b4a5b0; transform: rotate(-4deg); }
.oc-v9-smile { left: 1%; top: 49%; width: 28%; height: 45%; transform: rotate(2deg); z-index: 3; }
.oc-v9-smile img { object-position: 35% 35%; }
.oc-v9-smile::after { left: 34%; background: #aabb9ebf; transform: rotate(6deg); }
.oc-v9-gate { left: 26%; top: 47%; width: 28%; height: 48%; transform: rotate(-2.2deg); z-index: 4; }
.oc-v9-gate img { object-position: 30% 50%; }
.oc-v9-gate::after { left: 41%; background: #d6b4a5b0; transform: rotate(-5deg); }
.oc-v9-sign { left: 51.6%; top: 49%; width: 26%; height: 46%; transform: rotate(2.8deg); z-index: 3; }
.oc-v9-sign img { object-position: 60% 44%; }
.oc-v9-sign::after { left: 67%; background: #aabb9ebf; transform: rotate(22deg); }
.oc-v9-portrait { left: 76%; top: 3%; width: 24%; height: 89%; transform: rotate(-2deg); z-index: 5; }
.oc-v9-portrait img { object-position: 64% 36%; }
.oc-v9-portrait::after { left: 44%; transform: rotate(21deg); }
.oc-v9-stamp { position: absolute; color: #a18356; overflow: visible; z-index: 7; }
.oc-v9-stamp text { fill: currentColor; font: 400 10px Georgia, serif; letter-spacing: 1.8px; }
.oc-v9-stamp-tooth { left: 21.5%; top: 39%; width: 11.3%; transform: rotate(-17deg); }
.oc-v9-stamp-floral { left: 68%; top: 78%; width: 10%; transform: rotate(12deg); }
.oc-v9-stamp .oc-v9-monogram { font: 400 31px var(--oc-display, Georgia), serif; letter-spacing: -2px; }
.oc-v9-stamp .oc-v9-smalltype { font: 400 7px Georgia, serif; letter-spacing: 2px; }
.oc-v9-postmark { position: absolute; color: #a18356; left: 29%; top: 42%; width: 17%; opacity: .6; z-index: 6; transform: rotate(-9deg); }
.oc-v9-sprig { position: absolute; color: #8d9b7c; left: -3%; bottom: -3%; width: 20%; opacity: .85; z-index: 6; transform: rotate(8deg); }
@media (min-width: 1921px) {
  .un_fv.oc-photo-v9 { grid-template-columns: minmax(0, 24fr) minmax(0, 76fr); padding-inline: 5vw; }
  .oc-v9-gallery { max-width: 1400px; justify-self: end; }
  .oc-v9-letter { left: 5vw; }
}
@media (min-width: 621px) and (max-width: 1024px) {
  .un_fv.oc-photo-v9 { grid-template-columns: 1fr; grid-template-areas: "copy" "photos"; min-height: 0; padding: 22px 24px 32px; row-gap: 24px; }
  .un_fv.oc-photo-v9 .un_fv_content { margin: 0; }
  .un_fv.oc-photo-v9 .oc-editorial-title .oc-wordmark,
  .un_fv.oc-photo-v9 .oc-editorial-title em { display: inline; font-size: clamp(36px, 5.1vw, 52px); }
  .un_fv.oc-photo-v9 .oc-editorial-title em { margin-left: .23em; }
  .un_fv.oc-photo-v9 .oc-title-rule { margin-top: 13px; }
  .un_fv.oc-photo-v9 .un_fv_text { font-size: 17px !important; margin-top: 8px; }
  .oc-v9-letter { left: auto; right: 24px; top: 67px; }
  .oc-v9-letter svg, .oc-v9-address { display: none; }
  .oc-v9-script { font-size: 25px; }
}
@media (max-width: 620px) {
  .un_fv.oc-photo-v9 { grid-template-columns: 1fr; grid-template-areas: "copy" "photos"; min-height: 0; padding: 20px 12px 26px; row-gap: 17px; }
  .un_fv.oc-photo-v9::after { inset: 9px; }
  .un_fv.oc-photo-v9 .un_fv_content { margin: 0; padding: 0 5px; }
  .un_fv.oc-photo-v9 .oc-editorial-title { margin-bottom: 0; }
  .un_fv.oc-photo-v9 .oc-editorial-title .oc-wordmark,
  .un_fv.oc-photo-v9 .oc-editorial-title em { font-size: clamp(36px, 10.4vw, 52px); }
  .un_fv.oc-photo-v9 .un_fv_text { font-size: clamp(14px, 4.1vw, 18px) !important; margin-top: 10px; }
  .oc-v9-letter { display: none; }
  .oc-v9-gallery { aspect-ratio: 1.06; max-width: 610px; justify-self: center; }
  .oc-v9-photo { padding: 4px 4px 20px; }
  .oc-v9-photo::after { height: 11px; top: -6px; width: 31%; }
  .oc-v9-photo figcaption { font-size: clamp(15px, 4.3vw, 23px); bottom: 2px; }
  .oc-v9-room, .oc-v9-smile { display: none; }
  .oc-v9-reception { left: 0; top: 3%; width: 47%; height: 34%; }
  .oc-v9-reception figcaption { text-align: left; }
  .oc-v9-care { left: 24%; top: 34%; width: 46%; height: 34%; z-index: 4; }
  .oc-v9-gate { left: 0; top: 65%; width: 47%; height: 34%; }
  .oc-v9-sign { left: 54%; top: 67%; width: 46%; height: 32%; }
  .oc-v9-portrait { left: 64%; top: 3%; width: 36%; height: 60%; z-index: 5; }
  .oc-v9-portrait img { object-position: 72% 31%; }
  .oc-v9-portrait figcaption { font-size: clamp(12px, 3.5vw, 20px); }
  .oc-v9-stamp-tooth { left: 43%; top: 12%; width: 19%; }
  .oc-v9-stamp-floral { left: 42%; top: 77%; width: 15%; }
  .oc-v9-postmark { left: 48%; top: 27%; width: 19%; }
  .oc-v9-sprig { left: 5%; bottom: -2%; width: 31%; }
}