:root{
    --section-border: #1f1f1f;
    --outline-color: #0f0f0f; /* near-black outline for design */
}

@font-face {
    font-family: "Awesome Serif";
    src: url("assets/fonts/Awesome-Font-Family/Regular/AwesomeSerif-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Awesome Serif";
    src: url("assets/fonts/Awesome-Font-Family/Italic/AwesomeSerifItalic-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Awesome Serif";
    src: url("assets/fonts/Awesome-Font-Family/Regular/AwesomeSerif-BoldRegular.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Awesome Serif";
    src: url("assets/fonts/Awesome-Font-Family/Italic/AwesomeSerifItalic-BdRegular.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

.section-divider{
    border-top: 1px solid var(--outline-color);
}

body{
    font-family: 'Poppins', sans-serif;
}

h1,h2,h3,h4{
    font-family: "Awesome Serif", serif;
}

.section-title{
    font-size: clamp(2.4rem,6vw,5rem);
    line-height: .95;
}

.contacts-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    /* Smaller sizes for contact section headings */
    /* Reduced further for compact contact headings */
    font-size: clamp(0.95rem,2vw,1.1rem);
    line-height: 1.1;
    /* Kerning */
    letter-spacing: -0.04em;
}

.portfolio-title{
    font-family: "Awesome Serif", serif;
    font-size: clamp(4rem,10vw,9rem);
    background: linear-gradient(180deg, #858585 0%, #000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

img{
    object-fit: cover;
}

html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    overflow-x: hidden;
}

/* Header hide/show on scroll */
header{
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
    border-bottom: 1px solid var(--outline-color);
}

header.is-hidden{
    transform: translateY(-100%);
}

/* Ensure Tailwind's border utilities that add top/bottom borders use the outline color */
.border-b{ border-bottom-color: var(--outline-color) !important; }
.border-t{ border-top-color: var(--outline-color) !important; }

/* Expose header height as a CSS variable so sections can offset themselves */
:root{
    --header-height: 4rem; /* default */
}

/* Apply anchor-safe offset to section targets with an id
   Use only scroll-margin-top so the header overlays content without
   adding extra layout space. */
section[id]{
    scroll-margin-top: var(--header-height);
}

/* Only the hero and about sections should expand to the full viewport
   height minus the fixed header. Smaller sections like contact should
   size to their content. */
section#hero,
section#about{
    min-height: calc(100vh - var(--header-height));
}

/* ================= PORTFOLIO ================= */
/* ================= PORTFOLIO ================= */

details.project {
    border-top: 1px solid #2b2b2b;
    transition: border-color .35s ease;
}

details.project:last-child {
    border-bottom: 1px solid #2b2b2b;
}

details.project:hover,
details.project[open] {
    border-color: #000;
}

details.project summary {
    list-style: none;
    cursor: pointer;
    padding: 2rem;
}

details.project summary::-webkit-details-marker {
    display: none;
}

/* Typography */

.project-title{
    transition:
        transform .35s ease,
        letter-spacing .35s ease,
        color .35s ease;
}

.project-description,
.project-date{
    transition: color .35s ease;
}

/* Arrow */

.project-arrow{
    transition:
        transform .35s ease,
        color .35s ease;
}

/* Hover */

details.project:hover .project-title,
details.project[open] .project-title{
    transform: scale(1.02);
    transform-origin:left center;
    letter-spacing:.01em;
    color:#000;
}

details.project:hover .project-description,
details.project[open] .project-description{
    color:#2f2f2f;
}

details.project:hover .project-date,
details.project[open] .project-date{
    color:#000;
}

details.project:hover .project-arrow{
    transform: translateX(4px);
}

details.project[open] .project-arrow{
    transform: rotate(180deg);
}

/* Smooth gallery reveal */

.project-gallery{
    animation: fadeUp .45s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(15px);
    }

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

}