#main-content, .container-fluid {
    font-family: 'Inter', sans-serif;
}

#page-content {
    max-width:960px;
}

h1 {
    font-weight: 800;
}

h1.hero {
    line-height: 1.6;    /* Normal, tight headline spacing */
    /* Crucial: This creates room ABOVE the headline so the 
        angled text doesn't get clipped or bleed into sections above */
    padding-top: 0.3em;  
}

/* The anchor point */
.insertion-point {
    position: relative;
    display: inline-block;
    width: 0;
    vertical-align: baseline;
    /* Adds a tiny bit of horizontal breathing room between the words */
    margin: 0 0.15em; 
}

/* 1. The Caret (^) - Made bolder and lifted slightly */
.insertion-point::before {
    content: "^";
    position: absolute;
    top: -1.4em;
    left: -0.25em;
    color: #0066cc;    /* Vibrant blue ink */
    font-size: 0.9em;  
    font-weight: 900;  /* Extra bold to match the heavy headline weight */
}

/* 2. The Angled Inserted Text - Pushed up to clear the capitals */
.insertion-point::after {
    content: attr(data-text);
    position: absolute;
    bottom: 1.25em;    /* INCREASED: Pushes the text safely above the headline */
    left: 0.6em;      /* Aligns the start of the word closer to the caret tip */
    color: black;    /* correction ink */
    font-family: 'Courier New', Courier, monospace; 
    font-weight: bold;
    white-space: nowrap;      
    
    /* Slightly larger than before so it remains legible against giant text */
    font-size: 0.5em;   
    letter-spacing: -0.01em;

    /* The Angle */
    transform: rotate(-6deg); /* Slightly steeper angle for a hand-written look */
    transform-origin: left bottom;
}

.polaroid-gallery {
    margin-top:2.0em;
}

.polaroid-gallery figure.polaroid:nth-child(odd) {
    transform: rotate(2deg);
}

.polaroid-gallery figure.polaroid:nth-child(even) {
    transform: rotate(-2deg);
}

/* The Polaroid Frame Wrapper */
figure.polaroid {
    display: block;
    box-sizing: border-box;
    max-width: calc(100% - 3em);
    background-color: white;
    transform: rotate(-3deg);
    margin: 1.5em auto;
    filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.3));
    
    /* Equal spacing on top and sides, a little room before the text */
    padding: 1em 1em 2.5em 1em; 
}

/* The Actual Photo Inside */
figure.polaroid img {
    display: block;
    width: 100%;
    height: auto;
}

/* The Handwritten Caption at the Bottom */
figure.polaroid figcaption {
    text-align: center;
    margin-top: 0.8em;
    margin-bottom: 0em;
    font-family: monospace; 
    font-size: 1.2rem;
    color: #222;
    font-weight: bold;
}

/* --- 2. Desktop Grid Responsive Layout --- */
/* 768px is the standard tablet/desktop threshold */
@media (min-width: 768px) {
    
    .polaroid-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2em; /* Gives the polaroids breathing room so they don't overlap when rotating */
        padding: 0em 2em 2em 2em;
        align-items: flex-start;
    }

    figure.polaroid {
        /* Prevents it from ever getting massive on giant monitors */
        max-width: 500px; 
        
        /* Forces them to sit next to each other. 
        Change '400px' to adjust the minimum size before they stack vertically */
        flex: 1 1 400px; 
        
        /* Reset mobile auto-centering margins so Flexbox can do its job */
        margin: 0; 
    }
}

.open-or-closed-sign {
    margin:0 1em 0 0;
    transform:rotate(3deg);
    filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.3));
    width:100px;
    aspect-ratio: 6/4;
    object-fit:contain;
}