:root {
  --bg: #0f1117;
  --bg-soft: #171a23;
  --card: #1c2030;
  --text: #e7e9ee;
  --muted: #9aa1b0;
  --accent: #d8a657;
  --accent-2: #c98a3b;
  --border: #2a2f40;
  --content: 780px;   /* the content column: all buttons & text live within this,
                          centered; only background images go full-bleed */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }

/* Content column: one width everywhere, centered. */
.container-narrow { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------------------
   Floating glass nav pill (over the hero on home, over the dark bg on inner)
--------------------------------------------------------------------------- */
.site-header {
  position: absolute; top: 22px; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center;
  pointer-events: none; /* only the pill is interactive */
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 28px;
  padding: 10px 12px 10px 22px;
  background: rgba(18, 20, 28, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  max-width: calc(100vw - 32px);
}
.main-nav { display: flex; gap: 26px; }
.main-nav a { color: rgba(231, 233, 238, 0.82); font-size: 15px; transition: color .15s; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.nav-cta {
  padding: 8px 20px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; font-size: 14px;
  transition: all .15s;
}
.nav-cta:hover { background: #fff; color: #14161c; border-color: #fff; }

/* Inner pages have no full-bleed hero behind the floating header → pad content. */
.is-inner .site-main { padding-top: 116px; }
/* Nav hidden: no floating header to clear, so a small top gap matching the
   column's 24px side inset. */
.is-inner.nav-hidden .site-main { padding-top: 24px; }
/* Inner-page sections don't add their own top padding — the back button then
   sits at a single consistent offset (matches the showcase return button). */
.is-inner .section { padding-top: 0; }

/* ---------------------------------------------------------------------------
   Full-bleed hero (home)
--------------------------------------------------------------------------- */
.hero-full {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #0f1117;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
}
/* Background lives on its own layer so it can pan (touch) without moving the
   content. The image is 240px wider than the hero on each side, so it can slide
   up to ~200px horizontally while still covering the viewport. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0f1117; }
.hero-bg-img {
  position: absolute; top: 0; left: -240px; height: 100%;
  width: calc(100% + 480px); object-fit: cover; object-position: center;
  will-change: transform; transform: translateZ(0); backface-visibility: hidden;
  /* Kill the browser's native image drag (ghost image) and selection. */
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
.hero-stage { position: relative; z-index: 1; max-width: var(--content); }
.hero-logo { margin: 0; line-height: 0; }
.hero-logo img {
  height: clamp(260px, 46vh, 340px);
  width: auto; display: inline-block;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
/* Two side-by-side action buttons, 50px below the logo. */
.hero-actions { margin-top: 80px; display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px; border-radius: 999px;
  background: rgba(18, 20, 28, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; font-size: 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .18s, border-color .18s, transform .12s ease-out;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.hero-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.95); }
/* Disabled look: greyed out, but the slide motion is kept. */
.hero-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.hero-btn.is-disabled:hover { background: rgba(18, 20, 28, 0.4); border-color: rgba(255, 255, 255, 0.55); }
/* Icon inherits the button text color via mask + currentColor. */
.btn-icon {
  width: 20px; height: 20px; flex: none; background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-preview { --icon: url('/static/images/icon-preview.svg'); }
.icon-video { --icon: url('/static/images/icon-video.svg'); }
.scroll-hint {
  position: absolute; z-index: 1; bottom: 26px; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 13px; letter-spacing: 1px;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------------------------------------------------------------------------
   Style-showcase panel (slides up from the bottom over a black backdrop)
--------------------------------------------------------------------------- */
/* Backdrop: black, fades in/out (does not slide). */
.showcase {
  position: fixed; inset: 0; z-index: 50;
  background: #000;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.showcase.is-open { opacity: 1; visibility: visible; }
/* Content layer: slides up from the bottom (over the fading backdrop). */
.showcase-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.showcase.is-open .showcase-inner { transform: translateY(0); }
.showcase-bar {
  flex: none; padding: 24px 0 16px;
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.showcase-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 0;
}
/* Images live in the same 780px content column as everything else. */
.showcase-list { display: flex; flex-direction: column; gap: 24px; }
.showcase-item { margin: 0; width: 100%; }
.showcase-item img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  -webkit-user-drag: none; user-select: none;
}
.showcase-item img { cursor: zoom-in; }
/* Lock background scroll while the panel is open. */
body.showcase-open { overflow: hidden; }

/* Image viewer (lightbox): centered image at 98% width, nav 20px below. */
.lightbox {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(0, 0, 0, 0.95);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
/* Top row: close button, left-aligned to the image, 20px above it. */
.lightbox-head { width: 98%; max-width: 98%; margin-bottom: 20px; display: flex; }
.lightbox-img {
  width: 98%; max-width: 98%; height: auto; max-height: calc(100% - 140px);
  object-fit: contain; display: block; border-radius: 4px;
  -webkit-user-drag: none; user-select: none;
}
.lightbox-nav { margin-top: 20px; display: flex; align-items: center; gap: 24px; }
.lightbox-count { color: #fff; font-size: 14px; min-width: 48px; text-align: center; }
.lightbox .btn[disabled] { opacity: .4; cursor: not-allowed; }
/* Limited height: let the image fill; pin close to top, nav to bottom (overlay). */
@media (max-height: 480px) {
  .lightbox { justify-content: flex-start; }
  .lightbox-img { max-height: 100%; }
  .lightbox-head {
    position: absolute; top: 8px; left: 1%; z-index: 1; width: auto; margin: 0;
  }
  .lightbox-nav {
    position: absolute; left: 0; right: 0; bottom: 8px; margin-top: 0;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   Sections / lists / article
--------------------------------------------------------------------------- */
.section { padding: 64px 24px; }
.narrow { } /* legacy hook, width handled by .container-narrow */
.center { text-align: center; }
.more-wrap { margin-top: 32px; text-align: center; }
.page-back { margin-bottom: 22px; }
.page-title { font-size: 32px; margin: 0 0 28px; }
.empty { color: var(--muted); }

.post-list { list-style: none; padding: 0; margin: 0; }
.post-item { border-bottom: 1px solid var(--border); }
.post-item a { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 22px 0; }
.post-item:hover h2, .post-item:hover h3 { color: var(--accent); }
.post-item h2, .post-item h3 { font-size: 19px; margin: 0 0 6px; transition: color .15s; font-weight: 600; }
.post-item-summary { color: var(--muted); font-size: 14px; margin: 0; }
.post-item-meta { text-align: right; color: #6b7280; font-size: 13px; white-space: nowrap; }

.tag { display: inline-block; padding: 2px 10px; background: rgba(216,166,87,.12);
  color: var(--accent); border-radius: 999px; font-size: 12px; margin-right: 8px; }

.article { padding-bottom: 48px; }
.breadcrumb { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--accent); }
.article-head h1 { font-size: 32px; margin: 0 0 12px; }
.article-meta { color: #6b7280; font-size: 13px; margin-bottom: 24px; }
.article-cover { margin: 0 0 28px; }
.article-cover img { width: 100%; border-radius: 10px; }
.article-body { font-size: 16px; }
.article-body p { margin: 0 0 18px; }
.article-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }

.about-social { margin-top: 48px; }
.about-social h2 { font-size: 22px; }
.social-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Buttons (generic, used on inner pages) */
.btn {
  display: inline-block; padding: 10px 22px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 15px; cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--accent); }
/* Back arrow icon inside a .btn — sized to the text, colored with currentColor. */
.ico-back {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 6px;
  background-color: currentColor;
  -webkit-mask: url('/static/images/icon-back.svg') center / contain no-repeat;
  mask: url('/static/images/icon-back.svg') center / contain no-repeat;
}
.btn-primary { background: var(--accent); color: #1a1206; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 64px; background: var(--bg-soft); }
/* Centered cluster: copyright (right-aligned) | divider | logo */
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 24px; padding: 32px 24px; }
.footer-divider { width: 1px; height: 40px; background: var(--border); }
.footer-brand { justify-self: end; display: flex; align-items: center; }
.footer-brand img { width: 140px; max-width: 40vw; height: auto; display: block; opacity: .9; }
.footer-meta { justify-self: start; color: var(--muted); font-size: 12px; text-align: left;
  line-height: 1.45; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.footer-meta a { color: var(--muted); }
.footer-meta a:hover { color: var(--accent); }

/* Responsive: content already centered + cropped; just tighten the nav. */
@media (max-width: 640px) {
  .nav-pill { gap: 14px; padding: 9px 10px 9px 16px; }
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 14px; }
  .nav-cta { padding: 7px 14px; font-size: 13px; }
  .post-item a { flex-direction: column; align-items: flex-start; gap: 8px; }
  .post-item-meta { text-align: left; }
}

html:lang(ja) body { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.hero-actions { flex-wrap: wrap; }

/* The international wordmark is horizontal; preserve its original proportions. */
.hero-logo img[src="/static/images/suiye-english.svg"] {
  width: min(560px, 82vw);
  height: auto;
}