/* Project Timber — Building a Base (templates/page-building-base-garden-building.php).
   Loaded after base.css + secondary.css. Only the page-unique sections live
   here; hero/breadcrumb/help-CTA/typography come from secondary.css and tokens
   from base.css :root. Method tabs are wired by the matching JS. */

/* Intro prose */
.prose .wrap{ max-width:820px; }
.prose h2{ font-size:clamp(1.7rem,4vw,2.3rem); margin:0 0 14px; }
.prose p{ font-weight:300; color:var(--txt-soft); line-height:1.7; margin:0 0 14px; }
.prose ul{ margin:0 0 14px; padding-left:0; list-style:none; display:grid; gap:12px; }
.prose ul li{ position:relative; padding-left:30px; font-weight:300; color:var(--txt-soft); line-height:1.6; }
.prose ul li::before{ content:""; position:absolute; left:6px; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--clay); }
.prose strong{ color:var(--ink); font-weight:700; }

/* Warning callout */
.callout{ display:flex; gap:14px; align-items:flex-start; background:var(--warn-bg); border:1px solid rgba(178,106,18,.25); border-radius:var(--r-sm); padding:18px 20px; margin:6px 0 8px; }
.callout svg{ width:22px; height:22px; flex:0 0 auto; color:var(--warn); margin-top:1px; }
.callout p{ color:#8a5210; font-weight:400; font-size:.95rem; line-height:1.55; margin:0; }
.callout strong{ color:#6e420d; }

/* Tip callout */
.tip{ display:flex; gap:14px; align-items:flex-start; background:var(--ok-bg); border:1px solid rgba(42,143,87,.25); border-radius:var(--r-sm); padding:18px 20px; margin:8px 0; }
.tip svg{ width:22px; height:22px; flex:0 0 auto; color:var(--ok); margin-top:1px; }
.tip img{ height:34px; width:auto; flex:0 0 auto; margin-top:1px; object-fit:contain; }
.tip p{ color:#1c6b41; font-weight:400; font-size:.95rem; line-height:1.55; margin:0; }

/* Method tabs */
.methods{ background:var(--paper); }
.methods .wrap{ max-width:900px; }
.methods .head{ text-align:center; margin-bottom:26px; }
.mtabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.mtab{ font-family:var(--font); font-size:.92rem; font-weight:700; color:var(--ink); background:#fff; border:1px solid rgba(33,30,36,.14); border-radius:999px; padding:11px 20px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.mtab[aria-selected="true"]{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
.mpanel{ display:none; background:#fff; border:1px solid rgba(33,30,36,.1); border-radius:var(--r); padding:30px 28px; box-shadow:var(--e1); }
.mpanel.show{ display:block; }
.mpanel h3{ font-size:clamp(1.4rem,3.2vw,1.8rem); margin-bottom:6px; }
.mpanel .rec{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:4px 12px; margin-bottom:14px; }
.mpanel .mintro{ font-weight:300; color:var(--txt-soft); margin-bottom:20px; line-height:1.6; }
ol.blist{ list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:16px; }
ol.blist li{ counter-increment:step; position:relative; padding-left:46px; font-weight:300; color:var(--txt-soft); line-height:1.6; font-size:.95rem; }
ol.blist li::before{ content:counter(step); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%; background:var(--charcoal); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
ol.blist li strong{ color:var(--ink); font-weight:700; }