/* ------------------------------------------------------------------ DOOR 01 · THREE SECONDS The bold move is the accusation. The brief says a man is read in about three seconds, so the door spends three seconds reading the visitor and then tells him it already happened. Nothing else on the page competes. ------------------------------------------------------------------ */ body { background: var(--ink); color: var(--bone); } .wrap { position: relative; width: min(56rem, 88vw); } /* the monogram, breathing behind everything */ .mono { position: fixed; left: 50%; top: 50%; width: min(46rem, 92vw); transform: translate(-50%, -50%) scale(1.04); opacity: 0; filter: brightness(0) invert(1); transition: opacity 2.4s ease, transform 2.4s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; } .is-done .mono { opacity: 0.05; transform: translate(-50%, -50%) scale(1); } /* the read. Three fragments on one hairline, one at a time. */ .read { position: relative; height: 5.5rem; display: grid; place-items: center; } .frag { position: absolute; font-family: Poppins, system-ui, sans-serif; font-weight: 300; font-size: clamp(1.05rem, 0.8rem + 1.3vw, 1.85rem); letter-spacing: 0.06em; color: var(--bone); opacity: 0; transform: translateY(0.45em); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1); white-space: nowrap; } .frag.on { opacity: 0.92; transform: none; } .frag.off { opacity: 0; transform: translateY(-0.4em); transition-duration: 0.3s; } /* the hairline that measures the three seconds */ .tick { width: min(34rem, 72vw); height: 1px; margin: 0 auto; background: rgba(244, 239, 230, 0.16); position: relative; overflow: hidden; } .tick::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; } .is-running .tick::after { animation: sweep 1.98s linear forwards; } @keyframes sweep { to { transform: scaleX(1); } } .count { margin-top: 1.1rem; color: var(--stone); opacity: 0.75; font-variant-numeric: tabular-nums; } /* the verdict */ .verdict { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(46rem, 90vw); opacity: 0; pointer-events: none; /* The read clears from the same spot the verdict lands in. Without the delay the two cross-fade on top of each other and both look weak. */ transition: opacity 1.1s ease 0.42s; } .is-done .verdict { opacity: 1; } .is-done .read, .is-done .tick, .is-done .count { opacity: 0; transition: opacity 0.4s ease; } .verdict .display { color: var(--bone); } .verdict .sub { margin: 1.4rem 0 0; color: var(--stone); font-family: Poppins, system-ui, sans-serif; font-weight: 300; font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem); line-height: 1.6; } .wm { position: fixed; left: 50%; top: 2rem; transform: translateX(-50%); color: var(--stone); opacity: 0.5; } .enter { color: var(--bone); } /* the door's own no-JS rules */ .verdict, .enter { opacity: 1 !important; } .read, .tick, .count { display: none; } .mono { opacity: .05; }The Decorum Standard

You’ve already
been read.

It took about three seconds, and you hadn’t said anything yet.
Nobody ever taught you what they were reading.

Enter

You’ve already
been read.

How you’re read
before you speak.

HOW YOU’RE READ
BEFORE YOU SPEAK

Twelve rooms.

How you’re read
before you speak.

You’ve alreadybeen read.

How you’re readbefore you speak.

HOW YOU’RE READBEFORE YOU SPEAK

You’ve already
been read.

How you’re read
before you speak.

HOW YOU’RE READ
BEFORE YOU SPEAK