@charset "UTF-8";
/* FanUpdate (blog) styles for 1-reverie. Loaded right after style.css. */

/* ============================================
   FanUpdate
   ============================================ */

div#fanupdate
{
    animation: fadeUp 1s 0.2s ease both;
}

div#fanupdate h1
{
    font-size: 2.6rem;
    text-align: left;
}

div#fanupdate h2
{
    font-size: 1.9rem;
    text-align: left;
}

div#fanupdate h3
{
    font-size: 1.3rem;
    margin-top: 2rem;
}

div#fanupdate h4
{
    font-size: 1.1rem;
    margin-top: 1.6rem;
}

div#fanupdate h5
{
    margin-top: 1.4rem;
}

div#fanupdate h6
{
    margin-top: 1.2rem;
}

/* heading links (e.g. the post-title permalink in h2) — all states */
div#fanupdate h1 a,
div#fanupdate h2 a,
div#fanupdate h3 a,
div#fanupdate h4 a,
div#fanupdate h5 a,
div#fanupdate h6 a
{
    color: var(--text-dark);
    font-style: normal;
    text-decoration: none;
    transition: color 0.25s ease;
}

div#fanupdate h1 a:visited,
div#fanupdate h2 a:visited,
div#fanupdate h3 a:visited,
div#fanupdate h4 a:visited,
div#fanupdate h5 a:visited,
div#fanupdate h6 a:visited
{
    color: var(--text-mid);
}

div#fanupdate h1 a:hover,
div#fanupdate h2 a:hover,
div#fanupdate h3 a:hover,
div#fanupdate h4 a:hover,
div#fanupdate h5 a:hover,
div#fanupdate h6 a:hover
{
    color: #c47a6a;
    text-decoration: underline;
    text-decoration-color: #e8b8a8;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

div#fanupdate h1 a:active,
div#fanupdate h2 a:active,
div#fanupdate h3 a:active,
div#fanupdate h4 a:active,
div#fanupdate h5 a:active,
div#fanupdate h6 a:active
{
    color: #c49060;
    transform: translateY(1px);
}

div#fanupdate h1 a:focus,
div#fanupdate h2 a:focus,
div#fanupdate h3 a:focus,
div#fanupdate h4 a:focus,
div#fanupdate h5 a:focus,
div#fanupdate h6 a:focus
{
    border-radius: 2px;
    outline: 2px dashed #abc8de;
    outline-offset: 4px;
}

/* -- Entries -- */

/* Each post — set via Admin -> Templates -> entry_template, which wraps
   {{title}}/{{catfile}}/{{body}} in <div class="fu-entry">...</div>. Without
   that wrapper this rule matches nothing and posts fall back to plain flow. */
#fanupdate .fu-entry
{
    background: rgba(255, 211, 199, 0.16);
    border: 1px solid rgba(255, 211, 199, 0.35);
    border-radius: 18px;
    box-shadow: 0 4px 18px var(--shadow);
    margin-bottom: 1.6rem;
    padding: 1.8rem 2rem;
}

#fanupdate .fu-entry:last-of-type
{
    margin-bottom: 0;
}

p.catfile
{
    color: var(--text-light);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    margin-bottom: 1.2rem;
    margin-top: -0.6rem;
    padding: 0;
    text-transform: uppercase;
}

/* Category-filter links inside catfile. */
.fu-cat-link
{
    color: var(--text-light);
    font-size: inherit;
    letter-spacing: inherit;
}

/* Comment-count link in catfile (e.g. "3 comments"). */
.fu-comment-count-link
{
    color: var(--text-light);
    font-size: inherit;
    letter-spacing: inherit;
}

/* Entry date in the category archive listing (show-cat.php). */
span.date
{
    color: var(--text-light);
    font-family: 'Arima', cursive;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

/* -- Archives (?view=archive) -- */

#fanupdate .fu-archive-list
{
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
}

#fanupdate .fu-archive-item
{
    border-bottom: 1px solid var(--border);
    color: var(--text-mid);
    font-size: 0.95rem;
    margin-bottom: 0;
    padding: 0.7rem 0;
}

#fanupdate .fu-archive-item:last-child
{
    border-bottom: none;
}

#fanupdate .fu-archive-count
{
    color: var(--text-light);
    font-family: 'Arima', cursive;
    font-size: 0.72rem;
    margin-left: 0.3rem;
}

/* -- Images -- */

a.fu-lightbox
{
    border: 1px solid var(--border);
    border-radius: 12px;
    display: inline-block;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.fu-lightbox:hover,
a.fu-lightbox:focus
{
    box-shadow: 0 8px 24px var(--shadow);
    transform: translateY(-2px);
}

a.fu-lightbox img
{
    cursor: zoom-in;
    display: block;
    height: auto;
    max-width: 100%;
    transition: opacity 0.2s ease;
}

a.fu-lightbox:hover img,
a.fu-lightbox:focus img
{
    opacity: 0.9;
}

a.fu-lightbox.fu-img-left
{
    float: left;
    margin: 0 1.25em 0.75em 0;
}

a.fu-lightbox.fu-img-right
{
    float: right;
    margin: 0 0 0.75em 1.25em;
}

a.fu-lightbox.fu-img-center
{
    display: block;
    margin: 0.75em auto;
}

/* -- Comments -- */

div#comments
{
    border-top: 1px solid var(--border);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

/* Shown in place of the comment list/form when comments are off. */
p.comments-closed
{
    color: var(--text-light);
    font-style: italic;
}

/* Comment validation/spam-guard error messages. */
p.error,
ul.error
{
    background: rgba(196, 122, 106, 0.1);
    border: 1px solid rgba(196, 122, 106, 0.3);
    border-radius: 12px;
    color: #a15142;
    font-size: 0.92rem;
    list-style: none;
    margin-bottom: 1.2rem;
    padding: 0.9rem 1.3rem;
}

ul.error li
{
    color: inherit;
    font-size: inherit;
    margin: 0;
}

ul.error li + li
{
    margin-top: 0.3rem;
}

/* Every comment always carries both "comment" and "fu-comment" — the
   latter follows the fu- prefix used elsewhere (fu-entry, fu-lightbox)
   and is the selector to style against going forward. */
#fanupdate .fu-comment
{
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    clear: both;
    margin-bottom: 0.8rem;
    padding: 1.2rem 1.5rem;
}

#fanupdate .fu-comment p
{
    font-size: 0.95rem;
    margin-bottom: 0;
    padding: 0;
}

#fanupdate .fu-comment p.commenter
{
    color: var(--text-light);
    font-family: 'Arima', cursive;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.6rem;
    padding: 0;
    text-transform: uppercase;
}

div#newComment
{
    border-top: 1px solid var(--border);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

img.gravatar
{
    border: 1px solid var(--border);
    border-radius: 50%;
    float: right;
    height: 46px;
    margin: 0 0 1rem 1.2rem;
    width: 46px;
}

/* -- Comment Form -- */

form#comments-form {}

h3#postcomment
{
    margin-top: 2rem;
}

p#cmt-rules,
p#cmt-moderation
{
    color: var(--text-light);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

/* Moderation notice in the built-in fallback comment form template. */
p.hint
{
    color: var(--text-light);
    font-size: 0.78rem;
    font-style: italic;
    margin: 0.4rem 0 1rem;
}

/* "Remember me" checkbox label. */
label.checkbox
{
    float: none;
    font-size: 0.85rem;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    width: auto;
}

/* Comment form submit button. */
.submit
{
    background: var(--white-glass);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-dark);
    cursor: pointer;
    font-family: 'Arima', cursive;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    padding: 0.55rem 1.6rem;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.submit:hover
{
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
}

#captcha-img
{
    border: 1px solid var(--border);
    border-radius: 8px;
    display: block;
    margin: 0.4rem 0 0.8rem;
}

label
{
    color: var(--text-light);
    display: block;
    float: left;
    font-family: 'Arima', cursive;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    margin: 0 0.5em 0 0;
    padding-top: 0.6rem;
    text-align: right;
    text-transform: uppercase;
    width: 9em;
}

input,
textarea,
select,
option
{
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-dark);
    font-family: 'Arima', cursive;
    font-size: 0.95rem;
    outline: none;
    padding: 0.5rem 0.85rem;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus
{
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--g4);
    box-shadow: 0 0 0 3px rgba(255, 211, 199, 0.25);
}

textarea
{
    min-height: 120px;
    resize: vertical;
    width: 100%;
}

/* -- Footer (FanUpdate) -- */

a.rss
{
    background: var(--white-glass);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-light);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    padding: 0.32rem 0.9rem;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

a.rss:hover
{
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-dark);
}

div.archivelink
{
    color: var(--text-light);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    margin: 2rem 0 0;
    text-align: right;
    text-transform: uppercase;
}

div.archivelink a
{
    color: var(--text-mid);
    font-style: normal;
}

/* main/archive nav links. */
.fu-nav-link
{
    color: var(--text-mid);
    font-size: inherit;
    letter-spacing: inherit;
}

div.credit
{
    border-top: 1px solid var(--border);
    clear: both;
    margin: 1.5rem 0 0;
    padding-top: 1.2rem;
    text-align: center;
}

/* Credit link. */
.fu-credit-link
{
    color: var(--text-light);
    font-size: inherit;
    letter-spacing: inherit;
}

div.credit p
{
    color: var(--text-light);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    margin: 0;
    opacity: 0.7;
    text-transform: uppercase;
}