/* ==========================================================================
   Meridian — homepage (framed two-column layout)
   --------------------------------------------------------------------------
   Plain CSS, no build step. Load order in default.hbs:
     built/css.css  →  css/frame.css  →  css/home.css
   Unlayered, so it beats every Tailwind utility without !important.

   One spacing unit drives everything: --col-pad (frame.css, 20px / 28px).
   Every line is 1px var(--color-rule); every row has a fixed height.

   Contents
     1. Tokens
     2. Layout (main column + sidebar)
     3. Card (image · tab row · text · meta row)
     4. Newsletter band
     5. Editor's note
     6. Side column + recommendations
     7. Archive ("Från arkivet")
   ========================================================================== */


/* 1 ── Tokens ───────────────────────────────────────────────────────────── */
:root {
    --hm-bg: #fffafa;                       /* main column background        */
    --hm-accent: var(--color-accent);       /* kicker / label colour         */
    --hm-tab-h: 30px;                       /* category row height           */
    --hm-meta-h: 36px;                      /* author · date row height      */
    --hm-air-a: var(--color-ink);           /* airmail stripe colours        */
    --hm-air-b: #c4562f;
}
html.dark {
    --hm-bg: #181816;
    --hm-accent: var(--color-accent-band-readable);
}
@supports (background: color-mix(in srgb, red, blue)) {
    html.dark { --hm-bg: color-mix(in srgb, var(--color-paper), #fff 5%); }
}


/* 2 ── Layout ───────────────────────────────────────────────────────────────
   <1024  one column: main column, then the sidebar
   ≥1024  main column (1.78fr) | sidebar (1fr), divided by a vertical rule
   The last meta row of each column forms the bottom rule of the block, so
   no extra border-bottom is added here (that would draw a double line).   */
.hm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
    .hm-layout { grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr); }
}

.hm-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--hm-bg);
}
.hm-grid {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
    .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-grid > .hm-card { border-inline-end: 1px solid transparent; }
    .hm-grid > .hm-card:nth-child(odd) { border-inline-end-color: var(--color-rule); }
}

.hm-side { min-width: 0; }
@media (min-width: 1024px) {
    .hm-side { border-inline-start: 1px solid var(--color-rule); }
}


/* 3 ── Card ─────────────────────────────────────────────────────────────────
   image (padded) → tab row → title + excerpt → meta row. The tab row and the
   meta row are full-width strips with 1px rules; cells inside them are
   separated by 1px vertical rules.                                          */
.hm-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hm-card__media { padding: var(--col-pad); }
.hm-card__img {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden; 
    background: var(--color-paper-2);
}
.hm-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.15s;
}
a.hm-card__img:hover img { opacity: 0.92; }

/* Tab row */
.hm-tabs {
    display: flex;
    align-items: stretch;
    min-height: var(--hm-tab-h);
    margin: 0;
    border-block: 1px solid var(--color-rule);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hm-accent);
}
.hm-tab {
    display: flex;
    align-items: center;
    padding: 0 20px 0 var(--col-pad);
    border-inline-end: 1px solid var(--color-rule);
}
.hm-tab + .hm-tab { padding-inline-start: 16px; }

/* Text */
.hm-card__body {
    flex: 1;
    padding: var(--col-pad);
}
.hm-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--color-ink);
}
.hm-card__title a { color: inherit; text-decoration: none; }
.hm-card__title a:hover { color: var(--color-accent); }
.hm-card__title a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
.hm-card__excerpt {
    display: -webkit-box;
    margin: 10px 0 0;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-ink-3);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.hm-card__excerpt:empty { display: none; }

/* Lead story */
.hm-card[data-variant="hero"] .hm-card__title {
    font-size: clamp(26px, 5vw, 32px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.hm-card[data-variant="hero"] .hm-card__excerpt {
    margin-top: 14px;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.5;
    -webkit-line-clamp: 4;
}

/* Meta row */
.hm-meta {
    display: flex;
    align-items: stretch;
    min-height: var(--hm-meta-h);
    border-block: 1px solid var(--color-rule);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--color-ink-mute);
}
.hm-cell {
    display: flex;
    flex: none;
    align-items: center;
    padding: 0 14px;
    border-inline-end: 1px solid var(--color-rule);
    white-space: nowrap;
}
.hm-meta > .hm-cell:first-child { padding-inline-start: var(--col-pad); }
.hm-cell--author {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hm-cell--author b {
    margin-inline-start: 0.7em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink);
}
.hm-cell__label { text-transform: uppercase; letter-spacing: 0.1em; }
.hm-cell--end {                      /* pushed to the right edge */
    margin-inline-start: auto;
    padding-inline-end: var(--col-pad);
    border-inline-end: 0;
    border-inline-start: 1px solid var(--color-rule);
}

/* Save button (lead story) */
.hm-save {
    gap: 6px;
    border-block: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
    cursor: pointer;
    transition: color 0.15s;
}
.hm-save:hover,
.hm-save.is-saved { color: var(--color-accent); }
.hm-save:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }

@media (max-width: 639px) { .hm-cell--hide-sm { display: none; } }
@media (max-width: 479px) {
    .hm-save__label { display: none; }
    .hm-cell { padding-inline: 12px; }
}


/* 4 ── Newsletter band ──────────────────────────────────────────────────────
   Airmail stripe on top, publication cover left, form right. The form states
   (loading / success / error) are classes Ghost puts on the <form>.
   Box padding: 38px 30px 30px (top clears the 6px stripe).                  */
.hm-news {
    padding: var(--col-pad);
    border-bottom: 1px solid var(--color-rule);
}
.hm-news__box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 38px 30px 30px;
    border: 1px solid var(--color-rule);
    background: var(--color-paper-2);
}
.hm-news__box::before {              /* airmail stripe */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: repeating-linear-gradient(
        -55deg,
        var(--hm-air-a) 0 7px, transparent 7px 11px,
        var(--hm-air-b) 11px 18px, transparent 18px 22px);
}
.hm-news__cover {
    position: relative;
    flex: 0 0 38%;
    align-self: stretch;
    min-height: 217px;
    overflow: hidden;
    border: 1px solid var(--color-rule);
    background: var(--color-paper);
}
.hm-news__cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hm-news__text {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
}
.hm-news__label {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hm-accent);
}
.hm-news__title {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-ink);
}
.hm-news__copy {
    margin: 10px 0 0;
    font-size: 13px;
    font-style: normal;
    line-height: 1.55;
    color: var(--color-ink-3);
    text-wrap: pretty;
}
.hm-news__form {
    display: flex;
    align-items: stretch;
    margin-top: 18px;
    padding: 7px;                    /* 46px field: 32px button + 2 × 7px   */
    border: 1px solid var(--color-rule);
    background: var(--color-paper);
}
.hm-news__form:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.hm-news__input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-ink);
}
.hm-news__btn {
    flex: none;
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    background: var(--color-accent-safe);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-paper);
    cursor: pointer;
    transition: background-color 0.15s;
}
.hm-news__btn:hover { background: var(--color-accent-ink); }

.hm-news__form [data-members-loading],
.hm-news__form [data-members-success],
.hm-news__form [data-members-error] { display: none; }
.hm-news__form.loading [data-members-default],
.hm-news__form.success [data-members-default],
.hm-news__form.error   [data-members-default] { display: none; }
.hm-news__form.loading [data-members-loading],
.hm-news__form.success [data-members-success],
.hm-news__form.error   [data-members-error]   { display: inline; }
.hm-news__form.loading .hm-news__btn { opacity: 0.8; }
.hm-news__form.success { pointer-events: none; }

/* Phones: cover on top, tighter padding. */
@media (max-width: 639px) {
    .hm-news__box { flex-direction: column; align-items: stretch; gap: 18px; padding: 30px 18px 18px; }
    .hm-news__cover { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
    .hm-news__form { padding: 5px; }
    .hm-news__input { padding: 0 12px; }
}


/* 5 ── Editor's note ────────────────────────────────────────────────────────
   Square picture (the note page's feature image) beside the quote.         */

:root { --note-bg: #fbfbfa; }                    /* light mode: your colour */
html.dark { --note-bg: var(--color-paper-2); }   /* dark mode: slightly lifted from the page */

.hm-note {
    display: flex;
    border: 1px solid var(--color-rule);
    background-color: var(--note-bg);
}
.hm-note-wrap {
    padding: var(--col-pad);
    border-bottom: 1px solid var(--color-rule);
} 
.hm-note__img {
    position: relative;
    flex: 0 0 120px;
    background: var(--color-ink);
}
.hm-note__img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hm-note__text {
    flex: 1;
    min-width: 0;
    padding: 18px;
}
.hm-note__label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
}
.hm-note__quote {
    margin: 10px 0 12px;
    font-family: var(--font-body);
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-ink-2);
}
.hm-note__quote > :first-child { margin-top: 0; }
.hm-note__quote > :last-child { margin-bottom: 0; }
.hm-note__by {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
}
@media (max-width: 479px) {
    .hm-note__img { flex-basis: 88px; }
    .hm-note__text { padding: 14px; }
}


/* 6 ── Side column ──────────────────────────────────────────────────────────
   <640 one card per row · 640–1023 two per row · ≥1024 one per row.        */
.hm-side__cards { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .hm-side__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-side__cards > .hm-card { border-inline-end: 1px solid transparent; }
    .hm-side__cards > .hm-card:nth-child(odd) { border-inline-end-color: var(--color-rule); }
}
@media (min-width: 1024px) {
    .hm-side__cards { grid-template-columns: minmax(0, 1fr); }
    .hm-side__cards > .hm-card { border-inline-end-width: 0; }
}

/* Recommendations (Ghost's {{recommendations}} → partials/recommendations.hbs):
   a heading row and one bordered row per recommendation, edge to edge.     */ 
.hm-side [data-component="recommendations"] {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;           /* inget får sticka ut ur kolumnen */
}

/* Rubrikraden: samma luft över och under, texten centrerad vertikalt */
.hm-side [data-component="recommendations"] > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    margin: 0;
    padding: 8px var(--col-pad) 0;   /* 8px extra luft överst */
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--color-rule);
}
.hm-side [data-component="recommendations"] h2 {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1;             /* ingen osynlig extra luft ovanför/under texten */
    letter-spacing: 0.2em;
}

/* Listan: alltid en kolumn som är exakt lika bred som sidokolumnen */
.hm-side [data-component="recommendations"] ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.hm-side [data-component="recommendations"] li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px var(--col-pad);   /* höger = vänster */
    overflow: hidden;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--color-rule);
}
.hm-side [data-component="recommendations"] li > a {
    display: block;
    min-width: 0;
    overflow: hidden;
}
.hm-side [data-component="recommendations"] [data-part="title"],
.hm-side [data-component="recommendations"] [data-part="excerpt"] {
    display: block;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* 7 ── Archive ("Från arkivet") ──────────────────────────────────────────────
   Heading row: title cell + full-width rules above and below (drawn with
   clipped box-shadows so they break out of the 1280px frame). Cards are the
   same home-card as above, 4 per row from 1280px, 2 from 640px, 1 below.   */
.hm-archive { margin-top: 40px; }

.hm-archive__head {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 60px;
}
.hm-archive__head::before,
.hm-archive__head::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: var(--color-rule);
    box-shadow: 0 0 0 100vmax var(--color-rule);
    clip-path: inset(0 -100vmax);
}
.hm-archive__head::before { top: 0; }
.hm-archive__head::after { bottom: 0; }

.hm-archive__title {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 var(--col-pad);
    border-inline-end: 1px solid var(--color-rule);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-ink);
}
@media (max-width: 767px) {
    .hm-archive { margin-top: 32px; }
    .hm-archive__head { min-height: 52px; }
    .hm-archive__title { font-size: 18px; }
}

.hm-archive__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
    .hm-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-archive__grid > .hm-card { border-inline-end: 1px solid transparent; }
    .hm-archive__grid > .hm-card:nth-child(odd) { border-inline-end-color: var(--color-rule); }
}
@media (min-width: 1280px) {
    .hm-archive__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hm-archive__grid > .hm-card:nth-child(odd) { border-inline-end-color: transparent; }
    .hm-archive__grid > .hm-card:not(:nth-child(4n)) { border-inline-end-color: var(--color-rule); }
}

/* 8 ── Archive pages (tag · author · index) ───────────────────────────────────
   Same home-card as "Från arkivet". Rows step down 1 → 2 → 3 → 4 columns,
   each with the same rules: cell dividers (transparent when not needed, so all
   columns keep equal width), tab row + meta row inside every card.
   The lead card puts the image left and tab row / text / meta row right.     */
.tg { position: relative; }
.tg::before {                             /* full-width rule above the first row */
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: var(--color-rule);
    box-shadow: 0 0 0 100vmax var(--color-rule);
    clip-path: inset(0 -100vmax);
}
/* After the archive header the chip strip already draws that rule. */
.ah + section .tg::before { display: none; }

/* Lead ─────────────────────────────────────────────────────────────────── */
.tg-lead > .hm-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--color-rule);
}
.tg-lead .hm-tabs { border-top-width: 0; }
.tg-lead .hm-meta { border-bottom-width: 0; }
.tg-lead .hm-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tg-lead .hm-card__title {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.tg-lead .hm-card__excerpt {
    margin-top: 14px;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.5;
    -webkit-line-clamp: 5;
}
@media (min-width: 768px) {
    .tg-lead > .hm-card {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
    }
    .tg-lead .hm-card__media { grid-column: 1; grid-row: 1 / 4; }
    .tg-lead .hm-tabs,
    .tg-lead .hm-card__body,
    .tg-lead .hm-meta {
        grid-column: 2;
        border-inline-start: 1px solid var(--color-rule);
    }
    .tg-lead .hm-card__body { padding: 36px var(--col-pad); }
}

/* Rows ─────────────────────────────────────────────────────────────────── */
.tg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.tg-row > .hm-card { border-inline-end: 1px solid transparent; }

@media (min-width: 640px) {               /* tablet: 2 per row */
    .tg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tg-row > .hm-card:nth-child(odd) { border-inline-end-color: var(--color-rule); }
}
@media (min-width: 768px) {               /* 3-up row: 3 columns */
    .tg-row[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tg-row[data-cols="3"] > .hm-card { border-inline-end-color: var(--color-rule); }
    .tg-row[data-cols="3"] > .hm-card:nth-child(3n) { border-inline-end-color: transparent; }
}
@media (min-width: 1280px) {              /* 4-up rows: 4 columns */
    .tg-row[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tg-row[data-cols="4"] > .hm-card { border-inline-end-color: var(--color-rule); }
    .tg-row[data-cols="4"] > .hm-card:nth-child(4n) { border-inline-end-color: transparent; }
}

/* Type scale steps down with the row: 2-up bigger, 4-up as on the homepage. */
.tg-row[data-cols="2"] .hm-card__title { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; }
.tg-row[data-cols="2"] .hm-card__excerpt { font-size: 15px; }
.tg-row[data-cols="3"] .hm-card__title { font-size: 19px; }

/* 9 ── Archive header (tag · index) ───────────────────────────────────────────
   Edge-to-edge rows inside the frame. Every rule is drawn ONCE, full width
   (same clipped box-shadow as the "Från arkivet" head), as the last pixel of
   its row, so rows never stack two lines. Horizontal padding is --col-pad.
   Vertical rhythm: crumb 52 · eyebrow 46 · 32 / title / 8 / dek / 20 · chips. */
.ah-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    min-height: 46px;
    padding: 8px var(--col-pad);
    box-sizing: border-box;
}
.ah-row--crumb { min-height: 52px; justify-content: flex-start; }

.ah-row::after,
.ah [data-component="archive-filters"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-rule);
    box-shadow: 0 0 0 100vmax var(--color-rule);
    clip-path: inset(0 -100vmax);
    pointer-events: none;
}

.ah-title-block { padding: 24px var(--col-pad) 20px; }
.ah-title {
    max-width: 896px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}
.ah-dek {
    max-width: 680px;
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-style: italic;
    line-height: 1.45;
    color: var(--color-ink-3);
}
@media (min-width: 768px) {
    .ah-title-block { padding-top: 32px; }
    .ah-dek { font-size: 18px; }
}

/* Chip strip: aligned to the same padding; its old inner border is replaced
   by the single full-width rule above. */
.ah [data-component="archive-filters"] {
    position: relative;
    padding-inline: var(--col-pad);
    border-bottom-width: 0;
}

/* Chip-strip scroll arrows: clean fade in the page colour, kept clear of the rule. */
.ah [data-component="archive-filters"] [class*="bg-gradient"] {
    bottom: 1px;                          /* never cover the bottom rule */
}
.ah [data-component="archive-filters"] [class*="bg-gradient-to-r"] {
    background-image: linear-gradient(to right,
        var(--color-paper) 40%,
        color-mix(in srgb, var(--color-paper) 0%, transparent));
}
.ah [data-component="archive-filters"] [class*="bg-gradient-to-l"] {
    background-image: linear-gradient(to left,
        var(--color-paper) 40%,
        color-mix(in srgb, var(--color-paper) 0%, transparent));
}
.ah [data-component="archive-filters"]::after { z-index: 11; }   /* rule always on top */