.article-page .detail{margin:28px auto 85px;max-width:1240px;padding:0 40px}.detail-heading{position:relative;padding:44px 240px 42px 36px;border-left:5px solid #d89b68;margin-bottom:36px;background:#faf7ef;border-radius:0 65px 0 0}.detail-label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700}.detail-label img{width:34px}.detail-heading h1{font-size:32px;font-weight:900;line-height:1.6;letter-spacing:.04em;margin:22px 0 0}.heading-art{position:absolute;width:210px;right:25px;bottom:35px}.article-photo{margin:32px 0}.zoom-photo{display:block;border:0;padding:0;background:transparent;cursor:zoom-in;width:100%}.article-page .article-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:660px;object-fit:contain;margin:auto;border-radius:6px}.hero-photo{background:#faf7ef;padding:24px;border-radius:32px 8px;margin:0 0 55px}.article-photo figcaption{font-size:12px;color:#6b756b;text-align:center;line-height:1.8;margin-top:12px}.reading-layout{display:grid;grid-template-columns:220px minmax(0,760px);justify-content:space-between;gap:60px}.article-toc{position:sticky;top:35px;align-self:start;padding:24px 0;border-top:2px solid #426857}.article-toc>p{font-size:17px;font-weight:800;margin-bottom:18px}.article-toc nav{display:grid}.article-toc a{font-size:13px;font-weight:700;line-height:1.8;padding:15px 0;border-bottom:1px solid #dddcd1}.article-toc a:hover{color:#ba682e}.article-toc>img{width:140px;display:block;margin:30px auto;background:#d89b68;border-radius:45px;padding:15px}.article-body{font-size:16px;line-height:2}.article-body p{margin:0 0 24px}.article-body .opening{font-weight:700}.article-body .sample-note{font-size:12px;color:#777}.article-body section{margin-top:65px;scroll-margin-top:30px}.article-body h2{font-size:30px;line-height:1.5;font-weight:900;padding:0 0 18px;border-bottom:2px solid #d89b68;margin-bottom:30px}.article-body h3{font-size:22px;line-height:1.6;font-weight:800;margin:28px 0 18px}.portrait-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;margin:30px 0}.portrait-story figure{margin:0}.article-note{display:flex;gap:20px;padding:28px;background:#faf7ef;border-radius:0 30px;border-left:3px solid #d89b68;margin:30px 0}.article-note>img{width:42px;height:50px;object-fit:contain}.article-note h3{margin:0 0 12px;font-size:20px}.article-note p{margin:0}.article-end{text-align:center;border-top:1px solid #d5d7cb;margin-top:55px;padding-top:30px}.article-end>img{width:190px;margin:auto}.article-end p{font-size:14px;font-weight:700;margin:15px 0 25px}.article-end a{display:flex;justify-content:space-between;gap:20px;max-width:380px;margin:auto;background:#426857;color:#fff;padding:16px 28px;border-radius:40px;font-weight:700}.photo-dialog{border:0;background:#faf7ef;padding:35px 15px 15px;max-width:95vw;max-height:95vh;border-radius:14px}.photo-dialog::backdrop{background:#14271cbd}.photo-dialog>img{display:block;max-width:88vw;max-height:82vh;width:auto;height:auto;object-fit:contain}.photo-close{position:absolute;right:10px;top:0;font-size:28px;border:0;background:transparent;cursor:pointer}@media(max-width:767px){.article-page .detail{padding:0 20px;margin:24px auto 45px}.detail-heading{padding:25px 20px 95px;border-radius:0 38px 0 0;margin-bottom:24px}.detail-heading h1{font-size:24px;line-height:1.6;margin-top:15px}.detail-label{font-size:12px}.heading-art{width:125px;bottom:12px;right:16px}.hero-photo{padding:12px;border-radius:18px 4px;margin-bottom:32px}.article-page .article-photo img{max-height:70vh}.reading-layout{display:block}.article-toc{position:static;padding:20px;margin-bottom:34px;background:#faf7ef;border-top:0;border-radius:20px}.article-toc>img{display:none}.article-toc>p{margin-bottom:5px}.article-toc a{padding:10px 0}.article-body{font-size:16px;line-height:2}.article-body h2{font-size:24px;margin-bottom:23px}.article-body h3{font-size:20px}.article-body section{margin-top:42px}.portrait-story{display:block}.portrait-story figure{max-width:310px;margin:auto}.article-note{padding:20px;gap:12px}.article-note>img{width:30px}.article-note h3{font-size:18px}.article-photo figcaption{font-size:11px}}

/* A single illustrated cover joins the heading and lead photograph. */
.article-cover{position:relative;background:#faf7ef;border:1px solid #aeb7a8;border-radius:48px 8px 48px 8px;margin-bottom:55px;overflow:hidden}
.article-cover .detail-heading{border:0;border-radius:0;margin:0;padding:46px 260px 50px 40px;background:transparent}
.article-cover .detail-heading:before{content:"";position:absolute;left:0;top:44px;width:5px;height:74px;background:#d89b68;border-radius:0 4px 4px 0}
.article-cover .detail-heading:after{content:"";position:absolute;bottom:12px;left:40px;width:calc(100% - 80px);height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'%3E%3Cpath d='M0 7 Q20 0 40 7 T80 7 T120 7 T160 7' fill='none' stroke='%23b7c5b7' stroke-width='1'/%3E%3C/svg%3E") repeat-x center;opacity:.9}
.article-cover .heading-art{bottom:33px}
.article-cover .hero-photo{position:relative;margin:0;background:transparent;border-radius:0;padding:14px 28px 24px}
.article-cover .hero-photo:before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%) rotate(-5deg);width:62px;height:20px;background:#d89b68d9;clip-path:polygon(4% 0,97% 0,100% 30%,97% 55%,100% 100%,2% 100%,0 70%,3% 40%);z-index:1;pointer-events:none}
.article-cover .hero-photo .zoom-photo{background:#f0eddf;border-radius:18px 4px 18px 4px;overflow:hidden;padding:0}
.article-cover .hero-photo figcaption{margin-top:15px}
.article-toc>p{display:flex;align-items:center;gap:12px}
.article-toc>p:before{content:"";width:13px;height:12px;border-radius:45%;background:#d89b68;box-shadow:4px -6px 0 -3px #426857}
@media(max-width:767px){
 .article-cover{border-radius:30px 6px 30px 6px;margin-bottom:32px}
 .article-cover .detail-heading{padding:28px 22px 100px}
 .article-cover .detail-heading:before{top:29px;height:55px;width:4px}
 .article-cover .detail-heading:after{left:20px;width:calc(100% - 40px);bottom:9px}
 .article-cover .heading-art{right:18px;bottom:27px;width:130px}
 .article-cover .hero-photo{padding:14px 12px 17px}
 .article-cover .hero-photo:before{width:47px;height:16px;top:7px}
 .article-cover .hero-photo .zoom-photo{border-radius:12px 3px}
}

/* Desktop: a two-column cover and a wider reading canvas. */
@media(min-width:1000px){
 .article-page .detail{max-width:1480px;width:92%;padding:0;margin-top:34px}
 .article-cover{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
 .article-cover .detail-heading{display:flex;flex-direction:column;justify-content:center;padding:48px 38px 155px;min-height:430px}
 .article-cover .detail-heading h1{font-size:clamp(28px,2.25vw,38px);line-height:1.65}
 .article-cover .detail-heading:after{left:38px;width:calc(100% - 76px);bottom:29px}
 .article-cover .heading-art{width:180px;right:34px;bottom:55px}
 .article-cover .hero-photo{align-self:center;padding:32px 28px 26px 0}
 .article-cover .hero-photo:before{top:23px}
 .article-cover .hero-photo img{max-height:600px}
 .reading-layout{grid-template-columns:200px minmax(0,960px);gap:55px;justify-content:space-between}
 .article-body>p,.article-body>section>p{max-width:840px}
 .article-page .article-body .article-photo img{max-height:760px}
 .portrait-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
}
@media(min-width:768px) and (max-width:999px){
 .article-page .detail{padding:0 28px}
 .article-cover{display:grid;grid-template-columns:1fr 1fr;align-items:center}
 .article-cover .detail-heading{padding:32px 24px 125px;min-height:350px}
 .article-cover .detail-heading h1{font-size:26px}
 .article-cover .heading-art{width:140px;bottom:34px}
 .article-cover .hero-photo{padding:25px 18px 20px 0}
 .article-cover .hero-photo:before{top:15px}
 .reading-layout{grid-template-columns:160px minmax(0,1fr);gap:30px}
}

/* A playful English masthead above the story title. */
.article-page .detail-label{font-family:'Bungee',sans-serif;font-size:clamp(20px,1.8vw,27px);font-weight:400;line-height:1.5;letter-spacing:.035em;color:#b56b36;gap:13px}
.article-page .detail-label img{width:38px;height:38px;object-fit:contain}
@media(max-width:767px){.article-page .detail-label{font-size:20px;gap:10px}.article-page .detail-label img{width:30px;height:30px}}

/* Compact numbered contents, linked by a fine vertical trail. */
.article-toc{padding:25px 20px;background:#faf7ef;border:1px solid #cbd2c5;border-radius:24px 5px 24px 5px;counter-reset:toc}
.article-toc>p{font-size:19px;margin:0 0 19px;font-weight:900}
.article-toc nav{position:relative}
.article-toc nav:before{content:"";position:absolute;left:13px;top:20px;bottom:22px;width:1px;background:#d6c9ae}
.article-toc a{position:relative;display:flex;align-items:center;gap:10px;border-bottom:0;padding:12px 0;font-size:13px;line-height:1.7}
.article-toc a:before{counter-increment:toc;content:counter(toc,decimal-leading-zero);flex:none;display:grid;place-items:center;width:27px;height:27px;background:#faf7ef;border:1px solid #cda276;border-radius:50%;font-size:10px;font-weight:800;color:#9b582a;z-index:1}
.article-toc a:hover:before{background:#d89b68;color:#fff}
.article-toc>img{display:none}
@media(min-width:1000px){.reading-layout{grid-template-columns:220px minmax(0,1fr);gap:30px;justify-content:normal}}
@media(min-width:768px) and (max-width:999px){.reading-layout{grid-template-columns:190px minmax(0,1fr);gap:24px}}
@media(max-width:767px){.article-toc{padding:20px;margin-bottom:22px}.article-toc>p{margin-bottom:10px}.article-toc a{padding:9px 0;font-size:13px}.article-body .opening{margin-top:0}.article-cover{margin-bottom:24px}}

/* Automatically generated h2 / h3 hierarchy. */
.article-toc nav:before{display:none}
.article-toc .toc-list,.article-toc .toc-sublist{list-style:none;margin:0;padding:0}
.article-toc .toc-list{counter-reset:toc}
.article-toc .toc-list>li{position:relative}
.article-toc .toc-list>li+li{margin-top:8px}
.article-toc .toc-list>li>a:before{counter-increment:toc;content:counter(toc,decimal-leading-zero)}
.article-toc .toc-sublist{margin:0 0 10px 13px;padding:0 0 0 23px;border-left:1px solid #d6c9ae}
.article-toc .toc-sublist a{font-size:12px;font-weight:600;color:#60715e;padding:6px 0;line-height:1.7;gap:0}
.article-toc .toc-sublist a:before{content:none;counter-increment:none}
.article-toc a:hover{color:#a65b29}
.article-body h2[id],.article-body h3[id]{scroll-margin-top:40px}
@media(max-width:767px){.article-body h2[id],.article-body h3[id]{scroll-margin-top:85px}.article-toc .toc-sublist a{font-size:12px}}

/* Keep decorative art in normal flow so any title length stays clear. */
.article-page .article-cover .detail-heading{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-bottom:42px;min-width:0}
.article-page .article-cover .detail-heading h1{width:100%;overflow-wrap:anywhere;flex:none}
.article-page .article-cover .heading-art{position:static;align-self:flex-end;flex:none;width:180px;max-width:55%;height:auto;margin:24px 0 0}
.article-page .article-cover .detail-heading:after{bottom:14px}
@media(max-width:767px){
 .article-page .article-cover .detail-heading{padding:28px 22px 34px;min-height:0}
 .article-page .article-cover .heading-art{width:130px;margin-top:18px;max-width:55%}
 .article-page .article-cover .detail-heading:after{bottom:10px}
}

/* Keep the complete hero image over its own softly blurred backdrop. */
.article-page .article-cover .hero-photo .zoom-photo{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:280px}
.article-page .hero-blur{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(24px);z-index:-1;pointer-events:none;opacity:.85}
.article-page .article-cover .hero-photo #hero-image{position:relative;max-width:100%;width:auto;height:auto;max-height:600px;margin:0 auto;border-radius:0}
@media(max-width:767px){.article-page .article-cover .hero-photo .zoom-photo{min-height:0}.article-page .article-cover .hero-photo #hero-image{max-height:70vh}}

/* Small citrus marker and a paper-like band for article subheadings. */
.article-body section > h3,.article-body .entry-content h3{
 position:relative;isolation:isolate;padding:15px 22px 15px 48px;margin:34px 0 20px;
 color:#303e32;background:linear-gradient(90deg,#faf1e5,#faf7ef 72%,#faf7ef55);
 border:0;border-bottom:1px solid #e5c6a4;border-radius:5px 24px 5px 5px;
 font-size:22px;font-weight:800;line-height:1.65;overflow-wrap:anywhere;
}
.article-body section > h3::before,.article-body .entry-content h3::before{
 content:"";position:absolute;left:20px;top:26px;width:15px;height:14px;
 background:#de9758;border-radius:45% 48% 43% 46%;box-shadow:inset 3px 1px 0 #edb581;
}
.article-body section > h3::after,.article-body .entry-content h3::after{
 content:"";position:absolute;left:29px;top:21px;width:9px;height:5px;
 background:#5e816a;border-radius:100% 0 100% 0;transform:rotate(-16deg);
}
@media(max-width:767px){
 .article-body section > h3,.article-body .entry-content h3{font-size:20px;padding:13px 16px 13px 41px;margin:28px 0 18px;border-radius:4px 20px 4px 4px}
 .article-body section > h3::before,.article-body .entry-content h3::before{left:15px;top:23px;width:14px;height:13px}
 .article-body section > h3::after,.article-body .entry-content h3::after{left:23px;top:18px}
}