@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,200;9..144,300;9..144,400&family=Inter:wght@400;500&display=swap");

/* ============================================================
   Quiet gallery, not an app. Flat cream ground, one muted red,
   type doing the work, photographs treated like prints.
   Everything visual lives in this file.
   ============================================================ */

:root{
  --paper:#ece9e3;
  --paper-2:#e2e0dd;
  --ink:#1b1c22;
  --ink-soft:#807f86;
  --hair:#c6c4c2;
  --accent:#b8395a;

  --display:"Fraunces", Georgia, serif;
  --text:"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --ratio:4/5;
  --star:polygon(50% 0%, 61.8% 34.5%, 98% 34.5%, 69% 56.4%, 79.6% 90.5%, 50% 69.5%, 20.4% 90.5%, 31% 56.4%, 2% 34.5%, 38.2% 34.5%);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  display:flex;flex-direction:column;              /* fixed frame: art, masthead, then the panes scroll inside */
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button,input,select,textarea{font:inherit;color:inherit}

/* a whisper of tooth in the paper, nothing more */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  mix-blend-mode:multiply;
}
#defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- masthead ---------- */
#bar{
  position:relative;z-index:600;flex:none;background:var(--paper);
  padding:calc(env(safe-area-inset-top) + 14px) 20px 10px;
  border-bottom:1px solid var(--hair);
}
#bar .row{display:flex;align-items:center;gap:14px}

/* the painting, whole, hung beside the title like a plate in a catalogue */
#plate{
  width:78px;height:auto;display:block;flex:none;
  border:1px solid var(--ink);background:var(--paper-2);
}
#bar h1{
  margin:0;font-family:var(--display);font-weight:200;font-size:27px;
  line-height:1.05;letter-spacing:-.02em;width:auto;
}
#bar h1 svg{display:none}
#bar h1 small{
  display:block;font-family:var(--text);font-weight:500;font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;
  white-space:nowrap;
}
.grow{flex:1}

.ghost{
  background:none;border:none;border-bottom:1px solid var(--ink);border-radius:0;
  padding:2px 1px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;
}
.ghost:active{color:var(--accent);border-color:var(--accent)}

/* ---------- filters ---------- */
.chips{display:flex;gap:16px;overflow-x:auto;padding-top:10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.subs{padding-top:8px}
.chips.subs:empty{display:none}
.chips.flags{padding-top:8px;gap:14px}
.tally{padding-top:8px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

.chip{
  white-space:nowrap;background:none;border:none;padding:0 0 3px;
  font-family:var(--display);font-weight:300;font-size:15px;color:var(--ink-soft);
  border-bottom:1px solid transparent;
}
.chip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.chips.subs .chip,.chips.flags .chip{
  font-family:var(--text);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.chips.flags .chip[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- map ---------- */
main{position:relative;flex:1;min-height:0}
#map{position:absolute;inset:0;background:var(--paper)}
.leaflet-container{font-family:var(--text)}
.tiles{filter:grayscale(1) brightness(1.06) contrast(.85) opacity(.5)}

.pin{display:flex;flex-direction:column;align-items:center}
.pin i{
  display:block;width:40px;height:40px;border-radius:50%;
  background:var(--paper-2) center/cover no-repeat;
  box-shadow:0 0 0 1px var(--hair);
  filter:saturate(.72) contrast(.95);
}
.pin em{
  font-family:var(--display);font-style:normal;font-weight:300;font-size:11px;
  line-height:1.15;margin-top:5px;max-width:92px;text-align:center;color:var(--ink);
  text-shadow:0 1px 0 var(--paper),0 -1px 0 var(--paper),1px 0 0 var(--paper),-1px 0 0 var(--paper);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pin.must i{box-shadow:0 0 0 2px var(--accent);filter:saturate(.85)}
.pin.must em{color:var(--accent)}
.pin.done i{filter:grayscale(1) opacity(.4)}
.pin.done em{color:var(--ink-soft)}

/* a place, before you are close enough for photos: same circle as a cluster */
.tick-pin{
  width:30px;height:30px;border-radius:50%;
  background:var(--paper);box-shadow:0 0 0 1px var(--ink);
}
.tick-pin.must{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tick-pin.done{background:var(--paper);box-shadow:0 0 0 1px var(--hair)}
.tick-pin.done{background:none;box-shadow:0 0 0 1px var(--ink-soft);opacity:.4}

.clump{
  width:30px;height:30px;border-radius:50%;
  background:var(--paper);box-shadow:0 0 0 1px var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.clump b{font-family:var(--display);font-weight:300;font-size:14px;color:var(--ink)}
.marker-cluster{background:none}
/* zoom buttons, since the wheel no longer zooms */
.leaflet-bottom .leaflet-control-zoom{border:none;box-shadow:none;margin:0 14px 84px 0}
.leaflet-control-zoom a{
  width:34px;height:34px;line-height:32px;background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);font-family:var(--display);font-weight:300;font-size:18px;
  border-radius:0;margin-bottom:-1px;
}
.leaflet-control-zoom a:hover{background:var(--paper-2);color:var(--ink)}

.me{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--paper)}
/* the apartment: a marker you can actually tap */
.home{display:flex;flex-direction:column;align-items:center;gap:3px}
/* the cat, cut as a star, the one thing on the map that is not a circle */
.home i{
  position:relative;display:block;width:46px;height:46px;
  background:var(--ink);clip-path:var(--star);
  filter:drop-shadow(0 1px 0 var(--paper)) drop-shadow(0 -1px 0 var(--paper))
         drop-shadow(1px 0 0 var(--paper)) drop-shadow(-1px 0 0 var(--paper));
}
.home i::after{
  content:"";position:absolute;inset:2px;
  background:url("home.png") center/cover no-repeat, var(--paper-2);
  clip-path:var(--star);
}
.home em{
  font-family:var(--display);font-style:normal;font-weight:300;font-size:11px;color:var(--ink);
  text-shadow:0 1px 0 var(--paper),0 -1px 0 var(--paper),1px 0 0 var(--paper),-1px 0 0 var(--paper);
}
.homecat{
  margin:20px 0 2px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}

/* the one she just tapped in the index */
.pin.focus i{box-shadow:0 0 0 3px var(--accent);filter:none}
.pin.focus i.blank{background:var(--accent)}
.pin.focus em{
  color:var(--ink);font-size:13px;max-width:130px;
  background:var(--paper);padding:2px 5px;box-shadow:0 0 0 1px var(--accent);
}
.pin.focus{animation:land .35s cubic-bezier(.2,.7,.3,1)}
@keyframes land{from{transform:translateY(-8px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- index ---------- */
#list{
  position:absolute;inset:0;z-index:500;overflow-y:auto;background:var(--paper);
  padding:6px 20px calc(100px + env(safe-area-inset-bottom));
}
.item{
  display:grid;grid-template-columns:1fr 84px;gap:20px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--hair);
}
.item img{
  grid-column:2;grid-row:1;width:84px;aspect-ratio:var(--ratio);object-fit:cover;
  background:var(--paper-2);display:block;filter:saturate(.78) contrast(.96);
}
.item > div{grid-column:1;grid-row:1}
.item h3{
  margin:0 0 6px;font-family:var(--display);font-weight:300;font-size:25px;
  line-height:1.05;letter-spacing:-.02em;
}
.item .meta{color:var(--ink-soft);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.item .why{font-size:14px;margin-top:10px;color:#40392f;max-width:44ch}
.item.done h3{color:var(--ink-soft)}
.item.done img{filter:grayscale(1) opacity(.5)}
.head{display:flex;align-items:flex-start;gap:12px}
.tick{
  margin-left:auto;background:none;border:none;border-bottom:1px solid var(--hair);
  width:auto;height:auto;border-radius:0;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);padding:0 0 2px;flex:none;
}
.tick[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}

/* ---------- the place itself ---------- */
#sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:800;max-height:90%;
  overflow-y:auto;background:var(--paper);border-top:1px solid var(--ink);
  padding:20px 20px calc(28px + env(safe-area-inset-bottom));
  animation:rise .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
#sheetClose{position:absolute;right:20px;top:20px}
#sheet h2{
  font-family:var(--display);font-weight:200;font-size:42px;line-height:.98;
  letter-spacing:-.03em;margin:14px 0 8px;max-width:11ch;
}
#sheet .meta{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
#sheet .shots{display:flex;gap:10px;overflow-x:auto;margin:22px -20px;padding:0 20px;scrollbar-width:none}
#sheet .shots::-webkit-scrollbar{display:none}
#sheet .shots img{
  height:300px;aspect-ratio:var(--ratio);object-fit:cover;flex:none;
  background:var(--paper-2);filter:saturate(.8) contrast(.96);
}
#sheet p{font-size:15px;margin:12px 0;max-width:46ch;color:#40392f}
#sheet .actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
#sheet a.btn,#sheet button.btn{
  border:none;border-bottom:1px solid var(--ink);background:none;border-radius:0;
  padding:2px 1px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;font-family:var(--text);
}
#sheet a.btn:active,#sheet button.btn:active{color:var(--accent);border-color:var(--accent)}
#sheet .src{color:var(--ink-soft);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:24px}

/* editing it, in the same sheet */
.edit{margin-top:20px}
.edit label{display:block;margin:18px 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.edit input[type="text"],.edit input:not([type]),.edit textarea,.edit select{
  display:block;width:100%;margin-top:8px;padding:9px 0;
  border:none;border-bottom:1px solid var(--hair);background:none;
  color:var(--ink);font-size:16px;font-family:var(--display);font-weight:300;border-radius:0;
}
.edit input:focus,.edit textarea:focus,.edit select:focus{outline:none;border-bottom-color:var(--ink)}
.edit label.check{display:flex;align-items:center;gap:10px;color:var(--ink)}
.edit label.check input{width:auto;margin:0}
#editSave{
  width:100%;margin-top:22px;padding:15px;border:none;border-radius:0;
  background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-family:var(--text);
}
#editCancel{display:block;margin:16px auto 0}
#editMsg{color:var(--accent);font-size:10px;letter-spacing:.18em;text-transform:uppercase;min-height:16px;text-align:center}

/* ---------- adding ---------- */
#addBtn{
  position:fixed;z-index:700;right:20px;bottom:calc(22px + env(safe-area-inset-bottom));
  background:var(--ink);color:var(--paper);border:none;border-radius:0;
  padding:13px 20px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--text);
}
#addForm{
  position:fixed;inset:0;z-index:900;background:var(--paper);
  padding:calc(env(safe-area-inset-top) + 20px) 20px 40px;overflow-y:auto;
}
#addForm h2{font-family:var(--display);font-weight:200;font-size:34px;margin:16px 0 4px;letter-spacing:-.02em}
#addForm label{display:block;margin:18px 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
#addForm input,#addForm textarea,#addForm select{
  display:block;width:100%;margin-top:8px;padding:9px 0;
  border:none;border-bottom:1px solid var(--hair);background:none;
  color:var(--ink);font-size:16px;font-family:var(--display);font-weight:300;border-radius:0;
}
#addForm input:focus,#addForm textarea:focus{outline:none;border-bottom-color:var(--ink)}
#addForm .file input{padding:8px 0;border:none}
#addSave{
  width:100%;margin-top:26px;padding:15px;border:none;border-radius:0;
  background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-family:var(--text);
}
#matches{display:flex;flex-direction:column;gap:2px}
#matches button{
  text-align:left;background:none;border:none;border-bottom:1px solid var(--hair);
  padding:10px 0;font-size:14px;font-family:var(--display);font-weight:300;
}
#addMsg{color:var(--ink-soft);font-size:10px;letter-spacing:.18em;text-transform:uppercase;min-height:16px}

@media (min-width:900px){
  /* one column of paper on the left holding the masthead and the index,
     the map running the full height beside it. No empty band anywhere. */
  #plate{width:84px}
  #bar{
    width:430px;padding:28px 28px 14px;
    border-right:1px solid var(--hair);
  }
  #bar h1{font-size:25px}
  .grow{display:none}
  #nearBtn{position:absolute;right:28px;bottom:16px}
  #viewBtn{display:none}

  #list{
    display:block !important;               /* the List button stops mattering on a laptop */
    right:auto;width:430px;border-right:1px solid var(--hair);
    padding:0 28px calc(60px + env(safe-area-inset-bottom));
  }
  #map{position:fixed;top:0;left:430px;right:0;bottom:0}
  #plan{right:auto;width:430px;border-right:1px solid var(--hair);padding:10px 28px 60px}
  #picker{left:auto;width:460px;border-left:1px solid var(--ink)}
  #addBtn{right:auto;left:28px;bottom:24px}   /* with the index, off the map's zoom buttons */
  .leaflet-bottom .leaflet-control-zoom{margin:0 14px 24px 0}
  .item{grid-template-columns:1fr 96px;padding:20px 0}
  .item img{width:96px}
  .item h3{font-size:22px}

  #sheet{
    left:auto;right:0;top:0;bottom:0;width:460px;max-height:none;
    border-left:1px solid var(--ink);border-top:none;
    animation:slide .3s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
  #sheet h2{font-size:46px}
  #viewBtn{display:none}
}

.edit .danger{display:block;margin:14px auto 0;border-bottom-color:var(--accent);color:var(--accent)}


/* ---------- the plan ---------- */
#plan{
  position:absolute;inset:0;z-index:500;overflow-y:auto;background:var(--paper);
  padding:10px 20px calc(60px + env(safe-area-inset-bottom));
}
.planhint{font-size:13px;color:var(--ink-soft);max-width:52ch;margin:8px 0 18px;line-height:1.5}
.planhint b{color:var(--ink);font-weight:500}
#planMsg{color:var(--accent);font-size:10px;letter-spacing:.18em;text-transform:uppercase;min-height:14px;margin:0}

.day{border-top:1px solid var(--ink);padding:18px 0 26px}
.dayhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.dayhead h2{margin:0;font-family:var(--display);font-weight:200;font-size:30px;letter-spacing:-.02em}
.daylabel{
  flex:1;min-width:160px;border:none;border-bottom:1px solid transparent;background:none;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);padding:2px 0;
}
.daylabel:focus{outline:none;border-bottom-color:var(--ink);color:var(--ink)}

.slot{margin-top:14px}
.slot h3{
  margin:0 0 6px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}
.slot ol{list-style:none;margin:0;padding:0}
.slot .empty{margin:0;font-size:13px;color:var(--hair);font-style:italic}

.item-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--hair);
}
.item-row .who{flex:1;min-width:0}
.item-row .name{
  display:block;text-align:left;background:none;border:none;padding:0;
  font-family:var(--display);font-weight:300;font-size:19px;line-height:1.15;color:var(--ink);
}
.item-row .meta{display:block;margin-top:3px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.item-row.been .name{color:var(--ink-soft);text-decoration:line-through}
.rowbtns{display:flex;align-items:center;gap:4px;flex:none}
.mini{
  min-width:34px;height:34px;border:1px solid var(--hair);background:none;border-radius:0;
  color:var(--ink-soft);font-size:14px;line-height:1;padding:0 4px;
}
.mini.move{min-width:62px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:0 4px}
.mini.kill{color:var(--accent);border-color:var(--accent)}

.add{
  margin:10px 10px 0 0;background:none;border:none;border-bottom:1px solid var(--ink);border-radius:0;
  padding:2px 1px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}
.add.note{border-bottom-color:var(--hair);color:var(--ink-soft)}

.near{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.near > span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.chipadd{
  background:none;border:1px solid var(--hair);border-radius:0;padding:7px 11px;
  font-family:var(--display);font-weight:300;font-size:14px;color:var(--ink);
}
.chipadd em{font-style:normal;font-family:var(--text);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

.pickday{padding:12px 0;border-bottom:1px solid var(--hair)}
.pickday b{font-family:var(--display);font-weight:300;font-size:19px}
.pickday span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-left:8px}
.pickday div{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}

/* ---------- choosing a place for a day ---------- */
#picker{
  position:fixed;inset:0;z-index:900;background:var(--paper);overflow-y:auto;
  padding:calc(env(safe-area-inset-top) + 14px) 20px calc(30px + env(safe-area-inset-bottom));
}
.picker-bar{display:flex;gap:14px;align-items:center}
#pickSearch{
  flex:1;border:none;border-bottom:1px solid var(--ink);background:none;border-radius:0;
  padding:9px 0;font-family:var(--display);font-weight:300;font-size:20px;color:var(--ink);
}
#pickSearch:focus{outline:none}
#pickWhere{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 4px}
.pickrow{
  display:block;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--hair);padding:12px 0;border-radius:0;
}
.pickrow .pn{display:block;font-family:var(--display);font-weight:300;font-size:20px;color:var(--ink)}
.pickrow .pn .must{font-style:normal;font-family:var(--text);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.pickrow .pm{display:block;margin-top:3px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- what is near what ---------- */
.areas{border-top:1px solid var(--ink);padding:16px 0 4px;margin-bottom:6px}
.areas h2{margin:0 0 4px;font-family:var(--display);font-weight:200;font-size:26px;letter-spacing:-.02em}
.area{border-bottom:1px solid var(--hair)}
.areahead{
  display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;
  background:none;border:none;border-radius:0;padding:12px 0;
}
.areahead b{font-family:var(--display);font-weight:300;font-size:19px;color:var(--ink)}
.areahead span{margin-left:auto;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.areahead.open b{color:var(--accent)}
.areabody{padding:0 0 12px}
.arow{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-radius:0;padding:7px 0 7px 14px;
}
.arow span{font-family:var(--display);font-weight:300;font-size:16px;color:var(--ink)}
.arow em{margin-left:auto;font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

.shape{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 4px}
.shape span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.shape .add{margin:0}