/* The accepted 1505 × 1045 composition, with live text above a cleaned scene. */
:root {
  --cover-u: calc(100vw / 1505);
  --cover-ink: #112333;
  --cover-olive: #45563e;
  --cover-serif: 'Storybook Serif', 'Songti SC', 'SimSun', serif;
}
body { background: #f7f4ed url('/assets/paper-fibers.webp') repeat; background-size: 620px; }
.cover-backdrop { position: absolute; inset: 0 0 auto; height: calc(704 * var(--cover-u)); pointer-events: none; }
.cover-backdrop img { display: block; width: 100%; height: 100%; }
.campaign-header, main, .campaign-footer { position: relative; }
.campaign-header {
  height: calc(80 * var(--cover-u)); margin: 0 calc(29 * var(--cover-u));
  padding: 0 calc(24 * var(--cover-u)); border-bottom: 1px solid #7e7f706b;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--cover-ink); font-family: var(--cover-serif); z-index: 2;
}
.campaign-title { display: flex; align-items: center; gap: calc(16 * var(--cover-u)); margin: 0; font-size: calc(24 * var(--cover-u)); line-height: 1.35; font-weight: 700; white-space: nowrap; }
.campaign-book-icon { width: calc(45 * var(--cover-u)); height: calc(42 * var(--cover-u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#landing { margin: 0; padding: 0; max-width: none; color: var(--cover-ink); font-family: var(--cover-serif); }
.cover-layout { position: relative; height: calc(624 * var(--cover-u)); }
.cover-copy { position: absolute; top: calc(108 * var(--cover-u)); left: calc(56 * var(--cover-u)); width: calc(644 * var(--cover-u)); z-index: 1; }
.cover-title { margin: 0; font: 900 calc(79 * var(--cover-u))/calc(100 * var(--cover-u)) var(--cover-serif); letter-spacing: -.018em; white-space: nowrap; }
.cover-title::after { content: ''; display: block; width: calc(72 * var(--cover-u)); height: calc(4 * var(--cover-u)); margin-top: calc(21 * var(--cover-u)); background: #84704a; }
.cover-description { margin: calc(26 * var(--cover-u)) 0 calc(41 * var(--cover-u)); font-size: calc(26 * var(--cover-u)); font-weight: 500; line-height: calc(42 * var(--cover-u)); letter-spacing: .012em; }
.cover-description > span { display: block; white-space: nowrap; }
.cover-actions { display: flex; align-items: center; gap: calc(20 * var(--cover-u)); }
.cover-button { display: inline-flex; align-items: center; justify-content: center; gap: calc(15 * var(--cover-u)); width: calc(264 * var(--cover-u)); height: calc(82 * var(--cover-u)); padding: 0; border: 1px solid #152a37; border-radius: calc(10 * var(--cover-u)); color: #fffdf8; background: #172936 url('/assets/paper-fibers.webp'); background-blend-mode: multiply; background-size: 580px; font: 500 calc(26 * var(--cover-u))/1.25 var(--cover-serif); letter-spacing: .03em; transition: box-shadow .18s, transform .18s; }
.cover-button svg { flex: none; width: calc(25 * var(--cover-u)); height: calc(25 * var(--cover-u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cover-button-secondary { width: calc(278 * var(--cover-u)); color: var(--cover-olive); border-color: #77856d; background-color: #f8f6ef; background-blend-mode: normal; box-shadow: 0 2px 3px #25302310; }
.cover-button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px #23312424; }
.cover-button:active { transform: translateY(0); }
.cover-meta { display: flex; align-items: center; gap: calc(34 * var(--cover-u)); margin-top: calc(44 * var(--cover-u)); font-size: calc(20.5 * var(--cover-u)); line-height: 1.5; font-weight: 400; }
.cover-meta-item { display: inline-flex; align-items: center; gap: calc(12 * var(--cover-u)); white-space: nowrap; }
.cover-meta-item svg { width: calc(30 * var(--cover-u)); height: calc(30 * var(--cover-u)); fill: none; stroke: #354b34; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cover-meta-divider { width: 1px; height: calc(31 * var(--cover-u)); flex: none; background: #767a6e; }
.cover-art { position: absolute; inset: 0; pointer-events: none; }
.cover-mobile-scene { display: none; }
.cover-quote { position: absolute; left: 78.8%; top: calc(157 * var(--cover-u)); width: calc(230 * var(--cover-u)); margin: 0; color: #68655b; font: 500 calc(18 * var(--cover-u))/1.65 var(--cover-serif); letter-spacing: .23em; text-align: left; transform: rotate(10deg); transform-origin: top left; pointer-events: auto; user-select: text; }
.cover-quote > span { display: block; white-space: nowrap; }
.cover-quote::after { content: ''; display: block; width: calc(32 * var(--cover-u)); height: 1px; margin-top: calc(18 * var(--cover-u)); background: #8b8677; }
.campaign-details { height: calc(261 * var(--cover-u)); padding: calc(23 * var(--cover-u)) calc(52 * var(--cover-u)) 0; border-top: 1px solid #8e8d7752; background: #f7f4ed url('/assets/paper-fibers.webp') repeat; background-size: 620px; }
.campaign-details h2 { display: flex; align-items: center; gap: calc(25 * var(--cover-u)); margin: 0; font: 800 calc(28 * var(--cover-u))/calc(38 * var(--cover-u)) var(--cover-serif); }
.campaign-details h2::after { content: ''; width: calc(64 * var(--cover-u)); height: 1px; background: #897e68; }
.campaign-details-grid { display: grid; grid-template-columns: calc(518 * var(--cover-u)) calc(454 * var(--cover-u)) minmax(0,1fr); margin-top: calc(23 * var(--cover-u)); }
.campaign-detail { display: grid; grid-template-columns: calc(88 * var(--cover-u)) minmax(0,1fr); gap: calc(32 * var(--cover-u)); min-width: 0; }
.campaign-detail + .campaign-detail { border-left: 1px solid #9a958541; }
.campaign-detail:nth-child(2) { grid-template-columns: calc(80 * var(--cover-u)) minmax(0,1fr); padding-left: calc(48 * var(--cover-u)); gap: calc(36 * var(--cover-u)); }
.campaign-detail:nth-child(3) { grid-template-columns: calc(82 * var(--cover-u)) minmax(0,1fr); padding-left: calc(40 * var(--cover-u)); gap: calc(40 * var(--cover-u)); }
.campaign-icon { width: 100%; height: auto; aspect-ratio: 1; padding: 22%; border-radius: 50%; background: #7e8876 url('/assets/paper-fibers.webp'); background-blend-mode: multiply; background-size: 560px; fill: none; stroke: #fffdf6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.campaign-detail h3 { margin: 0 0 calc(2 * var(--cover-u)); font: 700 calc(25 * var(--cover-u))/calc(35 * var(--cover-u)) var(--cover-serif); white-space: nowrap; }
.campaign-detail p { margin: 0; }
.campaign-detail p, .campaign-reward-list { font-family: var(--cover-serif); font-size: calc(20 * var(--cover-u)); line-height: calc(27.5 * var(--cover-u)); font-weight: 400; }
.campaign-reward-list { margin: 0; padding-left: 1.2em; }
.campaign-detail-note, .campaign-reward-note { font-size: .68em; }
.campaign-reward-note { white-space: nowrap; }
.detail-line { display: block; white-space: nowrap; }
#contact-info { white-space: nowrap; font-size: calc(18.5 * var(--cover-u)); }
.campaign-footer { display: flex; align-items: center; gap: calc(34 * var(--cover-u)); height: calc(80 * var(--cover-u)); padding: 0 calc(48 * var(--cover-u)); background: #182c3b url('/assets/paper-fibers.webp') repeat; background-blend-mode: multiply; background-size: 560px; color: #fffdf8; font: 500 calc(20 * var(--cover-u))/1.4 var(--cover-serif); }
.campaign-logo { display: block; width: calc(106 * var(--cover-u)); flex: none; }
.campaign-logo img { display: block; width: 100%; height: auto; }
.campaign-footer-rule { height: 1px; background: #b5baab55; flex: 1; }
.campaign-admin { display: flex; gap: calc(9 * var(--cover-u)); align-items: center; white-space: nowrap; }
.campaign-admin svg { width: calc(23 * var(--cover-u)); height: calc(23 * var(--cover-u)); fill: none; stroke: currentColor; stroke-width: 1.5; }

@media (max-width: 900px) {
  .cover-backdrop { display: none; }
  .campaign-header { height: auto; min-height: 0; margin: 0 20px; padding: 12px 0; flex-direction: row; gap: 0; }
  .campaign-title { gap: 9px; font-size: clamp(14px,2.6vw,22px); }
  .campaign-book-icon { width: 32px; height: 30px; }
  .cover-layout { height: auto; padding: 30px 24px 0; }
  .cover-copy { position: relative; inset: auto; width: 100%; }
  .cover-title { font-size: clamp(36px,7.6vw,64px); letter-spacing: -.035em; }
  .cover-title::after { width: 58px; height: 3px; margin-top: 18px; }
  .cover-description { margin: 22px 0 26px; font-size: clamp(16px,2.8vw,23px); line-height: 1.9; }
  .cover-description > span { white-space: normal; }
  .cover-actions { gap: 12px; }
  .cover-button { width: min(45%,264px); height: 60px; gap: 12px; border-radius: 9px; font-size: clamp(17px,2.6vw,22px); }
  .cover-button svg { width: 23px; height: 23px; }
  .cover-meta { flex-wrap: wrap; gap: 12px 24px; margin-top: 25px; font-size: 15px; }
  .cover-meta-item { gap: 9px; }
  .cover-meta-item svg { width: 26px; height: 26px; }
  .cover-meta-divider { height: 26px; }
  .cover-art { position: relative; inset: auto; width: calc(100% + 48px); aspect-ratio: 1.5; margin: 24px -24px 0; }
  .cover-mobile-scene { display: block; width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: right bottom; }
  .cover-quote { left: 65%; top: 28%; width: 30%; font-size: clamp(12px,2vw,18px); }
  .cover-quote::after { width: 26px; margin-top: 12px; }
  .campaign-details { height: auto; padding: 24px; }
  .campaign-details h2 { font-size: 25px; line-height: 1.4; gap: 20px; }
  .campaign-details h2::after { width: 52px; }
  .campaign-details-grid { grid-template-columns: 1fr; margin-top: 16px; }
  .campaign-detail, .campaign-detail:nth-child(2), .campaign-detail:nth-child(3), .campaign-detail:nth-child(4) { grid-template-columns: 64px minmax(0,1fr); gap: 20px; padding: 18px 0; }
  .campaign-detail + .campaign-detail { border-left: 0; border-top: 1px solid #9a958541; }
  .campaign-detail h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.4; }
  .campaign-detail p, .campaign-reward-list, #contact-info { font-size: 16px; line-height: 1.75; white-space: normal; }
  .detail-line { display: inline; white-space: normal; }
  .detail-line::after { content: ' '; }
  .campaign-footer { height: 80px; padding: 0 24px; gap: 22px; font-size: 16px; }
  .campaign-logo { width: 94px; }
  .campaign-admin { gap: 7px; }
  .campaign-admin svg { width: 20px; height: 20px; }
}
@media (max-width: 540px) {
  .campaign-header { margin-inline: 16px; min-height: 0; padding-block: 10px; }
  .campaign-title { font-size: 13px; gap: 6px; }
  .campaign-book-icon { width: 27px; height: 25px; }
  .cover-layout { padding: 27px 20px 0; }
  .cover-title { font-size: clamp(33px,8.7vw,45px); }
  .cover-description { font-size: 16px; margin: 20px 0 24px; }
  .cover-button { flex: 1; width: auto; height: 54px; font-size: 17px; gap: 9px; }
  .cover-button svg { width: 21px; height: 21px; }
  .cover-meta { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 14px; }
  .cover-meta-divider { display: none; }
  .cover-art { margin: 22px -20px 0; width: calc(100% + 40px); aspect-ratio: 1.28; }
  .cover-quote { left: 61%; top: 28%; font-size: 11px; letter-spacing: .14em; }
  .campaign-details { padding: 23px 20px 16px; }
  .campaign-details h2 { font-size: 23px; }
  .campaign-detail, .campaign-detail:nth-child(2), .campaign-detail:nth-child(3), .campaign-detail:nth-child(4) { grid-template-columns: 55px minmax(0,1fr); gap: 16px; }
  .campaign-detail h3 { font-size: 19px; }
  .campaign-detail p, .campaign-reward-list, #contact-info { font-size: 15px; }
  .campaign-footer { padding: 0 20px; gap: 16px; font-size: 15px; }
  .campaign-logo { width: 86px; }
}
@media (prefers-reduced-motion: reduce) { .cover-button { transition: none; } }

/* Keep the footer at the bottom when the window is taller than the concept. */
body:has(#landing:not([hidden])) { display: flex; flex-direction: column; min-height: 100dvh; }
body:has(#landing:not([hidden])) > main { display: flex; flex-direction: column; flex: 1; }
.campaign-header, .cover-layout, .campaign-footer { flex: none; }
#landing { display: flex; flex-direction: column; flex: 1; }
.campaign-details { height: auto; min-height: calc(261 * var(--cover-u)); flex: 1; }

/* Native SVG cursor: the nib is the click hotspot, with no overlay layer. */
@media (any-pointer: fine) {
  body a, body button:not(:disabled), body [role="button"] {
    cursor: url('/assets/pen-cursor.svg?v=20260928-pagination1') 3 53, pointer;
  }
}

/* Tracked DOM cursor keeps the supplied calligraphy pen visible and animatable. */
html.has-pen-cursor, html.has-pen-cursor * { cursor: none !important; }
.pen-cursor {
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(1px 2px 2px #211c1838) drop-shadow(0 0 1px #fff9);
  transform-origin: 1px 63px;
  will-change: transform;
}
.pen-cursor.is-visible { opacity: 1; visibility: visible; }
.ink-overlay {
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.pen-cursor img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 1px 63px;
  scale: 1;
  transition: filter 120ms ease, scale 180ms cubic-bezier(.2,.75,.25,1);
}
html.is-over-cover-button .pen-cursor img { scale: 1.18; }
.pen-cursor.is-pressed img { animation: pen-tap 190ms cubic-bezier(.2,.75,.25,1); }
@keyframes pen-tap {
  0% { transform: scale(1) rotate(0); }
  42% { transform: scale(.82) rotate(-7deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pen-cursor.is-pressed img { animation-duration: 1ms; }
  .pen-cursor img { transition: none; }
}


/* Rebalance the cover after moving date and audience into the information row. */
.cover-title-accent { color: #c56a32; }
.campaign-contact { display: flex; align-items: baseline; justify-content: center; gap: calc(10 * var(--cover-u)); white-space: nowrap; text-align: center; }
.campaign-contact-label { font-size: .78em; opacity: .78; }
#participation-info { max-width: 100%; white-space: normal; font-size: calc(18.5 * var(--cover-u)); line-height: calc(25 * var(--cover-u)); }
.participation-line { display: block; white-space: normal; }
@media (min-width: 901px) {
  .cover-copy { top: calc(96 * var(--cover-u)); width: calc(700 * var(--cover-u)); }
  .cover-description { margin: calc(30 * var(--cover-u)) 0 calc(50 * var(--cover-u)); font-size: calc(28.5 * var(--cover-u)); line-height: calc(46 * var(--cover-u)); }
  .cover-actions { gap: calc(22 * var(--cover-u)); }
  .cover-button { width: calc(286 * var(--cover-u)); height: calc(88 * var(--cover-u)); font-size: calc(28 * var(--cover-u)); }
  .cover-button-secondary { width: calc(300 * var(--cover-u)); }
  .campaign-footer { gap: calc(25 * var(--cover-u)); }
  .campaign-contact-label { font-size: calc(16 * var(--cover-u)); }
  #contact-info { font-size: calc(18.5 * var(--cover-u)); }
}
@media (max-width: 900px) {
  .participation-line { display: inline; }
  .participation-line::after { content: ' '; }
  .campaign-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; height: auto; min-height: 92px; padding: 12px 24px; gap: 8px 16px; }
  .campaign-logo { grid-column: 1; grid-row: 1; width: 94px; }
  .campaign-admin { grid-column: 2; grid-row: 1; justify-self: end; }
  .campaign-footer-rule { display: none; }
  .campaign-contact { grid-column: 1 / -1; grid-row: 2; flex-direction: column; gap: 1px; white-space: normal; }
  #contact-info { white-space: normal; font-size: 14px; }
}
@media (max-width: 540px) { .campaign-footer { padding: 12px 20px; } }

@media (min-width: 1201px) {
  .campaign-details-grid { grid-template-columns: minmax(0,.95fr) minmax(0,.75fr) minmax(0,1fr) minmax(0,1.3fr); }
  .campaign-detail:nth-child(2), .campaign-detail:nth-child(3), .campaign-detail:nth-child(4) {
    grid-template-columns: calc(68 * var(--cover-u)) minmax(0,1fr);
    padding-left: calc(20 * var(--cover-u));
    gap: calc(18 * var(--cover-u));
  }
  .campaign-reward-list {
    margin: 0;
    padding-left: 1.2em;
  }
  .campaign-reward-list li { white-space: nowrap; }
  .campaign-reward-list li + li { margin-top: calc(4 * var(--cover-u)); }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .campaign-details { height: auto; min-height: calc(261 * var(--cover-u)); padding-bottom: calc(24 * var(--cover-u)); }
  .campaign-details-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: calc(16 * var(--cover-u)); }
  .campaign-detail:nth-child(2), .campaign-detail:nth-child(3), .campaign-detail:nth-child(4) {
    grid-template-columns: calc(64 * var(--cover-u)) minmax(0,1fr);
    padding-left: calc(22 * var(--cover-u));
    gap: calc(18 * var(--cover-u));
  }
  .campaign-detail:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid #9a958541; padding-top: calc(14 * var(--cover-u)); }
  .campaign-detail:nth-child(4) { border-top: 1px solid #9a958541; padding-top: calc(14 * var(--cover-u)); }
  .campaign-reward-list { margin: 0; padding-left: 1.2em; }
}

@media (max-width: 900px) { .campaign-reward-list { margin: 0; padding-left: 1.2em; } .campaign-detail-note, .campaign-reward-note { font-size: .7em; } .campaign-reward-list li + li { margin-top: 3px; } }

@media (max-width: 900px) { .campaign-contact { align-items: center; } }

@media (min-width: 901px) { .cover-copy { top: calc(108 * var(--cover-u)); } }


/* Reveal the native hand cursor over active controls while the custom pen is enabled. */
html.has-pen-cursor.is-over-control :is(a[href], button:not(:disabled), [role="button"]),
html.has-pen-cursor.is-over-control :is(a[href], button:not(:disabled), [role="button"]) * {
  cursor: pointer !important;
}
html.has-pen-cursor.is-over-control .pen-cursor {
  opacity: 0;
  visibility: hidden;
}
html.has-pen-cursor.is-over-cover-button .pen-cursor {
  opacity: 1;
  visibility: visible;
}
html.has-pen-cursor.is-over-cover-button .cover-actions .cover-button,
html.has-pen-cursor.is-over-cover-button .cover-actions .cover-button * {
  cursor: none !important;
}

/* Native modal dialogs sit above document overlays. Use the same pen as a
   native cursor there, including the backdrop, without changing focus behavior. */
@media (any-hover:hover) and (any-pointer:fine) {
 html.has-pen-cursor:has(dialog:modal) .pen-cursor { display:none !important; }
 html.has-pen-cursor:has(dialog:modal),
 html.has-pen-cursor:has(dialog:modal) body dialog:modal,
 html.has-pen-cursor:has(dialog:modal) body dialog:modal * {
  cursor:url('/assets/pen-cursor.svg?v=20260928-pagination1') 1 63, auto !important;
 }
 html.has-pen-cursor:has(dialog:modal) dialog::backdrop {
  cursor:url('/assets/pen-cursor.svg?v=20260928-pagination1') 1 63, auto !important;
 }
 html.has-pen-cursor:has(dialog:modal) body dialog:modal .button.primary,
 html.has-pen-cursor:has(dialog:modal) body dialog:modal .button.primary * {
  cursor:url('/assets/pen-cursor-white.svg?v=20260928-pagination1') 1 63, auto !important;
 }
}