
:root{
  --ink:#181818;
  --muted:#6d6b66;
  --paper:#f4f2ed;
  --white:#fff;
  --line:#d8d4cb;
  --soft:#ebe7df;
  --max:1180px;
  --read:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
.masthead{background:rgba(244,242,237,.96);border-bottom:1px solid var(--line)}
.masthead-inner{max-width:var(--max);margin:auto;padding:34px 32px 0}
.brand{display:flex;align-items:flex-start;justify-content:center;gap:72px;text-decoration:none;padding:8px 0 34px}
.brand-name{font-size:34px;letter-spacing:.055em;font-weight:300;line-height:1}
.brand-tag{font-size:13px;line-height:1.55;padding-top:1px;min-width:145px}
.nav{display:flex;align-items:center;justify-content:center;gap:23px;overflow-x:auto;white-space:nowrap;padding:0 0 17px;font-size:13px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;padding-bottom:4px}
.nav a:hover,.nav a.active{border-bottom:1px solid var(--ink)}
.nav .search-link{margin-left:8px;color:var(--muted)}
main{max-width:var(--max);margin:0 auto;padding:0 32px 72px}
.home-hero{position:relative;margin:0 -32px;background:#222;overflow:hidden}
.home-hero img{display:block;width:100%;height:min(58vw,650px);object-fit:cover;filter:grayscale(100%);opacity:.92}
.hero-caption{position:absolute;left:max(32px,calc((100% - 1116px)/2));bottom:30px;color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.home-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;padding:58px 0 44px;border-bottom:1px solid var(--line)}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.home-intro h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:44px;line-height:1.08;margin:0;max-width:700px}
.home-intro p{font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.65;margin:0;color:#393833}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:46px 0 20px}
.section-head h2,.page-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:36px;margin:0}
.section-head a{font-size:12px;color:var(--muted);text-decoration:none}
.section-head a:hover{text-decoration:underline}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--white);border:1px solid var(--line);text-decoration:none;display:block;min-height:210px;transition:transform .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-2px);border-color:#aaa69d}
.card-image{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(100%);display:block}
.card-body{padding:20px}
.card-meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.card-title{font-family:Georgia,'Times New Roman',serif;font-size:23px;line-height:1.2}
.text-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.text-list li{display:grid;grid-template-columns:120px 1fr auto;gap:22px;padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline}
.text-list .date{font-size:11px;color:var(--muted)}
.text-list a{text-decoration:none;font-family:Georgia,'Times New Roman',serif;font-size:20px}
.text-list a:hover{text-decoration:underline}
.text-list .cat{font-size:11px;color:var(--muted)}
.page-wrap{padding-top:54px}
.page-deck{max-width:680px;margin:11px 0 34px;font-family:Georgia,'Times New Roman',serif;color:#4b4945;line-height:1.6}
.article{max-width:var(--read);margin:0 auto;padding-top:56px}
.article-back{display:inline-block;font-size:12px;color:var(--muted);text-decoration:none;margin-bottom:30px}
.article-back:hover{text-decoration:underline}
.article h1{font-family:Georgia,'Times New Roman',serif;font-size:48px;line-height:1.08;font-weight:400;margin:0 0 16px}
.article-meta{font-size:12px;color:var(--muted);padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:34px}
.article-image{width:100%;max-height:560px;object-fit:contain;background:var(--white);filter:grayscale(100%);margin:0 0 34px}
.article-body{font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.76}
.article-body p{margin:0 0 1.28em}
.article-body h2,.article-body h3{font-weight:400;line-height:1.25;margin-top:2em}
.article-body blockquote{margin:1.8em 0;border-left:2px solid #a9a59d;padding-left:24px;color:#45433e}
.article-body a{text-decoration-thickness:1px;text-underline-offset:2px}
.article-foot{border-top:1px solid var(--line);margin-top:45px;padding-top:20px;font-size:12px;color:var(--muted)}
.about-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:62px;padding-top:58px;align-items:start}
.about-text{max-width:700px}
.about-text h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:42px;margin:0 0 28px}
.about-text p{font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.72;margin:0 0 1.25em}
.about-photo img{width:100%;filter:grayscale(100%);display:block}
.about-photo .caption{font-size:11px;color:var(--muted);margin-top:8px}
.searchbox{width:100%;max-width:720px;padding:15px 16px;background:var(--white);border:1px solid #aaa59c;font-size:17px;margin:30px 0}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
.video-card{background:var(--white);border:1px solid var(--line);padding:24px;min-height:150px}
.video-card h2{font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;margin:0 0 10px}
.note{font-size:12px;line-height:1.5;color:var(--muted)}
.contact-box{max-width:650px;background:var(--white);border:1px solid var(--line);padding:34px;margin-top:30px}
.contact-box .email{font-family:Georgia,'Times New Roman',serif;font-size:26px}
.footer{border-top:1px solid var(--line)}
.footer-inner{max-width:var(--max);margin:auto;padding:24px 32px 50px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
@media(max-width:850px){
 .masthead-inner{padding:25px 20px 0}
 .brand{display:block;text-align:center;padding-bottom:25px}
 .brand-tag{margin-top:10px}
 .nav{justify-content:flex-start}
 main{padding-left:20px;padding-right:20px}
 .home-hero{margin-left:-20px;margin-right:-20px}
 .home-intro{grid-template-columns:1fr;gap:22px;padding-top:38px}
 .home-intro h1{font-size:37px}
 .featured-grid{grid-template-columns:1fr 1fr}
 .text-list li{grid-template-columns:85px 1fr;gap:12px}
 .text-list .cat{display:none}
 .about-wrap{grid-template-columns:1fr}
 .about-photo{max-width:340px}
 .article h1{font-size:38px}
 .article-body{font-size:18px}
}
@media(max-width:560px){
 .featured-grid{grid-template-columns:1fr}
 .home-hero img{height:64vw}
 .hero-caption{left:20px;bottom:16px}
 .page-title,.section-head h2{font-size:31px}
 .text-list li{grid-template-columns:1fr}
 .text-list .date{order:2}
 .article{padding-top:38px}
 .article h1{font-size:34px}
 .video-grid{grid-template-columns:1fr}
 .footer-inner{display:block}
 .footer-inner div+div{margin-top:8px}
}


/* V2.1 — Start page memorial refinements */
.home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 44%, rgba(0,0,0,0) 72%);
  pointer-events:none;
}
.hero-caption-main{
  z-index:1;
  text-transform:none;
  letter-spacing:0;
  bottom:38px;
}
.hero-archive{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.hero-title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:34px;
  line-height:1.12;
  letter-spacing:0;
  max-width:620px;
}
.memorial-intro h1{
  font-size:38px;
}
@media(max-width:560px){
  .hero-caption-main{bottom:20px}
  .hero-archive{font-size:11px}
  .hero-title{font-size:27px}
}


/* V2.2 review refinements */
.memorial-simple{
  display:block;
  padding-top:42px;
  padding-bottom:42px;
}
.memorial-copy{
  max-width:780px;
}
.memorial-copy p{
  max-width:780px;
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:1.68;
  color:#393833;
}
.compact-category{
  padding-top:54px;
}
.compact-category .page-title{
  margin-bottom:30px;
}
.category-list li{
  grid-template-columns:150px 1fr;
}
.category-list .date{
  white-space:nowrap;
}
.video-card{
  display:flex;
  align-items:flex-end;
}
.video-card h2{
  margin:0;
}
.contact-minimal{
  max-width:760px;
}
.contact-box-minimal{
  padding:28px 30px;
}
@media(max-width:560px){
  .category-list li{
    grid-template-columns:1fr;
  }
  .category-list .date{
    white-space:normal;
    order:2;
  }
}


/* V2.3 — readability/accessibility refinements */
.nav{
  gap:26px;
  font-size:18px;
  line-height:1.35;
  padding-bottom:19px;
}
.nav a{
  padding:7px 0 8px;
}
.nav .search-link{
  margin-left:10px;
}
.about-photo img{
  filter:none !important;
}
@media(max-width:850px){
  .nav{
    font-size:17px;
    gap:20px;
    padding-bottom:16px;
  }
}
@media(max-width:560px){
  .nav{
    font-size:17px;
    gap:18px;
  }
}


/* V2.4 — simplified typography system
   Two families only:
   - Arial/Helvetica for navigation and metadata
   - Georgia/Times for literary content
   Six practical text roles, with no tiny UI text.
*/

:root{
  --type-meta:14px;
  --type-nav:18px;
  --type-body:19px;
  --type-list:21px;
  --type-heading:36px;
  --type-display:42px;
}

/* 1. Utility / metadata */
.brand-tag,
.kicker,
.card-meta,
.text-list .date,
.text-list .cat,
.article-meta,
.article-back,
.article-foot,
.note,
.home-caption,
.hero-archive{
  font-family:Arial,Helvetica,sans-serif;
  font-size:var(--type-meta);
  line-height:1.45;
  letter-spacing:.04em;
}

/* 2. Navigation */
.nav{
  font-family:Arial,Helvetica,sans-serif;
  font-size:var(--type-nav);
  line-height:1.35;
  letter-spacing:0;
}

/* 3. Reading text */
.article-body,
.about-text p,
.memorial-copy p,
.home-intro p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:var(--type-body);
  line-height:1.72;
}

/* 4. Titles in lists/cards */
.text-list a,
.card-title,
.video-card h2,
.contact-box .email{
  font-family:Georgia,'Times New Roman',serif;
  font-size:var(--type-list);
  line-height:1.3;
  font-weight:400;
}

/* 5. Section/page headings */
.section-head h2,
.page-title,
.about-text h1,
.memorial-intro h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:var(--type-heading);
  line-height:1.15;
  font-weight:400;
}

/* 6. Display titles */
.article h1,
.hero-title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:var(--type-display);
  line-height:1.1;
  font-weight:400;
  letter-spacing:0;
}

/* Brand remains a quiet sans-serif wordmark rather than becoming another typographic style. */
.brand-name{
  font-family:Arial,Helvetica,sans-serif;
  font-size:34px;
  font-weight:300;
  line-height:1;
  letter-spacing:.055em;
}

/* Remove unnecessary pseudo-small uppercase feel. */
.kicker,
.hero-archive{
  text-transform:none;
  letter-spacing:.06em;
}

/* Footer is the only intentionally smaller text area. */
.footer-inner{
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1.45;
}

/* Keep older-reader accessibility on narrow screens too. */
@media(max-width:850px){
  .nav{font-size:18px}
  .article-body,
  .about-text p,
  .memorial-copy p,
  .home-intro p{font-size:19px}
}
@media(max-width:560px){
  .nav{font-size:17px}
  .article h1,
  .hero-title{font-size:36px}
  .section-head h2,
  .page-title,
  .about-text h1,
  .memorial-intro h1{font-size:32px}
  .text-list a,
  .card-title,
  .video-card h2,
  .contact-box .email{font-size:20px}
  .brand-tag,
  .kicker,
  .card-meta,
  .text-list .date,
  .text-list .cat,
  .article-meta,
  .article-back,
  .article-foot,
  .note,
  .home-caption,
  .hero-archive{font-size:14px}
}


/* V2.6 — preserve the author's original image colors.
   Only the historic start-page hero remains monochrome by design. */
.card-image,
.article-image,
.about-photo img{
  filter:none !important;
}

/* V2.8 — reserved video slots for later family-NAS material */
.video-pending{
  margin:.45rem 0 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.45;
  color:#6b6862;
}


/* V2.9 — collected review changes */

/* 1. Start page: hero, intro section and featured grid share one content axis. */
.home-hero{
  margin-left:0;
  margin-right:0;
}
.hero-caption{
  left:32px;
}

/* 2. Long texts: a more compact, book-like opening. */
.article h1{
  font-size:50px;
  margin-bottom:8px;
}
.article-meta{
  padding-bottom:20px;
  margin-bottom:26px;
}
.article-image{
  margin-bottom:24px;
}
.article-body p{
  margin:0 0 1.05em;
}

/* Imported author/subtitle/dedication/chapter lines at the beginning. */
.article-body p.body-frontmatter{
  margin:0 0 .35em;
}
.article-body p.body-frontmatter-last{
  margin-bottom:1.4em;
}

/* 3/5. Clear internal chapter/section headings:
   more space before, substantially less after. */
.article-body p.body-subhead,
.article-body h2,
.article-body h3{
  font-size:1.03em;
  line-height:1.3;
  margin:1.5em 0 .5em;
}
.article-body p.body-frontmatter.body-subhead{
  margin:.15em 0 .45em;
}
.article-body p.body-frontmatter-last.body-subhead{
  margin-bottom:1.4em;
}

@media(max-width:850px){
  .article h1{font-size:42px}
}
@media(max-width:560px){
  .home-hero{margin-left:0;margin-right:0}
  .hero-caption{left:20px}
  .article h1{font-size:37px}
}


/* V2.10 — image integration */
.article-image{
  background:transparent !important;
}

/* Optional editorial photo credits. */
.article-figure{
  margin:0 0 24px;
}
.article-figure .article-image{
  margin-bottom:0;
}
.article-caption{
  margin-top:8px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
}
