/* ---------------- intro ---------------- */
.intro{
  text-align:center;
  max-width: 480px;
  padding: 0 8px;
}

.eyebrow{
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: var(--gold-bright);
}

.headline{
  font-family:'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  margin: 12px 0 8px;
  line-height: 1.1;
}

.sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.82rem, 2.4vw, 0.9rem);
  color: rgba(55,42,28,0.72);
  line-height:1.55;
}

/* ---------------- responsive canvas frame ----------------
   The art itself is a fixed 620x620 design that scales down
   via container query units — see bowl.css. This file only
   controls how much horizontal room the frame is allowed. */
.frame{
  width: min(84vw, 560px);
  aspect-ratio: 1 / 1;
}

/* ---------------- small-screen tightening ---------------- */
@media (max-width: 420px){
  body{ padding-left: 12px; padding-right: 12px; }
  .garnish-rail{ gap: 8px; }
  .chip-toggle{ padding: 8px 12px; font-size: 0.8rem; }
  .action-rail{ flex-direction: column; width: 100%; max-width: 260px; }
  .action-btn{ width: 100%; }
}

/* ---------------- large-screen ceiling ----------------
   Prevents the canvas from ballooning on very wide monitors. */
@media (min-width: 1400px){
  .frame{ width: min(60vw, 620px); }
}