/* &Liko No.01 Secret Garden — purchaser page visual layer */

body.sg-polished {
  --paper: #f7f3ec;
  --ink: #17333c;
  --soft: #536872;
  --green: #0d5258;
  --gold: #b18432;
  --accent: #da4f86;
  --accent-2: #18a9b5;
  background:
    radial-gradient(circle at 8% 7%, rgba(42, 192, 199, .18), transparent 25rem),
    radial-gradient(circle at 92% 15%, rgba(233, 81, 145, .13), transparent 24rem),
    linear-gradient(180deg, #f9f6ef 0%, #eef8f6 42%, #f8f2ed 100%);
  background-attachment: fixed;
}

body.sg-polished::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 35%, rgba(255,255,255,.72) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 62%, rgba(177,132,50,.22) 0 1px, transparent 2px);
  background-size: 6rem 6rem, 8rem 8rem;
  opacity: .56;
}

body.theme-deep {
  --ink: #21364c;
  --soft: #5f667b;
  --green: #234f68;
  --gold: #ad7d2a;
  --accent: #b94d9e;
  --accent-2: #277fbb;
  background:
    radial-gradient(circle at 0% 10%, rgba(43, 115, 177, .20), transparent 24rem),
    radial-gradient(circle at 100% 22%, rgba(191, 69, 157, .14), transparent 25rem),
    linear-gradient(180deg, #eef4f6 0%, #f6f0f5 52%, #f9f5ed 100%);
}

body.theme-lily {
  --ink: #314657;
  --soft: #69727c;
  --green: #476b78;
  --gold: #b58a3e;
  --accent: #b06ca4;
  --accent-2: #64bfc2;
  background:
    radial-gradient(circle at 12% 10%, rgba(177, 216, 220, .34), transparent 27rem),
    radial-gradient(circle at 90% 20%, rgba(211, 172, 211, .25), transparent 24rem),
    linear-gradient(180deg, #fbfaf5 0%, #f0f7f5 48%, #f8f2f7 100%);
}

body.theme-green {
  --ink: #173f42;
  --soft: #55706c;
  --green: #176b68;
  --gold: #a87f30;
  --accent: #d65391;
  --accent-2: #1b9f91;
  background:
    radial-gradient(circle at 8% 13%, rgba(52, 181, 154, .25), transparent 25rem),
    radial-gradient(circle at 94% 27%, rgba(47, 135, 190, .16), transparent 23rem),
    linear-gradient(180deg, #f5faf5 0%, #e9f7f0 50%, #f9f4ed 100%);
}

body.theme-citrus {
  --ink: #4d3c32;
  --soft: #746258;
  --green: #47674f;
  --gold: #b87324;
  --accent: #e14f75;
  --accent-2: #f09b2f;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 193, 70, .28), transparent 26rem),
    radial-gradient(circle at 92% 21%, rgba(239, 91, 121, .20), transparent 24rem),
    linear-gradient(180deg, #fff9e9 0%, #fff2e5 49%, #f1f8ef 100%);
}

body.theme-story,
body.theme-story-reader {
  --ink: #24334d;
  --soft: #61687b;
  --green: #254f65;
  --gold: #aa7b2f;
  --accent: #aa4d98;
  --accent-2: #3486aa;
  background:
    radial-gradient(circle at 7% 9%, rgba(63, 125, 175, .20), transparent 26rem),
    radial-gradient(circle at 93% 18%, rgba(186, 73, 160, .15), transparent 23rem),
    linear-gradient(180deg, #edf4f5 0%, #f4eef6 48%, #faf6ed 100%);
}

.sg-polished .wrap {
  max-width: 38rem;
  padding-top: 2.4rem;
}

.sg-polished .brand {
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.page-hero {
  width: min(66rem, calc(100vw - 2rem));
  margin: 1.55rem 0 2.35rem 50%;
  transform: translateX(-50%);
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 1.35rem;
  background: rgba(255,255,255,.52);
  box-shadow:
    0 1.4rem 4rem rgba(20, 65, 78, .17),
    0 0 0 1px rgba(177,132,50,.18);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  background: linear-gradient(180deg, transparent 65%, rgba(6, 44, 57, .10));
}

.page-hero img {
  display: block;
  width: 100%;
  height: clamp(15rem, 48vw, 31rem);
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
}

.theme-story-reader .page-hero {
  width: min(54rem, calc(100vw - 2rem));
  margin-bottom: 2rem;
}

.theme-story-reader .page-hero img {
  height: clamp(10.5rem, 29vw, 16rem);
}

.sg-polished .page-hero + h1,
.sg-polished .page-hero + .scent-head {
  margin-top: 0;
}

.sg-polished h1,
.sg-polished h2,
.sg-polished .scent-head .en,
.sg-polished .scent-head .jp {
  color: var(--green);
}

.sg-polished h1 {
  font-size: clamp(1.55rem, 4.8vw, 2rem);
  line-height: 1.65;
}

.sg-polished h2 {
  position: relative;
  margin-top: 3.5rem;
}

.sg-polished h2::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 2px;
  margin: .9rem auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--gold));
  opacity: .72;
}

.sg-polished .rule i {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 1rem rgba(218,79,134,.34);
}

.sg-polished .menu {
  display: grid;
  gap: 1rem;
}

.sg-polished .menu li {
  margin: 0;
}

.sg-polished .menu a,
.sg-polished .toc a,
.sg-polished .panel,
.sg-polished .notes,
.sg-polished .ask,
.sg-polished .energy-block {
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 1rem;
  background: rgba(255,255,255,.64);
  box-shadow:
    0 .65rem 2rem rgba(29, 77, 87, .08),
    inset 0 0 0 1px rgba(177,132,50,.10);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.sg-polished .menu a {
  position: relative;
  padding: 1.5rem 1.35rem 1.5rem 1.55rem;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sg-polished .menu a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .3rem;
  background: linear-gradient(180deg, var(--accent-2), var(--accent), var(--gold));
}

.sg-polished .menu a:hover,
.sg-polished .menu a:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(177,132,50,.42);
  box-shadow: 0 1rem 2.4rem rgba(29,77,87,.14);
}

.sg-polished .menu .n,
.sg-polished .toc .n,
.sg-polished .steps .num,
.sg-polished .ask .lbl,
.sg-polished .sign {
  color: var(--gold);
}

.sg-polished .menu .t,
.sg-polished .toc .t,
.sg-polished .pick .en,
.sg-polished .pick .jp,
.sg-polished .nav a {
  color: var(--green);
}

.sg-polished .toc {
  display: grid;
  gap: .85rem;
}

.sg-polished .toc li {
  border: 0;
}

.sg-polished .toc a {
  padding: 1.3rem 1.25rem;
  transition: transform .2s ease, background .2s ease;
}

.sg-polished .toc a:hover,
.sg-polished .toc a:focus-visible {
  transform: translateX(.25rem);
  background: rgba(255,255,255,.82);
}

.sg-polished .panel,
.sg-polished .notes,
.sg-polished .energy-block {
  padding: 1.9rem 1.35rem;
}

.sg-polished .ask {
  padding: 2.5rem 1.25rem;
}

.sg-polished .panel a.btn {
  border-radius: 999px;
  background: linear-gradient(110deg, var(--green), #176f78 58%, #2b8591);
  box-shadow: 0 .6rem 1.5rem rgba(20,75,82,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

.sg-polished .panel a.btn:hover,
.sg-polished .panel a.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 .85rem 1.8rem rgba(20,75,82,.24);
}

.sg-polished .panel a.btn.sub {
  background: rgba(255,255,255,.55);
  border-color: rgba(13,82,88,.34);
  box-shadow: none;
}

.sg-polished figure:not(.page-hero) img {
  border-radius: .85rem;
  box-shadow: 0 .8rem 2rem rgba(24,66,76,.12);
}

.sg-polished .nav {
  margin-inline: -.25rem;
  padding: 1.4rem .25rem 0;
}

.sg-polished .disc {
  padding: 1.2rem;
  border: 1px solid rgba(35,79,101,.12);
  border-radius: .8rem;
  background: rgba(255,255,255,.38);
}

.theme-gate {
  background-color: #07160f;
  background-image:
    linear-gradient(180deg, rgba(4,25,31,.54), rgba(7,22,20,.82)),
    url("assets/hero-home-deep.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.theme-gate::before {
  background:
    radial-gradient(80% 55% at 50% 4%, rgba(255,255,255,.18), transparent 65%),
    linear-gradient(180deg, rgba(7,22,15,.18), rgba(7,22,15,.64));
}

.theme-gate::after {
  opacity: .72;
}

.theme-gate .gate {
  padding: 2rem 1.35rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1.25rem;
  background: rgba(3,22,28,.68);
  box-shadow: 0 1.4rem 4rem rgba(0,0,0,.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 599px) {
  .sg-polished .wrap {
    padding: 1.8rem 1.15rem 4.5rem;
  }

  .page-hero {
    width: calc(100vw - 1.2rem);
    margin-top: 1.2rem;
    border-radius: 1rem;
  }

  .page-hero img {
    height: clamp(14rem, 64vw, 20rem);
  }

  .theme-story-reader .page-hero img {
    height: 10.5rem;
  }

  .sg-polished .nav {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .sg-polished .nav > * {
    min-width: 42%;
  }

  .theme-gate {
    padding: 1rem .65rem;
  }

  .theme-gate .gate {
    padding: 1.65rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-polished *,
  .sg-polished *::before,
  .sg-polished *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}