/* ============ NEKO SHARED TOKENS & PRIMITIVES ============ */
/* Police identique à la landing (index.html) : Fraunces AVEC l'axe italique (ital),
   sinon les titres serif et accents <em> s'affichent en faux-italique/fallback. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,700&family=Alex+Brush&family=Caveat:wght@400;500;600;700&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,100..700,0..100;1,9..144,100..700,0..100&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Special+Elite&display=swap');

:root{
  /* Palette alignee sur la landing page (restyle.css) */
  --cream:#FBF6F0;
  --cream-2:#F5EBDF;
  --cream-3:#ECD9C5;
  --terracotta:#FF6B5A;
  --terracotta-deep:#E04A39;
  --sage:#999999;
  --sage-deep:#777777;
  --ink:#1F1A1A;
  --ink-soft:#6B5A52;
  --muted:#8A7A70;
  --line:#EADDD0;
  --white:#FFFFFF;
  --danger:#B84A3A;
  --success:#777777;
  --shadow: 0 1px 0 rgba(26,22,20,0.04), 0 10px 30px -12px rgba(26,22,20,0.12);
  --shadow-lift: 0 2px 0 rgba(26,22,20,0.04), 0 24px 50px -18px rgba(26,22,20,0.22);
  --radius: 10px;
  --radius-lg: 14px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --display: "Fraunces", Georgia, serif;
}

/* role accents */
body[data-role="owner"]{ --role:#ff6262; --role-deep:#CC3A20; --role-soft:#FFE8E0 }
body[data-role="sitter"]{ --role:#999999; --role-deep:#777777; --role-soft:#E0E0E0 }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
/* Fond crème uni — pas de grain/pointillés */
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}

/* ---------- Typography (alignee sur la landing : Fraunces partout) ---------- */
.serif{font-family:var(--serif); font-weight:400; letter-spacing:-0.01em}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted)}
/* Eyebrow style landing : Fraunces italique au lieu de mono uppercase */
.eyebrow{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:18px; letter-spacing:0; text-transform:none;
  color: var(--terracotta); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--terracotta); }
/* Titres en Lora comme la landing (override section h2 → Lora dans globals.css) */
h1,h2,h3,h4{font-family:"Lora", Georgia, serif; font-weight:600; letter-spacing:-0.01em; margin:0}
h1{font-size: clamp(32px, 4.6vw, 52px); line-height:1.05}
h1 em{font-style:italic; color:var(--terracotta); font-weight:400}
h2{font-size: clamp(24px, 2.6vw, 34px); line-height:1.15}
h2 em{font-style:italic; color:var(--terracotta); font-weight:400}
h3{font-size: 20px; line-height:1.25; font-weight:500}
h4{font-size: 17px; line-height:1.3; font-weight:500}
.lede{font-size:17px; color:var(--ink-soft); line-height:1.55}

/* ---------- Layout ---------- */
.wrap{max-width:1240px; margin:0 auto; padding: 0 28px; position:relative; z-index:1}
.wrap-narrow{max-width:640px; margin:0 auto; padding: 0 28px; position:relative; z-index:1}
section{position:relative; z-index:1}

/* ---------- NAV (volante glass comme la landing) ---------- */
.nav{
  position:sticky; top:16px; z-index:50;
  margin: 16px 16px 0;
  border-radius: 999px;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  background: rgba(251, 246, 240, 0.88);
  border-bottom: none;
  box-shadow: 0 6px 20px -8px rgba(60, 40, 30, 0.18);
  transition: box-shadow .3s ease;
}
.nav.scrolled{box-shadow: 0 8px 24px -10px rgba(60, 40, 30, 0.25)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding: 8px 20px}
.logo{display:flex; align-items:center; gap:10px; font-family:"Lora", Georgia, serif; font-size:26px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink)}
.logo-mark{
  width:34px; height:34px; display:grid; place-items:center; position:relative;
}
.logo-mark svg{ width:100%; height:100%; }
.logo-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.nav-links{display:flex; gap:24px; align-items:center}
.nav-links a{font-size:14px; color:var(--ink); font-weight:500; transition:color .2s}
.nav-links a:hover, .nav-links a.active{color:var(--terracotta)}
.nav-links a.active{font-weight:600}
.nav-links a.nav-cta{padding:10px 20px; border-radius:6px; background:var(--terracotta); color:#fff; font-size:14px; font-weight:600; transition:background .2s}
.nav-links a.nav-cta:hover{background:var(--terracotta-deep); color:#fff}

/* Profile dropdown */
.profile-menu{position:relative}
.profile-btn{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px 6px 6px; border-radius:999px;
  border:1px solid var(--line); background:var(--white);
  transition: border-color .2s;
}
.profile-btn:hover{border-color:var(--ink)}
.profile-avatar{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:13px;
  color:var(--white); background: var(--terracotta);
}
body[data-role="sitter"] .profile-avatar{background: var(--sage-deep)}
.profile-btn span{font-size:13px; font-weight:500}
.profile-btn .caret{font-size:9px; color:var(--muted)}
.profile-dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--white); border:1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lift);
  min-width:240px; padding: 8px; display:none; z-index:60;
}
.profile-dropdown.open{display:block; animation: fadeIn .15s ease}
.profile-dropdown .pd-head{padding: 10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px}
.profile-dropdown .pd-head b{display:block; font-size:14px}
.profile-dropdown .pd-head small{color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase}
.profile-dropdown a{display:flex; align-items:center; gap:10px; padding: 9px 12px; border-radius:8px; font-size:14px; color:var(--ink-soft); transition:background .15s}
.profile-dropdown a:hover{background:var(--cream-2); color:var(--ink)}
.profile-dropdown hr{border:0; border-top:1px solid var(--line); margin:6px 0}
@keyframes fadeIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}

.nav-cta .nav-cta-txt{margin-left:5px}

@media (max-width: 820px){
  .nav-links a:not(.nav-cta):not(.profile-btn-link){display:none}
  .nav-inner.wrap{padding-left:14px; padding-right:14px}
  .nav-links{gap:10px}
  .logo{font-size:21px; gap:7px}
  .logo-mark{width:28px; height:28px}
  /* CTA « + Créer une annonce » → bouton rond compact « + » */
  .nav-links a.nav-cta{padding:0; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; font-size:24px; line-height:1}
  .nav-cta .nav-cta-txt{display:none}
  .nav-cta .nav-cta-ico{margin-top:-2px}
  .nav-bell{width:38px; height:38px}
  .nav-bell svg{width:18px; height:18px}
  /* profil : avatar seul, on masque le prénom + le chevron */
  .profile-btn{padding:5px; gap:0}
  .profile-btn > span:not(.profile-avatar){display:none}
}

/* Cloche notifications (haut droite) */
.nav-bell{
  position:relative; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  border:1px solid var(--line); background:var(--white);
  transition: border-color .2s, color .2s, transform .15s;
}
.nav-bell:hover{border-color:var(--ink); color:var(--terracotta-deep); transform:translateY(-1px)}
.nav-bell-dot{
  position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%;
  background:var(--terracotta); border:2px solid var(--white);
}

/* ---------- DRAWER notifications (panneau coulissant à droite, façon panneau document) ---------- */
.neko-drawer-backdrop{
  position:fixed; inset:0; z-index:90;
  background: rgba(26,22,20,0.32); backdrop-filter: blur(2px);
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease;
}
.neko-drawer-backdrop.open{opacity:1; visibility:visible}
.neko-drawer{
  position:fixed; top:0; right:0; z-index:100;
  width: min(420px, 92vw); height:100vh;
  background:var(--cream); border-left:1px solid var(--line);
  box-shadow: -24px 0 60px -24px rgba(26,22,20,0.35);
  display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.neko-drawer.open{transform: translateX(0)}
.neko-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 22px 16px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.neko-drawer-close{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink-soft); border:1px solid var(--line); background:var(--white);
  transition: border-color .2s, color .2s;
}
.neko-drawer-close:hover{border-color:var(--ink); color:var(--ink)}
.neko-drawer-body{flex:1; overflow-y:auto; padding: 16px 18px 32px}
.neko-drawer-empty{text-align:center; padding: 48px 16px; color:var(--muted)}
.neko-drawer-empty b{display:block; font-family:"Lora", Georgia, serif; font-weight:600; font-size:17px; color:var(--ink)}
.neko-drawer-empty p{font-size:13px; margin-top:6px}
/* item de notification */
.nt{display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:10px; transition:transform .15s, box-shadow .25s; cursor:pointer}
.nt:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift)}

/* ---------- MESSAGERIE drawer (panneau coulissant à droite) ---------- */
.neko-msg-drawer{width: min(480px, 96vw)}
.neko-msg-drawer .neko-drawer-head{gap:12px}
.neko-msg-peer{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.neko-msg-peer b{display:block; font-family:"Lora", Georgia, serif; font-weight:600; font-size:16px; color:var(--ink); line-height:1.2}
.neko-msg-peer small{display:block; font-size:12px; color:var(--muted)}
.neko-msg-body{padding:0}
/* liste des conversations */
.conv-list{display:flex; flex-direction:column}
.conv-item{position:relative; padding:14px 18px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; gap:12px; transition:background .15s}
.conv-item:hover{background:var(--cream-2)}
.conv-item b{display:block; font-size:14px}
.conv-item .ann{font-family:var(--mono, monospace); font-size:10px; color:var(--terracotta-deep); text-transform:uppercase; letter-spacing:0.06em}
.conv-item .preview{font-size:13px; color:var(--muted); margin-top:2px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.conv-item .time{font-family:var(--mono, monospace); font-size:10px; color:var(--muted); text-transform:uppercase; margin-top:2px}
.conv-item .unread{width:8px; height:8px; border-radius:50%; background:var(--terracotta); margin-left:auto; margin-top:6px; flex-shrink:0}
/* fil de discussion */
.neko-msg-thread{display:flex; flex-direction:column; gap:10px; padding:20px 18px 28px; background:var(--cream-2); min-height:100%}
.neko-msg-thread .msg{max-width:78%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.45}
.neko-msg-thread .msg.them{background:var(--white); align-self:flex-start; border:1px solid var(--line); border-bottom-left-radius:4px}
.neko-msg-thread .msg.me{background:var(--ink); color:var(--cream); align-self:flex-end; border-bottom-right-radius:4px}
.neko-msg-thread .msg-meta{font-family:var(--mono, monospace); font-size:10px; color:var(--muted); text-transform:uppercase; align-self:center; margin:4px 0 6px}
/* zone de saisie */
.neko-msg-compose{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line); flex-shrink:0; background:var(--cream)}
.neko-msg-compose input{flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:999px; outline:none; background:var(--cream-2); font-size:14px}
.nt .nt-ic{width:38px; height:38px; border-radius:11px; background:var(--cream-2); display:grid; place-items:center; color:var(--terracotta-deep); flex-shrink:0}
.nt b{font-size:14px; font-family:"Lora", Georgia, serif; font-weight:600; display:block}
.nt small{display:block; color:var(--muted); font-size:12px; margin-top:2px; line-height:1.45}
.nt .nt-time{font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:6px}

/* ---------- BUTTONS (CTA principal corail comme la landing) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:6px; font-size:15px; font-weight:600; letter-spacing:0.01em; transition: transform .15s, background .2s, border-color .2s, color .2s; cursor:pointer; min-height:48px; white-space:nowrap}
.btn-primary{background:var(--terracotta); color:#fff; box-shadow: var(--shadow)}
.btn-primary:hover{background:var(--terracotta-deep); transform:translateY(-1px)}
.btn-ghost{border:1.5px solid var(--terracotta); color:var(--terracotta); background:transparent}
.btn-ghost:hover{background:var(--terracotta); color:#fff}
.btn-subtle{background:var(--cream-2); color:var(--ink); border:1px solid var(--line)}
.btn-subtle:hover{background:var(--white)}
.btn-role{background: var(--role, var(--terracotta-deep)); color:var(--white)}
.btn-role:hover{background: var(--role-deep, var(--terracotta-deep))}
.btn-danger{color:var(--danger); border:1px solid color-mix(in oklab, var(--danger) 40%, transparent)}
.btn-danger:hover{background:var(--danger); color:var(--white); border-color:var(--danger)}
.btn-block{width:100%}
.btn-lg{padding:14px 28px; font-size:15px}
.btn-sm{padding:8px 14px; font-size:13px}

/* ---------- FORM ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px}
.field label{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:500}
.field .help{font-size:12px; color:var(--muted); margin-top:-2px}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="tel"],
.field textarea,
.field select{
  padding: 12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--white); font-size:15px; color:var(--ink);
  transition: border-color .2s, box-shadow .2s;
  outline:none; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--terracotta) 18%, transparent);
}
.field textarea{min-height: 110px; resize:vertical; font-family:inherit; line-height:1.5}
.field.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){ .field.row-2{grid-template-columns:1fr} }

/* checkbox card + radio card */
.check-group, .radio-group{display:grid; gap:10px}
.check-group.cols-2, .radio-group.cols-2{grid-template-columns:1fr 1fr}
.check-group.cols-3, .radio-group.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){ .check-group.cols-2, .check-group.cols-3, .radio-group.cols-2, .radio-group.cols-3{grid-template-columns:1fr} }
.choice{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--white); cursor:pointer;
  transition: border-color .2s, background .2s;
}
.choice:hover{border-color:var(--terracotta)}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice input:checked ~ .choice-dot{background:var(--terracotta); border-color:var(--terracotta)}
.choice input:checked ~ .choice-dot::after{opacity:1}
.choice:has(input:checked){border-color:var(--terracotta); background:color-mix(in oklab, var(--terracotta) 8%, var(--white))}
.choice-dot{
  width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line);
  flex-shrink:0; margin-top:2px; position:relative; transition: all .15s;
}
.choice-dot::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--white); opacity:0; transition: opacity .15s}
.choice-dot.square{border-radius:5px}
.choice-dot.square::after{border-radius:2px}
.choice-body b{display:block; font-size:14px; font-weight:500}
.choice-body span{display:block; font-size:13px; color:var(--muted); margin-top:2px}

/* ---------- CARDS / CHIPS ---------- */
.card{background:var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px}
.card-lift{box-shadow: var(--shadow)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-size:12px; color:var(--ink-soft); transition:all .2s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.active{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.tag{font-family:var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; padding: 3px 8px; border-radius:4px; background:var(--cream-2); color:var(--ink-soft)}
.tag-sage{color:var(--sage-deep); background: color-mix(in oklab, var(--sage) 18%, var(--white))}
.tag-terracotta{color:var(--terracotta-deep); background: color-mix(in oklab, var(--terracotta) 18%, var(--white))}
.tag-ink{color:var(--cream); background:var(--ink)}

/* status pills */
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase}
.pill::before{content:""; width:6px; height:6px; border-radius:50%}
.pill-wait{background:#F4E6D0; color:#8A6840} .pill-wait::before{background:#C8994A}
.pill-ok{background: color-mix(in oklab, var(--sage) 22%, var(--white)); color:var(--sage-deep)} .pill-ok::before{background:var(--sage-deep)}
.pill-done{background: var(--cream-3); color:var(--ink-soft)} .pill-done::before{background:var(--muted)}
.pill-new{background: color-mix(in oklab, var(--terracotta) 22%, var(--white)); color:var(--terracotta-deep)} .pill-new::before{background:var(--terracotta)}
.pill-reject{background:#F4D8D2; color:#8A3A2E} .pill-reject::before{background:#B84A3A}

/* verified badge */
.badge-verified{display:inline-flex; align-items:center; gap:6px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight:600; background:var(--white); border:1px solid var(--line)}
.badge-verified .check{width:12px; height:12px; border-radius:50%; background: var(--sage); display:grid; place-items:center; color:var(--white); font-size:8px; font-weight:bold}

/* ---------- PAGE HEAD (titre serif italique comme la landing) ---------- */
.page-head{padding: 64px 0 40px; border-bottom:1px solid var(--line)}
.page-head .breadcrumb{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom: 14px; display:flex; gap:8px; align-items:center}
.page-head .breadcrumb a:hover{color:var(--terracotta)}
.page-head h1{font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; font-family:"Lora", Georgia, serif; font-weight:600; letter-spacing:-0.018em; line-height:1.05}
.page-head h1 em{font-style:italic; color:var(--terracotta); font-weight:400}
.page-head .lede{margin-top:12px; max-width: 600px}

/* ---------- FOOTER (aligne sur la landing : ink sombre + accents corail) ---------- */
.foot{padding: 64px 0 36px; background: var(--ink); color: color-mix(in oklab, var(--cream) 70%, transparent); font-size:13px; margin-top: 96px}
.foot-grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom:1px solid color-mix(in oklab, var(--cream) 12%, transparent)}
@media (max-width: 820px){ .foot-grid{grid-template-columns: 1fr 1fr; gap:28px} }
.foot-grid h5{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--cream); margin: 0 0 14px; font-weight:500}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.foot-grid a{transition: color .2s}
.foot-grid a:hover{color: var(--terracotta)}
.foot-brand{color:var(--cream)}
.foot-brand p{margin: 10px 0 0; max-width: 300px; font-size:13px; line-height:1.5}
.foot-bottom{display:flex; justify-content:space-between; padding-top: 24px; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color: color-mix(in oklab, var(--cream) 50%, transparent); flex-wrap:wrap; gap:12px}

/* ---------- UTILITIES ---------- */
.flex{display:flex} .flex-col{display:flex; flex-direction:column} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-5{gap:20px} .gap-6{gap:24px}
.items-center{align-items:center} .items-start{align-items:flex-start} .items-end{align-items:flex-end}
.justify-between{justify-content:space-between} .justify-center{justify-content:center}
.grid{display:grid} .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-5{margin-top:20px} .mt-6{margin-top:24px} .mt-8{margin-top:32px} .mt-10{margin-top:40px} .mt-12{margin-top:48px}
.mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px} .mb-8{margin-bottom:32px}
.text-muted{color:var(--muted)} .text-soft{color:var(--ink-soft)} .text-terra{color:var(--terracotta-deep)} .text-sage{color:var(--sage-deep)}
.text-sm{font-size:13px} .text-xs{font-size:12px} .text-lg{font-size:17px}
.hide-mobile{} @media (max-width:720px){.hide-mobile{display:none!important}}

/* ---------- SCROLL REVEAL (optional) ---------- */
.reveal{opacity:0; transform:translateY(12px); transition: opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* selection */
::selection{background: var(--terracotta); color: var(--cream)}

/* avatar placeholder */
.avatar{display:grid; place-items:center; font-family:var(--serif); font-style:italic; color:var(--white); border-radius:50%; flex-shrink:0}
.avatar.sm{width:32px; height:32px; font-size:14px}
.avatar.md{width:44px; height:44px; font-size:18px}
.avatar.lg{width:72px; height:72px; font-size:30px}
.avatar.xl{width:120px; height:120px; font-size:48px}

/* "photo" placeholder (gradient + grain) */
.ph{position:relative; overflow:hidden; background: var(--cream-3)}
.ph::after{content:""; position:absolute; inset:0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(26,22,20,0.04) 14px 15px); pointer-events:none}
.ph .ph-initial{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-size: 80px; color: color-mix(in oklab, var(--ink) 22%, transparent)}
.ph.gradient-1{background: linear-gradient(160deg, #E6DCC9 0%, #D4B89A 50%, #CC3A20 100%)}
.ph.gradient-2{background: linear-gradient(180deg, #C9D4C2 0%, #999999 55%, #555555 100%)}
.ph.gradient-3{background: linear-gradient(200deg, #F0C9A8 0%, #ff6262 60%, #A02810 100%)}
.ph.gradient-4{background: linear-gradient(150deg, #2A2420 0%, #3A342E 40%, #777777 100%)}
.ph.gradient-5{background: linear-gradient(170deg, #EFE7DA 0%, #C9B5A0 100%)}