:root{
    --bg:#f4f6f8;
    --text:#333;
    --primary:#4a6fa5;
    --primary-dark:#345583;
    --muted:#e0e7ff;
    --card:#ffffff;
    --radius:12px;
    --shadow:0 6px 20px rgba(0,0,0,0.08);
    --elev-sm:0 4px 12px rgba(0,0,0,0.12);
    --focus:0 0 5px rgba(74,111,165,0.3);
    --font-sans: Arial, sans-serif;
    --min-touch:44px;
    --focus-ring:3px solid #ffbf47;
}

/* Mobile / accessibility base */
html {
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
}

/* Fluid type for small to large screens */
h1 { font-size: clamp(1.25rem, 4vw, 2rem); }
h2 { font-size: clamp(1rem, 3vw, 1.5rem); }
p  { font-size: clamp(0.95rem, 2.2vw, 1rem); }

/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--font-sans);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}

/* Make media fluid */
img,picture,video{max-width:100%;height:auto;display:block;}

/* Skip link & screen-reader utilities (add <a class="skip-link" href="#main">Skip to content</a> at top of body) */
.skip-link{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.skip-link:focus{
    left:1rem;
    top:1rem;
    width:auto;
    height:auto;
    padding:.5rem .75rem;
    background:var(--primary);
    color:#fff;
    z-index:1000;
    border-radius:6px;
}
.sr-only{
    position:absolute!important;
    height:1px;width:1px;
    overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* Layout */
header,footer{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
}

header{
    padding:20px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

header h1{margin:0 0 10px;font-size:28px;color:#000}

nav{margin-top:6px}
nav a{
    color:inherit;
    margin:0 12px;
    text-decoration:none;
    font-weight:700;
    font-size:16px;
    position:relative;
    transition:color .22s ease;
    display:inline-flex;
    align-items:center;
    padding:8px 10px;
    border-radius:6px;
    touch-action:manipulation;
    min-height:var(--min-touch);
}
nav a::after{content:"";display:block;height:2px;width:0;background:currentColor;margin-top:6px;transition:width .22s}
nav a:hover,nav a:focus{color:var(--muted)}
nav a:hover::after,nav a:focus::after{width:100%}

/* Increase hit areas and accessible interactions */
button, .btn{
    background:var(--primary);
    color:#fff;
    padding:12px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    margin-top:15px;
    transition:background .2s,transform .08s;
    min-height:var(--min-touch);
    touch-action:manipulation;
}
button:hover,.btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(1px)}

/* Container spacing tuned for small screens */
.container{
    max-width:1000px;
    margin:28px auto;
    padding:16px;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

/* Typography */
h1,h2,h3{color:var(--primary);margin:0 0 12px}
h2{font-size:24px}
p{margin:0 0 15px}

/* Gallery (grid-based, responsive) */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:15px}
.gallery a{display:block;text-decoration:none}
.gallery img{
    display:block;width:100%;height:250px;object-fit:cover;border-radius:var(--radius);
    box-shadow:var(--elev-sm);transition:transform .28s ease,box-shadow .28s ease;
}
.gallery a:hover img,.gallery a:focus img{transform:scale(1.04);box-shadow:0 10px 25px rgba(0,0,0,0.18)}

/* Forms: larger touch-friendly targets */
form{margin-top:15px}
form label{display:block;font-weight:700;margin:15px 0 6px}
form input,form textarea,form select{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;
    transition:border .18s,box-shadow .18s;
}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)}

/* Footer */
footer{padding:20px;text-align:center;margin-top:40px;font-size:14px}

/* Accessibility: visible focus state */
:focus-visible{outline:var(--focus-ring);outline-offset:3px}

/* Responsive tweaks */
@media (max-width:768px){
    header h1{font-size:22px}
    nav a{display:inline-block;margin:8px 8px;font-size:15px}
    .container{margin:16px;padding:16px}
}

/* Smaller screens: single column gallery and touch affordances */
@media (max-width:600px){
    .gallery{grid-template-columns:1fr}
    .gallery img{height:auto}
    nav a{padding:10px 12px}
    .container{padding:14px;margin:12px}
}

/* Hamburger / responsive nav (accessible open/close via JS toggling .open on .site-nav) */
.nav-toggle{
    display:none;
    background:transparent;border:0;padding:8px;margin-left:8px;cursor:pointer;color:inherit
}
.nav-toggle .hamburger{display:block;width:22px;height:2px;background:currentColor;position:relative;border-radius:2px;transition:background .22s}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{top:7px}
.nav-toggle.open .hamburger{background:transparent}
.nav-toggle.open .hamburger::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle.open .hamburger::after{transform:translateY(-7px) rotate(-45deg)}
.nav-toggle.open .hamburger::before,.nav-toggle.open .hamburger::after{background:currentColor}

.site-nav{display:flex;align-items:center;justify-content:center}
.site-nav .nav-links{display:flex;gap:12px}

@media (max-width:768px){
    .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
    .site-nav{justify-content:space-between}
    .site-nav .nav-links{display:none;position:absolute;left:0;right:0;top:68px;background:var(--card);padding:12px;border-radius:8px;margin:0 16px;box-shadow:var(--shadow);flex-direction:column;color:var(--text)}
    .site-nav.open .nav-links{display:flex}
    .site-nav .nav-links a{padding:12px 14px;border-radius:6px;color:var(--text)}
    .site-nav .nav-links a:hover,.site-nav .nav-links a:focus{color:var(--primary-dark);background:rgba(74,111,165,0.04)}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Utility for high contrast testing */
.high-contrast{background:#000;color:#fff}

/* Mobile — increase reading size */
@media (max-width:600px){
    /* larger base for better readability on small screens */
    html{font-size:20px}

    /* Body text & form labels */
    p, label{font-size:20px;line-height:1.8}

    /* Headings */
    header h1, h1{font-size:32px}
    h2{font-size:24px}
    h3{font-size:20px}

    /* Navigation and buttons */
    nav a{font-size:18px}
    button, .btn{font-size:18px;padding:14px 20px}

    /* Form controls */
    form input, form textarea, form select{font-size:18px;padding:14px}

    /* Footer and container spacing */
    footer{font-size:16px}
    .container{padding:18px}
}

/* End of file */