/* The case desk wears the book's cover: purple ground, cream admission ticket, pink torn strip, petals.
   Colours are the cover's CMYK values converted for screens. No remote fonts or assets (CSP: self only). */
:root{color-scheme:light;--purple:#722c91;--purple-deep:#5b2075;--ink:#311132;--pink:#ed1a75;--pink-deep:#c4115f;--cream:#fdf4d7;--paper:#fffaf0;
 --display:Impact,Haettenschweiler,"Avenir Next Condensed","AvenirNextCondensed-Heavy","Arial Narrow Bold","Roboto Condensed","sans-serif-condensed",sans-serif;
 --text:"Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;--r:26px;--frame:11px}
*{box-sizing:border-box}
html{background:var(--purple)}
body{margin:0;min-height:100vh;background:var(--purple);color:var(--ink);font:17px/1.55 var(--text)}
main{max-width:860px;margin:auto;padding:28px 20px 40px}
[hidden]{display:none!important}
.skip{position:absolute;left:20px;top:-100px;padding:10px 14px;background:var(--cream);color:var(--ink);font-weight:700;z-index:3}.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
h1,h2,.book,.strip,.stub-title,button,label{font-family:var(--display);font-weight:900;font-synthesis:none;font-stretch:condensed;text-transform:uppercase;letter-spacing:.01em}
h1,h2{text-wrap:balance;scroll-margin-top:24px}

/* Masthead: title and the cover's "— KATE DUNFORD —" line */
.masthead{text-align:center;color:var(--cream);margin:4px 0 22px}
.masthead .book{margin:0;font-size:clamp(30px,6vw,46px);line-height:1;letter-spacing:.02em}
.author-credit{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 0;font:600 13px/1.4 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--cream)}
.author-credit::before,.author-credit::after{content:"";width:34px;height:2px;background:currentColor;opacity:.85}

/* The ticket: two panels with concave corners; where they meet the corners form the side notches. */
.ticket{position:relative}
.ticket-main,.ticket-stub,.retry,.letter{position:relative;background:var(--cream) url(/paper.jpg);isolation:isolate;
 -webkit-mask:var(--notches);mask:var(--notches);
 --notches:radial-gradient(circle var(--r) at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle var(--r) at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat}
/* Thin inner frame that follows the notches, as printed on the cover */
.ticket-main::before,.ticket-stub::before,.retry::before,.letter::before{content:"";position:absolute;inset:var(--frame);z-index:-1;background:var(--ink);
 --o:calc(-1*var(--frame));--rr:calc(var(--r) + var(--frame));
 -webkit-mask:radial-gradient(circle var(--rr) at var(--o) var(--o),#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--frame)) var(--o),#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle var(--rr) at var(--o) calc(100% + var(--frame)),#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--frame)) calc(100% + var(--frame)),#0000 98%,#000) bottom right/51% 51% no-repeat;
 mask:radial-gradient(circle var(--rr) at var(--o) var(--o),#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--frame)) var(--o),#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle var(--rr) at var(--o) calc(100% + var(--frame)),#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--frame)) calc(100% + var(--frame)),#0000 98%,#000) bottom right/51% 51% no-repeat}
.ticket-main::after,.ticket-stub::after,.retry::after,.letter::after{content:"";position:absolute;inset:calc(var(--frame) + 2px);z-index:-1;background:var(--cream) url(/paper.jpg);
 --f2:calc(var(--frame) + 2px);--o:calc(-1*var(--f2));--rr:calc(var(--r) + var(--f2));
 -webkit-mask:radial-gradient(circle var(--rr) at var(--o) var(--o),#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--f2)) var(--o),#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle var(--rr) at var(--o) calc(100% + var(--f2)),#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--f2)) calc(100% + var(--f2)),#0000 98%,#000) bottom right/51% 51% no-repeat;
 mask:radial-gradient(circle var(--rr) at var(--o) var(--o),#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--f2)) var(--o),#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle var(--rr) at var(--o) calc(100% + var(--f2)),#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle var(--rr) at calc(100% + var(--f2)) calc(100% + var(--f2)),#0000 98%,#000) bottom right/51% 51% no-repeat}
.ticket-main{padding:46px 56px 44px;text-align:center}
.ticket-stub{display:flex;align-items:center;gap:26px;padding:34px 56px 34px 48px}
.ticket-stub>.outline{flex:0 0 auto}
/* Perforation: a row of dots across the join, between the side notches */
.perforation{position:relative;height:0;z-index:1}
.perforation::before{content:"";position:absolute;left:calc(var(--r) + 8px);right:calc(var(--r) + 8px);top:-6px;height:12px;background:radial-gradient(circle,var(--ink) 4.4px,#0000 5px) center/22px 12px repeat-x}
.ticket-main h1{margin:0 auto;max-width:12ch;color:var(--ink);font-size:clamp(52px,10vw,92px);line-height:.92}
.strip{margin:18px -56px 0;padding:18px 40px 20px;background:url(/torn-strip.png) center/100% 100% no-repeat;color:var(--cream);font-size:clamp(28px,5.6vw,46px);line-height:1}
.lead{max-width:34em;margin:22px auto 6px;font-size:18px}
.fields{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:10px}
.field{flex:0 1 250px;text-align:left}
label{display:block;margin:16px 0 6px;color:var(--ink);font-size:22px;line-height:1.1}
input{display:block;width:100%;border:3px solid var(--ink);border-radius:6px;background:#fffdf7;padding:10px 14px;color:var(--ink);font:700 28px/1.2 var(--text);letter-spacing:.16em;font-variant-numeric:tabular-nums}
input::placeholder{color:#3111322e}
input:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-color:var(--ink)}
.help{font:14px/1.45 var(--text);color:#4d2d4c;margin:7px 0 0}
button{border:0;border-radius:6px;background:var(--pink);color:var(--cream);padding:14px 34px;font-size:26px;line-height:1.1;cursor:pointer;box-shadow:0 5px 0 var(--ink);margin:26px 0 12px;touch-action:manipulation;transition:transform .08s,box-shadow .08s,background .15s}
button:hover:not(:disabled){background:var(--pink-deep)}
button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
button:disabled{opacity:.6;cursor:wait}
#result:not(:empty){margin:14px auto 0;max-width:34em;padding:12px 16px;border:2px solid var(--ink);border-radius:6px;background:#fffdf7;font-weight:600}
.petal{position:absolute;z-index:2;pointer-events:none;height:auto}
.petal-a{width:78px;top:30px;right:26px;transform:rotate(-6deg)}
.petal-b{width:44px;top:250px;left:22px;transform:rotate(14deg)}
.petal-c{width:62px;position:static;margin-left:auto;transform:rotate(-8deg)}
.ticket-stub .outline{width:150px;height:auto}
.stub-text{text-align:left;padding-left:26px;border-left:2px solid var(--ink)}
.stub-title{margin:0;font-size:30px;line-height:1;color:var(--ink)}
.stub-text .help{max-width:30em;margin-top:8px}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Newsletter (hidden unless PORTAL_NEWSLETTER=1) */
footer{margin-top:26px;color:var(--cream)}
.signup{max-width:620px;margin:0 auto;padding:8px 0 20px}.signup h2{font-size:28px;margin:8px 0;color:inherit}.signup .help{color:inherit;opacity:.9}
.signup label{color:inherit;font-size:18px}
.signup-row{display:flex;gap:12px;align-items:stretch}.signup-row input{min-width:0;flex:1;font-size:18px;letter-spacing:0;font-weight:400}.signup-row button{margin:0;flex-shrink:0;font-size:20px;padding:10px 20px}.signup-result:empty{display:none}
body[data-newsletter=off] .signup,body[data-newsletter=off] #desk-screen footer{display:none!important}

/* Checking screen: petals on the cover purple */
#checking{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:var(--purple);color:var(--cream);overscroll-behavior:contain}
#checking::backdrop{background:var(--purple)}body:has(#checking[open]){overflow:hidden}
.checking-inner{min-height:calc(100dvh - 48px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.checking-inner .book{margin:0 0 30px;font-size:18px;letter-spacing:.2em}
.checking-inner h2{font-size:clamp(38px,7vw,64px);line-height:1;margin:0 0 10px}.checking-inner p{margin:0}
.bloom{position:relative;width:180px;height:180px;margin:10px 0 40px;animation:turn 12s linear infinite}
.bloom i{position:absolute;left:66px;top:15px;width:48px;height:78px;border-radius:65% 65% 45% 45%;background:var(--pink);transform-origin:24px 75px;transform:rotate(var(--angle));animation:petal 2.6s ease-in-out infinite;animation-delay:var(--delay)}
.bloom i:nth-child(1){--angle:0deg;--delay:0s}.bloom i:nth-child(2){--angle:45deg;--delay:-.325s}.bloom i:nth-child(3){--angle:90deg;--delay:-.65s}.bloom i:nth-child(4){--angle:135deg;--delay:-.975s}.bloom i:nth-child(5){--angle:180deg;--delay:-1.3s}.bloom i:nth-child(6){--angle:225deg;--delay:-1.625s}.bloom i:nth-child(7){--angle:270deg;--delay:-1.95s}.bloom i:nth-child(8){--angle:315deg;--delay:-2.275s}
.bloom b{position:absolute;left:73px;top:73px;width:34px;height:34px;background:var(--cream);border:6px solid var(--ink);border-radius:50%}
@keyframes turn{to{transform:rotate(360deg)}}@keyframes petal{0%,100%{opacity:.45;transform:rotate(var(--angle)) scale(.86)}50%{opacity:1;transform:rotate(var(--angle)) scale(1)}}
.text-button,.back-button{background:transparent;color:var(--cream);border:0;border-bottom:2px solid #fdf4d780;border-radius:0;box-shadow:none;padding:8px 0;min-height:44px;font-size:18px;letter-spacing:.06em}
.text-button:hover:not(:disabled),.back-button:hover:not(:disabled){background:transparent;color:#fff;border-color:#fff}
.text-button:active:not(:disabled),.back-button:active:not(:disabled){transform:none;box-shadow:none}

/* Replies: the letter and the retry note are cream tickets too */
#reply-screen{max-width:900px;padding-top:22px}
.reply-nav{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:26px}.reply-nav button{margin:0}.reply-nav .book{color:var(--cream);font-size:18px;letter-spacing:.06em}
.letter{max-width:800px;margin:0 auto;padding:60px 66px 44px;line-height:1.75;font:18px/1.75 Georgia,"Times New Roman",serif;animation:unfold .65s ease-out both}
@keyframes unfold{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.letter p{margin:0 0 20px;text-wrap:pretty}
.letterhead{display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:3px solid var(--ink);padding-bottom:24px;margin-bottom:26px}.letterhead p{margin:0}
.letter-office{font:900 40px/1 var(--display);font-synthesis:none;font-stretch:condensed;text-transform:uppercase;color:var(--purple)}
.letter-department{font:600 13px/1.5 var(--text);letter-spacing:.06em;text-transform:uppercase;margin-top:6px!important}
.letter-reference{font:12px/1.5 var(--text);color:#5c3b5a;margin-top:10px!important}
.stamp{flex:0 0 108px;width:108px;height:120px;border:3px double var(--pink);outline:1px solid var(--pink);outline-offset:4px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--pink);transform:rotate(8deg);font:700 9px/1.3 var(--text);letter-spacing:.08em}.stamp svg{width:58px;height:58px;margin:4px 0}.stamp strong{font-size:11px}
.letter-subject{font:600 12px/1.5 var(--text)!important;letter-spacing:.08em;text-transform:uppercase;color:#5c3b5a}
.letter h1{font-size:clamp(34px,5vw,48px);line-height:1;margin:0 0 26px;color:var(--ink)}
.signature{margin-top:32px}.signature p{margin:0 0 10px}.signature .signed{font-style:italic;font-size:30px;color:var(--purple)}.signature p:last-child{font:13px/1.5 var(--text)}
.fiction-note{font:12px/1.5 var(--text)!important;color:#6b4c69;margin:32px 0 0!important}
.retry{max-width:640px;margin:8vh auto 6vh;padding:52px 60px 46px;text-align:center}
.retry .book{margin:0 0 10px;color:var(--pink);font-size:18px;letter-spacing:.14em}
.retry h1{font-size:clamp(40px,7vw,64px);line-height:1;margin:0 0 16px;color:var(--ink)}
.retry p{max-width:44ch;margin:0 auto}
.bottom-back{display:block;margin:28px auto}
.letter-signup{margin:36px auto 0;padding:0 12px;color:var(--cream)}

@media(max-width:700px){
 :root{--r:18px;--frame:8px}
 main{padding:18px 12px 30px}
 .ticket-main{padding:36px 26px 38px}
 .strip{margin:14px -26px 0;padding:14px 20px 16px}
 .lead{font-size:16px}
 .fields{gap:0}.field{flex-basis:100%}
 button{width:100%;font-size:24px}.back-button,.text-button,.signup-row button{width:auto;font-size:16px}
 .reply-nav{gap:10px}.reply-nav .book{max-width:120px;font-size:13px;line-height:1.2}#reply-screen{padding:16px 12px 30px}
 .ticket-stub{padding:26px 26px 28px;gap:16px}
 .ticket-stub .outline{width:96px}
 .stub-text{padding-left:16px}.stub-title{font-size:22px}
 .petal-a{width:48px;top:16px;right:14px}.petal-b{display:none}.petal-c{display:none}
 .author-credit{font-size:11px;letter-spacing:.14em;gap:8px}.author-credit::before,.author-credit::after{width:16px}
 .ticket-main h1{padding:0 18px}
 .letter{padding:38px 26px 30px;font-size:16px}
 .letterhead{gap:14px}.letter-office{font-size:30px}
 .stamp{flex-basis:76px;width:76px;height:94px;font-size:7px}.stamp svg{width:42px;height:42px}.stamp strong{font-size:8px}
 .retry{padding:40px 28px 36px;margin:5vh auto}
 .reply-nav .book{font-size:14px;text-align:right}
 .signup-row{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.bloom,.bloom i,.letter{animation:none}.bloom i{opacity:.7}button{transition:none}}