@import url('https://fonts.googleapis.com/css2?family=Huninn:wght@400&display=swap');
@import url('site-ui-system.css?v=20261105-unified-ui-v1');

:root {
  /* Background */
  --bg: #0D0F12;
  --bg-deep: #090A0D;

  /* Cards and sections */
  --surface: #15181D;
  --surface-hover: #1C2026;
  --surface-translucent: rgba(21, 24, 29, 0.72);
  --surface-strong: rgba(21, 24, 29, 0.94);

  /* Brand purple */
  --primary: #A67BD9;
  --primary-hover: #B991E7;
  --primary-active: #8D63C0;
  --primary-soft: rgba(166, 123, 217, 0.12);

  /* Text */
  --text: #F4F3F6;
  --text-secondary: #C1BEC7;
  --text-muted: #85818C;
  --text-disabled: #5B5861;

  /* Borders */
  --border: #30333A;
  --border-light: #454952;
  --border-purple: rgba(166, 123, 217, 0.55);

  /* Image overlays */
  --overlay: rgba(6, 8, 10, 0.58);
  --overlay-heavy: rgba(6, 8, 10, 0.78);
  --overlay-mobile: rgba(6, 8, 10, 0.68);

  /* Compatibility aliases */
  --ink: var(--text);
  --muted: var(--text-muted);
  --paper: var(--bg);
  --panel: var(--surface);
  --line: var(--border);
  --green: var(--bg);
  --rose: var(--primary);
  --brown: var(--primary-active);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

  font-family: "Noto Sans TC", "Yu Gothic", "Microsoft JhengHei", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

.landing-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow-x: hidden;
}

.landing {
  position: relative;
  min-height: min(820px, calc(100vw * 0.58));
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: 28px;
}

.landing-bg {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  --landing-image: url("https://usagikohizeri.wordpress.com/wp-content/uploads/2025/07/e68f92e59c96169.png?w=1024");
  --landing-position: center top;
  background:
    linear-gradient(180deg, var(--overlay), var(--overlay)),
    url("https://usagikohizeri.wordpress.com/wp-content/uploads/2025/07/e68f92e59c96169.png?w=1024") center top / 100% auto no-repeat;
  z-index: -1;
}

.landing-panel {
  width: min(720px, 100%);
  color: var(--text);
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.landing-logo {
  width: min(290px, 72vw);
  margin: 0 auto 14px;
}

.landing-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 800;
}

.landing-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.landing-actions .button {
  border: 1.5px solid var(--border-light);
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 28px rgba(24, 37, 31, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.landing-actions .button:hover {
  background: var(--border-purple);
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px clamp(18px, 4vw, 54px);
  background: var(--surface-strong);
  color: var(--text);
  backdrop-filter: blur(14px);
}

.brand,
.main-nav,
.lang-switch,
.hero-actions,
.site-footer nav {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
}

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

.main-nav {
  justify-content: flex-end;
  gap: 14px;
  font-size: 14px;
}

.main-nav a,
.site-footer a {
  text-decoration: none;
}

.main-nav a:hover,
.site-footer a:hover {
  text-decoration: underline;
}

.lang-switch {
  gap: 6px;
}

.lang-switch button {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 7px 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.lang-switch button.active {
  background: white;
  color: var(--green);
}

.hero {
  position: relative;
  min-height: 86vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.page-hero {
  padding: clamp(58px, 9vw, 120px) clamp(18px, 5vw, 72px) clamp(24px, 4vw, 46px);
  background: var(--primary-soft);
  text-align: center;
}

.page-hero p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.work-detail {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  min-height: 76vh;
}

.work-detail img {
  width: min(100%, 620px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
  justify-self: center;
}

.work-detail .button {
  margin-top: 20px;
}

.standalone-feature {
  min-height: 76vh;
}

.hero-media {
  position: absolute;
  inset: 0;
  background: var(--bg-deep);
  z-index: -1;
}

.hero-content {
  width: min(920px, calc(100% - 36px));
  color: var(--text);
  text-align: center;
  padding: 56px 0;
}

.hero-logo {
  width: 210px;
  margin: 0 auto 16px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.86);
}

.landing .eyebrow {
  color: rgba(255, 255, 255, 0.86);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(46px, 8vw, 92px);
  line-height: 1;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(34px, 5vw, 70px);
  line-height: 1.05;
}

h3 {
  margin-bottom: 8px;
  font-size: 22px;
}

p {
  color: var(--muted);
  line-height: 1.8;
}

.hero p {
  color: rgba(255, 255, 255, 0.88);
}

.hero-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  background: var(--green);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.button.ghost {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.14);
}

.button.muted {
  background: var(--primary-soft);
  color: var(--brown);
}

.button.full {
  width: 100%;
}

button.button.full {
  margin-bottom: 10px;
}

.section {
  padding: clamp(54px, 8vw, 110px) clamp(18px, 5vw, 72px);
}

.about .eyebrow,
.about h2,
.feature .eyebrow,
.feature h1,
.feature h2,
.shipping h2,
.shipping h3,
.shop-section h1,
.shop-section h2,
.section-heading h1,
.section-heading h2,
.page-hero h1,
.work-detail h1,
.product-detail h1 {
  color: rgba(255, 255, 255, 0.94);
}

.about p,
.feature p,
.shipping p,
.shipping li,
.shipping li span,
.section-heading p,
.work-detail p,
.product-detail p {
  color: rgba(255, 255, 255, 0.76);
}

.product-card p,
.work-card p,
.cart p,
.cart span,
.cart strong {
  color: var(--muted);
}

.product-card h3,
.work-card h3,
.cart h3 {
  color: var(--ink);
}
.about,
.feature,
.shipping {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
}

.section-copy,
.section-heading {
  max-width: 760px;
}

.social-panel {
  margin-top: 24px;
}

.social-panel h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inline-links a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  background: var(--primary-soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.inline-links a:hover {
  background: rgba(255, 255, 255, 0.68);
}

.section-actions {
  margin-top: 18px;
}
.section-heading {
  margin: 0 auto 34px;
  text-align: center;
}


.portrait,
.feature img,
.shipping img {
  width: min(100%, 520px);
  border-radius: 28px;
  box-shadow: var(--shadow);
  justify-self: center;
}

.portrait {
  aspect-ratio: 1;
  object-fit: cover;
}

.work-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.work-card,
.product-card,
.cart {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(22, 18, 28, 0.1);
}

.work-card,
.product-card {
  overflow: hidden;
}

.work-link {
  color: inherit;
  text-decoration: none;
}

.work-link:hover h3 {
  text-decoration: underline;
}

.work-card img,
.product-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.work-card h3,
.work-card p,
.product-card h3,
.product-card p {
  margin-left: 16px;
  margin-right: 16px;
}

.work-card h3,
.product-card h3 {
  margin-top: 16px;
}

.product-card .button {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
}

.product-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.product-link:hover h3 {
  text-decoration: underline;
}

.feature {
  background: var(--primary-soft);
}

.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price {
  color: var(--green);
  font-weight: 900;
}

.product-detail-text {
  min-height: 52px;
  font-size: 14px;
  line-height: 1.6;
}

.cart {
  position: sticky;
  top: 86px;
  padding: 18px;
}

.cart-items {
  display: grid;
  gap: 10px;
  min-height: 70px;
}

.cart-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.cart-row button {
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--primary-soft);
  color: var(--brown);
  cursor: pointer;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  margin: 18px 0;
  font-size: 18px;
}

.shipping {
  background: var(--primary-soft);
}

.shipping ol {
  display: grid;
  gap: 14px;
  padding-left: 22px;
  line-height: 1.7;
}

.shipping li span {
  display: block;
  color: var(--muted);
}

.site-footer {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 34px 18px;
  background: var(--bg);
  color: var(--text);
  text-align: center;
}

.site-footer p {
  color: rgba(255, 255, 255, 0.82);
}

.site-footer nav {
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.product-detail-page {
  min-height: 76vh;
  background: linear-gradient(180deg, var(--text) 0%, var(--text-secondary) 100%);
}

.product-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: clamp(54px, 8vw, 110px) clamp(18px, 5vw, 72px);
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.detail-image {
  width: min(100%, 620px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
  justify-self: center;
}

.detail-copy {
  max-width: 680px;
}

.detail-price {
  color: var(--green);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
}

.product-description {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.compact-cart {
  position: sticky;
  top: 86px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(22, 18, 28, 0.1);
}

.compact-cart h3 {
  font-size: 18px;
}

.compact-cart .cart-items {
  min-height: 46px;
  max-height: 260px;
  overflow: auto;
}

.compact-cart .cart-row {
  font-size: 14px;
}

.compact-cart .cart-total {
  margin: 14px 0;
  font-size: 16px;
}

@media (max-width: 980px) {
  .site-header,
  .about,
  .feature,
  .shipping,
  .shop-layout,
  .product-detail-shell,
  .product-detail,
  .work-detail {
    grid-template-columns: 1fr;
  }

  .compact-cart {
    position: static;
  }

  .main-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .work-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cart {
    position: static;
  }
}

@media (max-width: 620px) {
  .site-header {
    gap: 12px;
  }

  .main-nav {
    display: none;
  }

  .lang-switch {
    flex-wrap: wrap;
  }

  .work-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .landing-actions {
    grid-template-columns: 1fr;
  }

.landing-actions .button {
  border: 1.5px solid var(--border-light);
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 28px rgba(24, 37, 31, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.landing-actions .button:hover {
  background: var(--border-purple);
  text-decoration: none;
}
  h1 {
    font-size: 44px;
  }
}














.section-heading .eyebrow,
.section-heading h1,
.section-heading h2 {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.section-heading p {
  color: rgba(255, 255, 255, 0.82);
}

.section-actions .button.muted {
  border: 1px solid var(--border-light);
  background: var(--border-purple);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-actions .button.muted:hover {
  background: var(--primary-soft);
}


.landing-actions .button,
.button,
.lang-switch button,
.inline-links a,
.work-card,
.product-card {
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.landing-actions .button:hover,
.button:hover,
.lang-switch button:hover,
.inline-links a:hover {
  transform: translateY(-3px) scale(1.035);
  animation: button-bounce 420ms cubic-bezier(0.2, 1.4, 0.35, 1);
}

.work-card:hover,
.product-card:hover {
  transform: translateY(-6px) scale(1.015);
}

@keyframes button-bounce {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-5px) scale(1.045); }
  72% { transform: translateY(-2px) scale(1.025); }
  100% { transform: translateY(-3px) scale(1.035); }
}

/* Homepage hero buttons rise only once on hover; pressing does not restart a bounce. */
body.site-home .hero-actions .button {
  animation: none;
  transform: none;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), background-color 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}

body.site-home .hero-actions .button:hover,
body.site-home .hero-actions .button:active,
body.site-home .hero-actions .button:focus-visible {
  animation: none;
  transform: translateY(-4px);
}

body.site-home .hero-actions .button:active {
  border-color: var(--primary-hover);
  background: rgba(166, 123, 217, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .landing-actions .button,
  .button,
  .lang-switch button,
  .inline-links a,
  .work-card,
  .product-card {
    transition: none;
    animation: none;
  }

  .landing-actions .button:hover,
  .button:hover,
  .lang-switch button:hover,
  .inline-links a:hover,
  .work-card:hover,
  .product-card:hover {
    transform: none;
  }
}


.landing {
  min-height: calc(100svh - 124px);
  overflow: hidden;
}

.landing-bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, var(--overlay), var(--overlay)),
    var(--landing-image, url("https://usagikohizeri.wordpress.com/wp-content/uploads/2025/07/e68f92e59c96169.png?w=1024"));
  background-position: var(--landing-position, center top);
  background-repeat: no-repeat;
  background-size: cover;
}

.landing-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--overlay), var(--overlay));
  pointer-events: none;
}

.landing-slices {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.landing-slice {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateY(105%);
  animation: landing-slice-reveal 980ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.landing-slice::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--slice-index) * -100%);
  width: calc(var(--slice-total) * 100%);
  background-image:
    linear-gradient(180deg, var(--overlay), var(--overlay)),
    var(--next-image);
  background-position: var(--next-position, center top);
  background-repeat: no-repeat;
  background-size: cover;
}

@keyframes landing-slice-reveal {
  0% {
    transform: translateY(105%);
    opacity: 0.45;
  }
  62% {
    transform: translateY(-3%);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .landing {
    min-height: calc(100svh - 124px);
    padding: 20px 18px;
  }

  .landing-bg,
  .landing-slice::before {
    background-position: 58% top;
    background-size: auto 116%;
  }

  .landing-logo {
    width: min(230px, 58vw);
  }

  .landing-panel {
    width: min(100%, 680px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-slice {
    animation: none;
    transform: none;
  }
}



body {
  animation: page-fade-in 520ms ease both;
}

.site-header,
.hero-content,
.landing-panel,
.about,
.feature,
.shipping,
.page-hero,
.work-detail,
.product-detail-shell,
.site-footer {
  animation: soft-fade-in 680ms ease both;
}

.work-card,
.product-card {
  animation: card-fade-in 620ms ease both;
}

.work-card:nth-child(2),
.product-card:nth-child(2) { animation-delay: 70ms; }
.work-card:nth-child(3),
.product-card:nth-child(3) { animation-delay: 140ms; }
.work-card:nth-child(4),
.product-card:nth-child(4) { animation-delay: 210ms; }
.product-card:nth-child(5) { animation-delay: 280ms; }
.product-card:nth-child(6) { animation-delay: 350ms; }
.product-card:nth-child(7) { animation-delay: 420ms; }
.product-card:nth-child(8) { animation-delay: 490ms; }
.product-card:nth-child(9) { animation-delay: 560ms; }

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes soft-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .site-header,
  .hero-content,
  .landing-panel,
  .about,
  .feature,
  .shipping,
  .page-hero,
  .work-detail,
  .product-detail-shell,
  .site-footer,
  .work-card,
  .product-card {
    animation: none;
  }
}


.landing-fade-layer {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, var(--overlay), var(--overlay)),
    var(--fade-image);
  background-position: var(--fade-position, center top);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  animation: landing-fade-switch 1500ms ease forwards;
}

@keyframes landing-fade-switch {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 620px) {
  .landing-fade-layer {
    background-position: 58% top;
    background-size: auto 116%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-fade-layer {
    animation: none;
    opacity: 1;
  }
}

.editor-page {
  background: var(--bg);
  color: var(--text);
}

.cover-editor {
  min-height: 76vh;
}

.editor-hero {
  max-width: 820px;
  margin-bottom: 28px;
}

.editor-hero h1,
.editor-hero p,
.editor-preview h2,
.editor-form label {
  color: rgba(255, 255, 255, 0.94);
}

.editor-panel {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.editor-form,
.editor-preview,
.cover-item {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.editor-form,
.editor-preview {
  padding: 18px;
}

.editor-form {
  display: grid;
  gap: 14px;
}

.editor-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.editor-form input,
.editor-form select {
  min-height: 44px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.editor-actions {
  display: grid;
  gap: 10px;
}

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.file-button input {
  display: none;
}

.editor-status {
  min-height: 26px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.cover-list {
  display: grid;
  gap: 12px;
}

.cover-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
}

.cover-item img {
  width: 130px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.cover-item strong,
.cover-item p {
  color: rgba(255, 255, 255, 0.9);
}

.cover-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.cover-item-actions button {
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.cover-item-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .editor-panel,
  .cover-item {
    grid-template-columns: 1fr;
  }

  .cover-item img {
    width: 100%;
  }
}

/* LANGUAGE BUTTON SHAPE LOCK */
.landing-actions {
  grid-template-columns: repeat(3, minmax(180px, 230px));
  justify-content: center;
}

.landing-actions .button {
  width: 100%;
  min-height: 64px;
  border-radius: 16px;
  font-size: 25px;
  font-family: Georgia, "Times New Roman", "Noto Serif TC", "Yu Mincho", serif;
  font-weight: 500;
  transform: none;
}

.landing-actions .button:hover {
  transform: none;
  animation: none;
  background: var(--border-purple);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 30px rgba(24, 20, 34, 0.24);
}

@media (max-width: 620px) {
  .landing-actions {
    grid-template-columns: 1fr;
  }

  .landing-actions .button {
    min-height: 56px;
    border-radius: 999px;
    font-size: 22px;
  }
}

/* Reference-style landing polish */
.landing-page {
  background:
    radial-gradient(circle at 50% 16%, var(--primary-soft), transparent 38%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--surface) 52%, var(--surface-hover) 100%);
}

.landing {
  min-height: calc(100svh - 118px);
  padding: clamp(24px, 5vw, 72px) clamp(18px, 6vw, 88px) 32px;
}

.landing-bg {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(circle at 50% 44%, var(--primary-soft), transparent 36%),
    linear-gradient(180deg, rgba(6, 8, 14, 0.16), rgba(6, 8, 14, 0.3) 62%, var(--overlay-heavy)),
    var(--landing-image, url("https://usagikohizeri.wordpress.com/wp-content/uploads/2025/07/e68f92e59c96169.png?w=1024"));
  background-position: center center, center center, var(--landing-position, center top);
  background-size: cover, cover, cover;
}

.landing-bg::after {
  background:
    linear-gradient(90deg, rgba(6, 8, 14, 0.18), transparent 22%, transparent 78%, rgba(6, 8, 14, 0.22)),
    linear-gradient(180deg, rgba(6, 8, 14, 0.04), rgba(6, 8, 14, 0.1));
}

.landing-panel {
  width: min(1380px, 100%);
  min-height: min(720px, calc(100svh - 220px));
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(34px, 5vw, 66px) clamp(22px, 6vw, 86px);
  border: 1px solid var(--text-secondary);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(18, 18, 28, 0.68), rgba(10, 12, 19, 0.56)),
    var(--overlay-heavy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px) saturate(115%);
  -webkit-backdrop-filter: blur(2px) saturate(115%);
}

.landing-logo {
  width: clamp(140px, 14vw, 205px);
  margin-bottom: 16px;
}

.landing .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(420px, 74vw);
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.9);
  font-family: Georgia, "Times New Roman", "Noto Serif TC", "Yu Mincho", serif;
  font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: 0;
  text-transform: uppercase;
}

.landing .eyebrow::before,
.landing .eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--text-secondary));
}

.landing .eyebrow::after {
  background: linear-gradient(90deg, var(--text-secondary), transparent);
}

.landing-panel h1 {
  margin: 0 0 32px;
  color: var(--text);
  font-family: "Noto Serif TC", "Yu Mincho", Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.48);
}

.landing-panel h1::after {
  content: "";
  display: block;
  width: min(420px, 62vw);
  height: 1px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, var(--text-secondary), transparent);
}

.landing-lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: Georgia, "Times New Roman", "Noto Serif TC", "Yu Mincho", serif;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.55;
}

.landing-actions {
  margin-top: 28px;
}

.landing-actions .button {
  border-color: var(--text-secondary);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-soft), rgba(11, 12, 20, 0.18));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

.landing-actions .button:hover {
  border-color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(135deg, var(--border-purple), var(--primary-soft));
}

.landing-page .site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 32px;
  padding: 28px 18px 34px;
  border-top: 1px solid var(--text-secondary);
  background:
    linear-gradient(180deg, rgba(9, 10, 18, 0.92), rgba(11, 14, 20, 0.96)),
    var(--surface);
  color: var(--text);
  box-shadow: inset 0 1px 28px var(--primary-soft);
}

.landing-page .site-footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-family: Georgia, "Times New Roman", "Noto Serif TC", "Yu Mincho", serif;
  font-size: 16px;
}

.landing-page .site-footer nav {
  position: relative;
  gap: 18px 24px;
}

.landing-page .site-footer nav::before {
  content: "";
  width: 1px;
  height: 34px;
  margin-right: 16px;
  background: var(--text-secondary);
}

.landing-page .site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-decoration: none;
}

a[data-social]::before {
  content: attr(data-icon);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--primary-hover);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.landing-page .site-footer a:hover {
  color: var(--text);
  text-decoration: none;
}

.landing-page .footer-edit-link {
  opacity: 0.72;
}

.landing-fade-layer {
  background-image:
    radial-gradient(circle at 50% 44%, var(--primary-soft), transparent 36%),
    linear-gradient(180deg, rgba(6, 8, 14, 0.16), rgba(6, 8, 14, 0.3) 62%, var(--overlay-heavy)),
    var(--fade-image);
  background-position: center center, center center, var(--fade-position, center top);
  background-size: cover, cover, cover;
}

@media (max-width: 820px) {
  .landing {
    min-height: auto;
    padding: 18px 14px 0;
  }

  .landing-panel {
    min-height: calc(100svh - 142px);
    border-radius: 18px;
    padding: 34px 20px 42px;
  }

  .landing-panel h1 {
    font-size: clamp(46px, 13vw, 68px);
    margin-bottom: 24px;
  }

  .landing-actions {
    width: 100%;
    gap: 16px;
  }

  .landing-page .site-footer {
    display: grid;
    gap: 16px;
    padding: 24px 18px 30px;
  }

  .landing-page .site-footer nav::before {
    display: none;
  }
}

@media (max-width: 620px) {
  .landing-bg,
  .landing-slice::before,
  .landing-fade-layer {
    background-position: center center, center center, 63% top;
    background-size: cover, cover, auto 122%;
  }

  .landing-panel {
    border-color: var(--text-secondary);
    background: var(--overlay-heavy);
  }

  .landing-logo {
    width: min(250px, 62vw);
  }

  a[data-social]::before {
    width: 20px;
    height: 20px;
    font-size: 18px;
  }
}



/* Keep landing image bright; darken only the framed panel */
.landing-page .landing-bg {
  background-image: var(--landing-image, url("https://usagikohizeri.wordpress.com/wp-content/uploads/2025/07/e68f92e59c96169.png?w=1024"));
  background-position: var(--landing-position, center top);
  background-size: cover;
}

.landing-page .landing-bg::after {
  display: none;
}

.landing-page .landing-fade-layer {
  background-image: var(--fade-image);
  background-position: var(--fade-position, center top);
  background-size: cover;
}

.landing-page .landing-panel {
  background: var(--overlay-heavy);
}

@media (max-width: 620px) {
  .landing-page .landing-bg,
  .landing-page .landing-fade-layer {
    background-position: 63% top;
    background-size: auto 122%;
  }
}

/* Footer social brand icons */
a[data-social]::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: var(--primary-hover);
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}

a[data-social="bluesky"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.1 4.2c1.9 1.4 3.9 4.4 4.5 6 0.2 0.5 0.6 0.5 0.8 0 0.6-1.6 2.6-4.6 4.5-6 1.4-1 3.7-1.8 4.9-0.6 1.4 1.4 0.6 4.2-0.7 6.2-1.1 1.8-3.1 3.1-5 3.4 3.4 0.6 4.3 2.7 2.4 4.8-1.9 2.1-5.1 1.1-6.2-1.5l-0.3-0.8-0.3 0.8c-1.1 2.6-4.3 3.6-6.2 1.5-1.9-2.1-1-4.2 2.4-4.8-1.9-0.3-3.9-1.6-5-3.4C1.6 7.8 0.8 5 2.2 3.6c1.2-1.2 3.5-0.4 4.9 0.6z'/%3E%3C/svg%3E");
}

a[data-social="patreon"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h3.6v18H4V3zm11.2 0a6.6 6.6 0 1 1 0 13.2 6.6 6.6 0 0 1 0-13.2z'/%3E%3C/svg%3E");
}

a[data-social="discord"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.1 5.4c2.5-0.7 5.3-0.7 7.8 0l0.5 1c2.1 0.7 3.3 2 4 3.7 0.8 2.1 1 4.1 0.7 6.6-1.7 1.3-3.4 2-5.1 2.3l-0.9-1.5c0.5-0.2 1-0.4 1.5-0.7-2.9 1.3-6.3 1.3-9.2 0 0.5 0.3 1 0.5 1.5 0.7L8 19c-1.7-0.3-3.4-1-5.1-2.3-0.3-2.5-0.1-4.5 0.7-6.6 0.7-1.7 1.9-3 4-3.7l0.5-1zm1.2 6.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zm5.4 0a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z'/%3E%3C/svg%3E");
}

a[data-social="x"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h4.7l5.1 6.8L18.7 3H21l-7.1 8.2L21.4 21h-4.7l-5.4-7.2L5.1 21H2.8l7.5-8.6L3 3zm3.6 1.8 11 14.4h1.2L7.8 4.8H6.6z'/%3E%3C/svg%3E");
}

a[data-social="instagram"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.3 2h9.4A5.3 5.3 0 0 1 22 7.3v9.4A5.3 5.3 0 0 1 16.7 22H7.3A5.3 5.3 0 0 1 2 16.7V7.3A5.3 5.3 0 0 1 7.3 2zm0 2A3.3 3.3 0 0 0 4 7.3v9.4A3.3 3.3 0 0 0 7.3 20h9.4a3.3 3.3 0 0 0 3.3-3.3V7.3A3.3 3.3 0 0 0 16.7 4H7.3zm4.7 3.2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6zm0 2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6zm5-2.4a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
}

a[data-social="youtube"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2c0.3 1.2 0.4 2.8 0.4 4.8s-0.1 3.6-0.4 4.8c-0.2 1-1 1.8-2 2-1.5 0.4-5.1 0.4-7.6 0.4s-6.1 0-7.6-0.4c-1-0.2-1.8-1-2-2C2.1 15.6 2 14 2 12s0.1-3.6 0.4-4.8c0.2-1 1-1.8 2-2 1.5-0.4 5.1-0.4 7.6-0.4s6.1 0 7.6 0.4c1 0.2 1.8 1 2 2zM10 8.8v6.4l5.6-3.2L10 8.8z'/%3E%3C/svg%3E");
}

a[data-social="edit"]::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  background: none;
  color: var(--primary-hover);
  -webkit-mask: none;
  mask: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* Smaller landing language prompt */
.landing-page .landing-lead {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.48;
}

@media (max-width: 620px) {
  .landing-page .landing-lead {
    font-size: 18px;
  }
}

/* Smaller landing prompt and capsule buttons */
.landing-page .landing-lead {
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.42;
}

.landing-page .landing-actions {
  grid-template-columns: repeat(3, minmax(160px, 218px));
  gap: 32px;
  margin-top: 22px;
}

.landing-page .landing-actions .button {
  min-height: 50px;
  border-radius: 999px;
  font-size: 21px;
}

@media (max-width: 620px) {
  .landing-page .landing-lead {
    font-size: 15px;
  }

  .landing-page .landing-actions {
    width: min(100%, 500px);
    margin-inline: auto;
    gap: 16px;
  }

  .landing-page .landing-actions .button {
    min-height: 48px;
    font-size: 19px;
  }
}


/* Mobile landing reference layout */
@media (max-width: 620px) {
  .landing-page {
    background: var(--bg-deep);
  }

  .landing-page .landing {
    min-height: 100svh;
    padding: 0;
    display: block;
  }

  .landing-page .landing-bg,
  .landing-page .landing-fade-layer {
    background-position: 58% top;
    background-size: auto 78svh;
  }

  .landing-page .landing-bg::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(4, 7, 10, 0.06) 0%, rgba(4, 7, 10, 0.18) 34%, var(--overlay-heavy) 67%, var(--bg-deep) 100%),
      radial-gradient(circle at 50% 42%, transparent 0%, var(--overlay) 66%, var(--overlay-heavy) 100%);
    pointer-events: none;
  }

  .landing-page .landing-panel {
    min-height: 100svh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    border: 0;
    border-radius: 0;
    padding: 44svh 24px 70px;
    background: linear-gradient(180deg, transparent 0%, var(--overlay) 34%, var(--overlay-heavy) 62%, var(--bg-deep) 100%);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .landing-page .landing-logo {
    width: min(118px, 30vw);
    margin-bottom: 12px;
  }

  .landing-page .landing .eyebrow {
    width: auto;
    margin-bottom: 12px;
    color: var(--primary-hover);
    font-size: 13px;
  }

  .landing-page .landing .eyebrow::before,
  .landing-page .landing .eyebrow::after {
    display: none;
  }

  .landing-page .landing-panel h1 {
    margin-bottom: 16px;
    font-size: clamp(44px, 13vw, 58px);
    line-height: 1.05;
  }

  .landing-page .landing-panel h1::after {
    width: min(300px, 64vw);
    margin-top: 18px;
    background: linear-gradient(90deg, transparent, var(--primary-hover), transparent);
  }

  .landing-page .landing-lead {
    font-size: 17px;
    line-height: 1.68;
  }

  .landing-page .landing-actions {
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .landing-page .landing-actions .button {
    position: relative;
    min-height: 58px;
    padding-inline: 58px;
    border-color: var(--border-purple);
    background: rgba(20, 22, 31, 0.48);
    font-size: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 34px rgba(0, 0, 0, 0.22);
  }

  .landing-page .landing-actions .button::after {
    content: "→";
    position: absolute;
    right: 24px;
    color: var(--primary-hover);
    font-size: 30px;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
  }

  .landing-page .site-footer {
    gap: 24px;
    padding: 30px 24px 42px;
    border-top: 0;
    background: var(--bg-deep);
  }

  .landing-page .site-footer::before {
    content: "";
    width: min(100%, 520px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--text-secondary), transparent);
  }

  .landing-page .site-footer p {
    font-size: 18px;
  }

  .landing-page .site-footer nav {
    width: min(100%, 430px);
    justify-content: space-between;
    gap: 0;
  }

  .landing-page .site-footer a {
    font-size: 0;
    gap: 0;
  }

  a[data-social]::before {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    background: var(--primary);
  }

  .landing-page .footer-edit-link {
    display: none;
  }
}


/* iPhone landing: fit in one screen */
@media (max-width: 620px) {
  html:has(body.landing-page) {
    height: 100%;
    overflow: hidden;
  }

  body.landing-page {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .landing-page .landing {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .landing-page .landing-bg,
  .landing-page .landing-fade-layer {
    background-size: auto 72svh;
  }

  .landing-page .landing-panel {
    min-height: 0;
    height: 100%;
    padding: clamp(150px, 29svh, 260px) 22px 16px;
  }

  .landing-page .landing-logo {
    width: min(92px, 24vw);
    margin-bottom: 8px;
  }

  .landing-page .landing .eyebrow {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .landing-page .landing-panel h1 {
    margin-bottom: 10px;
    font-size: clamp(38px, 11vw, 50px);
  }

  .landing-page .landing-panel h1::after {
    margin-top: 12px;
  }

  .landing-page .landing-lead {
    font-size: 14px;
    line-height: 1.48;
  }

  .landing-page .landing-actions {
    gap: 11px;
    margin-top: 20px;
  }

  .landing-page .landing-actions .button {
    min-height: 48px;
    font-size: 20px;
  }

  .landing-page .site-footer {
    gap: 12px;
    padding: 12px 24px max(14px, env(safe-area-inset-bottom));
  }

  .landing-page .site-footer p {
    font-size: 14px;
  }

  a[data-social]::before {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
}

@media (max-width: 620px) and (max-height: 740px) {
  .landing-page .landing-bg,
  .landing-page .landing-fade-layer {
    background-size: auto 68svh;
  }

  .landing-page .landing-panel {
    padding-top: clamp(120px, 24svh, 190px);
  }

  .landing-page .landing-logo {
    width: min(76px, 20vw);
  }

  .landing-page .landing-panel h1 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .landing-page .landing-lead {
    font-size: 13px;
    line-height: 1.38;
  }

  .landing-page .landing-actions {
    gap: 8px;
    margin-top: 14px;
  }

  .landing-page .landing-actions .button {
    min-height: 42px;
    font-size: 18px;
  }

  .landing-page .site-footer {
    gap: 8px;
    padding-top: 8px;
  }
}

/* Landing eyebrow white */
.landing-page .landing .eyebrow {
  color: var(--text);
}

/* Mobile landing content position: lift toward reference */
@media (max-width: 620px) {
  .landing-page .landing-panel {
    padding-bottom: clamp(34px, 5svh, 58px);
  }
}

@media (max-width: 620px) and (max-height: 740px) {
  .landing-page .landing-panel {
    padding-bottom: clamp(22px, 3.5svh, 36px);
  }
}

/* Mobile language buttons: no arrows */
@media (max-width: 620px) {
  .landing-page .landing-actions .button::after {
    content: none;
  }
}

/* Mobile landing: higher content and shorter language buttons */
@media (max-width: 620px) {
  .landing-page .landing-panel {
    padding-bottom: clamp(68px, 9svh, 104px);
  }

  .landing-page .landing-actions {
    width: min(82vw, 390px);
    gap: 12px;
  }
}

@media (max-width: 620px) and (max-height: 740px) {
  .landing-page .landing-panel {
    padding-bottom: clamp(42px, 6svh, 68px);
  }

  .landing-page .landing-actions {
    width: min(82vw, 360px);
    gap: 8px;
  }
}

/* Mobile landing logo: larger and higher */
@media (max-width: 620px) {
  .landing-page .landing-logo {
    width: min(150px, 39vw);
    margin-bottom: 6px;
    transform: translateY(-28px);
  }
}

@media (max-width: 620px) and (max-height: 740px) {
  .landing-page .landing-logo {
    width: min(124px, 33vw);
    transform: translateY(-18px);
  }
}


/* Cover editor live preview controls */
.cover-item-editor {
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cover-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background-color: var(--bg-deep);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 34px rgba(0, 0, 0, 0.18);
}

.cover-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--preview-image);
  background-position: var(--preview-position, center top);
  background-repeat: no-repeat;
  background-size: cover;

  transform: scale(var(--preview-scale, 1));
  transform-origin: var(--preview-position, center top);
}

.cover-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--preview-darkness, 0));
}

.cover-controls {
  display: grid;
  gap: 10px;
}

.cover-controls label {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.cover-controls input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.position-value {
  color: var(--primary-hover);
  font-weight: 800;
}

@media (max-width: 760px) {
  .cover-item-editor {
    grid-template-columns: 1fr;
  }
}

/* Keep landing brightness stable on load */
.landing-page .landing-panel,
.landing-page .site-footer {
  animation: none;
  opacity: 1;
  transform: none;
}

.landing-page .landing-bg,
.landing-page .landing-bg::after,
.landing-page .landing-fade-layer {
  filter: none;
}

/* Landing typography: title Ming, everything else Hei */
.landing-page {
  font-family: "Microsoft JhengHei", "Noto Sans TC", "Yu Gothic", Arial, sans-serif;
}

.landing-page .landing-panel,
.landing-page .landing .eyebrow,
.landing-page .landing-lead,
.landing-page .landing-actions .button,
.landing-page .site-footer {
  font-family: "Microsoft JhengHei", "Noto Sans TC", "Yu Gothic", Arial, sans-serif;
}

.landing-page .landing-panel h1 {
  font-family: "Chiron GoRound TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  font-weight: 700;
}
/* Stable carousel brightness and shorter mobile buttons */
.landing-page .landing-fade-layer {
  overflow: hidden;
}


.landing-page .landing-fade-layer::after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@media (max-width: 620px) {
  
.landing-page .landing-fade-layer::after {
    display: block;
    background:
      linear-gradient(180deg, rgba(4, 7, 10, 0.06) 0%, rgba(4, 7, 10, 0.18) 34%, var(--overlay-heavy) 67%, var(--bg-deep) 100%),
      radial-gradient(circle at 50% 42%, transparent 0%, var(--overlay) 66%, var(--overlay-heavy) 100%);
  }

  .landing-page .landing-actions {
    width: min(72vw, 330px);
  }
}

@media (max-width: 620px) and (max-height: 740px) {
  .landing-page .landing-actions {
    width: min(72vw, 310px);
  }
}

/* Footer stays in Hei; only the main title uses Ming. */
.landing-page .site-footer p {
  font-family: "Microsoft JhengHei", "Noto Sans TC", "Yu Gothic", Arial, sans-serif;
  font-size: 14px;
}

@media (max-width: 620px) {
  .landing-page .site-footer p {
    font-size: 12px;
  }
}




/* Shared inner-page theme matching the language selection cover. */
body:not(.landing-page) {
  --inner-bg: var(--bg-deep);
  --inner-surface: var(--surface-strong);
  --inner-surface-soft: var(--primary-soft);
  --inner-line: var(--border-purple);
  --inner-text: var(--text);
  --inner-muted: var(--text-secondary);
  min-height: 100vh;
  background: var(--bg);
  color: var(--inner-text);
  font-family: "Microsoft JhengHei", "Noto Sans TC", "Yu Gothic", Arial, sans-serif;
}

body:not(.landing-page) h1,
body:not(.landing-page) h2 {
  color: var(--inner-text);
  font-family: "PMingLiU", "MingLiU", "Noto Serif TC", "Yu Mincho", serif;
  font-weight: 500;
}

body:not(.landing-page) h3,
body:not(.landing-page) p,
body:not(.landing-page) li,
body:not(.landing-page) a,
body:not(.landing-page) button {
  font-family: "Microsoft JhengHei", "Noto Sans TC", "Yu Gothic", Arial, sans-serif;
}

body:not(.landing-page) p,
body:not(.landing-page) li,
body:not(.landing-page) .shipping li span,
body:not(.landing-page) .product-description {
  color: var(--inner-muted);
}

body:not(.landing-page) .site-header {
  border-bottom: 1px solid var(--border-purple);
  background: var(--overlay-heavy);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

body:not(.landing-page) .brand,
body:not(.landing-page) .main-nav a {
  color: var(--text);
}

body:not(.landing-page) .main-nav a:hover {
  color: var(--primary-hover);
  text-decoration: none;
}

body:not(.landing-page) .lang-switch button {
  min-height: 44px;
  border-color: var(--border-purple);
  background: var(--primary-soft);
  color: var(--text);
}

body:not(.landing-page) .lang-switch button.active,
body:not(.landing-page) .lang-switch button:hover {
  border-color: var(--primary-hover);
  background: var(--primary);
  color: var(--surface);
}

body:not(.landing-page) .hero-media {
  background: var(--bg-deep);
}

body:not(.landing-page) .hero-content {
  width: min(920px, calc(100% - 36px));
  padding: clamp(38px, 6vw, 64px) clamp(22px, 5vw, 66px);
  border: 1px solid var(--inner-line);
  border-radius: 8px;
  background: var(--overlay-heavy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(5px) saturate(115%);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
}

body:not(.landing-page) .hero-content h1 {
  color: var(--text);
  font-weight: 500;
}

body:not(.landing-page) .eyebrow {
  color: var(--primary-hover);
}

body:not(.landing-page) .button,
body:not(.landing-page) .button.muted,
body:not(.landing-page) .button.ghost,
body:not(.landing-page) .inline-links a {
  min-height: 44px;
  border: 1px solid var(--border-purple);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body:not(.landing-page) .button:hover,
body:not(.landing-page) .inline-links a:hover {
  border-color: var(--text);
  background: var(--border-purple);
  color: var(--text);
  text-decoration: none;
}

body:not(.landing-page) .page-hero,
body:not(.landing-page) .feature,
body:not(.landing-page) .shipping {
  border-top: 1px solid var(--border-purple);
  border-bottom: 1px solid var(--border-purple);
  background: var(--inner-surface-soft);
}

body:not(.landing-page) .section-heading h1,
body:not(.landing-page) .section-heading h2,
body:not(.landing-page) .about h2,
body:not(.landing-page) .feature h1,
body:not(.landing-page) .feature h2,
body:not(.landing-page) .shipping h2,
body:not(.landing-page) .shipping h3,
body:not(.landing-page) .work-detail h1,
body:not(.landing-page) .product-detail h1 {
  color: var(--inner-text);
  text-shadow: none;
}

body:not(.landing-page) .work-card,
body:not(.landing-page) .product-card,
body:not(.landing-page) .cart,
body:not(.landing-page) .editor-form,
body:not(.landing-page) .editor-preview,
body:not(.landing-page) .cover-item {
  border: 1px solid var(--inner-line);
  border-radius: 8px;
  background: var(--inner-surface);
  color: var(--inner-text);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}

body:not(.landing-page) .work-card h3,
body:not(.landing-page) .product-card h3,
body:not(.landing-page) .cart h3,
body:not(.landing-page) .cart strong,
body:not(.landing-page) .cart span {
  color: var(--inner-text);
}

body:not(.landing-page) .work-card p,
body:not(.landing-page) .product-card p,
body:not(.landing-page) .cart p {
  color: var(--inner-muted);
}

body:not(.landing-page) .portrait,
body:not(.landing-page) .feature img,
body:not(.landing-page) .shipping img,
body:not(.landing-page) .work-detail img,
body:not(.landing-page) .detail-image {
  border: 1px solid var(--border-purple);
  border-radius: 8px;
}

body:not(.landing-page) .product-detail-page {
  background: transparent;
}

body:not(.landing-page) .price,
body:not(.landing-page) .detail-price {
  color: var(--primary-hover);
}

body:not(.landing-page) .cart-row {
  border-color: var(--border-purple);
}

body:not(.landing-page) .cart-row button {
  border: 1px solid var(--border-purple);
  background: var(--primary-soft);
  color: var(--text);
}

body:not(.landing-page) .site-footer {
  border-top: 1px solid var(--border-purple);
  background: var(--bg-deep);
}

body:not(.landing-page) .site-footer p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

@media (max-width: 620px) {
  body:not(.landing-page) .site-header {
    grid-template-columns: auto 1fr;
  }

  body:not(.landing-page) .brand span {
    display: none;
  }

  body:not(.landing-page) .lang-switch {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  body:not(.landing-page) .lang-switch button {
    padding: 6px 9px;
    font-size: 12px;
  }

  body:not(.landing-page) .hero-content {
    width: calc(100% - 24px);
    padding: 34px 20px;
  }

  body:not(.landing-page) .site-footer p {
    font-size: 12px;
  }
}

/* Mobile about layout: centered title, image, copy, then icon links. */
body:not(.landing-page) .about {
  display: block;
}

body:not(.landing-page) .about .section-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  column-gap: clamp(24px, 5vw, 70px);
  align-items: center;
  max-width: none;
}

body:not(.landing-page) .about .section-copy > :not(.portrait) {
  grid-column: 1;
}

body:not(.landing-page) .about .portrait {
  grid-column: 2;
  grid-row: 1 / span 5;
}

body:not(.landing-page) .inline-links a[data-social] {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 0;
}

body:not(.landing-page) .inline-links a[data-social]::before {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
}

@media (max-width: 620px) {
  body:not(.landing-page) .about {
    padding-top: 44px;
  }

  body:not(.landing-page) .about .section-copy {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body:not(.landing-page) .about .section-copy > * {
    grid-column: 1;
  }

  body:not(.landing-page) .about .eyebrow {
    margin-bottom: 12px;
    font-size: 22px;
  }

  body:not(.landing-page) .about h2 {
    margin-bottom: 18px;
    font-size: clamp(42px, 12vw, 54px);
  }

  body:not(.landing-page) .about .portrait {
    grid-row: auto;
    width: min(100%, 520px);
    margin: 0 auto 26px;
  }

  body:not(.landing-page) .about .section-copy > p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.8;
  }

  body:not(.landing-page) .about .social-panel {
    margin-top: 20px;
  }

  body:not(.landing-page) .about .social-panel h3 {
    font-size: 22px;
  }

  body:not(.landing-page) .about .inline-links {
    justify-content: center;
    gap: 12px;
  }
}

/* Inner navigation returns to language selection; social icons stay unframed. */
body:not(.landing-page) .lang-switch {
  display: none;
}

body:not(.landing-page) .inline-links a[data-social] {
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:not(.landing-page) .inline-links a[data-social]:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.landing-page) .inline-links a[data-social]::before {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  background: var(--primary);
}

/* One font family for the name in Chinese, Japanese, and English. */
body:not(.landing-page) .about h2 {
  font-family: "Noto Serif JP", serif;
}

/* Native mobile page picker. */
.mobile-nav {
  display: none;
}

@media (max-width: 620px) {
  body:not(.landing-page) .site-header {
    grid-template-columns: auto 1fr;
  }

  body:not(.landing-page) .mobile-nav {
    position: relative;
    display: block;
    justify-self: end;
  }

  body:not(.landing-page) .mobile-nav summary {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid var(--border-purple);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--text);
    cursor: pointer;
    list-style: none;
  }

  body:not(.landing-page) .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  body:not(.landing-page) .mobile-nav-icon,
  body:not(.landing-page) .mobile-nav-icon::before,
  body:not(.landing-page) .mobile-nav-icon::after {
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-hover);
  }

  body:not(.landing-page) .mobile-nav-icon {
    position: relative;
  }

  body:not(.landing-page) .mobile-nav-icon::before,
  body:not(.landing-page) .mobile-nav-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  body:not(.landing-page) .mobile-nav-icon::before {
    top: -7px;
  }

  body:not(.landing-page) .mobile-nav-icon::after {
    top: 7px;
  }

  body:not(.landing-page) .mobile-nav[open] summary {
    border-color: var(--primary-hover);
    background: var(--primary-soft);
  }

  body:not(.landing-page) .mobile-nav nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(240px, calc(100vw - 36px));
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-purple);
    border-radius: 8px;
    background: var(--overlay-heavy);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body:not(.landing-page) .mobile-nav nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-purple);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  body:not(.landing-page) .mobile-nav nav a:last-child {
    border-bottom: 0;
  }

  body:not(.landing-page) .mobile-nav nav a:active {
    background: var(--primary-soft);
  }
}

/* Inner-page footer social icons. */
body:not(.landing-page) .site-footer nav {
  gap: 8px 14px;
}

body:not(.landing-page) .site-footer a[data-social] {
  display: inline-grid;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  place-items: center;
  font-size: 0;
  text-decoration: none;
}

body:not(.landing-page) .site-footer a[data-social]::before {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  background: var(--primary);
}

/* Event category list for shop products. */
.event-filter {
  width: min(360px, 100%);
  display: grid;
  gap: 10px;
  margin: 26px auto 0;
  text-align: left;
}

.event-filter label {
  color: var(--primary-hover);
  font-size: 18px;
  font-weight: 800;
}

.event-filter select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border-purple);
  border-radius: 8px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.event-filter select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.event-filter option {
  background: var(--surface);
  color: var(--text);
}

@media (max-width: 620px) {
  .event-filter {
    width: min(100%, 320px);
    text-align: center;
  }
}

/* Empty state for announced events without products yet. */
.product-grid .event-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 36px 18px;
  border: 1px solid var(--border-purple);
  border-radius: 8px;
  background: var(--primary-soft);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  font-size: 17px;
}
/* Layered homepage covers: the GIF stays fixed above the carousel. */
.landing-page .landing-slices {
  inset: 0;
  overflow: hidden;
}

.landing-page .landing-fade-layer {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  animation: none;
  background: none;
  box-shadow: none;
  transition: opacity 1200ms ease;
  will-change: opacity;
}

.landing-page .landing-fade-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fade-image);
  background-position: var(--fade-position, center top);
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(var(--layer-scale, 1));
  transform-origin: var(--fade-position, center top);
  pointer-events: none;
}

.landing-page .landing-fade-layer.is-fixed-gif::before {
  /* The animated GIF should fill the whole landing hero.
   * Keep it bottom-anchored so the characters at the bottom are not cropped away. */
  background-position: center bottom;
  background-size: cover;
  transform: none;
}

.landing-page .landing-fade-layer::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--layer-darkness, 0));
  pointer-events: none;
}

.landing-page .landing-fade-layer.is-leaving {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-fade-layer {
    transition: none;
  }
}







/* Desktop about alignment: copy stays close to the portrait. */
@media (min-width: 621px) {
  body:not(.landing-page) .about .section-copy {
    width: min(1240px, 100%);
    max-width: 1240px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 680px) minmax(320px, 460px);
    column-gap: clamp(36px, 4vw, 64px);
  }

  body:not(.landing-page) .about .section-copy > :not(.portrait) {
    width: 100%;
    max-width: 680px;
    justify-self: end;
    text-align: right;
  }

  body:not(.landing-page) .about .portrait {
    justify-self: start;
  }
}
@media (min-width: 621px) {
  body:not(.landing-page) .about .inline-links {
    justify-content: flex-end;
  }
}

/* Portrait image overlay heading. */
.portrait-card {
  position: relative;
  overflow: hidden;
}

.portrait-card::after {
  content: "";
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(180deg, transparent, var(--overlay-heavy));
  pointer-events: none;
}

.portrait-card .portrait-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-card .portrait-heading {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 1;
  margin: 0;
  color: var(--text);
  font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
}

/* Unified cold-black portfolio palette. */
html,
body,
.editor-page {
  background: var(--bg);
  color: var(--text);
}

body:not(.landing-page) {
  background: var(--bg);
  color: var(--text);
}

body:not(.landing-page) .site-header,
body:not(.landing-page) .site-footer {
  border-color: var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
  box-shadow: none;
}

body:not(.landing-page) .brand,
body:not(.landing-page) .main-nav a,
body:not(.landing-page) .site-footer a {
  color: var(--text-secondary);
}

body:not(.landing-page) .main-nav a:hover,
body:not(.landing-page) .site-footer a:hover,
body:not(.landing-page) a:hover {
  color: var(--primary-hover);
}

body:not(.landing-page) h1,
body:not(.landing-page) h2,
body:not(.landing-page) h3,
body:not(.landing-page) .section-heading h1,
body:not(.landing-page) .section-heading h2,
body:not(.landing-page) .about h2,
body:not(.landing-page) .feature h1,
body:not(.landing-page) .feature h2,
body:not(.landing-page) .shipping h2,
body:not(.landing-page) .shipping h3,
body:not(.landing-page) .work-detail h1,
body:not(.landing-page) .product-detail h1 {
  color: var(--text);
}

body:not(.landing-page) p,
body:not(.landing-page) li,
body:not(.landing-page) .shipping li span,
body:not(.landing-page) .product-card p,
body:not(.landing-page) .work-card p,
body:not(.landing-page) .product-detail p,
body:not(.landing-page) .editor-status {
  color: var(--text-secondary);
}

body:not(.landing-page) .eyebrow,
body:not(.landing-page) .price,
body:not(.landing-page) .event-filter label,
body:not(.landing-page) .position-value,
body:not(.landing-page) .darkness-value,
body:not(.landing-page) .scale-value {
  color: var(--primary);
}

body:not(.landing-page) small,
body:not(.landing-page) time,
body:not(.landing-page) .meta,
body:not(.landing-page) .muted {
  color: var(--text-muted);
}

.work-card,
.product-card,
.cart,
.product-detail,
.editor-form,
.editor-preview,
.cover-item,
.product-grid .event-empty {
  border-color: var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.work-card:hover,
.product-card:hover {
  border-color: var(--border-light);
  background: var(--surface-hover);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.button,
button,
.file-button,
.cover-item-actions button,
body:not(.landing-page) .lang-switch button {
  border-color: var(--border-light);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.button:hover,
button:hover,
.file-button:hover,
.cover-item-actions button:hover,
body:not(.landing-page) .lang-switch button:hover,
body:not(.landing-page) .lang-switch button.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

.button:active,
button:active {
  border-color: var(--primary-active);
  transform: scale(0.99);
}

button:disabled,
.button:disabled {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-disabled);
}

input,
select,
textarea,
.editor-form input,
.editor-form select,
.event-filter select {
  border-color: var(--border-light);
  background: var(--surface);
  color: var(--text);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.event-filter option {
  background: var(--surface);
  color: var(--text);
}

body:not(.landing-page) .mobile-nav summary {
  border-color: var(--border-light);
  background: var(--surface);
  color: var(--text);
}

body:not(.landing-page) .mobile-nav[open] summary {
  border-color: var(--primary);
  background: var(--primary-soft);
}

body:not(.landing-page) .mobile-nav nav {
  border-color: var(--border);
  background: var(--surface-strong);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

body:not(.landing-page) .mobile-nav nav a {
  border-color: var(--border);
  color: var(--text);
}

body:not(.landing-page) .mobile-nav nav a:active {
  background: var(--primary-soft);
}

.inline-links a {
  border-color: var(--border-light);
  background: var(--surface);
  color: var(--text-secondary);
}

.inline-links a:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

a[data-social]::before,
body:not(.landing-page) .site-footer a[data-social]::before {
  background: var(--text-secondary);
}

a[data-social]:hover::before,
body:not(.landing-page) .site-footer a[data-social]:hover::before {
  background: var(--primary-hover);
}

.portrait-card,
.cover-frame {
  border-color: var(--border);
  background-color: var(--surface);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.portrait-card::after {
  background: linear-gradient(180deg, transparent, var(--overlay-heavy));
}

.landing-page {
  background: var(--bg);
  color: var(--text);
}

.landing-page .landing-bg {
  background-color: var(--bg);
}

.landing-page .landing-panel {
  border: 1px solid var(--border);
  background: var(--overlay);
  color: var(--text);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-page .landing-lead,
.landing-page .site-footer,
.landing-page .site-footer p,
.landing-page .site-footer a {
  color: var(--text-secondary);
}

.landing-page .landing-actions .button {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: var(--surface-translucent);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.landing-page .landing-actions .button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: none;
}

.landing-page .landing-actions .button:active {
  border-color: var(--primary-active);
  transform: scale(0.99);
}

.landing-page .site-footer {
  border-color: var(--border);
  background: var(--bg-deep);
}

.landing-page .footer-edit-link {
  color: var(--text-muted);
}

.landing-page .footer-edit-link:hover {
  color: var(--primary-hover);
}

@media (max-width: 620px) {
  .landing-page .landing-panel {
    background: var(--overlay-mobile);
  }

  .landing-page .landing-actions {
    width: min(calc(100vw - 40px), 360px);
    margin-inline: auto;
  }
}

/* Palette cleanup for image-first pages. */
.landing-page .landing-bg {
  background-color: var(--bg);
  background-image: var(--landing-image);
  background-position: var(--landing-position, center top);
  background-repeat: no-repeat;
  background-size: cover;
}

.landing-page .landing-bg::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--overlay);
  pointer-events: none;
}

.landing-page .landing-panel {
  border-radius: 8px;
}

.landing-page .landing .eyebrow::before,
.landing-page .landing .eyebrow::after,
.landing-page .landing-panel h1::after {
  display: none;
}

body:not(.landing-page) .hero-media {
  background: var(--bg-deep);
}

@media (max-width: 620px) {
  .landing-page .landing-bg::after {
    background: var(--overlay-mobile);
  }
}

/* Keep the unified theme flat and image-first. */
.site-header,
.mobile-nav nav,
.section-actions .button.muted,
body:not(.landing-page) .hero-copy,
body:not(.landing-page) .mobile-nav nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:not(.landing-page) {
  background: var(--bg);
}

/* Homepage: preserve the original landing-page composition.
 * Only keep the confirmed UX changes: no arrows on language buttons,
 * and do not expose the cover editor link on the public homepage. */
.landing-page .landing-actions .button::after {
  content: none !important;
  display: none !important;
}

.landing-page .footer-edit-link {
  display: none !important;
}

/* Homepage cover brightness control.
 * The layout stays unchanged; only image luminance is adjusted.
 * Value is written by landing.js / cover-editor.js and defaults to 65%. */
:root {
  --landing-brightness: 0.65;
}

.landing-page .landing-fade-layer::before {
  filter: brightness(var(--landing-brightness));
}

/* Static covers use the adjustable brightness value.
 * The animated GIF intentionally stays at full brightness. */
.landing-page .landing-fade-layer.is-fixed-gif::before {
  filter: brightness(1);
}

/* Editor preview follows the same rule: static images are adjustable, GIF is 100%. */
.editor-page .cover-frame::before {
  filter: brightness(var(--landing-brightness));
}

.editor-page .cover-frame.is-gif::before {
  filter: brightness(1);
}


/* Inner homepage cover.
 * Reuse the first non-GIF image from the existing cover editor as a full-bleed hero cover.
 * The decorative landing GIF is intentionally not shown here. */
body:not(.landing-page) .hero {
  min-height: min(86vh, 900px);
  background: var(--bg-deep);
}

body:not(.landing-page) .hero-media.has-site-cover {
  inset: 0;
  overflow: hidden;
  background: var(--bg-deep);
}

body:not(.landing-page) .hero-media.has-site-cover::before {
  content: "";
  position: absolute;
  inset: -3%;
  background-image: var(--site-cover-image);
  background-position: var(--site-cover-position, center top);
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(var(--site-cover-scale, 1));
  transform-origin: center;
  filter: brightness(var(--site-cover-brightness, 0.65));
}

body:not(.landing-page) .hero-media.has-site-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 10, 13, 0.14) 0%, rgba(9, 10, 13, 0.20) 50%, rgba(9, 10, 13, 0.52) 100%),
    rgba(0, 0, 0, var(--site-cover-darkness, 0));
}

/* Keep the original centered intro panel, but let the cover remain visible around it. */
body:not(.landing-page) .hero-content {
  background: rgba(9, 10, 13, 0.72);
}

@media (max-width: 620px) {
  body:not(.landing-page) .hero {
    min-height: 78vh;
  }

  body:not(.landing-page) .hero-media.has-site-cover::before {
    inset: -5%;
  }

  body:not(.landing-page) .hero-media.has-site-cover::after {
    background:
      linear-gradient(180deg, rgba(9, 10, 13, 0.18) 0%, rgba(9, 10, 13, 0.28) 52%, rgba(9, 10, 13, 0.66) 100%),
      rgba(0, 0, 0, var(--site-cover-darkness, 0));
  }
}

/* 2026-08-25 site home hero: static cover controlled by local admin. */
.site-home {
  --site-cover-image: none;
  --site-cover-position: 50% 50%;
  --site-cover-brightness: 0.53;
  --site-cover-overlay: 0.58;
  --site-cover-scale: 1;
  --site-panel-opacity: 0.72;
  --site-hero-height: 86vh;
}

body.site-home .hero {
  min-height: var(--site-hero-height);
  background: var(--bg-deep);
}

body.site-home .hero-media {
  overflow: hidden;
  background: var(--bg-deep);
}

body.site-home .hero-media::before,
body.site-home .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.site-home .hero-media::before {
  inset: -3%;
  background-color: var(--bg-deep);
  background-image: var(--site-cover-image);
  background-position: var(--site-cover-position);
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(var(--site-cover-brightness));
  transform: scale(var(--site-cover-scale));
  transform-origin: var(--site-cover-position);
}

body.site-home .hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.16) 0%, rgba(6, 8, 10, var(--site-cover-overlay)) 100%),
    rgba(6, 8, 10, calc(var(--site-cover-overlay) * 0.35));
}

body.site-home:not(.site-home-has-cover) .hero-media::after {
  background:
    radial-gradient(circle at 50% 36%, rgba(166, 123, 217, 0.06), transparent 42%),
    linear-gradient(180deg, #0d0f12 0%, #090a0d 100%);
}

body.site-home .hero-content {
  background: rgba(9, 10, 13, var(--site-panel-opacity));
}

@media (max-width: 620px) {
  body.site-home .hero {
    min-height: max(72svh, calc(var(--site-hero-height) * 0.88));
  }

  body.site-home .hero-media::before {
    inset: -5%;
  }
}

/* Local admin / site cover editor. Public pages do not link to these screens. */
.admin-page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.admin-shell,
.site-editor-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(44px, 7vw, 88px) 0 80px;
}

.admin-intro,
.compact-editor-hero {
  max-width: 760px;
  margin-bottom: 34px;
}

.admin-intro h1,
.compact-editor-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(42px, 7vw, 72px);
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-card:hover {
  border-color: var(--border-purple);
  background: var(--surface-hover);
  transform: translateY(-2px);
}

.admin-card h2 {
  margin: 8px 0 12px;
  font-size: clamp(28px, 4vw, 42px);
}

.admin-card-kicker {
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.admin-note,
.field-note {
  color: var(--text-muted);
  font-size: 14px;
}

.admin-note {
  margin-top: 24px;
}

.admin-note code {
  color: var(--text-secondary);
}

.site-editor-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(420px, 1.18fr);
  gap: 24px;
  align-items: start;
}

.site-settings-form,
.site-editor-preview-panel {
  padding: 24px;
}

.site-settings-form h2 {
  margin-bottom: 20px;
  font-size: 28px;
}

.site-settings-form > label,
.site-setting-row label {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font-weight: 700;
}

.site-settings-form input[type="url"],
.site-settings-form input[type="file"] {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-deep);
  color: var(--text);
}

.site-settings-form input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.site-setting-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.site-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.editor-status {
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--text-secondary);
}

.editor-status.is-error {
  border-color: rgba(208, 116, 146, 0.55);
  color: #e3a9bb;
}

.site-cover-preview {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-deep);
  isolation: isolate;
  --preview-site-cover: none;
  --preview-site-position: 50% 50%;
  --preview-site-brightness: 0.58;
  --preview-site-overlay: 0.58;
  --preview-site-scale: 1;
  --preview-site-panel: 0.72;
}

.site-cover-preview-media,
.site-cover-preview-media::after {
  position: absolute;
  inset: 0;
  content: "";
}

.site-cover-preview-media {
  inset: -3%;
  background-color: var(--bg-deep);
  background-image: var(--preview-site-cover);
  background-position: var(--preview-site-position);
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(var(--preview-site-brightness));
  transform: scale(var(--preview-site-scale));
  transform-origin: var(--preview-site-position);
  z-index: -2;
}

.site-cover-preview-media::after {
  inset: 0;
  background: rgba(6, 8, 10, var(--preview-site-overlay));
}

.site-cover-preview-card {
  width: min(560px, calc(100% - 42px));
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--border-purple);
  border-radius: 8px;
  padding: 34px 24px;
  background: rgba(9, 10, 13, var(--preview-site-panel));
  text-align: center;
}

.site-cover-preview-card img {
  width: 104px;
}

.site-cover-preview-card > span {
  color: var(--primary-hover);
  font-size: 12px;
}

.site-cover-preview-card > strong {
  color: var(--text);
  font-family: "PMingLiU", "MingLiU", "Noto Serif TC", serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
}

.site-cover-preview-card small {
  color: var(--text-secondary);
}

.preview-pill {
  display: inline-grid;
  min-width: 76px;
  min-height: 36px;
  margin: 12px 4px 0;
  place-items: center;
  border: 1px solid var(--border-purple);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 860px) {
  .site-editor-grid,
  .admin-card-grid {
    grid-template-columns: 1fr;
  }

  .site-editor-preview-panel {
    order: -1;
  }
}

@media (max-width: 620px) {
  .admin-shell,
  .site-editor-shell {
    width: min(100% - 24px, 1180px);
    padding-top: 30px;
  }

  .site-setting-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .site-cover-preview {
    min-height: 390px;
  }
}


/* 2026-08-25 refinement: unified typography, darker static cover, compact home works, dedicated notice area. */
:root {
  --site-font: "Microsoft JhengHei", "Noto Sans TC", "Noto Sans JP", "Yu Gothic", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
.landing-page,
.landing-page .landing-panel,
.landing-page .landing-panel h1,
.landing-page .landing .eyebrow,
.landing-page .landing-lead,
.landing-page .landing-actions .button,
.landing-page .site-footer,
body:not(.landing-page),
body:not(.landing-page) h1,
body:not(.landing-page) h2,
body:not(.landing-page) h3,
body:not(.landing-page) p,
body:not(.landing-page) li,
body:not(.landing-page) a,
body:not(.landing-page) button,
body:not(.landing-page) input,
body:not(.landing-page) select,
body:not(.landing-page) textarea,
body:not(.landing-page) .about h2,
.site-cover-preview-card > strong {
  font-family: var(--site-font) !important;
}

/* Static cover after language selection: intentionally darker. Landing GIF is not affected. */
.site-home {
  --site-cover-brightness: 0.53;
  --site-cover-overlay: 0.58;
  --site-panel-opacity: 0.72;
}

body.site-home .hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.12) 0%, rgba(6, 8, 10, var(--site-cover-overlay)) 100%),
    rgba(6, 8, 10, calc(var(--site-cover-overlay) * 0.34));
}

/* Home portfolio preview should support the work instead of dominating the page. */
body.site-home #portfolio .work-grid {
  width: min(1260px, 100%);
  margin-inline: auto;
  gap: 18px;
}

body.site-home #portfolio .work-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

body.site-home #portfolio .work-card h3 {
  font-size: 18px;
}

body.site-home #portfolio .work-card p {
  font-size: 13px;
  line-height: 1.55;
}

/* 注意事項 is its own homepage region, not visually bundled into the shop. */
body.site-home .notice {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}

body.site-home .notice-heading {
  margin-bottom: 28px;
}

body.site-home .notice-grid {
  width: min(1060px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: stretch;
}

body.site-home .notice-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--surface);
}

body.site-home .notice-card h3 {
  margin-bottom: 18px;
  color: var(--text);
  font-size: clamp(20px, 2vw, 28px);
}

body.site-home .notice-card ol {
  display: grid;
  gap: 16px;
  margin: 0;
  padding-left: 22px;
}

body.site-home .notice-card li,
body.site-home .notice-card p {
  color: var(--text-secondary);
}

body.site-home .notice-card li strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
}

body.site-home .notice-card li span {
  display: block;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  body.site-home #portfolio .work-grid {
    width: min(760px, 100%);
  }

  body.site-home .notice-grid {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
  }
}

@media (max-width: 620px) {
  body.site-home #portfolio .work-grid {
    width: min(430px, 100%);
  }

  body.site-home #portfolio .work-card img {
    aspect-ratio: 16 / 11;
  }
}

/* 2026-08-25 mobile landing: compact composition based on the approved reference.
 * Desktop remains unchanged. The hero fills the first screen; the existing footer stays below it. */
@media (max-width: 620px) {
  html:has(body.landing-page) {
    width: 100%;
    min-height: 100%;
    height: auto;
    background: var(--bg-deep);
  }

  body.landing-page {
    width: 100%;
    min-height: 100svh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    background: var(--bg-deep);
  }

  .landing-page .landing {
    position: relative;
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 560px;
    padding: 0;
    overflow: hidden;
    display: block;
    background: var(--bg-deep);
  }

  /* The GIF is the full mobile canvas. Keep the source image itself at 100% brightness. */
  .landing-page .landing-bg,
  .landing-page .landing-slices,
  .landing-page .landing-fade-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .landing-page .landing-bg,
  .landing-page .landing-fade-layer,
  .landing-page .landing-fade-layer::before,
  .landing-page .landing-fade-layer.is-fixed-gif::before {
    background-position: center top !important;
    background-size: cover !important;
  }

  .landing-page .landing-fade-layer.is-fixed-gif::before {
    filter: brightness(1) !important;
  }

  /* Remove the older secondary mobile wash so the top of the GIF is truly un-dimmed. */
  .landing-page .landing-fade-layer::after {
    display: none !important;
    background: transparent !important;
  }

  /* Only the lower part fades into the site background.
   * 0-32% is completely transparent, so the upper cover stays at its original 100% brightness. */
  .landing-page .landing-bg::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(9, 10, 13, 0) 0%,
      rgba(9, 10, 13, 0) 32%,
      rgba(9, 10, 13, 0.16) 48%,
      rgba(9, 10, 13, 0.42) 66%,
      rgba(9, 10, 13, 0.74) 84%,
      var(--bg-deep) 100%
    );
  }

  .landing-page .landing-panel {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(40px, 8svh, 70px) 0 max(18px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78);
  }

  .landing-page .landing-logo {
    width: min(126px, 38vw);
    margin: 0 auto 6px;
    transform: none;
  }

  .landing-page .landing .eyebrow {
    width: auto;
    margin: 0 0 5px;
    color: var(--text);
    font-size: clamp(10px, 3vw, 13px);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .landing-page .landing-panel h1 {
    margin: 0 0 clamp(30px, 7svh, 48px);
    color: var(--text);
    font-family: var(--site-font) !important;
    font-size: clamp(34px, 12.5vw, 50px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
  }

  .landing-page .landing-panel h1::after {
    display: none !important;
  }

  .landing-page .landing-lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.90);
    font-family: var(--site-font) !important;
    font-size: clamp(12px, 3.5vw, 15px);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
  }

  /* Full-width stacked language choices, no arrows. */
  .landing-page .landing-actions {
    width: calc(100% - 12px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: clamp(14px, 3svh, 22px) auto 0;
    padding: 0;
  }

  .landing-page .landing-actions .button {
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(166, 123, 217, 0.72);
    border-radius: 999px;
    background: rgba(9, 11, 15, 0.68);
    color: var(--text);
    font-family: var(--site-font) !important;
    font-size: clamp(16px, 4.7vw, 20px);
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
  }

  .landing-page .landing-actions .button::after {
    content: none !important;
    display: none !important;
  }

  .landing-page .landing-actions .button:active {
    background: var(--primary-soft);
    border-color: var(--primary-hover);
  }

  /* Keep the existing footer below the first-screen hero instead of hiding it. */
  .landing-page > .site-footer {
    display: flex !important;
    position: relative;
    z-index: 110;
    width: 100%;
    min-height: auto;
    background: var(--bg-deep);
  }
}

@media (max-width: 620px) and (max-height: 620px) {
  .landing-page .landing {
    min-height: 520px;
  }

  .landing-page .landing-panel {
    padding-top: 26px;
  }

  .landing-page .landing-logo {
    width: min(104px, 34vw);
  }

  .landing-page .landing-panel h1 {
    margin-bottom: 18px;
    font-size: clamp(30px, 11vw, 42px);
  }

  .landing-page .landing-actions {
    margin-top: 12px;
  }

  .landing-page .landing-actions .button {
    min-height: 40px;
  }
}

/* Site editor upload reliability UI */
.site-upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.site-upload-row .button {
  min-width: 180px;
}
.site-upload-row .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.site-upload-progress {
  overflow: hidden;
  height: 8px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}
.site-upload-progress-bar {
  width: 0;
  height: 100%;
  background: var(--primary);
  transition: width 0.12s linear;
}
@media (max-width: 620px) {
  .site-upload-row {
    align-items: stretch;
  }
  .site-upload-row .button {
    width: 100%;
  }
}

/* 2026-08-25 mobile landing footer fix.
 * Keep the approved mobile composition, but reserve space for the footer so it is visible
 * directly below the language section instead of being pushed a full viewport farther down. */
@media (max-width: 620px) {
  body.landing-page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .landing-page .landing {
    flex: 1 0 auto;
    height: auto;
    min-height: calc(100svh - 118px);
    min-height: calc(100dvh - 118px);
    overflow: hidden;
  }

  .landing-page .landing-panel {
    height: auto;
    min-height: calc(100svh - 118px);
    min-height: calc(100dvh - 118px);
    padding-bottom: 22px;
  }

  .landing-page > .site-footer {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 118px;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg-deep);
  }

  .landing-page > .site-footer::before {
    display: none;
  }

  .landing-page > .site-footer p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
  }

  .landing-page > .site-footer nav {
    width: min(280px, 88vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .landing-page > .site-footer nav::before {
    display: none;
  }

  .landing-page > .site-footer a[data-social] {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    place-items: center;
    font-size: 0;
  }

  .landing-page > .site-footer a[data-social]::before {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .landing-page > .site-footer .footer-edit-link {
    display: none !important;
  }
}

@media (max-width: 620px) and (max-height: 620px) {
  .landing-page .landing,
  .landing-page .landing-panel {
    min-height: 520px;
  }
}


/* 2026-08-25 inner-home multi-image slideshow. */
/* The legacy static-cover pseudo layers must not flash before the slideshow loads. */
body.site-home .hero-media::before,
body.site-home .hero-media::after,
body.site-home .hero-media.has-site-cover::before,
body.site-home .hero-media.has-site-cover::after {
  content: none;
  display: none;
}

body.site-home .hero-media {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

body.site-home .site-hero-slide {
  position: absolute;
  inset: -3%;
  z-index: -3;
  background-color: var(--bg-deep);
  background-position: var(--site-cover-position);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  filter: brightness(var(--site-cover-brightness));
  transform: scale(var(--site-cover-scale));
  transform-origin: var(--site-cover-position);
  transition: opacity var(--site-slide-transition, 2.4s) ease-in-out;
  will-change: opacity;
}

body.site-home .site-hero-slide.is-active {
  opacity: 1;
}

/* First cover waits until its image is ready, then fades in more gently. */
body.site-home .site-hero-slide.is-entering {
  transition-duration: 2.8s;
  transition-timing-function: ease-in-out;
}

body.site-home .hero-content {
  animation: site-home-content-enter 2s ease-in-out 320ms both;
}

@keyframes site-home-content-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

body.site-home .site-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.16) 0%, rgba(6, 8, 10, var(--site-cover-overlay)) 100%),
    rgba(6, 8, 10, calc(var(--site-cover-overlay) * 0.35));
}

body.site-home:not(.site-home-has-cover) .hero-media {
  background:
    radial-gradient(circle at 50% 36%, rgba(166, 123, 217, 0.06), transparent 42%),
    linear-gradient(180deg, #0d0f12 0%, #090a0d 100%);
}

@media (max-width: 620px) {
  body.site-home .site-hero-slide {
    inset: -5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-home .site-hero-slide,
  body.site-home .site-hero-slide.is-entering {
    transition: none;
  }
  body.site-home .hero-content {
    animation: none;
  }
}

/* Site slideshow admin. */
.site-url-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 22px;
}

.site-url-add label {
  margin-bottom: 0 !important;
}

.site-slide-manager {
  margin: 4px 0 24px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.site-slide-manager-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.site-slide-manager-head h3 {
  margin: 0;
  font-size: 18px;
}

.site-slide-list {
  display: grid;
  gap: 10px;
}

.site-slide-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface);
}

.site-slide-item.is-previewing {
  border-color: var(--border-purple);
}

.site-slide-thumb {
  width: 74px;
  height: 52px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: var(--bg-deep);
  cursor: pointer;
}

.site-slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-slide-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.site-slide-info strong {
  font-size: 13px;
}

.site-slide-info span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-slide-actions {
  display: flex;
  gap: 5px;
}

.site-slide-actions button {
  min-width: 34px;
  min-height: 32px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-deep);
  color: var(--text-secondary);
  cursor: pointer;
}

.site-slide-actions button:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--text);
}

.site-slide-actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media (max-width: 620px) {
  .site-url-add {
    grid-template-columns: 1fr;
  }
  .site-slide-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .site-slide-thumb {
    width: 64px;
    height: 48px;
  }
  .site-slide-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* 2026-08-25 mobile landing GIF foreground adjustment.
 * Keep the dark gradient over the static cover, but render the decorative GIF
 * in front of that gradient. Enlarge it and anchor it to the bottom-left. */
@media (max-width: 620px) {
  .landing-page .landing-slices {
    z-index: auto !important;
  }

  .landing-page .landing-fade-layer.is-fixed-gif {
    z-index: 60 !important;
  }

  .landing-page .landing-fade-layer.is-fixed-gif::before {
    background-position: left bottom !important;
    background-size: auto 120% !important;
    transform: none !important;
    filter: brightness(1) !important;
  }
}

/* 2026-08-25 inner pages: remove the large framed hero panel. */
body:not(.landing-page) .hero-content {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2026-08-25 inner-page typography: match the language landing page. */
body:not(.landing-page),
body:not(.landing-page) h1,
body:not(.landing-page) h2,
body:not(.landing-page) h3,
body:not(.landing-page) p,
body:not(.landing-page) a,
body:not(.landing-page) button,
body:not(.landing-page) input,
body:not(.landing-page) select,
body:not(.landing-page) textarea,
body:not(.landing-page) .brand,
body:not(.landing-page) .main-nav,
body:not(.landing-page) .eyebrow,
body:not(.landing-page) .hero-content,
body:not(.landing-page) .page-hero {
  font-family: var(--site-font) !important;
  font-style: normal;
}

body:not(.landing-page) .hero-content h1,
body:not(.landing-page) .page-hero h1 {
  font-family: var(--site-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em;
}

body:not(.landing-page) h2 {
  font-family: var(--site-font) !important;
  font-weight: 700 !important;
}

body:not(.landing-page) .eyebrow,
body:not(.landing-page) .button,
body:not(.landing-page) button {
  font-family: var(--site-font) !important;
  font-weight: 700;
}

/* 2026-08-25 final inner-home hero cleanup.
 * Keep the cover/slideshow full-bleed and remove the centered card/frame entirely. */
body.site-home .hero-content,
body:not(.landing-page).site-home .hero-content {
  position: relative;
  z-index: 2;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep slideshow layers above the hero background but behind the content. */
body.site-home .hero-media {
  z-index: 0;
}
body.site-home .site-hero-slide {
  z-index: 0;
}
body.site-home .site-hero-overlay {
  z-index: 1;
}

/* 2026-08-25: language landing desktop frame — slightly lighter/whiter. */
@media (min-width: 621px) {
  .landing-page .landing-panel {
    border-color: rgba(255, 255, 255, 0.32);
  }
}

/* 2026-08-25: rounded display face for the main 兔仔咖啡凍 titles only. */
:root {
  --title-rounded-font: 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif;
}

.landing-page .landing-panel h1,
body.site-home .hero-content h1 {
  font-family: var(--title-rounded-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
}

/* 2026-08-25: use the rounded display face for all large and small headings. */
h1,
h2,
h3,
.eyebrow,
.section-heading h1,
.section-heading h2,
.page-hero h1,
.hero-content h1,
.about h2,
.feature h1,
.feature h2,
.shipping h2,
.shipping h3,
.work-detail h1,
.product-detail h1,
.work-card h3,
.product-card h3,
.cart h3,
.social-panel h3,
.notice-card h3,
.admin-intro h1,
.compact-editor-hero h1,
.admin-card h2,
.site-settings-form h2,
.site-slide-manager-head h3 {
  font-family: var(--title-rounded-font) !important;
  font-style: normal !important;
}

h1,
.hero-content h1,
.page-hero h1,
.section-heading h1,
.work-detail h1,
.product-detail h1,
.admin-intro h1,
.compact-editor-hero h1 {
  font-weight: 700 !important;
  letter-spacing: -0.025em;
}

h2,
h3,
.eyebrow,
.section-heading h2,
.about h2,
.feature h2,
.shipping h2,
.shipping h3,
.work-card h3,
.product-card h3,
.cart h3,
.social-panel h3,
.notice-card h3,
.admin-card h2,
.site-settings-form h2,
.site-slide-manager-head h3 {
  font-weight: 700 !important;
}


/* 2026-08-25: load a real Traditional Chinese rounded webfont.
 * Previous family names were local-only fallbacks, so Windows often fell back to Microsoft JhengHei. */
h1,
h2,
h3,
.eyebrow,
.section-heading h1,
.section-heading h2,
.page-hero h1,
.hero-content h1,
.about h2,
.feature h1,
.feature h2,
.shipping h2,
.shipping h3,
.work-detail h1,
.product-detail h1,
.work-card h3,
.product-card h3,
.cart h3,
.social-panel h3,
.notice-card h3,
.admin-intro h1,
.compact-editor-hero h1,
.admin-card h2,
.site-settings-form h2,
.site-slide-manager-head h3 {
  font-family: 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* 2026-08-25: About section heading sits above both the name/copy and portrait. */
body:not(.landing-page) .about {
  display: block !important;
}

body:not(.landing-page) .about .about-kicker {
  width: 100%;
  margin: 0 0 clamp(26px, 4vw, 44px);
  color: var(--primary);
  font-family: 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif !important;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400 !important;
  line-height: 1.2;
  text-align: center;
}

body:not(.landing-page) .about .about-layout {
  width: min(1180px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

body:not(.landing-page) .about .about-layout .section-copy {
  display: block !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 !important;
  justify-self: end;
  text-align: right;
}

body:not(.landing-page) .about .about-layout .section-copy > * {
  width: auto !important;
  max-width: none !important;
  justify-self: auto !important;
  text-align: inherit !important;
}

body:not(.landing-page) .about .about-layout .portrait {
  grid-column: auto !important;
  grid-row: auto !important;
  width: min(100%, 500px);
  margin: 0;
  justify-self: start;
}

body:not(.landing-page) .about .portrait-card::after {
  display: none !important;
}

body:not(.landing-page) .about .inline-links {
  justify-content: flex-end;
}

@media (max-width: 620px) {
  body:not(.landing-page) .about .about-kicker {
    margin-bottom: 24px;
    font-size: 22px;
  }

  body:not(.landing-page) .about .about-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body:not(.landing-page) .about .about-layout .section-copy {
    max-width: 100% !important;
    justify-self: stretch;
    text-align: center;
  }

  body:not(.landing-page) .about .about-layout .portrait {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: min(100%, 520px);
    margin-inline: auto;
    justify-self: center;
  }

  body:not(.landing-page) .about .inline-links {
    justify-content: center;
  }
}

/* 2026-08-25: About name + purple section labels refinement. */
body:not(.landing-page) .about .section-copy h2 {
  font-family: 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* Keep all purple eyebrow/kicker labels at the same visual size. */
body:not(.landing-page) .about .about-kicker,
body:not(.landing-page) .eyebrow {
  color: var(--primary) !important;
  font-family: 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif !important;
  font-size: clamp(24px, 1.8vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 620px) {
  body:not(.landing-page) .about .about-kicker,
  body:not(.landing-page) .eyebrow {
    font-size: 22px !important;
  }
}

/* 2026-08-25: force the About name "玉姐 Akira" to use a real rounded Traditional Chinese webfont. */
@font-face {
  font-family: 'HunInnWeb';
  src: url('https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body:not(.landing-page) .about .section-copy h2[data-i18n="aboutTitle"] {
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
}

/* 2026-08-25: enlarge purple section labels and force key homepage section titles to rounded type. */
body:not(.landing-page) .about .about-kicker,
body:not(.landing-page) .eyebrow {
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif !important;
  font-size: clamp(30px, 2.25vw, 36px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

body:not(.landing-page) h2[data-i18n="portfolioTitle"],
body:not(.landing-page) h2[data-i18n="commissionTitle"],
body:not(.landing-page) h2[data-i18n="shopTitle"],
body:not(.landing-page) h2[data-i18n="navShipping"],
body:not(.landing-page) .about .section-copy h2[data-i18n="aboutTitle"] {
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 620px) {
  body:not(.landing-page) .about .about-kicker,
  body:not(.landing-page) .eyebrow {
    font-size: 26px !important;
  }
}


/* 2026-08-25: homepage event goods archive — image-first display instead of cart/product grid. */
body.site-home .event-goods-section {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

body.site-home .event-goods-section .section-heading {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(34px, 4vw, 54px);
  text-align: center;
}

body.site-home .event-goods-grid {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

body.site-home .event-goods-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

body.site-home .event-goods-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

body.site-home .event-goods-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 52%, rgba(5, 6, 8, 0.86) 100%);
  pointer-events: none;
}

body.site-home .event-goods-meta {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

body.site-home .event-goods-meta strong {
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1;
}

body.site-home .event-goods-meta span {
  color: var(--text-secondary);
  font-size: 14px;
  white-space: nowrap;
}

@media (hover: hover) {
  body.site-home .event-goods-card:hover {
    border-color: var(--border-purple);
  }
  body.site-home .event-goods-card:hover img {
    transform: scale(1.025);
    filter: brightness(1.04);
  }
}

@media (max-width: 720px) {
  body.site-home .event-goods-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  body.site-home .event-goods-grid {
    width: min(100% - 32px, 560px);
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.site-home .event-goods-card {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  body.site-home .event-goods-meta {
    left: 18px;
    right: 18px;
    bottom: 16px;
  }

  body.site-home .event-goods-meta strong {
    font-size: 28px;
  }
}

/* 2026-08-25: desktop language choices match the approved mobile stacked layout. */
@media (min-width: 621px) {
  .landing-page .landing-actions {
    width: min(640px, calc(100vw - 96px));
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 22px auto 0;
    padding: 0;
  }

  .landing-page .landing-actions .button {
    width: 100%;
    min-height: 52px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(166, 123, 217, 0.72);
    border-radius: 999px;
    background: rgba(9, 11, 15, 0.68);
    color: var(--text);
    font-family: var(--site-font) !important;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    box-shadow: none;
  }

  .landing-page .landing-actions .button::after {
    content: none !important;
    display: none !important;
  }
}


/* Four desktop language choices; mobile remains stacked. */
@media (min-width: 621px) {
  .landing-page .landing-actions {
    width: min(1060px, calc(100vw - 96px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 22px auto 0;
    padding: 0;
  }

  .landing-page .landing-actions .button {
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
  }
}

/* 2026-08-26: slightly enlarge the desktop top navigation labels. */
@media (min-width: 761px) {
  body:not(.landing-page) .main-nav {
    gap: 18px;
    font-size: 17px;
  }

  body:not(.landing-page) .main-nav a {
    font-size: 17px;
    line-height: 1.2;
  }
}


/* 2026-08-26: FF43–FF47 event goods archive grid. */
body.site-home .event-goods-grid.ff-event-grid {
  width: min(1240px, calc(100% - 48px));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

body.site-home .ff-event-card {
  min-height: 218px;
  height: 218px;
  aspect-ratio: auto;
  cursor: default;
}

body.site-home .ff-event-card::after {
  background: linear-gradient(to bottom, rgba(8, 10, 13, 0.02) 38%, rgba(5, 6, 8, 0.9) 100%);
}

body.site-home .event-goods-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 22px;
  background:
    radial-gradient(circle at 50% 35%, rgba(166, 123, 217, 0.08), transparent 44%),
    var(--surface);
  color: rgba(244, 243, 246, 0.12);
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif;
  font-size: clamp(42px, 4vw, 70px);
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}

body.site-home .ff-event-card .event-goods-meta {
  left: 18px;
  right: 18px;
  bottom: 16px;
}

body.site-home .ff-event-card .event-goods-meta strong {
  font-size: clamp(26px, 2vw, 34px);
}

@media (max-width: 1180px) {
  body.site-home .event-goods-grid.ff-event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.site-home .event-goods-grid.ff-event-grid {
    width: min(100% - 28px, 640px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.site-home .ff-event-card {
    min-height: 180px;
    height: 180px;
    aspect-ratio: auto;
  }

  body.site-home .event-goods-placeholder {
    font-size: 40px;
  }
}

@media (max-width: 420px) {
  body.site-home .event-goods-grid.ff-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.site-home .ff-event-card .event-goods-meta {
    left: 12px;
    right: 12px;
    bottom: 12px;
    gap: 7px;
  }

  body.site-home .ff-event-card .event-goods-meta strong {
    font-size: 24px;
  }

  body.site-home .ff-event-card .event-goods-meta span {
    font-size: 11px;
  }
}


/* 2026-08-26 home portfolio showcase — visual direction based on the approved mockup. */
body.site-home .portfolio-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 118px) 0 clamp(78px, 8vw, 122px);
  background: #0d0f12;
}

body.site-home .portfolio-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    url("assets-reference/landing-background.png") center 41% / cover no-repeat;
  filter: saturate(0.72) brightness(0.35);
  transform: scale(1.035);
}

body.site-home .portfolio-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(9,10,13,0.78) 0%, rgba(12,11,18,0.70) 42%, rgba(9,10,13,0.92) 100%),
    radial-gradient(circle at 50% 38%, rgba(166,123,217,0.10), transparent 46%);
}

body.site-home .portfolio-showcase-inner {
  width: min(1500px, calc(100% - 64px));
  margin: 0 auto;
}

body.site-home .portfolio-showcase-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

body.site-home .portfolio-showcase-heading .eyebrow {
  margin-bottom: 8px;
  color: var(--primary);
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 700;
}

body.site-home .portfolio-showcase-heading h2 {
  margin: 0;
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif;
  font-size: clamp(54px, 5.2vw, 88px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.site-home .portfolio-showcase-heading > p:last-of-type {
  margin: 24px auto 0;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.15vw, 19px);
}

body.site-home .portfolio-preview-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 34px auto 30px;
}

body.site-home .portfolio-preview-filters a {
  min-width: 108px;
  padding: 11px 22px;
  border: 1px solid rgba(193,190,199,0.46);
  border-radius: 999px;
  background: rgba(14,15,20,0.46);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

body.site-home .portfolio-preview-filters a:hover,
body.site-home .portfolio-preview-filters a.active {
  border-color: var(--primary);
  background: rgba(166,123,217,0.24);
  transform: translateY(-1px);
}

body.site-home .portfolio-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

body.site-home .portfolio-preview-card {
  position: relative;
  display: block;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid rgba(166,123,217,0.50);
  border-radius: 20px;
  background: #15181d;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body.site-home .portfolio-preview-card:hover {
  transform: translateY(-5px);
  border-color: rgba(185,145,231,0.92);
  box-shadow: 0 24px 56px rgba(0,0,0,0.34);
}

body.site-home .portfolio-preview-card > img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  display: block;
}

body.site-home .portfolio-preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,9,12,0.02) 36%, rgba(9,9,13,0.26) 57%, rgba(9,9,13,0.96) 100%);
  pointer-events: none;
}

body.site-home .portfolio-card-open {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244,243,246,0.66);
  border-radius: 999px;
  background: rgba(12,13,17,0.60);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

body.site-home .portfolio-card-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 24px 22px;
  background: linear-gradient(180deg, rgba(11,11,15,0.08), rgba(11,11,15,0.74) 24%, rgba(11,11,15,0.96) 100%);
}

body.site-home .portfolio-card-copy h3 {
  margin: 0 0 7px;
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif;
  font-size: clamp(25px, 2vw, 32px);
  font-weight: 700;
}

body.site-home .portfolio-card-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

body.site-home .portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.site-home .portfolio-tags span {
  padding: 5px 10px;
  border: 1px solid rgba(166,123,217,0.42);
  border-radius: 999px;
  color: #cbb0ee;
  background: rgba(166,123,217,0.08);
  font-size: 12px;
}



body.site-home .portfolio-category-showcase {
  margin-top: 28px;
}

body.site-home .portfolio-category-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

body.site-home .portfolio-category-title {
  margin: 0;
  font-family: 'HunInnWeb', 'Huninn', 'jf open 粉圓 2.0', 'Microsoft JhengHei', sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  color: var(--text);
}

body.site-home .portfolio-category-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.site-home .portfolio-category-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(166,123,217,0.48);
  border-radius: 14px;
  background: rgba(15,16,22,0.78);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}

body.site-home .portfolio-category-arrow:hover:not(:disabled) {
  background: rgba(166,123,217,0.18);
  border-color: rgba(185,145,231,0.9);
  transform: translateY(-1px);
}

body.site-home .portfolio-category-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

body.site-home .portfolio-category-viewport {
  overflow: hidden;
}

body.site-home .portfolio-category-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 5);
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

body.site-home .portfolio-category-track::-webkit-scrollbar {
  display: none;
}

body.site-home .portfolio-category-item {
  min-height: 62px;
  padding: 14px 16px;
  border: 1px solid rgba(166,123,217,0.42);
  border-radius: 14px;
  background: rgba(16,18,24,0.78);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  scroll-snap-align: start;
}

@media (max-width: 960px) {
  body.site-home .portfolio-category-track {
    grid-auto-columns: calc((100% - 24px) / 3);
  }
}

@media (max-width: 640px) {
  body.site-home .portfolio-category-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  body.site-home .portfolio-category-controls {
    align-self: flex-end;
  }

  body.site-home .portfolio-category-track {
    grid-auto-columns: calc((100% - 12px) / 2);
  }

  body.site-home .portfolio-category-item {
    min-height: 58px;
    font-size: 15px;
    white-space: normal;
  }
}

body.site-home .portfolio-showcase-actions {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

body.site-home .portfolio-more-button {
  min-width: 270px;
  border-radius: 999px;
  background: rgba(12,13,18,0.70);
}

@media (max-width: 1180px) {
  body.site-home .portfolio-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.site-home .portfolio-preview-card,
  body.site-home .portfolio-preview-card > img {
    min-height: 430px;
  }
}

@media (max-width: 720px) {
  body.site-home .portfolio-showcase {
    padding: 66px 0 76px;
  }

  body.site-home .portfolio-showcase-inner {
    width: min(100% - 28px, 640px);
  }

  body.site-home .portfolio-showcase::before {
    background-position: 50% 30%;
    filter: saturate(0.68) brightness(0.30);
  }

  body.site-home .portfolio-preview-filters {
    gap: 9px;
    margin-top: 28px;
  }

  body.site-home .portfolio-preview-filters a {
    min-width: auto;
    padding: 9px 15px;
    font-size: 14px;
  }

  body.site-home .portfolio-preview-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.site-home .portfolio-preview-card,
  body.site-home .portfolio-preview-card > img {
    min-height: 430px;
  }

  body.site-home .portfolio-card-copy {
    padding: 22px 20px 20px;
  }
}


/* 2026-08-26 portfolio reference tabs */
body.site-home .portfolio-title-stroke{display:block;width:clamp(120px,14vw,210px);height:3px;margin:13px auto 0;border-radius:999px;background:linear-gradient(90deg,transparent,var(--primary) 16%,var(--primary-hover) 78%,transparent);transform:rotate(-4deg);opacity:.9}
body.site-home .portfolio-main-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:34px auto 30px}
body.site-home .portfolio-main-tabs button{min-width:112px;min-height:46px;padding:10px 20px;border:1px solid rgba(193,190,199,.42);border-radius:999px;background:rgba(14,15,20,.54);color:var(--text);font:inherit;font-weight:650;cursor:pointer;transition:.2s}
body.site-home .portfolio-main-tabs button:hover,body.site-home .portfolio-main-tabs button.active{border-color:var(--primary-hover);background:linear-gradient(180deg,rgba(166,123,217,.42),rgba(121,72,176,.32));box-shadow:0 0 22px rgba(166,123,217,.24),inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(-1px)}
body.site-home .portfolio-tab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;min-height:420px}
body.site-home .portfolio-tab-card{position:relative;display:block;min-height:420px;overflow:hidden;border:1px solid rgba(166,123,217,.54);border-radius:18px;background:#15181d;color:var(--text);text-decoration:none;box-shadow:0 18px 42px rgba(0,0,0,.20);transition:.2s}
body.site-home .portfolio-tab-card:hover{transform:translateY(-4px);border-color:rgba(185,145,231,.95);box-shadow:0 24px 50px rgba(0,0,0,.34),0 0 26px rgba(166,123,217,.10)}
body.site-home .portfolio-tab-card>img{width:100%;height:100%;min-height:420px;object-fit:cover}
body.site-home .portfolio-tab-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,0) 42%,rgba(8,9,12,.28) 60%,rgba(8,9,12,.96) 100%);pointer-events:none}
body.site-home .portfolio-tab-card-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:22px 22px 20px;background:linear-gradient(180deg,rgba(13,14,18,.05),rgba(13,14,18,.74) 32%,rgba(13,14,18,.96) 100%)}
body.site-home .portfolio-tab-card-copy h3{margin:0 0 7px;font-family:'HunInnWeb','Huninn','jf open 粉圓 2.0','Microsoft JhengHei',sans-serif;font-size:clamp(24px,2vw,31px);font-weight:700}
body.site-home .portfolio-tab-card-copy p{margin:0 0 14px;color:var(--text-secondary);font-size:14px;line-height:1.6}
body.site-home .portfolio-tab-card-copy span{display:inline-flex;padding:5px 10px;border:1px solid rgba(166,123,217,.48);border-radius:999px;color:#cfb6ef;background:rgba(166,123,217,.08);font-size:12px}
@media(max-width:1180px){body.site-home .portfolio-tab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body.site-home .portfolio-main-tabs{gap:9px;margin-top:28px}body.site-home .portfolio-main-tabs button{min-width:auto;padding:9px 15px;font-size:14px}body.site-home .portfolio-tab-grid{grid-template-columns:1fr;min-height:0}body.site-home .portfolio-tab-card,body.site-home .portfolio-tab-card>img{min-height:420px}}


/* 2026-08-26 portfolio cleanup: plain background, no decorative underline. */
body.site-home .portfolio-tabs-showcase,
body.site-home .portfolio-showcase {
  background: var(--bg) !important;
}

body.site-home .portfolio-tabs-showcase::before,
body.site-home .portfolio-tabs-showcase::after,
body.site-home .portfolio-showcase::before,
body.site-home .portfolio-showcase::after,
body.site-home .portfolio-title-stroke {
  display: none !important;
  content: none !important;
}

body.site-home .portfolio-showcase-heading h2 {
  margin-bottom: 22px;
}

body.site-home .portfolio-tab-grid.is-loading::before,
body.site-home .portfolio-tab-grid.is-empty::before {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed rgba(166,123,217,.32);
  border-radius: 18px;
  color: var(--text-muted);
  background: rgba(21,24,29,.36);
}
body.site-home .portfolio-tab-grid.is-loading::before { content: "載入作品中…"; }
body.site-home .portfolio-tab-grid.is-empty::before { content: "這個分類目前還沒有作品"; }

/* All inner-page buttons and links rise once, without a second press-scale or bounce. */
body:not(.landing-page) .button,
body:not(.landing-page) .inline-links a {
  animation: none;
  transform: none;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), background-color 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}

body:not(.landing-page) .button:hover,
body:not(.landing-page) .button:active,
body:not(.landing-page) .button:focus-visible,
body:not(.landing-page) .inline-links a:hover,
body:not(.landing-page) .inline-links a:active,
body:not(.landing-page) .inline-links a:focus-visible {
  animation: none;
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.landing-page) .button,
  body:not(.landing-page) .inline-links a {
    transition: none;
  }
  body:not(.landing-page) .button:hover,
  body:not(.landing-page) .button:active,
  body:not(.landing-page) .button:focus-visible,
  body:not(.landing-page) .inline-links a:hover,
  body:not(.landing-page) .inline-links a:active,
  body:not(.landing-page) .inline-links a:focus-visible {
    transform: none;
  }
}