@import url('fonts.css');

/* ============================================================
   Pain au Chocolat (Chocolate Croissants) — shared stylesheet
   Feed (index.php), Map (map.php), and Admin all draw from here.
   Paths are relative to /assets/ : ui art in ui/, fonts in fonts/.
   ============================================================ */

/* ---------- design tokens ---------- */
:root{
  --gold2:#e29b3c; --gold-edge:#d98f2f;
  --choc:#5b3a22; --choc-deep:#3c2414; --caramel:#c98a3c;
  --ink:#3b2a1e; --ink-soft:#7a6552;
  --parch:#f6ecd2; --parch-edge:#ecdcb6;
  --marble1:#ece6da; --marble2:#ded6c6;
  --pol:#fffdf8; --shadow:rgba(70,45,20,.22);
  --divider:rgba(120,85,45,.35);
}
html[data-theme="dark"]{
  --gold2:#5a3719; --gold-edge:#43280f;
  --choc:#f0d9b0; --choc-deep:#f5e6c8; --caramel:#e3bd7f;
  --ink:#f1e6d2; --ink-soft:#cbb595;
  --parch:#3a2b1d; --parch-edge:#5c4630;
  --marble1:#241712; --marble2:#180e09;
  --pol:#f3e8cf; --shadow:rgba(0,0,0,.55);
  --divider:rgba(225,200,150,.30);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden],.hidden{display:none!important}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
html,body{margin:0}
html{overflow-y:scroll}                         /* stable scrollbar gutter: feed & map keep the same width */
body{
  font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background-color:var(--marble1);
  background-image:url('ui/marble.jpg');
  background-repeat:repeat;
  background-size:720px auto;
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%;
}
html[data-theme="dark"] body{
  background-color:#1a0f09;
  background-image:url('ui/marble-dark.jpg');
}
a{color:var(--caramel)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--caramel); outline-offset:2px}

/* ---------- header ---------- */
.site-header{
  position:relative; z-index:3; text-align:center; color:var(--choc-deep);
  min-height:168px; padding:16px 20px 34px;
  margin-top:calc(-1 * env(safe-area-inset-top, 0px));      /* extend up under the status bar / notch */
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:transparent url('ui/parchment-paper.webp') center bottom / cover no-repeat;  /* transparent: torn bottom reveals the kraft sheet (center) + marble (sides) */
  pointer-events:none;
}
.site-header .brand{pointer-events:auto}
html[data-theme="dark"] .site-header{background-image:url('ui/parchment-paper-dark.webp')}
.brand{display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; width:100%; transform:translateX(-3%)}
.brand a.brand-link{display:flex; align-items:center; gap:28px; text-decoration:none; color:inherit; flex-wrap:wrap; justify-content:center}
.brand .logo{flex:0 0 auto; width:190px; height:112px; border:0; padding:0; cursor:pointer;
  background:transparent url('ui/croissant-tech.png') center/contain no-repeat; transition:transform .15s}
.brand .logo:hover{transform:scale(1.05)}
html[data-theme="dark"] .brand .logo{background-image:url('ui/croissant-tech-white.png')}
.brand-text{display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1}
h1.wordmark{
  font-family:"Corinthia",cursive; font-weight:700;
  font-size:clamp(40px,6.4vw,74px); margin:0; color:var(--choc-deep);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.wordmark .paren{font-size:.62em; margin-left:.4em}   /* extra breathing room on desktop (same line) */
.wordmark .brk{display:none}   /* line break before "(Chocolate Croissants)" — mobile only */
.subtitle{font-family:"Caveat",cursive; font-size:clamp(18px,2.2vw,28px); margin-top:2px; color:var(--choc)}

/* ---------- the kraft "sheet" (shared by feed + map) ---------- */
.sheet{
  width:min(820px,100%); margin:-64px auto 0; position:relative; z-index:1; flex:1 0 auto;
  background-color:var(--parch);
  background-image:url('ui/kraft-paper-bg.jpg');
  background-size:100% auto; background-repeat:repeat;
  border:1px solid var(--parch-edge); border-radius:6px;
  box-shadow:0 4px 14px -2px var(--shadow), 0 26px 60px -10px var(--shadow);
}
html[data-theme="dark"] .sheet{background-image:url('ui/kraft-paper-bg-dark.jpg')}
.sheet.feed{padding:64px 0 80px}
.sheet.map{padding-top:64px; display:flex; flex-direction:column; overflow:hidden}

/* ---------- toolbar ---------- */
.toolbar{
  position:relative;
  display:flex; align-items:center; gap:26px; flex-wrap:nowrap;
  padding:12px 56px 12px 84px;
  background:linear-gradient(var(--parch),color-mix(in srgb,var(--parch) 88%, transparent));
  border-bottom:1px dashed var(--divider);
}
/* solid parch band filling the gap above the toolbar, so the strip under the
   torn header reads as an extension of the filter bar (not bare kraft) */
.sheet .toolbar::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:64px; background:var(--parch); pointer-events:none}
.sheet.feed .toolbar{position:sticky; top:0; z-index:5; margin-bottom:6px; backdrop-filter:blur(3px)}
.toolbar input,.toolbar select{
  font-family:inherit; font-size:16px; color:var(--ink);     /* 16px: prevents iOS zoom-on-focus */
  background:var(--pol); border:1px solid var(--parch-edge);
  border-radius:20px 20px 10px 10px; padding:7px 13px; outline:none;
}
.toolbar input{flex:1 1 auto; min-width:140px; max-width:360px}
.toolbar input:focus,.toolbar select:focus{border-color:var(--caramel)}
html[data-theme="dark"] .toolbar input,html[data-theme="dark"] .toolbar select{background:#2c2016; color:var(--ink); border-color:#5c4630}
html[data-theme="dark"] .toolbar input::placeholder{color:var(--ink-soft)}
.toolbar .count{font-size:13px; color:var(--ink-soft); white-space:nowrap; min-width:118px; text-align:right; margin-left:auto; text-decoration:none; cursor:default}
.toolbar .navlink{display:inline-flex; align-items:center; gap:5px; width:104px; color:var(--caramel); font:inherit; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap}
.toolbar .navlink:hover{text-decoration:underline}
.toolbar .navlink svg{width:19px; height:19px}
.toolbar-sentinel{height:1px}
.stick-croissant{position:absolute; left:22px; top:50%; transform:translateY(-50%); width:38px; height:auto; opacity:0; transition:opacity .3s ease; pointer-events:none}
.toolbar.stuck .stick-croissant{opacity:1}

/* ---------- feed ---------- */
.feed{padding:6px 30px 0}
.review{padding:8px 0 4px; scroll-margin-top:70px}
.review-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.review h2{
  font-family:"EB Garamond",Georgia,serif; font-weight:600;
  font-size:clamp(25px,3vw,34px); margin:0; color:var(--choc-deep); line-height:1.15;
}
.cafe-link{cursor:pointer; transition:color .15s; background:none; border:none; padding:0; font:inherit; color:inherit; text-align:left}
.cafe-link:hover{color:var(--caramel); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.meta{font-size:16px; color:var(--ink-soft); margin:3px 0 5px}
.meta .guest{color:var(--caramel); font-style:italic}

/* rating row: croissant icons, or a caramel note for unrated / non-croissant */
.rating{display:flex; align-items:center; gap:4px; margin:4px 0 8px; min-height:24px}
.rating img.cr{width:32px; height:32px; object-fit:contain}
.rating .note{font-family:"Caveat",cursive; font-size:22px; font-weight:600; color:var(--caramel); line-height:1}

.content{display:flow-root}
.content p{font-size:17px; line-height:1.62; margin:0 0 12px}
.content p:last-child{margin-bottom:0}
.photo{width:171px}
.photo img{display:block; width:100%; height:150px; object-fit:cover;
  border:4px solid var(--caramel); border-radius:2px; cursor:pointer;
  box-shadow:0 4px 12px -4px var(--shadow); transition:transform .15s; background:var(--marble2)}
.photo img:hover{transform:scale(1.03)}
.photo.left{float:left; margin:6px 24px 14px 0; transform:rotate(-2.2deg)}
.photo.right{float:right; margin:6px 0 14px 24px; transform:rotate(2.2deg)}

/* dashed divider before every review except the first visible one */
.review::before{content:""; display:block; height:1px; margin:30px 0; background:repeating-linear-gradient(90deg,var(--divider) 0 6px,transparent 6px 12px)}
.review.is-first::before{display:none}
.flash{animation:flash 1.6s ease}
@keyframes flash{0%{background:rgba(232,170,70,.32)}100%{background:transparent}}
.feed-sentinel{height:1px}
.empty{padding:40px; text-align:center; color:var(--ink-soft); font-size:16px}
.empty a{color:var(--caramel)}

/* ---------- click-to-enlarge modal (polaroid) ---------- */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(35,22,12,.62); z-index:100; padding:24px}
.modal.open{display:flex}
.modal .card{position:relative; background:#fffdf8; padding:16px 16px 14px; box-shadow:0 24px 70px rgba(0,0,0,.45); transform:rotate(-1.6deg); max-width:min(92vw,540px)}
.modal .card img{display:block; width:100%; max-height:66vh; object-fit:contain; background:#e8e4da}
.modal .cap{text-align:center; padding:12px 4px 2px}
.modal .cap .name{font-family:"Caveat",cursive; font-size:30px; color:#3a2a1e; line-height:1.1}
.modal .close{position:fixed; top:16px; right:26px; font-size:36px; color:#fff; background:none; border:none; cursor:pointer; line-height:1}

/* "why chocolate croissants?" about polaroid */
.about-card{position:relative; background:var(--pol); padding:16px 16px 56px; border-radius:2px;
  box-shadow:0 24px 70px rgba(0,0,0,.45); transform:rotate(-2.2deg); width:min(92vw,540px); max-width:92vw}
.about-photo{position:relative; overflow:hidden; padding:30px 28px; color:var(--ink);
  min-height:66vh; display:flex; flex-direction:column; justify-content:center;  /* match the portrait photo polaroid's footprint */
  background:linear-gradient(rgba(246,236,210,.5),rgba(246,236,210,.5)), url('ui/marble.jpg');
  background-size:auto, 720px}
html[data-theme="dark"] .about-photo{color:var(--ink);
  background:linear-gradient(rgba(36,23,18,.5),rgba(36,23,18,.5)), url('ui/marble-dark.jpg');
  background-size:auto, 720px}
.about-photo p{margin:0 0 .9em; font-family:"Caveat",cursive; font-weight:600;
  font-size:clamp(20px,2.7vw,26px); line-height:1.4}
.about-photo p:last-child{margin-bottom:0}
.about-photo p:nth-child(odd){text-align:left}
.about-photo p:nth-child(even){text-align:right}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(12px);
  background:#3c2414; color:#f5e6c8; padding:11px 20px; border-radius:22px; font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease; z-index:200}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- footer ---------- */
.site-footer{position:relative; z-index:2; margin-top:-56px; min-height:120px;
  padding:48px 8% 24px 20px; text-align:right; line-height:1.7; font-size:14px; color:var(--ink-soft);
  background:url('ui/parchment-paper-footer.webp') center top / cover no-repeat}
.site-footer p{margin:0}
.site-footer a{color:var(--choc-deep); text-decoration:underline}
html[data-theme="dark"] .site-footer{background-image:url('ui/parchment-paper-footer-dark.webp')}

/* ---------- map ---------- */
#map{flex:1 1 auto; min-height:420px; background:var(--marble2)}
.leaflet-container{font-family:inherit; background:var(--marble2)}
html[data-theme="light"] .leaflet-tile-pane{filter:sepia(.46) saturate(1) brightness(.98) hue-rotate(7deg)}
.cr-pin{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
/* zoom control — themed in dark mode: dark-chocolate buttons, caramel +/- */
html[data-theme="dark"] .leaflet-bar{border:1px solid rgba(0,0,0,.5); box-shadow:0 1px 6px rgba(0,0,0,.5)}
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-bar a:hover{background:#2e1d12; color:var(--caramel); border-bottom-color:rgba(0,0,0,.45)}
html[data-theme="dark"] .leaflet-bar a:hover{background:#3a2417}
html[data-theme="dark"] .leaflet-bar a.leaflet-disabled{background:#241712; color:#6b5740}
/* attribution credit, themed both modes */
.leaflet-control-attribution{background:rgba(246,236,210,.78); color:var(--ink-soft); font-family:inherit; font-size:11px}
.leaflet-control-attribution a{color:var(--caramel)}
html[data-theme="dark"] .leaflet-control-attribution{background:rgba(36,23,18,.82); color:var(--ink-soft)}

/* ============================================================
   404 — "Ceci n'est pas une chocolatine" (after Magritte)
   ============================================================ */
.notfound{padding:30px 20px 60px; text-align:center}
.magritte{max-width:560px; margin:10px auto 0; background:var(--parch); border:1px solid var(--parch-edge);
  border-radius:8px; padding:clamp(30px,6vw,56px) 24px clamp(24px,5vw,44px);
  box-shadow:0 4px 14px -2px var(--shadow), 0 26px 60px -12px var(--shadow)}
.nf-icon{display:block; width:min(300px,62%); height:auto; margin:0 auto}
.nf-caption{font-family:"Corinthia",cursive; font-weight:700; color:var(--choc-deep);
  font-size:clamp(30px,6vw,52px); line-height:1; margin:14px 0 0}
.nf-back{margin-top:26px; color:var(--ink-soft); font-size:15px}
.nf-back a{color:var(--caramel); font-weight:700; text-decoration:none}
.nf-back a:hover{text-decoration:underline}

/* ============================================================
   Stats / analysis page
   ============================================================ */
.toolbar--links{justify-content:center; gap:34px; padding:12px 20px}
.stats{padding:14px 30px 10px; color:var(--ink)}
.stats-title{font-family:"EB Garamond",Georgia,serif; font-weight:700; color:var(--choc-deep); font-size:clamp(26px,3.4vw,38px); margin:6px 0 20px}
.stats-h{font-family:"EB Garamond",Georgia,serif; font-weight:700; color:var(--choc-deep); font-size:clamp(22px,2.8vw,30px);
  margin:34px 0 4px; padding-top:22px; border-top:1px dashed var(--divider)}
.stats-sub{font-family:"EB Garamond",Georgia,serif; font-weight:600; color:var(--choc); font-size:18px; margin:22px 0 10px}
.stats .dim{color:var(--ink-soft); font-weight:400; font-size:.8em}
/* headline number grid */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:8px 0 6px}
.stat{background:color-mix(in srgb,var(--pol) 55%, transparent); border:1px solid var(--parch-edge); border-radius:12px 12px 8px 8px; padding:14px 12px; text-align:center}
.stat b{display:block; font-family:"EB Garamond",Georgia,serif; font-weight:700; color:var(--choc-deep); font-size:clamp(22px,3vw,30px); line-height:1.05}
/* dark mode: darker inset panels so the cream text has real contrast */
html[data-theme="dark"] .stat,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .stats-note{background:rgba(0,0,0,.22); border-color:rgba(245,230,200,.18)}
.stat span{display:block; margin-top:4px; font-size:12px; color:var(--ink-soft); line-height:1.3}
.cr-ico{height:1.05em; width:auto; vertical-align:-0.16em; margin:0 1px}
/* horizontal bar charts */
.bars{display:flex; flex-direction:column; gap:7px; margin:4px 0}
.bar-row{display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:10px; font-size:14px}
.bar-row .bl{color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-row .bt{height:16px; background:color-mix(in srgb,var(--parch-edge) 60%, transparent); border-radius:8px; overflow:hidden}
.bar-row .bf{display:block; height:100%; background:linear-gradient(90deg,var(--gold2),var(--caramel)); border-radius:8px}
.bar-row .bv{color:var(--ink-soft); font-size:13px; white-space:nowrap; min-width:40px; text-align:right}
/* rating chart needs a wider label so five croissant icons never truncate */
.bars--rating .bar-row{grid-template-columns:112px 1fr auto}
.bars--rating .bl{overflow:visible; text-overflow:clip}
/* two-column lists */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.rank{list-style:none; margin:6px 0 0; padding:0}
.rank li{padding:5px 0; border-bottom:1px dashed var(--divider)}
.rank li a{font-family:"EB Garamond",Georgia,serif; font-weight:600; color:var(--choc-deep); text-decoration:none}
.rank li a:hover{color:var(--caramel); text-decoration:underline}
.rank li small{display:block; color:var(--ink-soft); font-size:12px}
/* chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.chip{background:color-mix(in srgb,var(--pol) 55%, transparent); border:1px solid var(--parch-edge); border-radius:14px; padding:4px 11px; font-size:13px; color:var(--ink)}
.chip b{color:var(--caramel)}
/* line chart */
.linechart{width:100%; height:auto; display:block; margin-top:6px}
.linechart .lc-val{fill:var(--ink-soft); font-size:12px; font-family:"Nunito Sans",sans-serif}
.axis{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin-top:2px}
.stats-note{background:color-mix(in srgb,var(--pol) 55%, transparent); border:1px solid var(--parch-edge); border-radius:10px; padding:12px 14px; font-size:14.5px; line-height:1.5; color:var(--ink); margin-top:14px}
.stats-note b{color:var(--choc-deep)}
.pop{width:200px}
.pop img.ph{width:100%; height:120px; object-fit:cover; border-radius:6px; display:block; background:var(--marble2)}
.pop .nm{font-family:"EB Garamond",Georgia,serif; font-weight:600; font-size:16px; color:var(--choc-deep); margin:7px 0 2px}
.pop .nm a{color:inherit; text-decoration:none}
.pop .nm a:hover{color:var(--caramel); text-decoration:underline}
.pop .lc{font-size:12px; color:var(--ink-soft); margin-bottom:4px}
.pop .rt{min-height:22px}
.pop .rt img{width:22px; height:auto; vertical-align:middle; margin-right:1px}
.pop .rt .note{font-family:"Caveat",cursive; font-size:16px; font-weight:600; color:var(--caramel)}
.pop .sn{font-size:12.5px; color:var(--ink); line-height:1.45; margin-top:5px}
.leaflet-popup-content{margin:12px 14px}
.leaflet-popup-content-wrapper{background:var(--parch); color:var(--ink); border:1px solid var(--parch-edge); border-radius:10px; box-shadow:0 8px 26px var(--shadow)}
.leaflet-popup-tip{background:var(--parch); border:1px solid var(--parch-edge); box-shadow:none}
.leaflet-popup-close-button{color:var(--ink-soft)!important}
.leaflet-popup-close-button:hover{color:var(--caramel)!important}
/* cluster bubbles, themed to the croissant palette */
.marker-cluster{background:transparent}
.marker-cluster div{
  background:var(--gold2); color:#3c2414; font-family:"Nunito Sans",sans-serif; font-weight:700;
  border:2px solid var(--gold-edge); box-shadow:0 2px 6px rgba(0,0,0,.35)}
html[data-theme="dark"] .marker-cluster div{background:var(--caramel); color:#241712; border-color:#8a5a25}

/* ============================================================
   Admin
   ============================================================ */
.admin{max-width:760px; margin:-64px auto 60px; position:relative; z-index:1;
  background-color:var(--parch); background-image:url('ui/kraft-paper-bg.jpg'); background-size:100% auto;
  border:1px solid var(--parch-edge); border-radius:6px; box-shadow:0 4px 14px -2px var(--shadow),0 26px 60px -10px var(--shadow);
  padding:88px clamp(18px,4vw,44px) 40px}   /* generous top padding so the torn header edge never overlaps the button bar */
html[data-theme="dark"] .admin{background-image:url('ui/kraft-paper-bg-dark.jpg')}
.admin h1,.admin h2{font-family:"EB Garamond",Georgia,serif; color:var(--choc-deep); margin:0 0 14px}
.admin h1{font-size:26px}
.admin .bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.admin .bar .spacer{flex:1 1 auto}
.field{margin:0 0 16px}
.field label{display:block; font-weight:700; color:var(--choc-deep); margin-bottom:5px; font-size:14px}
.field .hint{font-weight:400; color:var(--ink-soft); font-size:12px}
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=password],.field select,.field textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--pol); border:1px solid var(--parch-edge); border-radius:20px 20px 10px 10px; padding:9px 14px; outline:none}
.field textarea{min-height:120px; resize:vertical; line-height:1.5; border-radius:18px 18px 10px 10px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--caramel)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{background:#2c2016; color:var(--ink); border-color:#5c4630}
.row2{display:flex; gap:16px; flex-wrap:wrap}
.row2 > *{flex:1 1 200px}
.btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:inherit; font-weight:700; font-size:15px;
  border:none; border-radius:20px 20px 10px 10px; padding:10px 20px; background:var(--gold2); color:#3c2414; text-decoration:none;
  box-shadow:0 2px 6px var(--shadow); transition:transform .12s, filter .12s}
.btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.btn.secondary{background:var(--pol); color:var(--choc-deep); border:1px solid var(--parch-edge); box-shadow:none}
.btn.danger{background:#a23b22; color:#fff}
html[data-theme="dark"] .btn{color:#f5e6c8}                  /* light text on the dark gold button */
html[data-theme="dark"] .btn.secondary{background:#2c2016; color:var(--choc-deep)}
html[data-theme="dark"] .btn.danger{color:#fff}
.rate-pick{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.rate-pick .star{cursor:pointer; width:34px; height:34px; opacity:.30; transition:opacity .12s, transform .12s; background:none; border:none; padding:0}
.rate-pick .star img{width:100%; height:100%; object-fit:contain; display:block}
.rate-pick .star.on{opacity:1}
.rate-pick .star:hover{transform:scale(1.12)}
.adm-list{list-style:none; margin:0; padding:0}
.adm-list li{display:flex; align-items:center; gap:14px; padding:10px 6px; border-bottom:1px dashed var(--divider)}
.adm-list li img{width:46px; height:46px; object-fit:cover; border-radius:4px; flex:0 0 auto; background:var(--marble2)}
.adm-list .who{flex:1 1 auto; min-width:0}
.adm-list .who b{color:var(--choc-deep); font-family:"EB Garamond",Georgia,serif}
.adm-list .who small{display:block; color:var(--ink-soft)}
.adm-list .acts{display:flex; gap:8px; flex:0 0 auto}
.adm-list .acts a{font-size:13px; font-weight:700; text-decoration:none}
.notice{padding:11px 16px; border-radius:8px; margin:0 0 18px; font-size:14px}
.notice.ok{background:rgba(120,170,90,.20); color:#3c5a22; border:1px solid rgba(120,170,90,.5)}
.notice.err{background:rgba(190,70,40,.16); color:#8a2e16; border:1px solid rgba(190,70,40,.5)}
html[data-theme="dark"] .notice.ok{color:#bfe39a} html[data-theme="dark"] .notice.err{color:#f3b29a}
.del-confirm{display:flex; gap:14px; align-items:center; padding:10px 0}
.del-confirm img{width:80px; height:80px; object-fit:cover; border-radius:6px; flex:0 0 auto; background:var(--marble2)}
.del-confirm .name{font-family:"EB Garamond",Georgia,serif; font-size:20px; color:var(--choc-deep)}
.miniphoto{display:block; max-width:200px; border:3px solid var(--caramel); border-radius:3px; margin-top:8px}
#pickmap{height:300px; border-radius:8px; margin-top:8px; border:1px solid var(--parch-edge); background:var(--marble2)}
.login-wrap{max-width:380px; margin:0 auto}

/* ============================================================
   Responsive — iPhone first
   ============================================================ */
@media (max-width:700px){
  .site-header{min-height:140px; padding:14px 16px 30px; padding-top:calc(14px + env(safe-area-inset-top, 0px))}
  .brand{gap:14px; transform:none}
  .brand a.brand-link{gap:14px}
  .brand .logo{width:120px; height:74px}
  .brand-text{align-items:center; text-align:center}
  .wordmark{line-height:.72}                 /* tighten the gap between the two Corinthia lines */
  .wordmark .paren{margin-left:0}            /* it's on its own line on mobile */
  .wordmark .brk{display:inline}
  .feed{padding:6px 16px 0}
  /* keep the filter bar to a single compact row */
  .toolbar{gap:8px; flex-wrap:nowrap; padding:10px 14px}
  .toolbar input{flex:1 1 auto; min-width:0; max-width:none}
  .toolbar select{flex:0 0 auto; padding:7px 8px}
  .toolbar .navlink{flex:0 0 auto}
  .toolbar .count{display:none}
  .stick-croissant{display:none}
  .sheet{border-radius:6px}
  /* stats page */
  .stats{padding:12px 16px 8px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr; gap:10px}
  .cols > div:nth-child(2){text-align:right; margin-top:6px}   /* Wall of Shame to the right for separation */
  .bar-row{grid-template-columns:90px 1fr auto; font-size:13px; gap:8px}
  .toolbar--links{gap:22px}
}
@media (max-width:560px){
  /* photo below the text, smaller with an indent on both sides, natural aspect ratio (no crop) */
  .content{display:flex; flex-direction:column}
  .content p{order:1; margin-bottom:0}
  .photo{order:2; width:70%; align-self:center}
  .photo.left,.photo.right{float:none; margin:16px auto 2px; transform:none}
  .photo img{height:auto}
  .rating img.cr{width:28px; height:28px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}