/* 紙页 Kamipage — 广告物料 (ads.html). Tokens come from css/site.css.
   Every flat artwork is an .art box sized (trim + 2 × bleed) in mm; all type inside is in cqw of that box,
   so the same node renders on the board, inside a mockup (cloned by ads.js) and at production size (tools/export.mjs). */

body { background: var(--paper); background-image: radial-gradient(circle, rgb(122 104 84 / .22) 1px, transparent 1.3px); background-size: 20px 20px; background-position: 10px 10px; }
.page { padding-top: 140px; padding-bottom: 120px; }

/* ---------------------------------------------------------------- intro */
.intro { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.toc { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--dot); }
.toc a { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--dot); text-decoration: none; }
.toc a:hover b { color: var(--accent); }
.toc .n { font: 400 12px var(--mono); color: var(--accent); }
.toc b { font: 500 17px/1.4 var(--sans); transition: color .3s; }
.toc span:last-child { font: 400 12px var(--mono); color: var(--muted); }
.method { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 96px; font: 400 13px/1.6 var(--sans); color: var(--muted); }
.method b { color: var(--ink); font-weight: 500; }
.method i { font: 400 11px var(--mono); color: var(--accent); font-style: normal; margin-right: 6px; }

/* ---------------------------------------------------------------- a piece */
.piece { padding: 0 0 120px; }
.piece + .piece { padding-top: 40px; border-top: 1px solid var(--dot); }
.piece-head { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; margin-bottom: 44px; }
.piece-head .h2 { margin-bottom: 20px; }
.concept { font: 400 19px/1.75 var(--hand); color: var(--ink); padding-left: 14px; border-left: 3px solid var(--sakura); margin-bottom: 16px; }
.piece-head p.note { color: var(--muted); font-size: 15px; max-width: 34em; }

.spec { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; background: #FFFCF6; border-radius: 8px; overflow: hidden; box-shadow: 0 22px 40px -32px rgb(60 40 20 / .5); border: 1px solid rgb(42 37 33 / .08); }
.spec caption { text-align: left; font: 400 12px var(--mono); letter-spacing: .08em; color: var(--muted); padding: 0 0 10px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 10px 16px; border-bottom: 1px dashed var(--dot); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { width: 7.5em; font: 400 12px/1.9 var(--mono); color: var(--muted); letter-spacing: .02em; font-weight: 400; }
.spec td b { font-weight: 500; color: var(--ink); }
.spec td small { display: block; color: var(--muted); font-size: 12.5px; }
.spec sup a, sup.src a { font: 500 10px var(--mono); color: var(--accent); text-decoration: none; margin-left: 2px; }
.tag-own { display: inline-block; font: 400 10.5px var(--mono); color: var(--muted); border: 1px solid var(--dot); border-radius: 99px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }

/* the "flat artwork" board */
.board { position: relative; background: var(--paper-2); border-radius: 14px; padding: 28px 28px 22px; margin-bottom: 28px; }
.board-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.board-bar h3, .mock-bar h3 { font: 500 13px var(--mono); letter-spacing: .08em; color: var(--ink-2); }
.board-bar h3 span, .mock-bar h3 span { color: var(--accent); margin-right: 8px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font: 400 12px var(--mono); color: var(--muted); }
.legend i { display: inline-block; width: 16px; height: 0; vertical-align: 3px; margin-right: 6px; }
.legend .l-bleed i { height: 10px; vertical-align: -1px; background: rgb(230 0 126 / .28); }
.legend .l-trim i { border-top: 1.5px solid #0096D6; }
.legend .l-safe i { border-top: 1.5px dashed #0096D6; }
.legend .l-cut i { border-top: 1.5px dashed #E6007E; }
.legend .l-fold i { border-top: 1.5px dotted #0096D6; }
.btn-guides { font: 500 13px/1 var(--sans); border: 1px solid var(--ink); background: none; color: var(--ink); border-radius: 99px; padding: 9px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.btn-guides::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; }
html.guides .btn-guides { background: var(--ink); color: var(--paper); }
html.guides .btn-guides::before { background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
.arts { display: grid; gap: 22px; align-items: start; }
.arts figure { min-width: 0; }
.arts figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.arts figcaption b { font: 500 13px var(--sans); color: var(--ink); }
.arts figcaption a { color: var(--accent); text-decoration: none; }
.frame { box-shadow: 0 1px 0 rgb(42 37 33 / .06), 0 20px 36px -26px rgb(60 40 20 / .55); }

/* the in-place mockup */
.mock { position: relative; margin: 0; }
.mock-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 14px; flex-wrap: wrap; }
.mock-bar p { font-size: 13px; color: var(--muted); max-width: 52em; }
.stage { position: relative; overflow: hidden; border-radius: 14px; background: var(--night); isolation: isolate; }
.stage > img.bg { width: 100%; height: auto; }
.stage .fx { position: absolute; inset: 0; pointer-events: none; }
.mock figcaption { font: 400 12px/1.6 var(--mono); color: var(--muted); margin-top: 10px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* perspective slot: ads.js sizes it in px and maps its corners with matrix3d */
.quad { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.quad .art, .place .art { position: absolute; }
/* flat placement: plain %, rotate */
.place { position: absolute; transform-origin: 50% 50%; }
.place > .clip { position: relative; overflow: hidden; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- artwork base + guides */
.art { position: relative; overflow: hidden; container-type: inline-size; background: var(--paper); color: var(--ink); width: 100%; }
.art .trim { position: absolute; }
.art img { max-width: none; }
.g { display: none; position: absolute; pointer-events: none; z-index: 50; }
html.guides .board .g { display: block; }
.g-trim { outline: 1px solid #0096D6; box-shadow: 0 0 0 100vmax rgb(230 0 126 / .26); }
.g-safe { border: 1px dashed rgb(0 150 214 / .9); }
.g-cut { border: 1.5px dashed #E6007E; }
.g-fold { border-left: 1.5px dotted #0096D6; top: 0; bottom: 0; width: 0; }
.dots { background-image: radial-gradient(circle, rgb(122 104 84 / .34) var(--dr, .16cqw), transparent calc(var(--dr, .16cqw) + .06cqw)); background-size: var(--dg, 2cqw) var(--dg, 2cqw); background-position: calc(var(--dg, 2cqw) / 2) calc(var(--dg, 2cqw) / 2); }
.mark { display: inline-block; vertical-align: middle; }
.lock { display: inline-flex; align-items: center; gap: .25em; line-height: 1; }
.lock .k { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }   /* 紙页: 页 is simplified, so Noto Serif SC, not Shippori */
.lock .w { font-family: 'Instrument Sans', var(--sans); font-weight: 600; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- 01 poster (1000 × 1500, bleed 5) */
.poster .p-scene { position: absolute; left: 0; top: 0; width: 100%; height: 70%; object-fit: cover; object-position: 50% 0; }
.poster .p-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(247 241 230 / 0) 46%, rgb(247 241 230 / .9) 60%, var(--paper) 67%); }
.poster .p-fade.dots { background: linear-gradient(to bottom, rgb(247 241 230 / 0) 46%, rgb(247 241 230 / .9) 60%, var(--paper) 67%); }
.poster .p-grid { position: absolute; inset: 0; --dg: 1.98cqw; --dr: .17cqw; -webkit-mask-image: linear-gradient(to bottom, transparent 58%, #000 72%); mask-image: linear-gradient(to bottom, transparent 58%, #000 72%); }
.poster .p-tan { position: absolute; right: 7.2%; top: 4.5%; width: 11.5cqw; height: 45%; background: #FBF7EE; box-shadow: 0 1.2cqw 2.4cqw -1.2cqw rgb(40 25 10 / .5); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4.2cqw 0 2.6cqw; }
.poster .p-tan::before { content: ""; position: absolute; top: -1.6cqw; left: 50%; width: 9cqw; height: 3.6cqw; transform: translateX(-50%) rotate(-4deg); background: rgb(239 199 194 / .82); clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 2%, 100% 0, 96% 50%, 100% 100%, 90% 92%, 84% 100%, 0 100%, 3% 50%); }
.poster .p-tan b { writing-mode: vertical-rl; font: 700 6.4cqw/1 var(--serif); letter-spacing: .18em; color: var(--ink-2); }
.poster .p-tan small { writing-mode: vertical-rl; font: 400 1.35cqw/1 var(--mono); letter-spacing: .2em; color: var(--muted); }
.poster .p-num { position: absolute; left: 6.6%; bottom: 18.5%; font: 700 25cqw/1 var(--jp); color: var(--accent); }
.poster .p-head { position: absolute; left: 37%; right: 7%; bottom: 24.5%; font: 500 5.5cqw/1.34 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.poster .p-sub { position: absolute; left: 37%; width: 30%; bottom: 13.2%; font: 400 1.85cqw/1.7 var(--sans); color: var(--ink-2); }
.poster .p-fact { position: absolute; right: 7.2%; bottom: 13.8%; text-align: center; transform: rotate(-2deg); }
.poster .p-fact b { display: block; font: 500 5cqw/1 var(--serif); color: var(--ink-2); border: .3cqw solid rgb(200 85 61 / .8); border-radius: .8cqw; padding: .9cqw 2cqw 1.1cqw; }
.poster .p-fact span { display: block; font: 400 1.7cqw/1 var(--sans); color: var(--muted); margin-top: 1.2cqw; }
.poster .p-stamp { position: absolute; right: 21%; top: 41%; width: 14cqw; height: 14cqw; transform: rotate(-11deg); opacity: .92; }
.poster .p-foot { position: absolute; left: 7%; right: 7%; bottom: 5%; display: flex; justify-content: space-between; align-items: center; border-top: .15cqw solid var(--dot); padding-top: 1.8cqw; }
.poster .p-foot .lock { font-size: 3.6cqw; color: var(--ink); }
.poster .p-foot .lock .mark { width: 5.2cqw; height: 5.2cqw; }
.poster .p-foot .lock .w { font-size: .62em; }
.poster .p-foot .hand { font: 400 2.5cqw/1 var(--hand); color: var(--ink-2); }
.poster .p-foot .mono { font: 400 1.6cqw/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
/* 弐 is the night poster: same grid, the lamp scene, ink ground */
.poster.night { background: var(--night); color: var(--paper); }
.poster.night .p-fade { background: linear-gradient(to bottom, rgb(29 25 22 / 0) 44%, rgb(29 25 22 / .9) 60%, var(--night) 67%); }
.poster.night .p-grid { background-image: radial-gradient(circle, rgb(247 241 230 / .16) var(--dr), transparent calc(var(--dr) + .06cqw)); }
.poster.night .p-head { color: var(--paper); }
.poster.night .p-head em { color: #D98A83; }
.poster.night .p-sub { color: rgb(247 241 230 / .78); }
.poster.night .p-num { color: #C9716B; }
.poster.night .p-fact b { color: var(--paper); border-color: rgb(217 138 131 / .85); }
.poster.night .p-fact span, .poster.night .p-foot .mono { color: rgb(247 241 230 / .6); }
.poster.night .p-foot { border-color: rgb(247 241 230 / .16); }
.poster.night .p-foot .lock, .poster.night .p-foot .hand { color: var(--paper); }

/* ---------------------------------------------------------------- 02 xiaohongshu cover (1242 × 1660 px) */
.xhs .x-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xhs .x-top { position: absolute; left: 0; right: 0; top: 0; height: 36%; --dg: 4cqw; --dr: .3cqw; background-color: var(--paper); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.xhs .x-tag { position: absolute; left: 6.5%; top: 5.5%; font: 500 3.2cqw/1 var(--sans); color: #fff; background: var(--accent); padding: 1.3cqw 2.4cqw; border-radius: 99px; }
.xhs .x-title { position: absolute; left: 6.5%; right: 6%; top: 12%; font: 700 11.4cqw/1.22 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.xhs mark { background: linear-gradient(transparent 58%, rgb(239 199 194 / .95) 58% 92%, transparent 92%); color: inherit; padding: 0 .08em; }
.xhs .x-note { position: absolute; right: 6%; top: 44%; width: 40%; background: #FFFCF6; padding: 3.4cqw 3.2cqw 3cqw; font: 400 4.2cqw/1.5 var(--hand); color: var(--ink); transform: rotate(3deg); box-shadow: 0 2cqw 3cqw -1.6cqw rgb(40 25 10 / .55); }
.xhs .x-note::before { content: ""; position: absolute; top: -2cqw; left: 30%; width: 16cqw; height: 4.2cqw; background: rgb(184 196 138 / .8); transform: rotate(-5deg); clip-path: polygon(0 8%, 5% 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
.xhs .x-note small { display: block; font: 400 2.3cqw/1 var(--mono); color: var(--muted); margin-bottom: 1.6cqw; letter-spacing: .06em; }
.xhs .x-arrow { position: absolute; right: 30%; top: 63%; width: 16cqw; height: 16cqw; transform: rotate(8deg); }
.xhs .x-mark { position: absolute; right: 5%; bottom: 3.6%; font-size: 5cqw; color: var(--ink); background: rgb(247 241 230 / .9); padding: 1.4cqw 2.6cqw 1.4cqw 2cqw; border-radius: 99px; }
.xhs .x-mark .mark { width: 6cqw; height: 6cqw; }
.xhs .x-mark .w { font-size: .62em; }
.xhs .x-chips { position: absolute; left: 6.5%; bottom: 7%; display: flex; gap: 2.6cqw; }
.xhs .x-chips b { font: 500 6.4cqw/1 var(--serif); color: var(--ink-2); background: rgb(255 252 246 / .94); border: .5cqw solid rgb(200 85 61 / .85); border-radius: 1.4cqw; padding: 1.6cqw 3cqw 2cqw; transform: rotate(-2deg); }
.xhs .x-chips b:nth-child(2) { transform: rotate(1.5deg); }
.xhs .x-sub { position: absolute; left: 6.5%; font: 500 3.6cqw/1.5 var(--sans); color: var(--ink-2); }
.xhs.night .x-title { color: var(--paper); }
.xhs.night mark { background: linear-gradient(transparent 58%, rgb(227 176 75 / .55) 58% 92%, transparent 92%); }
.xhs.night .x-shade { position: absolute; inset: 0; background: linear-gradient(rgb(20 16 13 / .82), rgb(20 16 13 / .55) 38%, rgb(20 16 13 / 0) 56%); }
.xhs.night .x-sub { color: rgb(247 241 230 / .82); }
.xhs.cork .x-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(rgb(247 241 230 / 0), rgb(247 241 230 / .94) 26%, var(--paper) 40%); }
.xhs.cork .x-title { top: auto; bottom: 23%; }

/* phone feed (390 × 897 logical points) */
.feed { position: absolute; inset: 0; background: #fff; font-family: var(--sans); color: #222; container-type: inline-size; }
.feed .sb { display: flex; justify-content: space-between; padding: 3.4cqw 7cqw 0; font: 600 3.8cqw/1 'Instrument Sans', var(--sans); }
.feed .tabs { display: flex; justify-content: center; gap: 7cqw; margin-top: 5cqw; font: 500 4.4cqw/1 var(--sans); color: #999; position: relative; }
.feed .tabs b { color: #222; position: relative; }
.feed .tabs b::after { content: ""; position: absolute; left: 50%; bottom: -2.4cqw; width: 5cqw; height: .8cqw; margin-left: -2.5cqw; border-radius: 1cqw; background: var(--accent); }
.feed .tabs .s { position: absolute; right: 5cqw; top: -.4cqw; width: 5cqw; height: 5cqw; border: .6cqw solid #333; border-radius: 50%; }
.feed .chan { display: flex; gap: 5cqw; padding: 5.4cqw 4cqw 3cqw; font: 400 3.7cqw/1 var(--sans); color: #777; white-space: nowrap; }
.feed .chan b { color: #222; font-weight: 500; }
.feed .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; padding: 0 1.6cqw; background: #f5f5f5; height: 100%; }
.feed .col { display: flex; flex-direction: column; gap: 1.6cqw; padding-top: 1.6cqw; }
.feed .card { background: #fff; border-radius: 1.6cqw; overflow: hidden; }
.feed .card .img { position: relative; width: 100%; overflow: hidden; }
.feed .card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed .card p { font: 500 3.35cqw/1.4 var(--sans); padding: 2cqw 2.4cqw 1.2cqw; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed .card .by { display: flex; align-items: center; gap: 1.4cqw; padding: 0 2.4cqw 2.4cqw; font: 400 2.8cqw/1 var(--sans); color: #888; }
.feed .card .by i { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: var(--paper-2) center / cover; flex: none; }
.feed .card .by span:last-child { margin-left: auto; }
.feed .card.ours { outline: .5cqw solid rgb(158 59 59 / .0); }
.feed .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 15cqw; background: #fff; border-top: 1px solid #eee; display: flex; justify-content: space-around; align-items: center; font: 500 3.7cqw/1 var(--sans); color: #888; padding-bottom: 3cqw; }
.feed .bar b { color: #222; }
.feed .bar .plus { width: 11cqw; height: 7.6cqw; border-radius: 2cqw; background: var(--accent); color: #fff; display: grid; place-items: center; font: 400 6cqw/1 var(--sans); }

/* ---------------------------------------------------------------- 03 bookmark (50 × 150, bleed 3) */
.bm { --dg: 8.93cqw; --dr: .75cqw; }
.bm .b-scene { position: absolute; left: 0; right: 0; top: 0; height: 62%; width: 100%; object-fit: cover; object-position: 50% 0; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.bm .b-hole { position: absolute; left: 50%; width: 8.93cqw; height: 8.93cqw; margin-left: -4.46cqw; border-radius: 50%; background: var(--hole, var(--paper-2)); box-shadow: inset 0 .4cqw .6cqw rgb(0 0 0 / .35); z-index: 5; }
.bm .b-v { position: absolute; right: 12%; top: 64%; writing-mode: vertical-rl; font: 500 8.2cqw/1 var(--serif); letter-spacing: .2em; color: var(--ink-2); }
.bm .b-date { position: absolute; left: 12%; top: 66%; writing-mode: vertical-rl; font: 400 4.2cqw/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
.bm .b-foot { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; }
.bm .b-foot .lock { font-size: 9cqw; }
.bm .b-foot .mark { width: 12cqw; height: 12cqw; }
.bm .b-foot .w { font-size: .6em; }
.bm.back .b-lines { position: absolute; left: 12%; right: 12%; top: 18%; font: 400 6.6cqw/2.2 var(--hand); color: var(--ink-2); }
.bm.back .b-lines div { border-bottom: .3cqw solid rgb(122 104 84 / .35); display: flex; justify-content: space-between; }
.bm.back .b-quote { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); writing-mode: vertical-rl; font: 400 7.4cqw/1.7 var(--hand); color: var(--ink); letter-spacing: .12em; }
.bm.back .b-rib { position: absolute; left: 50%; top: 0; bottom: 0; width: 7cqw; margin-left: 20cqw; background: var(--accent); opacity: .0; }

/* ---------------------------------------------------------------- 04 merch */
.pinart { background: transparent; }
.pinart svg { width: 100%; height: 100%; display: block; }
.pc { --dg: 9.1cqw; --dr: .6cqw; }
.pc .c-hole { position: absolute; left: 50%; top: 4.5%; width: 16cqw; height: 5cqw; margin-left: -8cqw; border-radius: 99px; background: var(--hole, var(--paper-2)); box-shadow: inset 0 .5cqw .8cqw rgb(0 0 0 / .3); }
.pc .c-title { position: absolute; left: 0; right: 0; top: 14%; text-align: center; font: 500 7cqw/1.3 var(--serif); color: var(--ink-2); }
.pc .c-title small { display: block; font: 400 3.8cqw/1.6 var(--mono); color: var(--muted); letter-spacing: .1em; }
.pc .c-ring { position: absolute; left: 50%; top: 50%; width: 52cqw; height: 52cqw; margin: -26cqw 0 0 -26cqw; border-radius: 50%; border: .4cqw dashed rgb(122 104 84 / .45); }
.pc .c-pin { position: absolute; left: 50%; top: 50%; width: 46cqw; height: 46cqw; margin: -23cqw 0 0 -23cqw; }
.pc .c-foot { position: absolute; left: 0; right: 0; bottom: 5%; text-align: center; font: 400 5.4cqw/1.5 var(--hand); color: var(--ink-2); }
.pc .c-foot .lock { font-size: 7cqw; color: var(--ink); margin-top: 2cqw; }
.pc .c-foot .mark { width: 9cqw; height: 9cqw; }
.pc .c-foot .w { font-size: .6em; }
.tape { background: var(--tbg); }
.tape .t-row { position: absolute; inset: 0; display: flex; align-items: center; }
.sheet { background: #FBF8F1; --dg: 4.5cqw; --dr: .3cqw; }
.sheet .s-head { position: absolute; left: 7%; right: 7%; top: 5%; display: flex; justify-content: space-between; align-items: baseline; border-bottom: .3cqw solid var(--dot); padding-bottom: 2cqw; }
.sheet .s-head b { font: 500 5.4cqw/1 var(--serif); color: var(--ink-2); }
.sheet .s-head span { font: 400 2.6cqw/1 var(--mono); color: var(--muted); letter-spacing: .1em; }
.sheet .st { position: absolute; filter: drop-shadow(0 0 0 #fff) drop-shadow(.5cqw 0 0 #fff) drop-shadow(-.5cqw 0 0 #fff) drop-shadow(0 .5cqw 0 #fff) drop-shadow(0 -.5cqw 0 #fff) drop-shadow(0 .5cqw .6cqw rgb(60 40 20 / .18)); }
html.guides .board .sheet .st { filter: drop-shadow(.5cqw 0 0 #fff) drop-shadow(-.5cqw 0 0 #fff) drop-shadow(0 .5cqw 0 #fff) drop-shadow(0 -.5cqw 0 #fff) drop-shadow(.25cqw 0 0 #E6007E) drop-shadow(-.25cqw 0 0 #E6007E) drop-shadow(0 .25cqw 0 #E6007E) drop-shadow(0 -.25cqw 0 #E6007E); }
.sheet .st img { width: 100%; display: block; }
.sheet .s-foot { position: absolute; left: 7%; right: 7%; bottom: 4%; display: flex; justify-content: space-between; align-items: center; font: 400 2.4cqw/1 var(--mono); color: var(--muted); }
.sheet .s-foot .lock { font-size: 4.6cqw; color: var(--ink); }
.sheet .s-foot .mark { width: 6cqw; height: 6cqw; }
.sheet .s-foot .w { font-size: .6em; }
.sleeve { background: var(--paper); --dg: 1.17cqw; --dr: .09cqw; }
.sleeve .panel { position: absolute; top: 0; bottom: 0; }
.sleeve .rib { position: absolute; top: 0; bottom: 0; width: 2.8cqw; background: var(--accent); }
.sleeve .rib::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.01cqw; height: 2.2cqw; background: var(--paper); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.sleeve .s-lock { position: absolute; font-size: 3.5cqw; color: var(--ink); }   /* 紙页 kamipage is wider than the old lockup: sized to stop short of the ribbon at 31.34% */
.sleeve .s-lock .mark { width: 4.8cqw; height: 4.8cqw; }
.sleeve .s-lock .w { font-size: .6em; }
.sleeve .s-name { position: absolute; font: 500 2.2cqw/1.4 var(--serif); color: var(--ink-2); }
.sleeve .s-name small { display: block; font: 400 .95cqw/1.6 var(--mono); color: var(--muted); letter-spacing: .12em; }
.sleeve .s-side { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; font: 700 2cqw/1 var(--serif); color: var(--ink); }
.sleeve .s-side span { font: 400 1cqw var(--mono); color: var(--muted); letter-spacing: .14em; margin-left: 1cqw; }
.sleeve .s-list { position: absolute; font: 400 1.35cqw/2 var(--sans); color: var(--ink-2); }
.sleeve .s-list b { display: block; font: 400 .95cqw/1.6 var(--mono); color: var(--muted); letter-spacing: .12em; font-weight: 400; margin-bottom: .6cqw; }
.sleeve .s-hand { position: absolute; font: 400 2cqw/1.5 var(--hand); color: var(--ink-2); }

/* rolls and bags in the flat-lay */
.roll { position: absolute; border-radius: 50%; background:
  radial-gradient(circle, transparent 0 36%, #B08B5E 36.5% 37.5%, #D2B389 38% 41%, #A98356 41.5% 42%, transparent 42.5%),
  repeating-radial-gradient(circle, rgb(0 0 0 / .045) 0 .6px, transparent .6px 2.2px),
  radial-gradient(circle, transparent 0 42%, var(--tc) 42.5%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 6px 12px 16px -6px rgb(60 35 10 / .5), inset -4px -6px 10px rgb(0 0 0 / .08), inset 3px 4px 8px rgb(255 255 255 / .35); }
.strip { position: absolute; transform-origin: 0 50%; mix-blend-mode: multiply; filter: drop-shadow(1px 2px 1.5px rgb(60 35 10 / .25)); }
.strip .clip { clip-path: polygon(0 0, 100% 0, 98.6% 12%, 100% 25%, 98.8% 38%, 100% 52%, 98.5% 66%, 100% 80%, 98.8% 92%, 100% 100%, 0 100%); }
.opp { position: absolute; padding: 1.2% 1.1% 1.8%; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .55); box-shadow: 8px 14px 18px -8px rgb(60 35 10 / .45); }
.opp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; background: rgb(255 255 255 / .38); border-bottom: 1px solid rgb(255 255 255 / .6); z-index: 2; }
.opp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / .38) 32%, transparent 44%, transparent 62%, rgb(255 255 255 / .22) 70%, transparent 78%); z-index: 2; }
.opp .clip { position: relative; overflow: hidden; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- sources, footer, toggle */
.sources { padding-top: 40px; border-top: 1px solid var(--dot); display: grid; grid-template-columns: 4fr 8fr; gap: 48px; }
.sources ol { padding-left: 1.6em; font-size: 14px; color: var(--muted); display: grid; gap: 8px; }
.sources li b { color: var(--ink); font-weight: 500; }
.sources a { color: var(--ink-2); word-break: break-all; }
.gaps { margin-top: 18px; font-size: 14px; color: var(--muted); }
.gaps li { margin: 4px 0; }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 30; box-shadow: 0 12px 30px -12px rgb(40 25 10 / .5); background: var(--paper) !important; }
html.guides .fab { background: var(--ink) !important; }

@media (max-width: 980px) {
  .intro, .piece-head, .sources { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 820px) {
  .page { padding-top: 110px; }
  .board { padding: 18px 14px 14px; margin-left: calc(-1 * var(--gutter) + 6px); margin-right: calc(-1 * var(--gutter) + 6px); }
  .arts.scroll { grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .arts.scroll > figure { scroll-snap-align: start; }
  .duo { grid-template-columns: 1fr; }
  .stage { border-radius: 10px; margin-left: calc(-1 * var(--gutter) + 6px); margin-right: calc(-1 * var(--gutter) + 6px); }
  .spec th { width: 5.6em; padding-right: 6px; }
  .spec th, .spec td { padding: 9px 12px; }
  .method { margin-bottom: 64px; }
}

/* ---------------------------------------------------------------- mockup lighting */
.quad.lightbox { box-shadow: 0 0 70px 14px rgb(255 248 232 / .28); }
.quad.lightbox .art { filter: brightness(1.07) saturate(1.04); }
.quad .lit, .quad .glare { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.quad.lightbox .lit { background: radial-gradient(ellipse 75% 60% at 50% 42%, #fff 45%, #DCD6CC 100%); mix-blend-mode: multiply; }
.quad.lightbox .glare { background: linear-gradient(104deg, transparent 18%, rgb(255 255 255 / .16) 30%, transparent 44%, transparent 70%, rgb(255 255 255 / .07) 80%, transparent 88%); mix-blend-mode: screen; }
.quad.screen { border-radius: 36px; }
.quad.screen .glare { background: linear-gradient(120deg, rgb(255 255 255 / .2), transparent 32%, transparent 58%, rgb(255 244 225 / .12) 74%, transparent 90%); mix-blend-mode: screen; }
.quad.screen .feed { filter: brightness(.97) contrast(1.02); }
.stage .b-hole { --hole: #EFE5D0; }
.place.bmk { filter: drop-shadow(3px 6px 5px rgb(70 45 20 / .33)); }
.place.bmk .clip { border-radius: 6% / 2%; }
.place.bmk .clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 250 235 / .18), transparent 40%, rgb(60 40 20 / .06)); pointer-events: none; }
#stage-desk .c-hole { --hole: #C99C63; }
.place.box { box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 3px 5px 0 0 #D9CBB4, 5px 8px 0 0 #BFA985, 18px 26px 30px -10px rgb(60 35 10 / .55); }
.place.box .clip::after, .place.card .clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, rgb(255 244 220 / .22), transparent 45%, rgb(80 50 20 / .08)); pointer-events: none; }
.place.card { box-shadow: 8px 12px 16px -6px rgb(60 35 10 / .5); }
#stage-desk .fx { background: linear-gradient(125deg, rgb(255 232 190 / .22), transparent 55%); mix-blend-mode: soft-light; }
#stage-desk .fx-items { position: absolute; inset: 0; }

.poster .p-fact.long b { font-size: 3.6cqw; padding: 1.2cqw 1.6cqw 1.4cqw; }
.strip { position: absolute; transform-origin: 0 50%; }
.strip .clip { position: relative; overflow: hidden; width: 100%; height: 100%; }

/* phone mockups */
.phone-duo { grid-template-columns: 7fr 5fr; align-items: center; gap: 40px; }
.detail-wrap { display: flex; flex-direction: column; align-items: center; }
.device { width: min(330px, 100%); aspect-ratio: 390 / 844; background: #1b1917; border-radius: 48px; padding: 11px; box-shadow: 0 0 0 1.5px #5b5650 inset, 0 40px 60px -30px rgb(40 25 10 / .6); }
.detail { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #fff; container-type: inline-size; font-family: var(--sans); color: #222; }
.detail .sb { display: flex; justify-content: space-between; padding: 4.4cqw 7cqw 0; font: 600 3.8cqw/1 'Instrument Sans', var(--sans); }
.detail .d-top { display: flex; align-items: center; gap: 2.4cqw; padding: 4cqw 4cqw 3cqw; font: 500 3.9cqw/1 var(--sans); }
.detail .back { font: 400 8cqw/1 var(--sans); margin-top: -1cqw; }
.detail .av { width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; }
.detail .av svg { width: 80%; height: 80%; }
.detail .follow { margin-left: auto; border: 1px solid var(--accent); color: var(--accent); border-radius: 99px; padding: 1.4cqw 3.6cqw; font-size: 3.4cqw; }
.detail .d-img { position: relative; width: 100%; aspect-ratio: 1242 / 1660; overflow: hidden; }
.detail .d-dots { display: flex; justify-content: center; gap: 1.4cqw; padding: 2.6cqw 0 1cqw; }
.detail .d-dots i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #ddd; }
.detail .d-dots i.on { background: var(--accent); }
.detail .d-body { padding: 1cqw 4.4cqw; }
.detail h4 { font: 600 4.3cqw/1.45 var(--sans); margin-bottom: 1.8cqw; }
.detail p { font: 400 3.6cqw/1.6 var(--sans); color: #333; }
.detail .tags { color: #3B5B8C; margin-top: 1cqw; }
.detail .meta { color: #999; font-size: 3cqw; margin-top: 1cqw; }
.detail .d-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3.4cqw; align-items: center; padding: 3cqw 4cqw 7cqw; background: #fff; border-top: 1px solid #eee; font: 400 3.3cqw/1 var(--sans); color: #444; }
.detail .say { flex: 1; background: #f3f3f3; border-radius: 99px; padding: 2.4cqw 3.4cqw; color: #999; }

/* the drawer peeking out of the sleeve */
.place.box .tray { position: absolute; left: 1.2%; right: 1.2%; top: 30%; height: 94%; background: #C9A57A; border-radius: 2px; box-shadow: inset 0 0 0 5px #B99264, inset 0 8px 14px rgb(70 45 15 / .45), 10px 18px 22px -8px rgb(60 35 10 / .5); }
.place.box .tray::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 5px); }
.stage .zoom img.bg { width: 100%; height: auto; }

/* covers 1 + 2 reuse the posters' square scene window, dropped below the title */
.xhs.low .x-scene { top: auto; bottom: 0; height: 77%; object-position: 50% 0; }
.xhs.night { background: #15110E; }

@media (max-width: 980px) {
  .merch-arts { grid-template-columns: 1fr 1fr !important; }
  .merch-arts > figure:nth-child(3) { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 820px) {
  .page { padding-top: 110px; }
  .phone-duo { grid-template-columns: 1fr; gap: 28px; }
  .bm-arts { grid-template-columns: 1fr 1fr !important; }
  .bm-arts .bm-notes { grid-column: 1 / -1; }
  .merch-arts { grid-template-columns: 1fr !important; }
  .merch-arts > figure:nth-child(3) { max-width: none; }
  .fab { display: none; }
}

html.exporting body { background: none; }
html.exporting main, html.exporting .nav, html.exporting .fab { display: none !important; }
#export-box { width: 100vw; }