/* confidential-folder showpiece. The part has no kit, so it sits on a quiet dark ground that flatters it: the
   source's own blue-black, a soft pool of light under the folder, one cream letter. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: oklch(.18 .012 260);
  background-image: radial-gradient(ellipse 46% 40% at 44% 58%, oklch(.25 .014 260), oklch(.18 .012 260) 100%);
  color: oklch(.94 .01 260); font: 400 15px/1.45 "Inter Tight", system-ui, sans-serif;
}
.frame { position: absolute; left: 50%; top: 50%; width: 1050px; height: 1200px; transform: translate(-50%, -50%); }
.head { position: absolute; left: 0; right: 0; top: 196px; text-align: center; }
.head h1 { margin: 0; font: 400 44px/1.08 "Inter Tight", system-ui, sans-serif; letter-spacing: -.035em; color: oklch(.94 .01 260); }
.head h1 span { color: oklch(.66 .012 260); }

.cfolder { position: absolute; left: 186px; top: 300px; --cf-w: 540px; --cf-out: 108%; }

/* cover (ours): a dot field with one ringed stamp, title at the foot */
.cover { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 47.6px 42px; }
.cover__dots { position: absolute; inset: 36.4px 36.4px auto; height: 58%;
  background: radial-gradient(circle, oklch(.58 .016 260) 1.7px, transparent 2.4px) 0 0 / 26.6px 26.6px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%); }
.cover__stamp { position: absolute; left: 50%; top: 36%; width: 184.8px; height: 184.8px; margin: -92.4px 0 0 -92.4px; border-radius: 50%;
  border: 1.4px solid oklch(.6 .016 260); display: grid; place-items: center; transform: rotate(-12deg);
  font: 500 16.8px/1.25 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: oklch(.74 .012 260); text-align: center; background: var(--cf-sleeve); }
.cover__stamp::before { content: ""; position: absolute; inset: 9.8px; border-radius: 50%; border: 1.4px dashed oklch(.5 .016 260); }
.cover h3 { margin: 0; font-size: 42px; line-height: 1.1; letter-spacing: -.03em; font-weight: 500; color: var(--cf-cover-ink); }
.cover p { margin: 11.2px 0 0; font-size: 22.4px; line-height: 1.35; color: var(--cf-cover-soft); }

/* letter faces (ours) */
.memo { display: flex; flex-direction: column; height: 100%; padding: 36.4px 25.2px 33.6px 36.4px; font: 17.5px/1.55 "IBM Plex Mono", ui-monospace, monospace; color: var(--cf-ink-soft); }
.memo p, .memo ol { margin: 0; } .memo ol { padding: 0; list-style: none; }
.memo .t { letter-spacing: .16em; text-transform: uppercase; color: oklch(.32 .02 95); font-weight: 500; }
.memo .rule { height: 1.4px; margin: 25.2px 0; background: var(--cf-rule); }
.memo .gap { margin-top: 25.2px; } .memo .foot { margin-top: auto; letter-spacing: .14em; text-transform: uppercase; }
.note { display: flex; flex-direction: column; height: 100%; padding: 39.2px; }
.note__head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 19.6px; border-bottom: 1.4px solid var(--cf-rule); }
.note__head small { display: block; font: 16.1px/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-ink-soft); }
.note__head b { display: block; margin-top: 5.6px; font-size: 26.6px; font-weight: 500; letter-spacing: -.02em; color: var(--cf-ink); }
.note__head span { font: 16.1px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; color: var(--cf-ink-soft); }
.note__body { margin: auto 0; }
.note__body p { margin: 0; font-size: 36.4px; line-height: 1.2; letter-spacing: -.025em; color: var(--cf-ink); }
.note__body p + p { margin-top: 19.6px; font-size: 21px; line-height: 1.4; letter-spacing: -.01em; color: var(--cf-ink-soft); }
.note__foot { display: flex; justify-content: flex-end; padding-top: 19.6px; border-top: 1.4px solid var(--cf-rule); }
.note__foot i { width: 44.8px; height: 44.8px; border-radius: 50%; border: 1.4px solid var(--cf-ink-soft); box-shadow: inset 0 0 0 7px var(--cf-paper), inset 0 0 0 8.4px var(--cf-ink-soft); }