/* Case studies as a sticker on top of home — see sheet.js */
.sheet { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.sheet.is-idle { visibility: hidden; }
.sheet__paper { position: absolute; inset: 0; pointer-events: auto; background: rgb(246, 243, 237); clip-path: polygon(0 0, 0 0, 0 0); }
.sheet.is-idle .sheet__paper { pointer-events: none; }
.sheet__paper iframe { display: block; width: 100%; height: 100%; border: 0; background: rgb(246, 243, 237); }
.sheet__shade, .sheet__fold { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Figma: drop shadow -8, 7, blur 24 at 5% — plus a tighter contact shadow so the fold reads on the cream page */
.sheet__fold { filter: drop-shadow(-8px 7px 12px rgba(0, 0, 0, 0.05)) drop-shadow(-1.5px 2px 2.5px rgba(39, 27, 10, 0.1)); }
.sheet__hit { fill: transparent; pointer-events: all; cursor: pointer; outline: none; }
.sheet.is-moving .sheet__hit { pointer-events: none; }
.sheet__close-text { fill: #271b0a; fill-opacity: 0.7; transition: fill-opacity 200ms ease, opacity 260ms ease; }
.sheet.is-moving .sheet__close-text { opacity: 0; transition: opacity 120ms ease; }
.sheet.is-hover .sheet__close-text { fill-opacity: 1; }
.sheet.is-fade .sheet__paper, .sheet.is-fade .sheet__fold { animation: sheet-fade 240ms ease both; }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
html.sheet-open { overflow: hidden; }

/* inside the sheet: a sticker has no scrollbar */
html.in-sheet { scrollbar-width: none; }
html.in-sheet::-webkit-scrollbar { display: none; }

/* phones (mobile.html): the sheet covers only what's visible — below the status bar and the browser's
   URL bar, above any bottom toolbar (100dvh follows those bars as they collapse and come back) */
.sheet.sheet--phone {
  inset: auto;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: calc(100vh - env(safe-area-inset-top, 0px));
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
/* the dogear can be dragged towards the bottom-left to peel the sheet off (sheet.js) */
.sheet.is-dragging .sheet__hit { cursor: grabbing; }

/* opening: until the case study inside has loaded only the dogear needs hiding (the paper is clipped to
   nothing). The iframe itself is never hidden: iPhone Safari can lose touch scrolling in an iframe that was. */
.sheet.is-waiting .sheet__fold, .sheet.is-waiting .sheet__shade { visibility: hidden; }