/* Entry point. Preserve source order to keep the approved appearance. */
@import url("./foundation.css");

/* Layout: l-* / Component: c-* / Project: p-* */
.c-skip-link {
  position:fixed;
  left:12px;
  top:-100px;
  background:#fff;
  padding:12px;
  z-index:20
}

.c-skip-link:focus {
  top:10px
}

.l-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:18px 4%;
  border-top:5px solid var(--pink);
  border-bottom:1px solid var(--line);
  background:white
}

.l-header a {
  text-decoration:none
}

.l-header__name {
  font-weight:700;
  font-size:.875rem;
  letter-spacing:.07em
}

.l-header nav {
  display:flex;
  gap:28px;
  font-size:.875rem
}

.l-header nav a:hover {
  color:var(--pink)
}

.p-hero {
  padding-top:48px;
  overflow:hidden;
  background:linear-gradient(115deg,#fff 62%,#fff4f8)
}

.p-hero__inner {
  max-width:1100px;
  margin:auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  column-gap:70px;
  align-items:center
}

.p-hero__eyebrow {
  grid-column:1/-1;
  text-align:center;
  font-family:var(--serif);
  font-size:1.1rem;
  letter-spacing:.14em;
  margin-bottom:30px
}

.p-hero h1 {
  text-align:center;
  font-size:1rem;
  font-weight:500;
  letter-spacing:.12em
}

.p-hero__logo {
  width:460px;
  height:auto;
  margin:auto auto 20px
}

.p-hero h1>span {
  display:block
}

.p-hero__event {
  position:relative;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:24px 0 30px
}

.p-hero__year {
  font:1.5rem var(--serif)
}

.p-hero__dates {
  display:flex;
  align-items:baseline;
  gap:12px;
  font-family:var(--serif);
  font-size:clamp(3rem,5.4vw,4.8rem);
  line-height:1.4;
  letter-spacing:-.05em;
  white-space:nowrap
}

.p-hero__dates small {
  font:700 .875rem sans-serif;
  letter-spacing:0;
  margin-left:6px
}

.p-hero__dash {
  font-size:1.5rem
}

.p-hero__time {
  font:1.8rem var(--serif);
  margin:6px 0 20px
}

.p-hero__place {
  font-size:1rem;
  font-weight:700;
  padding-right:8px
}

.p-hero__free {
  display:inline-block;
  background:var(--pink);
  color:white;
  padding:4px 22px;
  font-weight:700;
  margin-top:18px;
  letter-spacing:.1em
}

.p-photo-index {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:9px;
  max-width:1440px;
  margin:48px auto 0;
  padding:0 20px 20px
}

.p-photo-index__item {
  text-decoration:none;
  min-width:0
}

.p-photo-index__item img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  transition:filter .2s
}

.p-photo-index__item:hover img {
  filter:brightness(.9)
}

.p-photo-index__item span {
  font-size:.75rem;
  line-height:1.5;
  display:block;
  margin-top:8px;
  text-align:center;
  overflow-wrap:anywhere
}

.l-section {
  max-width:1080px;
  margin:auto;
  padding:90px 32px
}

.c-eyebrow {
  font-size:.875rem;
  letter-spacing:.2em;
  color:var(--pink);
  font-weight:700;
  margin-bottom:14px
}

.p-about {
  text-align:center;
  max-width:930px
}

/* Keep Japanese text and numerals in the same Mincho font. */
.p-about h2 {
  font-family:'Yu Mincho','Hiragino Mincho ProN',serif
}

.p-about h2 span {
  font-size:.72em
}

.p-about__text {
  max-width:700px;
  margin:30px auto 20px;
  line-height:2.2;
  text-align:left
}

.p-about__closing {
  font-weight:700
}

.c-text-link {
  display:inline-flex;
  align-items:center;
  gap:50px;
  margin-top:28px;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding:8px 0
}

.c-text-link:hover {
  color:var(--pink)
}

.p-shops {
  padding-top:25px
}

.c-section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding-bottom:28px;
  border-bottom:2px solid var(--ink)
}

.c-shop-count {
  font:1rem var(--serif);
  letter-spacing:.1em
}

.p-shop {
  display:grid;
  grid-template-columns:40% 1fr;
  gap:52px;
  padding:46px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
  scroll-margin-top:24px
}

.p-shop__photo {
  background:#f5f4f3;
  aspect-ratio:5/4;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.p-shop__photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}

.p-shop__photo--contain img {
  object-fit:contain
}



.p-shop h3 {
  font-size:clamp(1.7rem,2.7vw,2.25rem);
  line-height:1.35;
  overflow-wrap:anywhere
}

.p-shop h3 small {
  font:400 1rem 'Yu Gothic',sans-serif
}

.p-shop__catch {
  font-weight:700;
  font-size:1rem;
  line-height:1.8;
  margin:20px 0 10px
}

.p-shop__description {
  line-height:2;
  font-size:1rem
}

.p-shop__link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:220px;
  padding:7px 0;
  border-bottom:1px solid var(--ink);
  text-decoration:none;
  font-size:.875rem;
  margin-top:24px
}

.p-shop__link:hover {
  color:var(--pink);
  border-color:var(--pink)
}

.p-event {
  background:var(--tint);
  max-width:none;
  padding:65px max(32px,calc((100% - 1016px)/2))
}

.p-event dl {
  margin:30px 0 0
}

.p-event dl>div {
  display:grid;
  grid-template-columns:170px 1fr;
  border-top:1px solid #ddc6cf;
  padding:18px 0
}

.p-event dt {
  font-weight:700
}

.p-event dd {
  margin:0
}

.l-footer {
  text-align:center;
  padding:50px 24px 35px
}

.l-footer img {
  width:160px;
  height:auto;
  margin:0 auto 12px
}

.l-footer p {
  font-size:.875rem;
  letter-spacing:.08em
}

.l-footer a {
  display:inline-block;
  font-size:.875rem;
  margin-top:24px
}

@media(min-width:1450px) {
  .p-hero {
    padding-top:60px
  }

  .p-hero__inner {
    padding-bottom:16px
  }

}

@media(max-width:900px) {
  .p-hero__inner {
    gap:30px
  }

  .p-hero__dates {
    font-size:3rem
  }

  .p-hero__place {
    font-size:.875rem
  }

  .p-shop {
    gap:30px
  }

  .l-header nav {
    gap:16px
  }

  .p-hero__logo {
    margin-bottom:16px
  }

}

@media(max-width:650px) {
  html {
    scroll-padding-top:20px
  }

  .l-header {
    display:block;
    text-align:center;
    padding:12px 16px
  }

  .l-header__name {
    font-size:.875rem
  }

  .l-header nav {
    justify-content:center;
    gap:22px;
    margin-top:10px;
    font-size:.875rem
  }

  .p-hero {
    padding-top:28px
  }

  .p-hero__inner {
    display:block;
    padding:0 24px
  }

  .p-hero__eyebrow {
    font-size:.875rem;
    letter-spacing:.03em;
    margin-bottom:25px
  }

  .p-hero__logo {
    width:310px;
    margin-bottom:12px
  }

  .p-hero h1 {
    font-size:.875rem;
    letter-spacing:.07em
  }

  .p-hero__event {
    max-width:390px;
    margin:28px auto 0;
    padding:18px 0 20px;
    text-align:center
  }

  .p-hero__year {
    font-size:1.1rem
  }

  .p-hero__dates {
    justify-content:center;
    font-size:3.5rem;
    gap:12px
  }

  .p-hero__dates small {
    font-size:.75rem
  }

  .p-hero__time {
    font-size:1.5rem;
    margin:2px 0 12px
  }

  .p-hero__place {
    padding:0;
    font-size:.875rem
  }

  .p-hero__free {
    margin-top:12px;
    padding:1px 18px;
    font-size:.875rem
  }

  .p-photo-index {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px 8px;
    padding:0 16px 24px;
    margin-top:28px
  }

  .p-photo-index__item {
    width:calc((100% - 24px)/4)
  }

  .p-photo-index__item span {
    font-size:.75rem;
    margin-top:5px
  }

  .l-section {
    padding:56px 24px
  }

  .p-about h2 {
    font-size:1.45rem
  }

  .p-about h2 span {
    font-size:1.1rem
  }

  .p-about__text {
    margin-top:24px;
    line-height:2
  }

  .p-about__closing {
    font-size:1rem
  }

  .p-shops {
    padding-top:0
  }

  .c-eyebrow {
    font-size:.75rem;
    letter-spacing:.16em
  }

  .c-section-heading {
    padding-bottom:22px
  }

  .p-shop {
    grid-template-columns:1fr;
    gap:24px;
    padding:32px 0
  }

  .p-shop__photo {
    aspect-ratio:5/4
  }

  .p-shop h3 {
    font-size:1.85rem
  }

  .p-shop__catch {
    margin-top:16px
  }

  .p-shop__link {
    margin-top:20px
  }


  .p-event dl>div {
    grid-template-columns:1fr;
    gap:5px;
    padding:15px 0
  }

  .p-event dt {
    font-size:.875rem;
    color:var(--muted)
  }

  .l-footer {
    padding-top:40px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }

}

@media print {
  .l-header nav,.c-text-link,.l-footer a {
    display:none
  }

  .p-hero,.p-event {
    background:white
  }

  .p-shop {
    break-inside:avoid
  }

  .l-section {
    padding-top:28px;
    padding-bottom:28px
  }

}

/* Botanical accents: green leaves echo the event poster. */
:root {
  --leaf-green:#456747;
  --leaf-pale:#f1f6eb
}

.p-hero {
  position:relative;
  isolation:isolate;
  background:radial-gradient(ellipse at 0% 8%,#e3efda 0,transparent 37%),radial-gradient(ellipse at 100% 38%,#edf4e5 0,transparent 40%),linear-gradient(125deg,#fcfdf9,#fffafc 70%,#f3f8ed)
}

.p-hero::before,.p-hero::after,.p-about::before,.p-about::after,.c-section-heading::after {
  content:"";
  position:absolute;
  pointer-events:none;
  background:url('../images/leaves.png') center/contain no-repeat;
  z-index:-1
}

.p-hero::before {
  width:clamp(150px,20vw,310px);
  height:330px;
  left:-65px;
  top:-45px;
  transform:rotate(65deg);
  opacity:.8
}

.p-hero::after {
  width:clamp(160px,21vw,320px);
  height:360px;
  right:-80px;
  top:20px;
  transform:rotate(215deg);
  opacity:.8
}

.p-hero__inner,.p-photo-index {
  position:relative;
  z-index:1
}

.p-photo-index {
  padding-top:18px;
  padding-bottom:24px
}

.p-about {
  position:relative;
  isolation:isolate;
  max-width:none;
  padding-left:max(32px,calc((100% - 866px)/2));
  padding-right:max(32px,calc((100% - 866px)/2));
  background:radial-gradient(circle at 8% 74%,#e4eedb 0 37px,transparent 39px),radial-gradient(circle at 91% 18%,#f7e7ed 0 24px,transparent 26px),linear-gradient(180deg,#f8fbf4,#f0f6e9 65%,#fff);
  overflow:hidden
}

.p-about::before {
  width:210px;
  height:290px;
  left:clamp(-80px,2vw,45px);
  top:90px;
  transform:rotate(25deg);
  opacity:.64
}

.p-about::after {
  width:190px;
  height:250px;
  right:clamp(-85px,2vw,45px);
  bottom:5px;
  transform:rotate(210deg);
  opacity:.62
}

.p-about h2,.p-about__text,.p-about__closing,.p-about .c-text-link,.p-about .c-eyebrow {
  position:relative;
  z-index:1
}

.p-about .c-eyebrow,.p-shops .c-eyebrow {
  color:var(--leaf-green)
}

.c-section-heading {
  position:relative;
  isolation:isolate;
  border-bottom-color:#61765b;
  padding-right:100px
}

.c-section-heading::after {
  width:112px;
  height:112px;
  right:0;
  bottom:8px;
  transform:rotate(15deg);
  opacity:.85
}

.c-shop-count {
  margin-left:auto;
  padding-left:20px;
  white-space:nowrap
}

.p-shop {
  border-bottom-color:#dce4d6
}

@media(max-width:1100px) {
  .p-hero::before {
    left:-100px;
    opacity:.55
  }

  .p-hero::after {
    right:-100px;
    opacity:.55
  }

  .p-about::before {
    left:-110px;
    opacity:.3
  }

  .p-about::after {
    right:-100px;
    opacity:.3
  }

}

@media(max-width:650px) {
  .p-hero::before {
    width:150px;
    height:200px;
    left:-73px;
    top:-48px;
    opacity:.65
  }

  .p-hero::after {
    width:135px;
    height:190px;
    right:-65px;
    top:260px;
    opacity:.55
  }

  .p-about {
    padding-left:24px;
    padding-right:24px;
    background:radial-gradient(circle at 94% 10%,#f4e4e9 0 16px,transparent 18px),linear-gradient(180deg,#f8fbf4,#eff5e8 65%,#fff)
  }

  .p-about::before {
    width:115px;
    height:155px;
    left:-55px;
    top:0;
    opacity:.45
  }

  .p-about::after {
    width:115px;
    height:155px;
    right:-48px;
    bottom:-5px;
    opacity:.5
  }

  .c-section-heading {
    padding-right:64px
  }

  .c-section-heading::after {
    width:76px;
    height:80px;
    right:-8px;
    bottom:9px
  }

  .c-shop-count {
    font-size:.875rem;
    padding-left:10px
  }

}

@media print {
  .p-hero::before,.p-hero::after,.p-about::before,.p-about::after,.c-section-heading::after {
    display:none
  }

  .p-hero,.p-about {
    background:white
  }

}

/* Poster-inspired floating pastel circles, always behind the content. */
.p-hero,.p-about,.p-event,.p-shops-scene {
  position:relative;
  isolation:isolate;
  overflow:hidden
}

.p-decoration {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden
}

.p-decoration__ball {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--ball-color);
  opacity:.72
}

.p-decoration__ball--pink {
  --ball-color:#f6c8d6
}

.p-decoration__ball--green {
  --ball-color:#d6e8d2
}

.p-decoration__ball--yellow {
  --ball-color:#f9eac5
}

.p-shops-scene {
  background:#fff
}

.p-shops-scene>.p-shops {
  position:relative;
  z-index:1
}

.p-about>:not(.p-decoration),.p-event>:not(.p-decoration) {
  position:relative;
  z-index:1
}

.p-hero::before,.p-hero::after,.p-about::before,.p-about::after {
  z-index:0
}

.p-about {
  background:linear-gradient(180deg,#f8fbf4,#f0f6e9 65%,#fff)
}

@media(max-width:1150px) {
  .p-decoration--shops .p-decoration__ball {
    width:calc(var(--size)*.65);
    height:calc(var(--size)*.65);
    opacity:.48
  }

  .p-decoration--shops .p-decoration__ball:nth-child(odd) {
    left:1%
  }

  .p-decoration--shops .p-decoration__ball:nth-child(even) {
    left:99%
  }

}

@media(max-width:650px) {
  .p-decoration__ball {
    width:calc(var(--size)*.6);
    height:calc(var(--size)*.6);
    opacity:.55
  }

  .p-decoration--shops .p-decoration__ball {
    width:calc(var(--size)*.5);
    height:calc(var(--size)*.5);
    opacity:.55
  }

  .p-decoration--about .p-decoration__ball:nth-child(odd),.p-decoration--event .p-decoration__ball:nth-child(odd) {
    left:2%
  }

  .p-decoration--about .p-decoration__ball:nth-child(even),.p-decoration--event .p-decoration__ball:nth-child(even) {
    left:98%
  }

  .p-decoration--hero .p-decoration__ball {
    opacity:.48
  }

}

@media print {
  .p-decoration {
    display:none
  }

}

/* Project: decoration positions (formerly inline custom properties). */
.p-decoration--hero .p-decoration__ball--01 {
  --x:5%;
  --y:18%;
  --size:64px;
}

.p-decoration--hero .p-decoration__ball--02 {
  --x:19%;
  --y:4%;
  --size:28px;
}

.p-decoration--hero .p-decoration__ball--03 {
  --x:91%;
  --y:16%;
  --size:86px;
}

.p-decoration--hero .p-decoration__ball--04 {
  --x:97%;
  --y:51%;
  --size:46px;
}

.p-decoration--hero .p-decoration__ball--05 {
  --x:3%;
  --y:77%;
  --size:40px;
}

.p-decoration--hero .p-decoration__ball--06 {
  --x:77%;
  --y:7%;
  --size:22px;
}

.p-decoration--about .p-decoration__ball--01 {
  --x:5%;
  --y:30%;
  --size:60px;
}

.p-decoration--about .p-decoration__ball--02 {
  --x:16%;
  --y:76%;
  --size:34px;
}

.p-decoration--about .p-decoration__ball--03 {
  --x:87%;
  --y:26%;
  --size:56px;
}

.p-decoration--about .p-decoration__ball--04 {
  --x:96%;
  --y:70%;
  --size:88px;
}

.p-decoration--about .p-decoration__ball--05 {
  --x:80%;
  --y:88%;
  --size:26px;
}

.p-decoration--shops .p-decoration__ball--01 {
  --x:5%;
  --y:4%;
  --size:76px;
}

.p-decoration--shops .p-decoration__ball--02 {
  --x:93%;
  --y:8%;
  --size:44px;
}

.p-decoration--shops .p-decoration__ball--03 {
  --x:9%;
  --y:18%;
  --size:42px;
}

.p-decoration--shops .p-decoration__ball--04 {
  --x:96%;
  --y:25%;
  --size:85px;
}

.p-decoration--shops .p-decoration__ball--05 {
  --x:3%;
  --y:34%;
  --size:64px;
}

.p-decoration--shops .p-decoration__ball--06 {
  --x:91%;
  --y:42%;
  --size:48px;
}

.p-decoration--shops .p-decoration__ball--07 {
  --x:7%;
  --y:51%;
  --size:88px;
}

.p-decoration--shops .p-decoration__ball--08 {
  --x:98%;
  --y:59%;
  --size:54px;
}

.p-decoration--shops .p-decoration__ball--09 {
  --x:3%;
  --y:67%;
  --size:48px;
}

.p-decoration--shops .p-decoration__ball--10 {
  --x:93%;
  --y:76%;
  --size:80px;
}

.p-decoration--shops .p-decoration__ball--11 {
  --x:8%;
  --y:86%;
  --size:58px;
}

.p-decoration--shops .p-decoration__ball--12 {
  --x:96%;
  --y:94%;
  --size:42px;
}

.p-decoration--event .p-decoration__ball--01 {
  --x:4%;
  --y:17%;
  --size:68px;
}

.p-decoration--event .p-decoration__ball--02 {
  --x:92%;
  --y:27%;
  --size:76px;
}

.p-decoration--event .p-decoration__ball--03 {
  --x:97%;
  --y:79%;
  --size:44px;
}

.p-decoration--event .p-decoration__ball--04 {
  --x:9%;
  --y:90%;
  --size:30px;
}

/* Project: TOP banner and continuous event introduction.
   Desktop artwork and display remain 1124 x 750; scale only on narrower screens. */
.p-top-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 22%, #f8e2ea 0 32px, transparent 33px),
    radial-gradient(circle at 94% 48%, #e3eedc 0 48px, transparent 49px),
    radial-gradient(circle at 4% 63%, #fbf2d6 0 24px, transparent 25px),
    radial-gradient(circle at 92% 8%, #faf0cd 0 23px, transparent 24px),
    linear-gradient(180deg, #fff 0%, #fff 60%, #f8fbf4 100%);
}
.p-top-banner::before,
.p-top-banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  /* z-index: -1; */
  width: clamp(160px, 19vw, 330px);
  height: 520px;
  background: url("../images/leaves.png") center / contain no-repeat;
  pointer-events: none;
  opacity: .55;
}
.p-top-banner::before { right: calc(50% + 562px); top: 100px; transform: rotate(28deg); }
.p-top-banner::after { left: calc(50% + 562px); top: 270px; transform: rotate(205deg); }
.p-top-banner__heading { width: min(100%, 1124px); margin: 0 auto; line-height: 0; }
.p-top-banner__image { display: block; width: 100%; height: auto; aspect-ratio: 1124 / 750; object-fit: fill; }
.p-top-banner .p-photo-index {
  width: min(100%, 1280px);
  margin: 14px auto 0;
  padding: 14px 24px 0;
  gap: 12px;
}
.p-top-banner .p-photo-index__item span { margin-top: 10px; color: #544c4b; }
.p-top-banner__navigation { display: flex; justify-content: center; padding: 28px 20px 32px; }
.p-top-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 10px 4px;
  border-bottom: 1px solid #6d7a63;
  color: #3e513b;
  font-size: .875rem;
  text-decoration: none;
  letter-spacing: .08em;
}
.p-top-banner__link:hover { color: var(--pink); border-color: currentColor; }
.p-top-banner + .p-about { padding-top: 44px; padding-bottom: 56px; }
.c-skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 650px) {
  .p-top-banner .p-photo-index { width: 100%; margin-top: 8px; padding: 12px 16px 8px; gap: 10px; }
  .p-top-banner .p-photo-index__item { width: calc((100% - 30px) / 4); }
  .p-top-banner__navigation { padding: 18px 16px 24px; }
  .p-top-banner + .p-about { padding-top: 28px; padding-bottom: 40px; }
}

/* Component: official website navigation */
.l-footer .c-official-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  max-width:100%;
  min-height:52px;
  padding:14px 26px;
  border:1px solid var(--pink);
  border-radius:999px;
  background:var(--pink);
  color:var(--paper);
  font-size:.9375rem;
  font-weight:700;
  line-height:1.6;
  text-decoration:none;
  transition:background-color .2s, color .2s;
}
.l-footer .c-official-link:hover {
  background:var(--paper);
  color:var(--pink);
}
.l-footer .c-official-link:focus-visible {
  outline:3px solid var(--pink);
  outline-offset:4px;
}