/* Layout: a sun-faded leisure catalogue. Sand paper, light condensed serif headlines, quiet Helvetica body, pill buttons in small caps, catalogue "Fig." captions and an A–D exclusives grid. */
:root{
  --sand:#EBE6DC; --cream:#FDFBF4; --ink:#333333; --ink-deep:#1F1F1F; --muted:#6F695F;
  --butter:#F1D27A; --pool:#23659F; --teal:#39AAA7; --coral:#D1796D; --sky:#B0C4DE;
  --rule:rgba(51,51,51,.18); --on-butter:#333333; --panel:#333333; --on-panel:#EBE6DC;
  --tile-a:#EFC39A; --tile-b:#B9E0DC; --tile-c:#D5DBAE; --tile-d:#EDC2B9;
  --copper:#B85F22; --turq:#2AA6A1; --avocado:#5F6B2E; --velvet:#454F27; --on-velvet:#F3EAD6; --peach:#F2D3B3;
  --f-display:"Cormorant Garamond","ITC Garamond","Garamond","Times New Roman",serif;
  --f-body:"Helvetica Neue","Helvetica",Arial,system-ui,sans-serif;
  --f-caps:"Marcellus","Optima","Candara","Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sand:#1B2029; --cream:#242B36; --ink:#EBE6DC; --ink-deep:#FDFBF4; --muted:#ABA497;
  --butter:#E8C76A; --pool:#7DB0E0; --teal:#62C9C5; --coral:#E59A8E; --sky:#3B4C66;
  --rule:rgba(235,230,220,.18); --panel:#EBE6DC; --on-panel:#1F1F1F;
  --tile-a:#5E3B22; --tile-b:#1F4B49; --tile-c:#3F4524; --tile-d:#5A3530;
  --copper:#E8925A; --turq:#4CC3BE; --avocado:#A9B66A; --velvet:#3A4421; --peach:#4A3526; color-scheme:dark}}
:root[data-theme="dark"]{
  --sand:#1B2029; --cream:#242B36; --ink:#EBE6DC; --ink-deep:#FDFBF4; --muted:#ABA497;
  --butter:#E8C76A; --pool:#7DB0E0; --teal:#62C9C5; --coral:#E59A8E; --sky:#3B4C66;
  --rule:rgba(235,230,220,.18); --panel:#EBE6DC; --on-panel:#1F1F1F;
  --tile-a:#5E3B22; --tile-b:#1F4B49; --tile-c:#3F4524; --tile-d:#5A3530;
  --copper:#E8925A; --turq:#4CC3BE; --avocado:#A9B66A; --velvet:#3A4421; --peach:#4A3526; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;letter-spacing:-.01em;padding-inline:16px;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto}
h1,h2,h3{font-family:var(--f-display);font-weight:300;line-height:1;letter-spacing:-.025em;text-wrap:balance;margin:0;color:var(--ink-deep)}
h2{font-size:clamp(2.4rem,5.6vw,3.6rem)}
h3{font-size:1.9rem}
em{font-style:italic}
p{margin:0}
a{color:inherit}
sup.r{font-family:var(--f-body);font-size:.32em;vertical-align:super;letter-spacing:0;font-weight:400}
.caps{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.fig{font-size:.82rem;color:var(--muted)}
.fig b{font-weight:500;color:var(--ink)}
:focus-visible{outline:2px solid var(--pool);outline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2 em,h1 em{color:var(--copper)}

/* retro photo slots: warm 70s film grade, grain and vignette over any uploaded image */
.photo{position:relative;overflow:hidden;isolation:isolate}
.photo > img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.2) saturate(1.22) contrast(1.06) brightness(1.03) hue-rotate(-5deg);z-index:0}
.photo.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 55%,rgba(60,30,10,.32) 100%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;opacity:.75}
.photo.has-img > .art-ph{visibility:hidden}
.retro-ph{position:absolute;inset:0;background:radial-gradient(circle at 50% 118%,var(--avocado) 0 22%,var(--turq) 22% 34%,var(--butter) 34% 46%,var(--copper) 46% 58%,var(--peach) 58%)}
.edit-ph{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;gap:6px}
.edit-ph button,.edit-ph label{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;background:rgba(31,31,31,.78);color:#FDFBF4;border:none;border-radius:999px;padding:6px 12px;cursor:pointer}
.edit-ph label:hover,.edit-ph button:hover{background:#1F1F1F}
.edit-ph input{position:absolute;width:1px;height:1px;opacity:0}
.edit-ph label:focus-within{outline:2px solid var(--turq)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:#1F1F1F;color:#FDFBF4;padding:10px 18px;border-radius:999px;font-size:.88rem;z-index:50;max-width:calc(100% - 32px)}


/* ticker */
.ticker{background:var(--turq);color:#1F1F1F;overflow:hidden;margin-inline:-16px;white-space:nowrap;font-size:.8rem}
.ticker-track{display:inline-flex;gap:56px;padding-block:8px;animation:marquee 60s linear infinite;text-transform:uppercase;letter-spacing:.02em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* nav */
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:18px;border-bottom:1px solid var(--rule)}
.navl,.navr{display:flex;gap:22px;flex-wrap:wrap}
.navr{justify-content:flex-end}
nav a{text-decoration:none}
.navl a,.navr a{font-size:.9rem}
.navl a:hover,.navr a:hover{text-decoration:underline;text-underline-offset:4px}
.brand{font-family:var(--f-display);font-size:1.7rem;font-weight:400;letter-spacing:-.03em;text-align:center;line-height:1;color:var(--ink-deep)}
.brand small{display:block;font-family:var(--f-caps);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;margin-top:4px;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;padding:13px 28px;border-radius:999px;border:1px solid var(--panel);background:var(--panel);color:var(--on-panel);cursor:pointer;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.butter{background:var(--butter);border-color:var(--butter);color:var(--on-butter)}
.btn.butter:hover{background:transparent;color:inherit;border-color:currentColor}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--panel);color:var(--on-panel)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sm{padding:9px 18px;font-size:.8rem}

/* hero */
.hero{position:relative;margin-top:20px;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#6FB9B5 0%,#A9D3C9 38%,#F2D3B3 78%,#E7AE7C 100%);color:#FDFBF4;display:grid;grid-template-columns:1.1fr 1fr;align-items:end;min-height:560px}
.hero .sky{position:absolute;inset:0;width:100%;height:100%}
.hero > .photo{position:absolute;inset:0;z-index:0}
.hero > .photo .art-ph{display:none}
.hero.with-photo .sky,.hero.with-photo .art svg{visibility:hidden}
.hero.with-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(40,22,10,.55) 0%,rgba(40,22,10,.15) 55%,rgba(40,22,10,0) 75%),linear-gradient(0deg,rgba(40,22,10,.45),rgba(40,22,10,0) 45%);pointer-events:none}
.hero .copy,.hero .art{z-index:2}
.hero > .edit-ph{z-index:4}
.hero h1 em{color:#FDFBF4}
.hero .copy{position:relative;padding:48px 40px;display:flex;flex-direction:column;gap:20px;min-width:0}
.hero h1{color:#FDFBF4;font-size:clamp(3.2rem,8.4vw,6.8rem);text-shadow:0 1px 30px rgba(35,101,159,.25)}
.hero h1 em{font-weight:300}
.hero .lede{font-size:1.1rem;max-width:36ch;color:#FDFBF4;text-shadow:0 1px 14px rgba(35,101,159,.3)}
.hero .rating{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.hero .rating b{font-family:var(--f-display);font-size:2.4rem;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero .rating span{font-family:var(--f-display);font-size:1.2rem}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{background:#FDFBF4;color:#333;border-color:#FDFBF4}
.hero .btn:hover{background:transparent;color:#FDFBF4}
.hero .btn.line{background:transparent;color:#FDFBF4;border-color:#FDFBF4}
.hero .btn.line:hover{background:#FDFBF4;color:#333}
.hero .art{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px}
.hero .art svg{width:min(100%,420px);max-width:100%;height:auto;animation:float 7s ease-in-out infinite}
.hero .art .fig{color:#FDFBF4;opacity:.9;align-self:flex-end;margin-top:8px}
.hero .art .fig b{color:#FDFBF4}
@keyframes float{50%{transform:translateY(-10px) rotate(1deg)}}
@media (prefers-reduced-motion: reduce){.ticker-track,.hero .art svg{animation:none!important}html{scroll-behavior:auto}}

.tagline{text-align:center;padding-block:72px 24px}
.tagline h2{font-size:clamp(2.2rem,5vw,3.4rem);max-width:20ch;margin:0 auto}
.tagline p{max-width:52ch;margin:16px auto 0;color:var(--muted);font-family:var(--f-display);font-size:1.3rem;font-style:italic}

section{padding-block:72px 16px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.sec-head p{max-width:44ch;color:var(--muted)}

/* exclusives A–D */
.excl{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ex{display:flex;flex-direction:column;gap:12px;text-decoration:none;min-width:0}
.ex .tile{aspect-ratio:4/5;max-width:100%;border-radius:4px;display:grid;place-items:center;position:relative;overflow:hidden;transition:transform .35s}
.ex:hover .tile{transform:scale(.985)}
.ex .tile svg{width:62%;height:auto}
.ex .tile.has-img .letter{display:none}
.ex .tile .letter{z-index:2;position:absolute;top:12px;left:14px;font-family:var(--f-display);font-size:1.6rem;color:var(--ink)}
.ex h3{font-size:1.55rem}
.ex p{font-size:.9rem;color:var(--muted)}
.ex .more{font-size:.85rem;text-decoration:underline;text-underline-offset:4px}

/* join */
.join{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.perks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.perks li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.perks li span{font-family:var(--f-display);font-size:1.15rem;color:var(--muted)}
form.card{display:grid;gap:16px;min-width:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;color:var(--muted)}
input,select,textarea{background:transparent;border:none;border-bottom:1px solid var(--ink);border-radius:0;padding:8px 2px;width:100%;min-width:0;font-size:1.05rem}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
select{background:var(--sand)}
textarea{resize:vertical;min-height:96px;border:1px solid var(--rule);padding:12px;border-radius:2px;background:var(--cream)}
.form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.note{font-size:.88rem;color:var(--muted)}
.note.ok{color:var(--teal)}
.note.err{color:var(--coral)}
.banner{border:1px solid var(--rule);background:var(--cream);border-radius:2px;padding:12px 16px;font-size:.92rem;margin-bottom:24px}

/* eggshell business card */
.cardstage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 20px);background:var(--tile-b);border-radius:4px;padding:56px 28px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.bizcard{width:100%;max-width:420px;aspect-ratio:3.5/2;background:#F7F2E4;color:#2B2A27;box-shadow:0 18px 30px -12px rgba(31,31,31,.35),0 2px 4px rgba(31,31,31,.12);transform:rotate(-2deg);padding:6% 7%;display:grid;grid-template-rows:auto 1fr auto;font-family:var(--f-display);position:relative;min-width:0;overflow:hidden}
.bizcard .top{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;gap:8px}
.bizcard .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;min-width:0}
.bizcard .nm{font-size:clamp(1.15rem,3.4vw,1.55rem);letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.15;word-break:break-word}
.bizcard .ttl{font-style:italic;font-size:.95rem}
.bizcard .biz{font-size:.82rem;letter-spacing:.06em;margin-top:4px;word-break:break-word}
.bizcard .bot{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;gap:8px;min-width:0}
.bizcard .bot span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardstage .fig{align-self:flex-start}

/* board */
.board{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.composer{background:var(--cream);border-radius:4px;padding:24px;display:grid;gap:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 20px);min-width:0}
.composer h3{font-size:1.7rem}
.kinds,.feed-filter{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;border:1px solid var(--ink);border-radius:999px;padding:6px 14px;background:transparent;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--panel);color:var(--on-panel);border-color:var(--panel)}
.count{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.feed{display:flex;flex-direction:column;gap:0;min-width:0}
.feed-filter{margin-bottom:16px}
#feed{border-top:1px solid var(--rule)}
.shout{padding:22px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:48px 1fr;gap:16px;min-width:0}
.shout .av{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--tile-c)}
.shout .meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:.85rem}
.shout .who{font-weight:500}
.shout .where{color:var(--muted)}
.tag{font-family:var(--f-display);font-style:italic;font-size:1.05rem;padding:0 10px;border-radius:999px;color:#333}
.tag.ask{background:var(--tile-d)} .tag.offer{background:var(--tile-a)} .tag.win{background:var(--tile-c)}
:root[data-theme="dark"] .tag{color:#EBE6DC}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag{color:#EBE6DC}}
.shout .txt{margin-top:8px;font-family:var(--f-display);font-size:1.35rem;line-height:1.3;white-space:pre-wrap;word-break:break-word;color:var(--ink-deep)}
.reacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.react{border:1px solid var(--rule);background:transparent;border-radius:999px;padding:4px 12px;font-size:.8rem;cursor:pointer;font-variant-numeric:tabular-nums}
.react:hover{border-color:var(--ink)}
.react[aria-pressed="true"]{background:var(--butter);border-color:var(--butter);color:var(--on-butter)}
.react[disabled]{cursor:default}
.del{margin-left:auto;background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;text-decoration:underline}
.del.armed{color:var(--coral)}
.empty{padding:40px 8px;text-align:center;color:var(--muted)}
.empty b{display:block;font-family:var(--f-display);font-weight:300;font-size:1.9rem;color:var(--ink-deep);margin-bottom:6px;letter-spacing:-.02em}

/* flock */
.flock-tools input{max-width:300px}
.flock{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.member{padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.member .row{display:flex;gap:12px;align-items:center;min-width:0}
.member img{width:44px;height:44px;border-radius:50%;flex:none;background:var(--tile-b)}
.member .nm{font-family:var(--f-display);font-size:1.45rem;line-height:1.05;word-break:break-word;color:var(--ink-deep)}
.member .num{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.member .biz{font-size:.92rem;word-break:break-word}
.member .pill{align-self:flex-start;font-family:var(--f-display);font-style:italic;font-size:1rem;background:var(--tile-a);color:#333;border-radius:999px;padding:0 10px;max-width:100%;overflow-wrap:anywhere}
.member .lf{font-size:.84rem;color:var(--muted);word-break:break-word}
.member.me{background:var(--cream)}

/* invite */
.invite{--panel:var(--velvet);--on-panel:var(--on-velvet);background:var(--velvet);color:var(--on-velvet);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,rgba(0,0,0,0) 2px 9px);border-radius:4px;padding:56px 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:72px}
.invite h2{color:var(--on-panel)}
.invite .lead{margin-top:16px;max-width:42ch;opacity:.85}
.invite .msg{border:1px solid currentColor;border-radius:2px;padding:16px;font-family:var(--f-display);font-size:1.15rem;line-height:1.35;white-space:pre-wrap;word-break:break-word;user-select:all;opacity:.95}
.invite .btn{background:var(--on-panel);color:var(--panel);border-color:var(--on-panel)}
.invite .btn:hover{background:transparent;color:var(--on-panel)}
.invite .btn.line{background:transparent;color:var(--on-panel);border-color:var(--on-panel)}
.invite .btn.line:hover{background:var(--on-panel);color:var(--panel)}
.invite .btn.butter{background:var(--butter);border-color:var(--butter);color:#333}
.shares{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.shares .btn{width:100%}
.linkbox{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
.linkbox code{flex:1 1 220px;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.74rem;border-bottom:1px solid currentColor;padding:8px 0;overflow-wrap:anywhere;user-select:all}
.invite .note{color:inherit;opacity:.75}

footer{padding-block:64px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;font-size:.88rem;color:var(--muted)}
footer .brand{text-align:left;font-size:2.2rem}
footer h4{font-family:var(--f-caps);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;margin:0 0 10px;color:var(--ink)}
footer a{display:block;text-decoration:none;padding:3px 0}
footer a:hover{text-decoration:underline}
.legal{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .art{order:-1;padding-bottom:0}
  .hero .art svg{width:min(70%,300px)}
  .hero .copy{padding:24px 22px 32px}
  .excl{grid-template-columns:repeat(2,1fr)}
  .join,.board,.invite{grid-template-columns:1fr}
  .cardstage,.composer{position:relative;top:0}
  .invite{padding:40px 22px}
  footer{grid-template-columns:1fr 1fr}
  footer > div:first-child{grid-column:1/-1}
}
@media (max-width:620px){
  nav{grid-template-columns:1fr}
  .navl,.navr{justify-content:center;gap:16px}
  .navr{display:none}
  .fields{grid-template-columns:1fr}
  .shares{grid-template-columns:1fr}
  .excl{grid-template-columns:1fr 1fr;gap:12px}
  .ex h3{font-size:1.3rem}
}

/* ---------- standalone page basics ---------- */
html,body{margin:0}
body{padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.tag.inspo{background:var(--tile-b)}

/* account button */
.acct{font:inherit;font-size:.9rem;background:none;border:1px solid var(--ink);border-radius:999px;padding:4px 14px;cursor:pointer;color:inherit}
.acct:hover{background:var(--panel);color:var(--on-panel)}
@media (max-width:620px){.navr{display:flex;justify-content:center}.navr a{display:none}}

/* checkbox */
.check{display:flex;gap:10px;align-items:center;font-size:.92rem;grid-column:1/-1;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--turq);border:none;padding:0}

/* composer extras */
.linkbtn{background:none;border:none;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-size:.88rem;cursor:pointer;position:relative}
.attach{display:flex;gap:12px;align-items:center}
.attach img{width:84px;height:84px;object-fit:cover;border-radius:4px}

/* posts: photo + replies */
.shout .av,.member .mono{display:grid;place-items:center;font-family:var(--f-display);font-size:1.25rem;color:#333;border-radius:50%;flex:none}
.member .mono{width:44px;height:44px}
.post-photo{margin-top:12px;border-radius:4px;overflow:hidden;max-width:520px;position:relative;isolation:isolate}
.post-photo img{display:block;width:100%;max-height:520px;object-fit:cover;filter:sepia(.2) saturate(1.22) contrast(1.06) brightness(1.03) hue-rotate(-5deg)}
.replies{margin-top:14px;padding-left:16px;border-left:2px solid var(--rule);display:grid;gap:12px}
.reply{font-size:.92rem;min-width:0}
.reply .who{font-weight:500}
.reply .where{color:var(--muted);font-size:.8rem;margin-left:6px}
.reply p{margin-top:2px;white-space:pre-wrap;word-break:break-word}
.reply-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.reply-form textarea{min-height:44px;flex:1 1 220px;font-size:.95rem}

/* gate for signed-out visitors */
.gate{padding:40px 8px;text-align:center;color:var(--muted);display:grid;justify-items:center;gap:14px}
.gate b{font-family:var(--f-display);font-weight:300;font-size:1.9rem;color:var(--ink-deep);letter-spacing:-.02em}

/* sign-in dialog */
dialog#signin{border:none;border-radius:6px;padding:0;background:var(--sand);color:var(--ink);width:min(440px,calc(100% - 32px));box-shadow:0 30px 60px -20px rgba(31,31,31,.5)}
dialog#signin::backdrop{background:rgba(40,22,10,.45)}
.si{padding:36px 32px 28px;display:grid;gap:12px;position:relative}
.si h2{font-size:2.6rem}
.si-lede{color:var(--muted)}
.si-x{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--ink)}