/* ---------------------------------------------------------------------------
   SUMMER IN A GLASS — "Aperitivo Hour" visual identity, shared by all pages.
   A good bar's drinks list: warm paper, a high-contrast serif masthead,
   bitter-orange/oxblood accents (Campari & Aperol, not the tired terracotta),
   hairline menu rules, monospace for codes and small print.
   --------------------------------------------------------------------------- */
:root{
  --paper:#F4EBDA; --paper-2:#EFE3CD; --paper-3:#E8DAC0;
  --ink:#2A201A; --ink-soft:#6A5A4C;
  --oxblood:#8A2B24; --bitter:#DC5A1E; --amber:#F0A23B;
  --line:rgba(42,32,26,.16); --line-2:rgba(42,32,26,.10);
  --ok:#3B6B3B; --err:#9A2B22;

  --serif:"Didot","Bodoni 72","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  --mono:"SF Mono","Menlo",ui-monospace,monospace;

  color-scheme:light;
}

/* the warm paper ground; the sunset is reserved for the gallery hero */
html{ background:var(--paper); }
body{
  color:var(--ink); font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* type atoms ---------------------------------------------------------------- */
.serif{ font-family:var(--serif); }
.eyebrow{
  font:600 11px var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--oxblood);
}
.muted{ color:var(--ink-soft); font-size:13px; }
.err{ color:var(--err); }
.ok{ color:var(--ok); }

/* the code — a boxed, dashed, aperitivo receipt line ------------------------ */
.code{
  font:15px/1.7 var(--mono); letter-spacing:.02em; color:var(--ink);
  background:var(--paper-2); border:1px dashed var(--oxblood);
  border-radius:4px; padding:13px 15px; word-break:break-all; user-select:all;
}

/* buttons ------------------------------------------------------------------- */
.btn{
  font:600 14px var(--sans); letter-spacing:.01em; padding:12px 20px;
  border-radius:2px; cursor:pointer; border:1px solid var(--ink);
  background:transparent; color:var(--ink); text-decoration:none;
  display:inline-block; transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn.solid{ background:var(--ink); color:var(--paper); }
.btn:hover:not(:disabled){ transform:translateY(-2px); }
.btn.solid:hover:not(:disabled){ box-shadow:0 9px 20px rgba(42,32,26,.28); }
.btn:disabled{ opacity:.4; cursor:default; }

/* text inputs / textarea ---------------------------------------------------- */
.field{
  width:100%; box-sizing:border-box; font:14px var(--mono); color:var(--ink);
  padding:11px 13px; border-radius:3px; border:1px solid var(--line);
  background:var(--paper); transition:border-color .15s ease;
}
.field:focus{ outline:none; border-color:var(--oxblood); }

/* the surface cards steps sit in -------------------------------------------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:22px 24px; box-shadow:0 12px 34px rgba(42,32,26,.08);
}
.card > .step{
  font:600 11px var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--bitter); display:block; margin-bottom:6px;
}
.card h2, .card .h{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:24px; margin:0 0 10px; line-height:1.15;
}

/* focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--bitter); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}