/* NUTAG 独立站 · 样式体系（对应 设计依据.md 第 2 节）
   网格 12 列 / 内容宽 1174 / 列距 24；图框只有 4:5；字 12·13·15·30·84；间距 4·8·14·28·56·104·168；
   颜色：毡室有温。页底 山矾提亮，墨 京元，毡色板 香皮，点睛 麝香褐。 */

:root{
  --ground:#F5F3F2;      /* 山矾，色板原值。白底图 L*≈98 / 灰底图 L*≈93.5 落在它两侧各 ±2，图框都看得见 */
  --ink:#31322C;         /* 京元 */
  --ink2:#66665F;        /* 次级字、灰标签；在页底上 ≥ 5:1 */
  --rule:#DAD7D3;
  --felt:#D8D1C5;        /* 香皮 */
  --accent:#694B3C;      /* 麝香褐 */
  --sel:#D8D1C5;

  --f-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --f-serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC","SimSun",serif;

  --gutter:clamp(20px,2.8vw,40px);
  --wrap:1174px;
  --gap:24px;
  --sec:clamp(104px,11.7vw,168px);
  --ease:cubic-bezier(.22,1,.36,1);
  --vh:100vh;
}
@supports (height:100svh){:root{--vh:100svh}}

*{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--rule) var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.9 var(--f-sans);letter-spacing:.03em;
  font-kerning:normal;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  line-break:strict;overflow-wrap:break-word;text-autospace:normal}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,figure,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--sel);color:var(--ink)}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ground);color:var(--ink);padding:8px 14px;z-index:60;font-size:13px}
.skip:focus{left:8px}
.nb{white-space:nowrap}
.hang{margin-right:-.55em}
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--rule);transition:text-decoration-color .25s,color .25s}
.u:hover{text-decoration-color:currentColor;color:var(--accent)}

/* ── 页眉：竖排小导航 + 居中标志（J.Hannah） ── */
.head{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:22px var(--gutter) 0;min-height:104px}
.head__nav{display:flex;flex-direction:column;align-items:flex-start;font-size:12px;line-height:18px;letter-spacing:.24em}
.head__nav a,.head__buy{position:relative;transition:color .25s}
.head__nav a::after,.head__buy::after{content:"";position:absolute;inset:-5px -12px}
.head__nav a:hover,.head__buy:hover{color:var(--accent)}
.head__nav a[aria-current="page"]{color:var(--accent)}
.head__logo{display:block;width:clamp(120px,9.2vw,132px);margin-top:1px}
.head__logo img{width:100%;height:auto}
.head__buy{justify-self:end;font-size:12px;line-height:18px;letter-spacing:.24em}

/* ── 通用：图框 4:5，只裁切，不加框不加影 ── */
.frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#EFEDEA}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%)}
.cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px;font-size:12px;line-height:18px}
.cap__name{font-size:13px;letter-spacing:.14em;color:var(--ink)}
.tag{font-size:12px;letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.tag[hidden]{display:none}

/* ── 按钮：购买是页面上唯一的实心墨色块 ── */
.btn{display:inline-block;padding:9px 20px;border:1px solid var(--ink);font-size:12px;line-height:18px;letter-spacing:.22em;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:var(--ground)}
.btn--solid{display:block;width:100%;padding:15px 20px;background:var(--ink);color:var(--ground);font-size:13px;line-height:20px;text-align:center}
.btn--solid:hover{background:var(--accent);border-color:var(--accent)}

/* ── 首页首图：一张居中的 4:5，它同时是商品卡（静物 ⇄ 佩戴） ── */
.hero{padding:16px var(--gutter) 0}
.hero__fig{--ph:calc(var(--vh) - 300px);width:min(100%,max(300px,var(--ph)),620px);margin:0 auto}
.hero__plate .frame{aspect-ratio:1/1}  /* 首图是唯一的方框：一对图的物件只占 1072×296 px，4:5 会有 83 % 是空的 */
.hero__plate{position:relative}
.hero__plate .frame{animation:rise 1.1s var(--ease) both}
.hero__plate .frame + .frame{position:absolute;inset:0;animation:none;opacity:0;transition:opacity .55s var(--ease)}
.hero__fig[data-view="1"] .hero__plate .frame + .frame{opacity:1}
.hero__hit{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero__hit:focus-visible{outline-offset:-6px}
.hero__cap{display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;align-items:baseline;margin-top:14px;font-size:12px;line-height:18px}
.pager{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.pager button{display:grid;place-items:center;width:20px;height:18px;position:relative}
.pager button::after{content:"";position:absolute;inset:-10px -3px}
.pager svg{width:6px;height:11px}
.pager__n{min-width:2.8em;text-align:center}
.hero__go{display:flex;align-items:center;gap:16px;margin-top:18px}
.hero__price{font-size:13px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
@keyframes rise{from{opacity:0}to{opacity:1}}

/* ── 唯一的大字（仅首页） ── */
.statement{padding:var(--sec) var(--gutter) 0;text-align:center}
.statement h1{font-weight:300;font-size:clamp(35px,5.6vw,84px);line-height:1.46;letter-spacing:.08em;text-wrap:balance}
.statement__sub{margin-top:30px;font-size:13px;letter-spacing:.16em;color:var(--ink2)}

/* ── 并排两张相片 ── */
.pair{padding:var(--sec) 0 0}
.pair__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,8.2vw,118px);row-gap:72px}
.tile{min-width:0}
.tile .frame img{--pos:60% 55%}
.tile--portrait .frame img{--pos:58% 40%}
.tile__desc{margin-top:6px;max-width:30em;font-size:13px;line-height:1.9;letter-spacing:.06em;color:var(--ink2)}

/* ── 毡色板：全站唯一的平涂色，只出现一次，放在读的内容后面，和毡面照片同一个色 ── */
.felt{margin-top:var(--sec)}
.felt__plate{width:calc((100% - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap));margin:0 auto;background:var(--felt);padding:clamp(56px,6vw,80px) clamp(28px,5vw,72px)}
.felt__plate{--ink2:#4F4F48}  /* 板上的次级字加深：#66665F 在香皮上只有 3.8:1，#4F4F48 约 6:1 */
.felt__plate--wide{width:auto}
.felt__plate--wide .detail__grid{align-items:center}
.story__in{max-width:35em;margin:0 auto}
.story h2{margin-bottom:28px;font:400 clamp(24px,2.2vw,30px)/1.7 var(--f-serif);letter-spacing:.14em;text-align:center}
.story p{margin-bottom:1.35em;font:400 15.5px/2.05 var(--f-serif);letter-spacing:.05em;text-wrap:pretty}
.story p:last-of-type{margin-bottom:0}
.story__more{margin-top:34px;text-align:center;font-size:12px;letter-spacing:.24em}

/* ── 商品排（出现 ≥2 件商品时） ── */
.series{padding:var(--sec) 0 0}
.series__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.series__title{font:300 30px/1.5 var(--f-sans);letter-spacing:.1em}
.series__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:56px}
.card{min-width:0;display:block}
.card .cap{margin-top:12px}
.card__price{font-size:13px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink2)}

/* ── 商品页 ── */
.pdp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:16px;align-items:start}
.gal{grid-column:1 / 7;min-width:0}
.gal__list{display:grid;row-gap:36px}
.gal__item{min-width:0}
.gal__item .cap{margin-top:10px}
.gal__n{font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink2)}
.info{grid-column:8 / 13;position:sticky;top:28px;min-width:0;padding-top:2px}
.info__name{font:300 clamp(24px,2.2vw,30px)/1.5 var(--f-sans);letter-spacing:.1em}
.info__price{margin-top:6px;font-size:15px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.info__sum{margin-top:28px;font-size:15px;line-height:1.95;max-width:28em;text-wrap:pretty}
.spec{margin-top:28px;border-top:1px solid var(--rule)}
.spec div{display:grid;grid-template-columns:4.6em 1fr;column-gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.7}
.spec dt{font-size:12px;letter-spacing:.2em;color:var(--ink2)}
.spec .is-tbd{color:var(--ink2)}
.buy{margin-top:28px}
.buy__note{margin-top:10px;font-size:12px;line-height:1.8;letter-spacing:.06em;color:var(--ink2)}
.buy__note[data-state="warn"]{color:var(--accent)}
.acc{margin-top:28px;border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:13px;letter-spacing:.2em;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:7px;height:7px;margin-right:4px;border:solid var(--ink);border-width:0 1px 1px 0;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.acc__body{padding:0 0 18px;font-size:13px;line-height:1.95;letter-spacing:.05em;max-width:30em}
.acc__body.is-tbd{color:var(--ink2)}
.acc__body p + p{margin-top:.8em}

.detail{padding:var(--sec) 0 0}
.detail__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.detail__text{grid-column:1 / 5;padding-bottom:6px}
.detail__title{font:300 clamp(24px,2.2vw,30px)/1.5 var(--f-sans);letter-spacing:.1em}
.detail__p{margin-top:14px;font-size:15px;line-height:1.95;max-width:20em}
.detail__fig{grid-column:6 / 13;min-width:0}
.detail__img{position:relative;aspect-ratio:8/5;overflow:hidden;background:#EFEDEA}
.detail__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.next{padding:var(--sec) 0 0}
.next__line{font-size:13px;letter-spacing:.14em;color:var(--ink2)}

/* ── 故乡页 ── */
.about{padding:0}
.about__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:var(--sec);align-items:center}
.about__fig{grid-column:1 / 7;min-width:0}
.about__txt{grid-column:8 / 13;min-width:0}
.about__txt h2{margin-bottom:24px;font:400 clamp(24px,2.2vw,30px)/1.7 var(--f-serif);letter-spacing:.14em}
.about__txt p{margin-bottom:1.35em;font:400 15.5px/2.05 var(--f-serif);letter-spacing:.05em;text-wrap:pretty}
.about__txt p:last-of-type{margin-bottom:0}
.about__more{margin-top:34px;font-size:12px;letter-spacing:.24em}

/* ── 页尾：字标收尾，居中，页底不变（设计依据.md 第 4 节，备选 D） ── */
.end{margin-top:var(--sec)}
.end__grid{display:flex;flex-direction:column;align-items:center;gap:44px}
.end__logo{display:block;width:min(100%,clamp(260px,30vw,420px))}
.end__logo img{width:100%;height:auto}
.end__links{display:flex;flex-direction:row;gap:36px;font-size:12px;line-height:18px;letter-spacing:.24em}
.end__links a{position:relative;transition:color .25s}
.end__links a::after{content:"";position:absolute;inset:-5px -10px}
.end__links a:hover{color:var(--accent)}
.end__legal span{white-space:nowrap}
.end__legal{margin-top:56px;padding-bottom:36px;text-align:center;font-size:12px;letter-spacing:.06em;color:var(--ink2);text-wrap:balance}

@media (pointer:coarse){
  .head__nav,.head__buy{line-height:30px}
  .u{display:inline-block;padding:6px 0}
  .head__nav a::after,.head__buy::after{inset:-6px -14px}
  .end__links a::after{inset:-12px -10px}
}

/* ── 窄屏 ── */
@media (max-width:899px){
  .felt__plate{width:auto}
  .pdp{display:block}
  .gal__list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gal__list::-webkit-scrollbar{display:none}
  .gal__item{flex:0 0 min(84%,460px);scroll-snap-align:start}
  .info{position:static;margin-top:44px}
  .detail__grid{display:block}
  .detail__fig{margin-top:28px}
  .about__grid{display:block}
  .about__txt{margin-top:44px}
  .series__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
}
@media (max-width:719px){
  .head{min-height:92px;padding-top:18px}
  .hero{padding-top:12px}
  .statement__sub{margin-top:22px;letter-spacing:.12em}
  .pair__grid{grid-template-columns:minmax(0,1fr);row-gap:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__plate .frame,.hero__plate .frame + .frame{animation:none;transition:none}
  .acc summary::after{transition:none}
}
@media (max-width:719px){.end__links{gap:28px}}