/* A paper sleeve and its inset windows; scoped to the public home. */
.public-home.bg-light { min-height: 100svh; background: #e8e4d9 !important; color: #2c382a; }
.public-home > .navbar { display: none; }
.public-home > main.container {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: none; min-height: 100svh;
  padding: 54px 24px 26px !important;
}
.home-folder {
  position: relative; isolation: isolate; container-type: inline-size; flex: none;
  width: min(520px, calc((100svh - 112px) * .73), 100%); aspect-ratio: .73;
  font-family: Georgia, 'Times New Roman', serif;
  filter: drop-shadow(10px 17px 12px rgba(54, 50, 34, .18));
}
.folder-insert {
  position: absolute; inset: -5.5% 3.5% 3%;
  border: 1px solid #e0dacb;
  background: linear-gradient(#f6f2e9 0 11%, #c2d1bd 11% 100%);
  box-shadow: 3px 2px 0 #dad7cc, 7px 6px 0 #eeece4;
  transform: rotate(-.7deg);
}
.folder-insert span {
  display: block; margin: 4% 6% 0; padding-top: 2%; border-top: 1px solid #aaad9e;
  font: 500 1.8cqw/1.4 Arial, sans-serif; text-align: center;
  letter-spacing: .23em; color: #647360;
}
.folder-face {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(105deg, #f3edc7, #eee4b2);
  box-shadow: inset 1px 0 3px #fffcdf, inset -1px -1px 2px #c5bc93;
  -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 0 3.8%, #000 3.95%);
  mask-image: radial-gradient(circle at 50% 0, transparent 0 3.8%, #000 3.95%);
}
.folder-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.65' filter='url(%23paper)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.folder-rule {
  position: absolute; top: 7%; left: 7%; width: 86%; margin: 0; padding: 3.4% 0;
  border-block: 1px solid #889170; text-align: center;
  font: 600 clamp(9px, 2.2cqw, 12px)/1.1 Arial, sans-serif; letter-spacing: .13em;
}
.folder-window {
  display: block; overflow: hidden; border-radius: 999px; background: #c1d2be;
  box-shadow: inset 1px 3px 4px rgba(38, 65, 42, .42), 0 1px 0 #fffbdb;
  color: #263d2c; white-space: nowrap;
}
.folder-brand {
  position: absolute; top: 20%; left: 10%; width: 80%; margin: 0; padding: 0 4% .5%;
  font: 400 7cqw/9.322cqw Georgia, 'Times New Roman', serif;
  letter-spacing: -.045em; text-align: center;
}
.folder-pair { position: absolute; margin: 0; font-size: clamp(12px, 3.4cqw, 18px); line-height: 1.3; }
.folder-pair > span:first-child { display: block; margin-bottom: 4%; }
.folder-pair .folder-window { padding: 0 5% 1%; font-size: 7.2cqw; line-height: 8.528cqw; letter-spacing: -.035em; }
.folder-caption {
  display: block; margin-top: 3px;
  font: 600 clamp(9px, 2cqw, 11px)/1.3 Arial, sans-serif;
  text-align: center;
}
.folder-new { top: 32%; left: 27%; width: 51%; }
.folder-new > span:first-child { margin-left: -26%; }
.folder-meet { top: 49%; left: 9%; width: 43%; }
.folder-meet > span:first-child { margin-left: 14%; }
.folder-old { top: 65%; left: 22%; width: 45%; }
.folder-old > span:first-child { margin-left: -22%; }
.folder-film {
  position: absolute; top: 48%; right: 7%; width: 34%; aspect-ratio: 1.38;
  overflow: hidden; border: 1px solid #919773; border-radius: 12% / 16%;
  background: #c1d2be; box-shadow: inset 1px 3px 5px #476046, 0 1px 0 #fffbdb;
  transform: rotate(2deg);
}
.folder-film::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 1px 3px 5px rgba(27, 48, 30, .38);
}
.folder-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.folder-film-toggle {
  position: absolute; inset: 0; z-index: 1; display: flex;
  align-items: flex-end; justify-content: flex-end; width: 100%; height: 100%;
  padding: 7%; border: 0; border-radius: inherit; background: transparent; color: #2c382a;
}
.folder-film-toggle[hidden] { display: none; }
.folder-film-toggle svg {
  width: 14px; height: 14px; box-sizing: content-box; padding: 7px;
  border-radius: 50%; background: rgba(245, 241, 215, .85);
}
.film-play { fill: currentColor; }
.film-pause { fill: none; stroke: currentColor; stroke-width: 2; }
.folder-film[data-paused="true"] .film-pause,
.folder-film[data-paused="false"] .film-play { display: none; }
.folder-motto {
  position: absolute; top: 79%; left: 5%; width: 90%; text-align: center;
  font-size: clamp(10px, 2.6cqw, 14px); line-height: 1.6;
}
.folder-motto p { margin: 0; }
.folder-motto strong { font-size: clamp(11px, 3.1cqw, 16px); font-weight: 600; }
.folder-login {
  position: absolute; top: 90%; left: 38%; width: 24%; min-height: 44px; height: 6.8%;
  display: grid; place-items: center; padding: 0 10px 4px;
  border: 1px solid #b5b28b; border-bottom: 6px solid #38492f; border-radius: 999px;
  background: #f8f4e5; color: #2c382a; box-shadow: inset 0 2px 3px #c8c4a5, 0 1px 1px #fff9d5;
  text-decoration: none; font: 500 clamp(13px, 2.8cqw, 16px)/1 Arial, sans-serif; letter-spacing: .12em;
}
.folder-login:hover { color: #2c382a; background: #fffdf1; }
.folder-login:focus-visible { outline: 2px solid #263d2c; outline-offset: 4px; }
.folder-film-toggle:focus-visible { outline: 2px solid #263d2c; outline-offset: -4px; }
@media (max-height: 560px) {
  .home-folder { width: min(360px, 100%); }
  .public-home > main.container { justify-content: flex-start; }
}
@media (max-width: 360px) {
  .public-home > main.container { padding-inline: 18px !important; }
  .folder-login { top: 88.5%; }
}