/*
Theme Name: Yuna
Theme URI: https://example.com/yuna
Author: Yuna
Author URI: https://example.com
Description: Yuna — an editorial K-Beauty blog theme. "Korean Skincare, Decoded." A warm, refined magazine layout with an editorial hero, category tiles, an affiliate "Shop the Routine" carousel, and a richly styled single-post layout with sticky table of contents, callouts, comparison tables and before/after blocks. Fully responsive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yuna
Tags: blog, two-columns, custom-menu, featured-images, editor-style, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --cream-bg:#FAF5F0;
  --cream-2:#FCF8F4;
  --pink:#F3E3DD;
  --ink:#2A2522;
  --body-text:#3c3530;
  --rose:#C99A8E;
  --rose-dark:#a86f5c;
  --gold:#C2A878;
  --gold-dark:#9a824f;
  --muted:#6b605a;
  --muted-2:#a98d80;
  --muted-3:#8a7d75;
  --footer-bg:#2A2522;
  --footer-text:#e9ddd5;
  --footer-muted:#9d8c82;
  --footer-faint:#7e6f66;

  --rose-line:rgba(201,154,142,.18);
  --rose-border:rgba(201,154,142,.45);
  --rose-border-soft:rgba(201,154,142,.22);
  --gold-line:rgba(194,168,120,.4);
  --gold-border:rgba(194,168,120,.45);

  --font-script:'Pinyon Script',cursive;
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Montserrat','Segoe UI',sans-serif;

  --maxw:1240px;
  --maxw-narrow:1100px;
  --gutter:40px;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--cream-bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pink);}
img{max-width:100%;height:auto;display:block;}
a{color:var(--rose);}
button{font-family:inherit;}
hr{border:none;border-top:1px solid var(--rose-line);margin:40px 0;}

/* WP accessibility helpers */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;
  position:absolute!important;word-wrap:normal!important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:var(--ink);color:#fff;padding:12px 20px;text-decoration:none;
  font-size:13px;letter-spacing:.1em;
}
.skip-link:focus{left:10px;top:10px;}

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.wrap--narrow{max-width:var(--maxw-narrow);}
.eyebrow{
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;
}
.section-head{text-align:center;margin-bottom:36px;}
.section-head h2{
  margin:8px 0 0;font-family:var(--font-serif);font-weight:500;font-size:34px;color:var(--ink);
}
.btn{
  display:inline-block;background:var(--rose);color:#fff;text-decoration:none;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:15px 30px;border:none;cursor:pointer;transition:background .25s ease;
}
.btn:hover{background:#b8857a;}
.btn--dark{background:var(--ink);}
.btn--dark:hover{background:#473f39;}

/* ==========================================================================
   4. TOP BAR + HEADER
   ========================================================================== */
.topbar{border-bottom:1px solid var(--rose-line);background:var(--cream-bg);}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;padding-bottom:14px;gap:20px;
}
.main-nav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:30px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}
.main-nav a{position:relative;color:var(--muted);text-decoration:none;}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;
  background:var(--rose);transition:width .3s ease;
}
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after{width:100%;}

.social{display:flex;gap:16px;align-items:center;color:var(--muted-2);}
.social a{color:inherit;display:flex;transition:color .2s ease;}
.social a:hover{color:var(--rose);}

/* hamburger (mobile) */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;color:var(--muted);
  padding:6px;align-items:center;
}

/* brand / logo block */
.brand{text-align:center;padding:44px 20px 38px;}
.brand__logo{font-family:var(--font-script);font-size:72px;line-height:.9;color:var(--ink);text-decoration:none;display:inline-block;}
.brand__logo img{display:inline-block;margin:0 auto;}
.brand__tagline{
  margin-top:10px;font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted-2);font-weight:500;
}

/* compact header variant (single/inner pages) */
.topbar--inner .topbar__inner{padding-top:18px;padding-bottom:18px;}
.brand--inline{font-family:var(--font-script);font-size:32px;line-height:1;color:var(--ink);text-decoration:none;}

/* ==========================================================================
   5. PLACEHOLDER (design preview blocks; real images replace these)
   ========================================================================== */
.ph{
  position:relative;background-color:#efe3dd;
  background-image:repeating-linear-gradient(135deg,rgba(201,154,142,.10) 0 14px,rgba(201,154,142,0) 14px 28px);
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#b29a8e;background:rgba(255,255,255,.72);padding:5px 10px;
  border:1px solid rgba(178,154,142,.4);white-space:nowrap;text-align:center;
}
.ph[data-label=""]::after,.ph:not([data-label])::after{display:none;}
.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ==========================================================================
   6. HERO (front page)
   ========================================================================== */
.hero{position:relative;max-width:1320px;margin:0 auto;padding:0 var(--gutter) 20px;}
.hero__frame{position:relative;}
.hero__media{height:560px;border-radius:3px;}
.hero__card{
  position:absolute;left:64px;top:50%;transform:translateY(-50%);
  width:430px;max-width:calc(100% - 96px);background:var(--cream-bg);
  padding:48px 46px 44px;
}
.hero__script{font-family:var(--font-script);font-size:58px;line-height:.85;color:var(--rose);}
.hero__lead{margin:22px 0 0;font-family:var(--font-serif);font-size:23px;line-height:1.5;font-weight:500;color:var(--ink);}
.hero__text{margin:14px 0 0;font-size:15px;color:var(--muted);line-height:1.75;}
.hero__sign{font-family:var(--font-script);font-size:34px;color:var(--ink);margin:18px 0 26px;line-height:1;}
.hero__search{
  margin-top:24px;display:flex;align-items:center;
  border:1px solid var(--rose-border);background:#fff;
}
.hero__search input{
  flex:1;border:none;outline:none;background:transparent;padding:13px 16px;
  font-family:var(--font-sans);font-size:13px;color:var(--ink);
}
.hero__search button{
  border:none;background:transparent;padding:0 16px;cursor:pointer;
  color:var(--muted-2);display:flex;align-items:center;
}

/* ==========================================================================
   7. CATEGORY TILES
   ========================================================================== */
.section{max-width:var(--maxw);margin:0 auto;padding:72px var(--gutter) 0;}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.tile{position:relative;display:block;text-decoration:none;height:340px;overflow:hidden;}
.tile__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,37,34,0) 38%,rgba(42,37,34,.62) 100%);}
.tile__label{
  position:absolute;left:0;right:0;bottom:0;padding:24px;text-align:center;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;
}

/* ==========================================================================
   8. TRUST STRIP
   ========================================================================== */
.trust{margin-top:72px;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);background:var(--cream-2);}
.trust__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-top:26px;padding-bottom:26px;
}
.trust__item{display:flex;align-items:center;gap:11px;color:var(--gold-dark);}
.trust__item span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink);}

/* ==========================================================================
   9. SHOP THE ROUTINE
   ========================================================================== */
.shop{max-width:var(--maxw);margin:0 auto;padding:78px var(--gutter) 0;}
.shop__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px;gap:20px;}
.shop__head h2{margin:8px 0 0;font-family:var(--font-serif);font-weight:500;font-size:34px;color:var(--ink);}
.shop__nav{display:flex;gap:12px;}
.shop__btn{
  width:46px;height:46px;border:1px solid rgba(201,154,142,.5);background:#fff;cursor:pointer;
  color:#8a7468;display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .2s ease,color .2s ease;
}
.shop__btn:hover{background:var(--rose);color:#fff;}
.shop__row{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;}
.shop__row::-webkit-scrollbar{height:0;}
.product{flex:0 0 264px;text-decoration:none;color:inherit;background:#fff;}
.product__media{height:300px;}
.product__body{padding:20px 20px 22px;}
.product__tag{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);font-weight:600;}
.product__name{margin:8px 0 0;font-family:var(--font-serif);font-size:21px;font-weight:500;line-height:1.25;}
.product__price{margin-top:12px;font-size:13px;color:var(--muted);}
.disclosure{margin:22px 0 0;font-size:11.5px;line-height:1.7;color:#9c8a80;max-width:760px;}

/* ==========================================================================
   10. POPULAR / FEATURED POST
   ========================================================================== */
.feature{max-width:var(--maxw);margin:0 auto;padding:88px var(--gutter) 0;}
.feature__grid{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;}
.feature__media{min-height:480px;}
.feature__panel{background:var(--pink);padding:60px 56px;display:flex;flex-direction:column;justify-content:center;}
.feature__script{font-family:var(--font-script);font-size:46px;color:var(--rose);line-height:.9;}
.feature__title{margin:20px 0 0;font-family:var(--font-serif);font-weight:500;font-size:32px;line-height:1.25;color:var(--ink);}
.feature__title a{color:inherit;text-decoration:none;}
.feature__excerpt{margin:18px 0 0;font-size:15px;color:#5f544e;line-height:1.8;}
.feature__panel .btn{margin-top:30px;align-self:flex-start;}

/* ==========================================================================
   11. MONOGRAM BADGE
   ========================================================================== */
.monogram{text-align:center;padding:88px var(--gutter) 78px;}
.monogram__badge{
  display:inline-flex;align-items:center;justify-content:center;width:150px;height:150px;
  border-radius:50%;border:1px solid var(--gold);position:relative;
}
.monogram__badge::before{content:'';position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(194,168,120,.4);}
.monogram__letter{font-family:var(--font-script);font-size:56px;color:var(--ink);line-height:1;}
.monogram__caption{margin-top:18px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-2);font-weight:600;}

/* ==========================================================================
   12. EMAIL CAPTURE
   ========================================================================== */
.signup{background:var(--pink);}
.signup__inner{max-width:880px;margin:0 auto;padding:66px var(--gutter);text-align:center;}
.signup__script{font-family:var(--font-script);font-size:44px;color:var(--rose);line-height:.9;}
.signup__title{margin:14px 0 0;font-family:var(--font-serif);font-weight:500;font-size:30px;color:var(--ink);}
.signup__text{margin:12px auto 0;max-width:540px;font-size:14.5px;color:var(--muted);}
.signup__form{margin:30px auto 0;max-width:560px;display:flex;gap:12px;flex-wrap:wrap;}
.signup__form input{
  border:1px solid var(--rose-border);background:#fff;outline:none;padding:15px 18px;
  font-family:var(--font-sans);font-size:14px;color:var(--ink);
}
.signup__form input[name="fname"]{flex:1;min-width:140px;}
.signup__form input[name="email"]{flex:1.4;min-width:180px;}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{margin-top:88px;background:var(--footer-bg);color:var(--footer-text);}
.site-footer__inner{padding:64px var(--gutter) 40px;}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer-brand__logo{font-family:var(--font-script);font-size:46px;color:#fff;line-height:.9;text-decoration:none;display:inline-block;}
.footer-brand__tag{margin-top:10px;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:#b5a298;}
.footer-col__title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:13px;}
.footer-col a{color:#d8cabf;text-decoration:none;transition:color .2s ease;}
.footer-col a:hover{color:#fff;}
.footer-legal{margin:44px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;line-height:1.75;color:var(--footer-muted);max-width:820px;}
.footer-copy{margin-top:18px;font-size:11.5px;color:var(--footer-faint);}
.site-footer--center .site-footer__inner{text-align:center;}
.site-footer--center .footer-legal{margin-left:auto;margin-right:auto;max-width:760px;}

/* ==========================================================================
   14. SINGLE POST
   ========================================================================== */
.article-header{max-width:760px;margin:0 auto;padding:60px var(--gutter) 0;text-align:center;}
.article-header__cat{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);font-weight:600;}
.article-header__cat a{color:inherit;text-decoration:none;}
.article-title{margin:18px 0 0;font-family:var(--font-serif);font-weight:500;font-size:50px;line-height:1.12;color:var(--ink);text-wrap:balance;}
.article-dek{margin:20px auto 0;max-width:560px;font-family:var(--font-serif);font-style:italic;font-size:21px;color:var(--muted);line-height:1.5;}
.article-meta{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;letter-spacing:.06em;color:var(--muted-3);flex-wrap:wrap;}
.article-meta .sep{color:#cbbab0;}

.disclosure-box{
  display:flex;gap:13px;align-items:flex-start;background:var(--cream-2);
  border:1px solid var(--gold-border);padding:16px 20px;
}
.disclosure-box svg{flex:none;margin-top:1px;}
.disclosure-box__text{font-size:12.5px;line-height:1.6;color:var(--muted);}
.disclosure-box__text strong{color:var(--ink);font-weight:600;}

.article-hero{margin:36px auto 0;}
.article-hero .ph{height:520px;border-radius:3px;}

.article-layout{
  max-width:var(--maxw-narrow);margin:0 auto;padding:56px var(--gutter) 0;
  display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start;
}
.toc{position:sticky;top:32px;}
.toc__title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:14px;}
.toc nav a{
  display:block;font-size:13px;color:var(--muted-3);text-decoration:none;
  padding:7px 0 7px 16px;border-left:2px solid rgba(201,154,142,.3);
  transition:color .2s,border-color .2s;
}
.toc nav a:hover,.toc nav a.is-active{color:var(--rose);border-color:var(--rose);}

.article-body{max-width:720px;}

/* post content typography (applies to the_content + editor) */
.entry-content p{font-size:17.5px;line-height:1.78;color:var(--body-text);margin:0 0 22px;}
.entry-content h2{font-family:var(--font-serif);font-weight:500;font-size:32px;line-height:1.2;margin:34px 0 22px;color:var(--ink);scroll-margin-top:24px;}
.entry-content h3{font-family:var(--font-serif);font-weight:600;font-size:24px;line-height:1.25;margin:30px 0 16px;color:var(--ink);scroll-margin-top:24px;}
.entry-content a{color:var(--rose-dark);text-decoration:underline;text-underline-offset:2px;}
.entry-content ul,.entry-content ol{font-size:17px;line-height:1.78;color:var(--body-text);margin:0 0 22px;padding-left:1.3em;}
.entry-content li{margin:0 0 8px;}
.entry-content img{margin:8px 0 28px;}
.entry-content figure{margin:8px 0 28px;}
.entry-content figcaption{font-size:12px;color:#9c8a80;text-align:center;margin-top:8px;}

/* drop cap on first paragraph */
.entry-content > p:first-of-type::first-letter{
  font-family:var(--font-serif);font-size:58px;float:left;line-height:.74;
  margin:6px 12px 0 0;color:var(--rose);font-weight:500;
}

/* blockquote / pull quote */
.entry-content blockquote{
  margin:36px 0;padding:0 0 0 28px;border-left:2px solid var(--gold);
}
.entry-content blockquote p{
  font-family:var(--font-serif);font-style:italic;font-size:28px;line-height:1.4;color:var(--ink);margin:0;
}

/* callout blocks — apply via a custom class in the editor (is-style or group class) */
.callout{padding:20px 24px;margin:8px 0 28px;}
.callout__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:6px;}
.callout__text{font-size:15.5px;line-height:1.7;color:var(--body-text);}
.callout--tip{background:var(--pink);border-left:3px solid var(--rose);}
.callout--tip .callout__label{color:var(--rose-dark);}
.callout--caution{
  background:#fff;border:1px solid rgba(194,168,120,.5);
  display:flex;gap:14px;align-items:flex-start;
}
.callout--caution .callout__label{color:var(--gold-dark);}
.callout--caution svg{flex:none;margin-top:2px;}

/* step cards */
.steps{display:flex;flex-direction:column;gap:14px;margin:6px 0 30px;}
.step{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--rose-border-soft);padding:22px 24px;}
.step__n{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--cream-bg);
  border:1px solid var(--rose);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--rose);
}
.step__title{font-size:16px;font-weight:600;color:var(--ink);}
.step__body{margin-top:5px;font-size:14.5px;line-height:1.65;color:var(--muted);}

/* comparison table — styles plain tables inside content too */
.entry-content table,.compare{
  width:100%;border-collapse:collapse;border:1px solid rgba(201,154,142,.3);
  margin:6px 0 32px;background:#fff;font-size:14px;
}
.entry-content th,.entry-content td,.compare th,.compare td{
  padding:15px 20px;text-align:left;border-bottom:1px solid rgba(201,154,142,.16);
  border-left:1px solid rgba(201,154,142,.14);
}
.entry-content th:first-child,.entry-content td:first-child,
.compare th:first-child,.compare td:first-child{border-left:none;font-weight:500;color:var(--ink);}
.entry-content thead th,.compare thead th{
  background:var(--cream-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--gold-dark);border-bottom:1px solid rgba(201,154,142,.3);
}
.table-note{font-size:12px;color:#9c8a80;margin:-22px 0 30px;}

/* before / after */
.beforeafter{margin:6px 0 14px;}
.beforeafter__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.beforeafter .ph{height:300px;}
.beforeafter__cap{margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:600;text-align:center;}
.beforeafter__note{font-size:12px;color:#9c8a80;line-height:1.6;margin:14px 0 0;text-align:center;}

/* author bio */
.author-bio{max-width:var(--maxw-narrow);margin:64px auto 0;padding:0 var(--gutter);}
.author-bio__card{
  max-width:720px;margin-left:auto;display:flex;gap:24px;align-items:center;
  background:var(--pink);padding:32px 36px;
}
.author-bio__avatar{flex:none;width:96px;height:96px;border-radius:50%;overflow:hidden;}
.author-bio__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.author-bio__name{font-family:var(--font-script);font-size:34px;line-height:1;color:var(--ink);}
.author-bio__role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-dark);font-weight:600;margin:6px 0 8px;}
.author-bio__text{font-size:14px;line-height:1.7;color:#5f544e;}

/* related posts */
.related{max-width:var(--maxw-narrow);margin:72px auto 0;padding:0 var(--gutter);}
.related__head{text-align:center;margin-bottom:30px;}
.related__script{font-family:var(--font-script);font-size:42px;color:var(--rose);line-height:.9;}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post-card{text-decoration:none;color:inherit;background:#fff;box-shadow:0 14px 40px -30px rgba(42,37,34,.5);}
.post-card__media{height:200px;position:relative;overflow:hidden;}
.post-card__body{padding:22px;}
.post-card__cat{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);font-weight:600;}
.post-card__title{margin:9px 0 0;font-family:var(--font-serif);font-size:21px;font-weight:500;line-height:1.28;}

/* ==========================================================================
   15. BLOG / ARCHIVE INDEX
   ========================================================================== */
.archive-header{text-align:center;padding:48px var(--gutter) 0;}
.archive-header h1{margin:8px 0 0;font-family:var(--font-serif);font-weight:500;font-size:40px;color:var(--ink);}
.post-grid{
  max-width:var(--maxw);margin:0 auto;padding:48px var(--gutter) 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.post-grid .post-card__media{height:240px;}
.post-grid .post-card__meta{margin-top:12px;font-size:11.5px;color:var(--muted-3);}

.pagination{max-width:var(--maxw);margin:0 auto;padding:56px var(--gutter) 0;text-align:center;}
.pagination .page-numbers{
  display:inline-block;min-width:42px;padding:10px 14px;margin:0 4px;
  border:1px solid var(--rose-border);color:var(--muted);text-decoration:none;font-size:13px;
}
.pagination .page-numbers.current{background:var(--rose);color:#fff;border-color:var(--rose);}
.pagination .page-numbers:hover{background:var(--cream-2);}
.pagination .page-numbers.current:hover{background:var(--rose);}

/* ==========================================================================
   16. PAGE / GENERIC CONTENT
   ========================================================================== */
.page-shell{max-width:760px;margin:0 auto;padding:60px var(--gutter) 0;}
.page-shell .article-title{text-align:center;}
.page-content{margin-top:36px;}

/* ==========================================================================
   17. COMMENTS
   ========================================================================== */
.comments-area{max-width:760px;margin:64px auto 0;padding:0 var(--gutter);}
.comments-title,.comment-reply-title{font-family:var(--font-serif);font-weight:500;font-size:28px;color:var(--ink);margin:0 0 24px;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list li{margin:0 0 24px;}
.comment-body{background:#fff;border:1px solid var(--rose-border-soft);padding:22px 24px;}
.comment-author{font-weight:600;color:var(--ink);font-size:14px;}
.comment-meta{font-size:11.5px;color:var(--muted-3);margin:4px 0 10px;}
.comment-list .children{list-style:none;margin:18px 0 0 28px;padding:0;}
.comment-respond{margin-top:32px;}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;border:1px solid var(--rose-border);background:#fff;outline:none;
  padding:13px 16px;font-family:var(--font-sans);font-size:14px;color:var(--ink);margin-bottom:14px;
}

/* ==========================================================================
   18. WORDPRESS CORE / BLOCK STANDARD CLASSES
   ========================================================================== */
.alignleft{float:left;margin:6px 28px 18px 0;}
.alignright{float:right;margin:6px 0 18px 28px;}
.aligncenter{margin-left:auto;margin-right:auto;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:12px;color:#9c8a80;text-align:center;margin-top:8px;}
.sticky,.bypostauthor{display:block;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 28px;}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr);}
  .feature__grid{grid-template-columns:1fr;}
  .feature__media{min-height:320px;}
  .related__grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:880px){
  :root{--gutter:24px;}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:50;
    background:var(--cream-bg);border-bottom:1px solid var(--rose-line);
    box-shadow:0 18px 40px -28px rgba(42,37,34,.5);
  }
  .topbar{position:relative;}
  .main-nav.is-open{display:block;}
  .main-nav ul{flex-direction:column;gap:0;padding:8px 24px 16px;}
  .main-nav li{padding:12px 0;border-bottom:1px solid var(--rose-line);}
  .main-nav a::after{display:none;}
  .nav-toggle{display:inline-flex;}

  .brand__logo{font-size:52px;}

  .hero{padding:0 var(--gutter) 0;}
  .hero__frame{display:flex;flex-direction:column;}
  .hero__media{height:300px;}
  .hero__card{
    position:static;transform:none;width:auto;max-width:none;
    margin:-44px 18px 0;padding:30px 26px 28px;
    box-shadow:0 18px 40px -26px rgba(42,37,34,.4);
  }
  .hero__script{font-size:44px;}
  .hero__lead{font-size:18px;}

  .article-layout{grid-template-columns:1fr;gap:0;}
  .toc{display:none;}
  .article-body{max-width:none;}
  .article-title{font-size:34px;}
  .author-bio__card{margin-left:0;}

  .article-hero .ph{height:300px;}
}

@media (max-width:600px){
  .tiles{grid-template-columns:1fr;}
  .related__grid,.post-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr;gap:32px;}
  .feature__panel{padding:40px 28px;}
  .entry-content > p:first-of-type::first-letter{font-size:46px;}
  .beforeafter .ph{height:200px;}
  .signup__form{flex-direction:column;}
  .signup__form input{flex:none;width:100%;}
}