/* ==========================================================================
   wall.garden journal — Plaster & Moss
   Loaded after Edition's built/screen.css (see default.hbs).
   Seal is reserved for the stamp/period mark. Never use it on buttons or links.
   ========================================================================== */

/* 1. Palette ------------------------------------------------------------- */

html:root {
    --paper: #E8E8E2;
    --card: #F6F6F2;
    --ink: #22261F;
    --muted: #626759;
    --garden: #3A5A2A;
    --on-garden: #F6F6F2;
    --seal: #C4492B;
    --rule: color-mix(in srgb, var(--ink) 14%, transparent);

    --wg-font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
    --wg-font-mono: "Maple Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Ghost accent: force garden even if Admin's accent differs */
    --ghost-accent-color: var(--garden);

    /* Ghost Design font picker: leave on "Theme default" so these win */
    --gh-font-heading: var(--wg-font-display);
    --gh-font-body: var(--wg-font-display);

    /* Edition + shared-theme-assets palette, remapped */
    --brand-color: var(--garden);
    --primary-text-color: var(--ink);
    --secondary-text-color: var(--muted);
    --darker-gray-color: var(--ink);
    --dark-gray-color: var(--ink);
    --light-gray-color: var(--rule);
    --lighter-gray-color: var(--card);
    --mid-gray-color: var(--muted);
    --orange-color: var(--muted);

    --color-primary-text: var(--ink);
    --color-secondary-text: var(--muted);
    --color-darker-gray: var(--ink);
    --color-dark-gray: var(--ink);
    --color-light-gray: var(--rule);
    --color-lighter-gray: var(--card);
    --color-mid-gray: var(--muted);

    --font-sans: var(--wg-font-mono);
    --font-serif: var(--wg-font-display);
    --font-mono: var(--wg-font-mono);
    --font-base: var(--wg-font-mono);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    html:root {
        --paper: #141914;
        --card: #1E251F;
        --ink: #E3E2D5;
        --muted: #8C9688;
        --garden: #8FB577;
        --on-garden: #141914;
        --seal: #E0603F;
    }
}

/* 2. Base ---------------------------------------------------------------- */

body {
    color: var(--ink);
    background-color: var(--paper);
    font-family: var(--wg-font-display);
    font-variation-settings: "SOFT" 50, "WONK" 0;
}

h1, h2, h3, h4, h5, h6,
.single-title, .feed-title, .author-name, .taxonomy-title, .related-title {
    font-family: var(--wg-font-display);
    font-weight: 600;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.gh-content a,
.single-excerpt a,
.author-bio a {
    color: var(--garden);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

::selection { color: var(--on-garden); background: var(--garden); }

/* UI type: nav, dates, buttons, captions, meta */
.gh-head, .gh-head .nav a, .gh-head-link, .gh-head-btn,
.gh-foot, .gh-foot-menu, .gh-copyright, .gh-powered-by,
.single-meta, .feed-date, .feed-right, .feed-calendar, .feed-length,
.gh-btn, .button, .form-button, .gh-loadmore,
figcaption, .kg-card figcaption, .author-meta, .taxonomy-meta,
.wg-panel-date, .wg-panel-more, .wg-signup {
    font-family: var(--wg-font-mono);
    font-variation-settings: normal;
}

/* 3. Header + footer ----------------------------------------------------- */

.gh-head,
.is-head-open:not(.is-head-brand):not(.is-head-dark):not(.is-head-transparent) #gh-head,
.is-head-open #gh-head .gh-head-actions {
    background-color: var(--paper);
    color: var(--ink);
}

.gh-head-logo {
    font-family: var(--wg-font-display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-weight: 600;
    color: var(--ink);
}

.gh-head .nav a,
.gh-head-link,
.gh-search { color: var(--ink); font-size: 1.4rem; }

.gh-head .nav a:hover,
.gh-head-link:hover { color: var(--garden); opacity: 1; }

.gh-burger::before,
.gh-burger::after { background-color: var(--ink); }

/* Header: ink on paper everywhere (no moss/accent bar; is-head-brand is no longer set in
   default.hbs). On posts with a wallpaper the bar has no fill at all: the ink logo, nav,
   search and signup sit straight on the fixed wallpaper and scroll away with the page. */
html body #gh-head.gh-head,
html body .gh-head {
    background-color: var(--paper) !important;
    color: var(--ink) !important;
}
html body .gh-head .nav a,
html body .gh-head-logo,
html body .gh-head-logo a,
html body .gh-head-link,
html body .gh-search,
html body .gh-social,
html body .gh-head-description { color: var(--ink) !important; }
html body .gh-burger::before,
html body .gh-burger::after { background-color: var(--ink) !important; }
html body .gh-head-menu::before,
html body .gh-head-menu::after { background-color: var(--rule) !important; }

/* Wallpaper posts: transparent header over the image */
html body:has(.wg-has-wallpaper):not(.is-head-open) #gh-head.gh-head,
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-head {
    position: relative;
    z-index: 2; /* above the z-0 wallpaper; scrolls away with the page */
    background: transparent !important;
    box-shadow: none !important;
}
/* Soft paper halo keeps ink type legible on dark wallpapers without adding a bar */
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-head-logo,
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-head .nav a,
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-head-link,
html body:has(.wg-has-wallpaper):not(.is-head-open) .wg-journal-label {
    text-shadow: 0 0 10px color-mix(in srgb, var(--paper) 85%, transparent),
                 0 0 2px color-mix(in srgb, var(--paper) 70%, transparent);
}
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-search,
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-burger {
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--paper) 72%, transparent) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-head-menu::before,
html body:has(.wg-has-wallpaper):not(.is-head-open) .gh-head-menu::after { background-color: transparent !important; }

/* Mobile menu open: solid paper overlay so links read regardless of the image */
html body.is-head-open #gh-head,
html body.is-head-open #gh-head .gh-head-actions,
html body.is-head-open #gh-head .gh-head-menu {
    background-color: var(--paper) !important;
}

.gh-foot { color: var(--muted); font-size: 1.3rem; }
.gh-foot a { color: var(--muted); }
.gh-foot a:hover { color: var(--garden); }

/* 4. Buttons + forms (garden, never seal) -------------------------------- */

.gh-btn,
.gh-primary-btn,
.gh-head-btn.gh-btn,
.form-button {
    color: var(--on-garden);
    background-color: var(--garden);
    border-radius: 3px;
    font-weight: 500;
    letter-spacing: 0;
}

.button {
    color: var(--garden);
    background-color: var(--card);
    border: 1px solid var(--rule);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.button-text { color: var(--muted); }

.form-wrapper,
.auth-email,
input[type="email"],
input[type="text"] {
    color: var(--ink);
    background-color: var(--card);
    border-color: var(--rule);
}

/* 5. Post pages ---------------------------------------------------------- */

.single-meta { color: var(--muted); font-weight: 500; letter-spacing: 0.04em; }
.single-excerpt { color: var(--muted); }
.single-cta { border-top-color: var(--garden); border-bottom-color: var(--rule); }
.feed-visibility { display: none; } /* no paid/members star in feeds */
.related-wrapper, .related-posts { background-color: var(--card); }
blockquote:not([class]) { border-left-color: var(--garden); }
.gh-content hr, hr { border-color: var(--rule); }

/* Edition's tag/author feeds */
.feed { border-color: var(--rule); }
.feed-title { font-weight: 600; }

/* 6. Home: signup band ---------------------------------------------------- */

.wg-home-template .site-content { padding: 0; }
.wg-home { padding: 0; }

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

.wg-signup {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background-color: var(--card);
    color: var(--ink);
}

.wg-signup-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.4rem max(4vmin, 2rem);
}

.wg-signup-text {
    margin: 0;
    font-family: var(--wg-font-display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: 1.8rem;
    line-height: 1.3;
}

.wg-signup-form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    flex: 0 1 46rem;
}

.wg-signup-input {
    flex: 1 1 22rem;
    min-width: 0;
    height: 4.2rem;
    padding: 0 1.4rem;
    font-family: var(--wg-font-mono);
    font-size: 1.4rem;
    color: var(--ink);
    background-color: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
    outline: none;
}

.wg-signup-input::placeholder { color: var(--muted); }
.wg-signup-input:focus { border-color: var(--garden); box-shadow: 0 0 0 2px color-mix(in srgb, var(--garden) 25%, transparent); }

.wg-signup-button {
    height: 4.2rem;
    padding: 0 1.8rem;
    font-family: var(--wg-font-mono);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--on-garden);
    background-color: var(--garden);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.wg-signup-button:hover { filter: brightness(1.08); }
.wg-signup-button:focus-visible { outline: 2px solid var(--garden); outline-offset: 2px; }

.wg-signup-sending,
.wg-signup-success,
.wg-signup-error { display: none; }

.wg-signup-success,
.wg-signup-error {
    flex-basis: 100%;
    margin: 0;
    font-size: 1.3rem;
}

.wg-signup-success { color: var(--garden); }
.wg-signup-error { color: var(--muted); }

/* Ghost toggles .loading / .success / .error on the form */
.wg-signup-form.loading .wg-signup-label { display: none; }
.wg-signup-form.loading .wg-signup-sending { display: inline; }
.wg-signup-form.success .wg-signup-input,
.wg-signup-form.success .wg-signup-button { display: none; }
.wg-signup-form.success .wg-signup-success { display: block; }
.wg-signup-form.error .wg-signup-error { display: block; }

/* 7. Home: stacked full-bleed wallpaper panels --------------------------- */

.wg-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.wg-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 88vh;
    min-height: 88svh;
    padding: max(4vmin, 2rem);
    overflow: hidden;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.wg-panel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.wg-panel--plain {
    min-height: 56vh;
    min-height: 56svh;
    align-items: center;
    justify-content: center;
}

.wg-panel-card {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 42rem;
    padding: 2rem 2.2rem 1.8rem;
    color: var(--ink);
    background-color: var(--card);
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wg-panel--plain .wg-panel-card { max-width: 52rem; }

.wg-panel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 14%, transparent);
}

.wg-panel-card:focus-visible { outline: 2px solid var(--garden); outline-offset: 3px; }

.wg-panel-date {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wg-panel-title {
    margin: 0;
    font-family: var(--wg-font-display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(2.4rem, 3.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1.12;
    color: var(--ink);
}

.wg-panel-excerpt {
    margin: 1rem 0 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--muted);
}

.wg-panel-more {
    display: inline-block;
    margin-top: 1.4rem;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--garden);
}

.wg-home .load-more { margin: 4.8rem 0 6.4rem; }

@media (max-width: 767px) {
    .wg-panel { min-height: 80vh; min-height: 80svh; padding: 1.6rem; }
    .wg-panel--plain { min-height: 44vh; min-height: 44svh; }
    .wg-panel-card { max-width: 100%; padding: 1.6rem 1.6rem 1.4rem; }
    .wg-signup-inner { padding: 1.4rem 1.6rem; }
    .wg-signup-text { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wg-panel-card { transition: none; }
    .wg-panel-card:hover { transform: none; }
}

/* 8. Seal: the only place it appears ------------------------------------- */

.wg-seal { color: var(--seal); }


/* 9. Header signup form + footer links ----------------------------------- */

.wg-primary-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wg-header-signup {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    max-width: 36rem;
}

.wg-header-signup-input {
    width: 18rem;
    max-width: 42vw;
    height: 3.6rem;
    padding: 0 1.2rem;
    font-family: var(--wg-font-mono);
    font-size: 1.3rem;
    color: var(--ink);
    background-color: var(--card);
    border: 1px solid var(--rule);
    border-radius: 3px;
    outline: none;
}

.wg-header-signup-input::placeholder { color: var(--muted); }
.wg-header-signup-input:focus {
    border-color: var(--garden);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--garden) 25%, transparent);
}

.wg-header-signup-button {
    height: 3.6rem;
    padding: 0 1.4rem;
    font-family: var(--wg-font-mono);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--on-garden);
    background-color: var(--garden);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.wg-header-signup-button:hover { filter: brightness(1.08); }

.wg-header-signup-success,
.wg-header-signup-error {
    display: none;
    flex-basis: 100%;
    margin: 0;
    font-size: 1.2rem;
}

.wg-header-signup-success { color: var(--garden); }
.wg-header-signup-error { color: var(--muted); }

.wg-header-signup.loading .wg-signup-label { display: none; }
.wg-header-signup.loading .wg-signup-sending { display: inline; }
.wg-header-signup.success .wg-header-signup-input,
.wg-header-signup.success .wg-header-signup-button { display: none; }
.wg-header-signup.success .wg-header-signup-success { display: block; }
.wg-header-signup.error .wg-header-signup-error { display: block; }

/* Signup over a wallpaper: a small frosted paper chip so ink input + garden button
   read on light and dark images alike */
body:has(.wg-has-wallpaper):not(.is-head-open) .wg-header-signup {
    padding: 0.5rem;
    background-color: color-mix(in srgb, var(--paper) 78%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

/* Header subscribe button: ink fill, card text (the header is ink-on-paper, not moss) */
.gh-head .wg-header-signup-button {
    color: var(--card);
    background-color: var(--ink);
}

.gh-foot-right {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 1.6rem;
    align-items: center;
    justify-content: flex-end;
}

.gh-foot-signin,
.gh-foot-home {
    font-family: var(--wg-font-mono);
    font-size: 1.3rem;
    color: var(--muted);
    text-decoration: none;
}

.gh-foot-signin:hover,
.gh-foot-home:hover { color: var(--garden); }

@media (max-width: 767px) {
    .wg-header-signup { max-width: 100%; }
    .wg-header-signup-input { width: 100%; max-width: none; flex: 1 1 auto; }
    .gh-foot-right { justify-content: center; }
}


/* 10. Brand: wall.garden logo + small journal label ------------------- */

.gh-head-brand-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}

.gh-head-logo {
    font-size: 2.2rem;
    line-height: 1;
    text-decoration: none;
}

.wg-journal-label {
    font-family: var(--wg-font-mono);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-decoration: none;
    line-height: 1;
}

.wg-journal-label:hover { color: var(--garden); }

body:has(.wg-has-wallpaper) .wg-journal-label { color: var(--ink); opacity: 0.8; }
body:has(.wg-has-wallpaper) .wg-journal-label:hover { opacity: 1; }


/* 11. Single posts: fixed full-viewport wallpaper + scrolling card ------- */

/* Every post/page title is left-aligned (Edition centers it). */
.single-header { text-align: left; }
.single-header .gh-meta-share { justify-content: flex-start; }
.wg-post-head { min-width: 0; }

/* Share pill uses theme tokens so it reads on the card in light + dark */
.gh-button-share { color: var(--ink); border-color: var(--rule); }
.gh-button-share:hover { border-color: color-mix(in srgb, var(--ink) 50%, transparent); }

/* Wallpaper: the feature image pinned to the viewport behind everything else.
   0.1.8: z-index 0 (not -1) with every scrolling layer lifted to z-index 1+. WebKit can
   fold a negative-z fixed layer into the root scrolling layer (so it moves or jitters with
   momentum scroll) and an opaque body paints over it; a z-0 layer on its own compositing
   layer, with transparent page backgrounds, stays put everywhere. None of the ancestors
   (article, main, .site-content, .site, body, html) may get transform/filter/perspective/
   will-change/contain: that would turn them into the containing block for position:fixed. */
html:has(.wg-has-wallpaper) { background-color: var(--paper); }
html body:has(.wg-has-wallpaper),
body:has(.wg-has-wallpaper) .site,
body:has(.wg-has-wallpaper) .site-content,
body:has(.wg-has-wallpaper) .site-main,
body:has(.wg-has-wallpaper) .gh-main,
.single.wg-has-wallpaper {
    background: transparent !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}

.wg-wallpaper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    height: 100lvh; /* large viewport: fills behind mobile toolbars, no jump when they hide */
    margin: 0;
    overflow: hidden;
    background-color: var(--paper);
    /* Same image as the <img>, as a background layer: shows even if the <img> is slow */
    background-image: var(--wg-wallpaper-url, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    pointer-events: none;
    /* Own compositing layer. A transform on the fixed element itself is safe: it only
       affects its own descendants, not where the element is pinned. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.wg-wallpaper-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Everything that scrolls sits above the wallpaper */
.wg-has-wallpaper .wg-sheet,
.wg-has-wallpaper ~ *,
body:has(.wg-has-wallpaper) .gh-foot {
    position: relative;
    z-index: 1;
}

/* No paper gutter above the card: the wallpaper shows instead */
.site-content:has(.wg-has-wallpaper) { padding-top: 0; padding-bottom: 0; }

/* The scrolling card: title, meta, share, body copy, prev/next. Left-aligned column
   with a window of wallpaper above it so the image reads first. */
.wg-has-wallpaper .wg-sheet {
    position: relative;
    z-index: 1;
    width: min(84rem, calc(100% - 2 * max(4vmin, 2rem)));
    margin: clamp(6rem, 26vh, 30rem) 0 clamp(6rem, 18vh, 20rem) max(6vw, 2rem);
    padding: clamp(3.2rem, 5vmin, 5.6rem) 0 clamp(2.4rem, 4vmin, 4.8rem);
    color: var(--ink);
    background-color: color-mix(in srgb, var(--card) 97%, transparent);
    border: 1px solid var(--rule);
    border-radius: 3px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
    --content-width: 680px;
    --container-width: 840px;
}

.wg-has-wallpaper .single-header { margin-top: 0; margin-bottom: 3.6rem; }
.wg-has-wallpaper .single-title { font-size: clamp(3rem, 4.2vw, 4.8rem); line-height: 1.1; }
.wg-has-wallpaper .single-excerpt { margin-top: 1.4rem; }
.wg-has-wallpaper .gh-meta-share { margin-top: 2rem; }

.wg-has-wallpaper .single-footer { margin-top: 4.8rem; }

.wg-wallpaper-caption { margin-top: 3.2rem; }
.wg-wallpaper-caption p {
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-family: var(--wg-font-mono);
    font-size: 1.25rem;
    color: var(--muted);
}

/* After the card: back on solid paper so related, comments and footer read as normal pages */
.wg-has-wallpaper ~ .related-wrapper { margin-top: 0; }
.wg-has-wallpaper ~ .gh-comments {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 6.4rem;
    background-color: var(--paper);
}
body:has(.wg-has-wallpaper) .gh-foot { background-color: var(--paper); }

/* Narrow Feature Image template: inset image under the title, plain paper page */
.wg-narrow-media {
    max-width: 720px;
    margin: 4rem 0 0;
}
.wg-narrow-media img { width: 100%; height: auto; }
.wg-narrow-media figcaption { margin-top: 1rem; color: var(--muted); font-size: 1.3rem; text-align: left; }

@media (max-width: 767px) {
    .wg-has-wallpaper .wg-sheet {
        width: auto;
        margin: 34vh 1.2rem 6rem;
        margin: 34svh 1.2rem 6rem;
        padding: 2.8rem 0 2.4rem;
    }
    .wg-has-wallpaper .single-title { font-size: 3rem; }
}