/* ============================================================
   BASE — tokens, reset, typography, accessibility
   Mobile-first. All viewport-specific rules live further down.
   ============================================================ */

:root {
    /* Colors */
    --pe-ink:          #161616;
    --pe-ink-soft:     #2A2A2A;
    --pe-paper:        #F8F7F4;
    --pe-paper-alt:    #F2F0EB;
    --pe-white:        #FFFFFF;
    --pe-gold:         #B08D57;
    --pe-gold-soft:    #D9BE91;
    --pe-gold-hover:   #9A7845;
    --pe-line:         #D9D6CF;
    --pe-line-soft:    #E7E3DB;

    --pe-text:         #1A1A1A;
    --pe-text-muted:   #5F6368;
    --pe-text-light:   #8A8F98;
    --pe-text-invert:  #FFFFFF;

    --pe-success:      #0F7B6C;
    --pe-warning:      #C28A00;
    --pe-error:        #B42318;

    /* Spacing scale */
    --pe-sp-1:  0.25rem;
    --pe-sp-2:  0.5rem;
    --pe-sp-3:  0.75rem;
    --pe-sp-4:  1rem;
    --pe-sp-5:  1.5rem;
    --pe-sp-6:  2rem;
    --pe-sp-7:  3rem;
    --pe-sp-8:  4rem;
    --pe-sp-9:  6rem;
    --pe-sp-10: 8rem;

    /* Radii */
    --pe-r-sm: 4px;
    --pe-r-md: 8px;
    --pe-r-lg: 16px;
    --pe-r-xl: 24px;
    --pe-r-pill: 999px;

    /* Shadows */
    --pe-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --pe-shadow-md: 0 6px 20px rgba(0,0,0,.06);
    --pe-shadow-lg: 0 20px 45px rgba(0,0,0,.10);

    /* Motion */
    --pe-ease: cubic-bezier(.16, 1, .3, 1);
    --pe-dur:  320ms;

    /* Layout */
    --pe-container:        calc(100% - 2.5rem);
    --pe-container-max:    1440px;
    --pe-header-h:         72px;
    --pe-header-h-wide:    96px;

    /* Z-index */
    --pe-z-header:   100;
    --pe-z-menu:     200;
    --pe-z-toast:    900;
    --pe-z-modal:    1000;

    /* Fonts */
    --pe-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pe-font-heading: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pe-font-serif:   Georgia, 'Times New Roman', serif;
}

/* Reset ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--pe-header-h) + 1rem); }

body {
    min-height: 100vh;
    font-family: var(--pe-font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pe-text);
    background: var(--pe-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video, svg, canvas { display: block; max-width: 100%; height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; padding: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Typography ------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pe-font-heading);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--pe-ink);
}

h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { line-height: 1.75; }

a:hover { color: var(--pe-gold); }

/* Accessibility ---------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--pe-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

.visually-hidden,
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: var(--pe-z-toast);
    padding: 0.75rem 1rem;
    background: var(--pe-ink);
    color: var(--pe-white);
    border-radius: var(--pe-r-md);
    transition: top 200ms ease;
}

.skip-link:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}