/* ===========================================================================
   BELLIO — a members' network.

   The note I kept ignoring: stop building square structures. So there is no
   left wall of navigation, no right column of boxes, and not one rectangular
   card in the feed.

   The shape language is architectural rather than software: ARCHES. Every
   photograph stands under one, every control is a circle or a capsule, every
   panel is a rounded niche. Arches are the vocabulary of the places this
   membership actually goes — colonnades, orangeries, hotel loggias — and
   they are the opposite of a grid of boxes.

   Ivory plaster, espresso ink, one cognac accent. Jost throughout.
   =========================================================================== */
:root{
  --plaster:#F4F0E9;        /* the wall */
  --plaster-2:#EDE7DD;
  --niche:#FFFDFA;          /* a recess in it */
  --shade:#E7E0D4;

  --ink:#241F1C;
  --ink-2:#5E554E;
  --ink-3:#8E847A;
  --ink-4:#B6ADA2;

  --cognac:#A85D2E;
  --cognac-2:#8A4A23;
  --cognac-sf:#F7E9DD;
  --olive:#5F6B45;

  --ln:#E2DACD;
  --ln-2:#D2C8B7;

  --u:"Jost",-apple-system,"Segoe UI",sans-serif;
  --e:cubic-bezier(.22,.72,.28,1);
  --sp:linear(0,.009 1.6%,.035 3.3%,.142 6.9%,.317 10.9%,.704 18.5%,.892 22.4%,
    1.022 26.1%,1.077 28.3%,1.107 30.6%,1.112 33.2%,1.095 36.1%,1.061 39.5%,
    .988 46.1%,.965 49.2%,.953 52.9%,.954 57.3%,.966 62.2%,1.001 72.4%,1.014 79.3%,1.001 94.1%,1);

  --cast:0 2px 4px rgba(60,46,32,.04), 0 18px 40px -20px rgba(60,46,32,.22);
  --cast-2:0 4px 10px rgba(60,46,32,.06), 0 40px 70px -26px rgba(60,46,32,.3);
  --cast-3:0 8px 20px rgba(60,46,32,.1), 0 60px 110px -30px rgba(60,46,32,.4);

  /* the arch: a half-round head on a straight body */
  --arch:999px 999px 36px 36px / 46% 46% 36px 36px;
  --arch-sm:999px 999px 24px 24px / 50% 50% 24px 24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--plaster);color:var(--ink);font-family:var(--u);font-size:15.5px;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;padding-bottom:120px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul{list-style:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--cognac-sf)}
:focus-visible{outline:1.5px solid var(--cognac);outline-offset:3px;border-radius:999px}
/* No scroll bars anywhere in Bellio (Danny, 8 Oct 2026: "i hate them
   scroller bars on screen"). Everything still scrolls — wheel, trackpad,
   touch and keys; only the bar is gone. */
html,body,*{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0;display:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.caps{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}

/* light falling across plaster */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70vw 50vw at 84% -14%,rgba(168,93,46,.11),transparent 62%),
    radial-gradient(56vw 44vw at 6% 8%,rgba(95,107,69,.09),transparent 58%),
    radial-gradient(80vw 54vw at 50% 112%,rgba(237,231,221,.9),transparent 64%)}

/* =========================================================== 1. the loggia
   Navigation is a capsule floating at the top, centred. There is no wall. */
.loggia{position:sticky;top:0;z-index:70;display:flex;justify-content:center;padding:18px 16px 0}
.loggia .in{display:flex;align-items:center;gap:6px;height:66px;padding:0 10px 0 22px;
  border-radius:999px;background:rgba(255,253,250,.86);
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:var(--cast);max-width:1080px;width:100%}
.mark{display:flex;align-items:center;gap:11px;flex:none;margin-right:10px}
.mark .seal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--cognac);color:var(--niche);font-size:17px;font-weight:500;letter-spacing:.02em;
  box-shadow:0 6px 16px -6px rgba(168,93,46,.75)}
.mark .wd{font-size:23px;font-weight:400;letter-spacing:.01em}
.loggia nav{display:flex;align-items:center;gap:2px}
.loggia nav a{position:relative;display:flex;align-items:center;gap:9px;height:44px;padding:0 17px;
  border-radius:999px;color:var(--ink-2);font-size:14.5px;font-weight:400;letter-spacing:.01em;
  transition:background .3s var(--e),color .3s var(--e)}
.loggia nav a:hover{background:var(--plaster-2);color:var(--ink)}
.loggia nav a.on{background:var(--ink);color:var(--niche)}
.loggia nav a svg{width:18px;height:18px}
.loggia nav a .n{position:absolute;top:6px;right:10px;min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:var(--cognac);color:#fff;font-size:10px;font-weight:500;
  display:grid;place-items:center}
.loggia .sp{flex:1}
.loggia .ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);
  transition:background .3s var(--e)}
.loggia .ib:hover{background:var(--plaster-2)}
.loggia .me{width:46px;height:46px;border-radius:50%;object-fit:cover;margin-left:4px;
  box-shadow:0 0 0 1.5px var(--ln-2)}

/* ============================================================ 2. the court */
.court{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:40px 20px 0}

.opening{text-align:center;padding:16px 0 42px}
.opening .k{color:var(--ink-3)}
.opening h1{font-size:clamp(32px,4.6vw,52px);font-weight:300;line-height:1.14;letter-spacing:-.015em;
  margin-top:16px}
.opening h1 em{font-style:italic;color:var(--cognac)}
.opening .rule{width:54px;height:1px;background:var(--ln-2);margin:26px auto 0}

/* -------------------------------------------------- 3. a colonnade of faces
   Stories are arches in a row, not a strip of boxes. */
/* One row, always. Auto margins on the first and last pillar centre the
   colonnade while it fits and collapse the moment it does not, so it scrolls
   sideways instead of ever breaking into a second row. */
.colonnade{display:flex;gap:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:0 0 44px}
.colonnade::-webkit-scrollbar{display:none}
.colonnade>:first-child{margin-left:auto}
.colonnade>:last-child{margin-right:auto}
.pillar{width:88px;flex:none;text-align:center;cursor:pointer}
.pillar .arch{position:relative;display:block;width:88px;height:118px;border-radius:var(--arch-sm);
  overflow:hidden;box-shadow:var(--cast);transition:transform .5s var(--sp),box-shadow .5s var(--e)}
.pillar:hover .arch{transform:translateY(-6px);box-shadow:var(--cast-2)}
.pillar .arch img{width:100%;height:100%;object-fit:cover}
.pillar .arch .v{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(36,31,28,.62))}
.pillar .arch .r{position:absolute;inset:0;border-radius:var(--arch-sm);pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--cognac)}
.pillar.seen .arch .r{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.pillar .arch .f{position:absolute;left:0;right:0;bottom:9px;z-index:2}
.pillar .arch .f img{width:26px;height:26px;border-radius:50%;margin:0 auto;border:1.5px solid #fff}
.pillar .nm{display:block;font-size:12.5px;color:var(--ink-2);margin-top:9px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pillar.mine .arch{background:var(--niche);display:grid;place-items:center;box-shadow:var(--cast)}
.pillar.mine .arch .p{width:36px;height:36px;border-radius:50%;border:1px solid var(--ln-2);
  display:grid;place-items:center;color:var(--cognac)}

/* --------------------------------------------------------- 4. the composer
   A capsule, not a panel. */
.quill{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 18px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);margin-bottom:46px;transition:box-shadow .4s var(--e)}
.quill:hover{box-shadow:var(--cast-2)}
.quill>img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.quill .f{flex:1;font-size:17px;font-weight:300;color:var(--ink-4);cursor:text;letter-spacing:.005em}
.quill .tools{display:flex;gap:3px}
.quill .tools button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-3);transition:background .3s var(--e),color .3s var(--e),transform .35s var(--sp)}
.quill .tools button:hover{background:var(--cognac-sf);color:var(--cognac);transform:translateY(-2px)}
.quill .go{height:44px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--niche);
  font-size:14px;font-weight:400;letter-spacing:.02em;transition:background .3s var(--e)}
.quill .go:hover{background:var(--cognac)}

/* ============================================================= 5. a piece
   No card. The photograph is an arch standing on the wall, the words sit
   beneath it, and the controls are circles and capsules. */
.piece{margin-bottom:68px}
.piece .by{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.piece .by .aw{position:relative;flex:none}
.piece .by .aw img{width:50px;height:50px;border-radius:50%;object-fit:cover}
.piece .by .aw i{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;
  background:var(--olive);border:2.5px solid var(--plaster)}
.piece .by .w{flex:1;min-width:0}
.piece .by .n{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:500;letter-spacing:.005em}
.piece .by .m{font-size:13px;color:var(--ink-3);margin-top:1px;display:flex;align-items:center;gap:8px}
.piece .by .m i{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}
.vf{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;flex:none;
  background:var(--cognac)}
.vf svg{width:9px;height:9px;color:#fff;stroke-width:3}
.vf.sm{width:14px;height:14px}
.vf.sm svg{width:8px;height:8px}
.piece .by .fl{height:36px;padding:0 18px;border-radius:999px;border:1px solid var(--ln-2);
  color:var(--ink-2);font-size:13.5px;font-weight:400;flex:none;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e)}
.piece .by .fl:hover{background:var(--ink);color:var(--niche);border-color:var(--ink)}
.piece .by .fl.on{border-color:transparent;background:var(--plaster-2);color:var(--ink-3)}

.piece .words{font-size:17px;line-height:1.7;font-weight:300;letter-spacing:.005em;margin-bottom:22px;
  color:var(--ink-2);max-width:60ch}
.piece .words .tag,.piece .words .at{color:var(--cognac);font-weight:400}
.piece.lead .words{font-size:clamp(22px,2.4vw,30px);line-height:1.42;color:var(--ink);font-weight:300;
  letter-spacing:-.01em;max-width:24ch}

/* the arch itself */
.arcade{position:relative;border-radius:var(--arch);overflow:hidden;background:var(--shade);
  box-shadow:var(--cast-2);transition:transform .6s var(--sp),box-shadow .6s var(--e)}
.piece:hover .arcade{transform:translateY(-4px);box-shadow:var(--cast-3)}
.arcade img{width:100%;display:block;height:clamp(420px,56vw,620px);object-fit:cover}
.arcade .plate{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:8px;height:36px;padding:0 18px;border-radius:999px;
  background:rgba(255,253,250,.92);backdrop-filter:blur(14px);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;box-shadow:var(--cast);white-space:nowrap}
.arcade .plate svg{width:13px;height:13px;color:var(--cognac)}
.arcade .seq{position:absolute;right:18px;top:26px;z-index:2;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,253,250,.92);backdrop-filter:blur(14px);
  font-size:12px;box-shadow:var(--cast)}

/* a pair of arches, and a trio */
.arcade.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none;box-shadow:none;
  border-radius:0;overflow:visible}
.arcade.two img{height:clamp(280px,34vw,400px);border-radius:var(--arch-sm);box-shadow:var(--cast-2)}
.arcade.three{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;background:none;box-shadow:none;
  border-radius:0;overflow:visible;align-items:start}
.arcade.three a{display:block;border-radius:var(--arch-sm);overflow:hidden;box-shadow:var(--cast-2)}
.arcade.three a:first-child{grid-row:span 2}
.arcade.three a:first-child img{height:clamp(360px,44vw,520px)}
.arcade.three img{width:100%;height:clamp(172px,21vw,254px);object-fit:cover;border-radius:0}

/* a question, set as a row of capsules */
.ballot{margin-bottom:4px}
.ballot .o{position:relative;display:block;height:54px;border-radius:999px;overflow:hidden;
  margin-bottom:10px;cursor:pointer;background:var(--niche);box-shadow:var(--cast);
  transition:transform .35s var(--sp)}
.ballot .o:hover{transform:translateX(4px)}
.ballot .o i{position:absolute;left:0;top:0;bottom:0;z-index:0;background:var(--cognac-sf);
  border-radius:999px;transition:width .9s var(--sp)}
.ballot .o span{position:relative;z-index:1;display:flex;align-items:center;height:100%;padding:0 24px;
  font-size:15px;font-weight:400}
.ballot .o span b{margin-left:auto;color:var(--cognac);font-weight:500}
.ballot .mt{font-size:13px;color:var(--ink-3);padding:6px 0 0;text-align:center}

/* an invitation — arched head, in cognac */
.card-inv{border-radius:var(--arch-sm);overflow:hidden;background:var(--cognac);color:#FFF6EF;
  padding:36px 30px 28px;text-align:center;box-shadow:var(--cast-2);position:relative}
.card-inv::before{content:"";position:absolute;left:50%;top:18px;transform:translateX(-50%);
  width:38px;height:1px;background:rgba(255,246,239,.4)}
.card-inv .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.82}
.card-inv h3{font-size:28px;font-weight:300;margin-top:12px;letter-spacing:.01em}
.card-inv p{font-size:14.5px;margin-top:10px;color:rgba(255,246,239,.82);font-weight:300;
  max-width:34ch;margin-inline:auto}
.card-inv .go{margin-top:22px;height:44px;padding:0 26px;border-radius:999px;background:#FFF6EF;
  color:var(--cognac-2);font-size:14px;font-weight:400}
.card-inv .n{margin-top:14px;font-size:12.5px;color:rgba(255,246,239,.8)}

/* -------------------------------------------------- 6. responses + controls
   Everything here is a circle or a capsule. */
.tally{display:flex;align-items:center;gap:11px;margin-top:22px;font-size:13.5px;color:var(--ink-3)}
.tally .faces{display:flex}
.tally .faces span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  background:var(--niche);box-shadow:0 2px 8px rgba(60,46,32,.14)}
.tally .faces span+span{margin-left:-9px}
.tally b{color:var(--ink);font-weight:500}
.tally .sp{flex:1}
.tally .c:hover{color:var(--ink);cursor:pointer}

.controls{display:flex;align-items:center;gap:8px;margin-top:18px}
.controls .btn{display:flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;
  background:var(--niche);color:var(--ink-2);font-size:14.5px;font-weight:400;box-shadow:var(--cast);
  transition:transform .35s var(--sp),box-shadow .35s var(--e),color .3s var(--e),background .3s var(--e)}
.controls .btn:hover{transform:translateY(-2px);box-shadow:var(--cast-2);color:var(--ink)}
.controls .btn svg{width:19px;height:19px}
.controls .round{width:48px;padding:0;justify-content:center}
.controls .keep{margin-left:auto}
.controls .keep.on{color:var(--cognac)}
.controls .keep.on svg{fill:var(--cognac)}
.controls .pass.on{color:var(--olive)}

.react{position:relative}
/* the faces arrive in a fan, highest in the middle */
.fan{position:absolute;left:-8px;bottom:calc(100% + 12px);z-index:40;display:flex;align-items:flex-end;
  gap:2px;padding:9px 12px;border-radius:999px;background:var(--niche);box-shadow:var(--cast-3);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.84);transform-origin:16% bottom;
  transition:opacity .24s var(--e),transform .46s var(--sp),visibility .24s}
.react:hover .fan,.fan:hover,.fan.open{opacity:1;visibility:visible;transform:none}
.fan button{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;line-height:1;padding:0;transition:transform .42s var(--sp)}
.fan button:hover{transform:translateY(-14px) scale(1.45)}
.fan button:active{transform:translateY(-8px) scale(1.2)}
.fan button::after{content:attr(data-name);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(5px);padding:4px 12px;border-radius:999px;background:var(--ink);
  color:var(--niche);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s var(--e),transform .3s var(--sp)}
.fan button:hover::after{opacity:1;transform:translateX(-50%)}
.fan button:nth-child(1),.fan button:nth-child(6){margin-bottom:0}
.fan button:nth-child(2),.fan button:nth-child(5){margin-bottom:7px}
.fan button:nth-child(3),.fan button:nth-child(4){margin-bottom:12px}
.react:hover .fan button,.fan.open button{animation:lift .55s var(--sp) backwards}
.fan button:nth-child(1){animation-delay:.02s}
.fan button:nth-child(2){animation-delay:.05s}
.fan button:nth-child(3){animation-delay:.08s}
.fan button:nth-child(4){animation-delay:.11s}
.fan button:nth-child(5){animation-delay:.14s}
.fan button:nth-child(6){animation-delay:.17s}
@keyframes lift{from{opacity:0;transform:translateY(18px) scale(.35)}to{opacity:1;transform:none}}
.controls .rbtn .emo{font-size:20px;line-height:1;display:none}
.controls .rbtn.picked .emo{display:block}
.controls .rbtn.picked svg{display:none}
.controls .rbtn.picked{color:var(--cognac);background:var(--cognac-sf)}
.fly{position:fixed;z-index:500;font-size:34px;pointer-events:none;animation:fly 1s var(--e) forwards}
@keyframes fly{0%{opacity:0;transform:translateY(0) scale(.5)}
  22%{opacity:1;transform:translateY(-26px) scale(1.55)}
  100%{opacity:0;transform:translateY(-88px) scale(.8)}}

/* ------------------------------------------------------------- 7. remarks */
.remarks{margin-top:26px;padding-left:20px;border-left:1px solid var(--ln)}
.remark{display:flex;gap:13px;margin-bottom:18px}
.remark img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.remark .b{flex:1;min-width:0}
.remark .n{font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:6px}
.remark p{font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:3px;font-weight:300}
.remark .mt{display:flex;gap:18px;margin-top:7px;font-size:12.5px;color:var(--ink-4)}
.remark .mt span:hover{color:var(--cognac);cursor:pointer}
.remarks .all{display:inline-block;font-size:13.5px;color:var(--cognac);margin-bottom:18px;cursor:pointer}
.remarks .add{display:flex;align-items:center;gap:12px}
.remarks .add img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.remarks .add .f{flex:1;height:46px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);
  display:flex;align-items:center;padding:0 20px;font-size:14px;color:var(--ink-4);font-weight:300}
.remarks .add .s{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--niche);flex:none}

/* ------------------------------------------------ 8. an interlude of faces
   What a right rail would have carried, as a row of circles across the court. */
.interlude{text-align:center;margin:0 0 68px}
.interlude .k{color:var(--ink-3);margin-bottom:8px}
.interlude h3{font-size:27px;font-weight:300;letter-spacing:-.005em;margin-bottom:28px}
.interlude .ring{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.interlude .one{width:132px}
.interlude .one img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto;
  box-shadow:var(--cast);transition:transform .5s var(--sp),box-shadow .5s var(--e)}
.interlude .one:hover img{transform:translateY(-5px);box-shadow:var(--cast-2)}
.interlude .one .n{font-size:14.5px;font-weight:500;margin-top:13px;display:flex;align-items:center;
  justify-content:center;gap:5px}
.interlude .one .r{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.interlude .one button{margin-top:11px;height:34px;padding:0 17px;border-radius:999px;
  border:1px solid var(--ln-2);font-size:12.5px;color:var(--ink-2);
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e)}
.interlude .one button:hover{background:var(--ink);color:var(--niche);border-color:var(--ink)}
.interlude .one button.on{background:var(--plaster-2);border-color:transparent;color:var(--ink-3)}

/* ------------------------------------------------------------- 9. the foot */
.foot{text-align:center;padding:30px 20px 10px;color:var(--ink-4);font-size:13px}
.foot .seal{width:46px;height:46px;border-radius:50%;border:1px solid var(--ln-2);display:grid;
  place-items:center;margin:0 auto 18px;color:var(--cognac);font-size:18px}
.foot a:hover{color:var(--cognac)}

/* ---------------------------------------------------------- 10. overlays */
.scrim{position:fixed;inset:0;z-index:200;background:rgba(36,31,28,.42);backdrop-filter:blur(12px);
  display:grid;place-items:center;padding:26px;opacity:0;pointer-events:none;transition:opacity .3s var(--e)}
.scrim.on{opacity:1;pointer-events:auto}
.dlg{width:min(600px,96vw);border-radius:var(--arch-sm);background:var(--niche);box-shadow:var(--cast-3);
  padding:34px 28px 22px;text-align:center;transform:scale(.96) translateY(12px);
  transition:transform .46s var(--sp)}
.scrim.on .dlg{transform:none}
.dlg .k{color:var(--ink-3);margin-bottom:8px}
.dlg h3{font-size:25px;font-weight:300}
.dlg textarea{width:100%;min-height:140px;margin-top:20px;padding:18px 20px;resize:none;outline:0;
  border-radius:26px;background:var(--plaster);font-size:18px;font-weight:300;line-height:1.55;
  color:var(--ink);text-align:left}
.dlg textarea::placeholder{color:var(--ink-4)}
.dlg .f{display:flex;align-items:center;gap:4px;margin-top:16px}
.dlg .f .ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.dlg .f .ib:hover{background:var(--plaster-2);color:var(--cognac)}
.dlg .f .go{margin-left:auto;height:46px;padding:0 26px;border-radius:999px;background:var(--ink);
  color:var(--niche);font-size:14.5px}
.lb{position:fixed;inset:0;z-index:300;background:rgba(36,31,28,.92);backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:34px;opacity:0;pointer-events:none;transition:opacity .3s var(--e)}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:min(1200px,92vw);max-height:88vh;border-radius:var(--arch-sm);transform:scale(.96);
  transition:transform .46s var(--sp)}
.lb.on img{transform:none}
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);z-index:400;
  padding:13px 26px;border-radius:999px;background:var(--ink);color:var(--niche);font-size:14px;
  font-weight:300;letter-spacing:.02em;box-shadow:var(--cast-2);opacity:0;pointer-events:none;
  transition:opacity .25s var(--e),transform .46s var(--sp)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.rise{opacity:0;transform:translateY(20px)}
.rise.in{opacity:1;transform:none;transition:opacity .75s var(--e),transform .85s var(--sp)}

/* ---------------------------------------------------------- 11. narrow */
.tabs{display:none}
@media (max-width:860px){
  .loggia{padding:10px 10px 0}
  .loggia .in{height:60px;padding:0 8px 0 16px}
  .loggia nav{display:none}
  .mark .wd{font-size:20px}
  .court{padding:26px 16px 0}
  .colonnade{margin:0 -16px;padding:0 16px 44px}
  .pillar{flex:none}
  .quill .f{font-size:15px}
  .quill .tools button:nth-child(n+3){display:none}
  .arcade.two,.arcade.three{grid-template-columns:1fr}
  .arcade.three a:first-child{grid-row:auto}
  .arcade.three a:first-child img,.arcade.three img{height:clamp(240px,52vw,340px)}
  .controls .btn{height:44px;padding:0 16px;font-size:13.5px}
  .controls .round{width:44px}
  .tabs{display:flex;align-items:center;justify-content:space-around;position:fixed;left:14px;right:14px;
    bottom:14px;z-index:80;height:70px;padding:0 8px;border-radius:999px;background:rgba(255,253,250,.9);
    backdrop-filter:blur(26px);box-shadow:var(--cast-2)}
  .tabs a{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
    color:var(--ink-3)}
  .tabs a.on{background:var(--ink);color:var(--niche)}
  .tabs a svg{width:22px;height:22px}
  .tabs a .n{position:absolute;top:8px;right:9px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
    background:var(--cognac);color:#fff;font-size:10px;display:grid;place-items:center}
  .tabs .fab{background:var(--cognac);color:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}}

/* ===========================================================================
   12. THE VESTIBULE
   Everything the old left wall carried — Settings, Bookmarks, Communities,
   Events, Lists, Insights, Earnings, Privé, Help — lives behind the seal, and
   so is reachable from every page instead of only the ones that shipped a
   rail. A niche, not a dropdown of rectangles.
   =========================================================================== */
.mebtn{padding:0;border-radius:50%;flex:none;display:flex;line-height:1.6}
.vestibule{position:absolute;right:16px;top:calc(100% + 10px);z-index:90;width:320px;padding:14px;
  border-radius:30px;background:var(--niche);box-shadow:var(--cast-3);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:92% top;
  transition:opacity .22s var(--e),transform .44s var(--sp),visibility .22s}
.vestibule.on{opacity:1;visibility:visible;transform:none}
.vestibule .who{display:flex;align-items:center;gap:13px;padding:10px 14px 16px}
.vestibule .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.vestibule .who span{min-width:0;display:block}
.vestibule .who b{display:block;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.vestibule .who i{display:block;font-style:normal;font-size:13px;color:var(--ink-3)}
.vestibule .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;
  border-top:1px solid var(--ln);padding-top:12px}
.vestibule .vgrid a{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;
  border-radius:999px;font-size:14px;color:var(--ink-2);transition:background .3s var(--e),color .3s var(--e)}
.vestibule .vgrid a:hover{background:var(--plaster-2);color:var(--ink)}
.vestibule .vgrid a svg{width:17px;height:17px;flex:none;color:var(--ink-3)}
.vestibule .vgrid a:hover svg{color:var(--cognac)}
.vestibule .vgrid a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vestibule .vout{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 14px;
  margin-top:10px;border-top:1px solid var(--ln);border-radius:0 0 22px 22px;
  font-size:14px;color:var(--ink-3);padding-top:14px;height:auto;padding-bottom:6px}
.vestibule .vout svg{width:17px;height:17px}
.vestibule .vout:hover{color:var(--cognac)}

/* the composer's attachment, and its question */
.dlg .shot:not(:empty){margin-top:14px;position:relative;border-radius:26px;overflow:hidden;
  box-shadow:var(--cast)}
.dlg .shot img,.dlg .shot video{width:100%;max-height:300px;object-fit:cover;display:block}
.dlg .shot .pox{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,253,250,.94);color:var(--ink);box-shadow:var(--cast)}
.dlg .pollmake{display:block;padding:0;box-shadow:none;text-align:left}
.dlg .shot .pollmake{position:static}
.dlg .pollmake .po{display:block;width:100%;height:50px;margin-bottom:8px;padding:0 20px;
  border-radius:999px;background:var(--plaster);font-size:15px;font-weight:300;outline:0;
  color:var(--ink);text-align:left}
.dlg .pollmake .pox{position:static;display:inline-flex;align-items:center;gap:7px;width:auto;
  height:38px;padding:0 16px;border-radius:999px;background:none;box-shadow:none;color:var(--ink-3);
  font-size:13px}
.dlg .pollmake .pox:hover{color:var(--cognac)}
.dlg .f .cnt{margin-left:auto;font-size:13px;color:var(--ink-3);padding-right:4px}
.dlg .f .cnt.over{color:#B3261E}
.dlg .f .go{margin-left:0}
.dlg .f .cnt:empty+.go{margin-left:auto}

/* a ballot that has been answered stops inviting the hand */
.ballot.voted .o{cursor:default}
.ballot.voted .o:hover{transform:none}

@media (max-width:860px){
  .vestibule{right:10px;left:10px;width:auto}
  .vestibule .vgrid{grid-template-columns:1fr 1fr}
}

/* ===========================================================================
   13. THE SAME SHAPES, AS LINKS
   Half of these controls are real destinations now rather than demonstrations,
   so the rules the mockup wrote for <button> have to hold for <a> too.
   =========================================================================== */
.loggia .ib,.quill .tools a,.remarks .add .s,.card-inv .go,.controls a.btn,.tally a.c,
.interlude .one a{text-decoration:none}
.loggia .ib{text-decoration:none}
.controls a.btn{text-decoration:none}
.tally a.c{color:inherit;text-decoration:none}
.tally a.c:hover{color:var(--ink)}
.quill .tools a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-3);transition:background .3s var(--e),color .3s var(--e),transform .35s var(--sp)}
.quill .tools a:hover{background:var(--cognac-sf);color:var(--cognac);transform:translateY(-2px)}
.remarks .add a.f{text-decoration:none}
.remarks .add a.s{display:grid;place-items:center;text-decoration:none}
.remarks a.all{text-decoration:none}
.remark .mt a{color:inherit;text-decoration:none}
.remark .mt a:hover{color:var(--cognac)}
.piece .by .aw{display:block}
.piece .by .n a{color:inherit;text-decoration:none}
.piece .by .n a:hover{color:var(--cognac)}
.piece .words a.tag,.piece .words a.at{text-decoration:none}
.piece .words a.tag:hover,.piece .words a.at:hover{text-decoration:underline;text-underline-offset:3px}

/* a moving photograph stands under the same arch as a still one */
.arcade video{width:100%;display:block;height:clamp(420px,56vw,620px);object-fit:cover;background:var(--ink)}

/* the opening's second line, when the court has nothing in it yet */
.opening .sub{margin-top:22px;color:var(--ink-3);font-weight:300;font-size:16px;max-width:38ch;
  margin-inline:auto}

/* a quiet caption that divides one kind of content from another */
.divide{text-align:center;margin:0 0 42px;position:relative}
.divide::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ln)}
.divide .k{position:relative;display:inline-block;padding:0 18px;background:var(--plaster);
  color:var(--ink-3)}

/* ===========================================================================
   14. NOTICES — the wire.
   A notice is a capsule with a struck seal on the left. No rows, no table.
   =========================================================================== */
.filters{display:flex;justify-content:center;gap:8px;margin:0 0 40px;flex-wrap:wrap}
.filters button{height:42px;padding:0 22px;border-radius:999px;background:var(--niche);
  box-shadow:var(--cast);color:var(--ink-2);font-size:14px;font-weight:400;
  transition:background .3s var(--e),color .3s var(--e),transform .35s var(--sp)}
.filters button:hover{transform:translateY(-2px)}
.filters button.on{background:var(--ink);color:var(--niche)}

.wire{display:flex;flex-direction:column;gap:12px}
.wire .noti{display:flex;align-items:center;gap:16px;padding:16px 24px 16px 16px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);
  transition:transform .4s var(--sp),box-shadow .4s var(--e)}
.wire .noti:hover{transform:translateX(5px);box-shadow:var(--cast-2)}
.wire .noti.unread{box-shadow:var(--cast),inset 0 0 0 1.5px var(--cognac-sf)}
.wire .noti .ic{width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--cognac-sf);color:var(--cognac-2)}
.wire .noti .ic svg{width:21px;height:21px}
.wire .noti .ic.fo,.wire .noti .ic.re{background:rgba(95,107,69,.13);color:var(--olive)}
.wire .noti .ic.sy{background:var(--plaster-2);color:var(--ink-2)}
.wire .noti .bd{flex:1;min-width:0}
.wire .noti .tx{font-size:15.5px;font-weight:300;line-height:1.5;color:var(--ink-2)}
.wire .noti .tx b{font-weight:500;color:var(--ink)}
.wire .noti .sub{font-size:12.5px;color:var(--ink-4);margin-top:2px}
.wire .noti .avs{display:flex;flex:none}
.wire .noti .avs img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--niche)}
.wire .noti .avs img+img{margin-left:-12px}
.wire .noti .dot{width:8px;height:8px;border-radius:50%;background:var(--cognac);flex:none}

/* the empty room, in the same voice */
.empty{text-align:center;padding:66px 26px;border-radius:var(--arch-sm);background:var(--niche);
  box-shadow:var(--cast)}
.empty .seal{width:62px;height:62px;border-radius:50%;background:var(--cognac-sf);color:var(--cognac);
  display:grid;place-items:center;margin:0 auto 20px}
.empty .seal svg{width:26px;height:26px}
.empty h3{font-size:24px;font-weight:300}
.empty p{color:var(--ink-3);font-weight:300;margin-top:10px;max-width:38ch;margin-inline:auto}
.empty .go{display:inline-flex;align-items:center;height:46px;padding:0 26px;margin-top:22px;
  border-radius:999px;background:var(--ink);color:var(--niche);font-size:14.5px}

/* ===========================================================================
   15. LETTERS — correspondence, not a chat client.
   The list is capsules. A letter opens into the court itself rather than a
   third column, so it works at any width.
   =========================================================================== */
.letters{display:flex;flex-direction:column;gap:10px}
.letters .conv{display:flex;align-items:center;gap:15px;padding:14px 22px 14px 14px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);cursor:pointer;
  transition:transform .4s var(--sp),box-shadow .4s var(--e)}
.letters .conv:hover{transform:translateX(5px);box-shadow:var(--cast-2)}
.letters .conv>img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.letters .conv .bd{flex:1;min-width:0}
.letters .conv .n{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:500}
.letters .conv .p{font-size:14px;color:var(--ink-3);font-weight:300;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.letters .conv .rt{font-size:12.5px;color:var(--ink-4);flex:none}
.letters .conv .cnt{min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--cognac);
  color:#fff;font-size:12px;display:grid;place-items:center;flex:none}

.thread{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.thread .day{text-align:center;color:var(--ink-4);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin:14px 0 4px}
.bub{max-width:78%;padding:14px 20px;border-radius:26px;font-size:15.5px;line-height:1.6;font-weight:300;
  box-shadow:var(--cast);background:var(--niche);align-self:flex-start;border-bottom-left-radius:8px}
.bub.me{align-self:flex-end;background:var(--ink);color:var(--niche);border-bottom-left-radius:26px;
  border-bottom-right-radius:8px}
.bub img{border-radius:18px;margin:-4px 0;max-height:320px;object-fit:cover}
.bub .t{display:block;font-size:11px;margin-top:6px;opacity:.55;letter-spacing:.04em}
.writer{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 22px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);position:sticky;bottom:18px;margin-top:20px}
.writer input{flex:1;font-size:16px;font-weight:300;outline:0;min-width:0}
.writer input::placeholder{color:var(--ink-4)}
.writer .s{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);
  color:var(--niche);flex:none}
.whom{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:34px}
.whom img{width:62px;height:62px;border-radius:50%;object-fit:cover}
.whom .n{font-size:21px;font-weight:400;display:flex;align-items:center;gap:7px}
.whom .r{font-size:13px;color:var(--ink-3)}
.back{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px 0 14px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);color:var(--ink-2);font-size:14px;margin-bottom:26px}
.back:hover{color:var(--ink)}

/* ===========================================================================
   16. DISCOVER — a wall of arches.
   =========================================================================== */
.seek{display:flex;align-items:center;gap:14px;height:66px;padding:0 10px 0 24px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);margin-bottom:40px}
.seek svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.seek input{flex:1;font-size:17px;font-weight:300;outline:0;min-width:0;padding:0 4px;caret-color:var(--cognac)}
.seek input::placeholder{color:var(--ink-4)}
.seek .go{height:46px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--niche);
  font-size:14px;flex:none}
/* Your network, as a map (profile.html?show=network). */
.nmap{position:relative;width:min(640px,100%);aspect-ratio:1;margin:0 auto 10px}
.nmap svg.rings{position:absolute;inset:0;width:100%;height:100%}
.nmap .me{position:absolute;left:50%;top:50%;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;object-fit:cover;
  border:4px solid var(--niche);box-shadow:var(--cast-2);z-index:3}
.nmap .p{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;z-index:2;transition:transform .3s var(--sp),opacity .3s var(--e),filter .3s var(--e)}
.nmap .p img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid var(--niche);box-shadow:var(--cast);display:block}
.nmap .p.f{width:32px;height:32px;margin:-16px 0 0 -16px;opacity:.8}
.nmap .p.f img{border-width:2px}
.nmap .p.dim{opacity:.3;filter:grayscale(1)}
.nmap .p:hover{transform:scale(1.15);opacity:1;filter:none;z-index:3}
.nmap .lab{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);font-size:13px;color:var(--ink-2);white-space:nowrap;z-index:4;cursor:pointer;
  transition:background .25s var(--e),color .25s var(--e)}
.nmap .lab b{font-weight:500;color:var(--ink)}
.nmap .lab.on{background:var(--ink);color:var(--niche)}
.nmap .lab.on b{color:var(--niche)}
.nfigs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:6px 0 34px}
.nfigs div{min-width:132px;padding:18px 16px;border-radius:26px;background:var(--niche);box-shadow:var(--cast);text-align:center}
.nfigs b{display:block;font-size:26px;font-weight:300;color:var(--ink)}
.nfigs span{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.nopen{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:-10px 0 36px}
.nopen .l{width:100%;text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.nopen a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);font-size:13.5px;color:var(--ink-2)}
.nopen a b{color:var(--cognac);font-weight:500}
@media (max-width:640px){
  .nmap .p{width:34px;height:34px;margin:-17px 0 0 -17px}
  .nmap .p.f{width:24px;height:24px;margin:-12px 0 0 -12px}
  .nmap .me{width:76px;height:76px;margin:-38px 0 0 -38px}
  .nmap .lab{height:28px;padding:0 10px;font-size:11.5px}
  .nfigs div{min-width:0;flex:1 1 40%}
}
/* Trust and recommendations (profile About). */
.trust .srow svg{color:var(--cognac)}
.trust .tnote{margin:6px 18px 12px;font-size:12.5px;color:var(--ink-4);font-weight:300}
.recs .rlabel{margin:14px 18px 4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.recs .rec{display:flex;gap:14px;padding:16px 18px;border-radius:24px}
.recs .rec + .rec{border-top:1px solid var(--ln)}
.recs .rec>a>img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:block}
.recs .rec .bd{flex:1;min-width:0}
.recs .rec .who{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;color:var(--ink)}
.recs .rec .how{font-size:13px;color:var(--ink-3);font-weight:300;margin-top:2px}
.recs .rec p{margin-top:9px;font-size:15px;line-height:1.65;color:var(--ink-2);font-weight:300}
.recs .rskills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.recs .rskills span{height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--plaster-2);font-size:12.5px;color:var(--ink-2)}
.recs .racts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.recs .racts .jn{margin:0;height:36px;padding:0 16px;border-radius:999px;background:var(--plaster-2);color:var(--ink-2);
  font:inherit;font-size:13.5px;transition:background .25s var(--e),color .25s var(--e),transform .3s var(--sp)}
.recs .racts .jn:hover{transform:translateY(-1px);color:var(--ink)}
.recs .racts .jn.on{background:var(--ink);color:var(--niche)}
.recs .racts .jn:disabled{opacity:.5}
/* Quietly open to (profile editor). */
.quietf .opento-pick button{display:inline-flex;align-items:center;gap:6px}
.quietf .opento-pick button svg{width:12px;height:12px}
.quietf i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-4)}
.quietf .qnote{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink-4);font-weight:300}
/* Your week (Notices). */
.pulse{text-align:center;margin:-10px 0 40px}
.pulse>.k{color:var(--ink-3);margin-bottom:14px}
.pulse .figs{margin-bottom:16px}
.pulse a.fig{color:var(--ink);transition:transform .35s var(--sp),box-shadow .3s var(--e)}
.pulse a.fig:hover{transform:translateY(-3px);box-shadow:var(--cast-2)}
.pulse .opp{display:inline-flex;align-items:center;gap:10px;max-width:640px;padding:12px 18px;border-radius:999px;background:var(--niche);
  box-shadow:var(--cast);font-size:14px;color:var(--ink-2);text-align:left;line-height:1.45}
.pulse .opp svg{width:16px;height:16px;flex:none;color:var(--cognac)}
.pulse .opp b{font-weight:500;color:var(--cognac);white-space:nowrap}
@media (max-width:640px){.pulse .opp{border-radius:24px}}
/* Private rooms (communities.html). */
.circlehead{display:flex;justify-content:center;gap:8px;margin:-20px 0 22px;flex-wrap:wrap}
.circlehead span{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);font-size:12.5px;color:var(--ink-2)}
.circlehead span svg{width:14px;height:14px}
.circlehead span.cp{background:var(--cognac);color:#FFF6EF}
.waiting .srow .jn{margin-left:6px}
.modes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.modes button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:200px;padding:16px 18px;border-radius:24px;background:var(--niche);box-shadow:var(--cast);text-align:left;cursor:pointer}
.modes button b{font-size:15px;font-weight:500;display:flex;align-items:center;gap:7px}
.modes button b svg{width:15px;height:15px}
.modes button span{font-size:12.5px;color:var(--ink-3);font-weight:300;line-height:1.45}
.modes button.on{background:var(--ink);color:var(--niche)}
.modes button.on span{color:rgba(244,240,233,.7)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;margin:0 auto 34px}
.fields label{display:flex;flex-direction:column;gap:6px;padding:14px 20px;border-radius:24px;background:var(--niche);box-shadow:var(--cast)}
.fields label.wide{grid-column:1/-1}
.fields span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.fields input{font-size:16px;font-weight:300;outline:0;border:0;background:transparent;color:var(--ink)}
.room a.jn{display:inline-flex;align-items:center}
@media (max-width:640px){.fields{grid-template-columns:1fr}.modes button{width:100%}}
/* Vesper, the concierge (explore.html?vesper=1). */
.vgo{margin:-22px 0 40px}
.vq{max-width:640px;margin:-6px auto 34px;text-align:center}
.vq .said{font-size:19px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.vq .by{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cognac)}
.vq .by svg{width:15px;height:15px}
.vchips{margin-bottom:34px}
.pick{display:flex;flex-direction:column;gap:14px}
.pick .one{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:30px;background:var(--niche);box-shadow:var(--cast)}
.pick .one>a>img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;display:block}
.pick .bd{flex:1;min-width:0}
.pick .n{font-size:17px;font-weight:400;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.pick .w{font-size:14px;color:var(--ink-3);font-weight:300;margin-top:3px;line-height:1.5}
.pick .why{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-2);font-weight:300}
.pick .route{display:flex;align-items:center;gap:9px;margin-top:12px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--plaster-2);font-size:13px;color:var(--ink-2);width:fit-content;max-width:100%}
.pick .route img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.pick .route svg{width:16px;height:16px;margin-left:4px;color:var(--ink-3)}
.pick .route b{font-weight:500}
.pick .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pick .acts button{height:38px;padding:0 18px;border-radius:999px;font-size:13.5px;background:var(--plaster-2);color:var(--ink-2)}
.pick .acts button.pri{background:var(--ink);color:var(--niche)}
.pick .acts button.on{background:var(--ink-2);color:var(--niche)}
@media (max-width:640px){
  .pick .one{padding:18px;gap:14px}
  .pick .one>a>img{width:50px;height:50px}
  .chips.vchips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:4px 16px 12px;margin:0 -16px 28px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips.vchips::-webkit-scrollbar{display:none}
  .chips.vchips a{flex:none}
}
/* Advanced search (Bellio Privé): the line beneath the capsule — what members
   are open to, where, verified. Capsules of the same family as .filters. */
.seekform{margin-bottom:40px}
.seekform .seek{margin-bottom:12px}
/* The filter line and its "Open to" choices share one place: the line
   turns into the choices and back — nothing floats over the page. */
.seekby{display:grid}
.seekby .sbrow,.seekby .sbrail{grid-area:1/1;transition:opacity .28s var(--e),transform .4s var(--sp)}
.seekby .sbrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.seekby.picking .sbrow{opacity:0;transform:translateY(-6px);pointer-events:none}
.seekby .sbrail{display:flex;align-items:center;align-self:start;gap:8px;overflow-x:auto;padding:4px 28px 10px;margin:-4px 0 -10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  opacity:0;transform:translateY(6px);pointer-events:none}
.seekby .sbrail::-webkit-scrollbar{display:none}
.seekby .sbrail{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x}
.seekby .sbrail.dragging{cursor:grabbing}
.seekby .sbrail.dragging button{pointer-events:none}
.seekby.picking .sbrail{opacity:1;transform:none;pointer-events:auto}
.seekby .sbrail button{flex:none;height:44px;padding:0 20px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);
  color:var(--ink-2);font-size:14px;white-space:nowrap;transition:background .25s var(--e),color .25s var(--e),transform .35s var(--sp)}
.seekby .sbrail button:hover{transform:translateY(-2px);color:var(--ink)}
.seekby .sbrail button.on{background:var(--ink);color:var(--niche)}
.seekby .sbrail .sbx{width:44px;padding:0;display:grid;place-items:center;color:var(--ink-3)}
.seekby .sbrail .sbx svg{width:15px;height:15px}
/* One capsule family, the same as .filters: light, lifted, no boxes inside. */
.seekby .sbc{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);color:var(--ink-2);font-size:14px;font-weight:400;cursor:pointer;
  transition:transform .35s var(--sp),background .3s var(--e),color .3s var(--e),box-shadow .3s var(--e)}
.seekby .sbc:hover{transform:translateY(-2px)}
.seekby .sbc svg{width:15px;height:15px;color:var(--ink-4);flex:none;transition:color .3s var(--e)}
.seekby .sbc span{color:var(--ink-4);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.seekby .sbc b{font-weight:500;color:var(--ink)}
.seekby .sbc .dn{display:inline-flex;margin-left:-2px}
.seekby .sbc .dn svg{width:13px;height:13px;transform:rotate(90deg);transition:transform .35s var(--sp)}
.seekby .sbc.set svg,.seekby .sbc.set .dn svg{color:var(--cognac)}

/* "Where": the capsule is the field. */
.seekby .sbw{cursor:text}
.seekby .sbw input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);width:118px;padding:0 2px;caret-color:var(--cognac)}
.seekby .sbw input::placeholder{color:var(--ink-2)}
.seekby .sbw:focus-within{box-shadow:var(--cast),0 0 0 1.5px var(--cognac)}
.seekby .sbw:focus-within svg{color:var(--cognac)}
.seekby .tog.on{background:var(--ink);color:var(--niche)}
.seekby .tog.on svg{color:var(--cognac)}
.seekby .sbp{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;
  background:var(--cognac);color:#FFF6EF;font-size:12px;letter-spacing:.06em}
.seekby .sbp svg{width:13px;height:13px}
@media (max-width:640px){
  .seekby .sbrow{gap:8px}
  .seekby .sbc{height:42px;padding:0 16px;font-size:13.5px}
  .seekby .sbc span{display:none}
  .seekby .sbw input{width:96px}
  .seekby .sbrail{margin:-4px -16px -10px;padding:4px 16px 10px}
  .seekby .sbrail button{height:42px;padding:0 17px;font-size:13.5px}
  /* the filters wrap to two lines here; while choosing, the choices alone take the place */
  .seekby.picking .sbrow{display:none}
}
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:52px}
.chips a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);color:var(--ink-2);font-size:14px;
  transition:transform .35s var(--sp),color .3s var(--e)}
.chips a:hover{transform:translateY(-3px);color:var(--cognac)}
.chips a b{color:var(--ink-4);font-weight:400;font-size:12.5px}
.wall{columns:2;column-gap:14px;margin-bottom:56px}
.wall a{display:block;break-inside:avoid;margin-bottom:14px;border-radius:var(--arch-sm);overflow:hidden;
  box-shadow:var(--cast);position:relative;transition:transform .5s var(--sp),box-shadow .5s var(--e)}
.wall a:hover{transform:translateY(-5px);box-shadow:var(--cast-2)}
.wall img{width:100%;display:block}
.wall .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;color:#FFF8F1;font-size:13.5px;
  background:linear-gradient(180deg,transparent,rgba(36,31,28,.68));display:flex;align-items:center;gap:8px}
.wall .cap img{width:26px;height:26px;border-radius:50%;flex:none;border:1.5px solid rgba(255,255,255,.75)}
@media (max-width:620px){.wall{columns:1}}

/* ===========================================================================
   17. YOU — a profile, under its own arch.
   =========================================================================== */
.plinth{text-align:center;margin-bottom:46px}
.plinth .ban{height:clamp(170px,24vw,240px);border-radius:var(--arch-sm);overflow:hidden;
  background:var(--shade);box-shadow:var(--cast-2);position:relative}
.plinth .ban img{width:100%;height:100%;object-fit:cover}
.plinth .face{width:124px;height:124px;border-radius:50%;object-fit:cover;margin:-62px auto 0;
  position:relative;z-index:2;border:5px solid var(--plaster);box-shadow:var(--cast)}
.plinth h1{font-size:clamp(28px,3.6vw,40px);font-weight:300;letter-spacing:-.01em;margin-top:16px;
  display:flex;align-items:center;justify-content:center;gap:10px}
.plinth .h{color:var(--ink-3);font-size:14.5px;margin-top:2px}
.plinth .bio{margin-top:16px;color:var(--ink-2);font-weight:300;font-size:16px;max-width:46ch;
  margin-inline:auto;line-height:1.7}
.plinth .facts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:20px}
.plinth .facts span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border-radius:999px;background:var(--niche);box-shadow:var(--cast);font-size:13.5px;color:var(--ink-2)}
.plinth .facts svg{width:15px;height:15px;color:var(--ink-4)}
.plinth .count{display:flex;justify-content:center;gap:34px;margin-top:26px}
.plinth .count b{display:block;font-size:23px;font-weight:400;color:var(--ink)}
.plinth .count span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.plinth .acts{display:flex;justify-content:center;gap:9px;margin-top:28px;flex-wrap:wrap}
.plinth .acts a,.plinth .acts button{display:inline-flex;align-items:center;gap:9px;height:48px;
  padding:0 24px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);color:var(--ink-2);
  font-size:14.5px;transition:transform .35s var(--sp),box-shadow .35s var(--e)}
.plinth .acts a:hover,.plinth .acts button:hover{transform:translateY(-2px);box-shadow:var(--cast-2)}
.plinth .acts .pri{background:var(--ink);color:var(--niche)}

/* ===========================================================================
   18. SETTINGS — niches, switches, capsules.
   =========================================================================== */
.niche{border-radius:28px;background:var(--niche);box-shadow:var(--cast);padding:8px 10px;
  margin-bottom:16px}
.niche>h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  padding:16px 18px 10px;font-weight:500}
.srow{display:flex;align-items:center;gap:15px;padding:14px 18px;border-radius:999px;
  transition:background .3s var(--e)}
a.srow:hover,button.srow:hover{background:var(--plaster-2)}
.srow>svg{width:19px;height:19px;color:var(--ink-3);flex:none}
.srow .bd{flex:1;min-width:0}
.srow .n{font-size:15.5px;font-weight:400}
.srow .d{font-size:13px;color:var(--ink-3);font-weight:300;margin-top:1px}
.srow .chev{width:17px;height:17px;color:var(--ink-4);flex:none}
button.srow,a.srow{width:100%;text-align:left}
.sw{width:50px;height:30px;border-radius:999px;background:var(--shade);flex:none;position:relative;
  transition:background .3s var(--e)}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;
  background:var(--niche);box-shadow:0 2px 6px rgba(60,46,32,.22);transition:transform .4s var(--sp)}
.sw.on{background:var(--olive)}
.sw.on::after{transform:translateX(20px)}

/* ===========================================================================
   19. FILM — a reel stands under an arch too.
   =========================================================================== */
.reel{margin-bottom:56px}
.reel .stage{border-radius:var(--arch);overflow:hidden;background:var(--ink);box-shadow:var(--cast-2);
  position:relative}
.reel .stage video{width:100%;display:block;max-height:76vh;object-fit:cover}

/* Rows built from spans still want their two lines. */
.srow .n,.srow .d,.wire .noti .tx,.wire .noti .sub,.letters .conv .n,.letters .conv .p,
.wall .cap,.plinth .count span{display:block}
.wire .noti .bd,.letters .conv .bd{display:block}
.wire .noti .tx b{display:inline}
.letters .conv .n{display:flex}
.wall .cap{display:flex}
a.noti{text-decoration:none;color:inherit}

/* ===========================================================================
   20. ROOMS, FIGURES, TIERS, DOCUMENTS
   The last of the rooms, in the same hand: a room stands under a small arch,
   a figure sits in a circle of plaster, a tier is an arch of its own, and a
   document is simply set type on the wall.
   =========================================================================== */
.rooms{display:flex;flex-direction:column;gap:12px}
.room{display:flex;align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast);
  transition:transform .4s var(--sp),box-shadow .4s var(--e)}
.room:hover{transform:translateX(5px);box-shadow:var(--cast-2)}
.room .ar{width:58px;height:66px;border-radius:var(--arch-sm);overflow:hidden;flex:none;
  background:var(--shade);display:grid;place-items:center}
.room .ar img{width:100%;height:100%;object-fit:cover}
.room .bd{flex:1;min-width:0}
.room .n{font-size:16.5px;font-weight:500}
.room .d{font-size:13px;color:var(--ink-3);font-weight:300;margin-top:1px}
.room .jn{height:38px;padding:0 20px;border-radius:999px;border:1px solid var(--ln-2);flex:none;
  font-size:13.5px;color:var(--ink-2);
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e)}
.room .jn:hover{background:var(--ink);color:var(--niche);border-color:var(--ink)}
.room .jn.on{background:var(--plaster-2);border-color:transparent;color:var(--ink-3)}

.figs{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.fig{width:132px;padding:26px 12px;border-radius:var(--arch-sm);background:var(--niche);
  box-shadow:var(--cast);text-align:center;
  transition:transform .5s var(--sp),box-shadow .5s var(--e)}
.fig:hover{transform:translateY(-4px);box-shadow:var(--cast-2)}
.fig b{display:block;font-size:30px;font-weight:300;letter-spacing:-.01em}
.fig span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-top:8px}

.tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:46px}
.tier{border-radius:var(--arch-sm);background:var(--niche);box-shadow:var(--cast);
  padding:34px 26px 26px;text-align:center}
.tier.hi{background:var(--cognac);color:#FFF6EF;box-shadow:var(--cast-2)}
.tier .k{color:var(--ink-3)}
.tier.hi .k{color:rgba(255,246,239,.82)}
.tier .pr{font-size:28px;font-weight:300;margin-top:12px}
.tier p{font-size:14.5px;color:var(--ink-3);font-weight:300;margin-top:8px}
.tier.hi p{color:rgba(255,246,239,.84)}
.tier ul{text-align:left;margin:22px 0 24px;display:flex;flex-direction:column;gap:11px}
.tier li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:300;
  color:var(--ink-2)}
.tier.hi li{color:rgba(255,246,239,.94)}
.tier li svg{width:15px;height:15px;color:var(--cognac);flex:none;margin-top:4px;stroke-width:2.4}
.tier.hi li svg{color:#FFF6EF}
.tier .go{height:48px;padding:0 28px;border-radius:999px;background:#FFF6EF;color:var(--cognac-2);
  font-size:14.5px;width:100%}
.tier .go[disabled]{opacity:.62;cursor:default}
.tier .cur{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  padding-top:6px}
@media (max-width:700px){.tiers{grid-template-columns:1fr}}

.doc{font-size:16.5px;line-height:1.78;font-weight:300;color:var(--ink-2);max-width:62ch;
  margin:0 auto 54px}
.doc h2{font-size:21px;font-weight:400;color:var(--ink);margin:34px 0 10px;letter-spacing:-.005em}
.doc h2:first-child{margin-top:0}
.doc p+h2{margin-top:36px}

/* a remark being written is a capsule, like everything else */
.remarks .add input.f{flex:1;height:46px;border-radius:999px;background:var(--niche);
  box-shadow:var(--cast);padding:0 20px;font-size:14.5px;font-weight:300;outline:0;min-width:0;
  color:var(--ink)}
.remarks .add input.f::placeholder{color:var(--ink-4)}
.remarks .add button.s{border:0}
.remarks form.add{display:flex;align-items:center;gap:12px}

/* Narrow: the composer is one line, and the Post capsule never leaves the rail. */
@media (max-width:860px){
  .quill{gap:10px;padding:10px 10px 10px 16px}
  .quill>img{width:40px;height:40px}
  .quill .f{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
  .quill .tools{flex:none}
  .quill .tools button,.quill .tools a{width:38px;height:38px}
  .quill .go{flex:none;height:40px;padding:0 18px;font-size:13.5px}
  .piece .by .n{font-size:16px}
  .piece .by .m{font-size:12px;flex-wrap:wrap}
  .piece .words{font-size:16px}
  .wire .noti{padding:14px 18px 14px 14px;gap:12px}
  .wire .noti .ic{width:42px;height:42px}
  .wire .noti .ic svg{width:18px;height:18px}
  .letters .conv{padding:12px 16px 12px 12px;gap:12px}
  .letters .conv>img{width:46px;height:46px}
  .seek{height:58px;padding:0 8px 0 18px;gap:10px}
  .seek input{font-size:15px}
  .seek .go{height:42px;padding:0 18px;font-size:13.5px}
  .figs{gap:10px}
  .fig{width:108px;padding:20px 8px}
  .fig b{font-size:25px}
  .plinth .count{gap:24px}
  .back{margin-bottom:18px}
}
@media (max-width:420px){
  .quill .tools{display:none}
  .filters button{height:38px;padding:0 16px;font-size:13px}
}

/* ---------------------------------------------------------------------------
   21. BACK TO THE MOCKUP, EXACTLY
   A like-for-like pass against app/bellio.html turned up four places where a
   computed value had drifted — every one of them because an element that is a
   <button> in the mockup is an <a> here, or now sits inside a wrapper. These
   put the computed style back where the mockup had it.
   --------------------------------------------------------------------------- */
.loggia .ib{text-align:center}

.loggia .me{line-height:1.6;text-align:start}


/* the composer's place, the mockup's fifth tool */
.placerow:not(:empty){display:flex;align-items:center;gap:10px;margin-top:12px;padding:0 20px;
  height:50px;border-radius:999px;background:var(--plaster)}
.placerow .pin{display:grid;place-items:center;color:var(--cognac);flex:none}
.placerow input{flex:1;min-width:0;font-size:15px;font-weight:300;outline:0;color:var(--ink);
  background:none}
.placerow input::placeholder{color:var(--ink-4)}

/* ---------------------------------------------------------------------------
   22. THE LOGGIA, SQUARED UP
   Two faults the mockup shares but which show badly on a wide screen:

   The navigation sat immediately after the wordmark, so with only three small
   controls on the right the whole bar read as left-heavy. It is now centred in
   the capsule regardless of what flanks it — taken out of flow so the wordmark
   and the controls still sit hard against their own ends.

   And the account menu was anchored to the page, not to the capsule, so on a
   wide screen it opened against the right edge of the window with a hand's
   width of nothing between it and the seal that opens it. It now hangs from
   the capsule's own right edge.
   --------------------------------------------------------------------------- */
.loggia .in{position:relative}
.loggia nav{position:absolute;left:50%;transform:translateX(-50%)}
.vestibule{right:0;top:calc(100% + 12px)}
@media (max-width:860px){
  .loggia nav{position:static;transform:none}
  .vestibule{right:0;left:auto;width:min(320px,calc(100vw - 32px))}
}

/* ---------------------------------------------------------------------------
   23. YOUR PAGE — the cover, and editing it
   The cover carried --arch-sm, whose vertical radius is half the height. On a
   tall photograph that is an arch; on a wide cover band it ate the top half of
   the picture. A cover gets its own shallower dome, and more height to stand
   in, so the photograph survives it.
   --------------------------------------------------------------------------- */
/* The cover's arch must never use 999px. CSS reduces EVERY radius on a box
   proportionally when one edge's radii overrun its length, so 999+999 against a
   720px cover scaled the whole set by 0.36 — bowing the top, bowing the bottom
   and leaning the sides. These radii are bounded, so their sum stays under the
   narrowest width the cover is ever drawn at and nothing is rescaled. */
:root{ --arch-cover:140px 140px 30px 30px / 64px 64px 30px 30px }
.plinth .ban{height:clamp(230px,30vw,330px);border-radius:var(--arch-cover);position:relative}
.plinth .ban img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.plinth .facewrap{position:relative;width:124px;margin:-62px auto 0;z-index:2}
.plinth .face{margin:0}
.plinth .facts a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border-radius:999px;background:var(--niche);box-shadow:var(--cast);font-size:13.5px;
  color:var(--ink-2);transition:color .3s var(--e)}
.plinth .facts a:hover{color:var(--cognac)}

/* the two camera seals, on your own page only */
.shoot{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;
  gap:9px;height:42px;padding:0 18px;border-radius:999px;background:rgba(255,253,250,.93);
  backdrop-filter:blur(14px);color:var(--ink);font-size:13.5px;box-shadow:var(--cast);
  transition:transform .35s var(--sp),box-shadow .35s var(--e)}
.shoot:hover{transform:translateY(-2px);box-shadow:var(--cast-2)}
.shoot svg{width:17px;height:17px;color:var(--cognac)}
.shoot.round{width:40px;height:40px;padding:0;justify-content:center;right:-2px;bottom:-2px}
.shoot.round svg{width:18px;height:18px}

/* the sheet */
.dlg.wide{width:min(620px,96vw);text-align:left;max-height:88vh;overflow-y:auto}
.dlg.wide .k,.dlg.wide h3{text-align:center}
.edcover{position:relative;height:170px;border-radius:var(--arch-cover);overflow:hidden;
  background:var(--shade);margin-top:22px}
.edcover img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.edface{position:relative;width:96px;margin:-48px auto 0;z-index:2}
.edface img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid var(--niche);
  box-shadow:var(--cast)}
.pfield{display:block;margin-top:16px}
.pfield > span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);padding:0 22px 7px}
.pfield input,.pfield textarea{display:block;width:100%;height:54px;padding:0 22px;
  border-radius:999px;background:var(--plaster);font-size:16px;font-weight:300;outline:0;
  color:var(--ink);transition:box-shadow .3s var(--e),background .3s var(--e)}
.pfield textarea{height:auto;min-height:104px;border-radius:26px;padding:16px 22px;resize:none;
  line-height:1.6}
.pfield input:focus,.pfield textarea:focus{background:var(--niche);
  box-shadow:var(--cast),inset 0 0 0 1.5px var(--cognac-sf)}
.pfield input::placeholder,.pfield textarea::placeholder{color:var(--ink-4)}
/* A choice in a sheet: pills, not a dropdown (bellio-ui-c2.js ask()). */
.pfield .pills{display:flex;flex-wrap:wrap;gap:8px}
.pfield .pills button{height:40px;padding:0 18px;border-radius:999px;background:var(--plaster-2);color:var(--ink-2);font-size:14px;
  transition:background .25s var(--e),color .25s var(--e),transform .3s var(--sp)}
.pfield .pills button:hover{transform:translateY(-1px);color:var(--ink)}
.pfield .pills button.on{background:var(--ink);color:var(--niche)}
.pfield input,.pfield textarea{caret-color:var(--cognac)}
.ednote{display:none}
.ednote.on{display:block;margin-top:16px;padding:13px 22px;border-radius:26px;
  background:var(--cognac-sf);color:var(--cognac-2);font-size:14px;font-weight:300;text-align:center}
.ednote.on.good{background:rgba(95,107,69,.13);color:var(--olive)}
.dlg .f .ib.wide{width:auto;padding:0 22px;border-radius:999px;font-size:14.5px;color:var(--ink-3)}
.dlg .f .ib.wide:hover{background:var(--plaster-2);color:var(--ink)}

@media (max-width:600px){
  .plinth .ban{height:clamp(170px,42vw,230px);border-radius:80px 80px 24px 24px / 40px 40px 24px 24px}
  .edcover{border-radius:80px 80px 24px 24px / 40px 40px 24px 24px}
  .shoot span{display:none}
  .shoot{padding:0;width:42px;justify-content:center}
  .shoot.round{width:36px;height:36px}
}

/* ---------------------------------------------------------------------------
   24. PARAGRAPHS
   A member who presses return twice means it. The feed was rendering .words
   with normal white-space, so every line break a member typed collapsed into
   a single space and a considered three-paragraph post arrived as one slab.
   pre-line keeps the breaks and still collapses runs of spaces.
   --------------------------------------------------------------------------- */
.piece .words,.remark p,.plinth .bio{white-space:pre-line}

/* ---------------------------------------------------------------------------
   25. LETTERS, PROPERLY
   Consecutive lines from one person close into a block: only the first bubble
   of a run keeps its full shoulder, only the last keeps its tail, and the hour
   is printed once at the end of the run instead of against every line.
   --------------------------------------------------------------------------- */
.letters .conv.unread .n{font-weight:600}
.letters .conv.unread .p{color:var(--ink-2)}

.thread{display:flex;flex-direction:column;gap:3px;padding:8px 0 10px}
.thread .day{text-align:center;color:var(--ink-4);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;margin:22px 0 12px}
.thread .day:first-child{margin-top:4px}

.line{display:flex;align-items:flex-end;gap:9px;max-width:82%}
.line.me{margin-left:auto;flex-direction:row-reverse}
.line > img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;margin-bottom:2px}
.line .gap{width:30px;flex:none}
.line.last{margin-bottom:9px}

.bub{padding:14px 21px;border-radius:9px 24px 24px 9px;background:var(--niche);
  box-shadow:var(--cast);font-size:17px;line-height:1.5;font-weight:300;color:var(--ink);
  max-width:100%;word-break:break-word}
.bub.first{border-top-left-radius:24px}
.bub.tail{border-bottom-left-radius:24px}
.line.me .bub{background:var(--ink);color:var(--niche);border-radius:24px 9px 9px 24px}
.line.me .bub.first{border-top-right-radius:24px}
.line.me .bub.tail{border-bottom-right-radius:24px}
.bub .t{display:block;white-space:pre-line}
.bub .shot{border-radius:16px;margin:-4px 0 2px;max-height:300px;object-fit:cover;cursor:zoom-in}
.bub a.tag,.bub a.at{color:var(--cognac);text-decoration:none}
.line.me .bub a.tag,.line.me .bub a.at{color:var(--cognac-sf)}
.line .at{font-size:12px;color:var(--ink-4);flex:none;padding-bottom:4px;letter-spacing:.03em}

/* sent, or read */
.seen{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:12.5px;
  color:var(--ink-4);letter-spacing:.06em;margin:-4px 2px 10px 0}
.seen svg{width:13px;height:13px;color:var(--olive);stroke-width:2.6}

/* the three dots, only ever drawn on a live signal */
/* Danny, 8 Oct 2026: "barely visible" — the dots were 7px of the palest
   grey in a bubble half a letter's height, pressed against the writer. Now
   a letter's own size, darker dots, the words beside it, and air below. */
.typing .bub{padding:15px 20px}
.thread .line.typing{margin:4px 0 14px;align-items:center}
.thread .line.typing .bub{height:44px;padding:0 20px;display:flex;align-items:center}
.line.typing > img{margin-bottom:0}
.line.typing .who{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em;white-space:nowrap}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);
  animation:bob 1.25s var(--e) infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

a.whom{text-decoration:none}
a.whom:hover .n{color:var(--cognac)}
.whom div{text-align:left}

@media (max-width:600px){
  .line{max-width:90%}
  .bub{font-size:16.5px;padding:13px 18px}
}

/* ---------------------------------------------------------------------------
   26. LETTERS — SIZE AND MEASURE
   Two faults in the thread. The type was set at the body size, which is right
   for a paragraph in the feed but too small for a line of correspondence read
   one at a time. And the column was the full width of the court, so in a
   thread where most letters are yours everything hugged the right edge while
   the day rules sat centred three hundred pixels away — the exchange read as
   lopsided rather than as one conversation. The column is now its own measure,
   centred, and the hour sits against the middle of a single-line bubble
   instead of dropping to its foot.
   --------------------------------------------------------------------------- */
.thread,.writer{max-width:560px;margin-inline:auto;width:100%}
.writer{margin-top:20px}
.bub{font-size:19px;line-height:1.5;padding:15px 23px}
.line{align-items:center}
.line > img{margin-bottom:0}
.line .at{padding-bottom:0;font-size:11.5px}
.seen{font-size:13px;margin-right:0}
.thread .day{font-size:11.5px}

@media (max-width:600px){
  .thread,.writer{max-width:none}
  .bub{font-size:18px;padding:14px 19px}
  .line{max-width:88%}
}
/* The first Letters pass set .bub{align-self:flex-start} for a column layout.
   The thread is rows now, so that property top-aligns a bubble against its
   hour instead of centring it. */
.line .bub{align-self:auto}

/* ---------------------------------------------------------------------------
   27. THE COLONNADE CANNOT CLIP A FACE
   Whatever the count, a pillar is never sliced in half against the court's
   edge. The row centres while it fits; when it does not it scrolls, snaps to
   whole pillars, and carries a gutter so the end tile clears the edge instead
   of being cut through.
   --------------------------------------------------------------------------- */
.colonnade{scroll-snap-type:x mandatory;scroll-padding:0 4px}
.pillar{scroll-snap-align:center}
.colonnade::after{content:"";flex:none;width:2px}

/* ---------------------------------------------------------------------------
   28. TYPE THAT HOLDS UP ON A LARGE SCREEN
   The court is a fixed 760px measure. On a wide display that column keeps its
   width while the screen grows around it, so type set for a 1280px window
   reads as small. Above 1600px the measure and the type step up together.
   --------------------------------------------------------------------------- */
.piece .words{font-size:18px}
.quill .f{font-size:18px}

@media (min-width:1200px){
  .court{max-width:880px}
  .opening h1{font-size:clamp(38px,3.4vw,58px)}
  .piece .words{font-size:20px;line-height:1.68}
  .piece.lead .words{font-size:clamp(26px,2vw,34px)}
  .piece .by .n{font-size:18.5px}
  .piece .by .m{font-size:14px}
  .quill .f{font-size:19.5px}
  .quill{padding:14px 14px 14px 20px}
  .quill > img{width:50px;height:50px}
  .controls .btn{height:52px;font-size:15.5px}
  .tally{font-size:14.5px}
  .remark p{font-size:16.5px}
  .remarks .add .f,.remarks .add input.f{font-size:15.5px}
  .bub{font-size:21px;padding:16px 25px}
  .thread,.writer{max-width:620px}
  .writer input{font-size:17.5px}
  .wire .noti .tx{font-size:17px}
  .letters .conv .n{font-size:17.5px}
  .letters .conv .p{font-size:15px}
  .srow .n{font-size:17px}
  .srow .d{font-size:14px}
  .plinth .bio{font-size:17.5px}
  .doc{font-size:18px}
}

/* ---------------------------------------------------------------------------
   29. BIGGER, AT EVERY WIDTH
   Not behind a breakpoint this time.
   --------------------------------------------------------------------------- */
.piece .words{font-size:19.5px;line-height:1.66}
.piece.lead .words{font-size:clamp(25px,2.6vw,32px)}
.piece .by .n{font-size:18.5px}
.piece .by .m{font-size:14px}
.quill .f{font-size:19px}
.tally{font-size:14.5px}
.controls .btn{font-size:15.5px;height:50px}
.remark p{font-size:16.5px}
.remark .n{font-size:15.5px}
.bub{font-size:20.5px;line-height:1.5;padding:16px 24px}
.writer input{font-size:17.5px}
.wire .noti .tx{font-size:17px}
.letters .conv .n{font-size:17.5px}
.letters .conv .p{font-size:15px}
.srow .n{font-size:17px}
.plinth .bio{font-size:17.5px}
.opening .sub{font-size:17px}

/* the build, so there is never another argument about what is loaded */
.foot .build{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);opacity:.8}

/* ---------------------------------------------------------------------------
   30. THE COLONNADE, WITHOUT THE ARITHMETIC
   I kept computing that the row fitted and it kept clipping anyway. So the
   layout no longer depends on the sum being right: the pillars centre with
   justify-content (which cannot overflow the way auto margins on the first and
   last child can), the row is allowed to wrap rather than run off the edge, and
   the count is five plus yours — six pillars, 588px inside a 720px court, with
   over a hundred pixels to spare instead of thirty.
   --------------------------------------------------------------------------- */
.colonnade > :first-child{margin-left:0}
.colonnade > :last-child{margin-right:0}
.colonnade::after{display:none}
.colonnade{scroll-snap-type:none}

/* Wide: six pillars measure 588px inside a 720px court, so there is no second
   row to fall into — centre them and let the box be visible rather than a
   scroller that can cut a tile in half. */
@media (min-width:861px){
  .colonnade{justify-content:center;flex-wrap:wrap;overflow-x:visible;row-gap:18px}
}
/* Narrow: the court is too small for six across, so it is a proper sideways
   scroller — one row, never wrapped, with a gutter so the end tile clears the
   edge instead of being sliced. */
@media (max-width:860px){
  .colonnade{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-right:16px;scroll-padding-right:16px}
}

/* ---------------------------------------------------------------------------
   31. THE LAST WORD ON LETTER SIZE
   There are five earlier .bub rules in this file from successive passes. Rather
   than leave the outcome to cascade order, this one is specific enough to win
   outright and sits at the end. A bubble sizes to its text, so nothing here is
   constrained by the box.
   --------------------------------------------------------------------------- */
.thread .line .bub,
.thread .line .bub .t{font-size:14.5px;line-height:1.5}
.thread .line .bub{padding:11px 17px;max-width:none}
.thread .line{max-width:86%}
@media (max-width:600px){
  .thread .line .bub,
  .thread .line .bub .t{font-size:14px}
  .thread .line .bub{padding:10px 15px}
}

/* ---------------------------------------------------------------------------
   32. PICTURES THAT PUNCTUATE RATHER THAN FILL
   The arch was set to clamp(420px,56vw,620px) — the better part of a screen
   per photograph, so two picture posts in a row pushed every written one out
   of sight and the Circle read as a gallery. A photograph is now a little over
   half that, and a film the same, so a post is a thing you read with a picture
   in it rather than a picture with a caption.
   --------------------------------------------------------------------------- */
.piece .arcade img{height:clamp(300px,34vw,430px)}
.piece .arcade video{height:auto;max-height:460px;object-fit:contain;background:var(--ink)}
.piece .arcade.two img{height:clamp(210px,22vw,280px)}
.piece .arcade.three a:first-child img{height:clamp(260px,30vw,360px)}
.piece .arcade.three img{height:clamp(124px,14.4vw,174px)}
.reel .stage video{max-height:60vh}

@media (max-width:600px){
  .piece .arcade img{height:clamp(260px,62vw,340px)}
  .piece .arcade video{max-height:380px}
}

/* a quiet line to Film, when video has been routed there out of the Circle */
.tofilm{display:flex;align-items:center;gap:13px;margin:0 auto 46px;max-width:360px;height:52px;
  padding:0 20px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);
  color:var(--ink-2);font-size:14.5px;font-weight:300;text-decoration:none;
  transition:transform .35s var(--sp),box-shadow .35s var(--e),color .3s var(--e)}
.tofilm:hover{transform:translateY(-2px);box-shadow:var(--cast-2);color:var(--ink)}
.tofilm svg{width:18px;height:18px;flex:none;color:var(--cognac)}
.tofilm span{flex:1}
.tofilm a{display:flex;align-items:center;gap:13px;flex:1;min-width:0;height:100%;color:inherit;text-decoration:none}
.tofilm .x{flex:none;width:32px;height:32px;margin-right:-8px;border-radius:50%;display:grid;place-items:center;color:var(--ink-4);background:transparent}
.tofilm .x:hover{background:var(--plaster-2);color:var(--ink)}
.tofilm .x svg{width:14px;height:14px;color:inherit}
.tofilm b{color:var(--ink);font-weight:500}
.tofilm svg:last-child{width:15px;height:15px;color:var(--ink-4)}

/* ---------------------------------------------------------------------------
   33. THE DESK — writing to Bellio
   The support function and the admin console's queue both already existed; the
   only member-facing way in lived in app.js, which no page loads any more, so
   nobody could actually reach it. This is that way in.
   --------------------------------------------------------------------------- */
#deskform{padding:26px 24px 22px;margin-bottom:40px}
#deskform .pfield:first-child{margin-top:0}
.dsend{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;
  margin-top:20px;border-radius:999px;background:var(--ink);color:var(--niche);font-size:15.5px;
  font-weight:400;border:0;cursor:pointer;
  transition:background .3s var(--e),transform .4s var(--sp),box-shadow .4s var(--e)}
.dsend:hover{background:var(--cognac);transform:translateY(-2px);box-shadow:var(--cast-2)}
.dsend[disabled]{opacity:.6;transform:none;cursor:default}
.dsend svg{width:18px;height:18px}
.dfine{margin:16px 6px 0;font-size:13px;font-weight:300;color:var(--ink-4);line-height:1.6;
  text-align:center}
.dnote{display:none}
.dnote.on{display:block;margin-top:16px;padding:13px 22px;border-radius:26px;
  background:var(--cognac-sf);color:var(--cognac-2);font-size:14px;font-weight:300;text-align:center}
.dnote.on.good{background:rgba(95,107,69,.13);color:var(--olive)}
.dwait{text-align:center;color:var(--ink-4);font-size:14px;font-weight:300;padding:20px}

.desk-list{display:flex;flex-direction:column;gap:12px}
.ticket{background:var(--niche);box-shadow:var(--cast);border-radius:26px;padding:20px 24px}
.ticket .th{display:flex;align-items:center;gap:12px}
.ticket .ts{flex:1;min-width:0;font-size:16.5px;font-weight:500;color:var(--ink)}
.ticket .tstat{flex:none;height:28px;padding:0 14px;border-radius:999px;font-size:12px;
  letter-spacing:.06em;display:inline-flex;align-items:center}
.ticket .tstat.is-open{background:var(--cognac-sf);color:var(--cognac-2)}
.ticket .tstat.is-done{background:rgba(95,107,69,.13);color:var(--olive)}
.ticket .tm{margin-top:9px;font-size:15.5px;font-weight:300;line-height:1.6;color:var(--ink-2);
  white-space:pre-line}
.ticket .tf{margin-top:11px;font-size:12.5px;color:var(--ink-4)}
.ticket .tf b{color:var(--cognac);font-weight:500}
.ticket .treply{margin-top:14px;padding:14px 18px;border-radius:20px;background:var(--plaster);
  font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2)}
.ticket .treply b{color:var(--ink);font-weight:500;margin-right:6px}

/* ============================================ sheets, notices (6 Oct 2026)
   Only what the new menus need: the composer's dialog already draws them. */
.dlg .sheetrows{box-shadow:none;background:transparent;padding:6px 0 0;margin-top:14px}
.dlg .sheetrows .srow{width:100%;text-align:left}
.dlg .sheetrows .srow svg{width:19px;height:19px;flex:none;color:var(--ink-3)}
.srow.danger .n,.srow.danger svg{color:#B3261E}
.dlg .sheetp{margin-top:12px;color:var(--ink-3);font-weight:300;text-align:center}
#bsheet .dlg .f .go{margin-left:auto}
.pfield select{display:block;width:100%;height:54px;padding:0 22px;border-radius:999px;border:0;
  background:var(--plaster-2);font:inherit;font-weight:300;color:var(--ink);outline:0}
.heralds{max-width:680px;margin:0 auto;padding:0 16px}
.heralds:empty{display:none}
.herald{display:flex;align-items:center;gap:13px;margin:14px 0 0;padding:13px 18px 13px 20px;
  border-radius:26px;background:var(--niche);box-shadow:var(--cast);font-size:14px;font-weight:300;line-height:1.45}
.herald svg{width:18px;height:18px;flex:none;color:var(--cognac)}
.herald span{flex:1;min-width:0}
.herald b{font-weight:500}
.herald.warn{background:var(--cognac-sf)}
.herald .hb{flex:none;height:38px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--niche);font:inherit;font-size:13.5px}
.herald .hx{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.herald .hx:hover{background:var(--plaster-2)}
.controls .more{margin-left:2px}
.remark .mt .rbt{color:var(--ink-3);font:inherit;font-size:inherit;padding:0}
.remark .mt .rbt.on{color:var(--cognac)}
.remark .mt .rbt:hover{color:var(--ink)}
.plinth .acts .ghost{background:transparent;box-shadow:none}
.mk{text-align:center;margin:-14px 0 30px}
.mk .go{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 24px;border-radius:999px;
  background:var(--ink);color:var(--niche);font:inherit;font-size:14.5px}
.srow .sav{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.srow .jn{flex:none;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;background:var(--plaster-2);color:var(--ink);font:inherit;font-size:13.5px;line-height:1;text-decoration:none}
.srow .jn:hover{background:var(--shade)}
.srow a.bd{color:inherit;text-decoration:none}
.edrm{text-align:center;margin-top:8px}
/* Phones: the post's controls in one row. A later full-size rule ("back to
   the mockup") overrode the 860px phone sizes, so the row was wider than the
   screen — Keep was clipped and the page scrolled sideways. Remark and Pass
   on become icon circles here (each carries an aria-label). */
@media (max-width:600px){
  .controls{gap:6px}
  .controls .btn{height:44px;padding:0 15px;font-size:13.5px;gap:7px}
  .controls .round{width:44px;padding:0}
  .controls a.btn,.controls .pass{width:44px;padding:0;justify-content:center;font-size:0;gap:0;flex:none}
  .controls a.btn svg,.controls .pass svg{width:19px;height:19px}
}
/* Phones: a dialog fits inside its overlay. The overlay's 26px padding plus a
   96vw dialog was wider than the screen, so the composer, the profile editor
   and every sheet ran off the right-hand edge. */
@media (max-width:600px){
  .scrim{padding:12px}
  .dlg,.dlg.wide{width:100%;padding:28px 20px 18px}
}
/* The letter's header: who it is with, and their … beside them. */
.whomrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:34px}
.whomrow .whom{margin:0}
.whomrow .wmore{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);
  background:var(--niche);box-shadow:var(--cast)}
.whomrow .wmore svg{width:18px;height:18px}
.whomrow .wmore:hover{color:var(--ink)}
/* The phone tab bar's centre button is a <button>, which the round-tab rule
   (written for <a>) never reached, so it drew as a small square. */
@media (max-width:860px){
  .tabs .fab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:0;padding:0}
  .tabs .fab svg{width:22px;height:22px}
}

/* ===========================================================================
   34. THE SOCIAL LAYER — passed on, quoted, who it is for, titles, replies,
   connections. Nothing new in the vocabulary: capsules, circles, a niche
   and the remarks' own hairline.
   =========================================================================== */
/* "Ben passed this on" — a quiet line above the byline, aligned to the name */
.piece .passed{display:flex;align-items:center;gap:8px;margin:0 0 10px 63px;font-size:13px;color:var(--ink-3)}
.piece .passed svg{width:15px;height:15px;color:var(--olive);flex:none}
.piece .passed a{color:var(--ink-2);font-weight:500}
.piece .passed a:hover{color:var(--cognac)}

/* a post passed on with words: the original, inset in a niche */
.quoted{display:block;margin:0 0 22px;padding:16px 20px 18px;border-radius:26px;background:var(--niche);
  box-shadow:var(--cast);color:var(--ink-2);max-width:60ch;text-align:left;overflow:hidden;
  transition:transform .35s var(--sp),box-shadow .35s var(--e)}
a.quoted:hover{transform:translateY(-2px);box-shadow:var(--cast-2)}
.quoted .qby{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink)}
.quoted .qby img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.quoted .qw{display:block;margin-top:7px;font-size:15px;line-height:1.6;font-weight:300;white-space:pre-line}
.quoted .qm{display:block;width:100%;height:190px;object-fit:cover;border-radius:18px;margin-top:12px}
.quoted.gone{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-3);box-shadow:none;
  background:var(--plaster-2);font-weight:300}
.quoted.gone svg{width:15px;height:15px;flex:none}
.dlg .shot .quoted{margin:0;box-shadow:none;max-width:none;border-radius:26px;background:var(--plaster)}
.dlg .shot .quoted .qby img{width:24px;height:24px;max-height:none}
.dlg .shot .quoted .qm{height:150px;max-height:none}
.dlg .shot:has(.quoted){box-shadow:none;overflow:visible}
.dlg .shot .quoted ~ .pox{position:static;display:inline-flex;align-items:center;gap:7px;width:auto;height:38px;
  padding:0 16px;margin-top:6px;border-radius:999px;background:none;box-shadow:none;color:var(--ink-3);font-size:13px}
.dlg .shot .quoted ~ .pox:hover{color:var(--cognac)}
.bub .quoted{margin:2px 0;box-shadow:none;min-width:min(240px,60vw);color:var(--ink-2)}
.bub .quoted .qby{color:var(--ink)}
.bub .quoted.gone{background:var(--plaster-2)}

/* who a post is for, in the line under the name */
.piece .by .m .aud{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3)}
.piece .by .m .aud svg{width:13px;height:13px}
/* a post that cannot be passed on still shows the control, quietly */
.controls .pass.off{opacity:.42}

/* the composer: who it is for, and a title */
.dlg .whorow{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.dlg .who{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;
  background:var(--plaster-2);color:var(--ink-2);font-size:13px;transition:background .3s var(--e),color .3s var(--e)}
.dlg .who svg{width:15px;height:15px;color:var(--ink-3)}
.dlg .who .wi{display:grid;place-items:center}
.dlg .who:hover{color:var(--ink)}
.dlg .who.set{background:var(--cognac-sf);color:var(--cognac-2)}
.dlg .who.set svg{color:var(--cognac)}
.dlg .who.ghost{background:transparent;color:var(--ink-3)}
.dlg .ptitlein{display:block;width:100%;margin-top:16px;height:54px;padding:0 22px;border-radius:999px;
  background:var(--plaster);font-size:19px;font-weight:400;outline:0;color:var(--ink);text-align:left}
.dlg .ptitlein::placeholder{color:var(--ink-4)}
.dlg .ptitlein[hidden]{display:none}

/* a titled piece, and where a long one stops in the feed */
.piece .ptitle{font-size:clamp(22px,2.6vw,28px);font-weight:400;line-height:1.3;letter-spacing:-.01em;
  margin:0 0 12px;max-width:30ch;color:var(--ink)}
.piece .readon{color:var(--cognac);font-weight:400;white-space:nowrap}

/* a reply sits under the remark it answers, down its own hairline */
.remarks .replies{margin:-6px 0 18px 51px;padding-left:16px;border-left:1px solid var(--ln)}
.remark.sub img{width:30px;height:30px}
.remarks .replying{display:flex;align-items:center;gap:8px;margin:0 0 10px 50px;font-size:13px;color:var(--ink-3)}
.remarks .replying b{color:var(--ink);font-weight:500}
.remarks .replying button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.remarks .replying button:hover{background:var(--plaster-2)}
.remarks .replying svg{width:14px;height:14px}

/* a member's page: the figures open the people behind them */
.plinth .count a{display:block;color:inherit;transition:color .3s var(--e)}
.plinth .count a:hover b{color:var(--cognac)}
.plinth .acts .on{background:var(--plaster-2);box-shadow:none;color:var(--ink-2)}
.plinth .acts .pri.on{background:var(--plaster-2);color:var(--ink-2)}
.plinth .mutual{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:13.5px;color:var(--ink-3);
  font-weight:300;max-width:100%}
.plinth .mutual .avs{display:flex;flex:none}
.plinth .mutual .avs img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--plaster)}
.plinth .mutual .avs img+img{margin-left:-8px}
.plinth .mutual:hover{color:var(--ink)}
@media (max-width:600px){
  .plinth .count{gap:14px}
  .plinth .count span{font-size:10.5px;letter-spacing:.12em}
}
/* answering a request where it is read */
.srow .jn.ghost{background:transparent;color:var(--ink-3)}
.srow .jn.ghost:hover{background:var(--plaster-2);color:var(--ink)}
.srow .jn.on{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--ln-2)}
.reqs .srow{gap:12px}
.reqs .srow .jn+.jn{margin-left:-4px}
@media (max-width:520px){
  .reqs .srow{flex-wrap:wrap}
  .reqs .srow .bd{flex-basis:calc(100% - 60px)}
  .reqs .srow .jn:first-of-type{margin-left:50px}
}

/* ===========================================================================
   35. THE WIDER NETWORK — rooms, invitations, company pages, About,
   verification and introductions. Same plaster, same capsules.
   =========================================================================== */
/* what someone does, under their handle */
.plinth .hl{margin-top:6px;font-size:15px;color:var(--ink-2);font-weight:300}
.plinth .facts .vchip{color:var(--ink)}
.plinth .facts .vchip .vf{margin-right:2px}
.plinth .facts .opento svg{color:var(--olive)}
/* a row of words in capsules, inside a niche */
.tagrow{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 16px}
.tagrow span,.tagrow a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
  background:var(--plaster-2);color:var(--ink-2);font-size:13.5px}
.tagrow a:hover{color:var(--cognac)}
.tagrow .jn{height:36px}
/* the editor's second part, and the open-to capsules */
.dlg .edsub{margin:22px 0 4px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.dlg .edsub i{font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--ink-4);font-weight:300}
.opento-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.opento-pick button{height:36px;padding:0 15px;border-radius:999px;background:var(--plaster-2);color:var(--ink-2);font-size:13px;
  transition:background .3s var(--e),color .3s var(--e)}
.opento-pick button.on{background:var(--ink);color:var(--niche)}
/* capsule rows of actions: the quiet ones, the one already taken */
.mk .go.ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--ln-2)}
.mk .go.ghost:hover{background:var(--niche);color:var(--ink)}
.mk .go.on{background:var(--plaster-2);color:var(--ink-2)}
.mk .go[disabled],.card-inv .go[disabled]{opacity:.62;cursor:default}
.mk{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
/* a room's own picture, an invitation's */
.roomcover,.evcover{margin-bottom:34px}
.roomcover img,.evcover img{height:clamp(220px,32vw,340px)}
.card-inv .evpic{display:block;margin:-36px -30px 24px;overflow:hidden}
.card-inv .evpic img{width:100%;height:200px;object-fit:cover}
.card-inv h3 a{color:inherit}
.card-inv .n a{color:inherit}
.card-inv .n a:hover{text-decoration:underline}
.evdesc{text-align:center}
.room a.bd{color:inherit}
.room .ar svg{width:22px;height:22px;color:var(--ink-4)}
/* settings: what has been checked */
.vstate{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;flex:none;
  background:var(--plaster-2);color:var(--ink-3);font-size:13px}
.vstate.on{color:var(--olive)}
.vstate svg{width:14px;height:14px;stroke-width:2.4}
@media (max-width:600px){
  .mk .go{height:42px;padding:0 18px;font-size:13.5px}
  .card-inv .evpic{margin:-36px -30px 20px}
}

/* no gap where there is nothing to say */
.plinth .facts:empty{display:none}
.niche + .interlude,.niche + section.interlude{margin-top:56px}

/* ===========================================================================
   36. LETTERS, AS A WRITING DESK
   The thread used to float on the plaster: every bubble with its own shadow,
   the hour hanging in the air beside it, and the person you were writing to
   scrolled away above. Now the correspondence is one niche. On a laptop the
   inbox and the open letter sit side by side, the header stays put and the
   writer sits at the foot; on a phone the inbox is the page and a letter
   takes the screen, its header a capsule where the site's was. Lines are
   flat, set at a reading weight, and the hour sits under the run. Everything
   is scoped to .desk, so the earlier Letters passes (15, 25, 26, 31) no
   longer decide anything here.
   =========================================================================== */
@media (min-width:861px){
  body[data-page="messages"]{padding-bottom:0}
  body[data-page="messages"] .court{max-width:1080px;padding-top:24px}
}
.desk{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100vh - 132px);height:calc(100dvh - 132px);
  min-height:520px;border-radius:30px;background:var(--niche);box-shadow:var(--cast);overflow:hidden}

/* ---- the inbox */
.inbox{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--ln)}
.inbox .ih{display:flex;align-items:baseline;gap:12px;padding:24px 24px 14px}
.inbox .ih h1{font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.01em}
.inbox .iu{font-size:12.5px;font-weight:500;color:var(--cognac)}
.isearch{display:flex;align-items:center;gap:10px;height:42px;margin:0 16px 10px;padding:0 16px;border-radius:999px;
  background:var(--plaster);color:var(--ink-3);transition:background .2s var(--e),box-shadow .2s var(--e)}
.isearch:focus-within{background:var(--niche);box-shadow:inset 0 0 0 1.5px var(--ln-2)}
.isearch svg{width:17px;height:17px;flex:none}
.isearch input{flex:1;min-width:0;font-size:14.5px;outline:0;color:var(--ink)}
.isearch input::placeholder{color:var(--ink-4)}
.isearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.ilist{flex:1;min-height:0;overflow-y:auto;padding:2px 10px 14px;scrollbar-width:none}
.lrow{display:flex;align-items:center;gap:13px;width:100%;padding:11px 12px;border-radius:18px;text-align:left;
  transition:background .2s var(--e)}
.lrow[hidden],.inone[hidden]{display:none}
.lrow:hover{background:var(--plaster)}
.lrow.on{background:var(--plaster-2)}
.lrow>img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.lrow .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lrow .top,.lrow .bot{display:flex;align-items:center;gap:10px;min-width:0}
.lrow .n{flex:1;min-width:0;display:block;font-size:15px;font-weight:500;color:var(--ink);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .n .vf{margin-left:6px;vertical-align:-1px}
/* A name and its tick: a little air between them (Danny, 8 Oct 2026). Rows
   that lay the name out as flex already have a gap. */
.n .vf,a.who .vf{margin-left:7px;vertical-align:-1px}
.piece .by .n .vf,.remark .n .vf,.letters .conv .n .vf,.whom .n .vf,.pick .n .vf,.rwho .n .vf{margin-left:0}
.lrow .t{flex:none;font-size:12px;color:var(--ink-4)}
.lrow .p{flex:1;min-width:0;display:block;font-size:13.5px;color:var(--ink-3);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .cnt{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--cognac);color:#fff;
  font-size:11px;font-weight:500;display:grid;place-items:center}
.lrow.unread .n{font-weight:600}
.lrow.unread .p{color:var(--ink-2);font-weight:500}
.lrow.unread .t{color:var(--cognac);font-weight:500}
.inone{padding:28px 14px;text-align:center;font-size:14px;color:var(--ink-3)}

/* ---- the open letter */
.lroom{display:flex;flex-direction:column;min-width:0;min-height:0}
.rh{display:flex;align-items:center;gap:10px;flex:none;padding:14px 18px 14px 24px;border-bottom:1px solid var(--ln)}
.rh .rback{display:none}
.rwho{flex:1;min-width:0;display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none}
.rwho img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.rwho .wt{min-width:0;display:flex;flex-direction:column}
.rwho .n{display:flex;align-items:center;gap:6px;font-size:16.5px;font-weight:500;line-height:1.3;white-space:nowrap}
.rwho .r{font-size:13px;color:var(--ink-3);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwho:hover .n{color:var(--cognac)}
.lbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:999px;
  background:var(--plaster);color:var(--ink-2);font-size:13.5px;transition:background .2s var(--e),color .2s var(--e)}
.lbtn:hover{background:var(--plaster-2);color:var(--ink)}
.lbtn.round{width:38px;padding:0}
.lbtn svg{width:18px;height:18px}

.desk .thread{flex:1;min-height:0;max-width:none;width:auto;margin:0;display:flex;flex-direction:column;gap:3px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px clamp(18px,4%,40px) 20px}
.desk .thread>:first-child{margin-top:auto}
.desk .thread .day{display:flex;align-items:center;gap:14px;margin:18px 0 12px;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);text-align:left}
.desk .thread .day::before,.desk .thread .day::after{content:"";flex:1;height:1px;background:var(--ln)}
/* a short exchange rests on the writer, not under the header */
.desk .thread > .day:first-child{margin-top:auto}

.desk .thread .line{display:flex;align-items:flex-end;gap:8px;max-width:min(74%,560px);margin:0}
.desk .thread .line.me{margin-left:auto;flex-direction:row-reverse}
.desk .thread .line > img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;margin:0}
.desk .thread .line .gap{width:28px;flex:none}

/* theirs: warm stone; yours: espresso. A run closes into one block. */
.desk .thread .line .bub{max-width:100%;padding:10px 15px;border-radius:6px 20px 20px 6px;background:#F0EBE3;color:var(--ink);
  box-shadow:none;font-size:15px;line-height:1.5;font-weight:400;word-break:break-word;align-self:auto}
.desk .thread .line .bub .t{display:block;margin:0;font-size:15px;line-height:1.5;white-space:pre-line;opacity:1;letter-spacing:0}
.desk .thread .line .bub.first{border-top-left-radius:20px}
.desk .thread .line .bub.tail{border-bottom-left-radius:20px}
.desk .thread .line.me .bub{background:var(--ink);color:#FBF8F3;border-radius:20px 6px 6px 20px}
.desk .thread .line.me .bub.first{border-top-right-radius:20px}
.desk .thread .line.me .bub.tail{border-bottom-right-radius:20px}
.desk .thread .line .bub a.tag,.desk .thread .line .bub a.at{color:var(--cognac)}
.desk .thread .line.me .bub a.tag,.desk .thread .line.me .bub a.at{color:#E9C8AE}

/* a photograph stands on its own */
.desk .thread .line .bub.photo{padding:0;background:none;border-radius:18px;overflow:hidden}
.desk .thread .line .bub .shot{display:block;max-width:min(320px,100%);max-height:340px;width:auto;margin:0;
  border-radius:18px;object-fit:cover;cursor:zoom-in}
.desk .thread .line .bub:not(.photo) .shot{margin:-4px -9px 8px;max-width:calc(100% + 18px);border-radius:15px}

/* a post sent in a letter: the post in miniature, picture first */
.desk .thread .line .bub.card{width:min(340px,100%);padding:5px}
.desk .thread .line .bub.card .quoted{display:flex;flex-direction:column;margin:0;min-width:0;padding:12px 14px 14px;
  border-radius:15px;background:var(--niche);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}
.desk .thread .line.me .bub.card .quoted{box-shadow:none}
.desk .thread .line .bub.card a.quoted:hover{transform:none;box-shadow:inset 0 0 0 1px var(--ln-2)}
.desk .thread .line .bub.card .quoted .qm{order:-1;width:calc(100% + 28px);max-width:none;height:170px;max-height:none;margin:-12px -14px 12px;border-radius:0}
.desk .thread .line .bub.card .quoted .qby{font-size:13px;color:var(--ink)}
.desk .thread .line .bub.card .quoted .qby img{width:22px;height:22px}
.desk .thread .line .bub.card .quoted .qw{margin-top:6px;font-size:13.5px;line-height:1.5;font-weight:400;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.desk .thread .line .bub.card .quoted.gone{flex-direction:row;align-items:center;gap:9px;background:var(--plaster);font-size:13.5px}
.desk .thread .line .bub.card .t{padding:8px 10px 4px}

/* the hour, under the run; and on your last letter, whether it was read */
.desk .meta{display:flex;align-items:center;gap:6px;margin:5px 0 12px 36px;font-size:11.5px;color:var(--ink-4);letter-spacing:.02em}
.desk .meta.me{justify-content:flex-end;margin-left:0}
.desk .meta .rc{display:inline-flex;align-items:center;gap:4px}
.desk .meta .rc::before{content:"·";margin-right:2px;color:var(--ink-4)}
.desk .meta .rc.read{color:var(--olive)}
.desk .meta .rc svg{width:12px;height:12px;stroke-width:2.4}
.desk .thread .line.typing{margin:6px 0 16px;align-items:center}
.desk .thread .line.typing .bub{height:44px;padding:0 20px;border-radius:22px;display:flex;align-items:center}

/* a letter not yet begun */
.firstword{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:320px;padding:30px 0;text-align:center}
.firstword img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:6px}
.firstword b{font-size:18px;font-weight:500}
.firstword span{font-size:14px;line-height:1.55;color:var(--ink-3)}

/* the writer */
.desk .writer{position:static;display:flex;align-items:flex-end;gap:8px;flex:none;max-width:none;width:auto;margin:0;
  padding:12px 16px 14px;border-top:1px solid var(--ln);border-radius:0;background:var(--niche);box-shadow:none}
.desk .writer textarea{flex:1;min-width:0;height:44px;max-height:154px;resize:none;overflow-y:auto;padding:11px 18px;
  border-radius:22px;background:var(--plaster);font-size:15px;line-height:22px;font-weight:400;color:var(--ink);outline:0;
  transition:background .2s var(--e),box-shadow .2s var(--e)}
.desk .writer textarea:focus{background:var(--niche);box-shadow:inset 0 0 0 1.5px var(--ln-2)}
.desk .writer textarea::placeholder{color:var(--ink-4)}
.desk .writer .wb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);
  transition:background .2s var(--e),color .2s var(--e)}
.desk .writer .wb:hover{background:var(--plaster);color:var(--ink)}
.desk .writer .s{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--plaster-2);color:var(--ink-4);transition:background .2s var(--e),color .2s var(--e)}
.desk .writer.ready .s{background:var(--ink);color:var(--niche)}
.desk .writer .s svg,.desk .writer .wb svg{width:19px;height:19px}

@media (min-width:1600px){
  body[data-page="messages"] .court{max-width:1240px}
  .desk{grid-template-columns:380px minmax(0,1fr)}
  .desk .thread .line .bub,.desk .thread .line .bub .t{font-size:16px}
}

/* ---- a phone: the inbox is the page; a letter takes the screen */
@media (max-width:860px){
  .desk{display:block;height:auto;min-height:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .inbox{border-right:0}
  .inbox .ih{padding:2px 4px 16px}
  .inbox .ih h1{font-size:30px;font-weight:300}
  .isearch{height:48px;margin:0 0 14px;background:var(--niche);box-shadow:var(--cast)}
  .isearch input{font-size:16px}
  .ilist{overflow:visible;padding:6px;border-radius:26px;background:var(--niche);box-shadow:var(--cast)}
  .lrow{padding:12px 10px}

  body.reading{padding-bottom:0}
  body.reading .loggia,body.reading .tabs{display:none}
  body.reading .court{padding:0 10px}
  .lroom{min-height:100vh;min-height:100dvh}
  .rh{position:sticky;top:10px;z-index:60;margin-top:10px;padding:7px 7px 7px 5px;gap:6px;border:0;border-radius:999px;
    background:rgba(255,253,250,.9);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
    box-shadow:var(--cast)}
  .rh .rback{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;color:var(--ink-2)}
  .rh .rback svg{width:22px;height:22px}
  .rwho{gap:10px}
  .rwho img{width:40px;height:40px}
  .rwho .n{font-size:15.5px}
  .rwho .r{font-size:12.5px}
  .lbtn:not(.round){display:none}
  .lbtn.round{width:42px;height:42px;background:none}
  .desk .thread{overflow:visible;padding:10px 2px 12px}
  .desk .thread .line{max-width:84%}
  /* on the plaster, their side is the paper, not the stone */
  .desk .thread .line:not(.me) .bub{background:var(--niche);box-shadow:0 1px 2px rgba(60,46,32,.07)}
  .desk .thread .line:not(.me) .bub.photo{box-shadow:none}
  .desk .writer{position:sticky;bottom:0;z-index:50;margin:0 -10px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,253,250,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .desk .writer textarea{font-size:16px}
}

/* ===========================================================================
   37. DIALOGS SCROLL WITHOUT A BAR
   Edit profile (and any dialog taller than the screen) scrolls inside itself,
   and its scroll bar ran down the right-hand side, clipped by the rounded
   head. They still scroll by wheel, touch and keys; the page behind no
   longer scrolls with them.
   =========================================================================== */
.scrim .dlg{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.scrim .dlg::-webkit-scrollbar{display:none;width:0;height:0}
/* A dialog built inside the court (Edit profile, the event and room editors)
   sat in the court's own layer (z-index 2), so the top capsule (70) covered
   its head and was never dimmed. While one is open the court gives up that
   layer and the dialog's own 200 counts against the whole page. */
.court:has(.scrim.on){z-index:auto}

/* ===========================================================================
   38. A QUIET LINE UNDER EACH POST  (Danny chose option A, 6 Oct 2026)
   Every post carried six floating objects: three shadowed capsules, two
   shadowed circles and a Follow pill — about two dozen on one screen. The
   controls are now a quiet line of words and icons with no fill and no
   shadow (a soft plaster tint on hover), Follow is a copper word, and a
   hairline between posts does the separating the capsules used to. Your own
   response, a pass-on and a kept post still show in their colours.
   =========================================================================== */
.piece{margin-bottom:0;padding:34px 0 26px;border-bottom:1px solid var(--ln)}
.piece:first-of-type{padding-top:8px}
.controls{gap:2px;margin:12px 0 0 -14px}
.controls .btn,.controls .rbtn{height:40px;padding:0 14px;gap:8px;background:none;box-shadow:none;
  color:var(--ink-3);font-size:14px}
.controls .btn:hover{background:var(--plaster-2);box-shadow:none;transform:none;color:var(--ink)}
.controls .btn svg{width:18px;height:18px}
.controls .round{width:40px;padding:0}
.controls .more{margin-right:-10px}
.piece .by .fl{height:30px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--cognac);
  font-size:13.5px;font-weight:500}
.piece .by .fl:hover{background:none;color:var(--cognac-2)}
.piece .by .fl.on{background:none;color:var(--ink-4);font-weight:400}
@media (max-width:600px){
  .controls{gap:0}
  .controls .btn,.controls .rbtn{height:40px}
  .controls a.btn,.controls .pass{width:40px;padding:0;justify-content:center;font-size:0;gap:0}
}

/* ===========================================================================
   39. THE TAB BAR STEPS ASIDE WHILE YOU READ
   On a phone the bar fades and drops away while you scroll down the page and
   comes back when you scroll up or stop (bellio-ui: tabsStepAside).
   =========================================================================== */
@media (max-width:860px){
  .tabs{transition:opacity .3s var(--e),transform .4s var(--e)}
  .tabs.away{opacity:0;transform:translateY(28px);pointer-events:none}
}

/* ===========================================================================
   40. A MENU FITS ITS CHOICES  (Danny, 6 Oct 2026: not centred)
   The ⋯ menus used the 600px form dialog, so a short list hung down the left
   of a wide sheet under a centred heading, with Close stranded in the corner.
   A list of choices is now a narrower sheet: the icons stand in one column,
   each choice takes a soft tint on hover, and Close is a full-width capsule.
   Forms and "are you sure" dialogs keep their width.
   =========================================================================== */
#bsheet .dlg.menu{width:min(440px,94vw)}
/* Send in a letter: a search, then the people in about half the height,
   fading at the foot where there is more to scroll to (Danny, 8 Oct 2026). */
#bsheet .dlg .sendfind{display:flex;align-items:center;gap:10px;height:48px;margin:18px 0 0;padding:0 18px;border-radius:999px;
  background:var(--plaster-2);color:var(--ink-3);cursor:text}
#bsheet .dlg .sendfind svg{width:17px;height:17px;flex:none}
#bsheet .dlg .sendfind input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;box-shadow:none;
  font:inherit;font-size:15px;font-weight:300;color:var(--ink);-webkit-appearance:none;appearance:none}
#bsheet .dlg .sendfind input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
#bsheet .dlg .sendfind input::placeholder{color:var(--ink-4)}
#bsheet .dlg.menu .sheetrows.sendlist{margin-top:8px;max-height:clamp(150px,calc(100vh - 460px),316px);overflow-y:auto;overscroll-behavior:contain;padding:4px 0 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent)}
#bsheet .dlg .sendlist .none{margin:16px 18px 4px;font-size:14px;line-height:1.5;color:var(--ink-3);font-weight:300}
#bsheet .dlg.menu .sheetrows.sendelse{position:relative;margin-top:2px;padding-top:6px}
#bsheet .dlg.menu .sheetrows.sendelse:before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--ln)}
#bsheet .dlg.menu .sheetrows{margin-top:18px}
#bsheet .dlg.menu .sheetrows .srow{gap:16px;padding:14px 18px;border-radius:20px}
@media (hover:hover){#bsheet .dlg.menu .sheetrows .srow:hover{background:var(--plaster)}}
#bsheet .dlg.menu .f{margin-top:14px}
#bsheet .dlg.menu .f .ib.wide{display:flex;align-items:center;justify-content:center;width:100%;height:48px;
  background:var(--plaster);color:var(--ink-2);font-size:15px}
#bsheet .dlg.menu .f .ib.wide:hover{background:var(--plaster-2);color:var(--ink)}

/* ===========================================================================
   41. THE HEAD OF A CONVERSATION
   Every thread opens on the person it is with — face, name, what they do,
   their page, and the day the letters began — so a short exchange starts
   from someone instead of floating in an empty panel. A conversation with a
   member who has since left says so, and has no writer.
   =========================================================================== */
.desk .thread .opener{display:flex;flex-direction:column;align-items:center;gap:3px;padding:28px 16px 6px;text-align:center}
.desk .thread .opener img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.desk .thread .opener b{display:inline-flex;align-items:center;gap:7px;font-size:19px;font-weight:500;color:var(--ink)}
.desk .thread .opener .r{font-size:13.5px;color:var(--ink-3)}
.desk .thread .opener .lbtn{margin-top:14px}
.desk .thread .opener .since{max-width:300px;margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-4)}
.desk .writer.closed{display:block;padding:18px 24px;text-align:center;font-size:13.5px;color:var(--ink-3)}
.lroom.gone .rwho img,.lroom.gone .opener img{filter:grayscale(1);opacity:.75}
/* on a phone the header has no Profile button, so the opener keeps its own */
@media (max-width:860px){.desk .thread .opener .lbtn{display:inline-flex}}

/* ===========================================================================
   42. LETTERS IN BELLIO'S OWN SHAPE  (Danny, 6 Oct 2026: the desk looked wrong)
   No white box and no side column. The inbox is a column on the plaster; a
   letter opens in its place with the person in a floating capsule under the
   top bar, the letters on the plaster, and the writer a floating capsule at
   the foot — the same shapes as the rest of Bellio.
   =========================================================================== */
@media (min-width:861px){
  body[data-page="messages"] .court{max-width:760px;padding-top:30px}
  body[data-page="messages"]{padding-bottom:0}
  .desk{display:block;height:auto;min-height:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .inbox{border-right:0}
  .inbox .ih{padding:6px 6px 18px}
  .inbox .ih h1{font-size:34px;font-weight:300;letter-spacing:-.01em}
  .isearch{height:52px;margin:0 0 16px;padding:0 20px;background:var(--niche);box-shadow:var(--cast)}
  .isearch input{font-size:15.5px}
  .ilist{overflow:visible;padding:8px;border-radius:30px;background:var(--niche);box-shadow:var(--cast)}
  .lrow{padding:13px 14px}
  .lrow.on{background:none}
  .lrow.on:hover{background:var(--plaster)}

  .lroom{min-height:calc(100vh - 114px);min-height:calc(100dvh - 114px)}
  .rh{position:sticky;top:96px;z-index:60;padding:8px 10px 8px 8px;gap:8px;border:0;border-radius:999px;
    background:rgba(255,253,250,.9);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
    box-shadow:var(--cast)}
  .rh .rback{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:var(--ink-2)}
  .rh .rback:hover{background:var(--plaster)}
  .rh .rback svg{width:22px;height:22px}
  .desk .thread{overflow:visible;padding:18px 4px 18px}
  .desk .thread .line:not(.me) .bub{background:var(--niche);box-shadow:0 1px 2px rgba(60,46,32,.07)}
  .desk .thread .line:not(.me) .bub.photo{box-shadow:none}
  .desk .writer{position:sticky;bottom:18px;z-index:50;margin:6px 0 0;padding:8px 8px 8px 10px;border:0;border-radius:999px;
    background:rgba(255,253,250,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--cast-2)}
  .desk .writer textarea{background:transparent;border-radius:20px}
  .desk .writer textarea:focus{background:transparent;box-shadow:none}
  .desk .writer.closed{padding:16px 24px}
}
/* a photograph is its own size, on nothing (a percentage cap sized the bubble
   to the picture's natural width, leaving a white block beside it) */
.desk .thread .line .bub.photo,.desk .thread .line:not(.me) .bub.photo{background:none;box-shadow:none;padding:0}
.desk .thread .line .bub.photo .shot{max-width:min(320px,68vw)}

/* ===========================================================================
   43. BELLIO HOUSE ACCOUNTS
   The seeded accounts stay on Bellio, labelled for what they are: "Bellio
   house" in a post's byline and a line under the name on their page. They
   carry no verified seal — an account Bellio writes is not a verified person.
   =========================================================================== */
.seedmark{color:var(--cognac);font-weight:500}
.plinth .seednote{max-width:420px;margin:8px auto 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}

/* ===========================================================================
   44. THE TOP OF A PHOTOGRAPH STAYS IN  (Danny, 6 Oct 2026)
   Photographs keep their arch and fill it, as designed. The fill was centred,
   so on a tall photo the top — a head, a face — was the part cut away. It now
   holds the top of the photo, and any trim comes from the bottom.
   =========================================================================== */
.arcade img,.arcade video{object-position:50% 0}
/* The whole photograph fills an arch shaped to it (6 Oct 2026, after the
   stretch looked wrong): never cropped, never stretched, nothing around it. A
   wide photo is the full-width arch it always was; a tall one stands centred,
   up to 640px tall (as Facebook shows them; 460px on a phone), its arch filled edge to edge. */
.piece .arcade.fit{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;background:none;
  border-radius:50% 50% 30px 30px / 28% 28% 30px 30px}
.piece .arcade.fit img{width:auto;max-width:100%;height:auto;max-height:640px;object-fit:contain;object-position:50% 50%}
@media (max-width:600px){ .piece .arcade.fit img{max-height:460px} }

/* ===========================================================================
   45. THE BELLIO MARK  (Danny, 6 Oct 2026: "Under the arch", everywhere)
   The cognac disc with a B gives way to the mark the app icon carries: a
   Fraunces B under Bellio's arch, drawn as outlines (assets/bellio-arch.svg).
   The span keeps its B for screen readers; the picture replaces the letter.
   =========================================================================== */
.mark .seal,.foot .seal{background:url(assets/bellio-arch.svg) center/contain no-repeat;border:0;border-radius:0;
  box-shadow:none;color:transparent;font-size:0;overflow:hidden}
.mark .seal{width:30px;height:38px}
.foot .seal{width:34px;height:44px;margin-left:auto;margin-right:auto}

/* ===========================================================================
   46. A SET OF PHOTOGRAPHS  (Danny, 6 Oct 2026: ten photos, nice and tidy)
   Up to ten photographs make ONE post: in the composer a single row of
   numbered thumbnails (remove, move, add); in the feed one arch showing one
   photograph at a time — swipe, or the arrows — with "2 / 7" and a row of
   dots. The arch takes each photograph's shape (section 44) and eases between
   them; the viewer steps through the whole set.
   =========================================================================== */
/* the composer's row */
.dlg .shot .pstrip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.dlg .shot:has(.pstrip){border-radius:0;overflow:visible;box-shadow:none;background:none}
.pthumb{position:relative;flex:none;width:92px;height:116px;border-radius:46px 46px 14px 14px / 40px 40px 14px 14px;
  overflow:hidden;background:var(--plaster-2);box-shadow:var(--cast)}
.pthumb img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;display:block}
.pthumb .pn{position:absolute;left:8px;bottom:8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:rgba(36,31,28,.72);color:#fff;font-size:11.5px;display:grid;place-items:center}
.pthumb .px{position:absolute;right:6px;top:22px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,253,250,.92);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.pthumb .px svg{width:13px;height:13px}
.pthumb .pmv{position:absolute;right:6px;bottom:6px;display:flex;gap:4px}
.pthumb .pmv button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,253,250,.92);
  color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.pthumb .pmv button svg{width:13px;height:13px}
.pthumb .pmv .fwd svg{transform:rotate(180deg)}
.padd{flex:none;width:92px;height:116px;border-radius:46px 46px 14px 14px / 40px 40px 14px 14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--ln-2);color:var(--ink-3);font-size:13px}
.padd:hover{border-color:var(--cognac);color:var(--cognac)}
.pcount{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:13px;color:var(--ink-3)}
.pcount .num{color:var(--ink);font-weight:500}
.pcount .pclear{margin-left:auto;color:var(--ink-3);font-size:13px}
.pcount .pclear:hover{color:#B3261E}

/* the set in the feed */
.pset{position:relative}
.pset .arcade.fit{position:relative}
.pset .arcade.fit img{display:none}
.pset .arcade.fit img.on{display:block}
.pset .snav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,253,250,.9);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.22);z-index:2;opacity:0;transition:opacity .2s var(--e)}
.pset .snav svg{width:18px;height:18px}
.pset .snav.prev{left:10px}
.pset .snav.next{right:10px}
.pset .snav.next svg{transform:rotate(180deg)}
.pset:hover .snav,.pset .snav:focus-visible{opacity:1}
.pset .snav[hidden]{display:none}
.pset .scount{position:absolute;right:12px;bottom:12px;z-index:2;height:26px;padding:0 10px;border-radius:999px;display:grid;place-items:center;
  background:rgba(36,31,28,.62);color:#fff;font-size:12px;letter-spacing:.02em}
.pset .sdots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.pset .sdots i{width:6px;height:6px;border-radius:50%;background:var(--ln-2);transition:background .2s var(--e),transform .2s var(--e)}
.pset .sdots i.on{background:var(--cognac);transform:scale(1.25)}
@media (hover:none){ .pset .snav{opacity:1;width:34px;height:34px} }

/* the viewer steps through a set */
.lb .lnav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,253,250,.14);color:#fff}
.lb .lnav:hover{background:rgba(255,253,250,.26)}
.lb .lnav svg{width:22px;height:22px}
.lb .lnav.prev{left:22px}
.lb .lnav.next{right:22px}
.lb .lnav.next svg{transform:rotate(180deg)}
.lb .lnav[hidden],.lb .lcount[hidden]{display:none}
.lb .lcount{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:13px;letter-spacing:.04em}

/* ===========================================================================
   47 · THE COUNT (6 Oct 2026). Free posts are 280 characters, the way X does
   it. A ring fills as you write; the number shows in the last twenty; past
   the line the ring and number turn red and Post rests until it fits.
   ======================================================================== */
.dlg .f .cnt{display:inline-flex;align-items:center;gap:7px;padding-right:10px}
.dlg .f .cnt svg{display:block;transform:rotate(-90deg)}
.dlg .f .cnt .tr{fill:none;stroke:rgba(43,33,28,.12);stroke-width:2}
.dlg .f .cnt .fl{fill:none;stroke:var(--cognac);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.dlg .f .cnt.near .fl{stroke:#C28A2C}
.dlg .f .cnt.over .fl{stroke:#B3261E}
.dlg .f .cnt b{font-weight:500;font-size:13px;color:var(--ink-3)}
.dlg .f .cnt.over b{color:#B3261E}
.dlg .f .go:disabled{opacity:.35;cursor:default;box-shadow:none}
/* on a phone the five tools, the count and Post share one row: a little
   tighter, so Post never runs off the edge */
@media (max-width:600px){
  .dlg .f{gap:2px}
  .dlg .f .ib{width:36px;height:36px}
  .dlg .f .go{flex:none;padding:0 20px}
  .dlg .f .cnt{gap:5px;padding-right:6px}
  .dlg .f .cnt svg{width:20px;height:20px}
}
@media (max-width:350px){
  .dlg .f .ib{width:30px}
  .dlg .f .go{padding:0 14px}
  .dlg .f .cnt{gap:4px;padding-right:4px}
  .dlg .f .cnt svg{width:18px;height:18px}
}

/* ===========================================================================
   48 · PLEASE UPGRADE TO BELLIO PRIVÉ (6 Oct 2026). The free plan is looking
   around and posting words; anything more opens this, by name, before a
   picker or a form does.
   ======================================================================== */
.dlg .upg{text-align:center}
.dlg .upg .upgseal{display:grid;place-items:center;width:58px;height:58px;margin:2px auto 16px;border-radius:50%;
  background:var(--cognac-sf);color:var(--cognac)}
.dlg .upg .upgseal svg{width:24px;height:24px}
.dlg .upg h3{margin-top:4px}
.dlg .upg .sheetp + .sheetp{margin-top:8px}
/* the free card is short now (look around, a few words): it keeps its own
   height rather than stretching to Privé's and leaving a blank arch */
.tiers{align-items:start}
/* One arch for both cards. --arch-sm sizes its curve by the card's height,
   so the shorter Free card had a flatter dome than Privé (Danny, 8 Oct
   2026): fixed sizes, the dome Privé had. */
.tier{border-radius:50% 50% 6px 6px / 48px 48px 6px 6px}
/* the Signature link is a link: it needs the button's shape spelled out */
.tier a.go{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* ===========================================================================
   49 · THE PRIVÉ MARK (7 Oct 2026). It was a white capsule like "Wakefield"
   beside it, and Danny could not find it on his own page. Now it is the one
   copper capsule on a member's page: cream crown, cream words.
   ======================================================================== */
.plinth .facts span.pmark{background:var(--cognac);color:#FBF6EF;font-weight:500;letter-spacing:.02em;
  box-shadow:0 6px 18px -8px rgba(168,93,46,.55)}
.plinth .facts span.pmark svg{color:#F3D9B8}

/* ===========================================================================
   50 · PRIVÉ ON THE WEBSITE (7 Oct 2026). Two buttons on the copper card —
   a year (cream) and a month (outlined) — and, back from Mollie, one quiet
   line at the top that says how the payment went.
   ======================================================================== */
.tier .buy{display:flex;flex-direction:column;gap:9px}
.tier .go.ghost{background:transparent;color:#FFF6EF;box-shadow:inset 0 0 0 1.5px rgba(255,246,239,.6)}
.tier .go.ghost:hover{box-shadow:inset 0 0 0 1.5px #FFF6EF}
.tier .buynote{font-size:12.5px;color:rgba(255,246,239,.8);font-weight:300;margin-top:3px}
.tier.hi .cur{color:rgba(255,246,239,.8)}
.paynote{max-width:640px;margin:0 auto 22px;padding:14px 22px;border-radius:26px;background:var(--niche);
  box-shadow:var(--cast);text-align:center;font-size:14.5px;font-weight:300;color:var(--ink-2)}
.paynote b{font-weight:500;color:var(--ink)}
.paynote.paid{background:var(--cognac-sf)}
.paynote.paid b{color:var(--cognac-2)}
.paynote.failed b{color:#B3261E}

/* ===========================================================================
   PROFILE HEADER — in order of weight (Danny, 8 Oct 2026: "more professional").
   Name; what they do; one quiet line (handle · place · site); the marks;
   their words; Open to in full; the figures as one bar; the actions.
   =========================================================================== */
.plinth .hl{margin-top:8px;font-size:17px;font-weight:400;color:var(--ink);letter-spacing:.005em}
.plinth .meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 0;margin-top:10px;
  font-size:14px;color:var(--ink-3);font-weight:300}
.plinth .meta span,.plinth .meta a{display:inline-flex;align-items:center;gap:6px;color:inherit;white-space:nowrap}
.plinth .meta svg{width:14px;height:14px;color:var(--ink-4)}
.plinth .meta a:hover{color:var(--cognac)}
.plinth .meta a:hover svg{color:var(--cognac)}
.plinth .meta .dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--ink-4);margin:0 12px;opacity:.7}
.plinth .facts.marks{margin-top:18px}
.plinth .facts.marks span{height:34px;padding:0 15px;font-size:13px}
.plinth .pbio{max-width:600px;margin:24px auto 0;color:var(--ink-2);font-size:16px;line-height:1.75;font-weight:300}
.plinth .pbio p+p{margin-top:12px}
.plinth .pbio b{font-weight:500;color:var(--ink)}
.plinth .popen{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:20px}
.plinth .popen .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-right:6px}
.plinth .popen a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--plaster-2);
  color:var(--ink-2);font-size:13px;transition:color .25s var(--e),transform .3s var(--sp)}
.plinth .popen a:hover{color:var(--cognac);transform:translateY(-1px)}
/* The figures: one bar, quietly divided. */
.plinth .count{display:inline-flex;justify-content:center;gap:0;margin:30px auto 0;padding:12px 8px;border-radius:999px;
  background:var(--niche);box-shadow:var(--cast)}
.plinth .count>div,.plinth .count>a{padding:2px 28px;position:relative}
.plinth .count>*+*::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--ln)}
.plinth .count b{font-size:21px;font-weight:400;line-height:1.2}
.plinth .count span{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.18em}
.plinth .acts{margin-top:24px}
@media (max-width:640px){
  .plinth .hl{font-size:15.5px}
  .plinth .meta{font-size:13px}
  .plinth .meta .dot{margin:0 9px}
  .plinth .pbio{font-size:15px;padding:0 6px}
  .plinth .count{display:flex;width:100%;padding:10px 4px}
  .plinth .count>div,.plinth .count>a{flex:1;padding:2px 4px}
  .plinth .count b{font-size:19px}
  .plinth .count span{font-size:9.5px;letter-spacing:.12em}
}

/* ===========================================================================
   PROFILE MASTHEAD (Danny chose it, 8 Oct 2026). Who they are, set on their
   own cover; their words, Open to, and one line of figures and actions below.
   =========================================================================== */
.plinth.mh{text-align:left;margin-bottom:40px}
.plinth.mh .mast{position:relative;aspect-ratio:12/5;height:auto;border-radius:var(--arch-cover);overflow:hidden;box-shadow:var(--cast-2);
  background:radial-gradient(130% 120% at 85% 0%,#5A3D2B 0%,#2B211B 48%,#15110E 100%)}
.plinth.mh .mast .cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
/* Only a breath of shade at the top, for the Cover button: the cover shows as it is. */
.plinth.mh .mast .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,12,9,.16) 0%,rgba(16,12,9,0) 30%)}
.plinth.mh .mast.plain{aspect-ratio:auto;height:clamp(170px,19vw,220px)}
.plinth.mh .mast.plain .shade{background:none}
.plinth.mh .mast>.shoot{position:absolute;top:22px;right:24px;left:auto;bottom:auto;z-index:3;display:inline-flex;align-items:center;gap:8px;height:38px;
  padding:0 16px;border-radius:999px;background:rgba(16,12,9,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#FBF6EF;font-size:13.5px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.plinth.mh .mast>.shoot svg{width:15px;height:15px;color:#FBF6EF}
/* Who they are, under the cover; the photograph (or logo) rides its edge. */
.plinth.mh .who{position:relative;z-index:2;display:flex;align-items:flex-start;gap:24px;margin:-56px 40px 0}
.plinth.mh .facewrap{position:relative;width:112px;margin:0;flex:none;z-index:2}
.plinth.mh .face{width:112px;height:112px;margin:0;border:3px solid rgba(255,248,238,.92);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.plinth.mh .id{flex:1;min-width:0;padding-top:70px;color:var(--ink)}
.plinth.mh h1{margin:0;font-size:clamp(34px,3.6vw,46px);font-weight:300;letter-spacing:-.015em;line-height:1.08;color:var(--ink);
  display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;text-align:left}
.plinth.mh h1 .vf{width:22px;height:22px}
.plinth.mh .hl{margin-top:8px;font-size:18px;font-weight:400;color:var(--ink-2)}
.plinth.mh .meta{justify-content:flex-start;margin-top:8px;font-size:14px;color:var(--ink-3)}
.plinth.mh .meta svg{color:var(--ink-4)}
.plinth.mh .meta a:hover,.plinth.mh .meta a:hover svg{color:var(--ink)}
.plinth.mh .meta .dot{background:var(--ink-4)}
.plinth.mh .facts.marks{flex-direction:column;align-items:flex-end;margin:0;padding-top:72px;flex:none;gap:8px}
.plinth.mh .facts.marks span{height:34px;padding:0 15px;font-size:13px;white-space:nowrap;background:var(--niche);color:var(--ink);box-shadow:var(--cast)}
.plinth.mh .facts.marks span.pmark{background:var(--cognac);color:#FBF6EF}
.plinth.mh .under{max-width:780px;margin:30px auto 0;padding:0 8px}
.plinth.mh .seednote{margin:0 0 14px;max-width:none}
.plinth.mh .mutual{margin:0 0 18px}
.plinth.mh .pbio{max-width:none;margin:0;font-size:17px;line-height:1.75}
.plinth.mh .popen{justify-content:flex-start;margin-top:22px}
.plinth.mh .popen a{height:34px;padding:0 15px;background:var(--niche);box-shadow:var(--cast);font-size:13.5px}
.plinth.mh .row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--ln)}
.plinth.mh .pbio:empty+.row,.plinth.mh .under>.row:first-child{margin-top:0;padding-top:0;border-top:0}
/* A company page you run: the cover and the logo are the controls. */
.plinth.mh .mast.tap{cursor:pointer}
.plinth.mh .mast.tap .facewrap.tap{cursor:pointer}
.plinth.mh .mast.tap .cov{transition:filter .4s var(--e)}
.plinth.mh .mast.tap:hover .cov{filter:brightness(.92)}
.plinth.mh .mast.tap .facewrap.tap .face{transition:filter .3s var(--e)}
.plinth.mh .mast.tap .facewrap.tap:hover .face{filter:brightness(.94)}

/* ===========================================================================
   PROJECTS (Danny, 8 Oct 2026). Rooms | Projects, the cards, the project's
   own page: its cover whole with the words under it, as a member's page.
   =========================================================================== */
.ptabs{display:flex;justify-content:center;gap:8px;margin:-8px 0 26px}
.ptabs a{display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);
  font-size:14px;color:var(--ink-2);text-decoration:none;transition:transform .3s var(--sp)}
.ptabs a:hover{transform:translateY(-1px)}
.ptabs a.on{background:var(--ink);color:var(--niche)}
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#D9B25A;flex:none}
.sdot.building{background:#7FBF8A}
.sdot.launched{background:#F0A672}
.modes button b .sdot{margin-right:2px}
.projs{display:flex;flex-direction:column;gap:14px}
.proj{border-radius:30px;background:var(--niche);box-shadow:var(--cast);overflow:hidden;display:flex;min-height:200px}
.proj .cv{width:250px;flex:none;position:relative;display:grid;place-items:center;background:radial-gradient(130% 120% at 85% 0%,#5A3D2B 0%,#2B211B 48%,#15110E 100%);
  border-radius:30px 120px 120px 30px/30px 30px 30px 30px;overflow:hidden;color:rgba(251,246,239,.5)}
.proj .cv>svg{width:34px;height:34px}
.proj .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj .cv .st{position:absolute;left:16px;top:14px;height:28px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:999px;
  background:rgba(16,12,9,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#FBF6EF;font-size:12px;letter-spacing:.04em}
.proj .bd{padding:20px 24px;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.proj .n{font-size:19px;color:var(--ink);text-decoration:none}
.proj .d{font-size:14px;color:var(--ink-3);line-height:1.55;font-weight:300}
.proj .lf{display:flex;flex-wrap:wrap;gap:6px}
.proj .lf span{height:28px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;background:var(--plaster-2);font-size:12.5px;color:var(--ink-2)}
.proj .ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px}
.proj .avs{display:flex;align-items:center;min-width:0}
.proj .avs img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--niche)}
.proj .ft small{font-size:12.5px;color:var(--ink-3);margin-left:10px}
.proj .ft .jn{flex:none;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;
  background:var(--ink);color:var(--niche);font:inherit;font-size:13px;line-height:1;text-decoration:none}
.proj .ft .jn.on{background:var(--plaster-2);color:var(--ink-2)}
.pm{margin-bottom:26px}
.pm .pcov{position:relative;aspect-ratio:12/5;border-radius:var(--arch-cover);overflow:hidden;box-shadow:var(--cast-2);
  background:radial-gradient(130% 120% at 85% 0%,#5A3D2B 0%,#2B211B 48%,#15110E 100%)}
.pm .pcov.plain{aspect-ratio:auto;height:clamp(150px,17vw,200px)}
.pm .pcov.tap{cursor:pointer}
.pm .pcov .cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .4s var(--e)}
.pm .pcov.tap:hover .cov{filter:brightness(.92)}
.pm .pcov:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,12,9,.22),rgba(16,12,9,0) 34%);pointer-events:none}
.pm .tags{position:absolute;left:24px;top:22px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.pm .tags span{height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:999px;background:rgba(16,12,9,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12.5px;color:#FBF6EF}
.pm .tags span svg{width:13px;height:13px}
.pm .pcov>.shoot{position:absolute;top:22px;right:24px;left:auto;bottom:auto;z-index:3;display:inline-flex;align-items:center;gap:8px;height:38px;
  padding:0 16px;border-radius:999px;background:rgba(16,12,9,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#FBF6EF;font-size:13.5px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.pm .pcov>.shoot svg{width:15px;height:15px;color:#FBF6EF}
.pm .pid{max-width:780px;margin:26px auto 0;padding:0 8px}
.pm .pid .k{color:var(--ink-3)}
.pm .pid h1{margin:8px 0 0;font-size:clamp(34px,3.6vw,46px);font-weight:300;letter-spacing:-.015em;line-height:1.08;color:var(--ink)}
.pm .pid p{margin:12px 0 0;font-size:17px;line-height:1.7;color:var(--ink-2);font-weight:300}
.pacts{max-width:780px;margin:0 auto 30px;padding:22px 8px 0;border-top:1px solid var(--ln);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.pacts .avs{display:flex;align-items:center;min-width:0}
.pacts .avs img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid var(--plaster)}
.pacts .avs img+img{margin-left:-10px}
.pacts .avs span{margin-left:12px;font-size:14px;color:var(--ink-2)}
.pacts .avs img:first-child+span,.pacts .avs>span:first-child{margin-left:0}
.pacts .b{display:flex;gap:8px;flex-wrap:wrap}
.pacts button{height:44px;padding:0 18px;border-radius:999px;background:var(--niche);box-shadow:var(--cast);font:inherit;font-size:14px;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:8px}
.pacts button.pri{background:var(--ink);color:var(--niche)}
.pacts button.on{background:var(--plaster-2);box-shadow:none;color:var(--ink-2)}
.pacts button[disabled]{opacity:.6}
.pacts button.ico{width:44px;padding:0;justify-content:center}
.pacts button svg{width:16px;height:16px}
.pgrid{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.pgrid .niche{padding:22px 26px;margin:0}
.pgrid h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 14px;padding:0}
.pgrid .none{margin:0;font-size:14.5px;color:var(--ink-3);font-weight:300;line-height:1.6}
.pgrid .addl{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:38px;padding:0 16px;border-radius:999px;background:var(--plaster-2);
  font:inherit;font-size:13.5px;color:var(--ink)}
.pgrid .addl svg{width:15px;height:15px}
.pgrid+.divide{margin-top:40px}
.look .o{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--ln)}
.look h3+.o{border-top:0;padding-top:2px}
.look .o .t{flex:1;min-width:0}
.look .o b{display:block;font-weight:400;font-size:15.5px;color:var(--ink)}
.look .o .t span{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-3);line-height:1.5;font-weight:300}
.look .o button{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;background:var(--ink);color:var(--niche);font:inherit;font-size:13px;line-height:1}
.team .ms2{display:flex;flex-wrap:wrap;gap:6px 28px}
.team .m{display:flex;align-items:center;gap:12px;padding:6px 0;min-width:220px;color:inherit;text-decoration:none}
.team .m img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.team .m b{display:block;font-weight:400;font-size:15px;color:var(--ink)}
.team .m span span{font-size:13px;color:var(--ink-3)}
.miles{position:relative;display:flex;padding:8px 0 4px}
.miles:before{content:'';position:absolute;left:10%;right:10%;top:15px;height:1.5px;background:var(--ln-2)}
.miles .ms{position:relative;flex:1;text-align:center;padding:34px 6px 0}
.miles .ms:before{content:'';position:absolute;left:50%;top:8px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--niche);border:2px solid var(--ln-2);box-sizing:border-box}
.miles .ms.done:before{background:var(--cognac);border-color:var(--cognac)}
.miles .ms b{display:block;font-weight:400;font-size:14.5px;color:var(--ink);line-height:1.35}
.miles .ms span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.miles.long{flex-direction:column;padding:0 0 0 26px}
.miles.long:before{left:8px;right:auto;top:6px;bottom:6px;width:1.5px;height:auto}
.miles.long .ms{text-align:left;padding:4px 0 14px}
.miles.long .ms:before{left:-25px;top:7px;margin:0}
@media (max-width:640px){
  .proj{flex-direction:column}
  .proj .cv{width:auto;height:170px;border-radius:30px 30px 0 0}
  .pm .pcov{aspect-ratio:16/9;border-radius:30px}
  .pm .pcov.plain{height:130px}
  .pm .tags{left:16px;top:16px}
  .pm .pcov>.shoot{top:14px;right:14px;padding:0;width:40px;justify-content:center}
  .pm .pcov>.shoot span{display:none}
  .pm .pid{padding:0 4px;margin-top:20px}
  .pm .pid h1{font-size:32px}
  .pm .pid p{font-size:15.5px}
  .pacts{flex-direction:column;align-items:stretch;padding:18px 4px 0}
  .pacts .b{width:100%}
  .pacts .b button:not(.ico){flex:1;justify-content:center}
  .pgrid .niche{padding:20px}
  .look .o{flex-wrap:wrap}
  .miles{flex-direction:column;padding:0 0 0 26px}
  .miles:before{left:8px;right:auto;top:6px;bottom:6px;width:1.5px;height:auto}
  .miles .ms{text-align:left;padding:4px 0 14px}
  .miles .ms:before{left:-25px;top:7px;margin:0}
}
/* Safety (Danny, 9 Oct 2026): a word of care in a first letter from someone
   you don't know; where to turn, in every report. */
.lsafe{display:flex;gap:14px;align-items:flex-start;max-width:560px;margin:14px auto 4px;padding:16px 18px;border-radius:22px;
  background:var(--niche);box-shadow:var(--cast);width:100%}
.lsafe>svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--cognac)}
.lsafe .tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.lsafe .tx b{font-weight:500;font-size:14.5px;color:var(--ink)}
.lsafe .tx>span{font-size:13.5px;line-height:1.55;color:var(--ink-2);font-weight:300}
.lsafe .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.lsafe .acts button{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;background:var(--plaster-2);
  font:inherit;font-size:13px;color:var(--ink);line-height:1}
.lsafe .acts button.ok{background:var(--ink);color:var(--niche)}
.lsafe1{max-width:560px;margin:12px auto 0;text-align:center;font-size:13px;line-height:1.55;color:var(--ink-3);font-weight:300;padding:0 12px}
.asknote{margin:6px 2px 0;font-size:13px;line-height:1.55;color:var(--ink-3);font-weight:300}
.asknote a{color:var(--cognac);text-decoration:none;white-space:nowrap}
.asknote b{color:var(--ink);font-weight:500}
/* The figures: each number centred over its label (Danny). */
.plinth.mh .count{display:flex;gap:6px;margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
.plinth.mh .count>div,.plinth.mh .count>a{padding:0 10px;min-width:70px;text-align:center}
.plinth.mh .count>*+*::before{display:none}
.plinth.mh .count b{display:block;font-size:24px;font-weight:400;line-height:1.15;color:var(--ink)}
.plinth.mh .count span{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.plinth.mh .acts{margin:0;justify-content:flex-end;gap:8px}
.plinth.mh .acts a,.plinth.mh .acts button{height:44px;padding:0 17px;font-size:14px}
.plinth.mh .acts .ico{width:44px;padding:0;justify-content:center}
.plinth.mh .acts .ico svg{margin:0}
@media (max-width:640px){
  .plinth.mh .mast{aspect-ratio:16/9;border-radius:30px}
  .plinth.mh .mast.plain{height:130px}
  .plinth.mh .who{margin:-44px 18px 0;flex-direction:column;align-items:flex-start;gap:14px}
  .plinth.mh .id,.plinth.mh .facts.marks{padding-top:0}
  .plinth.mh .facewrap,.plinth.mh .face{width:88px;height:88px}
  .plinth.mh h1{font-size:32px}
  .plinth.mh .hl{font-size:16px}
  .plinth.mh .meta{font-size:12.5px}
  .plinth.mh .meta .dot{margin:0 8px}
  .plinth.mh .facts.marks{flex-direction:row;align-items:center;flex-wrap:wrap}
  .plinth.mh .under{margin-top:26px;padding:0 4px}
  .plinth.mh .pbio{font-size:15.5px;padding:0}
  .plinth.mh .row{flex-direction:column;align-items:stretch}
  .plinth.mh .count{justify-content:space-between;gap:0;width:100%}
  .plinth.mh .count>div,.plinth.mh .count>a{flex:1;min-width:0;padding:0 2px}
  .plinth.mh .count b{font-size:21px}
  .plinth.mh .count span{font-size:10.5px;letter-spacing:.05em}
  .plinth.mh .acts{justify-content:stretch;flex-wrap:wrap}
  .plinth.mh .acts>.pri,.plinth.mh .acts>button:not(.ico){flex:1 1 auto;justify-content:center}
}

/* ===========================================================================
   ROOM FOR A THUMB (Danny, 8 Oct 2026: "make mobile easy enough for users
   to use — check, check and check again"). Measured on 390, 375 and 360px
   phones: what you press is at least about 40px, without moving a thing.
   =========================================================================== */
.mark{min-width:44px;min-height:44px;justify-content:center}
@media (max-width:640px){
  .piece .by .fl{height:40px;padding:0 10px;margin-right:-10px}
  .piece .by .w .n a{display:inline-block;padding:6px 0;margin:-6px 0}
  .n.num > a[href^="events.html"]{display:inline-flex;align-items:center;min-height:40px}
}

/* ---------------------------------------------------------------------------
   34. THE ACCOUNT MENU, TIDIED
   Ten items of equal weight in a single block read as a wall. They are two
   kinds of thing — places you go in Bellio, and your own account — so they sit
   as two groups with a hairline between, and the second group is set a shade
   quieter so the eye lands on the first. Same ten destinations, less noise.
   --------------------------------------------------------------------------- */
.vestibule{padding:12px}
.vestibule .who{padding:10px 14px 14px}
.vestibule .vgrid{border-top:0;padding-top:0;gap:2px}
.vestibule .vgrid a{height:44px;font-size:13.8px;letter-spacing:.002em}
.vestibule .vrule{height:1px;background:var(--ln);margin:10px 10px}
.vestibule .vgrid.quiet a{color:var(--ink-3)}
.vestibule .vgrid.quiet a svg{color:var(--ink-4)}
.vestibule .vgrid.quiet a:hover{color:var(--ink)}
.vestibule .vgrid.quiet a:hover svg{color:var(--cognac)}
.vestibule .vout{margin-top:8px;padding-top:12px}