/* Plenishing.us — the visual language.
 *
 * Trusted minimalism.  An old-world household catalogue, set by someone who knows what a
 * page is for.  Warm whites, charcoal, hairlines, generous air, one serif doing nearly all
 * the work.  No cards stacked on cards, no gradients, no gamification.
 *
 * Nothing is loaded from anywhere: no font service, no CDN, no library.  The type is a
 * system stack, ordered so the best available face wins — Iowan Old Style and Charter on
 * Apple, Constantia and Cambria on Windows, Georgia everywhere else.  All of them are
 * old-style text faces with real italics, which is the whole requirement.
 *
 *   --serif    everything a person reads
 *   --sans     small capitals: labels, counts, amounts, the machinery
 *
 * (If a licensed face is ever wanted, self-host the woff2 in /fonts, add one @font-face
 * block here, and put its name at the front of --serif.  Nothing else changes.)
 *
 * Order of this file:  tokens -> reset -> type -> chrome -> primitives -> pages -> forms
 *                      -> sheet -> motion -> responsive
 */

/* ================================================================ tokens */
:root {
  --paper:      #fbf9f5;   /* the page */
  --paper-2:    #ffffff;   /* raised: a photograph well, an input */
  --paper-3:    #f3efe8;   /* recessed: a band, a quiet panel */
  --ink:        #1c1a17;
  --ink-2:      #56504a;
  --ink-3:      #8c857a;
  --rule:       #e4ddd2;
  --rule-2:     #d0c6b6;

  --sienna:     #8a4b3c;   /* the one accent: actions, the wordmark, want */
  --sienna-2:   #a25f4e;
  --sienna-air: #f4e9e5;
  --green:      #3f6149;   /* plenished */
  --green-air:  #e6ede7;
  --gilt:       #8a6f31;   /* in heaven */
  --gilt-air:   #f2ecdd;

  --serif: 'Iowan Old Style', 'Charter', 'Bitstream Charter', Constantia, Cambria,
           'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
           Roboto, 'Helvetica Neue', Arial, sans-serif;

  --w-page: 1120px;
  --w-read: 660px;
  --pad: 22px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --lift: 0 1px 2px rgba(28, 26, 23, .05), 0 8px 30px rgba(28, 26, 23, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #16140f;
    --paper-2:    #1e1b16;
    --paper-3:    #100e0a;
    --ink:        #ece6da;
    --ink-2:      #b0a695;
    --ink-3:      #837b6c;
    --rule:       #2f2a22;
    --rule-2:     #453e33;

    --sienna:     #cd8874;
    --sienna-2:   #dd9b87;
    --sienna-air: #2b201b;
    --green:      #85ab8e;
    --green-air:  #1a2119;
    --gilt:       #c4a765;
    --gilt-air:   #241f13;
    --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 34px rgba(0, 0, 0, .38);
  }
}

/* ================================================================ reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--serif);
  font-variant-numeric: oldstyle-num;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* `hidden` has to win: several things below set display, which would otherwise beat the
   user-agent rule and leave a "closed" sheet sitting open on the page. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--sienna);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--sienna-air); color: var(--ink); }

/* ---------------------------------------------------------------- scrollbars
 * A scrollbar is part of the page, not the browser's business.  Thin, warm, and drawn from
 * the same hairline family as every rule in this design — visible when you need it, silent
 * when you do not.
 *
 * Two mechanisms, because the platforms disagree.  WebKit and Blink take the pseudo-elements
 * and give the nicer result (an inset, rounded thumb floating on the paper).  Firefox takes
 * the standard properties, so it gets those inside a support query — setting `scrollbar-color`
 * unconditionally would make Chrome ignore the pseudo-elements and we would lose the good
 * version everywhere. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border-radius: 999px;
  border: 3px solid transparent;   /* inset, so the thumb reads as a slim capsule */
  background-clip: padding-box;
  transition: background .16s var(--ease);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--sienna); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
}

.skip {
  position: fixed; top: -60px; left: 12px; z-index: 90;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}
.skip:focus { top: 12px; }

/* ================================================================ type */
.display {
  font: 300 clamp(34px, 6.4vw, 54px)/1.08 var(--serif);
  letter-spacing: -.018em;
}

.title {
  font: 400 clamp(25px, 3.6vw, 33px)/1.16 var(--serif);
  letter-spacing: -.012em;
}

.label {
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede { font-size: 18.5px; color: var(--ink-2); }
.quiet { color: var(--ink-3); }
.small { font-size: 14.5px; }
.num { font-family: var(--sans); font-size: 13px; letter-spacing: .01em; }

/* A section heading: small capitals with a hairline running to the far margin. */
.heading {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 20px;
}
.heading > span:first-child {
  font: 500 11px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.heading .rule { flex: 1; border-top: 1px solid var(--rule); }
.heading a { font: 400 14px/1 var(--serif); color: var(--ink-3); white-space: nowrap; }
.heading a:hover { color: var(--sienna); }

/* ================================================================ chrome */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  max-width: var(--w-page); margin: 0 auto;
  padding: 0 var(--pad);
  height: 62px;
  display: flex; align-items: center; gap: 26px;
}

/* The name is a domain, so it is set as one: lower case, letterspaced, never shouted. */
.wordmark {
  font: 500 14px/1 var(--sans);
  letter-spacing: .17em;
  color: var(--sienna);
  white-space: nowrap;
}
.wordmark:hover { color: var(--sienna-2); }

/* The line lives beside the name, on every page, instead of being repeated as a headline
   on the front one.  It is decoration for the eye, not information a screen reader needs
   twice, so it is aria-hidden in the markup. */
.tagline {
  font-size: 15px;
  color: var(--ink-3);
  white-space: nowrap;
  padding-left: 16px;
  margin-left: 2px;
  border-left: 1px solid var(--rule);
}

.nav-wide { display: flex; gap: 26px; margin-left: auto; }
.nav-wide a {
  font-size: 16px; color: var(--ink-2);
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.nav-wide a:hover { color: var(--ink); }
.nav-wide a[aria-current] { color: var(--ink); border-bottom-color: var(--sienna); }

.masthead-end { display: flex; align-items: center; gap: 6px; margin-left: 14px; }

.bell {
  position: relative; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--ink-2); border-radius: 50%;
}
.bell:hover { color: var(--ink); background: var(--paper-3); }
.bell-dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sienna); border: 1.5px solid var(--paper);
}

.me-chip {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper-3) center/cover no-repeat;
  border: 1px solid var(--rule-2);
  display: grid; place-items: center;
  font: 500 12px/1 var(--sans); color: var(--ink-2);
  letter-spacing: .04em;
}

/* the mobile bar: quiet, one-handed, out of the way */
.nav-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-bar a {
  flex: 1; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 500 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.nav-bar a[aria-current] { color: var(--sienna); }
.nav-mark { font-size: 17px; line-height: 1; font-family: var(--serif); }

/* ================================================================ layout */
.page {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 40px var(--pad) 96px;
}
.page.narrow { max-width: var(--w-read); }
.stack > * + * { margin-top: 44px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ================================================================ primitives */

/* --- the state chips: NEED / WANT / IN HEAVEN.  A dot and a word, nothing more. */
.state {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 10px/1 var(--sans);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.state::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.state.need   { color: var(--ink-2); }
.state.want   { color: var(--sienna); }
.state.heaven { color: var(--gilt); }
.state.heaven::before { border-radius: 0; transform: rotate(45deg); }
.state.unsaid { color: var(--rule-2); }
/* A state you may change: the same chip, with a dotted underline to say so. */
.state.settable {
  position: relative; z-index: 1;
  border-bottom: 1px dotted transparent;
  padding-bottom: 1px;
}
.state.settable:hover { border-bottom-color: currentColor; }

.plenished-mark {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 10px/1 var(--sans);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--green);
}
.plenished-mark::before { content: '\2713'; font-family: var(--serif); font-size: 13px; }

/* --- buttons.  One filled, one outlined, one plain. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px;
  font: 400 16px/1 var(--serif);
  letter-spacing: .012em;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--sienna); border-color: var(--sienna); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn.ghost { background: none; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { border-color: var(--ink); background: none; color: var(--ink); }

.btn.plain {
  background: none; border-color: transparent; color: var(--ink-2);
  padding: 0 6px; min-height: 38px;
}
.btn.plain:hover { color: var(--sienna); background: none; }

.btn.small { min-height: 36px; padding: 0 14px; font-size: 14.5px; }
.btn.wide { width: 100%; }

/* --- the three doors on the homepage (§13) */
.doors {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.doors a {
  padding: 26px 20px 24px;
  border-right: 1px solid var(--rule);
  transition: background .18s var(--ease);
}
.doors a:last-child { border-right: 0; }
.doors a:hover { background: var(--paper-3); }
.doors b { display: block; font: 400 21px/1.2 var(--serif); margin-bottom: 5px; }
.doors span { font-size: 14.5px; color: var(--ink-3); }

/* --- a person, in a row */
.person-row {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--rule);
  transition: background .16s var(--ease);
}
.person-row:hover { background: var(--paper-3); }
.person-row:last-child { border-bottom: 0; }

.face {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-3) center/cover no-repeat;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font: 500 14px/1 var(--sans); color: var(--ink-3); letter-spacing: .04em;
  overflow: hidden;
}
.face.lg { width: 92px; height: 92px; font-size: 26px; }
.face.sm { width: 30px; height: 30px; font-size: 11px; }

.person-row-body { min-width: 0; flex: 1; }
.person-row-body b { font: 400 19px/1.3 var(--serif); display: block; }
.person-row-body span { font-size: 14.5px; color: var(--ink-3); }
.person-row-counts { text-align: right; font-size: 14px; color: var(--ink-3); white-space: nowrap; }

/* --- a Plenishing, in the stream (§16).  Rows and hairlines, never cards. */
.plen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 22px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--rule);
  transition: background .16s var(--ease);
}
/* The title link is stretched over the whole entry, so the row is one target; the state
   control and the Plenish button sit above it. */
.plen-link::after { content: ''; position: absolute; inset: 0; }
.plen:hover { background: var(--paper-3); }
.plen-main { min-width: 0; }
.plen h3 {
  font: 400 21px/1.28 var(--serif);
  letter-spacing: -.008em;
  margin-bottom: 5px;
}
.plen.done h3 { color: var(--ink-2); }
.plen-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-bottom: 7px;
}
.plen-meta .end {
  margin-left: auto; position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 14px;
}
.plen-meta .end .act {
  font: 500 9.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: var(--sienna); white-space: nowrap;
  opacity: 0; transition: opacity .14s var(--ease), color .14s var(--ease);
}
.plen:hover .end .act, .plen:focus-within .end .act { opacity: 1; }
.plen-meta .end .act:hover { color: var(--ink); }
@media (hover: none) { .plen-meta .end .act { opacity: 1; } }
.plen-meta .end .who { font: 400 13.5px/1.2 var(--serif); color: var(--ink-2); white-space: nowrap; }
.plen-meta .end .who.you { color: var(--sienna); }
.plen-meta .end .tick { color: var(--green); font-size: 13px; }
.plen-meta .end .aside { font: 400 12.5px/1 var(--sans); color: var(--ink-3); }
.plen-desc { color: var(--ink-2); font-size: 16px; }
.plen-foot {
  margin-top: 9px;
  font-size: 13.5px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.plen-foot em { font-style: italic; }
.plen-thumb {
  grid-row: span 2;
  width: 92px; height: 92px;
  background: var(--paper-3) center/cover no-repeat;
  border: 1px solid var(--rule);
}
.plen-thumb.empty { display: none; }

/* the small progress line under a Plenishing people are pledging toward */
.pledge-line { margin-top: 11px; max-width: 320px; }
.pledge-bar { height: 2px; background: var(--rule); position: relative; }
.pledge-bar i { position: absolute; inset: 0 auto 0 0; background: var(--sienna); display: block; }
.pledge-said { margin-top: 6px; font-size: 13px; color: var(--ink-3); font-family: var(--sans); }

/* --- the dense list.
 *
 * A real household list is 143 lines in eight rooms, and most of them are two words:
 * "tea spoons", "colander", "axe".  Given a row apiece that is sixteen thousand pixels of
 * scrolling to say almost nothing.  So a list that is long, or that has rooms, is set as a
 * checklist instead: one line each, in columns, grouped, with the state as a dot and
 * nothing else unless there IS something else.  The editorial row treatment above stays for
 * short curated lists and for the front page, where every entry has something to say.
 */
.room { margin-bottom: 30px; }
.room-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 7px; margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.room-head b {
  font: 500 10.5px/1 var(--sans); letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.room-head .rule { flex: 1; }
.room-head span { font: 400 12.5px/1 var(--sans); color: var(--ink-3); }

/* Two columns, not three: each line now carries its state and an action as well as the
   thing itself, and three columns of that is a spreadsheet, not a list. */
.lines { columns: 2; column-gap: 40px; }

.line {
  position: relative;
  display: flex; align-items: baseline; gap: 12px;
  padding: 6px 6px 6px 2px;
  break-inside: avoid;
  font-size: 16px;
  border-bottom: 1px solid transparent;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.line:hover { background: var(--paper-3); border-bottom-color: var(--rule); }

.line .t { flex: 1; min-width: 0; }
/* The whole line is the link; the buttons at the end sit above it. */
.line .t::after { content: ''; position: absolute; inset: 0; }

.line .end {
  flex: none; position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 12px;
  min-height: 20px;
}

/* the state, as a word */
.line .st {
  font: 500 9.5px/1 var(--sans);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  text-align: right;
}
.line .st.need   { color: var(--ink-3); }
.line .st.want   { color: var(--sienna); }
.line .st.heaven { color: var(--gilt); }
.line .st.unsaid { color: var(--rule-2); }
.line .st.settable { cursor: pointer; border-bottom: 1px dotted transparent; }
.line .st.settable:hover { border-bottom-color: currentColor; }

/* the action */
.line .act {
  font: 500 9.5px/1 var(--sans);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--sienna);
  white-space: nowrap;
  min-width: 52px; text-align: right;
  opacity: 0;
  transition: opacity .14s var(--ease), color .14s var(--ease);
}
.line:hover .act, .line:focus-within .act { opacity: 1; }
.line .act:hover { color: var(--ink); }
/* No pointer means no hover, so it is simply always there. */
@media (hover: none) {
  .line .act { opacity: 1; }
}

.line .who {
  font: 400 13.5px/1.2 var(--serif);
  color: var(--ink-2);
  white-space: nowrap;
  min-width: 52px; text-align: right;
}
.line .who.you { color: var(--sienna); }
.line .tick { color: var(--green); font-size: 13px; min-width: 52px; text-align: right; }
.line .aside { font: 400 12.5px/1 var(--sans); color: var(--ink-3); min-width: 52px; text-align: right; }
.line.done .t { color: var(--ink-3); }

/* --- needs, rolled up per person: one sentence each, the count carrying the link. */
.needs li { border-bottom: 1px solid var(--rule); }
.needs li:last-child { border-bottom: 0; }
.needs-row {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 6px 13px 2px;
  transition: background .16s var(--ease);
}
.needs-row:hover { background: var(--paper-3); }
.needs-said { flex: 1; min-width: 0; font-size: 16.5px; }
.needs-link {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
/* The count is the link, but the whole row is the target. */
.needs-link::after { content: ''; position: absolute; inset: 0; }
.needs-row:hover .needs-link { color: var(--sienna); border-bottom-color: var(--sienna); }
.unmet-go {
  flex: none;
  color: var(--rule-2);
  font-size: 15px;
  transition: color .16s var(--ease), transform .16s var(--ease);
}
.needs-row:hover .unmet-go { color: var(--sienna); transform: translateX(3px); }

/* --- the activity log (§14).  A quiet chronicle. */
.log li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 4px;
  border-bottom: 1px solid var(--rule);
}
.log li:last-child { border-bottom: 0; }
.log-body { flex: 1; min-width: 0; font-size: 16.5px; line-height: 1.5; }
.log-body a { border-bottom: 1px solid var(--rule-2); }
.log-body a:hover { border-bottom-color: var(--sienna); color: var(--sienna); }
.log-when {
  flex: none; font: 400 13px/1.7 var(--sans); color: var(--ink-3);
  white-space: nowrap; padding-top: 2px;
}
.log-thumb {
  flex: none; width: 44px; height: 44px;
  background: var(--paper-3) center/cover no-repeat; border: 1px solid var(--rule);
}

/* --- the masthead of a person's page */
.person-head { display: flex; gap: 22px; align-items: flex-start; }
.person-head-body { flex: 1; min-width: 0; }
.person-where { color: var(--ink-3); margin-top: 6px; font-size: 16.5px; }
/* The correspondence block: top right, ranged right, the way a sender's address sits on
   a letterhead.  Phone, email, then the postal address — one place to look. */
.letterhead {
  flex: 0 1 auto;
  margin-left: auto;
  padding: 8px 0 0 40px;
  text-align: right;
  font-style: normal;              /* <address> is italic by default; a letterhead is not */
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.letterhead > *, .letterhead .reach > * { display: block; }
/* An address line is a line: it does not fold "Lower Carter's Gap" onto the next row just
   because there is room to.  It only starts wrapping when the column gets narrow enough to
   crowd the name beside it — see the 900px rule below. */
.letterhead .row-line, .letterhead .aside-note { white-space: nowrap; }
.letterhead .reach { margin-top: 12px; }
.letterhead .row-line {
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.letterhead .row-line:hover { color: var(--sienna); border-bottom-color: var(--sienna); }
.letterhead .post { white-space: pre; }
.letterhead .aside-note {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-3);
  font-style: italic;
}

/* --- tabs (To Plenish / Received) */
.tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--rule); }
.tabs button {
  padding: 0 0 13px;
  font: 500 11px/1 var(--sans); letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.tabs button:hover { color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sienna); }
.tabs .count { color: var(--ink-3); margin-left: 6px; }
/* The list needs air under the tabs; without it the first room heading sits on the rule. */
.tabs + div { margin-top: 26px; }

/* --- one Plenishing, in full */
.thing-photo {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--paper-3) center/cover no-repeat;
  border: 1px solid var(--rule);
  margin-bottom: 26px;
}

.ways { border-top: 1px solid var(--rule); }
.way {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 17px 4px; border-bottom: 1px solid var(--rule);
}
.way-thumb {
  flex: none; width: 58px; height: 58px;
  background: var(--paper-3) center/cover no-repeat; border: 1px solid var(--rule);
}
.way-body { flex: 1; min-width: 0; }
.way-body b { font: 400 17px/1.35 var(--serif); display: block; }
.way-body span { font-size: 14px; color: var(--ink-3); }
.way-body a.out { color: var(--sienna); border-bottom: 1px solid var(--rule-2); font-size: 14px; }
.way.approved { background: var(--sienna-air); }
.way-approved-mark {
  font: 500 10px/1 var(--sans); letter-spacing: .19em; text-transform: uppercase;
  color: var(--sienna);
}

.helpers li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--rule);
}
.helpers .amount { margin-left: auto; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }

/* --- notes (§25).  Friends talking around a thing. */
.notes { }
.note { padding: 16px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 12px; }
.note.reply { padding-left: 42px; }
.note-body { flex: 1; min-width: 0; }
.note-who { font-size: 14px; color: var(--ink-3); margin-bottom: 3px; }
.note-who b { color: var(--ink); font-weight: 400; font-size: 16px; }
.note-text { font-size: 16.5px; line-height: 1.55; white-space: pre-line; }
.note-tools { margin-top: 6px; display: flex; gap: 14px; font-size: 13.5px; color: var(--ink-3); }
.note-tools button:hover { color: var(--sienna); }

/* --- the thank-you (§27).  Set apart, because it is the point. */
.thanks {
  border-left: 2px solid var(--sienna);
  padding: 4px 0 4px 20px;
  margin: 26px 0;
}
.thanks p { font: 400 19px/1.55 var(--serif); font-style: italic; }
.thanks .who { margin-top: 10px; font-size: 14px; color: var(--ink-3); font-style: normal; }

/* --- a Plenishing's history (§29) */
.history li {
  display: grid; grid-template-columns: 78px 1fr; gap: 16px;
  padding: 10px 0; font-size: 15.5px;
}
.history .when { font: 400 13px/1.7 var(--sans); color: var(--ink-3); }

/* --- empty states (§40).  Warm and understated. */
.empty {
  padding: 46px 4px;
  color: var(--ink-3);
  font-size: 18px; font-style: italic;
}

/* --- notices */
.notice {
  border: 1px solid var(--rule-2);
  background: var(--paper-3);
  padding: 15px 18px; font-size: 15.5px; color: var(--ink-2);
}
.notice.warm { border-color: var(--sienna); background: var(--sienna-air); color: var(--ink); }
.notice a { color: var(--sienna); border-bottom: 1px solid var(--rule-2); }

/* ================================================================ forms */
.field { margin-bottom: 20px; }
.field > label {
  display: block; margin-bottom: 7px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.field .hint { margin-top: 7px; font-size: 14px; color: var(--ink-3); }

/* A tick-box says a whole sentence, so it must escape the small-caps treatment that every
   other field label wears. */
.field > label.check {
  display: flex; align-items: flex-start; gap: 11px;
  font: 400 16px/1.5 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0;
  cursor: pointer;
}

/* The box itself, drawn rather than borrowed. */
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 17px; height: 17px;
  margin: 3px 0 0;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.check:hover input[type="checkbox"] { border-color: var(--ink-3); }
.check input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.check input[type="checkbox"]:checked::after {
  content: '¹3';
  color: var(--paper);
  font: 400 12px/1 var(--serif);
}

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=date], input[type=search], input[type=number], textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  color: var(--ink);
  font: 400 16.5px/1.45 var(--serif);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  appearance: none; border-radius: 0;
}
textarea { min-height: 108px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--sienna);
  box-shadow: 0 0 0 3px var(--sienna-air);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }

/* the three states, chosen as one control */
.choose { display: flex; gap: 0; border: 1px solid var(--rule-2); }
.choose button {
  flex: 1; min-height: 46px; padding: 0 8px;
  font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--rule-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.choose button:last-child { border-right: 0; }
.choose button:hover { color: var(--ink); background: var(--paper-3); }
.choose button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.choose button[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); }

/* the photograph well: camera, library, desktop (§19) */
.photo-well {
  border: 1px dashed var(--rule-2);
  background: var(--paper-2);
  min-height: 132px;
  display: grid; place-items: center;
  text-align: center; padding: 20px;
  color: var(--ink-3); font-size: 15px;
  position: relative; overflow: hidden;
}
.photo-well img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-well.filled { border-style: solid; }
.photo-well-tools { display: flex; gap: 10px; margin-top: 12px; }

.checks { columns: 2; column-gap: 26px; }
.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; font-size: 16px;
  break-inside: avoid;
  cursor: pointer;
}
.check input { flex: none; width: 17px; height: 17px; margin-top: 4px; accent-color: var(--sienna); }

.room-block { margin-bottom: 26px; break-inside: avoid; }
.room-block > h4 {
  font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}

/* the gate: sign in, join, reset */
.gate { max-width: 400px; margin: 0 auto; padding: 62px var(--pad) 80px; }
.gate .wordmark { display: block; margin-bottom: 40px; }
.gate h1 { margin-bottom: 10px; }
.gate .below { margin-top: 26px; font-size: 15px; color: var(--ink-3); }
.gate .below a { color: var(--sienna); border-bottom: 1px solid var(--rule-2); }

.error-line {
  margin: 0 0 18px; padding: 12px 15px;
  border-left: 2px solid var(--sienna);
  background: var(--sienna-air);
  font-size: 15.5px; color: var(--ink);
}

/* The save bar of a long form: stuck to the bottom of the screen so it is always reachable,
   saying plainly when there is something unsaved, with any error beside the button rather
   than far above it where nobody ever scrolled back to look.  Losing a typed-in address to
   a Save button below the fold is not the person's mistake. */
.form-save {
  position: sticky; bottom: 0; z-index: 15;
  margin: 26px calc(var(--pad) * -1) 0;
  padding: 14px var(--pad);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  transition: border-color .2s var(--ease);
}
.form-save.dirty { border-top-color: var(--sienna); }
.form-save .said {
  font: 500 10px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 10px; min-height: 10px;
}
.form-save .error-line { margin-bottom: 12px; }

/* The primary action on a person's page, twice over: inline on a desktop, and on a phone
   sitting just above the bottom bar where a thumb already is.  Exactly one is ever shown. */
.sticky-act {
  position: sticky; z-index: 20;
  bottom: calc(54px + env(safe-area-inset-bottom));
  margin: 0 calc(var(--pad) * -1); padding: 13px var(--pad);
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  display: none;
}

/* ================================================================ the sheet */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28, 26, 23, .34);
  backdrop-filter: blur(2px);
  animation: fade .2s var(--ease);
}

.sheet {
  position: fixed; z-index: 61;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  box-shadow: var(--lift);
  display: flex; flex-direction: column;
  animation: rise .22s var(--ease);
}
.sheet-head {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--rule);
}
.sheet-head h2 { flex: 1; font: 400 22px/1.25 var(--serif); letter-spacing: -.01em; }
.sheet-close {
  width: 38px; height: 38px; margin: -6px -8px -6px 0;
  font-size: 26px; line-height: 1; color: var(--ink-3);
  display: grid; place-items: center;
}
.sheet-close:hover { color: var(--ink); }
.sheet-body { padding: 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-body > .btn.wide:last-child { margin-top: 4px; }

/* ================================================================ toast */
.toast {
  position: fixed; z-index: 80;
  left: 50%; bottom: 28px; transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 32px));
  background: var(--ink); color: var(--paper);
  padding: 13px 20px; font-size: 15.5px;
  box-shadow: var(--lift);
  animation: rise .2s var(--ease);
}

/* ================================================================ motion */
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }
@keyframes riseflat { from { opacity: 0; transform: translateY(8px); } }

#view > * { animation: riseflat .26s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ================================================================ responsive */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  /* Now it may wrap — better a folded address than one pressed against the name. */
  .letterhead { padding-left: 24px; }
  .letterhead .post { white-space: pre-line; }
  .letterhead .row-line, .letterhead .aside-note { white-space: normal; }
  .lines { columns: 1; }
}

@media (max-width: 720px) {
  :root { --pad: 18px; }
  body { font-size: 16.5px; }

  .nav-wide { display: none; }
  /* On a phone the bar has room for the name and nothing else. */
  .tagline { display: none; }
  .nav-bar { display: flex; }
  .masthead-in { height: 56px; gap: 12px; }
  .masthead-end { margin-left: auto; }

  .page { padding: 26px var(--pad) 108px; }
  .stack > * + * { margin-top: 36px; }

  .doors { grid-template-columns: 1fr; }
  .doors a { border-right: 0; border-bottom: 1px solid var(--rule); padding: 18px 4px; }
  .doors a:last-child { border-bottom: 0; }
  .doors b { font-size: 19px; }

  .plen { grid-template-columns: 1fr auto; gap: 4px 16px; padding: 19px 2px; }
  .plen h3 { font-size: 19.5px; }
  .plen-thumb { width: 68px; height: 68px; }

  .person-head { gap: 14px 16px; flex-wrap: wrap; }
  .face.lg { width: 68px; height: 68px; font-size: 20px; }
  /* Under 720px the letterhead drops below the name and runs the full width — still ranged
     right, because that is the whole point of it. */
  .letterhead { margin-left: 0; max-width: none; width: 100%; padding-top: 0; }

  .log-when { display: none; }
  .log-body { font-size: 16px; }

  .checks { columns: 1; }
  .lines { columns: 1; }
  .line { padding: 9px 6px 9px 2px; }
  .history li { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .history .when { order: -1; }

  .sticky-act { display: block; }
  .form-save { bottom: calc(54px + env(safe-area-inset-bottom)); padding-bottom: 14px; }
  .desk-act { display: none; }

  /* the sheet becomes a bottom sheet — it belongs to the thumb */
  .sheet {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100%; max-height: 92vh;
    border-left: 0; border-right: 0; border-bottom: 0;
    animation: sheetup .24s var(--ease);
  }
  .sheet-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

@keyframes sheetup { from { transform: translateY(100%); } }

@media (min-width: 721px) {
  .desk-act { display: block; }
}

@media print {
  .masthead, .nav-bar, .sticky-act, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Several givers on one thing: the names sit beside the button, not instead of it. */
.act-wrap { display: inline-flex; align-items: baseline; gap: 12px; }
.line .act-wrap .who { min-width: 0; }