/* Critterspace public — jungle/nature theme.
   Photos stay the centerpiece; backgrounds & flourishes are subtle. */

:root {
  --bg: #e8eadc;          /* mossy off-cream */
  --paper: #faf6e8;       /* parchment */
  --ink: #2d2419;         /* dark bark */
  --muted: #6e6555;       /* warm grey-brown */
  --line: #c8c3a8;        /* sandy */
  --accent: #4a6b3a;      /* forest green */
  --accent-dark: #36502a; /* deep canopy */
  --bark: #6b5439;        /* trunk */
  --terra: #b87a4c;       /* terracotta — wall msg accent */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:'Inter', system-ui, sans-serif; font-size:16px; line-height:1.55; }

/* Subtle leafy vines repeating down both edges + tree silhouettes
   anchored to the bottom corners in varying greens/browns. All SVG
   inline so no extra assets; opacity kept low so photos remain the
   focal point. */
body {
  background-image:
    /* left vine */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%234a6b3a' stroke-width='1.4' stroke-linecap='round' opacity='0.18'><path d='M10 0 C 30 30 0 60 30 90 S 0 150 30 180 0 220 40 220'/><path d='M30 30 q -10 -6 -16 -2 q -8 4 -2 14 q 6 8 18 -2 z' fill='%234a6b3a' fill-opacity='0.6' stroke='none'/><path d='M30 90 q 14 -2 18 6 q 4 10 -8 14 q -14 4 -10 -20 z' fill='%234a6b3a' fill-opacity='0.6' stroke='none'/><path d='M30 180 q -10 4 -14 14 q -4 14 12 14' /></g></svg>"),
    /* right vine */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%234a6b3a' stroke-width='1.4' stroke-linecap='round' opacity='0.18'><path d='M210 0 C 190 30 220 60 190 90 S 220 150 190 180 220 220 180 220'/><path d='M190 30 q 10 -6 16 -2 q 8 4 2 14 q -6 8 -18 -2 z' fill='%234a6b3a' fill-opacity='0.6' stroke='none'/><path d='M190 90 q -14 -2 -18 6 q -4 10 8 14 q 14 4 10 -20 z' fill='%234a6b3a' fill-opacity='0.6' stroke='none'/></g></svg>"),
    /* bottom-left tree (deep canopy, mid trunk) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='420' viewBox='0 0 320 420'><g opacity='0.30'><rect x='148' y='240' width='24' height='180' fill='%235a3f1f' /><path d='M148 360 q -20 12 -28 30 q 14 0 28 -10 z' fill='%235a3f1f' /><path d='M172 340 q 22 14 30 36 q -16 -2 -30 -12 z' fill='%235a3f1f' /><ellipse cx='160' cy='180' rx='110' ry='110' fill='%2336502a' /><ellipse cx='98' cy='220' rx='78' ry='70' fill='%2336502a' /><ellipse cx='222' cy='220' rx='78' ry='70' fill='%23425e34' /><ellipse cx='160' cy='130' rx='70' ry='60' fill='%23425e34' /><ellipse cx='130' cy='170' rx='52' ry='44' fill='%23537a3f' /></g></svg>"),
    /* bottom-right tree (lighter canopy, lighter trunk) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='440' viewBox='0 0 340 440'><g opacity='0.26'><rect x='156' y='240' width='28' height='200' fill='%236b4a25' /><path d='M156 380 q -22 10 -32 28 q 16 2 32 -8 z' fill='%236b4a25' /><path d='M184 370 q 26 12 34 32 q -18 0 -34 -12 z' fill='%236b4a25' /><ellipse cx='170' cy='180' rx='130' ry='120' fill='%23597b3e' /><ellipse cx='100' cy='220' rx='80' ry='68' fill='%234a6b3a' /><ellipse cx='240' cy='220' rx='84' ry='72' fill='%23628a45' /><ellipse cx='170' cy='120' rx='86' ry='62' fill='%236f9650' /><ellipse cx='200' cy='180' rx='52' ry='42' fill='%237ea65d' /></g></svg>");
  background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-attachment: fixed, fixed, fixed, fixed;
  background-size: auto, auto, 320px auto, 340px auto;
}

h1, h2, h3 { font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; margin:0 0 .3rem; color:var(--ink); }
h1 { font-size:2.4rem; line-height:1.1; }
h2 { font-size:1.6rem; }
h3 { font-size:1.15rem; letter-spacing:.04em; color:var(--accent-dark); }

a { color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
a:hover { color:var(--accent-dark); border-color:var(--accent-dark); }
.muted { color:var(--muted); }
.btn { display:inline-block; padding:.5rem 1rem; border:1px solid var(--ink); border-radius:3px; background:transparent; color:var(--ink); }
.btn:hover { background:var(--ink); color:var(--paper); }

/* ── Topbar / footer ───────────────────────────────────── */
.topbar {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:1rem 1.5rem;
  border-bottom:3px double var(--accent);
  background:var(--paper);
  position:relative;
}
.brand { font-family:'Cormorant Garamond', serif; font-size:1.7rem; letter-spacing:.04em; border:none; color:var(--accent-dark); }
.brand-sub { display:block; font-size:.65rem; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; font-family:'Inter',sans-serif; }
.topbar nav a { margin-left:1rem; font-size:.9rem; }

main { max-width:1080px; margin:0 auto; padding:1.5rem 1rem 4rem; }
footer { text-align:center; color:var(--muted); padding:2rem 1rem 3rem; font-size:.85rem; }

/* ── Post card (used in feed AND profile-right) ─────────── */
.feed { display:flex; flex-direction:column; gap:1.5rem; }
.post-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1rem;
  box-shadow:0 2px 0 var(--line);
}
.post-card.single { padding:1.2rem; }
.post-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.profile-pill { display:inline-flex; align-items:center; gap:.4rem; font-weight:500; border-bottom:none; }
.profile-pill img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.post-photo { display:block; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.post-photo img, .post-photo-img { width:100%; display:block; }
.post-caption { margin:.6rem 0 .3rem; font-size:1rem; }
.reactions { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; }
.rxn { background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:.1rem .5rem; font-size:.85rem; }
.comments { list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.25rem; font-size:.92rem; }
.comments a { border-bottom:none; }
.comments li { background:var(--bg); padding:.3rem .6rem; border-radius:3px; }
.comments .more { background:transparent; color:var(--muted); }
.comments.full li { padding:.4rem .7rem; }
.pagination { display:flex; justify-content:space-between; margin-top:1rem; }

/* ── Print banner (full-width strip under the topbar) ── */
.print-banner {
  width: 100%;
  height: 44px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15), 0 2px 0 var(--line);
  position: relative;
}

.print-banner.print-tiger {
  background:
    repeating-linear-gradient(96deg,
      #2b1808 0 14px, transparent 14px 30px,
      #2b1808 30px 38px, transparent 38px 58px),
    linear-gradient(180deg, #d8902a 0%, #b46e1a 100%);
}
.print-banner.print-zebra {
  background:
    repeating-linear-gradient(100deg,
      #181612 0 16px, #f7f1de 16px 36px),
    #f7f1de;
}
.print-banner.print-spots {
  background:
    radial-gradient(ellipse 18px 11px at 22px 18px, #2d1a08 0 70%, transparent 80%),
    radial-gradient(ellipse 14px 9px at 70px 28px, #2d1a08 0 70%, transparent 80%),
    radial-gradient(ellipse 20px 12px at 130px 14px, #2d1a08 0 70%, transparent 80%),
    radial-gradient(ellipse 13px 8px at 180px 30px, #2d1a08 0 70%, transparent 80%),
    radial-gradient(ellipse 16px 10px at 230px 18px, #2d1a08 0 70%, transparent 80%),
    radial-gradient(ellipse 12px 8px at 280px 28px, #2d1a08 0 70%, transparent 80%),
    linear-gradient(180deg, #d4a155, #b07f33);
  background-size: 320px 44px, 320px 44px, 320px 44px, 320px 44px, 320px 44px, 320px 44px, 100% 100%;
  background-repeat: repeat-x;
}
.print-banner.print-giraffe {
  /* Big irregular polygon-ish patches with negative space — closer to
     real giraffe markings than the small round dots we had before. */
  background:
    radial-gradient(ellipse 34px 22px at 36px 20px, #6b3e10 0 75%, transparent 82%),
    radial-gradient(ellipse 28px 18px at 96px 28px, #6b3e10 0 75%, transparent 82%),
    radial-gradient(ellipse 40px 24px at 170px 16px, #6b3e10 0 75%, transparent 82%),
    radial-gradient(ellipse 26px 16px at 232px 30px, #6b3e10 0 75%, transparent 82%),
    radial-gradient(ellipse 36px 22px at 296px 18px, #6b3e10 0 75%, transparent 82%),
    radial-gradient(ellipse 24px 14px at 348px 28px, #6b3e10 0 75%, transparent 82%),
    linear-gradient(180deg, #efc783, #cc9a45);
  background-size: 380px 44px, 380px 44px, 380px 44px, 380px 44px, 380px 44px, 380px 44px, 100% 100%;
  background-repeat: repeat-x;
}

/* ── Profile page (MySpace-style two-column) ─────────── */
.profile-page {
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:1.5rem;
}
.profile-left { display:flex; flex-direction:column; gap:1rem; }
.profile-right { display:flex; flex-direction:column; gap:1rem; }

.avatar-xl {
  width:100%; aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:var(--paper);
  border:4px solid var(--accent);
  box-shadow:0 0 0 1px var(--line), 0 4px 10px rgba(45,36,25,.12);
  display:grid; place-items:center; color:var(--muted); font-size:5rem;
}
.avatar-xl img { width:100%; height:100%; object-fit:cover; }

.panel {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.9rem 1rem;
}
.panel h3 { margin-bottom:.6rem; border-bottom:1px solid var(--line); padding-bottom:.3rem; }

.top-list { list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; }
.top-card { display:flex; flex-direction:column; align-items:center; gap:.2rem;
  text-align:center; border-bottom:none; padding:.3rem; border:1px solid transparent;
  border-radius:4px; background:var(--bg); }
.top-card:hover { border-color:var(--accent); }
.top-card img { width:54px; height:54px; border-radius:50%; object-fit:cover; }
.top-card .placeholder { width:54px; height:54px; border-radius:50%; background:var(--line);
  display:grid; place-items:center; color:var(--muted); font-size:1.6rem; }
.top-card .name { font-size:.78rem; line-height:1.1; word-break:break-word; }

.wall-list { list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.5rem; }
.wall-msg { display:grid; grid-template-columns:auto 1fr; gap:.5rem;
  padding:.5rem .6rem; background:var(--bg); border-radius:4px;
  border-left:3px solid var(--terra); align-items:start; }
.wall-msg .actor { display:inline-flex; align-items:center; gap:.3rem; border-bottom:none; flex-shrink:0; }
.wall-msg .actor img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.wall-msg .text { font-size:.9rem; }

.nameplate {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.2rem 1.4rem;
  position:relative;
  overflow:hidden;
}
.nameplate .species { color:var(--accent-dark); font-style:italic; letter-spacing:.04em; margin:0 0 .6rem; }
.nameplate .bio { margin:0 0 .4rem; }
.nameplate .fact { margin:.6rem 0 0; padding:.5rem .7rem; background:var(--bg);
  border-left:3px solid var(--accent); border-radius:3px; font-size:.92rem; }
.nameplate .fact strong { color:var(--accent-dark); }

.posts-heading { margin-top:.4rem; }
.profile-feed { display:flex; flex-direction:column; gap:1rem; }

/* ── Stacked / mobile ─────────────────────────────────── */
@media (max-width: 720px) {
  .profile-page { grid-template-columns: 1fr; }
  .avatar-xl { max-width:200px; margin:0 auto; }
}

/* ── Single-post permalink page (no two-column) ──────── */
.card.narrow { max-width:520px; margin:2rem auto; background:var(--paper); border:1px solid var(--line); padding:1.5rem; border-radius:6px; }