@import url("../common.css");

:root {
  --js-ink: #101820;
  --js-ink-2: #243244;
  --js-paper: #f5f1e8;
  --js-rice: #d7c7a5;
  --js-cedar: #6f563d;
  --js-line: rgba(16, 24, 32, 0.18);
  --js-serif: "BIZ UDPMincho", serif;
  --js-brush: "Yuji Syuku", serif;
  --js-sans: "Noto Sans JP", sans-serif;
}

body {
  color: var(--js-ink);
  background: var(--js-paper);
  font-family: var(--js-serif);
}

.js-sample {
  color: #eee7dc;
  background: #101820;
  font-family: var(--js-sans);
}

.js-side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: min(14vh, 112px);
  padding: 28px 0;
  color: var(--js-paper);
  background: rgba(16, 24, 32, 0.86);
  backdrop-filter: blur(10px);
}

.js-brand {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.js-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: 0.92;
}

.js-mark {
  writing-mode: vertical-rl;
  font-family: var(--js-brush);
  font-size: 26px;
  letter-spacing: 0.12em;
}

.js-side-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  writing-mode: horizontal-tb;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.js-side-nav a {
  writing-mode: vertical-rl;
  line-height: 1;
}

.js-page {
  margin-left: 82px;
}

.js-hero {
  position: relative;
  min-height: calc(100vh - 34px);
  isolation: isolate;
  overflow: hidden;
}

.js-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.js-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(16, 24, 32, 0.82), rgba(16, 24, 32, 0.14) 58%),
    linear-gradient(90deg, rgba(16, 24, 32, 0.54), transparent 56%);
}

.js-lead-panel {
  position: absolute;
  left: clamp(28px, 6vw, 92px);
  bottom: clamp(42px, 8vw, 112px);
  width: min(760px, calc(100% - 48px));
  color: var(--js-paper);
}

.js-kamon {
  margin: 0 0 18px;
  color: var(--js-rice);
  font-size: 15px;
  letter-spacing: 0.22em;
}

.js-hero h1 {
  margin: 0;
  font-family: var(--js-brush);
  font-size: clamp(46px, 8vw, 100px);
  line-height: 1.08;
  letter-spacing: 0.06em;
}

.js-hero p:not(.js-kamon) {
  width: min(620px, 100%);
  margin: 24px 0 0;
  font-family: var(--js-sans);
  font-size: 17px;
}

.js-gates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-left: 82px;
  background: #0d141b;
}

.js-gates a {
  padding: 28px 34px;
  color: var(--js-paper);
  border-right: 1px solid rgba(245, 241, 232, 0.18);
}

.js-gates span {
  display: block;
  color: var(--js-rice);
  font-size: 13px;
  letter-spacing: 0.16em;
}

.js-gates strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
}

.js-manifesto,
.js-lineup,
.js-origin,
.js-visit,
.js-letter {
  width: min(1120px, calc(100% - 52px));
  margin: 0 auto;
  padding: 96px 0;
}

.js-manifesto {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 70px;
}

.js-writing {
  writing-mode: vertical-rl;
  justify-self: center;
}

.js-writing span {
  color: var(--js-cedar);
  font-size: 15px;
  letter-spacing: 0.24em;
}

.js-writing h2 {
  margin: 0 18px 0 0;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.55;
}

.js-story-body {
  display: grid;
  gap: 18px;
  align-content: center;
  font-family: var(--js-sans);
  font-size: 17px;
}

.js-story-photo,
.js-origin-photo {
  margin: 0;
}

.js-story-photo img,
.js-origin-photo img,
.js-visit-photo img,
.js-sake-list img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.js-story-photo img {
  height: 320px;
  margin-bottom: 14px;
}

.js-story-body p {
  margin: 0;
}

.js-lineup {
  border-top: 1px solid var(--js-line);
}

.js-lineup-head {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 46px;
  margin-bottom: 36px;
  align-items: start;
}

.js-lineup h2,
.js-origin h2,
.js-visit h2,
.js-letter h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.35;
}

.js-lineup-head p {
  margin: 0;
  font-family: var(--js-sans);
}

.js-sake-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--js-line);
  border-left: 1px solid var(--js-line);
}

.js-sake-list article {
  min-height: 210px;
  padding: 28px;
  border-right: 1px solid var(--js-line);
  border-bottom: 1px solid var(--js-line);
}

.js-sake-list img {
  aspect-ratio: 4 / 3;
  height: auto;
  margin: -28px -28px 24px;
  width: calc(100% + 56px);
  background: #d8cfbf;
  object-position: center;
}

.js-sake-list span {
  color: var(--js-cedar);
  font-family: var(--js-brush);
  font-size: 30px;
}

.js-sake-list h3 {
  margin: 10px 0 8px;
  font-size: 26px;
}

.js-sake-list p,
.js-origin p,
.js-visit p,
.js-visit li span,
.js-letter p {
  margin: 0;
  color: #45515d;
  font-family: var(--js-sans);
}

.js-origin {
  width: 100%;
  max-width: none;
  padding: 100px clamp(24px, 7vw, 118px);
  color: var(--js-paper);
  background: var(--js-ink-2);
}

.js-origin-photo {
  width: min(620px, 100%);
  margin-top: 30px;
}

.js-origin-photo img {
  height: 300px;
}

.js-origin-label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--js-rice);
  font-size: 14px;
  letter-spacing: 0.18em;
}

.js-origin-scroll {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid rgba(245, 241, 232, 0.24);
}

.js-origin article {
  padding: 34px;
  border-right: 1px solid rgba(245, 241, 232, 0.24);
}

.js-origin b {
  color: var(--js-rice);
  font-family: var(--js-brush);
  font-size: 44px;
}

.js-origin h3 {
  margin: 18px 0 10px;
  font-size: 26px;
}

.js-origin p {
  color: rgba(245, 241, 232, 0.78);
}

.js-visit {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: 52px;
}

.js-visit ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--js-line);
}

.js-visit li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--js-line);
}

.js-visit-photo {
  display: block;
  width: 100%;
  padding: 0 0 24px;
}

.js-visit-photo img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  background: #e6ded1;
}

.js-visit strong {
  color: var(--js-cedar);
  font-size: 23px;
}

.js-letter {
  width: min(960px, calc(100% - 52px));
  margin-bottom: 90px;
  padding: 54px;
  color: var(--js-paper);
  background: var(--js-ink);
}

.js-letter a {
  display: inline-block;
  margin-top: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--js-rice);
  color: var(--js-rice);
}

.js-footer {
  margin-left: 82px;
  padding: 26px;
  color: rgba(245, 241, 232, 0.72);
  background: #0d141b;
  font-family: var(--js-sans);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 860px) {
  .js-side {
    position: static;
    width: auto;
    flex-direction: row;
    gap: 18px;
    padding: 14px 18px;
    justify-content: space-between;
  }

  .js-mark,
  .js-side-nav {
    writing-mode: horizontal-tb;
  }

  .js-brand {
    grid-template-columns: auto auto;
    align-items: center;
  }

  .js-brand img {
    width: 34px;
    height: 34px;
  }

  .js-side-nav {
    display: flex;
    flex-direction: row;
    gap: 14px;
    overflow-x: auto;
  }

  .js-side-nav a {
    writing-mode: horizontal-tb;
  }

  .js-page,
  .js-gates,
  .js-footer {
    margin-left: 0;
  }

  .js-gates,
  .js-manifesto,
  .js-lineup-head,
  .js-sake-list,
  .js-origin-scroll,
  .js-visit {
    grid-template-columns: 1fr;
  }

  .js-writing {
    writing-mode: horizontal-tb;
    justify-self: start;
  }

  .js-writing h2 {
    margin: 10px 0 0;
  }
}