:root {
  --canvas: #f9f7f5;
  --paper: #ffffff;
  --paper-warm: #f7f4ef;
  --ink: #1f2328;
  --ink-soft: #555555;
  --line: #d8d3ca;
  --berry: #7a1e3a;
  --berry-dark: #561426;
  --blush: #e6c0cb;
  --sage: #819b9a;
  --sage-dark: #1b4048;
  --sage-soft: #b7d9cb;
  --gold: #c69443;
  --white: #ffffff;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", Arial, sans-serif;
  --shadow-sm: 0 10px 28px rgba(60, 44, 30, .08);
  --shadow-lg: 0 24px 70px rgba(60, 44, 30, .14);
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 34px;
  --content: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(122,30,58,.07), transparent 25rem),
    var(--canvas);
  font: 16px/1.65 var(--font-body);
}
a { color: inherit; }
button, input { font: inherit; }
img, svg { display: block; max-width: 100%; }
.skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 99; top: 12px; left: 12px; width: auto; height: auto; padding: 10px 14px; margin: 0; clip: auto; background: var(--paper); color: var(--ink); border: 2px solid var(--berry); border-radius: 6px; }

.container { width: min(var(--content), calc(100% - 40px)); margin-inline: auto; }
.eyebrow { color: var(--berry); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.08; }
h1 { font-size: clamp(44px, 7vw, 84px); letter-spacing: -.045em; }
h2 { font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -.025em; }
h3 { font-size: 25px; }
p { margin: 0; color: var(--ink-soft); }

.announcement { background: var(--sage-dark); color: var(--white); font-size: 13px; letter-spacing: .04em; text-align: center; padding: 9px 20px; }
.announcement strong { color: #fff4d7; }
.site-header { background: rgba(255,253,248,.94); border-bottom: 1px solid var(--line); }
.nav { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--berry); border-radius: 50%; color: var(--berry); }
.brand-name { font: 500 25px/1 var(--font-display); letter-spacing: -.02em; }
.brand-name span { display: block; margin-top: 5px; font: 700 9px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 700; text-decoration: none; }
.nav-links a:hover { color: var(--berry); }
.mobile-menu { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer; }
.mobile-menu span { display: block; height: 2px; margin: 4px 0; background: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 21px; gap: 10px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; text-decoration: none; transition: .2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--berry); color: var(--white); box-shadow: 0 8px 20px rgba(122,30,58,.2); }
.btn-primary:hover { background: var(--berry-dark); }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--white); }
.btn-text { min-height: auto; padding: 0; border-radius: 0; color: var(--berry); border-bottom: 1px solid currentColor; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(122,30,58,.3); outline-offset: 3px; }

.hero-demo { margin: 42px auto 70px; display: grid; grid-template-columns: .92fr 1.08fr; min-height: 540px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(40px, 6vw, 78px); }
.hero-copy h1 { margin: 12px 0 22px; }
.hero-demo .hero-copy h1 { font-size: clamp(44px, 5vw, 68px); }
.hero-copy p { max-width: 520px; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-art { position: relative; min-height: 460px; overflow: hidden; background: linear-gradient(145deg, #dfe8df, #b9c8bb); }
.hero-art::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(45deg, transparent 46%, #fff 47%, #fff 51%, transparent 52%), linear-gradient(-45deg, transparent 46%, #fff 47%, #fff 51%, transparent 52%); background-size: 38px 38px; }
.hero-art.photo::before { display: none; }
.bag-illustration { position: absolute; width: min(65%, 370px); aspect-ratio: .85; left: 50%; top: 49%; transform: translate(-50%, -50%); background: var(--berry); border-radius: 18px 18px 65px 65px; box-shadow: 0 35px 50px rgba(50,50,30,.2); }
.bag-illustration::before { content: ""; position: absolute; width: 52%; height: 30%; left: 24%; top: -19%; border: 22px solid var(--berry-dark); border-bottom: 0; border-radius: 80px 80px 0 0; }
.bag-illustration::after { content: ""; position: absolute; inset: 15px; border-radius: inherit; opacity: .5; background-image: radial-gradient(circle, transparent 3px, var(--blush) 3.5px, var(--blush) 5px, transparent 5.5px); background-size: 22px 22px; }
.art-label { position: absolute; right: 24px; bottom: 24px; max-width: 190px; padding: 13px 16px; background: rgba(255,253,248,.92); border-radius: 12px; font-size: 12px; font-weight: 700; line-height: 1.35; box-shadow: var(--shadow-sm); }

.sg-header { padding: 72px 0 44px; border-bottom: 1px solid var(--line); }
.sg-header p { max-width: 680px; margin-top: 18px; font-size: 18px; }
.sg-nav { position: sticky; top: 0; z-index: 5; background: rgba(247,242,232,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.sg-nav .container { display: flex; gap: 8px; padding: 10px 0; overflow-x: auto; }
.sg-nav a { white-space: nowrap; padding: 7px 13px; border-radius: 999px; color: var(--ink-soft); font-size: 12px; font-weight: 800; text-decoration: none; }
.sg-nav a:hover { background: var(--paper-warm); color: var(--ink); }
.sg-section { padding: 70px 0; border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; margin-bottom: 32px; }
.section-head p { max-width: 620px; margin-top: 10px; }
.section-code { color: var(--berry); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.panel { padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

.swatch { min-height: 160px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--radius-md); border: 1px solid rgba(36,33,29,.12); }
.swatch b { font-family: var(--font-display); font-size: 18px; }
.swatch span { font-size: 12px; }
.canvas { background: var(--canvas); } .paper { background: var(--paper); } .ink { background: var(--ink); color: white; } .berry { background: var(--berry); color: white; } .sage { background: var(--sage); color: white; }
.type-display { font: 500 clamp(40px, 6vw, 72px)/1.05 var(--font-display); letter-spacing: -.04em; }
.type-body { max-width: 720px; margin-top: 20px; font-size: 18px; }
.type-label { margin-top: 28px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.button-row, .chip-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.chip.active { background: var(--sage-dark); border-color: var(--sage-dark); color: white; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--berry); }

.project-card { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.project-image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; outline: 4px solid transparent; outline-offset: -4px; transition: outline-color .22s ease; }
.project-image::before { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 25%), linear-gradient(145deg, #d2dfd4, #829487); }
.project-image:hover, .project-image:focus-visible { outline-color: #2f7d4e; }
.project-image.berry-img::before { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 25%), linear-gradient(145deg, var(--blush), var(--berry)); }
.project-image.gold-img::before { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 25%), linear-gradient(145deg, #f0dfb4, #c69443); }
.mini-bag { position: absolute; z-index: 1; width: 42%; aspect-ratio: .9; left: 50%; top: 53%; transform: translate(-50%, -50%); border-radius: 8px 8px 35px 35px; background: rgba(255,253,248,.88); box-shadow: 0 16px 25px rgba(40,30,20,.16); }
.mini-bag::before { content: ""; position: absolute; width: 45%; height: 24%; left: 27%; top: -17%; border: 9px solid currentColor; border-bottom: 0; border-radius: 40px 40px 0 0; }
.card-body { padding: 22px; }
.card-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--berry); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.card-body h3 { margin: 12px 0 10px; }
.card-body p { font-size: 14px; }

.skill-meter { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 14px; margin-top: 15px; font-size: 13px; font-weight: 700; }
.meter { height: 8px; overflow: hidden; background: var(--paper-warm); border-radius: 99px; }
.meter span { display: block; height: 100%; width: var(--level); background: var(--berry); border-radius: inherit; }
.callout { padding: 24px 26px; background: var(--sage-soft); border-left: 4px solid var(--sage-dark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.callout b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 21px; }

.newsletter { display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; background: var(--berry); border-radius: var(--radius-lg); color: white; box-shadow: var(--shadow-lg); }
.newsletter-copy { padding: clamp(34px, 5vw, 62px); }
.newsletter .eyebrow, .newsletter p { color: #f8ddd2; }
.newsletter h2 { margin: 10px 0 16px; }
.newsletter-form { display: flex; gap: 10px; margin-top: 25px; }
.planner-button { margin-top: 25px; }
.newsletter input { width: 100%; min-height: 50px; padding: 0 16px; border: 0; border-radius: 999px; background: white; }
.newsletter .btn { background: var(--ink); color: white; white-space: nowrap; }
.newsletter-art { min-height: 320px; display: grid; place-items: center; background: var(--sage-dark); }
.planner { width: 230px; aspect-ratio: .77; padding: 24px; transform: rotate(4deg); background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 20px 25px 0 rgba(0,0,0,.12); }
.planner h3 { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.planner-lines { height: 160px; margin-top: 15px; background: repeating-linear-gradient(transparent 0 24px, var(--line) 25px); }

.footer-demo { background: var(--ink); color: white; padding: 54px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
.footer-demo p, .footer-demo a { color: #cfc8bf; }
.footer-demo a { display: block; margin-top: 8px; text-decoration: none; transition: color .2s ease; }
.footer-demo a:hover, .footer-demo a:focus-visible { color: var(--sage-soft); }
.footer-demo h4 { margin-bottom: 16px; font: 800 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.footer-bottom { margin-top: 42px; padding-top: 20px; border-top: 1px solid #4a4540; color: #a9a198; font-size: 12px; }

/* Homepage template */
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.home-section { padding: 82px 0; }
.home-section + .home-section { border-top: 1px solid var(--line); }
.section-link { align-self: end; }
.project-image img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-card:hover .project-image img { transform: scale(1.025); }
.card-body h3 a { text-decoration: none; }
.card-body h3 a:hover { color: var(--berry); }
.category-bar { padding: 20px 0; background: var(--paper); border-block: 1px solid var(--line); }
.category-bar .container { display: flex; align-items: center; gap: 12px; overflow-x: auto; }
.bar-label { margin-right: 8px; color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.category-bar a { text-decoration: none; white-space: nowrap; }
.editorial-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.editorial-split h2 { margin: 10px 0 18px; }
.editorial-split .hero-actions { margin-top: 26px; }
.soft-band { background: var(--sage-soft); }
.soft-band .panel { background: rgba(255,255,255,.72); }
.soft-band .callout { margin-top: 26px; background: var(--paper); }
.category-cards { grid-template-columns: repeat(4, 1fr); }
.category-card { min-height: 245px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-sm); }
.category-card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(20,31,29,.03) 18%, rgba(18,28,26,.82) 100%); }
.category-card img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.category-card:hover img, .category-card:focus-visible img { transform: scale(1.045); }
.category-card:nth-child(1) { background: var(--sage); }
.category-card:nth-child(2) { background: var(--berry); }
.category-card:nth-child(3) { background: #b98472; }
.category-card:nth-child(4) { background: var(--sage-dark); }
.category-card span, .category-card h3 { position: relative; z-index: 2; color: white; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.category-card span { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.category-card h3 { margin-top: 6px; }
.season-feature { display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.season-feature img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; }
.season-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(38px, 6vw, 70px); }
.season-copy h2 { margin: 10px 0 18px; }
.season-copy .btn { margin-top: 26px; }
.trust-grid { grid-template-columns: repeat(3, 1fr); }
.trust-item { padding: 28px 0; border-top: 2px solid var(--ink); }
.trust-number { color: var(--berry); font: 500 42px/1 var(--font-display); }
.trust-item h3 { margin: 18px 0 9px; }
.trust-item p { font-size: 14px; }
.home-footer-gap { margin-top: 0; }

/* Free pattern article template */
.reading-progress { position: sticky; top: 0; z-index: 30; height: 4px; background: var(--paper-warm); }
.reading-progress span { display: block; width: 28%; height: 100%; background: var(--berry); }
.article-shell { padding: 56px 0 100px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.breadcrumbs a { color: var(--berry); text-decoration: none; }
.article-header { max-width: 930px; margin: 0 auto; text-align: center; }
.article-header h1 { margin: 13px 0 22px; font-size: clamp(46px, 7vw, 78px); }
.article-dek { max-width: 730px; margin: 0 auto; font-size: 19px; }
.article-byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 24px; color: var(--ink-soft); font-size: 13px; }
.article-byline strong { color: var(--ink); }
.free-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--sage-soft); color: var(--sage-dark); border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.article-hero { margin-top: 42px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.article-hero img { width: 100%; height: clamp(420px, 62vw, 720px); object-fit: cover; object-position: center; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 68px; align-items: start; margin-top: 60px; }
.article-main { min-width: 0; }
.article-main > * + * { margin-top: 28px; }
.article-main h2 { margin-top: 66px; font-size: clamp(34px, 4vw, 48px); }
.article-main h3 { margin-top: 38px; }
.article-main p, .article-main li { font-size: 17px; }
.article-main ul, .article-main ol { padding-left: 1.35em; color: var(--ink-soft); }
.article-main li + li { margin-top: 8px; }
.article-main a { color: var(--berry); }
.article-aside { position: sticky; top: 30px; display: grid; gap: 18px; }
.toc { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.toc h3 { font: 800 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.toc ol { margin: 16px 0 0; padding-left: 20px; }
.toc li + li { margin-top: 8px; }
.toc a { color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.toc a:hover { color: var(--berry); }
.print-card { padding: 24px; background: var(--berry); color: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.print-card .eyebrow, .print-card p { color: var(--blush); }
.print-card h3 { margin: 8px 0; }
.print-card .btn { width: 100%; margin-top: 18px; background: white; color: var(--berry); }
.pattern-summary { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.summary-top { display: grid; grid-template-columns: 1fr 1fr; }
.summary-intro { padding: 28px; background: var(--sage-soft); }
.summary-intro h2 { margin: 7px 0 12px; font-size: 34px; }
.summary-intro p { font-size: 15px; }
.summary-facts { display: grid; grid-template-columns: 1fr 1fr; }
.pattern-fact { padding: 20px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pattern-fact span { display: block; color: var(--berry); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.pattern-fact strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.summary-bottom { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.summary-bottom .pattern-fact { border-bottom: 0; }
.material-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.material-card { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.material-card h3 { margin: 0 0 12px; }
.material-card ul { margin-bottom: 0; }
.pattern-note { padding: 26px; background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pattern-note h3 { margin: 0 0 8px; }
.pattern-steps { counter-reset: pattern-step; display: grid; gap: 16px; }
.pattern-step { counter-increment: pattern-step; position: relative; padding: 25px 25px 25px 76px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pattern-step::before { content: counter(pattern-step); position: absolute; left: 22px; top: 22px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--berry); color: white; font-weight: 900; }
.pattern-step h3 { margin: 0 0 8px; font-size: 22px; }
.pattern-step p { margin: 0; }
.instruction-image { margin: 34px 0; }
.instruction-image img { width: 100%; max-height: 690px; object-fit: cover; border-radius: var(--radius-md); }
.instruction-image figcaption { margin-top: 9px; color: var(--ink-soft); font-size: 13px; text-align: center; }
.abbreviation-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); }
.abbreviation-table th, .abbreviation-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.abbreviation-table th { background: var(--paper-warm); color: var(--berry); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.pattern-callout { padding: 30px; background: var(--sage-dark); color: white; border-radius: var(--radius-md); }
.pattern-callout h3 { margin: 0 0 8px; }
.pattern-callout p { color: #dce9e6; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq details + details { margin-top: 10px; }
.faq summary { padding: 17px 20px; font-weight: 800; cursor: pointer; }
.faq details p { padding: 0 20px 20px; font-size: 15px; }
.author-panel { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.author-monogram { width: 62px; height: 62px; display: grid; place-items: center; background: var(--blush); color: var(--berry); border-radius: 50%; font: 500 24px/1 var(--font-display); }
.author-panel h3 { margin: 2px 0 6px; }
.related-patterns { padding: 80px 0; background: var(--paper-warm); border-top: 1px solid var(--line); }
.related-patterns .project-image { aspect-ratio: 16/10; }

/* Simple free-pattern article */
.simple-article { max-width: 860px; }
.simple-article .article-header { max-width: 780px; text-align: left; margin: 0; }
.simple-article .article-header h1 { font-size: clamp(44px, 7vw, 70px); }
.simple-article .article-dek { margin: 0; max-width: 680px; }
.simple-article .article-byline { justify-content: flex-start; }
.simple-article .article-hero { margin-top: 34px; }
.simple-article .article-hero img { height: clamp(380px, 55vw, 580px); }
.pattern-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 22px 0 42px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.pattern-toolbar p { font-size: 14px; }
.pattern-toolbar .btn { flex: 0 0 auto; }
.simple-content { max-width: 720px; }
.simple-content > * + * { margin-top: 24px; }
.simple-content h2 { margin-top: 58px; font-size: clamp(32px, 5vw, 43px); }
.simple-content h3 { margin-top: 34px; font-size: 24px; }
.simple-content p, .simple-content li { font-size: 17px; }
.simple-content ul, .simple-content ol { color: var(--ink-soft); padding-left: 1.3em; }
.simple-content li + li { margin-top: 7px; }
.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0; border-block: 1px solid var(--line); }
.quick-fact { padding: 18px 16px 18px 0; }
.quick-fact span { display: block; color: var(--berry); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.quick-fact strong { display: block; margin-top: 4px; font-size: 14px; }
.simple-toc { margin: 30px 0; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.simple-toc summary { font-weight: 800; cursor: pointer; }
.simple-toc ol { margin-bottom: 0; }
.simple-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 26px 0; border-block: 1px solid var(--line); }
.simple-materials h3 { margin-top: 0; }
.simple-pattern-step { padding: 22px 0; border-bottom: 1px solid var(--line); }
.simple-pattern-step h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.step-number { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--berry); color: white; font: 800 13px/1 var(--font-body); }
.simple-note { padding: 20px 22px; background: var(--sage-soft); border-radius: var(--radius-sm); }
.simple-note strong { color: var(--sage-dark); }
.simple-content .instruction-image { margin: 34px 0; }
.simple-content .faq h2 { margin-top: 58px; }
.simple-author { margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--line); }
.simple-related { max-width: 860px; padding-bottom: 90px; }
.simple-related .section-head { margin-bottom: 26px; }

/* Simple category and listing template */
.listing-hero { padding: 70px 0 52px; text-align: center; }
.listing-hero h1 { max-width: 850px; margin: 12px auto 18px; }
.listing-hero p { max-width: 680px; margin: 0 auto; font-size: 18px; }
.listing-count { display: inline-block; margin-top: 18px; color: var(--sage-dark); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.filter-bar { position: sticky; top: 0; z-index: 15; padding: 15px 0; background: rgba(249,247,245,.96); border-block: 1px solid var(--line); backdrop-filter: blur(10px); }
.filter-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.filter-scroll { display: flex; gap: 9px; overflow-x: auto; padding: 2px; }
.filter-scroll .chip { text-decoration: none; white-space: nowrap; }
.pattern-search { position: relative; flex: 0 0 250px; }
.pattern-search input { width: 100%; min-height: 42px; padding: 0 42px 0 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.pattern-search button { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--sage-dark); color: white; cursor: pointer; }
.listing-main { padding: 62px 0 92px; }
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.listing-grid .project-card:first-child { grid-column: span 2; }
.listing-grid .project-card:first-child .project-image { aspect-ratio: 16/9; }
.listing-grid .project-card:first-child h3 { font-size: 31px; }
.listing-grid .project-image::before { z-index: 1; opacity: 0; background: rgba(27,64,72,.48); transition: opacity .25s ease; }
.listing-grid .project-image::after { content: "View project →"; position: absolute; z-index: 2; left: 50%; top: 50%; padding: 10px 16px; transform: translate(-50%, -42%); opacity: 0; border-radius: 999px; background: var(--paper); color: var(--berry); font-size: 12px; font-weight: 900; white-space: nowrap; box-shadow: var(--shadow-sm); transition: opacity .25s ease, transform .25s ease; }
.listing-grid .project-image:hover::before, .listing-grid .project-image:focus-visible::before { opacity: 1; }
.listing-grid .project-image:hover::after, .listing-grid .project-image:focus-visible::after { opacity: 1; transform: translate(-50%, -50%); }
.listing-grid .project-image:hover img, .listing-grid .project-image:focus-visible img { transform: scale(1.045); }
.listing-grid .project-card[hidden] { display: none; }
.search-empty { margin: 34px 0 0; padding: 24px; background: var(--sage-soft); border-radius: var(--radius-sm); text-align: center; }
.card-free { display: inline-flex; align-items: center; gap: 5px; color: var(--sage-dark); }
.card-free::before { content: "✓"; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 52px; }
.page-link { min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-weight: 800; text-decoration: none; }
.page-link.current { background: var(--berry); border-color: var(--berry); color: white; }
.page-link.next { width: auto; border-radius: 999px; }
.listing-newsletter { padding: 62px 0; background: var(--sage-dark); color: white; }
.listing-newsletter-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.listing-newsletter h2 { max-width: 680px; margin: 8px 0 10px; }
.listing-newsletter p { color: #d8e5e2; }
.listing-newsletter .eyebrow { color: var(--blush); }
.listing-newsletter .btn { background: white; color: var(--berry); }

@media (max-width: 900px) {
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-inner { align-items: stretch; flex-direction: column; }
  .pattern-search { flex-basis: auto; max-width: 360px; }
  .listing-newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
  .listing-newsletter .btn { justify-self: start; }
}
@media (max-width: 620px) {
  .listing-hero { padding: 48px 0 36px; text-align: left; }
  .listing-hero h1, .listing-hero p { margin-left: 0; }
  .listing-grid { grid-template-columns: 1fr; }
  .listing-grid .project-card:first-child { grid-column: auto; }
  .listing-grid .project-card:first-child h3 { font-size: 25px; }
  .filter-bar { position: static; }
}

/* Printable crochet bag planner */
.planner-page { padding: 58px 0 90px; }
.planner-intro { max-width: 820px; margin: 0 auto 36px; text-align: center; }
.planner-intro h1 { margin: 12px 0 18px; }
.planner-intro p { max-width: 680px; margin-inline: auto; font-size: 18px; }
.planner-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.planner-sheet { max-width: 900px; margin: 0 auto; padding: 46px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.planner-sheet-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.planner-sheet-header h2 { font-size: 34px; }
.planner-sheet-header span { color: var(--berry); font-weight: 800; }
.planner-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; margin-top: 30px; }
.planner-field { min-width: 0; }
.planner-field.full { grid-column: 1 / -1; }
.planner-field strong { display: block; margin-bottom: 10px; color: var(--sage-dark); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.planner-line { min-height: 32px; border-bottom: 1px solid var(--ink-soft); }
.planner-lines-large { min-height: 130px; background: repeating-linear-gradient(transparent 0 31px, var(--line) 32px); }
.planner-checks { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--ink-soft); }
.planner-checks span::before { content: "□"; margin-right: 7px; color: var(--ink); font-size: 19px; }
.planner-tip { max-width: 900px; margin: 24px auto 0; padding: 20px 24px; background: var(--sage-soft); border-radius: var(--radius-sm); }

@media (max-width: 620px) {
  .planner-page { padding-top: 42px; }
  .planner-intro { text-align: left; }
  .planner-actions { justify-content: flex-start; }
  .planner-sheet { padding: 26px 22px; }
  .planner-sheet-header { flex-direction: column; gap: 8px; }
  .planner-fields { grid-template-columns: 1fr; }
  .planner-field.full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  body { background: white; font-size: 11pt; }
  .announcement, .site-header, .footer-demo, .planner-intro, .planner-tip { display: none !important; }
  .planner-page { padding: 0; }
  .planner-sheet { max-width: none; padding: 12mm; border: 0; border-radius: 0; box-shadow: none; }
  .planner-fields { gap: 15px 24px; }
  .planner-lines-large { min-height: 105px; }
}

@media (max-width: 680px) {
  .pattern-toolbar { align-items: flex-start; flex-direction: column; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .simple-materials { grid-template-columns: 1fr; gap: 0; }
  .simple-materials > div + div { margin-top: 26px; }
}

@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; grid-template-columns: 1fr 1fr; grid-row: 1; }
}
@media (max-width: 680px) {
  .article-shell { padding-top: 36px; }
  .article-header { text-align: left; }
  .article-byline { justify-content: flex-start; }
  .article-header h1 { font-size: 45px; }
  .article-hero { margin-top: 28px; border-radius: 18px; }
  .article-hero img { height: 420px; }
  .article-layout { margin-top: 34px; gap: 28px; }
  .article-aside, .summary-top, .material-grid { grid-template-columns: 1fr; }
  .summary-bottom { grid-template-columns: 1fr 1fr; }
  .pattern-fact { border-left: 0; border-right: 1px solid var(--line); }
  .pattern-step { padding-left: 68px; }
}

@media (max-width: 900px) {
  .editorial-split, .season-feature { grid-template-columns: 1fr; }
  .category-cards { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .season-feature img { min-height: 360px; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.is-open { position: absolute; z-index: 20; display: grid; top: calc(100% + 1px); left: 0; right: 0; gap: 0; padding: 14px 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .nav-links.is-open a { padding: 11px 0; }
  .nav { position: relative; }
  .mobile-menu { display: block; margin-left: auto; }
  .hero-demo, .newsletter { grid-template-columns: 1fr; }
  .hero-art { min-height: 380px; }
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .container { width: min(100% - 24px, var(--content)); }
  .nav { min-height: 72px; }
  .nav .btn { display: none; }
  .hero-demo { margin-top: 20px; border-radius: 22px; }
  .hero-copy { padding: 38px 25px; }
  .hero-art { min-height: 310px; }
  .cols-2, .cols-3, .cols-5, .footer-grid { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .category-cards { grid-template-columns: 1fr; }
  .category-card { min-height: 210px; }
}

/* About and contact pages */
.about-hero { padding: 58px 0 72px; background: var(--paper-warm); border-bottom: 1px solid var(--line); }
.about-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 66px; align-items: center; }
.about-hero-copy h1, .contact-hero h1 { margin: 12px 0 20px; }
.about-hero-copy p, .contact-hero p { font-size: 18px; }
.about-hero-image { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about-hero-image img { display: block; width: 100%; height: 520px; object-fit: cover; }
.info-section { padding: 82px 0; }
.narrow-copy { max-width: 790px; }
.narrow-copy h2 { margin: 10px 0 22px; }
.narrow-copy p { font-size: 17px; }
.narrow-copy p + p { margin-top: 18px; }
.narrow-copy a { color: var(--berry); font-weight: 800; }
.about-process p + p { margin-top: 17px; }
.about-process .btn { margin-top: 26px; }
.process-list { display: grid; gap: 12px; }
.process-list > div { display: grid; grid-template-columns: 42px 1fr; gap: 17px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.process-list span { width: 42px; height: 42px; display: grid; place-items: center; background: var(--berry); color: white; border-radius: 50%; font-weight: 900; }
.process-list h3 { margin: 2px 0 5px; font-size: 20px; }
.process-list p { font-size: 14px; }
.about-note { background: var(--blush); }
.contact-hero { padding: 72px 0; background: var(--sage-soft); border-bottom: 1px solid var(--line); text-align: center; }
.contact-hero .narrow-copy { margin-inline: auto; }
.contact-email { display: inline-flex; gap: 12px; align-items: center; margin-top: 27px; color: var(--berry); font: 500 clamp(23px, 4vw, 34px)/1.2 var(--font-display); text-decoration: none; }
.contact-email:hover { text-decoration: underline; }
.contact-response { margin-top: 10px; font-size: 13px !important; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-card { padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.contact-icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--blush); color: var(--berry); border-radius: 50%; font-weight: 900; }
.contact-card h2 { margin: 18px 0 10px; font-size: 27px; }
.contact-card p { font-size: 15px; }
.contact-card a { display: inline-block; margin-top: 18px; color: var(--berry); font-size: 14px; font-weight: 900; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.contact-checklist { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.contact-checklist h2 { margin-top: 10px; }
.contact-checklist ul { margin: 0; padding: 0; list-style: none; }
.contact-checklist li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid rgba(27,64,72,.18); color: var(--ink-soft); }
.contact-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--berry); font-weight: 900; }

@media (max-width: 800px) {
  .about-hero-grid, .contact-checklist { grid-template-columns: 1fr; gap: 36px; }
  .about-hero-image img { height: 400px; }
}
@media (max-width: 620px) {
  .about-hero, .contact-hero { padding: 46px 0 52px; }
  .info-section { padding: 58px 0; }
  .about-hero-image img { height: 320px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 24px; }
}

/* Editorial and pattern policy */
.policy-hero { padding: 72px 0; background: var(--paper-warm); border-bottom: 1px solid var(--line); }
.policy-hero h1 { margin: 12px 0 20px; }
.policy-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 25px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.policy-layout { display: grid; grid-template-columns: 230px minmax(0, 740px); justify-content: center; gap: 72px; padding-top: 72px; padding-bottom: 96px; }
.policy-nav { position: sticky; top: 28px; align-self: start; display: grid; gap: 10px; padding: 22px; background: var(--sage-soft); border-radius: var(--radius-md); }
.policy-nav strong { margin-bottom: 5px; color: var(--sage-dark); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.policy-nav a { color: var(--ink-soft); font-size: 13px; font-weight: 700; text-decoration: none; }
.policy-nav a:hover { color: var(--berry); }
.policy-content > section { scroll-margin-top: 28px; padding-bottom: 52px; }
.policy-content > section + section { padding-top: 52px; border-top: 1px solid var(--line); }
.policy-number { color: var(--berry); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.policy-content h2 { margin: 8px 0 18px; font-size: clamp(30px, 4vw, 42px); }
.policy-content p, .policy-content li { font-size: 16px; }
.policy-content p + p { margin-top: 16px; }
.policy-content a { color: var(--berry); font-weight: 800; }
.policy-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
.policy-checks > div { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.policy-checks strong { color: var(--sage-dark); }
.policy-checks ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-soft); }
.policy-checks li + li { margin-top: 8px; }
.policy-owner { padding: 30px; background: var(--berry); color: white; border-radius: var(--radius-md); }
.policy-owner .eyebrow, .policy-owner p { color: var(--blush); }
.policy-owner h2 { margin: 8px 0 4px; }
.policy-owner a { display: inline-block; margin-top: 15px; color: white; }
.policy-content ul { margin: 18px 0; padding-left: 22px; color: var(--ink-soft); }
.policy-content li + li { margin-top: 9px; }
.policy-callout { margin-top: 26px; padding: 24px; background: var(--sage-soft); border-left: 4px solid var(--sage-dark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.policy-callout strong { color: var(--sage-dark); }
.policy-callout p { margin-top: 7px !important; font-size: 15px; }
.cookie-table-wrap { margin: 28px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cookie-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--paper); }
.cookie-table th, .cookie-table td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cookie-table th { background: var(--sage-soft); color: var(--sage-dark); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.cookie-table tr:last-child td { border-bottom: 0; }
.cookie-table td { color: var(--ink-soft); font-size: 14px; }
.cookie-table td strong { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-legal-links a { color: inherit; text-decoration: none; }
.footer-legal-links a:hover, .footer-legal-links a:focus-visible { color: var(--sage-soft); }
.error-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper-warm); }
.error-main { flex: 1; display: grid; place-items: center; padding: 70px 0; }
.error-card { max-width: 900px; text-align: center; }
.error-code { display: block; margin-bottom: -18px; color: var(--blush); font: 500 clamp(110px, 22vw, 220px)/.8 var(--font-display); }
.error-card h1 { margin: 12px 0 18px; }
.error-card > p { max-width: 650px; margin-inline: auto; font-size: 18px; }
.error-card .hero-actions { justify-content: center; margin-top: 30px; }
.error-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 55px; text-align: left; }
.error-links a { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
.error-links a:hover { border-color: var(--berry); }
.error-links span { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.error-links strong { color: var(--berry); }
.error-footer { padding: 24px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }
.error-footer .container { display: flex; gap: 18px; }
.error-footer a { color: var(--berry); }

@media (max-width: 620px) {
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .error-links { grid-template-columns: 1fr; margin-top: 40px; }
  .error-code { margin-bottom: -6px; }
}

@media (max-width: 820px) {
  .policy-layout { grid-template-columns: 1fr; gap: 34px; }
  .policy-nav { position: static; grid-template-columns: 1fr 1fr; }
  .policy-nav strong { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .policy-hero { padding: 48px 0; }
  .policy-layout { padding-top: 48px; padding-bottom: 64px; }
  .policy-nav, .policy-checks { grid-template-columns: 1fr; }
  .policy-nav strong { grid-column: auto; }
}

/* WordPress integration */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed !important; z-index: 99999; top: 12px; left: 12px; width: auto; height: auto; padding: 10px 14px; margin: 0; clip: auto; background: var(--paper); color: var(--ink); border: 2px solid var(--berry); border-radius: 6px; }
.custom-logo-link { display: block; }
.custom-logo { width: auto; max-height: 64px; }
.brand-wrap { flex: 0 0 auto; }
.primary-navigation { margin-left: auto; }
.primary-navigation ul { margin: 0; padding: 0; list-style: none; }
.primary-navigation li { display: inline-block; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; background: var(--ink); }
.card-title { margin: 12px 0 10px; font-size: 25px; }
.card-title a { text-decoration: none; }
.card-category { display: inline-block; margin-top: 13px; color: var(--sage-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.page-shell { min-height: 55vh; }
.wp-page-content > .contact-hero, .wp-page-content > .about-hero, .wp-page-content > .policy-hero { margin-top: 0; }
.wp-page-content > .info-section:first-child { padding-top: 72px; }
.wp-page-content .about-hero-image img { width: 100%; height: 520px; object-fit: cover; }
.entry-content a { color: var(--berry); }
.entry-content blockquote { margin-inline: 0; padding: 22px 26px; border-left: 4px solid var(--berry); background: var(--paper-warm); font-family: var(--font-display); font-size: 22px; }
.navigation.pagination { display: flex; justify-content: center; margin-top: 50px; }
.nav-links { list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links .current-menu-item > a, .nav-links .current_page_item > a { color: var(--berry); }
.wp-block-image img { height: auto; }
.footer-intro { margin-top: 18px; max-width: 360px; }
.footer-brand { color: white; }
.footer-demo .footer-logo-link { display: inline-flex !important; width: auto !important; max-width: 174px !important; margin-top: 0 !important; padding: 6px 9px; overflow: hidden; line-height: 0; background: var(--paper); border-radius: var(--radius-sm); }
.footer-demo .footer-logo { display: block !important; width: 150px !important; max-width: 150px !important; height: auto !important; max-height: none !important; object-fit: contain; }

@media (max-width: 600px) {
  .footer-demo .footer-logo-link { max-width: 156px !important; }
  .footer-demo .footer-logo { width: 138px !important; max-width: 138px !important; }
}

@media (max-width: 900px) {
  .primary-navigation { position: absolute; z-index: 30; display: none; top: 100%; left: 0; right: 0; margin: 0; padding: 14px 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .primary-navigation.is-open { display: block; }
  .primary-navigation .nav-links { display: grid; gap: 0; }
  .primary-navigation li { display: block; }
  .primary-navigation a { display: block; padding: 11px 0; }
  .menu-toggle { display: block; margin-left: auto; }
  .header-cta { display: none; }
  .nav { position: relative; }
}

@media print {
  #wpadminbar, .announcement, .site-header, .footer-demo, .pattern-toolbar, .simple-related { display: none !important; }
  html { margin-top: 0 !important; }
  .article-shell, .simple-content { padding: 0; }
  .article-hero { box-shadow: none; }
}