/* ===================================================================
   Aevum - platform stylesheet (reading room, article, editor, profile)

   Loaded AFTER assets/aevum.css. It REUSES the site's nav, buttons,
   body, .wrap, .footer, focus ring and brand tokens from aevum.css and
   only adds: platform-specific tokens (spacing/type/motion/density),
   two button variants, and the platform components. Nothing here
   redefines the marketing site.
   =================================================================== */

/* ---- platform tokens: additive to aevum.css :root --------------- */
:root{
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px; --sp-6:24px;  --sp-8:32px;  --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  --fs-micro:11px; --fs-small:14px; --fs-body:18px; --fs-read:20px;
  --fs-lead:24px; --fs-h3:28px; --fs-h2:38px; --fs-h1:52px;

  --lh-tight:1.15; --lh-snug:1.35; --lh-body:1.6; --lh-read:1.72;
  --track-mono:.16em; --track-label:.2em;

  --r-1:2px; --r-2:3px;

  --dur-tap:120ms; --dur-state:200ms; --dur-enter:400ms;
  --ease-out:cubic-bezier(.16,1,.3,1);

  --dens-1-y:var(--sp-6); --dens-2-y:var(--sp-4); --dens-3-y:var(--sp-2);
  --row-y:var(--dens-2-y);

  --measure:68ch; --margin-col:250px; --margin-gap:var(--sp-10);
  --shell-h:64px;
  --plate-sm:32px; --plate-md:44px; --plate-lg:76px;
}
:root[data-theme="dark"]{
  --state-danger-fg:#e0917c; --state-ok-fg:oklch(.78 .05 145); --state-pending-fg:#f3c885;
  --surf-sunk:#0c0904; --surf-raised:#1f1810;
  --plate-bg:#241c12; --plate-fg:#e0d4b6;
  --rule-strong:rgba(241,234,215,.22); --selection:rgba(243,200,133,.24);
}
:root[data-theme="light"]{
  --state-danger-fg:#8a3a31; --state-ok-fg:oklch(.42 .04 145); --state-pending-fg:#7d5a1c;
  --surf-sunk:#efe4c8; --surf-raised:#fff7e0;
  --plate-bg:#e8dec3; --plate-fg:#3d342a;
  --rule-strong:rgba(60,40,20,.3); --selection:rgba(138,58,49,.16);
}

/* platform pages clear the fixed nav; editor keeps a full-height column */
.platform{ padding-top:var(--shell-h); }
.platform ::selection{ background:var(--selection); }
.label{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-faint);
}
a.label{ transition:color var(--dur-state) ease; }
a.label:hover{ color:var(--accent); }

/* ---- button variants the platform needs (aevum.css has base + cta) - */
.btn.quiet{ border-color:var(--hairline); color:var(--fg-soft); background:transparent; }
.btn.quiet:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn.sm{ font-size:15px; padding:9px 16px; }

/* ---- monogram plate (avatar) ------------------------------------ */
.plate{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--plate-md); height:var(--plate-md); flex:none;
  background:var(--plate-bg); color:var(--plate-fg);
  border:1px solid var(--hairline); border-radius:var(--r-1);
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:19px; line-height:1; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.plate.sm{ width:var(--plate-sm); height:var(--plate-sm); font-size:14px; }
.plate.lg{ width:var(--plate-lg); height:var(--plate-lg); font-size:32px; }
.plate.photo{ padding:0; overflow:hidden; }
.plate.photo img{
  width:100%; height:100%; object-fit:cover;
  filter:sepia(.32) saturate(.8) contrast(1.02); mix-blend-mode:luminosity; opacity:.92;
}

/* ---- catalogue marks (tags) ------------------------------------- */
.tag{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--fg-faint); padding-bottom:2px; border-bottom:1px solid var(--hairline);
  transition:color var(--dur-state) ease, border-color var(--dur-state) ease;
}
.tag:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.tags{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }

/* ---- engagement actions (mark / shelve / note) ------------------ */
.acts{ display:flex; align-items:center; gap:var(--sp-6); }
.act{
  display:inline-flex; align-items:baseline; gap:var(--sp-2);
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--fg-faint); background:none; border:0; padding:6px 0;
  cursor:pointer; transition:color var(--dur-state) ease;
}
.act:hover, .act[aria-pressed="true"]{ color:var(--accent); }
.act .n{ font-size:var(--fs-micro); color:inherit; opacity:.7; }

/* ---- semantic state text ---------------------------------------- */
.is-ok{ color:var(--state-ok-fg); }
.is-pending{ color:var(--state-pending-fg); }
.is-danger{ color:var(--state-danger-fg); }

/* ---- article: reading column + marginalia (the signature) ------- */
.piece{
  --row-y:var(--dens-1-y);
  display:grid;
  grid-template-columns:minmax(0,var(--measure)) var(--margin-col);
  column-gap:var(--margin-gap);
  max-width:calc(var(--measure) + var(--margin-col) + var(--margin-gap));
  margin:0 auto; padding:var(--sp-12) var(--sp-10) var(--sp-24);
}
.piece > *{ grid-column:1; }
.piece > .note{ grid-column:2; }
.piece h1{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:var(--fs-h1); line-height:var(--lh-tight);
  letter-spacing:-.01em; margin-bottom:var(--sp-5);
}
.piece h2{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:var(--fs-h3); line-height:var(--lh-snug); margin:var(--sp-12) 0 var(--sp-4);
}
.piece p{ font-size:var(--fs-read); line-height:var(--lh-read); margin-bottom:var(--sp-6); }
.piece p.lead{ font-size:var(--fs-lead); color:var(--fg-soft); font-style:italic; }
.piece blockquote{
  border-left:2px solid var(--accent); padding-left:var(--sp-5);
  margin:var(--sp-8) 0; font-style:italic; color:var(--fg-soft);
  font-size:var(--fs-lead); line-height:var(--lh-snug);
}
.piece figure{ margin:var(--sp-10) 0; }
.piece figcaption{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); color:var(--fg-faint); margin-top:var(--sp-3);
}
.byline{
  display:flex; align-items:center; gap:var(--sp-4);
  padding-bottom:var(--sp-8); margin-bottom:var(--sp-8); border-bottom:1px solid var(--hairline);
}
.byline .who{ font-size:17px; }
.byline .who a:hover{ color:var(--accent); }
.byline .meta{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--fg-faint); margin-top:3px;
}
.note{
  align-self:start; position:relative;
  padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background:var(--surf-raised); border:1px solid var(--hairline);
  border-left:2px solid var(--accent-2); border-radius:var(--r-2); margin-bottom:var(--sp-5);
  transition:border-color var(--dur-state) ease, transform var(--dur-state) var(--ease-out);
}
.note:hover{ border-left-color:var(--accent); transform:translateX(-3px); }
.note .body{ font-family:'Caveat', cursive; font-size:20px; line-height:1.4; color:var(--fg-soft); }
.note .from{
  display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--fg-faint);
}
.piece p:has(+ .note:hover){ color:var(--fg); background:var(--selection); }
/* signed-in note affordance + composer, living in the margin column */
.note-add{
  grid-column:2; align-self:start; justify-self:start;
  background:none; border:0; cursor:pointer; padding:2px 0; margin-bottom:var(--sp-5);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--fg-faint); opacity:.5; transition:opacity var(--dur-state) ease, color var(--dur-state) ease;
}
.note-add::before{ content:"+ "; }
.note-add:hover{ opacity:1; color:var(--accent); }
.note-composer{
  grid-column:2; align-self:start; margin-bottom:var(--sp-5);
  padding:var(--sp-3); background:var(--surf-raised);
  border:1px solid var(--hairline); border-left:2px solid var(--accent); border-radius:var(--r-2);
}
.note-composer textarea{
  width:100%; background:var(--surf-sunk); border:1px solid var(--hairline); border-radius:var(--r-1);
  color:var(--fg); font-family:'Caveat', cursive; font-size:19px; line-height:1.35;
  padding:var(--sp-2) var(--sp-3); outline:none; resize:vertical;
}
.note-composer .row{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-2); }
.note-del, .note-flag{
  background:none; border:0; cursor:pointer; margin-left:auto; padding:0;
  font-family:'JetBrains Mono', monospace; font-size:9px;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--fg-faint); opacity:.6; transition:color var(--dur-state) ease;
}
.note-del:hover, .note-flag:hover{ color:var(--state-danger-fg); opacity:1; }
.act-flag:hover{ color:var(--state-danger-fg); }
.note .from{ display:flex; align-items:center; }
@media(max-width:900px){
  .note-add, .note-composer{ grid-column:1; }
}

.closing{ margin-top:var(--sp-16); padding-top:var(--sp-8); border-top:1px solid var(--hairline); }
.closing .aside-line{ font-style:italic; color:var(--fg-faint); font-size:17px; margin-top:var(--sp-6); }
.closing .aside-line a{ color:var(--accent); border-bottom:1px solid var(--hairline); }
.notegate{ padding:var(--sp-5); border:1px solid var(--hairline); border-radius:var(--r-2); background:var(--surf-raised); }
.notegate p{ font-size:16px; line-height:1.5; color:var(--fg-soft); margin-bottom:var(--sp-4); }
@media(max-width:900px){
  .piece{ grid-template-columns:1fr; padding:var(--sp-10) var(--sp-5) var(--sp-16); }
  .piece > .note{ grid-column:1; }
  .note{ margin:0 0 var(--sp-6); }
  .note:hover{ transform:none; }
  .piece h1{ font-size:var(--fs-h2); }
}

/* ---- /read : contents index ------------------------------------- */
.index{ --row-y:var(--dens-2-y); padding-bottom:var(--sp-16); }
.index-head{ padding:var(--sp-12) 0 var(--sp-8); border-bottom:1px solid var(--rule-strong); }
.index-head h1{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:var(--fs-h2); line-height:var(--lh-snug);
}
.index-head p{ color:var(--fg-soft); margin-top:var(--sp-3); max-width:56ch; }
.filters{
  display:flex; gap:var(--sp-6); align-items:center; flex-wrap:wrap;
  padding:var(--sp-4) 0; border-bottom:1px solid var(--hairline);
}
.filters a{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--fg-faint);
  padding:4px 0; border-bottom:1px solid transparent;
  transition:color var(--dur-state) ease, border-color var(--dur-state) ease;
}
.filters a:hover{ color:var(--fg-soft); }
.filters a.on{ color:var(--accent); border-bottom-color:var(--accent); }
.entry{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-5);
  align-items:start; padding:var(--row-y) 0; border-bottom:1px solid var(--hairline);
  transition:background var(--dur-state) ease;
}
.entry:hover{ background:var(--surf-1); }
.entry .no{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  color:var(--fg-faint); padding-top:6px; min-width:3ch;
}
.entry h2{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:var(--fs-h3); line-height:var(--lh-snug); margin-bottom:6px;
}
.entry:hover h2{ color:var(--accent); }
.entry .dek{ color:var(--fg-soft); font-size:17px; line-height:1.5; max-width:62ch; }
.entry .efoot{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-3); }
.entry .by{ display:flex; align-items:center; gap:var(--sp-2); }
.entry .by span{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--fg-faint);
}
.entry .cover{ width:150px; border-radius:var(--r-1); overflow:hidden; }
.entry .cover img{ aspect-ratio:4/3; object-fit:cover; filter:sepia(.28) saturate(.85); }
@media(max-width:760px){
  .entry{ grid-template-columns:1fr; gap:var(--sp-3); }
  .entry .no{ display:none; }
  .entry .cover{ width:100%; order:-1; }
  .entry h2{ font-size:var(--fs-lead); }
}

/* ---- editor ----------------------------------------------------- */
.editor{ display:grid; grid-template-columns:1fr 300px; min-height:calc(100dvh - var(--shell-h)); }
.canvas{ background:var(--surf-sunk); padding:var(--sp-10) var(--sp-10) var(--sp-24); }
.canvas-inner{ max-width:var(--measure); margin:0 auto; }
.field-title{
  width:100%; background:none; border:0; color:var(--fg);
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:var(--fs-h1); line-height:var(--lh-tight); margin-bottom:var(--sp-5); outline:none;
}
.field-title::placeholder{ color:var(--fg-faint); opacity:.6; }

.doc{ outline:none; padding-bottom:40vh; }
.doc > *{ margin:0 0 var(--sp-6); }
.doc p{ font-size:var(--fs-read); line-height:var(--lh-read); }
.doc h2{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:var(--fs-h3); line-height:var(--lh-snug); margin-top:var(--sp-10);
}
.doc h3{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:var(--fs-lead); line-height:var(--lh-snug); margin-top:var(--sp-8);
}
.doc blockquote{
  border-left:2px solid var(--accent); padding-left:var(--sp-5);
  font-style:italic; color:var(--fg-soft); font-size:var(--fs-lead); line-height:var(--lh-snug);
}
.doc ul, .doc ol{ padding-left:var(--sp-6); }
.doc li{ font-size:var(--fs-read); line-height:var(--lh-read); margin-bottom:var(--sp-2); }
.doc hr{ border:0; border-top:1px solid var(--rule-strong); width:40%; margin:var(--sp-10) auto; }
.doc pre{
  background:var(--surf-1); border:1px solid var(--hairline); border-radius:var(--r-2);
  padding:var(--sp-4) var(--sp-5); overflow-x:auto;
  font-family:'JetBrains Mono', monospace; font-size:14px; line-height:1.6; color:var(--fg-soft);
}
.doc figure{
  margin:0 0 var(--sp-6); border:1px dashed var(--hairline); border-radius:var(--r-2);
  padding:var(--sp-8); text-align:center; color:var(--fg-faint);
}
.doc figure .label{ display:block; }
.doc aside.note{
  align-self:start; padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background:var(--surf-raised); border:1px solid var(--hairline);
  border-left:2px solid var(--accent-2); border-radius:var(--r-2);
  font-family:'Caveat', cursive; font-size:20px; line-height:1.4; color:var(--fg-soft);
}
.doc:focus-within [data-empty]:empty::before{
  content:"Type / for blocks"; color:var(--fg-faint); opacity:.5; pointer-events:none;
}
.slash{
  position:fixed; z-index:300; min-width:280px; max-height:340px; overflow-y:auto;
  background:var(--surf-raised); border:1px solid var(--rule-strong); border-radius:var(--r-2);
  box-shadow:0 18px 60px rgba(0,0,0,.34); padding:var(--sp-2);
  animation:slashIn var(--dur-state) var(--ease-out);
}
.slash[hidden]{ display:none; }
.slash .cat{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-faint);
  padding:var(--sp-2) var(--sp-3) var(--sp-1);
}
.slash-item{
  display:flex; align-items:baseline; gap:var(--sp-3);
  padding:9px var(--sp-3); border-radius:var(--r-1); cursor:pointer;
}
.slash-item .k{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--fg); min-width:96px;
}
.slash-item .h{ font-size:14px; color:var(--fg-faint); line-height:1.3; }
.slash-item.active{ background:var(--surf-sunk); }
.slash-item.active .k{ color:var(--accent); }
.slash-empty{ padding:var(--sp-4) var(--sp-3); color:var(--fg-faint); font-size:14px; }
@keyframes slashIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.rail{
  position:sticky; top:var(--shell-h); align-self:start;
  max-height:calc(100dvh - var(--shell-h)); overflow-y:auto;
  background:var(--surf-1); border-left:1px solid var(--hairline);
  padding:var(--sp-8) var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-8);
}
.rail section h3{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-faint); margin-bottom:var(--sp-4);
}
.stat{ display:flex; justify-content:space-between; font-size:16px; padding:5px 0; }
.stat b{ font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:400; }
.tag-input{
  width:100%; background:var(--surf-sunk); border:1px solid var(--hairline);
  border-radius:var(--r-1); color:var(--fg); padding:9px 11px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.08em; outline:none;
}
.tag-input::placeholder{ color:var(--fg-faint); }
.help{ font-size:14px; color:var(--fg-faint); line-height:1.45; margin-top:var(--sp-2); }
.slot{ border:1px dashed var(--hairline); border-radius:var(--r-2); padding:var(--sp-4); }
.slot .label{ display:block; margin-bottom:var(--sp-2); }
.slot p{ font-size:14px; color:var(--fg-faint); line-height:1.45; }
@media(max-width:900px){
  .editor{ grid-template-columns:1fr; }
  .rail{ position:static; max-height:none; overflow:visible; border-left:0; border-top:1px solid var(--hairline); }
  .canvas{ padding:var(--sp-8) var(--sp-5) var(--sp-16); }
  .field-title{ font-size:var(--fs-h2); }
}

/* ---- profile ---------------------------------------------------- */
.ident{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-6);
  align-items:start; padding:var(--sp-12) 0 var(--sp-8); border-bottom:1px solid var(--rule-strong);
}
.ident h1{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:var(--fs-h2); line-height:var(--lh-snug); }
.ident .handle{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); color:var(--fg-faint); margin-top:4px;
}
.ident .bio{ color:var(--fg-soft); margin-top:var(--sp-4); max-width:56ch; }
.ident .since{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-micro);
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--fg-faint); margin-top:var(--sp-4);
}
.ident-edit{ padding:var(--sp-12) 0 var(--sp-8); max-width:60ch; }
.ident-edit .display{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:var(--fs-h3); margin-bottom:var(--sp-5); }
.ident-edit .fld{ display:block; margin-bottom:var(--sp-4); }
.ident-edit .fld .label{ display:block; margin-bottom:var(--sp-2); }
.ident-edit textarea.tag-input{ resize:vertical; }
.counts{ display:flex; gap:var(--sp-8); padding:var(--sp-5) 0; border-bottom:1px solid var(--hairline); }
.counts div{ display:flex; flex-direction:column; gap:3px; }
.counts b{ font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:500; }
@media(max-width:760px){
  .ident{ grid-template-columns:auto 1fr; gap:var(--sp-4); }
  .ident .btn{ grid-column:1 / -1; justify-self:start; }
  .counts{ gap:var(--sp-6); }
}

@media (prefers-reduced-motion: reduce){
  .slash{ animation:none; }
  .note:hover{ transform:none; }
}

/* ---- empty states ------------------------------------------------ */
.empty{
  padding:var(--sp-16) var(--sp-6); text-align:center;
  border:1px solid var(--hairline); border-radius:var(--r-2); margin:var(--sp-8) 0;
}
.empty p{ color:var(--fg-soft); margin:var(--sp-3) auto var(--sp-5); max-width:44ch; }

/* ---- admin / moderation (density tier 3) -------------------------- */
.mod-row{
  display:grid; grid-template-columns:110px 1fr 190px; gap:var(--sp-4);
  align-items:start; padding:var(--dens-3-y) 0; border-bottom:1px solid var(--hairline); font-size:14px;
}
.mod-row .meta{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:var(--track-mono); color:var(--fg-faint); line-height:1.6;
}
.mod-row .target{ color:var(--fg-soft); line-height:1.5; }
.mod-row .target a{ color:var(--fg); }
.mod-row .target a:hover{ color:var(--accent); }
.mod-actions{ display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap; }
.mod-actions form{ margin:0; }
.badge-removed{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--state-danger-fg);
}
@media(max-width:760px){
  .mod-row{ grid-template-columns:1fr; gap:var(--sp-2); }
  .mod-actions{ justify-content:flex-start; }
}