/* =========================================================
TOGETHER MAGAZINE — ABOUT CSS
========================================================= */

:root{

  --paper:#f4ede2;
  --paper-light:#fbf7f0;
  --paper-dark:#e8ddd0;

  --ink:#171716;
  --muted:#716a61;
  --line:#d6cabb;

  --orange:#c95c38;
  --orange-dark:#a8482b;

  --gold:#dfa13a;
  --sage:#81906f;

  --blue:#4859e8;
  --blue-dark:#29399f;

  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
  --script:"Caveat",cursive;

  --max:1320px;

  /* MAIN SITE HEADER / FOOTER COLORS */

  --charcoal:#1f1f1d;
  --cream:#f8f4ec;
  --terracotta:#c85d3a;
  --mustard:#e2a23b;
  --taupe:#d9cdbc;
  --soft:#eee6d9;

}


/* =========================================================
RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{

  margin:0;

  background:var(--paper);

  color:var(--ink);

  font-family:var(--sans);

  overflow-x:hidden;

}


body.menu-open,
body.search-open{
  overflow:hidden;
}


img{

  display:block;

  width:100%;

  max-width:100%;

}


a{

  color:inherit;

  text-decoration:none;

}


button,
input,
textarea{

  font:inherit;

}


button{

  cursor:pointer;

}


::selection{

  background:var(--orange);

  color:#fff;

}


.container{

  width:min(
    calc(100% - 80px),
    var(--max)
  );

  margin:auto;

}


.reveal{

  opacity:0;

  transform:translateY(25px);

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,1,.36,1);

}


.reveal.visible{

  opacity:1;

  transform:none;

}



/* =========================================================
LOADER
========================================================= */

.loader{

  position:fixed;

  inset:0;

  z-index:9999;

  background:var(--ink);

  color:var(--paper);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:25px;

  transition:
    opacity .6s ease,
    visibility .6s ease;

}


.loader.loaded{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

}


.loader-logo{

  font-family:var(--serif);

  font-size:42px;

  letter-spacing:.08em;

  text-align:center;

}


.loader-logo small{

  display:block;

  margin-top:7px;

  font-family:var(--sans);

  font-size:8px;

  letter-spacing:.45em;

}


.loader-progress{

  width:180px;

  height:2px;

  background:rgba(255,255,255,.15);

}


.loader-progress span{

  display:block;

  height:100%;

  width:0;

  background:var(--orange);

  animation:loader 1.5s ease forwards;

}


@keyframes loader{

  to{
    width:100%;
  }

}



/* =========================================================
HEADER — SAME AS MAIN SITE
========================================================= */

.header{

  position:sticky;

  top:0;

  z-index:1000;

  width:100%;

  background:rgba(248,244,236,.96);

  border-bottom:1px solid var(--taupe);

  backdrop-filter:blur(15px);

}


.header.scrolled{

  box-shadow:
    0 10px 30px
    rgba(31,31,29,.08);

}


.header-top{

  min-height:28px;

  padding:4px 35px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  border-bottom:1px solid var(--taupe);

  color:#777067;

  font-size:10px;

  font-weight:700;

  line-height:1.2;

  letter-spacing:1.5px;

}


.header-top span:nth-child(2){

  color:var(--terracotta);

}


.header-main{

  width:min(
    var(--max),
    calc(100% - 70px)
  );

  min-height:80px;

  margin:auto;

  display:flex;

  align-items:center;

  gap:25px;

}


.logo{

  flex-shrink:0;

  display:flex;

  align-items:center;

  gap:10px;

}


.logo-symbol{

  position:relative;

  width:35px;

  height:31px;

  flex-shrink:0;

}


.logo-symbol i{

  position:absolute;

  width:9px;

  height:9px;

  border-radius:50%;

}


.logo-symbol i:nth-child(1){

  top:0;

  left:13px;

  background:var(--terracotta);

}


.logo-symbol i:nth-child(2){

  top:10px;

  left:0;

  background:var(--mustard);

}


.logo-symbol i:nth-child(3){

  top:10px;

  right:0;

  background:var(--sage);

}


.logo-symbol i:nth-child(4){

  bottom:0;

  left:13px;

  background:var(--charcoal);

}


.logo-name{

  font-family:var(--serif);

  font-size:22px;

  line-height:1;

  letter-spacing:2px;

}


.logo-name small{

  display:block;

  margin-top:4px;

  color:var(--terracotta);

  font-family:var(--sans);

  font-size:8px;

  font-weight:700;

  letter-spacing:3px;

  text-align:center;

}


.nav{

  min-width:0;

  margin-left:auto;

  display:flex;

  align-items:center;

  gap:19px;

}


.nav a{

  position:relative;

  padding:8px 0;

  white-space:nowrap;

  font-size:16px;

  font-weight:500;

  line-height:1.2;

}


.nav a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:0;

  height:2px;

  background:var(--terracotta);

  transition:.3s ease;

}


.nav a:hover::after,
.nav a.active::after{

  width:100%;

}


.header-actions{

  display:flex;

  align-items:center;

  gap:14px;

  flex-shrink:0;

}


.search-btn{

  width:35px;

  height:35px;

  display:grid;

  place-items:center;

  border:0;

  background:transparent;

  color:var(--charcoal);

  font-size:16px;

}


.issue-btn{

  display:flex;

  align-items:center;

  gap:9px;

  padding:11px 15px;

  color:white;

  background:var(--charcoal);

  font-size:16px;

  font-weight:600;

  line-height:1;

  white-space:nowrap;

  transition:.3s ease;

}


.issue-btn:hover{

  background:var(--terracotta);

}


.hamburger{

  display:none;

  width:38px;

  height:38px;

  border:0;

  background:transparent;

}


.hamburger span{

  display:block;

  width:25px;

  height:2px;

  margin:5px auto;

  background:var(--charcoal);

}



/* =========================================================
MOBILE MENU
========================================================= */

.mobile-menu{

  position:fixed;

  inset:0;

  z-index:5000;

  overflow-y:auto;

  background:var(--charcoal);

  color:var(--cream);

  transform:translateX(100%);

  transition:
    transform .5s
    cubic-bezier(.77,0,.18,1);

}


.mobile-menu.open{

  transform:translateX(0);

}


.mobile-close{

  position:absolute;

  top:22px;

  right:22px;

  width:45px;

  height:45px;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.2);

  border-radius:50%;

  background:transparent;

  color:white;

  font-size:20px;

}


.mobile-inner{

  width:100%;

  min-height:100%;

  padding:80px 25px 25px;

  display:flex;

  flex-direction:column;

}


.mobile-logo{

  font-family:var(--serif);

  font-size:30px;

  line-height:1;

  letter-spacing:2px;

}


.mobile-logo small{

  display:block;

  margin-top:5px;

  color:var(--terracotta);

  font-family:var(--sans);

  font-size:8px;

  font-weight:700;

  letter-spacing:3px;

}


.mobile-caption{

  margin-top:12px;

  color:var(--mustard);

  font-size:16px;

  line-height:1.3;

}


.mobile-menu nav{

  width:100%;

  margin-top:35px;

}


.mobile-menu nav a{

  width:100%;

  min-width:0;

  display:grid;

  grid-template-columns:35px minmax(0,1fr) 25px;

  align-items:center;

  gap:12px;

  padding:14px 0;

  border-bottom:1px solid rgba(255,255,255,.12);

  font-family:var(--sans);

  font-size:16px;

  font-weight:500;

}


.mobile-menu nav a span{

  color:#777;

}


.mobile-menu nav a i{

  color:var(--terracotta);

}


.mobile-bottom{

  margin-top:auto;

  padding-top:25px;

  color:#777;

  font-size:12px;

  letter-spacing:1.5px;

}



/* =========================================================
SEARCH
========================================================= */

.search-overlay{

  position:fixed;

  inset:0;

  z-index:6000;

  background:rgba(31,31,29,.98);

  color:white;

  display:grid;

  place-items:center;

  opacity:0;

  visibility:hidden;

  transition:.35s ease;

}


.search-overlay.open{

  opacity:1;

  visibility:visible;

}


.search-close{

  position:absolute;

  top:25px;

  right:30px;

  width:48px;

  height:48px;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.2);

  background:transparent;

  color:white;

  font-size:20px;

}


.search-container{

  width:min(
    800px,
    calc(100% - 40px)
  );

}


.search-container > span{

  font-size:9px;

  letter-spacing:.25em;

  color:#777;

}


.search-container h2{

  margin:15px 0 35px;

  font-family:var(--serif);

  font-size:clamp(50px,8vw,100px);

  font-weight:400;

  line-height:.95;

}


.search-container h2 em{

  color:var(--terracotta);

}


#searchForm{

  display:flex;

  border-bottom:1px solid rgba(255,255,255,.3);

}


#searchInput{

  flex:1;

  padding:18px 0;

  border:0;

  outline:0;

  background:transparent;

  color:white;

  font-family:var(--serif);

  font-size:23px;

}


#searchInput::placeholder{

  color:#666;

}


#searchForm button{

  width:60px;

  border:0;

  background:transparent;

  color:var(--terracotta);

  font-size:18px;

}


#searchMessage{

  margin-top:15px;

  font-size:11px;

  color:#999;

}



/* =========================================================
ABOUT HERO
========================================================= */

.about-hero{

  position:relative;

  min-height:calc(100vh - 108px);

  overflow:hidden;

  background:var(--ink);

  color:white;

}


.hero-image{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

}


.hero-image img{

  height:100%;

  object-fit:cover;

  filter:saturate(.75);

}


.hero-image-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(23,23,22,.94) 0%,
      rgba(23,23,22,.78) 42%,
      rgba(23,23,22,.25) 100%
    );

}


.hero-pattern{

  position:absolute;

  inset:0;

  opacity:.18;

  background-image:
    linear-gradient(
      rgba(255,255,255,.25) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.25) 1px,
      transparent 1px
    );

  background-size:80px 80px;

}


.hero-container{

  position:relative;

  z-index:2;

  min-height:calc(100vh - 108px);

  padding-top:40px;

  padding-bottom:40px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

}


.hero-top{

  display:flex;

  justify-content:space-between;

  padding-bottom:15px;

  border-bottom:1px solid rgba(255,255,255,.2);

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:#bbb;

}


.hero-content{

  max-width:900px;

  padding:70px 0;

}


.hero-label{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:25px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.22em;

}


.hero-label span{

  width:8px;

  height:8px;

  border-radius:50%;

  background:var(--orange);

}


.hero-content h1{

  font-family:var(--serif);

  font-size:clamp(65px,9vw,125px);

  font-weight:400;

  line-height:.88;

  letter-spacing:-.055em;

}


.hero-content h1 em{

  color:var(--orange);

}


.hero-content p{

  max-width:620px;

  margin-top:35px;

  font-size:15px;

  line-height:1.8;

  color:#d0ccc5;

}


.hero-button{

  display:inline-flex;

  align-items:center;

  gap:15px;

  margin-top:35px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.16em;

}


.hero-button i{

  width:40px;

  height:40px;

  border:1px solid rgba(255,255,255,.5);

  display:grid;

  place-items:center;

  transition:.25s ease;

}


.hero-button:hover i{

  background:var(--orange);

  border-color:var(--orange);

}


.hero-bottom{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.2);

  font-size:8px;

  font-weight:700;

  letter-spacing:.18em;

  color:#aaa;

}


.hero-bottom span:first-child{

  display:flex;

  align-items:center;

  gap:9px;

}


.hero-bottom b{

  width:4px;

  height:4px;

  border-radius:50%;

  background:var(--orange);

}



/* =========================================================
SECTION META
========================================================= */

.section-top{

  display:flex;

  align-items:center;

  gap:15px;

  padding-bottom:16px;

  border-bottom:1px solid var(--line);

}


.section-number{

  font-family:var(--serif);

  font-size:20px;

}


.section-name{

  font-size:9px;

  font-weight:700;

  letter-spacing:.2em;

}


.section-rule{

  flex:1;

  height:1px;

  background:var(--line);

}



/* =========================================================
ABOUT
========================================================= */

.about-section{

  padding:40px 0;

  background:var(--paper);

}


.about-layout{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  padding-top:40px;

}


.about-image{

  position:relative;

  min-height:600px;

  overflow:hidden;

  background:var(--paper-dark);

}


.about-image img{

  height:100%;

  object-fit:cover;

  transition:transform .8s ease;

}


.about-image:hover img{

  transform:scale(1.04);

}


.image-caption{

  position:absolute;

  left:25px;

  right:25px;

  bottom:20px;

  display:flex;

  justify-content:space-between;

  padding-top:15px;

  border-top:1px solid rgba(255,255,255,.35);

  font-size:8px;

  font-weight:700;

  letter-spacing:.17em;

  color:white;

}


.image-number{

  position:absolute;

  top:20px;

  right:20px;

  width:48px;

  height:48px;

  border:1px solid rgba(255,255,255,.5);

  display:grid;

  place-items:center;

  font-family:var(--serif);

  color:white;

}


.about-text{

  align-self:center;

  padding:20px 0;

}


.eyebrow{

  display:block;

  margin-bottom:18px;

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:var(--muted);

}


.about-text h2{

  max-width:600px;

  margin-bottom:30px;

  font-family:var(--serif);

  font-size:clamp(45px,5vw,70px);

  font-weight:400;

  line-height:.98;

  letter-spacing:-.04em;

}


.about-text h2 em{

  color:var(--orange);

}


.about-text p{

  max-width:650px;

  margin-bottom:22px;

  font-size:14px;

  line-height:1.9;

  color:var(--muted);

}


.about-text p.lead{

  font-family:var(--serif);

  font-size:23px;

  line-height:1.55;

  color:var(--ink);

}


.about-sign{

  display:flex;

  align-items:center;

  gap:18px;

  margin-top:35px;

}


.sign-line{

  width:55px;

  height:1px;

  background:var(--orange);

}


.about-sign small{

  display:block;

  font-size:7px;

  font-weight:700;

  letter-spacing:.2em;

  color:var(--muted);

}


.about-sign strong{

  display:block;

  margin-top:4px;

  font-family:var(--serif);

  font-size:17px;

  font-weight:400;

}



/* =========================================================
VALUES
========================================================= */

.values-section{

  padding:40px 0;

  background:var(--ink);

  color:white;

}


.values-header{

  display:flex;

  justify-content:space-between;

  align-items:end;

  margin-bottom:40px;

}


.values-header > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

  color:#777;

}


.values-header h2{

  font-family:var(--serif);

  font-size:clamp(40px,5vw,65px);

  font-weight:400;

  line-height:1;

}


.values-header h2 em{

  color:var(--orange);

}


.values-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-top:1px solid rgba(255,255,255,.14);

  border-left:1px solid rgba(255,255,255,.14);

}


.value-card{

  min-height:280px;

  padding:28px;

  border-right:1px solid rgba(255,255,255,.14);

  border-bottom:1px solid rgba(255,255,255,.14);

  transition:.3s ease;

}


.value-card:hover{

  background:#20201f;

}


.value-number{

  font-size:8px;

  letter-spacing:.18em;

  color:#777;

}


.value-icon{

  width:48px;

  height:48px;

  margin-top:45px;

  border:1px solid rgba(255,255,255,.2);

  border-radius:50%;

  display:grid;

  place-items:center;

  color:var(--orange);

}


.value-card h3{

  margin-top:22px;

  font-family:var(--serif);

  font-size:30px;

  font-weight:400;

}


.value-card p{

  max-width:230px;

  margin-top:10px;

  font-size:11px;

  line-height:1.7;

  color:#999;

}



/* =========================================================
HISTORY
========================================================= */

.history-section{

  padding:40px 0;

  background:var(--paper-light);

}


.history-heading{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  padding:40px 0;

}


.history-heading h2{

  font-family:var(--serif);

  font-size:clamp(48px,6vw,82px);

  font-weight:400;

  line-height:.93;

  letter-spacing:-.045em;

}


.history-heading h2 em{

  color:var(--orange);

}


.history-intro{

  align-self:end;

  max-width:500px;

}


.handwritten{

  display:block;

  margin-bottom:18px;

  font-family:var(--script);

  font-size:29px;

  color:var(--orange);

  transform:rotate(-3deg);

}


.history-intro p{

  font-size:14px;

  line-height:1.8;

  color:var(--muted);

}


.history-feature{

  display:grid;

  grid-template-columns:1fr 1fr;

  min-height:600px;

  background:var(--paper);

  border:1px solid var(--line);

}


.history-photo{

  position:relative;

  min-height:600px;

  overflow:hidden;

}


.history-photo img{

  height:100%;

  object-fit:cover;

}


.history-photo-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.75),
      transparent 65%
    );

}


.history-photo-text{

  position:absolute;

  left:30px;

  right:30px;

  bottom:30px;

  color:white;

}


.history-photo-text span{

  display:block;

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

}


.history-photo-text strong{

  display:block;

  margin-top:5px;

  font-family:var(--serif);

  font-size:70px;

  font-weight:400;

  line-height:1;

}


.history-photo-text small{

  font-size:7px;

  letter-spacing:.15em;

}


.history-copy{

  position:relative;

  padding:55px 60px;

}


.history-quote{

  position:absolute;

  top:30px;

  right:45px;

  font-family:var(--serif);

  font-size:110px;

  line-height:.5;

  color:var(--orange);

  opacity:.2;

}


.history-copy p{

  max-width:650px;

  margin-bottom:23px;

  font-size:13px;

  line-height:1.9;

  color:var(--muted);

}


.history-copy p.history-lead{

  margin-bottom:35px;

  font-family:var(--serif);

  font-size:22px;

  line-height:1.55;

  color:var(--ink);

}


.history-footer{

  display:flex;

  align-items:center;

  gap:20px;

  padding-top:22px;

}


.history-footer > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.18em;

  color:var(--muted);

}


.history-dots{

  display:flex;

  gap:6px;

}


.history-dots i{

  width:5px;

  height:5px;

  border-radius:50%;

  background:var(--line);

}


.history-dots i:nth-child(3){

  background:var(--orange);

}


.history-footer strong{

  margin-left:auto;

  font-size:8px;

  letter-spacing:.16em;

}



/* =========================================================
TEAM
========================================================= */

.team-section{

  padding:40px 0;

  background:var(--paper);

}


.team-heading{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  padding:40px 0;

}


.team-heading h2{

  max-width:700px;

  font-family:var(--serif);

  font-size:clamp(48px,6vw,82px);

  font-weight:400;

  line-height:.93;

  letter-spacing:-.045em;

}


.team-heading h2 em{

  color:var(--orange);

}


.team-heading > p{

  align-self:end;

  max-width:500px;

  font-size:14px;

  line-height:1.8;

  color:var(--muted);

}


.team-feature{

  display:grid;

  grid-template-columns:1fr 1fr;

  min-height:600px;

  border:1px solid var(--line);

}


.team-photo{

  position:relative;

  min-height:600px;

  overflow:hidden;

}


.team-photo img{

  height:100%;

  object-fit:cover;

}


.team-photo-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.75),
      transparent 60%
    );

}


.team-photo-content{

  position:absolute;

  left:35px;

  right:35px;

  bottom:35px;

  color:white;

}


.team-photo-content span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

}


.team-photo-content h3{

  margin-top:12px;

  font-family:var(--serif);

  font-size:55px;

  font-weight:400;

  line-height:.95;

}


.team-photo-content h3 em{

  color:var(--orange);

}


.team-content{

  padding:60px;

  background:var(--paper-light);

}


.team-icon{

  width:50px;

  height:50px;

  border:1px solid var(--line);

  border-radius:50%;

  display:grid;

  place-items:center;

  color:var(--orange);

  margin-bottom:25px;

}


.team-content h3{

  max-width:550px;

  margin-bottom:30px;

  font-family:var(--serif);

  font-size:50px;

  font-weight:400;

  line-height:1;

}


.team-content h3 em{

  color:var(--orange);

}


.team-content p{

  max-width:620px;

  margin-bottom:22px;

  font-size:14px;

  line-height:1.9;

  color:var(--muted);

}


.team-content p.lead{

  font-family:var(--serif);

  font-size:22px;

  line-height:1.5;

  color:var(--ink);

}


.team-bottom{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  margin-top:35px;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

}


.team-bottom span{

  padding:18px 15px;

  font-size:8px;

  font-weight:700;

  letter-spacing:.18em;

  text-align:center;

  border-right:1px solid var(--line);

}


.team-bottom span:last-child{

  border-right:0;

}



/* =========================================================
MISSION
========================================================= */

.mission-section{

  position:relative;

  min-height:600px;

  overflow:hidden;

  display:grid;

  place-items:center;

  background:var(--ink);

  color:white;

}


.mission-bg{

  position:absolute;

  inset:0;

  opacity:.25;

  background:
    radial-gradient(
      circle at 20% 50%,
      var(--orange),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 20%,
      var(--gold),
      transparent 25%
    );

}


.mission-circle{

  position:absolute;

  border:1px solid rgba(255,255,255,.1);

  border-radius:50%;

}


.circle-a{

  width:500px;

  height:500px;

  left:-200px;

  top:-100px;

}


.circle-b{

  width:700px;

  height:700px;

  right:-300px;

  bottom:-300px;

}


.mission-content{

  position:relative;

  z-index:2;

  max-width:950px;

  padding:100px 0;

  text-align:center;

}


.mission-content > span{

  font-size:9px;

  font-weight:700;

  letter-spacing:.25em;

  color:#999;

}


.mission-content h2{

  margin-top:25px;

  font-family:var(--serif);

  font-size:clamp(55px,7vw,100px);

  font-weight:400;

  line-height:.9;

  letter-spacing:-.05em;

}


.mission-content h2 em{

  color:var(--orange);

}


.mission-content p{

  max-width:600px;

  margin:35px auto 0;

  font-size:15px;

  line-height:1.8;

  color:#ccc;

}


.mission-hand{

  margin-top:35px;

  font-family:var(--script);

  font-size:38px;

  color:var(--orange);

  transform:rotate(-4deg);

}



/* =========================================================
COMMUNITY
========================================================= */

.community-section{

  padding:40px 0;

  background:var(--paper-light);

}


.community-heading{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  padding:40px 0;

}


.community-heading h2{

  font-family:var(--serif);

  font-size:clamp(50px,6vw,80px);

  font-weight:400;

  line-height:.95;

  letter-spacing:-.045em;

}


.community-heading h2 em{

  color:var(--orange);

}


.community-heading > p{

  align-self:end;

  max-width:500px;

  font-size:14px;

  line-height:1.8;

  color:var(--muted);

}


.community-layout{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

}


.community-image{

  position:relative;

  min-height:650px;

  overflow:hidden;

}


.community-image img{

  height:100%;

  object-fit:cover;

}


.community-image-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.75),
      transparent 60%
    );

}


.community-image-caption{

  position:absolute;

  left:30px;

  right:30px;

  bottom:30px;

  color:white;

}


.community-image-caption span{

  display:block;

  margin-bottom:10px;

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

}


.community-image-caption strong{

  font-family:var(--serif);

  font-size:42px;

  font-weight:400;

  line-height:1;

}


.community-list{

  display:flex;

  flex-direction:column;

}


.community-item{

  display:grid;

  grid-template-columns:35px 1fr 30px;

  gap:15px;

  align-items:center;

  padding:25px 0;

  border-bottom:1px solid var(--line);

}


.community-item:first-child{

  border-top:1px solid var(--line);

}


.community-item > span{

  font-family:var(--serif);

  font-size:18px;

  color:var(--orange);

}


.community-item h3{

  font-family:var(--serif);

  font-size:25px;

  font-weight:400;

}


.community-item p{

  margin-top:6px;

  font-size:12px;

  line-height:1.6;

  color:var(--muted);

}


.community-item > i{

  color:var(--orange);

  font-size:12px;

}



/* =========================================================
CLOSING
========================================================= */

.closing-section{

  padding:110px 0;

  background:var(--orange);

  color:white;

  text-align:center;

}


.closing-content > span{

  font-size:9px;

  font-weight:700;

  letter-spacing:.25em;

}


.closing-content h2{

  margin-top:25px;

  font-family:var(--serif);

  font-size:clamp(50px,7vw,95px);

  font-weight:400;

  line-height:.92;

  letter-spacing:-.05em;

}


.closing-content h2 em{

  color:var(--ink);

}


.closing-content p{

  margin-top:25px;

  font-size:14px;

}


.closing-symbol{

  display:flex;

  justify-content:center;

  gap:6px;

  margin-top:35px;

}


.closing-symbol i{

  width:10px;

  height:10px;

  border-radius:50%;

  background:white;

}



/* =========================================================
CONTACT
========================================================= */

.contact-section{

  padding:80px 0;

  background:var(--paper);

}


.contact-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

}


.contact-copy{

  align-self:center;

}


.contact-copy > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:var(--muted);

}


.contact-copy h2{

  margin-top:20px;

  font-family:var(--serif);

  font-size:clamp(50px,6vw,80px);

  font-weight:400;

  line-height:.95;

  letter-spacing:-.045em;

}


.contact-copy h2 em{

  color:var(--orange);

}


.contact-copy p{

  max-width:500px;

  margin-top:25px;

  font-size:14px;

  line-height:1.8;

  color:var(--muted);

}


.contact-form{

  display:flex;

  flex-direction:column;

  gap:25px;

}


.contact-form label{

  display:flex;

  flex-direction:column;

  gap:9px;

  font-size:8px;

  font-weight:700;

  letter-spacing:.18em;

}


.contact-form input,
.contact-form textarea{

  width:100%;

  padding:15px 0;

  border:0;

  border-bottom:1px solid var(--line);

  outline:0;

  background:transparent;

  color:var(--ink);

  font-size:14px;

  letter-spacing:0;

}


.contact-form textarea{

  resize:vertical;

}


.contact-form button{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:15px 18px;

  border:0;

  background:var(--ink);

  color:white;

  font-size:9px;

  font-weight:700;

  letter-spacing:.16em;

}


.contact-form button span{

  width:35px;

  height:35px;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.25);

}


#contactMessage{

  min-height:18px;

  font-size:12px;

}



/* =========================================================
NEWSLETTER
========================================================= */

.newsletter-section{

  padding:90px 0;

  background:var(--ink);

  color:white;

  text-align:center;

}


.newsletter-inner{

  width:min(
    800px,
    calc(100% - 40px)
  );

  margin:auto;

}


.newsletter-inner > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.25em;

  color:#777;

}


.newsletter-inner h2{

  margin-top:20px;

  font-family:var(--serif);

  font-size:clamp(45px,6vw,70px);

  font-weight:400;

  line-height:1;

}


.newsletter-inner h2 em{

  color:var(--orange);

}


.newsletter-inner > p{

  max-width:500px;

  margin:20px auto 30px;

  font-size:13px;

  line-height:1.7;

  color:#999;

}


#newsletterForm{

  max-width:600px;

  margin:auto;

  display:flex;

  border-bottom:1px solid rgba(255,255,255,.25);

}


#newsletterEmail{

  flex:1;

  padding:17px 0;

  border:0;

  outline:0;

  background:transparent;

  color:white;

  font-size:13px;

}


#newsletterEmail::placeholder{

  color:#666;

}


#newsletterForm button{

  border:0;

  background:transparent;

  color:var(--orange);

  padding:0;

  font-size:9px;

  font-weight:700;

  letter-spacing:.16em;

}


#newsletterForm button i{

  margin-left:10px;

}


#newsletterMessage{

  min-height:15px;

}



/* =========================================================
FOOTER — SAME AS MAIN SITE
========================================================= */

.footer{

  padding:75px 0 25px;

  color:var(--cream);

  background:var(--charcoal);

}


.footer-main{

  width:min(
    var(--max),
    calc(100% - 70px)
  );

  margin:auto;

  display:grid;

  grid-template-columns:.8fr 1.2fr;

  gap:100px;

}


.footer-mini-symbol{

  display:flex;

  gap:5px;

  margin-bottom:16px;

}


.footer-mini-symbol i{

  width:8px;

  height:8px;

  border-radius:50%;

}


.footer-mini-symbol i:nth-child(1){

  background:var(--terracotta);

}


.footer-mini-symbol i:nth-child(2){

  background:var(--mustard);

}


.footer-mini-symbol i:nth-child(3){

  background:var(--sage);

}


.footer-mini-symbol i:nth-child(4){

  background:var(--taupe);

}


.footer-logo{

  font-family:var(--serif);

  font-size:30px;

  letter-spacing:2px;

}


.footer-logo small{

  display:block;

  margin-top:3px;

  color:var(--terracotta);

  font-family:var(--sans);

  font-size:8px;

  font-weight:700;

  letter-spacing:3px;

}


.footer-brand > p{

  margin-top:12px;

  color:#817b73;

  font-size:16px;

}


.footer-issue{

  display:flex;

  flex-wrap:wrap;

  gap:20px;

  margin-top:30px;

  color:#66625c;

  font-size:16px;

  font-weight:700;

}


.footer-nav{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:40px;

}


.footer-nav > div{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

}


.footer-nav span{

  margin-bottom:18px;

  color:var(--terracotta);

  font-size:16px;

  font-weight:700;

  letter-spacing:2px;

}


.footer-nav a{

  margin-bottom:10px;

  color:#918b83;

  font-size:16px;

  line-height:1.5;

  transition:.25s ease;

}


.footer-nav a:hover{

  color:var(--cream);

  transform:translateX(4px);

}


.footer-word{

  width:min(
    var(--max),
    calc(100% - 70px)
  );

  margin:75px auto 35px;

  color:rgba(255,255,255,.045);

  font-family:var(--serif);

  font-size:clamp(100px,19vw,290px);

  line-height:.65;

  white-space:nowrap;

}


.footer-bottom{

  width:min(
    var(--max),
    calc(100% - 70px)
  );

  margin:auto;

  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.1);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  color:#66615a;

  font-size:16px;

}


#backTop{

  width:42px;

  height:42px;

  flex-shrink:0;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.15);

  border-radius:50%;

  background:transparent;

  color:var(--cream);

  opacity:0;

  visibility:hidden;

  transform:translateY(10px);

  transition:.3s ease;

}


#backTop.show{

  opacity:1;

  visibility:visible;

  transform:translateY(0);

}



/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:1200px){

  .nav{
    gap:13px;
  }

  .nav a{
    font-size:14px;
  }

  .issue-btn{
    display:none;
  }

}


@media(max-width:1100px){

  .container{
    width:calc(100% - 50px);
  }

  .about-layout,
  .history-heading,
  .team-heading,
  .community-heading,
  .contact-grid{
    gap:45px;
  }

  .values-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .history-feature{
    grid-template-columns:1fr 1fr;
  }

  .community-layout{
    grid-template-columns:1fr 1fr;
  }

}


@media(max-width:900px){

  .header-top{
    display:none;
  }

  .header-main{
    width:calc(100% - 36px);
    min-height:70px;
  }

  .nav{
    display:none;
  }

  .header-actions{
    margin-left:auto;
  }

  .hamburger{
    display:block;
  }

  .footer-main{
    width:calc(100% - 36px);
    grid-template-columns:1fr;
    gap:50px;
  }

  .footer-word{
    width:calc(100% - 36px);
    font-size:130px;
  }

  .footer-bottom{
    width:calc(100% - 36px);
  }

  .about-layout,
  .history-heading,
  .team-heading,
  .community-heading,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .history-feature,
  .team-feature,
  .community-layout{
    grid-template-columns:1fr;
  }

  .about-image,
  .history-photo,
  .team-photo{
    min-height:500px;
  }

}


@media(max-width:760px){

  .container{
    width:calc(100% - 36px);
  }

  .about-hero,
  .hero-container{
    min-height:calc(100vh - 70px);
  }

  .hero-content{
    padding:55px 0;
  }

  .hero-content h1{
    font-size:clamp(55px,15vw,85px);
  }

  .hero-top,
  .hero-bottom{
    gap:20px;
  }

  .hero-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .about-image,
  .history-photo,
  .team-photo,
  .community-image{
    min-height:450px;
  }

  .history-copy,
  .team-content{
    padding:40px 30px;
  }

  .values-grid{
    grid-template-columns:1fr;
  }

  .values-header{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .team-bottom{
    grid-template-columns:1fr 1fr;
  }

  .contact-grid{
    gap:40px;
  }

}


@media(max-width:600px){

  .header-main{
    width:calc(100% - 30px);
    min-height:65px;
  }

  .logo-name{
    font-size:18px;
  }

  .logo-symbol{
    transform:scale(.9);
    transform-origin:left center;
  }

  .header-actions{
    gap:5px;
  }

  .search-btn{
    width:35px;
  }

  .mobile-inner{
    padding-left:20px;
    padding-right:20px;
  }

  .mobile-menu nav a{
    font-size:16px;
  }

  .footer{
    padding-top:65px;
  }

  .footer-main{
    width:calc(100% - 30px);
  }

  .footer-nav{
    grid-template-columns:1fr 1fr;
    gap:35px 25px;
  }

  .footer-nav span{
    font-size:14px;
  }

  .footer-nav a{
    font-size:16px;
  }

  .footer-word{
    width:calc(100% - 30px);
    margin-top:60px;
    font-size:105px;
  }

  .footer-bottom{
    width:calc(100% - 30px);
    flex-direction:column;
    align-items:flex-start;
    font-size:12px;
  }

  #backTop{
    align-self:flex-end;
  }

  .container{
    width:calc(100% - 30px);
  }

  .hero-top{
    font-size:7px;
  }

  .hero-content h1{
    font-size:52px;
  }

  .hero-content p{
    font-size:14px;
  }

  .about-section,
  .values-section,
  .history-section,
  .team-section,
  .community-section{
    padding:35px 0;
  }

  .history-copy,
  .team-content{
    padding:35px 22px;
  }

  .team-bottom{
    grid-template-columns:1fr;
  }

  .team-bottom span{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .team-bottom span:last-child{
    border-bottom:0;
  }

  .newsletter-inner{
    width:calc(100% - 30px);
  }

  #newsletterForm{
    display:block;
    border-bottom:0;
  }

  #newsletterEmail{
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.25);
  }

  #newsletterForm button{
    margin-top:20px;
  }

}


@media(max-width:480px){

  .search-container{
    width:calc(100% - 30px);
  }

  .search-container h2{
    font-size:48px;
  }

  .hero-content h1{
    font-size:45px;
  }

  .hero-content p{
    font-size:13px;
  }

  .section-name{
    font-size:8px;
  }

  .about-text h2,
  .history-heading h2,
  .team-heading h2,
  .community-heading h2{
    font-size:42px;
  }

  .mission-content h2{
    font-size:45px;
  }

  .contact-copy h2{
    font-size:48px;
  }

}


@media(max-width:380px){

  .footer-word{
    font-size:90px;
  }

  .hero-content h1{
    font-size:41px;
  }

}

.mobile-menu.open{
    transform:translate3d(0,0,0) !important;
    -webkit-transform:translate3d(0,0,0) !important;
}

.mobile-inner{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;

    padding-left:20px !important;
    padding-right:20px !important;

    overflow-x:hidden !important;
}

.mobile-menu nav{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;
}

.mobile-menu nav a{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;

    grid-template-columns:
        35px
        minmax(0,1fr)
        25px !important;
}

.mobile-menu nav a span{
    min-width:0;
}

.mobile-menu nav a i{
    min-width:0;
    text-align:right;
}

.mobile-close{
    right:20px !important;
    top:22px !important;

    flex-shrink:0;

    z-index:2;
}


/* =====================================================
   MOBILE ONLY
===================================================== */

@media (max-width:600px){

    .mobile-menu{
        width:100vw !important;
        max-width:100vw !important;

        left:0 !important;
        right:0 !important;

        overflow-x:hidden !important;
    }

    .mobile-inner{
        width:100% !important;
        padding:
            80px 20px 25px !important;
    }

    .mobile-menu nav a{
        grid-template-columns:
            30px
            minmax(0,1fr)
            24px !important;

        gap:10px !important;

        padding:14px 0 !important;
    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width:380px){

    .mobile-inner{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .mobile-menu nav a{
        grid-template-columns:
            26px
            minmax(0,1fr)
            22px !important;

        gap:8px !important;
    }

}