:root {
  color-scheme: light;
  --night: #090e14;
  --night-2: #111b24;
  --night-3: #17232c;
  --paper: #edf0e9;
  --soft: #a8b4b5;
  --line: rgba(217, 227, 218, .15);
  --gold: #d2b681;
  --sea: #8dbdb3;
  font-family: Inter, "Microsoft YaHei", Arial, sans-serif;
  color: #3d281d;
  background: #f5f0e1;
}
html { scroll-behavior: smooth; }
body { color: #3d281d; background: #f5f0e1; }
body::before { display: none; }
.site-shell { position: relative; z-index: 1; }

/* Timeline and its loading/detail states use the same light paper surface as the other pages. */
body.timeline-surface { color-scheme: light; color: #3d281d; background: #f5f0e1; }
body.timeline-surface::before { display: none; }
.route-loading { display: grid; min-height: calc(100svh - 86px); place-content: center; justify-items: center; gap: 15px; color: #476653; text-align: center; background: #f5f0e1; background-image: radial-gradient(#a5977b24 .7px,transparent 1px); background-size: 12px 12px; }
.route-loading-mark { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid #8ca28d; border-radius: 50%; color: #6f9078; background: #fffaf0; box-shadow: 4px 4px 0 #c3c7ac; font-size: 22px; animation: route-loading-breathe 1.5s ease-in-out infinite; }
.route-loading p { margin: 0; font: 700 13px Georgia,"Songti SC","Microsoft YaHei",serif; letter-spacing: .16em; }
@keyframes route-loading-breathe { 50% { transform: translateY(-4px); box-shadow: 6px 8px 0 #b8c2a5; } }
@media(prefers-reduced-motion:reduce) { .route-loading-mark { animation: none; } }
.site-header,.site-footer,.page { width: 100%; margin-inline: 0; }
.site-header { position: sticky; top: 0; z-index: 10; height: 86px; border-bottom: 1px solid var(--line); background: rgba(9,14,20,.84); backdrop-filter: blur(24px); }
.brand { color: var(--paper); font-size: 22px; }
.brand-mark { color: var(--gold); font-size: 27px; }
.brand small { color: var(--sea); letter-spacing: 2.8px; }
.main-nav button { color: #a9b3b3; border-radius: 5px; transition: color .25s, background .25s; }
.main-nav button.active,.main-nav button:hover { color: var(--paper); background: rgba(141,189,179,.12); }
.icon-btn,.user-button { background: rgba(255,255,255,.035); border-color: var(--line); color: var(--paper); transition: border-color .25s, transform .25s; }
.icon-btn:hover,.user-button:hover { border-color: var(--sea); transform: translateY(-2px); }
.button { color: var(--paper); background: rgba(255,255,255,.045); border: 1px solid rgba(237,240,233,.23); border-radius: 8px; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.button:hover { color: #fff; background: rgba(141,189,179,.12); border-color: var(--sea); transform: translateY(-2px); }
.button-primary { background: var(--sea); border-color: var(--sea); color: #0a1719; }
.button-primary:hover { color: #081014; background: #b7d7cd; border-color: #b7d7cd; box-shadow: 0 12px 30px #8dbdb332; }
.button-subtle { background: #1e2d32; border-color: transparent; }
.button-danger { color: #eab0a2; background: #321f22; border-color: #764b50; }
.link-button { color: var(--sea); text-decoration-color: #8dbdb366; }
.link-button:hover { color: #cbe7dd; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.page { padding: 44px var(--page-gutter) 86px; }
.eyebrow { color: var(--sea); }
h1,h2,.serif { font-family: Georgia,"Songti SC","Noto Serif SC",serif; }
h1,h2,h3 { color: var(--paper); }
.muted { color: var(--soft); }
.section-title { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.section-title h2 { font-size: 23px; }

/* The home page takes the reference site's spacious, immersive rhythm and gives it a quieter voice. */
.home-page { padding: 0 0 86px; }
.home-hero { min-height: calc(100svh - 86px); display: grid; grid-template-columns: 1.16fr .84fr; position: relative; align-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--night) 5%, transparent 58%), radial-gradient(circle at 78% 45%, #3d655566, transparent 37%); }
.home-hero-copy { position: relative; z-index: 2; padding: 85px 0 110px var(--page-gutter); }
.home-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; letter-spacing: 3.4px; }
.home-hero .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 16px var(--sea); }
.home-hero h1 { margin: 30px 0 25px; font-size: clamp(43px, 5.2vw, 78px); line-height: 1.22; letter-spacing: -.035em; font-weight: 500; }
.home-hero h1 span,.home-hero h1 em { display: block; font-style: normal; }
.home-hero h1 em { color: var(--gold); }
.home-hero p { max-width: 490px; color: #bac4c1; font-size: 15px; line-height: 2; letter-spacing: .04em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 35px; }
.hero-actions .button { min-width: 152px; }
.hero-scene { position: relative; height: 100%; min-height: calc(100svh - 86px); display: grid; place-items: center; isolation: isolate; background: linear-gradient(90deg, #090e14 0%, #090e1400 25%), url('/welcome.jpg') center 48% / cover no-repeat; }
.hero-scene .scene-caption { position: absolute; z-index: 2; right: 4%; bottom: 9%; font: 11px Georgia,serif; color: var(--gold); letter-spacing: 4px; writing-mode: vertical-rl; }
.hero-bottom { position: absolute; left: var(--page-gutter); right: var(--page-gutter); bottom: 27px; display: flex; justify-content: space-between; align-items: center; color: #9aaca9; font: 11px Georgia,serif; letter-spacing: 2.2px; }
.hero-bottom::after { content: "↓"; color: var(--gold); font: 24px Georgia,serif; }
.home-lead { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 76px var(--page-gutter) 28px; }
.home-lead h2 { font-size: clamp(31px, 3.2vw, 47px); line-height: 1.35; margin: 11px 0 0; }
.home-lead p { max-width: 345px; color: var(--soft); line-height: 1.9; font-size: 13px; margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; padding-inline: var(--page-gutter); }
.feature-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: clamp(345px,22vw,500px); overflow: hidden; padding: 28px; text-align: left; color: #fff; background: linear-gradient(145deg,#172833,#121923 65%,#172622); border: 1px solid var(--line); border-radius: 13px; isolation: isolate; transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s; }
.feature-card:nth-child(2) { background: linear-gradient(145deg,#2f2526,#19222a 65%,#182826); }
.feature-card:nth-child(3) { background: linear-gradient(145deg,#26302b,#15232a 65%,#1b202b); }
.feature-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#07101625 0%,#081016b8 100%); }
.feature-card::after { content: ""; position: absolute; inset: auto -20% -45% auto; width: 260px; height: 260px; border: 1px solid #dcc7a23b; border-radius: 50%; box-shadow: 0 0 0 45px #dcc7a211,0 0 0 100px #dcc7a208; transition: transform .6s, opacity .6s; }
.feature-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.65); transition: transform .7s, opacity .5s; }
.feature-card:hover,.feature-card:focus-visible { transform: translateY(-7px); border-color: #b4c4b6a6; box-shadow: 0 28px 50px #0006; }
.feature-card:hover .feature-photo { transform: scale(1.08); opacity: .58; }
.feature-card:hover::after { transform: scale(1.15); }
.feature-top,.feature-bottom { position: relative; z-index: 1; }
.feature-top { display: flex; width: 100%; justify-content: space-between; align-items: start; color: var(--sea); font: 11px Georgia,serif; letter-spacing: 2.5px; }
.feature-symbol { width: 42px; height: 42px; display: grid; place-items: center; font-size: 20px; color: var(--gold); border: 1px solid #cbbd9f66; border-radius: 10px; background: #07101655; }
.feature-bottom h3 { font: 31px/1.3 Georgia,"Songti SC",serif; margin: 0 0 13px; color: #fff; }
.feature-bottom p { color: #c7d1cd; font-size: 13px; line-height: 1.75; margin: 0; }
.feature-arrow { display: block; margin-top: 23px; color: var(--gold); font-size: 19px; }
.home-counts { display: flex; gap: 35px; flex-wrap: wrap; padding: 36px var(--page-gutter) 72px; border-bottom: 1px solid var(--line); }
.home-counts div { display: flex; align-items: baseline; gap: 9px; }
.home-counts strong { color: var(--gold); font: 29px Georgia,serif; }
.home-counts span { color: #9ca9a9; font-size: 12px; }
.home-content { margin-top: 71px; padding-inline: var(--page-gutter); }
.home-grid { gap: 44px; }
.home-grid aside { border-left: 1px solid var(--line); padding-left: 29px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Keep the existing editing surfaces readable against the new palette. */
.memory-card,.album-card,.todo-item,.memory-story,.settings-card,.stat { color: var(--paper); background: linear-gradient(145deg,#142029,#111a23); border-color: var(--line); }
.memory-card:hover,.album-card:hover,.photo-tile:hover { border-color: #9cbbaf; }
.memory-card strong,.album-card strong,.todo-item strong { color: var(--paper); }
.memory-card p,.memory-card .meta,.album-card small,.todo-item small,.memory-story p,.settings-card p { color: var(--soft); }
.memory-cover,.album-cover { background: linear-gradient(145deg,#263641,#253737 55%,#645c4c 56%); }
.memory-card .arrow { color: var(--gold); }
.mini-photo-grid button,.photo-tile { background: #19252d; }
.empty { color: var(--soft); background: #101a22; border-color: #52605e; }
.empty strong { color: var(--paper); }
.chips .chip,.chip { color: #b8c8c4; background: #14212a; border-color: var(--line); }
.chip.active,.chip:hover { color: #0c1718; background: var(--sea); border-color: var(--sea); }
.year-rail,.timeline-items { border-color: var(--line); }
.year-rail button { color: #9baaaa; }
.year-rail button.active { color: var(--gold); }
.timeline-item::before { background: var(--gold); border-color: var(--night); }
.detail-intro { color: #d3d9d1; }
.tag { background: #26352f; color: var(--gold); }
.dropzone { color: #b8c7c2; background: #12212a; border-color: #637871; }
.dropzone.dragover { background: #234039; border-color: var(--sea); }
.upload-progress { color: var(--sea); }
.todo-item>input { accent-color: var(--sea); }
.todo-item.done strong { color: #829390; }
.todo-preview li,.trash-item { color: var(--paper); border-color: var(--line); }
.field,input[type="text"],input[type="password"],input[type="search"],textarea,select { color: var(--paper); background: #101b24; border-color: #43534f; }
input::placeholder,textarea::placeholder { color: #81908f; }
label.field-label { color: #c2cfca; }
label.field-label small { color: var(--soft); }
.memory-attached-photos { border-color: #52625b; }
.memory-attached-photos p { color: var(--soft); }
.memory-attached-photo { color: var(--paper); background: #19262d; border-color: #52625b; }
.memory-attached-photo:has(input:checked) { background: #3d302e; border-color: #bd8b73; }
input[type="file"] { color: var(--soft); background: #12212a; border-color: #637871; }
input[type="file"]::file-selector-button { color: var(--paper); background: #26343a; border-color: #637871; }
.auth-wrap { color: var(--paper); background: #101a23; border-color: var(--line); box-shadow: 0 30px 100px #0005; }
.auth-aside { color: #fff8e9; background: linear-gradient(180deg, #09101590 0%, #09101540 38%, #091015ad 100%), url('/welcome.jpg') center 47% / cover no-repeat; }
.auth-aside h1 { max-width: 13em; font-size: clamp(34px, 3.3vw, 53px); line-height: 1.4; text-shadow: 0 3px 22px #0009; }
.auth-aside .brandline,.auth-aside .eyebrow { color: #fff8e9; text-shadow: 0 2px 15px #0009; }
.auth-aside p { color: #f0e9d9; text-shadow: 0 2px 15px #0009; }
.auth-form p { color: var(--soft); }
.auth-form h2 { color: var(--paper); }
dialog { color: var(--paper); background: #111c25; border-color: #52625b; }
dialog::backdrop { background: #030709c9; backdrop-filter: blur(6px); }
.modal-close { color: var(--paper); background: #26343a; }
.modal-photo { background: #0b141b; }
.choice-list { border-color: var(--line); }
.toast { color: #091317; background: #a7cfc0; }
.site-footer { color: #859b98; border-color: var(--line); padding-inline: var(--page-gutter); }
.back-to-top { position: fixed; z-index: 12; right: 25px; bottom: 25px; width: 44px; height: 44px; border: 1px solid #8dbdb366; border-radius: 12px; background: #122027db; color: var(--sea); font-size: 21px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s,transform .25s,background .25s; backdrop-filter: blur(12px); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: #203b39; }
@media(max-width:900px) { .home-hero h1 { font-size: clamp(43px,6.2vw,67px); } .feature-card { min-height: 300px; padding: 22px; } .feature-bottom h3 { font-size: 26px; } }
@media(max-width:700px) { .site-header,.site-footer,.page { width: 100%; } .page { padding: 27px var(--page-gutter) 50px; } .home-page { padding: 0 0 50px; } .site-header { height: auto; min-height: 76px; } .home-hero { grid-template-columns: 1fr; min-height: auto; } .home-hero-copy { padding: 85px var(--page-gutter) 100px; } .home-hero h1 { font-size: clamp(43px,10vw,64px); } .hero-scene { position: absolute; inset: 10% -22% auto auto; width: 70%; height: 370px; min-height: 0; opacity: .38; } .hero-bottom { bottom: 25px; } .home-lead { padding-top: 56px; display: block; } .home-lead p { margin-top: 16px; } .feature-grid { grid-template-columns: 1fr; } .feature-card { min-height: 230px; } .home-counts { gap: 18px; padding-bottom: 50px; } .home-grid aside { border-left: 0; padding-left: 0; } .home-content { margin-top: 55px; } }
@media(max-width:700px) { .auth-aside { min-height: 390px; } .auth-aside h1 { font-size: clamp(29px, 6vw, 40px); } }
@media(max-width:470px) { .home-hero-copy { padding-top: 62px; } .home-hero h1 { font-size: 43px; } .home-hero p { font-size: 13px; } .hero-actions .button { min-width: 0; } .home-counts { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .home-counts div { display: block; } .home-counts strong { display: block; font-size: 24px; } .home-counts span { display: block; margin-top: 3px; font-size: 10px; } .feature-card { min-height: 210px; } .feature-bottom h3 { font-size: 25px; } .auth-wrap { margin-top: 0; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

/* Photos: a light illustrated wall with real photographs pinned in place. */
body.photos-surface { color-scheme: light; color: #3d281d; background: #fff9ee; }
body.photos-surface::before { display: none; }
.photos-surface .site-footer { color: #9f8063; background: #fff9ee; border-color: #e9ddca; }
.photos-surface .back-to-top { color: #65442e; background: #fff9ee; border-color: #dcbf9e; }
.gallery-page { position: relative; min-height: calc(100svh - 68px); padding: 28px var(--page-gutter) 80px; overflow: hidden; background: radial-gradient(circle at 48% 34%, #fffdf8 0%, #fff9ee 54%, #faefd9 100%); }
.gallery-page::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: radial-gradient(#bc8f5c .6px, transparent .7px); background-size: 7px 7px; }
.gallery-page > * { position: relative; }
.gallery-heading { display: grid; place-items: center; max-width: 1530px; margin: 7px auto 40px; text-align: center; }
.gallery-title { display: flex; flex-direction: column; align-items: center; color: #2d5016; }
.gallery-title h1 { margin: 0; color: #2d5016; font: 500 clamp(52px,5.1vw,82px)/1.18 Georgia, "Songti SC", "Noto Serif SC", serif; letter-spacing: .16em; text-indent: .16em; }
.gallery-title-rule { display: flex; align-items: center; width: min(425px,64vw); margin: 18px 0 13px; color: #c2a34b; }
.gallery-title-rule::before,.gallery-title-rule::after { content: ""; flex: 1; height: 1px; background: #c2a34b; }
.gallery-title-rule i { width: 15px; height: 15px; margin: 0 16px; background: #c2a34b; transform: rotate(45deg); }
.gallery-title p { margin: 0; color: #2d5016; font: 500 clamp(22px,2.1vw,34px)/1.45 Georgia, "Songti SC", "Noto Serif SC", serif; letter-spacing: .28em; text-indent: .28em; }
.gallery-spark { position: absolute; left: -30px; top: 15px; color: #f2b338; font-size: 42px; }
.gallery-upload { min-width: 290px; min-height: 58px; margin-top: 28px; padding: 10px 28px; border: 1px solid #2d5016; border-radius: 999px; color: #fff9e9; background: #2d5016; box-shadow: none; font: 500 18px Georgia, "Songti SC", "Noto Serif SC", serif; letter-spacing: .16em; white-space: nowrap; }
.gallery-upload span { margin-left: auto; color: #c9a227; font: 400 33px/1 Georgia,serif; }
.gallery-upload:hover { color: #fff9e9; background: #42662a; border-color: #42662a; box-shadow: none; }
.gallery-page .album-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) minmax(145px,.48fr); gap: 17px; max-width: 1530px; margin: 0 auto 33px; }
.gallery-page .album-card { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 134px; padding: 9px; color: #3b281e; background: #fffcf5; border: 1.5px solid #d9c1a5; border-radius: 15px; box-shadow: 0 5px 0 #d6b99138, 0 12px 20px #6d4b2b12; transition: transform .3s,box-shadow .3s,border-color .3s; }
.gallery-page .album-card:hover,.gallery-page .album-card.is-selected { transform: translateY(-4px); border-color: #ed9678; box-shadow: 0 7px 0 #e9b69a77, 0 17px 25px #6d4b2b1b; }
.gallery-page .album-cover { display: block; flex: 0 0 49%; height: 112px; overflow: hidden; border-radius: 8px; background: #f3dcc0; }
.gallery-page .album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-cover-empty { display: grid; place-items: center; height: 100%; color: #e29372; font-size: 46px; }
.album-card-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; }
.gallery-page .album-card strong { display: block; width: 100%; overflow: hidden; color: #3b281e; font: 600 clamp(15px,1.4vw,21px) Georgia, "Songti SC", "Noto Serif SC", serif; text-overflow: ellipsis; white-space: nowrap; }
.gallery-page .album-card small { color: #978372; font-size: 12px; }
.album-arrow { color: #99623d; font-size: 27px; line-height: 1; }
.album-create { min-height: 134px; padding: 12px; border: 2px dashed #ae8d70; border-radius: 15px; color: #503624; background: #fffaf3a8; font: 700 15px Inter, "Microsoft YaHei", Arial, sans-serif; }
.album-create span { font-size: 24px; vertical-align: middle; }
.album-create:hover { background: #fff1dc; border-color: #e67959; }
.gallery-album-description { display: flex; gap: 15px; align-items: center; max-width: 1530px; margin: -10px auto 24px; color: #806650; font-size: 13px; }
.gallery-album-description .link-button { color: #bf5b43; }
.gallery-wall-heading { display: flex; align-items: end; justify-content: space-between; max-width: 1530px; margin: 0 auto 2px; color: #3d281d; }
.gallery-wall-heading > div { display: flex; align-items: baseline; gap: 13px; }
.gallery-wall-heading h2 { margin: 0; color: #3d281d; font: 600 27px Georgia, "Songti SC", "Noto Serif SC", serif; }
.gallery-wall-heading span { color: #a68b73; font-size: 12px; }
.gallery-all-link { padding: 5px; border: 0; color: #b75e45; background: none; font-size: 13px; }
.photo-wall { position: relative; max-width: 1530px; margin: 0 auto; padding: 54px 0 26px; }
.photo-wall::before { content: ""; position: absolute; top: 69px; left: -6vw; right: -6vw; height: 2px; background: #b48656; box-shadow: 0 2px 1px #78523738; transform: rotate(.4deg); }
.photo-wall::after { content: ""; position: absolute; top: 430px; left: -6vw; right: -6vw; height: 2px; background: #b48656; box-shadow: 0 2px 1px #78523738; transform: rotate(-.5deg); }
.gallery-page .gallery-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 54px 25px; align-items: start; }
.wall-photo { position: relative; display: block; width: 100%; min-width: 0; padding: 10px 10px 8px; border: 1px solid #dfcbb4; border-radius: 3px; color: #6d513e; background: #fffaf1; box-shadow: 0 12px 20px #6b4b2b24, 0 2px 2px #6b4b2b18; text-align: left; transform: rotate(var(--tilt, -2deg)); transition: transform .35s,box-shadow .35s; }
.wall-photo:nth-child(5n+2) { --tilt: 3deg; margin-top: 14px; }
.wall-photo:nth-child(5n+3) { --tilt: -1deg; margin-top: 7px; }
.wall-photo:nth-child(5n+4) { --tilt: 2deg; margin-top: 18px; }
.wall-photo:nth-child(5n) { --tilt: -3deg; margin-top: 5px; }
.wall-photo:hover,.wall-photo:focus-visible { z-index: 3; transform: translateY(-9px) rotate(0deg) scale(1.025); box-shadow: 0 20px 32px #6b4b2b35; }
.wall-photo::before { content: ""; position: absolute; z-index: 2; top: -18px; left: calc(50% - 8px); width: 17px; height: 29px; border: 1px solid #986037; border-radius: 4px; background: linear-gradient(90deg,#c78d55,#e9b776 48%,#bb7b42); box-shadow: 1px 2px 3px #65442e60; }
.wall-photo::after { content: ""; position: absolute; z-index: 3; top: -3px; left: calc(50% - 7px); width: 15px; height: 1px; background: #79523a; }
.wall-photo-image { display: block; width: 100%; aspect-ratio: 1.06; overflow: hidden; background: #e9d6bd; }
.wall-photo:nth-child(5n+2) .wall-photo-image,.wall-photo:nth-child(5n+4) .wall-photo-image { aspect-ratio: .84; }
.wall-photo:nth-child(5n+3) .wall-photo-image { aspect-ratio: .94; }
.wall-photo-image img { width: 100%; height: 100%; object-fit: cover; }
.wall-photo-note { display: block; min-height: 23px; padding: 7px 4px 0; overflow: hidden; color: #7e6350; font: 12px Inter, "Microsoft YaHei", Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.gallery-page .dropzone { position: relative; z-index: 1; display: block; width: min(420px,100%); min-height: 44px; margin: 40px auto 0; padding: 9px 14px; border: 1.5px dashed #bc9273; border-radius: 12px; color: #82634d; background: #fff9edbb; font-size: 12px; }
.gallery-page .dropzone:hover,.gallery-page .dropzone.dragover { color: #7b3a29; background: #ffead6; border-color: #ed7554; }
.gallery-page .upload-progress { position: relative; z-index: 2; color: #b75e45; text-align: center; }
.gallery-page .empty { max-width: 560px; margin: 35px auto; color: #866953; background: #fffaf2; border-color: #d8b99a; }
.gallery-page .empty strong { color: #4c3427; }
.gallery-page .load-more .button { border-color: #cda888; color: #5b3d2c; background: #fffaf1; }
@media(max-width:1100px) { .gallery-page .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .gallery-page .gallery-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .photo-wall::after { display: none; } }
@media(max-width:700px) { .gallery-page { padding: 24px var(--page-gutter) 55px; } .gallery-heading { margin-bottom: 30px; } .gallery-title h1 { font-size: clamp(46px,15vw,64px); } .gallery-title-rule { margin: 14px 0 10px; } .gallery-title p { font-size: 22px; } .gallery-upload { min-width: min(290px,82vw); min-height: 48px; margin-top: 21px; padding: 7px 19px; font-size: 15px; } .gallery-page .album-grid { display: flex; overflow-x: auto; gap: 11px; padding: 5px 2px 14px; scroll-snap-type: x mandatory; } .gallery-page .album-card { flex: 0 0 min(74vw,280px); min-height: 105px; scroll-snap-align: start; } .gallery-page .album-cover { height: 84px; } .album-create { flex: 0 0 145px; min-height: 105px; } .gallery-page .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 31px 13px; } .photo-wall { padding-top: 37px; } .photo-wall::before { top: 49px; } .wall-photo { padding: 7px 7px 4px; transform: none !important; margin-top: 0 !important; } .wall-photo-image,.wall-photo:nth-child(5n+2) .wall-photo-image,.wall-photo:nth-child(5n+3) .wall-photo-image,.wall-photo:nth-child(5n+4) .wall-photo-image { aspect-ratio: 1; } .wall-photo-note { font-size: 10px; } }
@media(max-width:420px) { .gallery-page .gallery-grid { gap: 26px 10px; } }
.gallery-select-row { display: flex; align-items: center; gap: 13px; max-width: 1530px; margin: 13px auto 0; color: #9a7961; font-size: 12px; }
.gallery-select-toggle { min-height: 38px; padding: 6px 13px; border: 1px solid #d0ae8e; border-radius: 10px; color: #60412e; background: #fffaf2; font-size: 13px; font-weight: 700; }
.gallery-select-toggle[aria-pressed="true"] { color: #a84d35; border-color: #ee9a7d; background: #fff0e4; }
.gallery-selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 1530px; margin: 15px auto 0; padding: 12px 15px; border: 1px solid #e3c6a8; border-radius: 13px; color: #513827; background: #fffaf1; box-shadow: 0 8px 20px #764d2b14; }
.gallery-selection-bar[hidden],.album-drop-tray[hidden] { display: none !important; }
.gallery-selection-bar strong { margin-right: auto; white-space: nowrap; }
.gallery-selection-bar label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.gallery-page #gallery-album-target { width: min(210px,42vw); min-height: 38px; padding: 5px 28px 5px 10px; border: 1px solid #d3b397; border-radius: 8px; color: #513827; background: #fffdf7; font-size: 13px; }
.gallery-assign-button,.gallery-clear-button { min-height: 38px; padding: 7px 14px; border: 1px solid #cfa78b; border-radius: 9px; color: #593928; background: #fff6e9; font-size: 13px; font-weight: 700; }
.gallery-assign-button { color: white; background: #e87a59; border-color: #cd6348; }
.gallery-assign-button:hover:not(:disabled) { background: #d96947; }
.gallery-assign-button:disabled { opacity: .55; }
.gallery-page .wall-photo { cursor: grab; }
.gallery-page .wall-photo:active { cursor: grabbing; }
.gallery-page .wall-photo.is-selected { border-color: #e66f51; box-shadow: 0 0 0 4px #f18766bd, 0 14px 26px #6b4b2b30; }
.gallery-page .wall-photo-image { position: relative; }
.gallery-page .wall-photo.is-selected .wall-photo-image::after { content: "✓"; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; color: white; background: #ed7653; box-shadow: 0 2px 9px #3d281d66; font: 700 18px system-ui,sans-serif; }
.gallery-page .album-card.is-drop-target,.album-drop-tray [data-drop-album].is-drop-target { outline: 4px solid #f07755; outline-offset: 3px; background: #fff0df; }
.gallery-page .album-drop-tray { position: fixed; z-index: 16; left: 50%; bottom: 20px; width: min(760px,calc(100vw - 30px)); padding: 14px 17px; border: 2px solid #e5b594; border-radius: 17px; color: #533727; background: #fffaf0f5; box-shadow: 0 18px 50px #51341f52; transform: translateX(-50%); backdrop-filter: blur(10px); }
.album-drop-tray strong { display: block; margin-bottom: 10px; font-size: 14px; }
.album-drop-tray > div { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; }
.album-drop-tray [data-drop-album] { flex: 0 0 auto; min-height: 38px; padding: 7px 13px; border: 1px solid #cda786; border-radius: 9px; color: #62452f; background: #fff6e9; font-size: 13px; }
@media(max-width:700px) { .gallery-select-row { flex-wrap: wrap; gap: 5px 12px; } .gallery-selection-bar { align-items: stretch; } .gallery-selection-bar strong { flex-basis: 100%; } .gallery-selection-bar label { flex: 1 1 100%; } .gallery-page #gallery-album-target { width: 100%; flex: 1; } .album-drop-tray { display: none !important; } }

/* Three little todo notebooks, sharing the photos page's paper and hand-drawn palette. */
body.todos-surface { color-scheme: light; color: #3d281d; background: #f5f0e1; }
body.todos-surface::before { display: none; }
.todos-surface .site-footer { color: #9f8063; background: #fff9ee; border-color: #e9ddca; }
.todos-surface .back-to-top { color: #65442e; background: #fff9ee; border-color: #dcbf9e; }
.todos-page { position: relative; min-height: calc(100svh - 68px); padding: 28px var(--page-gutter) 90px; overflow: hidden; background: radial-gradient(ellipse at 50% 22%, #fcf9ed 0%, #f5f0e1 67%, #eee7d4 100%); }
.todos-page::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: radial-gradient(#bc8f5c .6px, transparent .7px); background-size: 7px 7px; }
.todos-page > * { position: relative; }
.todos-page .gallery-heading { margin-bottom: 30px; }
.todo-heading-doodle { color: #e6a83b; font: 700 42px Georgia, "Songti SC", "Noto Serif SC", serif; transform: rotate(-9deg); }
.todo-card { --accent: #f47c5c; position: relative; max-width: 1530px; margin: 0 auto; padding: 30px; border: 2px solid #dfc4a7; border-radius: 24px; background: #fffcf5; box-shadow: 0 8px 0 #e6caa879, 0 20px 35px #6d4b2b16; }
.todo-card::before { content: ""; position: absolute; top: -10px; left: 46%; width: 90px; height: 27px; background: #edc88790; transform: rotate(-4deg); }
.todo-card-shared { min-height: 340px; background: #fffbf2; }
.todo-card-cat { --accent: #de8c62; background: #fff6e9; }
.todo-card-shrimp { --accent: #e97c82; background: #fff4ef; }
.todo-card-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 23px; }
.todo-card-emoji { display: grid; flex: 0 0 72px; place-items: center; width: 72px; height: 72px; border: 2px dashed #e8b685; border-radius: 22px; background: #fff1d6; font-size: 39px; transform: rotate(-6deg); }
.todo-card-kicker { color: #ba8064; font: 700 11px Inter, "Microsoft YaHei", Arial, sans-serif; letter-spacing: .16em; }
.todo-card-heading h2 { margin: 2px 0 3px; color: #3b251a; font: 600 clamp(25px,2.7vw,37px)/1.25 Georgia, "Songti SC", "Noto Serif SC", serif; }
.todo-card-heading p { margin: 0; color: #80644d; font-size: 13px; }
.todo-count { margin-left: auto; padding: 8px 13px; border: 1px solid #e4c2a0; border-radius: 999px; color: #a25b47; background: #fff4e6; font-size: 12px; white-space: nowrap; }
.todo-add-form { display: flex; gap: 9px; margin-bottom: 19px; }
.todo-add-form input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 16px; border: 1.5px solid #d9bfa3; border-radius: 13px; color: #3d281d; background: #fffdf9; font-size: 14px; }
.todo-add-form input::placeholder { color: #ab8d78; }
.todo-add-form button { min-height: 46px; padding: 8px 19px; border: 2px solid #c75c40; border-radius: 999px; color: #fffaf3; background: var(--accent); box-shadow: 0 4px 0 #cf674a; font: 700 15px Inter, "Microsoft YaHei", Arial, sans-serif; white-space: nowrap; cursor: pointer; }
.todo-add-form button:hover { filter: brightness(.96); }
.todos-page .todo-list { gap: 9px; }
.todos-page .todo-item { align-items: flex-start; border-color: #ead6bf; border-radius: 13px; color: #3d281d; background: #fffdfa; box-shadow: 0 3px 0 #e9d6c46b; }
.todos-page .todo-item > input { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.todos-page .todo-item strong { color: #493429; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.todos-page .todo-item small { color: #927b69; }
.todos-page .todo-item.done strong { color: #a29385; }
.todos-page .link-button { color: #bc6c52; }
.todo-empty { margin: 0; padding: 28px 15px; border: 1.5px dashed #e1c8ac; border-radius: 13px; color: #9b806c; background: #fffaf4; text-align: center; font-size: 13px; }
.todo-completed { margin-top: 20px; color: #8e6c58; }
.todo-completed summary { width: fit-content; padding: 8px 0; cursor: pointer; font-size: 13px; }
.todo-completed .todo-list { margin-top: 8px; }
.todo-lower-heading { display: flex; justify-content: center; gap: 13px; margin: 39px auto 25px; color: #a77e5f; font: 700 15px Inter, "Microsoft YaHei", Arial, sans-serif; }
.todo-personal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 22px; max-width: 1530px; margin: 0 auto; }
.todo-personal-grid .todo-card { width: 100%; min-width: 0; padding: 25px; }
.todo-personal-grid .todo-card-emoji { flex-basis: 60px; width: 60px; height: 60px; font-size: 32px; }
.todo-personal-grid .todo-card-heading { gap: 13px; }
.todo-personal-grid .todo-count { padding: 7px 10px; }
.todos-surface #modal { color-scheme: light; color: #3d281d; background: #fffaf1; border-color: #d9bfa3; }
.todos-surface #modal .field-label,.todos-surface #modal h2 { color: #3d281d; }
.todos-surface #modal input,.todos-surface #modal textarea,.todos-surface #modal select { color: #3d281d; background: #fffdf8; border-color: #d9bfa3; }
@media(max-width:850px) { .todo-personal-grid { grid-template-columns: 1fr; } }
@media(max-width:700px) { .todos-page { padding: 24px var(--page-gutter) 60px; } .todos-page .gallery-heading { align-items: flex-start; } .todos-page .gallery-title { padding-left: 4px; } .todos-page .gallery-spark,.todo-heading-doodle { display: none; } .todo-card { padding: 21px 17px; } .todo-card-heading { gap: 12px; } .todo-card-emoji { flex-basis: 58px; width: 58px; height: 58px; font-size: 31px; } .todo-count { font-size: 11px; } }
@media(max-width:470px) { .todo-card-heading { flex-wrap: wrap; } .todo-count { margin-left: 0; } .todo-add-form button { padding: 8px 12px; } .todo-personal-grid .todo-card { padding: 21px 17px; } .todo-lower-heading { font-size: 12px; } }

/* Bucket list: each list is one writable paper note, with flowers framing the shared note. */
.todos-page { padding-top: 35px; }
.todo-page-heading { margin: 0 auto 34px; text-align: center; }
.todo-page-heading h1 { margin: 0; color: #ed7959; font: 600 clamp(45px,5.5vw,76px)/1.15 Georgia, "Songti SC", "Noto Serif SC", serif; letter-spacing: .025em; }
.todo-page-heading p { margin: 5px 0 0; color: #664d3b; font: 500 clamp(14px,1.4vw,18px)/1.7 Inter, "Microsoft YaHei", Arial, sans-serif; }
.todo-shared-wrap { position: relative; max-width: 1510px; margin: 0 auto; }
.todo-shared-wrap .todo-card { position: relative; z-index: 1; width: calc(100% - 240px); max-width: 1120px; }
.todo-side-flowers { position: absolute; top: 39%; width: clamp(95px,11vw,165px); height: auto; pointer-events: none; }
.todo-side-flowers-left { left: 0; transform: translateY(-25%) rotate(-6deg); }
.todo-side-flowers-right { right: 0; transform: translateY(-25%) scaleX(-1) rotate(-6deg); }
.todo-card { padding: 32px 42px 26px; border: 1px solid #e4ceb5; border-radius: 7px 18px 9px 16px; background: #fffaf0; box-shadow: 0 12px 24px #78583c20, 0 2px 3px #78583c12; }
.todo-card::before { top: -10px; left: 22px; width: 84px; height: 25px; background: #efaa8eaa; transform: rotate(-12deg); }
.todo-card-shared { min-height: 310px; }
.todo-card-cat { background: #fff3dc; }
.todo-card-shrimp { background: #fff0e6; }
.todo-card-heading { gap: 10px; margin-bottom: 16px; }
.todo-card-emoji,.todo-personal-grid .todo-card-emoji { display: inline; flex: none; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 30px; line-height: 1; transform: none; }
.todo-card-shared .todo-card-emoji { color: #ed7959; }
.todo-card-heading h2 { margin: 0; font-size: clamp(23px,2.3vw,31px); }
.todo-count { margin-left: auto; padding: 0; border: 0; border-radius: 0; color: #a8846b; background: none; }
.todos-page .todo-list { gap: 0; }
.todos-page .todo-item { align-items: center; gap: 13px; min-height: 45px; padding: 9px 2px; border: 0; border-bottom: 1px solid #d9c6b0; border-radius: 0; background: transparent; box-shadow: none; }
.todos-page .todo-item > input { margin: 0; }
.todos-page .todo-item strong { font: 600 15px/1.45 Inter, "Microsoft YaHei", Arial, sans-serif; }
.todos-page .todo-item small { display: block; margin-top: 2px; line-height: 1.4; }
.todos-page .todo-item-actions { justify-content: flex-end; }
.todos-page .todo-item-actions .link-button { font-size: 12px; }
.todo-empty { padding: 24px 2px; border: 0; border-bottom: 1px solid #d9c6b0; border-radius: 0; background: transparent; text-align: left; }
.todo-add-form { gap: 10px; align-items: center; margin: 8px 0 0; }
.todo-add-form input { min-height: 42px; padding: 8px 3px; border: 0; border-bottom: 1px solid #d9c6b0; border-radius: 0; background: transparent; }
.todo-add-form button { min-height: 40px; padding: 5px 3px; border: 0; border-radius: 0; color: #ad7156; background: transparent; box-shadow: none; font-size: 14px; }
.todo-add-form button:hover { color: #da694f; background: transparent; box-shadow: none; }
.todo-personal-grid { gap: 25px; margin-top: 54px; }
.todo-personal-grid .todo-card { min-height: 300px; padding: 27px 30px 22px; }
.todo-personal-grid .todo-card-heading { gap: 10px; }
.todo-completed { margin-top: 13px; }
.todo-add-form input:focus-visible,.todo-add-form button:focus-visible,.todos-page .todo-item-actions button:focus-visible { outline: 2px solid #da7658; outline-offset: 3px; }
@media(max-width:900px) { .todo-shared-wrap .todo-card { width: calc(100% - 150px); } .todo-side-flowers { width: 105px; } }
@media(max-width:700px) { .todos-page { padding-top: 28px; } .todo-page-heading { margin-bottom: 62px; } .todo-shared-wrap .todo-card { width: 100%; } .todo-side-flowers { top: -67px; width: 69px; } .todo-side-flowers-left { left: 1%; transform: rotate(-13deg); } .todo-side-flowers-right { right: 1%; transform: scaleX(-1) rotate(-13deg); } .todo-card,.todo-personal-grid .todo-card { padding: 24px 20px 19px; } .todo-personal-grid { margin-top: 31px; } }
@media(max-width:470px) { .todo-card-heading { flex-wrap: nowrap; } .todo-count { margin-left: auto; font-size: 10px; } .todos-page .todo-item { flex-wrap: wrap; } .todos-page .todo-item-actions { width: 100%; padding-left: 32px; } .todo-add-form button { padding: 5px 2px; font-size: 12px; } }

/* Match Bucket List to Timeline while preserving its three paper-tag cards. */
body.todos-surface{background:#fcf7e9;color:#354b42}
.todos-surface .site-header{background:#173a2fee;border-color:#d4c58a55;box-shadow:0 5px 24px #061a1360}
.todos-surface .brand{color:#fff8e8;font-family:Georgia,"Songti SC",serif}.todos-surface .brand::before{content:"✦";color:#e8d49d;font-size:18px}
.todos-surface .main-nav button{color:#efe7cf;font-family:Inter,"Microsoft YaHei",sans-serif;font-size:13px}.todos-surface .main-nav button.active::after{background:#e2cb88}.todos-surface .main-nav button:hover{color:#fff8dc}
.todos-surface .icon-btn,.todos-surface .user-button{color:#fff4d3}.todos-surface .user-button{border-color:#d9c887;background:#315c4b}.todos-surface .site-footer{color:#71877a;background:#f8f1df;border-color:#d9cfb5}
.todos-page{min-height:calc(100svh - 68px);padding:0;overflow:hidden;background:#fcf7e9}.todos-page::before{display:none}
.todo-page-heading{position:relative;display:flex;min-height:min(690px,calc(100svh - 68px));align-items:center;justify-content:center;margin:0;padding:90px 24px 120px;overflow:hidden;color:#fff8e8;text-align:center;background:#173a2f;isolation:isolate}
.todo-page-heading::before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,#173a2f70,#173a2fb8),url('/renoir-rocky-crags-estaque.jpg') center 43%/cover;transform:scale(1.02)}
.todo-page-heading::after{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;bottom:-145px;height:245px;border-radius:50% 50% 0 0/68% 68% 0 0;background:#fcf7e9}
.todo-hero-frame{position:absolute;inset:23px;border:1px solid #d8c27f8a;pointer-events:none}
.todo-heading-inner{position:relative;z-index:1;width:min(900px,100%)}.todo-page-heading .timeline-kicker{color:#ebdfa9;letter-spacing:.26em;text-shadow:0 2px 12px #12291e}.todo-page-heading h1{margin:0 0 20px;color:#fff8e8;font:400 clamp(72px,9vw,126px)/1.05 "Palatino Linotype",Georgia,serif;letter-spacing:-.035em;text-shadow:0 3px 24px #0c211ac9}.todo-page-heading p{max-width:620px;margin:0 auto;color:#f9f2de;font:16px/2 Georgia,"Songti SC",serif;letter-spacing:.08em;text-shadow:0 2px 14px #0b241ac9}
.todo-garden{position:relative;padding:72px var(--page-gutter) 84px;background-color:#fcf7e9;background-image:radial-gradient(#b4a8822a .6px,transparent .8px);background-size:12px 12px}.todo-garden-head{display:flex;max-width:1120px;align-items:end;justify-content:space-between;gap:30px;margin:0 auto 50px}.todo-garden-head h2{margin:10px 0 0;color:#354b42;font:600 clamp(31px,4vw,50px)/1.2 Georgia,"Songti SC",serif}.todo-garden-head p{max-width:360px;margin:0;color:#687d6d;font-size:13px;line-height:1.8}
.todo-card{--accent:#557f68;border:1px solid #9fb5a4;border-radius:3px;background:#fffaf0;box-shadow:7px 8px 0 #b8c9b8,0 18px 35px #4f665019;transform:rotate(-.35deg)}.todo-card::before{left:50%;width:104px;background:#d7c985b5;transform:translateX(-50%) rotate(-3deg)}.todo-card-shared{background:#fffdf4}.todo-card-cat{background:#f6f4df;transform:rotate(.55deg)}.todo-card-shrimp{background:#f9eee4;box-shadow:7px 8px 0 #d1b7a7,0 18px 35px #4f665019;transform:rotate(-.6deg)}
.todo-card-heading{align-items:center;margin-bottom:22px}.todo-card-heading>div{min-width:0}.todo-card-kicker{display:block;color:#718b79;font:700 9px "Courier New",monospace;letter-spacing:.15em}.todo-card-heading h2{margin:4px 0 0;color:#385b48;font:600 clamp(24px,2.5vw,34px)/1.2 Georgia,"Songti SC",serif}.todo-card-emoji,.todo-personal-grid .todo-card-emoji{display:grid;width:52px;height:52px;place-items:center;border:1px dashed #8caa93;border-radius:50%;background:#edf2df;font-size:25px;transform:rotate(-5deg)}.todo-count{color:#657c6d;font:11px "Courier New",monospace;letter-spacing:.05em}
.todos-page .todo-item{border-color:#c9cfba;color:#354b42}.todos-page .todo-item>input{accent-color:#4d765f}.todos-page .todo-item strong{color:#354b42}.todos-page .todo-item small{color:#7a877c}.todos-page .todo-item.done{opacity:.58}.todos-page .todo-item.done strong{color:#697a6f;text-decoration-color:#6d8575}.todos-page .link-button{color:#537561}.todo-add-form input{border-color:#bcc8b8;color:#354b42}.todo-add-form button{color:#3f6854}.todo-add-form button:hover{color:#244b38}.todo-empty{border-color:#c9cfba;color:#7b8a7e}.todo-side-flowers{opacity:.78;filter:sepia(.1) saturate(.78) hue-rotate(48deg)}.todo-personal-grid{margin-top:58px}.todo-end{margin:66px 0 0;color:#789384;font:12px Georgia,"Microsoft YaHei",sans-serif;letter-spacing:.16em;text-align:center}
@media(max-width:700px){.todo-page-heading{min-height:calc(100svh - 110px);padding:88px 24px 130px}.todo-hero-frame{inset:14px}.todo-page-heading h1{font-size:clamp(58px,16vw,82px)}.todo-page-heading p{max-width:340px;font-size:13px}.todo-garden{padding:54px 23px 65px}.todo-garden-head{align-items:start;flex-direction:column;margin-bottom:65px}.todo-side-flowers{top:-62px}.todo-personal-grid{margin-top:34px}}

/* Photos cover: mirrors Bucket List's immersive opening with Monet's garden. */
.gallery-page{min-height:calc(100svh - 68px);padding:0;background:#fff9ee}
.gallery-page::before{display:none}
.gallery-page-hero{position:relative;display:flex;min-height:min(690px,calc(100svh - 68px));align-items:center;justify-content:center;padding:90px 24px 120px;overflow:hidden;color:#fff8e8;text-align:center;background:#244431;isolation:isolate}
.gallery-page-hero::before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,#173a2f4f,#173a2fa8),url('/monet-sainte-adresse-garden.jpg') center 72%/cover;transform:scale(1.02)}
.gallery-page-hero::after{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;bottom:-145px;height:245px;border-radius:50% 50% 0 0/68% 68% 0 0;background:#fff9ee}
.gallery-hero-frame{position:absolute;inset:23px;border:1px solid #ead99a8a;pointer-events:none}
.gallery-hero-inner{position:relative;z-index:1;width:min(900px,100%)}
.gallery-page-hero .timeline-kicker{color:#f2e6b8;letter-spacing:.26em;text-shadow:0 2px 12px #12291e}
.gallery-page-hero h1{margin:0 0 20px;color:#fff8e8;font:400 clamp(72px,9vw,126px)/1.05 "Palatino Linotype",Georgia,serif;letter-spacing:-.035em;text-shadow:0 3px 24px #0c211ac9}
.gallery-page-hero p{max-width:620px;margin:0 auto;color:#fff8e8;font:16px/2 Georgia,"Songti SC",serif;letter-spacing:.08em;text-shadow:0 2px 14px #0b241ae0}
.gallery-scroll-cue{position:absolute;z-index:1;bottom:66px;display:flex;align-items:center;gap:14px;color:#fff2cf;font:13px Georgia,"Songti SC",serif;letter-spacing:.13em;text-shadow:0 2px 10px #163121}
.gallery-scroll-cue span{display:grid;width:32px;height:32px;place-items:center;border:1px solid #f0dda4;border-radius:50%;animation:timeline-bob 2.5s ease-in-out infinite}
.gallery-content{position:relative;padding:72px var(--page-gutter) 80px;background:radial-gradient(circle at 48% 34%,#fffdf8 0%,#fff9ee 54%,#faefd9 100%)}
.gallery-content::before{content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;background-image:radial-gradient(#bc8f5c .6px,transparent .7px);background-size:7px 7px}
.gallery-content>*{position:relative}
.gallery-title h2{margin:0;color:#2d5016;font:500 clamp(52px,5.1vw,82px)/1.18 Georgia,"Songti SC","Noto Serif SC",serif;letter-spacing:.16em;text-indent:.16em}
@media(max-width:700px){.gallery-page-hero{min-height:calc(100svh - 110px);padding:88px 24px 130px}.gallery-hero-frame{inset:14px}.gallery-page-hero h1{font-size:clamp(58px,16vw,82px)}.gallery-page-hero p{max-width:340px;font-size:13px}.gallery-scroll-cue{bottom:50px}.gallery-content{padding:54px var(--page-gutter) 55px}.gallery-title h2{font-size:clamp(42px,13vw,62px)}}
@media(prefers-reduced-motion:reduce){.gallery-scroll-cue span{animation:none}}

/* Login only: Art Nouveau poster, green and ivory palette, gold frames, and pill controls. */
.auth-wrap { --auth-ivory: #f5f0e1; --auth-green: #244631; --auth-gold: #c9a96a; position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; color-scheme: light; color: var(--auth-ivory); background: #193a2c; }
.auth-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, #41684c 0%, #294e3b 37%, #193a2c 74%, #102c23 100%); }
.auth-art::before { content: ""; position: absolute; inset: 0; opacity: .26; background-image: radial-gradient(#f4e3ad 0.7px, transparent 1px); background-size: 17px 17px; pointer-events: none; }
.auth-art::after { content: ""; position: absolute; inset: 16px; border: 1px solid #d5bb7d8a; border-radius: 48% 48% 12px 12px / 6% 6% 12px 12px; pointer-events: none; }
.auth-artwork { position: absolute; inset: -4% 0; background: url('/art-nouveau-garden.svg') center / auto 105% no-repeat; opacity: .85; pointer-events: none; transition: opacity .7s ease, transform .7s ease; }
.auth-art-copy { position: relative; z-index: 1; width: min(680px, 76vw); margin-top: 70px; text-align: center; text-shadow: 0 2px 16px #102c23a6; transition: transform .75s ease, opacity .6s ease; }
.auth-brand { display: block; color: #f9efd5; font: italic 31px Georgia,"Songti SC",serif; letter-spacing: .04em; }
.auth-brand i { color: #dbc17e; font-size: .7em; }
.auth-overline { display: block; margin-top: 50px; color: #e6d7ae; font: 11px Georgia,serif; letter-spacing: .32em; }
.auth-art-copy h1 { margin: 18px 0 22px; color: #fff8e8; font: 400 clamp(54px,7.4vw,104px)/1.17 Georgia,"Songti SC","SimSun",serif; letter-spacing: .12em; }
.auth-art-copy h1 span { color: #f2dda2; }
.auth-art-copy p { margin: 0; color: #f8f0d8; font: 15px/2 Georgia,"Songti SC","SimSun",serif; letter-spacing: .12em; }
.auth-enter { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-width: 196px; min-height: 52px; margin-top: 44px; padding: 10px 23px; border: 1px solid #eddbab; border-radius: 999px; color: #173c2c; background: #f5ecd4; box-shadow: 0 0 0 5px #d2ba7930, 0 12px 28px #071c1566; font: 15px Georgia,"Songti SC",serif; letter-spacing: .14em; transition: background .35s ease, transform .35s ease, box-shadow .35s ease; }
.auth-enter:hover,.auth-enter:focus-visible { background: #fff9e9; transform: translateY(-3px); box-shadow: 0 0 0 6px #d2ba7952, 0 18px 34px #071c1566; }
.auth-enter span { color: #9d7c3c; font-size: 12px; }
.auth-edition { position: absolute; bottom: 36px; color: #ddcda4; font: 10px Georgia,serif; letter-spacing: .34em; }
.auth-content { position: absolute; z-index: 3; top: 50%; right: clamp(32px,7vw,140px); width: min(440px,calc(100% - 40px)); max-height: calc(100svh - 36px); overflow: auto; color: var(--auth-green); background: var(--auth-ivory); border: 1px solid #d2b979; border-radius: 47% 47% 18px 18px / 11% 11% 18px 18px; box-shadow: 0 25px 80px #071c1680, inset 0 0 0 8px #f5f0e1, inset 0 0 0 9px #d1bc8c; opacity: 0; transform: translateY(calc(-50% + 24px)) scale(.96); pointer-events: none; transition: opacity .55s ease, transform .65s ease; }
.auth-wrap.is-open .auth-content { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.auth-wrap.is-open .auth-artwork { opacity: .48; transform: scale(1.05); }
.auth-wrap.is-open .auth-art-copy { transform: translateX(-25vw); }
.auth-wrap.is-open .auth-enter { visibility: hidden; }
.auth-panel { padding: 48px 48px 38px; text-align: center; }
.auth-panel-mark { display: block; color: #af8e50; font-size: 30px; line-height: 1; }
.auth-panel-overline { display: block; margin-top: 17px; color: #8a744d; font: 10px Georgia,serif; letter-spacing: .22em; }
.auth-content h2 { margin: 15px 0 12px; color: var(--auth-green); font: 400 36px/1.3 Georgia,"Songti SC","SimSun",serif; letter-spacing: .1em; }
.auth-intro { margin: 0; color: #657663; font: 13px/1.8 Georgia,"Songti SC","SimSun",serif; }
.auth-divider { display: flex; align-items: center; gap: 13px; margin: 24px 0; color: #b99554; font-size: 12px; }
.auth-divider::before,.auth-divider::after { content: ""; flex: 1; height: 1px; background: #cdbb91; }
.auth-content form { display: grid; gap: 16px; text-align: left; }
.auth-field { display: grid; gap: 8px; color: #355543; font: 13px Georgia,"Songti SC",serif; letter-spacing: .1em; }
.auth-content .auth-field input[type="text"],.auth-content .auth-field input[type="password"] { width: 100%; min-height: 51px; padding: 12px 18px; border: 1px solid #bdac82; border-radius: 999px; outline: none; color: #234430; background: #fffdf5; box-shadow: inset 0 2px 5px #5745240d; font: 16px Georgia,"Songti SC",serif; transition: border-color .3s ease, box-shadow .3s ease; }
.auth-content .auth-field input:focus-visible { border-color: #507c58; box-shadow: 0 0 0 3px #7a9f7952; }
.auth-error { margin: -3px 4px 0; color: #9d3d34; font-size: 12px; line-height: 1.5; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; min-height: 51px; margin-top: 8px; border: 1px solid #ae8b4a; border-radius: 999px; color: #fff8e7; background: #285139; box-shadow: 0 8px 18px #2344302b; font: 15px Georgia,"Songti SC",serif; letter-spacing: .1em; transition: background .35s ease, box-shadow .35s ease, transform .35s ease; }
.auth-submit:hover,.auth-submit:focus-visible { color: #fffdf0; background: #38664a; box-shadow: 0 10px 24px #23443042; transform: translateY(-2px); }
.auth-submit span { font-size: 20px; line-height: 1; }
.auth-private { margin: 26px 0 0; color: #8b8068; font: 11px Georgia,"Songti SC",serif; letter-spacing: .05em; }
@media(max-width:900px) { .auth-wrap.is-open .auth-art-copy { opacity: 0; transform: scale(.94); pointer-events: none; } .auth-content { left: 50%; right: auto; transform: translate(-50%,calc(-50% + 24px)) scale(.96); } .auth-wrap.is-open .auth-content { transform: translate(-50%,-50%) scale(1); } }
@media(max-width:520px) { .auth-art::after { inset: 10px; } .auth-artwork { background-size: auto 100%; } .auth-art-copy { width: calc(100% - 38px); margin-top: 10px; } .auth-brand { font-size: 25px; } .auth-overline { margin-top: 43px; font-size: 8px; letter-spacing: .2em; } .auth-art-copy h1 { font-size: clamp(48px,13vw,68px); } .auth-art-copy p { font-size: 12px; letter-spacing: .04em; } .auth-enter { margin-top: 33px; } .auth-edition { bottom: 25px; font-size: 8px; } .auth-content { width: calc(100% - 28px); } .auth-panel { padding: 42px 30px 30px; } .auth-content h2 { font-size: 30px; } }

/* Main page painting and the writing surface. */
.home-hero { background: url('/WhataFreedom.jpg') center top / cover no-repeat; }
.home-hero::before { z-index: 1; background: linear-gradient(90deg, #090e14ed 0%, #090e14cf 32%, #090e1466 60%, #090e1414 100%), linear-gradient(0deg, #090e1480, transparent 35%); }
.hero-scene { background: none; }
.home-hero-copy,.hero-bottom { z-index: 2; }
dialog.memory-modal { width: min(860px, calc(100% - 28px)); background-color: #091015; background-image: linear-gradient(90deg, #091015f0 0%, #091015e6 52%, #09101580 70%, #09101512 100%), url('/welcome.jpg'); background-position: center, calc(100% + 60px) center; background-size: auto, 95% auto; background-repeat: no-repeat; }
dialog.memory-modal .modal-inner { position: relative; width: 72%; }
@media(max-width:700px) {
  dialog.memory-modal { background: linear-gradient(#091015bd, #091015d6), url('/welcome.jpg') center 38% / cover no-repeat; }
  dialog.memory-modal .modal-inner { width: 100%; }
  .home-hero { min-height: calc(100svh - 110px); background-position: center top; }
  .home-hero::before { background: linear-gradient(90deg, #090e14dd, #090e1480), linear-gradient(0deg, #090e14b3, transparent 55%); }
  .hero-scene { display: none; }
  .home-hero-copy { min-height: calc(100svh - 110px); }
}