/* =========================================================
   SINGLE NEWS
========================================================= */

.single-news-page{
  position:relative;

  overflow:hidden;

  color:#454943;

  font-family:"Noto Serif JP",serif;

  background:#f7f5f0;
}


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

.single-news-hero{
  position:relative;

  min-height:
    min(820px,88svh);

  display:flex;
  align-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 78% 15%,
      rgba(183,194,181,.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 12% 86%,
      rgba(225,215,197,.22),
      transparent 35%
    ),
    #f7f5f0;
}

.single-news-brand{
  position:absolute;

  top:32px;
  left:50%;

  z-index:3;

  transform:translateX(-50%);

  color:
    rgba(65,76,69,.72);
}

.single-news-brand span{
  display:block;

  padding-left:.38em;

  font-family:
    "Times New Roman",
    serif;

  font-size:12px;

  line-height:1;

  letter-spacing:.38em;

  white-space:nowrap;
}

.single-news-hero-inner{
  position:relative;

  z-index:2;

  max-width:1180px;
}

.single-news-eyebrow{
  margin:0 0 30px;

  font-family:
    "Times New Roman",
    serif;

  font-size:12px;

  line-height:1;

  letter-spacing:.30em;

  color:#748078;
}

.single-news-meta{
  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:
    clamp(28px,3vw,40px);
}

.single-news-meta time{
  font-family:
    "Times New Roman",
    serif;

  font-size:13px;

  letter-spacing:.12em;

  color:#66746c;
}

.single-news-category{
  padding:
    5px 10px;

  border:
    1px solid rgba(76,99,85,.22);

  font-size:11px;

  letter-spacing:.08em;

  color:#66746b;
}

.single-news-title{
  max-width:1100px;

  margin:0;

  font-size:
    clamp(38px,5.5vw,78px);

  line-height:1.55;

  font-weight:300;

  letter-spacing:.06em;

  color:#40453f;
}

.single-news-hero-number{
  position:absolute;

  right:
    clamp(40px,7vw,120px);

  bottom:
    clamp(20px,4vw,60px);

  font-family:
    "Times New Roman",
    serif;

  font-size:
    clamp(100px,16vw,250px);

  line-height:.8;

  letter-spacing:-.06em;

  color:
    rgba(79,99,87,.055);

  pointer-events:none;
}


/* =========================================================
   ARTICLE
========================================================= */

.single-news-article{
  padding:
    clamp(130px,14vw,220px)
    0
    clamp(150px,16vw,250px);

  background:#fbfaf6;
}

.single-news-article-grid{
  display:grid;

  grid-template-columns:
    180px
    minmax(0,1fr);

  gap:
    clamp(60px,8vw,130px);

  align-items:start;
}

.single-news-side{
  position:relative;
}

.single-news-side-inner{
  position:sticky;

  top:130px;
}

.single-news-side-en{
  margin:0 0 24px;

  font-family:
    "Times New Roman",
    serif;

  font-size:11px;

  letter-spacing:.26em;

  color:#728078;
}

.single-news-side-date{
  margin:0 0 12px;

  font-family:
    "Times New Roman",
    serif;

  font-size:13px;

  letter-spacing:.12em;

  color:#5f6f66;
}

.single-news-side-category{
  margin:0;

  font-size:12px;

  line-height:1.8;

  letter-spacing:.06em;

  color:#748078;
}


/* =========================================================
   CONTENT
========================================================= */

.single-news-content{
  min-width:0;
}

.single-news-featured{
  margin:
    0 0
    clamp(70px,8vw,110px);
}

.single-news-featured img{
  display:block;

  width:100%;
  height:auto;

  filter:
    saturate(.92)
    contrast(.98);
}

.single-news-entry{
  max-width:860px;

  margin:0 auto;
}

.single-news-entry > *:first-child{
  margin-top:0;
}

.single-news-entry h2,
.single-news-entry h3,
.single-news-entry h4{
  font-weight:300;

  color:#404740;
}

.single-news-entry h2{
  margin:
    clamp(70px,8vw,110px)
    0
    34px;

  font-size:
    clamp(26px,3vw,40px);

  line-height:1.7;

  letter-spacing:.07em;
}

.single-news-entry h3{
  margin:
    60px
    0
    28px;

  font-size:
    clamp(22px,2.2vw,30px);

  line-height:1.75;

  letter-spacing:.06em;
}

.single-news-entry p{
  margin:
    0 0
    28px;

  font-size:
    clamp(15px,1.1vw,17px);

  line-height:2.25;

  letter-spacing:.045em;

  color:#5e645f;
}

.single-news-entry ul,
.single-news-entry ol{
  margin:
    30px 0;

  padding-left:1.5em;

  font-size:
    clamp(15px,1.1vw,17px);

  line-height:2.1;

  color:#5e645f;
}

.single-news-entry blockquote{
  margin:
    60px 0;

  padding:
    28px 34px;

  border-left:
    2px solid rgba(71,95,81,.36);

  background:
    rgba(255,255,255,.28);

  color:#556159;
}

.single-news-entry img{
  margin:
    50px auto;

  max-width:100%;

  height:auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.single-news-navigation{
  padding:
    clamp(120px,13vw,200px)
    0;

  background:#f6f3ec;
}

.single-news-nav-head{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  padding-bottom:20px;

  border-bottom:
    1px solid rgba(75,95,83,.28);
}

.single-news-nav-head p,
.single-news-nav-head span{
  margin:0;
}

.single-news-nav-head p{
  font-family:
    "Times New Roman",
    serif;

  font-size:12px;

  letter-spacing:.26em;

  color:#4e6256;
}

.single-news-nav-head span{
  font-size:12px;

  letter-spacing:.07em;

  color:#788078;
}

.single-news-nav-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  margin-top:0;
}

.single-news-nav-item{
  min-height:180px;

  border-bottom:
    1px solid rgba(75,95,83,.22);
}

.single-news-nav-item:first-child{
  border-right:
    1px solid rgba(75,95,83,.22);
}

.single-news-nav-link{
  display:flex;

  flex-direction:column;

  justify-content:center;

  min-height:180px;

  padding:
    30px
    40px;

  transition:
    background-color .35s ease;
}

.single-news-nav-next{
  text-align:right;

  align-items:flex-end;
}

.single-news-nav-label{
  margin-bottom:18px;

  font-family:
    "Times New Roman",
    serif;

  font-size:11px;

  letter-spacing:.22em;

  color:#758078;
}

.single-news-nav-link strong{
  display:block;

  max-width:90%;

  font-size:
    clamp(16px,1.5vw,21px);

  line-height:1.8;

  font-weight:300;

  letter-spacing:.04em;

  color:#454d47;

  transition:
    color .35s ease,
    transform .42s cubic-bezier(.22,.61,.36,1);
}

@media (hover:hover){

  .single-news-nav-link:hover{
    background:
      rgba(255,255,255,.28);
  }

  .single-news-nav-prev:hover strong{
    color:#315043;

    transform:
      translate3d(5px,0,0);
  }

  .single-news-nav-next:hover strong{
    color:#315043;

    transform:
      translate3d(-5px,0,0);
  }

}


/* =========================================================
   BACK
========================================================= */

.single-news-back{
  display:flex;

  justify-content:center;

  margin-top:
    clamp(60px,7vw,90px);
}

.single-news-back a{
  display:inline-flex;

  align-items:center;

  gap:20px;

  font-size:14px;

  letter-spacing:.07em;

  color:#4f6257;
}

.single-news-back i{
  position:relative;

  display:block;

  width:38px;
  height:12px;
}

.single-news-back i::before{
  content:"";

  position:absolute;

  left:0;
  top:6px;

  width:35px;
  height:1px;

  background:#596d61;
}

.single-news-back i::after{
  content:"";

  position:absolute;

  right:0;
  top:3px;

  width:6px;
  height:6px;

  border-top:
    1px solid #596d61;

  border-right:
    1px solid #596d61;

  transform:
    rotate(45deg);
}


/* =========================================================
   END
========================================================= */

.single-news-end{
  padding:
    clamp(140px,15vw,230px)
    0;

  color:#f6f2e8;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(149,173,156,.18),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #465c50,
      #30443a
    );
}

.single-news-end-en{
  margin:0 0 36px;

  font-family:
    "Times New Roman",
    serif;

  font-size:11px;

  letter-spacing:.28em;

  color:
    rgba(246,242,232,.60);
}

.single-news-end h2{
  margin:0;

  font-size:
    clamp(34px,4.5vw,64px);

  line-height:1.75;

  font-weight:300;

  letter-spacing:.09em;

  color:#f6f2e8;
}


/* =========================================================
   REVEAL
========================================================= */

.single-news-reveal{
  opacity:0;

  transform:
    translate3d(0,22px,0);

  filter:
    blur(3px);

  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.35s cubic-bezier(.22,.61,.36,1),
    filter 1.05s cubic-bezier(.22,.61,.36,1);
}

.single-news-reveal.is-visible{
  opacity:1;

  transform:
    translate3d(0,0,0);

  filter:
    blur(0);
}


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

@media (max-width:700px){

  .single-news-hero{
    min-height:72svh;
  }

  .single-news-brand{
    top:24px;
  }

  .single-news-brand span{
    font-size:10px;

    letter-spacing:.30em;

    padding-left:.30em;
  }

  .single-news-title{
    font-size:
      clamp(34px,10vw,48px);

    line-height:1.6;
  }

  .single-news-meta{
    gap:12px;
  }

  .single-news-hero-number{
    right:18px;
    bottom:18px;

    font-size:110px;
  }

  .single-news-article{
    padding:
      100px
      0
      130px;
  }

  .single-news-article-grid{
    grid-template-columns:1fr;

    gap:50px;
  }

  .single-news-side-inner{
    position:relative;

    top:auto;

    display:flex;

    gap:18px;

    align-items:center;
  }

  .single-news-side-en{
    margin:0;
  }

  .single-news-side-date,
  .single-news-side-category{
    margin:0;
  }

  .single-news-featured{
    margin-bottom:60px;
  }

  .single-news-entry h2{
    margin-top:70px;
  }

  .single-news-nav-grid{
    grid-template-columns:1fr;
  }

  .single-news-nav-item:first-child{
    border-right:0;
  }

  .single-news-nav-link{
    min-height:140px;

    padding:
      26px 0;
  }

  .single-news-nav-next{
    text-align:left;

    align-items:flex-start;
  }

  .single-news-nav-next:hover strong{
    transform:
      translate3d(5px,0,0);
  }

  .single-news-end{
    padding:
      110px
      0;
  }

  .single-news-end h2{
    font-size:
      clamp(30px,9vw,42px);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .single-news-reveal{
    opacity:1 !important;

    transform:none !important;

    filter:none !important;

    transition:none !important;
  }

}