/*
 * RowHome Magazine — Direction B Design Tokens
 * Contract: every component reads from these tokens.
 * SIR-775: Front-end refinement
 */

:root {
    /* ===========================
       1.1 Color — palette "paper" (Direction B)
       =========================== */
    --rh-bg:        #fefdfa;  /* Page canvas */
    --rh-paper:     #ffffff;  /* Cards, surfaces */
    --rh-ink:       #0c0c0c;  /* Headlines, body */
    --rh-ink-2:     #2d2d2d;  /* Long-form prose */
    --rh-mute:      #7a7a7a;  /* Bylines, captions */
    --rh-rule:      #0c0c0c;  /* Hairlines (use opacity) */
    --rh-accent:    #d11f1f;  /* Tag chips, drop caps, hot CTAs */
    --rh-accent-2:  #8a1313;  /* Hover, deep accent */
    --rh-tag:       #0c0c0c;  /* Default tag bg */

    /* Department-spotlight tints */
    --rh-tint-food:         #f8e7e0;
    --rh-tint-real-estate:  #e6e9e3;
    --rh-tint-arts:         #eee4d8;

    /* ===========================
       1.2 Typography
       =========================== */
    --rh-display: "Antic Didone", "Times New Roman", serif;
    --rh-body:    "Crimson Pro", Georgia, serif;
    --rh-ui:      "Archivo", system-ui, sans-serif;

    /* Type scale — sizes */
    --rh-display-mast:  200px;
    --rh-display-1:     88px;
    --rh-display-2:     78px;
    --rh-display-3:     60px;
    --rh-display-4:     40px;
    --rh-display-5:     34px;
    --rh-display-6:     26px;
    --rh-display-7:     22px;
    --rh-body-lg:       22px;
    --rh-body:          18px;
    --rh-body-sm:       14px;
    --rh-eyebrow:       10px;
    --rh-byline:        11px;

    /* Type scale — line-heights */
    --rh-lh-mast:       .86;
    --rh-lh-display-1:  .96;
    --rh-lh-display-2:  .96;
    --rh-lh-display-3:  1.05;
    --rh-lh-display-4:  1;
    --rh-lh-display-5:  1.05;
    --rh-lh-display-6:  1.1;
    --rh-lh-display-7:  1.1;
    --rh-lh-body-lg:    1.55;
    --rh-lh-body:       1.62;
    --rh-lh-body-sm:    1.5;

    /* ===========================
       1.3 Spacing & Layout
       =========================== */
    --rh-gutter:         40px;
    --rh-section-gap:    56px;
    --rh-grid-columns:   12;
    --rh-grid-gap:       32px;
    --rh-max-width:      1280px;
    --rh-card-gap-row:   28px;
    --rh-card-gap-col:   56px;

    /* ===========================
       1.4 Misc
       =========================== */
    --rh-grain-opacity:   0.30;
    --rh-image-filter:    contrast(1.02) saturate(.95);
    --rh-card-border:     1px solid color-mix(in srgb, var(--rh-rule) 18%, transparent);
    --rh-hairline:        1px solid var(--rh-rule);
}

/* ===========================
   Type-feature flags (site-wide)
   =========================== */
body {
    font-feature-settings: "kern", "liga", "onum";
}

/* ===========================
   Utility: Eyebrow text
   =========================== */
.rh-eyebrow {
    font-family: var(--rh-ui);
    font-size: var(--rh-eyebrow);
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--rh-accent);
}

/* ===========================
   Utility: Byline text
   =========================== */
.rh-byline {
    font-family: var(--rh-ui);
    font-size: var(--rh-byline);
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--rh-mute);
}

/* ===========================
   Utility: Tag chips
   =========================== */
.rh-tag {
    display: inline-block;
    padding: 4px 9px;
    font-family: var(--rh-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
    background: var(--rh-tag);
    color: #fff;
    border-radius: 0; /* sharp corners — part of the look */
}

/* ===========================
   Utility: Section double rule
   =========================== */
.rh-double-rule {
    height: 4px;
    border-top: 1px solid var(--rh-rule);
    border-bottom: 1px solid var(--rh-rule);
    background: transparent;
}

/* ===========================
   Utility: Hairline
   =========================== */
.rh-hairline {
    border: 0;
    border-top: var(--rh-hairline);
}

/* ===========================
   Card: Boxed variant (chosen default)
   =========================== */
.rh-card {
    background: var(--rh-paper);
    padding: 16px;
    border: var(--rh-card-border);
}

/* ===========================
   Newsprint grain overlay
   =========================== */
.rh-grain {
    position: relative;
}
.rh-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--rh-grain-opacity);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
    z-index: 1;
}

/* ===========================
   Image filter for hero/card photos
   =========================== */
.rh-photo {
    filter: var(--rh-image-filter);
}

/* ===========================
   Ad density classes
   =========================== */
.rh-density-subtle .rh-ad-extra {
    display: none;
}
.rh-density-aggressive .rh-ad-extra2 {
    display: block;
}
.rh-ad-extra2 {
    display: none;
}

/* ===========================
   Layout container (Direction B)
   =========================== */
.rh-container {
    max-width: var(--rh-max-width);
    margin: 0 auto;
    padding-left: var(--rh-gutter);
    padding-right: var(--rh-gutter);
}

/* ===========================
   Section spacing
   =========================== */
.rh-section {
    padding-top: var(--rh-section-gap);
    padding-bottom: var(--rh-section-gap);
}