@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#060c0b; --ink-2:#0b1413;
  --cream:#f6f2e8; --cream-2:#c8d1cb; --muted:#7f8d86;
  --teal:#5dcaa5; --blush:#e5a8ae; --gold:#e6c58a;
  --line:rgba(246,242,232,.10); --line-2:rgba(246,242,232,.22);
  /* paper */
  --p-bg:#f6f2e8; --p-ink:#1b1712; --p-body:#3c372d; --p-mute:#8b8170; --p-rule:#d6cdba;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow:hidden}
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%,rgba(93,202,165,.11),transparent 70%),
             radial-gradient(90% 90% at 50% 50%,transparent 30%,rgba(0,0,0,.55) 100%);
  transition:background .8s ease}
body[data-phase="2"] .glow{background:
  radial-gradient(46% 46% at 24% 50%,rgba(93,202,165,.10),transparent 70%),
  radial-gradient(90% 90% at 50% 50%,transparent 30%,rgba(0,0,0,.6) 100%)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
button{font:inherit;background:none;border:0;color:inherit}

/* ---------------- chrome ---------------- */
.chrome{position:fixed;left:0;right:0;z-index:12;display:flex;justify-content:space-between;
  align-items:flex-start;padding:26px 34px;gap:2rem;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.chrome.top{top:0}
.chrome.bottom{bottom:0;align-items:flex-end}
.chrome a,.chrome button{pointer-events:auto}
.id{display:flex;gap:11px;align-items:flex-start}
.id b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:0;
  text-transform:none;color:var(--cream);line-height:1.1}
.id span{display:block;margin-top:3px}
#home{color:var(--teal);font-size:17px;cursor:pointer;line-height:1.2;opacity:0;
  transition:opacity .4s,transform .6s cubic-bezier(.3,0,.2,1)}
body[data-phase="1"] #home,body[data-phase="2"] #home{opacity:.9}
#home:hover{transform:rotate(135deg)}
.elsewhere{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.elsewhere a{color:var(--muted);text-decoration:none;border-bottom:1px dashed transparent;padding-bottom:2px}
.elsewhere a:hover{color:var(--teal);border-bottom:1px solid var(--teal)}
.aschi span{display:block;font-family:var(--serif);font-size:17px;color:var(--cream);
  letter-spacing:0;text-transform:none;margin-bottom:3px}
.meta{text-align:right;line-height:2}
#sound{display:block;margin-bottom:5px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);cursor:pointer;
  border-bottom:1px dashed var(--line-2);padding-bottom:2px}
#sound:hover{color:var(--teal);border-bottom-color:var(--teal)}
#sound[aria-pressed="false"]{opacity:.45}

/* ---------------- the sheet ---------------- */
#stage{position:fixed;inset:0;z-index:2;display:grid;place-items:center;
  transition:transform 1s cubic-bezier(.32,.02,.2,1)}
body[data-phase="2"] #stage{transform:translateX(max(-27vw,-380px)) scale(.52)}
#sheet{width:min(70vmin,580px);height:min(70vmin,580px);overflow:visible;
  cursor:grab;touch-action:none;filter:drop-shadow(0 26px 46px rgba(0,0,0,.55))}
#sheet.dragging{cursor:grabbing}
.petal{transition:filter .35s ease}
.petal.hot{filter:brightness(1.16) drop-shadow(0 0 16px rgba(93,202,165,.45))}
.pl{font-family:var(--serif);font-size:15.5px;fill:var(--cream);opacity:0;cursor:pointer;
  transition:opacity .55s ease,fill .2s ease;dominant-baseline:middle}
.pl.on{opacity:.94}
.pl:hover{fill:var(--teal)}
.ps{font-family:var(--mono);font-size:6px;letter-spacing:.16em;fill:var(--muted);
  opacity:0;transition:opacity .55s ease;dominant-baseline:middle;cursor:pointer}
.ps.on{opacity:.8}
body[data-phase="2"] .pl,body[data-phase="2"] .ps{opacity:0;pointer-events:none}
#intro{position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);z-index:6;
  width:min(660px,84vw);text-align:center;transition:opacity .35s ease}

/* a photographic print, left on the table beside everything else */
.print{position:fixed;left:34px;bottom:132px;z-index:6;margin:0;width:124px;
  background:#fdfcf8;padding:8px 8px 0;border-radius:1px;transform:rotate(-3.2deg);
  box-shadow:0 16px 30px rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .4s ease}
.print:hover{transform:rotate(-1deg) translateY(-5px)}
/* stays out of sight until the windmill has opened into the lotus.
   it lives inside #stage (for the phone layout), and #stage is transformed
   while a section is open — so it's removed outright there rather than just
   faded, since a transformed ancestor breaks position:fixed. */
body[data-phase="0"] .print{opacity:0;pointer-events:none;
  transform:rotate(-3.2deg) translateY(14px)}
body[data-phase="2"] .print{display:none}
.print{cursor:pointer}
.print:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.print img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:1px}
.print figcaption{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8b8170;text-align:center;padding:.5rem 0 .55rem}

.pitch{font-family:var(--serif);font-size:1.7rem;line-height:1.2;color:var(--cream);margin:0}
.line{font-size:.86rem;line-height:1.7;color:var(--cream-2);margin:.7rem auto 0;max-width:52ch}
.line em{font-style:normal;color:var(--teal)}
.creds{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:1rem 0 0}
.creds span{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--line-2);border-radius:2px;padding:.28rem .6rem}
.hint{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:1.1rem 0 0;transition:opacity .4s ease}

/* ---------------- phone-only bits ---------------- */
#folds,.taphint{display:none}

/* ---------------- the paper ---------------- */
#paper{position:fixed;top:0;right:max(0px,calc((100vw - 1640px)/2));bottom:0;
  width:min(58vw,720px);z-index:9;
  display:flex;align-items:center;padding:6vh 4vw 6vh 0;
  opacity:0;pointer-events:none;transition:opacity .5s ease}
body[data-phase="2"] #paper{opacity:1;pointer-events:auto}
.leaf{position:relative;width:100%;max-height:82vh;overflow-y:auto;
  background:
    linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px) 50% 0/100% 100% no-repeat,
    linear-gradient(100deg,#efe9dc 0%,var(--p-bg) 22%,var(--p-bg) 78%,#ece5d6 100%);
  color:var(--p-body);border-radius:2px;padding:3rem 3.2rem 2.6rem;
  transform:rotate(-.5deg) scaleY(.9);opacity:0;transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.85,.3,1),opacity .45s ease;
  box-shadow:0 40px 70px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.35);
  scrollbar-width:thin;scrollbar-color:var(--p-rule) transparent}
body[data-phase="2"] .leaf{transform:rotate(-.5deg) scaleY(1);opacity:1}
.leaf::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.07) 12%,rgba(0,0,0,.07) 88%,transparent);
  pointer-events:none}
.leaf::after{content:'';position:absolute;top:0;right:0;width:34px;height:34px;
  background:linear-gradient(225deg,var(--ink) 50%,transparent 50%)}
.close{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--p-mute);cursor:pointer;z-index:2}
.close:hover{color:var(--p-ink)}
.kicker{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--p-mute);margin:0 0 .5rem}
.leaf h2{font-family:var(--serif);font-weight:400;font-size:2.6rem;line-height:1;
  margin:0 0 1.6rem;color:var(--p-ink)}
.lede{font-size:.9rem;line-height:1.75;color:var(--p-mute);margin:0 0 1.7rem;max-width:54ch}

.item{border-top:1px dashed var(--p-rule);padding:1.3rem 0}
.item:first-of-type{border-top:0;padding-top:0}
.item h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.12;
  margin:0;color:var(--p-ink)}
.meta-l{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--p-mute);
  margin:.4rem 0 .7rem;text-transform:uppercase}
.item p.b{font-size:.87rem;line-height:1.78;margin:0;max-width:58ch}
.item ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.item ul li{font-size:.85rem;line-height:1.7;padding-left:1rem;position:relative;max-width:58ch}
.item ul li::before{content:'';position:absolute;left:0;top:.68em;width:4px;height:4px;
  border-radius:50%;background:var(--p-ink);opacity:.4}
.badge{display:inline-block;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8a6a2f;border:1px solid rgba(138,106,47,.4);
  border-radius:2px;padding:.14rem .4rem;margin-left:.55rem;vertical-align:.24em}
.repo{font-family:var(--mono);font-size:.58rem;color:var(--p-mute);text-decoration:none;
  border-bottom:1px dashed var(--p-rule);margin-left:.55rem;text-transform:uppercase;letter-spacing:.08em}
.repo:hover{color:var(--p-ink);border-bottom-style:solid}
.item video{width:100%;margin-top:.9rem;border:1px solid var(--p-rule);border-radius:2px;
  display:block;background:#000}
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.2rem}
.artgrid figure{margin:0}
.artgrid img{width:100%;border-radius:1px;display:block;
  box-shadow:0 8px 18px rgba(0,0,0,.18);border:5px solid #fff}
.artgrid figcaption{margin-top:.6rem;font-size:.78rem;color:var(--p-body)}
.artgrid figcaption span{display:block;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--p-mute);margin-top:.15rem}

.trips{list-style:none;padding:0;margin:0}
.trips li{display:flex;align-items:baseline;gap:1rem;border-top:1px dashed var(--p-rule);
  padding:.66rem 0;font-size:.9rem}
.trips li:first-child{border-top:0}
.place{flex:1}
.tripbtn{padding:0;cursor:pointer;color:var(--p-body);text-align:left;
  border-bottom:1px dashed transparent}
.tripbtn:hover{color:var(--p-ink);border-bottom:1px solid var(--p-ink)}
.tripn{font-family:var(--mono);font-size:.55rem;color:var(--p-mute);vertical-align:.35em;margin-left:.4rem}
.state,.state.went{font-family:var(--mono);font-size:.55rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:2px;white-space:nowrap;
  color:#4a6b5c;background:rgba(74,107,92,.11)}
.state.no{color:var(--p-mute);background:rgba(0,0,0,.05)}
.state.yet{color:#8a6a2f;background:rgba(138,106,47,.11)}

.log{border-top:1px dashed var(--p-rule);padding:1.5rem 0}
.log:first-of-type{border-top:0;padding-top:0}
.log-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.triphint{font-size:.76rem;color:var(--p-mute);margin:1.1rem 0 0}
.tag{font-family:var(--serif);font-size:1.4rem;letter-spacing:0;text-transform:none;
  color:var(--p-ink);margin:0}
.log-sub{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-mute);margin:0}
.pnote{font-size:.76rem;color:var(--p-mute);margin:.9rem 0 0}
#pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:.8rem;margin-bottom:.4rem}
#spark{width:100%;height:64px;display:block;margin:.2rem 0 .8rem}
#plog{list-style:none;padding:0;margin:0}
#plog li{display:flex;gap:.9rem;align-items:baseline;border-top:1px dashed var(--p-rule);
  padding:.4rem 0;font-family:var(--mono);font-size:.62rem}
#plog .pd{color:var(--p-mute)}
#plog .pn{flex:1;font-family:var(--sans);font-size:.78rem;color:var(--p-body)}
#plog .pr{color:var(--p-ink)}
.log .receipt{max-width:270px}
.pempty{font-size:.87rem;line-height:1.7;margin:.4rem 0 0;max-width:50ch}
.receipt{width:100%;background:#fffdf6;color:#14100c;font-family:var(--mono);font-size:.6rem;
  line-height:1.55;padding:1rem .95rem .85rem;border-radius:1px;transform:rotate(-1.4deg);
  box-shadow:0 12px 26px rgba(0,0,0,.22)}
.receipt h3{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.15em;
  text-align:center;margin:0 0 .1rem;text-transform:uppercase}
.rsub{text-align:center;letter-spacing:.09em;margin:0 0 .8rem;color:#8b8170}
.rrule{border-top:1px dashed #cfc6b4;margin:.55rem 0}
.rrow{display:flex;gap:.5rem;align-items:baseline}
.rrow .i{width:1.4rem;color:#a09684}
.rrow .n{flex:1}.rrow .d{color:#8b8170}
.rrow .a{display:block;color:#8b8170;font-size:.54rem}
.rtot{display:flex;justify-content:space-between;font-weight:500}
.barcode{height:28px;margin:.8rem 0 .35rem;background-image:repeating-linear-gradient(90deg,
  #14100c 0 2px,transparent 2px 4px,#14100c 4px 5px,transparent 5px 9px,#14100c 9px 12px,transparent 12px 14px)}
.rlast,.rfoot{text-align:center;color:#8b8170;margin:0 0 .3rem;font-size:.54rem;letter-spacing:.06em}
.film{border-left:2px solid var(--p-rule);padding-left:1.2rem}
.film h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0;color:var(--p-ink)}
.filmmeta{font-family:var(--mono);font-size:.58rem;color:var(--p-mute);margin:.35rem 0 .55rem;text-transform:uppercase}
.rating{display:flex;gap:5px;margin:0 0 .8rem}
.rating span{width:8px;height:8px;border-radius:50%;border:1px solid #8a6a2f}
.rating span.on{background:#8a6a2f}
#pstats span{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--p-mute)}
#pstats b{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--p-ink)}

/* ---------------- deck ---------------- */
.deck-overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:radial-gradient(circle at 50% 46%,rgba(6,12,11,.6),rgba(3,6,6,.95) 62%);
  backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease}
.deck-overlay.on{opacity:1}
.deck-overlay[hidden]{display:none}
.deck-stage{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:100%}
.deck-title{font-family:var(--serif);font-size:1.6rem;margin:0;color:var(--cream)}
.deck{position:relative;width:min(340px,80vw);height:min(440px,64vh);z-index:1}
.pcard{position:absolute;inset:0;margin:0;background:#efe9dc;border-radius:3px;padding:12px;
  display:flex;flex-direction:column;cursor:pointer;box-shadow:0 20px 44px rgba(0,0,0,.6);
  transform-origin:50% 120%;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.pcard img{width:100%;flex:1 1 auto;min-height:0;object-fit:cover;border-radius:1px;display:block;
  background:#e3dccd}
.pcard figcaption{font-family:var(--mono);font-size:.56rem;line-height:1.5;color:#5a5346;padding-top:.6rem}
.pcard[data-off="0"]{transform:none;opacity:1}
.pcard[data-off="1"]{transform:translateY(10px) scale(.965) rotate(2.4deg)}
.pcard[data-off="2"]{transform:translateY(20px) scale(.93) rotate(-2.8deg)}
.pcard[data-off="3"]{transform:translateY(30px) scale(.9) rotate(1.6deg);opacity:.85}
.pcard[data-off="4"]{transform:translateY(38px) scale(.87);opacity:0}
.pcard-empty{cursor:default;align-items:center;justify-content:center;padding:2rem;background:#fffdf6}
.pcard-empty p{font-family:var(--mono);font-size:.68rem;line-height:1.8;color:#8b8170;text-align:center;margin:0}
.deck-bar{display:flex;align-items:center;gap:1.2rem;position:relative;z-index:3}
.deck-bar[hidden]{display:none}
.deck-nav{border:1px solid var(--line-2);border-radius:50%;width:32px;height:32px;
  color:var(--cream-2);cursor:pointer}
.deck-nav:hover{color:var(--teal);border-color:var(--teal)}
.deck-count{font-family:var(--mono);font-size:.62rem;color:var(--muted);min-width:3.6rem;text-align:center}
.deck-hint{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;color:var(--muted);
  margin:0;position:relative;z-index:3}

/* ---------------- responsive ---------------- */

/* short desktops / laptops: give the paper more of the width */
@media (min-width:901px) and (max-width:1200px){
  #paper{width:60vw;padding:5vh 3vw 5vh 0}
  .leaf{padding:2.2rem 2.2rem 2rem}
  .leaf h2{font-size:2.1rem}
  body[data-phase="2"] #stage{transform:translateX(-30vw) scale(.44)}
}
/* short viewports — laptops with browser chrome, landscape tablets */
@media (min-width:901px) and (max-height:760px){
  #sheet{width:min(56vmin,470px);height:min(56vmin,470px)}
  .line{font-size:.82rem}
  .creds{margin-top:.7rem}
  .leaf{max-height:86vh;padding:2rem 2.4rem 1.8rem}
  .leaf h2{font-size:2.1rem;margin-bottom:1.1rem}
  #intro{bottom:5vh}
  .print{width:98px;bottom:112px}
  .pitch{font-size:1.35rem}
  .chrome{padding:18px 26px}
}

/* ---- one column ---- */
@media (pointer:coarse){
  /* the flower is most of a phone screen — swiping it must scroll the page */
  #sheet{touch-action:pan-y}
}

@media (max-width:900px){
  /* ------------------------------------------------------------------
     Phones get a plain scrolling page: the flower becomes a small mark
     beside the name, and the six sections are a list you can read at a
     glance. Desktop is untouched.
     ------------------------------------------------------------------ */
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  .glow{position:fixed;background:radial-gradient(70% 40% at 50% 12%,rgba(93,202,165,.10),transparent 70%)}

  /* everything the desktop layout uses as decoration or status */
  .creds,#state,#foldpct,.hint,.pl,.ps,#home,#creases{display:none}

  /* one column, but never wider than a comfortable measure */
  .chrome,#stage,#intro,#folds,.print,#paper{max-width:560px;margin-left:auto;margin-right:auto}

  .chrome{position:static;padding:26px 22px 0;flex-direction:column;
    align-items:flex-start;gap:1.4rem;text-align:left;width:100%}
  /* .chrome.bottom beats plain .chrome on specificity, so it needs saying twice */
  .chrome.bottom{padding:2.2rem 22px 2.4rem;gap:1rem;align-items:flex-start;
    bottom:auto;text-align:left}
  .chrome.bottom .meta{text-align:left}
  .id{gap:0}
  .id b{font-size:22px}
  .elsewhere{justify-content:flex-start;gap:18px}
  .meta,.meta *{text-align:left}
  #sound{margin:0}

  /* flower and photograph share a row as grid columns, so they cannot overlap */
  #stage{position:relative;inset:auto;height:auto;width:100%;
    padding:1.4rem 22px .2rem;transition:none;
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}
  body[data-phase="2"] #stage{transform:none}
  #sheet{width:100%;max-width:150px;height:auto;aspect-ratio:1;justify-self:start;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));touch-action:manipulation}

  /* the one interactive thing on a phone, so it gets an affordance */
  .taphint{display:block;grid-column:1 / -1;font-family:var(--mono);font-size:.54rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:.4rem 0 0;
    transition:opacity .4s ease}
  body[data-phase="1"] .taphint{opacity:.55}

  #intro{position:static;transform:none;width:auto;text-align:left;padding:0 22px}
  .pitch{font-size:1.6rem}
  .line{font-size:.92rem;line-height:1.65;margin:.8rem 0 0;max-width:none}

  /* the six sections, always visible */
  #folds{display:block;padding:0 22px;margin:1.6rem auto 0;width:100%}
  #folds button{display:flex;width:100%;align-items:baseline;justify-content:space-between;
    gap:1rem;padding:1rem .1rem;border-top:1px dashed var(--line-2);cursor:pointer;
    text-align:left;color:var(--cream)}
  #folds button:last-child{border-bottom:1px dashed var(--line-2)}
  #folds button:active{background:rgba(93,202,165,.07)}
  .fname{font-family:var(--serif);font-size:1.5rem;line-height:1}
  .fsub{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}

  .print{position:static;width:104px;margin:0;display:block;opacity:1;
    transform:rotate(3deg);justify-self:end}
  body[data-phase="0"] .print,body[data-phase="2"] .print{opacity:1;transform:rotate(3deg);display:block}
  .print:active{transform:rotate(1deg) scale(.97)}
  body[data-phase="0"] .print,body[data-phase="2"] .print{opacity:1;transform:rotate(-3.2deg)}

  #paper{position:static;width:auto;padding:1.6rem 16px 0;display:none;opacity:1;transition:none}
  body[data-phase="2"] #paper{display:block;pointer-events:auto}
  .leaf,body[data-phase="2"] .leaf{transform:none;max-height:none;overflow:visible;
    padding:1.9rem 1.4rem 1.6rem;border-radius:3px;box-shadow:0 16px 34px rgba(0,0,0,.45)}
  .leaf::before{display:none}
  .leaf::after{width:24px;height:24px}
  .leaf h2{font-size:2rem;margin-bottom:1.1rem}
  .close{position:static;display:block;margin:0 0 1.1rem auto;width:max-content}

  .log-head{margin-bottom:.8rem}
  .log .receipt{max-width:100%;transform:none}
  .item p.b,.item ul li,.lede{max-width:none}
  .artgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9rem}
  .deck{width:min(300px,78vw);height:min(400px,58vh)}
  .deck-title{font-size:1.35rem}
}

/* small phones */
@media (max-width:420px){
  #sheet{width:74vmin;height:74vmin}
  .pitch{font-size:1.2rem}
  .print{width:102px}
  .leaf{padding:1.6rem 1.15rem 1.4rem}
  .leaf h2{font-size:1.75rem}
  .pl{font-size:22px}
  .ps{font-size:9.5px}
  .trips li{gap:.6rem;font-size:.84rem}
}

/* phones held sideways */
@media (max-width:900px) and (orientation:landscape){
  #sheet{width:min(50vmin,260px);height:min(50vmin,260px)}
  #stage{padding:.8rem 0 0}
  .print{width:88px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
}