/* =========================================================
 Elliottonians.com - site-wide stylesheet
 School colours: crimson red, black, gold - on a warm
 parchment background so the colours accent rather than
 overpower the page.
 ========================================================= */

:root{
 --ink:#211c17;
 --parchment:#faf5ea;
 --parchment-dim:#f1e9d8;
 --crimson:#7a1f2b;
 --crimson-dark:#5c161f;
 --black:#17140f;
 --gold:#a9812f;
 --gold-light:#d4b96a;
 --gold-pale:#f0e2b8;
 --max:1140px;
 --radius:6px;
 --shadow:0 10px 30px rgba(23,20,15,0.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
 margin:0;
 background:var(--parchment);
 color:var(--ink);
 font-family:'Lora',Georgia,serif;
 font-size:1.08rem;
 line-height:1.7;
}
h1,h2,h3{
 font-family:'Playfair Display',Georgia,serif;
 color:var(--crimson-dark);
 line-height:1.2;
 margin:0 0 0.5em;
}
a{color:var(--crimson-dark);text-decoration-color:var(--gold);text-underline-offset:3px;}
a:hover, a:focus{color:var(--gold);}
a:focus-visible, button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem;}

/* Skip link */
.skip-link{
 position:absolute;left:-9999px;top:0;background:var(--gold-light);color:var(--black);
 padding:0.75rem 1.25rem;z-index:1000;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0;}

/* Header */
header.site-header{
 background:var(--black);
 border-bottom:4px solid var(--gold);
}
.header-inner{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:1rem;padding:1.1rem 1.5rem;
}
.brand{
 display:flex;align-items:center;gap:0.9rem;
 text-decoration:none;
}
.brand-logo{
 width:72px;height:72px;flex:none;
 object-fit:contain;
}
.brand-text{color:var(--parchment);}
.brand-text .school{
 display:block;font-family:'Playfair Display',serif;font-weight:700;font-size:1.25rem;color:var(--parchment);
}
.brand-text .tagline{
 display:block;font-size:0.82rem;letter-spacing:0.04em;color:var(--gold-light);
}

nav.primary-nav ul{
 list-style:none;display:flex;flex-wrap:wrap;gap:0.3rem;margin:0;padding:0;
}
nav.primary-nav a{
 display:inline-block;color:var(--parchment);text-decoration:none;
 padding:0.55rem 0.9rem;border-radius:var(--radius);font-size:0.98rem;letter-spacing:0.02em;
 border-bottom:2px solid transparent;
}
nav.primary-nav a:hover, nav.primary-nav a:focus{
 color:var(--gold-light);border-bottom-color:var(--gold);
}

/* Hero - welcome text on top, full-width slideshow underneath */
.hero{
 background:var(--parchment-dim);
 border-bottom:1px solid var(--gold-pale);
 padding:2.5rem 0 2.5rem;
}
.hero-inner{
 display:flex;
 flex-direction:column;
 gap:1.9rem;
}

.hero-welcome h1{
 font-size:clamp(1.7rem,3vw,2.3rem);
 margin-bottom:0.4em;
 text-align:center;
}
.hero-welcome .lede{
 font-size:1.08rem;color:var(--ink);
 width:100%;
 max-width:none;
}
.giving-badge{
 display:inline-block;margin-top:1.1rem;
}
.giving-badge img{
 max-width:220px;border-radius:var(--radius);box-shadow:0 4px 14px rgba(23,20,15,0.15);
}

/* Slideshow - full width of the container, letterbox banner style */
.slideshow{
 position:relative;
 width:100%;
 aspect-ratio:32/15;
 border:5px solid var(--gold);
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 overflow:hidden;
 background:var(--black);
}
@media (max-width:700px){
 .slideshow{aspect-ratio:4/3;}
}
.slide{
 position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;
}
.slide.is-active{opacity:1;}
.slide img{width:100%;height:100%;object-fit:cover;}
.slide-caption{
 position:absolute;left:0;right:0;top:0;
 background:linear-gradient(to bottom, rgba(23,20,15,0.88), rgba(23,20,15,0));
 color:var(--parchment);
 padding:1.2rem 1rem 2.5rem;
 text-align:center;
}
.slide-caption h2{
 color:var(--gold-light);font-size:1.5rem;margin:0 0 0.15em;
}
.slide-caption p{margin:0;font-size:1.2rem;color:var(--parchment-dim);}
.slide-dots{
 position:absolute;top:0.6rem;right:0.6rem;display:flex;gap:0.35rem;
}
.slide-dots button{
 width:9px;height:9px;border-radius:50%;border:1px solid var(--gold-light);
 background:rgba(23,20,15,0.4);padding:0;cursor:pointer;
}
.slide-dots button.is-active{background:var(--gold-light);}

/* Section headings */
.section{padding:2.75rem 0;}
.section-band{background:var(--parchment);}
.section-band.alt{background:var(--parchment-dim);}
.section h2.section-title{
 font-size:1.5rem;
 border-bottom:2px solid var(--gold);
 padding-bottom:0.4rem;
 margin-bottom:0.2rem;
 display:inline-block;
}
.section-title.centered{
 display:block;
 text-align:center;
 border-bottom:none;
 margin-bottom:0.1rem;
}
.section-subtitle{
 text-align:center;
 color:var(--ink);
 opacity:0.75;
 font-size:0.92rem;
 margin:0 0 1.3rem;
}

.prose p{margin:0 0 1.05em;}
.prose{max-width:78ch;}

.notice{
 background:var(--gold-pale);
 border-left:4px solid var(--gold);
 border-radius:0 var(--radius) var(--radius) 0;
 padding:1rem 1.3rem;
 font-size:0.98rem;
 margin-top:1.2rem;
}

/* Photo gallery grid - click a photo to flip and reveal its story */
.gallery-grid{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;
 margin-top:1.5rem;
}
.gallery-card{
 position:relative;display:block;width:100%;aspect-ratio:4/3;
 background:var(--black);border:none;padding:0;cursor:pointer;
 border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.gallery-card-photo{
 position:absolute;inset:0;
 transition:opacity 0.25s ease;
}
.gallery-card-photo picture, .gallery-card-photo img{
 width:100%;height:100%;object-fit:contain;display:block;
}
.gallery-card-caption{
 position:absolute;inset:0;
 background:var(--crimson-dark);
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;padding:1.3rem;
 opacity:0;pointer-events:none;
 transition:opacity 0.25s ease;
}
.gallery-card:hover .gallery-card-photo,
.gallery-card.is-flipped .gallery-card-photo{opacity:0;}
.gallery-card:hover .gallery-card-caption,
.gallery-card.is-flipped .gallery-card-caption{opacity:1;pointer-events:auto;}
.cap-inner{display:flex;flex-direction:column;gap:0.5rem;}
.cap-title{
 font-family:'Playfair Display',Georgia,serif;
 color:var(--gold-light);font-size:1.1rem;
}
.cap-text{color:var(--parchment);font-size:0.95rem;line-height:1.45;}
.flip-back-icon{
 margin-top:1rem;width:36px;height:36px;border-radius:50%;
 background:var(--parchment);
 position:relative;
}
.flip-back-icon::before{
 content:"";position:absolute;inset:9px;
 border:2px solid var(--crimson-dark);border-radius:3px;
}
.flip-back-icon::after{
 content:"";position:absolute;top:12px;left:15px;
 width:6px;height:6px;border-radius:50%;background:var(--crimson-dark);
}

/* Links + Sponsor two-column layout */
.links-sponsor-grid{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;
 align-items:start;
}
.links-col, .sponsor-col{text-align:center;}
.links-list{
 list-style:none;margin:0;padding:0;
 display:flex;flex-direction:column;gap:1.4rem;
}
.links-list a{
 text-decoration:none;font-weight:700;color:var(--crimson-dark);
 font-size:1.05rem;letter-spacing:0.02em;
}
.links-list a:hover, .links-list a:focus{color:var(--gold);}
.sponsor-col img{
 max-width:460px;width:100%;margin:0 auto;border-radius:var(--radius);box-shadow:var(--shadow);
}

/* Search banner */
.search-banner{
 text-align:center;margin-top:2.5rem;padding-top:2rem;
 border-top:1px solid var(--gold-pale);
}
.search-banner a{
 display:inline-flex;flex-direction:column;align-items:center;gap:0.8rem;
 text-decoration:none;
}
.search-banner img{max-width:70px;margin:0 auto;}
.search-banner span{
 font-weight:700;color:var(--crimson-dark);font-size:1.05rem;
 max-width:60ch;letter-spacing:0.01em;
}
.search-banner a:hover span, .search-banner a:focus span{color:var(--gold);}

/* Footer */
footer.site-footer{
 background:var(--black);color:var(--parchment-dim);
 border-top:4px solid var(--gold);
 padding:1.6rem 0;font-size:0.9rem;
}
footer.site-footer a{color:var(--gold-light);}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;}

.back-to-top-btn{
 display:inline-block;
 background:var(--crimson-dark);color:var(--parchment) !important;
 font-weight:700;text-decoration:none;
 padding:0.65rem 1.4rem;border-radius:var(--radius);
 letter-spacing:0.03em;
}
.back-to-top-btn:hover, .back-to-top-btn:focus{background:var(--gold);color:var(--black) !important;}

@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto;}
 .slide{transition:none;}
}

/* Search page */
.search-box-area{
 max-width:800px;margin:1.5rem auto 2rem;
}
.gcse-search-wrap{
 background:var(--parchment-dim);
 border:1px solid var(--gold-pale);
 border-radius:var(--radius);
 padding:1.5rem;
 margin:1.3rem 0;
}
/* Let Google's own widget styling render undisturbed - our page-wide
   rules (fonts, box-sizing, image resets) were leaking in and
   squashing its icons and layout. */
.gcse-search-wrap *{
 all: revert;
}
.search-seek-image{
 width:100%;max-width:100%;margin:1.5rem auto 0;border-radius:var(--radius);display:block;
}

/* Recollections page */
.recollections-content{
 max-width:78ch;margin:2rem auto 0;
}
.recollections-content h3{
 font-family:'Playfair Display',Georgia,serif;
 color:var(--crimson-dark);
 font-size:1.3rem;
 margin:2.2rem 0 0.6rem;
 padding-bottom:0.3rem;
 border-bottom:2px solid var(--gold-pale);
}
.recollections-content h3:first-child{margin-top:0;}
.recollections-content p{
 margin:0 0 1rem;
}
.recollections-content img{
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 margin:1rem 0;
}
.recollections-content strong{color:var(--crimson-dark);}

/* Publications page */
.page-icon-wrap{text-align:center;margin-bottom:1.2rem;}
.page-icon-large{width:50%;max-width:600px;height:auto;margin:0 auto;}
.publications-grid{
 list-style:none;margin:2rem 0 0;padding:0;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0.9rem;
}
.publications-grid li{
 background:var(--parchment-dim);
 border:1px solid var(--gold-pale);
 border-radius:var(--radius);
}
.publications-grid a{
 display:block;padding:0.9rem 1.1rem;
 text-decoration:none;font-weight:600;color:var(--crimson-dark);
 font-size:1.15rem;line-height:1.35;
}
.publications-grid a:hover, .publications-grid a:focus{
 color:var(--gold);
}
.instructions-image{
 width:100%;max-width:700px;display:block;margin:1rem auto;
 border-radius:var(--radius);box-shadow:var(--shadow);
}

/* Click-to-enlarge image overlay */
.image-zoom-trigger{
 display:block;width:100%;background:none;border:none;padding:0;cursor:zoom-in;
 text-align:center;font-family:inherit;
}
.image-zoom-trigger .zoom-hint{
 display:inline-block;margin-top:0.5rem;font-size:0.9rem;font-weight:700;
 color:var(--crimson-dark);
}
.image-zoom-trigger:hover .zoom-hint, .image-zoom-trigger:focus .zoom-hint{color:var(--gold);}

.image-zoom-overlay{
 position:fixed;inset:0;background:rgba(23,20,15,0.92);
 display:flex;align-items:center;justify-content:center;
 z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.2s ease;
 padding:2rem;
}
.image-zoom-overlay.is-open{opacity:1;pointer-events:auto;}
.image-zoom-overlay-img{max-width:95vw;max-height:90vh;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.image-zoom-close{
 position:absolute;top:1.2rem;right:1.5rem;
 background:var(--crimson-dark);color:var(--parchment);border:none;
 width:44px;height:44px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;
}
.image-zoom-close:hover{background:var(--gold);color:var(--black);}

/* Video page */
.video-embed{
 position:relative;width:100%;max-width:1050px;margin:0 auto;
 aspect-ratio:16/9;
 border:5px solid var(--gold);border-radius:var(--radius);
 box-shadow:var(--shadow);overflow:hidden;background:var(--black);
}
.video-embed iframe{
 position:absolute;inset:0;width:100%;height:100%;border:none;
}

/* Timeline / long-article pages with floated images */
.timeline-content p{margin:0 0 1.1rem;}
.timeline-content strong{color:var(--crimson-dark);}
.timeline-image{
 float:right;width:320px;max-width:45%;height:auto;
 margin:0 0 1rem 1.5rem;
 border-radius:var(--radius);
 box-shadow:var(--shadow);
}
@media (max-width:600px){
 .timeline-image{float:none;width:100%;max-width:100%;margin:0 0 1rem;display:block;}
}

/* Reference index grid */
.reference-grid{
 list-style:none;margin:2rem 0 0;padding:0;
 display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;
}
@media (max-width:900px){
 .reference-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:650px){
 .reference-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:400px){
 .reference-grid{grid-template-columns:1fr;}
}
.reference-card{
 background:var(--black);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.reference-card a{display:block;text-decoration:none;}
.reference-card img{
 width:100%;height:190px;object-fit:contain;background:var(--black);
 border-bottom:3px solid var(--gold);
 display:block;
}
.reference-card span{
 display:block;padding:0.8rem 0.9rem 0.2rem;text-align:center;
 color:var(--gold-light);font-weight:700;font-size:1rem;line-height:1.3;
}
.reference-card-desc{
 display:block;padding:0.3rem 0.9rem 0.9rem;text-align:center;
 color:var(--parchment-dim);font-weight:400;font-size:0.85rem;line-height:1.4;
 font-family:'Lora',Georgia,serif;
}
.reference-card:hover span, .reference-card a:focus span{color:var(--parchment);}

/* Notable people list pages */
.people-list{margin-top:1rem;}
.person-entry{
 padding:1.8rem 0;
 border-bottom:1px solid var(--gold-pale);
}
.person-entry:first-child{padding-top:0.5rem;}
.person-entry h3{
 font-family:'Playfair Display',Georgia,serif;
 color:var(--crimson-dark);
 font-size:1.35rem;
 margin:0 0 0.2rem;
}
.person-entry .person-meta{
 color:var(--ink);opacity:0.75;font-size:0.92rem;
 margin:0 0 0.8rem;font-style:italic;
}
.person-entry .person-bio p{margin:0 0 1rem;}
.person-images{
 display:flex;flex-wrap:wrap;gap:0.8rem;
 margin:0.8rem 0 1.2rem;
}
.person-images .timeline-image{
 float:none;width:auto;height:150px;max-width:100%;
 object-fit:cover;margin:0;
 border-radius:var(--radius);box-shadow:var(--shadow);
}
@media (max-width:600px){
 .person-images .timeline-image{height:130px;}
}

/* Ship page */
.ship-content p{margin:0 0 1.1rem;}
.ship-image-full{
 width:100%;display:block;margin:1.5rem 0;
 border-radius:var(--radius);box-shadow:var(--shadow);
}
.ship-image-scan{
 width:70%;display:block;margin:1.5rem auto;
 border-radius:var(--radius);box-shadow:var(--shadow);
}
@media (max-width:600px){
 .ship-image-scan{width:100%;}
}

/* People-list search box and mid-list back-to-top links */
.person-search-wrap{
 max-width:500px;margin:1.5rem 0 0.5rem;
}
.person-search-input{
 width:100%;padding:0.75rem 1rem;
 font-family:'Lora',Georgia,serif;font-size:1.05rem;
 border:1px solid var(--gold-pale);border-radius:var(--radius);
 background:var(--parchment-dim);color:var(--ink);
}
.person-search-input:focus{
 outline:2px solid var(--gold);outline-offset:1px;
}
.person-search-count{
 display:block;margin:0.5rem 0 0;font-size:0.9rem;color:var(--ink);opacity:0.75;
}
.mid-list-top{
 text-align:center;padding:1.2rem 0;
 border-bottom:1px solid var(--gold-pale);
}

/* Photo-essay style galleries (full-width image, caption below, repeat) */
.gallery-essay p{margin:0 0 1.5rem;}
.gallery-full-image{
 width:100%;display:block;margin:1rem 0;
 border-radius:var(--radius);box-shadow:var(--shadow);
}
.gallery-essay-subhead{
 font-family:'Playfair Display',Georgia,serif;
 color:var(--crimson-dark);font-weight:700;font-size:1.15rem;
 margin:2rem 0 1rem;
}
.gallery-image-narrow{
 width:60%;max-width:400px;margin:1rem auto;
}
.gallery-image-inset{
 width:90%;margin:1rem auto;
}

/* Form Pictures year index */
.year-grid{
 list-style:none;margin:2.5rem 0 0;padding:0;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1rem;
 max-width:900px;margin-left:auto;margin-right:auto;
}
.year-card a{
 display:block;text-align:center;padding:1rem 0.5rem;
 background:var(--black);border-radius:var(--radius);box-shadow:var(--shadow);
 color:var(--gold-light);font-family:'Playfair Display',Georgia,serif;
 font-weight:700;font-size:1.15rem;text-decoration:none;
}
.year-card a:hover, .year-card a:focus{color:var(--parchment);}

/* Private reunion page */
.reunion-content{max-width:1000px;margin:0 auto;}
.reunion-event-heading{
 font-family:'Playfair Display',Georgia,serif;
 color:var(--crimson-dark);text-align:center;
 font-size:1.5rem;
 margin:2.8rem 0 1rem;
 padding-bottom:0.5rem;
 border-bottom:2px solid var(--gold);
}
.reunion-intro{
 text-align:center;max-width:75ch;margin:0 auto 1.5rem;
 color:var(--ink);
}
.reunion-intro-photos{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;
 margin:1.5rem 0 2rem;
}
.reunion-intro-photo img{
 width:100%;border-radius:var(--radius);box-shadow:var(--shadow);
 display:block;margin-bottom:0.6rem;
}
.reunion-intro-photo p{
 text-align:center;font-weight:600;color:var(--crimson-dark);margin:0;
}
.attendee-grid{
 list-style:none;margin:1.5rem 0 2rem;padding:0;
 display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
}
@media (max-width:700px){
 .attendee-grid{grid-template-columns:repeat(2,1fr);}
}
.attendee-card img{
 width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--black);
 border-radius:var(--radius);box-shadow:var(--shadow);
 display:block;margin-bottom:0.5rem;
}
.attendee-card span{
 display:block;text-align:center;font-size:0.9rem;font-weight:600;color:var(--crimson-dark);
}
.day-photos-grid{
 display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;
 margin:1.5rem 0 2rem;
}
@media (max-width:600px){
 .day-photos-grid{grid-template-columns:1fr;}
}
.day-photos-grid img{
 width:100%;border-radius:var(--radius);box-shadow:var(--shadow);display:block;
}