/* 斯蒂格勒 · 看片台：一条 35 毫米胶片铺在亮着的看片台上。
   片基是琥珀色，画面是银盐灰，剪辑师的油性笔是橙红；页边的小胶片记下你看过的格子。 */
.c-stiegler {
  --bg: #f3efe6; --paper: #fbf9f4; --ink: #1b1a17; --ink-2: #46423b; --ink-3: #6f695f; --rule: rgba(27, 26, 23, .16);
  --acc: #a8321b; --acc-ink: #fff8ef; --fire: #d9481f; --amber: #d68a2b;
  --film: #4b2d12; --film-2: #3a220c; --film-ink: #f3d39c; --hole: #f7f3ea; --gate: #0f0d0b;
  --head: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --body: "Noto Serif SC", "Songti SC", serif;
  --mono: "Courier Prime", "Courier New", "Noto Sans SC", monospace; --gp: "Permanent Marker", "Long Cang", cursive; --gpc: "Long Cang", "Noto Sans SC", cursive;
  --bar-bg: rgba(29, 24, 18, .95); --bar-ink: #f3e9d6; --chip-bg: rgba(255, 255, 255, .72); --chip-ring: #fbf9f4;
  --page: 1240px; --gut: clamp(16px, 4vw, 56px); --reel: 400px;
  --hw: 22px; --hh: 16px; --pitch: 44px; --he: 14px; --fin: 50px;
  --holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='44'%3E%3Crect x='0' y='14' width='22' height='16' rx='3.5' fill='%23f7f3ea'/%3E%3C/svg%3E");
  position: relative; background-color: var(--bg);
}
/* 看片台的光：中间亮，四周略暗 */
.c-stiegler::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 95% at 50% 42%, #fffdf8 0%, #f7f3ea 42%, #ebe5d8 80%, #e2dbcc 100%); }
.c-stiegler .dlg { --dlg-bg: #efe9dd; --dlg-paper: #fbf9f4; --dlg-me: #3a220c; --dlg-me-ink: #fbf1de; --dlg-acc: #a8321b; }
.c-stiegler ::selection { background: rgba(214, 138, 43, .3); }

/* 页头：黑色片头，底边一排齿孔 */
.c-stiegler .c3bar { border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.c-stiegler .c3bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; pointer-events: none;
  background: radial-gradient(circle at 50% 0, transparent 2.6px, rgba(29, 24, 18, .95) 3px) 0 0 / 14px 7px repeat-x; }
.c-stiegler .c3bar__t a { font-family: var(--head); }
.c-stiegler .c3bar__prog { background: var(--amber); height: 2px; bottom: 0; }

/* ---------- 胶片的公共样式 ---------- */
.sg-film, .sg-reel { position: relative; background-color: var(--film);
  background-image: var(--holes), var(--holes), linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 12%, transparent 88%, rgba(0, 0, 0, .18));
  background-position: left var(--he) top 0, right var(--he) top 0, 0 0;
  background-size: var(--hw) var(--pitch), var(--hw) var(--pitch), 100% 100%;
  background-repeat: repeat-y, repeat-y, no-repeat; }
.sg-edge { position: absolute; top: 0; bottom: 0; left: calc(var(--he) + var(--hw) + 3px); width: 12px; overflow: hidden; pointer-events: none;
  writing-mode: vertical-rl; font: 700 9px/12px var(--mono); letter-spacing: .24em; color: var(--film-ink); opacity: .55; white-space: nowrap; }
.sg-frame { position: relative; background: var(--gate); aspect-ratio: 2 / 3; overflow: hidden;
  box-shadow: 0 0 0 2px var(--gate), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sg-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-frame--tall img { object-fit: contain; }
.sg-num { position: absolute; margin: 0; font: 700 15px/1 var(--mono); color: #ffd98c; pointer-events: none; }
.sg-num span { position: absolute; white-space: nowrap; }

/* ---------- 首屏 ---------- */
.c-stiegler .c3hero { padding: calc(var(--bar) + 30px) var(--gut) 48px; }
.sg-hero { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 76px); align-items: start; }
.sg-hero__reel { margin: 0; }
.sg-film--hero { padding: 44px calc(var(--he) + var(--hw) + 22px) 40px; box-shadow: 0 30px 60px -36px rgba(58, 34, 12, .75), 0 2px 0 rgba(0, 0, 0, .1); transform: rotate(-.6deg); }
.sg-film--hero .sg-edge { left: calc(var(--he) + var(--hw) + 4px); }
.sg-lead { position: absolute; left: 50%; top: 8px; margin: 0; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(243, 211, 156, .55);
  display: grid; place-items: center; font: 700 13px/1 var(--mono); color: var(--film-ink); }
.sg-lead::before, .sg-lead::after { content: ""; position: absolute; background: rgba(243, 211, 156, .45); }
.sg-lead::before { left: 50%; top: -3px; bottom: -3px; width: 1px; }
.sg-lead::after { top: 50%; left: -3px; right: -3px; height: 1px; }
.sg-lead span { position: relative; z-index: 1; background: var(--film); padding: 0 2px; }
.sg-num--hero { right: calc(var(--he) + var(--hw) + 22px); bottom: 12px; }
.sg-num--hero span:first-child { right: 0; bottom: 0; font-size: 17px; }
.sg-num--hero span:last-child { right: 34px; bottom: 0; font-size: 13px; opacity: .8; }
/* 剪辑师在“希望”上画的圈 */
.sg-gp--spes { position: absolute; left: 57%; top: 58.3%; width: 24%; height: 6.8%; border: 3px solid var(--fire); border-radius: 50%;
  transform: rotate(-5deg); opacity: .92; pointer-events: none; }
.sg-gp--spes::after { content: "希望"; position: absolute; left: 70%; top: 118%; font: 400 24px/1 var(--gpc); color: var(--fire); transform: rotate(-6deg);
  text-shadow: 0 0 2px #fff8ef, 0 0 6px #fff8ef, 0 0 10px rgba(255, 248, 239, .9); white-space: nowrap; }
.sg-hero__reel figcaption { margin: 16px 6px 0; font: 13px/1.7 var(--body); color: var(--ink-3); }

.sg-hero__id { padding-top: 6px; }
.sg-k { margin: 0; font: 700 13px/1.4 var(--mono); letter-spacing: .14em; color: var(--acc); text-transform: uppercase; }
.sg-hero__id h1 { margin: 6px 0 0; font: 900 clamp(64px, 8.4vw, 124px)/1 var(--head); letter-spacing: .03em; color: var(--ink); }
.sg-en { margin: 12px 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font: 400 23px/1.3 var(--mono); }
.sg-yr { font-size: 16px; color: var(--ink-3); letter-spacing: .06em; }
.sg-who { margin: 0 0 4px; font: 700 20px/1.55 var(--head); }
.sg-now { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-2); }
.sg-works { margin: 0 0 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sg-works .mk { margin: 0; font: 700 12px/1.4 var(--mono); letter-spacing: .14em; color: var(--acc); }
.sg-works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.sg-works li { font-size: 15px; }
.sg-works a { text-decoration-color: rgba(168, 50, 27, .45); text-underline-offset: 3px; }
.sg-works small { margin-left: 4px; font: 400 12.5px/1 var(--mono); color: var(--ink-3); }
.sg-hero__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 22px; align-items: start; }
/* 用胶带贴在看片台上的便条 */
.sg-note { position: relative; padding: 16px 18px 14px; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 24px -18px rgba(58, 34, 12, .5); }
.sg-note::before { content: ""; position: absolute; left: 50%; top: -11px; width: 76px; height: 22px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(233, 222, 196, .78); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.sg-note .mk { color: var(--acc); font: 700 12px/1.4 var(--mono); letter-spacing: .14em; }
.sg-rel p:last-child { margin: 0; font-size: 14.5px; line-height: 1.85; }
.sg-shots .mk { font: 700 12px/1.4 var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.c-stiegler .sg-shots .c3-qlist { border-top: 1px solid var(--ink); }
.c-stiegler .sg-shots .c3-qlist li { counter-increment: shot; border-bottom: 1px solid var(--rule); }
.c-stiegler .sg-shots .c3-qlist { counter-reset: shot; }
.c-stiegler .sg-shots .c3-qlist a { position: relative; display: grid; grid-template-columns: 26px 40px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 7px 26px 7px 0; text-decoration: none; font-size: 14.5px; line-height: 1.5; }
.c-stiegler .sg-shots .c3-qlist a::before { content: counter(shot); font: 700 12px/1 var(--mono); color: var(--ink-3); text-align: right; }
.c-stiegler .sg-shots .c3-qlist b { font: 700 13px/1 var(--mono); color: var(--acc); }
.c-stiegler .sg-shots .c3-qlist a:hover span, .c-stiegler .sg-shots .c3-qlist a:focus-visible span { text-decoration: underline; text-decoration-color: var(--fire); text-underline-offset: 3px; }
.c-stiegler .sg-shots .c3-qlist li.is-seen a::after { content: "✓"; position: absolute; right: 4px; top: 4px; font: 400 17px/1 var(--gp); color: var(--fire); transform: rotate(-8deg); }
.sg-shots__n { margin: 8px 0 0; font: 12.5px/1.6 var(--body); color: var(--ink-3); }
.sg-go { margin: 26px 0 0; }
.c-stiegler .c3-btn { border-radius: 2px; font-family: var(--head); font-weight: 500; }
.c-stiegler .c3-btn--go { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.c-stiegler .c3-btn--deep { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.c-stiegler .c3-btn--wm { background: transparent; }

.sg-band { max-width: var(--page); margin: 52px auto 0; padding-top: 26px; border-top: 1px solid var(--ink); display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); gap: 34px; }
.sg-band .mk { font: 700 12px/1.4 var(--mono); letter-spacing: .14em; color: var(--acc); }
.sg-mk2 { margin-top: 18px !important; }
.sg-facts { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.c-stiegler .c3-feats { margin: 0; padding: 0; list-style: none; counter-reset: ft; }
.c-stiegler .c3-feats li { counter-increment: ft; position: relative; padding: 5px 0 5px 34px; font-size: 14px; line-height: 1.65; border-bottom: 1px dashed var(--rule); }
.c-stiegler .c3-feats li::before { content: counter(ft, decimal-leading-zero); position: absolute; left: 0; top: 7px; font: 700 12px/1.4 var(--mono); color: var(--acc); }
.c-stiegler .c3-books li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 0 7px; font-size: 15px; }
.c-stiegler .c3-books li > a, .c-stiegler .c3-books li { text-decoration-color: rgba(168, 50, 27, .45); text-underline-offset: 3px; }
.c-stiegler .c3-books small { font-family: var(--body); font-size: 12.5px; }
.c-stiegler .c3-links li { font-size: 14px; }
.c-stiegler .c3-links small { font-family: var(--mono); font-size: 12px; }

/* ---------- 每一问：一格 ---------- */
.c-stiegler .c3q { display: block; padding: 0 var(--gut); min-height: 100svh; }
.sg-shot { max-width: var(--page); margin: 0 auto; min-height: 100svh; display: grid; grid-template-columns: var(--reel) minmax(0, 1fr);
  grid-template-rows: auto 1fr; grid-template-areas: "reel hd" "reel body"; column-gap: clamp(32px, 4.4vw, 72px); }
.sg-reel { grid-area: reel; }
.sg-hd { grid-area: hd; padding-top: calc(var(--bar) + 54px); max-width: 700px; }
.sg-body { grid-area: body; padding-bottom: 72px; max-width: 700px; }
.sg-reel__in { position: sticky; top: calc(var(--bar) + 26px); padding: 58px calc(var(--he) + var(--hw) + 22px) 40px; }
.sg-reel .sg-num { left: calc(var(--he) + var(--hw) + 22px); right: calc(var(--he) + var(--hw) + 22px); top: 28px; height: 20px; }
.sg-reel .sg-num span:first-child { left: 0; top: 0; font-size: 18px; }
.sg-reel .sg-num span:last-child { right: 0; top: 2px; font-size: 13px; opacity: .8; }
.sg-fr { margin: 0; }
.sg-fr figcaption { margin: 14px 0 0; font: 400 12.5px/1.65 var(--mono); color: var(--film-ink); }
/* 接片：每一格的开头贴着一段胶带 */
.sg-splice { position: absolute; left: -7px; right: -7px; top: -12px; height: 24px; z-index: 2; transform: rotate(-.8deg);
  background: linear-gradient(rgba(255, 252, 240, .55), rgba(255, 252, 240, .42)); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.sg-splice::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; border-top: 1px dashed rgba(58, 34, 12, .35); }
.c-stiegler .c3q--1 .sg-splice { display: none; }

.sg-slate { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--ink-3); font-size: 14px; }
.sg-slate b { font: 700 38px/1 var(--mono); color: var(--acc); letter-spacing: -.02em; }
.sg-slate span { font-family: var(--head); font-weight: 500; color: var(--ink-2); }
.sg-slate i { font: 400 21px/1 var(--gpc); font-style: normal; color: var(--fire); transform: rotate(-3deg); }
.c-stiegler .c3q__q { margin: 8px 0 22px; font: 900 clamp(30px, 3.5vw, 48px)/1.22 var(--head); letter-spacing: .01em; text-wrap: balance; }
.c-stiegler .c3q__lede { margin: 0 0 22px; font-size: 16.5px; line-height: 1.95; text-align: justify; color: var(--ink); }
/* 引语：默片的字幕卡 */
.c-stiegler .c3-quote { margin: 26px 0; padding: 22px 26px 18px; border: 0; background: var(--gate); color: #f2ead9; text-align: center;
  box-shadow: inset 0 0 0 5px var(--gate), inset 0 0 0 6px rgba(243, 211, 156, .5), 0 14px 30px -20px rgba(0, 0, 0, .6); }
.c-stiegler .c3-quote blockquote p { font: 600 17.5px/1.85 var(--body); }
.c-stiegler .c3-orig { color: #c9bca2; font: italic 13.5px/1.65 var(--mono); }
.c-stiegler .c3-quote figcaption { color: #b9ab90; font-size: 12px; }
.c-stiegler .c3-tags li { border-radius: 0; border: 0; background: var(--paper); box-shadow: 0 0 0 1px var(--rule); font-family: var(--head); font-size: 13px; color: var(--ink-2); padding: 2px 10px; }
.c-stiegler .c3-works .mk, .c-stiegler .c3-talk .mk { font: 700 12px/1.4 var(--mono); letter-spacing: .12em; color: var(--ink-3); }
.c-stiegler .c3-works li > a { text-decoration-color: rgba(168, 50, 27, .45); text-underline-offset: 3px; }
.c-stiegler .talk { border-radius: 3px; background: var(--paper); border-color: var(--rule); }
.c-stiegler .c3-deeplink { color: var(--acc); }
.c-stiegler .c3-ask { border-style: solid; border-color: var(--rule); border-radius: 3px; background: rgba(255, 255, 255, .5); }

/* ---------- 机关的公共样式：贴在看片台上的卡片 ---------- */
.sg-mech { position: relative; margin: 26px 0 22px; padding: 18px 18px 16px; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 18px 34px -26px rgba(58, 34, 12, .6); }
.sg-mech::before, .sg-mech::after { content: ""; position: absolute; top: -9px; width: 58px; height: 18px; background: rgba(233, 222, 196, .8); }
.sg-mech::before { left: 18px; transform: rotate(-3deg); }
.sg-mech::after { right: 18px; transform: rotate(2.5deg); }
.sg-mech__k { margin: 0 0 12px; font: 700 12.5px/1.4 var(--mono); letter-spacing: .1em; color: var(--acc); }
.sg-mech__out { margin: 12px 0 0; min-height: 3.4em; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.sg-btn { min-height: 40px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink);
  font: 500 14px/1.2 var(--head); cursor: pointer; }
.sg-btn:hover { background: rgba(27, 26, 23, .06); }
.sg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sg-btn--ink { background: var(--ink); color: var(--paper); }
.sg-btn--ink:hover { background: #3a3630; }
.sg-btn--fire { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.sg-btn--fire:hover { background: #8f2914; }
.sg-btn--fire[aria-pressed="true"] { background: var(--gate); border-color: var(--gate); color: #ffd98c; }
.sg-btn--sq { min-width: 40px; padding: 8px 0; }
.sg-btn:disabled { opacity: .38; cursor: not-allowed; }

/* 剪辑台 */
.sg-cut { background: #ebe5d8; }
.sg-cut__gate { max-width: 480px; margin: 0 auto; padding: 12px; background: var(--gate); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.sg-cut__view { position: relative; width: 100%; aspect-ratio: 300 / 216; overflow: hidden; background: #1a1815; }
.sg-cut__g { position: absolute; inset: 0; background-image: url(../img/stiegler/retention-frames.webp); background-size: 400% 400%;
  background-position: calc(var(--fx, 0) * 100% / 3) calc(var(--fy, 0) * 100% / 3); opacity: 0; transition: opacity .12s; }
.sg-cut__g--0 { opacity: 1; }
.sg-cut.is-ret .sg-cut__g--1 { opacity: .4; mix-blend-mode: multiply; }
.sg-cut.is-ret .sg-cut__g--2 { opacity: .22; mix-blend-mode: multiply; }
.sg-cut.is-ret .sg-cut__g--0 { opacity: .8; mix-blend-mode: multiply; }
.sg-cut__no { position: absolute; right: 10px; bottom: 6px; font: 700 18px/1 var(--mono); color: #ffd98c; text-shadow: 0 0 4px rgba(0, 0, 0, .8); }
.sg-cut__view::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px rgba(0, 0, 0, .45); }
.sg-cut__ctl { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.sg-cut__strip { list-style: none; margin: 0; padding: 10px 10px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px;
  background-color: var(--film); background-image: radial-gradient(circle, var(--hole) 2.4px, transparent 2.9px), radial-gradient(circle, var(--hole) 2.4px, transparent 2.9px);
  background-size: 12px 10px, 12px 10px; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
.sg-cut__f { position: relative; display: block; width: 100%; min-height: 40px; aspect-ratio: 300 / 216; padding: 0; border: 0; background: var(--gate); cursor: pointer; overflow: hidden; }
.sg-cut__f i { position: absolute; inset: 0; background: url(../img/stiegler/retention-frames.webp) calc(var(--fx) * 100% / 3) calc(var(--fy) * 100% / 3) / 400% 400%; }
.sg-cut__f b { position: absolute; left: 3px; top: 1px; font: 700 10px/1.2 var(--mono); color: #ffd98c; text-shadow: 0 0 3px #000; }
.sg-cut__f[aria-pressed="false"] i { opacity: .16; filter: grayscale(1); }
.sg-cut__f[aria-pressed="false"]::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to top right, transparent calc(50% - 1.5px), var(--fire) calc(50% - 1.5px), var(--fire) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
  linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--fire) calc(50% - 1.5px), var(--fire) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.sg-cut__f.is-now { box-shadow: 0 0 0 2px #ffd98c; }
.sg-cut__f:focus-visible { outline: 2px solid #ffd98c; outline-offset: 2px; }

/* 爱比米修斯分配本领 */
.sg-epi__row { list-style: none; margin: 0; padding: 16px 12px 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  background-color: var(--film); background-image: radial-gradient(circle, var(--hole) 2.4px, transparent 2.9px), radial-gradient(circle, var(--hole) 2.4px, transparent 2.9px);
  background-size: 12px 11px, 12px 11px; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
.sg-epi__c { position: relative; text-align: center; }
.sg-epi__f { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--gate); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sg-epi__f b { font: 900 clamp(15px, 1.6vw, 20px)/1.25 var(--head); color: #f5ead2; opacity: 0; transform: scale(.7); transition: opacity .4s, transform .4s; padding: 0 4px; }
.sg-epi__c.is-got .sg-epi__f { background: radial-gradient(circle at 50% 45%, #5c4a33, var(--gate) 72%); }
.sg-epi__c.is-got .sg-epi__f b { opacity: 1; transform: none; }
.sg-epi__c small { display: block; margin-top: 6px; font: 500 12.5px/1.3 var(--head); color: var(--film-ink); }
.sg-epi__c--man .sg-epi__f { box-shadow: inset 0 0 0 1px rgba(243, 211, 156, .35); }
.sg-epi__c--man.is-empty .sg-epi__f::after { content: "空"; font: 400 22px/1 var(--gpc); color: rgba(243, 211, 156, .5); }
.sg-epi__pros { position: absolute; left: -6px; right: -6px; top: -12px; bottom: 22px; pointer-events: none; }
.sg-epi__pros em { position: absolute; font: 400 22px/1 var(--gpc); font-style: normal; color: #ffd98c; opacity: 0; transition: opacity .5s, transform .5s; text-shadow: 0 0 4px #000; }
.sg-epi__pros em:first-child { left: -12px; top: -2px; transform: translateY(8px) rotate(-10deg); }
.sg-epi__pros em:last-child { right: -14px; top: 46%; transform: translateX(-8px) rotate(8deg); font-size: 19px; }
.sg-epi__c--man.is-fire .sg-epi__pros em { opacity: 1; }
.sg-epi__c--man.is-fire .sg-epi__pros em:first-child { transform: rotate(-8deg); }
.sg-epi__c--man.is-fire .sg-epi__pros em:last-child { transform: rotate(6deg); }
.sg-epi__c--man.is-fire .sg-epi__f { box-shadow: 0 0 0 2px var(--fire), 0 0 18px rgba(217, 72, 31, .55); }
.sg-epi__bag { margin: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.sg-epi__bagk { margin-right: 4px; font: 700 12px/1.4 var(--mono); color: var(--ink-3); }
.sg-epi__bag span[data-q] { padding: 2px 10px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--head); font-weight: 700; transition: opacity .3s; }
.sg-epi__bag span[data-q].is-gone { opacity: .25; text-decoration: line-through; text-decoration-color: var(--fire); }
.sg-epi__ctl { display: flex; flex-wrap: wrap; gap: 8px; }

/* 三种记忆 */
.sg-m3__rows { display: grid; gap: 8px; }
.sg-m3__r { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; align-items: center; }
.sg-m3__t { margin: 0; font: 700 13.5px/1.4 var(--head); color: var(--ink-2); }
.sg-m3__v { position: relative; height: 44px; background: rgba(27, 26, 23, .05); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.sg-m3__v--gene i { position: absolute; inset: 8px 10px; background:
  repeating-linear-gradient(90deg, rgba(27, 26, 23, .55) 0 2px, transparent 2px 9px); -webkit-mask: linear-gradient(#000, #000); }
.sg-m3__v--gene i::before, .sg-m3__v--gene i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink-2); }
.sg-m3__v--gene i::before { top: 0; } .sg-m3__v--gene i::after { bottom: 0; }
.sg-m3__v--life i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(214, 138, 43, .35), rgba(214, 138, 43, .75)); }
.sg-m3.is-live .sg-m3__v--life i { width: 100%; transition: width 1.6s ease-out; }
.sg-m3__v--tool { height: 64px; }
.sg-m3__v--tool ol { list-style: none; margin: 0; padding: 4px 6px; display: flex; align-items: flex-end; gap: 0; height: 100%; }
.sg-m3__v--tool li { flex: 0 0 auto; width: 40px; height: 52px; margin-right: -6px; background: url(../img/stiegler/flints.webp) calc(var(--n) * 100% / 11) 50% / 1200% 100% no-repeat;
  animation: sg-drop .5s ease-out both; }
@keyframes sg-drop { from { opacity: 0; transform: translateY(-14px) rotate(-8deg); } to { opacity: 1; transform: none; } }
.sg-m3__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sg-m3__g { margin-left: auto; font: 400 23px/1 var(--gpc); color: var(--fire); }

/* 两条胶片：技术体系与社会体系 */
.sg-fr--speed .sg-two { position: relative; }
.sg-two__win { position: relative; aspect-ratio: 2 / 3; background: var(--gate); display: grid; grid-template-columns: 1fr .7fr 1fr; gap: 0; padding: 0 10%; overflow: hidden;
  box-shadow: 0 0 0 2px var(--gate); }
.sg-two__s { position: relative; overflow: hidden; background-color: #2f2418; }
.sg-two__s i { position: absolute; left: 14%; right: 14%; top: -200%; bottom: -200%; background: repeating-linear-gradient(to bottom, #cfc6b3 0 calc(var(--fh, 34px) - 6px), #2f2418 calc(var(--fh, 34px) - 6px) var(--fh, 34px)); }
.sg-two__s::before, .sg-two__s::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: radial-gradient(circle, var(--hole) 1.6px, transparent 2px) 0 0 / 6px 9px repeat-y; z-index: 1; }
.sg-two__s::before { left: 2px; } .sg-two__s::after { right: 2px; }
.sg-two__gap { display: grid; place-items: center; }
.sg-two__gap b { font: 400 24px/1 var(--gpc); color: #ffd98c; writing-mode: vertical-rl; letter-spacing: .2em; opacity: var(--gapo, .15); transform: scale(var(--gaps, .8)); transition: opacity .5s, transform .5s; }
.sg-two__lab { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; font: 700 12px/1.3 var(--mono); color: var(--film-ink); text-align: center; }
.sg-speed__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-speed__m { margin: 0 0 0 auto; display: flex; gap: 14px; font: 12.5px/1.4 var(--head); color: var(--ink-3); }
.sg-speed__m b { font: 700 15px/1 var(--mono); color: var(--acc); }

/* ---------- 页边的小胶片（目录，也是你的阅读记录）---------- */
.c-stiegler .c3toc { right: 14px; }
.c-stiegler .c3toc ol { gap: 0; padding: 8px 8px; background-color: var(--film);
  background-image: radial-gradient(circle, var(--hole) 1.8px, transparent 2.3px), radial-gradient(circle, var(--hole) 1.8px, transparent 2.3px);
  background-size: 6px 9px, 6px 9px; background-position: 2px 0, calc(100% - 2px) 0; background-repeat: repeat-y;
  box-shadow: 0 12px 26px -16px rgba(58, 34, 12, .7); transform: rotate(.6deg); }
.c-stiegler .c3toc li { position: relative; }
.c-stiegler .c3toc a { position: relative; display: block; width: 40px; height: 48px; color: var(--ink); }
.c-stiegler .c3toc a::before { content: ""; position: absolute; inset: 2px 4px; background: rgba(247, 243, 234, .12); }
.c-stiegler .c3toc a::after { content: none; }
.sg-th { position: absolute; inset: 2px 4px; background: url(../img/stiegler/thumbs.webp) calc(var(--tx) * 100% / 8) 0 / 900% 100%; opacity: 0; transition: opacity 1.4s ease, filter 1.4s ease; filter: sepia(1) brightness(1.6) contrast(.6); }
.c-stiegler .c3toc li.is-dev .sg-th { opacity: 1; filter: none; }
.c-stiegler .c3toc a b { position: absolute; left: 0; right: 0; bottom: 2px; font: 700 9px/1 var(--mono); color: rgba(243, 211, 156, .75); text-align: center; text-shadow: 0 0 3px #000; }
.c-stiegler .c3toc li.is-dev a b { opacity: 0; }
.c-stiegler .c3toc a span { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); max-width: none; width: max-content; max-width: 15em;
  padding: 5px 10px; background: var(--gate); color: #f2ead9; font: 500 13px/1.45 var(--head); white-space: normal; opacity: 0; pointer-events: none; transition: opacity .2s; }
.c-stiegler .c3toc a:hover span, .c-stiegler .c3toc a:focus-visible span { opacity: 1; max-width: 15em; }
.c-stiegler .c3toc a[aria-current="true"]::before, .c-stiegler .c3toc a[aria-current="true"] .sg-th { box-shadow: 0 0 0 2px #ffd98c; }
.sg-toc__k { margin: 0 0 6px; font: 700 10px/1.2 var(--mono); letter-spacing: .1em; color: var(--ink-3); text-align: center; }

/* ---------- 结尾 ---------- */
.c-stiegler .c3end { padding: calc(var(--bar) + 48px) var(--gut) 80px; }
.sg-end { max-width: var(--page); margin: 0 auto; }
.sg-mine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 56px; padding: 26px; background: var(--gate); color: #f2ead9;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8); }
.sg-mine[hidden] { display: none; }
.sg-mine__hd h3 { margin: 0 0 6px; font: 900 26px/1.3 var(--head); color: #fff4df; }
.sg-mine__hd p { margin: 0; max-width: 46em; font-size: 14.5px; line-height: 1.8; color: #cdbfa5; }
.sg-mine__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.sg-mine__view { position: relative; aspect-ratio: 2 / 3; background: #1d1a16; box-shadow: inset 0 0 0 1px rgba(243, 211, 156, .2); overflow: hidden; }
.sg-mine__view img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-mine__view img[hidden] { display: none; }
.sg-mine__view.is-fin::before { content: "FIN"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 34px/1 var(--gp); color: var(--fire); letter-spacing: .1em; background: #1d1a16; }
.sg-mine__view span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font: 500 12.5px/1.5 var(--head); color: #fff4df; }
.sg-mine__view span:empty { display: none; }
.sg-mine__strip { list-style: none; margin: 0 0 14px; padding: 12px 10px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 76px;
  background-color: var(--film); background-image: radial-gradient(circle, var(--hole) 2px, transparent 2.5px), radial-gradient(circle, var(--hole) 2px, transparent 2.5px);
  background-size: 10px 9px, 10px 9px; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
.sg-mine__strip li { position: relative; width: 36px; height: 52px; background: url(../img/stiegler/thumbs.webp) calc(var(--tx) * 100% / 8) 0 / 900% 100%; box-shadow: 0 0 0 1px #000; }
.sg-mine__strip li.is-now { box-shadow: 0 0 0 2px #ffd98c; }
.sg-mine__strip li b { position: absolute; left: 2px; top: 1px; font: 700 9px/1 var(--mono); color: #ffd98c; text-shadow: 0 0 3px #000; }
.sg-mine__ctl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sg-mine .sg-btn { border-color: rgba(243, 211, 156, .6); color: #f2ead9; }
.sg-mine .sg-btn:hover { background: rgba(243, 211, 156, .12); }
.sg-mine .sg-btn--fire { background: var(--acc); border-color: var(--acc); color: #fff8ef; }
.sg-mine .sg-mech__out { color: #d9ccb2; }
.c-stiegler .c3end h2 { margin: 0 0 18px; font: 900 clamp(30px, 3.6vw, 44px)/1.2 var(--head); }
.c-stiegler .c3end h3 { font-family: var(--head); font-weight: 700; }
.c-stiegler .c3-lin li { border: 0; border-radius: 0; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 10px 20px -18px rgba(58, 34, 12, .5); }
.c-stiegler .c3-lin b { font-family: var(--head); }
.sg-hui b::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 10.5c0-.8.9-1.2 1.6-.8.9.6.8 2-.1 2.6-1.4.9-3.2.1-3.7-1.4-.6-2 .8-3.9 2.8-4.3 2.6-.5 4.8 1.4 5.1 3.9.3 3.1-2.1 5.6-5.1 5.8-3.6.2-6.4-2.6-6.5-6.1' fill='none' stroke='%23a8321b' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.c-stiegler .c3-endgo .c3-btn--deep { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sg-fin { margin: 48px 0 0; text-align: center; font: 400 44px/1 var(--gp); color: var(--fire); letter-spacing: .12em; transform: rotate(-3deg); opacity: .85; }

/* ---------- 尺寸 ---------- */
@media (max-width: 1279px) {
  .c-stiegler { --reel: 330px; --hw: 18px; --hh: 13px; --pitch: 36px; --he: 11px;
    --holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='36'%3E%3Crect x='0' y='11' width='18' height='13' rx='3' fill='%23f7f3ea'/%3E%3C/svg%3E"); }
  .sg-hero { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .sg-hero__cols { grid-template-columns: minmax(0, 1fr); }
  .sg-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sg-band__books { grid-column: 1 / -1; }
  .c-stiegler .c3-books { columns: 2; column-gap: 30px; }
  .c-stiegler .c3-books li { break-inside: avoid; }
}
@media (min-width: 861px) and (max-width: 1400px) {
  .c-stiegler .c3hero, .c-stiegler .c3q, .c-stiegler .c3end { padding-right: calc(var(--gut) + 62px); }
}
@media (max-width: 1100px) {
  .c-stiegler { --reel: 290px; }
  .c-stiegler .c3toc { right: 6px; }
  .c-stiegler .c3toc a { height: 42px; }
  .c-stiegler .c3hero, .c-stiegler .c3q, .c-stiegler .c3end { padding-right: calc(var(--gut) + 52px); }
}
@media (max-width: 860px) {
  .c-stiegler { --reel: 100%; padding-bottom: 64px; }
  .sg-hero { display: flex; flex-direction: column; gap: 0; }
  .sg-hero__id { display: contents; }
  .sg-hero > * , .sg-hero__id > * { order: 5; }
  .sg-k { order: 1; } .sg-hero__id h1 { order: 2; } .sg-en { order: 3; } .sg-who { order: 4; } .sg-now { order: 4; } .sg-works { order: 4; }
  .sg-hero__cols { order: 5; } .sg-go { order: 6; }
  .sg-hero__reel { order: 7; width: min(300px, 76%); margin: 34px auto 0; }
  .c-stiegler .sg-shots .c3-qlist a { padding-top: 9px; padding-bottom: 9px; }
  .sg-film--hero { padding: 30px 46px 28px; }
  .sg-band { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 36px; }
  .c-stiegler .c3-books { columns: 1; }
  .sg-shot { display: block; min-height: 0; padding: calc(var(--bar) + 30px) 0 56px; }
  .sg-hd { padding-top: 0; }
  .sg-reel { float: right; width: 44%; max-width: 230px; margin: 6px 0 14px 18px; background: none; }
  .sg-reel .sg-edge, .sg-reel .sg-splice, .sg-reel .sg-num { display: none; }
  .sg-reel__in { position: static; padding: 0; }
  .sg-fr { padding: 18px 12px 0; }
  .sg-fr .sg-frame { margin: 0; }
  .sg-reel .sg-fr { background-color: var(--film); background-image: radial-gradient(circle, var(--hole) 2.2px, transparent 2.7px), radial-gradient(circle, var(--hole) 2.2px, transparent 2.7px);
    background-size: 8px 11px, 8px 11px; background-position: 3px 4px, calc(100% - 3px) 4px; background-repeat: repeat-y; padding: 14px 16px 12px; }
  .sg-fr figcaption { margin-top: 10px; font-size: 11.5px; line-height: 1.55; color: var(--film-ink); }
  .sg-shot--speed .sg-reel, .sg-shot--retention .sg-reel { float: none; width: 100%; max-width: 300px; margin: 6px auto 18px; }
  .sg-body { padding-bottom: 0; }
  .c-stiegler .c3q__lede { text-align: left; }
  .sg-slate b { font-size: 32px; }
  .sg-cut__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-epi__row { gap: 6px; padding: 14px 8px 12px; }
  .sg-m3__r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sg-mine { padding: 20px 16px; }
  .sg-mine__body { grid-template-columns: minmax(0, 1fr); }
  .sg-mine__view { width: min(220px, 60%); margin: 0 auto; }
  /* 小胶片挪到屏幕底边 */
  .c-stiegler .c3toc { display: block; top: auto; bottom: 0; left: 0; right: 0; transform: none; z-index: 850; padding-bottom: env(safe-area-inset-bottom); background: var(--film); }
  .c-stiegler .c3toc ol { flex-direction: row; justify-content: center; gap: 0; padding: 7px 4px; transform: none; box-shadow: none;
    background-size: 9px 6px, 9px 6px; background-position: 0 2px, 0 calc(100% - 2px); background-repeat: repeat-x; }
  .c-stiegler .c3toc a { width: 40px; height: 46px; }
  .c-stiegler .c3toc a::before, .c-stiegler .c3toc .sg-th { inset: 3px 4px; }
  .c-stiegler .c3toc a span { display: none; }
  .sg-toc__k { display: none; }
}
@media (max-width: 420px) {
  .sg-reel { width: 42%; margin-left: 14px; }
  .sg-epi__f b { font-size: 14px; }
  .sg-speed__m { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-film--hero, .c-stiegler .c3toc ol { transform: none; }
}