/* Riddle's Diary. The positions and the motion rules port from design/Prototype.dc.html;
   the materials follow the diary in the film (Chamber of Secrets): candlelit paper with
   a fibre texture and faint creases, pages that curve into a dark spine with a stack of
   leaves at the fore-edge, olive-brown leather with brass-pewter corner plates, and the
   name stamped in worn gold. One lamp, at the top left, lights all of it. */

html,body{overscroll-behavior:none}
body{margin:0;background:#110E09;overflow:hidden}

/* The page loads still: settings kept from an earlier visit apply without a fade. */
.still,.still *,.still *::before,.still *::after{transition:none !important}

/* The shared shapes: the metal gradient and the corner plate. */
.defs{position:absolute;width:0;height:0}

/* The cover: olive-brown leather, lit from the top left, with a grain over it. Fills
   the viewport; the band below the page holds the stamped name and the two bottom
   corner plates. --pull is how far the ribbon is pulled: 0 at rest, 1 with the card
   down. */
.leather{
  position:relative;min-height:100dvh;overflow:hidden;box-sizing:border-box;isolation:isolate;--pull:0;
  background:
    radial-gradient(70% 50% at 18% 8%,rgba(170,110,70,.14),transparent 70%),
    radial-gradient(120% 90% at 30% 20%,#3B3224 0%,#252017 45%,#110E09 100%);
}
.leather::before{content:'';position:absolute;inset:0;opacity:0;pointer-events:none}
.hide{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;opacity:.12;pointer-events:none}
.menu-open{--pull:1}

/* The fold on the left of the phone's page: the facing page's curled edge, lit, and
   the dark of the spine under the page's edge. */
.gutter{position:absolute;left:0;top:18px;bottom:64px;width:30px;background-color:#8A5A33;background-image:linear-gradient(to right,rgba(255,200,150,.3),rgba(0,0,0,0) 30%,rgba(10,4,0,.78) 70%,rgba(10,4,0,.92) 100%);transition:background-color 1.2s ease}

/* A leaf of the book: the page and the stack of leaves under it. The leaf holds the
   position and the shadow on the cover; its two layers are the leaves beneath,
   offset towards the fore-edge, and the page is clipped to the same outline, which
   wanders by a pixel or two along every edge but the spine. On the phone the page is
   the right-hand page, as in every shot of the film: the spine is on its left and the
   leaves show on its right. */
.leaf{
  position:absolute;left:26px;right:8px;top:18px;bottom:64px;isolation:isolate;box-shadow:0 10px 26px rgba(0,0,0,.6);
  --deckle:polygon(0 0,7% .15%,16% 0,27% .18%,38% .03%,50% .18%,61% 0,72% .15%,84% .03%,93% .18%,100% .06%,99.6% 8%,100% 17%,99.5% 27%,99.8% 38%,99.4% 49%,99.9% 60%,99.5% 70%,99.8% 80%,99.4% 90%,99.8% 100%,92% 99.82%,82% 100%,70% 99.8%,58% 100%,46% 99.82%,34% 100%,22% 99.82%,10% 100%,0 100%);
}
.leaf::before,.leaf::after{content:'';position:absolute;inset:0;z-index:-1;clip-path:var(--deckle);pointer-events:none;transition:background-color 1.2s ease}
.leaf::before{transform:translate(6px,5px);background-color:#A87A4D}
.leaf::after{transform:translate(3px,2px);background-color:#BE8D5E}
.recto-leaf,.spine{display:none}

/* The page: a plain box holding the sheet and the writing area. The sheet is the
   paper itself, clipped to the deckled outline: no ruling, lit from the top left and
   shaded to the bottom right, with two faint creases, a few spots and a darker edge.
   The lit paper (::before) fades in under the fold (::after), which is the page's
   curve into the spine: dark at the fold, a thin highlight where the paper turns,
   then flat. The writing area is not clipped: on the spread it lies over the other
   page. */
.paper{position:absolute;inset:0}
.sheet{
  position:absolute;inset:0;box-sizing:border-box;isolation:isolate;clip-path:var(--deckle);
  --creases:
    linear-gradient(112deg,transparent 37.6%,rgba(255,240,210,.05) 38.3%,rgba(60,30,8,.045) 39%,transparent 39.8%),
    linear-gradient(81deg,transparent 60.6%,rgba(255,240,210,.045) 61.3%,rgba(60,30,8,.04) 62%,transparent 62.8%);
  background-color:#C8945F;
  background-image:
    linear-gradient(160deg,rgba(255,226,186,.3) 0%,rgba(255,226,186,.08) 35%,transparent 50%,rgba(70,32,8,.22) 80%,rgba(70,32,8,.36) 100%),
    var(--creases),
    radial-gradient(50% 40% at 100% 100%,rgba(130,75,30,.26),transparent 70%),
    radial-gradient(6px 6px at 72% 18%,rgba(110,65,25,.35),transparent 100%),
    radial-gradient(9px 7px at 23% 64%,rgba(110,65,25,.28),transparent 100%),
    radial-gradient(5px 5px at 88% 71%,rgba(110,65,25,.3),transparent 100%),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(90,45,12,.28) 100%);
}
.recto{--creases:
    linear-gradient(68deg,transparent 43.6%,rgba(60,30,8,.045) 44.3%,rgba(255,240,210,.05) 45%,transparent 45.8%),
    linear-gradient(121deg,transparent 70.6%,rgba(255,240,210,.045) 71.3%,rgba(60,30,8,.04) 72%,transparent 72.8%)}
.sheet::before,.sheet::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.sheet::after{background:linear-gradient(to right,rgba(30,12,2,.55) 0,rgba(30,12,2,.28) 5%,rgba(255,236,205,.12) 9%,transparent 16%)}
.grain,.mottle,.fibre{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}
.grain{opacity:.18}
/* The cloudy tone of the paper and the fibres running across it, under the grain. */
.mottle{opacity:.22}
.fibre{opacity:.1}

/* The writing area: 30 px in from the page edge and 76 px down, so the first line
   is below the point of the ribbon. It fades while the card is down. */
.area{position:absolute;left:30px;right:30px;top:76px;opacity:calc(1 - .65 * var(--pull));transition:opacity .32s cubic-bezier(.2,.7,.2,1)}

/* The reply sits above the writer's line; the line slot holds the hint, the sunk
   glyphs and the field at the same top left, so sunk ink lies where it was typed. */
.reply{margin:0}
.line{position:relative}
.sunk{position:absolute;left:0;top:0;right:0;margin:0}
.reply,.sunk{white-space:pre-wrap;overflow-wrap:break-word}

/* The writer's ink, in Harry's hand: a quill print, unjoined, in a warm brown-black.
   The field holds six lines. */
.writer{font-family:'Mansalva',cursive;font-size:22px;line-height:36px;color:#2C1A0E;text-shadow:0 0 .4px rgba(44,26,14,.6)}
.field{display:block;width:100%;height:216px;margin:0;padding:0;border:0;outline:0;resize:none;background:transparent;caret-color:transparent;overflow:hidden}
.field:focus{outline:0}

/* The diary's ink, in Riddle's hand: a broad-nib italic, darker than the writer's. */
.diary{font-family:'Kings',cursive;font-size:30px;line-height:40px;color:#241307;-webkit-text-stroke:.2px #241307;text-shadow:0 0 .7px rgba(36,19,7,.5),0 0 3px rgba(90,50,15,.14)}

/* The hint: delay 600, in 800, hold 2500, out 1200; once per visit. */
.hint{position:absolute;left:0;top:0;margin:0;font-family:'Mansalva',cursive;font-size:18px;line-height:36px;color:rgba(60,36,14,.58);opacity:0;animation:hint 4.5s ease-in-out .6s forwards;pointer-events:none}
@keyframes hint{0%{opacity:0}17.78%{opacity:1}73.33%{opacity:1}100%{opacity:0}}

/* Ink sinking: 2200 ease-in per character, staggered by the inline delay. */
.sink{animation:sink 2.2s ease-in forwards}
@keyframes sink{0%{opacity:1;filter:blur(0)}55%{opacity:.55;filter:blur(.5px)}100%{opacity:0;filter:blur(1.6px)}}

/* The reply rises out of the paper, all of it at once, as in the film. Each glyph
   starts at its inline delay as a faint, soft copy with a wide halo, and darkens to
   the ink over 1500 ms. */
.rise{animation:rise 1.5s ease-in-out both}
@keyframes rise{
  0%{opacity:0;filter:blur(1px);text-shadow:0 0 6px rgba(36,19,7,.4)}
  35%{opacity:.35;filter:blur(.6px)}
  100%{opacity:1;filter:blur(0);text-shadow:0 0 .7px rgba(36,19,7,.5),0 0 3px rgba(90,50,15,.14)}
}

/* Clearing: the whole reply sinks over 1700 ease-in. */
.gone{animation:sink 1.7s ease-in forwards}

/* The one live region, filled when the reply is complete. */
.spoken{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Reduced motion: the sink and the rise are 400 ms crossfades, no blur. */
@media (prefers-reduced-motion: reduce){
  .sink,.gone{animation:fadeOut .4s ease forwards}
  .rise{animation:fadeIn .4s ease both}
  @keyframes fadeOut{from{opacity:1}to{opacity:0}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
}

/* The bookmark, hanging 72 px over the top edge; pulled, 338 px. The button is the
   touch target, 44 px wide over the ribbon at rest. The ribbon itself is the strip,
   drawn over the card and taking no taps, so the card's controls under it work. */
.ribbon{position:absolute;right:47px;top:0;width:44px;height:86px;margin:0;padding:0;border:0;background:none;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.ribbon:focus{outline:0}
.ribbon:focus-visible{outline:1px solid #2C1A0E;box-shadow:0 0 0 2px #C8945F}
/* Its colours go from the dark ribbon to the lit one as --lit goes from 0 to 1, and
   to a brighter red as --ration goes from 0 to 1, once today's ration is spent. A
   layer faded in over it would leave the ribbon beneath showing along the clipped
   edge. */
.strip{position:absolute;right:62px;top:14px;width:14px;height:calc(72px + 266px * var(--pull));background:linear-gradient(to right,color-mix(in srgb,color-mix(in srgb,#3E1A18,#4A1F1C calc(var(--lit) * 100%)),color-mix(in srgb,#6B241F,#7A2A25 calc(var(--lit) * 100%)) calc(var(--ration) * 100%)),color-mix(in srgb,color-mix(in srgb,#572826,#6A3030 calc(var(--lit) * 100%)),color-mix(in srgb,#8C3631,#9E403A calc(var(--lit) * 100%)) calc(var(--ration) * 100%)) 45%,color-mix(in srgb,color-mix(in srgb,#3A1715,#45191A calc(var(--lit) * 100%)),color-mix(in srgb,#62201C,#722521 calc(var(--lit) * 100%)) calc(var(--ration) * 100%)));box-shadow:1px 2px 4px rgba(0,0,0,.45);clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),50% 100%,0 calc(100% - 7px));pointer-events:none}

/* The corner plates: worn brass-pewter, drawn once for the bottom left and mirrored
   for the others. The phone shows the two on the band; the spread shows all four. */
.corner{position:absolute;width:56px;height:56px;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.corner.bl{left:0;bottom:0}
.corner.br{right:0;bottom:0;transform:scaleX(-1)}
.corner.tl,.corner.tr{display:none}

/* The name stamped in the band, 44 px up from the bottom edge, as on the film's
   cover: heavy capitals in worn gold foil. The gold is a gradient clipped to the
   glyphs, so the stamped depth is a drop shadow rather than a text shadow. */
.emboss{position:absolute;left:0;right:0;top:calc(100% - 44px);margin:0;text-align:center;font-family:'Old Standard TT',serif;font-weight:700;font-size:16px;letter-spacing:.05em;color:transparent;background-image:repeating-linear-gradient(100deg,transparent 0 5px,rgba(60,40,20,.28) 5px 6px,transparent 6px 11px),linear-gradient(to bottom,#D9B274 0%,#B98E52 45%,#7E5F31 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.7))}

/* A memory: the page goes soft and dark behind a framed sepia scene, and the frame
   finishes 600 ms after the dim. The ribbon goes with the page; the name stays
   above the dim, duller. Leaving plays the same in reverse over 1200 ms: the
   frame over all of it, the rest over the last 900, on the time-reversed curves. */
.paper{transition:filter 1.8s ease}
.strip{transition:height .32s cubic-bezier(.2,.7,.2,1),opacity 1.8s ease}
.emboss{transition:filter 1.2s ease}
.remembering .paper{filter:blur(1.4px)}
.remembering .strip{opacity:0}
.remembering .emboss{filter:brightness(.6) drop-shadow(0 -1px 0 rgba(0,0,0,.7));transition:filter 1.8s ease}
.leaving .paper{transition:filter .9s cubic-bezier(.75,0,.75,.9) .3s}
.leaving .strip{transition:height .32s cubic-bezier(.2,.7,.2,1),opacity .9s cubic-bezier(.75,0,.75,.9) .3s}
.leaving .emboss{transition:filter .9s cubic-bezier(.75,0,.75,.9) .3s}

.memory{position:absolute;inset:0}
.dim{position:absolute;inset:0;background:rgba(12,7,4,.8);animation:dimIn 1.8s ease forwards}
@keyframes dimIn{from{opacity:0}to{opacity:1}}
.leaving .dim{animation:dimOut .9s cubic-bezier(.75,0,.75,.9) .3s both}
@keyframes dimOut{from{opacity:1}to{opacity:0}}

/* The frame and the return control, 290 wide and centred, as on the artboard. */
.frame{position:absolute;left:calc(50% - 145px);top:150px;width:290px;height:380px;box-sizing:border-box;border:1px solid #8C7340;padding:7px;background:#150D07;box-shadow:0 0 0 1px rgba(140,115,64,.18) inset,0 0 46px rgba(201,154,88,.10),0 24px 40px rgba(0,0,0,.6);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}
.leave{position:absolute;left:calc(50% - 145px);top:566px;width:290px;display:flex;flex-direction:column;align-items:center;gap:14px}
.leave .rule{width:48px;height:1px;background:#5F4E2E}
.frame,.leave{animation:frameIn 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes frameIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.leaving .frame,.leaving .leave{animation:frameOut 1.2s cubic-bezier(.8,0,.8,.3) forwards}
@keyframes frameOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}

/* The scene, drawn in CSS: a torchlit corridor with a lit doorway at the far end. */
.view{position:relative;height:100%;overflow:hidden}
.scene{position:absolute;inset:0;background:radial-gradient(45% 55% at 50% 52%,rgba(196,146,74,.5),transparent 70%),linear-gradient(to bottom,#241709 0%,#3A2714 48%,#1C1309 100%)}
.scene>div{position:absolute}
.pillar{background:linear-gradient(to right,#17100A,#3E2C18 42%,#120C07)}
.pillar.near{top:0;width:36px;height:100%}
.pillar.far{top:44px;width:20px;height:290px;opacity:.85}
.pillar.near.left{left:14px}
.pillar.near.right{right:14px}
.pillar.far.left{left:66px}
.pillar.far.right{right:66px}
.doorway{left:112px;top:116px;width:50px;height:126px;background:#0E0905}
.door{left:117px;top:120px;width:40px;height:118px;background:linear-gradient(to bottom,#DDB373,#9C7140);box-shadow:0 0 34px 12px rgba(216,172,104,.32)}
.figure{left:131px;top:178px;width:12px;height:60px;background:#0B0704;border-radius:6px 6px 0 0}
.floor{left:0;bottom:0;width:100%;height:110px;background:linear-gradient(to top,#110B05,rgba(17,11,5,0))}
.vig{inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(10,6,3,.9) 100%)}
.scene .grain{opacity:.22}
.caption{position:absolute;left:18px;top:14px;margin:0;font-family:'Kings',cursive;font-size:22px;line-height:28px;color:#D2AE70}

/* Return to the page: brass, at least 44 px high. */
.return{display:inline-block;margin:0;padding:12px 18px;min-height:44px;box-sizing:border-box;background:none;border:0;cursor:pointer;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:#9A8148}
.return:hover{color:#B4985A}
.return:focus{outline:0}
.keyed .return:focus-visible{outline:1px solid #8C7340;outline-offset:2px}

/* Reduced motion: the frame fades and does not scale; the dim and the blur stay. */
@media (prefers-reduced-motion: reduce){
  .frame,.leave{animation-name:fadeIn}
  .leaving .frame,.leaving .leave{animation-name:fadeOut}
}

/* The bookmark menu: a darker slip of paper that comes down 24 px with the ribbon
   and fades in over 320 ms. While it is down, the scrim under it takes a tap on the
   page or the ribbon and puts it back. The ribbon lies over the card 22 to 36 px in
   from its right edge, so the text stops 44 px in. */
.scrim{position:absolute;inset:0;visibility:hidden}
.menu-open .scrim{visibility:visible}
.card{position:absolute;right:40px;top:24px;width:248px;box-sizing:border-box;padding:22px 44px 18px 22px;display:flex;flex-direction:column;gap:6px;background-color:#C9B991;background-image:radial-gradient(70% 60% at 100% 0%,rgba(120,85,40,.2),transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(95,65,28,.18) 100%);box-shadow:0 10px 24px rgba(0,0,0,.5),0 1px 0 rgba(255,245,220,.25) inset;opacity:var(--pull);transform:translateY(calc(-24px * (1 - var(--pull))));visibility:hidden;transition:opacity .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s .32s}
.menu-open .card,.pulling .card{visibility:visible;transition-delay:0s}
.pulling .strip,.pulling .card,.pulling .area{transition:none}
.card:focus{outline:0}
.item{margin:0;padding:10px 0;min-height:44px;background:none;border:0;cursor:pointer;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:19px;line-height:24px;text-align:left;color:#2A231D}
.divider{height:1px;background:rgba(90,64,34,.3)}
.wipe+.divider{margin:2px 0 8px}
.notice,.ration{margin:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:15px;line-height:20px;color:#4F3D1E}
.card button:focus{outline:0}
.card button:focus-visible{outline:1px solid #2A231D;outline-offset:2px}

/* Light the room: the leather and the paper are lit over 1200 ms. Gradients do not
   fade into one another, so the lit leather and paper are layers that fade in over
   the dark ones; the leaves, the gutter, the ribbon and the name change in place.
   The inks, the hint, the card and the memory stay. */
body{transition:background-color 1.2s ease}
.leather::before{background:radial-gradient(70% 50% at 18% 8%,rgba(190,130,90,.14),transparent 70%),radial-gradient(120% 90% at 30% 20%,#5A4C3A 0%,#3E3426 45%,#27211A 100%);transition:opacity 1.2s ease}
.sheet::before{
  background-color:#EBD3AC;
  background-image:
    linear-gradient(160deg,rgba(255,236,206,.24) 0%,rgba(255,236,206,.06) 35%,transparent 50%,rgba(90,48,16,.14) 80%,rgba(90,48,16,.24) 100%),
    var(--creases),
    radial-gradient(50% 40% at 100% 100%,rgba(150,95,45,.18),transparent 70%),
    radial-gradient(6px 6px at 72% 18%,rgba(130,85,40,.26),transparent 100%),
    radial-gradient(9px 7px at 23% 64%,rgba(130,85,40,.2),transparent 100%),
    radial-gradient(5px 5px at 88% 71%,rgba(130,85,40,.22),transparent 100%),
    radial-gradient(ellipse at 50% 50%,transparent 56%,rgba(110,65,25,.2) 100%);
  opacity:0;transition:opacity 1.2s ease;
}
.sheet>.grain,.sheet>.mottle,.sheet>.fibre{transition:opacity 1.2s ease}
@property --lit{syntax:'<number>';inherits:true;initial-value:0}
@property --ration{syntax:'<number>';inherits:true;initial-value:0}
html{transition:--lit 1.2s ease,--ration 1.2s ease}
.light{--lit:1}
.rationed{--ration:1}
.light body{background:#272219}
.light .leather::before,.light .sheet::before{opacity:1}
.light .leaf::before{background-color:#C6A77C}
.light .leaf::after{background-color:#D9BC92}
.light .gutter{background-color:#9C7048}
.light .sheet>.grain{opacity:.12}
.light .sheet>.mottle{opacity:.14}
.light .sheet>.fibre{opacity:.07}
.light .emboss{filter:brightness(1.12) drop-shadow(0 -1px 0 rgba(0,0,0,.6))}
.light .remembering .emboss{filter:brightness(.7) drop-shadow(0 -1px 0 rgba(0,0,0,.6))}

/* Reduced motion: the ribbon snaps and the card fades where it stands; the room
   is still lit over 1200 ms, and the ribbon still brightens and fades back over
   1200 ms, a change of colour and not a movement. */
@media (prefers-reduced-motion: reduce){
  .strip{transition:opacity 1.8s ease}
  .leaving .strip{transition:opacity .9s cubic-bezier(.75,0,.75,.9) .3s}
  .card{transform:none}
}

/* The spread, at 900 px and up: the diary lies open on a desk under the lamp, with
   the positions of the Desktop-Spread artboard. The cover is centred, 54 px down and
   120 px in on a 1280 by 820 window, and shrinks to fit a smaller one. As in the
   film, the writer writes on the right page and the diary answers in the same place;
   the left page stays blank. The writing area belongs to the left page in the markup
   and is set 8 + 46 px past its edge, 44 px in from the right page's outer edge, so
   its top clears the point of the ribbon. The right leaf comes first in the markup so
   the area is drawn over it. Each page curves into the spine on its inner edge and
   carries its leaves on its outer edge. */
@media (min-width: 900px){
  body,.light body{display:grid;place-items:center;min-height:100dvh;padding-top:28px;box-sizing:border-box;background:radial-gradient(80% 70% at 32% 18%,#5C3A1E 0%,#3A2211 45%,#170D06 100%)}
  .leather{
    width:min(1040px,100% - 80px);height:min(740px,100dvh - 80px);min-height:0;border-radius:4px;
    background:
      radial-gradient(60% 50% at 16% 6%,rgba(170,110,70,.16),transparent 70%),
      radial-gradient(120% 100% at 30% 20%,#3D3426 0%,#262119 50%,#130F0A 100%);
    box-shadow:0 30px 60px rgba(0,0,0,.7),0 2px 0 rgba(255,220,170,.05) inset;
  }
  .gutter{display:none}
  .leaf{top:24px;right:auto;bottom:56px;left:26px;width:calc(50% - 30px);box-shadow:0 12px 30px rgba(0,0,0,.65)}
  .recto-leaf{display:block;left:auto;right:26px}
  /* The left page's outline is the mirror of the right page's: straight at the spine,
     on its right, and wandering on its other edges. */
  .verso-leaf{--deckle:polygon(100% 0,93% .15%,84% 0,73% .18%,62% .03%,50% .18%,39% 0,28% .15%,16% .03%,7% .18%,0 .06%,.4% 8%,0 17%,.5% 27%,.2% 38%,.6% 49%,.1% 60%,.5% 70%,.2% 80%,.6% 90%,.2% 100%,8% 99.82%,18% 100%,30% 99.8%,42% 100%,54% 99.82%,66% 100%,78% 99.82%,90% 100%,100% 100%)}
  .verso-leaf::before{transform:translate(-6px,5px)}
  .verso-leaf::after{transform:translate(-3px,2px)}
  .verso .sheet::after{background:linear-gradient(to left,rgba(30,12,2,.55) 0,rgba(30,12,2,.28) 5%,rgba(255,236,205,.12) 9%,transparent 16%)}
  .spine{display:block;position:absolute;left:calc(50% - 28px);top:16px;bottom:48px;width:56px;background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.78) 50%,rgba(0,0,0,.55) 58%,rgba(0,0,0,0) 100%);pointer-events:none}
  .area{left:calc(100% + 54px);right:calc(44px - 100% - 8px)}
  .diary{font-size:32px;line-height:42px}

  /* The ribbon hangs 84 px over the right page and is pulled as far as on the single
     page; the card comes down beside it, and a tap anywhere on the desk puts it back. */
  .strip{right:76px;top:10px;height:calc(84px + 266px * var(--pull))}
  .ribbon{right:61px;height:94px}
  .card{right:54px}
  .scrim{position:fixed}
  .emboss{top:calc(100% - 36px)}

  /* All four corner plates, a little larger. */
  .corner{width:64px;height:64px}
  .corner.tl{display:block;left:0;top:0;transform:scaleY(-1)}
  .corner.tr{display:block;right:0;top:0;transform:scale(-1,-1)}

  /* A memory: the dim covers the desk too, and the frame is centred on the spread. */
  .dim{position:fixed}
  .frame{top:calc(50% - 238px)}
  .leave{top:calc(50% + 178px)}

  /* The room lit: the desk is a layer that fades in like the leather and the paper. */
  body::before{content:'';position:fixed;inset:0;background:radial-gradient(80% 70% at 32% 18%,#7A5230 0%,#52341C 45%,#2A1A0E 100%);opacity:0;transition:opacity 1.2s ease;pointer-events:none}
  .light body::before{opacity:1}
}