@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Sacramento&display=swap');

/* Same palette as the Olive Ribbon platter signs */
:root {
  --forest: #1d3b26;
  --olive: #5f7c46;
  --cream: #f3ebd4;
  --paper: #faf6ec;
  --ink: #1d2820;
  --muted: #5c665c;
  --line: #e2d9c4;
  --red: #a8321e;
  --amber: #8a5a00;
  --grey: #686760;
  --ok: #2a7d45;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.page { max-width: 560px; margin: 0 auto; background: var(--paper); min-height: 100vh; }
a { color: inherit; }

/* Header that looks like the platter signs: batik band over cream */
.sign-head { background: var(--cream); text-align: center; padding-bottom: 18px; }
.sign-head .band { height: 44px; background: url(assets/band-top.jpg) center top / auto 100% repeat-x; }
.sign-head .names { font: 34px/1 Sacramento, cursive; color: var(--olive); margin-top: 10px; }
.sign-head h1 { font: 700 30px/1.05 Oswald, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--forest); margin-top: 4px; }
.band-foot { height: 44px; background: url(assets/band-bottom.jpg) center bottom / auto 100% repeat-x; }

/* Platter tiles: mini versions of the platter signs */
.hint { text-align: center; font-size: 15px; color: var(--muted); padding: 0 16px; }
.pick { padding: 16px; display: grid; gap: 12px; }
.tiles { display: grid; gap: 12px; }
.tile { display: block; height: 108px; border-radius: 10px; overflow: hidden; position: relative; text-align: center; text-decoration: none;
  background: var(--cream) url(assets/band-top.jpg) center top / auto 30px repeat-x; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: url(assets/band-bottom.jpg) center bottom / auto 30px repeat-x; }
.tile span { position: absolute; inset: 30px 0; display: flex; flex-direction: column; justify-content: center; color: var(--forest);
  font: 700 27px/1 Oswald, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.tile small { font: 500 12px Oswald, sans-serif; letter-spacing: .14em; color: var(--olive); margin-top: 2px; }
a.tile:active { transform: scale(.98); }

/* One platter */
.view { display: none; }
body.box .pick { display: none; }
body.box .view { display: block; }
.back { display: inline-block; margin: 14px 16px 0; font: 500 14px Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--olive); text-decoration: none; }
.view .tile { margin: 10px 16px 8px; }
.view .hint { font-size: 14px; margin-bottom: 8px; }
details { border-bottom: 1px solid var(--line); background: #fff; }
details:first-of-type { border-top: 1px solid var(--line); }
.row { padding: 13px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.row h2 { font-size: 16.5px; line-height: 1.25; }
summary { list-style: none; padding: 13px 16px; display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary h2 { font-size: 16.5px; line-height: 1.25; }
summary .brand, .row .brand { font-weight: 400; color: var(--muted); font-size: 13.5px; }
summary .chev { flex: none; color: var(--olive); font: 600 20px/1 system-ui, sans-serif; transition: transform .2s; margin-top: 2px; }
details[open] .chev { transform: rotate(90deg); }
.ing { padding: 0 16px 14px; font-size: 14px; color: #444; }
.ing b { color: var(--muted); font-weight: 600; }
.ing p + p { margin-top: 4px; color: var(--muted); }

/* Allergen lines */
.al { font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-top: 3px; }
.al.contains { color: var(--red); }
.al.may { color: var(--amber); font-weight: 600; }
.al.check { color: var(--grey); font-weight: 600; font-style: italic; }
.al.ok { color: var(--ok); font-weight: 600; }

.note-box { margin: 20px 16px 24px; padding: 14px 16px; border-radius: 12px; background: var(--cream); font-size: 14px; color: #3c3a2f; }
.note-box strong { color: var(--ink); }
.note-box p + p { margin-top: 6px; }