/* ============================= */
/* TOKENS                         */
/* ============================= */
:root{
  --paper:        #F3EEE3;
  --paper-soft:   #FAF7F0;
  --ink:          #2A241D;
  --ink-soft:     #5C5347;
  --stone:        #E0D8C8;
  --stone-line:   #CFC2A6;
  --gold:         #B8863C;
  --gold-deep:    #93681F;
  --blue-whisper: #7C97A6;
  --on-photo:     #FBF7EF;
  --radius: 2px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ============================= */
/* BASE                           */
/* ============================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,figure{ margin:0; }
a{ color:inherit; }
div a {
  color: gold;
}

img{ max-width:100%; display:block; }
.eyebrow{
  font-style:normal;
  font-size:1rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.rule{
  width:60px; height:1px; background:var(--gold);
  border:none; margin:24px 0;
}
.rule--center{ margin:24px auto; }

/* page switching */
.page{ display:none; }
.page--active{ display:block; }

/* reveal-on-scroll */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ transition:none; opacity:1; transform:none; }
  .letter{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ============================= */
/* NAV                             */
/* ============================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 6vw;
  color:var(--on-photo);
  transition:background .45s ease, padding .45s ease, color .45s ease, box-shadow .45s ease;
}
.nav--solid{
  background:rgba(250,247,240,.94);
  color:var(--ink);
  padding:18px 6vw;
  box-shadow:0 1px 0 var(--stone-line);
  backdrop-filter:blur(6px);
}
.nav__mark{
  font-style:italic; font-size:1.3rem; letter-spacing:.02em;
  text-decoration:none;
}
.nav__links{ display:flex; gap:34px; list-style:none; margin:0; padding:0; }

.nav__links a {
  font-size: 29px;
}

.nav__link{
  text-decoration:none;
  font-size:.92rem; letter-spacing:.06em;
  position:relative; padding-bottom:4px;
  cursor:pointer;
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .35s var(--ease);
}
.nav__link.is-active::after,
.nav__link:hover::after{ width:100%; }

@media (max-width:680px){
  .nav{ padding:22px 5vw; }
  .nav--solid{ padding:16px 5vw; }
  .nav__mark{ font-size:1.1rem; }
  .nav__links{ gap:20px; }
  .nav__link{ font-size:.82rem; }
}
@media (max-width:380px){
  .nav__links{ gap:14px; }
  .nav__link{ font-size:.75rem; }
  .nav__mark{ font-size:1rem; }
}

/* ============================= */
/* HERO (Home + Contact)           */
/* ============================= */
.hero{
  position:relative; height:100vh; min-height:560px;
  overflow:hidden; display:flex; align-items:flex-end;
}
.hero__bg{
  position:absolute; top:-10%; left:0; right:0; height:120%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.hero--home .hero__bg{ background-image:url('../images/hero-home.jpg'); }
.hero--contact .hero__bg{ background-image:url('../images/hero-contact.jpg'); }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,23,17,.62) 0%, rgba(28,23,17,.12) 48%, rgba(28,23,17,0) 70%);
}
.hero__content{
  position:relative; z-index:2; color:var(--on-photo);
  padding:0 6vw 11vh; max-width:920px;
}
.hero__headline{
  font-style:italic; font-weight:500;
  font-size:clamp(2.8rem, 9vw, 7.2rem);
  line-height:.97; letter-spacing:.3px;
  padding-bottom: 50px;
}
.hero__sub{
  margin-top:20px;
  font-style:normal;
  font-size:clamp(.8rem,1.1vw,.95rem);
  letter-spacing:.2em; text-transform:uppercase;
  opacity:.88;
}
.letter{
  display:inline-block; opacity:0; transform:translateY(20px);
  animation:letterIn .85s var(--ease) forwards;
  animation-delay:calc(var(--i) * 32ms + .2s);
}
@keyframes letterIn{ to{ opacity:1; transform:translateY(0); } }

.hero__scrolldown{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--on-photo); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.8;
}
.hero__scrolldown span{
  width:1px; height:34px; background:currentColor; opacity:.7;
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%,100%{opacity:.15;} 50%{opacity:.8;} }

/* ============================= */
/* SECTIONS (general)              */
/* ============================= */
.section{ padding:110px 6vw; }
.section--tight{ padding:64px 6vw; }
.section--center{ text-align:center; }

.intro__text{
  max-width:640px; font-size:clamp(1.05rem,1.6vw,1.32rem);
  line-height:1.75; color:var(--ink-soft);
}

/* link tiles on Home */
.links-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--stone-line); margin-top:10px;
}
.link-tile{
  background:var(--paper-soft); padding:64px 46px;
  display:flex; flex-direction:column; gap:16px;
  text-decoration:none; color:var(--ink);
  transition:background .4s ease;
}
.link-tile:hover{ background:var(--paper); }
.link-tile__title{
  font-style:italic; font-weight:500;
  font-size:clamp(1.7rem,3vw,2.5rem);
}
.link-tile__arrow{
  margin-top:auto; font-size:1.3rem; font-style:normal;
  transition:transform .4s var(--ease);
}
.link-tile:hover .link-tile__arrow{ transform:translateX(10px); }

@media (max-width:760px){
  .links-grid{ grid-template-columns:1fr; }
}

/* ============================= */
/* CAUSES                          */
/* ============================= */
.causes-head{
  text-align:center; padding:160px 6vw 30px;
}
.causes-head__title{
  font-style:italic; font-weight:500;
  font-size:clamp(2.3rem,6vw,4.3rem);
}
.causes-head__sub{
  max-width:560px; margin:18px auto 0; color:var(--ink-soft);
  font-size:1.08rem; line-height:1.7; font-style:italic;
}

.cards-wrap{
  padding:50px 6vw 140px;
  display:flex; flex-direction:column; gap:34px; align-items:center;
}
.cards-row{ display:grid; gap:30px; width:100%; max-width:1080px; }
.cards-row--three{ grid-template-columns:repeat(3,1fr); }
.cards-row--two{ grid-template-columns:repeat(2,1fr); max-width:720px; }
@media (max-width:900px){
  .cards-row--three{ grid-template-columns:repeat(2,1fr); max-width:720px; }
}
@media (max-width:560px){
  .cards-row--three, .cards-row--two{ grid-template-columns:1fr; max-width:420px; gap:24px; }
  .card{ height:300px; }
  .card__face{ padding:28px; }
}

.card{ perspective:1700px; height:330px; -webkit-tap-highlight-color:transparent; }
.card__inner{
  position:relative; width:100%; height:100%;
  transition:transform .75s var(--ease);
  transform-style:preserve-3d; cursor:pointer;
}
.card.is-flipped .card__inner{ transform:rotateY(180deg); }
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.card__face{
  position:absolute; inset:0; backface-visibility:hidden;
  border:1px solid var(--stone-line); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:34px;
  background:var(--paper-soft);
  transition:box-shadow .4s ease;
}
.card:not(.is-flipped):hover .card__face--front{
  box-shadow:0 0 0 1px var(--gold), 0 0 22px 4px rgba(184,134,60,.28);
}
.card__face--back{
  transform:rotateY(180deg);
  background:var(--ink); color:var(--paper-soft);
  justify-content:flex-start;
  overflow-y:auto;
}
.card__face--back::-webkit-scrollbar{ width:3px; }
.card__face--back::-webkit-scrollbar-track{ background:transparent; }
.card__face--back::-webkit-scrollbar-thumb{ background:var(--stone-line); border-radius:2px; }
.card.is-flipped:hover .card__face--back{
  box-shadow:0 0 0 1px var(--gold), 0 0 22px 4px rgba(184,134,60,.28);
}

.card__icon{ width:50px; height:50px; color:var(--gold-deep); margin-bottom:22px; }
.card__face--back .card__icon{ display:none; }
.card__name{ font-style:italic; font-weight:500; font-size:1.5rem; }
.card__name-sub{
  font-style:normal; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-top:8px;
}
.card__hint{
  margin-top:18px; font-style:normal; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.card__back-text{
  font-style:italic; font-size:1.1rem; line-height:1.65; opacity:.94;
}
.card__back-hint{
  margin-top:18px; font-style:normal; font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--stone-line);
}

/* ============================= */
/* CONTACT                         */
/* ============================= */
.contact-form{ max-width:560px; margin:0 auto; padding:110px 6vw 100px; }
.form-row{ margin-bottom:30px; }
label{
  display:block; font-style:normal; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:9px;
}
input, textarea{
  width:100%; border:none; border-bottom:1px solid var(--stone-line);
  background:transparent; font-family:'Cormorant Garamond',serif;
  font-size:1.18rem; padding:8px 2px; color:var(--ink);
  transition:border-color .3s ease;
}
input:focus, textarea:focus{ outline:none; border-color:var(--gold); }
textarea{ resize:vertical; min-height:110px; }

.btn{
  appearance:none; border:none; background:none; cursor:pointer;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:1.2rem; color:var(--ink); padding-bottom:6px;
  border-bottom:1px solid var(--gold);
  display:inline-flex; align-items:center; gap:10px;
  transition:gap .35s var(--ease), color .3s ease;
}
.btn:hover{ gap:16px; color:var(--gold-deep); }

.contact-direct{
  margin-top:54px; padding-top:30px; border-top:1px solid var(--stone-line);
  display:flex; flex-wrap:wrap; gap:10px 30px;
  font-size:.96rem;
}
.contact-direct a{ text-decoration:none; border-bottom:1px solid var(--stone-line); padding-bottom:2px; }
.contact-direct a:hover{ border-color:var(--gold); }

.timeless-wisdom-p {
  font-size: 11px;
  text-align: right;
}

.timeless-wisdom div {
  margin-top: 70px;
  text-align:left;
}

.email-contact, .maiden-site {
  font-size: 22px;
  padding-top: 25px;
  padding-bottom: 25px;
}

/* ============================= */
/* FOOTER                          */
/* ============================= */
footer{
  padding:38px 6vw; text-align:center;
  font-style:normal; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); border-top:1px solid var(--stone-line);
}

/* ============================= */
/* MOBILE / TABLET REFINEMENTS     */
/* ============================= */
@media (max-width:680px){
  .hero__content{ padding:0 6vw 14vh; }
  .section{ padding:76px 6vw; }
  .causes-head{ padding:128px 6vw 26px; }
  .cards-wrap{ padding:36px 6vw 100px; }
  .contact-form{ padding:76px 6vw 64px; }
  .links-grid{ margin-top:4px; }
  .link-tile{ padding:48px 32px; }
}
@media (max-width:380px){
  .hero__sub{ letter-spacing:.14em; }
}