/* ─────────────────────────────────────────────────────────────
   Piandré · utility pages (404, under-construction)
   Minimalist white canvas, single red accent, countdown-redirect.
   Pattern adapted from 01bigfight's 404.
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --paper: #FFFFFF; --ink: #141210; --ink-soft: #4A443E; --muted: #7A736C;
  --red: #C02D2F; --line: rgba(20,18,16,.10); --line-2: rgba(20,18,16,.18);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
body {
  background: var(--paper); color: var(--ink); font-family: var(--sans);
  min-height: 100svh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

.pg-top { padding: 26px clamp(22px, 5vw, 72px); }
.pg-top img { height: 30px; width: auto; display: block; }

.pg-main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px clamp(22px, 5vw, 72px) 80px;
}
.pg-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.pg-eyebrow .num { color: var(--red); }
.pg-title { font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 7vw, 92px); line-height: 1.05; letter-spacing: -.01em; max-width: 16ch; }
.pg-title .it { font-style: italic; color: var(--red); }
.pg-sub { font-size: clamp(16px, 2vw, 19px); color: var(--ink-soft); max-width: 44ch; margin: 22px auto 0; line-height: 1.6; }

.pg-count { margin-top: 46px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pg-count strong { color: var(--red); font-variant-numeric: tabular-nums; }
.pg-track { width: 200px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 16px auto 0; }
.pg-fill { height: 100%; width: 100%; background: var(--red); transform-origin: left; transform: scaleX(1); }
.pg-fill.go { transform: scaleX(0); transition: transform 5s linear; }

.pg-home { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.pg-home .ln { position: relative; display: inline-block; width: 30px; height: 1em; }
.pg-home .ln::before { content: "→"; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); font-family: var(--sans); font-size: 15px; line-height: 1; font-weight: 400; transition: transform .4s var(--ease); }
.pg-home .ln::after { content: ""; position: absolute; left: 19px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translate(0,-50%); transition: transform .4s var(--ease); }
.pg-home:hover .ln::before { transform: translate(4px,-50%); }
.pg-home:hover .ln::after  { transform: translate(9px,-50%); }

.reveal { opacity: 0; transform: translateY(18px); animation: pg-rise .7s var(--ease) forwards; }
.reveal.d1 { animation-delay: .08s; } .reveal.d2 { animation-delay: .16s; } .reveal.d3 { animation-delay: .26s; } .reveal.d4 { animation-delay: .36s; }
@keyframes pg-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .pg-fill.go { transition: none; }
}