/* =========================================================
   TERENCIO VERDE
   COMPLETE HOMEPAGE STYLES
   SELF-CONTAINED
   ========================================================= */


/* =========================================================
   BRAND COLORS
   ========================================================= */

:root {
  --forest: #18392b;
  --forest-deep: #0b2118;
  --forest-black: #07150f;

  --cream: #f2eadb;
  --cream-light: #faf6ee;

  --taupe: #b9a78d;
  --brown: #4a3528;
  --brown-dark: #241a14;

  --gold: #b38a43;
  --gold-light: #d0ae68;
  --gold-dark: #826126;

  --black: #171713;
  --white: #fffdf8;

  --page-width: 1400px;
  --side-padding: 7%;
}


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

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


html {
  scroll-behavior: smooth;
}


body {
  min-height: 100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: var(--cream);

  color: var(--black);

  overflow-x: hidden;
}


img {
  display: block;
  max-width: 100%;
  height: auto;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.serif {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


.eyebrow {
  margin-bottom: 18px;

  font-size: .72rem;
  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--gold-light);
}


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

.site-header {
  position: sticky;

  top: 0;

  z-index: 1000;

  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding:
    0
    max(
      var(--side-padding),
      env(safe-area-inset-right)
    )
    0
    max(
      var(--side-padding),
      env(safe-area-inset-left)
    );

  background:
    rgba(
      9,
      28,
      20,
      .97
    );

  backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid
    rgba(
      179,
      138,
      67,
      .20
    );

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.15);

  color: var(--cream);
}


.site-brand {
  flex-shrink: 0;

  min-height: 44px;

  display: inline-flex;

  align-items: center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: .95rem;

  letter-spacing: 2.2px;

  text-transform: uppercase;

  color: var(--cream);
}


.site-nav {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 28px;
}


.site-nav a {
  position: relative;

  min-height: 44px;

  display: inline-flex;

  align-items: center;

  font-size: .7rem;

  font-weight: 600;

  letter-spacing: 1.35px;

  text-transform: uppercase;

  color:
    rgba(
      242,
      234,
      219,
      .72
    );

  transition:
    color .2s ease;
}


.site-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;

  bottom: 8px;

  height: 1px;

  background: var(--gold);

  transition:
    right .25s ease;
}


.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--cream);
}


.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  right: 0;
}


#storeNav {
  display: none;
}


/* =========================================================
   MUSIC INTRO
   ========================================================= */

#intro {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  background:
    radial-gradient(
      circle at 50% 38%,
      #315844 0%,
      #18392b 45%,
      #07150f 100%
    );

  color: var(--cream);

  text-align: center;

  transition:
    opacity .7s ease,
    visibility .7s ease;
}


#intro.hidden {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


.intro-inner {
  width: min(820px, 92vw);
}


.intro-mark {
  width: 90px;

  height: 90px;

  margin: 0 auto 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(
      179,
      138,
      67,
      .55
    );

  border-radius: 50%;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 2rem;

  color: var(--gold-light);
}


.intro-kicker {
  margin-bottom: 18px;

  font-size: .68rem;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  color:
    rgba(
      255,
      255,
      255,
      .52
    );
}


.intro-title {
  margin-bottom: 34px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.8rem,
      10vw,
      8rem
    );

  line-height: .86;

  font-weight: 400;

  color: var(--cream);
}


.intro-buttons {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;
}


.intro-buttons button {
  min-height: 48px;

  padding:
    13px
    23px;

  border-radius: 2px;
}


#enterMusic {
  border:
    1px solid
    var(--cream);

  background: var(--cream);

  color: var(--forest-deep);
}


#enterQuiet {
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .35
    );

  background: transparent;

  color: white;
}


.music-credit {
  margin-top: 20px;

  font-size: .7rem;

  color:
    rgba(
      255,
      255,
      255,
      .42
    );
}


/* =========================================================
   HOMEPAGE HERO
   ========================================================= */

.home-hero {
  position: relative;

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

  display: flex;

  align-items: center;

  overflow: hidden;

  color: var(--cream);

  background-image:

    linear-gradient(
      90deg,
      rgba(6, 22, 15, .86) 0%,
      rgba(8, 29, 20, .68) 43%,
      rgba(12, 35, 24, .20) 72%,
      rgba(4, 17, 12, .15) 100%
    ),

    url("/assets/ceiling-texture-cropped.png");

  background-size: cover;

  background-position: center;

  border-bottom:
    7px solid
    var(--brown-dark);
}


.home-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.03) 55%,
      rgba(0,0,0,.34) 100%
    );
}


.home-hero-inner {
  position: relative;

  z-index: 2;

  width:
    min(
      var(--page-width),
      100%
    );

  margin: 0 auto;

  padding:
    105px
    var(--side-padding);
}


.home-hero-copy {
  max-width: 760px;
}


.home-hero .eyebrow {
  color: var(--gold-light);
}


.home-hero h1 {
  max-width: 820px;

  margin-bottom: 26px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      4.2rem,
      8.5vw,
      8rem
    );

  line-height: .9;

  font-weight: 400;

  color: var(--cream);

  text-wrap: balance;

  text-shadow:
    0 3px 18px
    rgba(0,0,0,.24);
}


.home-hero-subhead {
  max-width: 620px;

  font-size:
    clamp(
      1rem,
      1.8vw,
      1.2rem
    );

  line-height: 1.75;

  color:
    rgba(
      255,
      255,
      255,
      .82
    );
}


.home-hero-note {
  max-width: 560px;

  margin-top: 25px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: .92rem;

  font-style: italic;

  line-height: 1.6;

  color:
    rgba(
      255,
      255,
      255,
      .57
    );
}


/* =========================================================
   BRAND INTRO
   ========================================================= */

.home-intro {
  position: relative;

  overflow: hidden;

  padding:
    120px
    var(--side-padding);

  background:

    linear-gradient(
      rgba(242,234,219,.95),
      rgba(242,234,219,.95)
    ),

    repeating-linear-gradient(
      0deg,
      #efe5d3,
      #efe5d3 45px,
      #dfd0b8 46px,
      #dfd0b8 48px
    );
}


.home-intro-inner {
  position: relative;

  z-index: 2;

  width:
    min(
      var(--page-width),
      100%
    );

  margin: 0 auto;
}


.home-intro-content {
  max-width: 900px;
}


.home-intro h2 {
  max-width: 850px;

  margin-bottom: 26px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5.5rem
    );

  line-height: .98;

  font-weight: 400;

  color: var(--forest-deep);
}


.home-intro p {
  max-width: 760px;

  font-size: 1.08rem;

  line-height: 1.85;

  color: #585d55;
}


.home-intro::after {
  content: "TV";

  position: absolute;

  right: 2%;

  top: 50%;

  transform:
    translateY(-50%);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      12rem,
      30vw,
      30rem
    );

  line-height: .7;

  color:
    rgba(
      24,
      57,
      43,
      .045
    );

  pointer-events: none;
}


/* =========================================================
   COLLECTIONS
   ========================================================= */

.home-collections {
  padding:
    110px
    var(--side-padding);

  background: var(--cream-light);
}


.home-collections-inner {
  width:
    min(
      var(--page-width),
      100%
    );

  margin: 0 auto;
}


.home-section-heading {
  max-width: 820px;

  margin-bottom: 58px;
}


.home-section-heading h2 {
  margin-bottom: 20px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5rem
    );

  line-height: 1;

  font-weight: 400;

  color: var(--forest-deep);
}


.home-section-heading p {
  max-width: 700px;

  line-height: 1.75;

  color: #62645e;
}


.home-collection-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 20px;
}


.home-collection-card {
  position: relative;

  min-height: 470px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding: 36px;

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

  background: var(--forest);

  box-shadow:
    0 12px 35px
    rgba(36,23,15,.10);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.home-collection-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.14);
}


.home-collection-card::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 20%,
      rgba(0,0,0,.80) 100%
    );

  pointer-events: none;
}


.home-collection-content {
  position: relative;

  z-index: 2;

  color: white;
}


.home-collection-content small {
  display: block;

  margin-bottom: 12px;

  font-size: .68rem;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--gold-light);
}


.home-collection-content h3 {
  margin-bottom: 10px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.3rem
    );

  line-height: 1;

  font-weight: 400;

  color: white;
}


.home-collection-content p {
  max-width: 480px;

  line-height: 1.65;

  color:
    rgba(
      255,
      255,
      255,
      .74
    );
}


/* HOMETOWN */

.home-card-hometown {
  background:

    linear-gradient(
      rgba(10,35,24,.15),
      rgba(10,35,24,.12)
    ),

    url("/assets/hometown-mainstreet.jpg"),

    linear-gradient(
      135deg,
      #496552,
      #6f674f
    );

  background-size: cover;

  background-position: center;
}


/* ARTIST COLLABORATIONS */

.home-card-collabs {
  background:

    radial-gradient(
      circle at 70% 25%,
      rgba(186,143,67,.22),
      transparent 35%
    ),

    url("collaboration-bg.jpg"),

    linear-gradient(
      135deg,
      #173a2b,
      #08180f
    );

  background-size: cover;

  background-position: center;
}


/* WEB3 */

.home-card-web3 {
  background:

    radial-gradient(
      circle at 78% 24%,
      rgba(108,63,167,.42),
      transparent 35%
    ),

    radial-gradient(
      circle at 20% 78%,
      rgba(35,132,127,.18),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #050b12,
      #12182c,
      #30123f
    );
}


/* INTERACTIVE */

.home-card-interactive {
  background:

    linear-gradient(
      rgba(14,38,27,.20),
      rgba(14,38,27,.12)
    ),

    url("interactive-bg.jpg"),

    linear-gradient(
      135deg,
      #64695a,
      #314137
    );

  background-size: cover;

  background-position: center;
}


/* =========================================================
   HOMETOWN PREVIEW
   ========================================================= */

.home-hometown {
  padding:
    110px
    var(--side-padding);

  background:
    linear-gradient(
      135deg,
      #173a2b,
      #0c271b
    );

  color: var(--cream);

  border-top:
    7px solid
    var(--brown-dark);

  border-bottom:
    7px solid
    var(--brown-dark);
}


.home-hometown-inner {
  width:
    min(
      var(--page-width),
      100%
    );

  margin: 0 auto;
}


.home-hometown h2 {
  max-width: 950px;

  margin-bottom: 46px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5.5rem
    );

  line-height: 1;

  font-weight: 400;

  color: var(--cream);
}


.home-memory-grid {
  display: grid;

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

  gap: 10px;
}


.home-memory {
  position: relative;

  min-height: 310px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding: 22px;

  background-size: cover;

  background-position: center;

  border:
    1px solid
    rgba(199,154,77,.14);
}


.home-memory::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 32%,
      rgba(0,0,0,.72)
    );
}


.home-memory span {
  position: relative;

  z-index: 2;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.3rem;

  color: white;
}


.home-memory-river {
  background:
    url("/assets/hometown-river.jpg"),
    #546f5e;

  background-size: cover;

  background-position: center;
}


.home-memory-mainstreet {
  background:
    url("/assets/hometown-mainstreet.jpg"),
    #765943;

  background-size: cover;

  background-position: center;
}


.home-memory-music {
  background:
    url("/assets/hometown-music.jpg"),
    #43382d;

  background-size: cover;

  background-position: center;
}


.home-memory-fire {
  background:
    url("/assets/hometown-fire.jpg"),
    #60432e;

  background-size: cover;

  background-position: center;
}


/* =========================================================
   GLOBAL MESSAGE
   ========================================================= */

.home-global {
  padding:
    125px
    var(--side-padding);

  background:
    linear-gradient(
      90deg,
      #0a1d14,
      #18392b
    );

  color: white;
}


.home-global-inner {
  width:
    min(
      var(--page-width),
      100%
    );

  margin: 0 auto;
}


.home-global-content {
  max-width: 1000px;
}


.home-global h2 {
  max-width: 900px;

  margin-bottom: 26px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.3rem,
      7vw,
      6rem
    );

  line-height: .96;

  font-weight: 400;

  color: white;
}


.home-global p {
  max-width: 760px;

  font-size: 1.08rem;

  line-height: 1.8;

  color:
    rgba(
      255,
      255,
      255,
      .68
    );
}


.home-global-line {
  width: 100px;

  height: 3px;

  margin-top: 35px;

  background: var(--gold);
}


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

.site-footer {
  padding:

    58px
    max(
      var(--side-padding),
      env(safe-area-inset-right)
    )
    calc(
      58px +
      env(safe-area-inset-bottom)
    )
    max(
      var(--side-padding),
      env(safe-area-inset-left)
    );

  background: var(--forest-black);

  border-top:
    1px solid
    rgba(
      179,
      138,
      67,
      .20
    );

  color:
    rgba(
      255,
      255,
      255,
      .55
    );
}


.footer-inner {
  width:
    min(
      var(--page-width),
      100%
    );

  margin: 0 auto;
}


.footer-mark {
  width: 58px;

  height: 58px;

  margin-bottom: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(
      179,
      138,
      67,
      .48
    );

  border-radius: 50%;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.25rem;

  color: var(--gold-light);
}


.footer-brand {
  display: block;

  margin-bottom: 7px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.45rem;

  font-weight: 400;

  color: var(--cream);
}


.footer-tagline {
  display: block;

  max-width: 620px;

  line-height: 1.6;
}


.footer-contact {
  margin-top: 26px;
}


.footer-label {
  margin-bottom: 6px;

  font-size: .68rem;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--gold-light);
}


.footer-email {
  min-height: 44px;

  display: inline-flex;

  align-items: center;

  color: var(--cream);
}


.footer-email:hover {
  color: var(--gold-light);
}


.footer-copyright {
  margin-top: 28px;

  font-size: .78rem;

  color:
    rgba(
      255,
      255,
      255,
      .38
    );
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible {
  outline:
    2px solid
    var(--gold-light);

  outline-offset: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 900px) {

  :root {
    --side-padding: 6%;
  }


  .site-header {
    min-height: 66px;
  }


  .site-nav {
    gap: 18px;
  }


  .site-nav a {
    font-size: .66rem;
  }


  .home-hero {
    min-height:
      calc(
        100dvh - 66px
      );
  }


  .home-hero-inner {
    padding-top: 80px;

    padding-bottom: 70px;
  }


  .home-hero h1 {
    font-size:
      clamp(
        3.5rem,
        13vw,
        6rem
      );
  }


  .home-intro {
    padding-top: 85px;

    padding-bottom: 85px;
  }


  .home-collections {
    padding-top: 80px;

    padding-bottom: 80px;
  }


  .home-collection-grid {
    grid-template-columns: 1fr;
  }


  .home-collection-card {
    min-height: 380px;
  }


  .home-hometown {
    padding-top: 80px;

    padding-bottom: 80px;
  }


  .home-memory-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .home-memory {
    min-height: 240px;
  }


  .home-global {
    padding-top: 90px;

    padding-bottom: 90px;
  }

}


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

@media
(max-width: 700px) {

  .site-nav {
    display: none;
  }


  .site-header {
    min-height: 64px;
  }

}


@media
(max-width: 560px) {

  .home-hero h1 {
    font-size:
      clamp(
        3.15rem,
        15vw,
        4.8rem
      );
  }


  .home-hero-subhead {
    font-size: 1rem;
  }


  .home-memory-grid {
    grid-template-columns: 1fr;
  }


  .home-memory {
    min-height: 225px;
  }


  .intro-title {
    font-size:
      clamp(
        3.4rem,
        18vw,
        5.4rem
      );
  }

}