/* Felix Oyeleke Portfolio - Base Styles */
/* Clean, minimal portfolio design with grain effects */

/* Import fonts */
/* Fonts are loaded via <link> in HTML for performance */

/* Self-hosted font: Engravers Old English */
@font-face {
  font-family: 'Engravers Old English';
  src: local('Engravers Old English'),
       url('/fonts/Engravers Old English BQ Regular/Engravers Old English BQ Regular.woff2?v=20251125-1') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables - Design System */
:root {
    /* Colors - Editorial Palette */
    --gold: #222222;
    --text-primary: #111111;
    --text-secondary: #4B5563;
    --background-primary: #F8F5F0;
    --background-secondary: #FFFFFF;
    --accent-blue: #8C1D18;
    --border-color: #E5DED0;

    /* Layout */
    --sidebar-width: 31%;
    --main-content-width: 69%;
    --sidebar-padding: 2rem;
    --content-padding: 2rem;

    /* Typography */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-family-heading: 'Oswald', 'Inter', sans-serif;
    --font-family-cursive: 'Crimson Text', 'Times New Roman', serif;
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Sizes (desktop defaults) */
    --font-size-hero: clamp(2.6rem, 6vw, 4.7rem);
    --font-size-h1: clamp(2.1rem, 4.5vw, 3.05rem);
    --font-size-h2: clamp(1.7rem, 3.5vw, 3rem);
    --font-size-h3: clamp(1.35rem, 2.6vw, 2.25rem);
    --font-size-body: clamp(1rem, 1.35vw, 1.25rem);
    --font-size-small: clamp(0.9rem, 1.1vw, 1.1rem);
    --font-size-xs: clamp(0.8rem, 0.95vw, 0.875rem);
    --font-size-nav: clamp(0.95rem, 1.2vw, 1.2rem);
    --font-size-eyebrow: clamp(0.85rem, 1vw, 1.2rem);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;

    /* Border Radius */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-full: 999rem;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Accessible focus outlines */
*:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

html {
    background-color: var(--background-primary);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-primary);
    background-color: var(--background-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Grain Effects */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 75% 75%, rgba(140, 29, 24, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 50% 10%, rgba(0, 0, 0, 0.02) 0%, transparent 40%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><defs><filter id="grain"><feTurbulence baseFrequency="0.95" numOctaves="5" result="noise" seed="3"/><feColorMatrix in="noise" type="saturate" values="0"/><feComponentTransfer><feFuncA type="discrete" tableValues="0.01 0.03 0.05 0.07 0.09 0.11"/></feComponentTransfer></filter></defs><rect width="120" height="120" filter="url(%23grain)" opacity="0.5"/></svg>');
    background-size: 100% 100%, 100% 100%, 100% 100%, 180px 180px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    animation: none;
}

/* Enhanced grain for sidebar */
.site-sidebar::after {
    content: none; /* No grain overlay in header on desktop */
}

@keyframes grainMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-1px, -2px) rotate(0.3deg); }
    40% { transform: translate(2px, -1px) rotate(-0.4deg); }
    60% { transform: translate(-2px, 1px) rotate(0.2deg); }
    80% { transform: translate(1px, 2px) rotate(-0.3deg); }
}

/* Typography */
h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-hero);
    font-weight: 500;
    line-height: 1;
    color: var(--gold);
    margin-bottom: var(--spacing-md);
}

h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

p {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}