/* Cheshire Truffle holding page (matches launch artwork) */

@font-face {
  font-family: "Le Jour Serif";
  src: url("/assets/fonts/LeJourSerif.otf?v=3") format("opentype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  --bg: #000;
  --text: #ffffff;
  --muted: #b9b9b9;
  --serif: "Le Jour Serif", "Cormorant Garamond", "Times New Roman", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text);
  text-decoration: none;
  transition: opacity .25s ease;
}
a:hover { opacity: .7; }

::selection { background: #fff; color: #000; }

.holding {
  min-height: 100svh;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  justify-items: center;
  padding: clamp(40px, 8vw, 96px) clamp(16px, 5vw, 64px) clamp(32px, 6vw, 72px);
  text-align: center;
  gap: clamp(28px, 8vw, 96px);
  animation: fade 1.1s ease both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.eyebrow {
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: clamp(16px, 3.4vw, 34px);
  font-weight: 400;
}

.word {
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 16vw, 260px);
  line-height: .95;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.tagline {
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: clamp(13px, 2.6vw, 26px);
}

.contact {
  align-self: end;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  display: grid;
  gap: 10px;
  font-family: var(--serif);
  font-size: clamp(11px, 2.2vw, 16px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  word-break: break-word;
}
.contact li { max-width: 100%; }
.contact a, .contact address {
  color: var(--muted);
  font-style: normal;
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}

@media (max-width: 520px) {
  .contact { letter-spacing: .1em; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .holding { animation: none; }
}