/* =========================================================
   TOGETHER MAGAZINE — OUR MISSION
   FULL 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;

  /* SHARED HEADER / FOOTER ALIASES */

  --charcoal:var(--ink);
  --cream:var(--paper-light);
  --terracotta:var(--orange);
  --mustard:var(--gold);
  --taupe:var(--paper-dark);
  --container:var(--max);

}


/* =========================================================
   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{
  width:100%;
  max-width:100%;
  display:block;
}


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-left:auto;
  margin-right: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:#fff;

  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:8px;

  font-family:var(--sans);

  font-size:8px;

  letter-spacing:.45em;

}


.loader-line{

  width:180px;
  height:2px;

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

}


.loader-line span{

  display:block;

  height:100%;
  width:0;

  background:var(--orange);

  animation:loaderProgress 1.5s ease forwards;

}


@keyframes loaderProgress{

  to{
    width:100%;
  }

}



/* =====================================================
   SHARED HEADER
===================================================== */

.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(--container),
    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;

  line-height:1.3;

}


.mobile-menu nav a span{

  color:#77736c;

  font-size:12px;

}


.mobile-menu nav a i{

  color:var(--terracotta);

  font-size:12px;

  text-align:right;

}


.mobile-bottom{

  margin-top:auto;

  padding-top:35px;

  color:#77736c;

  font-size:12px;

  letter-spacing:1.5px;

}



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

.search-overlay{

  position:fixed;

  inset:0;

  z-index:6000;

  display:flex;

  align-items:center;

  background:var(--cream);

  opacity:0;

  visibility:hidden;

  transition:.3s ease;

}


.search-overlay.open{

  opacity:1;

  visibility:visible;

}


.search-close{

  position:absolute;

  top:25px;

  right:25px;

  width:45px;

  height:45px;

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

  border-radius:50%;

  background:transparent;

  font-size:18px;

}


.search-container{

  width:min(
    900px,
    calc(100% - 50px)
  );

  margin:auto;

}


.search-container > span{

  color:var(--terracotta);

  font-size:16px;

  font-weight:700;

  letter-spacing:2px;

}


.search-container h2{

  margin-top:18px;

  font-family:var(--serif);

  font-size:clamp(55px,8vw,95px);

  font-weight:400;

  line-height:.9;

}


.search-container h2 em{

  color:var(--terracotta);

}


.search-container form{

  margin-top:45px;

  display:flex;

  border-bottom:2px solid var(--charcoal);

}


.search-container input{

  width:100%;

  min-width:0;

  padding:15px 0;

  border:0;

  outline:0;

  background:transparent;

  font-size:18px;

}


.search-container button{

  width:55px;

  flex-shrink:0;

  border:0;

  background:transparent;

  font-size:18px;

}


#searchMessage{

  margin-top:15px;

  color:var(--terracotta);

  font-size:16px;

}



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

.mission-hero{

  position:relative;

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

  overflow:hidden;

  background:var(--ink);

  color:#fff;

}


.mission-hero-image{

  position:absolute;

  inset:0;

}


.mission-hero-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  filter:saturate(.7);

  transform:scale(1.03);

}


.mission-hero-overlay{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(23,23,22,.96) 0%,
      rgba(23,23,22,.86) 38%,
      rgba(23,23,22,.38) 72%,
      rgba(23,23,22,.2) 100%
    );

}


.mission-grid{

  position:absolute;

  inset:0;

  opacity:.14;

  background-image:

    linear-gradient(
      rgba(255,255,255,.3) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.3) 1px,
      transparent 1px
    );

  background-size:80px 80px;

}


.hero-circle{

  position:absolute;

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

  border-radius:50%;

}


.hero-circle-one{

  width:650px;
  height:650px;

  right:-200px;
  top:-130px;

}


.hero-circle-two{

  width:420px;
  height:420px;

  right:-70px;
  top:25px;

}


.mission-hero-inner{

  position:relative;

  z-index:2;

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

  padding-top:40px;
  padding-bottom:40px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

}


.mission-hero-top{

  display:flex;

  justify-content:space-between;

  padding-bottom:17px;

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

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:#aaa;

}


.mission-hero-content{

  max-width:950px;

  padding:70px 0;

}


.hero-eyebrow{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:25px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.22em;

}


.hero-eyebrow span{

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--orange);

}


.mission-hero-content h1{

  font-family:var(--serif);

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

  font-weight:400;

  line-height:.86;

  letter-spacing:-.055em;

}


.mission-hero-content h1 em{

  color:var(--orange);

}


.mission-hero-content p{

  margin-top:32px;

  font-family:var(--serif);

  font-size:25px;

  color:#d4d0c9;

}


.hero-scroll{

  display:inline-flex;

  align-items:center;

  gap:15px;

  margin-top:35px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.16em;

}


.hero-scroll span{

  width:40px;
  height:40px;

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

  display:grid;

  place-items:center;

  transition:.25s ease;

}


.hero-scroll:hover span{

  background:var(--orange);

  border-color:var(--orange);

}


.mission-hero-bottom{

  display:flex;

  align-items:center;

  gap:12px;

  padding-top:18px;

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

  font-size:8px;

  font-weight:700;

  letter-spacing:.18em;

  color:#aaa;

}


.mission-hero-bottom b{

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--orange);

}



/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading{

  display:flex;

  align-items:flex-start;

  gap:18px;

  padding-bottom:18px;

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

}


.section-number{

  font-family:var(--serif);

  font-size:21px;

}


.section-title-wrap span{

  display:block;

  margin-bottom:15px;

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:var(--muted);

}


.section-title-wrap h2{

  font-family:var(--serif);

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

  font-weight:400;

  line-height:.95;

  letter-spacing:-.045em;

}


.section-title-wrap h2 em{

  color:var(--orange);

}



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

.mission-main{

  padding:40px 0;

  background:var(--paper);

}


.mission-main-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  padding-top:40px;

}


.mission-image{

  position:relative;

  min-height:650px;

  overflow:hidden;

  background:var(--paper-dark);

}


.mission-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .8s ease;

}


.mission-image:hover img{

  transform:scale(1.04);

}


.mission-image-shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      to top,
      rgba(0,0,0,.78),
      transparent 62%
    );

}


.mission-image-info{

  position:absolute;

  left:30px;
  right:30px;
  bottom:30px;

  color:#fff;

}


.mission-image-info span{

  display:block;

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

}


.mission-image-info strong{

  display:block;

  margin-top:10px;

  font-family:var(--serif);

  font-size:43px;

  font-weight:400;

  line-height:1.02;

}


.mission-image-number{

  position:absolute;

  top:22px;
  right:22px;

  width:48px;
  height:48px;

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

  display:grid;

  place-items:center;

  color:#fff;

  font-family:var(--serif);

}


.mission-main-copy{

  align-self:center;

}


.copy-label{

  display:block;

  margin-bottom:18px;

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:var(--muted);

}


.mission-main-copy h3{

  max-width:650px;

  margin-bottom:28px;

  font-family:var(--serif);

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

  font-weight:400;

  line-height:.98;

  letter-spacing:-.04em;

}


.mission-main-copy h3 em{

  color:var(--orange);

}


.copy-lead{

  max-width:650px;

  margin-bottom:35px;

  font-family:var(--serif);

  font-size:21px;

  line-height:1.55;

}


.mission-points{

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

}


.mission-point{

  display:grid;

  grid-template-columns:35px 1fr;

  gap:18px;

  padding:22px 0;

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

  transition:.25s ease;

}


.mission-point > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.15em;

  color:var(--orange);

}


.mission-point h4{

  font-family:var(--serif);

  font-size:24px;

  font-weight:400;

}


.mission-point p{

  max-width:480px;

  margin-top:7px;

  font-size:11px;

  line-height:1.7;

  color:var(--muted);

}



/* =========================================================
   QUOTE / REMAINING MISSION PAGE STYLES
========================================================= */

.quote-section{

  position:relative;

  overflow:hidden;

  padding:110px 0;

  background:var(--ink);

  color:#fff;

}


.quote-background{

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 75% 35%,
      rgba(201,92,56,.18),
      transparent 35%
    );

}


.quote-circle{

  position:absolute;

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

  border-radius:50%;

}


.quote-circle-a{

  width:600px;
  height:600px;

  right:-200px;
  top:-180px;

}


.quote-circle-b{

  width:300px;
  height:300px;

  left:-120px;
  bottom:-150px;

}


.quote-container{

  position:relative;

  z-index:2;

  text-align:center;

}


.quote-label{

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:#aaa;

}


.quote-mark{

  margin-top:25px;

  font-family:var(--serif);

  font-size:100px;

  line-height:.6;

  color:var(--orange);

}


.quote-section blockquote{

  max-width:950px;

  margin:30px auto;

  font-family:var(--serif);

  font-size:clamp(30px,4vw,52px);

  font-weight:400;

  line-height:1.15;

}


.quote-author{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:14px;

}


.quote-author > span{

  width:35px;
  height:1px;

  background:var(--orange);

}


.quote-author strong{

  display:block;

  font-family:var(--serif);

  font-size:18px;

  font-weight:400;

}


.quote-author small{

  display:block;

  margin-top:4px;

  color:#777;

  font-size:7px;

  font-weight:700;

  letter-spacing:.18em;

}


.quote-caption{

  margin-top:60px;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:15px;

  color:#777;

  font-size:8px;

  font-weight:700;

  letter-spacing:.18em;

}


.quote-caption i{

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--orange);

}



/* =========================================================
   BELIEF
========================================================= */

.belief-section{

  padding:100px 0;

  background:var(--paper-light);

}


.belief-layout{

  display:grid;

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

  gap:80px;

  padding-top:60px;

}


.belief-copy{

  align-self:center;

}


.belief-number{

  font-family:var(--serif);

  font-size:80px;

  color:var(--paper-dark);

  line-height:.8;

}


.belief-copy p{

  margin-top:30px;

  font-size:14px;

  line-height:1.8;

  color:var(--muted);

}


.belief-copy .belief-lead{

  font-family:var(--serif);

  font-size:30px;

  line-height:1.25;

  color:var(--ink);

}


.handwritten{

  margin-top:35px;

  font-family:var(--script);

  font-size:35px;

  color:var(--orange);

}


.belief-image{

  position:relative;

  min-height:600px;

  overflow:hidden;

}


.belief-image img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.belief-image-caption{

  position:absolute;

  left:30px;
  bottom:30px;

  color:#fff;

}


.belief-image-caption span{

  display:block;

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

}


.belief-image-caption strong{

  display:block;

  margin-top:10px;

  font-family:var(--serif);

  font-size:40px;

  font-weight:400;

  line-height:1;

}


.belief-image-caption em{

  color:var(--orange);

}



/* =========================================================
   GENERATIONS
========================================================= */

.generations-section{

  padding:100px 0;

  background:var(--paper);

}


.generations-header{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap:50px;

  padding-bottom:40px;

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

}


.generations-header > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

  color:var(--muted);

}


.generations-header h2{

  max-width:800px;

  font-family:var(--serif);

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

  font-weight:400;

  line-height:.95;

  letter-spacing:-.04em;

}


.generations-header h2 em{

  color:var(--orange);

}


.generation-cards{

  display:grid;

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

  gap:25px;

  padding-top:45px;

}


.generation-card{

  background:var(--paper-light);

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

  overflow:hidden;

}


.generation-image{

  height:330px;

  overflow:hidden;

}


.generation-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .8s ease;

}


.generation-card:hover .generation-image img{

  transform:scale(1.05);

}


.generation-content{

  padding:25px;

}


.generation-content > span{

  color:var(--orange);

  font-size:8px;

  font-weight:700;

  letter-spacing:.15em;

}


.generation-content h3{

  margin-top:12px;

  font-family:var(--serif);

  font-size:32px;

  font-weight:400;

}


.generation-content p{

  margin-top:10px;

  color:var(--muted);

  font-size:11px;

  line-height:1.7;

}



/* =========================================================
   ACTION
========================================================= */

.action-section{

  position:relative;

  min-height:650px;

  display:flex;

  align-items:center;

  overflow:hidden;

  background:var(--ink);

  color:#fff;

}


.action-image{

  position:absolute;

  inset:0;

}


.action-image img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.action-overlay{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(23,23,22,.95),
      rgba(23,23,22,.55),
      rgba(23,23,22,.25)
    );

}


.action-container{

  position:relative;

  z-index:2;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:50px;

}


.action-content{

  max-width:700px;

}


.action-content > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

  color:#aaa;

}


.action-content h2{

  margin-top:25px;

  font-family:var(--serif);

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

  font-weight:400;

  line-height:.9;

  letter-spacing:-.05em;

}


.action-content h2 em{

  color:var(--orange);

}


.action-content p{

  max-width:600px;

  margin-top:30px;

  color:#d0cbc4;

  font-family:var(--serif);

  font-size:19px;

  line-height:1.5;

}


.action-stamp{

  width:160px;
  height:160px;

  flex-shrink:0;

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

  border-radius:50%;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  transform:rotate(-10deg);

}


.action-stamp div{

  font-family:var(--serif);

  font-size:25px;

}


.action-stamp span{

  margin-top:5px;

  color:var(--orange);

  font-size:7px;

  font-weight:700;

  letter-spacing:.2em;

}



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

.mission-closing{

  padding:110px 0;

  background:var(--orange);

  color:#fff;

  text-align:center;

}


.closing-inner > span{

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

}


.closing-inner h2{

  max-width:1000px;

  margin:30px auto;

  font-family:var(--serif);

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

  font-weight:400;

  line-height:.9;

  letter-spacing:-.05em;

}


.closing-inner h2 em{

  color:var(--ink);

  font-style:italic;

}


.closing-inner p{

  font-family:var(--script);

  font-size:35px;

}


.closing-symbol{

  margin:45px auto 0;

  display:flex;

  justify-content:center;

  gap:6px;

}


.closing-symbol i{

  width:12px;
  height:12px;

  border-radius:50%;

  background:#fff;

}


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

  background:var(--gold);

}


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

  background:var(--sage);

}


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

  background:var(--ink);

}



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

.contact-section{

  padding:100px 0;

  background:var(--paper-light);

}


.contact-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:100px;

}


.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,5vw,75px);

  font-weight:400;

  line-height:.95;

  letter-spacing:-.04em;

}


.contact-copy h2 em{

  color:var(--orange);

}


.contact-copy p{

  max-width:500px;

  margin-top:25px;

  color:var(--muted);

  font-size:13px;

  line-height:1.8;

}


.contact-form{

  display:flex;

  flex-direction:column;

  gap:25px;

}


.contact-form label{

  display:flex;

  flex-direction:column;

  gap:9px;

  color:var(--muted);

  font-size:8px;

  font-weight:700;

  letter-spacing:.16em;

}


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

  width:100%;

  padding:14px 0;

  border:0;

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

  outline:0;

  background:transparent;

  color:var(--ink);

  font-family:var(--sans);

  font-size:14px;

  resize:vertical;

}


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

  border-color:var(--orange);

}


.contact-form button{

  align-self:flex-start;

  display:flex;

  align-items:center;

  gap:20px;

  padding:14px 20px;

  border:0;

  background:var(--ink);

  color:#fff;

  font-size:9px;

  font-weight:700;

  letter-spacing:.14em;

  transition:.25s ease;

}


.contact-form button span{

  width:30px;
  height:30px;

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

  display:grid;

  place-items:center;

}


.contact-form button:hover{

  background:var(--orange);

}


.form-message,
.newsletter-message{

  min-height:18px;

  font-size:11px;

}



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

.newsletter-section{

  padding:90px 30px;

  background:var(--paper-dark);

}


.newsletter-inner{

  max-width:850px;

  margin:auto;

  text-align:center;

}


.newsletter-inner > span{

  color:var(--orange);

  font-size:8px;

  font-weight:700;

  letter-spacing:.22em;

}


.newsletter-inner h2{

  margin-top:20px;

  font-family:var(--serif);

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

  font-weight:400;

  line-height:.9;

  letter-spacing:-.045em;

}


.newsletter-inner h2 em{

  color:var(--orange);

}


.newsletter-inner > p{

  max-width:550px;

  margin:20px auto 0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;

}


.newsletter-inner form{

  max-width:650px;

  margin:35px auto 0;

  display:flex;

  border-bottom:2px solid var(--ink);

}


.newsletter-inner input{

  width:100%;

  min-width:0;

  padding:16px 0;

  border:0;

  outline:0;

  background:transparent;

  font-size:14px;

}


.newsletter-inner button{

  border:0;

  background:transparent;

  display:flex;

  align-items:center;

  gap:10px;

  padding:0 5px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.14em;

}


.newsletter-inner button i{

  color:var(--orange);

}



/* =====================================================
   SHARED FOOTER
===================================================== */

.footer{

  padding:75px 0 25px;

  color:var(--cream);

  background:var(--charcoal);

}


.footer-main{

  width:min(
    var(--container),
    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(--container),
    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(--container),
    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);

}



/* =========================================================
   MISSION PAGE RESPONSIVE
========================================================= */

@media(max-width:1200px){

  .mission-main-grid{
    gap:45px;
  }

  .nav{
    gap:13px;
  }

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

  .issue-btn{
    display:none;
  }

}


@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;
  }


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


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


  .mission-hero-content h1{
    font-size:clamp(55px,10vw,90px);
  }


  .mission-main-grid{
    grid-template-columns:1fr;
    gap:50px;
  }


  .mission-image{
    min-height:550px;
  }


  .belief-layout{
    grid-template-columns:1fr;
    gap:45px;
  }


  .generations-header{
    display:block;
  }


  .generations-header h2{
    margin-top:25px;
  }


  .generation-cards{
    grid-template-columns:1fr 1fr;
  }


  .action-container{
    align-items:flex-start;
    flex-direction:column;
  }


  .contact-grid{
    grid-template-columns:1fr;
    gap:55px;
  }


  .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);
  }

}


@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;
  }


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


  .mission-hero-content{
    padding:45px 0;
  }


  .mission-hero-content h1{
    font-size:52px;
    line-height:.9;
  }


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


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


  .mission-hero-bottom{
    font-size:7px;
  }


  .section-heading{
    gap:12px;
  }


  .section-title-wrap h2{
    font-size:48px;
  }


  .mission-main,
  .belief-section,
  .generations-section,
  .contact-section{
    padding:75px 0;
  }


  .mission-image{
    min-height:430px;
  }


  .mission-image-info strong{
    font-size:32px;
  }


  .copy-lead{
    font-size:18px;
  }


  .belief-number{
    font-size:65px;
  }


  .belief-copy .belief-lead{
    font-size:25px;
  }


  .belief-image{
    min-height:430px;
  }


  .generation-cards{
    grid-template-columns:1fr;
  }


  .generation-image{
    height:280px;
  }


  .action-section{
    min-height:600px;
  }


  .action-content h2{
    font-size:55px;
  }


  .action-stamp{
    width:120px;
    height:120px;
  }


  .action-stamp div{
    font-size:20px;
  }


  .closing-inner h2{
    font-size:52px;
  }


  .newsletter-section{
    padding:75px 20px;
  }


  .newsletter-inner h2{
    font-size:52px;
  }


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


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


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

}


@media(max-width:380px){

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


  .mission-hero-bottom{
    gap:7px;
  }


  .mission-hero-bottom b{
    width:3px;
    height:3px;
  }


  .footer-nav{
    grid-template-columns:1fr;
  }

}