:root{--paper:#f4efe4;--paper-light:#fbf8f1;--ink:#3c332d;--muted:#74695f;--rule:#a99c8e;--shadow:rgba(47,40,34,.18)}
*{box-sizing:border-box} body{margin:0;color:var(--ink);background:linear-gradient(180deg,var(--paper-light),var(--paper));font-family:Georgia,"Times New Roman",serif} a{color:inherit}
.site-header{border-bottom:1px solid rgba(92,80,69,.28);background:rgba(248,244,235,.95);position:sticky;top:0;z-index:20}
.header-inner{max-width:1180px;margin:0 auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.site-name{text-decoration:none;font-size:clamp(1.2rem,2vw,1.65rem);font-weight:700;white-space:nowrap}
.main-nav{display:flex;flex-wrap:wrap;gap:24px;justify-content:flex-end}.main-nav a{text-decoration:none;padding-bottom:5px;border-bottom:1px solid transparent}.main-nav a.active,.main-nav a:hover{border-bottom-color:currentColor}
.page-hero{max-width:1180px;margin:0 auto;padding:46px 24px 20px;text-align:center}.banner{text-transform:uppercase;letter-spacing:.07em}
.banner-primary{display:flex;justify-content:center;align-items:baseline;gap:clamp(20px,4vw,55px);font-size:clamp(2.4rem,5.7vw,5rem);line-height:1}
.banner-to{text-transform:lowercase;font-style:italic;letter-spacing:0;font-size:.62em}.banner-secondary{font-size:clamp(1.15rem,2.4vw,2rem)}
.ornament{display:flex;align-items:center;gap:8px;width:min(815px,82%);margin:16px auto;color:var(--muted)}.ornament span{height:1px;background:var(--rule);flex:1}.ornament b{font-weight:400}
.feature-layout{max-width:1250px;margin:10px auto 30px;padding:0 24px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(340px,620px) minmax(150px,1fr);gap:24px;align-items:stretch}
.heritage-image-panel{min-height:650px;overflow:hidden}.heritage-image-panel img{width:100%;height:100%;min-height:650px;object-fit:cover;display:block}
.family-figure{margin:0}.family-figure img,.gallery-card img,.inline-photo img{display:block;width:100%;height:auto;border:6px solid rgba(255,255,255,.92);box-shadow:0 8px 22px var(--shadow)}
figcaption{text-align:center;padding-top:14px}.names{font-size:clamp(1.5rem,2.5vw,2rem)}.names span{color:var(--muted);padding:0 12px}.caption-note{margin-top:6px;color:var(--muted);font-style:italic}
.content-card{max-width:860px;margin:20px auto 60px;padding:0 28px;text-align:center}.content-card.wide{max-width:1080px}.content-card.narrow{max-width:820px}
.content-card h1{margin:0 0 18px;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:500}.lead{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.65}
.photo-gallery{display:grid;grid-template-columns:1.25fr .8fr;gap:26px;align-items:start;margin-top:34px}.gallery-card{margin:0}.gallery-card figcaption strong{display:block;font-size:1.22rem;margin-bottom:4px}.gallery-card figcaption span{color:var(--muted)}
.inline-photo{max-width:760px;margin:30px auto 0}.contact-email{font-size:1.35rem;font-weight:700}.ellis-panorama img{display:block;width:100%;max-height:220px;object-fit:cover}
footer{text-align:center;padding:38px 20px 48px;border-top:1px solid rgba(92,80,69,.23);letter-spacing:.15em;font-size:.86rem}footer small{display:block;margin-top:12px;color:var(--muted);letter-spacing:.04em}
@media(max-width:900px){.header-inner{flex-direction:column;gap:14px}.main-nav{justify-content:center}.feature-layout{grid-template-columns:1fr}.heritage-image-panel{display:none}.family-figure{max-width:620px;margin:0 auto}.photo-gallery{grid-template-columns:1fr;max-width:700px;margin-left:auto;margin-right:auto}}
@media(max-width:560px){.site-header{position:static}.page-hero{padding:34px 15px 14px}.banner-primary{flex-wrap:wrap;gap:7px 16px}.banner-primary .banner-to{width:100%}}


/* Version 13: restrained heritage color test */
:root {
  --paper: #f3ead8;
  --paper-light: #fbf7ee;
  --ink: #3d352f;
  --muted: #72695f;
  --rule: #9d8a78;
  --olive: #59624a;
  --burgundy: #7a433b;
  --bluegray: #6b7a7f;
  --shadow: rgba(47, 40, 34, 0.18);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.68), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.38), transparent 28%),
    linear-gradient(180deg, var(--paper-light), var(--paper));
}

.site-header {
  background: rgba(247, 241, 229, 0.96);
  border-bottom-color: rgba(89,98,74,.28);
}

.site-name {
  color: var(--olive);
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a.active {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

.banner-primary {
  color: var(--olive);
}

.banner-primary .banner-to,
.banner-secondary .banner-to {
  color: var(--burgundy);
}

.banner-secondary {
  color: var(--bluegray);
}

.ornament {
  color: var(--burgundy);
}

.ornament span {
  background: color-mix(in srgb, var(--olive) 60%, transparent);
}

.content-card h1 {
  color: var(--olive);
}

.caption-note,
.gallery-card figcaption span,
footer small {
  color: var(--muted);
}

.contact-email a {
  color: var(--burgundy);
}

footer {
  border-top-color: rgba(89,98,74,.24);
}

/* Keep historic photographs themselves monochrome */
.family-figure img,
.gallery-card img,
.inline-photo img {
  filter: grayscale(100%);
}


/* Version 15: remove blank space below footer/panorama image */
.ellis-panorama {
  margin-bottom: 0;
}

.ellis-panorama img {
  margin-bottom: 0;
  vertical-align: bottom;
}

/* Home page footer is empty after prior removals, so do not reserve space for it. */
body:has(.ellis-panorama) footer:empty {
  display: none;
}

/* Also collapse any footer containing only whitespace. */
footer {
  min-height: 0;
}


.photo-credit{margin-top:4px;color:var(--muted);font-size:.92rem;font-style:italic}

.gallery-card figcaption .photo-credit{display:block;margin-top:5px}


/* VERSION 25 — improved phone/tablet layout
   Desktop layout remains unchanged. */

@media (max-width: 900px) {
  .feature-layout {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 680px;
    padding: 0 18px;
  }

  /* Family photograph remains the main feature and spans both columns. */
  .feature-layout .family-figure {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 620px;
    margin: 0 auto 8px;
  }

  /* Restore the Breno and Ellis Island artwork instead of hiding it. */
  .feature-layout .heritage-image-panel {
    display: block;
    min-height: 0;
    height: 245px;
    overflow: hidden;
  }

  .feature-layout .heritage-image-panel:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .feature-layout .heritage-image-panel:last-child {
    grid-column: 2;
    grid-row: 2;
  }

  .feature-layout .heritage-image-panel img {
    width: 100%;
    height: 245px;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }

  .content-card {
    margin-top: 28px;
    margin-bottom: 42px;
  }

  .ellis-panorama img {
    max-height: 175px;
  }
}

@media (max-width: 560px) {
  .header-inner {
    padding: 16px 12px;
  }

  .site-name {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .main-nav {
    width: 100%;
    justify-content: center;
    gap: 11px 16px;
  }

  .main-nav a {
    font-size: .92rem;
  }

  .page-hero {
    padding: 28px 12px 12px;
  }

  .banner-primary {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .banner-secondary {
    font-size: clamp(1rem, 5vw, 1.35rem);
    line-height: 1.4;
  }

  .feature-layout {
    padding: 0 10px;
    gap: 9px;
  }

  .family-figure img {
    border-width: 4px;
  }

  .names {
    font-size: 1.45rem;
  }

  .caption-note {
    font-size: .92rem;
    line-height: 1.4;
  }

  .photo-credit {
    font-size: .86rem;
  }

  .feature-layout .heritage-image-panel {
    height: 190px;
  }

  .feature-layout .heritage-image-panel img {
    height: 190px;
  }

  .content-card {
    padding: 0 18px;
  }

  .content-card h1 {
    letter-spacing: .13em;
  }

  .lead {
    font-size: 1.05rem;
  }

  /* Photos page becomes a clean single-column gallery on phones. */
  .photo-gallery {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ellis-panorama img {
    max-height: 145px;
  }
}

@media (max-width: 380px) {
  .feature-layout .heritage-image-panel,
  .feature-layout .heritage-image-panel img {
    height: 155px;
  }

  .main-nav {
    gap: 9px 12px;
  }

  .main-nav a {
    font-size: .86rem;
  }
}


/* VERSION 26 — White + Italian terracotta color experiment */
:root {
  --paper: #f8f6f1;
  --paper-light: #ffffff;
  --ink: #3f3833;
  --muted: #776c64;
  --rule: #c8b7a9;
  --olive: #79503e;
  --burgundy: #9a4f36;
  --bluegray: #785545;
  --terracotta: #a65337;
  --terracotta-dark: #7e3f2d;
  --terracotta-light: #c98264;
  --shadow: rgba(64, 49, 41, .14);
}

body {
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.98), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 55%, #f5f1eb 100%);
}

.site-header {
  background: rgba(255,255,255,.97);
  border-bottom: 2px solid rgba(166,83,55,.22);
}

.site-name {
  color: var(--terracotta-dark);
}

.main-nav a {
  color: #4b4039;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a.active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.banner-primary {
  color: var(--terracotta-dark);
}

.banner-primary .banner-to,
.banner-secondary .banner-to {
  color: var(--terracotta);
}

.banner-secondary {
  color: #6d5549;
}

.ornament {
  color: var(--terracotta);
}

.ornament span {
  background: rgba(166,83,55,.38);
}

.content-card h1 {
  color: var(--terracotta-dark);
}

.family-figure img,
.gallery-card img,
.inline-photo img {
  border-color: #ffffff;
  box-shadow: 0 7px 22px rgba(78,55,43,.16);
}

.caption-note,
.photo-credit,
.gallery-card figcaption span {
  color: #75675e;
}

.contact-email a {
  color: var(--terracotta-dark);
}

footer {
  border-top-color: rgba(166,83,55,.22);
}

.italian-names{margin-top:4px;font-size:clamp(1.15rem,2vw,1.55rem);color:var(--terracotta-dark);font-style:italic}
.italian-names span{color:var(--muted);padding:0 12px}
@media(max-width:560px){.italian-names{font-size:1.12rem}.italian-names span{padding:0 7px}}


/* VERSION 29 — keep portrait placeholders visually identical in size to Carlo & Isabelle */
.gallery-card img[src*="carlo-isabelle-1929"],
.gallery-card img[src*="photo-placeholder"] {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  display: block;
}