:root{--bg:#12100D;--cover:#4A2F22;--paper:#F3E7CC;--paper-light:#FFF8E8;--pencil:#303030;--ink:#171717;--brown:#846C52;--archive-red:#B52B25;--stamp-red:#D0352E;--cyan:#18E2EF;--off:#F6F6F1;--buy:#FF9800}*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100svh;overflow-x:hidden;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 24% 16%,rgba(255,248,232,.14),transparent 24%),linear-gradient(135deg,#1b1510,#0f0d0b 58%,#080705)}button,a{font:900 14px/1 Arial,Helvetica,sans-serif;letter-spacing:.02em}.archive-app{position:relative;min-height:100svh;display:grid;place-items:center;padding:clamp(14px,3vw,34px);overflow-x:hidden}.table-light{position:fixed;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 42px),radial-gradient(ellipse at 50% 20%,rgba(255,248,232,.18),transparent 45%);pointer-events:none}.book{position:relative;width:min(1240px,96vw);display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);isolation:isolate;filter:drop-shadow(0 28px 70px rgba(0,0,0,.62));perspective:1400px}.book-cover{pointer-events:none;position:absolute;inset:6% 9%;z-index:4;display:grid;place-items:center;gap:20px;text-align:center;color:#f3d89c;background:linear-gradient(135deg,#583522,#2c1b14);border:3px solid #7b5134;border-radius:16px;box-shadow:inset 0 0 0 6px rgba(0,0,0,.16);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .4s}.cover-title{font-size:clamp(30px,5vw,72px);font-weight:900;line-height:.92}.cover-subtitle{font-size:clamp(13px,1.6vw,21px);font-weight:900;line-height:1.05;color:#f6c8a0}.bookmark{position:absolute;top:-4px;right:16%;width:28px;height:125px;background:#B52B25;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);animation:bookmark 1.1s ease-in-out infinite}.book-spine{background:linear-gradient(90deg,#2b190f,#7a5235,#2b190f);border-radius:10px;box-shadow:inset 0 0 20px rgba(0,0,0,.45)}.page{position:relative;min-height:650px;padding:clamp(20px,2.4vw,34px);background:linear-gradient(135deg,var(--paper-light),var(--paper));border:1px solid rgba(48,48,48,.2);box-shadow:inset 0 0 44px rgba(132,108,82,.18),0 12px 28px rgba(0,0,0,.22);overflow:hidden}.page:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 24%,rgba(132,108,82,.08),transparent 18%),repeating-linear-gradient(0deg,rgba(48,48,48,.025) 0 1px,transparent 1px 9px)}.page>*{position:relative;z-index:1}.page-left{border-radius:18px 4px 4px 18px;display:grid;align-content:start;gap:18px;min-width:0;overflow:hidden}.page-right{border-radius:4px 18px 18px 4px;display:grid;min-width:0;overflow:hidden;grid-template-rows:auto minmax(110px,160px) minmax(0,auto) auto auto auto auto;gap:12px}.left-title{font-weight:900;font-size:clamp(30px,3vw,46px);line-height:.94;color:var(--archive-red);overflow-wrap:anywhere}.register{display:grid;gap:8px;padding:14px;border:2px solid rgba(132,108,82,.45);font-weight:900;color:var(--brown)}.register strong{color:var(--ink)}.left-current,.page-counter{display:grid;gap:5px;color:var(--brown);font-size:13px;font-weight:900}.left-current strong{font-size:22px;color:var(--ink)}.side-stamps{display:grid;grid-template-columns:1fr 1fr;gap:10px}.side-stamps span{border:3px solid var(--archive-red);color:var(--archive-red);padding:8px;text-align:center;font-weight:900;transform:rotate(-5deg);opacity:.72}.side-stamps span:nth-child(2){transform:rotate(4deg)}.side-stamps span:nth-child(3){grid-column:1/-1;transform:rotate(-2deg)}.scribble{height:80px;background:repeating-linear-gradient(168deg,transparent 0 13px,rgba(48,48,48,.42) 14px 15px,transparent 16px 28px);opacity:.3}.case-meta{display:flex;justify-content:space-between;gap:12px;color:var(--brown);font-weight:900;font-size:12px;letter-spacing:.05em;min-width:0}.case-meta span{min-width:0;overflow-wrap:anywhere}.illustration{display:grid;place-items:center;min-height:120px;max-height:180px;overflow:hidden;border:1px dashed rgba(132,108,82,.28);border-radius:8px;background:rgba(255,248,232,.26)}.illustration svg{display:block;width:min(250px,78%);height:auto;max-height:150px;overflow:visible}.draw-line{stroke-dasharray:520;stroke-dashoffset:520}.is-drawing .draw-line{animation:draw 1s ease forwards}.joke{align-self:center;max-width:52ch;margin:0 auto;text-align:center}.joke-text{margin:0;color:var(--ink);font-weight:900;line-height:1.08;overflow-wrap:anywhere;hyphens:auto}.joke--short .joke-text{font-size:clamp(30px,4.4vw,50px)}.joke--medium .joke-text{font-size:clamp(25px,3.5vw,42px)}.joke--long .joke-text{font-size:clamp(21px,2.8vw,34px)}.joke--extra-long .joke-text{font-size:clamp(18px,2.2vw,28px);line-height:1.14}.source-citation{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;color:var(--brown);font-size:11px;font-weight:900;text-align:center}.source-citation a{font-size:11px;color:var(--brown);text-decoration:none;border-bottom:1px solid rgba(132,108,82,.55);min-height:auto;padding:0}.source-citation a:hover{text-decoration:underline}.meter{display:grid;gap:8px}.meter strong{color:var(--archive-red);font-size:13px}.meter-track{height:14px;border:2px solid var(--brown);background:rgba(132,108,82,.18);overflow:hidden}.meter-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#c6a15d,#b52b25,#d0352e);transition:width .65s ease}.meter-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;color:var(--brown);font-size:10px;font-weight:900}.meter-labels span{min-width:0;text-align:center}.stamp-wrap{display:grid;place-items:center;min-height:82px}.stamp{border:5px solid var(--stamp-red);color:var(--stamp-red);padding:10px 14px;text-align:center;font-weight:900;font-size:clamp(18px,2.3vw,30px);line-height:.95;transform:rotate(-4deg) scale(1.12);opacity:0;max-width:min(360px,100%);overflow-wrap:anywhere}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:4px}button,#buyButton{min-height:54px;border-radius:7px;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:0 22px;cursor:pointer;color:var(--paper-light);background:var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.2)}#buyButton{background:var(--buy);color:#120b00;border-color:#120b00}#buyButton[hidden]{display:none}.actions.is-hidden{display:none}button:focus-visible,#buyButton:focus-visible,.source-citation a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.status-text{margin:14px 0 0;color:#f3d89c;text-align:center;font-weight:900}.phase-closed .page,.phase-closed .book-spine{opacity:0}.phase-opening .book-cover{transform:rotateY(-108deg) translateX(-42%);opacity:0}.is-ready .book-cover{visibility:hidden;opacity:0;transform:rotateY(-108deg) translateX(-42%)}.phase-opening .page,.phase-opening .book-spine,.is-ready .page,.is-ready .book-spine{opacity:1}.phase-flip .page-right{animation:pageFlip .7s ease}.is-stamped .stamp{animation:stamp .34s cubic-bezier(.2,1.5,.2,1) forwards}.is-metered .meter-track span{width:var(--meter,25%)}.is-writing .joke{animation:fadeUp .35s ease both}@keyframes bookmark{50%{transform:translateY(8px)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes stamp{60%{opacity:1;transform:rotate(-4deg) scale(.98)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}@keyframes pageFlip{0%{transform:rotateY(0)}45%{transform:rotateY(-16deg)}100%{transform:rotateY(0)}}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:1180px){
  .archive-app{place-items:start center;padding:10px 10px max(18px,env(safe-area-inset-bottom))}
  .book{width:min(760px,100%);display:block}
  .book-spine,.page-left{display:none!important}
  .page-right{min-height:auto;border-radius:16px;padding:18px 16px 20px;grid-template-rows:auto auto auto auto auto auto auto;gap:12px}
  .book-cover{inset:6% 4%;min-height:620px}
  .illustration{min-height:132px;max-height:164px}
  .illustration svg{width:min(252px,84%);max-height:150px}
  .case-meta{display:flex;align-items:center}
  .joke{max-width:100%}
  .joke--short .joke-text{font-size:clamp(29px,7vw,46px)}
  .joke--medium .joke-text{font-size:clamp(25px,6vw,38px)}
  .joke--long .joke-text{font-size:clamp(21px,5vw,32px)}
  .joke--extra-long .joke-text{font-size:clamp(18px,4.4vw,26px)}
  .meter-labels{grid-template-columns:repeat(2,1fr);font-size:9px}
  .stamp-wrap{min-height:74px}
  .stamp{font-size:clamp(18px,4.6vw,28px)}
  .actions{display:grid}
  .actions button,.actions a{width:100%}
}
@media(max-width:780px){.archive-app{place-items:start center;padding:10px 10px max(18px,env(safe-area-inset-bottom))}.book{width:min(520px,100%);display:block}.book-spine,.page-left{display:none}.page-right{min-height:auto;border-radius:16px;padding:18px 16px 20px;grid-template-rows:auto auto auto auto auto auto auto;gap:12px}.book-cover{inset:6% 4%;min-height:620px}.illustration{min-height:132px;max-height:164px}.illustration svg{width:min(252px,84%);max-height:150px}.case-meta{display:grid}.joke{max-width:100%}.joke--short .joke-text{font-size:clamp(29px,8vw,38px)}.joke--medium .joke-text{font-size:clamp(25px,7vw,34px)}.joke--long .joke-text{font-size:clamp(21px,6vw,29px)}.joke--extra-long .joke-text{font-size:clamp(18px,5vw,24px)}.meter-labels{grid-template-columns:repeat(2,1fr);font-size:9px}.stamp-wrap{min-height:74px}.stamp{font-size:clamp(18px,5.2vw,24px)}.actions{display:grid}.actions button,.actions a{width:100%}}@media(max-height:790px) and (min-width:900px){.page{min-height:610px}.page-right{grid-template-rows:auto minmax(100px,150px) auto auto auto auto auto}.illustration{max-height:150px}.joke--medium .joke-text{font-size:32px}.joke--long .joke-text{font-size:27px}.joke--extra-long .joke-text{font-size:23px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.draw-line{stroke-dashoffset:0}}

/* v1.6 visual repair: customer-facing single archive page */
.book{
  width:min(920px,96vw)!important;
  display:block!important;
  filter:drop-shadow(0 24px 64px rgba(0,0,0,.58))!important;
}
.book-spine,
.page-left{
  display:none!important;
}
.page-right{
  width:100%!important;
  min-height:auto!important;
  border-radius:18px!important;
  padding:clamp(18px,2.4vw,30px)!important;
  grid-template-rows:auto minmax(120px,170px) auto auto auto auto auto!important;
  gap:clamp(10px,1.4vw,14px)!important;
  overflow:hidden!important;
}
.book-cover{
  inset:0!important;
  border-radius:18px!important;
}
.phase-opening .book-cover{
  transform:translateY(-10px) scale(.98)!important;
  opacity:0!important;
}
.is-ready .book-cover{
  visibility:hidden!important;
  opacity:0!important;
  transform:none!important;
}
.illustration{
  min-height:118px!important;
  max-height:168px!important;
}
.illustration svg{
  width:min(250px,74%)!important;
  max-height:148px!important;
}
.joke{
  max-width:17ch!important;
}
.joke--short .joke-text{font-size:clamp(34px,5.4vw,60px)!important}
.joke--medium .joke-text{font-size:clamp(30px,4.7vw,52px)!important}
.joke--long .joke-text{font-size:clamp(25px,3.8vw,42px)!important}
.joke--extra-long .joke-text{font-size:clamp(21px,3.2vw,34px)!important}
.source-citation{
  margin-top:2px!important;
}
.meter{
  margin-top:2px!important;
}
.meter-labels{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  font-size:clamp(9px,1vw,11px)!important;
}
.stamp-wrap{
  min-height:88px!important;
}
.stamp{
  transform:rotate(-3deg) scale(1)!important;
  font-size:clamp(22px,3.5vw,38px)!important;
}
.actions{
  margin-top:6px!important;
}
@media(max-width:700px){
  .book{width:min(520px,100%)!important}
  .page-right{padding:16px 14px 18px!important;gap:11px!important}
  .joke{max-width:100%!important}
  .joke--short .joke-text{font-size:clamp(29px,8vw,40px)!important}
  .joke--medium .joke-text{font-size:clamp(25px,7vw,34px)!important}
  .joke--long .joke-text{font-size:clamp(21px,6vw,29px)!important}
  .joke--extra-long .joke-text{font-size:clamp(18px,5vw,24px)!important}
  .meter-labels{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* v1.6 text readability repair */
.joke {
  max-width: min(760px, 92%) !important;
}

.joke-text {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto !important;
}

.joke--short .joke-text {
  font-size: clamp(34px, 4.7vw, 58px) !important;
}

.joke--medium .joke-text {
  font-size: clamp(30px, 4vw, 50px) !important;
}

.joke--long .joke-text {
  font-size: clamp(25px, 3.2vw, 40px) !important;
}

.joke--extra-long .joke-text {
  font-size: clamp(21px, 2.6vw, 32px) !important;
}

@media (max-width: 700px) {
  .joke {
    max-width: 100% !important;
  }

  .joke-text {
    overflow-wrap: break-word !important;
  }
}

/* v1.6 viewport balance repair */
@media (min-width: 900px) {
  .archive-app {
    place-items: center !important;
  }
}