/* Gondoskodás Magazin — warm editorial magazine stylesheet */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#faf5ec;color:#2e2620;
  font-family:Palatino,"Palatino Linotype","Book Antiqua","Iowan Old Style",Georgia,serif;
  font-size:19px;line-height:1.75;
}
.container{max-width:820px;margin:0 auto;padding:0 24px}
.sans{font-family:"Avenir Next","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* ---------- magazine header ---------- */
.issue{border-bottom:1px solid #dfd2bd;background:#f3ead9}
.issue .container{display:flex;justify-content:center;gap:8px 30px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;
  font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8a7a63}
.brand{text-align:center;padding:40px 0 12px}
.brand .name{margin:0;font-size:clamp(28px,6.4vw,46px);letter-spacing:.16em;text-transform:uppercase;font-weight:400;line-height:1}
.brand .name a{color:#2e2620;text-decoration:none}
.brand .tag{margin:14px 0 0;font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:#b4451f}
.ornament{display:block;width:80px;height:1px;background:#c9b697;margin:22px auto 0;position:relative}
.ornament::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3.5px;background:#b4451f;transform:rotate(45deg)}

nav.mag{border-top:1px solid #dfd2bd;border-bottom:1px solid #dfd2bd;margin-top:30px;background:#fffdf8}
nav.mag ul{list-style:none;margin:0;padding:13px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 30px;
  font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
nav.mag a{color:#6b5c47;text-decoration:none}
nav.mag a:hover,nav.mag a[aria-current="page"]{color:#b4451f}

/* ---------- article ---------- */
main{padding:48px 0 20px}
.pill{display:inline-block;border:1px solid #b4451f;color:#b4451f;border-radius:999px;padding:5px 16px;
  font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:22px}
h1.title{font-size:clamp(31px,6vw,50px);line-height:1.14;margin:0 0 20px;font-weight:400;letter-spacing:-.005em}
.lede{font-size:22px;line-height:1.58;color:#5b4e3f;font-style:italic;margin:0 0 26px}
.credit{font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a7a63;
  padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid #dfd2bd;display:flex;flex-wrap:wrap;gap:6px 26px}

article p{margin:0 0 20px}
article > p:first-of-type::first-letter{float:left;font-size:72px;line-height:.78;margin:8px 12px 0 0;color:#b4451f}
article h2{font-size:27px;line-height:1.28;font-weight:400;margin:46px 0 14px;color:#2e2620}
article h2::before{content:"";display:block;width:44px;height:2px;background:#b4451f;margin-bottom:16px}
article h3{font-size:20px;font-weight:400;font-style:italic;margin:30px 0 10px;color:#5b4e3f}
article a{color:#a53f1c}
article ul,article ol{padding-left:22px;margin:0 0 20px}
article li{margin-bottom:10px}

blockquote.quote{margin:40px 0;padding:0;text-align:center;font-size:26px;line-height:1.42;font-style:italic;color:#8a3616}
blockquote.quote::before,blockquote.quote::after{content:"";display:block;width:56px;height:1px;background:#c9b697;margin:0 auto 20px}
blockquote.quote::after{margin:20px auto 0}

.card{background:#fffdf8;border:1px solid #e6d9c4;border-radius:14px;padding:26px 28px;margin:34px 0;box-shadow:0 12px 28px -22px rgba(80,60,30,.5)}
.card h3{margin:0 0 12px;font-style:normal;font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#b4451f}
.card p:last-child,.card ul:last-child,.card ol:last-child{margin-bottom:0}

ol.steps{list-style:none;padding:0;counter-reset:s;margin:30px 0}
ol.steps li{counter-increment:s;position:relative;padding-left:64px;margin-bottom:26px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:50%;
  border:1px solid #b4451f;color:#b4451f;display:flex;align-items:center;justify-content:center;
  font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:16px}
ol.steps strong{display:block;margin-bottom:3px}

.warn{background:#fdf0e8;border-left:4px solid #b4451f;border-radius:0 12px 12px 0;padding:20px 24px;margin:34px 0;font-size:18px}
.warn h3{margin:0 0 8px;font-style:normal;font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8a3616}
.warn p:last-child,.warn ul:last-child{margin-bottom:0}

.qa{border-top:1px solid #dfd2bd;padding-top:20px;margin-top:20px}
.qa h3{margin:0 0 6px;font-style:normal;font-size:19px;color:#2e2620}

.sourcebox{border-top:2px solid #c9b697;border-bottom:2px solid #c9b697;padding:22px 0;margin-top:44px;font-size:17px}
.sourcebox h2{margin:0 0 10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-family:"Avenir Next","Segoe UI",Arial,sans-serif;color:#8a7a63}
.sourcebox h2::before{display:none}
.sourcebox ul{margin:0;padding-left:20px}
.sourcebox li{margin-bottom:6px}

.note-small{font-size:16px;color:#6b5c47;background:#f3ead9;border-radius:12px;padding:18px 22px;margin-top:26px}

.more{margin-top:52px;padding-top:26px;border-top:1px solid #dfd2bd}
.more h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-family:"Avenir Next","Segoe UI",Arial,sans-serif;color:#8a7a63;margin:0 0 20px}
.more h2::before{display:none}
.more .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.more a.item{text-decoration:none;color:inherit;display:block}
.more .k{font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#b4451f;display:block;margin-bottom:8px}
.more h3{margin:0 0 6px;font-size:20px;font-style:normal;line-height:1.28;border-bottom:1px solid transparent}
.more a.item:hover h3{border-bottom-color:#b4451f}
.more p{margin:0;font-size:16.5px;color:#6b5c47}

footer{background:#f3ead9;border-top:1px solid #dfd2bd;margin-top:56px;padding:36px 0 44px;font-size:17px;color:#6b5c47}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
footer h2{font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#2e2620;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{color:#8a3616}
.colophon{margin-top:28px;padding-top:16px;border-top:1px solid #dfd2bd;font-size:15px;color:#8a7a63;text-align:center}

@media(max-width:640px){
  body{font-size:18px}
  article > p:first-of-type::first-letter{font-size:58px}
  ol.steps li{padding-left:56px}
  ol.steps li::before{width:38px;height:38px;font-size:15px}
}