/* Holding pages: the business card page (main and coming-soon) and the coming-soon home page (coming-soon branch only).
   They reuse the home page hero from site.css (.hero, .hero-blend[data-blend="earth"], .hero-grid-lines and the
   hero-bg.js circuit animation), so the background matches the full site. This file only centres the content. */

.holding-hero {
  padding-top: 0;               /* no fixed header on these pages */
  grid-template-rows: 1fr auto;
}
.holding-inner {
  position: relative;
  z-index: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 56px;
  padding-bottom: 32px;
}
/* Graphite scrim behind the centred text, over the photo and animation, so text keeps AA contrast
   wherever the city lights fall (strongest on narrow screens, where the photo sits behind the text). */
.holding-inner::before {
  content: "";
  position: absolute;
  inset: -8% -30%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--primary) 82%, transparent) 0%, color-mix(in srgb, var(--primary) 66%, transparent) 55%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .holding-inner::before { inset: -4% -20%; background: radial-gradient(ellipse 60% 52% at 50% 50%, color-mix(in srgb, var(--primary) 86%, transparent) 0%, color-mix(in srgb, var(--primary) 76%, transparent) 60%, transparent 100%); }
}
.holding-logo { display: inline-block; margin-bottom: 36px; }
.holding-logo img { display: block; width: clamp(200px, 30vw, 300px); height: auto; }
.holding-logo:focus-visible { outline-offset: 8px; }

.holding-line {
  max-width: 34em;
  margin: 0 0 14px;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--on-primary-muted);
}
.holding-title {
  margin: 0 0 32px;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  color: #F5F7FA;
}
.holding-title .accent { color: var(--accent); }

/* Home page hero message, centred (holding page) */
.holding-label { justify-content: center; padding-left: 0; border-left: 0; margin-bottom: 22px; }
@media (max-width: 560px) {
  /* Narrow screens: stack the two halves rather than leave the diamond dangling at a line end */
  .holding-label { flex-direction: column; gap: 4px; }
  .holding-label .sep { display: none; }
}
.holding-headline { margin: 0 0 0.4em; color: #F5F7FA; }
.holding-headline .accent { color: var(--accent); }
.holding-lead { margin: 0 auto; }
.holding-soon { margin: 30px 0 0; font-weight: 500; font-size: 1.0625rem; color: #F5F7FA; }
.holding-soon .accent { color: var(--accent); }
.holding-soon + .hero-actions { margin-top: 18px; }

.holding-hero .hero-actions { justify-content: center; }

.holding-foot {
  justify-self: center;
  margin: 0;
  padding: 0 var(--gutter) 24px;
  font-size: 0.875rem;
  text-align: center;
  color: var(--on-primary-muted);
}
.holding-foot a { color: var(--on-primary-muted); }
.holding-foot a:hover { color: var(--accent); }
.holding-hero :focus-visible { outline-color: var(--accent); }

/* Pause button: top right, clear of the centred content and footer line */
.holding-hero .hero-bg-pause { top: 18px; bottom: auto; }
@media (max-width: 520px) {
  .holding-foot { font-size: 0.8125rem; line-height: 1.7; }
  .holding-foot .foot-sep-wrap { display: block; height: 0; overflow: hidden; }
}

/* ---------- Business card page ---------- */
/* Slightly darker than the home page hero */
.card-page .hero-blend[data-blend="earth"] { opacity: 0.5; }
.card-page .holding-logo { margin-bottom: 40px; }
.card-name {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  color: #F5F7FA;
}
.card-post {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--on-primary-muted);
}
.card-post abbr { text-decoration: none; }
.card-role { margin: 10px 0 28px; font-size: 1.0625rem; font-weight: 500; color: var(--accent); }
.card-page .btn-save { min-width: 220px; font-size: 1.0625rem; }
.card-save-note { margin: 12px 0 0; font-size: 0.875rem; color: var(--on-primary-muted); }

.card-details {
  width: min(100%, 460px);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.card-details li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.card-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-details a, .card-details span:not(.card-label) {
  color: #F5F7FA;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.card-details a { justify-self: start; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.card-details a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 420px) {
  .card-details li { grid-template-columns: 1fr; gap: 2px; }
}