/* The writing pad. One colour scheme, no dark mode switch. Plain shapes until her pictures. */
:root { --wall: #2a0a14; --wood: #7a5230; --gold: #c9a24b; --cream: #f2e2c4; --paper: #fffdf6; --ink: #2a1c2e; --pink: #c4477a; --teal: #4fb3a9; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--wall); color: var(--cream); font-family: 'Crimson Pro',Georgia,serif; }
main { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 16px 120px; max-width: 980px; margin: 0 auto; }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.back { position: fixed; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold); background: #4e1230; z-index: 5; }
.back::after { content: ""; position: absolute; left: 12px; top: 10px; width: 9px; height: 9px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.back:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.desk { position: relative; width: min(100%, 620px); padding: 70px 22px 26px; border-radius: 6px; background: linear-gradient(180deg, #8d6239, var(--wood)); border: 4px solid #2a0a14; box-shadow: 0 24px 50px #000c; }
.lamp { position: absolute; right: 26px; top: -34px; width: 70px; height: 110px; }
.lamp .shade { position: absolute; left: 0; top: 0; width: 70px; height: 40px; background: #e2b06a; border: 3px solid #2a0a14; border-radius: 6px 6px 2px 2px; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.lamp .stem { position: absolute; left: 31px; top: 40px; width: 8px; height: 70px; background: #2a0a14; }
.pen { position: absolute; left: 30px; bottom: 14px; width: 120px; height: 8px; background: linear-gradient(90deg, #2a0a14 0 10%, #c4477a 10% 90%, #ffe9a8 90%); border-radius: 4px; transform: rotate(-8deg); box-shadow: 0 3px 4px #0008; }
.pad { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 24px; background: var(--paper); border: 3px solid #2a0a14; border-top: 14px solid #c4477a; border-radius: 4px; box-shadow: 0 10px 22px #0008; transform: rotate(-.8deg); }
.sheet { position: relative; display: block; width: 100%; padding: 12px 14px 12px 16px; border: 0; border-left: 3px solid #c4477a66; background: none; color: var(--ink); font: 16px/1.35 'Crimson Pro',Georgia,serif; text-align: left; cursor: pointer; }
.sheet b { display: block; font-size: 18px; }
.sheet i { display: block; font-style: italic; font-size: 14px; opacity: .85; margin-top: 2px; }
.sheet em { position: absolute; right: 12px; top: 12px; font: italic 14px Lora,Georgia,serif; color: #7a2e55; }
.sheet:hover, .sheet:focus-visible { background: #fff3c9; outline: none; border-left-color: #c4477a; }
.sheet.head { cursor: default; border-left: 0; color: #7a2e55; font: italic 15px/1.4 Lora,Georgia,serif; }
.sheet.head:hover { background: none; }

.letter { width: min(100%, 620px); padding: 20px 18px 22px; background: var(--paper); color: var(--ink); border: 3px solid #2a0a14; border-radius: 4px; box-shadow: 0 14px 34px #000a; transform: rotate(.6deg); }
.letter[hidden] { display: none; }
.letter h2 { margin: 0 0 4px; font: bold 22px 'Crimson Pro',Georgia,serif; }
.letter .about { margin: 0 0 14px; font: italic 15px/1.4 Lora,Georgia,serif; }
.letter label { display: block; margin: 0 0 12px; font: 15px 'Crimson Pro',Georgia,serif; }
.letter textarea, .letter input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 2px solid #2a0a14; border-radius: 4px; background: #fff; color: var(--ink); font: 16px/1.4 'Crimson Pro',Georgia,serif; }
.letter textarea { min-height: 120px; resize: vertical; }
.letter .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.letter button { padding: 10px 16px; border: 3px solid #2a0a14; border-radius: 8px; background: #2a1c2e; color: #ffe9a8; font: bold 16px 'Crimson Pro',Georgia,serif; cursor: pointer; }
.letter button.plain { background: none; color: #7a2e55; border-color: transparent; font-weight: normal; font-style: italic; }
.letter button:hover, .letter button:focus-visible { background: #4e1230; outline: none; box-shadow: 0 0 0 3px var(--teal); }
.letter button.plain:hover { background: #fff3c9; box-shadow: none; }
.letter .said { margin: 12px 0 0; font: italic 15px/1.4 Lora,Georgia,serif; color: #7a2e55; }
.letter .fine { margin: 14px 0 0; font: 13px/1.5 'Crimson Pro',Georgia,serif; opacity: .85; }

.doors { display: flex; gap: 34px; }
.door { position: relative; display: block; width: 46px; height: 72px; border-radius: 23px 23px 3px 3px; border: 3px solid var(--gold); background: linear-gradient(180deg, #c4501f, #6a2509); transition: transform .3s ease, box-shadow .3s ease; }
.door.box { background: linear-gradient(180deg, #c4477a, #4e1230); }
.door:hover, .door:focus-visible { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 0 28px #c9a24b66; outline: none; }
.knob { position: absolute; right: 7px; top: 58%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
@media (max-width: 480px) { .sheet { font-size: 17px; } .sheet b { font-size: 19px; } .sheet em { position: static; display: block; } }