*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}:root{--color-darkest:#3d251e;--color-dark:#5b3e31;--color-medium:#765341;--color-mauve:#a08679;--color-cream:#d8cbc4;--color-white:#faf7f5;--font-heading:'Playfair Display',Georgia,serif;--font-body:'Lato','Open Sans',sans-serif;--transition-soft:all 0.4s ease-in-out;--shadow-soft:0 4px 20px rgba(61,37,30,0.12);--shadow-hover:0 8px 30px rgba(61,37,30,0.2);--color-sand:#efe7e2;--color-line:rgba(61,37,30,0.14);--color-gold:#8c6239;--measure:62ch;--petal-opacity:0.3;}html{scroll-behavior:smooth;}body{font-family:var(--font-body);color:var(--color-darkest);background-color:var(--color-white);line-height:1.7;overflow-x:hidden;}a{text-decoration:none;color:inherit;}:where(a,button,input,textarea,[tabindex]):focus-visible{outline:3px solid var(--color-medium);outline-offset:3px;border-radius:3px;}.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--color-darkest);color:var(--color-white);padding:0.75rem 1.25rem;}.skip-link:focus{left:0.5rem;top:0.5rem;}.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(250,247,245,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-cream);padding:1rem 2rem;display:flex;justify-content:center;align-items:center;gap:2.5rem;}.nav a{font-family:var(--font-body);font-size:0.95rem;font-weight:400;color:var(--color-dark);letter-spacing:0.5px;padding:0.4rem 0;border-bottom:2px solid transparent;transition:var(--transition-soft);}.nav a:hover,.nav a.active{color:var(--color-medium);border-bottom-color:var(--color-medium);}.nav-logo{font-family:var(--font-heading);font-size:1.1rem;color:var(--color-darkest);font-weight:700;}.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6rem 2rem 4rem;position:relative;background:linear-gradient(160deg,var(--color-white) 0%,var(--color-cream) 50%,var(--color-mauve) 100%);overflow:hidden;}.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(216,203,196,0.4) 0%,transparent 70%);}.hero-content{position:relative;z-index:2;transform:translateY(6%);}.hero-portrait{width:56%;max-width:272px;margin:0 auto 0.5rem;opacity:0;transform:translateY(14px);animation:fadeUp 1.6s ease-out 0.35s forwards;}.hero-portrait img{display:block;width:100%;height:auto;}.hero h1{font-size:clamp(1.26rem,3.72vw,2.64rem);line-height:1;margin-bottom:1rem;}.hero h1 .nw{height:2.394em;width:auto;vertical-align:-0.847em;overflow:visible;margin:0 0.05em;}.hero h1 .nw path{fill:var(--color-darkest);fill-opacity:0;stroke:var(--color-darkest);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:nameTrace var(--tdur) cubic-bezier(0.4,0.2,0.6,0.8) var(--td) forwards,nameFill 0.55s ease var(--fd) forwards;}@keyframes nameTrace{to{stroke-dashoffset:0;}}@keyframes nameFill{to{fill-opacity:1;}}.hero .subtitle{font-family:var(--font-heading);font-size:clamp(1.1rem,2.5vw,1.6rem);color:var(--color-medium);font-style:italic;font-weight:400;opacity:0;transform:translateY(20px);animation:fadeUp 1s ease-out 3.1s forwards;}.hero .dates{font-family:var(--font-heading);font-size:clamp(0.95rem,1.8vw,1.15rem);letter-spacing:0.08em;color:var(--color-mauve);margin-top:1rem;font-variant-numeric:tabular-nums;opacity:0;animation:fadeUp 1s ease-out 3.3s forwards;}.petals-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}.petal{position:absolute;bottom:-24px;width:12px;height:12px;background:var(--color-mauve);border-radius:50% 0 50% 50%;opacity:var(--petal-opacity);animation:floatPetal linear infinite;}@keyframes floatPetal{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:0;}10%{opacity:var(--petal-opacity);}90%{opacity:var(--petal-opacity);}100%{transform:translateY(-100vh) rotate(360deg) scale(0.5);opacity:0;}}.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.25rem;opacity:0;animation:fadeUp 1s ease-out 3.5s forwards;}.btn-primary,.btn-secondary{font-family:var(--font-body);font-size:0.95rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.95rem 2rem;border-radius:2px;border:1px solid var(--color-medium);cursor:pointer;transition:var(--transition-soft);display:inline-block;}.btn-primary{background:var(--color-medium);color:var(--color-white);}.btn-primary:hover{background:var(--color-dark);border-color:var(--color-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover);}.btn-secondary{background:transparent;color:var(--color-dark);}.btn-secondary:hover{background:rgba(118,83,65,0.08);transform:translateY(-2px);}.tbd{display:inline-block;background:repeating-linear-gradient(45deg,rgba(140,98,57,0.14),rgba(140,98,57,0.14) 6px,transparent 6px,transparent 12px);border:1px dashed var(--color-gold);border-radius:4px;padding:0.05em 0.5em;font-family:var(--font-body);font-size:0.9em;font-style:italic;color:var(--color-gold);letter-spacing:0.02em;}.band{padding:5rem 2rem;}.band--sand{background:var(--color-sand);}.band-inner{max-width:1080px;margin:0 auto;}.eyebrow{font-family:var(--font-body);font-size:0.75rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-mauve);text-align:center;margin-bottom:0.75rem;}.band h2{font-family:var(--font-heading);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:400;color:var(--color-dark);text-align:center;text-wrap:balance;margin-bottom:1rem;}.band-lede{max-width:var(--measure);margin:0 auto 3rem;text-align:center;color:var(--color-medium);text-wrap:pretty;}.arrangement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.75rem;}.arrangement{background:var(--color-white);border:1px solid var(--color-line);border-top:3px solid var(--color-medium);border-radius:3px;padding:2rem 1.9rem;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:0.65rem;}.arrangement .when{font-family:var(--font-body);font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-mauve);}.arrangement h3{font-family:var(--font-heading);font-size:1.5rem;font-weight:400;color:var(--color-dark);}.arrangement .date-line{font-family:var(--font-heading);font-size:1.15rem;color:var(--color-darkest);font-variant-numeric:tabular-nums;}.arrangement .place{color:var(--color-medium);font-size:0.95rem;line-height:1.6;}.arrangement .note{margin-top:auto;padding-top:0.9rem;border-top:1px solid var(--color-line);font-size:0.88rem;color:var(--color-mauve);font-style:italic;}.giving-target{max-width:680px;margin:0 auto 3rem;background:var(--color-white);border:1px solid var(--color-line);border-radius:3px;padding:2rem;text-align:center;box-shadow:var(--shadow-soft);}.giving-target .amount{font-family:var(--font-heading);font-size:clamp(2.4rem,7vw,3.4rem);color:var(--color-dark);line-height:1.1;font-variant-numeric:tabular-nums;}.giving-target .amount-label{font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-mauve);margin-bottom:0.4rem;}.giving-target .breakdown{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--color-line);color:var(--color-medium);font-size:0.95rem;text-wrap:pretty;}.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}.channel{background:var(--color-white);border:1px solid var(--color-line);border-radius:3px;padding:1.9rem 1.6rem;text-align:center;box-shadow:var(--shadow-soft);transition:var(--transition-soft);}.channel:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}.channel h3{font-family:var(--font-heading);font-size:1.35rem;font-weight:400;color:var(--color-dark);margin-bottom:0.75rem;}.channel .handle{font-family:var(--font-body);font-size:1.05rem;color:var(--color-darkest);word-break:break-word;display:block;margin-bottom:0.5rem;}.channel .to{font-size:0.85rem;color:var(--color-mauve);}.treasurer-note{max-width:var(--measure);margin:2.5rem auto 0;text-align:center;font-size:0.92rem;color:var(--color-medium);line-height:1.75;text-wrap:pretty;}.gallery-section{padding:5rem 2rem;max-width:1400px;margin:0 auto;}.section-title{font-family:var(--font-heading);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--color-darkest);text-align:center;margin-bottom:0.5rem;}.section-subtitle{text-align:center;color:var(--color-mauve);font-size:1rem;margin-bottom:3rem;font-style:italic;}/* .gallery-grid is now the carousel track; layout lives in .carousel-track below. */.gallery-item{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-soft);transition:var(--transition-soft);aspect-ratio:1;opacity:0;transform:scale(0.9) translateY(20px);}.gallery-item.visible{opacity:1;transform:scale(1) translateY(0);}.gallery-item:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-hover);}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}.gallery-item:hover img{transform:scale(1.05);}.gallery-item .photo-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 1rem 1rem;background:linear-gradient(transparent,rgba(61,37,30,0.7));color:white;font-size:0.85rem;opacity:0;transition:opacity 0.4s ease;}.gallery-item:hover .photo-overlay{opacity:1;}.gallery-empty{max-width:var(--measure);margin:0 auto;text-align:center;padding:3.5rem 2rem;border:1px dashed var(--color-cream);border-radius:3px;color:var(--color-mauve);font-style:italic;line-height:1.8;}.side-panel{position:fixed;top:0;right:-500px;width:450px;max-width:90vw;height:100vh;background:var(--color-white);z-index:2000;box-shadow:-5px 0 30px rgba(61,37,30,0.2);transition:right 0.5s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;padding:2rem;}.side-panel.open{right:0;}.side-panel-overlay{position:fixed;inset:0;background:rgba(61,37,30,0.4);z-index:1999;opacity:0;pointer-events:none;transition:opacity 0.4s ease;}.side-panel-overlay.open{opacity:1;pointer-events:all;}.panel-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border:none;background:var(--color-cream);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--color-dark);transition:var(--transition-soft);}.panel-close:hover{background:var(--color-mauve);color:white;}.panel-image{width:100%;border-radius:12px;margin-bottom:1.5rem;margin-top:1rem;}.panel-comments{margin-top:1.5rem;}.ticker-section{background:var(--color-cream);padding:1.5rem 0;overflow:hidden;border-top:1px solid rgba(160,134,121,0.2);}.ticker-label{text-align:center;font-family:var(--font-heading);font-size:0.95rem;color:var(--color-dark);margin-bottom:1rem;font-style:italic;}.ticker-track{display:flex;gap:3rem;animation:tickerScroll 40s linear infinite;white-space:nowrap;padding:0 2rem;}.ticker-item{flex-shrink:0;background:var(--color-white);padding:0.6rem 1.2rem;border-radius:20px;font-size:0.85rem;color:var(--color-dark);box-shadow:0 2px 8px rgba(61,37,30,0.08);}.ticker-item strong{color:var(--color-medium);}@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}.page-header{padding:8rem 2rem 3rem;text-align:center;background:linear-gradient(180deg,var(--color-cream) 0%,var(--color-white) 100%);}.page-header h1{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);color:var(--color-darkest);margin-bottom:0.8rem;text-wrap:balance;}.page-header p{color:var(--color-mauve);font-size:1.05rem;max-width:600px;margin:0 auto;font-style:italic;text-wrap:pretty;}.form-section{max-width:700px;margin:0 auto;padding:3rem 2rem;}.form-group{margin-bottom:1.8rem;position:relative;}.form-group label{display:block;font-weight:600;color:var(--color-dark);margin-bottom:0.5rem;font-size:0.95rem;}.form-group .tooltip{display:block;font-size:0.82rem;color:var(--color-mauve);font-style:italic;margin-bottom:0.5rem;}.form-group input,.form-group textarea{width:100%;padding:1rem 1.2rem;border:2px solid var(--color-cream);border-radius:10px;font-family:var(--font-body);font-size:1rem;color:var(--color-darkest);background:white;transition:var(--transition-soft);outline:none;}.form-group input:focus,.form-group textarea:focus{border-color:var(--color-mauve);box-shadow:0 0 0 3px rgba(160,134,121,0.15);}.form-group textarea{min-height:150px;resize:vertical;}.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}.submit-btn{display:inline-block;padding:1rem 2.5rem;background:var(--color-medium);color:white;border:none;border-radius:50px;font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-soft);box-shadow:var(--shadow-soft);}.submit-btn:hover{background:var(--color-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover);}.submit-btn:disabled{opacity:0.55;cursor:not-allowed;transform:none;}.form-status{margin-top:1.1rem;padding:0.9rem 1.1rem;border-radius:3px;font-size:0.92rem;line-height:1.6;display:none;}.form-status.show{display:block;}.form-status.is-working{background:rgba(160,134,121,0.14);color:var(--color-dark);}.form-status.is-error{background:rgba(140,98,57,0.12);border-left:3px solid var(--color-gold);color:var(--color-darkest);}.success-message{display:none;padding:1.5rem;background:linear-gradient(135deg,var(--color-cream),var(--color-white));border:1px solid var(--color-mauve);border-radius:12px;text-align:center;margin-top:1.5rem;animation:fadeUp 0.6s ease-out;}.success-message.show{display:block;}.success-message p{color:var(--color-dark);font-size:1.05rem;}.readonly-notice{display:none;max-width:var(--measure);margin:0 auto 2.5rem;background:var(--color-sand);border:1px solid var(--color-line);border-left:3px solid var(--color-medium);border-radius:3px;padding:1.5rem 1.75rem;color:var(--color-dark);line-height:1.75;text-wrap:pretty;}.readonly-notice.show{display:block;}.readonly-notice h3{font-family:var(--font-heading);font-weight:400;font-size:1.25rem;margin-bottom:0.5rem;}body.is-readonly .writable-only{display:none;}.tribute-feed{max-width:800px;margin:0 auto;padding:3rem 2rem 5rem;}.tribute-feed h2{font-family:var(--font-heading);font-size:1.6rem;color:var(--color-darkest);text-align:center;margin-bottom:0.75rem;}.tribute-count{text-align:center;font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-mauve);margin-bottom:2rem;}.feed-loading{text-align:center;color:var(--color-mauve);font-style:italic;}.tribute-card{background:white;border:1px solid var(--color-cream);border-radius:14px;padding:1.8rem;margin-bottom:1.5rem;box-shadow:var(--shadow-soft);opacity:0;transform:translateY(20px);animation:fadeUp 0.6s ease-out forwards;}.tribute-card .tribute-author{font-weight:700;color:var(--color-medium);font-size:1rem;margin-bottom:0.3rem;}.tribute-card .tribute-date{font-size:0.8rem;color:var(--color-mauve);margin-bottom:0.8rem;}.tribute-card .tribute-text{color:var(--color-darkest);line-height:1.7;overflow-wrap:break-word;white-space:pre-wrap;}.contact-info{max-width:700px;margin:0 auto;padding:0 2rem 3rem;text-align:center;}.contact-details{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-top:3rem;padding:2rem;background:var(--color-cream);border-radius:14px;}.contact-detail-item{text-align:center;}.contact-detail-item .detail-label{font-weight:700;color:var(--color-dark);font-size:0.9rem;margin-bottom:0.3rem;}.contact-detail-item .detail-value{color:var(--color-medium);font-size:1rem;}.footer{text-align:center;padding:3rem 2rem;background:var(--color-darkest);color:var(--color-cream);font-family:var(--font-heading);font-size:1rem;font-style:italic;}.footer .footer-meta{display:block;margin-top:0.75rem;font-size:0.82rem;opacity:0.75;}.floating-tributes-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}.floating-tribute{position:absolute;background:rgba(216,203,196,0.66);border:1px solid rgba(160,134,121,0.3);border-radius:20px;padding:0.6rem 1.1rem;max-width:220px;backdrop-filter:blur(4px);opacity:0;animation:floatTribute linear infinite;pointer-events:none;}.floating-tribute .ft-name{font-family:var(--font-heading);font-size:0.72rem;font-weight:700;color:rgba(91,62,49,0.9);margin-bottom:0.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.floating-tribute .ft-text{font-family:var(--font-body);font-size:0.7rem;color:rgba(61,37,30,0.72);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}@keyframes floatTribute{0%{opacity:0;transform:translateY(20px) translateX(0) scale(0.9);}8%{opacity:1;transform:translateY(0) translateX(0) scale(1);}50%{transform:translateY(-40vh) translateX(15px) scale(1);}92%{opacity:1;transform:translateY(-80vh) translateX(-10px) scale(1);}100%{opacity:0;transform:translateY(-90vh) translateX(5px) scale(0.9);}}@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.page{display:none;}.page.active{display:block;}@media (max-width:768px){.nav{padding:0.8rem 1rem;gap:1.2rem;flex-wrap:wrap;}.nav-logo{width:100%;text-align:center;font-size:1rem;}.side-panel{width:100%;max-width:100vw;}.hero{padding:7rem 1.5rem 3rem;}.form-section{padding:2rem 1.5rem;}.contact-details{flex-direction:column;gap:1.5rem;}.floating-tribute{max-width:160px;padding:0.5rem 0.8rem;}.floating-tribute .ft-name{font-size:0.65rem;}.floating-tribute .ft-text{font-size:0.62rem;}}@media (max-width:600px){.band{padding:3.5rem 1.25rem;}.hero-actions{flex-direction:column;align-items:stretch;}.hero h1{font-size:clamp(1.02rem,5.7vw,1.8rem);}.hero-content{transform:translateY(0);}.hero-portrait{width:64%;max-width:212px;margin-bottom:0.35rem;}}@media (max-width:480px){.nav a{font-size:0.85rem;}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}.hero h1,.hero .subtitle,.hero .dates,.hero-actions,.hero-portrait,.tribute-card{opacity:1;transform:none;}.hero h1 .nw path{animation:none;fill-opacity:1;stroke:none;stroke-dasharray:none;stroke-dashoffset:0;}.hero-content{transform:translateY(6%);}.petals-container,.floating-tributes-container{display:none;}.ticker-track{animation:none;flex-wrap:wrap;justify-content:center;white-space:normal;}}.hero-name{font-family:'Pinyon Script',cursive;font-weight:400;font-size:clamp(2.6rem,8vw,5.5rem);line-height:1.05;color:var(--color-darkest);margin-bottom:1rem;opacity:0;transform:translateY(16px);animation:fadeUp 1.4s ease-out 0.3s forwards;}@media (prefers-reduced-motion:reduce){.hero-name{opacity:1;transform:none;}}.hero h1.hero-name{font-size:clamp(2.6rem,8vw,5.5rem);line-height:1.05;}@media (max-width:600px){.hero h1.hero-name{font-size:clamp(2.2rem,11vw,3.4rem);}}.contact-form-title{font-family:var(--font-heading);font-size:clamp(1.3rem,3vw,1.7rem);font-weight:400;color:var(--color-darkest);text-align:center;margin-bottom:0.5rem;}.contact-form-lede{text-align:center;color:var(--color-medium);font-size:0.92rem;line-height:1.6;max-width:34rem;margin:0 auto 2rem;}.contact-detail-item .detail-note{font-size:0.8rem;line-height:1.5;color:var(--color-medium);margin-top:0.45rem;max-width:26rem;margin-left:auto;margin-right:auto;}.contact-details a{color:var(--color-gold);text-decoration:none;border-bottom:1px solid rgba(140,98,57,0.35);}.contact-details a:hover{border-bottom-color:var(--color-gold);}.gallery-empty a{color:var(--color-gold);text-decoration:none;border-bottom:1px solid rgba(140,98,57,0.35);}
/* ---------------------------------------------------------------------------
   Contact page: everything visible in one screen, no scrolling.

   Two problems had to be solved together.

   1. Height. The markup is three siblings -- .page-header, .contact-info and
      .form-section -- stacked vertically. On a wide screen a grid puts the
      heading and email card in a left column and the form in a right column,
      which roughly halves the stack. On a narrow screen it stays a single
      column and relies on the compact spacing below instead.

   2. The footer. It lives outside <main>, so a page that is 100svh tall still
      pushes the footer past the fold and produces a scrollbar. Fixing that
      means making the body a flex column just for this page, so <main> takes
      the space the footer does not. :has() keeps that scoped -- the home and
      tribute pages keep the normal document flow.

   Everything is scoped to #page-contact so the tribute page, which shares
   .page-header and .form-group, is untouched. The id also outranks the
   .page.active display rule, which is why swapping to grid works.
   --------------------------------------------------------------------------- */
body:has(#page-contact.active){display:flex;flex-direction:column;min-height:100svh;}
body:has(#page-contact.active) main{flex:1 0 auto;display:flex;
  background:linear-gradient(180deg,var(--color-cream) 0%,var(--color-white) 42%);}
body:has(#page-contact.active) .footer{padding:1.1rem 2rem;font-size:0.9rem;}

#page-contact.active{
  flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem 1.5rem 1rem;              /* top clears the fixed nav */
  gap:1.1rem;
}
/* The shared header carries 8rem of top padding and its own gradient for the
   tribute page; neither survives a one-screen layout. */
#page-contact .page-header{padding:0;background:none;}
#page-contact .page-header h1{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:0.4rem;}
#page-contact .page-header p{font-size:0.95rem;}

#page-contact .contact-info{padding:0;max-width:none;}
#page-contact .contact-details{margin-top:0;padding:1.15rem 1.4rem;}

#page-contact .form-section{padding:0;max-width:none;}
#page-contact .contact-form-title{font-size:clamp(1.15rem,2.4vw,1.5rem);margin-bottom:0.3rem;}
#page-contact .contact-form-lede{font-size:0.85rem;margin-bottom:1rem;}
#page-contact .form-group{margin-bottom:0.8rem;}
#page-contact .form-group label{margin-bottom:0.18rem;font-size:0.9rem;}
#page-contact .tooltip{font-size:0.78rem;margin-bottom:0.28rem;}
#page-contact input,#page-contact textarea{padding:0.6rem 1rem;font-size:0.95rem;}
#page-contact textarea{min-height:5rem;}
#page-contact .submit-btn{padding:0.7rem 2rem;font-size:0.95rem;}

@media (min-width:900px){
  #page-contact.active{
    display:grid;
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    grid-template-areas:"head form" "card form";
    align-content:center;
    column-gap:3.5rem;row-gap:1.4rem;
    max-width:1100px;margin:0 auto;width:100%;
  }
  #page-contact .page-header{grid-area:head;text-align:left;align-self:end;}
  #page-contact .page-header p{margin:0;}
  #page-contact .contact-info{grid-area:card;align-self:start;text-align:left;}
  #page-contact .contact-detail-item,
  #page-contact .contact-detail-item .detail-note{text-align:left;margin-left:0;}
  #page-contact .form-section{grid-area:form;align-self:center;}
  #page-contact .contact-form-title,
  #page-contact .contact-form-lede{text-align:left;margin-left:0;}
}

/* Phones, and any screen short enough that the guidance text is what pushes
   the send button off the fold. The field labels and placeholders already say
   what each box is for, so the italic helper lines are the first thing cut. */
@media (max-width:600px),(max-height:760px){
  #page-contact .page-header p,
  #page-contact .contact-form-lede,
  #page-contact .tooltip{display:none;}
  #page-contact .contact-detail-item .detail-note{font-size:0.75rem;}
  #page-contact textarea{min-height:4rem;}
  #page-contact .form-group{margin-bottom:0.65rem;}
  #page-contact .contact-details{padding:0.9rem 1.1rem;}
}

/* Small phones (360x640 and similar) and landscape phones. At this size the
   nav wraps to two rows and there is roughly 470px of usable height, so the
   decorative parts go: the note under the address, most of the vertical
   rhythm, and a shorter message box. The form itself stays complete. */
@media (max-height:680px){
  body:has(#page-contact.active) .footer{padding:0.8rem 1rem;font-size:0.8rem;}
  #page-contact.active{padding:4.5rem 1.1rem 0.75rem;gap:0.7rem;}
  #page-contact .page-header h1{font-size:1.45rem;margin-bottom:0.2rem;}
  #page-contact .contact-details{padding:0.75rem 1rem;}
  #page-contact .contact-detail-item .detail-note{display:none;}
  #page-contact .contact-form-title{font-size:1.05rem;margin-bottom:0.25rem;}
  #page-contact .form-group{margin-bottom:0.5rem;}
  #page-contact input,#page-contact textarea{padding:0.5rem 0.85rem;}
  #page-contact textarea{min-height:3.25rem;}
  #page-contact .submit-btn{padding:0.6rem 1.7rem;font-size:0.9rem;}
}

/* Below about 600px of viewport height there is not enough room for both a
   page title and a three-field form. The nav already marks Contact as the
   current page, so the heading is the thing that goes. Shorter than roughly
   520px -- a phone held in landscape -- the page will scroll, which is the
   right answer there rather than shrinking the form until it is unusable. */
@media (max-height:600px){
  #page-contact .page-header{display:none;}
  #page-contact.active{padding:3.9rem 1rem 0.45rem;gap:0.5rem;}
  #page-contact textarea{min-height:2.75rem;}
  body:has(#page-contact.active) .footer{padding:0.65rem 1rem;font-size:0.75rem;}
}

/* ---------------------------------------------------------------------------
   Contributors page.

   A badge is three layers stacked in one box:
     .badge-wings    the shared wings image (src/wings.webp), one file for all
     .badge-plate    the gold-framed name plate, a <use> of the path defined
                     once in the document head
     .badge-caption  the name itself, as real text over the plate

   The name is kept as text rather than drawn into the artwork so it wraps,
   stays selectable and searchable, and scales with the reader's font size.

   The wings were reduced by 20% on request: the badge box shrank by a fifth
   and the plate's share of it grew by a quarter, so the plate is the same size
   on screen as before while the wings around it are smaller.
   --------------------------------------------------------------------------- */
.plate-defs{position:absolute;width:0;height:0;overflow:hidden;}

.contributors-section{max-width:1100px;margin:0 auto;padding:1rem 2rem 5rem;}
.contributor-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 1rem;}
.contributors-empty{text-align:center;color:var(--color-mauve);font-style:italic;
  padding:2.5rem 1rem;line-height:1.7;}

.badge{
  position:relative;margin:0;
  width:clamp(8.4rem,14.7vw,10.65rem);   /* 30% smaller again on request */
  aspect-ratio:469/205;                  /* the wing image's own proportions */
  opacity:0;transform:translateY(12px);
  animation:fadeUp 0.7s ease-out forwards;
}
.badge-wings{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}

/* The plate and the caption share one anchor point, a little below centre,
   which is where the two wings meet. */
.badge-plate,.badge-caption{
  position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);
}
.badge-plate{width:58%;height:auto;overflow:visible;z-index:2;
  filter:drop-shadow(0 2px 5px rgba(61,37,30,0.16));}
.badge-plate use:first-child{fill:var(--color-sand);stroke:url(#goldband);
  stroke-width:9;stroke-linejoin:round;}   /* thicker in viewBox units so the
     band keeps its weight now that the plate renders smaller on screen */
.badge-plate use:last-child{fill:none;stroke:url(#goldband);
  stroke-width:2;stroke-linejoin:round;}

.badge-caption{z-index:3;width:41%;   /* the plate's flat interior is only
     about 70% of its bounding box -- the shoulder scrolls eat the rest, so
     the text box has to stay inside that, not inside the whole plate */
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;}
.badge-name{font-family:var(--font-heading);font-size:0.72rem;line-height:1.15;
  overflow-wrap:break-word;
  color:var(--color-darkest);text-wrap:balance;}
.badge-note{font-family:var(--font-body);font-size:0.58rem;font-style:italic;
  color:var(--color-medium);margin-top:0.1rem;}

@media (max-width:600px){
  .contributors-section{padding:0.5rem 1rem 3rem;}
  .contributor-grid{gap:1.25rem 1rem;}
  .badge{width:min(12rem,66vw);}
}
@media (prefers-reduced-motion:reduce){
  .badge{opacity:1;transform:none;animation:none;}
}

/* Character counter under the tribute textarea (129/250). Sits at the
   box's bottom-right; turns firm when the cap is reached. */
.form-group .char-count{text-align:right;font-size:0.78rem;color:var(--color-mauve);margin-top:0.3rem;font-variant-numeric:tabular-nums;}
.form-group .char-count.is-full{color:var(--color-gold);font-weight:700;}

/* ---------------------------------------------------------------------------
   Photo carousel. Five slots across the viewport; the mask on .carousel-viewport
   is what fades the outer two slots, so whichever photos happen to be at the
   edges dissolve instead of being cut off. Three slots on narrow screens, with
   only the centre one at full strength. .is-static (three photos or fewer)
   turns all of it off and just centres the row.
   --------------------------------------------------------------------------- */
.gallery-carousel{position:relative;max-width:1250px;margin:0 auto;padding:0 3.25rem;}
.carousel-viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 19%,#000 81%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 19%,#000 81%,transparent 100%);}
.carousel-track{display:flex;transition:transform 0.6s ease;will-change:transform;}
.carousel-track .gallery-item{flex:0 0 20%;min-width:0;margin:0;box-sizing:border-box;
  border:0.5rem solid transparent;background-clip:padding-box;}

.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--color-cream);
  background:rgba(250,247,245,0.9);color:var(--color-dark);font-size:1rem;
  cursor:pointer;transition:var(--transition-soft);box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;}
.carousel-btn:hover{background:var(--color-medium);color:var(--color-white);border-color:var(--color-medium);}
.carousel-prev{left:0;}
.carousel-next{right:0;}

/* three photos or fewer: a centred row, nothing moves, nothing fades */
.gallery-carousel.is-static{padding:0;}
.gallery-carousel.is-static .carousel-viewport{-webkit-mask-image:none;mask-image:none;}
.gallery-carousel.is-static .carousel-track{justify-content:center;transform:none !important;}
.gallery-carousel.is-static .carousel-track .gallery-item{flex-basis:min(20rem,30%);}
.gallery-carousel.is-static .carousel-btn{display:none;}

@media (max-width:900px){
  .gallery-carousel{padding:0 2.5rem;}
  .carousel-track .gallery-item{flex-basis:33.333%;border-width:0.35rem;}
  .carousel-viewport{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 70%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 70%,transparent 100%);}
  .gallery-carousel.is-static .carousel-track .gallery-item{flex-basis:min(14rem,45%);}
}
@media (prefers-reduced-motion:reduce){
  .carousel-track{transition:none;}
}