/* Cozy friends-and-books theme layered over the structural stylesheet. */
:root {
  --ink: #3c281f;
  --ink-2: #563c30;
  --paper: #f3ead9;
  --paper-2: #e8dbc6;
  --cream: #fbf5e8;
  --white: #fffaf0;
  --rust: #81454f;
  --rust-dark: #69343e;
  --gold: #c89b5b;
  --sage: #839579;
  --muted: #786b61;
  --line: #d9cbb7;
  --shadow: 0 12px 32px rgba(67, 43, 31, .10);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.38) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 62%, rgba(91,65,45,.05) 0 1px, transparent 1.5px),
    linear-gradient(96deg, rgba(255,255,255,.12), transparent 42%, rgba(93,65,42,.025));
  background-size: 17px 19px, 23px 21px, 100% 100%;
  color: var(--ink);
}

h1, h2, h3 { letter-spacing: -.025em; }
.handwritten {
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-style: normal;
  letter-spacing: .02em;
  text-transform: none;
}

.public-header { height: 92px; }
.brand { font-size: 20px; }
.brand-mark {
  background: var(--espresso, #493024);
  border-radius: 5px 10px 10px 5px;
  box-shadow: inset 3px 0 rgba(255,255,255,.12), 3px 4px 0 rgba(74,45,31,.12);
}
.cuneiform-logo {
  padding: 4px;
}
.cuneiform-logo svg {
  width: 29px;
  height: 34px;
  color: #ead09a;
  stroke-width: 3.1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.sidebar .cuneiform-logo svg,
.footer .cuneiform-logo svg { color: var(--rust); }

.public-nav { font-size: 14px; }
.button { border-radius: 999px; padding-inline: 23px; background: var(--rust); box-shadow: 0 6px 14px rgba(105,52,62,.16); }
.button.small { border-radius: 999px; }
.text-link { border-bottom-style: wavy; }
.pill { border-radius: 999px; }

.hero {
  min-height: 700px;
  grid-template-columns: .9fr 1.1fr;
  gap: 75px;
  padding-top: 70px;
}
.hero-copy h1 { font-size: clamp(57px, 6.4vw, 88px); }
.hero-copy h1 em { color: var(--rust); }
.hero-copy > p { color: #695c52; font-family: var(--serif); font-size: 17px; }
.hero-copy .eyebrow.handwritten { color: var(--sage); font-size: 14px; transform: rotate(-1.5deg); }
.cozy-photo {
  min-height: 490px;
  display: block;
  padding: 13px 13px 52px;
  background: #fffbf1;
  border-radius: 6px;
  transform: rotate(1.3deg);
  box-shadow: 4px 7px 0 #d8c8b0, 0 25px 55px rgba(67,43,31,.2);
}
.cozy-photo::before,
.cozy-photo::after {
  content: '';
  position: absolute;
  z-index: 4;
  width: 82px;
  height: 24px;
  background: rgba(220, 196, 147, .62);
  top: -5px;
  box-shadow: 0 1px 2px rgba(70,45,30,.08);
}
.cozy-photo::before { left: -18px; transform: rotate(-32deg); }
.cozy-photo::after { right: -18px; transform: rotate(31deg); }
.cozy-photo img {
  width: 100%;
  height: 425px;
  display: block;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(.82) sepia(.08) contrast(.96);
}
.cozy-photo .quote-card {
  right: 22px;
  bottom: 4px;
  width: auto;
  padding: 11px 16px;
  background: transparent;
  box-shadow: none;
  color: var(--rust);
  font-size: 14px;
  transform: rotate(-2deg);
}

.manifesto {
  position: relative;
  background: #dfe5d8;
  color: var(--ink);
  overflow: hidden;
}
.manifesto::after {
  content: '☕';
  position: absolute;
  right: 5%;
  top: 50px;
  font-size: 90px;
  opacity: .06;
  transform: rotate(10deg);
}
.manifesto .eyebrow { color: var(--rust); font-size: 14px; }
.manifesto > h2 { max-width: 850px; }
.manifesto > h2 em { color: var(--rust); }
.feature-grid { gap: 25px; }
.feature-grid article {
  border: 1px solid rgba(74,54,40,.12);
  background: rgba(255,250,240,.65);
  padding: 28px;
  border-radius: 16px 16px 16px 5px;
  box-shadow: 0 8px 20px rgba(67,43,31,.05);
}
.feature-grid article:nth-child(2) { transform: translateY(12px) rotate(.5deg); }
.feature-grid article > span { color: var(--rust); }
.feature-grid p { color: #6a665c; }

.current-public { background: var(--rust); }
.reading-card {
  border-radius: 20px 20px 20px 6px;
  box-shadow: 0 20px 45px rgba(75,30,38,.18);
}
.mini-cover, .dash-cover, .large-cover {
  background: #493126;
  border-radius: 3px 9px 9px 3px;
}
.gathering-public { position: relative; }
.gathering-public::before {
  content: 'next time we meet';
  position: absolute;
  top: 70px;
  right: 8%;
  color: var(--sage);
  font-family: 'Segoe Print', 'Bradley Hand', cursive;
  transform: rotate(4deg);
  opacity: .75;
}
.footer { background: #3e2a21; }

/* Sign-in should feel like walking into the same café. */
.auth-intro {
  position: relative;
  isolation: isolate;
  background: #493126 url('/assets/library.webp') center / cover;
}
.auth-intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgba(59,35,26,.93), rgba(69,37,35,.72));
}
.auth-card { background: rgba(251,245,232,.72); border-radius: 24px 0 0 24px; }
input, textarea { border-radius: 10px; background: #fffaf1; }
.demo-note, .check { border-radius: 10px; }

/* The private area is a reading room, not a corporate dashboard. */
.app-body { background: #f4ecdd; }
.sidebar { width: 250px; background: #432e24; border-right: 5px solid #d1b489; }
.app-main { margin-left: 250px; }
.side-links a { border-radius: 10px 10px 10px 3px; }
.side-links a.active { background: var(--rust); box-shadow: 0 5px 14px rgba(28,15,10,.2); }
.sidebar-user { background: rgba(255,255,255,.04); margin-inline: -6px; padding: 15px 12px 0; border-radius: 14px; }
.page-wrap { max-width: 1220px; }
.page-head h1 { font-size: 46px; }
.page-head .eyebrow { font-family: 'Segoe Print', 'Bradley Hand', cursive; text-transform: none; letter-spacing: .02em; font-size: 12px; color: var(--sage); transform: rotate(-1deg); }
.panel,
.event-card,
.discussion-card,
.member-grid article,
.thread-main,
.nominee {
  border-radius: 16px 16px 16px 5px;
  background: rgba(255,250,240,.92);
  border-color: #dfd1bd;
  box-shadow: 0 8px 20px rgba(67,43,31,.055);
}
.announcement {
  background: #e3e8dc;
  border: 0;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 5px 14px rgba(67,43,31,.05);
}
.current-card {
  background: var(--rust);
  border-radius: 18px 18px 18px 5px;
  box-shadow: 0 14px 34px rgba(99,48,57,.18);
}
.event-date { border-radius: 10px 10px 10px 3px; background: #e7dcc9; }
.stat-grid div { border-color: #e0d2be; }
.discussion-card:hover { box-shadow: 0 16px 35px rgba(67,43,31,.11); }
.nominee-cover { border-radius: 3px 7px 7px 3px; background: #493126; }
.nominee.chosen { border-color: var(--rust); }
.vote-button { border-radius: 999px; }
.member-grid article:nth-child(3n + 2) { transform: rotate(.35deg); }
.member-grid article:nth-child(3n + 3) { transform: rotate(-.3deg); }
.avatar { background: #c9a367; }
.avatar.warm { background: #d9b7a4; }

@media (max-width: 980px) {
  .app-main { margin-left: 0; }
  .hero { gap: 35px; }
  .cozy-photo { min-height: 430px; }
  .cozy-photo img { height: 370px; }
}

@media (max-width: 720px) {
  .public-header { height: 74px; }
  .hero { grid-template-columns: 1fr; padding-top: 45px; gap: 25px; }
  .hero-copy h1 { font-size: 50px; }
  .hero-copy > p { font-size: 16px; }
  .cozy-photo { min-height: 360px; padding: 9px 9px 42px; margin-inline: 8px; }
  .cozy-photo img { height: 315px; }
  .cozy-photo .quote-card { font-size: 12px; }
  .feature-grid article:nth-child(2) { transform: none; }
  .reading-card { border-radius: 16px 16px 16px 5px; }
  .gathering-public::before { display: none; }
  .auth-card { border-radius: 0; }
  .member-grid article { transform: none !important; }
}