:root{
  --cream:#faf6f2; --paper:#fffdfb; --ink:#1b1620; --plum:#733863; --crimson:#8c0327;
  --line:#e3d9d2; --muted:#6f6470;
  --display:"Newsreader",Georgia,serif; --body:"Archivo",system-ui,sans-serif; --mono:"Fragment Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
/* `.form input{display:block}` below outranks the browser's own display:none for the
   hidden attribute, so a hidden input still painted. Anything hidden stays hidden. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--cream); color:var(--ink); font-family:var(--body);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.boot{padding:48px;font-family:var(--mono);color:var(--muted);font-size:13px}

.shell{
  max-width:1040px; margin:0 auto; padding:28px 20px 64px;
  display:grid; grid-template-columns:300px minmax(0,1fr); gap:0;
  align-items:start;
}
.rail{
  border:1px solid var(--line); border-right:0; background:var(--paper);
  padding:22px 22px 20px; min-height:520px;
}
.who{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.mark{
  font-family:var(--display); font-size:15px; letter-spacing:.02em; color:var(--paper);
  background:var(--plum); width:34px;height:34px;display:grid;place-items:center;flex:none;
}
.owner{margin:0;font-weight:600;font-size:14px}
.slug{margin:1px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all}
.rail h1{
  font-family:var(--display); font-weight:600; font-size:30px; line-height:1.1;
  margin:0 0 10px; letter-spacing:-.01em;
}
.blurb{margin:0 0 20px;color:var(--muted);font-size:14px}
.facts{margin:0;border-top:1px solid var(--line)}
.facts>div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.facts dt{flex:none;width:74px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.facts dd{margin:0;font-size:14px}
.fineprint{margin:18px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

.pick,.form,.done{border:1px solid var(--line);background:var(--paper);padding:22px 24px;min-height:520px}
.pickhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.pickhead h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0}
.tzswitch{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}

/* The RESCHEDULE page's day list. The booking page grew a month grid and stopped using
   these; the manage page still builds .day/.dayname/.slots in manage.js, so deleting them
   with the rest silently unstyled the one screen a guest reaches from a real invite. */
.days{display:flex;flex-direction:column;gap:2px}
.day{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.day:first-child{border-top:0}
.dayname{font-family:var(--mono);font-size:12px;color:var(--plum);padding-top:6px;text-transform:uppercase;letter-spacing:.04em}
.slots{display:flex;flex-wrap:wrap;gap:6px}

/* THE PICKER. It used to be every open time in the next three weeks printed down the
   page, and it looked like a receipt. Two problems, and the second is the one that made
   the design wrong rather than merely ugly: it could not go past its own scroll. Booking
   into November means paging months, and a list has no concept of a month.

   So: a month grid, one dot under a day with a little room and three under a day with
   plenty, and the times for whichever day you land on beside it. The dots are the whole
   trick -- a guest reads a whole month for openness in one glance, which is the question
   they actually have, and never scrolls past a day they would have taken. */
.picker{display:grid;grid-template-columns:minmax(0,1fr) 206px;gap:24px;align-items:start}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.calmonth{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em}
.calnav{
  width:30px;height:30px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font:400 16px/1 var(--body);
}
.calnav:hover:not([disabled]){border-color:var(--plum);color:var(--plum)}
/* Greyed, not hidden. An arrow that disappears reads as a rendering bug; one that is
   visibly spent reads as "this is as far as she books". */
.calnav[disabled]{opacity:.25;cursor:default}
.caldow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.caldow span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-align:center;padding:3px 0}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cell{
  position:relative;aspect-ratio:1/1;min-height:38px;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:1px solid transparent;cursor:pointer;
  font:400 14px var(--body);color:var(--ink);
  transition:background .08s ease,border-color .08s ease,color .08s ease;
}
.cell.pad{visibility:hidden;cursor:default}
.cell.off{color:var(--muted);opacity:.32;cursor:default}
.cell:not(.off):not(.pad):hover{border-color:var(--plum)}
.cell.on{background:var(--plum);border-color:var(--plum);color:var(--paper)}
/* A day with something already chosen on it, while picking a run of dates. */
.cell.chosen{border-color:var(--crimson);color:var(--crimson);font-weight:600}
.cell.chosen.on{background:var(--crimson);border-color:var(--crimson);color:#fff}
.cell.today .num{box-shadow:0 1px 0 currentColor}
/* Struck through, and the name is in the tooltip. A blank Thursday in late November is a
   guest wondering whether the page is broken; "Thanksgiving" is a thing they already know. */
.cell.hol .num{text-decoration:line-through;text-decoration-thickness:1px}
.dots{display:flex;gap:3px;height:4px;align-items:center}
.dot{width:4px;height:4px;border-radius:50%;background:var(--plum)}
.cell.on .dot,.cell.chosen.on .dot{background:var(--paper)}
.cell.chosen .dot{background:var(--crimson)}
.calclosed{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

.times{border-left:1px solid var(--line);padding-left:20px;min-height:288px}
.timeshead{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--plum);margin:0 0 11px}
.timeslist{display:flex;flex-direction:column;gap:5px;max-height:330px;overflow-y:auto}
.timeslist .slot{width:100%;text-align:center}
.timesnone{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.timesnone button{background:none;border:0;padding:0;font:inherit;color:var(--plum);cursor:pointer;text-decoration:underline}

/* Picking a run of dates by hand: the count and the way out, pinned above the grid so it
   is never scrolled off while someone is three clicks into choosing. */
.manybar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:10px 12px;background:var(--cream);border-left:3px solid var(--crimson)}
.manybar span{font-size:13px;color:var(--ink)}
.manyacts{display:flex;align-items:center;gap:12px;flex:none}
#redates{margin-top:10px}
.manydone{background:var(--plum);color:var(--paper);border:0;padding:8px 12px;font:600 13px var(--body);cursor:pointer;flex:none}
.manydone:hover{background:var(--crimson)}
.manydone[disabled]{opacity:.4;cursor:default}

.slot{
  font-family:var(--mono); font-size:13px; padding:7px 9px; cursor:pointer;
  background:var(--cream); border:1px solid var(--line); color:var(--ink);
  transition:background .08s ease,border-color .08s ease,color .08s ease;
}
.slot:hover{background:var(--plum);border-color:var(--plum);color:var(--paper)}
.slot.on{background:var(--crimson);border-color:var(--crimson);color:#fff}
.empty{color:var(--muted);font-size:14px;margin:22px 0 0}
.away{font-size:14px;line-height:1.5;color:var(--ink);margin:0 0 18px;padding:10px 12px;background:var(--cream);border-left:3px solid var(--plum)}
.away button{background:none;border:0;padding:0;font:inherit;color:var(--plum);cursor:pointer;text-decoration:underline}

.form label{display:block;margin:0 0 14px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.form input,.form textarea{
  display:block;width:100%;margin-top:6px;padding:10px 11px;font:400 15px/1.4 var(--body);
  color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:0;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--plum);outline-offset:-2px;background:var(--paper)}
.form textarea{resize:vertical}
.chosen{font-family:var(--mono);font-size:14px;color:var(--crimson);margin:14px 0 18px;padding:10px 12px;background:var(--cream);border-left:3px solid var(--crimson)}
.back{background:none;border:0;padding:0;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline}
.go{
  margin-top:4px;width:100%;padding:13px;background:var(--plum);color:var(--paper);
  border:0;font:600 15px var(--body);cursor:pointer;letter-spacing:.01em;
}
.go:hover{background:var(--crimson)}
.go[disabled]{opacity:.5;cursor:wait}
.err{margin:12px 0 0;color:var(--crimson);font-size:13px}

.done .tick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);margin:0 0 8px}
.done h2{font-family:var(--display);font-weight:600;font-size:28px;margin:0 0 8px;line-height:1.15}
.done p{margin:0 0 6px;color:var(--muted);font-size:14px}
.donebox{margin:20px 0 16px;padding:12px 13px;background:var(--cream);border-left:3px solid var(--plum)}
.donebox p{margin:0 0 4px;color:var(--ink)}
.donebox strong{font-family:var(--mono);font-size:13px;word-break:break-all}
.donebox .fineprint{margin:6px 0 0}
.donebox a{color:var(--plum)}
.managebtn{
  display:block;text-align:center;padding:12px;margin:0 0 28px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font:500 14px var(--body);text-decoration:none;
}
.managebtn:hover{border-color:var(--plum);color:var(--plum)}
.follow{border-top:1px solid var(--line);padding-top:16px}
.followlab{margin:0 0 10px !important;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.social{display:flex;gap:8px}
.social a{
  width:38px;height:38px;display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--line);background:var(--cream);
  transition:background .08s ease,border-color .08s ease,color .08s ease;
}
.social a:hover{background:var(--plum);border-color:var(--plum);color:var(--paper)}
.social svg{width:17px;height:17px}
.face{width:42px;height:42px;flex:none;object-fit:cover;border-radius:50%;display:block}

@media (max-width:760px){
  .shell{grid-template-columns:1fr;padding:16px 14px 48px}
  .rail{border-right:1px solid var(--line);border-bottom:0;min-height:0}
  .pick,.form,.done{min-height:0}
  /* Calendar over times, not beside them. A 206px column of times next to a squeezed
     seven-column grid is unusable on a phone, and the phone is where a link in a DM opens. */
  .day{grid-template-columns:1fr;gap:6px}
  .dayname{padding-top:0}
  .picker{grid-template-columns:1fr;gap:18px}
  .times{border-left:0;border-top:1px solid var(--line);padding:16px 0 0;min-height:0}
  .timeslist{max-height:none}
  .cell{min-height:44px}
  /* Paging months is the main navigation now, and these were the smallest things on the
     page at 30px — under the 44px floor every other control here already clears. A thumb
     misses them. The glyph stays the same size; only the target grows. */
  .calnav{width:44px;height:44px;font-size:18px}
  .calhead{margin-bottom:10px}
  /* thumbs, not cursors: 44px is the floor a time chip has to clear on a phone */
  .slot{min-height:44px;padding:11px 12px;font-size:14px}
  .go{padding:15px}
  .form input,.form textarea{font-size:16px} /* under 16px iOS zooms the whole page on focus */
}

.fmt{margin:0 0 16px}
.fmtlab{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:7px}
.fmtrow{display:flex;gap:0}
.fmtbtn{
  flex:1;padding:11px 10px;font:500 14px var(--body);cursor:pointer;
  background:var(--cream);border:1px solid var(--line);color:var(--muted);margin-left:-1px;
}
.fmtbtn:first-child{margin-left:0}
.fmtbtn.on{background:var(--plum);border-color:var(--plum);color:var(--paper);font-weight:600}
.fmthint{margin:7px 0 0;font-size:12px;color:var(--muted);min-height:1em}
.opt{text-transform:none;letter-spacing:0;font-size:11px;opacity:.75}
.req{text-transform:none;letter-spacing:0;font-size:11px;color:var(--crimson)}

/* Venue picker: only shown for an in-person slot, and only when the link names a spot. */
.wherepick{margin:0 0 16px;padding:12px 13px;background:var(--cream);border:1px solid var(--line)}
.wherepick .fmtlab{margin-bottom:9px}
.form label.wopt{
  display:flex;gap:9px;align-items:flex-start;margin:0 0 7px;
  text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);cursor:pointer;
}
.form label.wopt input[type=radio]{
  display:inline;width:auto;margin:3px 0 0;padding:0;flex:none;accent-color:var(--plum);
}
.wherepick .fmthint{margin-top:9px}

/* honeypot: never shown to a human, bots fill it and get quietly dropped */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* A standing booking, and the manage page's list of which meeting you meant. Deliberately
   plain: it is a list of dates, and a date list that tries to be a component stops being
   readable at six rows. */
.serieslist { list-style: none; margin: 8px 0 0; padding: 0; }
.serieslist li { font-family: 'Fragment Mono', monospace; font-size: 13px; padding: 3px 0; }
.serieslist li::before { content: '·'; margin-right: 8px; opacity: .45; }
.pickone { display: grid; gap: 8px; margin-bottom: 18px; }
.pickone .slot { text-align: left; width: 100%; }
.pickone .slot.on { border-color: currentColor; font-weight: 600; }

/* The recurrence builder: a sentence with inputs in it, rather than a form. "Every [5]
   [weeks]" reads as a thing a person is saying, and a labelled field per line does not. */
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: 14px; }
.inline input, .inline select {
  font: inherit; font-family: 'Fragment Mono', monospace; font-size: 13px;
  padding: 7px 9px; border: 1px solid rgba(0,0,0,.16); border-radius: 7px; background: #fff;
}
.inline input[type=number] { width: 68px; }

.serieslist .skipwhy { font-family: 'Archivo', system-ui, sans-serif; font-style: normal; font-size: 12px; opacity: .6; margin-left: 10px; }