/* 心隅 · INFJ 照片收藏馆


   视觉方向：暮色书斋 / 雾纸与鸢尾


   —— 安静、内省、少装饰，让照片自己说话 */





:root {


  --ink-forest: #1a221e;


  --ink-moss: #2c3832;


  --ink-soft: #4a5a52;


  --paper-mist: #e8ede7;


  --paper-light: #f4f6f2;


  --paper-deep: #d5ddd3;


  --iris: #7b6b8a;


  --iris-deep: #5c4d6b;


  --lamp: #c4a882;


  --lamp-soft: #e2d2b8;


  --line: rgba(44, 56, 50, 0.14);


  --line-strong: rgba(44, 56, 50, 0.22);


  --shadow-soft: 0 18px 48px rgba(26, 34, 30, 0.12);


  --shadow-deep: 0 28px 72px rgba(26, 34, 30, 0.22);


  --radius-s: 6px;


  --radius-m: 12px;


  --radius-l: 20px;


  --font-display: "Noto Serif SC", "Cormorant Garamond", Georgia, serif;


  --font-body: "Noto Sans SC", "Cormorant Garamond", system-ui, sans-serif;


  --font-latin: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;


  --max: 1120px;


  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);


}





*,


*::before,


*::after {


  box-sizing: border-box;


}





html {


  scroll-behavior: smooth;


}





body {


  margin: 0;


  color: var(--ink-moss);


  background:


    radial-gradient(1200px 600px at 10% -10%, rgba(123, 107, 138, 0.08), transparent 60%),


    radial-gradient(900px 500px at 100% 20%, rgba(196, 168, 130, 0.1), transparent 55%),


    var(--paper-mist);


  font-family: var(--font-body);


  font-weight: 400;


  line-height: 1.75;


  letter-spacing: 0.01em;


  -webkit-font-smoothing: antialiased;


  text-rendering: optimizeLegibility;


}





img {


  display: block;


  max-width: 100%;


}





a {


  color: inherit;


  text-decoration: none;


}





button,


input {


  font: inherit;


}





button {


  cursor: pointer;


}





.skip-link {


  position: absolute;


  left: 12px;


  top: -48px;


  z-index: 100;


  padding: 10px 14px;


  background: var(--ink-forest);


  color: var(--paper-light);


  border-radius: var(--radius-s);


}





.skip-link:focus {


  top: 12px;


}





/* Header */





.site-header {


  position: sticky;


  top: 0;


  z-index: 40;


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 24px;


  padding: 18px clamp(20px, 4vw, 48px);


  background: rgba(232, 237, 231, 0.86);


  backdrop-filter: blur(14px);


  border-bottom: 1px solid var(--line);


}





.brand {


  display: inline-flex;


  align-items: center;


  gap: 10px;


}





.brand-mark {


  width: 10px;


  height: 10px;


  border-radius: 50%;


  background: var(--iris);


  box-shadow: 0 0 0 4px rgba(123, 107, 138, 0.16);


}





.brand-text {


  font-family: var(--font-display);


  font-size: 1.25rem;


  font-weight: 600;


  letter-spacing: 0.12em;


}





.site-nav {


  display: flex;


  gap: 28px;


  color: var(--ink-soft);


  font-size: 0.95rem;


}





.site-nav a {


  position: relative;


  padding: 4px 0;


}





.site-nav a::after {


  content: "";


  position: absolute;


  left: 0;


  bottom: 0;


  width: 100%;


  height: 1px;


  background: var(--iris);


  transform: scaleX(0);


  transform-origin: left;


  transition: transform 0.35s var(--ease);


}





.site-nav a:hover::after,


.site-nav a:focus-visible::after {


  transform: scaleX(1);


}





.nav-upload {


  border: 1px solid var(--line-strong);


  background: transparent;


  color: var(--ink-moss);


  padding: 10px 16px;


  border-radius: 999px;


  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);


}





.nav-upload:hover,


.nav-upload:focus-visible {


  background: var(--ink-forest);


  border-color: var(--ink-forest);


  color: var(--paper-light);


}





/* Buttons */





.btn {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  min-height: 48px;


  padding: 0 22px;


  border-radius: 999px;


  border: 1px solid transparent;


  transition: transform 0.25s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);


}





.btn:hover {


  transform: translateY(-1px);


}





.btn:focus-visible,


.mood-chip:focus-visible,


.nav-upload:focus-visible,


.dialog-close:focus-visible,


.lightbox-close:focus-visible,


.dropzone:focus-visible,


.dropzone-change:focus-visible {


  outline: 2px solid var(--iris);


  outline-offset: 3px;


}





.btn-primary {


  background: var(--ink-forest);


  color: var(--paper-light);


  box-shadow: 0 12px 28px rgba(26, 34, 30, 0.18);


}





.btn-primary:hover {


  background: var(--iris-deep);


}





.btn-ghost {


  background: transparent;


  border-color: var(--line-strong);


  color: var(--ink-moss);


}





.btn-ghost:hover {


  border-color: var(--iris);


  color: var(--iris-deep);


}





/* Hero */





.hero {


  position: relative;


  min-height: 100vh;


  height: 100vh;


  display: grid;


  align-items: end;


  padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 48px) clamp(56px, 8vw, 88px);


  color: var(--paper-light);


  overflow: hidden;


}





.hero-media {


  position: absolute;


  inset: 0;


}





.hero-media img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  transform: scale(1.04);


  filter: saturate(0.85) contrast(1.02);


}





.hero-veil {


  position: absolute;


  inset: 0;


  background:


    linear-gradient(180deg, rgba(26, 34, 30, 0.28) 0%, rgba(26, 34, 30, 0.42) 45%, rgba(26, 34, 30, 0.78) 100%),


    linear-gradient(90deg, rgba(26, 34, 30, 0.55) 0%, rgba(26, 34, 30, 0.12) 58%, transparent 100%);


}





.hero-content {


  position: relative;


  z-index: 1;


  max-width: 680px;


}





.hero-kicker {


  margin: 0 0 18px;


  font-family: var(--font-latin);


  font-size: 1.05rem;


  letter-spacing: 0.18em;


  color: var(--lamp-soft);


}





.hero-title {


  margin: 0;


  font-family: var(--font-display);


  font-size: clamp(2.6rem, 7vw, 4.8rem);


  font-weight: 600;


  line-height: 1.18;


  letter-spacing: 0.04em;


}





.hero-title em {


  font-style: normal;


  color: var(--lamp-soft);


}





.hero-lead {


  margin: 28px 0 0;


  max-width: 34em;


  font-size: 1.08rem;


  line-height: 1.95;


  color: rgba(244, 246, 242, 0.88);


}





.hero-actions {


  display: flex;


  flex-wrap: wrap;


  gap: 14px;


  margin-top: 36px;


}





.hero .btn-ghost {


  border-color: rgba(244, 246, 242, 0.36);


  color: var(--paper-light);


}





.hero .btn-ghost:hover {


  border-color: var(--lamp-soft);


  color: var(--lamp-soft);


  background: rgba(244, 246, 242, 0.06);


}





.hero-scroll {


  position: absolute;


  right: clamp(20px, 4vw, 48px);


  bottom: 36px;


  z-index: 1;


  writing-mode: vertical-rl;


  letter-spacing: 0.28em;


  font-size: 0.82rem;


  color: rgba(244, 246, 242, 0.72);


}





/* Manifesto */





.manifesto {


  padding: clamp(72px, 12vw, 132px) clamp(20px, 4vw, 48px);


  background: var(--paper-light);


  border-bottom: 1px solid var(--line);


}





.manifesto blockquote {


  margin: 0 auto;


  max-width: 820px;


  text-align: center;


}





.manifesto p {


  margin: 0;


  font-family: var(--font-display);


  font-size: clamp(1.35rem, 3vw, 1.9rem);


  font-weight: 500;


  line-height: 1.9;


  letter-spacing: 0.06em;


  color: var(--ink-moss);


}





/* Gallery */





.gallery-section {


  padding: clamp(64px, 9vw, 112px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px);


}





.section-head {


  display: grid;


  grid-template-columns: 1.2fr 1fr;


  gap: 32px;


  align-items: end;


  max-width: var(--max);


  margin: 0 auto 36px;


}





.section-note {


  margin: 0 0 10px;


  font-family: var(--font-latin);


  font-size: 0.95rem;


  letter-spacing: 0.16em;


  color: var(--iris);


}





.section-head h2,


.upload-copy h2,


.about-section h2 {


  margin: 0;


  font-family: var(--font-display);


  font-size: clamp(1.9rem, 3.4vw, 2.7rem);


  font-weight: 600;


  letter-spacing: 0.04em;


  line-height: 1.35;


}





.section-desc {


  margin: 0;


  color: var(--ink-soft);


  max-width: 34em;


}





.mood-bar {


  display: flex;


  flex-wrap: wrap;


  gap: 10px;


  max-width: var(--max);


  margin: 0 auto 28px;


}





.mood-chip {


  border: 1px solid var(--line);


  background: rgba(244, 246, 242, 0.7);


  color: var(--ink-soft);


  padding: 9px 16px;


  border-radius: 999px;


  transition: all 0.28s var(--ease);


}





.mood-chip:hover {


  border-color: rgba(123, 107, 138, 0.4);


  color: var(--iris-deep);


}





.mood-chip.is-active {


  background: var(--ink-forest);


  border-color: var(--ink-forest);


  color: var(--paper-light);


}





.gallery-wall {


  columns: 3 280px;


  column-gap: 22px;


  max-width: var(--max);


  margin: 0 auto;


}





.photo-card {


  break-inside: avoid;


  margin: 0 0 22px;


  background: var(--paper-light);


  border: 1px solid var(--line);


  border-radius: var(--radius-m);


  overflow: hidden;


  box-shadow: var(--shadow-soft);


  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);


  cursor: zoom-in;


}





.photo-card:hover {


  transform: translateY(-4px);


  box-shadow: var(--shadow-deep);


}





.photo-card img {


  width: 100%;


  height: auto;


  vertical-align: middle;


}





.photo-card figcaption {


  padding: 16px 18px 18px;


}





.photo-caption {


  margin: 0;


  font-family: var(--font-display);


  font-size: 1.02rem;


  line-height: 1.7;


  color: var(--ink-moss);


}





.photo-meta {


  margin: 10px 0 0;


  display: flex;


  flex-wrap: wrap;


  gap: 8px 12px;


  font-size: 0.82rem;


  color: var(--ink-soft);


}





.mood-tag {


  display: inline-flex;


  align-items: center;


  padding: 3px 10px;


  border-radius: 999px;


  background: rgba(123, 107, 138, 0.12);


  color: var(--iris-deep);


}





.gallery-empty {


  max-width: var(--max);


  margin: 24px auto 0;


  padding: 36px;


  text-align: center;


  color: var(--ink-soft);


  border: 1px dashed var(--line-strong);


  border-radius: var(--radius-m);


}





/* Upload */





.upload-section {


  padding: clamp(40px, 7vw, 88px) clamp(20px, 4vw, 48px);


}





.upload-panel {


  max-width: var(--max);


  margin: 0 auto;


  display: grid;


  grid-template-columns: 1.05fr 0.95fr;


  gap: clamp(28px, 5vw, 56px);


  align-items: center;


  padding: clamp(28px, 4vw, 48px);


  background:


    linear-gradient(145deg, rgba(123, 107, 138, 0.08), transparent 45%),


    var(--paper-light);


  border: 1px solid var(--line);


  border-radius: var(--radius-l);


  box-shadow: var(--shadow-soft);


}





.upload-copy p {


  color: var(--ink-soft);


  max-width: 36em;


}





.upload-tips {


  margin: 22px 0 28px;


  padding: 0;


  list-style: none;


  color: var(--ink-soft);


}





.upload-tips li {


  position: relative;


  padding-left: 18px;


  margin-bottom: 8px;


}





.upload-tips li::before {


  content: "";


  position: absolute;


  left: 0;


  top: 0.75em;


  width: 6px;


  height: 6px;


  border-radius: 50%;


  background: var(--lamp);


}





.upload-visual {


  margin: 0;


}





.upload-visual img {


  width: 100%;


  border-radius: var(--radius-m);


  box-shadow: var(--shadow-soft);


}





.upload-visual figcaption {


  margin-top: 14px;


  font-family: var(--font-display);


  color: var(--ink-soft);


  font-size: 0.98rem;


  letter-spacing: 0.04em;


}





/* About */





.about-section {


  padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 48px) clamp(72px, 10vw, 120px);


  background: var(--ink-forest);


  color: var(--paper-mist);


}





.about-grid {


  max-width: var(--max);


  margin: 0 auto;


  display: grid;


  grid-template-columns: 0.9fr 1.1fr;


  gap: clamp(28px, 5vw, 64px);


}





.about-section .section-note {


  color: var(--lamp-soft);


}





.about-section h2 {


  color: var(--paper-light);


}





.about-body p {


  margin: 0 0 1.15em;


  color: rgba(232, 237, 231, 0.86);


  max-width: 40em;


  line-height: 1.95;


}





.about-note {


  margin-top: 28px;


  padding: 22px 24px;


  border: 1px solid rgba(196, 168, 130, 0.28);


  border-radius: var(--radius-m);


  background: rgba(196, 168, 130, 0.08);


}





.about-note strong {


  display: block;


  margin-bottom: 10px;


  color: var(--lamp-soft);


  font-weight: 500;


  letter-spacing: 0.04em;


}





.about-note p {


  margin: 0;


  color: rgba(232, 237, 231, 0.78);


  font-size: 0.95rem;


}





/* Footer */





.site-footer {


  background: #121815;


  color: rgba(232, 237, 231, 0.72);


  padding: 36px clamp(20px, 4vw, 48px);


}





.footer-inner {


  max-width: var(--max);


  margin: 0 auto;


  display: flex;


  justify-content: space-between;


  gap: 20px;


  flex-wrap: wrap;


}





.footer-brand {


  margin: 0;


  font-family: var(--font-display);


  font-size: 1.15rem;


  letter-spacing: 0.16em;


  color: var(--paper-light);


}





.footer-tag,


.footer-meta {


  margin: 8px 0 0;


  font-size: 0.9rem;


}





/* Dialog */





.dialog-root {


  position: fixed;


  inset: 0;


  z-index: 80;


  display: grid;


  place-items: center;


  padding: 20px;


}





[hidden],


.dialog-root[hidden],


.lightbox[hidden],


.toast[hidden],


.gallery-empty[hidden] {


  display: none !important;


}





.dialog-backdrop {


  position: absolute;


  inset: 0;


  background: rgba(18, 24, 21, 0.58);


  backdrop-filter: blur(8px);


}





.dialog {


  position: relative;


  width: min(560px, 100%);


  max-height: min(92vh, 900px);


  overflow: auto;


  padding: 32px 28px 28px;


  background: var(--paper-light);


  border: 1px solid var(--line);


  border-radius: var(--radius-l);


  box-shadow: var(--shadow-deep);


}





.dialog-wide { width: min(900px, 100%); }


.moderation-list { display: grid; gap: 16px; margin-top: 18px; }


.moderation-card {


  display: grid;


  grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);


  gap: 18px;


  padding: 14px;


  border: 1px solid var(--line);


  border-radius: var(--radius-m);


  background: var(--paper-mist);


}


.moderation-media {


  display: grid;


  place-items: center;


  min-height: 160px;


  overflow: hidden;


  border-radius: var(--radius-s);


  background: var(--ink-forest);


}


.moderation-media img, .moderation-media video {


  display: block;


  max-width: 100%;


  max-height: 260px;


}


.moderation-detail { min-width: 0; }


.moderation-label, .moderation-meta { color: var(--ink-soft); font-size: .9rem; }


.moderation-caption { overflow-wrap: anywhere; line-height: 1.6; }


.moderation-missing { color: var(--paper-light); }


.moderation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }





@media (max-width: 600px) {


  .moderation-card { grid-template-columns: 1fr; }


  .moderation-media { min-height: 120px; }


}





.dialog-close,


.lightbox-close {


  position: absolute;


  top: 14px;


  right: 16px;


  width: 38px;


  height: 38px;


  border: none;


  border-radius: 50%;


  background: transparent;


  color: var(--ink-soft);


  font-size: 1.5rem;


  line-height: 1;


}





.dialog h2 {


  margin: 0 40px 8px 0;


  font-family: var(--font-display);


  font-size: 1.7rem;


  letter-spacing: 0.04em;


}





.dialog-lead {


  margin: 0 0 22px;


  color: var(--ink-soft);


}





.dropzone {


  position: relative;


  display: grid;


  place-items: center;


  min-height: 220px;


  border: 1px dashed var(--line-strong);


  border-radius: var(--radius-m);


  background: rgba(232, 237, 231, 0.55);


  overflow: hidden;


  cursor: pointer;


  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);


}





.dropzone.is-dragover {


  border-color: var(--iris);


  background: rgba(123, 107, 138, 0.1);


}





.dropzone-inner {


  text-align: center;


  padding: 28px 18px;


}





.dropzone-title {


  margin: 0;


  font-family: var(--font-display);


  font-size: 1.15rem;


}





.dropzone-hint {


  margin: 8px 0 0;


  color: var(--ink-soft);


  font-size: 0.9rem;


}





.dropzone img {


  width: 100%;


  max-height: 320px;


  object-fit: contain;


  background: var(--ink-forest);


}





.dropzone-change {


  position: absolute;


  right: 12px;


  bottom: 12px;


  border: 1px solid rgba(244, 246, 242, 0.35);


  background: rgba(26, 34, 30, 0.72);


  color: var(--paper-light);


  border-radius: 999px;


  padding: 8px 14px;


}





.field {


  display: block;


  margin-top: 18px;


}





.field > span,


.mood-field legend {


  display: block;


  margin-bottom: 8px;


  color: var(--ink-soft);


  font-size: 0.92rem;


}





.field input[type="text"] {


  width: 100%;


  min-height: 46px;


  padding: 10px 14px;


  border: 1px solid var(--line-strong);


  border-radius: var(--radius-s);


  background: var(--paper-mist);


  color: var(--ink-moss);


}





.field input[type="text"]:focus {


  outline: 2px solid rgba(123, 107, 138, 0.45);


  outline-offset: 1px;


  border-color: var(--iris);


}





.mood-field {


  margin: 18px 0 0;


  padding: 0;


  border: none;


}





.mood-options {


  display: flex;


  flex-wrap: wrap;


  gap: 8px;


}





.mood-options label {


  cursor: pointer;


}





.mood-options input {


  position: absolute;


  opacity: 0;


  pointer-events: none;


}





.mood-options span {


  display: inline-flex;


  padding: 8px 14px;


  border: 1px solid var(--line);


  border-radius: 999px;


  color: var(--ink-soft);


  background: var(--paper-mist);


  transition: all 0.25s var(--ease);


}





.mood-options input:checked + span {


  background: var(--iris);


  border-color: var(--iris);


  color: var(--paper-light);


}





.mood-options input:focus-visible + span {


  outline: 2px solid var(--iris);


  outline-offset: 2px;


}





.form-error {


  margin: 14px 0 0;


  color: #8b3d4a;


  font-size: 0.92rem;


}





.dialog-actions {


  display: flex;


  justify-content: flex-end;


  gap: 12px;


  margin-top: 26px;


}





/* Lightbox */





.lightbox {


  position: fixed;


  inset: 0;


  z-index: 90;


  display: grid;


  place-items: center;


  padding: 28px;


  background: rgba(18, 24, 21, 0.82);


  backdrop-filter: blur(10px);


}





.lightbox-close {


  color: var(--paper-light);


  top: 18px;


  right: 22px;


}





.lightbox-figure {


  margin: 0;


  width: min(920px, 100%);


  max-height: 90vh;


  overflow: auto;


}





.lightbox-figure img {


  width: 100%;


  max-height: 72vh;


  object-fit: contain;


  border-radius: var(--radius-m);


  background: #0f1412;


}





.lightbox-figure figcaption {


  margin-top: 16px;


  color: var(--paper-mist);


}





#lightbox-caption {


  margin: 0;


  font-family: var(--font-display);


  font-size: 1.15rem;


  line-height: 1.8;


}





#lightbox-meta {


  margin: 8px 0 0;


  color: rgba(232, 237, 231, 0.7);


  font-size: 0.9rem;


}





/* Toast */





.toast {


  position: fixed;


  left: 50%;


  bottom: 28px;


  transform: translateX(-50%);


  z-index: 100;


  padding: 14px 22px;


  border-radius: 999px;


  background: var(--ink-forest);


  color: var(--paper-light);


  box-shadow: var(--shadow-deep);


  font-size: 0.95rem;


}





/* Reduced motion */





@media (prefers-reduced-motion: reduce) {


  html {


    scroll-behavior: auto;


  }





  *,


  *::before,


  *::after {


    animation: none !important;


    transition: none !important;


  }


}





/* Responsive */





@media (max-width: 860px) {


  .site-nav {


    display: none;


  }





  .section-head,


  .upload-panel,


  .about-grid {


    grid-template-columns: 1fr;


  }





  .hero-scroll {


    display: none;


  }





  .gallery-wall {


    columns: 2 180px;


    column-gap: 14px;


  }





  .photo-card {


    margin-bottom: 14px;


  }





  .photo-card figcaption {


    padding: 12px 12px 14px;


  }





  .photo-caption {


    font-size: 0.95rem;


  }


}





@media (max-width: 520px) {


  .hero-title {


    font-size: clamp(2.2rem, 11vw, 3rem);


  }





  .hero-actions {


    flex-direction: column;


    align-items: stretch;


  }





  .btn {


    width: 100%;


  }





  .gallery-wall {


    columns: 1;


  }





  .dialog {


    padding: 26px 18px 20px;


  }





  .dialog-actions {


    flex-direction: column-reverse;


  }


}





/* Auth + Feedback */


.header-auth { display: flex; gap: 10px; }


.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }


.dialog-narrow { width: min(420px, 100%); }


.auth-tabs { display: flex; gap: 8px; margin: 0 0 8px; }


.feedback-section {


  padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 48px);


  background: var(--paper-light);


  border-top: 1px solid var(--line);


}


.feedback-panel {


  max-width: 720px;


  margin: 0 auto;


}


.feedback-panel h2 {


  margin: 0 0 12px;


  font-family: var(--font-display);


  font-size: clamp(1.8rem, 3vw, 2.4rem);


}


.feedback-panel p { color: var(--ink-soft); }


.feedback-form textarea {


  width: 100%;


  min-height: 120px;


  padding: 12px 14px;


  border: 1px solid var(--line-strong);


  border-radius: var(--radius-s);


  background: var(--paper-mist);


  color: var(--ink-moss);


  font: inherit;


  resize: vertical;


}


.feedback-form textarea:focus {


  outline: 2px solid rgba(123, 107, 138, 0.45);


  border-color: var(--iris);


}


.feedback-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }


.feedback-status { margin: 14px 0 0; color: var(--iris-deep); }








/* Video and lightbox */


.photo-card video {


  width: 100%;


  display: block;


  background: #111;


  border-radius: 4px 4px 0 0;


}


.lightbox-stage {


  width: 100%;


  max-height: 72vh;


  overflow: hidden;


  background: #0f1412;


  border-radius: var(--radius-m);


  display: grid;


  place-items: center;


}


.lightbox-stage img {


  max-width: 100%;


  max-height: 72vh;


  object-fit: contain;


  transform-origin: center center;


  cursor: grab;


  user-select: none;


}


.lightbox-stage video {


  width: 100%;


  max-height: 72vh;


  background: #000;


}


.lightbox-zoom {


  position: absolute;


  top: 18px;


  left: 18px;


  display: flex;


  gap: 8px;


  z-index: 2;


}


.zoom-btn {


  width: 40px;


  height: 40px;


  border-radius: 999px;


  border: 1px solid rgba(255,255,255,0.35);


  background: rgba(20,28,24,0.65);


  color: #f4f6f2;


  font-size: 1.1rem;


  line-height: 1;


}








/* home / content transition */


body.mode-home {


  overflow: hidden;


  height: 100vh;


  background: var(--ink-forest);


}


body.mode-home .site-header {


  position: fixed;


  background: transparent;


  border-bottom-color: transparent;


  backdrop-filter: none;


}


body.mode-home .site-header .brand-text,


body.mode-home .site-nav a {


  color: rgba(244, 246, 242, 0.94);


  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);


}


body.mode-home .header-auth .btn {


  color: var(--paper-light);


  border-color: rgba(244, 246, 242, 0.28);


  background: rgba(26, 34, 30, 0.18);


}


.hero {


  min-height: 100vh;


  height: 100vh;


}


.view-pane {


  transition:


    opacity 1.15s cubic-bezier(0.25, 0.1, 0.25, 1),


    transform 1.15s cubic-bezier(0.25, 0.1, 0.25, 1),


    filter 1.15s ease,


    clip-path 1.15s cubic-bezier(0.25, 0.1, 0.25, 1);


}


.view-pane.is-leaving {


  opacity: 0;


  transform: scale(1.01);


  filter: blur(3px);


  clip-path: inset(0 0 0 0);


  pointer-events: none;


}


.view-pane.is-entering {


  opacity: 0;


  transform: translateY(-2.5%);


  filter: blur(2px);


  clip-path: inset(0 0 100% 0);


}


.content-pane {


  min-height: 100vh;


}


.hero-scroll {


  position: absolute;


  right: clamp(18px, 3vw, 40px);


  bottom: 28px;


  z-index: 2;


  writing-mode: vertical-rl;


  letter-spacing: 0.32em;


  font-size: 0.78rem;


  color: rgba(244, 246, 242, 0.55);


  background: none;


  border: none;


  cursor: pointer;


  padding: 8px 4px;


  transition: color 0.35s ease;


}


.hero-scroll:hover {


  color: rgba(244, 246, 242, 0.9);


}





/* ��ҳ�������� */


body.mode-home .site-header {


  display: grid;


  grid-template-columns: 1fr auto 1fr;


  align-items: center;


}


body.mode-home .site-nav {


  justify-self: center;


}


body.mode-home .brand {


  justify-self: start;


}


body.mode-home .header-auth {


  justify-self: end;


}








/* 修复：导航真居中 + 首页无白边 */


html {


  margin: 0;


  padding: 0;


  background: var(--ink-forest);


}


body {


  margin: 0;


  padding: 0;


}


body.mode-home {


  height: 100vh;


  height: 100dvh;


  min-height: 100vh;


  min-height: 100dvh;


  overflow: hidden;


  background: var(--ink-forest);


}


body.mode-home .hero {


  height: 100vh;


  height: 100dvh;


  min-height: 100vh;


  min-height: 100dvh;


  margin: 0;


}


body.mode-home .site-header {


  display: flex;


  align-items: center;


  justify-content: flex-start;


  background: transparent;


}


body.mode-home .site-nav {


  position: absolute;


  left: 50%;


  transform: translateX(-50%);


  justify-content: center;


}


body.mode-home .header-auth {


  margin-left: auto;


}





body.mode-home .site-header {


  position: fixed;


  left: 0;


  right: 0;


}






/* 模块级分批显现 */

.reveal-module {

  opacity: 0;

  transform: translateY(28px);

  filter: blur(3px);

}

.reveal-module.is-shown {

  opacity: 1;

  transform: translateY(0);

  filter: blur(0);

  transition:

    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),

    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),

    filter 0.9s ease;

}

.view-pane.is-active .reveal-module.is-shown {

  transition-delay: var(--reveal-delay, 0ms);

}

/* 模块级分批显现（关键帧，更稳） */
@keyframes moduleIn {
  from {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.reveal-module {
  opacity: 0 !important;
}
.reveal-module.is-shown {
  opacity: 1 !important;
  animation: moduleIn 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--reveal-delay, 0ms) !important;
}