.articles-page{background:var(--paper)}
.articles-hero{padding-top:64px;padding-bottom:80px}
.articles-hero-copy{max-width:760px;padding-top:18px}
.articles-hero-copy .eyebrow{font:11px/1.4 Arial,sans-serif;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin:0 0 25px}
.articles-hero-copy h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(54px,8vw,108px);font-weight:400;letter-spacing:-.06em;line-height:.98;margin:0}
.articles-hero-copy h1 em{color:var(--muted);font-style:italic}
.articles-hero-copy>p:last-child{max-width:560px;color:var(--muted);font-size:18px;line-height:1.7;margin:35px 0 0}
.articles-list{padding-top:0}
.articles-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid var(--line);padding-top:30px;margin-bottom:34px}
.articles-list-head h2{font-size:clamp(30px,4vw,52px)}
.admin-link{font-size:12px;letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:7px;white-space:nowrap}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article-card{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--line);padding-top:18px}
.article-card-image{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--panel);display:block}
.article-card-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font:10px/1.4 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-top:18px}
.article-card h3{font-family:Georgia,'Times New Roman',serif;font-size:28px;line-height:1.1;margin:13px 0 10px}
.article-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.article-card-link{display:inline-block;margin-top:20px;font-size:12px;border-bottom:1px solid;padding-bottom:7px;align-self:flex-start}
.article-empty{border:1px dashed var(--line);padding:40px;color:var(--muted);text-align:center}
.article-detail{padding-top:22px}
.article-detail-inner{max-width:820px;margin:0 auto}
.article-detail-back{font-size:12px;border-bottom:1px solid;padding-bottom:7px;display:inline-block;margin-bottom:34px}
.article-detail-meta{color:var(--muted);font:11px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.article-detail h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,6vw,76px);font-weight:400;letter-spacing:-.05em;line-height:1;margin:18px 0}
.article-detail-intro{font-size:20px;color:var(--muted);line-height:1.65;max-width:680px}
.article-detail-image{width:100%;max-height:600px;object-fit:cover;margin:38px 0}
.article-detail-columns{display:grid;grid-template-columns:240px 1fr;gap:56px;border-top:1px solid var(--line);padding-top:32px}
.article-detail-single{grid-template-columns:1fr;max-width:720px}
.article-detail h2{font-size:28px;margin-bottom:18px}
.recipe-list,.recipe-steps{margin:0;padding-left:20px;color:var(--muted);line-height:1.8}
.recipe-steps li{margin-bottom:14px}
.article-detail-body{color:var(--muted);font-size:17px;line-height:1.85}
.article-detail-body p{margin:0 0 20px}
.article-detail-body h3{font:400 24px/1.3 Georgia,'Times New Roman',serif;color:var(--ink);margin:32px 0 12px}
.article-detail-body ul{margin:0 0 20px;padding-left:22px}
.article-detail-body li{margin-bottom:6px}
.article-detail-body strong{color:var(--ink)}
/* style.css sets em{font-weight:400} for the headlines; text that is both bold and
   italic (***λέξη***) must stay bold. */
.article-detail strong em,.article-detail em strong{font-weight:700}
.article-detail-body a{color:var(--ink);border-bottom:1px solid}
.article-detail-body .rich-figure{margin:32px 0}
/* Capped rather than cropped: a portrait photo from a phone must not swallow the
   page, but the writer chose that framing, so nothing is cut off. */
.article-detail-body .rich-figure img{display:block;max-width:100%;max-height:620px;margin:0 auto;background:var(--panel)}
.article-detail-body figcaption{font:11px/1.5 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}
/* Scoped to the whole article, not just the body: Υλικά and Εκτέλεση can carry
   inline images too, and they render outside .article-detail-body. */
.article-detail .rich-inline-image{display:block;max-width:100%;height:auto;max-height:420px;margin:12px 0}
@media(max-width:850px){.article-grid{grid-template-columns:repeat(2,1fr)}.article-detail-columns{grid-template-columns:1fr;gap:30px}}
@media(max-width:600px){.articles-hero{padding-top:35px;padding-bottom:56px}.articles-hero-copy h1{font-size:58px}.articles-hero-copy>p:last-child{font-size:16px}.articles-list-head{align-items:flex-start;flex-direction:column}.article-grid{grid-template-columns:1fr;gap:38px}.article-card h3{font-size:25px}.article-detail h1{font-size:46px}.article-detail-intro{font-size:18px}.article-detail-image{margin:28px 0}.article-detail-body{font-size:16px}}