/* ============================================================
   For Eliot — Open Sky design system
   Airy, light, soft sky-blue. Mobile-first, scales to desktop.
   Type: Newsreader (display/serif) + Hanken Grotesk (UI).
   ============================================================ */

:root{
  --bg:#F3F7F9;
  --bg-soft:#E8F0F2;        /* pale sky section wash */
  --bg-card:#FFFFFF;
  --ink:#2E3A39;            /* primary text */
  --ink-soft:#56625F;
  --muted:#7E8C8E;          /* meta / secondary */
  --brand:#345762;          /* deep sky-teal — headings, links */
  --accent:#6E94A6;         /* sky blue accent */
  --accent-deep:#557A8B;
  --accent-soft:#DCE9EC;
  --line:#E7EEEF;
  --line-soft:#EFF3F2;
  --gold:#C9A15B;           /* whisper of warmth, used sparingly */
  --shadow-sm:0 4px 14px rgba(80,110,120,.08);
  --shadow-md:0 10px 30px rgba(80,110,120,.12);
  --shadow-lg:0 24px 60px rgba(60,90,100,.18);
  --serif:'Newsreader', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --maxw:1180px;
  --radius:16px;
  --radius-sm:10px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
::selection{ background:var(--accent-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.serif{ font-family:var(--serif); }
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep);
  margin:0 0 14px;
}

/* ---------------- Header ---------------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(243,247,249,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head__in{
  display:flex; align-items:center; justify-content:center;
  height:64px;
}
.brand{ font-family:var(--serif); font-size:21px; color:var(--brand); letter-spacing:.01em; white-space:nowrap; cursor:pointer; }
.brand em{ font-style:italic; }
.nav{ display:flex; align-items:center; gap:6px; }
.nav__link{
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted);
  padding:8px 12px; border-radius:999px; cursor:pointer; background:none; border:none;
  transition:color .25s ease, background .25s ease;
}
.nav__link:hover{ color:var(--brand); }
.nav__link.is-active{ color:var(--brand); background:var(--accent-soft); }

/* buttons */
.btn{
  font-family:var(--sans); font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 20px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
  transition:transform .2s ease, background .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--ghost{ background:transparent; color:var(--brand); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-deep); }
.btn--block{ width:100%; justify-content:center; padding:15px 20px; font-size:15px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn .arr{ transition:transform .2s ease; }
.btn--primary:hover .arr{ transform:translateX(3px); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden; text-align:center;
  min-height:clamp(600px, 86vh, 880px);
  display:flex; align-items:center; justify-content:center;
  padding:40px 0;
}
/* the drifting field of messages, behind Eliot */
.hero__field{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:space-evenly; gap:14px;
  padding:26px 0; pointer-events:none;
}
.hero__field .feed-row{ pointer-events:none; }
.hero__field .bubble{ pointer-events:auto; opacity:.96; }
/* soft edge fades so messages dissolve at the screen edges */
.hero::before, .hero::after{
  content:''; position:absolute; top:0; bottom:0; width:10%; z-index:2; pointer-events:none;
}
.hero::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.hero::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }

/* the calm clearing where Eliot sits, above the field */
.hero__center{
  position:relative; z-index:3; padding:30px 42px; max-width:520px; margin:0 auto;
  background:radial-gradient(60% 58% at 50% 50%,
    var(--bg) 48%, rgba(243,247,249,.93) 64%, rgba(243,247,249,.55) 80%, transparent 100%);
}
.hero__photo{
  display:inline-block; width:min(216px, 52vw); aspect-ratio:3/4; border-radius:var(--radius); margin:0 auto 20px;
  box-shadow:0 22px 56px rgba(52,87,98,.30); overflow:hidden; line-height:0;
  background:radial-gradient(130% 120% at 70% 20%, #DCE9EC, #AFC9D6 60%, #7FA3B0);
  outline:6px solid var(--bg);
}
.hero__title{
  font-family:var(--serif); font-weight:500; color:var(--brand);
  font-size:clamp(28px, 5vw, 46px); line-height:1.06; letter-spacing:-.015em;
  margin:0 auto 14px; max-width:14ch;
}
.hero__lede{
  font-family:var(--serif); font-size:clamp(14px,1.9vw,17px); line-height:1.55;
  color:var(--ink-soft); max-width:430px; margin:0 auto 22px;
}
.hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------------- Moving feed rows ---------------- */
.feed-row{ display:flex; width:max-content; gap:14px; }
.feed-row__track{
  display:flex; gap:14px; padding-right:14px; align-items:center;
  animation:feed-slide var(--dur,60s) linear infinite;
}
.feed-row:hover .feed-row__track{ animation-play-state:paused; }
.feed-row--rev .feed-row__track{ animation-direction:reverse; }
@keyframes feed-slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .feed-row__track{ animation:none; }
}
.bubble{
  flex:0 0 auto; width:max-content; max-width:300px; cursor:pointer; text-align:left;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.bubble--photo{ width:248px; }
.bubble__photo{
  display:block; width:100%; height:150px; background:var(--accent-soft);
  background-size:cover; background-position:center;
}
.bubble__body{ display:block; padding:14px 17px; }
.bubble__by{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.bubble:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent-soft); }
.bubble__q{ font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.35; color:var(--brand); }
.bubble__n{ display:block; font-family:var(--sans); font-style:normal; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--muted); margin-top:5px; text-transform:none; }
.avatar{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:13px;
  color:#fff; background:var(--accent);
}
.avatar--sm{ width:26px; height:26px; font-size:11px; }

/* ---------------- Section heads ---------------- */
.section{ padding:54px 0; }
.section--soft{ background:var(--bg-soft); }
.section__head{ text-align:center; margin-bottom:36px; }
.section__title{ font-family:var(--serif); font-weight:500; color:var(--brand); font-size:clamp(26px,4vw,40px); line-height:1.1; margin:0; }
.section__sub{ font-family:var(--serif); color:var(--ink-soft); font-size:17px; margin:12px auto 0; max-width:520px; }

/* ---------------- Stories grid (masonry-ish) ---------------- */
.stories{ columns:1; column-gap:18px; }
.story{
  break-inside:avoid; margin:0 0 18px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px 18px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease;
}
.story:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.story__photo{ width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm); margin-bottom:16px; overflow:hidden; background:var(--accent-soft); }
.story__photo img{ width:100%; height:100%; object-fit:cover; }
.story__q{ font-family:var(--serif); font-size:18px; line-height:1.5; color:var(--ink); margin:0 0 16px; }
.story__by{ display:flex; align-items:center; gap:11px; }
.story__nm{ font-family:var(--sans); font-size:14px; font-weight:700; color:var(--brand); line-height:1.2; }
.story__rel{ font-family:var(--sans); font-size:12px; color:var(--muted); }

/* ---------------- Gallery ---------------- */
.gallery{ columns:2; column-gap:14px; }
.photo-card{
  break-inside:avoid; margin:0 0 14px; position:relative; overflow:hidden;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .25s ease, box-shadow .3s ease;
}
.photo-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.photo-card__img{ width:100%; display:block; }
.photo-card__img img{ width:100%; display:block; }
.photo-card__scrim{ position:absolute; inset:0; background:linear-gradient(transparent 50%, rgba(35,55,60,.62)); opacity:0; transition:opacity .3s ease; }
.photo-card:hover .photo-card__scrim{ opacity:1; }
.photo-card__cap{ position:absolute; left:14px; right:14px; bottom:13px; color:#fff; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; }
.photo-card:hover .photo-card__cap{ opacity:1; transform:none; }
.photo-card__cap .q{ font-family:var(--serif); font-style:italic; font-size:14px; line-height:1.35; }
.photo-card__cap .n{ font-family:var(--sans); font-size:11px; font-weight:600; opacity:.85; margin-top:3px; }

/* ---------------- Share form ---------------- */
.formwrap{ max-width:620px; margin:0 auto; }
.formcard{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow-md);
}
.field{ margin-bottom:20px; }
.field__label{ display:block; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.field__opt{ color:var(--muted); font-weight:500; }
.field input[type=text], .field textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#A9B4B5; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field textarea{ resize:vertical; min-height:130px; line-height:1.55; font-family:var(--serif); font-size:16px; }
.field__count{ text-align:right; font-size:11px; color:var(--muted); margin-top:6px; }

.photo-drop{
  border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:22px;
  text-align:center; cursor:pointer; transition:border-color .2s ease, background .2s ease;
  background:var(--bg);
}
.photo-drop:hover, .photo-drop.is-drag{ border-color:var(--accent); background:var(--bg-soft); }
.photo-drop__icon{ width:30px; height:30px; margin:0 auto 8px; color:var(--accent); }
.photo-drop__t{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.photo-drop__s{ font-size:12px; color:var(--muted); margin-top:3px; }
.photo-preview{ position:relative; border-radius:var(--radius-sm); overflow:hidden; }
.photo-preview img{ width:100%; max-height:280px; object-fit:cover; }
.photo-preview__x{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:rgba(20,30,30,.6); color:#fff; border:none; cursor:pointer; display:grid; place-items:center;
  font-size:16px; backdrop-filter:blur(4px);
}

/* confirmation */
.confirm{ text-align:center; padding:40px 24px; }
.confirm__mark{ width:64px; height:64px; border-radius:50%; background:var(--accent-soft); color:var(--accent-deep); display:grid; place-items:center; margin:0 auto 22px; }
.confirm__t{ font-family:var(--serif); font-size:28px; color:var(--brand); margin:0 0 12px; }
.confirm__p{ font-family:var(--serif); color:var(--ink-soft); max-width:420px; margin:0 auto 24px; font-size:17px; line-height:1.55; }

/* ---------------- Modal ---------------- */
.overlay{
  position:fixed; inset:0; z-index:100; background:rgba(40,58,62,.45);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  padding:22px; opacity:0; animation:fade .25s ease forwards;
}
@keyframes fade{ to{ opacity:1; } }
.modal{
  background:var(--bg-card); border-radius:var(--radius); max-width:560px; width:100%;
  max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); position:relative;
  transform:translateY(10px); animation:rise .3s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes rise{ to{ transform:none; } }
.modal__x{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1px solid var(--line); cursor:pointer;
  display:grid; place-items:center; font-size:17px; color:var(--ink); z-index:2;
}
.modal__photo{ width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--accent-soft); }
.modal__photo img{ width:100%; height:100%; object-fit:cover; }
.modal__body{ padding:30px; }
.modal__q{ font-family:var(--serif); font-size:21px; line-height:1.55; color:var(--ink); margin:0 0 22px; }
.modal__by{ display:flex; align-items:center; gap:13px; padding-top:18px; border-top:1px solid var(--line); }
.modal__nm{ font-family:var(--sans); font-size:15px; font-weight:700; color:var(--brand); }
.modal__rel{ font-family:var(--sans); font-size:13px; color:var(--muted); }

/* ---------------- Footer ---------------- */
.site-foot{ background:var(--brand); color:#fff; padding:46px 0 30px; margin-top:20px; }
.site-foot__in{ text-align:center; }
.site-foot__brand{ font-family:var(--serif); font-size:24px; margin-bottom:10px; }
.site-foot__p{ font-family:var(--serif); color:rgba(255,255,255,.78); max-width:420px; margin:0 auto 18px; line-height:1.55; }
.site-foot__small{ font-family:var(--sans); font-size:12px; color:rgba(255,255,255,.55); letter-spacing:.02em; }
.site-foot a{ color:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:2px; }

/* empty state */
.empty{ text-align:center; padding:50px 20px; color:var(--muted); font-family:var(--serif); font-size:17px; }

/* ---------------- Responsive ---------------- */
@media (min-width:720px){
  .wrap{ padding:0 32px; }
  .site-head__in{ height:74px; }
  .nav{ gap:10px; }
  .hero{ padding:40px 0; }
  .hero__photo{ width:min(220px, 22vw); }
  .stories{ columns:2; }
  .gallery{ columns:3; }
  .section{ padding:70px 0; }
}
@media (min-width:1040px){
  .stories{ columns:3; }
  .gallery{ columns:4; }
}

/* ---------------- Phone-frame variant (for desktop showcase) ---------------- */
.showcase{ background:var(--bg-soft); min-height:100vh; }

/* ============================================================
   Admin / Moderation portal
   ============================================================ */
.admin{ min-height:100vh; background:var(--bg-soft); }
.admin-head{ background:var(--brand); color:#fff; }
.admin-head__in{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.admin-head__brand{ font-family:var(--serif); font-size:20px; white-space:nowrap; }
.admin-head__brand b{ font-weight:500; }
.admin-head__brand .tag{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); margin-left:12px; }
.admin-head a{ color:rgba(255,255,255,.85); font-family:var(--sans); font-size:13px; font-weight:600; text-decoration:none; }
.admin-head a:hover{ color:#fff; }

.admin-bar{ display:flex; align-items:center; gap:8px; padding:26px 0 18px; flex-wrap:wrap; }
.admin-tab{
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer; white-space:nowrap;
  transition:all .2s ease; display:inline-flex; align-items:center; gap:8px;
}
.admin-tab.is-active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.admin-tab .pill{ font-size:12px; background:var(--accent-soft); color:var(--accent-deep); border-radius:999px; padding:1px 8px; font-weight:700; }
.admin-tab.is-active .pill{ background:rgba(255,255,255,.22); color:#fff; }
.admin-bar__sp{ flex:1; }
.admin-reset{ font-family:var(--sans); font-size:12px; color:var(--muted); background:none; border:none; cursor:pointer; text-decoration:underline; white-space:nowrap; }

.review-list{ display:grid; gap:18px; padding-bottom:60px; }
.review{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; display:grid; grid-template-columns:1fr;
}
@media(min-width:820px){ .review.has-photo{ grid-template-columns:230px 1fr; } }
.review__photo{ background:var(--accent-soft); min-height:180px; }
.review__photo > div, .review__photo > img{ width:100%; height:100%; min-height:180px; object-fit:cover; display:block; }
.review__main{ padding:22px 24px; }
.review__top{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.review__name{ font-family:var(--sans); font-size:16px; font-weight:700; color:var(--brand); }
.review__rel{ font-family:var(--sans); font-size:13px; color:var(--muted); }
.review__time{ font-family:var(--sans); font-size:12px; color:var(--muted); margin-left:auto; }
.review__msg{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--ink); margin:12px 0 18px; }
.review__msglabel{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.review__msglabel + .review__msg{ margin-top:6px; }

.snip{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; margin-bottom:18px; }
.snip__hd{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:4px; }
.snip__hint{ font-family:var(--sans); font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.snip__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.snip-chip{
  font-family:var(--serif); font-style:italic; font-size:14px; line-height:1.3; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer;
  color:var(--ink-soft); transition:all .18s ease; max-width:100%;
}
.snip-chip:hover{ border-color:var(--accent); color:var(--brand); }
.snip-chip.is-sel{ background:var(--brand); color:#fff; border-color:var(--brand); }
.snip__field{ display:flex; gap:8px; align-items:center; }
.snip__field input{
  flex:1; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--brand);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 13px;
}
.snip__field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.snip__preview-label{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:10px; }
.snip__bubble{ display:inline-flex; align-items:center; gap:10px; margin-top:7px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-sm); }
.snip__bubble .q{ font-family:var(--serif); font-style:italic; color:var(--brand); font-size:14px; }

.review__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn--approve{ background:#3E8E6E; color:#fff; }
.btn--approve:hover{ background:#347a5e; }
.btn--danger{ background:#fff; color:#B5524A; border-color:#EAD3D1; }
.btn--danger:hover{ background:#FBF1F0; border-color:#B5524A; }
.btn--takedown{ background:#fff; color:#A66A2E; border-color:#EADBC6; }
.btn--takedown:hover{ background:#FBF4EA; border-color:#A66A2E; }
.review__status{ font-family:var(--sans); font-size:12px; font-weight:700; color:#3E8E6E; display:inline-flex; align-items:center; gap:6px; }

.admin-empty{ text-align:center; padding:70px 20px; color:var(--muted); }
.admin-empty__t{ font-family:var(--serif); font-size:22px; color:var(--brand); margin-bottom:8px; }