/* A single sheet of paper; the drawing is the interface. */
@font-face { font-family:Druto; src:url('../assets/fonts/Druto-Normal-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Druto; src:url('../assets/fonts/Druto-Normal-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Druto Display'; src:url('../assets/fonts/Druto-CMP-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
:root { --paper:#cfcdc1; --ink:#24231f; --red:#a64f49; --bar-h:36px; }
* { box-sizing:border-box; }
::selection { background:#000; color:#fff; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--paper); color:var(--ink); font-family:Druto,sans-serif; }
canvas { position:fixed; inset:0; width:100%; height:100%; display:block; }
#paper { z-index:0; }
#scene { z-index:1; touch-action:none; }
body.overhead #scene { cursor:grab; }
body.grabbing #scene { cursor:grabbing; }
#vignette { position:fixed; inset:0; z-index:6; pointer-events:none; mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse at 1% 4%,rgba(255,255,243,.20),transparent 48%),
    radial-gradient(ellipse at 68% 57%,rgba(55,51,38,.075),transparent 68%),
    linear-gradient(108deg,rgba(255,255,245,.025),transparent 23%,rgba(65,59,45,.04) 44%,rgba(255,255,239,.075) 62%,rgba(59,53,42,.035)),
    radial-gradient(ellipse at 51% 46%,transparent 55%,rgba(67,59,43,.07));
}
#bar { position:fixed; inset:auto 0 0; z-index:3; display:flex; align-items:center; gap:9px;
  min-height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
  padding:5px 188px calc(5px + env(safe-area-inset-bottom,0px)) 14px;
  font-size:12px; line-height:1.2; color:rgba(36,35,31,.87); user-select:none; white-space:nowrap;
  border-top:1px solid rgba(69,65,53,.12);
  background:linear-gradient(0deg,rgba(207,205,193,.65),rgba(207,205,193,.12));
}
.brand { font-family:'Druto Display',sans-serif; font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:.025em; flex:none; background:none; border:0; color:inherit; padding:0; cursor:pointer; }
.keys { display:flex; gap:7px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:3px; color:inherit; background:none; border:0; padding:2px 0; font:inherit; cursor:pointer; opacity:.85; }
.chip:hover,.chip.lit { opacity:1; }
.chip i { font-style:normal; }
kbd { font:10px Druto,sans-serif; min-width:14px; padding:0 2px; line-height:15px; text-align:center;
  border:1px solid rgba(36,35,31,.5); border-radius:2px; }
.chip.lit kbd { background:var(--ink); color:var(--paper); }
.chip:focus-visible,summary:focus-visible,button:focus-visible,a:focus-visible { outline:1px dashed var(--ink); outline-offset:4px; }
.extras { margin-left:auto; position:relative; }
.extras summary { list-style:none; cursor:pointer; font-size:16px; letter-spacing:2px; padding:0 4px; }
.extras summary::-webkit-details-marker { display:none; }
.extra-keys { position:absolute; right:0; bottom:27px; display:flex; flex-direction:column; align-items:stretch; gap:8px;
  background:var(--paper); border:1px solid rgba(36,35,31,.28); box-shadow:1px 3px 10px #24231f12; padding:12px 16px; }
.extra-keys .chip { gap:8px; }
.creator-credit { position:fixed; right:14px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:8; font-size:12px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.creator-credit span:first-child { font-weight:600; border-bottom:1px solid transparent; }
.creator-credit:hover span:first-child { border-color:currentColor; }
.credit-arrow { width:.8em; height:.8em; margin-left:.25em; vertical-align:-.05em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:1600px) { #bar { font-size:13px; gap:11px; } .brand { font-size:20px; } }
/* Phones and tablets have no keys to press, so the actions become tappable panels. */
@media(max-width:679px),(hover:none) and (pointer:coarse) {
  .chip kbd { display:none; }
  .chip,.extras summary { justify-content:center; padding:6px 9px; border:1px solid rgba(36,35,31,.3); border-radius:4px;
    opacity:1; -webkit-tap-highlight-color:transparent; transition:background .15s,color .15s,border-color .15s; }
  .chip:active,.chip.lit,.chip[aria-pressed="true"],.extras[open] summary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .keys { gap:6px; }
  .extras summary { line-height:1; padding-left:11px; }
  .extra-keys { bottom:40px; }
}
/* On a phone every action gets its own panel; main.js moves the menu's actions into the grid. */
@media(max-width:679px) {
  #bar { flex-direction:column; gap:8px; padding:7px 10px calc(23px + env(safe-area-inset-bottom,0px)); }
  .brand { font-size:17px; }
  .keys { display:grid; grid-template-columns:repeat(5,minmax(min-content,1fr)); width:100%; max-width:520px; }
  .chip { min-height:34px; padding:4px 5px; font-size:11px; line-height:1.1; text-align:center; }
  .extras { display:none; }
  .creator-credit { font-size:11px; bottom:calc(5px + env(safe-area-inset-bottom,0px)); }
}
@media(max-width:370px) { .keys { gap:4px; } .chip { font-size:10px; white-space:normal; } }

/* An ink poster that opens into the portrait sheet. */
#scene,#bar { transition:opacity .65s ease,transform .65s ease; }
.intro-active #scene { opacity:0; pointer-events:none; }
.intro-active #bar { opacity:0; pointer-events:none; transform:translateY(14px); }
#intro { position:fixed; inset:0; z-index:4; overflow:hidden; }
#intro[hidden] { display:none; }
#intro-canvas { position:absolute; z-index:0; pointer-events:none; }
.intro-topline { position:absolute; z-index:2; top:25px; left:30px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.intro-copy { position:absolute; left:50%; top:49%; width:min(68vw,960px); transform:translate(-50%,-50%); text-align:center; }
.intro-eyebrow { margin:0 0 27px; font-size:12px; letter-spacing:.19em; text-transform:uppercase; }
.intro-title-wrap { position:relative; }
#intro-title { position:relative; z-index:1; margin:0; font:900 clamp(120px,21vw,300px)/.78 'Druto Display',sans-serif; letter-spacing:-.045em; }
.title-line { display:block; white-space:nowrap; }
.title-line:first-child { transform:rotate(-3deg) translateX(-.06em); }
.title-line:last-child { transform:rotate(2deg) translateX(.01em); }
.title-line>span { display:inline-block; opacity:0; transform-origin:50% 90%; }
.intro-ready .title-line>span { animation:letter-arrive .85s cubic-bezier(.18,.85,.22,1.15) calc(.15s + var(--i)*.075s) both; }
.intro-orbit { position:absolute; left:-8%; top:-1%; width:116%; height:112%; overflow:visible; pointer-events:none; }
.intro-orbit path { fill:none; stroke:var(--red); stroke-width:2.1; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.intro-ready .intro-orbit path { animation:orbit-draw 1.35s ease 1s forwards; }
.intro-stamp { position:absolute; right:-3%; top:-10%; color:var(--red); font-size:13px; line-height:1.05; transform:rotate(12deg); border:1px solid var(--red); border-radius:50%; width:91px; height:91px; display:grid; place-content:center; opacity:0; }
.intro-ready .intro-stamp { animation:stamp-arrive .5s cubic-bezier(.17,.85,.25,1.3) 1.25s both; }
.intro-caption { position:relative; margin:34px 0 20px; font-size:clamp(14px,1.2vw,18px); line-height:1.4; }
#intro-enter { display:inline-flex; align-items:center; gap:27px; border:1px solid var(--ink); border-radius:50%; background:transparent; color:var(--ink); padding:19px 31px; font:600 14px Druto,sans-serif; cursor:pointer; transform:rotate(-3deg); transition:background .2s,color .2s,transform .25s; }
#intro-enter:hover { background:var(--ink); color:var(--paper); transform:rotate(0deg); }
.enter-arrow { flex:none; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s; }
#intro-enter:hover .enter-arrow { transform:translate(3px,-3px); }
.intro-leaving .intro-copy { opacity:0; transform:translate(-50%,-55%) scale(.94); transition:opacity .45s ease,transform .6s cubic-bezier(.65,0,.35,1); }
.intro-leaving .intro-topline { opacity:0; transition:opacity .3s; }
@keyframes letter-arrive { from { opacity:0; transform:translateY(.30em) rotate(-11deg) scale(.86); } 65% { opacity:1; } to { opacity:1; transform:translateY(0) rotate(0) scale(1); } }
@keyframes orbit-draw { to { stroke-dashoffset:0; } }
@keyframes stamp-arrive { from { opacity:0; transform:rotate(22deg) scale(1.5); } to { opacity:1; transform:rotate(12deg) scale(1); } }
@media(max-width:900px) {
  .intro-copy { width:72vw; }
  #intro-title { font-size:24vw; }
  .intro-stamp { width:72px; height:72px; font-size:11px; top:-17%; right:-6%; }
}
@media(max-width:600px) {
  .intro-topline { top:16px; left:20px; right:20px; font-size:9px; letter-spacing:.055em; }
  .intro-topline>span { max-width:160px; }
  .intro-copy { top:50%; width:85vw; }
  #intro-title { font-size:29vw; }
  .intro-eyebrow { font-size:9px; margin-bottom:25px; letter-spacing:.16em; }
  .intro-stamp { width:59px; height:59px; font-size:9px; top:-22%; right:0; }
  .intro-caption { margin-top:25px; font-size:14px; }
  #intro-enter { padding:16px 26px; font-size:13px; }
}
@media(max-height:650px) and (min-width:601px) {
  .intro-copy { top:50%; width:60vw; }
  #intro-title { font-size:min(21vw,32vh); }
  .intro-eyebrow { margin-bottom:16px; }
  .intro-caption { margin-top:19px; margin-bottom:12px; font-size:13px; }
  #intro-enter { padding:12px 25px; }
  .intro-stamp { width:64px; height:64px; font-size:10px; }
}
@media(max-width:600px) and (max-height:740px) {
  #intro-title { font-size:27vw; }
  .intro-eyebrow { margin-bottom:16px; }
  .intro-caption { font-size:12px; margin:18px 0 14px; }
  #intro-enter { padding:12px 24px; font-size:12px; }
  .intro-stamp { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .intro-ready .title-line>span { opacity:1; transform:none; }
  .intro-ready .intro-stamp { opacity:1; }
  .intro-ready .intro-orbit path { stroke-dashoffset:0; }
}