/* The door of the house: the arms, the name and the way in. Nothing about the family shows before login. */
.enter { position: fixed; right: calc(var(--edge) + 54px); top: calc(var(--edge) + 16px); z-index: 65; min-height: 40px; }
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(10px, 2vh, 20px);
  padding: 90px var(--pad) 110px;
  text-align: center;
}
.hero .blazon { width: auto; height: clamp(190px, 35vh, 330px); filter: drop-shadow(0 8px 8px rgba(46, 26, 14, .3)); }
.hero h1 {
  font: 700 clamp(3.1rem, 11.5vw, 9.4rem)/.95 var(--title);
  letter-spacing: -.01em;
  color: var(--wine);
  text-shadow: 0 1px 0 #F6E3A6, 0 2px 0 rgba(143, 107, 30, .55), 0 10px 18px rgba(46, 26, 14, .22);
  animation: lift 1.1s var(--ease) .3s both;
}
.hero .orn { width: min(420px, 70vw); margin: 4px 0; animation: fade 1s ease .9s both; }
.lede { font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-style: italic; color: var(--ink-2); animation: fade 1s ease 1s both; }
.hero .btn { margin-top: 10px; animation: fade 1s ease 1.2s both; }
.note { font-size: 1.05rem; font-style: italic; color: var(--ink-3); animation: fade 1s ease 1.4s both; }
.year { position: absolute; left: 0; right: 0; bottom: clamp(34px, 6vh, 60px); font: 400 15px var(--caps); letter-spacing: .08em; color: var(--ink-3); animation: fade 1s ease 1.8s both; }

.lost { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 16px; padding: var(--pad); text-align: center; }
.lost .blazon { width: auto; height: clamp(170px, 30vh, 270px); filter: drop-shadow(0 8px 8px rgba(46, 26, 14, .3)); }
.wait h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
.wait-form { display: grid; gap: 6px; width: min(100%, 430px); margin-top: 8px; text-align: left; }
.wait-form label { font-style: italic; color: var(--ink-2); }
.wait-form .in { flex: 1; min-width: 0; }
.wait .small { font-style: italic; }
.lost h1 { font: 700 clamp(2.2rem, 7vw, 4.6rem)/1.05 var(--title); }
.lost p { font-style: italic; font-size: 1.2em; color: var(--ink-2); }

/* The privacy page: plain text on the parchment, one column. */
.year a { margin-left: 10px; color: inherit; }
.policy { width: min(100%, 680px); margin: 0 auto; padding: clamp(70px, 10vh, 110px) var(--pad) 90px; }
.policy h1 { margin: 14px 0 4px; font: 700 clamp(2.2rem, 6vw, 3.6rem)/1.05 var(--title); color: var(--wine); }
.policy h2 { margin: 30px 0 8px; font: 600 1.15rem/1.3 var(--display); letter-spacing: .08em; color: var(--wine); }
.policy p { margin: 10px 0; line-height: 1.6; }
.policy .small { font-style: italic; color: var(--ink-3); }
.policy code { font-size: .9em; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift { from { opacity: 0; transform: translateY(26px); letter-spacing: .08em; } to { opacity: 1; transform: none; } }

@media (max-width: 899px) {
  .enter { right: calc(var(--edge) + 14px); top: calc(var(--edge) + 12px); }
}