/* =========================================================
   Owl diary index
   ========================================================= */
.owl-index-hero {
    padding: 6rem 0 3.3rem;
    border-bottom: 1px solid var(--ed-line);
    background:
        radial-gradient(circle at 80% 20%, rgba(86,122,105,.13), transparent 18rem),
        linear-gradient(145deg, #fffdf9, #f3ede2);
}
.owl-index-hero__grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 170px;
    gap: 3rem;
    align-items: end;
    margin-top: 1.7rem;
}
.owl-index-hero h1 {
    margin: 0;
    color: var(--ed-ink);
    font-size: clamp(2rem, 4.7vw, 3.45rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: .01em;
    text-wrap: pretty;
}
.owl-index-hero__grid > div > p:last-child {
    max-width: 730px;
    margin: 1.15rem 0 0;
    color: var(--ed-text);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.9;
}
.owl-index-hero__grid > img { width: 160px; height: auto; filter: drop-shadow(0 12px 18px rgba(23,36,58,.13)); }
.owl-index-main { padding-block: 2.8rem 7rem; }
.owl-latest-section,
.owl-archive-section { margin-bottom: 4.5rem; }
.owl-latest-list { display: grid; grid-template-columns: 1.25fr .875fr .875fr; gap: 1rem; }
.owl-latest-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ed-line);
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(23,36,58,.05);
}
.owl-latest-card__visual { display: block; aspect-ratio: 3/2; overflow: hidden; background: #e8dfcf; }
.owl-latest-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.owl-latest-card__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.05rem 1.2rem; }
.owl-latest-card time { color: var(--ed-green); font-size: .78rem; font-weight: 900; }
.owl-latest-card strong { display: block; margin-top: .45rem; color: var(--ed-ink); font-size: 1.08rem; font-weight: 900; line-height: 1.55; }
.owl-latest-card__body > span:not(.owl-latest-card__visual) { display: -webkit-box; overflow: hidden; margin-top: .5rem; color: var(--ed-muted); font-size: .86rem; font-weight: 500; line-height: 1.7; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.owl-latest-card b { margin-top: auto; padding-top: .75rem; color: var(--ed-blue); font-size: .82rem; }
.owl-latest-card--main strong { font-size: 1.28rem; }
.owl-month-grid { grid-template-columns: 1fr; }

.owl-person-card {
    display: grid;
    grid-template-columns: 130px minmax(0,1fr) auto;
    gap: 1.6rem;
    align-items: center;
    padding: 1.6rem 1.8rem;
    border: 1px solid #d8e4dd;
    border-radius: 20px;
    background: linear-gradient(135deg, #f1f7f3, #fff9ef);
}
.owl-person-card > img { width: 125px; height: auto; }
.owl-person-card h2 { margin: .15rem 0 .55rem; color: var(--ed-ink); font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 900; line-height: 1.5; }
.owl-person-card p:not(.editorial-kicker) { margin: 0; color: var(--ed-text); font-size: .95rem; font-weight: 500; line-height: 1.8; }
.owl-person-card__links { display: grid; gap: .55rem; min-width: 200px; }
.owl-person-card__links a { display: grid; place-items: center; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--ed-line); border-radius: 999px; background: #fff; color: var(--ed-blue); font-size: .86rem; font-weight: 900; text-decoration: none; }

/* =========================================================
   Owl diary detail
   ========================================================= */
.owl-detail-head {
    padding: 6rem 0 3rem;
    border-bottom: 1px solid var(--ed-line);
    background:
        radial-gradient(circle at 86% 28%, rgba(201,121,23,.1), transparent 17rem),
        linear-gradient(145deg, #fffdf9, #f3ede2);
}
.owl-detail-head__grid { display: grid; grid-template-columns: minmax(0,1fr) 160px; gap: 2.5rem; align-items: end; margin-top: 1.7rem; }
.owl-detail-head time { display: block; margin: .45rem 0 .7rem; color: var(--ed-green); font-size: .86rem; font-weight: 900; }
.owl-detail-head h1 { margin: 0; max-width: 820px; color: var(--ed-ink); font-size: clamp(2rem, 4.8vw, 3.8rem); font-weight: 900; line-height: 1.42; text-wrap: pretty; }
.owl-detail-head__grid > div > p:last-child { margin: 1rem 0 0; color: var(--ed-text); font-size: 1rem; font-weight: 500; line-height: 1.8; }
.owl-detail-head__grid > img { width: 150px; height: auto; filter: drop-shadow(0 12px 18px rgba(23,36,58,.12)); }
.owl-detail-main { padding-block: 2.5rem 7rem; }
.owl-detail-article { width: min(800px,100%); margin-inline: auto; }
.owl-detail-gallery { display: grid; gap: 1rem; }
.owl-detail-gallery.is-multiple { grid-template-columns: repeat(2,minmax(0,1fr)); }
.owl-detail-gallery figure { margin: 0; overflow: hidden; border-radius: 18px; background: #e9dfcf; box-shadow: var(--ed-shadow); }
.owl-detail-gallery img { display: block; width: 100%; max-height: 760px; object-fit: contain; background: #eee7db; }
.owl-detail-privacy { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--ed-green); border-radius: 0 10px 10px 0; background: #eef5f0; color: #475467; font-size: .84rem; font-weight: 600; line-height: 1.7; }

.owl-conversation { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 1.5rem; align-items: start; margin: 3rem 0 3.5rem; }
.owl-conversation__speaker { display: flex; flex-direction: column; align-items: center; text-align: center; }
.owl-conversation__speaker img { width: 104px; height: auto; }
.owl-conversation__speaker span { margin-top: .45rem; padding: .4rem .7rem; border-radius: 999px; background: var(--ed-ink); color: #fff; font-size: .78rem; font-weight: 900; }
.owl-conversation__speaker small { margin-top: .25rem; color: var(--ed-muted); font-size: .7rem; font-weight: 700; }
.owl-conversation__bubble {
    position: relative;
    padding: clamp(1.35rem, 4vw, 2.15rem);
    border: 1px solid #e3d7c7;
    border-radius: 18px;
    background:
        linear-gradient(rgba(255,253,248,.92), rgba(255,253,248,.92)),
        repeating-linear-gradient(0deg, transparent 0 33px, #eee5d8 33px 34px);
    box-shadow: 0 12px 32px rgba(23,36,58,.06);
}
.owl-conversation__bubble::before { content: ""; position: absolute; top: 2rem; left: -12px; width: 22px; height: 22px; border-left: 1px solid #e3d7c7; border-bottom: 1px solid #e3d7c7; background: #fffdf8; transform: rotate(45deg); }
.owl-conversation__date { display: block; margin-bottom: .85rem; color: var(--ed-green); font-size: .8rem; font-weight: 900; }
.owl-conversation__bubble p { position: relative; margin: 0 0 1.05rem; color: #344054; font-size: clamp(1.06rem, 1.7vw, 1.16rem); font-weight: 500; line-height: 2; letter-spacing: .005em; }
.owl-conversation__bubble p:last-child { margin-bottom: 0; }

.owl-detail-neighbors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; padding-top: 1.5rem; border-top: 1px solid var(--ed-line); }
.owl-detail-neighbors a { display: flex; min-height: 112px; flex-direction: column; justify-content: center; padding: 1rem 1.1rem; border: 1px solid var(--ed-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.owl-detail-neighbors a:last-child { text-align: right; }
.owl-detail-neighbors span { display: block; margin-bottom: .35rem; color: var(--ed-green); font-size: .76rem; font-weight: 900; }
.owl-detail-neighbors strong { color: var(--ed-ink); font-size: .98rem; font-weight: 900; line-height: 1.55; }

.owl-recent { margin-top: 5rem; }
.owl-recent .editorial-section__head > a { color: var(--ed-blue); font-size: .86rem; font-weight: 900; text-decoration: none; }
.owl-recent__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.owl-recent__grid a { display: grid; grid-template-columns: 150px minmax(0,1fr); overflow: hidden; min-height: 135px; border: 1px solid var(--ed-line); border-radius: 16px; background: #fff; color: inherit; text-decoration: none; }
.owl-recent__grid img { width: 100%; height: 100%; object-fit: cover; }
.owl-recent__grid a > span { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 1rem; }
.owl-recent__grid time { color: var(--ed-green); font-size: .76rem; font-weight: 900; }
.owl-recent__grid strong { margin-top: .35rem; color: var(--ed-ink); font-size: 1rem; font-weight: 900; line-height: 1.55; }

.owl-soft-crosslinks { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: center; margin-top: 4rem; padding: 1.6rem 1.8rem; border: 1px solid #d8e4dd; border-radius: 18px; background: linear-gradient(135deg, #eef5f0, #fff8eb); }
.owl-soft-crosslinks h2 { margin: .15rem 0 .5rem; color: var(--ed-ink); font-size: clamp(1.4rem, 2.7vw, 1.95rem); font-weight: 900; line-height: 1.5; }
.owl-soft-crosslinks p:not(.editorial-kicker) { margin: 0; color: var(--ed-text); font-size: .92rem; font-weight: 500; line-height: 1.8; }
.owl-soft-crosslinks > div:last-child { display: grid; gap: .55rem; min-width: 205px; }
.owl-soft-crosslinks a { display: grid; place-items: center; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--ed-line); border-radius: 999px; background: #fff; color: var(--ed-blue); font-size: .84rem; font-weight: 900; text-decoration: none; }

.owl-person-card a:focus-visible,
.owl-detail-neighbors a:focus-visible,
.owl-recent__grid a:focus-visible,
.owl-soft-crosslinks a:focus-visible {
    outline: 3px solid rgba(49,95,137,.5);
    outline-offset: 3px;
}

@media (max-width: 820px) {
    .owl-index-hero { padding-top: 5.2rem; }
    .owl-index-hero__grid { grid-template-columns: minmax(0,1fr) 120px; gap: 1rem; }
    .owl-index-hero__grid > img { width: 110px; }
    .owl-latest-list { grid-template-columns: 1fr; }
    .owl-latest-card { display: grid; grid-template-columns: 180px minmax(0,1fr); }
    .owl-latest-card__visual { aspect-ratio: auto; min-height: 150px; }
    .owl-person-card { grid-template-columns: 105px minmax(0,1fr); }
    .owl-person-card > img { width: 100px; }
    .owl-person-card__links { grid-column: 1 / 3; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .owl-detail-head { padding-top: 5.2rem; }
    .owl-detail-head__grid { grid-template-columns: minmax(0,1fr) 105px; gap: 1rem; }
    .owl-detail-head__grid > img { width: 100px; }
    .owl-detail-gallery.is-multiple { grid-template-columns: 1fr; }
    .owl-conversation { grid-template-columns: 1fr; }
    .owl-conversation__speaker { flex-direction: row; justify-content: flex-start; gap: .6rem; text-align: left; }
    .owl-conversation__speaker img { width: 72px; }
    .owl-conversation__speaker span,
    .owl-conversation__speaker small { margin: 0; }
    .owl-conversation__bubble::before { top: -11px; left: 42px; border: 0; border-left: 1px solid #e3d7c7; border-top: 1px solid #e3d7c7; }
    .owl-recent__grid { grid-template-columns: 1fr; }
    .owl-soft-crosslinks { grid-template-columns: 1fr; }
    .owl-soft-crosslinks > div:last-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
    .owl-index-hero h1 { font-size: 1.9rem; }
    .owl-index-hero__grid { grid-template-columns: 1fr; }
    .owl-index-hero__grid > img { display: none; }
    .owl-index-main { padding-block: 2rem 5.5rem; }
    .owl-latest-section,
    .owl-archive-section { margin-bottom: 3.5rem; }
    .owl-latest-card { grid-template-columns: 112px minmax(0,1fr); min-height: 118px; }
    .owl-latest-card__visual { min-height: 118px; }
    .owl-latest-card__body { padding: .8rem; }
    .owl-latest-card strong { font-size: 1.1rem; }
    .owl-latest-card__body > span:not(.owl-latest-card__visual) { display: none; }
    .owl-latest-card b { padding-top: .45rem; font-size: .76rem; }
    .owl-person-card { grid-template-columns: 1fr; text-align: center; }
    .owl-person-card > img { margin: 0 auto; }
    .owl-person-card__links { grid-column: auto; grid-template-columns: 1fr; }
    .owl-detail-head__grid { grid-template-columns: 1fr; }
    .owl-detail-head__grid > img { display: none; }
    .owl-detail-head h1 { font-size: 1.9rem; }
    .owl-detail-main { padding-block: 1.6rem 5.5rem; }
    .owl-detail-gallery figure { border-radius: 14px; }
    .owl-conversation { margin: 2.2rem 0 3rem; }
    .owl-conversation__bubble { padding: 1.15rem; }
    .owl-conversation__bubble p { font-size: 1.08rem; line-height: 2; }
    .owl-detail-neighbors { grid-template-columns: 1fr; }
    .owl-detail-neighbors a:last-child { text-align: left; }
    .owl-recent__grid a { grid-template-columns: 112px minmax(0,1fr); min-height: 112px; }
    .owl-soft-crosslinks > div:last-child { grid-template-columns: 1fr; }
}
