:root { --ink:#253b36; --muted:#68756f; --paper:#fafbf9; --line:#dce3dd; --accent:#ac594f; --sea:#315c50; }
* { box-sizing:border-box; letter-spacing:0; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,"Microsoft YaHei",sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
:focus-visible { outline:3px solid #b77455; outline-offset:4px; }
.site-header { min-height:76px; padding:18px 5%; display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; }
.wordmark { font-family:Georgia,serif; font-size:26px; font-weight:700; max-width:45%; overflow-wrap:anywhere; }
.wordmark span { font-style:italic; color:var(--accent); font-weight:400; }
.site-header nav { display:flex; align-items:center; gap:32px; flex-wrap:wrap; justify-content:flex-end; font-size:13px; }
.site-header nav a:hover,.site-header nav button:hover { color:var(--accent); }
.hero { height:min(69svh,660px); min-height:410px; position:relative; display:flex; align-items:center; overflow:hidden; color:#fff; background:#52736d; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 100%; }
.hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,40,40,.55),rgba(10,40,40,.02) 85%); }
.hero-content { position:relative; z-index:1; width:min(1120px,90%); margin:auto; }
.eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; }
.hero .eyebrow { color:#fff; }
.hero h1 { font-family:Georgia,serif; font-size:120px; line-height:1.08; margin:12px 0 26px; font-weight:400; max-width:100%; overflow-wrap:anywhere; }
.hero .amp { font-size:.58em; font-style:italic; color:#f3d5c8; }
.hero-copy { font-size:18px; max-width:520px; line-height:1.9; margin:0 0 30px; overflow-wrap:anywhere; }
.hero-link { display:inline-flex; gap:26px; align-items:center; border-bottom:1px solid #fff; padding:6px 0; font-size:13px; }
.hero-link span { font-size:22px; line-height:1; }
.hero-index { position:absolute; z-index:1; right:5%; bottom:25px; font:11px Georgia,serif; }
.intro-band { min-height:134px; padding:24px 7%; display:flex; align-items:center; justify-content:space-between; gap:24px; background:#e5ece5; color:var(--sea); }
.intro-band span { font-size:12px; }
.intro-band p { font-family:Georgia,"Microsoft YaHei",serif; font-size:32px; margin:0; }
.section { max-width:1180px; margin:auto; padding:76px 40px 90px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.section-heading .eyebrow { color:var(--accent); margin:0 0 8px; }
.section-heading h2 { font-size:36px; font-weight:500; line-height:1.3; margin:0; }
.section-number { font:12px Georgia,serif; color:var(--muted); white-space:nowrap; }
.timeline { margin-left:105px; border-left:1px solid var(--line); }
.memory { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,30%); gap:32px; padding:38px 0 38px 36px; border-bottom:1px solid var(--line); position:relative; }
.memory:not(:has(.memory-photo)) { grid-template-columns:1fr; }
.memory:before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); position:absolute; top:47px; left:-4px; }
.memory-date { position:absolute; left:-105px; top:36px; width:78px; text-align:right; line-height:1.3; }
.memory-date span { display:block; color:var(--muted); font-size:12px; }
.memory-date strong { font:25px Georgia,serif; color:var(--accent); }
.memory-content h3 { font-size:21px; line-height:1.5; margin:0 0 14px; overflow-wrap:anywhere; }
.memory-content p { margin:0; color:#55625c; line-height:2; overflow-wrap:anywhere; max-width:720px; font-size:15px; }
.memory-photo { aspect-ratio:4/3; overflow:hidden; align-self:start; }
.memory-photo img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.memory-photo:hover img,.photo-grid a:hover img { transform:scale(1.025); }
.empty { padding:60px 12px 32px; text-align:center; }
.empty p { font-size:26px; margin:0 0 10px; }
.empty span { font-size:12px; color:var(--muted); }
.photos-section { background:#eff2ef; }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-top:22px; }
.photo-grid a { position:relative; aspect-ratio:4/3; overflow:hidden; background:#cbd5cf; }
.photo-grid img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.photo-grid a span { position:absolute; bottom:0; left:0; right:0; padding:30px 16px 12px; background:linear-gradient(transparent,rgba(0,0,0,.65)); color:#fff; font-size:13px; overflow-wrap:anywhere; }
footer { background:#243a37; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:28px 5%; gap:20px; }
footer>span { font:23px Georgia,serif; overflow-wrap:anywhere; }
footer small,footer a { font-size:11px; color:#c6d2cd; }
.admin-body { background:#f6f8f6; }
.admin-main { max-width:1180px; margin:auto; padding:54px 30px; }
.login-panel { background:#fff; max-width:460px; margin:32px auto; padding:36px; border:1px solid var(--line); border-radius:6px; }
.login-panel h1,.admin-heading h1 { font-size:32px; font-weight:500; line-height:1.4; margin:0 0 28px; }
.login-panel form,.admin-section form { display:grid; gap:16px; }
.admin-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:20px; }
.admin-heading h1 { margin:0; }
.admin-heading>span { color:var(--muted); font-size:13px; }
.admin-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:42px; }
.admin-section { padding:22px 0 30px; border-top:1px solid var(--line); margin-bottom:22px; }
.admin-section h2 { font-size:19px; font-weight:500; margin:0 0 22px; }
.form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; }
input,textarea { min-width:0; width:100%; border:1px solid #ccd3ce; border-radius:4px; background:#fff; padding:10px 12px; color:var(--ink); }
input:focus,textarea:focus { border-color:var(--sea); }
textarea { resize:vertical; min-height:80px; }
small { font-weight:400; color:var(--muted); }
.primary-button,.secondary-button { justify-self:start; border:1px solid var(--sea); border-radius:4px; padding:10px 20px; font-weight:600; background:var(--sea); color:#fff; }
.secondary-button { background:transparent; color:var(--sea); }
.nav-button,.text-button { border:0; background:transparent; color:inherit; padding:7px 0; font-size:13px; }
.danger { color:var(--accent); }
.admin-list>div { display:grid; grid-template-columns:80px minmax(0,1fr) auto; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:13px 0; font-size:13px; }
.admin-list strong { overflow-wrap:anywhere; }
.admin-list span { color:var(--muted); font-size:11px; }
.alert,.notice { padding:12px 16px; font-size:13px; margin:0 0 20px; background:#f8e6e1; color:#874136; }
.notice { background:#e1eee4; color:#2b634b; }
.muted { color:var(--muted); font-size:13px; }
.site-header form { margin:0; }
.actions { display:flex; align-items:center; gap:14px; font-size:13px; flex-wrap:wrap; }
.checkbox { display:flex; align-items:center; }
.checkbox input { width:18px; height:18px; }
.edit-photo { width:180px; max-height:160px; object-fit:contain; }
.photo-dialog { border:0; padding:12px; background:#fff; max-width:94vw; max-height:94svh; }
.photo-dialog::backdrop { background:rgba(15,27,25,.85); }
.photo-dialog img { max-height:78svh; max-width:88vw; object-fit:contain; margin:auto; }
.photo-dialog button { display:block; margin-left:auto; border:0; background:none; font-size:26px; padding:0 8px; }
.photo-dialog p { margin:12px 8px 0; font-size:14px; }
@media(max-width:900px) {
  .admin-layout { grid-template-columns:1fr; gap:16px; }
  .hero h1 { font-size:92px; }
}
@media(max-width:600px) {
  .site-header { min-height:66px; padding:14px 20px; gap:14px; }
  .wordmark { font-size:23px; }
  .site-header nav { gap:16px; font-size:12px; }
  .hero { min-height:360px; height:67svh; max-height:580px; }
  .hero-content { width:calc(100% - 44px); }
  .hero-image { object-position:63% 100%; }
  .hero h1 { font-size:76px; margin-bottom:20px; }
  .hero-copy { font-size:16px; max-width:280px; }
  .hero-index { font-size:10px; right:22px; bottom:20px; }
  .intro-band { display:grid; grid-template-columns:1fr 1fr; padding:24px 22px; gap:12px; }
  .intro-band p { grid-column:1/-1; grid-row:1; font-size:26px; }
  .intro-band span:last-child { text-align:right; }
  .section { padding:54px 22px 62px; }
  .section-heading { gap:16px; }
  .section-heading h2 { font-size:30px; }
  .timeline { margin-left:4px; }
  .memory { display:block; padding:26px 0 30px 22px; }
  .memory:before { top:33px; }
  .memory-date { position:static; width:auto; text-align:left; margin-bottom:12px; }
  .memory-date span,.memory-date strong { display:inline; margin-right:7px; }
  .memory-date strong { font-size:18px; }
  .memory-content h3 { font-size:19px; }
  .memory-content p { font-size:14px; }
  .memory-photo { display:block; margin-top:22px; }
  .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .photo-grid a { aspect-ratio:1; }
  .empty { padding:38px 0 12px; }
  .empty p { font-size:21px; }
  footer { align-items:flex-start; flex-wrap:wrap; padding:28px 22px; }
  footer small { order:3; width:100%; }
  .admin-main { padding:34px 20px; }
  .login-panel { padding:26px 20px; margin:10px auto; }
  .login-panel h1,.admin-heading h1 { font-size:28px; }
  .form-row { grid-template-columns:1fr; }
  .admin-list>div { grid-template-columns:minmax(0,1fr) auto; }
  .admin-list span { grid-column:1/-1; }
  input,textarea { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }