:root {
    --color-primary: #E2E2DE;
    --color-background: #0A0A0A;

    --fs-nav-text: clamp(4rem, 2rem + 8vw, 8rem);
    --fs-roman: clamp(1rem, 1rem + 0.5vw, 1.5rem);
    --fs-photos-title: clamp(8rem, 18vw, 18rem);

    --nav-step-size: clamp(2rem, 8vw, 6rem);

    --nav-padding-left: clamp(5%, 2rem + 3vw, 10%);

    /* Photos Page Variables */
    --thumbnail-width: clamp(80px, 11vw + 2rem, 300px);
    --item-border-radius: clamp(6px, 1vw, 10px);

    --fs-footer-text: clamp(0.9rem, 1.7vw, 1.1rem);
}

@font-face {
    font-family: 'General Sans Variable';
    src: url('General Sans Variable Fonts/WEB/fonts/GeneralSans-Variable.woff2') format('woff2');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

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

body {
    background-color: var(--color-background);
    color: var(--color-primary);
    font-family: 'General Sans Variable', sans-serif;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 2vw, 2rem);
    justify-content: center;
    /* Default vertical center */
}

/* Logos */
.social-links {
    position: absolute;
    /* Fluid positioning */
    top: clamp(2rem, 1.5rem + 1vw, 3rem);
    right: clamp(2rem, 1rem + 2vw, 4rem);
    display: flex;
    gap: 1.5rem;
    z-index: 10;
    align-items: center;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon img {
    height: clamp(28px, 3vw, 40px);
    width: auto;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    filter: invert(93%) sepia(3%) saturate(368%) hue-rotate(69deg) brightness(101%) contrast(89%);
}

.social-icon:first-child img {
    height: clamp(30px, 3.2vw, 48px);
}

.social-icon:hover img {
    opacity: 1;
}

/* Main Navigation */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* Use fluid max-width logic via padding/margin constraints if needed, 
       but for now full width stability is key. */
    max-width: 1200px;

    /* Fluid padding */
    padding-left: var(--nav-padding-left);
}

.nav-item {
    text-decoration: none;
    color: var(--color-primary);
    display: flex;
    align-items: baseline;
    margin-bottom: 1.5rem;
    position: relative;
    width: fit-content;
}

.nav-item:last-child {
    margin-bottom: 0;
}

.nav-item .text {
    transition: letter-spacing 0.5s ease;
}

.nav-item:hover .text {
    letter-spacing: 0.05em;
}

/* Typography */
.text {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 144, "WONK" 0;
    font-feature-settings: "ss01";

    /* Fluid font size */
    font-size: var(--fs-nav-text);

    line-height: 1;
}

.roman {
    font-family: 'Average', serif;

    /* Fluid font size */
    font-size: var(--fs-roman);

    margin-right: clamp(2.5rem, 2rem + 1vw, 4rem);
    opacity: 0.9;
    transform: translateY(calc(-1 * clamp(0.5rem, 0.25rem + 1vw, 1rem)));
    letter-spacing: normal;
}

/* Fluid Staircase Effect */
.nav-item:nth-child(1) {
    margin-left: 0;
}

.nav-item:nth-child(2) {
    margin-left: calc(1 * var(--nav-step-size));
}

.nav-item:nth-child(3) {
    margin-left: calc(2 * var(--nav-step-size));
}

.nav-item:nth-child(4) {
    margin-left: calc(3 * var(--nav-step-size));
}


/* =========================================
   Photos Page Styles
   ========================================= */

body.photos-page {
    background-color: #e5e3dc;
    color: #0a0a0a;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 3rem;
}

/* Menu Icon */
.menu-icon-container {
    position: fixed;
    top: 3rem;
    right: 10%;
    z-index: 100;
}

.menu-icon {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(4px, 0.4vw, 6px);
    /* Fluid gap */
    cursor: pointer;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.line {
    background-color: #0a0a0a;
    height: 1px;
    display: block;
    transition: width 0.3s ease;
}

/* Fluid Icon Widths */
.top-line {
    /* Mobile ~16px, Desktop 22px */
    width: clamp(16px, 12px + 1vw, 22px);
}

.bottom-line {
    /* Mobile ~22px, Desktop 30px */
    width: clamp(22px, 16px + 1.5vw, 30px);
}

/* Photos Title */
.photos-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 144, "WONK" 0;
    font-feature-settings: "ss01";

    /* Fluid Font Size */
    font-size: var(--fs-photos-title);

    color: #FFFFFF;
    opacity: 0.5;
    text-align: center;

    margin-top: clamp(2rem, 3vw, 3rem);
    margin-bottom: clamp(1rem, 2vw, 3rem);

    width: 100%;
    line-height: 0.8;
}

/* Photos Stack Animated */
.photos-stack-animated {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-x: hidden;

    /* Inverse Fluid Spacing: Larger on small screens, Smaller on wide screens */
    /* Logic: Start clear base (e.g. 30rem) and subtract viewport width. */
    padding-top: clamp(4rem, 12vh, 12rem);
    padding-bottom: clamp(2rem, 10rem - 10vw, 10rem);
}

.gallery-cluster {
    position: relative;
    width: 100%;
    /* Fluid height: 50vh on mobile, scaling up to 100vh on wide screens. 100vh = 100% of screen height */
    height: clamp(40vh, 40vw, 100vh);

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Cluster Items (Surrounding Images) */
.cluster-item {
    position: absolute;
    /* Removed fixed size constraint to allow natural aspect ratio */
    width: auto;
    height: auto;
    /* max-width removed for manual sizing control per position */

    /* Initial Hidden State: Center, Scaled Down, Invisible */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;

    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
    will-change: transform, opacity;
    z-index: 1;
}

.cluster-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--item-border-radius);
    /* Natural aspect ratio maintained */
}

/* Central Main Link */
.cluster-center {
    position: absolute;
    z-index: 10;
    text-decoration: none;
    cursor: pointer;

    /* Fixed aspect ratio for thumbnail only */
    width: var(--thumbnail-width);
    aspect-ratio: 1 / 1;

    /* Center it */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: var(--item-border-radius);
    overflow: hidden;
}

.cluster-center .main-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--item-border-radius);
}

/* Central Main Link */
.cluster-center {
    z-index: 10;
    text-decoration: none;
    cursor: pointer;
    /* Center it */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Overlay - ONLY for Center Thumbnail */
.cluster-center .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0;
    /* Hidden by default */

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 5;
    transition: opacity 0.3s ease;
}

/* Show Overlay when Expanded */
.gallery-cluster.expanded .cluster-center .overlay {
    opacity: 0.9;
}

/* Title Text */
/* Title Text */
.cluster-title {
    font-family: 'Fraunces', serif;
    color: #E2E2DE;
    font-size: clamp(1rem, 2.5vw, 3rem);
    text-align: center;
    line-height: 1.1;
    pointer-events: none;
    /* Let clicks pass to link */
}

/* Expanded State */
.gallery-cluster.expanded .cluster-item {
    opacity: 1;
    /* Transform values determined by position classes below */
}

/* --- Sizing Rules (Relative to Thumbnail) --- */

/* Pos 0 & 4 (Top & Bottom): Width = 100% of Thumbnail */
.gallery-cluster .cluster-item.pos-0,
.gallery-cluster .cluster-item.pos-4 {
    width: var(--thumbnail-width);
}

/* Pos 2 & 6 (Left & Right): Height = 100% of Thumbnail */
.gallery-cluster .cluster-item.pos-2,
.gallery-cluster .cluster-item.pos-6 {
    height: var(--thumbnail-width);
    width: auto;
    max-width: none;
}

.gallery-cluster .cluster-item.pos-2 img,
.gallery-cluster .cluster-item.pos-6 img {
    width: auto;
    height: 100%;
}

/* Pos 1, 3, 5, 7 (Corners): Width = 70% of Thumbnail */
.gallery-cluster .cluster-item.pos-1,
.gallery-cluster .cluster-item.pos-3,
.gallery-cluster .cluster-item.pos-5,
.gallery-cluster .cluster-item.pos-7 {
    width: calc(var(--thumbnail-width) * 0.85);
}

/* ########## Specific Photo Sizes ########## */
.gallery-cluster[data-category="australia"] .cluster-item.pos-3 {
    width: calc(var(--thumbnail-width) * 1.1);
}

.gallery-cluster[data-category="australia"] .cluster-item.pos-7 {
    width: calc(var(--thumbnail-width) * 1);
}

.gallery-cluster[data-category="denmark"] .cluster-item.pos-1 {
    width: calc(var(--thumbnail-width) * 1.3);
}

.gallery-cluster[data-category="denmark"] .cluster-item.pos-5 {
    width: calc(var(--thumbnail-width) * 1);
}

.gallery-cluster[data-category="japan"] .cluster-item.pos-1 {
    width: calc(var(--thumbnail-width) * 1.1);
}

.gallery-cluster[data-category="greece"] .cluster-item.pos-3 {
    width: calc(var(--thumbnail-width) * 1.1);
}

.gallery-cluster[data-category="greece"] .cluster-item.pos-7 {
    width: calc(var(--thumbnail-width) * 1);
}

.gallery-cluster[data-category="montenegro"] .cluster-item.pos-1 {
    width: calc(var(--thumbnail-width) * 1.2);
}

.gallery-cluster[data-category="montenegro"] .cluster-item.pos-3 {
    width: calc(var(--thumbnail-width) * 1.1);
}

.gallery-cluster[data-category="montenegro"] .cluster-item.pos-5 {
    width: calc(var(--thumbnail-width) * 0.9);
}

.gallery-cluster[data-category="albania"] .cluster-item.pos-1 {
    width: calc(var(--thumbnail-width) * 0.75);
}

.gallery-cluster[data-category="albania"] .cluster-item.pos-3 {
    width: calc(var(--thumbnail-width) * 1.1);
}

.gallery-cluster[data-category="albania"] .cluster-item.pos-5 {
    width: calc(var(--thumbnail-width) * 1.2);
}

.gallery-cluster[data-category="albania"] .cluster-item.pos-7 {
    width: calc(var(--thumbnail-width) * 0.65);
}

.gallery-cluster[data-category="croatia"] .cluster-item.pos-3 {
    width: calc(var(--thumbnail-width) * 0.9);
}

.gallery-cluster[data-category="croatia"] .cluster-item.pos-5 {
    width: calc(var(--thumbnail-width) * 1);
}

.gallery-cluster[data-category="b&w"] .cluster-item.pos-0 {
    width: calc(var(--thumbnail-width) * 1.5);
}

.gallery-cluster[data-category="b&w"] .cluster-item.pos-1 {
    width: calc(var(--thumbnail-width) * 1);
}

.gallery-cluster[data-category="b&w"] .cluster-item.pos-3 {
    width: calc(var(--thumbnail-width) * 1);
}

.gallery-cluster[data-category="b&w"] .cluster-item.pos-4 {
    width: calc(var(--thumbnail-width) * 1.3);
}

.gallery-cluster[data-category="b&w"] .cluster-item.pos-5 {
    width: calc(var(--thumbnail-width) * 1.05);
}

.gallery-cluster[data-category="b&w"] .cluster-item.pos-7 {
    width: calc(var(--thumbnail-width) * 1.05);
}

.gallery-cluster[data-category="surfing"] .cluster-item.pos-0 {
    width: calc(var(--thumbnail-width) * 1.5);
}

.gallery-cluster[data-category="surfing"] .cluster-item.pos-1 {
    width: calc(var(--thumbnail-width) * 1.25);
}

.gallery-cluster[data-category="surfing"] .cluster-item.pos-3 {
    width: calc(var(--thumbnail-width) * 1.1);
}

.gallery-cluster[data-category="surfing"] .cluster-item.pos-4 {
    width: calc(var(--thumbnail-width) * 1.3);
}

.gallery-cluster[data-category="surfing"] .cluster-item.pos-5 {
    width: calc(var(--thumbnail-width) * 1.15);
}

.gallery-cluster[data-category="surfing"] .cluster-item.pos-7 {
    width: calc(var(--thumbnail-width) * 1.05);
}

/* Expanded State */
.gallery-cluster.expanded .cluster-item {
    scale: 1;
    opacity: 1;
}


/* ########## Default Photo Position ########## */
/* The item size is fluid. We can use translate with %, which refers to the thumbnails own width. */
/* Top */
.gallery-cluster.expanded .cluster-item.pos-0 {
    transform: translate(-50%, calc(-50% - 86%));
}

/* Top Right */
.gallery-cluster.expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 114%), calc(-50% - 92.5%));
}

/* Right */
.gallery-cluster.expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 81%), -50%);
}

/* Bottom Right */
.gallery-cluster.expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 100%), calc(-50% + 123%));
}

/* Bottom */
.gallery-cluster.expanded .cluster-item.pos-4 {
    transform: translate(-50%, calc(-50% + 86%));
}

/* Bottom Left */
.gallery-cluster.expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 115%), calc(-50% + 93%));
}

/* Left */
.gallery-cluster.expanded .cluster-item.pos-6 {
    transform: translate(calc(-50% - 86.5%), -50%);
}

/* Top Left */
.gallery-cluster.expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 104.5%), calc(-50% - 131.5%));
}

/* ########## Specific Photo Position for Australia ########## */
.gallery-cluster[data-category="australia"].expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 82.5%), -50%);
}


/* ########## Specific Photo Position for Denmark ########## */
.gallery-cluster[data-category="denmark"].expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 92%), calc(-50% - 112%));
}

.gallery-cluster[data-category="denmark"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 115%), calc(-50% + 92%));
}

.gallery-cluster[data-category="denmark"].expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 104%), calc(-50% + 131%));
}

.gallery-cluster[data-category="denmark"].expanded .cluster-item.pos-6 {
    transform: translate(calc(-50% - 88.5%), -50%);
}

.gallery-cluster[data-category="denmark"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 113.5%), calc(-50% - 92%));
}

/* ########## Specific Photo Position for Japan ########## */
.gallery-cluster[data-category="japan"].expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 100%), calc(-50% - 123%));
}

.gallery-cluster[data-category="japan"].expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 86.5%), -50%);
}

.gallery-cluster[data-category="japan"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 114.5%), calc(-50% + 144.5%));
}

.gallery-cluster[data-category="japan"].expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 114%), calc(-50% + 93%));
}

.gallery-cluster[data-category="japan"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 114%), calc(-50% - 92%));
}

/* ########## Specific Photo Position for Greece ########## */
.gallery-cluster[data-category="greece"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 100%), calc(-50% + 123%));
}

.gallery-cluster[data-category="greece"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 104.5%), calc(-50% - 130.5%));
}

/* ########## Specific Photo Position for Montenegro ########## */
.gallery-cluster[data-category="montenegro"].expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 96%), calc(-50% - 119%));
}

.gallery-cluster[data-category="montenegro"].expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 86.5%), -50%);
}

.gallery-cluster[data-category="montenegro"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 100%), calc(-50% + 123%));
}

.gallery-cluster[data-category="montenegro"].expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 111%), calc(-50% + 96%));
}

.gallery-cluster[data-category="montenegro"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 114%), calc(-50% - 101%));
}

/* ########## Specific Photo Position for Albania ########## */
.gallery-cluster[data-category="albania"].expanded .cluster-item.pos-0 {
    transform: translate(-50%, calc(-50% - 93%));
}

.gallery-cluster[data-category="albania"].expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 122%), calc(-50% - 98%));
}

.gallery-cluster[data-category="albania"].expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 86.5%), -50%);
}

.gallery-cluster[data-category="albania"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 100%), calc(-50% + 118%));
}

.gallery-cluster[data-category="albania"].expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 95.5%), calc(-50% + 124%));
}

.gallery-cluster[data-category="albania"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 134%), calc(-50% - 105%));
}

/* ########## Specific Photo Position for Croatia ########## */
.gallery-cluster[data-category="croatia"].expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 114%), calc(-50% - 145%));
}

.gallery-cluster[data-category="croatia"].expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 86.5%), -50%);
}

.gallery-cluster[data-category="croatia"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 111%), calc(-50% + 101.8%));
}

.gallery-cluster[data-category="croatia"].expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 105%), calc(-50% + 134%));
}

.gallery-cluster[data-category="croatia"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 114%), calc(-50% - 100.5%));
}

/* ########## Specific Photo Position for B&W ########## */
.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-0 {
    transform: translate(-50%, calc(-50% - 104%));
}

.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 129%), calc(-50% - 130%));
}

.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 86%), -50%);
}

.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 119%), calc(-50% + 130%));
}

.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-4 {
    transform: translate(-50%, calc(-50% + 113%));
}

.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 116%), calc(-50% + 128%));
}

.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-6 {
    transform: translate(calc(-50% - 85.5%), -50%);
}

.gallery-cluster[data-category="b&w"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 126%), calc(-50% - 126%));
}

/* ########## Specific Photo Position for Surfing ########## */
.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-0 {
    transform: translate(-50%, calc(-50% - 103%));
}

.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-1 {
    transform: translate(calc(-50% + 113%), calc(-50% - 135.5%));
}

.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-2 {
    transform: translate(calc(-50% + 80.5%), -50%);
}

.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-3 {
    transform: translate(calc(-50% + 112.5%), calc(-50% + 134%));
}

.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-4 {
    transform: translate(-50%, calc(-50% + 114%));
}

.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-5 {
    transform: translate(calc(-50% - 110%), calc(-50% + 120.5%));
}

.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-6 {
    transform: translate(calc(-50% - 81%), -50%);
}

.gallery-cluster[data-category="surfing"].expanded .cluster-item.pos-7 {
    transform: translate(calc(-50% - 125%), calc(-50% - 138%));
}

/* =========================================
   Gallery Page Styles
   ========================================= */

body.gallery-page {
    background-color: #e5e3dc;
    color: #0a0a0a;
    min-height: 100vh;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    justify-content: flex-start;
}

/* Gallery Header */
.gallery-title {
    font-family: 'Fraunces', serif;
    font-style: normal;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "WONK" 0;
    font-size: clamp(4rem, 8vw, 9rem);
    text-align: center;
    margin-bottom: clamp(3rem, 5vw, 5rem);
    margin-top: 2rem;
    color: #0a0a0a;
}

/* Back Arrow (Fixed Top Left) */
.back-icon-container {
    position: fixed;
    top: 3rem;
    left: clamp(2rem, 5%, 5%);
    z-index: 100;
}

.back-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 40px;
    height: 30px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

.arrow-line {
    position: absolute;
    width: 20px;
    height: 1px;
    background-color: #0a0a0a;
    transform-origin: left center;
    left: 0;
}

.arrow-top {
    transform: rotate(-40deg);
    top: 50%;
}

.arrow-bottom {
    transform: rotate(40deg);
    top: 50%;
}

/* Gallery Grid */
.gallery-grid {
    column-count: 2;
    column-gap: clamp(10px, 2vw, 20px);
    width: 100%;
    padding-left: clamp(1rem, 30vw - 8rem, 20vw);
    padding-right: clamp(1rem, 30vw - 8rem, 20vw);
    box-sizing: border-box;

    padding-bottom: 5rem;
}

.gallery-item {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    /* Break inside avoidance for columns */
    break-inside: avoid;
    margin-bottom: clamp(10px, 2vw, 20px);
    border-radius: 0;
}

/* Helper for side-by-side images within a column */
.split-image-container {
    display: flex;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 20px);
    width: 100%;
    margin-bottom: clamp(10px, 2vw, 20px);
    break-inside: avoid;
}

.split-image-container .photo-link {
    margin-bottom: 0;
    width: 0;
    min-width: 0;
    flex: 1;
}

.split-image-container .gallery-item {
    width: 100%;
    height: 100%;
}

/* Footer Navigation */
.gallery-footer {
    font-family: 'General Sans Variable', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 4rem;
    font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
    margin-top: auto;
    width: 100%;
}

.footer-link {
    text-decoration: none;
    color: #0a0a0a;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-link:hover {
    opacity: 1;
}

.footer-separator {
    height: 1.5rem;
    width: 2px;
    background-color: #0a0a0a;
    opacity: 0.9;
}

.footer-arrow-icon {
    position: relative;
    width: 12px;
    height: 16px;
    display: block;
    /* Flex item */
    flex-shrink: 0;
}

.footer-arrow-icon .arrow-line {
    width: 12px;
    /* Scaled down from 20px */
    /* Ensure they stay centered or adjust if needed */
}

.footer-arrow-icon.right {
    transform: rotate(180deg);
}

.photo-link {
    display: block;
    width: 100%;
    /* Ensure formatting of img child is preserved */
    text-decoration: none;
    cursor: pointer;
}

/* =========================================
   Full Screen Image Viewer
   ========================================= */

body.fullscreen-page {
    background-color: #e5e3dc;
    color: #0a0a0a;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Close Icon (X) - Top Right */
.close-icon {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 100;
    display: block;
}

.close-icon::before,
.close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #0a0a0a;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.close-icon:hover::before {
    transform: translate(-50%, -50%) rotate(135deg);
}

.close-icon:hover::after {
    transform: translate(-50%, -50%) rotate(45deg);
}


/* Main Layout Container */
.fullscreen-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 clamp(1rem, 4vw, 3rem);
    /* Side padding for arrows */
}

/* Navigation Arrows */
.nav-arrow {
    position: relative;
    width: 40px;
    height: 30px;
    /* Taller hit area */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    /* Ensure opacity transition for hover effect if desired */
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.nav-arrow:hover {
    opacity: 1;
}

.nav-arrow .arrow-line {
    /* Reuse existing arrow-line styles but might need specific positioning */
    width: 20px;
    /* Explicit width to match gallery arrows */
    position: absolute;
    height: 1px;
    background-color: #0a0a0a;
    transform-origin: left center;
}

/* Left Arrow (Previous) */
.nav-arrow.left .arrow-top {
    transform: rotate(-40deg);
    top: 50%;
    left: 0;
}

.nav-arrow.left .arrow-bottom {
    transform: rotate(40deg);
    top: 50%;
    left: 0;
}

/* Right Arrow (Next) */
.nav-arrow.right .arrow-top {
    transform: rotate(40deg);
    transform-origin: right center;
    top: 50%;
    right: 0;
    left: auto;
}

.nav-arrow.right .arrow-bottom {
    transform: rotate(-40deg);
    transform-origin: right center;
    top: 50%;
    right: 0;
    left: auto;
}

/* Image Container */
.image-wrapper {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Top/Bottom: Large padding to center vertically with breathing room */
    /* Left/Right: Smaller padding to maximize width while keeping off arrows */
    padding: clamp(3rem, 12vh, 15rem) clamp(0rem, 1vw, 4rem);

    /* Ensure image doesn't touch arrows */
    margin: 0 0.5rem;
}

.image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* =========================================
   Writing Page Styles
   ========================================= */

body.writing-page {
    background-color: #e5e3dc;
    color: #0a0a0a;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 3rem;
    /* Assuming standard project background */
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'General Sans Variable', sans-serif;
}

/* Title */
.writing-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 144, "WONK" 0;
    font-feature-settings: "ss01";

    /* Fluid Font Size */
    font-size: var(--fs-photos-title);

    color: #FFFFFF;
    opacity: 0.5;
    text-align: center;

    margin-top: clamp(2rem, 4vw, 4rem);
    margin-bottom: clamp(4rem, 8vw, 8rem);

    width: 100%;
    line-height: 0.8;
}

/* Container */
.article-container {
    width: 100%;
    padding: 0 clamp(1rem, 30vw - 10rem, 25rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 5rem;
}

/* Article Link Wrapper */
.article-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

/* Article Item Grid */
.article-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* or flex-start if preferred aligned top */
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: 1rem;
    /* Ensure image always stays to the right, never stacks */
    flex-wrap: nowrap;
}

/* Text Section */
.article-text {
    flex: 1;
    min-width: 0;
    /* Allow text to shrink if needed */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Reduced gap */
}

.article-title {
    font-family: 'General Sans Variable', sans-serif;
    font-weight: 600;
    /* Reduced font size */
    font-size: clamp(1.2rem, 2vw, 2rem);
    line-height: 1.1;
    margin: 0;
    color: #0A0A0A;
}

.article-desc {
    font-family: 'General Sans Variable', sans-serif;
    font-weight: 400;
    /* Reduced font size */
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    margin: 0;
    color: #0A0A0A;
    margin-bottom: 0.1rem;
}

.article-date {
    font-family: 'General Sans Variable', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: clamp(0.7rem, 0.8vw, 0.9rem);
    color: #0A0A0A;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Visual Section */
.article-visual {
    /* Prevent image from shrinking, keep it robust */
    flex-shrink: 0;
    /* Fixed width logic: smaller on mobile, larger on desktop */
    width: clamp(100px, 25vw, 200px);
}

.article-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--item-border-radius);
    /* Reuse valid border radius variable */
    display: block;
}

/* Separator Line */
.article-separator {
    width: 100%;
    height: 2px;
    background-color: #0A0A0A;
    opacity: 0.25;
}

/* =========================================
   Article Detail Page Styles
   ========================================= */

body.article-detail-page {
    background-color: #e5e3dc;
    color: #0a0a0a;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 3rem;
    /* Assuming standard project background */
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'General Sans Variable', sans-serif;
}

/* Content Wrapper - Reusing article container width logic */
.article-content-wrapper {
    width: 100%;
    /* Match the side padding logic from writing page */
    padding: 0 clamp(1rem, 30vw - 10rem, 25rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 5rem;
    padding-top: 2rem;
}

/* Typography */
.article-detail-title {
    font-family: 'General Sans Variable', sans-serif;
    font-weight: 600;
    /* Bold */
    font-size: clamp(1.5rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0;
    color: #0A0A0A;
    text-align: left;
}

.article-meta {
    font-family: 'General Sans Variable', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 0.9rem;
    line-height: 2;
    color: #0A0A0A;
}

.meta-date {
    font-weight: 700;
    /* Bold date */
}

.length-mins {
    font-weight: 200;
}

/* Featured Image */
.article-detail-image-container {
    width: 100%;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

.article-detail-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--item-border-radius);
}

/* Body Text */
.article-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: 'General Sans Variable', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
    /* Justified text */
}

.article-body p {
    margin: 0;
}

/* Special formatting */
.article-bold-line {
    font-weight: 700;
    /* Bold */
}

.article-italic-line {
    font-style: italic;
}

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

body.about-page {
    background-color: #e5e3dc;
    color: #0a0a0a;
    font-family: 'General Sans Variable', sans-serif;
    overflow-x: hidden;
    width: 100%;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    padding-top: 3rem;
    padding-left: 0;
    /* Ensure no side padding */
    padding-right: 0;
}

/* --- Header Section --- */
.about-header-section {
    position: relative;
    padding: 0 clamp(1rem, 5vw, 5rem);
    padding-bottom: clamp(2rem, 5vw, 5rem);
    min-height: auto;
    /* Remove 100vh constraint */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    /* Add margin instead of massive min-height padding */
}

.about-bg-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-feature-settings: "ss01";
    font-size: var(--fs-photos-title);
    color: #FFFFFF;
    opacity: 0.5;
    margin: 0;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    width: 100%;
    margin-top: 2rem;
}

.about-intro-content {
    --intro-text-col-width: calc(20vw + 5rem);
    /* Base unit for scaling everything relative to this */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center alignment */
    gap: 3vw;
    width: 100%;
    max-width: 1400px;
    margin-top: clamp(2rem, 5vw, 5rem);
    flex-wrap: nowrap;
}

/* ... about-text-column ... */

.about-image-column {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 3rem;
    height: auto;
    /*min-width: var(--intro-img-col-width);*/
    /* Scales directly with the base unit */
}

.about-profile-img {
    /*height: clamp(200px, 35vw, 600px);*/
    /* Variable height */
    width: calc(var(--intro-text-col-width) * 1);
    /* Maintain aspect ratio */
    border-radius: var(--item-border-radius);
    object-fit: cover;
    margin: 0;
}

.about-text-column {
    width: --intro-text-col-width;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Removed text-align: center and align-items: center to allow custom alignment */
    padding-left: 2rem;
}

/* Font sizes scaled relative to image column width */
.intro-heading {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: calc(var(--intro-text-col-width) * 0.35);
    /* ~50px mobile, ~130px desk */
    line-height: 1.1;
    color: #0a0a0a;
    margin-bottom: calc(var(--intro-text-col-width) * 0.1);
    text-align: left;
}

.intro-hey {
    font-weight: 600;
    /* Semi-bold */
    font-style: italic;
    width: calc(var(--intro-text-col-width) * 1.5);
}

.intro-sub {
    /* I'm */
    font-size: calc(var(--intro-text-col-width) * 0.15);
    /* ~20px mobile */
    font-weight: 300;
}

.intro-name {
    /* Sam Hodgson part */
    display: block;
    font-weight: 400;
    font-size: calc(var(--intro-text-col-width) * 0.25);
    /* ~35px mobile */
    text-align: right;
    margin-right: 0;
}

.intro-note {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: calc(var(--intro-text-col-width) * 0.1);
    /* ~16px mobile */
    opacity: 0.7;
    margin-bottom: calc(var(--intro-text-col-width) * 0.15);
    text-align: right;
}

.intro-body {
    font-family: 'General Sans Variable', sans-serif;
    font-size: calc(var(--intro-text-col-width) * 0.09 - 0.7vw);
    /* ~14px mobile */
    line-height: 1.6;
    text-align: right;
    margin-left: auto;
    width: calc(var(--intro-text-col-width) * 1.4);
}

/* Removed duplicate block */


/* --- Generic Section Styles --- */
.about-section {
    padding: 6rem 0;
    /* Remove side padding to go full width */
    display: flex;
    justify-content: center;
    width: 100%;
    /* Full width */
}

.dark-section {
    background-color: #0a0a0a;
    color: #e2e2de;
}

.light-section {
    background-color: #e5e3dc;
    color: #0a0a0a;
}

.section-content {
    width: 100%;
    max-width: none;
    /* remove constraint for full width strip */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Helper to constrain text but let images go free */

.section-content>*:not(.thumbnails-link-wrapper) {
    padding: 0 clamp(1rem, 10vw - 8rem, 10vw);
}

.section-label-link {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.section-label-link:hover {
    opacity: 1;
}

.section-title {
    font-family: 'Fraunces', serif;
    font-style: normal;
    font-variation-settings: "opsz" 144, "WONK" 0;
    font-weight: 400;
    font-size: clamp(1.8rem, 2vw + 1rem, 3rem);
    margin-bottom: 2.5rem;
    line-height: 1.2;
}

.section-desc {
    font-family: 'General Sans Variable', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 3rem;
    opacity: 0.9;
    font-weight: 200;
}

.see-more-text {
    font-family: 'General Sans Variable', sans-serif;
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 1rem;
    font-weight: 200;
}


/* --- Photos Section Specifics --- */
.thumbnails-link-wrapper {
    width: 100%;
    display: block;
    text-decoration: none;
    overflow: hidden;
    /* Hide overflow for the scrolling strip */
}

.thumbnails-strip {
    display: flex;
    gap: 1vw;
    /* Consistent gap */
    width: max-content;
    /* Ensure strip fits all items in one line */
    animation: scroll 60s linear infinite;
    /* Slow consistent scroll */
}

.thumbnails-strip:hover {
    animation-play-state: paused;
    /* Optional: pause on hover */
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Scroll by half (one full set) */
    }
}

.thumb-item {
    flex: 0 0 auto;
    height: clamp(50px, 15vw, 500px);
    width: auto;
    border-radius: var(--item-border-radius);
    /* Matched border radius */
    overflow: hidden;
    /* Removed transition and hover transform effect */
}

/* Specific fix: ensure items have clear separation */
.thumb-item img {
    display: block;
    height: 100%;
    width: auto;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- Cards Grid (Writing & Projects) --- */
.cards-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    width: 100%;
}

.content-card {
    text-decoration: none;
    color: inherit;
    width: 250px;
    /* Fixed width */
    background-color: rgba(255, 255, 255, 0);
    /* Subtle box bg */
    border-radius: var(--item-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 3px solid rgba(255, 255, 255, 0.8);
    /* Border opacity 0.4 */
    transition: transform 0.3s ease;
}

/* Light section override for card border/bg */
.light-section .content-card {
    background-color: rgba(255, 255, 255, 0);
    border: 3px solid rgba(255, 255, 255, 0.4);
}

.content-card:hover {
    transform: translateY(-5px);
}

.card-image-wrapper {
    width: 100%;
    aspect-ratio: 3/2;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(0.75*var(--item-border-radius));
}

.card-text {
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    opacity: 0.8;
}

.card-title {
    font-family: 'General Sans Variable', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

/* =========================================
   Home Page Animations
   ========================================= */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initially hide the elements */
.main-nav .nav-item,
.social-links {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Staggered text appearance */
.main-nav .nav-item:nth-child(1) {
    animation-delay: 0.15s;
    /* I About */
}

.main-nav .nav-item:nth-child(2) {
    animation-delay: 0.3s;
    /* II Photos */
}

.main-nav .nav-item:nth-child(3) {
    animation-delay: 0.45s;
    /* III Writing */
}

.main-nav .nav-item:nth-child(4) {
    animation-delay: 0.6s;
    /* IV Projects */
}

/* Icons appear last */
.social-links {
    animation-delay: 0.75s;
}

/* =========================================
   Footer
   ========================================= */

.site-footer {
    width: 100%;
    padding: clamp(4rem, 8vw, 6rem) 1rem 4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e5e3dc;
    gap: 0.8rem;
    position: relative;
    z-index: 10;
}

.footer-text {
    font-family: 'General Sans Variable', sans-serif;
    color: #0a0a0a;
    font-weight: 300;
    font-size: var(--fs-footer-text);
    text-align: center;
    margin: 0;
}

.footer-form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-input {
    background-color: #FFFBF5;
    border: 3px solid #FFFBF5;
    /* Match button border size for alignment */
    padding: clamp(0.5rem, 1vw, 0.6rem) 1.2rem;
    font-family: 'General Sans Variable', sans-serif;
    font-weight: 400;
    font-size: calc(0.95 * var(--fs-footer-text));
    color: rgba(10, 10, 10, 0.8);
    border-radius: 10px 0 0 10px;
    outline: none;
    width: clamp(250px, 30vw, 300px);
    box-shadow: none;
    appearance: none;
    transition: background-color 0.3s ease;
}

.footer-input::placeholder {
    color: rgba(10, 10, 10, 0.8);
}

.footer-btn {
    background-color: rgba(255, 251, 245, 0.3);
    border: 3px solid #FFFBF5;
    padding: clamp(0.5rem, 1vw, 0.6rem) 1.5rem;
    font-family: 'General Sans Variable', sans-serif;
    font-weight: 400;
    font-size: calc(0.95 * var(--fs-footer-text));
    color: rgba(10, 10, 10, 0.65);
    cursor: pointer;
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.footer-btn:hover {
    background-color: rgba(255, 251, 245, 0.5);
    color: rgba(10, 10, 10, 0.9);
}

.form-message {
    font-family: 'General Sans Variable', sans-serif;
    font-size: 0.8rem;
    color: #e74c3c;
    margin-top: 0.5rem;
    position: absolute;
    bottom: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.form-message.success {
    color: #2ecc71;
}


.form-message.visible {
    opacity: 1;
}

/* Honeypot field for spam protection */
.honeypot-field {
    display: none;
}

/* =========================================
   Contact Page Styles
   ========================================= */

body.contact-page {
    background-color: #e5e3dc;
    color: #0a0a0a;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.contact-container {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.contact-input,
.contact-btn {
    font-family: 'General Sans Variable', sans-serif;
    color: #0a0a0a;
    border: none;
    outline: none;
    font-size: 1rem;
    border-radius: 4px;
    /* Consistent corner rounding, adjust if needed */
}

/* Specific styling for Email Input */
.email-input {
    background-color: #fffbf5;
    /* Default full opacity based on request distinction */
    flex: 1;
    /* Takes up remaining space */
    padding: 0.6rem 1.5rem;
    color: rgba(10, 10, 10, 0.65);
    /* "other text" opacity 0.65 */
}

.email-input::placeholder {
    color: rgba(10, 10, 10, 0.8);
    /* "your email" opacity 0.8 */
}

/* Specific styling for Send Button */
.contact-btn {
    background-color: rgba(255, 251, 245, 0.7);
    /* 0.7 Opacity */
    padding: 0.6rem 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
    color: rgba(10, 10, 10, 0.65);
    /* Assuming "other text" applies here too */
    white-space: nowrap;
}

.contact-btn:hover {
    background-color: rgba(255, 251, 245, 1);
    /* Increase opacity on hover */
}

.send-icon {
    width: 16px;
    height: auto;
    opacity: 0.65;
    /* Match text opacity */
}

/* Specific styling for Message Textarea */
.message-input {
    background-color: rgba(255, 251, 245, 0.7);
    /* 0.7 Opacity */
    width: 100%;
    height: 300px;
    /* Adjust height as needed */
    resize: none;
    padding: 1rem 1.5rem;
    color: rgba(10, 10, 10, 0.65);
}

.message-input::placeholder {
    color: rgba(10, 10, 10, 0.65);
    /* "other text" opacity? or should it be 0.8 like email? usually message placeholder is similar to email placeholder but user specified "your email text" specifically. */
}

/* Custom placeholder specific overrides if needed */
input::placeholder,
textarea::placeholder {
    opacity: 1;
    /* Reset default browser opacity to allow custom rgba */
}

/* Contact status message - similar to footer but position relative */
.contact-status {
    font-family: 'General Sans Variable', sans-serif;
    font-size: 0.8rem;
    color: #0a0a0a;
    margin-top: 1rem;
    align-self: flex-start;
    /* Align to left of container */
    padding-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    min-height: 1.2em;
    /* Reserve space */
}

.contact-status.visible {
    opacity: 1;
}

.contact-status.success {
    color: #2ecc71;
}

.contact-status.error {
    color: #e74c3c;
}