/* 胶片速查台 · 牛皮纸 / 接触印样风 */
:root{
  --paper:#f3ece0;
  --paper2:#faf6ee;
  --card:#fffdf8;
  --rule:#d8cdb9;
  --ink:#241d16;
  --ink2:#5f5345;
  --red:#a6301d;
  --teal:#1d6a63;
  --amber:#c8871c;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --serif:Georgia,"Songti SC","Noto Serif CJK SC",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  background:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,rgba(36,29,22,.028) 0 1px,transparent 1px 4px);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px;line-height:1.78;
}
.sheet{width:100%;max-width:980px;margin:0 auto;padding:0 18px}

/* 顶条：仿胶片齿孔 */
.filmbar{background:#241d16;padding:9px 0}
.filmbar svg{display:block;width:100%;height:18px}

header.top{padding:30px 0 6px}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--red);text-transform:uppercase;margin:0}
h1{
  font-family:var(--serif);
  margin:8px 0 4px;
  font-size:clamp(28px,8vw,54px);
  line-height:1.2;font-weight:700;letter-spacing:.02em;
}
h1 .b{display:block}
h1 .s{display:block;font-family:inherit;font-size:clamp(14px,3.4vw,19px);font-weight:400;color:var(--ink2);margin-top:8px;font-style:italic}

.plain{
  margin:20px 0 8px;padding:15px 17px;background:var(--paper2);
  border:1px dashed var(--rule);border-radius:3px;font-size:14.5px;color:#473c30;
}
.plain strong{color:var(--red)}

.toc{margin:22px 0 34px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0}
.toc li{margin:0}
.toc a{
  display:block;padding:5px 14px 5px 0;margin-right:14px;border-right:1px solid var(--rule);
  font-size:13.5px;color:var(--teal);text-decoration:none;font-family:var(--mono)
}
.toc li:last-child a{border-right:0;margin-right:0}
.toc a:hover{color:var(--red)}

section{margin:0 0 48px;scroll-margin-top:14px}
h2{
  font-family:var(--serif);font-size:clamp(20px,5vw,30px);margin:0 0 4px;font-weight:700;
  border-bottom:2px solid var(--ink);display:inline-block;padding-bottom:3px
}
h3{font-family:var(--serif);font-size:17.5px;margin:26px 0 8px}
.note{color:var(--ink2);font-size:14.5px;margin:10px 0 18px}
p{margin:0 0 13px}

.card{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:18px;box-shadow:2px 3px 0 rgba(36,29,22,.06)}
.ctrls{display:grid;grid-template-columns:1fr;gap:13px}
@media(min-width:680px){.ctrls{grid-template-columns:1fr 1fr}}
label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink2);margin:0 0 4px;text-transform:uppercase}
select,input[type=text]{
  width:100%;padding:9px 10px;font-size:15px;font-family:var(--mono);
  background:#fff;border:1px solid var(--rule);border-radius:3px;color:var(--ink)
}
select:focus,input:focus{outline:2px solid var(--amber);outline-offset:1px}

.result{margin:20px 0 0;border-top:2px dotted var(--rule);padding-top:18px}
.bigline{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.bigline .lab{font-family:var(--mono);font-size:11.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.08em;display:block}
.bigline .big{font-family:var(--serif);font-size:clamp(26px,7vw,40px);line-height:1.15;color:var(--red);font-weight:700}
.bigline .mid{font-family:var(--serif);font-size:clamp(18px,4.6vw,26px);color:var(--ink)}
.bigline > div{min-width:0}
.delta{font-family:var(--mono);font-size:14px;color:var(--teal)}

.combos{margin:20px 0 0;overflow-x:auto;border:1px solid var(--rule);border-radius:3px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:390px;font-size:14px}
th,td{padding:8px 12px;border-bottom:1px solid #e9e0cf;text-align:left}
th{background:#efe7d7;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink2);text-transform:uppercase;white-space:nowrap}
td{font-family:var(--mono)}
tbody tr:last-child td{border-bottom:0}
tbody tr.hit td{background:#fdf3d9;font-weight:700}

/* 胶卷规格卡 */
.filter-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 18px}
.filter-row > div{flex:1 1 200px;min-width:0}
.fmtgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:660px){.fmtgrid{grid-template-columns:1fr 1fr}}
.fmt{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--teal);border-radius:3px;padding:14px 16px}
.fmt.sz-large{border-left-color:var(--red)}
.fmt.sz-micro{border-left-color:var(--amber)}
.fmt h4{margin:0 0 3px;font-family:var(--serif);font-size:18px}
.fmt .tag{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--ink2);text-transform:uppercase}
.fmt dl{margin:9px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px}
.fmt dt{font-family:var(--mono);font-size:11.5px;color:var(--ink2);padding-top:3px}
.fmt dd{margin:0}
#fmt-count{font-family:var(--mono);font-size:13.5px;color:var(--red);margin:0 0 12px}

.steps{list-style:none;padding:0;margin:0;counter-reset:st}
.steps li{position:relative;padding:0 0 14px 42px;counter-increment:st;font-size:14.8px}
.steps li::before{
  content:counter(st);position:absolute;left:0;top:2px;width:27px;height:27px;border-radius:50%;
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13px;
  display:flex;align-items:center;justify-content:center
}
.steps li b{color:var(--red)}

footer{border-top:1px solid var(--rule);margin-top:10px;padding:22px 0 48px;font-size:13.5px;color:var(--ink2)}
footer p{margin:0 0 7px}

.nf{padding:60px 0 90px}
.nf .big404{font-family:var(--serif);font-size:clamp(66px,22vw,150px);line-height:1;color:#e0d5c1;margin:0}
.nf a.home{display:inline-block;margin-top:16px;border-bottom:2px solid var(--red);color:var(--red);text-decoration:none;font-size:16px}

/* 防溢出兜底：长串与网格子项 */
body{overflow-wrap:break-word}
h1,h2,h3,h4,p,li,td,th,dd,dt,span,pre,code{overflow-wrap:break-word}
[class]>*{min-width:0}