/* Art Times — Coming Soon. Self-contained: no CDN, no external font, no JS, no tracker.
   Tokens mirror 03_APP/public/css/custom.css so the placeholder matches the real brand. */

@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/PlayfairDisplay.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/Inter.woff2') format('woff2');
}

:root{
  --navy:#15284b;
  --navy-deep:#0e1c36;
  --gold:#f5b800;
  --paper:#faf8f3;
  --muted:rgba(250,248,243,.72);
  --font-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--navy);
  /* Soft editorial vignette — pure CSS, no image request. */
  background-image:
    radial-gradient(120% 90% at 50% 0%, #1c3560 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color:var(--paper);
  font-family:var(--font-sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Two rows: the mark stays optically centred in the free space, the disclosure sits at the
   very bottom. When the answer opens the page simply grows and scrolls. */
.stage{
  min-height:100dvh;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  gap:clamp(32px,6vw,56px);
  padding:clamp(24px,6vw,64px);
}

.mark{
  width:100%;
  max-width:640px;
  text-align:center;
  align-self:center;
}

.brand{ margin:0; }

.brand-logo{
  width:min(360px,74vw);
  height:auto;
  margin:0 auto;
  display:block;
}

.rule{
  width:64px;
  height:2px;
  margin:clamp(28px,5vw,40px) auto;
  border:0;
  background:var(--gold);
  opacity:.95;
}

.editorial{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(19px,2.4vw,27px);
  line-height:1.45;
  letter-spacing:.002em;
  color:var(--paper);
  text-wrap:balance;
}

.status{
  margin:clamp(28px,5vw,40px) 0 0;
  font-family:var(--font-sans);
  font-size:clamp(11px,1.1vw,13px);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ---------------------------------------------------------------- disclosure ---- */

.more{
  width:100%;
  max-width:680px;
}

.disclosure{ width:100%; }

/* Strip the native triangle in every engine. */
.disclosure-q{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  padding:12px 8px;
  font-size:clamp(12px,1.2vw,13.5px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border-radius:6px;
  transition:color var(--dur,180ms) ease;
}
.disclosure-q::-webkit-details-marker{ display:none; }
.disclosure-q::marker{ content:""; }

.disclosure-q:hover{ color:var(--paper); }
.disclosure-q:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  color:var(--paper);
}

/* Chevron drawn from two borders — no image request, no data: URI. */
.chevron{
  width:8px;
  height:8px;
  flex:none;
  margin-top:-4px;                       /* optical centring against the caps */
  border-right:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);
  transition:transform 180ms ease;
}
.disclosure[open] .chevron{
  transform:rotate(-135deg);
  margin-top:2px;
}

.answer{
  margin:clamp(14px,2.5vw,22px) auto 0;
  max-width:60ch;
  text-align:left;
  border-top:1px solid rgba(250,248,243,.14);
  padding-top:clamp(16px,2.5vw,24px);
}
.answer p{
  margin:0 0 1em;
  font-size:clamp(15px,1.5vw,16.5px);
  line-height:1.75;
  color:var(--muted);
}
.answer p:last-child{ margin-bottom:0; }

/* Respect users who reduce motion: nothing animates, but keep the contract explicit. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

@media (max-width:420px){
  .editorial{ font-size:19px; }
  .disclosure-q{ letter-spacing:.1em; }
}