/* ==========================================================================
   Costa Secreta — public home page
   Standalone on purpose. The portal's stylesheet sits inside the guests'
   hidden folder, and linking to it from here would publish that folder's
   name. The few values below are copied from its tokens, so the two pages
   read as one house.
   ========================================================================== */

:root {
  --paper: #F9F7F3;
  --ink:   #1C1613;
  --brass: rgba(201, 160, 92, .55);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Palatino LT STD",
           Georgia, "Noto Serif", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* One photograph and one name, centred in the screen. The photograph stays a
   4:3 band rather than filling the phone: the source is 900px wide, and
   stretching it to a full portrait screen would triple its softness. */
.accueil {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 0 4rem;
}

.accueil__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The portal's wordmark treatment, larger: tracked serif capitals over the
   brass hairline the portal uses as its motif. */
.accueil__nom {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .30em;
  text-indent: .30em;
  text-transform: uppercase;
  text-align: center;
}
.accueil__nom::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 1.25rem auto 0;
  background: var(--brass);
}

@media (min-width: 720px) {
  .accueil__photo { border-radius: 12px; }
}