/* ROOT VARIABLES */

:root{
  /* Brand Typography */
  --heading-font: brandon-grotesque,'Century Gothic',Arial,sans-serif;
  --body-font: franklin-gothic,'Arial Narrow',Arial,sans-serif;
  --display-font: hwt-showcard-script, cursive;
  --accent-font: brandon-grotesque,'Century Gothic',Arial,sans-serif;
  --mono-font: 'Courier New', Courier, monospace;
  --signature-font: var(--heading-font);
  --descriptor-font: var(--accent-font);
  --footer-font: var(--heading-font);

  /* Colors */
  --text-color: black;
  --background-color: #ebffde;
  --border-color: black;

  /* Layout */
  --max-width-content: 42rem;
  --max-width-nav: 64rem;
}

/* GLOBAL RESET / BASE */

*,*::before,*::after{box-sizing:border-box;}

html{scrollbar-width:none;}
html::-webkit-scrollbar {display: none;}

body{
  margin:0;
  font-family:var(--body-font);
  font-size:1em;
  line-height:1.5;
  color:var(--text-color);
  background:var(--background-color);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
ul{padding-left:1.2rem;}

/* TYPOGRAPHY */

h1,h2,h3{font-family:var(--heading-font);font-weight:500;letter-spacing:0.02em;line-height:1.25;}
h1{font-size:2.1rem;margin-bottom:1.25rem;text-wrap:balance;}
h2{font-size:1.6rem;margin-top:4rem;margin-bottom: 1.25rem;text-wrap:balance;}
h3{font-size:1.1rem;margin-top:1.25rem;text-wrap:balance;}
p{margin:1.25rem 0;text-wrap:pretty;}
li{margin-bottom:0.5rem;}

/* gwDesign Studio ADD ONS */

.original-script{font-family:var(--display-font);}
.hero-title{font-family:var(--display-font);font-size:3.5rem;}
.signature{font-family:var(--signature-font);font-size:1.8rem;}
.meta{font-family:var(--mono-font);  font-size:0.85rem;letter-spacing: 0.03em;}
.subdomain-title{font-family:var(--heading-font);font-size:clamp(2.5rem, 6vw, 4.5rem);margin:3rem 0 1rem;line-height:1;}
.sigil{font-family:var(--signature-font);font-size:2rem;margin-top:0.5rem;letter-spacing:0.05em;}
.landing{text-align:center;margin-top: 6rem;margin-bottom:6rem;}
.landing-line{width:4rem;height:2px;background: black;margin: 2rem auto;}
.descriptor{font-family:var(--descriptor-font);font-size:1rem;margin-top:1rem;opacity:1.0;letter-spacing:0.03em;}

/* PAGE LAYOUT */

main{max-width:var(--max-width-content);margin: 5rem auto;padding: 0 1.25rem;}

/* FOOTER */

.inline{display:none;}
.footer{font-family:var(--footer-font);font-size:0.8rem;margin:20px 0;display:flex;flex-direction:column;align-items:center;gap:1rem;opacity:1.0;}
.social{width:2rem;height:2rem;}
.privacy{font-family:var(--heading-font);display:inline-block;font-size:0.8rem;border-bottom:1px solid black;padding-bottom:1px;text-transform:lowercase;}

.star-symbol::before{
  content:"\2736 \2736 \2736 \2736"; /* Unicode for 'Six Pointed Black Star' */
  font-size:1rem;
  color:black;
  display:inline-block;
  margin:0 5px;
}

.star-symbol-bullet::before{
  content:"\2736"; /* Unicode for One 'Six Pointed Black Star' */
  font-size:1rem;
  color:black;
  display:inline-block;
  margin:0 5px;
  position:relative;
  top:0.3em;     /* your chosen offset */
  line-height:1; /* prevents zoom-induced baseline drift */
}

/* QUOTES */

.quote {
      display:inline-block;
      text-align:left;
      width:100%;
      padding:0px 0px;
      font-style:normal;
      border-top:0px dashed black;
      border-bottom:0px dashed black;
      margin:0;
    }

.attribution{display:inline;font-style:normal;}

/* HIDE SCROLLBARS */

.element{-ms-overflow-style:none;scrollbar-width:none;}
.element::-webkit-scrollbar{display:none;}

/* NAVIGATION */

.gwdesign{
  position:relative;
  display:block;
  width:100%;
  margin:20px -20px 0 20px;
  font-family:var(--heading-font);
  font-weight:500;
  font-size:3rem;
  color: black;
  border-top:0.15rem solid black;
  border-left:3px dashed black;
  border-top-left-radius: 20px;
  padding:0 10px 20px 18px;
  line-height:1em;
}

.gwdesign::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:2px;
  background:none;
  transform:translateX(-50%);
  z-index:-1;
}

.site-header{
  border-top:0px solid var(--border-color);
  border-bottom:0px solid var(--border-color);
  background:none;
  font-family:var(--heading-font);
}

.brand{display:block;font-family:var(--heading-font);font-weight:500;letter-spacing:0.02em;font-size:1rem;}
.nav{max-width:var(--max-width-nav);margin:0 auto;padding:1.25rem;display:flex;flex-direction:column;align-items:stretch;gap:1rem;}

.nav-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:1.25rem;
  white-space:nowrap;
  width:fit-content;      
  margin-left:auto;       
  margin-right:auto;
  justify-content:center;
  font-weight:500;
  letter-spacing:0.02em;
}

.nav-menu a{font-family:var(--heading-font);font-size:clamp(1.05rem, 2.6vw, 1.45rem);white-space:nowrap;}
.nav-menu a[aria-current="page"]{border-bottom:none;}

/* DESKTOP NAV */

@media (min-width: 4800px){
.site-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:10px auto 0 10px;padding:1.25rem;}
.gwdesign{width:auto;margin:0;}
.nav{padding:0;}
.nav-menu{gap:2.5rem;}
}