/* literess.com — the page is a manuscript under Literess's review: one sheet,
   a text column, and her margin. Colour appears only where she marks the text
   (the app's review colours) and in her honey margin. */
:root {
  --desk: #e9ecf1;
  --paper: #ffffff;
  --margin-bg: #f7f8fa;
  --ink: #1c1917;
  --ink-2: #57534e;
  --rule: #dcdfe5;
  --honey: #e3a33b;
  --honey-soft: #fcefd3;
  --del: #b42318;
  --del-bg: #fee4e2;
  --ins: #157f3c;
  --ins-bg: #dcfce7;
  --gutter: 360px;
  --serif: 'Newsreader', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lift: 0 1px 1px rgba(28, 25, 23, 0.06), 0 10px 28px -18px rgba(28, 25, 23, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: var(--desk); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* The sheet and its review margin */
.sheet {
  position: relative;
  max-width: 1180px;
  margin: 24px auto 0;
  border-radius: 4px 4px 0 0;
  box-shadow: var(--lift);
  background: linear-gradient(to left, var(--margin-bg) var(--gutter), var(--rule) var(--gutter), var(--rule) calc(var(--gutter) + 1px), var(--paper) calc(var(--gutter) + 1px));
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 40px; background: var(--paper); border-bottom: 1px solid var(--rule); border-radius: 4px 4px 0 0; }
.wordmark { font: 500 1.45rem/1 var(--serif); text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 20px; font-size: 0.95rem; }

.button { display: inline-block; padding: 11px 18px; border-radius: 6px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.button:hover { background: #3a3632; }

.page { position: relative; margin-right: var(--gutter); padding: 72px 72px 88px; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.links path { fill: none; stroke: var(--honey); stroke-width: 1.25; transition: stroke-dashoffset 0.6s ease-out, opacity 0.4s; }

/* Text */
h1 { font: 400 clamp(2.4rem, 4.2vw, 3.6rem)/1.14 var(--serif); letter-spacing: -0.012em; }
h2 { font: 400 2.1rem/1.2 var(--serif); margin: 0 0 8px; }
h3 { font: 500 1.4rem/1.3 var(--serif); }
.part > .annotated { margin-top: 64px; }
.prose { margin-top: 10px; font: 400 1.2rem/1.65 var(--serif); max-width: 34em; }
.lede { margin-top: 36px; max-width: 32em; font-size: 1.1rem; color: var(--ink-2); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.part { margin-top: 112px; padding-top: 48px; border-top: 1px solid var(--rule); }

/* Her marks: suggestions (the app's colours) and comment anchors */
.change del, .change ins { padding: 0 0.06em; border-radius: 2px; text-decoration: none; }
.change del {
  color: var(--del);
  background: linear-gradient(var(--del), var(--del)) left 58% / 100% 2px no-repeat var(--del-bg);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.change ins { color: var(--ins); background: var(--ins-bg); box-shadow: inset 0 -2px var(--ins); }
.change del + ins { margin-left: 0.22em; }
.change[data-state="accepted"] ins { margin-left: 0; }
.change[data-state="accepted"] del, .change[data-state="rejected"] ins { display: none; }
.change[data-state="accepted"] ins, .change[data-state="rejected"] del { color: inherit; background: none; box-shadow: none; transition: color 0.6s, background-color 0.6s; }

mark.anchor { color: inherit; background: none; transition: background-color 0.4s, box-shadow 0.4s; }
mark.anchor.is-marked { background: var(--honey-soft); box-shadow: inset 0 -2px var(--honey); }
mark.anchor.is-hot { background: #f8dfa6; }

/* The hero line while the writer types and she answers */
.draft, .caret, .her-caret { display: none; }
.change[data-state="typing"] .draft { display: inline; }
.change[data-state="typing"] del, .change[data-state="typing"] ins,
.change[data-state="striking"] ins, .change[data-state="typing"] + .period,
.change[data-state="striking"] + .period, .change[data-state="inserting"] + .period { display: none; }
.change[data-state="typing"] .caret {
  display: inline-block; width: 2px; height: 0.9em; margin-left: 2px; vertical-align: -0.08em;
  background: var(--ink); animation: blink 1.05s steps(1) infinite;
}
.change[data-state="striking"] del { animation: strike 0.55s ease-in-out both; }
.change[data-state="inserting"] .her-caret {
  display: inline-block; position: relative; width: 2px; height: 0.9em; margin-left: 1px; vertical-align: -0.08em; background: var(--honey);
}
.her-caret::before {
  content: 'Literess'; position: absolute; bottom: 100%; left: 0; padding: 1px 5px; border-radius: 3px 3px 3px 0;
  background: var(--honey); color: var(--ink); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0; white-space: nowrap;
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes strike { from { background-size: 0% 2px; } }

/* Margin notes. Without JS they sit after their paragraph; on wide screens
   they hang in the margin level with the paragraph they answer. */
.annotated { display: flex; flex-direction: column; }
.note { margin-top: 20px; font-size: 0.95rem; line-height: 1.45; }
.card { position: relative; background: var(--paper); border-left: 3px solid var(--honey); border-radius: 4px; padding: 14px 16px 16px; box-shadow: var(--lift); }
.who { font-size: 0.8rem; color: var(--ink-2); }
.who b { color: var(--ink); font-weight: 600; }
.said { margin-top: 4px; font: 400 1.08rem/1.45 var(--serif); }
.note { position: relative; }
.sticker { position: absolute; top: 0; right: 6px; z-index: 1; width: 76px; height: 76px; transform: rotate(4deg); filter: drop-shadow(0 2px 2px rgba(28, 25, 23, 0.18)); }
.part > .annotated:nth-of-type(odd) .sticker { transform: rotate(-4deg); }
.sticker + .card { margin-top: 34px; }
.sticker + .card .who { padding-right: 72px; }
.sticker + .card .said { margin-top: 10px; }

/* Specimens in the text: what the app shows, set small */
.specimen { max-width: 30em; margin-top: 20px; padding: 16px 18px; background: var(--margin-bg); border: 1px solid var(--rule); border-radius: 4px; font-size: 0.95rem; }
.dots { display: none; }

.js .note[data-reveal]:not(.is-shown):not(.is-typing) { opacity: 0; transform: translateX(10px); }
.note { transition: opacity 0.35s, transform 0.35s; }
.card[hidden] { display: none; }
.her-note .card { animation: arrive 0.3s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
.note.is-typing .card > :not(.dots) { visibility: hidden; }
.note.is-typing .dots { display: flex; gap: 4px; position: absolute; left: 16px; bottom: 22px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--honey); animation: hop 0.9s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hop { 30% { transform: translateY(-4px); } 60% { transform: none; } }

.actions { display: flex; gap: 8px; margin-top: 12px; }
.actions button { font: 600 0.88rem/1 var(--sans); padding: 8px 14px; border-radius: 5px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.actions button:hover { border-color: var(--ink-2); }
.actions [data-act="accept"] { background: var(--ins); border-color: var(--ins); color: var(--paper); }
.actions [data-act="accept"]:hover { background: #116632; }

/* Specimens inside notes */
.thread p + p { margin-top: 10px; }
.thread b, .notes-title { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
.quoted { padding-left: 10px; border-left: 2px solid var(--honey); font: italic 400 1.02rem/1.4 var(--serif); }
.notes-title { margin-bottom: 10px; }
.memory { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; }
.memory dt { font-weight: 600; }
.memory dd { color: var(--ink-2); }

/* Her, at the top of the margin */
.her-note { text-align: center; }
.her-note .card { text-align: left; margin-top: 10px; }
.her { width: 220px; margin: -40px auto 0; }
.status {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 6px; padding: 5px 12px 5px 9px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font-size: 0.85rem; color: var(--ink-2);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s; overflow: hidden;
}
.status svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.status[data-tone="noticed"], .status[data-tone="write"] { background: var(--honey-soft); border-color: var(--honey); color: #7a4d0c; }
.status[data-tone="accepted"] { background: var(--ins-bg); border-color: var(--ins); color: var(--ins); }
.status[data-tone="rejected"] { background: var(--del-bg); border-color: var(--del); color: var(--del); }
.status[data-tone="write"] svg { animation: scribble 0.5s ease-in-out infinite alternate; }
.status[data-tone="accepted"] svg { fill: currentColor; animation: beat 0.6s ease-out; }
.status .enter { animation: rise 0.3s ease-out; }
@keyframes scribble { from { transform: rotate(-10deg) translateX(-1px); } to { transform: rotate(8deg) translateX(1px); } }
@keyframes beat { 40% { transform: scale(1.35); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.also { margin-top: 48px; }

footer { max-width: 1180px; margin: 0 auto; padding: 32px 40px 56px; font-size: 0.875rem; color: var(--ink-2); }
footer .links-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; }

/* Wide: notes hang in the margin (JS nudges them apart if they collide) */
@media (min-width: 980px) {
  .note { position: absolute; left: calc(100% + 40px); width: calc(var(--gutter) - 80px); margin-top: 0; }
}

@media (max-width: 979px) {
  .sheet { background: var(--paper); margin-top: 0; border-radius: 0; }
  .page { margin-right: 0; padding: 40px 28px 64px; }
  .links { display: none; }
  .hero .her-note { order: 2; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 14px; align-items: end; text-align: left; }
  .hero .her { grid-row: span 2; width: 120px; margin: 0; }
  .hero .status { justify-self: start; }
  .hero .lede { order: 3; }
  .hero .cta { order: 4; }
  .part { margin-top: 72px; }
  .note { max-width: 30em; }
}

@media (max-width: 480px) {
  .top { padding: 16px; }
  .top .signin { display: none; }
  .page { padding: 32px 16px 56px; }
  .hero .her-note { grid-template-columns: 1fr; }
  .hero .her { grid-row: auto; width: 140px; }
  footer { padding: 28px 16px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}