/* =========================================
   MATTHEW MOGLE PORTFOLIO
   Main stylesheet
========================================= */


/* =========================================
   EASY SETTINGS
========================================= */

:root {

  /* CHANGE YOUR FONT HERE */
  --site-font: Arial, Helvetica, sans-serif;

  /* COLORS */
  --background: #fffdf8;
  --text: #111111;
  --muted: #777777;
  --line: rgba(0, 0, 0, 0.14);

  /* WIDTH OF SITE */
  --site-width: 1200px;

  /*
    TILED GIF BACKGROUND

    Required file:
    images/background.gif
  */

  --pattern: url("images/background.gif");

  --pattern-size: clamp(360px, 42vw, 620px) auto;
}


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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  min-height: 100vh;

  color: var(--text);

  background-color: var(--background);

  background-image: var(--pattern);

  background-size: var(--pattern-size);

  background-repeat: repeat;

  background-position: top left;

  background-attachment: fixed;

  font-family: var(--site-font);

  -webkit-font-smoothing: antialiased;
}


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


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


svg {
  display: block;
}


/* Keep paragraph text left-aligned, even inside a centered parent. */
p {
  text-align: left;
}


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

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(255, 253, 248, 0.94);

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

  backdrop-filter: blur(10px);
}


.header-inner {

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

  min-height: 90px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 30px;
}


/* =========================================
   LOGO
========================================= */

.logo {

  justify-self: start;

  font-size: 1.4rem;

  font-weight: 900;

  letter-spacing: 0.16em;

  line-height: 1;

  text-transform: uppercase;
}


.logo span {
  display: block;
}


/* =========================================
   NAVIGATION
========================================= */

.main-nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 46px;
}


.main-nav a {

  position: relative;

  padding: 34px 0 30px;

  font-size: 0.86rem;

  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.main-nav a::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 22px;

  width: 0;

  height: 2px;

  background: var(--text);

  transform: translateX(-50%);

  transition: width 180ms ease;
}


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

  width: 100%;
}


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

.header-icons {

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 8px;
}


.icon-link {

  width: 44px;

  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  transition:
    background 160ms ease,
    transform 160ms ease;
}


.icon-link:hover {

  background: rgba(0, 0, 0, 0.06);

  transform: translateY(-2px);
}


.icon-link svg {

  width: 23px;

  height: 23px;
}


/* =========================================
   MAIN PAGE
========================================= */

.page {

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

  margin: 0 auto;

  padding:
    clamp(70px, 10vw, 150px)
    0
    120px;
}


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

.hero {

  min-height: 60vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;
}


.eyebrow {

  margin: 0 0 18px;

  color: var(--muted);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.hero h1 {

  margin: 0;

  max-width: 900px;

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

  line-height: 0.85;

  letter-spacing: -0.06em;
}


.hero-description {

  max-width: 660px;

  margin: 38px 0 0;

  font-size:
    clamp(
      1rem,
      2vw,
      1.25rem
    );

  line-height: 1.75;
}


/* =========================================
   SCROLLING CONTENT SECTIONS
========================================= */

.about-sections {

  display: grid;

  gap: 28px;
}


.about-card {

  min-height: 360px;

  padding:
    clamp(
      30px,
      5vw,
      60px
    );

  display: grid;

  grid-template-columns:
    minmax(180px, 0.7fr)
    minmax(0, 1.3fr);

  gap: 60px;

  align-items: start;

  background:
    rgba(
      255,
      253,
      248,
      0.90
    );

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

  border-radius: 22px;
}


.about-label {

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

  font-weight: 900;

  line-height: 0.9;

  letter-spacing: -0.05em;
}


.about-content h2 {

  margin:
    0
    0
    18px;

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.7rem
    );
}


.about-content p {

  max-width: 660px;

  margin: 0;

  line-height: 1.8;
}


.about-content p + p {

  margin-top: 18px;
}


/* =========================================
   LINKS / BUTTONS
========================================= */

.text-link {

  display: inline-block;

  margin-top: 24px;

  padding-bottom: 4px;

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

  font-size: 0.82rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


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

.site-footer {

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

  margin: 0 auto;

  padding: 32px 0 50px;

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

  color: var(--muted);

  font-size: 0.78rem;
}


/* =========================================
   FIXED RETURN TO TOP ICON
========================================= */

.back-to-top {

  position: fixed;

  right: 22px;

  bottom: 22px;

  z-index: 90;

  width: 50px;

  height: 50px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  background:
    rgba(
      255,
      253,
      248,
      0.95
    );

  box-shadow:
    0 8px 28px
    rgba(
      0,
      0,
      0,
      0.10
    );

  backdrop-filter:
    blur(8px);

  transition:
    transform
    160ms ease;
}


.back-to-top:hover {

  transform:
    translateY(-4px);
}


.back-to-top svg {

  width: 22px;

  height: 22px;
}


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

@media (max-width: 760px) {


  body {
    background-attachment: scroll;
  }


  .header-inner {

    width: 100%;

    min-height: auto;

    grid-template-columns:
      1fr
      auto;

    gap: 0;
  }


  .logo {

    padding: 16px;

    font-size: 1.1rem;
  }


  .header-icons {

    padding-right: 10px;
  }


  .main-nav {

    grid-column:
      1 / -1;

    order: 3;

    width: 100%;

    justify-content: stretch;

    gap: 0;

    overflow-x: auto;

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

    scrollbar-width: none;
  }


  .main-nav::-webkit-scrollbar {

    display: none;
  }


  .main-nav a {

    flex:
      1 0 auto;

    padding:
      15px
      18px;

    font-size: 0.72rem;

    text-align: center;
  }


  .main-nav a::after {

    bottom: 7px;
  }



  .page {

    width:
      calc(100% - 24px);

    padding-top: 60px;
  }


  .hero {

    min-height: 55vh;
  }


  .hero h1 {

    font-size:
      clamp(
        4rem,
        22vw,
        7rem
      );
  }


  .hero-description {

    margin-top: 26px;
  }


  .about-card {

    min-height: auto;

    grid-template-columns:
      1fr;

    gap: 30px;

    padding: 30px 24px;

    border-radius: 16px;
  }


  .about-label {

    font-size: 3rem;
  }


  .back-to-top {

    right: 12px;

    bottom: 12px;

    width: 46px;

    height: 46px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (
  prefers-reduced-motion: reduce
) {

  html {
    scroll-behavior: auto;
  }

  .main-nav a::after,
  .icon-link,
  .back-to-top {
    transition: none;
  }

}