:root {
  --bg:#f5f0e7; --paper:#fffcf7; --ink:#242720; --muted:#67695f;
  --accent:#ad422e; --accent-soft:#f6e5d9; --line:#d5d3c4;
  --error:#a93224; --radius:12px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.5}
button,input,textarea{font:inherit}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{color:inherit}
button:disabled{cursor:wait}
::selection{background:var(--accent-soft)}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
h1:focus,h2:focus{outline:none}
.app{max-width:584px;margin:auto;padding:22px 24px calc(20px + env(safe-area-inset-bottom))}
.masthead{display:flex;justify-content:space-between;align-items:center;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:9px 0 12px;margin-bottom:27px}
.wordmark{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:27px;letter-spacing:-1.3px;line-height:1}
.wordmark-dot{color:var(--accent)}
.edition{font-size:10px;line-height:1.4;letter-spacing:1.5px;font-weight:700;text-align:right}
.eyebrow{text-transform:uppercase;letter-spacing:1.6px;font-size:10px;line-height:1.5;font-weight:700;color:var(--muted)}
.intro-topline{display:flex;justify-content:space-between;align-items:center}
.issue-number{font:italic 14px Georgia,serif;color:var(--muted)}
h1,h2,p,figure{margin:0}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,9.5vw,62px);font-weight:400;line-height:.99;letter-spacing:-2.2px;margin-top:19px}
em{font-family:Georgia,"Times New Roman",serif;color:var(--accent);font-weight:400}
.intro-art{height:232px;position:relative;margin:15px 0 10px}
.intro-photo{position:absolute;left:24%;top:6px;width:60%;max-width:266px;padding:8px 8px 7px;background:var(--paper);border:1px solid var(--line);transform:rotate(-5deg);box-shadow:1px 4px 0 #d9d5c940}
.intro-photo img{display:block;width:100%;height:auto}
.intro-photo figcaption{font:italic 12px Georgia,serif;text-align:center;margin-top:6px}
.art-note{position:absolute;left:0;top:43px;z-index:2;font:italic 20px Georgia,serif;transform:rotate(-9deg);max-width:100px}
.art-note svg{display:block;width:67px;height:36px;margin:6px 0 0 15px;stroke:var(--ink);stroke-width:1.5;fill:none}
.stamp{position:absolute;bottom:12px;right:0;color:var(--accent);border:2px solid currentColor;padding:7px 11px;font-size:11px;letter-spacing:1px;line-height:1.5;transform:rotate(7deg);background:var(--bg)}
.stamp strong{font-size:13px;letter-spacing:.7px}
.intro-copy{font-size:16px;line-height:1.6;max-width:460px}
.intro-facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:20px 0;font-size:12px;font-weight:600;color:var(--muted)}
.intro-facts span+span:before{content:"·";margin-right:14px;color:var(--accent)}
.btn{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid transparent;border-radius:var(--radius);font-weight:600;font-size:16px;text-decoration:none;text-align:left;cursor:pointer;transition:background .16s,transform .16s}
.btn-primary{background:var(--accent);color:var(--paper);box-shadow:0 3px 0 #7f3325}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn:disabled{opacity:.7}
.smallprint{font-size:12px;line-height:1.55;color:var(--muted);text-align:center;margin:15px 0 0}
.page-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;margin-top:32px;padding:14px 0 0;font-size:10px;letter-spacing:.1px;color:var(--muted)}
.screen.visible{animation:page-in .22s ease both}
@keyframes page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.progress-wrap{margin-top:-7px;margin-bottom:23px}
.progress-meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-bottom:10px}
#progress-label{font-weight:650;color:var(--accent)}
.progress-aside{font-style:italic}
.progress{height:4px;background:var(--line);overflow:hidden;border-radius:3px}
.progress-bar{height:100%;background:var(--accent);width:0;transition:width .22s ease}
.question-title{font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,5.5vw,32px);font-weight:400;line-height:1.13;letter-spacing:-.6px;text-wrap:pretty;margin-bottom:18px}
.question-meme{margin-bottom:20px}
.meme-mat{min-height:156px;display:flex;align-items:center;justify-content:center;padding:8px;background:#e9e6dc;border:1px solid var(--line);border-radius:3px}
.question-meme img{display:block;max-height:220px;max-width:100%;width:auto;height:auto;object-fit:contain}
.meme figcaption{font:italic 12px/1.4 Georgia,"Times New Roman",serif;color:var(--muted);margin-top:8px}
.question-meme figcaption{max-width:95%}
.options{display:flex;flex-direction:column;gap:8px}
.option{position:relative;display:block;width:100%;min-height:52px;text-align:left;padding:12px 14px 12px 42px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);font-size:16px;line-height:1.35;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.option:before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);height:13px;width:13px;border:1px solid #a5a89a;border-radius:50%}
.option:active{transform:translateY(1px)}
.option.selected{background:var(--accent-soft);border-color:var(--accent)}
.option.selected:before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent-soft)}
.option:disabled{color:var(--ink);opacity:1}
.question-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.question-bottom>span{font-size:11px;color:var(--muted);font-style:italic}
.back-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 4px;margin:14px 0 0;border:0;background:none;font-size:14px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;cursor:pointer}
.question-bottom .back-btn{margin:0}
.section-title{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(34px,8vw,43px);line-height:1.08;letter-spacing:-1px;margin:15px 0 19px}
.section-lead{font-size:16px;line-height:1.55;margin-bottom:26px;color:var(--muted)}
.binary-options{display:grid;gap:12px;margin:26px 0 12px}
.binary-options .option{min-height:66px}
label{display:block;font-weight:600;font-size:14px;margin:20px 0 7px}
input:not(.hp),textarea{display:block;width:100%;border:1px solid #b8bcad;border-radius:10px;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;min-height:54px;padding:13px 14px}
textarea{resize:vertical;min-height:154px}
input::placeholder,textarea::placeholder{color:#797b70;opacity:1}
input:focus,textarea:focus{border-color:var(--accent)}
[aria-invalid="true"]{border-color:var(--error)!important}
.field-error{font-size:13px;color:var(--error);margin-top:6px}
.form-note{font-size:12px;color:var(--muted);margin:14px 0 26px}
.form-next{margin-top:28px}
.form-error{background:var(--accent-soft);border-left:3px solid var(--error);padding:12px 14px;font-size:14px;line-height:1.5;margin:18px 0}
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
.friendly-mark{display:inline-block;margin:12px 0 35px;border:2px solid var(--accent);color:var(--accent);padding:15px 23px;transform:rotate(-5deg);font:italic 32px/1.1 Georgia,serif}
.friendly-mark span{font:11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:2px}
.result-thanks{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin:-5px 0 20px}
.little-star{font-size:28px;line-height:1;color:var(--accent)}
.result-card{padding:22px 20px 14px;border:1px solid #b7baac;background:var(--paper);position:relative;margin-bottom:24px;box-shadow:4px 4px 0 #e2dfd3}
.result-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px}
.result-seal{font-size:8px;line-height:1.3;letter-spacing:1px;color:var(--accent);border:1px solid currentColor;border-radius:50%;padding:9px 7px;transform:rotate(12deg);text-align:center}
.result-name{font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,7.5vw,41px);font-weight:400;line-height:1.07;letter-spacing:-1px;margin:12px 0;color:var(--accent);overflow-wrap:break-word}
.result-tagline{font:italic 17px/1.4 Georgia,serif;margin-bottom:20px}
.result-meme{margin-bottom:8px}
.result-meme img{display:block;width:auto;max-width:100%;max-height:240px;height:auto;margin:auto;border-radius:3px}
.result-meme figcaption{text-align:center}
.result-desc{font-size:16px;line-height:1.65;margin:22px 0 26px}
.result-imprint{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:22px;font-size:9px;color:var(--muted)}
.result-imprint span:first-child{font:700 13px Georgia,serif;color:var(--ink)}
.restart{display:flex;margin:14px auto 0}
@media(hover:hover){.btn-primary:hover{background:#943623}.option:hover:not(:disabled){border-color:var(--accent);background:#fbf5eb}.back-btn:hover{color:var(--accent)}}
@media(min-width:700px){.app{padding-top:35px}.masthead{margin-bottom:36px}.intro-art{height:252px;margin-top:22px}.intro-photo{left:29%;width:55%}.art-note{left:9%;top:70px}.stamp{right:6%;bottom:8px}.intro-copy{font-size:18px}.intro-facts{margin:24px 0}.question-title{font-size:34px}.question-meme{margin-bottom:24px}.result-card{padding:28px}.result-desc{font-size:17px}}
@media(max-width:380px){.app{padding-left:18px;padding-right:18px}.intro-art{height:196px}.intro-photo{left:21%;width:66%}.art-note{font-size:17px;top:38px}.stamp{bottom:0;padding:5px 8px;font-size:9px}.stamp strong{font-size:11px}.intro-facts{gap:4px 10px;font-size:11px}.intro-facts span+span:before{margin-right:10px}.progress-aside{font-size:10px}.result-card{padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}