/* Alyra's page — Flaptown Design v5. Sits on /v5/flaptown-v5.css (tokens, materials, keys); the shared header and
   footer come from /site-nav.css. One light, top left. */
[hidden] { display: none !important; }
main { display: block; width: min(var(--page), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 40px 0 60px; }

/* labels: engraved, uppercase */
.eyebrow, .section-label, .section-label h2, .scene-note, .sheet-nav, .sheet > span {
  font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow { margin: 0; color: var(--rose); }

/* ---------- intro ---------- */
.intro { display: grid; gap: 15px; max-width: var(--measure); padding: 40px 0 60px; }
.intro h1 { font-size: 32px; line-height: 40px; margin: 0; }
.lede { margin: 0; color: var(--rose); }
.journal-note { margin: 0; max-width: var(--measure); font-size: 13px; line-height: 20px; color: var(--dusty); }
.profile-link { justify-self: start; }

/* section heads: label, then a groove running out to the edge */
.section-label { display: flex; align-items: center; gap: 15px; margin: 0 0 20px; color: var(--rose); }
.section-label h2 { margin: 0; font-weight: 400; color: var(--rose); }
.section-label::after { content: ""; flex: 1; height: 1px; order: 1; background: linear-gradient(90deg, var(--mocha), transparent); box-shadow: 0 1px 0 #000; }
.section-label > :last-child { order: 2; color: var(--dusty); font-size: 11px; letter-spacing: .04em; text-transform: none; }

/* ---------- the journal ---------- */
.journal { margin: 0 0 80px; }
/* status: a lamp and words */
#journal-status { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; line-height: 20px; color: var(--oak); }
#journal-status:empty { display: none; }
#journal-status::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #f6c9b8 0%, #e07a62 55%, #a46f67 100%);
  box-shadow: 0 0 0 1.5px #050606, 0 1px 0 2px #c9bab012, 0 0 6px 1px #e07a6299; animation: led-on .28s var(--ease);
}
#comment-access { margin: 0 0 30px; }
#comment-access:empty { display: none; }
/* each entry is a plate resting on the page */
.journal-entry {
  position: relative; margin: 0 0 20px; padding: 30px; border-radius: 12px; scroll-margin-top: 30px;
  background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 #c9bab014, inset 1px 0 0 #c9bab00a, inset 0 -1px 0 #00000099, 0 2px 0 #000, 0 10px 24px #00000080;
}
.entry-meta { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; font-size: 11px; line-height: 16px; letter-spacing: .04em; color: var(--dusty); }
.entry-meta a { color: var(--rose); }
.journal-entry h3 { font-size: 24px; line-height: 32px; margin: 10px 0 20px; max-width: var(--measure); }
.entry-body { max-width: var(--measure); overflow-wrap: anywhere; }
.entry-body p { white-space: pre-wrap; margin: 0 0 15px; }
/* comments sit in a pocket cut into the entry */
.journal-comments {
  max-width: var(--measure); margin-top: 25px; padding: 15px; border-radius: 12px; background: var(--pocket);
  box-shadow: inset 0 4px 10px -3px #000000e6, inset 0 2px 0 #000, inset 4px 0 8px -5px #000000b3, inset -4px 0 8px -5px #000000b3, inset 0 -1px 0 var(--mocha);
}
.journal-comments h4 { margin: 0 0 10px; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); }
.journal-comment {
  margin: 0 0 8px; padding: 12px 15px; border-radius: 3px; overflow-wrap: anywhere;
  background: var(--plate); box-shadow: 0 1px 0 #000, 0 2px 4px #000000b3, inset 0 1px 0 #c9bab012;
}
.comment-by { margin: 0 0 5px; font-size: 11px; line-height: 16px; letter-spacing: .04em; color: var(--dusty); }
.comment-body { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 20px; }
.alyra-reply { margin: 12px 0 0 15px; padding: 12px 15px; border-radius: 3px; background: var(--plate-hi);
  box-shadow: inset 3px 0 0 var(--clay), 0 1px 0 #000, inset 0 1px 0 #c9bab012; }
.comment-form { margin-top: 15px; }
.comment-form label { display: block; margin: 0 0 8px; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); }
.comment-form textarea { display: block; width: 100%; min-height: 110px; resize: vertical; font-size: 13px; line-height: 20px; }
.comment-form small { display: block; margin-top: 8px; font-size: 11px; line-height: 16px; letter-spacing: .04em; color: var(--dusty); }
.comment-form [role=status] { margin: 10px 0 0; font-size: 13px; line-height: 20px; }
.comment-form [role=status]:empty { display: none; }
/* keys */
.comment-form button, #journal-more, .cta {
  --c: var(--rose); --f: #b7958c26;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; margin-top: 15px;
  border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--f); border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent); color: var(--oak); text-shadow: var(--carve);
  box-shadow: 0 3px 0 #000, 0 6px 14px #00000099, inset 0 1px 0 #c9bab00f;
  transition: background-color .14s ease, border-color .14s ease, transform .08s ease, box-shadow .08s ease;
}
#journal-more { --c: var(--dim); --f: #3e415833; }
.comment-form button:hover, #journal-more:hover, .draft-card:hover .cta { border-color: var(--c); background: color-mix(in srgb, var(--f) 100%, #c9bab0 6%); }
.comment-form button:active, #journal-more:active, .draft-card:active .cta { transform: translateY(2px); box-shadow: 0 1px 0 #000, inset 0 1px 0 #c9bab00a; }
.comment-form button:disabled { opacity: .38; cursor: wait; transform: none; }

/* ---------- the workshop card ---------- */
.workshop { margin: 0 0 60px; }
.draft-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 15px; padding: 15px; border-radius: 12px; color: var(--oak); text-decoration: none;
  background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 #c9bab014, inset 0 -1px 0 #00000099, 0 2px 0 #000, 0 8px 20px #00000080;
  transition: box-shadow .08s ease, transform .08s ease;
}
.draft-card:hover { color: var(--oak); box-shadow: inset 0 1px 0 #c9bab01f, inset 0 -1px 0 #00000099, 0 2px 0 #000, 0 8px 20px #00000080, 0 0 0 1px #b7958c40; }
.draft-card:active { transform: translateY(1px); }
.card-copy { display: flex; flex-direction: column; gap: 10px; padding: 20px 15px; }
.card-copy h2 { margin: 0; font-size: 32px; line-height: 40px; }
.card-copy > p:not(.eyebrow) { margin: 0; max-width: 460px; color: var(--rose); }
.card-copy ul { list-style: none; margin: 10px 0 5px; padding: 0; font-size: 13px; line-height: 20px; color: var(--oak); }
.card-copy li { display: flex; gap: 10px; margin: 0 0 5px; }
.card-copy li::before { content: "↳"; color: var(--clay); }
.cta { align-self: flex-start; margin-top: auto; }
/* the paper scene: a window onto a desk with a draft on it */
.paper-scene {
  position: relative; display: grid; place-content: center; min-height: 440px; overflow: hidden; border-radius: 8px;
  background: var(--onyx) radial-gradient(#412828 1px, transparent 1px) 0 0 / 17px 17px;
  border: 1px solid var(--mocha); box-shadow: inset 0 1px 0 #c9bab01f, inset 0 -2px 6px #00000099, inset 0 10px 24px -8px #000000f2, 0 1px 2px #000;
}
.paper-scene::after {
  content: ""; position: absolute; inset: 2px; border-radius: 7px; pointer-events: none;
  background: radial-gradient(130% 90% at 12% -10%, #c9bab017 0%, #c9bab006 40%, transparent 60%),
    linear-gradient(116deg, transparent 6%, #c9bab005 14%, #c9bab00c 20%, #c9bab012 26%, #c9bab00c 32%, #c9bab005 38%, transparent 46%);
  box-shadow: inset 0 1px 0 #c9bab040, inset 1px 0 0 #c9bab01c;
}
.sheet, .back-sheet { width: 250px; height: 320px; padding: 25px; background: var(--oak); color: var(--onyx); text-shadow: none; transform: rotate(6deg); box-shadow: 5px 8px 20px #000000b3; }
.back-sheet { position: absolute; top: 60px; left: calc(50% - 125px); background: var(--dim); transform: rotate(-8deg); }
.sheet { position: relative; }
.sheet-nav { font-size: 9px; letter-spacing: .08em; border-bottom: 1px solid var(--dim); padding-bottom: 9px; }
.sheet-title { font-size: 36px; line-height: 38px; margin: 24px 0; }
.swatches { display: flex; gap: 7px; }
.swatches i { width: 26px; height: 26px; background: var(--clay); }
.swatches i:nth-child(2) { background: var(--indigo); }
.swatches i:nth-child(3) { background: var(--onyx); }
.rule { height: 2px; width: 100%; margin: 14px 0; background: var(--dim); }
.rule.short { width: 60%; }
.sheet > span { font-size: 9px; }
.scene-note { position: absolute; z-index: 1; right: 20px; bottom: 15px; font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--dusty); }

/* ---------- notes ---------- */
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 0 20px; }
.notes h3 { margin: 0 0 10px; font-size: 18px; line-height: 26px; }
.notes p { margin: 0; max-width: 480px; font-size: 13px; line-height: 20px; color: var(--rose); }

@media (max-width: 750px) {
  main { padding-top: 20px; }
  .intro { padding: 20px 0 40px; }
  .journal-entry { padding: 20px 15px; }
  .journal-entry h3 { font-size: 18px; line-height: 26px; }
  .journal-comments { padding: 10px; }
  .alyra-reply { margin-left: 6px; }
  .draft-card { grid-template-columns: 1fr; }
  .card-copy { padding: 15px 5px; }
  .paper-scene { min-height: 400px; }
  .back-sheet { top: 40px; }
  .notes { grid-template-columns: 1fr; gap: 25px; }
}