/* vintage-theme.css - Minimalist Layout */

/* 1. Font Definitions */
@font-face {
    font-family: 'Desdemona';
    src: url('../fonts/DesdemonaBlack.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/GothamBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* 2. Global Variables */
:root {
    --color-gold: #D4AF37;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-cream: #F5F5F5;
}

/* 3. Base Styles */
body {
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
.font-desdemona {
    font-family: 'Desdemona', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h4,
h5,
h6,
.font-gotham {
    font-family: 'Gotham', sans-serif;
    text-transform: uppercase;
}

.font-lato {
    font-family: 'Lato', sans-serif;
}

/* 4. Zig Zag Utilities - Version 7 "Rough Saw" */
.zigzag-rough-saw-bottom {
    /* Exact logic from user request, using intersection */
    --size: 20px;
    /* Important: The user wants mask-composite: intersect */
    /* This creates ONLY the teeth. For a solid bar, we need to handle it. */
    /* BUT the user asked to 'remove all css and directly implement'. */

    background-color: transparent;
    position: relative;
    /* Height must match the tooth size if we are just drawing teeth */

    --g1: conic-gradient(from -30deg at bottom, #0000, #000 1deg 60deg, #0000 61deg) 50% / var(--size) 100% repeat-x;
    --g2: conic-gradient(from -60deg at bottom, #0000, #000 1deg 120deg, #0000 121deg) 50% / 25px 100% repeat-x;

    -webkit-mask: var(--g1), var(--g2);
    -webkit-mask-composite: source-in;
    mask: var(--g1), var(--g2);
    mask-composite: intersect;
}

.zigzag-rough-saw-top {
    /* Inverted logic */
    --size: 20px;
    background-color: transparent;
    position: relative;

    /* 150deg = 180 - 30 (pointing down) */
    --g1: conic-gradient(from 150deg at top, #0000, #000 1deg 60deg, #0000 61deg) 50% / var(--size) 100% repeat-x;
    /* 120deg = 180 - 60 (pointing down) */
    --g2: conic-gradient(from 120deg at top, #0000, #000 1deg 120deg, #0000 121deg) 50% / 25px 100% repeat-x;

    -webkit-mask: var(--g1), var(--g2);
    -webkit-mask-composite: source-in;
    mask: var(--g1), var(--g2);
    mask-composite: intersect;
}

.zigzag-rough-saw-both {
    --size: 20px;
    position: relative;
    /* For 'both', if we use intersection, we lose the center body. */
    /* I will use the safest approach that maintains the 'Rough Saw' look but keeps Visibility */
    /* Using pseudo-elements to layer the Top and Bottom teeth onto a solid background */
    background: transparent;
    padding-top: var(--size);
    padding-bottom: var(--size);
}

.zigzag-rough-saw-both::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: -1;
    --t1: conic-gradient(from 150deg at top, #0000, #000 1deg 60deg, #0000 61deg) 50% 0 / var(--size) 100% repeat-x;
    --b1: conic-gradient(from -30deg at bottom, #0000, #000 1deg 60deg, #0000 61deg) 50% 100% / var(--size) 100% repeat-x;
    --fill: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat;
    -webkit-mask: var(--fill), var(--t1), var(--b1);
    -webkit-mask-composite: source-over, source-in, source-in;
    mask: var(--fill), var(--t1), var(--b1);
    mask-composite: add, intersect, intersect;
}

@media (max-width: 768px) {

    .zigzag-rough-saw-bottom,
    .zigzag-rough-saw-top,
    .zigzag-rough-saw-both {
        --size: 16px;
    }
}

/* 5. Minimalist Components */
.btn-gold {
    background-color: transparent;
    border: 2px solid var(--color-gold);
    color: var(--color-black);
    font-family: 'Gotham', sans-serif;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-gold:hover {
    background-color: var(--color-gold);
    color: var(--color-white);
}

/* Remove Ticker, Glitch, and Heavy Shadows */
.brutalist-border {
    border: 1px solid var(--color-black);
}

/* CSS Cleaned up */