/* Pot This community: Sunline.
   Daylight field above, the photographed table in the lower third.
   No text ever sits on wood or moving light. */

@font-face {
  font-family: "Newsreader";
  src: url("/community/fonts/Newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/community/fonts/SourceSans3-r400.woff2") format("woff2");   /* default instance re-set to Regular: engines without variable-axis support (WinCairo WebKit) read Regular, not ExtraLight */
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --day: #F4F1E8;
  --day-2: #EDE6D6;
  --paper: #FBFAF5;
  --ink: #1F241C;
  --ink-2: #474E42;
  --leaf: #2F5D3A;
  --leaf-2: #244A2E;
  --clay: #A4552F;
  --err: #8B2B1A;
  --line: #D3C6AC;
  --hair: #E2D9C6;
  --ground: #C9B48E;
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vh: 100vh;
  --band: 300px;
  --rim: 72px;
  --table-now: 300px;
  --header-h: 96px;
  --side: 300px;
  --pad-r: 48px;
  --pot-top: 150px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--day); scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 18px/28px var(--sans);
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: var(--leaf); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 16px; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 3px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 20;
  background: var(--leaf); color: var(--day); padding: 10px 18px; border-radius: 999px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------------------------------------------------------------- layers */

.daylight {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--day) 0, var(--day) 38%, var(--day-2) calc(var(--vh) - var(--table-now)), var(--day-2) 100%);
}

.scene {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
  transition: clip-path .35s ease;
}
.scene-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--table-now);
  background: var(--ground);
  box-shadow: inset 0 2px 0 rgba(96, 70, 36, .32);
  transition: height .35s ease, opacity .6s ease;
}
.scene[data-art="ready"] .scene-ground { opacity: 0; }
.scene-frames {
  position: absolute; left: 0; top: 0; opacity: 0;
  transition: opacity .6s ease, transform .35s ease;
  will-change: transform;
}
.scene-frames.ready { opacity: 1; }
.scene-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; user-select: none; }
.scene-frame-b { opacity: 0; }
.scene-frames.dapple .scene-frame-b { animation: dapple 10s ease-in-out infinite alternate; }
.scene.paused .scene-frame-b { animation-play-state: paused; }
@keyframes dapple { from { opacity: 0; } to { opacity: 1; } }

.scene-shadows {
  position: absolute; left: 0; right: 0; bottom: var(--table-now); height: 0;
  opacity: 0; transition: opacity .2s ease;
}
.scene-shadows.on { opacity: 1; }
.scene-shadow {
  position: absolute; top: -5px; height: 16px;
  background: radial-gradient(closest-side, rgba(38, 26, 10, .42), rgba(38, 26, 10, 0));
  transform: scaleX(1.04);
}
.scene-pot {
  position: absolute; left: 14px; bottom: 5px; opacity: 0;
  background-repeat: no-repeat; transition: opacity .3s ease;
}
.scene.rim .scene-pot.has-art { opacity: 1; }

.tabletop { position: fixed; inset: 0; z-index: 5; pointer-events: none; transition: opacity .2s ease; }
.draft-piece {
  position: absolute;
  transform-origin: 50% 100%;
  transform: perspective(1100px) rotateX(60deg);
  box-shadow: 0 34px 26px -24px rgba(38, 26, 10, .5);
}
.draft-piece img { display: block; width: 100%; height: 100%; max-width: none; }
.draft-piece.is-standing { transform: none; box-shadow: none; }
.draft-piece.is-standing::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -7px; height: 14px;
  background: radial-gradient(closest-side, rgba(38, 26, 10, .38), rgba(38, 26, 10, 0));
}
body.typing .tabletop { opacity: 0; }

/* ---------------------------------------------------------------- header */

.top {
  position: relative; z-index: 7;
  height: var(--header-h);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 28px var(--pad-r) 0 48px;
}
.wordmark {
  font: 600 30px/36px var(--serif); letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.top-signin {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  font-weight: 600; color: var(--leaf); text-decoration: none; border-radius: 999px;
  border: 2px solid var(--leaf);
}
.top-signin:hover { background: rgba(47, 93, 58, .08); }

.menu { position: relative; display: inline-block; }
.menu-btn {
  min-height: 44px; min-width: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; font-weight: 600; cursor: pointer; color: var(--ink);
}
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--day-2); }
.acct .menu-btn { border: 2px solid var(--hair); background: var(--paper); }
.more .menu-btn { font-size: 24px; line-height: 1; padding: 0 10px; color: var(--ink-2); }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 240px;
  background: var(--paper); border-radius: 14px; padding: 6px;
  box-shadow: 0 1px 0 rgba(31, 36, 28, .06), 0 14px 36px rgba(31, 36, 28, .2);
}
.menu-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-radius: 10px;
  background: none; font: 500 16px/24px var(--sans); color: var(--ink); text-decoration: none; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--day-2); }
.menu-item--danger { color: var(--err); }

/* ---------------------------------------------------------------- leaf nav */

.leafnav {
  position: fixed; z-index: 6; left: 56px; width: 204px;
  bottom: calc(var(--table-now) + var(--pot-top) + 20px);
  display: none;
}
@media (min-width: 900px) {
  body:not([data-view="thread"]):not(.is-rim):not([data-view="loading"]) .leafnav { display: block; }
}
.leaf-list { list-style: none; margin: 0 0 18px; padding: 0; }
.leaf-link {
  display: flex; align-items: center; padding: 5px 0;
  font: 500 20px/28px var(--sans); color: var(--ink); text-decoration: none;
}
.leaf-link:hover { color: var(--leaf); }
.leaf-link[aria-current="page"] { color: var(--leaf); font-weight: 700; }
.leaf-link[aria-current="page"]::before {
  content: ""; width: 11px; height: 11px; margin-right: 10px; flex: none;
  background: var(--leaf); border-radius: 0 70% 0 70%;
}
.leaf-share { margin-bottom: 14px; }
.leaf-drafts, .leaf-privacy {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font: 500 16px/24px var(--sans); color: var(--ink-2);
}
.leaf-drafts { color: var(--ink); }
.leaf-drafts .ico { width: 16px; height: 16px; }
@media (max-height: 760px) {
  .leaf-list { margin-bottom: 10px; }
  .leaf-link { padding: 2px 0; font-size: 18px; }
  .leaf-share { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------- rim */

.rim {
  position: fixed; z-index: 6; left: 0; right: 0; bottom: 0;
  height: var(--rim);
  display: none; align-items: flex-end; justify-content: flex-start;
  padding: 0 var(--pad-r) 8px calc(var(--rim) + 28px);
  pointer-events: none;
}
body.is-rim .rim { display: flex; }
body.typing .rim { display: none; }
.rim > * { pointer-events: auto; }
.rim-surface {
  position: relative;
  min-height: calc(var(--rim) - 16px);
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px 6px 20px;
  background: var(--day);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(31, 36, 28, .06), 0 8px 24px rgba(38, 26, 10, .24);
}
.rim-nav { gap: 4px; }
.rim-filters { display: flex; gap: 2px; margin-right: 8px; }
.rim-link {
  padding: 6px 12px; border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.rim-link:hover { background: var(--day-2); }
.rim-link[aria-current="page"] { color: var(--leaf); background: rgba(47, 93, 58, .1); }
.rim-note { gap: 12px; color: var(--ink); font-weight: 600; padding-right: 8px; }
.rim-reply { margin-left: auto; width: min(560px, 100%); align-items: flex-end; }
.rim-as { flex: none; font: 600 16px/24px var(--sans); color: var(--ink-2); padding-bottom: 10px; white-space: nowrap; }
.reply-input {
  flex: 1; min-width: 0; resize: none; border: 0; background: transparent;
  font: 400 18px/28px var(--sans); padding: 8px 4px; max-height: 168px;
}
.reply-input:focus { outline: none; }
.rim-reply:focus-within { box-shadow: 0 0 0 3px var(--leaf), 0 8px 24px rgba(38, 26, 10, .24); }
.rim-error {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); margin: 0;
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--paper); color: var(--err); font: 600 16px/24px var(--sans);
  padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(38, 26, 10, .2);
}

/* ---------------------------------------------------------------- main */

main {
  position: relative; z-index: 1;
  min-height: calc(var(--vh) - var(--header-h));
  padding: 0 var(--pad-r) calc(var(--band) + 48px) var(--side);
  outline: none;
}
.feed.fits { margin-bottom: calc(48px - var(--band)); }
body[data-view="account"] main { padding-left: var(--pad-r); }
body[data-view="thread"] main { padding-left: 48px; padding-bottom: calc(var(--rim) + 160px); }

.title {
  font: 500 44px/52px var(--serif); letter-spacing: -.015em;
  margin: 0 0 16px; max-width: 18em; text-wrap: balance; outline: none;
}
.title--thread { font-size: 28px; line-height: 36px; }
.hero-welcome-title {font-size:clamp(48px,5vw,72px);line-height:1.04;letter-spacing:-.035em;margin-bottom:22px}
.welcome-lede {max-width:29em!important}
.welcome-note {max-width:27em;color:var(--ink-2);font:400 16px/24px var(--sans);margin:20px 0 0}
.lede { max-width: 34em; margin: 0 0 16px; }
.quiet { color: var(--ink-2); }
.quiet-status { color: var(--ink-2); font: 400 16px/24px var(--sans); margin: 8px 0; }
.quiet-status:empty { display: none; }
.inline-note { font: 400 16px/24px var(--sans); color: var(--ink-2); }
.optional { font-weight: 400; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 2px solid var(--leaf); border-radius: 999px;
  background: var(--leaf); color: var(--day);
  font: 600 18px/24px var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--leaf-2); border-color: var(--leaf-2); text-decoration: none; }
.btn--quiet { background: transparent; color: var(--leaf); }
.btn--quiet:hover { background: rgba(47, 93, 58, .08); border-color: var(--leaf); }
.btn--clay { background: var(--clay); border-color: var(--clay); }
.btn--clay:hover { background: #8E4726; border-color: #8E4726; }
.btn--danger { background: var(--err); border-color: var(--err); }
.btn--danger:hover { background: #73230F; border-color: #73230F; }
.btn--big { min-height: 56px; padding: 0 34px; font-size: 20px; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.textbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  background: none; border: 0; padding: 0 2px;
  font: 600 16px/24px var(--sans); color: var(--leaf);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.textbtn--danger { color: var(--err); }
.textbtn--quiet { color: var(--ink-2); }
.textbtn[disabled] { color: var(--ink-2); opacity: .6; cursor: not-allowed; }

/* ---------------------------------------------------------------- feed */

.hero {
  min-height: calc(var(--vh) - var(--header-h) - var(--band));
  display: flex; flex-direction: column;
  padding-top: 32px;
}
.hero-intro { max-width: 820px; }
.invites { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-width: 34em; }
.invites strong { font-weight: 700; }

.sunrow {
  display: flex; align-items: flex-end; gap: 28px;
  margin-top: 96px;
  border-bottom: 2px solid var(--line);
}
.sunrow-first { margin-top: auto; padding-top: 40px; border-bottom: 0; }
.stand { flex: none; min-width: 0; position: relative; }
.stand-meta {
  margin: 0; font: 400 16px/24px var(--sans); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stand-who { color: var(--ink); font-weight: 600; text-decoration: none; }
.stand-who:hover { text-decoration: underline; }
.stand-line { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stand-photo { display: block; position: relative; margin-top: 12px; }
.stand-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.stand-photo::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -7px; height: 14px; z-index: -1;
  background: radial-gradient(closest-side, rgba(48, 36, 18, .3), rgba(48, 36, 18, 0));
  pointer-events: none;
}
.sunrow-first .stand-photo::after { display: none; }
.stand-photo:focus-visible { outline-offset: 4px; }
.stand--text .stand-text {
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 10px; padding-bottom: 20px;
  font: 400 24px/32px var(--serif); color: var(--ink); text-decoration: none; white-space: pre-line;
}
.stand--text .stand-text:hover { color: var(--leaf); }
img.is-broken { min-height: 120px; background: var(--day-2); color: var(--ink-2); font: 400 16px/24px var(--sans); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stand-photo img { transition: transform .25s ease; }
  .stand-photo:hover img { transform: translateY(-3px); }
}
.feed-foot { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.feed-end { color: var(--ink-2); margin: 0; }
.feed-privacy { display: none; width: 100%; margin: 8px 0 0; font: 400 16px/24px var(--sans); }
.filters-inline { display: none; }

/* ---------------------------------------------------------------- thread */

.thread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 472px);
  gap: 48px; align-items: start; padding-top: 8px;
}
.thread--text { grid-template-columns: minmax(0, 720px); }
.thread--text .thread-photos { display: none; }
.thread-photos { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 32px; }
.thread-photo { margin: 0; border-bottom: 2px solid var(--line); padding-bottom: 0; }
.thread-photo-frame { position: relative; }
.thread-photo img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(var(--vh) - var(--rim) - 96px);
  background-size: 100% 100%; background-repeat: no-repeat;
}
.thread-photo-frame::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -7px; height: 14px; z-index: -1;
  background: radial-gradient(closest-side, rgba(48, 36, 18, .3), rgba(48, 36, 18, 0));
}
.thread-photo.is-flat { border-bottom-color: transparent; perspective: 1200px; }
.thread-photo.is-flat .thread-photo-frame { transform: perspective(1200px) rotateX(38deg); transform-origin: 50% 100%; }
.thread-photo.is-flat .thread-photo-frame::after { display: none; }
.flat-label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font: 600 16px/24px var(--sans); color: var(--ink);
}
.flat-label .ico { width: 16px; height: 16px; }
.thread-col { min-width: 0; }
.back-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-bottom: 16px;
  font: 600 16px/24px var(--sans); text-decoration: none;
}
.post-meta { margin: 0; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.post-author { font: 500 28px/36px var(--serif); margin: 4px 0 0; outline: none; }
.post-author a { color: var(--ink); text-decoration: none; }
.post-author a:hover { text-decoration: underline; }
.post-handle { margin: 0 0 20px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 16px 0 24px; }
.thread--text .post-text { font: 400 24px/34px var(--serif); }
.owner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0 0 24px; }
.replies-title {
  font: 500 28px/36px var(--serif); margin: 32px 0 8px; padding-top: 24px;
  border-top: 2px solid var(--line); outline: none;
}
.reply-list { list-style: none; margin: 0; padding: 0; }
.reply { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.reply-head { margin: 0; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.reply-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.reply-name:hover { text-decoration: underline; }
.reply-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-actions { display: flex; gap: 18px; margin-top: 2px; }
.reply-actions .textbtn { min-height: 36px; }

/* ---------------------------------------------------------------- state line */

.state-line {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px;
  padding: 4px 16px 4px 12px; border-radius: 999px;
  background: var(--day-2); color: var(--ink);
  font: 600 16px/24px var(--sans);
}
.state-line .ico { width: 18px; height: 18px; }
.state-line--public { background: rgba(47, 93, 58, .1); color: var(--leaf-2); }
.state-line--public.is-moment { background: var(--clay); color: #FFF; transition: background-color .7s ease, color .7s ease; }

/* ---------------------------------------------------------------- composer */

.compose { max-width: 560px; padding-top: 24px; }
.compose .title { margin-bottom: 12px; }
.compose-state { margin-bottom: 8px; }
.kinds { border: 0; margin: 20px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kinds legend { padding: 0; margin-bottom: 8px; }
.kind-choice { position: relative; cursor: pointer; }
.kind-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind-choice span {
  display: flex; flex-direction: column; min-width: 150px;
  padding: 8px 18px 10px; border: 2px solid var(--line); border-radius: 16px; background: var(--paper);
}
.kind-choice b { font-weight: 700; }
.kind-choice small { font: 400 16px/22px var(--sans); color: var(--ink-2); }
.kind-choice input:checked + span { border-color: var(--leaf); background: var(--leaf); color: var(--day); }
.kind-choice input:checked + span small { color: #E3EADF; }
.kind-choice input:focus-visible + span { outline: 3px solid var(--leaf); outline-offset: 3px; }
.compose-photo { margin: 8px 0 4px; }
.compose-preview {display:none}
@media(max-width:899px){
 .kind-choice{flex:1 1 0;min-width:0}
 .kind-choice span{min-width:0;text-align:center;padding:10px 8px}
 .kind-choice small{display:none}
 .compose-preview{display:block;max-width:100%;width:auto;max-height:180px;height:auto;object-fit:contain;margin:8px 0 12px}
 body[data-view="compose"] .tabletop{display:none}
}
.reply {scroll-margin-bottom:calc(var(--rim) + 140px)}
.photo-note { margin: 0; font-weight: 600; }
.photo-tools { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.assist { margin: 12px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hair); }
.assist:empty { display: none; }
.assist-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.assist-local { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/24px var(--sans); color: var(--leaf-2); }
.assist-local .ico { width: 16px; height: 16px; }
.assist-msg { margin: 8px 0; }
.assist-how { display: inline-block; margin-top: 4px; font: 400 16px/24px var(--sans); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip {
  min-height: 44px; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--leaf); background: var(--paper); color: var(--ink); font: 500 16px/24px var(--sans);
}
.chip:hover { background: rgba(47, 93, 58, .08); }
.compose-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }

/* ---------------------------------------------------------------- forms */

.field { display: block; margin: 20px 0; }
.field-label { display: block; margin-bottom: 6px; font: 600 16px/24px var(--sans); color: var(--ink); }
.field-hint { display: block; margin: 6px 0 0; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.input, .textarea {
  display: block; width: 100%;
  font: 400 18px/28px var(--sans); color: var(--ink);
  background: var(--paper); border: 2px solid #CBBFA6; border-radius: 12px; padding: 10px 14px;
}
.input:focus, .textarea:focus { outline: 3px solid var(--leaf); outline-offset: 1px; border-color: var(--leaf); }
.input[aria-invalid="true"] { border-color: var(--err); }
.textarea { min-height: 160px; resize: vertical; }
.textarea--short { min-height: 96px; }
.form-error {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0;
  color: var(--err); font: 600 16px/24px var(--sans);
}
.form-error .ico { margin-top: 2px; }

/* ---------------------------------------------------------------- account */

.account { max-width: 440px; margin: 0 auto; padding-top: 24px; }
.acct-promise { font-size: 18px; line-height: 28px; }
.acct-paths { display: grid; gap: 0; margin-top: 8px; }
.acct-path { padding: 24px 0; border-top: 2px solid var(--line); }
.acct-path h2 { font: 500 28px/36px var(--serif); margin: 0 0 12px; }
.acct-path .btn { margin-top: 16px; }
.acct-flow { max-width: 520px; }
.acct-flow .input { font-size: 20px; min-height: 56px; }
.input--code { font: 600 32px/1 var(--sans); letter-spacing: 0.35em; max-width: 280px; text-align: center; }
.acct-alt { margin-top: 12px; font: 500 16px/24px var(--sans); color: var(--ink-2); }
.acct-foot { margin-top: 16px; font: 400 16px/24px var(--sans); color: var(--ink-2); }

/* ---------------------------------------------------------------- pages */

.page { max-width: 700px; padding-top: 24px; }
.section { padding: 28px 0 8px; border-top: 2px solid var(--line); }
.section h2 { font: 500 28px/36px var(--serif); margin: 0 0 12px; }
.pull { font: 400 24px/34px var(--serif); }
.welcome { background: var(--paper); border-radius: 16px; padding: 18px 22px; margin: 8px 0 24px; box-shadow: 0 0 0 2px var(--line); }
.welcome-title { font-weight: 700; margin-bottom: 4px; }
.passkey-list, .block-list { list-style: none; margin: 8px 0 16px; padding: 0; }
.passkey, .block-item {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--hair);
}
.passkey-name { margin: 0; font-weight: 600; }
.passkey-meta { margin: 0; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.passkey-note { padding: 10px 0; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.passkey-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.passkey-add .field { flex: 1 1 260px; margin: 0; }
.danger-zone h2 { color: var(--err); }
.gate .cta-row { margin-top: 8px; }

/* ---------------------------------------------------------------- person */

.person-head { padding-top: 24px; max-width: 760px; }
.person-handle { margin: -8px 0 12px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.person-bio { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 36em; }
.person-grow, .person-since { font: 400 16px/24px var(--sans); color: var(--ink-2); margin-bottom: 8px; }
.person-grow b { color: var(--ink); }
.tabs { display: flex; gap: 28px; margin-top: 24px; border-bottom: 2px solid var(--line); }
.tab {
  min-height: 48px; padding: 0 2px; margin-bottom: -2px; border: 0; background: none; cursor: pointer;
  font: 600 18px/28px var(--sans); color: var(--ink-2); border-bottom: 3px solid transparent;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--leaf); }
.person-empty { margin-top: 40px; }
.person-empty .btn { margin-top: 8px; }
.person-body .stands-rest > .sunrow:first-child { margin-top: 72px; }
.flatrow {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px 36px;
  margin-top: 56px; padding-bottom: 12px; border-bottom: 2px solid var(--line);
}
.flat-item { width: 260px; }
.flat-photo { display: block; perspective: 900px; margin: 4px 0 6px; }
.flat-photo img {
  display: block; width: 100%; height: auto;
  transform: perspective(900px) rotateX(52deg); transform-origin: 50% 100%;
  box-shadow: 0 26px 20px -18px rgba(38, 26, 10, .45);
}
.flat-text {
  display: block; margin: 6px 0; padding: 14px 16px; background: var(--paper); border-radius: 4px;
  font: 400 18px/26px var(--serif); color: var(--ink); text-decoration: none; white-space: pre-line;
  transform: perspective(900px) rotateX(40deg); transform-origin: 50% 100%;
}
.flat-meta { margin: 4px 0 0; font: 400 16px/24px var(--sans); color: var(--ink-2); }

/* ---------------------------------------------------------------- dialogs */

.dlg {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  border: 0; border-radius: 20px; padding: 32px;
  background: var(--day); color: var(--ink);
  box-shadow: 0 28px 70px rgba(31, 36, 28, .38);
}
.dlg--wide { width: min(1100px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(31, 36, 28, .45); }
.dlg-title { font: 500 28px/36px var(--serif); margin: 0 0 12px; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.lightbox img { display: block; margin: 0 auto; max-height: 72dvh; width: auto; height: auto; }
.reasons { border: 0; padding: 0; margin: 8px 0 16px; display: grid; gap: 4px; }
.reason { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.reason input { width: 20px; height: 20px; accent-color: var(--leaf); }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; z-index: 30; left: 50%; top: 16px;
  max-width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  padding: 12px 20px 12px 18px; border-radius: 14px;
  background: var(--paper); color: var(--ink); border-left: 4px solid var(--leaf);
  font: 600 16px/24px var(--sans);
  box-shadow: 0 14px 36px rgba(31, 36, 28, .22);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { display: none; }

/* ---------------------------------------------------------------- view transitions */

::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(post-photo) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}
::view-transition-old(post-photo),
::view-transition-new(post-photo) { height: 100%; }

/* ---------------------------------------------------------------- 1024 */

@media (max-width: 1199px) {
  :root { --side: 240px; --pad-r: 32px; }
  .leafnav { left: 32px; width: 188px; }
  .top { padding-left: 32px; }
  body[data-view="thread"] main { padding-left: 32px; }
  .thread { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; gap: 24px; }
  .thread--text { grid-template-columns: minmax(0, 1fr); }
  .thread-photos { position: static; }
  .thread-photo img { max-height: 60vh; }
  .rim-reply { margin: 0 auto; width: min(640px, 100%); }
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 899px) {
  :root { --side: 20px; --pad-r: 20px; --header-h: 56px; }
  .top {
    position: sticky; top: 0; height: 56px; align-items: center;
    padding: 0 12px 0 20px;
    background: rgba(244, 241, 232, .97); border-bottom: 1px solid var(--hair);
  }
  .wordmark { font-size: 24px; line-height: 28px; }
  .top-signin { min-height: 40px; padding: 0 14px; }
  body[data-view="thread"] main { padding-left: 20px; }
  .hero { padding-top: 16px; }
  .filters-inline {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -20px 20px; padding: 2px 20px;
  }
  .chip-link {
    flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--paper);
    box-shadow: inset 0 0 0 2px var(--hair);
  }
  .chip-link[aria-current="page"] { background: var(--leaf); color: var(--day); box-shadow: none; }
  .sunrow { gap: 20px; margin-top: 64px; }
  .sunrow-first { padding-top: 24px; }
  .feed-privacy { display: block; }
  .rim { padding: 0 8px 6px calc(var(--rim) + 8px); }
  .rim-surface { padding-left: 14px; border-radius: 12px; }
  .rim-filters { display: none; }
  .rim-nav { margin-left: auto; }
  .rim-as { display: none; }
  .rim-reply { width: 100%; }
  .rim-note { font-size: 16px; }
  .thread { max-width: none; }
  .thread-photo img { max-height: 440px; }
  .compose { max-width: none; }
  .kind-choice span { min-width: 0; }
  .dlg { padding: 24px 20px; }
  .flat-item { width: calc(50% - 18px); }
}

/* ---------------------------------------------------------------- motion off */

@media (prefers-reduced-motion: reduce) {
  .scene-frames.dapple .scene-frame-b { animation: none; opacity: 0; }
  .scene, .scene-frames, .scene-ground, .scene-shadows, .toast, .tabletop { transition: none; }
  .state-line--public.is-moment { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms !important; }
}

/* Living table: Cycles sun-shadow loop multiplied over the clean base still. */
.scene-shade {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block;
  object-fit: fill; mix-blend-mode: multiply; opacity: 0; transition: opacity 1.6s ease;
  pointer-events: none;
}
.scene-frames.living .scene-shade { opacity: .82; }
.scene-frames.living .scene-frame-b { display: none; }

/* ---------------------------------------------------------------- VFX layer */
/* Same tree, thrown on the wall: the shadow loop stretched up behind the page, very faint. */
.wall-shade {
  position: absolute; left: 0; right: 0; top: 0; overflow: hidden; opacity: 0;
  transition: opacity 1.2s ease; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, #000 45%, rgba(0,0,0,.5) 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, #000 45%, rgba(0,0,0,.5) 75%, transparent 100%);
}
.wall-shade.on { opacity: .18; }
.wall-shade.on.hush { opacity: 0; }
.wall-shade video {
  position: absolute; left: -4%; width: 108%; max-width: none; object-fit: fill;
  filter: blur(2.5px) sepia(.35);
}
/* Warm sun spilling in from upper left, where the real sun sits in the render. */
.sun-bloom {
  position: absolute; inset: -10%;
  background: radial-gradient(60% 55% at 12% 8%, rgba(255, 236, 196, .55), rgba(255, 236, 196, 0) 70%);
  mix-blend-mode: soft-light;
  animation: bloom 14s ease-in-out infinite alternate;
}
@keyframes bloom { from { opacity: .65; } to { opacity: 1; } }
/* Film grain, so the flat daylight reads as photographed air, not CSS. */
.grain {
  position: fixed; inset: -50%; z-index: 9; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-7%, 4%); } 33% { transform: translate(5%, -6%); }
  50% { transform: translate(-3%, 8%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-6%, -4%); }
}
/* Prints catch the sun when you reach for them. */
.stand-photo { transform-style: preserve-3d; }
.stand-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, rgba(255,244,220,0) 35%, rgba(255,244,220,.42) 50%, rgba(255,244,220,0) 65%);
  background-size: 260% 100%; background-position: 110% 0; mix-blend-mode: screen;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stand-photo img { transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; transform-origin: 50% 100%; }
  .stand-photo:hover img { transform: perspective(900px) translateY(-6px) rotateX(-3deg); filter: saturate(1.08) brightness(1.03); }
  .stand-photo:hover::before { opacity: 1; background-position: -10% 0; transition: background-position .9s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .sun-bloom { animation: none; }
}
.daylight { overflow: hidden; }
.scene-shade { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.scene-frames { isolation: isolate; }
/* The tree's shadow crossing the standing prints (clip-path set per frame from their rects). */
.print-shade {
  position: fixed; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none; overflow: hidden;
  mix-blend-mode: multiply; opacity: 0; transition: opacity .8s ease; clip-path: inset(100%);
}
.print-shade.on { opacity: .42; }
.print-shade.on.hush { opacity: 0; }
.print-shade video { position: absolute; left: -4%; width: 108%; max-width: none; object-fit: fill; filter: blur(1.5px); }

/* ================================================================ GLASS WORLD
   The page floats in a sunlit garden. World = bokeh plate behind the table.
   Every surface is frosted glass; a slow sun-gold light travels each rim
   (TriForce Navi-post recipe, re-lit for daylight). */
@property --gang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
  --glass-fill: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.36) 55%, rgba(255,255,255,.42));
  --glass-blur: blur(28px) saturate(1.25) brightness(1.08);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.25),
    0 1px 2px rgba(30,40,20,.08), 0 28px 60px -28px rgba(24,36,18,.55), 0 0 46px -14px rgba(255,210,130,.45);
  --rim-light: conic-gradient(from var(--gang), rgba(255,255,255,.55), rgba(255,214,140,1) 10%, rgba(255,255,255,.55) 24%,
    rgba(255,255,255,.4) 48%, rgba(170,230,175,.9) 58%, rgba(255,255,255,.4) 70%, rgba(255,255,255,.55));
}
.daylight .world {
  position: absolute; left: 0; top: 0; max-width: none; display: block; opacity: 0;
  transition: opacity 1.4s ease; transform-origin: 0 0; user-select: none; pointer-events: none;
  animation: drift 40s ease-in-out infinite alternate;
}
.daylight .world.on { opacity: 1; }
@keyframes drift { to { scale: 1.035; } }
body.has-world .daylight { background: #c9c4b0; }
body.has-world .wall-shade { display: none; }
body.has-world .sun-bloom { opacity: .7; }

/* One glass recipe, many surfaces. */
.hero-intro, .leafnav, .page, .compose, .person-head, .thread-col, .dlg, .rim-surface, .menu-list,
.top-signin, .acct .menu-btn, .stand-cap, .wordmark {
  isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.hero-intro::before, .leafnav::before, .page::before, .compose::before, .person-head::before, .thread-col::before,
.dlg::before, .rim-surface::before, .top-signin::before, .stand-cap::before, .wordmark::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; z-index: -1; pointer-events: none;
  background: var(--rim-light);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: grim 9s linear infinite;
}
@keyframes grim { to { --gang: 360deg; } }
/* stagger so the rims don't pulse in unison */
.leafnav::before { animation-delay: -3s; } .top-signin::before { animation-delay: -6s; } .wordmark::before { animation-delay: -1.5s; }

.hero-intro, .page, .compose, .person-head, .thread-col, .top-signin, .stand-cap, .wordmark, .acct .menu-btn { position: relative; }
.hero-intro { width: fit-content; max-width: min(820px, 100%); padding: 30px 38px 28px; border-radius: 30px; }
.hero-intro .title { margin-top: 0; }
.hero-intro > :last-child { margin-bottom: 0; }
.leafnav { padding: 18px 22px 16px; border-radius: 26px; width: 214px; left: 40px; }
.page, .compose, .person-head { padding: 32px 36px; border-radius: 30px; margin-top: 8px; }
.thread-col { padding: 28px 32px; border-radius: 30px; align-self: start; }
.dlg { background: var(--glass-fill), rgba(250,248,240,.55); border: 0; border-radius: 30px; }
.dlg::backdrop { background: rgba(24,30,18,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu-list { background: var(--glass-fill), rgba(250,248,240,.5); border-radius: 18px; }
.menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.55); }
.rim-surface { border-radius: 20px; background: var(--glass-fill), rgba(250,248,240,.35); }
.wordmark { padding: 4px 18px 6px; border-radius: 999px; }
.top-signin { border: 0; color: var(--leaf-2); padding: 0 22px; }
.top-signin:hover { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); }
.acct .menu-btn { border: 0; }

/* Captions float on glass above each print. */
.stand-cap { display: block; padding: 8px 14px 9px; border-radius: 16px; margin: 0 0 10px; max-width: 100%; }
.stand-cap .stand-meta { color: var(--ink-2); }
.stand-photo { margin-top: 0; }

/* Primary buttons: leaf glass with an inner sun glint. */
.btn:not(.btn--quiet):not(.btn--danger) {
  background: linear-gradient(180deg, #3f7a4c, #2a5634); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -8px rgba(36,74,46,.7), 0 0 24px -6px rgba(255,214,140,.55);
}
.btn--quiet { background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.chip-link { background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }

/* Floating: a slow hover in space. */
@media (prefers-reduced-motion: no-preference) {
  .hero-intro { animation: float 9s ease-in-out infinite; }
  .leafnav { animation: float 11s ease-in-out -4s infinite; }
}
@keyframes float { 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-intro::before, .leafnav::before, .page::before, .compose::before, .person-head::before, .thread-col::before,
  .dlg::before, .rim-surface::before, .top-signin::before, .stand-cap::before, .wordmark::before { animation: none; }
  .daylight .world { animation: none; }
}
@media (max-width: 899px) {
  .hero-intro { padding: 22px 22px 20px; border-radius: 24px; width: auto; }
  .page, .compose, .person-head, .thread-col { padding: 22px 20px; border-radius: 24px; }
}
/* Halation: the travelling rim light blooms outward, like light bending in glass. */
:root { --glass-fill: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.46) 55%, rgba(255,255,255,.52)); }
.hero-intro::after, .leafnav::after, .page::after, .compose::after, .person-head::after, .thread-col::after, .dlg::after, .top-signin::after, .wordmark::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit; padding: 9px; z-index: -2; pointer-events: none;
  background: var(--rim-light); filter: blur(9px); opacity: .75;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: grim 9s linear infinite;
}
.leafnav::after { animation-delay: -3s; } .top-signin::after { animation-delay: -6s; } .wordmark::after { animation-delay: -1.5s; }
.hero-intro::before, .leafnav::before, .page::before, .compose::before, .person-head::before, .thread-col::before, .dlg::before { padding: 1.6px; }
@media (prefers-reduced-motion: reduce) {
  .hero-intro::after, .leafnav::after, .page::after, .compose::after, .person-head::after, .thread-col::after, .dlg::after, .top-signin::after, .wordmark::after { animation: none; }
}
/* Sign-in card on glass too. */
.account {
  position: relative; isolation: isolate; padding: 34px 38px 30px; border-radius: 30px; margin-top: 8px;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
}
.account::before, .account::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none; background: var(--rim-light);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: grim 9s linear infinite;
}
.account::before { inset: 0; padding: 1.6px; z-index: -1; }
.account::after { inset: -7px; padding: 9px; z-index: -2; filter: blur(9px); opacity: .75; }
.account .section, .account hr { border-color: rgba(120,100,60,.22); }
@media (max-width: 899px) {
  .top { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.5); }
  .account { padding: 24px 20px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { .account::before, .account::after { animation: none; } }

/* ================================================================ STAGE
   The table never moves; panes are placed in scene space by stage.js. */
.stage-cta { display: none; }
body.staged { overflow: hidden; height: 100%; }
body.staged main {
  position: fixed; inset: 0; z-index: 6; padding: 0; min-height: 0; pointer-events: none;
}
body.staged .stage-el {
  position: fixed !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important;
  margin: 0 !important; max-width: none !important; transform-origin: 0 0; pointer-events: auto;
  translate: none !important; animation: none !important; box-sizing: border-box;
}
/* Glass lives on the chrome body behind the content, so scrolling never drags the rim. */
body.staged .stage-el.hero-intro, body.staged .stage-el.leafnav, body.staged .stage-el.page, body.staged .stage-el.account,
body.staged .stage-el .page, body.staged .stage-el .account, body.staged .stage-el .compose, body.staged .stage-el .person-head,
body.staged .stage-el .thread-col, body.staged .stage-el.compose, body.staged .stage-el.thread, body.staged .stage-el.person {
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
body.staged .stage-el::before, body.staged .stage-el::after,
body.staged .stage-el .page::before, body.staged .stage-el .page::after, body.staged .stage-el .account::before, body.staged .stage-el .account::after,
body.staged .stage-el .compose::before, body.staged .stage-el .compose::after, body.staged .stage-el .person-head::before, body.staged .stage-el .person-head::after,
body.staged .stage-el .thread-col::before, body.staged .stage-el .thread-col::after { display: none !important; }
body.staged dialog.stage-el::before, body.staged dialog.stage-el::after { display: block !important; }
.stage-chrome { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.pane-glass {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 30px;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.pane-glass::before, .pane-glass::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none; background: var(--rim-light);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: grim 9s linear infinite;
}
.pane-glass::before { inset: 0; padding: 1.6px; }
.pane-glass::after { inset: -7px; padding: 9px; z-index: -1; filter: blur(9px); opacity: .75; }
.pane-glass:nth-child(2)::before, .pane-glass:nth-child(2)::after { animation-delay: -3.5s; }
/* Panes: content padding only, glass behind. */
body.staged .stage-el.hero-intro { padding: 30px 36px 28px; border-radius: 30px; }
body.staged .stage-el.hero-intro .filters-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
body.staged .stage-el.hero-intro .stage-cta { display: flex; gap: 16px; align-items: center; margin-top: 18px; }
body.staged .stage-el.hero-intro .title { font-size: clamp(34px, 3.2vw, 52px); line-height: 1.05; }
body.staged .stage-el.leafnav { display: block !important; padding: 18px 22px 16px; }
body.staged:not(.stage-nav) .leafnav { display: none !important; }
body.staged .stage-fill { overflow-y: auto; overscroll-behavior: contain; padding: 30px 34px 28px !important; border-radius: 30px; scrollbar-width: thin; scrollbar-color: rgba(47,93,58,.35) transparent; }
body.staged .stage-fill > .page, body.staged .stage-fill > .account { padding: 0 !important; margin: 0 !important; max-width: none; }
body.staged .stage-fill.thread { display: block; }
body.staged .stage-fill .thread-photos { position: static; }
body.staged .stage-fill .thread-col { padding: 0; }
/* The print row: stands on the wood, slides along the table. */
body.staged .stage-row {
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 22px; padding: 0 0 0 4px !important;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px);
}
body.staged .stage-row::-webkit-scrollbar { display: none; }
body.staged .stage-row .stand { flex: none; }
body.staged .hero { min-height: 0; padding: 0; }
body.staged .stands-rest, body.staged .feed-foot { display: none; }
body.staged .rim { z-index: 8; }
body.staged:not(.is-rim) .rim { display: none; }
/* Light and shadow on the wood under each pane. */
.stage-floor { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.stage-floor > div { position: absolute; left: 0; top: 0; width: 200px; height: 100px; transform-origin: 0 0; }
.floor-glow {
  background: radial-gradient(50% 60% at 50% 18%, rgba(255,226,160,.55), rgba(255,226,160,.18) 55%, rgba(255,226,160,0) 100%);
  mix-blend-mode: screen; animation: spill 9s ease-in-out infinite;
}
@keyframes spill { 50% { opacity: .7; } }
.floor-row { background: radial-gradient(50% 50% at 50% 30%, rgba(255,240,210,.18), rgba(255,240,210,0)); mix-blend-mode: screen; }
.floor-shadow { background: radial-gradient(50% 50% at 50% 45%, rgba(22,16,6,.75), rgba(22,16,6,.25) 55%, rgba(22,16,6,0) 100%); mix-blend-mode: multiply; filter: blur(2px); }
/* The pot is comped in front of the panes (holdout), so glass can pass behind the plant. */
.stage-pot { position: fixed; left: 0; top: 0; z-index: 7; transform-origin: 0 0; pointer-events: none; max-width: none; }
body.staged dialog.stage-el { inset: 0 auto auto 0 !important; }
@media (prefers-reduced-motion: reduce) { .pane-glass::before, .pane-glass::after, .floor-glow { animation: none; } }
body.staged .stage-el .chip-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font: 600 15px/20px var(--sans); color: var(--ink); background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(30,40,20,.12);
}
body.staged .stage-el .chip-link[aria-current="page"] { background: linear-gradient(180deg, #3f7a4c, #2a5634); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 16px -4px rgba(255,214,140,.7); }
.floor-glow { background: radial-gradient(50% 62% at 50% 16%, rgba(255,222,150,.85), rgba(255,222,150,.28) 50%, rgba(255,222,150,0) 100%); }
body.staged .stage-row .stand-cap { padding: 6px 12px 7px; border-radius: 14px; margin-bottom: 8px; }
body.staged .stage-row .stand-meta { font-size: 14px; line-height: 20px; }
body.staged .stage-row .stand-line { font-size: 15px; line-height: 21px; }
body.staged .stage-el.leafnav, body.staged main .stage-el, body.staged dialog.stage-el { z-index: 7 !important; }
body.staged .stage-el.leafnav .leaf-link { font-size: 18px; padding: 3px 0; }
@media (min-width: 900px) {
  body.staged .stage-fill.thread { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; align-items: start; }
  body.staged .stage-fill.thread--text { grid-template-columns: minmax(0, 1fr); }
  body.staged .stage-fill .thread-photos { position: sticky; top: 0; }
  body.staged .stage-fill .thread-photo img { max-height: 54vh; width: 100%; object-fit: contain; }
}

/* ================================================================ GL STAGE
   stage3d.js draws the plate, glass, prints, thrown light and grade in one
   canvas between the scene and the HTML. These rules retire the CSS stand-ins
   only once it has painted (body.gl); without WebGL the CSS stage remains. */
.stage-gl { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .9s ease; display: block; }
body.gl .stage-gl { opacity: 1; }
body.gl .stage-chrome, body.gl .stage-floor, body.gl .print-shade, body.gl .stage-pot, body.gl .grain, body.gl .daylight .sun-bloom { display: none !important; }
body.gl .stage-row .stand-photo img { opacity: 0 !important; }
body.gl .stage-row .stand-photo::before, body.gl .stage-row .stand-photo::after { display: none !important; }
/* Prints are Polaroids: photo on top, caption written in the bottom margin of the GL board. */
body.gl .stage-row .stand { display: flex; flex-direction: column-reverse; justify-content: flex-start; }
body.gl .stage-row .stand-photo { margin: 0 !important; }
body.gl .stage-row .stand-cap {
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
  border-radius: 0 !important; margin: 0 !important; padding: 8px 2px 10px !important; isolation: auto;
}
body.gl .stage-row .stand-cap::before, body.gl .stage-row .stand-cap::after { display: none !important; }
body.gl .stage-row .stand-meta { color: #5b5648; font-size: 13px; line-height: 18px; }
body.gl .stage-row .stand-meta .stand-who { color: #2c2a22; font-weight: 700; }
body.gl .stage-row .stand-line { color: #2c2a22; font-size: 15px; line-height: 20px; margin-top: 1px; }
/* Phone: the pot stands at the left of the row; the first print starts beside it, not behind it. */
@media (max-aspect-ratio: 3/4) { body.gl .stage-row { padding-left: 27vw !important; } }
/* GL entrance: nothing half-built shows. The canvas opens from the page's warm white
   (it draws that veil itself), then the glass and words fade in over the settled scene. */
body.gl-pending { background: #f2eee3; }
body.gl-pending .daylight, body.gl-pending .scene, body.gl-pending .tabletop { opacity: 0 !important; }
body.gl-pending:not(.gl) main, body.gl-pending:not(.gl) .leafnav, body.gl-pending:not(.gl) .top, body.gl-pending:not(.gl) .stage-pot { opacity: 0; transition: none; }
body.gl.gl-pending main, body.gl.gl-pending .leafnav, body.gl.gl-pending .top { opacity: 1; transition: opacity 1s ease .7s; }
body[data-view="loading"] .top { opacity: 0; }
body.gl .stage-gl { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { body.gl.gl-pending main, body.gl.gl-pending .leafnav, body.gl.gl-pending .top { transition: none; } }

/* ================================================================ JUNGLES (logic pass)
   The Table is the front door and the hangout. The pot is the door to your
   jungle. Prints carry where they live. "Pot this" is the one button. */

/* ---- the pot: door to your jungle */
.pot-door { position: fixed; z-index: 8; display: none; text-decoration: none; border-radius: 40% 40% 30% 30%; }
.pot-door.placed { display: block; }
.pot-door-hit { position: absolute; inset: 8% 14% 0; border-radius: inherit; }
.pot-door-label {
  position: absolute; left: 50%; top: var(--label-y, 100%); transform: translateX(-50%);
  white-space: nowrap; padding: 7px 16px 8px; border-radius: 999px;
  font: 700 15px/18px var(--sans); letter-spacing: .01em; color: #fff;
  background: linear-gradient(180deg, rgba(63,122,76,.92), rgba(36,74,46,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(20,30,14,.7), 0 0 22px -6px rgba(255,214,140,.55);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.pot-door:hover .pot-door-label, .pot-door:focus-visible .pot-door-label { transform: translateX(-50%) translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -8px rgba(20,30,14,.75), 0 0 30px -4px rgba(255,214,140,.8); }
.pot-door:focus-visible { outline: none; }
.pot-door:focus-visible .pot-door-label { outline: 3px solid #fff; outline-offset: 3px; }
.pot-door.is-here .pot-door-label { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65)); color: var(--leaf-2); }
body[data-view="loading"] .pot-door, body.gl-pending:not(.gl) .pot-door { opacity: 0; }
body:not(.staged) .pot-door { display: none; }
@media (max-aspect-ratio: 3/4) { .pot-door-label { font-size: 13px; padding: 5px 11px 6px; } }

/* ---- face-down prints on the table */
.draft-layer { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.draft-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: auto; border-radius: 2px;
  background: linear-gradient(135deg, #cfae7e, #b8935f); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
body.gl .draft-card { background: transparent; box-shadow: none; }
.draft-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.drafts-note { position: absolute; left: 0; top: 0; margin: 0; padding: 3px 10px 4px; border-radius: 999px; pointer-events: none;
  font: 600 13px/16px var(--sans); color: #fff; background: rgba(28,34,22,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }

/* ---- the one button */
.btn--pot { min-height: 52px; padding: 0 28px; font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.btn--up .ico, .btn--down .ico { width: 18px; height: 18px; margin-right: 8px; }
.btn--down { color: var(--ink); }

/* ---- where a print lives */
.stand-tag, .pthumb-tag { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 4px; font: 700 12px/18px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--clay); vertical-align: 1px; }
.place-line { color: inherit; }
.place-line .place-name { font-weight: 600; }
.place-line a.place-region { color: inherit; text-decoration: underline; text-decoration-color: rgba(47,93,58,.45); }
.place-line a.place-region:hover { color: var(--leaf); }
.post-place { margin: -8px 0 18px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.nick-link { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--leaf-2); }

/* ---- Pot this: a blank print, where it lives, what it is */
.blank-print {
  display: grid; grid-template-rows: 1fr auto; width: min(100%, 300px); aspect-ratio: 4 / 4.6; padding: 14px 14px 0; border: 0; cursor: pointer;
  background: #fbfaf6; border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -14px rgba(30,40,20,.55), 0 2px 5px rgba(30,40,20,.18);
  transform: rotate(-1.2deg); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.blank-print:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 20px 36px -14px rgba(30,40,20,.6), 0 2px 5px rgba(30,40,20,.18); }
.blank-print-face { display: grid; place-items: center; align-content: center; gap: 10px; background: linear-gradient(160deg, #e8e4da, #d9d3c5); color: var(--ink-2); }
.blank-print-face .ico { width: 34px; height: 34px; stroke-width: 1.6; }
.blank-print-face b { font: 700 18px/22px var(--sans); color: var(--ink); }
.blank-print-foot { padding: 12px 0 16px; font: italic 400 16px/20px var(--serif); color: var(--ink-2); text-align: left; }
.places-pick { border: 0; margin: 22px 0 6px; padding: 0; }
.places-pick legend { padding: 0; margin-bottom: 8px; }
.place-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.place-chip { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font: 600 16px/22px var(--sans); color: var(--ink); background: rgba(255,255,255,.6); border: 1px solid rgba(47,93,58,.25); }
.place-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.place-chip small { font-weight: 400; color: var(--ink-2); font-size: 14px; }
.place-chip.is-on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.place-chip.is-on small { color: #dfe8da; }
.place-chip:focus-within { outline: 3px solid var(--leaf); outline-offset: 2px; }
.place-chip--new { border-style: dashed; color: var(--leaf); }
.place-chip--new:hover { background: rgba(255,255,255,.85); }
.field--nick { margin-top: 18px; }
.input--nick { max-width: 320px; font-family: var(--serif); font-style: italic; font-size: 19px; }

/* ---- place dialog */
.place-form { display: grid; gap: 4px; margin: 8px 0 4px; }
.place-form .field-label { margin-top: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(47,93,58,.3); background: rgba(255,255,255,.6); font: 600 16px/1 var(--sans); cursor: pointer; }
.seg-btn.is-on { background: var(--leaf); border-color: var(--leaf); color: #fff; }

/* ---- the Jungle page */
.jungle-page .person-head { max-width: none; padding-top: 0; }
.person-kicker { margin: 0 0 2px; font: 700 13px/18px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }
.jungle-page .person-handle { margin: -6px 0 14px; }
.jungle-page .owner-row { gap: 10px 14px; margin-bottom: 8px; }
.person-body { display: grid; gap: 30px; margin-top: 26px; }
.place { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: start; }
.stake { position: relative; padding: 14px 16px 16px 18px; border-radius: 6px 6px 6px 6px;
  background: linear-gradient(100deg, #b98a57, #a87a49 60%, #9b6e40); color: #fffaf0;
  box-shadow: inset 0 1px 0 rgba(255,240,210,.45), inset 0 -2px 0 rgba(60,35,15,.25), 0 10px 20px -12px rgba(50,30,10,.6);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 82%); }
.stake::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .22; pointer-events: none;
  background: repeating-linear-gradient(92deg, rgba(60,35,15,.0) 0 7px, rgba(60,35,15,.5) 7px 8px, rgba(60,35,15,0) 8px 19px); }
.stake-name { position: relative; z-index: 1; margin: 0; font: 600 22px/26px var(--serif); text-shadow: 0 1px 0 rgba(60,35,15,.35); overflow-wrap: anywhere; }
.stake-name--small { font-size: 20px; color: var(--ink); text-shadow: none; }
.stake-meta { position: relative; z-index: 1; margin: 6px 0 0; font: 600 13px/18px var(--sans); color: #fbeedb; }
.stake-meta a { color: #fff; }
.stake-edit { position: relative; z-index: 1; margin-top: 8px; padding: 0; min-height: 32px; color: #fff; font-size: 14px; }
.place-row { display: flex; flex-wrap: wrap; gap: 18px 16px; align-items: flex-end; min-height: 120px; }
.plants-index { margin-top: 4px; }
.nick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.nick-chip { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.65); font: italic 400 17px/22px var(--serif); color: var(--leaf-2); text-decoration: none; box-shadow: 0 1px 3px rgba(30,40,20,.12); }
.nick-chip:hover { background: #fff; }
.empty-title { font: 500 30px/36px var(--serif); margin: 0 0 8px; }

/* ---- a print: a small Polaroid */
.pthumb { position: relative; display: grid; width: 150px; padding: 8px 8px 0; background: #fbfaf6; border-radius: 2px; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 22px -12px rgba(30,40,20,.55), 0 1px 3px rgba(30,40,20,.2);
  transform: rotate(var(--tilt, 0deg)); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.pthumb:nth-child(3n+1) { --tilt: -1.3deg; } .pthumb:nth-child(3n+2) { --tilt: .9deg; } .pthumb:nth-child(3n) { --tilt: -.4deg; }
.pthumb:hover, .pthumb:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 30px -14px rgba(30,40,20,.6), 0 1px 3px rgba(30,40,20,.2); }
.pthumb-photo { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #e6e1d6; }
.pthumb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pthumb-photo > .ico { display: block; width: 30px; height: 30px; margin: 40% auto 0; color: var(--ink-2); stroke-width: 1.6; }
.pthumb-words { display: block; padding: 10px; font: 400 14px/19px var(--sans); color: var(--ink-2); overflow: hidden; height: 100%; }
.pthumb-cap { display: grid; padding: 7px 2px 10px; min-height: 48px; }
.pthumb-line { font: italic 400 15px/19px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pthumb-when { font: 600 12px/16px var(--sans); color: var(--ink-2); letter-spacing: .02em; }
.pthumb-tag { position: absolute; top: 14px; left: 14px; }
/* stood up: a brass pin in the corner (only shown in your own jungle) */
.pthumb.is-pinned::before { content: ""; position: absolute; top: -5px; right: 18px; width: 14px; height: 14px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff6d6 0 12%, #d8b04a 30%, #8a6418 75%); box-shadow: 0 3px 4px -1px rgba(40,30,10,.55); }
/* face-down: the kraft back shows; you can still peek */
.pthumb.is-down { background: linear-gradient(135deg, #cdac7c, #b99560); }
.pthumb.is-down .pthumb-photo { filter: saturate(.25) brightness(.85); opacity: .55; }
.pthumb.is-down .pthumb-cap { color: #3f2f18; }
.pthumb.is-down .pthumb-when { color: #5b4526; }
.pthumb-down { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font: 700 13px/16px var(--sans); color: #fff; background: rgba(40,30,15,.72); white-space: nowrap; }
.pthumb-down .ico { width: 14px; height: 14px; }
.pthumb--blank { background: transparent; box-shadow: none; border: 2px dashed rgba(47,93,58,.35); }
.pthumb--blank .pthumb-photo { background: rgba(255,255,255,.35); }
/* one plant across time */
.plant-line { display: flex; flex-wrap: wrap; gap: 26px 20px; align-items: flex-end; margin-top: 10px; }
.plant-line .pthumb { width: 190px; }
.title--plant { font-style: italic; }
@media (max-width: 899px) {
  .place { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stake { justify-self: start; min-width: 60%; }
  .pthumb { width: calc(50% - 8px); }
  .plant-line .pthumb { width: calc(50% - 10px); }
}
/* the old stage nav pane is gone: the pot is the door, the wordmark goes home */
body.staged .leafnav { display: none !important; }

/* ---- the Jungle on the stage: place cards and ghosts in the row */
.placecard { flex: none; align-self: flex-end; display: grid; place-items: center; padding: 10px; border: 0; border-radius: 3px; cursor: pointer; text-decoration: none; text-align: center;
  background: linear-gradient(180deg, #f6f1e5, #ece4d2); color: #2b2a22; box-shadow: 0 10px 18px -12px rgba(40,30,10,.6); }
div.placecard { cursor: default; }
.placecard-words { display: grid; gap: 4px; }
.placecard-name { font: 500 22px/1.1 var(--serif); }
.placecard-meta { font: 700 11px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #7a6d55; }
body.gl .stage-row .placecard { background: transparent; box-shadow: none; }
body.gl .stage-row .placecard-words { opacity: 0; }
.placecard:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ghost-print { flex: none; align-self: flex-end; display: grid; place-items: center; align-content: center; gap: 8px; margin-bottom: 2px; padding: 10px; border-radius: 4px; cursor: pointer; text-decoration: none;
  border: 2px dashed rgba(255,255,255,.75); background: rgba(255,255,255,.14); color: #fff; font: 700 15px/19px var(--sans); text-align: center;
  text-shadow: 0 1px 2px rgba(30,20,5,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background .25s ease, transform .25s ease; }
.ghost-print .ico { width: 26px; height: 26px; stroke-width: 1.8; filter: drop-shadow(0 1px 2px rgba(30,20,5,.4)); }
.ghost-print:hover, .ghost-print:focus-visible { background: rgba(255,255,255,.3); transform: translateY(-3px); }
.stand-nick { font: italic 500 15px/18px var(--serif); color: #2f5d3a; text-decoration: none; }
.stand-nick:hover { text-decoration: underline; }
body.gl .stage-row .stand-meta b.stand-who { color: #2c2a22; }
.jungle-intro .person-kicker { margin-bottom: 0; }
.jungle-intro .title { margin-bottom: 2px; }
.jungle-intro .person-handle { margin: 0 0 10px; font: 600 15px/20px var(--sans); color: var(--ink-2); }
.jungle-intro .person-handle a { color: inherit; }
.jungle-intro .person-bio { margin: 0 0 12px; font: 400 17px/24px var(--sans); }
.jungle-plants { margin-top: 16px; }
.jungle-plants .field-label { margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.jungle-plants .nick-chips { margin-top: 6px; }
.jungle-foot { margin: 12px 0 0; }
body.staged .jungle-page .person-body { display: none; }

/* ---- Pot this: the print on the left, the words on the right */
.compose-left .blank-print { width: 100%; max-width: 280px; }
.compose-preview { display: block; width: 100%; max-height: 52vh; object-fit: contain; border: 10px solid #fbfaf6; border-bottom-width: 34px; border-radius: 2px; background: #fbfaf6;
  box-shadow: 0 14px 30px -14px rgba(30,40,20,.55), 0 2px 5px rgba(30,40,20,.18); transform: rotate(-1deg); }
@media (min-width: 900px) {
  body.staged .stage-fill .compose-form { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 34px; align-items: start; }
  body.staged .stage-fill .compose-left { position: sticky; top: 0; padding-top: 6px; }
  body.staged .stage-fill .compose { max-width: none; }
  body.staged .stage-fill .compose-right .places-pick { margin-top: 10px; }
}
.compose-right .compose-state .state-line { margin-top: 0; }

/* A face-down print you've picked up: you're peeking at the photo, the black back
   frames it. No more skewed "lying flat" photo. */
.thread-photo.is-flat { perspective: none; }
.thread-photo.is-flat .thread-photo-frame { transform: none; padding: 10px; background: #26282a; border-radius: 3px; box-shadow: 0 16px 30px -16px rgba(20,20,10,.7); }
.thread-photo.is-flat .thread-photo-frame img { filter: saturate(.85); }
.flat-label { color: var(--ink); }
.input--nick::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; }

.down-line { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 14px/18px var(--sans); color: #fff; background: #26282a; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.down-line .ico { width: 15px; height: 15px; }
.downs-grid { display: flex; flex-wrap: wrap; gap: 16px 14px; margin: 10px 0 4px; }
.downs-grid .pthumb { width: calc(50% - 7px); max-width: 170px; }
@media (min-aspect-ratio: 3/4) { body.staged .down-line { display: none; } }
@media (max-aspect-ratio: 3/4) {
  body.staged .jungle-intro .jungle-plants, body.staged .jungle-intro .jungle-foot { display: none; }
  body.staged .jungle-intro .person-bio { display: none; }
  body.staged .jungle-intro .title { font-size: 34px; line-height: 38px; }
  body.staged .jungle-intro .cta-row { gap: 10px; }
  body.staged .jungle-intro .btn--pot { min-height: 46px; font-size: 17px; padding: 0 22px; }
}

/* face-down thumbs match the black backs on the table */
.pthumb.is-down { background: #26282a; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 22px -12px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.3); }
.pthumb.is-down .pthumb-photo { filter: saturate(.6) brightness(.8); opacity: .8; }
.pthumb.is-down .pthumb-cap, .pthumb.is-down .pthumb-line { color: #ece6d8; }
.pthumb.is-down .pthumb-when { color: #a59d8c; }
.pthumb-down { background: rgba(20,20,18,.78); }

/* the pot's label arrives with the rest of the UI, never on the blank page */
.pot-door { transition: opacity .6s ease; }
body.gl-pending:not(.gl) .pot-door { opacity: 0 !important; }
body.gl.gl-pending .pot-door, body.gl.gl-pending .draft-layer { opacity: 1; transition: opacity 1s ease .9s; }
body.gl-pending:not(.gl) .draft-layer { opacity: 0; }
body:not(.gl):not(.gl-pending) .pot-door { opacity: 1; }

/* ================================================================ WAYFINDING + TRANSITIONS */
/* "you are here": every place says its name in small caps above the title */
.place-kicker { margin: 0 0 4px; font: 700 13px/18px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.jungle-lede { margin: 6px 0 14px; }
.compose-how { margin: 0 0 4px; font-size: 16px; }
.privacy-credit { margin-top: 26px; font-size: 13px; }

/* the page's own bits fade with the scene change */
.rim { transition: opacity .5s ease; }
body.is-leaving .rim, body.is-leaving .pot-door-label { opacity: 0; }
.pot-door-label { transition: opacity .5s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
body.is-leaving main { pointer-events: none; }

/* ---- the light tour */
@property --x { syntax: '<length>'; inherits: true; initial-value: 50vw; }
@property --y { syntax: '<length>'; inherits: true; initial-value: 50vh; }
@property --rw { syntax: '<length>'; inherits: true; initial-value: 200px; }
@property --rh { syntax: '<length>'; inherits: true; initial-value: 160px; }
.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .6s ease, --x .9s cubic-bezier(.45,.05,.2,1), --y .9s cubic-bezier(.45,.05,.2,1), --rw .9s cubic-bezier(.45,.05,.2,1), --rh .9s cubic-bezier(.45,.05,.2,1); }
.tour.is-on { opacity: 1; }
.tour-shade { position: absolute; inset: 0;
  background: radial-gradient(ellipse var(--rw) var(--rh) at var(--x) var(--y), rgba(255,236,190,.10) 0%, rgba(255,236,190,0) 62%, rgba(14,18,10,.52) 100%); }
.tour-glint { position: absolute; border-radius: 22px; pointer-events: none; transition: left .9s cubic-bezier(.45,.05,.2,1), top .9s cubic-bezier(.45,.05,.2,1), width .9s cubic-bezier(.45,.05,.2,1), height .9s cubic-bezier(.45,.05,.2,1);
  box-shadow: 0 0 0 2px rgba(255,240,205,.85), 0 0 28px 6px rgba(255,214,140,.55), inset 0 0 22px rgba(255,226,170,.35); animation: glint 2.4s ease-in-out infinite; }
@keyframes glint { 50% { box-shadow: 0 0 0 2px rgba(255,240,205,.55), 0 0 42px 12px rgba(255,214,140,.32), inset 0 0 12px rgba(255,226,170,.2); } }
.tour-card { position: absolute; pointer-events: auto; padding: 18px 20px 14px; border-radius: 22px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,253,246,.92), rgba(246,242,230,.9)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 48px -20px rgba(20,28,12,.55), 0 0 0 1px rgba(255,255,255,.5);
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), left .9s cubic-bezier(.45,.05,.2,1), top .9s cubic-bezier(.45,.05,.2,1), bottom .9s cubic-bezier(.45,.05,.2,1); }
.tour-card.is-in { opacity: 1; transform: none; }
.tour-count { margin: 0 0 4px; font: 700 12px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }
.tour-title { margin: 0 0 6px; font: 500 26px/30px var(--serif); }
.tour-body { margin: 0 0 12px; font: 400 17px/24px var(--sans); color: var(--ink-2); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .tour, .tour-card, .tour-glint { transition: opacity .2s ease; animation: none; } }

@media (max-aspect-ratio: 3/4) {
  body.staged .jungle-intro .title { font-size: 28px; line-height: 32px; }
  body.staged .jungle-intro .jungle-lede { font-size: 15px; line-height: 21px; margin: 4px 0 10px; }
  body.staged .jungle-intro .person-handle { margin-bottom: 4px; }
  body.staged .jungle-intro .cta-row .btn { min-height: 42px; }
  body.staged .jungle-intro .down-line { margin-top: 8px; min-height: 36px; }
}

/* ================================================================ THE DOCK
   Three places + one action, resting on the table's front edge. */
:root { --dock-h: 64px; }
.leafnav, .leafnav.stage-el { display: none !important; }
.pot-door { display: none !important; }
.dock {
  position: fixed; z-index: 9; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(246,242,230,.5));
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(120,100,60,.12), 0 0 0 1px rgba(255,255,255,.35),
    0 18px 30px -16px rgba(40,28,10,.65), 0 4px 10px -4px rgba(40,28,10,.3);
  transition: opacity .8s ease .6s, transform .8s cubic-bezier(.2,.8,.2,1) .6s;
}
body.gl-pending:not(.gl) .dock { opacity: 0; transform: translate(-50%, 14px); transition: none; }
body[data-view="loading"] .dock { opacity: 0; }
.dock-sun {
  position: absolute; left: 0; top: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,250,232,.98), rgba(255,236,190,.9) 60%, rgba(255,214,140,.75));
  box-shadow: 0 0 22px -2px rgba(255,206,120,.75), inset 0 1px 0 #fff;
  transition: transform .7s cubic-bezier(.45,.05,.2,1), width .7s cubic-bezier(.45,.05,.2,1), opacity .5s ease;
}
.dock-item {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px;
  border-radius: 999px; text-decoration: none; color: var(--ink); font: 700 16px/20px var(--sans); white-space: nowrap;
  transition: color .3s ease, background .3s ease;
}
.dock-item:hover { background: rgba(255,255,255,.45); }
.dock-item.is-here { color: #2c3b1f; }
.dock-item:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.dock-ico .ico { display: block; width: 22px; height: 22px; stroke-width: 1.8; }
.dock-item--share { margin-left: 6px; padding: 0 22px 0 16px; color: #fff;
  background: linear-gradient(180deg, #3f7a4c, #2a5634); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 18px -4px rgba(255,214,140,.7); }
.dock-item--share:hover { background: linear-gradient(180deg, #468657, #2f5f3a); }
.dock-item--share.is-here { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 26px -2px rgba(255,214,140,.95); }
.dock-item--share .ico { stroke-width: 2.4; }
/* the reply bar on a photo sits just above the dock */
body.staged .rim { bottom: calc(var(--dock-h) + 30px); }
/* the old pot made room on the phone row; the row starts at the edge now */
@media (max-aspect-ratio: 3/4) { body.gl .stage-row { padding-left: 4px !important; } }

@media (max-width: 720px) {
  :root { --dock-h: 66px; }
  .dock { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); transform: none; justify-content: space-between; gap: 2px; padding: 5px; border-radius: 26px; }
  body.gl-pending:not(.gl) .dock { transform: translateY(14px); }
  .dock-sun { border-radius: 20px; }
  .dock-item { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; border-radius: 20px; font-size: 12px; line-height: 14px; }
  .dock-item--share { margin-left: 2px; padding: 4px 2px; }
  .dock-label { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .dock, .dock-sun { transition: none; } }

.stage-pot { display: none !important; }

/* ================================================================ NO-BRAINER PASS (10/26) */
/* private photos are just photos with a lock tag: never black backs */
.pthumb.is-down { background: var(--day); }
.pthumb.is-down .pthumb-photo, .pthumb.is-down .pthumb-photo img { filter: none !important; opacity: 1 !important; background: none !important; }
.pthumb.is-down .pthumb-cap { color: var(--ink); }
.pthumb.is-down .pthumb-when { color: var(--ink-2); }
.pthumb-down { background: rgba(28,32,24,.78) !important; color: #fff !important; }
.thread-photo .flat-label { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 700 14px/18px var(--sans); color: var(--ink-2); }
.stand-tag--mine { display: inline-flex; align-items: center; gap: 3px; background: rgba(28,32,24,.82) !important; color: #fff !important; }
.stand-tag--mine .ico { width: 11px; height: 11px; }
.down-line, .draft-layer { display: none !important; }

/* who sees it: one plain choice */
.who-pick { border: 0; margin: 4px 0 0; padding: 0; }
.who-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.who-chip { position: relative; display: grid; gap: 2px; padding: 10px 12px; min-height: 52px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(60,70,50,.22); background: rgba(255,255,255,.55); }
.who-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.who-chip span { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/20px var(--sans); color: var(--ink); }
.who-chip span .ico { width: 17px; height: 17px; }
.who-chip small { font: 400 13px/16px var(--sans); color: var(--ink-2); }
.who-chip.is-on { border-color: var(--leaf); background: var(--leaf); }
.who-chip.is-on span, .who-chip.is-on small { color: #fff; }
.who-chip:has(input:focus-visible) { outline: 3px solid var(--leaf); outline-offset: 2px; }
.place-chip input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* the keyboard floats over the page: the dock steps aside, the reply bar rides above it */
body.typing .dock, body.kb-open .dock { opacity: 0 !important; pointer-events: none; transform: translate(-50%, 30px); }
@media (max-width: 720px) { body.typing .dock, body.kb-open .dock { transform: translateY(30px); } }
body.kb-open.staged .rim { bottom: calc(var(--kb, 0px) + 6px) !important; }

/* phone: glass pages scroll clear of the dock (and the reply bar on a photo) */
@media (max-width: 720px) {
  body.staged .stage-fill { padding-bottom: calc(var(--dock-h) + 34px) !important; scroll-padding-bottom: calc(var(--dock-h) + 34px); }
  body.staged.is-rim .stage-fill { padding-bottom: calc(var(--dock-h) + var(--rim, 64px) + 48px) !important; }
  body.staged.kb-open .stage-fill { padding-bottom: calc(var(--kb, 0px) + 24px) !important; }
}

/* a private photo has its action in the pane: no reply bar on top of it */
body.staged .rim:has(.rim-note) { display: none !important; }
@media (max-width: 720px) { body.staged.is-rim:has(.rim .rim-note) .stage-fill { padding-bottom: calc(var(--dock-h) + 34px) !important; } }

/* desktop: who-sees-it + the button ride in a frosted strip along the pane's foot */
@media (min-width: 900px) {
  body.staged .stage-fill .compose-foot { grid-column: 1 / -1; position: sticky; bottom: -28px; z-index: 2; margin: 6px -34px -28px; padding: 14px 34px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border-radius: 0 0 30px 30px;
    background: rgba(247,244,234,.82); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    border-top: 1px solid rgba(255,255,255,.75); }
  body.staged .stage-fill .compose-foot .who-pick { display: flex; align-items: center; gap: 10px; margin: 0; }
  body.staged .stage-fill .compose-foot .who-pick[hidden] { display: none; }
  body.staged .stage-fill .compose-foot .who-pick legend { float: left; margin: 0 2px 0 0; padding: 0; }
  body.staged .stage-fill .compose-foot .who-chips { display: flex; gap: 6px; }
  body.staged .stage-fill .compose-foot .who-chip { min-height: 40px; padding: 8px 12px; }
  body.staged .stage-fill .compose-foot .who-chip small { display: none; }
  body.staged .stage-fill .compose-foot .compose-actions { margin: 0 0 0 auto; flex-wrap: nowrap; }
  body.staged .stage-fill .compose-foot > p:empty { display: none; }
  body.staged .stage-fill .compose-foot > p { flex-basis: 100%; margin: 0; }
}

/* plant names: "Looks like" / "Could be" under the photo */
.assist { border-top: 0; padding-top: 4px; }
.assist-looking { display: flex; align-items: center; gap: 10px; font: 600 15px/20px var(--sans); color: var(--ink-2); }
.assist-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(47,93,58,.25); border-top-color: var(--leaf); animation: assist-spin .9s linear infinite; }
@keyframes assist-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .assist-spin { animation: none; } }
.assist-kicker { margin: 4px 0 6px; font: 700 12px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--clay, #9a5a32); }
.assist-names { display: flex; flex-wrap: wrap; gap: 6px; }
.assist-name { display: grid; text-align: left; gap: 1px; padding: 8px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(60,70,50,.22); background: rgba(255,255,255,.6); color: var(--ink); }
.assist-name b { font: 700 16px/20px var(--sans); }
.assist-name i { font: italic 400 13px/16px var(--serif); color: var(--ink-2); }
.assist-name.is-sure { border-color: var(--leaf); background: rgba(47,93,58,.09); }
.assist-name.is-sure b { font: 600 20px/24px var(--serif); }
.assist-name:hover, .assist-name:focus-visible { border-color: var(--leaf); }
.assist-name.is-used { background: var(--leaf); border-color: var(--leaf); }
.assist-name.is-used b, .assist-name.is-used i { color: #fff; }
.assist-tip { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font: 400 15px/20px var(--sans); color: var(--ink); }
.assist-tip .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--leaf); }

/* Native: let the world reach every pixel, but keep controls clear of iOS chrome. */
@media (max-width: 720px) {
  body.native .top {
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  body.native.staged .rim {
    bottom: calc(var(--dock-h) + 30px + env(safe-area-inset-bottom, 0px));
  }
  body.native.staged .stage-fill {
    scroll-padding-bottom: calc(var(--dock-h) + 34px + env(safe-area-inset-bottom, 0px));
  }
}


/* Pot this: which plant it is, and which of the three places it goes */
.pot-plant { margin: 14px 0 4px; }
.plant-faces { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.plant-faces::-webkit-scrollbar { display: none; }
.plant-face { flex: none; display: grid; justify-items: center; gap: 6px; width: 74px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
.plant-face-photo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.62); border: 2px solid rgba(60,70,50,.18); box-shadow: 0 2px 6px rgba(20,30,15,.15); transition: transform .2s ease, box-shadow .2s ease; }
.plant-face-photo img { width: 100%; height: 100%; object-fit: cover; }
.plant-face-photo .ico { width: 24px; height: 24px; color: var(--leaf); }
.plant-face-name { font: 600 13px/16px var(--sans); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plant-face.is-on .plant-face-photo { border: 3px solid var(--leaf); box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 5px 12px rgba(20,40,20,.3); transform: scale(1.06); }
.plant-face.is-on .plant-face-name { color: var(--leaf); font-weight: 800; }
.plant-face--new .plant-face-photo { border-style: dashed; background: rgba(255,255,255,.35); box-shadow: none; }
.plant-name { margin-top: 6px; }
.pot-plant .assist { margin-top: 8px; }
.dest-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(40,52,36,.1); }
.dest-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 6px; border-radius: 999px; cursor: pointer;
  font: 700 15px/18px var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.dest-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dest-opt .ico { width: 16px; height: 16px; flex: none; }
.dest-opt.is-on { background: var(--leaf); color: #fff; box-shadow: 0 2px 8px rgba(20,50,25,.3); }
.dest-opt:has(input:focus-visible) { outline: 3px solid var(--leaf); outline-offset: 2px; }
.dest-note { margin: 8px 0 0; text-align: center; font: 600 14px/18px var(--sans); color: var(--ink-2); }
.post-where { margin: 16px 0 4px; }
.post-where .field-label { margin-bottom: 6px; }
.dest-seg--small .dest-opt { min-height: 38px; font-size: 13px; gap: 4px; }
.dest-seg--small .dest-opt .ico { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .compose--pot .compose-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; }
  .compose--pot .pot-go { justify-content: center; min-height: 54px; font-size: 17px; }
  .compose--pot .compose-actions .textbtn { align-self: center; }
}

/* Gardens: shared semantic layout. The web keeps the existing projected glass pane. */
.garden-page, .plant-page, .garden-join { text-align: center; }
.garden-title { margin: 0 0 20px; }
.garden-people { display: flex; justify-content: safe center; gap: 14px; overflow-x: auto; padding: 4px 8px; }
.garden-person { display: grid; justify-items: center; align-content: start; gap: 4px; flex: 0 0 50px; width: 50px; padding: 0; background: none; border: 0; text-decoration: none; color: inherit; font: 600 12px/14px var(--sans); }
.garden-person > span:last-child { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-face { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #f3edda; border-radius: 50%; background: #315c40; color: #f7f0da; }
.person-face img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.person-face.has-new::after { content: ''; position: absolute; right: -2px; top: -1px; width: 11px; height: 11px; border-radius: 50%; background: #ffcf6b; border: 2px solid #183b29; box-shadow: 0 0 10px #ffcf6b; }
.garden-person--invite .person-face { border-style: dashed; font: 400 24px/1 var(--sans); background: transparent; color: inherit; }
.garden-invite-pill { border: 1px solid currentColor; background: rgba(28,71,54,.16); color: inherit; border-radius: 30px; padding: 10px 20px; font: 600 15px/22px var(--sans); }
.garden-content { margin-top: 30px; }
/* pots wrap in rows of three; a short last row (or a small garden) sits centred */
.garden-pots { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; max-width: 372px; margin-inline: auto; padding: 4px 6px 50px; }
.garden-pot { flex: 0 0 min(112px, calc((100% - 24px) / 3)); display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.garden-pot:nth-child(3n+2) { transform: translateY(46px); }
.garden-face { position: relative; display: grid; place-items: center; width: min(104px,100%); aspect-ratio: 1; border-radius: 50%; background: #315c40; box-shadow: 0 0 0 3px #f3edda,0 14px 26px -6px rgba(0,0,0,.4),0 0 42px -6px rgba(255,205,120,.25); }
.garden-face > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; border-radius: 50%; }
.garden-face > .ico { width: 42px; height: 42px; color: #cfe8c0; }
.garden-count { position: absolute; right: -4px; bottom: 2px; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 11px; background: #f3edda; color: #183b29; font: 800 12px/22px var(--sans); }
.garden-plant-name { margin-top: 9px; max-width: 100%; overflow-wrap: anywhere; font: 600 25px/25px 'PotThis Pen',var(--serif); }
.garden-age { display: flex; align-items: center; justify-content: center; gap: 3px; font: 500 12px/15px var(--sans); opacity: .72; }
.garden-age .ico { width: 10px; height: 10px; }
.garden-pot--new .garden-face { background: transparent; box-shadow: none; border: 2px dashed currentColor; font: 300 40px/1 var(--sans); }
.garden-roll-link { display: block; margin: 22px auto; font-size: 14px; color: inherit; }
.garden-first { margin: 12px auto 24px; }
.garden-loose { margin: 24px 0; }
.garden-loose h2 { font: 500 22px/28px var(--serif); }
.garden-loose-row { display: flex; gap: 18px; overflow-x: auto; padding: 16px 12px; }
.garden-loose-print { flex: 0 0 130px; padding: 7px 7px 14px; background: #fbf8ee; border-radius: 3px; color: #2c3a33; text-decoration: none; transform: rotate(-2deg); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.garden-loose-print:nth-child(even) { transform: rotate(2deg); }
.garden-loose-print img { width: 116px; height: 126px; object-fit: cover; }
.loose-text { display: block; height: 126px; padding: 6px; overflow: hidden; font-size: 14px; }
.loose-caption { display: flex; gap: 4px; align-items: center; justify-content: center; font: 600 20px/24px 'PotThis Pen',var(--serif); margin-top: 6px; }
.loose-caption .ico { width: 12px; height: 12px; }
.garden-back, .garden-more { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 42px; padding: 0 14px; margin-bottom: 18px; border-radius: 999px; border: 1px solid rgba(100,110,90,.4); background: rgba(35,65,45,.14); color: inherit; font: 600 15px/20px var(--sans); text-decoration: none; }
.garden-more { width: 46px; height: 46px; padding: 0; font-size: 25px; float: right; }
.plant-title { margin: 0; }
.plant-sub { margin: 10px auto 42px; }
.growth-print { position: relative; display: block; margin: 0 auto; width: min(300px,85%); padding: 12px 12px 50px; background: #fbf8ee; border-radius: 3px; transform: rotate(-1.2deg); color: #2c3a33; text-decoration: none; box-shadow: 0 30px 50px -18px rgba(0,0,0,.65),0 0 60px -10px rgba(255,214,140,.25); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.growth-photo { position: relative; display: block; width: 100%; aspect-ratio: 276/318; overflow: hidden; background: #24352b; }
.growth-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.growth-caption { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.growth-caption b { font: 600 30px/34px 'PotThis Pen',var(--serif); }
.growth-caption small { font: 400 17px/1 'PotThis Note',var(--sans); color: #5b6a62; }
.growth-peg { position: absolute; z-index: 2; left: 50%; top: -24px; width: 18px; height: 50px; transform: translateX(-50%); background: url('/community/art/peg-a.webp') center/contain no-repeat; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); }
.growth-scrub { max-width: 500px; margin: 34px auto 0; }
.growth-strip { position: relative; display: flex; height: 46px; gap: 3px; padding: 4px; border-radius: 14px; border: 1px solid rgba(100,110,90,.5); background: rgba(25,45,30,.2); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.growth-thumb { flex: 1; min-width: 0; border-radius: 6px; overflow: hidden; opacity: .55; }
.growth-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.growth-thumb.is-current { opacity: 1; box-shadow: 0 0 0 2px #f3edda; }
.growth-head { position: absolute; top: -8px; bottom: -8px; width: 4px; transform: translateX(-50%); border-radius: 2px; background: #ffe7a8; box-shadow: 0 0 14px #ffcf6b,0 0 3px #fff; pointer-events: none; }
.growth-ends { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; font: 600 13px/20px var(--sans); }
.growth-ends b { font: 600 20px/22px 'PotThis Pen',var(--serif); }
.growth-hint { margin: 16px 0; font: 600 13px/20px var(--sans); opacity: .7; }
.garden-sheet { position: fixed; inset: auto 10px 10px; margin: 0 auto; width: calc(100% - 20px); max-width: 520px; max-height: calc(100dvh - 60px); overflow-y: auto; padding: 26px 24px 22px; border: 0; border-radius: 34px; text-align: center; color: #20302a; background: rgba(247,244,234,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
.garden-sheet::backdrop { background: rgba(4,10,6,.55); }
.garden-sheet::before, .garden-sheet::after { display: none; }
.sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.18); margin: -12px auto 18px; }
.sheet-close { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; background: none; border: 0; font-size: 25px; color: #5b6a62; }
.garden-sheet h2 { margin: 16px 0 0; font: 600 32px/1.05 'PotThis Display',var(--serif); color: #1c2a23; }
.garden-sheet p { margin: 12px 0; font: 500 16px/23px var(--sans); }
.garden-sheet p:empty { display: none; }
.garden-sheet .invite-send { margin: 20px auto 10px; width: 100%; min-height: 56px; font: 700 18px/22px var(--sans); background: linear-gradient(145deg,#3a7352,#1b402f); color: #fff9e9; }
.garden-sheet small { display: block; font: 500 13px/18px var(--sans); color: #6a776f; }
.invite-covers { display: flex; justify-content: center; margin: 18px 0 14px; }
.invite-covers > span { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; margin: 0 -9px; box-shadow: 0 6px 14px rgba(0,0,0,.25); background: #315c40; }
.invite-covers img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.plant-edit { display: grid; gap: 16px; text-align: left; }
.plant-edit h2 { margin-bottom: 8px; }
.plant-edit label { display: grid; gap: 6px; }
.plant-edit .plant-private { display: flex; align-items: center; }
.plant-edit .plant-private .ico { width: 14px; height: 14px; }
.join-stack { position: relative; height: 280px; width: 0; margin: 16px auto 18px; }
.join-print { position: absolute; left: -96px; top: 0; width: 192px; height: 228px; padding: 10px 10px 46px; background: #fbf8ee; border-radius: 3px; box-shadow: 0 24px 40px -16px rgba(0,0,0,.75); }
.join-print--0 { transform: translate(-64px,22px) rotate(-12deg); }
.join-print--1 { transform: translate(66px,16px) rotate(10deg); }
.join-print--2 { transform: rotate(-1deg); }
.join-tint { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 60%,rgba(140,200,120,.25),transparent 70%),linear-gradient(160deg,var(--t1,#39604a),var(--t2,#1f3b2d)); }
.join-tint .ico { width: 50px; height: 50px; color: #cfe8c0; opacity: .55; }
.join-caption { position: absolute; left: 0; right: 0; bottom: 6px; font: 600 26px/30px 'PotThis Pen',var(--serif); color: #2c3a33; }
.join-title { margin: 0 auto 24px; }
.join-lede { margin: 0 auto 34px; font: 500 16px/22px var(--sans); }
.join-accept { min-height: 58px; padding: 0 34px; font-size: 18px; }
.join-later { display: block; width: fit-content; margin: 22px auto 0; color: inherit; text-underline-offset: 4px; }
.just-me-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(40,52,36,.25); background: transparent; border-radius: 22px; padding: 4px 12px; font: 600 13px/20px var(--sans); color: var(--ink); }
.just-me-chip .ico { width: 12px; height: 12px; }
.just-me-chip[aria-pressed="true"] { background: #1c4736; color: #fff9e9; }
.compose-actions:has(.roll-count) { flex-wrap: wrap; }
.roll-count { flex: 0 0 100%; margin: 0; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .growth-photo img, .growth-head { transition: none !important; } }
/* the sheet's close is a soft round button; the ring only shows for keyboard focus */
.sheet-close { border-radius: 50%; display: grid; place-items: center; line-height: 1; }
.sheet-close:focus { outline: none; }
.sheet-close:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.sheet-close:active { background: rgba(32,48,42,.08); }

/* Jungle-first composer: web retains its projected pane and file inputs. */
.jungle-compose { text-align: center; }
.jungle-compose [hidden] { display: none !important; }
.jungle-tools { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 30px; }
.jungle-close, .jungle-retake { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(80,95,75,.35); background: rgba(255,255,255,.2); color: inherit; font: 600 15px/1 var(--sans); }
.jungle-close { width: 44px; padding: 0; }
.jungle-tools .ico { width: 18px; height: 18px; }
.jungle-form { display: block; }
.jungle-print { position: relative; width: 228px; max-width: 80%; margin: 28px auto; padding: 10px 10px 0; border-radius: 2px; background: #fbf8ee; color: #2c3a33; transform: rotate(-1.6deg); box-shadow: 0 24px 40px -18px rgba(0,0,0,.65); }
.jungle-compose .jungle-print .compose-preview { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 208/236; object-fit: cover; margin: 0; border-radius: 0; padding: 0; border: 0; transform: none; box-shadow: none; }
.jungle-caption { display: grid; place-items: center; height: 50px; overflow: hidden; font: 600 27px/1 'PotThis Pen',var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.jungle-caption.is-empty { font: 400 16px/1 'PotThis Note',var(--sans); color: #8a968f; }
.jungle-check { position: absolute; right: -14px; top: -14px; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid #fbf8ee; border-radius: 50%; background: linear-gradient(145deg,#3f7a4c,#22492f); color: #fff9e9; }
.jungle-check .ico { width: 22px; height: 22px; stroke-width: 3; }
.jungle-compose .plant-faces { justify-content: safe center; padding: 8px; }
.jungle-compose .plant-name { margin: 18px auto 0; }
.jungle-compose .plant-name input { text-align: center; }
.jungle-note, .jungle-question { margin: 18px auto; }
.jungle-note textarea { min-height: 52px; height: 52px; resize: none; }
.jungle-question textarea { min-height: 86px; }
.jungle-compose .compose-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 18px; }
.jungle-compose .pot-go { min-height: 54px; }
.jungle-compose .pot-go:disabled { opacity: .45; cursor: default; }
.jungle-audience { border: 0; }
.jungle-lede, .jungle-saved { font: 500 16px/22px var(--sans); }
.jungle-lede b { color: #8b5724; }
.jungle-alternative { font-size: 14px; margin: 26px 0 0; }
.jungle-alternative .textbtn { padding: 0; min-height: 32px; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jungle-later { text-decoration: underline; text-underline-offset: 5px; }
.jungle-compose .jungle-suggestion { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 10px auto 0; min-height: 34px; padding: 4px 14px; border-radius: 999px; border: 0; color: #183b29; background: #f3edda; font: 600 14px/20px var(--sans); }
.jungle-suggestion i { color: inherit; font: italic 500 14px/20px var(--sans); }
.jungle-compose > .form-error { margin: 14px auto; max-width: 35em; }
.jungle-compose > .quiet-status:empty { display: none; }
.jungle-compose .roll-count { font: 400 16px/20px 'PotThis Note',var(--sans); }
@media (min-width: 900px) {
  body:not(.living-study) .jungle-form { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(0,1.4fr); gap: 24px; align-items: start; }
  body:not(.living-study) .jungle-tools { margin-bottom: 16px; }
  body:not(.living-study) .jungle-compose .compose-photo { margin: 20px 0 0; }
  body:not(.living-study) .jungle-print { margin: 0 auto; max-width: 100%; }
  body:not(.living-study) .jungle-body .title { margin: 0 0 12px; font-size: 34px; line-height: 1.1; }
  body:not(.living-study) .jungle-body .plant-faces { padding: 5px 4px; }
  body:not(.living-study) .jungle-body .jungle-note { margin: 12px 0; }
  body:not(.living-study) .jungle-body .compose-actions { gap: 12px; margin-top: 14px; }
  body:not(.living-study) .jungle-saved { margin: 8px 0 14px; }
  body:not(.living-study) .jungle-alternative { margin-top: 14px; }
}