body.guest { background: var(--bg); }
.g-hero { position: relative; min-height: 46vh; max-height: 560px; display: flex; align-items: flex-end; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, var(--hero-a, #f7c46f) 0%, var(--hero-b, #e39424) 45%, var(--hero-c, #8a5a12) 100%); }
.g-hero.has-cover { background: #1f1b16; }
.g-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,8,0) 30%, rgba(20,15,8,.72) 100%); }
/* Cover photo: a dark band behind the title for legibility, then the photo melts into the page colour — no hard edge. */
.g-hero.has-cover { min-height: 38vh; }
.g-hero.has-cover::after { background:
  linear-gradient(180deg, transparent 76%, color-mix(in srgb, var(--bg) 55%, transparent) 90%, var(--bg) 100%),
  linear-gradient(180deg, rgba(20,15,8,0) 20%, rgba(20,15,8,.5) 50%, rgba(20,15,8,.58) 76%, rgba(20,15,8,.2) 100%); }
.g-hero.has-cover .inner { padding-bottom: 46px; }
/* The welcome card rides up over the faded edge so the page starts sooner. */
.g-hero.has-cover + .g-main > .g-panel { margin-top: -34px; }
.g-hero.has-cover .g-title { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.g-hero.has-cover .g-kicker, .g-hero.has-cover .g-meta { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.g-hero .pattern { position: absolute; inset: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
/* No cover photo: a light wash of the event colour with the hive pattern melting into the page — no dark band, no hard edge. */
.g-hero:not(.has-cover) { color: var(--ink); min-height: 34vh;
  background:
    radial-gradient(55% 75% at 88% 0%, color-mix(in srgb, var(--honey) 30%, transparent) 0%, transparent 72%),
    radial-gradient(50% 65% at 6% 18%, color-mix(in srgb, var(--hero-a, var(--honey)) 26%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--honey-soft) 85%, var(--honey) 15%) 0%, var(--honey-soft) 45%, var(--bg) 100%); }
.g-hero:not(.has-cover)::after { display: none; }
.g-hero:not(.has-cover) .pattern { opacity: .75; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 92%); }
.g-hero:not(.has-cover) .g-kicker { color: var(--honey-ink); opacity: 1; }
.g-hero:not(.has-cover) .g-title { text-shadow: none; }
.g-hero:not(.has-cover) .g-meta { color: var(--ink-2); opacity: 1; }
.g-hero .inner { position: relative; z-index: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 20px 26px; }
.g-kicker { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.g-title { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 9vw, 58px); line-height: 1.04; margin: 8px 0 8px; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.g-meta { font-size: 15px; opacity: .92; }
.g-main { max-width: 760px; margin: 0 auto; padding: 0 16px 60px; }
.g-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px; margin-top: -18px; position: relative; z-index: 2; }
.g-welcome { color: var(--ink-2); margin: 0 0 16px; white-space: pre-line; }
.g-hi { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.g-hi b { font-size: 18px; }
.g-hi button { background: none; border: 0; color: var(--honey-ink); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 0; text-decoration: underline; }
.g-add { position: relative; }
.g-add input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.g-add .btn { pointer-events: none; }
.g-camera { display: block; text-align: center; margin-top: 10px; font-size: 14px; color: var(--ink-2); position: relative; }
.g-camera input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.g-camera span { text-decoration: underline; font-weight: 600; }
.g-note { font-size: 13.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.g-note.warn { color: #9a5b00; font-weight: 600; }
.g-tray { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.g-tray-head { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14.5px; margin-bottom: 8px; }
.g-preparing { align-items: flex-start; font-weight: 500; }
.g-preparing .hex.spin { font-size: 22px; color: var(--honey); line-height: 1.2; }
.g-preparing .grow > b { display: block; font-weight: 650; }
.g-preparing small b { font-weight: 700; color: var(--ink-2); }
.g-preparing small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.g-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.g-strip::-webkit-scrollbar { display: none; }
.g-mini { position: relative; flex: none; width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; border: 0; padding: 0; }
.g-mini img { width: 100%; height: 100%; object-fit: cover; }
.g-mini .ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(31,27,22,.45); color: #fff; font-size: 11px; font-weight: 800; }
.g-mini.done .ring { background: rgba(46,157,107,.55); font-size: 18px; }
.g-mini.error .ring { background: rgba(214,69,69,.75); font-size: 18px; }
.g-section { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 2px 12px; }
.g-section h2 { font-size: 19px; margin: 0; }
.g-host { background: var(--ink); color: #fff; font-size: 13.5px; padding: 9px 16px; text-align: center; }
.g-host a { color: var(--honey); font-weight: 700; }
.g-foot { text-align: center; margin: 44px 0 0; font-size: 13px; color: var(--muted); }
.g-foot a { color: var(--ink-2); font-weight: 650; text-decoration: none; }
.g-closed { background: var(--surface-2); border-radius: 12px; padding: 14px; text-align: center; color: var(--ink-2); font-weight: 600; }
.g-section { flex-wrap: wrap; gap: 10px; align-items: center; }
.seg button { white-space: nowrap; }
/* Cover photo on wider screens (tablets, computers): a full-width landscape photo in a short band chops heads off. So the
   band is taller (photo-shaped, up to ~80% of the screen), the crop leans to the top where faces are, and the photo
   fades more gently into the page with the welcome card riding up over its faded lower part. */
@media (min-width: 761px) {
  .g-hero.has-cover { min-height: min(80vh, 62vw, 860px); max-height: none; }
  .g-hero.has-cover img { object-position: 50% 28%; }
  .g-hero.has-cover::after { background:
    linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--bg) 35%, transparent) 72%, color-mix(in srgb, var(--bg) 80%, transparent) 86%, var(--bg) 96%),
    linear-gradient(180deg, rgba(20,15,8,.08) 0%, rgba(20,15,8,0) 25%, rgba(20,15,8,.28) 55%, rgba(20,15,8,.34) 72%, rgba(20,15,8,0) 92%); }
  .g-hero.has-cover::after { bottom: -1px; }
  .g-hero.has-cover .inner { padding-bottom: 150px; }
  .g-hero.has-cover + .g-main > .g-panel { margin-top: -130px; }
}