@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --paper:#eadbbf;
  --paper-light:#f1e5cf;
  --ink:#2c1b10;
  --red:#a81416;
  --wood:#1b120b;
  --tan:#c4a97e;
  --cream:#f4ead8;
  --line:#7d6547;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.24),transparent 18%),
    repeating-linear-gradient(0deg,rgba(85,55,26,.025) 0,rgba(85,55,26,.025) 1px,transparent 1px,transparent 4px),
    var(--paper);
  color:var(--ink);
  font-family:"Libre Baskerville",Georgia,serif;
}
img{display:block;width:100%}
a{color:inherit}
.topbar{
  min-height:68px;
  padding:0 28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  background:
    linear-gradient(rgba(18,10,5,.2),rgba(18,10,5,.2)),
    url("images/wood-header.jpg") center/cover,
    var(--wood);
  color:#fff;
  border-bottom:2px solid #5f4228;
}
.topbar a{text-decoration:none;color:#fff}
.back-link{font-weight:700;font-size:.95rem}
.brand-lockup{text-align:center;line-height:1}
.brand-main{font-family:"Alfa Slab One",serif;font-size:1.5rem;letter-spacing:.08em}
.brand-sub{font-size:.72rem;letter-spacing:.16em;font-weight:700}
.header-icons{display:flex;justify-content:flex-end;gap:22px;font-size:1.35rem}

.hero{
  min-height:370px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  text-align:center;
  padding:24px 20px 36px;
  background:
    linear-gradient(to bottom,rgba(240,220,188,.1),rgba(236,217,185,.42)),
    url("images/hero-old-tucson-panorama.jpg") center/cover no-repeat;
  border-bottom:1px solid rgba(65,39,20,.35);
}
.hero-overlay{max-width:900px}
.hero-title-row{display:flex;align-items:center;justify-content:center;gap:20px}
.hero h1,
.section-heading h2,
.mission-copy h2,
.preservation-copy h2,
.help-copy h2,
.investor-box h2{
  font-family:"Alfa Slab One",serif;
  letter-spacing:.03em;
}
.hero h1{
  color:var(--red);
  font-size:clamp(2.2rem,5vw,4.25rem);
  line-height:1;
  margin:0;
  text-shadow:0 1px 0 #f3e5cc;
}
.hero .star{font-size:1.7rem}
.hero h2{font-size:clamp(1rem,2vw,1.45rem);letter-spacing:.05em;margin:10px 0}
.hero p{font-size:.98rem;line-height:1.55;margin:10px auto}
.hero .urgent{color:var(--red);font-weight:700;font-size:1.05rem}
.rule{display:flex;align-items:center;justify-content:center;color:var(--red)}
.rule:before,.rule:after{content:"";width:130px;border-top:1px solid var(--red);margin:0 8px}

.parchment-section{padding:22px 28px}
.tight-top{padding-top:8px}
.section-heading{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
.section-heading:before,.section-heading:after{content:"";height:1px;background:var(--line);flex:1;max-width:260px}
.section-heading h2{font-size:1.55rem;margin:0;white-space:nowrap}
.section-heading span{font-size:1rem}

.timeline{display:grid;grid-template-columns:repeat(5,1fr);max-width:1080px;margin:0 auto;gap:24px;position:relative}
.timeline:before{content:"";position:absolute;left:8%;right:8%;top:57px;border-top:1px dashed #4d3924;z-index:0}
.timeline article{text-align:center;position:relative;z-index:1;background:transparent}
.timeline .year{color:var(--red);font-weight:700;margin-bottom:6px}
.timeline .icon{font-size:2.1rem;line-height:1;background:var(--paper);display:inline-block;padding:0 8px}
.timeline h3{font-size:.95rem;margin:10px 0 4px}
.timeline p{font-size:.74rem;line-height:1.5;margin:0}

.history-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:1200px;margin:auto}
.history-grid figure{margin:0;position:relative}
.history-grid img{aspect-ratio:1.15/1;object-fit:cover;border:1px solid #8e7454}
.history-grid figcaption{
  position:absolute;left:12%;right:12%;bottom:-9px;
  background:#2a1b10;color:#fff;text-align:center;
  padding:5px 4px;font-size:.66rem;font-weight:700;
  border-radius:3px;border:1px solid #755b3d;
}
.history-quote{text-align:center;font-style:italic;margin:22px 0 0;font-size:.98rem}

.production-strip{display:grid;grid-template-columns:repeat(7,1fr) .72fr;gap:10px;max-width:1200px;margin:auto;align-items:start}
.production-strip article{text-align:center}
.production-strip img{aspect-ratio:.75/1;object-fit:cover;border:1px solid #8e7454}
.production-strip h3{font-size:.72rem;margin:8px 0 0}
.production-strip p{font-size:.65rem;line-height:1.25;margin:2px 0}
.more-productions{align-self:center;text-align:center;font-size:.76rem;line-height:1.35}

.mission-preservation{
  display:grid;
  grid-template-columns:1fr 1px 1.35fr;
  gap:24px;
  align-items:stretch;
  max-width:1250px;
  margin:auto;
}
.vertical-rule{background:rgba(80,52,28,.35)}
.mission-block,.preservation-block{display:grid;align-items:end}
.mission-block{grid-template-columns:150px 1fr}
.preservation-block{grid-template-columns:1fr 180px}
.side-art{min-height:250px;background-size:contain;background-position:bottom center;background-repeat:no-repeat}
.left-art{background-image:url("images/decor-rider.png")}
.right-art{background-image:url("images/decor-old-tucson-gate.png")}
.mission-copy{text-align:center;padding:0 10px 10px}
.mission-copy h2,.preservation-copy h2,.help-copy h2{color:var(--red);font-size:1.45rem;margin:0 0 10px}
.mission-copy p{font-size:.78rem;line-height:1.55}
.mini-rule{color:var(--red);text-align:center;margin:8px 0}
.mission-copy h3{color:var(--red);font-family:"Alfa Slab One";font-size:1rem;line-height:1.25;margin:0}
.preservation-copy{text-align:center;padding:0 8px}
.preservation-point{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;text-align:left;margin:6px 0}
.round-icon{
  width:42px;height:42px;border-radius:50%;
  border:2px solid #322012;display:grid;place-items:center;font-size:1.1rem
}
.preservation-point p{font-size:.72rem;line-height:1.45;margin:0}
.together{font-size:.72rem;line-height:1.4}

.red-button{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  padding:11px 22px;border-radius:4px;border:1px solid #7c0b0d;
  font-weight:700;font-size:.82rem;line-height:1.2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}
.outline-button{
  display:inline-block;text-decoration:none;border:1px solid #6f5434;
  padding:10px 34px;font-weight:700;font-size:.78rem;margin-top:8px
}

.help-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:46px;
  align-items:center;
  max-width:1250px;
  min-height:390px;
  margin:0 auto;
  border-top:1px solid rgba(70,45,25,.25);
  overflow:visible;
  position:relative;
}
.shirt-feature{
  display:grid;
  grid-template-columns:minmax(400px,500px) minmax(360px,1fr);
  gap:12px;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}
.shirt-image-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:360px;
  overflow:visible;
}
.shirt-image-wrap img{
  display:block;
  width:535px;
  max-width:none;
  height:auto;
  object-fit:contain;
  object-position:center;
  transform:translateX(28px);
  filter:drop-shadow(0 9px 9px rgba(44,27,16,.14));
}
.help-copy{position:relative;z-index:2}
.help-copy{text-align:center}
.help-copy h2{font-size:1.75rem}
.help-copy p{font-size:.78rem;line-height:1.5}
.contribution{margin-bottom:0;font-size:.86rem!important;font-weight:600}
.investor-box{
  border:1px solid #7a5b39;
  padding:18px;text-align:center;position:relative;background:rgba(244,234,216,.32)
}
.investor-star{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--paper);padding:0 8px}
.investor-box h2{font-size:1.05rem;margin:8px 0}
.investor-box p{font-size:.76rem;line-height:1.45}

.acknowledgment{
  display:grid;
  grid-template-columns:55px 1fr 1px 1.5fr 180px;
  gap:18px;align-items:center;
  padding:10px 55px;border-top:1px solid #806647;border-bottom:1px solid #806647;
  background:rgba(240,226,202,.8)
}
.ack-logo{width:45px;height:45px;border:2px solid #5a4028;border-radius:50%;display:grid;place-items:center;font-weight:700}
.acknowledgment p{font-size:.66rem;line-height:1.35;margin:0}
.ack-divider{height:42px;background:#856b4c}
.signature{font-family:cursive;font-size:1.8rem;text-align:right}

.site-footer{
  background:
    linear-gradient(rgba(15,8,4,.2),rgba(15,8,4,.2)),
    url("images/wood-header.jpg") center/cover,
    var(--wood);
  color:#fff;
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr) 1.5fr;
  gap:30px;padding:28px 45px 32px
}
.site-footer h3{font-size:.78rem;margin:0 0 8px}
.site-footer a{display:block;color:#fff;text-decoration:none;font-size:.64rem;line-height:1.55}
.site-footer p{font-size:.64rem;line-height:1.4;margin:5px 0}
.footer-brand{text-align:center}
.footer-brand .brand-main{font-size:1.15rem}
.footer-star{margin:8px 0}
.join-footer form{display:flex;margin-top:8px}
.join-footer input{min-width:0;flex:1;padding:9px;border:0}
.join-footer button{background:var(--red);color:#fff;border:0;padding:0 18px;font-weight:700}

@media(max-width:1000px){
  .history-grid{grid-template-columns:repeat(3,1fr);gap:24px 10px}
  .production-strip{grid-template-columns:repeat(4,1fr)}
  .mission-preservation{grid-template-columns:1fr}
  .vertical-rule{display:none}
 .help-row{grid-template-columns:1fr}
  .shirt-feature{grid-template-columns:minmax(320px,390px) 1fr}
  .shirt-image-wrap{min-height:320px}
  .shirt-image-wrap img{width:440px;transform:translateX(18px)}
  .investor-box{width:min(100%,520px);justify-self:center}
  .site-footer{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .topbar{grid-template-columns:1fr;gap:8px;padding:12px;text-align:center}
  .header-icons{justify-content:center}
  .hero{min-height:420px;padding-top:20px}
  .hero-title-row{gap:8px}
  .hero .star{display:none}
  .timeline{grid-template-columns:1fr}
  .timeline:before{display:none}
  .history-grid,.production-strip{grid-template-columns:1fr 1fr}
  .mission-block,.preservation-block{grid-template-columns:1fr}
  .side-art{min-height:190px}
 .help-row{grid-template-columns:1fr;gap:28px}
  .shirt-feature{grid-template-columns:1fr;gap:6px}
  .shirt-image-wrap{min-height:330px;justify-content:center;overflow:hidden}
  .shirt-image-wrap img{width:390px;max-width:none;transform:none}
  .acknowledgment{grid-template-columns:1fr;text-align:center;padding:20px}
  .ack-logo{margin:auto}.ack-divider{display:none}.signature{text-align:center}
  .site-footer{grid-template-columns:1fr;text-align:center}
  .join-footer form{max-width:420px;margin:8px auto 0}
}
