/* ============================================================
   archetern.com · stage 2 (static, no framework)
   Contract: /srv/brain/development/archetern/blog/01-DESIGN-TOKENS-AND-LAYOUT.md
   Structure = X profile 1:1 · brand blue → ultramarine · light theme
   ============================================================ */

/* ---------- A · TOKENS (verbatim from contract) ---------- */
:root{
  /* accent (Blueprint Ink, ≤5% area, 1 filled CTA per screen) */
  --accent:#4633ff; --accent-hover:#3626df; --accent-active:#2b1eb3;
  --accent-faded:#e9e6ff; --accent-tint:#f4f3ff; --accent-ink:#191267;
  --on-accent:#ffffff; --accent-2:#6a5cff;

  /* neutrals · X structural grays + academy paper */
  --bg:#ffffff; --bg-weak:#fafafa;
  --surface:#f6f6f7; --surface-hover:#efeff1; --surface-strong:#e7e7ea;
  --inverse:#161618;
  --text-strong:#0f1419;
  --text:#404040; --muted:#536471;
  --muted-weak:#a1a1a1;
  --hair:1px; --hairc:#eff3f4;
  --hairc-academy:#00000014;
  --hover-row:#f7f9f9;

  /* semantics (accent ≠ semantics) */
  --emerald:#059669; --emerald-bg:#ecfdf5;
  --amber:#d97706; --amber-bg:#fffbeb;
  --danger:#e11d48; --danger-bg:#fff1f2;

  /* fonts (temp proxies; NOT Inter/Arial; mono ligatures off) */
  --display:'Space Grotesk',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;

  /* shadows (ink #101014, light from top-left) */
  --sh-contact:0 .5px 1px #10101414;
  --sh-ring:0 0 0 1px #1010141f,0 1px 1px #1010140a,0 2px 4px #1010140d;
  --sh-float:0 1px 2px #10101414,0 24px 56px #10101412,0 96px 96px #1010140a,0 220px 130px #10101405;

  /* layout */
  --header-h:53px;
  --avatar:clamp(84px,22vw,134px);
}
@media(min-resolution:2dppx){ :root{ --hair:.5px; --hairc-academy:#00000024; } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.5 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
::selection{background:var(--accent-faded)}
:focus-visible{outline:none;box-shadow:0 0 0 1px var(--accent),0 0 0 4px #4633ff24}

[hidden]{display:none!important} /* beats component display:flex/grid overrides */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-48px;left:16px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--inverse);color:#fff;font-weight:600;transition:top .15s}
.skip-link:focus{top:12px}

/* bespoke icons: strokes inherit through <use> shadow DOM */
.ico{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- B · SHELL · X grid (600 center · left 275/88 · right 350)
   breakpoints: 500 / 1005 / 1282 ---------- */
.shell{min-height:100vh}
@media(min-width:500px){
  .shell{display:grid;grid-template-columns:auto minmax(auto,600px);justify-content:center}
}
@media(min-width:1005px){
  .shell{grid-template-columns:auto 600px minmax(290px,350px)}
}

/* ---------- C1 · LEFT RAIL ---------- */
.rail-left{display:none}
@media(min-width:500px){
  .rail-left{display:block}
  .rail-inner{
    position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;align-items:center;
    width:88px;padding:4px 8px 16px;
  }
  .rail-left .label{display:none}
}
.logo{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;color:var(--text-strong);margin-bottom:4px}
.logo:hover{background:var(--hover-row)}
.logo .ico{width:30px;height:30px;stroke-width:2}

.rail-nav{display:flex;flex-direction:column;align-items:center;width:100%}
.nav-item{
  display:flex;align-items:center;justify-content:center;
  padding:12px;border-radius:999px;
  color:var(--text-strong);
  transition:background .15s;
}
.nav-item:hover{background:var(--hover-row)}
.nav-item .ico{width:26px;height:26px;flex:none}
.nav-item.is-active{font-weight:700}
.nav-item.is-active .ico{stroke-width:2.25}

.nav-more-wrap{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.popover{
  position:absolute;top:calc(100% + 4px);left:4px;z-index:40;
  min-width:200px;padding:8px 0;
  background:var(--bg);border-radius:12px;box-shadow:var(--sh-float);
}
.popover a{display:block;padding:10px 16px;font-size:15px;font-weight:600;color:var(--text-strong)}
.popover a:hover{background:var(--hover-row)}

.btn-subscribe{
  margin-top:12px;flex:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:56px;height:56px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  font:700 17px/1 var(--body);
  transition:background .15s;
}
.btn-subscribe:hover{background:var(--accent-hover)}
.btn-subscribe:active{background:var(--accent-active)}
.btn-subscribe .sub-ico{width:24px;height:24px;stroke-width:2}

.author-mini{
  margin-top:auto;
  display:flex;align-items:center;gap:12px;
  padding:8px;border-radius:999px;max-width:100%;
  transition:background .15s;
}
.author-mini:hover{background:var(--hover-row)}
.am-ava{width:40px;height:40px;flex:none;border-radius:999px}
.am-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left}
.am-name{font-weight:700;font-size:15px;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.am-handle{font-size:15px;color:var(--muted)}
.am-dots{width:18px;height:18px;color:var(--text-strong);margin-left:auto}

/* ≥1282 · rail expands into labels (275px) */
@media(min-width:1282px){
  .rail-inner{width:275px;align-items:stretch;padding:4px 12px 16px 20px}
  .rail-left .label{display:inline}
  .logo{margin-left:2px}
  .rail-nav{align-items:stretch}
  .nav-more-wrap{align-items:flex-start}
  .nav-item{justify-content:flex-start;gap:20px;padding:12px;height:50px;width:fit-content}
  .nav-item .label{font:400 20px/1 var(--display);letter-spacing:-.01em;padding-right:14px}
  .nav-item.is-active .label{font-weight:600}
  .btn-subscribe{width:90%;height:52px}
  .btn-subscribe .sub-ico{display:none}
  .author-mini{width:100%}
  .am-dots.label{display:block}
  .popover{left:0}
}
@media(min-width:500px) and (max-width:1281.98px){
  .am-dots{display:none}
}

/* ---------- C2 · CENTER · profile hub ---------- */
.center{
  width:100%;max-width:600px;margin:0 auto;min-height:100vh;
  border-inline:var(--hair) solid var(--hairc);
  padding-bottom:64px;
}

.page-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:20px;
  height:var(--header-h);padding:0 16px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.back-btn{
  width:34px;height:34px;flex:none;border-radius:999px;
  display:grid;place-items:center;color:var(--text-strong);
  transition:background .15s;
}
.back-btn:hover{background:var(--surface-hover)}
.back-btn .ico{width:20px;height:20px;stroke-width:2}
.ph-txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.ph-name{font:600 20px/1.2 var(--display);color:var(--text-strong);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-count{font-size:13px;line-height:1.2;color:var(--muted)}

.banner{aspect-ratio:3/1;overflow:hidden;background:var(--surface)}
.banner svg{display:block;width:100%;height:100%}

.profile-top{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px 0}
.avatar-wrap{width:var(--avatar);margin-top:calc(var(--avatar) * -.5 - 6px)}
.avatar{
  display:block;width:100%;height:auto;aspect-ratio:1;
  border-radius:999px;background:var(--inverse);
  box-shadow:0 0 0 4px var(--bg);
}
.btn-follow{
  height:36px;padding:0 18px;border-radius:999px;
  display:inline-flex;align-items:center;
  background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:15px;
  transition:background .15s;
}
.btn-follow:hover{background:var(--accent-hover)}

.author{padding:12px 16px 4px}
.a-name{display:flex;align-items:center;gap:6px;font:600 20px/1.25 var(--display);color:var(--text-strong);letter-spacing:-.01em}
.badge-ico{width:19px;height:19px;flex:none}
.badge-ico.sm{width:17px;height:17px}
.a-handle{font-size:15px;color:var(--muted);margin:1px 0 12px}
.a-bio{font-size:15px;line-height:1.4;color:var(--text-strong);margin-bottom:12px}
.a-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px;color:var(--muted);margin-bottom:12px}
.a-meta li{display:flex;align-items:center;gap:5px}
.meta-ico{width:16px;height:16px;stroke-width:2}
.a-meta a{color:var(--accent)}
.a-meta a:hover{text-decoration:underline}
.a-stats{display:flex;gap:20px;font-size:14px}
.a-stats .val{font-weight:700;color:var(--text-strong)}
.a-stats .lbl{color:var(--muted)}

/* tabs · sticky under header, ultramarine indicator */
.tabs{
  position:sticky;top:var(--header-h);z-index:19;
  display:flex;margin-top:8px;
  border-bottom:var(--hair) solid var(--hairc);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.tab{
  flex:1;display:flex;justify-content:center;
  font-size:15px;font-weight:500;color:var(--muted);
  transition:background .15s;
}
.tab:hover{background:var(--hover-row)}
.tab>span{position:relative;padding:15px 2px}
.tab.is-active{color:var(--text-strong);font-weight:700}
.tab.is-active>span::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:4px;border-radius:999px;background:var(--accent);
}

/* ---------- C4 · FEED CARDS ---------- */
.card{
  position:relative;
  display:grid;grid-template-columns:40px 1fr;column-gap:12px;
  padding:12px 16px;
  border-bottom:var(--hair) solid var(--hairc);
  cursor:pointer;
  transition:background .15s;
}
.card:hover{background:var(--hover-row)}
.card[hidden]{display:none}
.stretch{position:absolute;inset:0;z-index:0}
.card .card-more,.card .actions,.card .card-head time{position:relative;z-index:1}

.pin-row{
  grid-column:1/-1;
  display:flex;align-items:center;gap:8px;
  padding-left:52px;margin-bottom:4px;
  color:var(--muted);
  font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.pin-row .ico{width:14px;height:14px;stroke-width:2}

.card-ava svg{width:40px;height:40px;display:block;border-radius:999px}
.card-body{min-width:0}

.card-head{display:flex;align-items:center;gap:6px;min-width:0;font-size:15px}
.card-name{font-weight:700;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{
  flex:none;
  font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  border:1px solid var(--surface-strong);color:var(--muted);background:var(--bg);
}
.dot{color:var(--muted)}
.card-date{color:var(--muted);flex:none}
.card-more{
  margin-left:auto;flex:none;
  width:30px;height:30px;border-radius:999px;
  display:grid;place-items:center;color:var(--muted);
  transition:background .15s,color .15s;
}
.card-more:hover{background:var(--accent-tint);color:var(--accent)}
.card-more .ico{width:18px;height:18px}

.card-title{margin-top:2px;font:700 15px/1.35 var(--body);color:var(--text-strong)}
.card-lead{margin-top:2px;font-size:15px;line-height:20px;color:var(--text-strong)}
.card-lead + .card-lead{margin-top:10px} /* note posts: each thought on its own line, air between */

/* featured (pinned manifesto) · larger */
.card--featured .card-title{font:600 24px/1.33 var(--display);letter-spacing:-.015em;margin:4px 0 2px}
.card--featured .card-lead{line-height:21px}

.card-media{
  margin:12px 0 4px;
  border-radius:16px;border:var(--hair) solid var(--hairc);
  overflow:hidden;background:var(--bg-weak);
}
.card-media svg{display:block;width:100%;height:auto}
.card-media img{display:block;width:100%;height:auto}

/* round video note (TG circle) · muted loop, click to play */
.card--videonote .vn-wrap{
  position:relative;margin:8px 0 4px;
  width:min(320px,72%);aspect-ratio:1;
  border-radius:999px;overflow:hidden;background:var(--inverse);
}
.vn-video{display:block;width:100%;height:100%;object-fit:cover}
.vn-play{
  position:absolute;inset:0;margin:auto;
  width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(16,16,20,.55);color:#fff;
  transition:opacity .15s,background .15s;
}
.vn-play:hover{background:rgba(16,16,20,.72)}
.vn-play .ico{width:26px;height:26px;margin-left:2px;fill:currentColor;stroke:none}
.card--videonote.is-playing .vn-play{opacity:0;pointer-events:none}

/* action row */
.actions{
  display:flex;justify-content:space-between;align-items:center;
  max-width:425px;margin-top:6px;color:var(--muted);
}
.act{
  display:flex;align-items:center;gap:2px;
  font-size:13px;color:var(--muted);
  transition:color .15s;
}
.act-ico{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:999px;
  transition:background .15s;
}
.act .ico{width:18px;height:18px}
.act:hover{color:var(--accent)}
.act:hover .act-ico{background:var(--accent-tint)}
.act--like:hover{color:var(--danger)}
.act--like:hover .act-ico{background:var(--danger-bg)}
.act-r{display:flex;gap:2px}

.feed-end{
  padding:32px 16px 8px;text-align:center;
  font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--muted-weak);
}

/* ---------- C3 · RIGHT RAIL ---------- */
.rail-right{display:none}
@media(min-width:1005px){
  .rail-right{display:block}
  .rr-inner{
    max-width:350px;
    padding:0 4px 64px clamp(20px,2vw,30px);
    display:flex;flex-direction:column;gap:16px;
  }
}
.search{position:sticky;top:0;z-index:15;padding:5px 0 3px;background:var(--bg)}
.search-box{
  display:flex;align-items:center;gap:10px;
  height:44px;padding:0 16px;border-radius:999px;
  background:var(--surface);border:1px solid transparent;
  transition:background .15s,border-color .15s;
}
.search-box:focus-within{background:var(--bg);border-color:var(--accent)}
.search-box .ico{width:18px;height:18px;color:var(--muted);flex:none}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;color:var(--text-strong)}
.search input::placeholder{color:var(--muted)}

.rr-card{background:var(--hover-row);border-radius:16px;padding:16px;overflow:hidden}
.rr-card h2{font:600 20px/1.25 var(--display);letter-spacing:-.01em;color:var(--text-strong);margin-bottom:8px}
.rr-copy{font-size:15px;line-height:1.4;color:var(--text-strong);margin-bottom:12px}

.nl-form{display:flex;flex-direction:column;gap:8px}
.nl-form input{
  height:44px;padding:0 12px;border-radius:8px;
  border:1px solid var(--surface-strong);background:var(--bg);
  font-size:15px;color:var(--text-strong);
}
.nl-form input::placeholder{color:var(--muted-weak)}
.nl-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #4633ff24}
.btn-cta{
  height:40px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:15px;
  transition:background .15s;
}
.btn-cta:hover{background:var(--accent-hover)}
.btn-cta:active{background:var(--accent-active)}
.nl-note{margin-top:8px;font-size:13px;color:var(--muted)}

/* newsletter · consent, honeypot, inline error, success crosshair (Ф4) */
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.nl-consent{display:flex;align-items:flex-start;gap:8px;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted);cursor:pointer}
.nl-consent input{margin:1px 0 0;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.nl-priv{color:var(--muted-weak)}
.nl-error{margin-top:2px;font-size:13px;line-height:1.4;color:var(--danger)}
.nl-success{display:flex;align-items:center;gap:12px;padding:4px 0}
.nl-cross{position:relative;flex:none;width:26px;height:26px;border-radius:999px;border:1.5px solid var(--accent-faded)}
.nl-cross::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 13px no-repeat;
}
.nl-done{font:600 15px/1.3 var(--body);color:var(--text-strong)}

.rr-row{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 16px;margin:0 -16px;
  transition:background .15s;
}
a.rr-row:hover{background:var(--surface-hover)}
.rr-rubric{font-size:13px;color:var(--muted)}
.rr-title{font-weight:700;font-size:15px;line-height:1.3;color:var(--text-strong)}
.rr-meta{font-size:13px;color:var(--muted)}
.show-more{display:inline-block;padding-top:10px;font-size:15px;color:var(--accent)}
.show-more:hover{text-decoration:underline}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-tag{
  font:500 12px/1 var(--mono);letter-spacing:.04em;
  padding:9px 12px;border-radius:999px;
  border:1px solid var(--surface-strong);background:var(--bg);color:var(--text);
  transition:border-color .15s,color .15s;
}
a.chip-tag:hover{border-color:var(--accent);color:var(--accent)}

.rr-footer{display:flex;flex-wrap:wrap;gap:4px 12px;padding:0 4px;font-size:13px;color:var(--muted)}
.rr-footer a:hover{text-decoration:underline}

/* ---------- Ф5 · search dropdown · bookmark state · /bookmarks/ ---------- */
.search-pop{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  margin-top:4px;padding:6px 0;
  background:var(--bg);border-radius:12px;box-shadow:var(--sh-float);
  max-height:60vh;overflow-y:auto;
}
.search-row{display:flex;flex-direction:column;gap:2px;padding:10px 16px;cursor:pointer}
.search-row:hover,.search-row.is-active{background:var(--hover-row)}
.search-empty{margin:0;padding:12px 16px;font-size:14px;color:var(--muted)}

/* bookmark saved state · filled accent (glyph is a closed path) */
.act.is-saved{color:var(--accent)}
.act.is-saved .ico{fill:var(--accent);stroke:var(--accent)}
.head-act.is-saved{color:var(--accent)}
.head-act.is-saved .ico{fill:var(--accent);stroke:var(--accent)}

/* /bookmarks/ list */
.bm-list{border-top:var(--hair) solid var(--hairc)}
.bm-row{
  display:flex;align-items:center;gap:8px;
  padding:2px 16px;border-bottom:var(--hair) solid var(--hairc);
  transition:background .15s;
}
.bm-row:hover{background:var(--hover-row)}
.bm-link{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:12px 0}
.bm-row .act{flex:none}
.bm-empty{padding:40px 16px;text-align:center;font-size:15px;color:var(--muted)}

/* ---------- mobile <500 · single column + bottom tab bar ---------- */
.tabbar{
  position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);z-index:30;
  display:flex;height:54px;padding:5px 6px;gap:2px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  border:var(--hair) solid rgba(255,255,255,.55);
  border-radius:999px;
  box-shadow:0 8px 30px rgba(16,16,20,.13), inset 0 1px 0 rgba(255,255,255,.7);
}
.tb-item{flex:1;display:grid;place-items:center;color:var(--muted);border-radius:999px}
.tb-item .ico{width:24px;height:24px}
.tb-item.is-active{color:var(--text-strong);background:rgba(16,16,20,.06)}
.tb-item.is-active .ico{stroke-width:2.25}

.fab{
  position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom, 0px) + 84px);z-index:30;
  width:52px;height:52px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  box-shadow:var(--sh-float);
  transition:background .15s;
}
.fab:hover{background:var(--accent-hover)}
.fab .ico{width:24px;height:24px;stroke-width:2}

@media(max-width:499.98px){
  body{padding-bottom:96px}
  .center{border-inline:0}
}
@media(min-width:500px){
  .tabbar,.fab{display:none}
}

/* ============================================================
   STAGE 2 · D · ARTICLE (contract §D: prose 760 · eyebrow → H1 →
   mono-meta → tags → lead · same tokens, nothing above changes)
   ============================================================ */
@media(min-width:500px){
  .shell--article{grid-template-columns:auto minmax(auto,760px)}
}
@media(min-width:1005px){
  .shell--article{grid-template-columns:auto minmax(auto,760px)}
}
.center--article{max-width:760px}

/* sticky header actions: share / copy-link */
.ph-actions{margin-left:auto;display:flex;gap:4px}
.head-act{
  width:34px;height:34px;flex:none;border-radius:999px;
  display:grid;place-items:center;color:var(--text-strong);
  transition:background .15s,color .15s;
}
.head-act:hover{background:var(--accent-tint);color:var(--accent)}
.head-act .ico{width:18px;height:18px;stroke-width:2}

.article{padding:44px 24px 64px}

/* eyebrow: leading accent rule 16×1.5, small-caps mono, no brackets */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font:600 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{content:"";width:16px;height:1.5px;background:var(--accent)}

.art-title{
  margin:18px 0 0;
  font:500 clamp(36px,6.4vw,68px)/1.04 var(--display);
  letter-spacing:-.025em;color:var(--text-strong);
}
.art-meta{margin:20px 0 0;font:500 13px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted)}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.art-lead{margin:28px 0 0;font:400 19px/1.55 var(--body);color:var(--muted)}

.prose{margin-top:28px;border-top:var(--hair) solid var(--hairc);padding-top:28px}
.prose p{font:400 16px/1.6 var(--body);color:var(--text);margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
.prose .key{
  font:500 24px/1.35 var(--display);letter-spacing:-.015em;color:var(--text-strong);
  padding-left:18px;border-left:2px solid var(--accent);
  margin:28px 0;
}

.art-end{
  margin-top:44px;padding-top:20px;border-top:var(--hair) solid var(--hairc);
  font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--muted-weak);
}
.art-back{display:inline-block;margin-top:16px;font-size:15px;color:var(--accent)}
.art-back:hover{text-decoration:underline}

/* copy-link toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  padding:10px 18px;border-radius:999px;
  background:var(--inverse);color:#fff;
  font:600 14px/1 var(--body);box-shadow:var(--sh-float);
}

/* ============================================================
   STAGE 2 · E · GATE / SIGN-IN (private preview, front only)
   ============================================================ */
.gate-body{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background-color:var(--bg);
  background-image:
    linear-gradient(#1010140f 1px,transparent 1px),
    linear-gradient(90deg,#1010140f 1px,transparent 1px),
    linear-gradient(#10101408 1px,transparent 1px),
    linear-gradient(90deg,#10101408 1px,transparent 1px);
  background-size:125px 125px,125px 125px,25px 25px,25px 25px;
}
.gate{width:100%;max-width:400px}
.gate-sheet{
  display:flex;justify-content:space-between;
  margin-bottom:10px;padding:0 4px;
  font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--muted-weak);
}
.gate-card{
  position:relative;overflow:hidden;
  background:var(--bg);border-radius:16px;box-shadow:var(--sh-ring);
  padding:36px 32px 28px;
}
/* registration cross · blueprint signature, one accent dose */
.gate-card::after{
  content:"";position:absolute;top:16px;right:16px;width:14px;height:14px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/14px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 14px no-repeat;
  opacity:.75;
}
.gate-ava{width:56px;height:56px;border-radius:999px;display:block;margin-bottom:22px}
.gate-card h1{font:600 28px/1.15 var(--display);letter-spacing:-.02em;color:var(--text-strong);margin:12px 0 8px}
.gate-copy{font-size:15px;line-height:1.5;color:var(--muted);margin-bottom:24px}
.gate-form{display:flex;flex-direction:column;gap:10px}
.gate-form label{font:600 13px/1 var(--body);color:var(--text-strong)}
.gate-form input{
  height:44px;padding:0 12px;border-radius:8px;
  border:1px solid var(--surface-strong);background:var(--bg);
  font-size:15px;color:var(--text-strong);
}
.gate-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #4633ff24}
.gate-form .btn-cta{margin-top:4px}
.gate-note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}
.gate-foot{margin-top:14px;text-align:center;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--muted-weak)}

/* ============================================================
   Ф1 · multi-page + collapse header (spec 02 §5) · tokens untouched
   ============================================================ */

/* collapse header · feed only · JS writes --cpB/--cpM, CSS draws.
   Defaults (no JS / mobile) = 0 → static header, mini disc invisible. */
.avatar-wrap{
  transform:scale(calc(1 - .3*var(--cpB,0)));
  opacity:calc(1 - var(--cpB,0)/.9);
  will-change:transform,opacity;
}
.center.is-collapsed .avatar-wrap{visibility:hidden;pointer-events:none}
/* the profile Subscribe button rides the same fade so it never ghosts under the frosted head */
.btn-follow{opacity:calc(1 - var(--cpB,0)/.9);will-change:opacity}
.center.is-collapsed .btn-follow{visibility:hidden;pointer-events:none}
.ph-ava{
  width:26px;height:26px;flex:none;border-radius:999px;
  margin-right:-8px;pointer-events:none;
  opacity:var(--cpM,0);
  transform:translateY(calc(4px*(1 - var(--cpM,0)))) scale(calc(.92 + .08*var(--cpM,0)));
}

/* in-works longread stub · hairline-framed block, blueprint registration signature */
.art-inworks{
  position:relative;overflow:hidden;
  margin-top:28px;padding:26px 24px 24px;
  border:var(--hair) solid var(--hairc-academy);border-radius:16px;
  background:var(--bg-weak);
}
.art-inworks::after{
  content:"";position:absolute;top:14px;right:14px;width:13px;height:13px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 13px no-repeat;
  opacity:.7;
}
.iw-tag{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-weak)}
.iw-status{margin-top:14px;font:500 22px/1.3 var(--display);letter-spacing:-.015em;color:var(--text-strong)}
.iw-copy{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted)}
.iw-cta{
  display:inline-flex;align-items:center;height:40px;padding:0 20px;margin-top:18px;
  border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:15px;transition:background .15s;
}
.iw-cta:hover{background:var(--accent-hover)}
.iw-cta:active{background:var(--accent-active)}

/* prose subsection header (About, future longreads) · Journal component */
.prose h2{
  font:500 24px/1.3 var(--display);letter-spacing:-.015em;color:var(--text-strong);
  margin:32px 0 12px;
}
.prose h2:first-child{margin-top:0}

/* About · meta + social sit below prose */
.about-meta{margin-top:28px}
.about-meta + .soc-note{margin-top:0}

/* section pages · quiet intro line under the compact head */
.section-intro{
  padding:12px 16px;font-size:15px;line-height:1.4;color:var(--muted);
  border-bottom:var(--hair) solid var(--hairc);
}

/* non-clickable cards (notes, in-works announces) */
.card--static{cursor:default}

/* social row · newsletter card + /subscribe/ (34px round targets, head-act pattern) */
.soc-note{margin-top:12px;font-size:13px;color:var(--muted)}
.soc-row{display:flex;gap:4px;margin-top:4px}
.soc{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;color:var(--muted);
  transition:background .15s,color .15s;
}
.soc:hover{background:var(--accent-tint);color:var(--accent)}
.soc .ico{width:20px;height:20px}

/* /subscribe/ · newsletter card in the 600 column */
.subscribe-wrap{padding:16px}

/* subscribe router · one-shot highlight pulse on the newsletter card */
@keyframes nl-pulse{
  0%{box-shadow:0 0 0 0 var(--accent-faded)}
  100%{box-shadow:0 0 0 14px rgba(70,51,255,0)}
}
.nl-pulse{animation:nl-pulse .9s ease-out 1}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important}
  .nl-pulse{animation:none}
  /* collapse = snap by class, no tween */
  .avatar-wrap{transform:none;opacity:1}
  .btn-follow{opacity:1}
  .ph-ava{transform:none}
  .center.is-collapsed .avatar-wrap{opacity:0;visibility:hidden}
  .center.is-collapsed .btn-follow{opacity:0;visibility:hidden}
  .center.is-collapsed .ph-ava{opacity:1}
}

/* ============================================================
   Ф6 · ACCOUNT · passkey Join / Log in
   rail control under Subscribe + native sheet
   (mobile: bottom sheet with grip · ≥500: centered card)
   ============================================================ */

/* rail block · hidden until app.js confirms /auth.php */
.acct{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.btn-join{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:48px;height:48px;border-radius:999px;
  border:1px solid var(--surface-strong);background:var(--bg);
  color:var(--text-strong);font:700 15px/1 var(--body);
  transition:background .15s,border-color .15s;
}
.btn-join:hover{background:var(--hover-row);border-color:var(--muted-weak)}
.btn-join .join-ico{width:22px;height:22px;stroke-width:2}
.acct-login{
  padding:7px 10px;border-radius:999px;
  font:600 13px/1 var(--body);color:var(--muted);
  transition:color .15s,background .15s;
}
.acct-login:hover{color:var(--accent);background:var(--accent-tint)}

/* signed-in chip · same key as author-mini; disc carries the accent port dot */
.acct-me-wrap{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.acct-me{
  display:flex;align-items:center;gap:10px;
  padding:7px;border-radius:999px;max-width:100%;
  transition:background .15s;
}
.acct-me:hover{background:var(--hover-row)}
.acct-disc{
  position:relative;flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:999px;
  background:var(--inverse);color:#fff;
  font:600 15px/1 var(--display);
}
.acct-dot{
  position:absolute;right:-1px;bottom:-1px;
  width:9px;height:9px;border-radius:999px;
  background:var(--accent);box-shadow:0 0 0 2px var(--bg);
}
.acct-nick{
  font:700 15px/1.2 var(--body);color:var(--text-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;
}
.acct-pop{min-width:220px}
.acct-pop-head{
  display:flex;flex-direction:column;gap:3px;
  padding:10px 16px 9px;border-bottom:var(--hair) solid var(--hairc);
}
.acct-pop-note{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-weak)}
.acct-pop-nick{font:700 15px/1.3 var(--body);color:var(--text-strong);word-break:break-word}
.acct-pop button{
  display:block;width:100%;text-align:left;
  padding:10px 16px;font-size:15px;font-weight:600;color:var(--text-strong);
  transition:background .15s;
}
.acct-pop button:hover{background:var(--hover-row)}

/* ≥1282 · expanded rail: Join becomes the full pill, icon retires */
@media(min-width:1282px){
  .acct{align-items:stretch}
  .btn-join{width:90%;height:44px;align-self:center}
  .btn-join .join-ico{display:none}
  .acct-login{align-self:center}
  .acct-me{width:100%}
}

/* mobile tab-bar slot: user glyph when out, initial disc when in */
.tb-item .acct-disc{width:30px;height:30px;font-size:14px}

/* ---- veil + sheet ---- */
.sheet-veil{position:fixed;inset:0;z-index:70;background:rgba(16,16,20,.45);animation:veil-in .2s ease-out}
.sheet{
  /* mobile: floating card anchored in the UPPER area (above the middle), not a
     bottom drawer. The keyboard lives in the lower half, so a top-anchored card
     is never covered, no keyboard-height math needed. */
  position:fixed;left:16px;right:16px;z-index:71;
  top:calc(env(safe-area-inset-top, 0px) + 44px);bottom:auto;
  margin:0 auto;max-width:460px;
  background:var(--bg);border-radius:20px;
  box-shadow:var(--sh-ring),var(--sh-float);
  padding:22px 24px 24px;
  animation:sheet-drop .22s cubic-bezier(.32,.72,.24,1);
  max-height:calc(100dvh - var(--kb,0px) - env(safe-area-inset-top, 0px) - 64px);overflow-y:auto;
}
.sheet-grip{display:none}
.sheet-x{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;color:var(--text-strong);
  transition:background .15s;
}
.sheet-x:hover{background:var(--surface-hover)}
.sheet-x .ico{width:18px;height:18px;stroke-width:2}
.sheet-title{
  font:600 22px/1.2 var(--display);letter-spacing:-.015em;color:var(--text-strong);
  margin:2px 0 8px;padding-right:44px;word-break:break-word;
}
.sheet-mode{display:flex;flex-direction:column;gap:12px}
.sheet-copy{font-size:15px;line-height:1.5;color:var(--muted)}
.sheet-form{display:flex;flex-direction:column;gap:10px}
.sheet-label{font:600 13px/1 var(--body);color:var(--text-strong)}
.sheet-input{
  height:44px;padding:0 12px;border-radius:8px;
  border:1px solid var(--surface-strong);background:var(--bg);
  font-size:16px;color:var(--text-strong);
}
.sheet-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #4633ff24}
.sheet-mode .btn-cta{width:100%}
.btn-ghost{
  width:100%;height:40px;border-radius:999px;
  border:1px solid var(--surface-strong);background:var(--bg);
  color:var(--text-strong);font-weight:700;font-size:15px;
  transition:background .15s;
}
.btn-ghost:hover{background:var(--hover-row)}
.sheet-error{font-size:13px;line-height:1.4;color:var(--danger)}
.sheet-alt{
  align-self:center;margin-top:2px;padding:8px 12px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--muted);
  transition:color .15s,background .15s;
}
.sheet-alt:hover{color:var(--accent);background:var(--accent-tint)}

@keyframes veil-in{0%{opacity:0}100%{opacity:1}}
@keyframes sheet-up{0%{transform:translateY(28px);opacity:.4}100%{transform:translateY(0);opacity:1}}
@keyframes sheet-drop{0%{transform:translateY(-14px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes sheet-pop{0%{transform:translate(-50%,-50%) scale(.97);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

@media(min-width:500px){
  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;
    width:min(400px,calc(100vw - 48px));
    border-radius:16px;
    padding:26px 28px 24px;
    transform:translate(-50%,-50%);
    box-shadow:var(--sh-ring),var(--sh-float);
    animation:sheet-pop .18s ease-out;
  }
  .sheet-grip{display:none}
  /* registration cross · same auth signature as the gate card */
  .sheet::after{
    content:"";position:absolute;top:19px;right:58px;width:14px;height:14px;
    background:
      linear-gradient(var(--accent),var(--accent)) center/14px 1.5px no-repeat,
      linear-gradient(var(--accent),var(--accent)) center/1.5px 14px no-repeat;
    opacity:.75;pointer-events:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .sheet,.sheet-veil{animation:none}
}

/* ============================================================
   Ф7 · LIKES (P2, real counts from /likes.php)
   ============================================================ */
/* liked state · filled accent, same signature as bookmark is-saved */
.act.is-liked{color:var(--accent)}
.act.is-liked .ico{fill:var(--accent);stroke:var(--accent)}
.act--like.is-liked:hover{color:var(--accent)}
.act--like.is-liked:hover .act-ico{background:var(--accent-tint)}
.head-act.is-liked{color:var(--accent)}
.head-act.is-liked .ico{fill:var(--accent);stroke:var(--accent)}

/* article header like · icon + count pill (34px height kept) */
.head-act--like{width:auto;min-width:34px;padding:0 9px;display:flex;align-items:center;gap:5px}
.head-act--like .like-n{font:500 13px/1 var(--mono);letter-spacing:.02em}

/* ============================================================
   P3 · COMMENTS (/comments.php)
   article section (always open) + inline thread under note cards
   ============================================================ */
.comments{margin-top:40px;border-top:var(--hair) solid var(--hairc);padding-top:28px}
.cm-title{display:flex;align-items:baseline;gap:10px;font:600 20px/1.25 var(--display);letter-spacing:-.01em;color:var(--text-strong)}
.cm-count{font:500 13px/1 var(--mono);color:var(--muted)}
.cm-quiet{padding:12px 0;font-size:14px;color:var(--muted)}
.cm-list{margin-top:2px}
.cm-empty{padding:14px 0;font-size:15px;color:var(--muted)}

/* one comment · 30px disc + column, hairline between rows */
.cm{display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:14px 0;border-bottom:var(--hair) solid var(--hairc)}
.cm:last-child{border-bottom:0}
.cm--reply{margin-left:40px} /* depth 1: author replies sit under the parent */
.cm-disc{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:999px;
  background:var(--inverse);color:#fff;
  font:600 13px/1 var(--display);
}
.cm.is-deleted .cm-disc{background:var(--surface-strong)}
.cm-main{min-width:0}
.cm-pin{
  display:flex;align-items:center;gap:6px;margin-bottom:4px;
  color:var(--muted);
  font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.cm-pin .ico{width:13px;height:13px;stroke-width:2}
.cm-top{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px}
.cm-nick{font-weight:700;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.cm-when{flex:none;font:500 12px/1 var(--mono);color:var(--muted)}
.cm-body{margin-top:3px;font-size:15px;line-height:20px;color:var(--text-strong);white-space:pre-wrap;overflow-wrap:anywhere}
.cm.is-deleted .cm-body{color:var(--muted-weak)}

/* author presence · blueprint diamond + small-caps pill, the accent dose */
.cm-author{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  padding:2px 7px 2px 3px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent);
  font:600 10px/1 var(--mono);letter-spacing:.07em;
}
.cm-author-ico{width:12px;height:12px;flex:none}

/* per-comment actions */
.cm-acts{display:flex;gap:16px;margin-top:6px}
.cm-act{font:600 12px/1 var(--body);color:var(--muted);padding:2px 0;transition:color .15s}
.cm-act:hover{color:var(--accent)}
.cm-act--del:hover{color:var(--danger)}
.cm-act.is-on{color:var(--accent)}

/* composer · disc + autoexpanding box, Post rides bottom-right */
.cm-form{display:grid;grid-template-columns:30px 1fr;column-gap:10px;margin-top:14px}
.cm-form--reply{margin:10px 0 2px}
.cm-form-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.cm-input{
  min-height:44px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--surface-strong);background:var(--bg);
  font:400 15px/1.4 var(--body);color:var(--text-strong);
  resize:none;overflow:hidden;
}
.cm-input::placeholder{color:var(--muted-weak)}
.cm-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #4633ff24}
.cm-form-row{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.cm-post{height:34px;padding:0 16px;font-size:14px}
.cm-cancel{
  height:34px;padding:0 12px;border-radius:999px;
  font:600 14px/1 var(--body);color:var(--muted);
  transition:color .15s,background .15s;
}
.cm-cancel:hover{color:var(--text-strong);background:var(--surface-hover)}

/* guest plaque · quiet paper block, one CTA */
.cm-join{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  margin-top:14px;padding:14px 16px;
  border:var(--hair) solid var(--hairc-academy);border-radius:12px;
  background:var(--bg-weak);
}
.cm-join-copy{font-size:14px;line-height:1.4;color:var(--muted)}
.cm-join .btn-cta{height:34px;padding:0 16px;font-size:14px}

/* inline thread under a note card */
.card-comments{margin-top:10px;border-top:var(--hair) solid var(--hairc);cursor:auto}
.card-comments .cm-form{margin-top:12px}
.card:has(.card-comments:not([hidden])):hover{background:transparent}

/* reply action open state (thread visible) */
.act.is-open{color:var(--accent)}
.act.is-open .act-ico{background:var(--accent-tint)}

/* ============================================================
   P5 · /me/ · personal account (cards fed by /account.php)
   ============================================================ */
.me-wrap{display:flex;flex-direction:column;gap:14px;padding:16px}
.me-quiet{padding:28px 0;text-align:center;font-size:14px;color:var(--muted)}
.me-card{
  position:relative;
  background:var(--bg);
  border:var(--hair) solid var(--hairc-academy);border-radius:16px;
  padding:20px;
}
.me-label{margin-bottom:6px}
.me-count{font:500 12px/1 var(--mono);letter-spacing:0;color:var(--muted-weak)}

/* guest plaque · one CTA, registration cross signature */
.me-guest{padding:36px 24px 32px;text-align:center}
.me-guest::after{
  content:"";position:absolute;top:16px;right:16px;width:14px;height:14px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/14px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 14px no-repeat;
  opacity:.75;
}
.me-guest h2{font:600 24px/1.2 var(--display);letter-spacing:-.015em;color:var(--text-strong);margin:0 0 8px}
.me-guest p{font-size:15px;line-height:1.5;color:var(--muted);margin:0 auto 20px;max-width:380px}
.me-guest .btn-cta{padding:0 22px}

/* identity · big disc, nickname, member-since stamp */
.me-id{display:flex;align-items:flex-start;gap:16px}
.me-disc{
  position:relative;flex:none;display:grid;place-items:center;
  width:72px;height:72px;border-radius:999px;
  background:var(--inverse);color:#fff;
  font:600 30px/1 var(--display);
}
.me-disc .acct-dot{width:13px;height:13px;right:1px;bottom:1px;box-shadow:0 0 0 3px var(--bg)}
.me-id-txt{flex:1;min-width:0}
.me-nick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:34px}
.me-nick{font:600 26px/1.15 var(--display);letter-spacing:-.02em;color:var(--text-strong);word-break:break-word}
.me-since{margin-top:4px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.me-edit{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;margin-top:14px;
  border-radius:999px;border:1px solid var(--surface-strong);background:var(--bg);
  font:600 13px/1 var(--body);color:var(--text-strong);
  transition:background .15s,border-color .15s;
}
.me-edit:hover{background:var(--hover-row);border-color:var(--muted-weak)}
.me-rename{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:340px}
.me-rename .btn-cta{height:36px;padding:0 18px;font-size:14px}
.me-rename-row{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.me-cancel{
  height:36px;padding:0 12px;border-radius:999px;
  font:600 14px/1 var(--body);color:var(--muted);
  transition:color .15s,background .15s;
}
.me-cancel:hover{color:var(--text-strong);background:var(--surface-hover)}
.me-err{font-size:13px;line-height:1.4;color:var(--danger)}

/* saved + activity · post rows, rr typography inside cards */
.me-list{display:flex;flex-direction:column}
.me-item{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;margin:0 -12px;border-radius:12px;
  transition:background .15s;
}
a.me-item:hover{background:var(--hover-row)}
.me-cm-body{
  font-size:15px;line-height:20px;color:var(--text-strong);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.me-item.is-removed .me-cm-body{color:var(--muted-weak)}
.me-block+.me-block{margin-top:10px}
.me-sub{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-weak);margin:10px 0 4px}
.me-soft{padding:8px 0 2px;font-size:15px;line-height:1.5;color:var(--muted)}
.me-soft a{color:var(--accent)}
.me-soft a:hover{text-decoration:underline}

/* privacy · big tappable strips */
.me-rows{display:flex;flex-direction:column;margin-top:2px}
.me-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;padding:14px 10px;margin:0 -10px;border-radius:12px;
  border-top:var(--hair) solid var(--hairc);
  transition:background .15s;
}
.me-rows .me-row:first-child{border-top:0}
.me-row:hover{background:var(--hover-row)}
.me-row--switch{cursor:pointer}
.me-row-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.me-row-title{font:600 15px/1.3 var(--body);color:var(--text-strong)}
.me-row-note{font-size:13px;line-height:1.4;color:var(--muted)}
.me-row-ico{width:18px;height:18px;flex:none;color:var(--muted);transition:color .15s}
.me-row:hover .me-row-ico{color:var(--accent)}
.me-row--danger .me-row-title{color:var(--danger)}
.me-row--danger:hover{background:var(--danger-bg)}

/* personalize switch · accent only when on */
.me-switch{
  position:relative;flex:none;width:46px;height:28px;border-radius:999px;
  background:var(--surface-strong);transition:background .15s;
}
.me-switch .me-knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;
  background:var(--bg);box-shadow:var(--sh-contact),0 1px 3px #10101426;
  transition:transform .18s;
}
.me-switch[aria-checked="true"]{background:var(--accent)}
.me-switch[aria-checked="true"] .me-knob{transform:translateX(18px)}

/* delete confirm · inline plaque, no browser dialogs */
.me-confirm{margin-top:10px;padding:14px 16px;border:1px solid var(--danger);border-radius:12px;background:var(--danger-bg)}
.me-confirm-copy{font-size:14px;line-height:1.5;color:var(--text-strong);margin-bottom:12px}
.me-confirm-row{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.btn-danger{
  height:36px;padding:0 16px;border-radius:999px;
  background:var(--danger);color:#fff;font-weight:700;font-size:14px;
  transition:background .15s;
}
.btn-danger:hover{background:#be123c}

/* account sheet · "My account" link rides the ghost pill */
a.btn-ghost{display:flex;align-items:center;justify-content:center}

/* ---------- P6 · For you (personalized picks, signed-in feed only) ---------- */
.foryou{padding:4px 0 6px;border-bottom:var(--hair) solid var(--hairc)}
.fy-eyebrow{
  padding:10px 16px 4px;
  color:var(--muted);
  font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.fy-row{display:flex;flex-direction:column;gap:2px;padding:8px 16px;transition:background .15s}
a.fy-row:hover{background:var(--hover-row)}
.fy-why{font:500 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted)}

/* ============================================================
   P7a · ASK THE ARCHITECT (reader half, /ask.php)
   quiet secondary pill on /about/ + article end · own sheet on
   the account-sheet mechanics · Questions card in /me/
   ============================================================ */

/* entry block · mono note + hairline pill (the one filled CTA per screen stays Subscribe) */
.ask-block{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ask-block--center{align-items:center;text-align:center}
.ask-note{font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.btn-ask{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 16px;border-radius:999px;
  border:var(--hair) solid var(--hairc-academy);background:transparent;
  font:600 14px/1 var(--body);color:var(--text-strong);
  transition:background .15s,border-color .15s;
}
.btn-ask:hover{background:var(--hover-row);border-color:var(--muted-weak)}
.btn-ask .ico{width:18px;height:18px;flex:none}

/* ask sheet · textarea is the product's single input, mono counter, crosshair success */
.ask-input{height:auto;min-height:116px;padding:10px 12px;resize:none;line-height:1.4}
.ask-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:16px}
.ask-count{margin-left:auto;flex:none;font:500 12px/1 var(--mono);letter-spacing:.02em;color:var(--muted-weak)}
.ask-count.is-hot{color:var(--danger)}
.ask-done{display:flex;align-items:center;gap:14px;padding:6px 0 2px}
/* crosshair mark · registration-cross language (deliberately NOT a check-in-circle) */
.ask-cross{position:relative;flex:none;width:26px;height:26px;border-radius:999px;border:1.5px solid var(--accent-faded)}
.ask-cross::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 13px no-repeat;
}
.ask-done-copy{font:600 15px/1.4 var(--body);color:var(--text-strong)}

/* /me/ Questions card · row = mono status chip + one-line preview + date.
   ANSWERED chip is the card's single accent dose. */
.qs-top{display:flex;align-items:center;gap:8px}
.qs-chip{
  flex:none;
  font:600 10px/1 var(--mono);letter-spacing:.07em;
  padding:3px 7px;border-radius:999px;
  background:var(--surface);color:var(--muted);
}
.qs-chip--answered{background:var(--accent-faded);color:var(--accent-ink)}
.qs-body{
  font-size:15px;line-height:20px;color:var(--text-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qs-note{font-size:13px;line-height:1.4;color:var(--muted);padding:0;text-align:left;transition:color .15s}
a.qs-row:hover .qs-note{color:var(--accent)}
.qs-toggle{font-weight:600;align-self:flex-start}
.qs-toggle:hover{color:var(--accent)}
.qs-answer{
  margin-top:6px;padding:10px 12px;
  border:var(--hair) solid var(--hairc-academy);border-radius:12px;
  background:var(--bg-weak);
  font-size:15px;line-height:1.45;color:var(--text-strong);
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ============================================================
   P7b · AUTHOR TOOLS (/me/, is_admin) + author heart in threads
   inbox rows on the me-item grid · RU composer with two quiet
   channel toggles · mono stat line · heart = the likes glyph in
   accent, read-only mark for readers, cm-act toggle for the admin
   ============================================================ */

/* mono stat line · N new questions · N answered · N readers */
.me-stat{
  margin:2px 0 8px;
  font:500 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted);
}

/* inbox row · nickname + when, full question body, quiet actions */
.au-row{gap:4px}
.au-row.is-done{opacity:.7}
.au-nick{
  font-weight:700;font-size:15px;color:var(--text-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
.au-body{
  font-size:15px;line-height:20px;color:var(--text-strong);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.au-done{font-size:13px;line-height:1.4;color:var(--muted)}

/* inline RU composer · cm-input reused, buttons ride bottom-right */
.au-composer{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.au-kind-row{display:flex;gap:8px}
.au-kind{
  height:28px;padding:0 12px;border-radius:999px;
  border:1px solid var(--surface-strong);background:var(--bg);
  font:600 12px/1 var(--body);color:var(--muted);
  transition:background .15s,border-color .15s,color .15s;
}
.au-kind:hover{background:var(--hover-row)}
.au-kind.is-on{
  border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink);
}
.au-send-row{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.au-send{height:34px;padding:0 16px;font-size:14px}

/* author heart · read-only mark in the comment top row (every reader) */
.cm-heart{display:inline-flex;align-items:center;flex:none;color:var(--accent)}
.cm-heart-ico{width:13px;height:13px;fill:var(--accent);stroke:var(--accent)}