/* ============================================================
   SKS Bagpipe content pages (files 01-08) - shared styles.
   Extracted from the pack's identical <style> block, scoped
   under #sks-bagpipe so bare element rules never leak into the
   theme. Loaded by main-page.liquid when a page body carries
   id=sks-bagpipe. Two corrupted glyphs fixed: bullet->check,
   FAQ open marker->minus. All rem converted to px @16px
   base (Dawn sets html 62.5%, so rem would render at 62.5%).
   ============================================================ */
#sks-bagpipe {
  /* Live content-page system: how-to-choose-a-kilt reference + sks-header/footer tokens */
  --bg:#EFE9E0; --card:#FBF9F4; --white:#FFFFFF; --ink:#211D17; --body-c:#3E3A33;
  --rust:#B8520A; --rust-deep:#9A4408; --rust-soft:#F3E0D1; --line:#E2DACB;
  --dark-card:#26211B; --cream:#F2EADD; --muted:#7A7266;
}
#sks-bagpipe * {box-sizing:border-box}
#sks-bagpipe {margin:0; background:var(--bg); color:var(--body-c);
  font-family:'Public Sans',system-ui,sans-serif; font-size:16.5px; line-height:1.7}
#sks-bagpipe .wrap {max-width:1010px; margin:0 auto; padding:0 22px}
#sks-bagpipe .tartan-thread {display:none}
#sks-bagpipe .crumbs {font-size:13.12px; padding:16px 0 0; color:var(--muted)}
#sks-bagpipe .crumbs a {color:inherit; text-decoration:none}
#sks-bagpipe .crumbs a:hover {color:var(--rust)}
#sks-bagpipe .hero {padding:38px 0 6px; text-align:center; max-width:760px; margin:0 auto}
#sks-bagpipe .eyebrow {letter-spacing:.18em; text-transform:uppercase; font-size:11.52px; color:var(--rust); font-weight:700; margin:0 0 16px}
#sks-bagpipe h1 {font-family:'Fraunces',serif; font-weight:600; font-size:clamp(33.6px,4.8vw,51.2px);
  line-height:1.12; color:var(--ink); margin:0 0 18px; text-wrap:balance}
#sks-bagpipe .meta-line {font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 26px}
#sks-bagpipe .meta-line b {color:var(--rust); font-weight:700}
#sks-bagpipe .answer-card {background:transparent; border:0; padding:0 6px; margin:0 auto 10px; max-width:640px}
#sks-bagpipe .answer-card p {margin:0; font-size:16.96px; color:var(--body-c)}
#sks-bagpipe .answer-card strong {font-weight:500}
#sks-bagpipe /* On this page TOC */
.toc {background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:22px 26px; margin:26px auto 8px; max-width:720px; text-align:left}
#sks-bagpipe .toc .toc-title {letter-spacing:.18em; text-transform:uppercase; font-size:11.2px; color:var(--rust); font-weight:700; margin:0 0 12px}
#sks-bagpipe .toc ol {list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 28px}
#sks-bagpipe .toc li {margin:0; font-size:15.2px}
#sks-bagpipe .toc .n {color:var(--rust); font-weight:700; font-size:12.8px; margin-right:8px}
#sks-bagpipe .toc a {color:var(--ink); text-decoration:none; font-weight:500}
#sks-bagpipe .toc a:hover {color:var(--rust)}
#sks-bagpipe .step-eyebrow {letter-spacing:.18em; text-transform:uppercase; font-size:11.52px; color:var(--rust); font-weight:700; margin:46px 0 4px; text-align:left}
#sks-bagpipe h2 {font-family:'Fraunces',serif; font-weight:600; font-size:clamp(24px,3vw,32px); color:var(--ink); margin:6px 0 10px; line-height:1.18; scroll-margin-top:24px}
#sks-bagpipe h3 {font-family:'Fraunces',serif; font-weight:600; font-size:18.88px; color:var(--ink); margin:26px 0 6px}
#sks-bagpipe p {margin:12px 0; max-width:70ch}
#sks-bagpipe ol {padding-left:24px; margin:12px 0}
#sks-bagpipe ol li {margin:9px 0}
#sks-bagpipe ol li::marker {color:var(--rust); font-weight:700}
#sks-bagpipe ul {list-style:none; padding-left:0; margin:14px 0}
#sks-bagpipe ul li {margin:11px 0; padding-left:32px; position:relative}
#sks-bagpipe ul li::before {content:"✓"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:var(--rust-soft); color:var(--rust); font-size:11.52px; font-weight:700; display:grid; place-items:center}
#sks-bagpipe li strong {color:var(--ink)}
#sks-bagpipe a {color:var(--rust); text-decoration:underline; text-decoration-color:var(--rust); text-underline-offset:3px; font-weight:500}
#sks-bagpipe a:hover {color:var(--rust-deep)}
#sks-bagpipe a:focus-visible, #sks-bagpipe button:focus-visible, #sks-bagpipe summary:focus-visible {outline:2px solid var(--rust); outline-offset:2px}

#sks-bagpipe /* module */
.module {border:1px solid var(--line); background:var(--white); margin:34px 0 8px; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(33,29,23,.04)}
#sks-bagpipe .module-head {background:var(--cream); color:var(--ink); border-bottom:1px solid var(--line); padding:16px 22px; font-family:'Fraunces',serif; font-weight:600; font-size:20px}
#sks-bagpipe .module-body {padding:22px}
#sks-bagpipe .tabs {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none}
#sks-bagpipe .tab-btn {border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:inherit; font-weight:600; font-size:14.72px; padding:9px 20px; cursor:pointer; border-radius:999px}
#sks-bagpipe .tab-btn[aria-selected="true"] {background:var(--rust); border-color:var(--rust); color:#fff}
#sks-bagpipe .tab-btn:hover {border-color:var(--rust)}
.js #sks-bagpipe .panel[hidden] {display:none}
#sks-bagpipe .panel > :first-child {margin-top:0}
body:not(.js) #sks-bagpipe .panel::before {content:attr(data-label); display:block; font-weight:700; color:var(--rust); margin:14px 0 4px; text-transform:uppercase; font-size:11.52px; letter-spacing:.16em}
#sks-bagpipe .stepper .tab-btn {display:flex; align-items:center; gap:8px}
#sks-bagpipe .step-num {display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--rust-soft); color:var(--rust); font-size:12.16px; font-weight:700; flex:none}
#sks-bagpipe .tab-btn[aria-selected="true"] .step-num {background:#fff; color:var(--rust)}
#sks-bagpipe .check-item {display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line);
  border-radius:10px; margin:10px 0; cursor:pointer; background:var(--card)}
#sks-bagpipe .check-item:hover {border-color:var(--rust)}
#sks-bagpipe .check-item input {width:19px; height:19px; accent-color:var(--rust); margin-top:2px; flex:none}
#sks-bagpipe .check-item span {font-size:15.52px}
#sks-bagpipe .verdict {margin-top:16px; padding:16px 18px; border-radius:10px; font-weight:600; background:var(--cream); border-left:4px solid var(--line); color:var(--ink)}
#sks-bagpipe .verdict.ready {border-left-color:var(--rust); background:var(--rust-soft)}
#sks-bagpipe .verdict.wait {border-left-color:var(--muted)}
#sks-bagpipe .cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
#sks-bagpipe .card {border:1px solid var(--line); padding:20px; background:var(--card); border-radius:12px}
#sks-bagpipe .card h3 {margin:0 0 8px; font-size:18.4px}
#sks-bagpipe .card p {margin:8px 0 0; font-size:15.04px; max-width:none}
#sks-bagpipe .card .tag {display:inline-block; font-size:10.88px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--rust); background:var(--rust-soft); padding:4px 10px; border-radius:999px; margin-bottom:10px}

#sks-bagpipe /* FAQ */
details {border:0; border-bottom:1px solid var(--line); background:transparent; margin:0; border-radius:0}
#sks-bagpipe details[open] {background:transparent}
#sks-bagpipe summary {cursor:pointer; padding:18px 4px; font-family:'Fraunces',serif; font-weight:600; font-size:17.28px; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
#sks-bagpipe summary::-webkit-details-marker {display:none}
#sks-bagpipe summary::after {content:"+"; font-size:22.4px; color:var(--rust); line-height:1; flex:none; font-weight:400}
#sks-bagpipe details[open] summary::after {content:"−"}
#sks-bagpipe .faq-a {padding:0 4px 18px}
#sks-bagpipe .faq-a p {margin:0; max-width:none}

#sks-bagpipe /* dark CTA card */
.cta-band {background:var(--dark-card); color:#EDE6DA; padding:44px 30px; margin:54px auto 0; text-align:center; border-radius:16px; max-width:880px}
#sks-bagpipe .cta-lede {font-family:'Fraunces',serif; font-weight:600; font-size:clamp(24px,3vw,32px); margin:0 0 10px; color:#fff}
#sks-bagpipe .cta-band a {display:inline-block; margin:10px 8px 0; padding:13px 30px; font-weight:600; text-decoration:none; font-size:15.52px; border-radius:999px}
#sks-bagpipe .btn-primary {background:var(--rust); color:#fff!important; border:1px solid var(--rust)}
#sks-bagpipe .btn-primary:hover {background:var(--rust-deep)}
#sks-bagpipe .btn-secondary {border:1px solid rgba(237,230,218,.55); color:#EDE6DA!important; background:transparent}
#sks-bagpipe .btn-secondary:hover {border-color:#EDE6DA}

#sks-bagpipe /* related guides */
.related {margin:52px 0 0; text-align:center}
#sks-bagpipe .related .eyebrow {margin-bottom:8px}
#sks-bagpipe .related h2 {margin-top:0}
#sks-bagpipe .related h2::after {display:none}
#sks-bagpipe .rel-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:22px; text-align:left}
#sks-bagpipe .rel-card {background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px}
#sks-bagpipe .rel-card h3 {margin:0 0 8px; font-size:17.92px}
#sks-bagpipe .rel-card p {font-size:14.72px; margin:0 0 14px; max-width:none}
#sks-bagpipe .rel-card a {font-size:12.48px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; text-decoration:none}
#sks-bagpipe footer.site {padding:26px 0 30px; font-size:13.6px; color:var(--muted); text-align:center}

@media (max-width:640px){
  #sks-bagpipe {font-size:15.5px}
  #sks-bagpipe .toc ol {grid-template-columns:1fr}
  #sks-bagpipe .cta-band a {display:block; margin:10px auto 0; max-width:320px}
  #sks-bagpipe .tab-btn {padding:8px 14px; font-size:13.76px}
}
@media (prefers-reduced-motion:no-preference){
  .js #sks-bagpipe .panel:not([hidden]) {animation:fade .2s ease}
  @keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
}