:root {
  --cue-navy: #112b46;
  --cue-navy-deep: #0b2237;
  --cue-paper: #faf6ef;
  --cue-paper-deep: #f0e9dc;
  --cue-gold: #d9be86;
  --cue-ink: #19334a;
  --cue-muted: #596771;
  --cue-line: #ddd4c5;
  --cue-serif: "Noto Serif JP", "Yu Mincho", serif;
  --cue-sans: "Noto Sans JP", sans-serif;
  --cue-display: "Cormorant Garamond", Georgia, serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--cue-paper);
  color: var(--cue-ink);
  font-family: var(--cue-sans);
}

body * {
  box-sizing: border-box;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid #a78140;
  outline-offset: 5px;
}

.cue-skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--cue-paper);
  color: var(--cue-ink);
  font: 500 13px/1.5 var(--cue-sans);
}

.cue-skip:focus {
  top: 12px;
}

.cue-site-header {
  position: relative;
  z-index: 100;
  min-height: 90px;
  background: var(--cue-navy);
  border-bottom: 1px solid rgba(217, 190, 134, .22);
  color: var(--cue-paper);
}

.cue-header-inner {
  width: min(1360px, calc(100% - 80px));
  min-height: 90px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

.cue-brand {
  flex: none;
  color: var(--cue-gold);
  font: 500 25px/1.4 var(--cue-display);
  letter-spacing: .2em;
  text-decoration: none;
}

.cue-desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 25px;
}

.cue-desktop-nav a,
.cue-mobile-menu a {
  color: var(--cue-paper);
  font: 400 12px/1.8 var(--cue-sans);
  text-decoration: none;
}

.cue-desktop-nav a:hover,
.cue-mobile-menu a:hover {
  color: var(--cue-gold);
}

.cue-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid rgba(217, 190, 134, .5);
  color: var(--cue-gold);
  font: 400 12px/1.8 var(--cue-sans);
  text-decoration: none;
  white-space: nowrap;
}

.cue-header-cta:hover {
  background: rgba(217, 190, 134, .08);
  color: #f3dfb5;
}

.cue-mobile-menu {
  display: none;
  position: relative;
}

.cue-mobile-menu summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--cue-paper);
  font: 400 12px/1.5 var(--cue-sans);
  cursor: pointer;
  list-style: none;
}

.cue-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.cue-mobile-menu summary::after {
  content: "+";
  margin-left: 7px;
  color: var(--cue-gold);
  font-size: 16px;
}

.cue-mobile-menu[open] summary::after {
  content: "−";
}

.cue-mobile-menu-panel {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  width: min(310px, calc(100vw - 40px));
  padding: 8px 20px 18px;
  background: var(--cue-navy);
  border: 1px solid rgba(217, 190, 134, .3);
  box-shadow: 0 16px 35px rgba(4, 18, 31, .22);
}

.cue-mobile-menu-panel a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(217, 190, 134, .18);
}

/* The original fixed-layout headers and footers are replaced by the shared brand shell. */
.lp-pc > :first-child,
.lp-sp > :first-child,
.lp-pc > :last-child,
.lp-sp > :last-child {
  display: none !important;
}

.lp {
  background: var(--cue-paper) !important;
}

.lp [style*="background:#0A1A3A"] {
  background-color: var(--cue-navy) !important;
}

.lp [style*="background:#FBF6EA"] {
  background-color: var(--cue-paper) !important;
}

.lp [style*="color:#D4AF6A"] {
  color: var(--cue-gold) !important;
}

.lp [style*="background:#D4AF6A"] {
  background-color: var(--cue-gold) !important;
}

.lp [style*="color:#A17B3C"] {
  color: #977a45 !important;
}

.lp h1,
.lp h2,
.lp h3 {
  font-family: var(--cue-serif) !important;
  font-weight: 400 !important;
}

.lp p {
  font-family: var(--cue-sans);
}

.cue-hero {
  background-color: var(--cue-navy) !important;
  background-image:
    radial-gradient(circle at 70% 38%, rgba(82, 121, 148, .24), transparent 34%),
    linear-gradient(125deg, var(--cue-navy-deep), var(--cue-navy) 56%, #173b57) !important;
  border-bottom: 1px solid rgba(217, 190, 134, .42);
}

.cue-hero .sky {
  opacity: .27;
}

.cue-hero--desktop h1 {
  font-size: 42px !important;
  line-height: 1.75 !important;
  letter-spacing: .09em !important;
}

.cue-hero--desktop > div:last-child > div:first-of-type > p {
  font-size: 15px !important;
  line-height: 2.15 !important;
}

.cue-hero--mobile > div:last-child {
  text-align: left !important;
}

.cue-hero--mobile img[alt="STORYBOOK"] {
  display: none !important;
}

.cue-hero--mobile h1 {
  margin-top: 24px !important;
  font-size: 30px !important;
  line-height: 1.8 !important;
  letter-spacing: .07em !important;
}

.cue-hero--mobile a[href^="#dl-"] {
  text-align: center;
}

.sky .star {
  animation-duration: 7s;
}

.shoot {
  opacity: .55;
}

.cue-site-footer {
  padding: 64px 0 25px;
  background: var(--cue-navy);
  color: #d9e0e4;
}

.cue-footer-inner {
  width: min(1160px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 42px 64px;
}

.cue-footer-brand {
  color: var(--cue-gold);
  font: 500 25px/1.4 var(--cue-display);
  letter-spacing: .2em;
  text-decoration: none;
}

.cue-footer-tagline {
  margin: 18px 0 0;
  color: #eef1f1;
  font: 400 14px/2 var(--cue-serif);
}

.cue-footer-meta {
  margin: 25px 0 0;
  color: #b9c5ce;
  font: 400 10px/2.1 var(--cue-sans);
}

.cue-footer-instagram {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 14px;
  border-bottom: 1px solid rgba(217, 190, 134, .35);
  color: var(--cue-gold);
  font: 400 12px/1.8 var(--cue-sans);
  text-decoration: none;
}

.cue-footer-label {
  margin: 0 0 18px;
  color: var(--cue-gold);
  font: 500 11px/1.6 var(--cue-sans);
  letter-spacing: .08em;
}

.cue-footer-nav a {
  display: block;
  width: fit-content;
  padding: 5px 0;
  color: #d9e0e4;
  font: 400 12px/1.7 var(--cue-sans);
  text-decoration: none;
}

.cue-footer-nav a:hover,
.cue-footer-instagram:hover {
  color: var(--cue-gold);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.cue-footer-copy {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(217, 190, 134, .2);
  color: #b9c5ce;
  font: 400 10px/1.8 var(--cue-sans);
}

@media (max-width: 1000px) {
  .cue-header-inner {
    width: calc(100% - 48px);
    min-height: 76px;
  }

  .cue-desktop-nav {
    display: none;
  }

  .cue-mobile-menu {
    display: block;
    margin-left: auto;
  }

  .cue-footer-inner {
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 72px;
  }

  .cue-site-header,
  .cue-header-inner {
    min-height: 70px;
  }

  .cue-header-inner {
    width: calc(100% - 40px);
    gap: 14px;
  }

  .cue-brand {
    font-size: 20px;
    letter-spacing: .15em;
  }

  .cue-header-cta {
    min-height: 40px;
    padding: 7px 10px;
    gap: 8px;
    font-size: 11px;
  }

  .cue-mobile-menu summary {
    font-size: 0;
  }

  .cue-mobile-menu summary::before {
    content: "MENU";
    font-size: 10px;
    letter-spacing: .08em;
  }

  .cue-mobile-menu summary::after {
    margin-left: 5px;
  }

  .cue-hero--mobile > div:last-child {
    padding-top: 46px !important;
    padding-bottom: 52px !important;
  }

  .cue-footer-inner {
    width: calc(100% - 40px);
    grid-template-columns: 1fr 1fr;
    gap: 35px 20px;
  }

  .cue-footer-about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .cue-header-cta {
    display: none;
  }

  .cue-mobile-menu {
    margin-left: auto;
  }
}

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