:root {
    --ink: #1a1a1a;
    --paper: #fdfcfb;
    --paper-secondary: #ffffff;
    --line: #e4e0da;
    --accent: #b5502f;
    --muted: #6b675f;
    --radius: 6px;
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Georgia', 'Iowan Old Style', serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Push the footer to the bottom of the viewport on short pages, while
   letting it flow normally after the content on long ones. */
.site-header, .site-footer, .admin-bar { flex-shrink: 0; }
.site-main { flex: 1 0 auto; width: 100%; }

.admin-bar {
    background: #12151c;
    color: #cfd3dd;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
}

.admin-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.admin-bar a { color: #fff; }

.draft-banner {
    background: #fdf1d6;
    color: #8a6d1d;
    text-align: center;
    padding: 0.75rem 1rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9rem;
}

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

img { max-width: 100%; display: block; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.container.narrow {
    max-width: 760px;
}

/* Project page: this container follows right after the description's own
   container, which already has its own bottom padding - drop this one's top
   padding so the two don't stack into a much bigger gap than intended. */
.container--snug-top {
    padding-top: 0;
}

h1, h2, h3 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.6em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }

/* Admin-only "jump to the editor" link next to a page/project's title -
   its own fixed size/weight so it doesn't inherit the heading's (often
   much larger, custom-colored) appearance styling. */
.edit-link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--accent);
}

.section-heading {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* Project page: the gallery's own container already follows right after
   the description's container, each with their own top/bottom padding, so
   stacking the usual .section-heading margin-top on top of that left a much
   bigger gap above the divider here than elsewhere - snug it up instead. */
.section-heading--snug { margin-top: 0; }

/* Header */
.site-header {
    border-bottom: 1px solid var(--line);
    /* No background of its own - lets the body's background (solid color or
       gradient) show through continuously behind the header too, rather
       than each rendering its own independent (and, for a gradient,
       visibly separate) copy of it. */
}

.site-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    /* center (not baseline) - an image has no text baseline to align
       against, which otherwise threw off the header's height and left the
       nav links looking misaligned against a logo. */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Header title/logo position, set from Settings > Appearance. */
.header-align-center .site-header-inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.site-brand {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
}

.site-brand:hover { text-decoration: none; }

.site-title-text {
    display: inline-block;
    font-size: 1.35rem;
    color: var(--ink);
}

.site-logo {
    max-height: 48px;
    width: auto;
}

.site-nav {
    display: flex;
    gap: 1.5rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.95rem;
}

.site-nav a { color: var(--ink); }

/* Hero */
.hero {
    text-align: center;
    padding: 2rem 0 1rem;
}

.hero-logo {
    max-height: 120px;
    width: auto;
    margin: 0 auto;
}

.hero-tagline {
    color: var(--muted);
    font-size: 1.1rem;
}

.hero-blurb {
    max-width: 640px;
    margin: 1rem auto 0;
    text-align: left;
}

/* Showcase landing page only: swap the compact header's title for the
   bigger Homepage Banner on wider screens, and vice versa on a phone -
   never both at once. The blurb always shows regardless of width. */
@media (min-width: 600px) {
    body.showcase-landing .site-header .site-brand { display: none; }
    body.showcase-landing .site-header .site-header-inner { justify-content: flex-end; }
    /* Bring the banner up closer to the header's dividing line, now that
       there's no small title taking up space above it. The container's own
       top padding stacks with the hero's, so both need trimming. */
    body.showcase-landing .container { padding-top: 1rem; }
    body.showcase-landing .hero { padding-top: 0.25rem; }
    /* The banner (shown at this width) already includes its own tagline. */
    body.showcase-landing .hero-tagline-mobile { display: none; }
}

@media (max-width: 599px) {
    body.showcase-landing .hero-banner { display: none; }
    /* Same trim as the desktop banner above, now for the blurb - it's the
       only thing left in .hero once the banner is hidden here. */
    body.showcase-landing .container { padding-top: 1rem; }
    body.showcase-landing .hero { padding-top: 0.25rem; }
}

/* Project grid */
.project-grid, .lightbox-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.75rem;
    margin-top: 1.5rem;
}

.project-card {
    display: block;
    color: var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-secondary);
    border: 1px solid var(--line);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.project-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Admin-only drag-to-reorder feedback - see assets/js/project-reorder.js.
   draggable="true" is only ever rendered for a logged-in admin (see
   templates/project-card.php), so this never affects public visitors. */
.project-card[draggable="true"] { cursor: grab; -webkit-user-drag: element; }
.project-card.is-dragging { opacity: 0.4; }
.project-card.drag-over-before { box-shadow: inset 3px 0 0 var(--accent); }
.project-card.drag-over-after { box-shadow: inset -3px 0 0 var(--accent); }

.project-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.project-card-body {
    padding: 1rem 1.1rem;
}

.project-card-body h3 {
    margin-bottom: 0.35em;
    font-size: 1.1rem;
}

.project-card-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.project-hero-image {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    max-height: 480px;
    object-fit: cover;
}

.zoomable, .rich-content img, .lightbox-trigger img { cursor: zoom-in; }

.rich-content img { border-radius: var(--radius); height: auto; }
.rich-content table { border-collapse: collapse; width: 100%; }
.rich-content table td, .rich-content table th { border: 1px solid var(--line); padding: 0.5rem; }

/* Gallery / lightbox triggers */
.lightbox-trigger {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.lightbox-trigger img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Video embeds sit in the same grid as photos, but play inline rather than
   opening the lightbox. */
.gallery-embed {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
}

.gallery-embed iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Reels/Shorts are vertical; a standard YouTube video is the usual 16:9. */
.gallery-embed.is-youtube iframe { aspect-ratio: 16 / 9; }
.gallery-embed.is-facebook iframe { aspect-ratio: 9 / 16; }

/* Admin-only drag-to-reorder (see assets/js/project-gallery-reorder.js) -
   the handle is only ever rendered for a logged-in admin, so none of this
   affects public visitors. */
.gallery-drag-handle {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
    /* Safari only makes links/images/selected text natively draggable;
       a custom handle like this one needs this non-standard property or
       draggable="true" is silently ignored and dragstart never fires. */
    -webkit-user-drag: element;
}

.gallery-grid-item.is-dragging { opacity: 0.4; }
.gallery-grid-item.drag-over-before { box-shadow: inset 3px 0 0 var(--accent); }
.gallery-grid-item.drag-over-after { box-shadow: inset -3px 0 0 var(--accent); }

.gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    padding: 1.5rem 0.75rem 0.5rem;
}

.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.92);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.is-open { display: flex; }

.lightbox-image {
    max-width: 88vw;
    max-height: 82vh;
    width: auto;
    border-radius: 4px;
    cursor: zoom-in;
}

/* Click the enlarged image to toggle its actual full resolution (scrolls
   if larger than the viewport) instead of the default fit-to-screen size. */
.lightbox-overlay.is-zoomed {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    padding: 2rem;
}

.lightbox-overlay.is-zoomed .lightbox-image {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    margin: auto;
    cursor: zoom-out;
}

.lightbox-title {
    position: absolute;
    top: 1.5rem;
    left: 0; right: 0;
    padding: 0 4.5rem;
    text-align: center;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
}

.lightbox-description {
    position: absolute;
    bottom: 2rem;
    left: 0; right: 0;
    padding: 0 4.5rem;
    text-align: center;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
}

.lightbox-close { top: 1rem; right: 1.5rem; font-size: 2rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Featured widget */
.featured-section { margin-top: 3rem; }
.featured-heading { border-top: 1px solid var(--line); padding-top: 2rem; }

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.featured-card {
    display: block;
    color: var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.featured-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.featured-card-body { padding: 0.85rem 1rem; }
.featured-card-body h3 { font-size: 1rem; margin-bottom: 0.25em; }
.featured-card-body p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 3rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
}

.site-footer-inner p {
    margin: 0;
}

.empty-state { color: var(--muted); }

.back-link-row {
    text-align: center;
}

.back-link {
    display: inline-block;
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    h1 { font-size: 1.7rem; }
    .site-header-inner { flex-direction: column; align-items: flex-start; }
}