/* ============================================================
   ===== STRYV4 ANNOUNCEMENTS — DISPATCH STYLING =====
   Scoped variant classes:
     .hp-announcement-strip       (full homepage dispatch slip)
     .hp-announcement-banner      (slim site-wide notice bar)
     .hp-announcement-sidebar     (narrow vertical box)
     .hp-announcement-card        (standalone boxed card)
     .single-stryv4_announcement  (single-view body class — WP auto)
   Self-contained. No CDN fonts, no external dependencies.
============================================================ */


/* ============================================================
   ===== DESIGN TOKENS — SHARED ACROSS ALL VARIANTS =====
============================================================ */

/* CodeNumber 1.1 — palette + type */
.hp-announcement-strip,
.hp-announcement-banner,
.hp-announcement-sidebar,
.hp-announcement-card,
.single-stryv4_announcement .wp-block-post-content,
.single-stryv4_announcement .entry-content {
    --ann-bg: #f4efe6;
    --ann-ink: #1a1614;
    --ann-accent: #8a2f1f;
    --ann-rule: #1a1614;
    --ann-mute: rgba(26, 22, 20, 0.55);
    --ann-mute-on-dark: rgba(244, 239, 230, 0.6);
    --ann-mono: "Courier New", "Courier", ui-monospace, monospace;
}




/* ============================================================
   ===== STRIP — full homepage dispatch slip =====
============================================================ */

/* CodeNumber 2.1 — wrapper */
.hp-announcement-strip {
    position: relative;
    max-width: 900px;
    margin: 2rem auto;
    padding: 1.5rem 1.75rem 1.25rem;
    background: var(--ann-bg);
    color: var(--ann-ink);
    border-top: 2px solid var(--ann-rule);
    border-bottom: 2px solid var(--ann-rule);
    font-family: var(--ann-mono);

    /* paper grain (CSS-only, no asset) */
    background-image:
        radial-gradient(rgba(26, 22, 20, 0.045) 1px, transparent 1px),
        radial-gradient(rgba(138, 47, 31, 0.025) 1px, transparent 1px);
    background-size: 5px 5px, 7px 7px;
    background-position: 0 0, 2px 3px;
}

/* CodeNumber 2.1.1 — perforated top/bottom edges */
.hp-announcement-strip::before,
.hp-announcement-strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background-image: radial-gradient(circle at 4px 50%, var(--ann-bg) 2px, transparent 2.5px);
    background-size: 8px 4px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.hp-announcement-strip::before { top: -3px; }
.hp-announcement-strip::after  { bottom: -3px; }

/* CodeNumber 2.2 — dateline */
.hp-announcement-strip__dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed var(--ann-rule);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hp-announcement-strip__ref   { color: var(--ann-mute); font-variant-numeric: tabular-nums; }
.hp-announcement-strip__brand { font-weight: bold; color: var(--ann-accent); }
.hp-announcement-strip__sep   { opacity: 0.4; }
.hp-announcement-strip__date  { font-variant-numeric: tabular-nums; }

/* CodeNumber 2.3 — title + body */
.hp-announcement-strip__title {
    margin: 0 0 0.5rem;
    font-family: var(--ann-mono);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.hp-announcement-strip__title a {
    color: var(--ann-ink);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 120ms ease;
}
.hp-announcement-strip__title a:hover { border-bottom-color: var(--ann-accent); }

.hp-announcement-strip__excerpt {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.5rem;
}
.hp-announcement-strip__excerpt p { margin: 0 0 0.5em; }
.hp-announcement-strip__excerpt p:last-child { margin-bottom: 0; }

/* CodeNumber 2.4 — signoff + archive link */
.hp-announcement-strip__signoff {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-style: italic;
    text-align: right;
    color: var(--ann-mute);
}
.hp-announcement-strip__signoff::before {
    content: "— ";
    color: var(--ann-accent);
    font-style: normal;
}

.hp-announcement-strip__more {
    margin: 1rem 0 0;
    text-align: right;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hp-announcement-strip__more a {
    color: var(--ann-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--ann-accent);
}
.hp-announcement-strip__more a:hover {
    background: var(--ann-accent);
    color: var(--ann-bg);
}

/* CodeNumber 2.5 — multi-item separator */
.hp-announcement-strip__item + .hp-announcement-strip__item {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ann-rule);
}




/* ============================================================
   ===== BANNER — slim site-wide notice bar =====
============================================================ */

/* CodeNumber 3.1 — wrapper */
.hp-announcement-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: var(--ann-ink);
    color: var(--ann-bg);
    font-family: var(--ann-mono);
    font-size: 0.85rem;
    border-bottom: 2px solid var(--ann-accent);
}

/* CodeNumber 3.2 — label, date, title, more */
.hp-announcement-banner__label {
    font-weight: bold;
    color: var(--ann-accent);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.72rem;
}
.hp-announcement-banner__date {
    color: var(--ann-mute-on-dark);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}
.hp-announcement-banner__title {
    flex: 1 1 200px;
    color: var(--ann-bg);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease;
}
.hp-announcement-banner__title:hover { border-bottom-color: var(--ann-accent); }

.hp-announcement-banner__more {
    color: var(--ann-accent);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: bold;
    margin-left: auto;
}
.hp-announcement-banner__more:hover { color: var(--ann-bg); }




/* ============================================================
   ===== SIDEBAR — narrow vertical box =====
============================================================ */

/* CodeNumber 4.1 — wrapper */
.hp-announcement-sidebar {
    background: var(--ann-bg);
    color: var(--ann-ink);
    border: 1.5px solid var(--ann-rule);
    padding: 1rem 1.25rem;
    font-family: var(--ann-mono);
    max-width: 320px;
}

/* CodeNumber 4.2 — header */
.hp-announcement-sidebar__header {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ann-accent);
    font-weight: bold;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--ann-rule);
}

/* CodeNumber 4.3 — item content */
.hp-announcement-sidebar__meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ann-mute);
    margin-bottom: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.hp-announcement-sidebar__title {
    font-family: var(--ann-mono);
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.35;
    margin: 0 0 0.5rem;
}
.hp-announcement-sidebar__title a {
    color: var(--ann-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.hp-announcement-sidebar__title a:hover { border-bottom-color: var(--ann-accent); }

.hp-announcement-sidebar__excerpt {
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.hp-announcement-sidebar__more {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hp-announcement-sidebar__more a {
    color: var(--ann-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--ann-accent);
}

/* CodeNumber 4.4 — multi-item separator */
.hp-announcement-sidebar__item + .hp-announcement-sidebar__item {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--ann-rule);
}




/* ============================================================
   ===== CARD — landscape postcard-shaped announcement =====
   Aspect ratio 5:2 matches the Stryv4/~ Postcard system
   (1050×420). Left dark panel carries the metadata; right
   cream panel carries the title, excerpt, signoff.
============================================================ */

/* CodeNumber 5.1 — wrapper */
.hp-announcement-card {
    background: var(--ann-bg);
    color: var(--ann-ink);
    border: 2px solid var(--ann-rule);
    font-family: var(--ann-mono);
    aspect-ratio: 5 / 2;
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    overflow: hidden;
    max-width: 100%;

    background-image:
        radial-gradient(rgba(26, 22, 20, 0.045) 1px, transparent 1px),
        radial-gradient(rgba(138, 47, 31, 0.025) 1px, transparent 1px);
    background-size: 5px 5px, 7px 7px;
}

/* CodeNumber 5.2 — left band (metadata panel) */
.hp-announcement-card__band {
    background: var(--ann-ink);
    color: var(--ann-bg);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.hp-announcement-card__brand {
    font-weight: bold;
    line-height: 1.35;
    color: var(--ann-bg);
}
.hp-announcement-card__ref {
    color: var(--ann-mute-on-dark);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}
.hp-announcement-card__band-date {
    color: var(--ann-mute-on-dark);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
    letter-spacing: 0.12em;
}

/* CodeNumber 5.3 — right body (content panel) */
.hp-announcement-card__body {
    padding: 1.1rem 1.35rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.hp-announcement-card__title {
    font-family: var(--ann-mono);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}
.hp-announcement-card__title a {
    color: var(--ann-ink);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 120ms ease;
}
.hp-announcement-card__title a:hover { border-bottom-color: var(--ann-accent); }

.hp-announcement-card__excerpt {
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CodeNumber 5.4 — signoff footer */
.hp-announcement-card__footer {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    font-style: italic;
    text-align: right;
    color: var(--ann-mute);
}
.hp-announcement-card__footer::before {
    content: "— ";
    color: var(--ann-accent);
    font-style: normal;
}




/* ============================================================
   ===== SINGLE ANNOUNCEMENT VIEW =====
============================================================ */

/* CodeNumber 6.1 — title block */
.single-stryv4_announcement .wp-block-post-title,
.single-stryv4_announcement .entry-title {
    font-family: var(--ann-mono);
    padding: 1rem 0;
    border-top: 2px solid var(--ann-rule);
    border-bottom: 2px solid var(--ann-rule);
    text-align: center;
    letter-spacing: 0.05em;
}

/* CodeNumber 6.2 — body content */
.single-stryv4_announcement .wp-block-post-content,
.single-stryv4_announcement .entry-content {
    padding: 2rem;
    background: var(--ann-bg);
    color: var(--ann-ink);
    font-family: var(--ann-mono);
    border-left: 4px solid var(--ann-accent);
    line-height: 1.65;
}




/* ============================================================
   ===== RESPONSIVE =====
============================================================ */

/* CodeNumber 7.1 — mobile adjustments */
@media (max-width: 600px) {
    .hp-announcement-strip { padding: 1.25rem 1.25rem 1rem; }
    .hp-announcement-strip__title { font-size: 1.1rem; }
    .hp-announcement-banner { font-size: 0.8rem; }
    .hp-announcement-banner__title { flex: 1 1 100%; }
    .hp-announcement-banner__more { margin-left: 0; }
    .hp-announcement-sidebar { max-width: 100%; }

    /* Card drops landscape aspect and stacks band above body */
    .hp-announcement-card {
        aspect-ratio: auto;
        grid-template-columns: 1fr;
    }
    .hp-announcement-card__band {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
    }
    .hp-announcement-card__brand { line-height: 1; }
    .hp-announcement-card__band-date { margin-top: 0; }

    .single-stryv4_announcement .wp-block-post-content,
    .single-stryv4_announcement .entry-content { padding: 1.25rem; }
}