/* 雙人集點卡 — a shared notebook: two pens writing to each other, a punch card taped in. */
:root {
  --desk: #E9E4DA;
  --page: #FBF8F1;
  --rule: rgba(60, 92, 76, 0.13);
  --ink: #2A2522;
  --ink-soft: #5F564E;
  --stamp: #C8443A; /* stamp prints only */
  --pen-a: #2B3A55;   /* 小安: blue ballpoint */
  --pen-b: #3C5C4C;   /* 阿哲: green gel pen */
  --paper-1: #F6EACB; --print-1: #6A4631;
  --paper-2: #E5EAD5; --print-2: #3C5C4C;
  --tape-sage: rgba(168, 186, 136, 0.62);
  --tape-ochre: rgba(221, 190, 112, 0.66);
  --tape-grey: rgba(184, 174, 160, 0.6);
  --hand: "LXGW WenKai TC", "Kaiti TC", serif;
  --body: "Noto Sans TC", "PingFang TC", sans-serif;
  --t0: 17px; --t1: 22px; --t4: 44px; --t5: 60px;
  --line: 34px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--desk); color: var(--ink); font: 400 var(--t0)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, li { text-wrap: pretty; }
.page.mid { align-content: center; }

.book { max-width: 1200px; margin: 28px auto 40px; padding: 0 24px; }
.spread {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  background:
    linear-gradient(90deg, transparent calc(50% - 26px), rgba(60, 40, 20, 0.07) calc(50% - 2px), rgba(60, 40, 20, 0.16) 50%, rgba(60, 40, 20, 0.07) calc(50% + 2px), transparent calc(50% + 26px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line)),
    var(--page);
  background-position: 0 0, 0 18px, 0 0;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.12), 0 24px 40px -30px rgba(60, 40, 20, 0.5);
}
.spread + .spread { margin-top: 14px; }
.page { position: relative; padding: 52px 56px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; min-width: 0; }
.page.r { padding-left: 64px; }
.page.l { padding-right: 64px; }

.top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.brand { font: 700 var(--t1)/1 var(--hand); text-decoration: none; }
.brand small { font: 500 13px/1 var(--body); color: var(--ink-soft); margin-left: 8px; letter-spacing: 0.04em; }
.top a:not(.brand) { font-size: 14px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }

.date { font: 400 15px/1 var(--hand); color: var(--ink-soft); letter-spacing: 0.08em; }
h1, h2 { font-family: var(--hand); font-weight: 700; color: var(--ink); }
h1 { font-size: var(--t5); line-height: 1.15; }
h2 { font-size: var(--t4); line-height: 1.2; }
.lead { font-size: var(--t1); line-height: 1.6; color: var(--ink-soft); }
.sub { font-size: var(--t0); color: var(--ink-soft); }
.proof { font-size: 14px; color: var(--ink-soft); letter-spacing: 0.02em; }
.proof span + span::before { content: "・"; }

/* voices */
.thread { display: grid; gap: 16px; }
.v { font: 400 var(--t1)/1.5 var(--hand); max-width: 22em; position: relative; }
.v::before { display: block; font: 400 13px/1 var(--body); letter-spacing: 0.06em; margin-bottom: 4px; opacity: 0.8; }
.v.a { color: var(--pen-a); transform: rotate(-0.6deg); }
.v.a::before { content: "小安"; }
.v.b { color: var(--pen-b); justify-self: end; text-align: right; transform: rotate(0.62deg); }
.v.b::before { content: "阿哲"; }
.v .stamp { display: inline-block; width: 40px; height: 40px; vertical-align: -12px; margin-left: 6px; transform: rotate(var(--r, 0deg)); }

/* the unticked list, written straight on the ruled page */
.todo { list-style: none; display: grid; gap: 14px; font: 400 var(--t1)/1.45 var(--hand); color: var(--pen-a); }
.todo li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.todo li::before {
  content: ""; width: 20px; height: 20px; margin-top: 0.28em;
  border: 1.6px solid var(--pen-a); border-radius: 3px; transform: rotate(-3deg); opacity: 0.85;
}
.todo li:nth-child(2)::before { transform: rotate(2deg); }
.todo small { display: block; font: 400 14px/1.3 var(--hand); color: var(--ink-soft); margin-top: 2px; }

/* punch card, taped in */
.pc {
  position: relative; border-radius: 11px; padding: 18px 20px 16px; background: var(--paper);
  box-shadow: 0 0 0 0.75px rgba(60, 40, 20, 0.2);
  display: grid; gap: 12px; transform: rotate(var(--tilt, 0deg));
}
.pc::before { content: ""; position: absolute; inset: 6px; border: 1.25px solid var(--print); border-radius: 7px; opacity: 0.5; pointer-events: none; }
.c1 { --paper: var(--paper-1); --print: var(--print-1); }
.c2 { --paper: var(--paper-2); --print: var(--print-2); }
.pc .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pc .t { font: 700 var(--t1)/1.25 var(--hand); }
.pc .count { font: 700 15px/1 var(--hand); color: var(--ink-soft); white-space: nowrap; }
.pc .count b { font-size: 30px; color: var(--ink); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--print); display: grid; place-items: center;
  font: 400 14px/1 var(--hand); color: var(--print);
}
.slot.reward { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--print); }
.slot.on { border-color: transparent; color: transparent; }
.slot.on::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--print); opacity: 0.35; }
.slot .stamp { position: absolute; width: 48px; height: 48px; left: -2px; top: -2px; transform: rotate(var(--r, 0deg)); }
.js [data-stamp]:not(.in) .slot.fresh .stamp { opacity: 0; transform: rotate(var(--r, 0deg)) scale(1.6); }
.slot.on .stamp { transition: opacity 0.18s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: 0.3s; }
.slots.five { display: grid; grid-template-columns: repeat(5, 44px); justify-content: space-between; row-gap: 10px; }
.reward-line { font-size: 14px; color: var(--ink-soft); }
.reward-line b { color: var(--ink); font-weight: 700; }
.slots > .stamp { width: 60px; height: 60px; transform: rotate(var(--r, 0deg)); }

.tape { position: absolute; height: 24px; background: var(--tape); z-index: 3; clip-path: polygon(2% 0, 98% 4%, 100% 50%, 97% 100%, 1% 96%, 0 48%); }
.tape.sage { --tape: var(--tape-sage); }
.tape.ochre { --tape: var(--tape-ochre); }
.tape.grey { --tape: var(--tape-grey); }

.sticker { position: absolute; z-index: 4; height: auto; filter: drop-shadow(0 1px 1px rgba(40, 30, 20, 0.3)); pointer-events: none; }

/* one app screenshot, taped in like a printed photo */
.snap { position: relative; width: 250px; justify-self: center; transform: rotate(var(--tilt, 0deg)); }
.snap img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.14), 0 16px 26px -22px rgba(40, 30, 20, 0.55); }
.snap .tape { width: 84px; }
.snap .tape.tl { left: -28px; top: 16px; transform: rotate(-38deg); }
.snap .tape.tr { right: -28px; top: 16px; transform: rotate(38deg); }

/* waitlist */
.wl { display: flex; flex-wrap: wrap; gap: 10px; }
.wl input {
  flex: 1 1 200px; min-width: 0; border: 0; border-bottom: 1.5px solid var(--pen-a); border-radius: 0;
  padding: 12px 4px; font: 400 var(--t1)/1.2 var(--hand); color: var(--pen-a); background: transparent;
}
.wl input::placeholder { color: rgba(43, 58, 85, 0.55); }
.wl input:focus { outline: none; border-bottom-width: 2.5px; }
.wl button {
  flex: none; border: 0; border-radius: 12px; background: var(--ink); color: #F6EACB;
  font: 700 16px/1.2 var(--body); letter-spacing: 0.04em; padding: 14px 22px; cursor: pointer;
}
.wl button:focus-visible { outline: 2px solid var(--pen-a); outline-offset: 3px; }
.wl button:disabled { opacity: 0.6; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; left: -9999px; }
.fine { font-size: 14px; color: var(--ink-soft); }
.ok, .err { display: none; font-weight: 700; }
.ok { color: var(--pen-b); }
.err { color: #7A3B2E; }

footer { max-width: 1200px; margin: 0 auto; padding: 0 24px 40px; font-size: 13px; color: var(--ink-soft); display: flex; gap: 18px; flex-wrap: wrap; }
footer a { text-decoration: none; }

/* universe page */
.page.solo { grid-column: 1 / -1; }
.spread.one { grid-template-columns: minmax(0, 1fr); background:
  repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line)),
  var(--page); background-position: 0 18px, 0 0; }
.cast { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.who { display: grid; gap: 8px; align-content: start; position: relative; }
.who img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.who h2 { font-size: 30px; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.who h2 small { font: 500 14px/1 var(--body); color: var(--ink-soft); }
.who h2 .stamp { width: 36px; height: 36px; margin-left: auto; flex: none; transform: rotate(var(--r, -8deg)); }
.who p { font: 400 18px/1.55 var(--hand); color: var(--pen-a); }
.who .trait { font: 400 14px/1.5 var(--body); color: var(--ink-soft); }

@media (max-width: 1080px) {
  .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --t5: 38px; --t4: 30px; --t1: 19px; --t0: 16px; --line: 30px; --rule: rgba(60, 92, 76, 0.08); }
  .book { margin: 12px auto 28px; padding: 0 12px; }
  .spread { grid-template-columns: minmax(0, 1fr); background:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line)),
    var(--page); background-position: 0 12px, 0 0; }
  .page, .page.r, .page.l { padding: 26px 20px 30px; gap: 18px; }
  .page + .page { padding-top: 6px; }
  .hero.page { gap: 12px; padding-top: 18px; padding-bottom: 20px; }
  .hero .lead { font-size: 17px; line-height: 1.55; }
  .hero-card.page { padding-top: 14px; }
  .v { font-size: 18px; }
  .todo { font-size: 18px; }
  .wl input { flex-basis: 150px; }
  .wl button { padding: 13px 16px; }
  .slot { width: 40px; height: 40px; }
  .slot .stamp { width: 44px; height: 44px; }
  .slots.five { grid-template-columns: repeat(5, 40px); }
  .page.has-st { padding-bottom: 112px; }
  .m-first { order: -1; }
  .m-first + .page, .page + .m-first { padding-top: 26px; }
  .page.mid { padding-bottom: 64px; }
  .snap { width: 220px; }
  .cast { gap: 28px 16px; }
  .who h2 { font-size: 24px; flex-wrap: wrap; }
  .who h2 .stamp { width: 30px; height: 30px; }
  .who p { font-size: 16px; }
}
@media (max-width: 360px) {
  .wl button { flex: 1 1 100%; }
}