/* Shared styles for search.html, profile.html, portal.html — same design
   tokens as the homepage (public/index.html) so these feel like one site. */

:root{
  --bg:#ECEEE8;
  --surface:#FFFFFF;
  --surface-2:#F5F6F0;
  --ink:#1F2A22;
  --ink-muted:#5C6659;
  --accent:#E2A33B;
  --accent-strong:#C7862A;
  --accent-ink:#2B1B02;
  --secondary:#3F6B4A;
  --secondary-ink:#FFFFFF;
  --line:#D7DACC;
  --shadow: rgba(31,42,34,0.25);
  --radius-lg:16px;
  --radius-md:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11171A;
    --surface:#1B2224;
    --surface-2:#202829;
    --ink:#ECE8DD;
    --ink-muted:#A7AE9F;
    --accent:#F0B54C;
    --accent-strong:#F7C874;
    --accent-ink:#201200;
    --secondary:#6FA57D;
    --secondary-ink:#0D1A10;
    --line:#2A3234;
    --shadow: rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#11171A;
  --surface:#1B2224;
  --surface-2:#202829;
  --ink:#ECE8DD;
  --ink-muted:#A7AE9F;
  --accent:#F0B54C;
  --accent-strong:#F7C874;
  --accent-ink:#201200;
  --secondary:#6FA57D;
  --secondary-ink:#0D1A10;
  --line:#2A3234;
  --shadow: rgba(0,0,0,0.5);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Libre Franklin", "Segoe UI", system-ui, sans-serif;
  line-height:1.5;
}
a{ color:inherit; }
h1,h2,h3,h4{ font-family:"Fraunces", Georgia, serif; color:var(--ink); margin:0 0 0.4em; }
.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

nav.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.site .row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; max-width:1080px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:9px; font-family:"Fraunces",serif; font-weight:600; font-size:1.18rem; text-decoration:none; }
.brand .dot{ width:11px; height:11px; border-radius:50%; background: radial-gradient(circle at 35% 32%, var(--accent-strong), var(--accent) 60%, transparent 75%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.nav-links{ display:flex; gap:22px; list-style:none; margin:0; padding:0; font-size:0.94rem; color:var(--ink-muted); flex-wrap:wrap; }
.nav-links a{ text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.current{ color:var(--ink); font-weight:600; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:999px; border:1px solid transparent; font-family:"Libre Franklin", sans-serif; font-weight:600; font-size:0.92rem; text-decoration:none; cursor:pointer; }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--secondary); color:var(--secondary); }
.btn-secondary{ background:var(--secondary); color:var(--secondary-ink); }
.btn[disabled]{ opacity:0.6; cursor:not-allowed; }

main{ padding:48px 0 80px; }
.section-head{ text-align:left; max-width:640px; margin-bottom:28px; }
.section-head p{ color:var(--ink-muted); margin-top:8px; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.field .hint{ font-size:0.76rem; color:var(--ink-muted); font-weight:400; margin-left:6px; }
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-family:"Libre Franklin", sans-serif; font-size:0.95rem;
}
textarea{ resize:vertical; min-height:80px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:0.9rem; }
.checkbox-row input{ width:auto; }
.form-note{ font-size:0.82rem; color:var(--ink-muted); margin-top:10px; }
.form-note.error{ color:#C0453A; }
.form-note.success{ color:var(--secondary); font-weight:600; }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }

.pro-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; }
.pro-card:hover{ border-color:var(--secondary); }
.pro-card h3{ font-size:1.08rem; }
.pro-card .trade{ font-size:0.82rem; color:var(--ink-muted); font-family:"IBM Plex Mono", monospace; }
.pro-card .loc{ font-size:0.85rem; color:var(--ink-muted); }
.badge-row{ display:flex; gap:6px; flex-wrap:wrap; }
.badge{ font-size:0.72rem; padding:4px 10px; border-radius:999px; background:var(--secondary); color:var(--secondary-ink); font-weight:600; }
.badge.off{ background:var(--surface-2); color:var(--ink-muted); border:1px solid var(--line); }
.pill{ font-size:0.72rem; padding:3px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-muted); }

.avatar-block{ width:100%; aspect-ratio:16/9; border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.avatar-block img{ width:100%; height:100%; object-fit:cover; }

.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
.gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.gallery .video-tile{ position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; border:1px solid var(--line); grid-column:span 2; }
.gallery .video-tile iframe, .gallery .video-tile video{ width:100%; height:100%; border:0; }

.testimonial{ border-left:3px solid var(--accent); padding:6px 0 6px 16px; margin-bottom:16px; }
.testimonial p{ margin:0 0 6px; font-style:italic; }
.testimonial .who{ font-size:0.82rem; color:var(--ink-muted); font-weight:600; }

.social-row{ display:flex; gap:10px; flex-wrap:wrap; }
.social-row a{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); text-decoration:none; font-size:0.85rem; }
.social-row a:hover{ border-color:var(--secondary); color:var(--secondary); }

.empty{ color:var(--ink-muted); font-size:0.92rem; padding:30px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius-md); }

.divider{ border:none; border-top:1px solid var(--line); margin:32px 0; }

.upload-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.thumb{ position:relative; width:84px; height:84px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.thumb img, .thumb video{ width:100%; height:100%; object-fit:cover; }
.thumb button{ position:absolute; top:2px; right:2px; background:rgba(0,0,0,0.6); color:#fff; border:0; border-radius:50%; width:20px; height:20px; font-size:12px; line-height:1; cursor:pointer; }

.repeat-row{ display:flex; gap:10px; margin-bottom:10px; align-items:flex-start; }
.repeat-row .grow{ flex:1; }
.repeat-row button{ background:transparent; border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; color:var(--ink-muted); }

@media (max-width:640px){
  .repeat-row{ flex-direction:column; }
}