/* THE PAPERS, THE POLAROIDS AND THE KEYHOLE (2026-10-27): three pages that come down off the bedroom walls. One explicit
   colour theme, the bedroom's. Phone first: one column, 16px gutters, nothing wider than the screen. The sheets are
   paper taped at the top corners, the polaroids are white frames with the picture area a slot for her photographs
   (--pic until then), the head is plain shapes. Her typefaces come from type.css. */
* { box-sizing: border-box; }
body { margin: 0; background: #2a0a14; color: #f2e2c4; font: 18px/1.5 'Crimson Pro', Georgia, serif; }
main { max-width: 760px; margin: 0 auto; padding: 88px 16px 140px; }   /* clear of the PROTOTYPE tag and the line under it */
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
a { color: #c9a24b; }
a:focus-visible { outline: 3px solid #4fb3a9; outline-offset: 3px; }
h1 { font: 700 30px/1.15 'Lora', 'Crimson Pro', Georgia, serif; margin: 0 0 6px; }
h2 { font: 700 22px/1.2 'Lora', 'Crimson Pro', Georgia, serif; margin: 0 0 10px; }
p { margin: 0 0 12px; }
.back { display: inline-block; margin: 0 0 18px; color: #c9a24b; text-decoration: none; border-bottom: 1px solid #c9a24b77; }
.back::before { content: "\2039  "; }
.lead { color: #e9d9c0; margin-bottom: 22px; }

/* a sheet of paper, taped up at its top corners and a little askew */
.sheet { position: relative; background: #f6ecd6; color: #2a0a14; padding: 26px 20px 20px; margin: 0 0 26px; box-shadow: 3px 5px 7px #0008; transform: rotate(var(--tilt, 0deg)); }
.sheet.torn { clip-path: polygon(1% 0, 30% 2%, 60% 0, 100% 1%, 99% 50%, 100% 100%, 55% 98%, 20% 100%, 0 97%, 2% 40%); }
.sheet::before, .sheet::after { content: ""; position: absolute; top: -7px; width: 54px; height: 16px; background: #e6d7a7bb; border: 1px solid #c9b47a66; }
.sheet::before { left: 8%; transform: rotate(-3deg); }
.sheet::after { right: 8%; transform: rotate(4deg); }
.sheet h2 { color: #4e1230; }
.sheet p { color: #2a0a14; }
.sheet .small { font-size: 15px; color: #5a3a22; }
.sheet ul { margin: 0 0 12px; padding-left: 20px; }
.sheet li { margin: 0 0 4px; }

/* polaroids: a white frame, the picture area a slot, the caption written under it in pen */
.polaroids { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 560px) { .polaroids { grid-template-columns: 1fr 1fr; } .polaroids .wide { grid-column: 1 / -1; } }
.polaroid { position: relative; background: #fffdf6; color: #2a0a14; padding: 12px 12px 16px; box-shadow: 3px 5px 7px #0008; transform: rotate(var(--tilt, 0deg)); }
.polaroid::before { content: ""; position: absolute; left: 34%; top: -7px; width: 32%; height: 15px; background: #e6d7a7bb; border: 1px solid #c9b47a66; transform: rotate(-2deg); }
.polaroid .pic { display: block; width: 100%; aspect-ratio: 1; background: var(--pic, #4fb3a9) center / cover no-repeat; border: 1px solid #0002; }
.polaroid .wide .pic, .polaroid.wide .pic { aspect-ratio: 16 / 10; }
.polaroid p { margin: 12px 2px 0; font-size: 17px; line-height: 1.4; }
.polaroid h2 { margin: 12px 2px 4px; font-size: 20px; }

/* the back of a head with a keyhole in it, and the key */
.head { position: relative; width: min(100%, 340px); margin: 10px auto 26px; aspect-ratio: 1 / 1.25; }
.head .skull { position: absolute; left: 10%; top: 0; width: 80%; height: 68%; background: #f2c9a3; border: 3px solid #2a0a14; border-radius: 50% 50% 46% 46%; box-shadow: 0 0 0 3px #f6ecd6, 3px 5px 7px #0007; }
.head .hair { position: absolute; left: 6%; top: -2%; width: 88%; height: 52%; background: #4e1230; border: 3px solid #2a0a14; border-radius: 50% 50% 30% 30%; box-shadow: 0 0 0 3px #f6ecd6; }
.head .neck { position: absolute; left: 36%; top: 64%; width: 28%; height: 36%; background: #f2c9a3; border: 3px solid #2a0a14; border-top: 0; box-shadow: 0 0 0 3px #f6ecd6; }
.head .keyhole { position: absolute; left: 50%; top: 71%; width: 12%; aspect-ratio: 1 / 1.6; margin-left: -6%; }
.head .keyhole::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #2a0a14; box-shadow: inset 0 0 0 3px #c9a24b; }
.head .keyhole::after { content: ""; position: absolute; left: 25%; top: 50%; width: 50%; height: 50%; background: #2a0a14; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.key { display: flex; align-items: center; gap: 14px; width: fit-content; margin: 0 auto 30px; padding: 12px 18px 12px 14px; color: #2a0a14; background: #c9a24b; border: 3px solid #2a0a14; border-radius: 40px; text-decoration: none; font: 700 20px/1 'Lora', 'Crimson Pro', Georgia, serif; box-shadow: 0 0 0 3px #f6ecd6, 3px 5px 7px #0007; }
.key:hover, .key:focus-visible { background: #e0b95c; outline: none; box-shadow: 0 0 0 3px #4fb3a9, 3px 5px 7px #0007; }
.key .bow { width: 26px; height: 26px; border: 4px solid #2a0a14; border-radius: 50%; }
.key .bit { width: 34px; height: 8px; background: #2a0a14; margin-left: -10px; position: relative; }
.key .bit::after { content: ""; position: absolute; right: 2px; top: 6px; width: 10px; height: 8px; background: #2a0a14; }
.three { list-style: none; padding: 0; margin: 0 0 26px; }
.three li { padding: 8px 0; border-top: 1px solid #c9a24b44; }
.three li:last-child { border-bottom: 1px solid #c9a24b44; }

/* for the jury (2026-10-27): the one box in the place that says where things are; the film slot; a key of your own */
.for, .own { background: #4e1230; border-left: 4px solid #c9a24b; border-radius: 6px; padding: 14px 16px 6px; margin: 0 0 26px; }
.for h2, .own h2 { font-size: 20px; color: #e9d9c0; }
.for .three { margin: 0 0 10px; }
.three li { padding: 8px 0; border-top: 1px solid #c9a24b44; }
.three li:last-child { border-bottom: 0; }
.three b { color: #e9d9c0; }
.three a { color: #c9a24b; }
.film { margin: 0 0 14px; }
.film video { display: block; width: 100%; border: 3px solid #c9a24b; border-radius: 8px; background: #000; }
.film figcaption { font: italic 15px Lora, 'Crimson Pro', Georgia, serif; color: #e9d9c0; margin-top: 6px; }
.own { margin-top: 10px; }
.own a { color: #c9a24b; font-weight: 700; }

/* the head turns round (2026-10-27): two sides on a spindle; the back has the keyhole, the front has the face, and the
   face is her film when it is in. A button over the whole head turns it; the key under it is a separate thing. */
.head { perspective: 900px; }
.head .side { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; backface-visibility: hidden; }
.head .front { transform: rotateY(180deg); }
.head.turned .rear { transform: rotateY(-180deg); }   /* rear, not back: .back is the back link */
.head.turned .front { transform: rotateY(0deg); }
.head .front .skull { background: #f6d2b0; }
.head .front .eye { position: absolute; top: 46%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: #2a0a14; box-shadow: inset 0 0 0 3px #4fb3a9, inset 0 0 0 6px #2a0a14; }
.head .front .eye.l { left: 27%; } .head .front .eye.r { right: 27%; }
.head .front .eye::after { content: ""; position: absolute; left: 22%; top: 18%; width: 24%; height: 24%; border-radius: 50%; background: #fffdf6; }
.head .front .mouth { position: absolute; left: 44%; top: 74%; width: 12%; height: 5%; border-radius: 0 0 40px 40px; background: #c4477a; border: 2px solid #2a0a14; }
.head .front video { position: absolute; left: 10%; top: 0; width: 80%; height: 68%; object-fit: cover; border: 3px solid #2a0a14; border-radius: 50% 50% 46% 46%; background: #000; box-shadow: 0 0 0 3px #f6ecd6; }
.head.hasfilm .front .eye, .head.hasfilm .front .mouth { display: none; }
.turnhead { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: transparent; font-size: 0; cursor: pointer; border-radius: 50%; }
.turnhead:focus-visible { outline: 3px solid #4fb3a9; outline-offset: 6px; }
.head.hasfilm.turned .turnhead { inset: auto 0 -6px 0; height: 28%; border-radius: 0; }   /* with the film playing, the controls are reachable; the turn back is the neck */
@media (prefers-reduced-motion: reduce) { .head .side { transition: none; } }