/* =========================================================
   1. Root variables & helpers
   ========================================================= */

   :root {
    --color-bg: #f2f2f2;
    --color-text: #161616;
    --color-muted: #8ba192;
    --color-soft: #BCE0CE;
    --color-soft-rgb: 188, 224, 206;
    --color-soft-warm: #f0bfda;
    --color-accent: #F73B3B;
    --color-accent-alt: #979736;
    --color-accent-alt-rgb: 151, 151, 54;

    --fade-amount: 0; /* background fades in on scroll */

  }
  
  .bg-soft {
    background-color: var(--color-soft);
  }
  
  
  /* =========================================================
     2. Fonts
     ========================================================= */
  
  @font-face {
    font-family: 'Work_Sans';
    src: url('/assets/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Bricolage_Grotesque';
    src: url('/assets/fonts/Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf') format('truetype');
  }
  
  
  /* =========================================================
     3. Global layout & typography
     ========================================================= */
  
     html {
      height: 100%;
      background-color: var(--color-bg); /* shows on bounce / beyond gradient */
      font-size: 22px;  
    }
    
    body {
      min-height: 100%;
      margin: 0;
      background-color: transparent;  /* let ::before image be visible */
      font-family: 'Work_Sans', arial, sans-serif;
      font-weight: 400;
      font-size: 22px;
    }
  
  #main-container {
    display: block;
    min-height: 100vh;
  }
  
  h1 {
    font-family: 'Bricolage_Grotesque';
    letter-spacing: .06rem;
    margin: 0;
  }
  
  body.works-page h1 {
    text-align: center;
  }

  h2 {
  display: block;
  font-family: 'Bricolage_Grotesque';
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.9;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-left: 3rem;
  padding-right: 3rem;
  letter-spacing: .04rem;
  color: var(--color-text);
}

  p {
    margin: 1rem 0;
  }

.smaller {
  font-size: 0.8rem;
  line-height: 1.25;
}

  /* =========================================
   Content links (works, main pages, about)
   ========================================= */

   .page-content a:not(.btn-ink),
   .about-info a:not(.btn-ink),
   .about-photo a:not(.btn-ink) {
    position: relative;
  color: var(--color-text);       /* subtle olive accent */
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-alt);
  padding-bottom: 0.05rem;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

/* Hover background (ink wash) */
.page-content a:not(.btn-ink)::before,
.about-info a:not(.btn-ink)::before,
.about-photo a:not(.btn-ink)::before {
  content: "";
  position: absolute;
  inset: -0.2rem -0.3rem;    /* small expansion around text */
  border-radius: 6px;
  background: var(--color-soft); /* soft ink tone */
  opacity: 0;                  /* hidden at rest */
  filter: blur(10px);          /* ink-like blur */
  z-index: -1;
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
}

.page-content a:not(.btn-ink):hover,
.about-info a:not(.btn-ink):hover,
.about-photo a:not(.btn-ink):hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.page-content a:not(.btn-ink):hover::before,
.about-info a:not(.btn-ink):hover::before,
.about-photo a:not(.btn-ink):hover::before {
  opacity: 0.75;      /* 10% opacity */
  filter: blur(14px); /* slightly stronger when active */
}

.page-content a:not(.btn-ink):focus-visible,
.about-info a:not(.btn-ink):focus-visible,
.about-photo a:not(.btn-ink):focus-visible {
  outline: 2px solid var(--color-accent-alt);
  outline-offset: 2px;
  border-color: transparent; /* avoid double line look */
}

  /* =========================================================
   Hero section (lead text over background)
   ========================================================= */

.hero {
  min-height: 100vh;              /* fill viewport height */
  box-sizing: border-box;   /* ← THIS is the key */
  display: flex;
  align-items: flex-end;          /* push inner content to bottom */
  padding-bottom: 2rem;           /* distance from bottom edge */
  min-height: calc(100vh - 3rem); /* whatever nav height */
}


.hero-inner {
  /* this keeps the text aligned within your usual width */
}

.scroll-arrow {
  margin: 0 auto 0.75rem;
  text-align: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text);
  opacity: 1;
  transition: opacity 0.2s ease;
}


.hero-lead {
  max-width: 767.98px;
  font-size: 2.1rem;
  font-family: 'Bricolage_Grotesque';
  margin: 0 auto;                 /* center horizontally */
  text-align: center;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .04rem;
  color: var(--color-text);       /* or var(--color-accent) if you prefer */
}
  
  
  /* =========================================================
     4. Full-viewport background image with fade-out
     ========================================================= */
     
     body.with-bg::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
    
      background-image:
        linear-gradient(
          to top,
          rgba(242,242,242,var(--fade-amount)) 0%,
          rgba(242,242,242,var(--fade-amount)) 100vh,
          rgba(242,242,242,0) 120vh
        ),
        url("/images/hero-ink-02.jpg");
    
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
    
      /* YES — keep it! */
      transition: background 0.20s linear;
    }

        /* iOS fixes: stable viewport + avoid fixed bg flicker */
    @supports (-webkit-touch-callout: none) {
      .hero {
        min-height: 100svh;
        min-height: calc(100svh - 3rem);
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
      }

      body.with-bg::before {
        background-attachment: scroll;
      }
    }

        @media (max-width: 767.98px) {
      .hero-lead {
        font-size: 1.6rem;
        line-height: 1.25;
      }
    }

  /* =========================================================
     5. Page content & text layout
     ========================================================= */
  
  .page-content img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .page-content p {
    max-width: 767.98px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
  }

  .page-content ul,
  .page-content ol {
  max-width: 767.98px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem; /* keeps bullets visible */
}
  
  .page-content > *:first-child {
    margin-top: 0;
  }

  .page-content > *:last-child {
    margin-bottom: 2rem;   /* or whatever value you prefer */
  }
  
  .special-typo {
    display: block;
    font-family: 'Bricolage_Grotesque';
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.9;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    letter-spacing: .04rem;
    color: var(--color-accent-alt);
  }

    
  .special-typo-alt {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.9;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    letter-spacing: .0rem;
    color: var(--color-text);
  }

  
  /* =========================================================
     6. Image blocks (shortcodes, doubles, gradients)
     ========================================================= */
  
  /* Common block spacing for all shortcode images */
  .image-block {
    margin: 1.8rem 0;
  }
  
  /* extra spacing for double images when stacked (mobile) */
  .image-double .gap {
    margin-bottom: 1.8rem;
  }

  /* Double image, narrow (text-width) */
  .image-double-narrow {
    max-width: 767.98px;
    margin-left: auto;
    margin-right: auto;
  }

  .image-double-narrow img {
    width: 100%;
    height: auto;
    display: block;
  }

  .image-double__grid {
    display: grid;
    gap: 1.2rem;
  }

  @media (min-width: 768px) {
    .image-double__grid {
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
  }
  
  /* Gradient overlay helper */
  
  .gradient-wrap {
    position: relative;
    display: inline-block;
  }
  
  .gradient-wrap img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* The gradient overlay */
  .gradient-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%; /* initial definition */
    background: linear-gradient(
      to top,
      rgba(242, 242, 242, 1),
      rgba(242, 242, 242, 0)
    );
    pointer-events: none;
  
    /* adjust to account for .image-block vertical margin */
    bottom: 1.8rem;                 /* lift the gradient up */
    height: calc(40% + 1.8rem);     /* keep full visible gradient */
  }
  
  .image-text {
    margin: 2rem 0;
  }
  
  /* default mobile: stacked */
  .image-text__image img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .image-text__content {
    margin-top: 1rem;
    line-height: 1.4;
  }
  
  /* desktop: side-by-side */
  @media (min-width: 768px) {
    .image-text {
      display: grid;
      grid-template-columns: 1.1fr 1.2fr; /* slightly larger text column */
      gap: 1.5rem;
      align-items: center;
    }
  
    .image-text--left .image-text__image {
      order: 1;
    }
  
    .image-text--left .image-text__content {
      order: 2;
    }
  
    .image-text--right .image-text__image {
      order: 2;
    }
  
    .image-text--right .image-text__content {
      order: 1;
    }
  }

  .image-margin {
    margin: 3rem 0;
  }




  /* =========================================================
     11. Buttons
     ========================================================= */
  
  /* Wrapper centers the button */
  .button-wrapper {
    text-align: center;
    margin: 3.5rem 0; /* spacing above + below the button */
  }

  body.works-page .button-wrapper {
    margin-top: 2rem;
    margin-bottom: 0;   /* or whatever value you want */
  }

  @media (max-width: 768px) {
    body.works-page .button-wrapper {
      margin-top: 2.25rem; 
      margin-bottom: 0.25rem;   /* reduce space below the button */
         /* optional: reduce space above too */
    }
  }

  /* ================================
   Ink Blur Button
   ================================ */
   .btn-ink {
    font-family: 'Bricolage_Grotesque';
    font-size: 1.2rem;
    font-weight: 300;
    display: inline-block;
    padding: 0.7rem 2rem;
    position: relative;
    color: var(--color-accent-alt);     /* text always fully opaque */
    text-decoration: none;
    border-radius: 20px;
    isolation: isolate;             /* keep blur behind text */
    transition: color 0.4s ease; /* smooth text fade */
  }

 /* BASE INK PATCH (always visible, full size) */
.btn-ink::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 20px;
  background: var(--color-soft);
  filter: blur(25px);              /* always the same blur */
  
  opacity: 0.75;           /* initial faint stain */
  transform: scale(1);    /* normal size */
  transform-origin: center;

  z-index: -2;
  transition:
  opacity 0.55s cubic-bezier(0.16, 0.66, 0.38, 1.24),
  transform 0.55s cubic-bezier(0.16, 0.66, 0.38, 1.24);
}

/* INNER INK PATCH (appears on hover, smaller) */
.btn-ink::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 20px;
  background: var(--color-soft);
  filter: blur(35px);              /* same blur */
  transform: scale(0.7);           /* smaller ink shape */
  transform-origin: center;

  opacity: 0;                      /* hidden at rest */
  z-index: -1;

  transition:
  opacity 0.55s cubic-bezier(0.16, 0.66, 0.38, 1.24);
}

/* HOVER EFFECT */

.btn-ink:hover {
  color: var(--color-text); /* slightly darker tone – adjust to taste */
}

.btn-ink:hover::before {
  opacity: 1;  
  transform: scale(1.1);                  /* stronger base blot */
}

.btn-ink:hover::after {
  opacity: 0.5;                    /* visible inner blot */
}


  /* =========================================================
     Divider
     ========================================================= */

.divider {
  border-bottom: 1px solid var(--color-text);
  opacity: 0.25;
  margin: 2rem 0;
}

  /* =========================================================
     About Page
     ========================================================= */

/* About page background */
body.about-page {
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    rgba(var(--color-soft-rgb), 0.5) 50%,
    rgba(var(--color-soft-rgb), 0.7) 100%
  );
}

.about-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.section {
  font-size: 0.75rem;
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: 0.03rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.section-center,
.section-center-bold {
  font-size: 0.75rem;
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: 0.03rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.section-center-bold {
  font-weight: 500;
}


@media (min-width: 768px) {
  body.learning-page .page-content .section-center:first-of-type {
    margin-top: 0;
  }
}

.about-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-contact li {
  margin-bottom: 0.4rem;
}

.about-contact a {

}

.about-contact a:hover {
}

.about-lead {
  font-size: 2rem;
}

 /* =========================================================
     Works Page
     ========================================================= */


/* Title centered across content width */
.works-header {
  margin-top: 1.5rem;
  margin-bottom: 0;
  text-align: center;
}

@media (max-width: 768px) {
  .works-page .works-header {
    margin-top: 1.8rem;     /* more space *above* heading */
    margin-bottom: 1.2rem;  /* more space *below* heading */
  }
}

.works-title {
  font-family: 'Bricolage_Grotesque';
  font-size: 2rem;
  letter-spacing: .06rem;
  margin: 0;
}

/* Intro wrapper: stacked on mobile */
.works-intro-wrapper {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}



/* Purchase block / description basic spacing */
.works-intro-purchase p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: block;
    font-family: 'Bricolage_Grotesque';
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
    color: var(--color-accent-alt);
    padding-left: 1rem;
    padding-right: 1rem;
  }


.works-intro-text p {
  line-height: 1.4;
}

/* Desktop: 3-column grid, purchase in col 1, text in cols 2–3 */
@media (min-width: 768px) {
  .works-intro-wrapper {
    margin-top: 1.5rem;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .works-intro-purchase {
    grid-column: 1 / 2;

  }

  .works-intro-purchase p {
    padding-left: 0;
    padding-right: 0;
  }

  .works-intro-text {
    grid-column: 2 / 4;
  }
}

/* Works list below – single column block, can be simple */
.works-wrapper {
  margin-top: 2rem;
}

.works-item-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 2rem;
}

 .works-item-row .image-narrow {
  margin-bottom: 0;
  margin-top: 0;
}

@media (min-width: 768px) {
  .works-item-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .works-item-row .image-narrow {
  margin-bottom: 0;
}

  .works-item-title {
    grid-column: 1 / 2;
    margin-top: 1rem;
    text-align: center;
  }

  .works-item-row .image-narrow {
    grid-column: 2 / 4;
  }
}

 /* =========================================================
     Learning Page
     ========================================================= */

body.learning-page .section-center{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  body.learning-page .page-content {
    padding-bottom: 2rem;
  }
}

 body.learning-page .page-content > *:last-child {
    margin-bottom: 0;
  }

  
  /* =========================================================
     7. Navigation (desktop + mobile top bar)
     ========================================================= */
  
     nav.main {
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
      position: sticky;
      top: 0;
      z-index: 1051;
    
      /* transparent at top, fading to 50% opacity */
      background-color: rgba(242, 242, 242, var(--nav-opacity, 0));
      backdrop-filter: blur(var(--nav-blur, 0));
    
      transition:
        background-color 0.35s ease,
        backdrop-filter 0.35s ease;
    }
    
    .navbar-brand {
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: .06rem;
    }
    
    .nav-link {
      font-size: 0.85rem;
      font-weight: 400;
      padding-bottom: 0.4rem;
      letter-spacing: .04rem;
      color: var(--color-text);
    }
    
    .nav-link:hover {
      color: var(--color-accent);
    }

  /* ================
   Mobile menu bottom
   ================ */

   .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background-color: var(--color-bg);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.6rem 1.5rem;
  
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
  }
  
  .mobile-bottom-nav a {
    text-decoration: none;
    color: var(--color-text);
  }
  
  .mobile-bottom-nav a:hover {
    color: var(--color-accent);
  }
  

  /* =========================================================
     10. Footer
     ========================================================= */
  
  footer {
    width: 100%;
    position: relative;
  }
  
  footer .copyright {
    font-size: 0.75rem;
    margin: 0;
    line-height: 1;
    color: var(--color-text);
  }

  .footer-email {
    color: var(--color-text);
    text-decoration: none;
    margin-left: 0.5rem;
  }
  
  .footer-email:hover {
    color: var(--color-accent);
  }

  .footer-link {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.75rem;
  }
  
  .footer-link:hover {
    color: var(--color-accent);
  }
  
  .footer-separator {
    position: relative;
    top: 2px;   /* adjust up/down */
    margin: 0 0.2rem;
    color: var(--color-text);
    opacity: 0.75;
  }

  
  /* =========================================================
     12. Media queries
     ========================================================= */
  

  /* Override Bootstrap container-xl max width on large screens */
  @media (min-width: 1170px) {
    .container-xl {
      max-width: 1170px;  /* or 1200px if you prefer */
    }
  }
     
  /* Spacing for double images when side-by-side (desktop) */
  @media (min-width: 768px) {
    .image-double .gap {
      margin-bottom: 0; /* no spacing when side by side */
    }
  }

  @media (max-width: 767.98px) {
    #main-container {
      padding-bottom: 2.5rem;
    }
  }

  @media (max-width: 767.98px) {
    .hero {
      padding-bottom: 2rem;  /* or 10rem, whatever looks best */
      min-height: calc(100vh - 3rem - 2rem); /* top bar + bottom bar */
    }
  }

  @media (max-width: 767.98px) {
    .navbar.main .container-xl {
      display: flex;
      justify-content: center;
    }
  
    .navbar-brand {
      margin: 0 auto;  /* ensures proper centering */
    }
  }

/* Desktop: THREE COLUMN layout */
@media (min-width: 767.99px) {

  /* Add breathing room below navbar for About + Works */
  body.about-page .page-content,
  body.works-page .page-content,
  body.learning-page .page-content {
    padding-top: 2rem;  /* adjust to taste */
  }

  /* About page layout */
  body.about-page .about-wrapper {
    margin-top: 0;     /* this is now just internal spacing */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .about-photo {
    grid-column: 1 / 2; /* photo stays in column 1 */
  }

  .about-info {
    grid-column: 2 / 4; /* text spans columns 2 AND 3 */
  }
}