.note-page{max-width:820px;padding:clamp(12px, 3vw, 40px) var(--gutter) clamp(64px, 10vh, 120px);gap:clamp(28px,4vw,44px);margin:0 auto;display:grid}.note-head{gap:14px;display:grid}.note-head h1{font-size:clamp(36px,5vw,60px)}.note-meta{color:var(--dim);flex-wrap:wrap;gap:8px 18px;font-size:14px;display:flex}.note-meta span+span:before{content:"·";color:var(--orange);margin-right:18px}.note-film{border-radius:var(--r-card);background:var(--video);border:1px solid #ffffff14;max-width:100%;position:relative;overflow:hidden}.note-film.wide{aspect-ratio:16/9}.note-film.tall{aspect-ratio:9/16;justify-self:center;width:min(100%,380px)}.note-film video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.note-film video:fullscreen{object-fit:contain}.note-body{gap:20px;max-width:64ch;display:grid}.note-body p{color:var(--text-2);font-size:18px;line-height:1.75}.note-body>p:first-child:not(.draft-note):first-letter,.note-body .draft-note+p:first-letter{font-family:var(--f-accent);color:var(--accent);float:left;padding:6px 10px 0 0;font-size:3.2em;font-style:italic;line-height:.8}.note-body h2{letter-spacing:-.02em;margin-top:8px;scroll-margin-top:96px;font-size:22px}.note-body blockquote{border-left:2px solid var(--orange);font-family:var(--f-accent);color:var(--white);margin:6px 0;padding:4px 0 4px 20px;font-size:26px;font-style:italic;line-height:1.3}.note-tags{flex-wrap:wrap;gap:8px;display:flex}.note-tags span,.note-tags a{border-radius:var(--r-pill);border:1px solid var(--line);background:#ffffff0a;padding:6px 13px;font-size:13px;font-weight:500}.note-foot{border-top:1px solid var(--line);gap:6px;max-width:64ch;padding-top:18px;display:grid}.note-label{font-family:var(--f-accent);color:var(--white);font-size:19px;font-style:italic;line-height:1.4}.note-made{color:var(--dim);font-size:14px}.note-tags a{transition:border-color .2s}.note-tags a:hover{border-color:var(--orange)}.note-made a{color:var(--para);text-underline-offset:3px;-webkit-text-decoration:underline #ffffff40;text-decoration:underline #ffffff40}.note-made a:hover{color:var(--white);-webkit-text-decoration-color:var(--orange);text-decoration-color:var(--orange)}.note-back{color:var(--para);align-items:center;gap:8px;font-size:15px;font-weight:600;display:inline-flex}.note-back:hover{color:var(--white)}.note-page.reel{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:start;column-gap:clamp(32px,6vw,88px);max-width:1140px}.note-page.reel .note-back{grid-column:1/-1}.note-page.reel .note-film{grid-area:2/1/span 3;width:100%;position:sticky;top:96px}.note-page.reel .note-head,.note-page.reel .note-body,.note-page.reel .note-tags,.note-page.reel .note-foot{grid-column:2}@media (width<=860px){.note-page.reel{grid-template-columns:1fr}.note-page.reel .note-film{order:-1;grid-row:auto;justify-self:center;width:min(100%,320px);position:relative;top:auto}.note-page.reel .note-back{order:-2}.note-page.reel .note-head,.note-page.reel .note-body,.note-page.reel .note-tags,.note-page.reel .note-foot{grid-column:1}}.draft-note{border-radius:var(--r-small);color:var(--todo);border:1px dashed #ff6b2c80;padding:12px 16px;font-size:14px}@media (prefers-reduced-motion:reduce){.note-tags a{transition:none}}