/* xvvx.ai — faded red/white/blue, minimalist and responsive */

:root{
  --paper: #f7f7f5;
  --surface: #fcfcfb;
  --ink: #272b2f;
  --muted: #747b81;
  --line: #d9dde0;
  --faded-blue: #8fafc2;
  --faded-red: #c58f8f;

  /* Existing component aliases */
  --bg: var(--paper);
  --text: var(--ink);
  --card: var(--surface);
  --shadow: 0 8px 24px -20px rgba(39,43,47,.28);
  --red: var(--faded-red);
  --white: var(--surface);
  --blue: var(--faded-blue);
  --brand: #587687;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font: 16px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
       Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(circle at 6% 0%, rgba(197,143,143,.18), transparent 30rem),
    radial-gradient(circle at 96% 90%, rgba(143,175,194,.20), transparent 34rem),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* layout */
.site-header, .site-footer{
  max-width: min(1120px, 92vw);
  margin: 18px auto;
  display: flex; align-items: center; justify-content: space-between;
}
main { max-width: min(1120px, 92vw); margin: 6vh auto 8vh; }

/* brand */
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.logo-flag{
  width: 16px; height: 16px; border-radius: 3px;
  background:
    linear-gradient(90deg, var(--red) 0 33.33%, var(--white) 33.33% 66.66%, var(--blue) 66.66% 100%);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--blue) 16%, transparent);
}
.logo-flag.sm{ width: 12px; height: 12px; box-shadow: none; }
.brand-word { font-weight: 700; letter-spacing: .2px; }
.brand-word .muted { color: var(--muted); font-weight: 600; }

/* nav */
.nav-link { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.nav-link:hover { border-color: color-mix(in oklab, var(--muted) 35%, transparent); }

/* hero */
.hero { padding: 12vh 0 8vh; position: relative; }
.hero-title{
  font-size: clamp(36px, 8vw, 88px);
  line-height: 1.02; margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.grad{
  color: #688da3;
}
.hero-sub{
  margin: 0 0 28px; color: var(--muted);
  font-size: clamp(16px, 2.4vw, 20px);
}
.br-hide-sm{ display:none; }
@media (min-width:600px){ .br-hide-sm{ display:inline; } }

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 12px; text-decoration:none; font-weight: 600;
  border: 1px solid color-mix(in oklab, var(--brand) 24%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn.primary{
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.btn.primary:hover{ transform: translateY(-1px); }
.btn.ghost{
  background: transparent; color: var(--text);
}
.btn.ghost:hover{ background: color-mix(in oklab, var(--blue) 16%, transparent); }

/* soft note card */
.note{
  margin-top: 12vh; padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px; background: var(--card);
  box-shadow: var(--shadow);
}
.note-title{ margin:0 0 6px; font-size: clamp(18px, 2.2vw, 22px); }
.note-text{ margin:0; color: var(--muted); }

/* ornament */
.bg-ornament{
  position:absolute; left: 0; bottom: -12%; width: 42px; height: 2px; pointer-events:none;
  background: var(--faded-red); opacity:.8;
}

/* footer */
.site-footer{ margin-top: 8vh; font-size: 14px; color: var(--muted); gap:12px; }
.foot-left, .foot-right{ display:flex; align-items:center; gap:10px; }
.foot-link{ color: inherit; text-decoration: none; border-bottom:1px dashed color-mix(in oklab, var(--muted) 30%, transparent); }
.foot-link:hover{ border-bottom-color: var(--muted); }
.sep{ opacity:.5; }
.foot-dim{ opacity:.8; }

/* notes journal */
.notes-main{
  max-width: min(720px, 92vw);
  margin-top: clamp(10vh, 14vh, 160px);
}
.notes-intro{ margin-bottom: clamp(10vh, 14vh, 150px); }
.notes-intro h1{
  margin: 0 0 18px;
  font-size: clamp(44px, 9vw, 76px);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.notes-lede{
  max-width: 620px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: clamp(18px, 2.8vw, 22px);
  line-height: 1.55;
}
.notes-principles{ margin: 0; line-height: 1.7; }
.notes-principles a,
.reply-link,
.note-permalink{
  color: inherit;
  text-decoration-color: color-mix(in oklab, var(--brand) 35%, transparent);
  text-underline-offset: .18em;
}
.notes-principles a:hover,
.reply-link:hover,
.note-permalink:hover{ text-decoration-color: currentColor; }
.journal-note{
  padding-top: 28px;
  border-top: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
}
.note-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 14px;
}
.journal-note h2{
  margin: 14px 0 18px;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.note-permalink{ text-decoration: none; }
.journal-note p{
  margin: 0 0 24px;
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.75;
}
.reply-link{ color: var(--muted); font-size: 14px; }

/* landing-page notes feed */
.notes-feed{
  max-width: 760px;
  margin: 16vh auto 0;
  scroll-margin-top: 32px;
}
.notes-feed-header{ margin-bottom: 32px; }
.notes-kicker{
  margin: 0 0 8px;
  color: var(--faded-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.notes-feed h2{
  margin: 0;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.notes-list{ display: grid; gap: 22px; }
.feed-note{
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.feed-note-meta{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .01em;
}
.feed-note p:not(.feed-note-meta){
  margin: 0 0 1em;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.72;
}
.feed-note p:last-child{ margin-bottom: 0; }
.journal-introduction{ max-width: 680px; }
.journal-introduction .notes-feed-header > p:not(.notes-kicker){
  margin: 18px 0 26px;
  color: var(--muted);
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.7;
}
.journal-introduction a,
.feed-note a,
.journal-note a,
.empty-state a{ color: inherit; text-underline-offset: .18em; }
.journal-actions{ align-items: center; }
.author-login{
  padding: 8px 2px;
  color: var(--muted) !important;
  font-size: 13px;
  text-underline-offset: .2em;
}
.author-login:focus-visible{ outline: 2px solid var(--faded-blue); outline-offset: 3px; }
.feed-note h2{ margin: 0 0 18px; font-size: clamp(23px, 4vw, 32px); }
.feed-note h2 a{ text-decoration: none; }
.note-read-link{ display: inline-block; margin-top: 16px; color: var(--muted) !important; font-size: 14px; }
.journal-note h1{ margin: 14px 0 28px; font-size: clamp(34px, 7vw, 58px); line-height: 1.08; }
.journal-note > p:not(.feed-note-meta, .note-actions){ font-size: clamp(17px, 2.2vw, 19px); line-height: 1.75; }
.note-actions{ margin-top: 36px; color: var(--muted); font-size: 14px; }
.empty-state{ padding: 12vh 0; }

/* private, phone-first editor */
.editor-main{ max-width: min(760px, 92vw); margin: clamp(7vh, 10vh, 110px) auto; }
.editor-narrow{ max-width: min(680px, 92vw); }
.editor-header{ display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.editor-header h1, .editor-main > h1{ margin: 0; font-size: clamp(36px, 7vw, 58px); }
.flash{ padding: 14px 16px; border: 1px solid var(--faded-blue); border-radius: 10px; background: var(--surface); }
.flash.error{ border-color: var(--faded-red); }
.editor-list{ display: grid; gap: 12px; }
.editor-row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.editor-row h2{ margin: 5px 0 2px; font-size: 18px; }
.editor-row p{ margin: 0; color: var(--muted); font-size: 13px; }
.status{ color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.status-published{ color: var(--brand); }
.note-form{ display: grid; gap: 20px; margin-top: 30px; }
.note-form label{ display: grid; gap: 7px; font-weight: 650; }
.note-form label span{ color: var(--muted); font-size: 13px; font-weight: 400; }
.note-form input, .note-form textarea{ width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; }
.note-form textarea{ min-height: 240px; resize: vertical; line-height: 1.6; }
.note-form input:focus, .note-form textarea:focus{ outline: 2px solid var(--faded-blue); outline-offset: 2px; }
.form-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions{ display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.form-actions button, .danger-link{ font: inherit; cursor: pointer; }
.delete-form{ margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.confirm{ display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 14px; }
.confirm input{ margin-top: 4px; }
.danger-link{ margin-top: 12px; padding: 0; border: 0; background: none; color: #8d4f4f; text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 599px){
  body{
    background:
      radial-gradient(circle at 0% 0%, rgba(197,143,143,.15), transparent 18rem),
      radial-gradient(circle at 100% 100%, rgba(143,175,194,.17), transparent 22rem),
      var(--paper);
  }
  .notes-feed{ margin-top: 12vh; }
  .feed-note-meta span{ margin: 0 2px; }
  .form-pair{ grid-template-columns: 1fr; }
  .editor-header{ align-items: flex-start; flex-direction: column; }
  .form-actions .btn{ flex: 1; }
}