/* ==========================================================================
   Riel Brewing / Noisy Chili Tap House
   --------------------------------------------------------------------------
   Refinement of the original dark-grey theme, not a replacement for it.

   What was kept:  the cool dark base, the card-on-dark structure, the
                   LUCKY-TYPEWRITER display face.

   What changed, and why - the old sheet's problem was NOT contrast. Measured,
   it passed AA on all four of its text pairs. The problem was HIERARCHY:

     - Headings (#b0b3b8) were dimmer than body text (#e2e3e5), so the eye
       landed on paragraphs instead of titles. Headings are now the brightest
       thing on the page.
     - Cards sat at #232428 on a #292b2f container - a 1.06:1 difference. The
       card edges were doing nothing. The ramp is now spaced so raised things
       read as raised.
     - There was no accent at all, so nothing could be emphasised. A single
       restrained amber now carries prices, links, CTAs and "open now".
     - .post-image was capped at max-width:30%, which turned every photo of
       the food and the beer into a thumbnail.

   Every foreground/background pair below is verified at WCAG AA or better
   (18/18, tightest margin 1.24x its minimum).
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
    /* Surfaces - deepened so raised elements read as raised */
    --bg:            #17181b;
    --surface:       #1e2023;
    --raised:        #26282c;
    --sunken:        #131417;

    /* Ink - heading was the single biggest legibility win */
    --text:          #e9eaec;   /* 13.6:1 on surface */
    --muted:         #a0a6ae;   /*  6.7:1 on surface */
    --heading:       #f3f4f5;   /* 14.8:1 on surface */

    /* Amber. The only chromatic note in the system: prices, links, CTAs,
       "open now". Used sparingly - if everything is accented, nothing is. */
    --accent:        #e0a33c;   /*  7.4:1 on surface */
    --accent-soft:   #f0c987;
    --accent-dim:    rgba(224, 163, 60, 0.12);
    --on-accent:     #17181b;   /*  8.0:1 on accent */

    --ok:            #6ec98b;
    --closed:        #9ea3aa;

    /* Borders: decorative vs interactive are different jobs. The interactive
       one clears 3:1 so form fields are perceivable per WCAG 1.4.11. */
    --border:        #33363c;
    --border-strong: #727982;

    /* Type */
    --font-display:  'LUCKY-TYPEWRITER', 'Courier New', ui-monospace, monospace;
    --font-body:     'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* Fluid scale - min at 360px, max at 1200px */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.45rem);
    --step-2:  clamp(1.44rem, 1.30rem + 0.68vw, 1.86rem);
    --step-3:  clamp(1.73rem, 1.50rem + 1.12vw, 2.38rem);
    --step-4:  clamp(2.07rem, 1.71rem + 1.76vw, 3.05rem);

    /* Spacing - 4px base, geometric */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
    --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

    --radius:    10px;
    --radius-lg: 16px;
    --radius-sm: 6px;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 16px rgba(0,0,0,.35);
    --shadow-3: 0 12px 40px rgba(0,0,0,.45);

    --measure: 68ch;      /* readable line length */
    --wrap:    1140px;    /* page max width */
    --wrap-narrow: 760px;
}

@font-face {
    font-family: 'LUCKY-TYPEWRITER';
    /* woff2 first (deploy generates it); ttf kept as the fallback so this
       works even if the conversion step is skipped */
    src: url('lt.woff2') format('woff2'),
         url('../lt.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;   /* text paints immediately instead of blocking */
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.15; color: var(--heading); text-wrap: balance; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; }

a { color: var(--accent); text-decoration-color: rgba(224,163,60,.4); text-underline-offset: 3px; }
a:hover { color: var(--accent-soft); text-decoration-color: currentColor; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Skip link - keyboard users shouldn't tab through the whole nav */
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--accent); color: var(--on-accent);
    padding: var(--sp-3) var(--sp-4); font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- layout -- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 560px) { .wrap, .wrap-narrow { width: calc(100% - 1.75rem); } }

/* The header is sticky, so an in-page anchor would otherwise land with its
   heading hidden underneath it. */
.section, [id] { scroll-margin-top: 84px; }

.section { padding-block: var(--sp-8); }
.section + .section { padding-top: 0; }
@media (max-width: 700px) { .section { padding-block: var(--sp-6); } }

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.section-head h1,
.section-head h2 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    margin: 0;
}
/* min-height 24px: WCAG 2.5.8 Target Size (Minimum), AA. At 0.9rem the text
   box alone was 22px tall, which is a fiddly tap on a phone. */
.section-head .more {
    font-size: var(--step--1); font-weight: 600; letter-spacing: .02em;
    white-space: nowrap;
    display: inline-flex; align-items: center;
    min-height: 24px; padding-block: var(--sp-1);
}

/* Small caps label used above section titles */
.eyebrow {
    font-size: var(--step--1);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------- header -- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(23,24,27,.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } }

.site-header .bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding-block: var(--sp-3);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--heading); }
.brand img { width: 40px; height: auto; object-fit: contain; }
.brand .name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1;
    color: var(--heading);
}
.brand .sub {
    display: block; font-family: var(--font-body);
    font-size: 0.62em; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
    color: var(--text); text-decoration: none;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
    font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; transition: background .15s, color .15s;
}
.nav a:hover { background: var(--raised); color: var(--heading); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-dim); }

/* Mobile nav: a checkbox toggle, no JS needed */
.nav-toggle { display: none; }
.nav-label { display: none; }

@media (max-width: 780px) {
    .nav-label {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; cursor: pointer;
        border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
        color: var(--text);
    }
    .nav-label svg { width: 22px; height: 22px; }
    .nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: var(--sp-2); box-shadow: var(--shadow-3);
    }
    .nav-toggle:checked ~ .nav { display: flex; }
    .nav a { padding: var(--sp-3) var(--sp-4); font-size: var(--step-0); }
    .site-header .bar { position: relative; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
    position: relative;
    text-align: center;
    padding-block: var(--sp-9) var(--sp-8);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224,163,60,.09), transparent 70%),
        var(--bg);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) { .hero { padding-block: var(--sp-7) var(--sp-6); } }

/* logo.png is white artwork baked onto an opaque black rectangle, which is
   why the original sheet tried to hide the edges behind a radial mask - it
   was masking a box that shouldn't have been there. logo-mark.png is
   generated at deploy time with the luminance promoted to an alpha channel,
   so there is no box left to hide and no mask needed. */
.hero-logo {
    width: min(300px, 62vw);
    margin: 0 auto var(--sp-5);
}
.hero h1 {
    font-family: var(--font-display);
    font-size: var(--step-4);
    margin-bottom: var(--sp-3);
    letter-spacing: .01em;
}
.hero .tagline {
    color: var(--muted); font-size: var(--step-1);
    max-width: 48ch; margin: 0 auto var(--sp-5);
}

/* Open/closed pill. align-items:baseline rather than center so the dot stays
   on the first line when the label wraps on a narrow phone instead of
   floating in the vertical middle of a two-line pill. */
.status {
    display: inline-flex; align-items: baseline; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4); border-radius: 999px;
    font-size: var(--step--1); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; text-align: left;
    border: 1px solid var(--border-strong); color: var(--muted);
    background: var(--surface);
    max-width: 100%;
}
.status .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--closed); flex: none;
    position: relative; top: -1px;
}
.status.is-open { color: var(--ok); border-color: rgba(110,201,139,.45); }
.status.is-open .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(110,201,139,.16); }

.hero-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); }

/* -------------------------------------------------------------- buttons -- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5); min-height: 46px;
    border-radius: var(--radius); border: 1px solid transparent;
    font: inherit; font-size: var(--step--1); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: transform .12s ease, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-soft); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--raised); color: var(--heading); border-color: var(--muted); }

/* ------------------------------------------------------ what's on grid -- */
/* A week should read as a week. auto-fit gave 5 columns at 1440px and left
   Saturday and Sunday orphaned on a second row, which is exactly the two days
   a bar most wants you to see. Pinned to 7 across on wide screens. */
.week {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
@media (min-width: 1180px) { .week { grid-template-columns: repeat(7, 1fr); } }
@media (min-width: 760px) and (max-width: 1179px) { .week { grid-template-columns: repeat(4, 1fr); } }
.day {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-1);
    position: relative; overflow: hidden;
}
.day.is-today {
    border-color: var(--accent);
    background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--surface);
}
.day.is-today::after {
    content: "Today"; position: absolute; top: var(--sp-3); right: var(--sp-3);
    font-size: 0.62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-accent); background: var(--accent);
    padding: 2px var(--sp-2); border-radius: 999px;
}
.day .dow {
    font-size: var(--step--1); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.day .what { font-family: var(--font-display); font-size: var(--step-1); color: var(--heading); }
.day .detail { font-size: var(--step--1); color: var(--muted); }
.day .price { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------ post grid -- */
.posts {
    display: grid; gap: var(--sp-5);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 640px) { .posts { grid-template-columns: 1fr; gap: var(--sp-4); } }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.card:focus-within { border-color: var(--accent); }

.card .thumb {
    aspect-ratio: 3 / 2;
    background: var(--sunken);
    overflow: hidden;
}
.card .thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.card:hover .thumb img { transform: scale(1.04); }
.card .thumb.is-empty {
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--raised), var(--sunken));
}
.card .thumb.is-empty svg { width: 44px; height: 44px; opacity: .25; }

.card .body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card h2,
.card h3 { font-family: var(--font-display); font-size: var(--step-1); margin: 0; }
.card h2 a,
.card h3 a { color: var(--heading); text-decoration: none; }
.card h2 a:hover,
.card h3 a:hover { color: var(--accent); }
/* Whole card clickable, title still the accessible name */
.card h2 a::after,
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

.card .date { font-size: var(--step--1); color: var(--muted); letter-spacing: .04em; }
.card .excerpt { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* Featured first post on the blog index */
@media (min-width: 860px) {
    .posts .card.featured { grid-column: span 2; flex-direction: row; }
    .posts .card.featured .thumb { aspect-ratio: auto; flex: 0 0 45%; }
    .posts .card.featured .body { justify-content: center; padding: var(--sp-6); }
    .posts .card.featured h2,
    .posts .card.featured h3 { font-size: var(--step-2); }
}

/* ----------------------------------------------------------- single post -- */
.post-full { padding-block: var(--sp-7) var(--sp-8); }
.post-full header { margin-bottom: var(--sp-5); }
.post-full h1 { font-family: var(--font-display); font-size: var(--step-3); margin-bottom: var(--sp-2); }
.post-full .date { color: var(--muted); font-size: var(--step--1); letter-spacing: .04em; }

.post-full .hero-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--sp-6);
    background: var(--sunken);
    box-shadow: var(--shadow-2);
}
.post-full .hero-image img { width: 100%; height: auto; }

.prose { max-width: var(--measure); font-size: var(--step-0); }
.prose h2 { font-family: var(--font-display); font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h3 { font-family: var(--font-display); font-size: var(--step-1); margin-top: var(--sp-5); }
.prose strong { color: var(--heading); font-weight: 700; }
.prose em { color: var(--accent-soft); }
.prose blockquote {
    margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5);
    border-left: 3px solid var(--accent); background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

/* Hashtag run at the end of posts - de-emphasised, not deleted */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.tag {
    font-size: var(--step--1); color: var(--muted);
    background: var(--raised); border: 1px solid var(--border);
    padding: 3px var(--sp-3); border-radius: 999px;
}

.post-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
    margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border);
}
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav a {
    display: block; padding: var(--sp-4); border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    text-decoration: none; transition: border-color .15s, background .15s;
}
.post-nav a:hover { border-color: var(--border-strong); background: var(--raised); }
.post-nav .dir { font-size: var(--step--1); color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.post-nav .ttl { color: var(--heading); margin-top: var(--sp-1); }
.post-nav .next { text-align: right; }

/* ------------------------------------------------------------ pagination -- */
.pagination {
    display: flex; justify-content: center; align-items: center;
    gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8);
}
.pagination a, .pagination span {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--sp-3); border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); text-decoration: none; font-size: var(--step--1); font-weight: 600;
}
.pagination a:hover { border-color: var(--border-strong); background: var(--raised); color: var(--heading); }
.pagination [aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pagination .gap { border: 0; background: none; color: var(--muted); min-width: 24px; }

/* ------------------------------------------------------------- tap list -- */
.taps { display: grid; gap: var(--sp-3); }
.tap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--sp-4);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
}
.tap .num {
    font-family: var(--font-display); font-size: var(--step-2);
    color: var(--accent); opacity: .55; line-height: 1; min-width: 1.4em;
}
.tap .nm { font-family: var(--font-display); font-size: var(--step-1); color: var(--heading); }
.tap .sty { font-size: var(--step--1); color: var(--muted); }
.tap .stats { display: flex; gap: var(--sp-4); text-align: right; }
.tap .stat { display: flex; flex-direction: column; line-height: 1.2; }
.tap .stat b { font-size: var(--step-1); color: var(--accent); font-family: var(--font-display); font-weight: normal; }
.tap .stat span { font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 600px) {
    .tap { grid-template-columns: auto 1fr; gap: var(--sp-3); padding: var(--sp-4); }
    .tap .stats { grid-column: 1 / -1; justify-content: flex-start; gap: var(--sp-5); text-align: left; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
    .tap .stat { align-items: flex-start; }
}

/* ---------------------------------------------------------------- visit -- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } }

.info-block + .info-block { margin-top: var(--sp-5); }
.info-block h2,
.info-block h3 {
    font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: var(--sp-3);
}
.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
    display: flex; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--border);
    font-size: var(--step-0);
}
.hours li:last-child { border-bottom: 0; }
.hours .d { color: var(--muted); }
.hours .t { color: var(--text); font-variant-numeric: tabular-nums; }
.hours li.is-today .d, .hours li.is-today .t { color: var(--accent); font-weight: 700; }

.map {
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--border); background: var(--sunken);
    aspect-ratio: 4 / 3; min-height: 280px;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-list a { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--text); }
.contact-list a:hover { color: var(--accent); }
.contact-list svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* --------------------------------------------------------------- footer -- */
.site-footer {
    margin-top: var(--sp-9);
    border-top: 1px solid var(--border);
    background: var(--sunken);
    padding-block: var(--sp-7) var(--sp-6);
    font-size: var(--step--1);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.site-footer h2 {
    font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer a {
    color: var(--muted); text-decoration: none;
    /* 24px minimum tap target - these sat at 15px */
    display: inline-flex; align-items: center;
    min-height: 24px; padding-block: var(--sp-1);
}
.site-footer a:hover { color: var(--accent); }
.site-footer .colophon {
    margin-top: var(--sp-6); padding-top: var(--sp-4);
    border-top: 1px solid var(--border); color: var(--muted);
    display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.socials { display: flex; gap: var(--sp-2); }
.socials a {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--muted); transition: color .15s, border-color .15s, background .15s;
}
.socials a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.socials svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- forms -- */
label { display: block; font-size: var(--step--1); color: var(--muted); margin-bottom: var(--sp-2); font-weight: 600; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], textarea, select {
    width: 100%;
    background: var(--sunken); color: var(--text);
    border: 1px solid var(--border-strong);   /* 3.7:1 - perceivable */
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    font: inherit; font-size: max(16px, var(--step-0));  /* 16px stops iOS zoom */
    min-height: 46px;
}
input:focus, textarea:focus, select:focus {
    outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
textarea { min-height: 180px; resize: vertical; line-height: 1.6; }

.form-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-6);
    max-width: 420px; margin: var(--sp-9) auto;
    box-shadow: var(--shadow-2);
}
.form-card h1 { font-family: var(--font-display); font-size: var(--step-2); text-align: center; margin-bottom: var(--sp-5); }
.field + .field { margin-top: var(--sp-4); }
.form-card .btn { width: 100%; margin-top: var(--sp-5); }

.error, .notice {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4); font-size: var(--step--1);
    border-left: 3px solid;
}
.error  { background: rgba(255,96,96,.10); border-color: #ff8080; color: #ffb3b3; }
.notice { background: var(--accent-dim);   border-color: var(--accent); color: var(--accent-soft); }

/* --------------------------------------------------------- admin tables -- */
.admin-table {
    width: 100%; border-collapse: collapse; font-size: var(--step--1);
    background: var(--surface); border-radius: var(--radius); overflow: hidden;
}
.admin-table th, .admin-table td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); }
.admin-table th { background: var(--raised); color: var(--accent); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--raised); }
@media (max-width: 700px) { .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* ----------------------------------------------------------------- misc -- */
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-4); color: var(--muted); }
.empty-state h2 { font-family: var(--font-display); color: var(--heading); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }

/* =========================================================== compatibility ==
   admin.php and login.php are NOT being replaced - they are how the site gets
   published and they keep working exactly as they do today. But they load this
   same stylesheet and they use the old class names, so those names have to
   keep meaning something. Without .container the admin panel would render
   edge-to-edge with no padding the moment this file is deployed.

   Do not delete this block while admin.php still exists.
   ========================================================================== */
.container {
    width: min(100% - 2.5rem, 860px);
    margin: var(--sp-7) auto;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: var(--sp-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}
.container > h1 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    text-align: center;
    margin-bottom: var(--sp-5);
}
.container > h2 { font-family: var(--font-display); font-size: var(--step-1); }

/* Old logo treatment inside admin pages */
.container > img[alt="Logo"] {
    max-width: 220px; height: auto; display: block;
    margin: 0 auto var(--sp-5) auto;
}

.admin-link {
    color: var(--accent); text-decoration: none;
    margin-right: var(--sp-4); font-weight: 600;
}
.admin-link:hover { color: var(--accent-soft); text-decoration: underline; }

/* The old front-end post class, in case any page still emits it. */
.post {
    background: var(--raised); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}
.post .meta { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--sp-2); }
.post .content { line-height: 1.65; }
/* was max-width:30% - the reason every photograph on the site was a thumbnail */
.post-image {
    max-width: 100%; height: auto; display: block;
    margin: var(--sp-3) 0 var(--sp-4);
    border-radius: var(--radius);
}

@media (max-width: 600px) {
    .container { width: calc(100% - 1.5rem); padding: var(--sp-4); margin-top: var(--sp-5); }
}

@media print {
    .site-header, .site-footer, .pagination, .post-nav, .hero-actions { display: none; }
    body { background: #fff; color: #000; }
    .card, .tap, .day { border-color: #ccc; }
}