:root{--ink:#050505;--ink-2:#0b0b0b;--fg:#f2f0eb;--fg-soft:#a9a69f;--mute:#6b6862;--line:#1e1e1e;--red:#d6231b}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:"Archivo","Noto Sans TC","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--fg)}a:hover{color:var(--red)}
.grain{pointer-events:none;position:fixed;inset:0;z-index:200;mix-blend-mode:overlay;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:240px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-soft)}
.mono.red{color:var(--red)}
.zh{font-family:"Noto Sans TC",sans-serif;font-weight:300;line-height:2.15;letter-spacing:.055em;text-wrap:pretty}
.en-d{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase}

/* progress */
.prog{position:fixed;top:0;left:0;height:1px;background:var(--red);z-index:210;width:0;transition:width .1s linear}

/* frame ticks */
.tick{position:fixed;z-index:150;width:10px;height:10px;border:1px solid rgba(242,240,235,.28);pointer-events:none;mix-blend-mode:difference}
.tick.tl{top:20px;left:20px;border-right:0;border-bottom:0}
.tick.tr{top:20px;right:20px;border-left:0;border-bottom:0}
.tick.bl{bottom:20px;left:20px;border-right:0;border-top:0}
.tick.br{bottom:20px;right:20px;border-left:0;border-top:0}

/* reveal */
.rv{opacity:1;transform:none;transition:opacity 1.3s cubic-bezier(.16,.8,.24,1),transform 1.5s cubic-bezier(.16,.8,.24,1)}
.js-rv .rv{opacity:0;transform:translateY(26px)}
.js-rv .rv.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* ===== HERO ===== */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero .bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.8)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(5,5,5,.15) 0%,rgba(5,5,5,.78) 72%),linear-gradient(180deg,rgba(5,5,5,.7) 0%,transparent 22%,transparent 62%,rgba(5,5,5,.95) 100%)}
.hero-in{position:relative;z-index:3;text-align:center;padding:0 32px;display:flex;flex-direction:column;align-items:center;gap:44px}
.hero-mark{width:min(620px,78vw);opacity:.97}
.hero h1{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.07em;line-height:1.5;font-size:clamp(11px,1.15vw,17px);color:var(--fg-soft)}
.hero h1 .l2{display:block}
.hero .rule{width:1px;height:48px;background:linear-gradient(180deg,rgba(242,240,235,.5),transparent)}
.hero .cue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero .cue .bar{width:1px;height:34px;background:rgba(242,240,235,.3);position:relative;overflow:hidden}
.hero .cue .bar::after{content:"";position:absolute;top:-100%;left:0;width:1px;height:100%;background:var(--red);animation:drop 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes drop{0%{top:-100%}60%,100%{top:100%}}

/* ===== full-bleed movement ===== */
.mv{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.mv .ph{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;filter:grayscale(1) contrast(1.04) brightness(.82);will-change:transform}
.mv > picture,.mani > picture{display:block}
.mv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.26) 26%,rgba(5,5,5,.26) 74%,rgba(5,5,5,.9) 100%)}
.mv .body{position:relative;z-index:3;width:100%;padding:120px 7vw}
.mv .slot{width:fit-content;max-width:100%}
.mv .slot.right{margin-left:auto}
.mv .slot.center{margin:0 auto;text-align:center;width:fit-content;max-width:100%}
.mv .idx{display:inline-flex;align-items:center;gap:12px;margin-bottom:30px;padding:8px 15px;background:rgba(4,4,4,.88);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mv .idx .mono.red{color:#f4483c}
.mv .idx .ln{width:26px;height:1px;background:#f4483c}
.mv .zh{font-size:clamp(16px,1.22vw,20px);color:#eeebe5;text-shadow:0 2px 24px rgba(0,0,0,.92),0 1px 3px rgba(0,0,0,.8)}
.mv .zh + .zh{margin-top:1.5em}
.mv .en-big{font-size:clamp(28px,3.2vw,54px);line-height:1.08;text-shadow:0 2px 34px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.mv .en-big em{display:block;margin-top:.6em}
.mv .en-big em{font-style:italic;color:var(--fg)}
.op-top{object-position:center top!important}
.op-bottom{object-position:center bottom!important}
/* statement (no photo) */
.st{position:relative;padding:22vh 7vw;background:var(--ink)}
.st .slot{max-width:900px;margin:0 auto}

/* ===== ID CARD ===== */
.cardsec{position:relative;padding:18vh 7vw;background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.cardsec .head{max-width:760px;margin:0 auto 72px;text-align:center}
.cardsec .head .zh{font-size:clamp(16px,1.2vw,19px);color:#e9e6e0;margin-top:26px}
.card-wrap{display:flex;justify-content:center;perspective:1600px}
.card{width:min(620px,88vw);aspect-ratio:1.586/1;background:linear-gradient(158deg,#131313 0%,#090909 58%,#0f0f0f 100%);border:1px solid #2a2a2a;position:relative;padding:38px 40px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02) inset;transform:rotateX(6deg) rotateY(-7deg);transition:transform 1.1s cubic-bezier(.16,.8,.24,1)}
.card:hover{transform:rotateX(0deg) rotateY(0deg)}
.card::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.card .mark{width:132px;opacity:.95}
.card .tier{text-align:right}
.card .tier .t1{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.26em;color:var(--mute);text-transform:uppercase}
.card .tier .t2{font-family:"Archivo",sans-serif;font-style:italic;font-weight:800;font-size:15px;letter-spacing:.02em;margin-top:6px;text-transform:uppercase}
.card .num{font-family:"JetBrains Mono",monospace;font-size:clamp(30px,3.6vw,50px);letter-spacing:.06em;color:var(--red);line-height:1}
.card .numlab{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.26em;color:var(--mute);text-transform:uppercase;margin-bottom:12px}
.card .fields{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;border-top:1px solid #232323;padding-top:18px}
.card .f .k{font-family:"JetBrains Mono",monospace;font-size:8.5px;letter-spacing:.24em;color:var(--mute);text-transform:uppercase}
.card .f .v{font-family:"Noto Sans TC",sans-serif;font-weight:300;font-size:13px;letter-spacing:.04em;color:#dedbd5;margin-top:7px}
.card-note{text-align:center;margin-top:48px}

/* ===== MANIFESTO ===== */
.mani{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.mani .ph{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.62)}
.mani::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.9),rgba(5,5,5,.5) 40%,rgba(5,5,5,.5) 60%,rgba(5,5,5,.95))}
.mani .body{position:relative;z-index:3;padding:120px 7vw;display:flex;flex-direction:column;gap:.1em}
.mani .ln{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.025em;line-height:1;font-size:clamp(32px,6.2vw,104px);text-shadow:0 4px 50px rgba(0,0,0,.7)}
.mani .ln em{font-style:italic;color:var(--red)}

/* ===== FORM ===== */
.formsec{position:relative;padding:16vh 7vw 14vh;background:var(--ink);border-top:1px solid var(--line)}
.formsec .head{max-width:760px;margin:0 auto 64px;text-align:center}
.formsec .head h2{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,50px);line-height:1.05;margin-top:24px}
.formsec .head .zh{font-size:16px;color:var(--fg-soft);margin-top:24px}
.frame{max-width:860px;margin:0 auto;border:1px solid #232323;background:#0a0a0a;position:relative}
.frame .bar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #1c1c1c}
.frame .bar .dotrow{display:flex;gap:6px;align-items:center}
.frame .bar .dot{width:5px;height:5px;border-radius:50%;background:#2e2e2e}
.frame .bar .dot.on{background:var(--red)}
.frame .inner{padding:8px}
.frame iframe{display:block;width:100%;border:0;background:transparent}
.frame .foot{display:flex;justify-content:space-between;padding:14px 20px;border-top:1px solid #1c1c1c}

/* post-submit confirmation — replaces the tall iframe so the page doesn't end in a void */
.done{display:none;max-width:860px;margin:0 auto;border:1px solid #232323;background:#0a0a0a;padding:72px 48px 56px;text-align:center}
.done.on{display:block;animation:doneIn .9s cubic-bezier(.16,.8,.24,1) both}
@keyframes doneIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.done .mark{width:min(360px,66%);margin:0 auto 44px;opacity:.96}
.done h3{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(26px,3vw,44px);line-height:1.05}
.done .zh{font-family:"Noto Sans TC",sans-serif;font-weight:300;font-size:16px;line-height:2.15;letter-spacing:.055em;color:var(--fg-soft);margin-top:28px}
.done-foot{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:48px;padding-top:26px;border-top:1px solid #1c1c1c}
.done-back{display:block;margin:22px auto 0;background:none;border:0;padding:10px 6px;color:var(--fg-soft);cursor:pointer;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:none;text-decoration:underline;text-underline-offset:4px;transition:color .25s}
.done-back:hover{color:var(--fg)}

/* ===== CLOSING ===== */
.end{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18vh 7vw;overflow:hidden}
.end::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,#101010 0%,#050505 62%)}
.end .body{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:clamp(64px,9vh,120px)}
.end h2{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;line-height:1.25;font-size:clamp(18px,2vw,30px);max-width:22ch;color:var(--fg-soft)}
.end .mark{width:min(620px,80vw);opacity:.97}
.end .meta{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}

/* ============ RESPONSIVE ============ */

/* tablet / small laptop */
@media(max-width:1100px){
  .mv .body{padding:110px 6vw}
  .card{width:min(560px,90vw)}
}

/* ---- MOBILE ---- */
@media(max-width:820px){
  .tick{display:none}

  /* authored desktop line-breaks would orphan on a narrow column: let copy reflow */
  .mv .zh br,.cardsec .zh br{display:none}

  .hero{height:100svh;min-height:560px}
  .hero-in{gap:34px;padding:0 24px}
  .hero-mark{width:min(420px,80vw)}
  .hero h1{font-size:13px;letter-spacing:.09em;line-height:1.75}
  .hero h1 .l2{display:block}
  .hero .rule{height:38px}
  .hero .cue{bottom:26px}

  /* MOBILE-FIRST PHOTO HANDLING
     Desktop uses each plate as a full-bleed 100svh backdrop. On a phone that means
     cover-cropping a ~2:1 plate into a ~0.49:1 box — a narrow centre slice upscaled ~4x.
     Instead the photo becomes a band at its own ratio and the copy sits below on solid black. */
  .mv{display:block;min-height:0}
  .mv > picture,.mani > picture{display:block;width:100%;line-height:0}
  .mv .ph{position:static;inset:auto;display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;transform:none!important;filter:grayscale(1) contrast(1.04) brightness(.94)}
  .mv .ph.portrait{aspect-ratio:4/5}
  .mv::after{display:none}
  .mv .body{position:relative;padding:44px 24px 92px;background:var(--ink)}
  .mv .body::before{content:"";position:absolute;top:-44px;left:0;right:0;height:44px;background:linear-gradient(180deg,rgba(5,5,5,0),var(--ink));pointer-events:none}
  .mv .slot,.mv .slot.right,.mv .slot.center{width:auto;max-width:none;margin:0;text-align:left}
  .mv .idx{margin-bottom:24px;padding:0;gap:10px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mv .idx .ln{width:22px}
  .mv .slot.center .idx .ln:last-child{display:none}
  .mv .zh{font-size:16px;line-height:2.05;letter-spacing:.04em;text-shadow:none}
  .mv .zh + .zh{margin-top:1.3em}
  .mv .en-big{font-size:clamp(17px,4.8vw,40px);line-height:1.14;text-shadow:none}
  .mv .en-big em{margin-top:.5em}

  .st{padding:104px 24px}

  /* ID card: fixed credit-card ratio cannot hold the content at 330px wide */
  .cardsec{padding:104px 24px}
  .cardsec .head{margin-bottom:52px}
  .cardsec .head .zh{font-size:16px;line-height:2.05;text-align:left}
  .card{width:100%;aspect-ratio:auto;padding:26px 22px;gap:34px;transform:none}
  .card .top{align-items:center}
  .card .mark{width:112px}
  .card .tier .t2{font-size:13px}
  .card .num{font-size:34px}
  .card .fields{grid-template-columns:1fr;gap:16px}
  .card-note{margin-top:32px}

  .mani{display:block;min-height:0}
  .mani .ph{position:static;inset:auto;display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;transform:none!important;filter:grayscale(1) contrast(1.04) brightness(.94)}
  .mani::after{display:none}
  .mani .body{position:relative;padding:52px 24px 96px;background:var(--ink);text-align:left;align-items:flex-start}
  .mani .body::before{content:"";position:absolute;top:-44px;left:0;right:0;height:44px;background:linear-gradient(180deg,rgba(5,5,5,0),var(--ink));pointer-events:none}
  .mani .ln{font-size:clamp(24px,7.2vw,52px);text-shadow:none}

  .formsec{padding:104px 20px}
  .formsec .head{margin-bottom:44px}
  .formsec .head h2{font-size:clamp(26px,7.4vw,38px)}
  .formsec .head .zh{font-size:15px;line-height:2}
  .frame .inner{padding:4px}
  .frame iframe{height:2900px}
  .frame .bar,.frame .foot{padding:12px 14px}
  .done{padding:52px 22px 40px}
  .done .mark{width:74%;margin-bottom:34px}
  .done .zh{font-size:15.5px;line-height:2.05}
  .done .zh br{display:none}
  .done-foot{gap:14px;margin-top:36px}
  .done-back{margin-top:18px;min-height:44px;font-size:13px;letter-spacing:.1em}

  .end{min-height:100svh;padding:16vh 24px}
  .end .body{gap:56px}
  .end h2{font-size:16px;line-height:1.7;max-width:24ch}
  .end .mark{width:min(420px,80vw)}
  .end .meta{gap:16px 20px}
}

/* ---- SMALL PHONES ---- */
@media(max-width:480px){
  .mono{font-size:9.5px;letter-spacing:.18em}
  .hero-mark{width:84vw}
  .hero h1{font-size:11.5px}
  .mv .body{padding:44px 20px 84px}
  .mv .zh{font-size:15.5px}
  .st,.cardsec{padding-left:20px;padding-right:20px}
  .mani .body{padding:48px 20px 88px}
  .card .mark{width:96px}
  .card .num{font-size:28px;letter-spacing:.04em}
  .card .tier .t1{font-size:8px}
  .frame iframe{height:3300px}
  .end .mark{width:84vw}
}

/* ---- LANDSCAPE PHONES ---- */
@media(max-height:520px) and (orientation:landscape){
  .hero,.end{min-height:auto;height:auto}
  .hero{padding:96px 0 72px}
}

@media(prefers-reduced-motion:reduce){
  .rv{transition:none!important}
  .hero .cue .bar::after{animation:none}
}