/* Frank Ruhl Libre (Variable Weight Range 300 to 900) */
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/frankruhllibre/v19/LDI1ap0rISUj-Ls0vvJHw5XnUsmF31Z6DV8.woff2) format('woff2');
}

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

html, body {
    width: 100%;
    background-color: rgb(255, 247, 226);
    color: rgb(61, 50, 22);
}

/*  <weight>: Use a value from 300 to 900
    <uniquifier>: Use a unique and descriptive class name */

.frank-ruhl-libre-regular {
    font-family: "Frank Ruhl Libre", serif;
    font-optical-sizing: auto;
    font-weight: 300 900;
    font-style: normal;
}

.hero-container {
    container-type: inline-size;
    width: 100vw;
    font-family: "IM Fell DW Pica", serif;
    font-style: normal;
    font-size: 100cqi;
    color: whitesmoke;
    background-image: url("images/cloud_field.JPEG");
    filter: brightness(90%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh ; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-content {
    width: 50vw; /* Constrains the text scaling target zone to 50% of screen width */
    display: flex;
    justify-content: center;
    transform: translateY(-50px);
    letter-spacing: 0.002em;
    font-style: italic;
}

.hero-content h1 {
    white-space: nowrap; 
    margin: 0;
}


.site-header {
    position: -webkit-sticky; /* Support for older Safari versions */
    position: sticky;
    top: 0;
    z-index: 1000;
    font-size: 1.25rem;
    
    /* Visual Styling */
    padding: 14px 100px;
    display: flex;
    justify-content: center;
    /* margin-left: auto; */
    align-items: center;
    background-color: rgba(255, 247, 226, 0.97);
    border-bottom: 1.5px solid #815918;
    border-radius: 2.5px;
    box-shadow: 0px -2px 30px #24221e44;
}

.logo {
    font-family: "IM Fell DW Pica", serif;
    font-weight: 100;
    font-style: normal;
    font-size: 45pt;
    vertical-align: middle;
    list-style: none;
}

.nav-links {
    list-style: none;
    margin: 0;
    margin-left: 50px;
    transform: translateY(4px);
    padding: 0;
    display: flex;
    gap: 25px;
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 450;
    font-size: 1.13rem;
    letter-spacing: -0.01em;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    pointer-events: bounding-box;
    transition: color .2 ease-in;
}

.button{
    color: rgba(112, 103, 81, 0.801);
    transition: color .3 ease-in;
}

.button:hover{
    color: rgb(61, 50, 22);
}

.animated-underline {
  position: relative; 
  text-decoration: none;
  color: rgba(112, 103, 81, 0.801);
  display: inline-block;
  /* Add a transition so the text color fades smoothly */
  transition: color 0.25s ease-out;
}

/* Create the underline using ::after */
.animated-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgb(61, 50, 22);

  /* Core Animation Logic */
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.25s ease-out;
}

/* Trigger the text color change on hover */
.animated-underline:hover {
  color: rgb(61, 50, 22);
}

/* Trigger the underline expansion on hover */
.animated-underline:hover::after {
  transform: scaleX(1);
}

.no-underline {
    text-decoration: none;
    color: inherit;
}

.current-tab {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    text-decoration-color: rgb(61, 50, 22);
    color: rgb(61, 50, 22);
}


.main-content {
    font-family: "Frank Ruhl Libre", serif;
    padding: 40px 150px;
    min-height: 700px;
    gap: 30px;
    font-size: 1.3rem;
}

.about-main {
    font-family: "Frank Ruhl Libre", serif;
    padding: 40px 150px;
    min-height: 700px;
    gap: 250px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}


.contact-button {
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 450;
    font-size: 14pt;
    letter-spacing: -0.02em;
    border: 1.5px solid #815918;
    background-color: transparent;
    color: #815918;
    border-radius: 0px;
    box-shadow: 2px 2px 0 #815918;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 6px 25px;
    padding-top: 8px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    transform: translateY(-2px);
}


.contact-button:hover {
    background-color: #815918;
    color: rgb(255, 247, 226);
    box-shadow: 0 0px 0px rgb(61, 50, 22);
}

.contact-button-current {
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 450;
    font-size: 14pt;
    letter-spacing: -0.02em;
    border: 1.5px solid #815918;
    background-color: #815918;
    color: rgb(255, 247, 226);
    border-radius: 0px;
    box-shadow:  0 0px 0px rgb(61, 50, 22);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 6px 25px;
    padding-top: 8px;
    cursor: pointer;
}

.form-container {
    background-color: #f2ead6;
    padding: 30px;
    width: 50vw;
    max-width: 450px;
    box-sizing: border-box;
}

.form-container h2 {
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

.form-group input,
.form-group textarea {
    color: rgb(112, 103, 81);
    border: none;
    box-sizing: border-box;
    resize: none;
    overflow-y: auto;
    width: 100%;
    padding: 20px 10px;
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 450;
    font-size: 1.13rem;
    letter-spacing: -0.01em;
    background-color: #f2ead6;
    outline: 1.5px solid transparent;
    field-sizing: content;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: 1.5px solid rgb(112, 103, 81);
    color: rgb(61, 50, 22);
}


.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    grid-auto-rows: 5px; 
    gap: 50px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 2200px;
    justify-content: center;
}

/* Style the list item with entrance animation states */
.image-gallery li {
    display: flex;                
    flex-direction: column;       
    width: fit-content;         
    height: fit-content;          
    border: 2px solid rgb(255, 247, 226);
    outline: 1.8px solid #815918;
    box-shadow: 4px 4px 0 #815918;
    position: relative;
    
    /* Entrance Animation Initial State */
    opacity: 0;
    transform: translateX(-25px); /* Starts slightly to the left of its ending position */
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.2s ease;
}

/* When scrolled into view or loaded */
.image-gallery li.revealed {
    opacity: 1;
    transform: translateX(0);     /* Slides smoothly into its exact grid slot */
}

/* Hover effect */
.image-gallery li:hover {
    box-shadow: 0 0px 0 #815918;
}

.image-gallery picture {
    display: block;
    font-size: 0;                 
    line-height: 0;
}

.image-gallery img {
    display: block;
    object-fit: cover;
}

.image-gallery img.landscape {
    height: 500px;
    width: auto;
}

.image-gallery img.portrait {
    width: 500px;
    height: auto;
}

.category {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    list-style: none;
    margin: 0 auto;
    max-width: 2000px;
    padding: 0 20px; /* Adds safe breathing room on mobile */
}

/* The list item acts as the layout wrapper */
.category li {
    display: flex;                            
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: 1.25rem;
    text-align: center;
    cursor: pointer;
    
    /* Flex sizing: starts at 500px wide, can shrink on smaller screens */
    flex: 0 1 500px;
    width: 500px;
    max-width: 100%;
    
    /* Entrance Animation Initial State */
    opacity: 0;
    transform: translateX(-25px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When scrolled into view or loaded */
.category li.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* The box containing ONLY the image gets the border and shadow */
.category .image-frame {
    display: flex;
    flex-direction: column;
    position: relative; /* Required for absolute positioning of overlay/subtitle */
    border: 2px solid rgb(255, 247, 226);
    outline: 1.8px solid #815918;
    background-color: #fff;
    
    /* Strict 500x500px sizing, responsive on mobile */
    width: 500px;
    height: 500px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    
    box-shadow: 4px 4px 0 #815918;
    margin: 0;
    overflow: hidden; /* Ensures scaling/darkening stays inside the frame bounds */
    
    /* Transition transform and shadow smoothly */
    transition: box-shadow 0.2s ease, transform 0.3s ease;
}

/* Darkening overlay that fades in on hover */
.category .image-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45); /* Adjust darkness here */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Subtitle container centered over the image */
.category .image-subtitle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 247, 226);
    font-family: "IM Fell DW Pica", serif;
    font-style: italic;
    font-size: 3.5rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease;
    padding: 20px;
}

/* Hover effects: scale frame, collapse shadow, darken image, show subtitle */
.category li:hover .image-frame {
    box-shadow: 0 0 0 rgb(61, 50, 22);
    transform: scale(1.05); /* Scales up cleanly without pushing rows down */
}

.category li:hover .image-frame::after,
.category li:hover .image-subtitle {
    opacity: 1;
}

/* Make images fill the 500x500 box cleanly */
.category img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Original caption at the bottom fades out on hover */
.category .caption {
    margin-top: 0.75rem;
    text-align: center;
    font-family: "IM Fell DW Pica", serif;
    font-size: 1.35rem;
    color: #815918;
    transition: opacity 0.2s ease;
}

.category li:hover .caption {
    opacity: 0;
}

/* --- Hover Effect for Category Images --- */
.image-frame {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.image-frame img {
    display: block;
    transition: filter 0.3s ease;
}

/* The dark overlay with centered text */
.image-frame .view-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: "IM Fell DW Pica", serif;
    font-style: italic;
    font-size: 2.5rem;
    font-weight: 500;
    color: rgb(255, 247, 226);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 1.5px;
    pointer-events: none;
    z-index: 2;
}

.image-frame:hover img {
    filter: brightness(0.45);
}

.image-frame:hover .view-overlay {
    opacity: 1;
}


/* --- Fullscreen Lightbox Gallery Viewer --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(26, 19, 10, 0.95); /* Semi-transparent dark brown */
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 60px 40px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 85vw;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    outline: 1.8px solid rgb(255, 247, 226);
    border: 8px solid transparent;
}

.lightbox-caption {
    color: rgb(255, 247, 226);
    margin-top: 20px;
    font-size: 1.35rem;
    letter-spacing: 1px;
    font-family: "IM Fell DW Pica", serif;
}

/* --- Brutalist Vector Lightbox Controls --- */
.lightbox-btn {
    position: absolute;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 100000;
    color: rgb(255, 247, 226);
    /* Drop shadow follows the exact vector shape of the SVG icon */
    filter: drop-shadow(3px 3px 0px #000);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.lightbox-btn svg {
    width: 36px;
    height: 36px;
    display: block;
    fill: currentColor;
}

.lightbox-btn:hover {
    filter: drop-shadow(1px 1px 0px #000) brightness(85%);
}

.lightbox-close {
    top: 30px;
    right: 40px;
}

.lightbox-prev {
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.05);
}

.lightbox-next {
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.05);
}

.lightbox-title {
    color: rgb(255, 247, 226);
    font-size: 2rem;
    margin: 0 0 10px 0;
    font-family: "IM Fell DW Pica", serif;
    letter-spacing: 1px;
    text-align: center;
}

.lightbox-content .lightbox-caption {
    text-align: center;
    max-width: 400px;
    margin-top: 0;
}


@keyframes slide-out {
  to { transform: translateX(-100%); }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}