* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Hiragino Kaku Gothic Std", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, sans-serif;
  background: #000;
  overflow-x: hidden;
}

/* =======================
   HEADER
======================= */

.header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 56px;

  z-index: 999;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  padding: 0 42px;
}

.header nav {
  display: flex;
  gap: 26px;
}

.header a {
  color: #fff;
  text-decoration: none;

  font-size: 11px;
  font-weight: 700;
}

/* =======================
   HERO
======================= */

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: scale(1.03);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroTitleFade {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.hero {
  position: relative;

  width: 100%;
  height: 100vh;

  background: #000;
  overflow: hidden;

  opacity: 0;
  animation: heroFadeIn 2.2s ease forwards;
}

.hero img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  opacity: 1;

  transition:
    opacity 1.5s ease,
    transform 2.2s ease;
}

.hero h1 {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  color: #fff;

  font-size: 28px;
  font-weight: 700;
  letter-spacing: 5px;

  opacity: 0;
  animation: heroTitleFade 1.6s ease forwards;
  animation-delay: 1.2s;
}

/* =======================
   SECTION LABEL
======================= */

.section-label {
  width: 120px;

  border-top: 1px solid #000;
  padding-top: 7px;

  font-size: 9px;
  font-weight: 900;

  color: #000;
}

.section-label.white {
  color: #fff;
  border-color: #fff;
}

/* =======================
   ABOUT
======================= */

.about {
  background: #ffffff;

  min-height: 900px;

  padding: 90px 90px 120px;

  position: relative;
}

.about .section-label {
  margin-left: 40px;
}

.about-card {
  width: 82%;
  margin: 160px auto 0;

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 160px;

  align-items: center;
}

.about-card img {
  width: 100%;
  max-width: 650px;

  display: block;
  margin-bottom: 0;

  grid-column: 2;
  grid-row: 1;
}

.about-card p {
  color: #000;

  font-size: 18px;
  line-height: 1.18;
  font-weight: 400;

  grid-column: 1;
  grid-row: 1;
}

.about-reveal {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 1.6s ease,
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* =======================
   ABOUT SCROLL
======================= */

.about-scroll {
  height: 260vh;

  background: #fff;
  position: relative;
}

.sticky-about {
  position: sticky;
  top: 0;

  height: 100vh;

  overflow: hidden;
}

.about-scroll-img {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: translate(-50%, -50%) scale(0.38);

  opacity: 0.75;

  z-index: 1;
}

.about-scroll-text {
  position: absolute;
  top: 4%;
  left: 0;

  width: 92%;
  padding: 0 8px;

  color: #000;

  font-size: clamp(24px, 4.4vw, 58px);
  font-weight: 900;
  line-height: 1.12;

  opacity: 0;

  z-index: 2;
}

/* =======================
   PROJECTS
======================= */

.projects {
  background: #ffffff;

  padding: 28px 28px 110px;
}

.project {
  width: 78%;
  max-width: 1200px;

  margin-left: auto;
  margin-right: 6%;
  margin-top: 150px;
}

/* Project reveal animation */

.project-reveal {
  opacity: 0;

  transform: translateX(90px) translateY(20px);

  transition:
    opacity 2.2s ease,
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-reveal.active {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.project-reveal.delay-1 {
  transition-delay: 0s;
  transition-duration: 2s;
}

.project-reveal.delay-2 {
  transition-delay: 0.18s;
  transition-duration: 2.3s;
}

.project-reveal.delay-3 {
  transition-delay: 0.35s;
  transition-duration: 2.5s;
}

.project-reveal.delay-4 {
  transition-delay: 0.52s;
  transition-duration: 2.7s;
}

.project-reveal.delay-5 {
  transition-delay: 0.68s;
  transition-duration: 2.9s;
}

/* Project title */

.project-heading {
  margin-bottom: 12px;
}

.project-meta {
  display: flex;
  gap: 45px;

  align-items: center;

  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.project-heading h2 {
  font-size: clamp(60px, 6vw, 92px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2px;
}

/* Project images */

.image-wrapper {
  overflow: hidden;
}

.project-main-img,
.project-gallery img {
  width: 100%;

  display: block;

  cursor: pointer;

  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-wrapper:hover img {
  transform: scale(1.03);
}

/* More Photos slideshow */

#morePhotosSlideshow {
  transition:
    opacity 1.2s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Project text + button */

.project-text-button {
  width: 100%;

  position: relative;

  display: block;

  margin-top: 18px;
  margin-bottom: 32px;

  padding-right: 150px;
}

.project-text-button p {
  width: 100%;
  max-width: none;

  color: #111;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;

  word-break: normal;
  overflow-wrap: break-word;
}

.project-text-button button {
  position: absolute;
  top: 0;
  right: 0;

  background: #000;
  color: #fff;

  border: none;

  padding: 12px 24px;
  min-width: 120px;

  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;

  white-space: nowrap;
  cursor: pointer;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.45s ease,
    color 0.45s ease;
}

.project-text-button button:hover {
  transform: scale(1.06);

  background: #f35c00;
  color: #fff;
}

/* Project gallery */

.project-gallery {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;

  margin-top: 26px;
  margin-bottom: 18px;
}

.project-gallery .image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: hidden;
}

.project-gallery img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* More Photos */

.project-more {
  margin-top: 150px;
}

.more-button-row {
  display: flex;
  justify-content: flex-end;

  margin-top: 18px;
}

.more-button-row button {
  background: #000;
  color: #fff;

  border: none;

  padding: 12px 24px;
  min-width: 120px;

  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;

  white-space: nowrap;
  cursor: pointer;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.45s ease,
    color 0.45s ease;
}

.more-button-row button:hover {
  transform: scale(1.06);

  background: #f35c00;
  color: #fff;
}

/* =======================
   EXHIBITION
======================= */

.exhibition {
  background: #303030;

  padding: 36px 30px 120px;
}

.coming {
  width: 340px;

  margin: 70px auto 0;

  position: relative;
}

.coming img {
  width: 100%;

  display: block;

  transition: opacity 1s ease;
}

.coming p {
  position: absolute;
  top: 18%;
  left: 50%;

  transform: translateX(-50%);

  color: #fff;

  font-size: 12px;
  font-weight: 900;

  text-align: center;
}

/* =======================
   CONTACT
======================= */

.contact {
  background: #f3f3f3;

  min-height: 720px;

  padding: 34px 42px 35px;
}

.contact-content {
  width: 92%;

  margin: 95px auto 0;

  display: grid;
  grid-template-columns: 1fr 320px;
  column-gap: 90px;

  align-items: start;
}

.contact-info {
  color: #000;

  font-size: clamp(42px, 3vw, 72px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -1.5px;
}

.contact-info span,
.contact-info a {
  color: #f35c00;
}

.contact-info a {
  text-decoration: none;

  display: inline-block;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s ease,
    opacity 0.45s ease;
}

.contact-info a:hover {
  transform: translateX(12px) scale(1.03);

  color: #000;

  opacity: 0.85;
}

.contact-image {
  width: 320px;
  height: auto;

  display: block;

  object-fit: cover;
}

footer {
  text-align: center;

  margin-top: 120px;

  font-size: 11px;
  font-weight: 700;

  color: #000;
}

/* =======================
   SMALL DESKTOP / MACBOOK
======================= */

@media (max-width: 1280px) and (min-width: 769px) {

  .about-scroll-text {
    font-size: clamp(24px, 4.2vw, 54px);
    line-height: 1.12;
    width: 92%;
    top: 5%;
  }

  .about-scroll {
    height: 230vh;
  }

  .about-scroll-img {
    opacity: 0.65;
  }

  .header a {
    font-size: 10px;
  }

  .header nav {
    gap: 20px;
  }
}

/* =======================
   MOBILE
======================= */

@media (max-width: 768px) {

  .header {
    height: 44px;

    padding: 0 18px;
  }

  .header nav {
    gap: 14px;
  }

  .header a {
    font-size: 9px;
  }

  .hero {
    height: 100vh;
  }

  .hero h1 {
    font-size: 20px;
    letter-spacing: 4px;
  }

  .section-label {
    width: 120px;

    font-size: 9px;
  }

  /* About mobile */

  .about {
    min-height: auto;

    padding: 60px 20px 80px;
  }

  .about .section-label {
    margin-left: 0;
  }

  .about-card {
    width: 100%;

    margin: 80px auto 0;

    display: flex;
    flex-direction: column-reverse;
    gap: 28px;
  }

  .about-card img {
    width: 80%;

    margin-left: auto;
  }

  .about-card p {
    width: 75%;

    font-size: 10px;
    line-height: 1.4;
  }

  .about-scroll {
    height: 160vh;
  }

  .about-scroll-text {
    font-size: clamp(28px, 8vw, 48px);
  }

  /* Projects mobile */

  .projects {
    padding: 24px 16px 80px;
  }

  .project {
    width: 72%;

    margin-right: 1%;
    margin-top: 90px;
  }

  .project-meta {
    gap: 28px;

    font-size: 12px;
  }

  .project-heading h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .project-text-button {
    padding-right: 0;
  }

  .project-text-button p {
    font-size: 9px;
  }

  .project-text-button button {
    position: static;

    margin-top: 12px;

    padding: 8px 14px;
    min-width: auto;

    font-size: 9px;
  }

  .project-gallery {
    width: 100%;

    gap: 8px;
  }

  .more-button-row {
    justify-content: flex-end;

    margin-top: 12px;
  }

  .more-button-row button {
    padding: 8px 14px;
    min-width: auto;

    font-size: 9px;
  }

  /* Exhibition mobile */

  .exhibition {
    padding: 30px 20px 80px;
  }

  .coming {
    width: 240px;
  }

  /* Contact mobile */

  .contact {
    min-height: auto;

    padding: 40px 20px 30px;

    overflow: hidden;
  }

  .contact-content {
    width: 100%;

    margin-top: 70px;

    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  .contact-info {
    width: 100%;

    font-size: clamp(16px, 4.6vw, 24px);
    line-height: 1.18;
    letter-spacing: -0.3px;

    white-space: normal;
  }

  .contact-info p {
    margin: 0 0 4px 0;
  }

  .contact-info a,
  .contact-info span {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .contact-image {
    width: 55%;
    max-width: 220px;

    align-self: flex-end;
  }

  footer {
    margin-top: 60px;

    font-size: 9px;
  }

}






















/* =======================
STUTTERING DETAIL PAGE
======================= */

.detail-header a {
color: #fff;
}

.stuttering-page {
width: 100%;
background: #000;
color: #ff0000;

font-family:
“IPAmjMincho”,
“IPAexMincho”,
“Hiragino Mincho ProN”,
“Yu Mincho”,
serif;
}

/* =======================
BASIC SCREEN
======================= */

.stuttering-screen {
width: 100%;
min-height: 130vh;

display: flex;
justify-content: center;
align-items: center;

position: relative;
}

/* =======================
TITLE SCREEN
======================= */

.stuttering-title-screen {
width: 100%;
height: 100vh;
min-height: 100vh;

display: flex;
justify-content: center;
align-items: center;

background: #000;

border: 6px solid #ff0000;
box-sizing: border-box;
}

.stuttering-title-screen h1 {
color: #ff0000;

font-family:
“Hiragino Kaku Gothic Std”,
“Hiragino Kaku Gothic ProN”,
“Hiragino Sans”,
Arial,
sans-serif;

font-size: clamp(42px, 5vw, 82px);
font-weight: 900;

line-height: 1;
text-align: center;

margin: 0;
}

/* =======================
TEXT SCREEN
======================= */

.text-screen {
background: #000;

padding: 0 24px;
}

.text-screen p {
width: 460px;
max-width: 78vw;

color: #ff0000;

font-size: clamp(10px, 1vw, 15px);
font-weight: 700;
line-height: 1.8;

text-align: center;
}

/* =======================
PHOTO SCREEN
======================= */

.photo-screen {
background: #000;
}

.photo-screen img {
max-width: 76vw;
max-height: 76vh;

width: auto;
height: auto;

display: block;
object-fit: contain;
}

.photo-screen img[src*=“collage”],
.photo-screen img[src*=“night”],
.photo-screen img[src*=“page”] {
max-width: 82vw;
max-height: 78vh;
}

/* =======================
COMPOSITE BLACK BLOCK
text + red dots + 4 photos
======================= */

.stuttering-composite {
position: relative;

width: 100%;
min-height: 150vh;

background: #000;
color: #fff;

overflow: hidden;
}

.composite-text {
position: absolute;

color: #fff;

font-size: clamp(13px, 1.35vw, 22px);
font-weight: 400;
line-height: 1.4;

z-index: 3;
}

.composite-text-01 {
top: 11%;
left: 4%;
}

.composite-text-02 {
top: 19%;
right: 10%;
}

.composite-text-03 {
top: 34%;
left: 11%;
}

.composite-text-04 {
left: 50%;
top: 73%;

transform: translateX(-50%);
}

.composite-text-05 {
right: 9%;
bottom: 9%;
}

.composite-dot {
position: absolute;

width: 20px;
height: 20px;

border-radius: 50%;
background: #ff0000;

z-index: 4;
}

.composite-dot-01 {
top: 7%;
right: 20%;
}

.composite-dot-02 {
top: 23%;
left: 18%;
}

.composite-dot-03 {
top: 41%;
left: 52%;
}

.composite-dot-04 {
right: 21%;
top: 70%;
}

.composite-dot-05 {
left: 12%;
bottom: 12%;
}

.composite-gallery {
position: absolute;

left: 50%;
top: 52%;

transform: translate(-50%, -50%);

width: 68%;
max-width: 900px;

display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;

z-index: 2;
}

.composite-gallery img {
width: 100%;
height: 34vh;
max-height: 310px;

object-fit: cover;
display: block;
}

/* =======================
LIGHT SECTION
======================= */

.light-screen {
background: #fff;
}

.light-screen p {
color: #ff0000;
}

.light-screen.photo-screen img {
max-width: 72vw;
max-height: 76vh;
}

.ending-screen {
position: relative;
}

.ending-screen p {
width: 460px;
max-width: 78vw;

text-align: left;
}

/* =======================
STUTTERING FOOTER
======================= */

.stuttering-footer {
position: absolute;

left: 0;
bottom: 90px;

width: 100%;

text-align: center;

color: #000;

font-family:
“Hiragino Kaku Gothic Std”,
“Hiragino Kaku Gothic ProN”,
“Hiragino Sans”,
Arial,
sans-serif;

font-size: 18px;
font-weight: 900;
}

/* =======================
MOBILE
======================= */

@media (max-width: 768px) {

.detail-header a {
color: #fff;
}

.header {
height: 44px;
padding: 0 18px;
}

.header nav {
gap: 18px;
}

.header a {
font-size: 14px;
font-weight: 900;
}

.stuttering-screen {
min-height: 130vh;
}

.stuttering-title-screen {
height: 100vh;
min-height: 100vh;

border: 4px solid #ff0000;

}

.stuttering-title-screen h1 {
font-size: 28px;
}

.text-screen p {
width: 78vw;

font-size: 8px;
line-height: 1.8;

}

.photo-screen img {
max-width: 72vw;
max-height: 70vh;
}

.photo-screen img[src*=“collage”],
.photo-screen img[src*=“night”],
.photo-screen img[src*=“page”] {
max-width: 78vw;
max-height: 70vh;
}

/* =======================
COMPOSITE MOBILE
======================= */

.stuttering-composite {
min-height: 150vh;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 120px 0;
overflow: hidden;

}

.composite-text {
position: static;

width: 76%;
margin: 0 auto;
font-size: 8px;
line-height: 1.6;
text-align: left;

}

.composite-text-01 {
margin-bottom: 70px;
align-self: flex-start;
margin-left: 8%;
}

.composite-text-02 {
margin-bottom: 70px;
align-self: flex-end;
margin-right: 8%;
text-align: right;
}

.composite-text-03 {
margin-bottom: 80px;
align-self: flex-start;
margin-left: 14%;
}

.composite-text-04 {
margin-top: 70px;
margin-bottom: 90px;

align-self: center;
text-align: center;

}

.composite-text-05 {
align-self: flex-end;
margin-right: 8%;
text-align: right;
}

.composite-dot {
position: absolute;

width: 8px;
height: 8px;

}

.composite-dot-01 {
top: 120px;
right: 18%;
}

.composite-dot-02 {
top: 300px;
left: 18%;
}

.composite-dot-03 {
top: 520px;
left: 50%;
}

.composite-dot-04 {
bottom: 300px;
right: 17%;
}

.composite-dot-05 {
bottom: 150px;
left: 13%;
}

.composite-gallery {
position: static;

width: 78%;
max-width: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
transform: none;

}

.composite-gallery img {
width: 100%;
height: 140px;

object-fit: cover;

}

.stuttering-footer {
bottom: 70px;

font-size: 14px;

}
}

/* =======================
STUTTERING FADE IN ANIMATION
======================= */

/* 标题页整体：红框 + 标题一起渐显 */
.stuttering-title-screen {
opacity: 0;
transform: scale(0.985);

transition:
opacity 1.8s ease,
transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.stuttering-title-screen.is-visible {
opacity: 1;
transform: scale(1);
}

/* 标题文字稍微延迟出现 */
.stuttering-title-screen h1 {
opacity: 0;
transform: translateY(24px);

transition:
opacity 1.4s ease,
transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);

transition-delay: 0.35s;
}

.stuttering-title-screen.is-visible h1 {
opacity: 1;
transform: translateY(0);
}

/* 普通单屏内容：文字、单张照片 */
.stuttering-screen:not(.stuttering-title-screen) > * {
opacity: 0;
transform: translateY(42px);

transition:
opacity 1.6s ease,
transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stuttering-screen:not(.stuttering-title-screen).is-visible > * {
opacity: 1;
transform: translateY(0);
}

/* 复合区域：文字、红点、四张照片整体 */
.stuttering-composite .composite-text,
.stuttering-composite .composite-dot,
.stuttering-composite .composite-gallery {
opacity: 0;
transform: translateY(36px);

transition:
opacity 1.6s ease,
transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stuttering-composite.is-visible .composite-text,
.stuttering-composite.is-visible .composite-dot,
.stuttering-composite.is-visible .composite-gallery {
opacity: 1;
transform: translateY(0);
}

/* 复合区域里的延迟 */
.stuttering-composite .composite-text-01 {
transition-delay: 0.05s;
}

.stuttering-composite .composite-text-02 {
transition-delay: 0.15s;
}

.stuttering-composite .composite-text-03 {
transition-delay: 0.25s;
}

.stuttering-composite .composite-gallery {
transition-delay: 0.35s;
}

.stuttering-composite .composite-text-04 {
transition-delay: 0.55s;
}

.stuttering-composite .composite-text-05 {
transition-delay: 0.7s;
}

.stuttering-composite .composite-dot {
transition-delay: 0.45s;
}

/* 图片出现时轻微放大 */
.photo-screen img {
transform: scale(0.985);
}

.photo-screen.is-visible img {
transform: scale(1);
}

/* =======================
IMAGE HOVER ZOOM EFFECT
======================= */

/* 所有 Stuttering 页面照片统一加过渡 */
.stuttering-page img {
transition:
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}

/* 单张照片：hover 放大 */
.stuttering-screen.photo-screen.is-visible img:hover {
transform: scale(1.06);
}

/* 复合区域四张照片 hover 放大 */
.stuttering-composite.is-visible .composite-gallery img:hover {
transform: scale(1.06);
}

/* 防止放大时溢出太明显 */
.photo-screen,
.composite-gallery {
overflow: hidden;
}

/* 减少动画设置 */
@media (prefers-reduced-motion: reduce) {
.stuttering-title-screen,
.stuttering-title-screen h1,
.stuttering-screen:not(.stuttering-title-screen) > *,
.stuttering-composite .composite-text,
.stuttering-composite .composite-dot,
.stuttering-composite .composite-gallery {
opacity: 1;
transform: none;
transition: none;
}
}

/* =======================
   FIX PROJECT VIEW MORE LINK
======================= */

.project-text-button a,
.more-button-row a {
  position: absolute;
  top: 0;
  right: 0;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  background: #000;
  color: #fff;

  text-decoration: none;

  border: none;

  padding: 12px 24px;
  min-width: 120px;

  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;

  white-space: nowrap;
  cursor: pointer;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.45s ease,
    color 0.45s ease;
}

.project-text-button a:visited,
.more-button-row a:visited {
  color: #fff;
}

.project-text-button a:hover,
.more-button-row a:hover {
  transform: scale(1.06);

  background: #f35c00;
  color: #fff;
}

/* More Photos 的 VIEW MORE 单独修正 */
.more-button-row {
  position: relative;
}

.more-button-row a {
  position: static;
}

/* Mobile */
@media (max-width: 768px) {

  .project-text-button a {
    position: static;

    margin-top: 12px;

    padding: 8px 14px;
    min-width: auto;

    font-size: 9px;
  }

  .more-button-row a {
    padding: 8px 14px;
    min-width: auto;

    font-size: 9px;
  }

}

/* =======================
   HEADER COLOR CHANGE
   white bg = black text
   dark bg = white text
======================= */

.header a {
  transition: color 0.45s ease;
}

.header.header-on-light a {
  color: #000;
}

.header.header-on-dark a {
  color: #fff;
}

/* =======================
STUTTERING HEADER COLOR CHANGE
======================= */

.detail-header a {
transition: color 0.45s ease;
}

.detail-header.header-on-light a {
color: #000;
}

.detail-header.header-on-dark a {
color: #fff;
}

/* =======================
   COMING SOON DETAIL PAGE
   city.html / more-photos.html
======================= */

.coming-header a {
  color: #fff;
  text-decoration: none;

  font-size: 11px;
  font-weight: 900;

  transition: opacity 0.45s ease;
}

.coming-header a:hover {
  opacity: 0.65;
}

.coming-page {
  width: 100%;
  min-height: 100vh;

  background: #303030;
}

.coming-screen {
  width: 100%;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.coming-image-box {
  position: relative;

  width: 360px;
  max-width: 56vw;

  opacity: 0;
  transform: translateY(36px);

  animation: comingFadeIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.coming-image-box img {
  width: 100%;
  height: 520px;

  display: block;
  object-fit: cover;

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.coming-image-box img:hover {
  transform: scale(1.04);
}

.coming-image-box p {
  position: absolute;

  top: 18%;
  left: 50%;

  transform: translateX(-50%);

  color: #fff;

  font-family:
    "Hiragino Kaku Gothic Std",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Arial,
    sans-serif;

  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;

  text-align: center;

  pointer-events: none;
}

@keyframes comingFadeIn {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile */

@media (max-width: 768px) {

  .coming-header a {
    font-size: 14px;
  }

  .coming-image-box {
    width: 62%;
    max-width: none;
  }

  .coming-image-box img {
    height: 430px;
  }

  .coming-image-box p {
    font-size: 12px;
  }

}