//wide embed from post content scrolls within its
own box instead of forcing the article column (and the page) wider. */
.article-body table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.article-body pre{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.article-body iframe,.article-body embed,.article-body video{max-width:100%;}
.article-body p{font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 22px;}
.article-body > p:first-of-type::first-letter{font-family:'Fraunces',serif;font-size:58px;font-weight:600;float:left;line-height:.85;padding:6px 8px 0 0;color:var(--brand-ink);}
.article-body h2{font-size:25px;margin:40px 0 16px;scroll-margin-top:100px;}
.article-body h3{font-size:19px;margin:28px 0 12px;scroll-margin-top:100px;}
.article-body ul,.article-body ol{font-size:16px;color:var(--ink);line-height:1.7;padding-left:22px;margin:0 0 22px;}
.article-body li{margin-bottom:8px;}
.article-body img{border-radius:4px;margin:32px 0;}
.article-body blockquote{border-left:3px solid var(--brand);padding:6px 0 6px 22px;margin:32px 0;font-family:'Fraunces',serif;font-size:22px;font-weight:500;color:var(--ink);line-height:1.4;}
.reviewer-box{margin-top:44px;padding:22px;background:var(--surface-2);border-radius:14px;display:flex;gap:16px;align-items:flex-start;}
.reviewer-box .byline-avatar{width:52px;height:52px;}
.reviewer-box .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--moss-ink);margin-bottom:6px;}
.reviewer-box .name{font-size:15px;font-weight:700;margin-bottom:4px;}
.reviewer-box p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.6;}
aside.rail{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px;min-width:0;}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.widget-head{padding:14px 18px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);}
/*
* The TOC is a element (collapsed by default, no "open"
* attribute) rather than a JS-toggled panel — native disclosure behavior,
* keyboard/screen-reader accessible for free, and it still works if JS
* fails to load. Its reuses .widget-head's look but needs the
* default marker suppressed and a custom chevron added in its place.
*/
.widget-toc summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.widget-toc summary::-webkit-details-marker{display:none;}
.widget-toc summary::marker{content:'';}
.widget-toc summary:hover{color:var(--ink);}
.widget-toc-chevron{width:14px;height:14px;flex:none;transition:transform .2s ease;}
.widget-toc[open] .widget-toc-chevron{transform:rotate(180deg);}
.widget-toc:not([open]) .widget-head{border-bottom:none;}
/*
* display:flex must stay scoped to [open] — an unscoped display value on
* an author stylesheet overrides the browser's native
* "details:not([open]) > :not(summary) { display: none; }" UA rule
* regardless of selector specificity (author origin always wins over
* user-agent origin), which would silently force the list visible even
* while the itself is closed.
*/
.widget-toc[open] ul{list-style:none;margin:0;padding:14px 18px;display:flex;flex-direction:column;gap:2px;}
.widget-toc a{display:block;font-size:13.5px;color:var(--ink-soft);padding:7px 10px;border-radius:8px;line-height:1.4;}
.widget-toc a:hover{background:var(--tint-brand);color:var(--brand-ink);}
.widget-toc li.sub a{padding-left:22px;font-size:13px;color:var(--ink-faint);}
.ad-widget{background:var(--ad-bg);border:1px dashed var(--line-strong);border-radius:14px;min-height:280px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;text-align:center;padding:16px;}
.widget-popular ul{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;}
.widget-popular li{display:flex;gap:12px;padding:10px;border-radius:10px;}
.widget-popular li:hover{background:var(--surface-2);}
.widget-popular .thumb{width:56px;height:56px;border-radius:8px;background:var(--tint-ocean);background-size:cover;background-position:center;flex:none;}
.widget-popular h5{font-family:'Inter';font-size:13px;font-weight:700;line-height:1.35;margin:0 0 4px;}
.widget-popular span{font-size:11.5px;color:var(--ink-faint);}
.related{padding:8px 0 56px;border-top:1px solid var(--line);}
.related h2{font-size:22px;margin:36px 0 22px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.related-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.related-card .art{aspect-ratio:16/10;background:var(--tint-moss);background-size:cover;background-position:center;}
.related-card .body{padding:16px;}
.related-card h4{font-family:'Inter';font-size:14.5px;font-weight:700;line-height:1.35;margin-bottom:6px;}
.related-card span{font-size:12px;color:var(--ink-faint);}
/* ---------- generic page content (About, Privacy, etc.) ---------- */
.page-content{max-width:760px;padding:24px 0 64px;}
.page-content h1{font-size:32px;margin-bottom:24px;}
.page-content p{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0 0 20px;}
.page-content h2{font-size:22px;margin:32px 0 14px;}
.page-content ul{color:var(--ink-soft);line-height:1.7;}
.page-content a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px;}
.page-content a:hover{color:var(--brand);}
.page-content li{margin-bottom:6px;}
/* Contact Us: content column plus a mailing-address card (stacks on mobile). */
.page-content:has(.contact-layout){max-width:1120px;}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;}
.contact-main{max-width:760px;}
.contact-main > :first-child{margin-top:0;}
.contact-card{position:sticky;top:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;}
.page-content .contact-card h3{font-size:19px;margin:0 0 14px;}
.contact-card address{font-style:normal;font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin:0 0 14px;}
.page-content .contact-card-line{font-size:14.5px;line-height:1.6;margin:0;}
.page-content .contact-card-email{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
@media(max-width:980px){
.contact-layout{grid-template-columns:minmax(0,1fr);gap:8px;}
.contact-card{position:static;}
}
/* ---------- footer — same surface tokens as the header, so it reads as one continuous shell in both themes ---------- */
.site-footer{background:var(--surface);color:var(--ink);border-top:1px solid var(--line);padding:56px 0 28px;margin-top:0;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.footer-brand{max-width:380px;}
.footer-brand p{font-size:13.5px;color:var(--ink-faint);margin-top:14px;line-height:1.6;}
.footer-nav-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:14px;font-weight:700;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;color:var(--ink-soft);}
.footer-col a:hover{color:var(--brand-ink);}
.footer-bottom-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:12.5px;color:var(--ink-faint);}
.footer-bottom-row .legal-links{display:flex;gap:18px;list-style:none;margin:0;padding:0;}
.footer-bottom-row a:hover{color:var(--brand-ink);}
@media(max-width:980px){
.hero-split{grid-template-columns:1fr;min-height:auto;}
/*
* On desktop .hero-image gets its height "for free": as a grid item
* sitting next to .hero-list in a single row, align-items' default
* stretch makes it match .hero-list's content height. Once the grid
* collapses to one column, the two stack as separate rows instead — that
* stretch relationship is gone, so .hero-image (which has no intrinsic
* height of its own, only padding) collapsed to a thin sliver. Giving it
* an explicit aspect-ratio here fixes that independently of row stretch.
*/
.hero-image{aspect-ratio:16/9;padding:20px;}
.hero-list{border-left:none;border-top:1px solid var(--line);}
.masonry-row{grid-template-columns:1fr;}
.archive-grid{grid-template-columns:repeat(2,1fr);}
.arch-card.lead{grid-column:span 2;}
/*
* On mobile the TOC should sit right under the featured image, ahead of
* the article body — not trail behind the ad and popular-posts widgets
* at the very bottom of the sidebar, which is where it landed once
* .article-layout collapsed to a single column and simply stacked its
* two grid items (.article-body, then aside.rail) in DOM order.
*
* display:contents on aside.rail dissolves its own box so its children
* become direct items of the .article-layout grid instead of being
* trapped inside one single "aside.rail" item — each can then be given
* its own `order` and interleaved with .article-body. Desktop is
* untouched: aside.rail stays a real sticky flex column there.
*/
.article-layout{grid-template-columns:1fr;gap:24px;}
aside.rail{display:contents;}
.widget-toc{order:1;}
.article-body{order:2;}
.ad-widget,.widget-popular{order:3;}
.related-grid{grid-template-columns:1fr;}
.featured-media{aspect-ratio:1/1;border-radius:0;}
.art-header h1{font-size:30px;}
}
/*
* The persistent inline search bar stays visible down through tablet
* widths (just narrowing a bit at 760px) — it only switches to the
* icon + popover pattern on genuinely narrow/phone-class viewports below
* 560px. It previously swapped at 980px, which is ordinary browser-window
* width, not just phones, so a second "duplicate" search bar (the popover)
* appeared to open on top of what looked like a normal desktop view.
*/
@media(max-width:760px){
.search-inline{width:160px;}
}
@media(max-width:640px){
.archive-grid{grid-template-columns:1fr;}
.arch-card.lead{grid-column:span 1;}
/*
* Mobile keeps the icon beside the title (.cat-banner-head is a row at
* every width) and stacks .cat-stats below the head+description block
* instead of beside it. .cat-stats previously kept its desktop styling
* here too — a big two-line "11,116 / ARTICLES" block in heading-scale
* serif type — which on its own line read as a second, oversized title
* rather than metadata. Restyled compact and inline (number and label
* on one row, small type) so it reads as a stat, not a heading.
*/
.cat-banner{padding:18px 0 26px;margin-bottom:26px;}
.cat-banner.has-image{padding:26px 20px 24px;margin-bottom:26px;}
.cat-banner-icon{width:44px;height:44px;}
.cat-banner-icon svg{width:22px;height:22px;}
/*
* .cat-banner-inner's 24px gap exists to separate two side-by-side
* desktop columns (title block, stats block). Stacked as rows on
* mobile that same 24px reads as a big empty gap instead — especially
* since most categories here have no description sitting between the
* title and the stat to justify it. Collapsed to 4px; .cat-banner-head's
* own margin-bottom (10px) already provides the real separation.
*/
.cat-banner-inner{flex-direction:column;gap:4px;}
.cat-stats{width:100%;}
.cat-stats .stat{display:flex;align-items:baseline;gap:6px;text-align:left;}
.cat-stats .stat b{font-size:15px;}
.cat-stats .stat span{font-size:11px;}
.footer-top{flex-direction:column;}
}
@media(max-width:560px){
.search-inline{display:none;}
.search-toggle{display:inline-flex;}
}
/*
* On narrow phones the logo wordmark ("DecorsDeck", one unbreakable
* word) plus three 38px icon buttons don't both fit at full size within
* the header row — the row has no ability to shrink either (icon buttons
* are fixed-width, the logo can't line-wrap mid-word), so without this the
* header-actions cluster was pushed ~25-30px past the viewport edge,
* dragging the whole page into horizontal scroll. Shrinking the wrap's
* side padding, the icon buttons, and the logo reclaims exactly that much.
*/
@media(max-width:400px){
.header-row1 .wrap{padding:14px 16px;gap:10px;}
.logo{font-size:20px;gap:8px;}
.logo a{gap:8px;}
.logo .mark{width:30px;height:30px;}
.logo .mark svg{width:15px;height:15px;}
.logo-img{height:40px;}
.logo-img--footer{height:48px;}
.header-actions{gap:6px;}
.icon-btn{width:34px;height:34px;}
.icon-btn svg{width:15px;height:15px;}
}
.advert {
position: relative;
margin: 0;
text-align: center !important;
}
.advert:before {
content: "Advertisement";
display: block;
left: 0;
height: 20px;
font-size: 11px;
line-height: 20px;
letter-spacing: 1px;
color: #6f7174;
top: -20px;
}
.advert:before {
text-align: center !important
}
div.advertinside:before {
content: 'Advertisement - Continue Reading Below';
display: block;
top: -20px;
left: 0;
height: 20px;
font-size: 11px;
line-height: 20px;
letter-spacing: 1px;
color: #6f7174;
text-align: center;
}
div.advertinside:after {
content: 'Advertisement - Continue Reading Below';
display: block;
top: -20px;
left: 0;
height: 20px;
font-size:11px;
line-height: 20px;
letter-spacing: 1px;
color: #6f7174;
text-align: center;
}
.mn-h-400 {
min-height: 400px
}
div.advertinside {
text-align: center;
background: #f5f5f5;
}
@media (min-width: 1024px) {
.advertmobile {
display: none;
}
}
@media screen and (max-width:720px) {
.advert {
position: relative;
margin: 0;
text-align: center !important;
}
.advert:before {
text-align: center !important
}
}
/* ==========================================================================
Inline Related Reading (function_files/functions-inline-related.php), after the 3rd paragraph.
--ir-tint / --ir-accent come from the category tone (decorsdeck_get_term_colors), light and dark.
========================================================================== */
.article-body .inline-related{clear:both;margin:32px 0;padding:20px 22px 22px;background:var(--ir-tint,var(--tint-moss));border-radius:14px;}
.article-body .inline-related-title{margin:0 0 14px;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.07em;line-height:1.4;text-transform:uppercase;color:var(--ir-accent,var(--moss-ink));}
.article-body .inline-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.article-body .inline-related-item{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);transition:transform .2s ease,border-color .2s ease;}
.article-body .inline-related-item:hover{transform:translateY(-3px);border-color:var(--ir-accent,var(--brand));}
.article-body .inline-related-image{aspect-ratio:16/10;overflow:hidden;background:var(--ir-tint,var(--tint-moss));}
.article-body .inline-related-image img{display:block;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;}
.article-body .inline-related-body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;}
.article-body .inline-related-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-size:14.5px;font-weight:700;line-height:1.35;}
.article-body .inline-related-item:hover .inline-related-name{color:var(--ir-accent,var(--brand-ink));}
.article-body .inline-related-meta{font-size:12px;color:var(--ink-faint);}
@media(max-width:640px){
.article-body .inline-related{padding:16px;}
.article-body .inline-related-grid{grid-template-columns:1fr;gap:10px;}
.article-body .inline-related-item{flex-direction:row;align-items:center;}
.article-body .inline-related-image{flex:0 0 96px;aspect-ratio:4/3;}
.article-body .inline-related-body{padding:10px 14px;gap:4px;}
}
@media (prefers-reduced-motion:reduce){.article-body .inline-related-item{transition:none;}.article-body .inline-related-item:hover{transform:none;}}
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}