/* Guestbook: the pixel typewriter, the section above the footer, the floating button and the full-screen desk. */

/* ---------- the typewriter itself ---------- */
.tw{--k:4px;position:relative;margin-inline:auto;user-select:none;-webkit-user-select:none;image-rendering:pixelated;filter:drop-shadow(0 calc(var(--k)*2) calc(var(--k)*3) rgba(0,0,0,.35))}
.tw canvas{display:block;image-rendering:pixelated}
.tw-win{position:absolute;top:0;overflow:hidden;background:
  linear-gradient(180deg,#17232b,#20323d 70%,#26394a);box-shadow:inset 0 0 0 calc(var(--k)*.5) #0f181e}
.tw-win::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 var(--k),transparent var(--k) calc(var(--k)*2))}
.tw-paper{position:absolute;left:0;top:0;transform-origin:50% 100%;background:#f7efdc;box-shadow:inset calc(var(--k)*.5) 0 0 #fffaf0,inset calc(var(--k)*-.5) 0 0 #d9ccaa,0 0 0 calc(var(--k)*.5) rgba(27,23,48,.25);will-change:transform}
.tw-paper::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 calc(var(--k)*3),rgba(120,100,60,.035) calc(var(--k)*3) calc(var(--k)*3 + 1px))}
.tw-ta{position:absolute;margin:0;padding:0;border:0;outline:0;resize:none;overflow:hidden;background:transparent;color:#1b1730;caret-color:#e0573c;font-family:var(--mono);font-weight:500;font-kerning:none;font-variant-ligatures:none;letter-spacing:0;word-spacing:0;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;tab-size:4;text-shadow:.5px 0 0 rgba(27,23,48,.55);user-select:text;-webkit-user-select:text;cursor:text;-webkit-tap-highlight-color:transparent}
.tw-ta::placeholder{color:#1b1730;opacity:.28;font-style:normal}
.tw-ta::selection{background:rgba(224,87,60,.35)}
.tw-demo .tw-ta{cursor:default}
.tw-mirror{position:absolute;left:-9999px;top:0;visibility:hidden;pointer-events:none;margin:0;padding:0;font-family:var(--mono);font-weight:500;font-kerning:none;font-variant-ligatures:none;letter-spacing:0;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word}
.tw-head{position:absolute;left:0;z-index:2;pointer-events:none;display:flex;justify-content:center;align-items:flex-end;will-change:transform}
.tw-slug{display:block}
.tw-frame,.tw-casecv{position:absolute;left:0;top:0;pointer-events:none}
.tw-frame{z-index:3}
.tw-knob{position:absolute;z-index:4;pointer-events:none;will-change:transform}
.tw-lever{position:absolute;z-index:5;pointer-events:none;transform-origin:50% 92%}
.tw-case{position:absolute;left:0;z-index:2}
.tw-plate{position:absolute;color:#e9dfc4;font-family:var(--mono);font-weight:700;letter-spacing:.14em;white-space:nowrap;text-shadow:0 1px 0 #101a21;padding-inline:calc(var(--k)*2);background:#1c2c36;box-shadow:inset 0 0 0 1px #4f7388}
.tw-lcd{position:absolute;color:#8ef0a5;font-family:var(--mono);font-weight:700;letter-spacing:.06em;white-space:nowrap;padding-inline:calc(var(--k)*2);background:#0c2016;box-shadow:inset 0 0 0 1px #2f6a49;text-shadow:0 0 6px rgba(142,240,165,.55)}
.tw-lcd b{font-weight:700}
.tw-bell{position:absolute;z-index:1}
.tw-bell i{display:block;transform-origin:50% 15%}
.tw-ding{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);opacity:0;font:800 calc(var(--k)*2.6) var(--mono);color:#ffe08a;text-shadow:0 1px 0 #101a21;white-space:nowrap;pointer-events:none}
.tw-keys{position:absolute;inset:0}
.tw-key{--c:calc(var(--k)*2.5);position:absolute;display:block;background:#101a21;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));cursor:pointer;will-change:transform}
.tw-key u{--c2:calc(var(--k)*2);position:absolute;inset:var(--k) var(--k) calc(var(--k)*1.5) var(--k);display:grid;place-items:center;text-decoration:none;background:#efe6cf;color:#1b1730;font:800 calc(var(--k)*3.4) var(--mono);clip-path:polygon(var(--c2) 0,calc(100% - var(--c2)) 0,100% var(--c2),100% calc(100% - var(--c2)),calc(100% - var(--c2)) 100%,var(--c2) 100%,0 calc(100% - var(--c2)),0 var(--c2));box-shadow:inset 0 calc(var(--k)*-.75) 0 #c9bd9c,inset 0 calc(var(--k)*.5) 0 #fffaf0;transition:background .08s}
.tw-key.tw-key-w u{font-size:calc(var(--k)*3)}
.tw-key.down u,.tw-key:hover u{background:#ffd9a8}
.tw-key.down u{box-shadow:inset 0 calc(var(--k)*-.25) 0 #c9bd9c,inset 0 calc(var(--k)*.5) 0 #ffb867}
.tw-demo .tw-key{cursor:default}.tw-demo .tw-key:hover u{background:#efe6cf}

/* ---------- the section above the footer ---------- */
.rv{padding-block:clamp(3.5rem,8vw,6.5rem);border-top:.0625rem solid var(--line-2);position:relative;z-index:2;background:var(--bg)}
.rv[hidden]{display:none}
.rv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.rv-intro h2{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.rv-lede{margin:1.25rem 0 1.75rem;color:var(--muted);font-size:1.0625rem;max-width:42ch}
.rv-preview{margin:-.75rem 0 1.5rem;padding:.5rem .875rem;border:.0625rem dashed var(--line-2);border-radius:.875rem;font:600 .8125rem/1.4 var(--mono);max-width:42ch}
.rv-sum{margin:1rem 0 0;font:600 .8125rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rv-demo{position:relative;min-width:0;padding:clamp(.5rem,2vw,1.25rem);border-radius:var(--r-lg);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.rv-demo-m{max-width:560px;margin-inline:auto;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.rv-demo:hover .rv-demo-m{transform:translateY(-.25rem) rotate(-.4deg)}
.rv-demo-hit{position:absolute;inset:0;z-index:7;border:0;background:transparent;cursor:pointer;border-radius:var(--r-lg)}
.rv-demo-hit:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.rv-wall{margin-top:clamp(2.5rem,6vw,4.5rem)}
.rv-wall-h{font:700 .8125rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.25rem;color:var(--muted)}
.rv-notes{columns:3 17rem;column-gap:1.25rem}
.rv-note{break-inside:avoid;margin:0 0 1.25rem;padding:1.125rem 1.25rem 1rem;background:#f7efdc;color:#1b1730;border:.1875rem solid #1b1730;border-radius:.25rem;box-shadow:.25rem .25rem 0 #1b1730;rotate:var(--tilt,0deg);background-image:repeating-linear-gradient(0deg,transparent 0 1.4rem,rgba(120,100,60,.08) 1.4rem calc(1.4rem + 1px))}
.rv-note-t{margin:.625rem 0 .75rem;font:500 .9375rem/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.rv-note-f{margin:0;font:700 .75rem/1.3 var(--mono);letter-spacing:.04em;color:#5b5440}
.rv-stars{display:inline-flex;gap:.1875rem;vertical-align:top}
.rv-star{width:.9375rem;height:.9375rem;fill:#d9ccaa;flex:none}.rv-star.on{fill:#e0573c}
.rv-empty{margin:0;padding:1.5rem;border:.0625rem dashed var(--line-2);border-radius:var(--r-md);color:var(--muted);column-span:all}
.rv-more{margin-top:.5rem}

/* ---------- the floating button: always in reach ---------- */
.rv-pill{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:.625rem;min-height:3.25rem;padding:.25rem 1.125rem .25rem .625rem;border:.1875rem solid #1b1730;border-radius:var(--pill);background:#f7efdc;color:#1b1730;font:800 .875rem/1 var(--sans);letter-spacing:.01em;box-shadow:.25rem .25rem 0 #1b1730;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .25s,visibility .25s;-webkit-tap-highlight-color:transparent}
.rv-pill:hover{transform:translate(-.0625rem,-.0625rem);box-shadow:.3125rem .3125rem 0 #1b1730}
.rv-pill:active{transform:translate(.125rem,.125rem);box-shadow:.0625rem .0625rem 0 #1b1730}
.rv-pill:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.rv-pill-ic{display:grid;place-items:center;width:2.5rem}
.rv-pill-ic canvas{width:2rem;height:1.75rem;image-rendering:pixelated}
.rv-pill.is-away,body.menu-open .rv-pill,body.zen-mode-open .rv-pill,body.rv-open .rv-pill,body:has(.photo-lightbox.is-visible) .rv-pill{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:30rem){.rv-pill{padding-right:.875rem}.rv-pill-t{font-size:.8125rem}}

/* ---------- the full-screen desk ---------- */
.rv-modal{--vvh:100dvh;position:fixed;inset:0;height:var(--vvh);z-index:1400;display:flex;flex-direction:column;visibility:hidden;color:#f2e8d0;
  background:radial-gradient(120% 80% at 50% 0%,#3a2a1f 0%,#241810 60%,#190f09 100%)}
.rv-modal::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 .25rem,transparent .25rem .5rem),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 .25rem,transparent .25rem .5rem)}
.rv-modal.is-open{visibility:visible}
:root:has(body.rv-open){overflow:hidden}
.rv-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:max(1rem,env(safe-area-inset-top)) clamp(1rem,4vw,2rem) .5rem}
.rv-bar h2{margin:0;font-size:clamp(1.25rem,3vw,1.75rem);letter-spacing:-.01em;color:#f7efdc}
.rv-x{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1rem 0 .75rem;border:.0625rem solid rgba(247,239,220,.45);border-radius:var(--pill);background:rgba(247,239,220,.08);color:#f7efdc;font:600 .875rem/1 var(--sans);cursor:pointer;transition:background .2s,transform .12s}
.rv-x:hover{background:rgba(247,239,220,.18)}.rv-x:active{transform:scale(.95)}
.rv-x .ic{width:1.125rem;height:1.125rem}
.rv-x:focus-visible,.rv-name:focus-visible,.rv-r:focus-visible,.rv-send:focus-visible{outline:3px solid #ffb867;outline-offset:3px}
.rv-scroll{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 clamp(.75rem,4vw,2rem)}
.rv-desk{max-width:40rem;margin:0 auto;padding:.25rem 0 1.5rem}
.rv-tip{margin:0 0 1rem;text-align:center;font:600 .8125rem/1.5 var(--mono);color:#d8c9a7;letter-spacing:.02em}
.rv-machine{width:100%;margin-bottom:1.5rem}
.rv-fields{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:end}
.rv-f{display:grid;gap:.5rem;font:700 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#d8c9a7}
.rv-f i{font-style:normal;opacity:.65;letter-spacing:.04em;text-transform:none;font-weight:600}
.rv-name{height:2.875rem;padding:0 .875rem;border:.1875rem solid #0f181e;border-radius:.25rem;background:#f7efdc;color:#1b1730;font:500 1rem var(--mono);width:100%;min-width:0}
.rv-name::placeholder{color:#1b1730;opacity:.4}
.rv-rate{display:flex;gap:.25rem;height:2.875rem;align-items:center}
.rv-r{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:.375rem;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rv-r .rv-star{width:1.625rem;height:1.625rem;fill:#5e4d3a}
.rv-r.on .rv-star{fill:#ffb867}
.rv-r:hover .rv-star{fill:#ffd9a8}
.rv-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rv-act{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem clamp(1rem,4vw,2rem) max(.875rem,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(25,15,9,0),#190f09 40%)}
.rv-status{margin:0;flex:1;min-height:1.25rem;font:600 .8125rem/1.4 var(--mono);color:#d8c9a7}
.rv-status.bad{color:#ff9a82}
.rv-send{flex:none;background:#f7efdc;color:#1b1730}
.rv-send .dot{background:#e0573c;color:#fff}
.rv-send.busy{opacity:.6}
.rv-toast{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:1500;translate:-50% 0;max-width:calc(100vw - 2rem);padding:.75rem 1.125rem;border:.1875rem solid #1b1730;border-radius:.375rem;background:#f7efdc;color:#1b1730;font:700 .875rem/1.3 var(--mono);box-shadow:.25rem .25rem 0 #1b1730;opacity:0;pointer-events:none}

/* narrow screens: the real keyboard takes over, so the pretend one steps out of the way */
@media (max-width:35rem){
  .rv-grid{grid-template-columns:1fr}
  .rv-fields{grid-template-columns:1fr}
  .rv-send span.dot{display:none}
}
.tw-compact .tw-keys,.tw-compact .tw-plate,.tw-compact .tw-lcd{display:none}
.tw-compact .tw-case{overflow:hidden;background:#2f4858;box-shadow:inset 0 calc(var(--k)*-1.5) 0 #1c2c36,inset 0 calc(var(--k)*.5) 0 #4f7388,inset 0 0 0 calc(var(--k)*.5) #1b1730}
@media (prefers-reduced-motion:reduce){.rv-demo-m,.rv-pill{transition:none}.rv-demo:hover .rv-demo-m{transform:none}}
@media (prefers-contrast:more){.rv-note,.rv-pill{border-width:.25rem}.tw-ta::placeholder{opacity:.6}}