:root{
    --brand:#0f6cbd; --dark:#0b3a66; --ok:#0a7d3b; --warn:#b66a00; --accent:#ffb703;
    --bg:#f7fafc; --card:#ffffff; --text:#1b1f23; --muted:#5c6770; --ring:rgba(15,108,189,.25);
    --shadow:0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  a{color:var(--brand);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:1200px;margin:0 auto;padding:0 16px}
  .btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;border:1px solid #d6e3f0;background:#fff;padding:12px 16px;cursor:pointer;box-shadow:var(--shadow)}
  .btn:hover{transform:translateY(-1px)}
  .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
  .btn.alt{background:#fff;border-color:#e0e7ef;color:var(--brand)}
  .btn:focus{outline:3px solid var(--ring);outline-offset:2px}
  .chip{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid #e6ecf1;background:#f9fcff;color:var(--brand);font-size:12px}
  
  /* Header (sticky) */
  header{position:sticky;top:0;z-index:40;background:#ffffffd9;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e9eef4}
    header .wrap {
        margin-left: 10px;
        margin-right: auto; /* keep it left-aligned */
    }
  .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
  .brand{display:flex;align-items:center;gap:10px}
  .brand h1{font-size:18px;margin:0}
  .nav-links{display:flex;flex-wrap:wrap;gap:10px}
  .nav-links a{padding:8px 12px;border-radius:999px;border:1px solid #e6ecf1;background:#fff}
  
  /* Hero */
  .hero{
    background:radial-gradient(1000px 380px at 20% 10%, rgba(255,255,255,.5), transparent),
               linear-gradient(135deg,var(--brand),var(--dark));
    color:#fff;
  }
  /* Ensure hero sidebar card uses dark text and normal link colors */
  .hero .card { color: var(--text); }
  .hero .card a { color: var(--brand); }
  .hero .card .muted, .hero .card .small { color: var(--muted); }
  
  .hero-inner{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:center;padding:48px 0}
  .hero-col{grid-column:span 7}
  .hero-aside{grid-column:span 5}
  @media (max-width:900px){.hero-col,.hero-aside{grid-column:1/-1}}
  .headline{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 10px}
  .sub{color:#e6f2ff;font-size:clamp(14px,2.2vw,18px);margin:0 0 18px}
.kicker {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: darkblue
}
.yellowkicker {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: yellow
}
  
  /* Layout & cards */
  .section{padding:28px 0}
    .section h1 {
        margin: 0 0 10px;
        font-size: 36px;
        color: black;
        text-align: center;
    }
  .section h2{margin:0 0 10px;font-size:26px}
  .muted{color:var(--muted)}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
  .col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5}
  .col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-8{grid-column:span 8} .col-12{grid-column:1/-1}
  @media (max-width:900px){.col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:1/-1}}
  .card{background:var(--card);border:1px solid #e6ecf1;border-radius:16px;box-shadow:var(--shadow);padding:16px}
  .card h3{margin:0 0 6px}
  .list{margin:0;padding:0;list-style:none}
  .list li{padding:10px 0;border-top:1px dashed #e5eaee}
  .list li:first-child{border-top:0}
  .meta{color:var(--muted);font-size:13px}
  .badge{font-size:12px;border:1px solid #e6ecf1;border-radius:6px;padding:2px 6px;background:#f7fbff;margin-left:6px}
  .pill{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #e6ecf1;background:#f9fcff;color:var(--brand)}
  .tips{background:#0a7d3b10;border:1px solid #0a7d3b30}
  .warn{background:#b66a0010;border:1px solid #b66a0030}
  
  /* Footer */
  footer{padding:32px 0;border-top:1px solid #e6ecf1;background:#fff;color:#333}
  small,.small{font-size:12px;color:var(--muted)}
  
  /* =========================
     Photo grid + centered zoom
     ========================= */
  
  /* Grid */
  .nf-grid{
    position: relative; /* for overlay hook */
    display:grid;
    gap:12px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .nf-tile{
    margin:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .nf-tile img{
    width:25%;
    height:60px;                 /* consistent tile height */
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    cursor: zoom-in;
  }
  
  /* Dim the page while an image is enlarged (modern browsers with :has) */
  .nf-grid::after{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .nf-grid:has(img:hover)::after,
  .nf-grid:has(img:focus-visible)::after{
    opacity: 1;
  }
  
  /* Center the image on hover/focus (no JS) */
  .nf-tile img:hover,
  .nf-tile img:focus-visible{
    position: fixed;              /* take out of flow */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* center in viewport */
    z-index: 10001;
    width: min(90vw, 1200px);     /* fit width */
    height: auto;
    max-height: 90vh;             /* fit height */
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
    filter: saturate(1.05);
    outline:3px solid var(--ring);
    outline-offset:2px;
    cursor: zoom-out;
  }
  
  /* Optional caption styling */
  .nf-tile .small{ color: var(--muted); }
  
  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce){
    .nf-tile img{ transition:none }
  }

/* public/stylesheets/admin.css */
.admin-wrap {
    max-width: 900px;
    margin: 20px auto;
}

.card {
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

label {
    font-weight: 600;
    display: block;
    margin-top: 8px;
}

input[type="text"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d6e3f0;
    border-radius: 8px;
}

textarea {
    min-height: 100px;
}

.row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #0f6cbd;
    background: #0f6cbd;
    color: #fff;
    cursor: pointer;
}

.muted {
    color: #5c6770;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fieldset {
    margin-top: 12px;
}

    .fieldset[hidden] {
        display: none !important;
    }

.ad-feed {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 0.85rem;
    text-align: right;
    line-height: 1.4;
    width: 250px;
}

.ad-scroll-container {
    overflow: hidden;
    white-space: nowrap;
    width: 40%;
    height: 3em;
    position: absolute;
    right: 15px;
}

.ad-bar {
    overflow: hidden;
}

.ad-scroll {
    display: inline-flex; /* keep items on one line and aligned */
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    padding-left: 100%; /* start off-screen to the right */
    animation: scroll-left 30s linear infinite;
    will-change: transform;
}

.ad-img {
    height: 80px; /* size the logo here */
    width: auto;
    vertical-align: middle;
}

.ad-link {
    position: relative; /* ensures it paints above neighbors if needed */
    z-index: 1;
}

.spacer {
    opacity: .4;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.ad-feed a {
    color: yellow;
    text-decoration: underline;
    font-weight: bold;
    display: block;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .ad-feed {
        display: none;
    }
}

.titlebar {
    display: flex;
    gap: 12px;
}

    .titlebar h2 {
        margin: 0;
    }

.brand-mark-slideshow {
    width: 192px;
    height: 192px;
    position: relative;
    overflow: hidden;
}

    /* every slide fills the box */
    .brand-mark-slideshow .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        animation: slideshowFade 45s infinite; /* 7 slides × 5s each */
    }

        .brand-mark-slideshow .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* text overlay */
    .brand-mark-slideshow .slide-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 4px 6px;
        font-size: 11px;
        line-height: 1.2;
        color: #fff;
        background-color: black;
        text-align: center;
    }

    /* staggered start times for each slide */
    .brand-mark-slideshow .slide:nth-child(1) {
        animation-delay: 0s;
    }

    .brand-mark-slideshow .slide:nth-child(2) {
        animation-delay: 5s;
    }

    .brand-mark-slideshow .slide:nth-child(3) {
        animation-delay: 10s;
    }

    .brand-mark-slideshow .slide:nth-child(4) {
        animation-delay: 15s;
    }

    .brand-mark-slideshow .slide:nth-child(5) {
        animation-delay: 20s;
    }

    .brand-mark-slideshow .slide:nth-child(6) {
        animation-delay: 25s;
    }

    .brand-mark-slideshow .slide:nth-child(7) {
        animation-delay: 30s;
    }

    .brand-mark-slideshow .slide:nth-child(8) {
        animation-delay: 35s;
    }

/* keyframes: each slide is visible for ~25% of its window */
@keyframes slideshowFade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.gallery-stage {
    width: 384px;
    height: 384px;
    position: relative;
    overflow: hidden;
}