/* ============================================
   墨白 · Ink & Void
   觉然轩 · Jarenson 创意工作室
   ============================================ */

/* --- 变量 --- */
:root{
  --paper:        #F7F4EF;
  --paper-deep:   #EFEAE1;
  --paper-warm:   #FBF9F5;
  --ink:          #161514;
  --ink-soft:     #3A3735;
  --ash:          #8A8580;
  --cinnabar:     #B5443A;
  --line:         rgba(22,21,20,.12);
  --line-soft:    rgba(22,21,20,.07);

  --serif: 'Songti SC','STSong','SimSun','Noto Serif SC','Source Han Serif SC',Georgia,serif;
  --sans:  -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1240px;
}

/* --- 基础重置 --- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  font-weight:300;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,blockquote,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }

::selection{
  background:var(--cinnabar);
  color:var(--paper);
}

:focus-visible{
  outline:2px solid var(--cinnabar);
  outline-offset:4px;
}

/* --- 布局容器 --- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
}
.container--narrow{ max-width:820px; }

/* --- 滚动显影（觉然：从虚空显影） --- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal[data-delay="1"]{ transition-delay:.10s; }
.reveal[data-delay="2"]{ transition-delay:.20s; }
.reveal[data-delay="3"]{ transition-delay:.30s; }
.reveal[data-delay="4"]{ transition-delay:.40s; }
.reveal[data-delay="5"]{ transition-delay:.50s; }
.reveal[data-delay="6"]{ transition-delay:.60s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================
   顶部导航
   ============================================ */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:26px 0;
}
.nav.is-scrolled{
  background:rgba(247,244,239,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-soft);
  padding:16px 0;
}
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.nav__brand{ display:flex; align-items:baseline; gap:12px; }
.nav__brand-cn{
  font-family:var(--serif);
  font-size:21px;
  font-weight:400;
  letter-spacing:.22em;
}
.nav__brand-en{
  font-size:11px;
  letter-spacing:.34em;
  color:var(--ash);
  text-transform:uppercase;
}
.nav__links{ display:flex; align-items:center; gap:38px; }
.nav__links a{
  font-size:13px;
  letter-spacing:.16em;
  color:var(--ink-soft);
  position:relative;
  padding-bottom:3px;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--cinnabar);
  transition:width .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:1px solid var(--line);
  padding:9px 22px !important;
  border-radius:999px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease) !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{
  background:var(--ink);
  color:var(--paper) !important;
  border-color:var(--ink) !important;
}

/* ============================================
   全屏 Hero
   ============================================ */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 40px 100px;
  overflow:hidden;
}
/* 宣纸肌理 */
.hero__grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(22,21,20,.045) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 72%, rgba(22,21,20,.035) 0 1px, transparent 1px);
  background-size:7px 7px, 11px 11px;
}
/* 朱砂呼吸点 */
.hero::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:720px; height:720px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(181,68,58,.055) 0%, transparent 66%);
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; max-width:900px; }

.hero__eyebrow{
  font-size:11px;
  letter-spacing:.42em;
  color:var(--ash);
  text-transform:uppercase;
  margin-bottom:44px;
}
.hero__title{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:22px;
  font-family:var(--serif);
  font-weight:400;
  line-height:1.15;
}
.hero__cn{
  font-size:clamp(52px, 9vw, 108px);
  letter-spacing:.16em;
  text-indent:.16em;
}
.hero__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--cinnabar);
  flex:none;
  margin:0 4px;
}
.hero__en{
  font-family:var(--sans);
  font-size:clamp(15px, 2vw, 22px);
  font-weight:200;
  letter-spacing:.42em;
  color:var(--ash);
  text-indent:.42em;
}
.hero__slogan{
  font-family:var(--serif);
  font-size:clamp(17px, 2.2vw, 24px);
  letter-spacing:.3em;
  text-indent:.3em;
  color:var(--ink-soft);
  margin-top:38px;
}
.hero__desc{
  font-size:15px;
  line-height:2.15;
  color:var(--ash);
  margin-top:30px;
  letter-spacing:.06em;
}
.hero__actions{
  margin-top:52px;
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}

/* 按钮 */
.btn{
  display:inline-block;
  font-size:13px;
  letter-spacing:.18em;
  text-indent:.18em;
  padding:15px 40px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  font-family:var(--sans);
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease);
}
.btn--solid{
  background:var(--ink);
  color:var(--paper);
}
.btn--solid:hover{
  background:var(--cinnabar);
  transform:translateY(-2px);
}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
}
.btn--block{ width:100%; }

/* 滚动提示 */
.hero__scroll{
  position:absolute;
  left:50%; bottom:44px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  z-index:2;
}
.hero__scroll-line{
  width:1px; height:52px;
  background:linear-gradient(to bottom, var(--line), transparent);
  position:relative;
  overflow:hidden;
}
.hero__scroll-line::after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:1px; height:18px;
  background:var(--cinnabar);
  animation:scrollDown 2.4s var(--ease) infinite;
}
@keyframes scrollDown{
  0%   { transform:translateY(-20px); opacity:0; }
  40%  { opacity:1; }
  100% { transform:translateY(52px); opacity:0; }
}
.hero__scroll-text{
  font-size:10px;
  letter-spacing:.3em;
  text-indent:.3em;
  color:var(--ash);
}

/* ============================================
   品牌宣言
   ============================================ */
.section-label{
  font-size:11px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--cinnabar);
  margin-bottom:26px;
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(30px, 4.4vw, 50px);
  font-weight:400;
  letter-spacing:.14em;
  text-indent:.14em;
  margin-bottom:22px;
}
.section-sub{
  font-size:14px;
  color:var(--ash);
  letter-spacing:.1em;
  margin-bottom:60px;
}

.manifesto{
  padding:150px 0;
  background:var(--paper-warm);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  text-align:center;
}
.manifesto__text{
  font-family:var(--serif);
  font-size:clamp(19px, 2.9vw, 34px);
  line-height:2.25;
  letter-spacing:.1em;
  color:var(--ink);
  font-weight:400;
  max-width:800px;
  margin:0 auto;
}
.manifesto__text em{
  font-style:normal;
  color:var(--cinnabar);
}
.manifesto__meta{
  display:flex;
  justify-content:center;
  gap:90px;
  margin-top:80px;
  flex-wrap:wrap;
}
.meta-item{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.meta-num{
  font-family:var(--serif);
  font-size:42px;
  font-weight:400;
  letter-spacing:.06em;
  line-height:1;
}
.meta-label{
  font-size:11px;
  letter-spacing:.24em;
  text-indent:.24em;
  color:var(--ash);
}

/* ============================================
   服务
   ============================================ */
.services{ padding:150px 0; }
.service-list{
  margin-top:70px;
  border-top:1px solid var(--line);
}
.service-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:40px;
  padding:52px 0;
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease), padding-left .5s var(--ease);
}
.service-item:hover{
  background:var(--paper-warm);
  padding-left:22px;
}
.service-num{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.2em;
  color:var(--cinnabar);
  padding-top:8px;
}
.service-name{
  font-family:var(--serif);
  font-size:clamp(22px, 2.7vw, 30px);
  font-weight:400;
  letter-spacing:.12em;
  margin-bottom:16px;
}
.service-desc{
  font-size:15px;
  line-height:2.1;
  color:var(--ink-soft);
  max-width:640px;
  letter-spacing:.04em;
}
.service-tags{
  display:flex;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap;
}
.service-tags li{
  font-size:11px;
  letter-spacing:.16em;
  text-indent:.16em;
  color:var(--ash);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 16px;
}

/* ============================================
   作品画廊
   ============================================ */
.works{
  padding:150px 0;
  background:var(--paper-warm);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px;
}

.work{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line-soft);
  aspect-ratio:4 / 3;
  cursor:pointer;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.work:hover,
.work:focus-visible,
.work.is-open{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(22,21,20,.13);
}

/* 抽象视觉 */
.work__visual{
  position:absolute;
  inset:0;
  overflow:hidden;
  transition:transform .9s var(--ease), filter .9s var(--ease);
}
.work:hover .work__visual,
.work:focus-visible .work__visual,
.work.is-open .work__visual{
  transform:scale(1.06);
  filter:blur(2px) brightness(.55);
}
.work__visual--1{ background:linear-gradient(150deg,#E8E2D6 0%,#F2EDE3 55%,#DFD7C9 100%); }
.work__visual--2{ background:linear-gradient(140deg,#DEDCD7 0%,#EDEAE4 60%,#C9C6C0 100%); }
.work__visual--3{ background:linear-gradient(160deg,#D9D4CC 0%,#EAE5DC 50%,#BFB9AF 100%); }
.work__visual--4{ background:linear-gradient(135deg,#F1EEE7 0%,#FBF9F5 55%,#E2DED5 100%); }
.work__visual--5{ background:linear-gradient(155deg,#DCE0DA 0%,#EDEFE9 55%,#C2C8C1 100%); }
.work__visual--6{ background:linear-gradient(145deg,#E4DED9 0%,#F3EEE8 55%,#CCC4BC 100%); }

/* 抽象形状 */
.work__shape{ position:absolute; }
.work__shape--circle{
  width:38%; aspect-ratio:1;
  border-radius:50%;
  background:rgba(22,21,20,.13);
  left:31%; top:28%;
  transition:transform .9s var(--ease);
}
.work:hover .work__shape--circle{ transform:scale(1.12); }
.work__shape--line{
  width:52%; height:1px;
  background:rgba(22,21,20,.2);
  left:24%; top:70%;
}
.work__shape--square{
  width:32%; aspect-ratio:1;
  border:1px solid rgba(22,21,20,.22);
  left:34%; top:30%;
  transition:transform .9s var(--ease);
}
.work:hover .work__shape--square{ transform:rotate(45deg) scale(1.05); }
.work__shape--dot{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--cinnabar);
  left:66%; top:66%;
}
.work__shape--arc{
  width:56%; aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(22,21,20,.22);
  border-bottom-color:transparent;
  border-right-color:transparent;
  left:22%; top:26%;
  transform:rotate(-38deg);
  transition:transform .9s var(--ease);
}
.work:hover .work__shape--arc{ transform:rotate(12deg); }
.work__shape--grid{
  inset:24%;
  background-image:
    linear-gradient(rgba(22,21,20,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,21,20,.13) 1px, transparent 1px);
  background-size:26px 26px;
  transition:transform .9s var(--ease);
}
.work:hover .work__shape--grid{ transform:scale(1.09); }
.work__shape--wave{
  left:-12%; right:-12%; top:44%;
  height:44%;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border-top:1px solid rgba(22,21,20,.2);
  transition:transform .9s var(--ease);
}
.work:hover .work__shape--wave{ transform:translateY(-10px); }
.work__shape--triangle{
  left:50%; top:52%;
  width:0; height:0;
  transform:translate(-50%,-50%);
  border-left:52px solid transparent;
  border-right:52px solid transparent;
  border-bottom:88px solid rgba(22,21,20,.14);
  transition:transform .9s var(--ease);
}
.work:hover .work__shape--triangle{ transform:translate(-50%,-50%) scale(1.1); }

/* 悬停覆盖层（预览） */
.work__overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:36px 34px;
  color:var(--paper);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.work:hover .work__overlay,
.work:focus-visible .work__overlay,
.work.is-open .work__overlay{
  opacity:1;
  transform:translateY(0);
}
.work__cat{
  font-size:10px;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color:rgba(247,244,239,.72);
  margin-bottom:14px;
}
.work__name{
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
  letter-spacing:.14em;
  margin-bottom:14px;
}
.work__brief{
  font-size:13px;
  line-height:2;
  letter-spacing:.04em;
  color:rgba(247,244,239,.86);
}
/* 朱砂细线 */
.work__overlay::before{
  content:'';
  position:absolute;
  left:34px; top:32px;
  width:26px; height:1px;
  background:var(--cinnabar);
  opacity:0;
  transition:opacity .55s var(--ease) .1s;
}
.work:hover .work__overlay::before,
.work:focus-visible .work__overlay::before,
.work.is-open .work__overlay::before{ opacity:1; }

/* 默认图注 */
.work__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  background:linear-gradient(to top, rgba(247,244,239,.96), rgba(247,244,239,0));
  transition:opacity .45s var(--ease);
}
.work:hover .work__caption,
.work:focus-visible .work__caption,
.work.is-open .work__caption{ opacity:0; }
.work__caption-name{
  font-family:var(--serif);
  font-size:17px;
  font-weight:400;
  letter-spacing:.12em;
}
.work__caption-cat{
  font-size:10px;
  letter-spacing:.2em;
  color:var(--ash);
  white-space:nowrap;
}

/* ============================================
   联系表单
   ============================================ */
.contact{ padding:150px 0; }
.form{ margin-top:20px; }
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}
.form__field{ margin-bottom:26px; }
.form__field label{
  display:block;
  font-size:11px;
  letter-spacing:.2em;
  text-indent:.2em;
  color:var(--ash);
  margin-bottom:10px;
}
.req{ color:var(--cinnabar); }
.form__field input,
.form__field select,
.form__field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:12px 2px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:300;
  letter-spacing:.04em;
  color:var(--ink);
  transition:border-color .45s var(--ease);
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
}
.form__field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),
                   linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 12px) 20px, calc(100% - 7px) 20px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.form__field textarea{ resize:vertical; line-height:1.9; }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus{
  outline:none;
  border-bottom-color:var(--cinnabar);
}
.form__field input::placeholder,
.form__field textarea::placeholder{ color:rgba(138,133,128,.6); }

.form__error{
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cinnabar);
  min-height:18px;
  margin-top:6px;
}
.form__field.is-invalid input,
.form__field.is-invalid select,
.form__field.is-invalid textarea{ border-bottom-color:var(--cinnabar); }

.form__note{
  font-size:13px;
  letter-spacing:.08em;
  color:var(--cinnabar);
  text-align:center;
  margin-top:20px;
  min-height:22px;
}
.form__note.is-success{ color:var(--ink-soft); }

.contact__direct{
  display:flex;
  justify-content:center;
  gap:64px;
  margin-top:80px;
  padding-top:56px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.contact__item{ text-align:center; }
.contact__label{
  display:block;
  font-size:10px;
  letter-spacing:.28em;
  text-indent:.28em;
  color:var(--ash);
  margin-bottom:10px;
}
.contact__value{
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.1em;
  transition:color .4s var(--ease);
}
a.contact__value:hover{ color:var(--cinnabar); }

/* ============================================
   页脚
   ============================================ */
.footer{
  background:var(--ink);
  color:var(--paper);
  padding:70px 0 40px;
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(247,244,239,.14);
  flex-wrap:wrap;
}
.footer__brand{ display:flex; flex-direction:column; gap:12px; }
.footer__cn{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.18em;
}
.footer__slogan{
  font-size:11px;
  letter-spacing:.26em;
  text-indent:.26em;
  color:rgba(247,244,239,.5);
}
.footer__links{ display:flex; gap:34px; }
.footer__links a{
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(247,244,239,.66);
  transition:color .4s var(--ease);
}
.footer__links a:hover{ color:var(--paper); }
.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:30px;
  flex-wrap:wrap;
}
.footer__copy,
.footer__icp{
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(247,244,239,.45);
}
.footer__icp a{
  color:inherit;
  border-bottom:1px solid rgba(247,244,239,.2);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.footer__icp a:hover{
  color:var(--cinnabar);
  border-color:var(--cinnabar);
}

/* ============================================
   响应式
   ============================================ */
@media (max-width:1000px){
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .nav__links{ gap:24px; }
  .nav__links a:not(.nav__cta){ display:none; }
}

@media (max-width:720px){
  .container,
  .nav__inner{ padding:0 24px; }
  .hero{ padding:110px 24px 90px; }
  .hero__title{ flex-direction:column; gap:16px; }
  .hero__dot{ margin:6px 0; }
  .manifesto,
  .services,
  .works,
  .contact{ padding:96px 0; }
  .manifesto__meta{ gap:44px; margin-top:56px; }
  .meta-num{ font-size:34px; }
  .service-item{
    grid-template-columns:1fr;
    gap:14px;
    padding:38px 0;
  }
  .service-item:hover{ padding-left:0; }
  .gallery{ grid-template-columns:1fr; gap:24px; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .contact__direct{ gap:36px; margin-top:60px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}