/* Kaitu 開途 — Join Kaitu print pieces: the recruitment pamphlet (/join/pamphlet, 4 × A4) and the internship flyer
   (/join/flyer, 1 × A4). Sheets are exact A4 on screen and in print; tools/build-recruiting-kit.mjs renders the PDFs. */
:root { --paper: #F4EEE3; --paper-2: #ECE3D3; --paper-3: #E0D3BC; --sheet: #FFFDF9; --ink: #1A1712; --ink-2: #3A342A; --muted: #7A7162; --line: rgba(26,23,18,.14);
  --seal: #C8372D; --seal-deep: #9E2A22; --seal-tint: #F4D9D2; --jade: #2E5E4E; --indigo: #1F3552; --night: #14120E;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Geist', ui-sans-serif, system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; --cjk: 'Noto Serif TC', 'Songti TC', serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.jp-page { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; }
em { font-style: italic; color: var(--seal); }

/* ---------- screen chrome ---------- */
.jp-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px clamp(12px, 3vw, 28px); background: rgba(244,238,227,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.jp-bar a, .jp-bar button { font: 500 13.5px/1 var(--sans); color: var(--ink); text-decoration: none; border: 0; background: none; cursor: pointer; }
.jp-bar__back { padding: 10px 12px; border-radius: 999px; }
.jp-bar__back:hover { background: rgba(26,23,18,.06); }
.jp-bar__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.jp-bar__btn { padding: 11px 18px !important; border-radius: 999px; border: 1px solid rgba(26,23,18,.22) !important; }
.jp-bar__btn--print { background: var(--seal) !important; color: #fff !important; border-color: var(--seal) !important; transition: background .2s, transform .2s; }
.jp-bar__btn--print:hover { background: var(--seal-deep) !important; transform: translateY(-1px); }
.jp-bar a:focus-visible, .jp-bar button:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.jp-sheets { display: grid; justify-content: center; gap: 28px; padding: clamp(16px, 4vw, 48px) 12px 80px; }
.jp-sheet { position: relative; width: 210mm; height: 297mm; overflow: hidden; background: var(--sheet); padding: 16mm 16mm 14mm; zoom: var(--jp-zoom, 1);
  box-shadow: 0 1px 1px rgba(26,23,18,.08), 0 24px 60px -24px rgba(26,23,18,.35); animation: jpIn .8s cubic-bezier(.16,1,.3,1) both; }
.jp-sheet:nth-child(2) { animation-delay: .06s; } .jp-sheet:nth-child(3) { animation-delay: .12s; } .jp-sheet:nth-child(4) { animation-delay: .18s; }
@keyframes jpIn { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .jp-sheet { animation: none; } }
@media (max-width: 640px) { .jp-bar__title { display: none; } .jp-bar { justify-content: space-between; } }

/* ---------- shared type ---------- */
.jp-kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 8pt/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--seal); }
.jp-kicker::before { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .7; }
.jp-kicker--light { color: #F2B8A8; }
.jp-word { font: 400 20pt/1 var(--serif); letter-spacing: -.02em; }
.jp-word i { font: 500 10pt/1 var(--cjk); font-style: normal; letter-spacing: .25em; color: var(--seal); margin-left: 6px; vertical-align: middle; }
.jp-chop { width: 15mm; height: 15mm; }
.jp-chop--sm { width: 8mm; height: 8mm; }
.jp-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 5mm; border-bottom: 1px solid var(--ink); position: relative; }
.jp-head::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 12mm; height: 2px; background: var(--seal); }
.jp-pg { font: 500 8pt/1 var(--mono); color: var(--muted); letter-spacing: .1em; }
.jp-inside h2, .jp-back h2 { font: 400 30pt/1.02 var(--serif); letter-spacing: -.03em; margin-top: 10mm; }
.jp-lede { margin-top: 6mm; font-size: 12pt; line-height: 1.55; color: var(--ink-2); max-width: 150mm; }
.jp-g { display: grid; place-items: center; width: 11mm; height: 11mm; border-radius: 50%; background: var(--seal-tint); color: var(--seal-deep); font: 900 13pt/1 var(--cjk); }
.jp-g--big { width: 26mm; height: 26mm; font-size: 36pt; background: var(--seal); color: #fff; flex: none; }

/* ---------- page 1: cover ---------- */
.jp-cover { padding: 0; background: #F0E4CC; display: grid; grid-template-rows: auto 1fr auto; }
.jp-cover__art { position: absolute; inset: 0 0 32% 0; }
.jp-cover__art canvas { width: 100%; height: 100%; display: block; }
.jp-cover__top { position: relative; display: flex; align-items: center; gap: 4mm; padding: 14mm 16mm 0; }
.jp-cover__copy { position: absolute; left: 0; right: 0; bottom: 18mm; padding: 12mm 16mm 0; background: var(--sheet); height: 32%; }
.jp-cover__copy::before { content: ''; position: absolute; left: 0; right: 0; top: -5mm; height: 6mm; background: var(--sheet); clip-path: polygon(0 60%, 4% 30%, 9% 55%, 15% 20%, 22% 50%, 30% 25%, 38% 55%, 46% 15%, 55% 45%, 63% 25%, 71% 55%, 80% 20%, 88% 50%, 95% 25%, 100% 45%, 100% 100%, 0 100%); }
.jp-cover h1 { font: 400 52pt/.96 var(--serif); letter-spacing: -.04em; margin-top: 6mm; }
.jp-cover__copy p { margin-top: 6mm; font-size: 13pt; line-height: 1.5; color: var(--ink-2); max-width: 140mm; }
.jp-cover__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 18mm; display: flex; justify-content: space-between; align-items: center; padding: 0 16mm; background: var(--seal); color: #fff; font: 500 9pt/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- page 2 ---------- */
.jp-why { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm 9mm; margin-top: 10mm; }
.jp-why > div, .jp-teams > div { display: grid; grid-template-columns: 11mm 1fr; column-gap: 4mm; row-gap: 1.5mm; align-content: start; }
.jp-why b, .jp-teams b { font: 400 13.5pt/1.15 var(--serif); letter-spacing: -.01em; align-self: center; }
.jp-why p, .jp-teams p { grid-column: 2; font-size: 9.5pt; line-height: 1.55; color: var(--ink-2); }
.jp-quoteband { margin-top: 14mm; display: flex; gap: 8mm; align-items: center; padding: 8mm; border-radius: 4mm; background: var(--paper-2); }
.jp-quoteband p { font: italic 400 14pt/1.35 var(--serif); letter-spacing: -.01em; }
.jp-quoteband small { display: block; margin-top: 3mm; font: 500 7.5pt/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- page 3 ---------- */
.jp-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 9mm; margin-top: 8mm; }
.jp-intern { position: absolute; left: 0; right: 0; bottom: 0; height: 128mm; display: grid; grid-template-columns: 74mm 1fr; background: var(--night); color: #F4EEE3; }
.jp-intern__art { position: relative; }
.jp-intern__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.jp-intern__copy { padding: 11mm 14mm 10mm 10mm; }
.jp-intern h3 { font: 400 22pt/1.02 var(--serif); letter-spacing: -.02em; margin-top: 4mm; }
.jp-intern h3 em { color: #F2B8A8; }
.jp-intern ul { list-style: none; padding: 0; margin-top: 5mm; display: grid; gap: 3mm; }
.jp-intern li { font-size: 9pt; line-height: 1.5; color: rgba(244,238,227,.75); padding-left: 4mm; position: relative; }
.jp-intern li::before { content: ''; position: absolute; left: 0; top: 1.6mm; width: 1.6mm; height: 1.6mm; background: var(--seal); transform: rotate(45deg); }
.jp-intern li b { color: #F4EEE3; font-weight: 600; }

/* ---------- page 4 ---------- */
.jp-steps { list-style: none; padding: 0; margin-top: 10mm; display: grid; grid-template-columns: 1fr 1fr; gap: 8mm 10mm; }
.jp-steps li { display: grid; gap: 2mm; }
.jp-steps__n { height: 7mm; display: inline-flex; align-items: center; gap: 3mm; font: 500 9pt/1 var(--mono); letter-spacing: .12em; color: var(--seal); }
.jp-steps__n i { font: 900 14pt/1 var(--cjk); font-style: normal; color: var(--ink); }
.jp-steps b { font: 400 16pt/1.1 var(--serif); letter-spacing: -.015em; }
.jp-steps p { font-size: 9.5pt; line-height: 1.55; color: var(--ink-2); }
.jp-apply { position: absolute; left: 16mm; right: 16mm; bottom: 26mm; display: grid; grid-template-columns: 1fr 44mm; gap: 8mm; align-items: center; padding: 10mm; border-radius: 4mm; background: var(--seal); color: #fff; }
.jp-apply h3 { font: 400 22pt/1.04 var(--serif); letter-spacing: -.02em; margin-top: 3mm; }
.jp-apply h3 em { color: var(--ink); }
.jp-apply p { margin-top: 3mm; font-size: 10pt; line-height: 1.5; color: rgba(255,255,255,.9); }
.jp-apply .jp-kicker--light { color: #fff; }
.jp-small { font-size: 8.5pt !important; opacity: .85; }
.jp-apply__qr { display: grid; justify-items: center; gap: 2mm; background: #fff; border-radius: 3mm; padding: 3mm; color: var(--ink); font: 500 7pt/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.jp-qr { width: 100%; height: auto; display: block; }
.jp-foot { position: absolute; left: 16mm; right: 16mm; bottom: 9mm; display: flex; align-items: center; gap: 3mm; font: 500 7.5pt/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- flyer ---------- */
.jp-flyer { padding: 14mm 16mm; }
.jp-flyer__top { display: flex; align-items: center; gap: 4mm; }
.jp-flyer__tag { margin-left: auto; padding: 2.5mm 4mm; border-radius: 99px; background: var(--seal-tint); color: var(--seal-deep); font: 500 8pt/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.jp-flyer__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-top: 7mm; align-items: center; }
.jp-flyer h1 { font: 400 36pt/.98 var(--serif); letter-spacing: -.035em; margin-top: 4mm; }
.jp-flyer__copy p { margin-top: 5mm; font-size: 11pt; line-height: 1.5; color: var(--ink-2); }
.jp-flyer__art { position: relative; height: 66mm; border-radius: 4mm; overflow: hidden; }
.jp-flyer__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.jp-flyer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 9mm; margin-top: 7mm; }
.jp-flyer__grid .jp-steps__n { height: auto; }
.jp-flyer__grid > div { display: grid; gap: 1.5mm; padding-top: 4mm; border-top: 1px solid var(--line); }
.jp-flyer__grid b { font: 400 14pt/1.1 var(--serif); }
.jp-flyer__grid p { font-size: 9pt; line-height: 1.5; color: var(--ink-2); }
.jp-flyer__rot { display: flex; align-items: center; gap: 6mm; margin-top: 6mm; padding: 4mm 6mm; border: 1px dashed rgba(26,23,18,.3); border-radius: 3mm; }
.jp-flyer__rot ol { list-style: none; padding: 0; display: flex; gap: 6mm; flex-wrap: wrap; font-size: 10pt; }
.jp-flyer__rot li { display: inline-flex; align-items: center; gap: 2mm; }
.jp-flyer__rot i { display: grid; place-items: center; width: 8mm; height: 8mm; border-radius: 50%; background: var(--ink); color: #fff; font: 900 10pt/1 var(--cjk); font-style: normal; }
.jp-apply--flyer { position: relative; left: auto; right: auto; bottom: auto; margin-top: 6mm; padding: 7mm 10mm; grid-template-columns: 1fr 34mm; }

/* ---------- print ---------- */
@page { size: A4; margin: 0; }
@media print {
  body.jp-page { background: none; }
  .jp-bar { display: none; }
  .jp-sheets { display: block; padding: 0; }
  .jp-sheet { zoom: 1; box-shadow: none; animation: none; margin: 0; page-break-after: always; break-after: page; }
  .jp-sheet:last-child { page-break-after: auto; break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* optional pay line (?pay=…) */
.jp-pay { display: inline-block; margin-top: 3mm !important; padding: 1.6mm 3.5mm; border-radius: 99px; background: rgba(255,255,255,.18); font: 500 9.5pt/1.2 var(--sans) !important; color: #fff !important; }