:root {
  --paper:#f7f6f0; --ink:#233b35; --accent:#294c40; --surface:#fcfcf7;
  --muted:#53675b; --line:#bdc8b7; --ease:cubic-bezier(.16,1,.3,1);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:120px}
body {margin:0; line-height:1.5}
a {color:inherit; text-decoration:none; text-underline-offset:5px}
a:hover {text-decoration:underline}
button,input {font:inherit}
::selection {background:var(--accent); color:var(--paper)}
input {caret-color:var(--accent)}
body {scrollbar-color:var(--accent) var(--paper)}
.icon {width:18px; height:18px; flex:none; vertical-align:middle}
.site-header {
  min-height:100px; display:flex; align-items:center; gap:48px;
  padding:22px 5vw; border-bottom:1px solid var(--line); background:var(--paper);
}
.brand {display:flex; align-items:center; gap:12px; font-size:25px; font-weight:700; flex-shrink:0}
.brand:hover {text-decoration:none}
.brand-mark {display:block; width:52px; height:52px; flex-shrink:0}
.brand-copy {display:flex; flex-direction:column; gap:4px}
.brand-name {line-height:1.1; letter-spacing:-.025em}
.brand-slogan {font:400 14px/1.2 Georgia,serif; letter-spacing:.06em; color:var(--accent)}
.mark {background:var(--accent); color:var(--paper); border-radius:12px; padding:4px 12px; font-family:Georgia,serif}
.main-nav {display:flex; gap:32px; align-items:center}
.main-nav a {font-size:14px; position:relative; padding:12px 0}
.main-nav a::after {content:""; position:absolute; inset:auto 0 4px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 180ms var(--ease)}
.main-nav a[aria-current]::after,.main-nav a:hover::after {transform:scaleX(1)}
.site-header form {margin-left:auto}
main {max-width:1440px; margin:auto; padding:20px 5vw 100px; min-height:70vh}
main:focus {outline:none}
.demo {display:flex; align-items:center; gap:14px; margin-bottom:40px; color:var(--muted); font-size:10px; letter-spacing:.12em}
.demo span {font-size:12px; letter-spacing:0}
h1,h2,p {margin-top:0}
h1 {font:400 clamp(42px,6.5vw,88px)/1.02 Georgia,serif; letter-spacing:-.035em; margin:0 0 24px; text-wrap:balance}
h1 em {font-weight:400; color:var(--accent)}
h2 {font-size:20px; line-height:1.3; font-weight:500; text-wrap:balance}
p {text-wrap:pretty}
.lede {font-size:17px; line-height:1.75; color:var(--muted); max-width:48ch; margin-bottom:0}
.library-intro {padding:30px 0 54px}
.heading {display:flex; align-items:flex-end; justify-content:space-between; gap:40px}
.library-note {display:flex; flex-direction:column; gap:22px; padding-bottom:5px; font-size:12px; color:var(--muted)}
.text-link {display:inline-flex; gap:18px; align-items:center; font-size:13px; color:var(--ink)}
.text-link .icon {transition:transform 200ms var(--ease)}
.text-link:hover .icon {transform:translateY(3px)}
.collection-bar {display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-bottom:30px}
.filters {display:flex; gap:28px; flex-wrap:wrap; align-items:center}
.filters a {min-height:52px; display:flex; align-items:center; position:relative; font-size:13px; color:var(--muted)}
.filters a::after {content:""; position:absolute; inset:auto 0 -1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 180ms var(--ease)}
.filters a.selected {color:var(--ink); font-weight:600}
.filters a.selected::after,.filters a:hover::after {transform:scaleX(1)}
.collection-caption {font-size:12px; color:var(--muted); white-space:nowrap}
.collection-description {margin:0 0 32px; color:var(--muted)}
.collection-description h2 {color:var(--ink); margin-bottom:8px}
.collection-description p {font-size:13px}
.grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px}
.media-grid {grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:32px 40px; align-items:start}
.memory-card {display:block; min-width:0}
.memory-card:hover {text-decoration:none}
.memory-card.featured {grid-row:span 2}
.visual {position:relative; overflow:hidden; background:#dce3d5; border-radius:12px; isolation:isolate}
.media-frame {aspect-ratio:16/9}
.featured .media-frame {aspect-ratio:1.07}
.visual img {display:block; width:100%; height:100%; object-fit:cover; position:relative; z-index:1; transition:transform 500ms var(--ease)}
.memory-card:hover img {transform:scale(1.035)}
.media-status {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; font-size:13px; text-align:center; color:var(--accent)}
.media-frame[data-state="error"] img {opacity:0}
.badge {position:absolute; z-index:2; left:18px; bottom:18px; padding:7px 12px; background:var(--paper); border-radius:30px; display:flex; gap:6px; align-items:center; font-size:11px; line-height:1.2}
.badge .icon {width:12px; height:12px}
.memory-open {position:absolute; right:18px; bottom:18px; z-index:2; width:36px; height:36px; border-radius:50%; background:var(--paper); display:grid; place-items:center; transition:background 180ms,color 180ms}
.memory-card:hover .memory-open {background:var(--accent); color:var(--paper)}
.cardtext {padding:17px 0 0}
.cardtext h2 {font:400 25px/1.2 Georgia,serif; margin-bottom:10px}
.featured .cardtext h2 {font-size:32px}
.cardtext p {display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); margin:0}
.cardtext p span {display:flex; gap:7px; align-items:center; color:var(--ink)}
.cardtext .icon {width:14px; height:14px}
button {min-height:44px; border:1px solid var(--accent); background:var(--accent); color:var(--paper); padding:11px 18px; border-radius:7px; cursor:pointer; transition:background 150ms,color 150ms,transform 150ms}
button:hover {background:var(--ink)}
button:active {transform:translateY(1px)}
button:disabled {opacity:.5; cursor:not-allowed}
.secondary {background:transparent; color:var(--accent)}
.secondary:hover {background:var(--accent); color:var(--paper)}
.quiet {background:transparent; color:var(--accent); border-color:transparent; padding:10px}
.quiet:hover {background:#dce3d5; color:var(--ink)}
form[aria-busy="true"] {opacity:.65; cursor:progress}
form[aria-busy="true"] button {cursor:progress}
.notice {padding:16px 20px; border:1px solid var(--line); border-radius:7px; background:var(--surface); margin:0 0 28px; color:var(--accent); font-size:14px}
.back {display:inline-block; font-size:13px; padding:8px 0; margin:0 0 25px}
.detail {display:grid; grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr); gap:48px; align-items:start}
.detail video,.photo {display:block; width:100%; border-radius:12px; background:#142b25}
.detail video {aspect-ratio:16/9}
.detail h1 {font-size:clamp(35px,3.5vw,52px); margin-bottom:32px}
.detail h2 {font-size:15px; margin-bottom:12px}
.detail aside {padding-top:5px}
.detail aside form {margin-bottom:10px}
.detail aside>a {font-size:13px; display:inline-block; padding:12px 0; text-decoration:underline}
.media-meta {font-size:12px; color:var(--muted); margin-bottom:15px; text-transform:capitalize}
.tag {display:inline-block; border:1px solid var(--line); border-radius:24px; padding:7px 12px; font-size:12px; margin-bottom:12px}
.muted {font-size:13px; line-height:1.7; color:var(--muted)}
hr {border:0; border-top:1px solid var(--line); margin:28px 0}
.create {display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:35px 0 48px}
.create label {font-size:13px}
input {min-height:44px; background:var(--surface); border:1px solid #82957d; border-radius:7px; padding:11px 14px; color:var(--ink); max-width:100%}
input::placeholder {color:var(--muted); opacity:1}
.list {margin-top:32px}
.playlistrow {padding:20px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px}
.playlistrow a {display:flex; align-items:center; gap:24px; min-width:0}
.playlistrow span {overflow-wrap:anywhere}
.playlistrow form {display:flex; flex-shrink:0}
.playlistrow h2 {font:400 26px Georgia,serif; margin-bottom:0}
.mini {width:110px; aspect-ratio:1.5; object-fit:cover; border-radius:7px; flex-shrink:0}
.welcome {max-width:780px; padding:40px 0 100px}
.welcome h1 {font-size:clamp(48px,7vw,88px)}
.welcome h2 {margin:40px 0 14px}
.welcome p {max-width:65ch; line-height:1.8}
.welcome form {display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.empty-state {padding:56px 0; max-width:55ch}
.empty-state h2 {font:400 32px Georgia,serif; margin-bottom:16px}
footer {border-top:1px solid var(--line); padding:28px 5vw; font:italic 14px Georgia,serif; color:var(--muted)}
a:focus-visible,button:focus-visible,input:focus-visible {outline:3px solid #92602b; outline-offset:5px}
.skip-link {position:fixed; top:12px; left:12px; padding:12px 18px; background:var(--ink); color:var(--paper); z-index:20; transform:translateY(-180%)}
.skip-link:focus {transform:none}
.reading-progress {position:fixed; inset:0 0 auto; height:2px; background:var(--accent); z-index:10; transform:scaleX(0); transform-origin:left; pointer-events:none}
/* Progressive native continuity. Form submissions still complete on the server. */
@media(prefers-reduced-motion:no-preference) {
  ::view-transition-old(root) {animation:page-out 100ms ease-out both}
  ::view-transition-new(root) {animation:page-in 180ms var(--ease) both}
  @keyframes page-out {to {opacity:0}}
  @keyframes page-in {from {opacity:.4} to {opacity:1}}
  @supports(animation-timeline:scroll()) {
    .reading-progress {animation:reading linear both; animation-timeline:scroll(root)}
    @keyframes reading {to {transform:scaleX(1)}}
    .featured .visual {view-timeline-name:--memory-window; view-timeline-axis:block}
    .featured .visual img {height:110%; max-height:none; animation-name:film-window; animation-duration:auto; animation-timing-function:linear; animation-fill-mode:both; animation-timeline:--memory-window; animation-range:entry 0% exit 100%}
    @keyframes film-window {from {translate:0 0} to {translate:0 -8%}}
  }
}
@media(max-width:900px) {
  .site-header {gap:30px}
  .media-grid {gap:30px; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .featured .media-frame {aspect-ratio:.85}
  .cardtext p span {display:none}
  .detail {grid-template-columns:1fr; gap:30px}
  .detail aside {max-width:650px}
  .library-note {max-width:180px}
}
@media(max-width:600px) {
  html {scroll-padding-top:20px}
  .site-header {padding:18px 5vw; gap:20px; flex-wrap:wrap; min-height:0}
  .brand {font-size:22px}
  .brand-mark {width:44px; height:44px}
  .brand-slogan {font-size:12px}
  .main-nav {order:3; width:100%; gap:28px; border-top:1px solid var(--line); padding-top:4px}
  .main-nav a {font-size:13px; min-height:44px}
  .site-header form {margin-left:auto}
  .site-header .quiet {font-size:12px; padding:8px}
  main {padding-top:18px; padding-bottom:64px}
  .demo {margin-bottom:30px; gap:12px; align-items:start}
  .demo span {font-size:11px}
  .heading {display:block}
  h1 {font-size:clamp(44px,12vw,66px)}
  .library-intro {padding:8px 0 28px}
  .lede {font-size:15px; max-width:32ch}
  .library-note {max-width:none; flex-direction:row; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; font-size:11px}
  .library-note .text-link {font-size:11px; gap:8px}
  .collection-caption {display:none}
  .collection-bar {margin-bottom:24px}
  .filters {gap:22px}
  .filters a {font-size:12px}
  .media-grid,.grid {grid-template-columns:1fr; gap:34px}
  .featured .media-frame {aspect-ratio:1.1}
  .media-frame {aspect-ratio:1.35}
  .featured .cardtext h2,.cardtext h2 {font-size:27px}
  .cardtext p span {display:flex}
  .badge {left:14px; bottom:14px}
  .memory-open {right:14px; bottom:14px}
  .playlistrow {align-items:start; flex-direction:column}
  .playlistrow a {gap:18px}
  .playlistrow form {gap:10px}
  .create input {width:100%}
  .create {align-items:stretch; flex-direction:column; gap:12px}
  .welcome {padding:18px 0 60px}
  .welcome h1 {font-size:clamp(44px,12vw,64px)}
  .detail h1 {font-size:40px}
  .list {margin-top:25px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important; transition:none!important}
  .memory-card:hover img,button:active,.text-link:hover .icon {transform:none}
  .reading-progress {display:none}
  @view-transition {navigation:none}
}
/* Account and collaboration forms use the incumbent type, spacing and palette. */
.auth-card {max-width:650px; padding:25px 0 60px}
.auth-card h1 {font-size:clamp(38px,5vw,64px)}
.stack-form {display:flex; flex-direction:column; gap:20px; max-width:680px; margin:28px 0}
.stack-form label {display:flex; flex-direction:column; gap:8px; font-size:14px}
.stack-form button {align-self:flex-start}
textarea,select {font:inherit; color:var(--ink); background:var(--surface); border:1px solid #82957d; border-radius:7px; padding:11px 14px; max-width:100%; min-height:44px}
textarea {resize:vertical}
.auth-links {display:flex; flex-wrap:wrap; gap:24px; font-size:14px; text-decoration:underline}
.bot-trap {display:none!important}
.admin-sections {display:flex; gap:22px; flex-wrap:wrap; padding:25px 0; margin-top:20px; border-bottom:1px solid var(--line); font-size:14px}
.admin-section,.notes-section {padding-top:45px; margin-top:25px}
.admin-section>h2,.notes-section>h2,.section-title {font:400 32px Georgia,serif}
.table-scroll {overflow-x:auto; max-width:100%}
table {border-collapse:collapse; width:100%; font-size:13px; text-align:left}
th,td {padding:15px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th {font-weight:600}
td {overflow-wrap:anywhere; min-width:110px}
td form {display:flex; gap:6px; align-items:center; flex-wrap:wrap}
td form label {font-size:12px}
.stack-form .check-label {flex-direction:row; align-items:center}
.check-label input {min-height:20px; flex:none; width:20px}
.note {padding:24px 0; border-bottom:1px solid var(--line); max-width:780px}
.note>p {white-space:pre-wrap}
textarea:focus-visible,select:focus-visible {outline:3px solid #92602b; outline-offset:5px}
@media(max-width:600px) {.main-nav {gap:18px; flex-wrap:wrap}.admin-section {padding-top:28px}.auth-card {padding-top:10px}.auth-card h1 {font-size:42px}}
.memory-description {white-space:pre-wrap; overflow-wrap:anywhere}

.memory-actions {display:flex; flex-wrap:wrap; gap:12px 24px; margin:20px 0}