/* IHDIY Theme — main.css v2.0 */

/* ─── Fonts ─────────────────────────────────────────────────────────────── */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/playfair-display.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/playfair-display-italic.woff2') format('woff2')}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
img,video{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
a{text-decoration:none;color:inherit}
p{text-wrap:pretty}

/* ─── Button base reset ──────────────────────────────────────────────────── */
/* Strips the system-native appearance that causes the black outset border */
button{-webkit-appearance:none;appearance:none;border:none;background:none;cursor:pointer;color:inherit;line-height:1}
button::-moz-focus-inner{border:0;padding:0}
/* .border and .bg-* utility classes re-add styling where explicitly needed */

/* ─── Button polish ──────────────────────────────────────────────────────── */
/* Smooth transitions on every button */
button{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease,opacity .15s ease}
/* Tactile press feedback — slight scale-down on click */
button:active:not(:disabled){transform:scale(.96)}
/* Don't double-apply scale inside hover-lift containers */
.hover-lift button:active{transform:scale(.96) translateY(0)}

/* ─── Icon buttons (header heart, hamburger) ─────────────────────────────── */
button.rounded-lg{display:inline-flex;align-items:center;justify-content:center}
button.rounded-full{display:inline-flex;align-items:center;justify-content:center}

/* ─── Filled green buttons ───────────────────────────────────────────────── */
.bg-green{transition:background-color .15s ease,box-shadow .15s ease,transform .1s ease}
.bg-green:hover{background-color:#5A7A5D}
.bg-green:active{background-color:#4e6b50;transform:scale(.97)}

/* ─── Newsletter subscribe button ────────────────────────────────────────── */
.btn-subscribe{background:#4CAF72;color:#fff;font-size:.875rem;font-weight:600;padding:.75rem 1.75rem;border-radius:.5rem;white-space:nowrap;transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease}
.btn-subscribe:hover{background:#3d9960;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn-subscribe:active{background:#347d50;transform:scale(.97)}

/* ─── Base ───────────────────────────────────────────────────────────────── */
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:#fff;color:#2C2C2C;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Playfair Display',Georgia,serif}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#F5F1EC}
::-webkit-scrollbar-thumb{background:#A3B18A;border-radius:99px}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-\[1160px\]{max-width:1160px}
.max-w-\[200px\]{max-width:200px}
.max-w-\[560px\]{max-width:560px}
.max-w-\[620px\]{max-width:620px}
.max-w-\[680px\]{max-width:680px}
.max-w-\[740px\]{max-width:740px}
.max-w-\[780px\]{max-width:780px}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-auto{margin-left:auto}
.mr-auto{margin-right:auto}
.mr-1{margin-right:.25rem}
.mr-4{margin-right:1rem}
.mb-1{margin-bottom:.25rem}
.mb-1\.5{margin-bottom:.375rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-7{margin-bottom:1.75rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mt-0\.5{margin-top:.125rem}
.mt-1{margin-top:.25rem}
.mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pt-2{padding-top:.5rem}
.pt-6{padding-top:1.5rem}
.pt-8{padding-top:2rem}
.pt-\[72px\]{padding-top:72px}
.pb-4{padding-bottom:1rem}
.pb-5{padding-bottom:1.25rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pb-16{padding-bottom:4rem}

/* ─── Display ────────────────────────────────────────────────────────────── */
.block{display:block}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}

/* ─── Flex ───────────────────────────────────────────────────────────────── */
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.self-start{align-self:flex-start}
.shrink-0{flex-shrink:0}
.min-w-0{min-width:0}
.gap-1{gap:.25rem}
.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}
.gap-2\.5{gap:.625rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}

/* ─── Sizing ─────────────────────────────────────────────────────────────── */
.w-full{width:100%}
.w-px{width:1px}
.w-7{width:1.75rem}
.w-9{width:2.25rem}
.w-10{width:2.5rem}
.w-14{width:3.5rem}
.w-16{width:4rem}
.w-24{width:6rem}
.w-44{width:11rem}
.w-48{width:12rem}
.w-64{width:16rem}
.w-\[220px\]{width:220px}
.w-\[230px\]{width:230px}
.h-auto{height:auto}
.h-full{height:100%}
.h-5{height:1.25rem}
.h-7{height:1.75rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-10{height:2.5rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-24{height:6rem}
.h-36{height:9rem}
.h-48{height:12rem}
.h-64{height:16rem}
.h-\[60px\]{height:60px}
.h-\[180px\]{height:180px}
.h-\[320px\]{height:320px}
.min-h-\[150px\]{min-height:150px}
.aspect-square{aspect-ratio:1/1}
.aspect-\[4\/3\]{aspect-ratio:4/3}

/* ─── Position ───────────────────────────────────────────────────────────── */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}
.top-\[80px\]{top:80px}
.bottom-0{bottom:0}
.bottom-3{bottom:.75rem}
.bottom-4{bottom:1rem}
.left-0{left:0}
.left-3{left:.75rem}
.left-5{left:1.25rem}
.right-0{right:0}
.z-10{z-index:10}

/* ─── Typography ─────────────────────────────────────────────────────────── */
.font-serif{font-family:'Playfair Display',Georgia,serif}
.font-sans{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
.font-mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-\[7px\]{font-size:7px}
.text-\[8px\]{font-size:8px}
.text-\[9px\]{font-size:9px}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.text-\[16px\]{font-size:16px}
.text-\[17px\]{font-size:17px}
.text-\[18px\]{font-size:18px}
.text-\[22px\]{font-size:22px}
.text-\[24px\]{font-size:24px}
.text-\[26px\]{font-size:26px}
.text-\[28px\]{font-size:28px}
.text-\[30px\]{font-size:30px}
.text-\[32px\]{font-size:32px}
.text-\[36px\]{font-size:36px}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em}
.tracking-widest{letter-spacing:.1em}
.tracking-\[0\.14em\]{letter-spacing:.14em}
.tracking-\[0\.16em\]{letter-spacing:.16em}
.uppercase{text-transform:uppercase}
.text-center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ─── Colors ─────────────────────────────────────────────────────────────── */
.text-white{color:#fff}
.text-ink{color:#2C2C2C}
.text-mid{color:#6B6B6B}
.text-light{color:#9CA3AF}
.text-green{color:#6F8F72}
.text-\[\#B86A4A\]{color:#B86A4A}
.bg-white{background-color:#fff}
.bg-green{background-color:#6F8F72}
.bg-green-light{background-color:#EAF1EA}
.bg-\[\#F5F1EC\]{background-color:#F5F1EC}
.bg-\[\#FDF3F0\]{background-color:#FDF3F0}
.bg-\[repeating-linear-gradient\(45deg\,\#F5F1EC\,\#F5F1EC_4px\,\#fff_4px\,\#fff_12px\)\]{background:repeating-linear-gradient(45deg,#F5F1EC,#F5F1EC 4px,#fff 4px,#fff 12px)}
.text-white\/45{color:rgba(255,255,255,.45)}
.text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/70{color:rgba(255,255,255,.7)}
.text-white\/75{color:rgba(255,255,255,.75)}
.text-white\/80{color:rgba(255,255,255,.8)}
.bg-white\/15{background-color:rgba(255,255,255,.15)}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.opacity-30{opacity:.3}
.opacity-35{opacity:.35}
.opacity-40{opacity:.4}
.opacity-50{opacity:.5}
.opacity-60{opacity:.6}

/* ─── Borders ────────────────────────────────────────────────────────────── */
.border{border-width:1px;border-style:solid}
.border-2{border-width:2px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-dashed{border-style:dashed}
.border-border{border-color:#E5E5E5}
.border-\[\#A3B18A\]{border-color:#A3B18A}
.border-\[\#DFBBB0\]{border-color:#DFBBB0}
.border-white\/25{border-color:rgba(255,255,255,.25)}
.border-border\/60{border-color:rgba(229,229,229,.6)}
.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}

/* ─── Object fit ─────────────────────────────────────────────────────────── */
.object-cover{object-fit:cover}
.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}
.resize-none{resize:none}
.outline-none{outline:none}

/* ─── Transitions ────────────────────────────────────────────────────────── */
.transition{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}

/* ─── Hover utilities ────────────────────────────────────────────────────── */
.hover\:text-ink:hover{color:#2C2C2C}
.hover\:text-mid:hover{color:#6B6B6B}
.hover\:text-green:hover{color:#6F8F72}
.hover\:text-white:hover{color:#fff}
.hover\:bg-green:hover{background-color:#6F8F72}
.hover\:bg-green-dark:hover{background-color:#5A7A5D}
.hover\:bg-green-light:hover{background-color:#EAF1EA}
.hover\:bg-\[\#F5F1EC\]:hover{background-color:#F5F1EC}
.hover\:bg-white\/35:hover{background-color:rgba(255,255,255,.35)}
.hover\:border-green:hover{border-color:#6F8F72}
.focus\:border-green:focus{border-color:#6F8F72}
.focus\:bg-white\/25:focus{background-color:rgba(255,255,255,.25)}
.placeholder\:text-light::placeholder{color:#9CA3AF}
.placeholder\:text-white\/45::placeholder{color:rgba(255,255,255,.45)}
.group:hover .group-hover\:text-green{color:#6F8F72}

/* ─── Space-y ────────────────────────────────────────────────────────────── */
.space-y-2>*+*{margin-top:.5rem}
.space-y-2\.5>*+*{margin-top:.625rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.space-y-6>*+*{margin-top:1.5rem}

/* ─── Category pill color variants ──────────────────────────────────────── */
.pill-green { background-color:#6F8F72; color:#fff; }
.pill-amber { background-color:#C07A3A; color:#fff; }
.pill-teal  { background-color:#3D8A8F; color:#fff; }
.pill-rust  { background-color:#B06040; color:#fff; }
.pill-navy  { background-color:#3A5F9F; color:#fff; }
.pill-plum  { background-color:#7A52A0; color:#fff; }
.pill-gold  { background-color:#8F7030; color:#fff; }

/* ─── Focus & outline resets ─────────────────────────────────────────────── */
/* Strip browser default focus rings on mouse click; keep them for keyboard */
*:focus{outline:none;box-shadow:none}
*:focus-visible{outline:2px solid #6F8F72;outline-offset:2px;box-shadow:0 0 0 4px rgba(111,143,114,.15)}
/* Inputs: swap outline for a green border glow on keyboard nav */
input:focus-visible,textarea:focus-visible{outline:none;border-color:#6F8F72 !important;box-shadow:0 0 0 3px rgba(111,143,114,.15)}
button:focus-visible{outline:2px solid #6F8F72;outline-offset:2px;box-shadow:none}
/* Strip webkit search field chrome (cancel ×, magnifier, extra padding) */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none}
/* Remove blue tap flash on mobile */
*{-webkit-tap-highlight-color:transparent}

/* ─── Custom components ──────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #E5E5E5}
.hover-lift{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;will-change:transform;position:relative}
.hover-lift:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.10);z-index:2}

/* Article grid cards: give them a white background + border so the hover
   shadow looks natural and the lift doesn't bleed into adjacent text */
article.hover-lift{
  background:#fff;
  border-radius:14px;
  border:1px solid #EEEBE6;
  padding-bottom:14px;
}
article.hover-lift:hover{
  border-color:#C8D8C8;
}
/* Image link sits flush at the top of the card — square off bottom radius */
article.hover-lift>a.block{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  margin-bottom:12px;
}
/* Give title and meta text horizontal breathing room inside the card */
article.hover-lift h3,
article.hover-lift>p{
  padding-left:12px;
  padding-right:12px;
}
.hero-grad{background:linear-gradient(to top,rgba(30,28,26,.82) 0%,rgba(30,28,26,.3) 50%,transparent 100%)}
.hero-grad-sm{background:linear-gradient(to top,rgba(30,28,26,.75) 0%,transparent 60%)}
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ul-link{position:relative;display:inline-flex;align-items:center;gap:.25rem}
.ul-link::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1.5px;background:currentColor;transition:width .18s}
.ul-link:hover::after{width:100%}
.nav-item{display:flex;align-items:center;gap:.1875rem;cursor:pointer}
.nav-item svg{transition:transform .15s}
.nav-item:hover svg{transform:rotate(180deg)}
.share-bar{position:sticky;top:80px}
.ph{background:linear-gradient(110deg,#EDE8E1 30%,#E3DDD6 50%,#EDE8E1 70%);background-size:300% 100%;animation:sh 2.5s ease infinite;display:flex;align-items:center;justify-content:center;color:#B0A898;font-size:10px;letter-spacing:.04em;text-align:center;padding:8px;font-family:system-ui,sans-serif}
@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ─── Reading progress bar ───────────────────────────────────────────────── */
#progress-bar{position:fixed;top:60px;left:0;height:3px;background:#6F8F72;width:0%;z-index:99;transition:width .1s linear}

/* ─── Mobile menu ────────────────────────────────────────────────────────── */
#mobile-menu{display:none}
#mobile-menu.open{display:block}

/* ─── Article body ───────────────────────────────────────────────────────── */
.article-body p{font-size:16px;line-height:1.8;color:#3a3a3a;margin-bottom:1.4em}
.article-body h2{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:600;color:#2C2C2C;margin:2em 0 .6em;line-height:1.3}
.article-body h3{font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:600;color:#2C2C2C;margin:1.6em 0 .5em}
.article-body ul{list-style:none;padding:0;margin:0 0 1.4em}
.article-body ul li{font-size:15px;line-height:1.7;color:#3a3a3a;padding:6px 0 6px 22px;position:relative;border-bottom:1px solid #F0EDE8}
.article-body ul li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:#6F8F72}
.article-body ol{counter-reset:step;padding:0;margin:0 0 1.4em;list-style:none}
.article-body ol li{font-size:15px;line-height:1.7;color:#3a3a3a;padding:10px 0 10px 42px;position:relative;border-bottom:1px solid #F0EDE8}
.article-body ol li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;background:#6F8F72;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif}
.article-body a{color:#6F8F72;text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{border-left:3px solid #6F8F72;padding:12px 20px;margin:1.6em 0;background:#EAF1EA;border-radius:0 8px 8px 0}
.article-body blockquote p{margin:0;color:#5A7A5D;font-style:italic;font-size:15px}
.article-body img{display:block;max-width:100%;width:100%;height:auto;border-radius:8px;margin:1.4em auto}
.article-body figure,.article-body .wp-block-image{margin:1.6em 0;max-width:100%;width:100%;margin-left:0;margin-right:0}
.article-body figure img,.article-body .wp-block-image img{width:100%;margin:0}
.article-body figcaption,.article-body .wp-caption-text{text-align:center;font-size:12px;color:#9CA3AF;margin-top:6px}
.article-body .wp-caption{max-width:100% !important;width:100% !important;margin-left:0 !important;margin-right:0 !important}
.article-body figure,.article-body .wp-block-image,.article-body .wp-caption,.article-body .alignfull,.article-body .alignwide{max-width:100% !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;float:none !important}
.article-body img{max-width:100% !important;width:100% !important;height:auto !important;display:block !important}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.page-numbers{display:flex;gap:8px;list-style:none;padding:0}
.page-numbers li a,.page-numbers li span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border:1px solid #E5E5E5;border-radius:8px;font-size:13px;color:#6B6B6B;transition:all .15s}
.page-numbers li .current,.page-numbers li a:hover{background:#6F8F72;color:#fff;border-color:#6F8F72}

/* ─── Backdrop blur ──────────────────────────────────────────────────────── */
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ─── Responsive: sm (640px) ─────────────────────────────────────────────── */
@media(min-width:640px){
  .sm\:block{display:block}
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sm\:text-\[30px\]{font-size:30px}
  .sm\:text-\[34px\]{font-size:34px}
  .sm\:text-\[38px\]{font-size:38px}
  .sm\:text-\[42px\]{font-size:42px}
  .sm\:text-\[44px\]{font-size:44px}
}

/* ─── Responsive: md (768px) ─────────────────────────────────────────────── */
@media(min-width:768px){
  .md\:block{display:block}
  .md\:col-span-1{grid-column:span 1/span 1}
  .md\:flex{display:flex}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:grid-cols-\[200px_1fr_1fr_1fr_180px\]{grid-template-columns:200px 1fr 1fr 1fr 180px}
}

/* ─── Responsive: lg (1024px) ────────────────────────────────────────────── */
@media(min-width:1024px){
  .lg\:block{display:block}
  .lg\:flex{display:flex}
  .lg\:hidden{display:none}
  .lg\:h-full{height:100%}
  .lg\:h-\[380px\]{height:380px}
  .lg\:grid-cols-\[1fr_380px\]{grid-template-columns:1fr 380px}
  .lg\:grid-cols-\[1fr_400px\]{grid-template-columns:1fr 400px}
  .lg\:pt-\[88px\]{padding-top:88px}
}

/* ─── Responsive: xl (1280px) ────────────────────────────────────────────── */
@media(min-width:1280px){
  .xl\:flex{display:flex}
  .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}