/* ============================================================
   COMPACT CONTINUOUS LAYOUT
   Flat colour fields, measured content width and balanced grids.
   ============================================================ */
:root{
  --flow-gutter:clamp(22px,6vw,120px);
  --flow-gap:clamp(28px,4.5vw,88px);
}

html{ background:var(--bg); }
body{ overflow-x:hidden; }
main{ overflow:clip; }

.section,
.section--flush{ padding-inline:var(--flow-gutter); }
.wrap{ width:100%; max-width:none; margin-inline:0; }

.sec-head,
.gallery__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(24px,4vw,64px);
}
.sec-head__sub{ max-width:360px; }

.choose,
.painting-room{
  background:var(--paper);
  border-top:clamp(4px,.45vw,7px) solid var(--green);
}
.site-foot,
.outro{
  background:var(--bg);
  border-top:clamp(4px,.45vw,7px) solid var(--green);
}
.choose{
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  padding-block:clamp(42px,6vh,64px) clamp(18px,2.5vh,30px);
}
.choose > .wrap{ display:flex; flex-direction:column; justify-content:flex-start; }
#choose .sec-head{ margin-bottom:clamp(12px,2vh,24px); }
#choose .sec-head__title{ font-size:clamp(36px,min(4.8vw,7vh),70px); }
#choose .card{
  min-height:clamp(350px,48vh,450px);
  padding:clamp(18px,2.2vw,34px);
  gap:clamp(8px,1.4vh,14px);
}
#choose .card__art{
  height:clamp(112px,18vh,160px);
  margin-top:0;
  display:flex;
  align-items:center;
}
#choose .card__art svg{ width:100%; height:100%; }
#choose .card__title{ margin-top:0; font-size:clamp(34px,min(4.4vw,6.5vh),64px); }
#choose .choose__note{ margin-top:clamp(10px,1.8vh,20px); }
.painting-room{ padding-top:clamp(90px,12vh,140px); }
.site-foot{
  /* 与 .outro 一致：尾部区块约占 0.5 视口高。内容自然高约 340px，
     不足的差额由 min-height 补足（留在底部，深色页脚上不可见）。
     注意：不能改成 flex 居中 —— 子元素是 .wrap{max-width:1440px;margin:0 auto}，
     成为 flex item 后 auto 外边距会取消 align-items:stretch，网格会塌成内容宽。 */
  min-height:50svh;
  padding-top:clamp(16px,2.5vh,32px);
  padding-inline:clamp(42px,10vw,190px);
}
.site-foot__top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(48px,8vw,140px);
}
.site-foot__socials{
  width:100%;
  justify-self:center;
}
.site-foot .social-link{
  padding-block:clamp(6px,1vh,12px);
  font-size:clamp(13px,1.05vw,16px);
}
.outro{
  min-height:50svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(20px,3.5vh,44px) clamp(54px,9vw,180px);
}
.outro__next{ font-size:clamp(52px,min(10.5vw,15vh),148px); }
.outro__bar{ margin-top:clamp(16px,2.5vh,28px); }

.hobby-sec,
.project-studies{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(245,246,241,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,246,241,.026) 1px,transparent 1px);
  background-size:56px 56px;
}
.hobby-hero,
.hobby-sec + .hobby-sec,
.gallery + .gallery{ border-color:transparent; }
.hobby-sec{ padding-top:clamp(72px,9vw,128px); }

.photos.fragments{
  width:100%;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.42fr);
  gap:clamp(36px,5vw,80px);
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(245,246,241,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,246,241,.04) 1px,transparent 1px);
  background-size:52px 52px;
}
.fragments__intro,
.fragments__wall{ min-width:0; }
.fragments__wall{
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%; max-width:none; justify-self:stretch;
}
.fragment:nth-child(3n),
.fragment:nth-child(3n+2){ margin-top:0; }
.fragment:nth-child(even){ margin-top:clamp(44px,5vw,72px); }

.choose > .wrap{ max-width:none; }
.choose__grid{
  width:100%;
  max-width:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.choose__grid .card:first-child,
.choose__grid .card:last-child{ grid-column:auto; }
.choose__note{ max-width:none; text-align:center; }
.ask-section{
  min-height:100svh;
  display:grid;
  align-items:center;
  border-top:1px solid var(--line);
}
.ask-section::before{ display:block; }
.ask-inner{
  min-height:100svh;
  max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  align-content:center;
  padding-block:clamp(48px,8vh,88px);
  padding-inline:clamp(64px,10vw,180px);
  gap:clamp(36px,6vw,104px);
}
.ask-left,.ask-right{ grid-column:auto; }
.ask-section .ask-left{ gap:14px; }
.ask-section .ask-title{ font-size:clamp(42px,min(6.2vw,9vh),88px); }
.ask-section .ask-sub{ font-size:clamp(16px,min(1.6vw,2.4vh),22px); }
.ask-section .ask-chips{ gap:6px; margin-top:0; }
.ask-section .chip{ padding:5px 14px; }
.ask-section .ask-btn{ margin-top:4px; }
.ask-section .ask-contacts{ margin-top:4px; }
.ask-section .ask-scene{ width:min(500px,100%); }

.project-studies{
  grid-template-columns:minmax(220px,.32fr) minmax(0,1fr);
  gap:var(--flow-gap);
  padding-inline:var(--flow-gutter);
}
.project-studies .gallery__head,
.project-studies .h-scroll,
.project-studies .gallery__foot{ grid-column:auto; }
.project-studies .p-card,
.project-studies .p-card:nth-child(even){
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
}
.painting-room .gallery__head,
.painting-room .h-scroll,
.painting-room .gallery__foot{ max-width:none; margin-inline:0; }
.painting-room .h-scroll__inner{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(72px,8vw,118px) clamp(34px,6vw,88px);
}
.painting-room .d-card,
.painting-room .d-card:nth-child(4n+2),
.painting-room .d-card:nth-child(4n+3){ grid-column:auto; transform:none; }

.f1-grid,
.tickets,
.deck,
.people{
  width:100%;
  max-width:none;
  margin-inline:0;
}
.f1-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--flow-gap);
}
.f1-intro,.f1-stage{ grid-column:auto; }
.f1-intro{ justify-content:center; }
.tickets{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ticket{ grid-column:auto; }
.ticket:nth-child(even){ transform:none; }
.deck{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--flow-gap);
}
.deck__tt,.deck__ui{ grid-column:auto; }
.people{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.person{ grid-column:auto; min-height:320px; }
.person:nth-child(even),
.person:nth-child(even):hover{ transform:none; }
.person:hover{ transform:translateY(-8px); }

.ask-main{
  width:100%; max-width:none;
  margin-inline:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding-inline:var(--flow-gutter);
  background:var(--bg);
}
.ask-main > .ask-left,
.ask-main > .ask-right{ grid-column:auto; }

@media(min-width:1600px){
  .fragments__wall{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .fragment:nth-child(even){ margin-top:0; }
  .fragment:nth-child(3n+2){ margin-top:clamp(44px,4vw,76px); }
  .tickets{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .painting-room .h-scroll__inner{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .painting-room .d-card:nth-child(even){ padding-top:clamp(70px,7vw,130px); }
  .card{ min-height:clamp(500px,34vw,680px); }
}

@media(max-width:1000px){
  .people{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .person{ min-height:0; }
}

@media(max-width:900px){
  .photos.fragments,
  .project-studies,
  .f1-grid,
  .deck,
  .ask-inner,
  .ask-main{ grid-template-columns:1fr; }
  .choose__grid{ grid-template-columns:1fr; }
  .choose{ min-height:auto; display:block; }
  #choose .card{ min-height:auto; }
  #choose .card__art{ height:clamp(100px,24vw,160px); }
  .ask-section,.ask-inner{ min-height:auto; }
  .ask-inner{ padding-inline:var(--flow-gutter); }
  .site-foot__top{ grid-template-columns:1fr; }
  .outro{ min-height:auto; padding-inline:var(--flow-gutter); }
  .fragments__intro{ position:relative; top:auto; }
  .fragments__wall{ justify-self:center; }
  .project-studies .p-card,
  .project-studies .p-card:nth-child(even){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:640px){
  .sec-head,
  .gallery__head{ align-items:flex-start; flex-direction:column; }
  .choose__grid,
  .tickets,
  .people,
  .painting-room .h-scroll__inner,
  .project-studies .p-card,
  .project-studies .p-card:nth-child(even){ grid-template-columns:1fr; }
  .fragments__wall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .painting-room .d-card:nth-child(even){ padding-top:0; }
}

/* Content rhythm: preserve the original full-width layout and side spacing.
   Opening stages retain their viewport geometry for scroll choreography. */
:root{
  --flow-gap:clamp(24px,3vw,48px);
  --muted-ink:rgba(10,13,12,.72);
  --muted-paper:rgba(245,246,241,.76);
  --section-gap:clamp(48px,6vw,80px);
}
.section:not(.section--flush),.hobby-sec,.project-studies,.painting-room{
  padding-block:var(--section-gap);
}
.work-hero,.hobby-hero{
  min-height:0;
  padding-top:clamp(128px,14vw,190px);
  padding-bottom:var(--section-gap);
}
.choose,.photos.fragments,.ask-section,.ask-inner,.site-foot,.outro{ min-height:0; }
.choose{ display:block; }
.photos.fragments{ padding-block:var(--section-gap); }
.fragments__intro{ top:100px; }
.fragments__intro h2{ margin-block:20px; }
.fragments__hint{ margin-top:24px; opacity:1; color:var(--muted-paper); }
.fragments__wall{ padding:12px 8px 24px; gap:28px 20px; }
.fragment:nth-child(even),.fragment:nth-child(3n+2){ margin-top:24px; }
#choose .sec-head{ margin-bottom:28px; }
#choose .card{ min-height:0; padding:clamp(24px,3vw,36px); }
#choose .card__art{ height:140px; }
#choose .card__go{ margin-top:12px; }
.card__desc{ opacity:1; color:var(--muted-ink); }
.card__tags span{ opacity:1; }
.ask-inner{ padding-block:var(--section-gap); }
.ask-section .ask-scene{ width:min(380px,100%); }
.ask-note{ opacity:1; }
.site-foot,.outro{ padding-block:var(--section-gap) 28px; }
.site-foot__top{ gap:var(--flow-gap); }
.site-foot__bottom{ margin-top:32px; }
.project-studies{ grid-template-columns:1fr; gap:32px; }
.project-studies .gallery__head{ position:relative; top:auto; }
.project-studies .gallery__title{ margin:12px 0 0; }
.project-studies .h-scroll__inner{ gap:40px; }
.project-studies .p-card,.project-studies .p-card:nth-child(even){
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(24px,4vw,48px);
  padding-top:32px;
}
.project-studies .p-card__art svg{ aspect-ratio:16/10; }
.project-studies .p-card__body{ min-width:0; }
.project-studies .gallery__foot{ grid-column:1; }
.exhibit-action,.gallery-jump a{ min-height:44px; align-items:center; }
.gallery-jump{ flex-wrap:wrap; gap:12px 24px; }
.gallery-jump a{ display:inline-flex; }
.painting-room .gallery__head{ margin-bottom:32px; padding-bottom:24px; }
.painting-room .h-scroll__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 32px; }
.painting-room .d-card:nth-child(even){ padding-top:0; }
.painting-room .gallery__foot{ margin-top:32px; }
.painting-room .d-card__cap{ color:var(--muted-ink); }
.person{ min-height:0; }
.ask-main{ min-height:0; padding:140px var(--flow-gutter) var(--section-gap); }
.ask-scene{ max-width:100%; }
.head-burger{ min-width:44px; min-height:44px; justify-content:center; align-items:center; }
.btn,.deck__btn{ min-height:44px; }
.ask-contact-links a{ display:inline-flex; align-items:center; min-height:44px; }
.f1-3d__credit{ color:var(--muted-paper); }
@media(max-width:900px){
  .project-studies .p-card,.project-studies .p-card:nth-child(even){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fragments__intro{ position:relative; top:auto; }
  .ask-inner,.ask-main{ gap:32px; }
}
@media(max-width:640px){
  .project-studies .p-card,.project-studies .p-card:nth-child(even){ grid-template-columns:1fr; gap:20px; padding-top:24px; }
  .painting-room .h-scroll__inner{ grid-template-columns:1fr; gap:32px; }
  .project-studies .h-scroll__inner{ gap:32px; }
  .fragment:nth-child(even),.fragment:nth-child(3n+2){ margin-top:16px; }
  .fragments__wall{ padding-inline:0; gap:20px 12px; }
  #choose .card__art{ height:112px; }
  .art-viewer__toolbar{ flex-wrap:wrap; gap:12px; }
  .f1-3d__credit{ top:76px; max-width:160px; }
  .f1-3d__status{ bottom:48px; }
  .f1-3d__hint{ left:14px; right:14px; text-align:right; }
  .hero__intro{ bottom:12%; }
  .hero__signature{ top:65%; }
}