.story-note-section .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.story-note-section { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 42rem) 1fr; gap: 3rem; padding: 0 var(--pad) clamp(6rem, 11vw, 10rem); }
.story-note-heading { grid-column: 1; padding-top: 1rem; border-top: 1px solid var(--line); }
.story-note-heading span { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.story-note-heading h2 { margin: 1.1rem 0 .8rem; font-family: var(--serif); font-size: clamp(2.1rem, 3.8vw, 3.8rem); font-weight: 400; line-height: .95; letter-spacing: -.04em; }
.story-note-heading p { max-width: 18rem; margin: 0; font-size: .75rem; line-height: 1.55; opacity: .65; }
.story-note-editor, .story-note-signin { grid-column: 2; padding-top: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-note-editor textarea { display: block; width: 100%; min-height: 12rem; resize: none; overflow: hidden; padding: 0 0 1.4rem; border: 0; outline: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.65em - 1px), var(--line) calc(1.65em - 1px), var(--line) 1.65em); color: inherit; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.65; }
.story-note-editor textarea::placeholder { color: currentColor; opacity: .32; }
.story-note-editor textarea:disabled { opacity: .45; }
.story-note-meta { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; min-height: 3.2rem; padding: .8rem 0; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.story-note-meta [data-note-status] { margin-right: auto; }
.story-note-meta [data-state="saved"] { color: var(--accent); }
.story-note-meta [data-state="error"] { color: var(--accent); }
.story-note-meta button { padding: 0 0 .15rem; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.story-note-meta button:hover { color: var(--accent); }
.story-note-signin { padding-bottom: 2rem; }
.story-note-signin p { max-width: 29rem; margin: 0 0 1.3rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; }
.story-note-signin a { padding-bottom: .2rem; border-bottom: 1px solid currentColor; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.story-note-signin a span { color: var(--accent); font-size: .95rem; }
@media (max-width: 900px) { .story-note-section { grid-template-columns: 8rem minmax(0, 1fr); } .story-note-editor, .story-note-signin { grid-column: 2; } }
@media (max-width: 600px) { .story-note-section { display: block; padding-bottom: 5rem; } .story-note-heading { margin-bottom: 2.5rem; } .story-note-heading p { max-width: 25rem; } }