/* ============================================================================
   Exhibitor mini-site — shared styles, scoped under .exsite
   Themed entirely by CSS variables set per-site (pulled from the logo colours).
   Used by both _site.html (live) and landing.html (live preview) so they match.
   ============================================================================ */

.exsite{
  /* theme defaults — overridden inline per site by site-render.js */
  --ex-primary:#305149; --ex-accent:#039485;
  --ex-bg:#eef5f2; --ex-surface:#ffffff;
  --ex-text:#1f2a27; --ex-muted:#6b7d77; --ex-btn-text:#ffffff;
  --ex-ring:rgba(0,0,0,.08);

  position:relative; min-height:100%; width:100%;
  font-family:'Mulish',system-ui,-apple-system,sans-serif;
  color:var(--ex-text);
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--ex-primary) 14%, var(--ex-bg)) 0%, var(--ex-bg) 60%);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(18px,5vw,52px) 18px clamp(30px,6vw,60px);
  overflow:hidden;
}
.exsite *{ box-sizing:border-box; margin:0; }

/* floating ambient blobs from the theme colours */
.exsite__bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.exsite__bg b{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.34; }
.exsite__bg b:nth-child(1){ width:340px;height:340px; background:var(--ex-primary); top:-90px; left:-80px; }
.exsite__bg b:nth-child(2){ width:300px;height:300px; background:var(--ex-accent); bottom:-70px; right:-70px; opacity:.28; }

/* the card */
.exsite__card{
  position:relative; z-index:1; width:100%; max-width:520px;
  background:var(--ex-surface); border-radius:30px; overflow:hidden;
  box-shadow:0 30px 70px -28px color-mix(in srgb, var(--ex-primary) 55%, transparent),
             0 4px 14px rgba(0,0,0,.05);
  border:1px solid var(--ex-ring);
  animation:exRise .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes exRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* banner / header */
.exsite__banner{ height:clamp(120px,30vw,168px); position:relative;
  background:linear-gradient(120deg, var(--ex-primary), var(--ex-accent)); overflow:hidden; }
.exsite__banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.exsite__banner::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, color-mix(in srgb, var(--ex-surface) 30%, transparent), transparent 55%); }

/* avatar */
.exsite__head{ padding:0 clamp(20px,5vw,34px) clamp(22px,5vw,30px); text-align:center; }
.exsite__avatar{ width:clamp(96px,24vw,118px); height:clamp(96px,24vw,118px); border-radius:50%;
  margin:calc(-1 * clamp(48px,12vw,60px)) auto 0; position:relative; z-index:2;
  border:5px solid var(--ex-surface); background:var(--ex-bg); object-fit:cover; display:block;
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--ex-primary) 60%, transparent); }
.exsite__avatar.is-placeholder{ display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:42px; color:var(--ex-primary);
  background:color-mix(in srgb, var(--ex-primary) 14%, var(--ex-surface)); }

.exsite__name{ font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; font-weight:560;
  font-size:clamp(25px,6vw,32px); line-height:1.08; letter-spacing:-.01em; margin-top:15px; color:var(--ex-text); }
.exsite__tag{ margin-top:9px; font-weight:700; font-size:clamp(12px,3vw,13px); letter-spacing:.04em;
  color:var(--ex-accent); text-transform:uppercase; }
.exsite__bio{ margin-top:14px; font-size:15px; line-height:1.66; color:var(--ex-muted); max-width:42ch;
  margin-left:auto; margin-right:auto; white-space:pre-line; }

/* link buttons — "cute & clickable" */
.exsite__links{ display:flex; flex-direction:column; gap:11px; margin-top:24px; }
.exsite__link{ display:flex; align-items:center; gap:13px; width:100%;
  padding:14px 18px; border-radius:16px; text-decoration:none;
  font-weight:800; font-size:14.5px; letter-spacing:.01em;
  background:var(--ex-surface); color:var(--ex-text);
  border:1.5px solid color-mix(in srgb, var(--ex-primary) 22%, transparent);
  box-shadow:0 4px 14px -8px color-mix(in srgb, var(--ex-primary) 60%, transparent);
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer; }
.exsite__link .ic{ width:34px; height:34px; flex:0 0 auto; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ex-primary) 12%, var(--ex-surface)); color:var(--ex-primary); transition:inherit; }
.exsite__link .ic svg{ width:19px; height:19px; }
.exsite__link .lbl{ flex:1; text-align:left; }
.exsite__link .go{ width:16px; height:16px; flex:0 0 auto; opacity:.4; transition:transform .2s ease, opacity .2s ease; }
.exsite__link:hover{ transform:translateY(-3px); background:var(--ex-primary); color:var(--ex-btn-text);
  border-color:var(--ex-primary);
  box-shadow:0 16px 30px -12px color-mix(in srgb, var(--ex-primary) 75%, transparent); }
.exsite__link:hover .ic{ background:color-mix(in srgb, var(--ex-btn-text) 22%, transparent); color:var(--ex-btn-text); }
.exsite__link:hover .go{ opacity:.9; transform:translateX(3px); }

/* the primary / website link gets the filled treatment by default */
.exsite__link.is-primary{ background:var(--ex-primary); color:var(--ex-btn-text); border-color:var(--ex-primary); }
.exsite__link.is-primary .ic{ background:color-mix(in srgb, var(--ex-btn-text) 20%, transparent); color:var(--ex-btn-text); }
.exsite__link.is-primary:hover{ background:color-mix(in srgb, var(--ex-primary) 88%, #000); }

/* footer */
.exsite__foot{ margin-top:26px; text-align:center; font-size:11.5px; letter-spacing:.04em; color:var(--ex-muted); }
.exsite__foot a{ color:var(--ex-accent); font-weight:700; text-decoration:none; }
.exsite__foot a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){ .exsite__card{ animation:none; } .exsite__link{ transition:none; } }

/* ---------- optional rich sections ---------- */
.exsite__sec{ margin-top:30px; text-align:left; animation:exFade .6s ease both; }
@keyframes exFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.exsite__seclabel{ display:flex; align-items:center; gap:13px; justify-content:center;
  font-family:'Fraunces',serif; font-weight:560; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ex-accent); margin-bottom:18px; }
.exsite__seclabel span{ height:1px; width:30px; flex:0 0 auto; background:color-mix(in srgb, var(--ex-accent) 38%, transparent); }

/* about */
.exsite__aboutimg{ border-radius:18px; overflow:hidden; margin-bottom:16px;
  box-shadow:0 16px 30px -18px color-mix(in srgb, var(--ex-primary) 60%, transparent); }
.exsite__aboutimg img{ width:100%; display:block; }
.exsite__abouttext{ font-size:15px; line-height:1.72; color:var(--ex-muted); }

/* services / what I offer */
.exsite__svclist{ list-style:none; padding:0; display:flex; flex-direction:column; gap:15px; }
.exsite__svc{ display:flex; gap:13px; align-items:flex-start; }
.exsite__svcdot{ width:9px; height:9px; flex:0 0 auto; margin-top:6px; border-radius:50%;
  background:var(--ex-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--ex-accent) 16%, transparent); }
.exsite__svctext b{ display:block; font-weight:800; font-size:15px; color:var(--ex-text); }
.exsite__svctext span{ display:block; margin-top:2px; font-size:14px; line-height:1.55; color:var(--ex-muted); }

/* gallery */
.exsite__galgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.exsite__galitem{ padding:0; border:0; cursor:zoom-in; border-radius:14px; overflow:hidden; aspect-ratio:1;
  background:color-mix(in srgb, var(--ex-primary) 8%, var(--ex-surface)); transition:transform .2s ease, box-shadow .2s ease; }
.exsite__galitem img{ width:100%; height:100%; object-fit:cover; display:block; }
.exsite__galitem:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px color-mix(in srgb, var(--ex-primary) 70%, transparent); }

/* quote */
.exsite__quotesec{ text-align:center; }
.exsite__quote{ font-family:'Fraunces',serif; font-style:italic; font-weight:460;
  font-size:clamp(19px,4.6vw,23px); line-height:1.42; color:var(--ex-primary); position:relative; padding:0 8px; }
.exsite__quote::before{ content:"\201C"; }
.exsite__quote::after{ content:"\201D"; }
.exsite__quoteby{ margin-top:12px; font-size:12.5px; font-weight:800; letter-spacing:.03em; color:var(--ex-muted); }

/* get in touch */
.exsite__contact{ text-align:center; }
.exsite__cline{ display:flex; align-items:center; justify-content:center; gap:9px; font-size:14.5px;
  color:var(--ex-text); margin-bottom:9px; }
.exsite__cline .ic{ color:var(--ex-accent); display:inline-flex; }
.exsite__cline .ic svg{ width:18px; height:18px; }
.exsite__cbtns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.exsite__cbtn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  padding:11px 17px; border-radius:14px; font-weight:800; font-size:14px;
  background:color-mix(in srgb, var(--ex-primary) 10%, var(--ex-surface)); color:var(--ex-primary);
  border:1.5px solid color-mix(in srgb, var(--ex-primary) 22%, transparent); transition:transform .16s ease, background .2s ease, color .2s ease; }
.exsite__cbtn .ic{ display:inline-flex; } .exsite__cbtn .ic svg{ width:17px; height:17px; }
.exsite__cbtn:hover{ transform:translateY(-2px); background:var(--ex-primary); color:var(--ex-btn-text); }

/* gallery lightbox */
.exsite__lightbox{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:24px; background:color-mix(in srgb, #0a140f 82%, transparent); cursor:zoom-out;
  opacity:0; transition:opacity .2s ease; }
.exsite__lightbox.show{ opacity:1; }
.exsite__lightbox img{ max-width:94vw; max-height:90vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5); }

/* "not found / coming soon" state */
.exsite--empty{ justify-content:center; text-align:center; min-height:100vh; }
.exsite--empty .exsite__card{ max-width:440px; padding:46px 34px; }
.exsite--empty h1{ font-family:'Fraunces',serif; font-weight:560; font-size:28px; color:var(--ex-text); }
.exsite--empty p{ margin-top:12px; color:var(--ex-muted); font-size:15px; line-height:1.6; }
.exsite--empty .exsite__cta{ display:inline-block; margin-top:22px; padding:12px 22px; border-radius:999px;
  background:var(--ex-primary); color:var(--ex-btn-text); text-decoration:none; font-weight:800; font-size:14px; }