/*
Theme Name: RoofGazers
Theme URI: https://roofgazers.com/
Author: RoofGazers
Description: A notebook-style WordPress theme for SEE, THINK, BUILD, PLAY and TOOL with interactive category stages and automatic post categorisation.
Version: 5.2.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: roofgazers
*/

:root{
  --rg-blue:#1458d8;
  --rg-green:#63b83f;
  --rg-purple:#8b62e8;
  --rg-orange:#ee8614;
  --rg-pink:#e96891;
  --rg-tool:#3185d5;
  --rg-ink:#111;
  --rg-paper:#fffefb;
  --rg-line:rgba(75,126,220,.19);
  --rg-margin:rgba(240,90,125,.52);
  --rg-max:1440px;
  --rg-hand:"Patrick Hand","Comic Sans MS","Bradley Hand","Segoe Print",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{font-size:clamp(15px,0.82vw + 7px,20px)}
body{
  margin:0;color:var(--rg-ink);font-family:var(--rg-hand);font-size:1rem;
  background:
    linear-gradient(to right,transparent 0,transparent 56px,var(--rg-margin) 57px,var(--rg-margin) 59px,transparent 60px),
    repeating-linear-gradient(to bottom,var(--rg-paper) 0,var(--rg-paper) 41px,var(--rg-line) 42px,var(--rg-paper) 43px);
  min-height:100vh;overflow-x:hidden;
}
body.admin-bar .rg-site-header{top:32px}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
img{max-width:100%;height:auto}
.rg-shell{width:min(92vw,1440px);margin-inline:auto;padding-inline:clamp(10px,1.4vw,22px)}
.rg-site-header{position:relative;z-index:10}
.rg-topbar{min-height:clamp(70px,7vh,96px);display:flex;align-items:center;gap:clamp(28px,3vw,52px);color:var(--rg-blue);padding-top:8px}
.rg-brand{font-size:clamp(1.9rem,2.15vw,2.8rem);letter-spacing:-.06em;white-space:nowrap}
.rg-toplinks{display:flex;gap:clamp(24px,2.4vw,42px);font-size:clamp(1rem,1.18vw,1.4rem)}
.rg-toplinks a,.rg-post-title a{position:relative}
.rg-toplinks a:after,.rg-post-title a:after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:currentColor;transition:right .18s}
.rg-toplinks a:hover:after,.rg-post-title a:hover:after{right:0}

.rg-mainnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,34px);padding:clamp(12px,1.3vh,20px) 0 clamp(20px,2.2vh,32px)}
.rg-navitem{display:flex;flex-direction:column;align-items:center;color:var(--rg-blue);transition:transform .16s}
.rg-navitem:hover{transform:translateY(-4px)}
.rg-nav-icon{height:clamp(50px,4.7vw,72px);display:grid;place-items:center;margin-bottom:5px}
.rg-nav-icon svg{width:clamp(50px,4.7vw,72px);height:clamp(50px,4.7vw,72px);stroke:currentColor;fill:none;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.rg-nav-dot{width:8px;height:8px;border-radius:50%;margin:0 0 4px}
.rg-nav-label{font-size:clamp(1.5rem,2.15vw,2.55rem);line-height:1;letter-spacing:-.05em}
.rg-nav-underline{width:56px;height:3px;border-radius:999px;margin-top:8px}
.rg-nav-arrow{font-size:1.55rem;line-height:1}
.rg-see .rg-nav-dot,.rg-see .rg-nav-underline{background:var(--rg-green)}
.rg-think .rg-nav-dot,.rg-think .rg-nav-underline{background:var(--rg-purple)}
.rg-build .rg-nav-dot,.rg-build .rg-nav-underline{background:var(--rg-orange)}
.rg-play .rg-nav-dot,.rg-play .rg-nav-underline{background:var(--rg-pink)}
.rg-tool .rg-nav-dot,.rg-tool .rg-nav-underline{background:var(--rg-tool)}
.rg-navitem.is-current .rg-nav-underline{height:4px;width:66px}

.rg-home-hero{min-height:calc(100svh - 235px);display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);align-items:center;gap:clamp(36px,5vw,84px);padding:clamp(28px,4vh,58px) 0 clamp(46px,7vh,92px)}
.rg-home-copy{max-width:520px}
.rg-home-copy h1{font-weight:600;font-size:clamp(2rem,3.5vw,3.25rem);line-height:1.28;letter-spacing:-.045em;margin:0}
.rg-underline{display:inline-block;position:relative}
.rg-underline:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--rg-blue);transform:rotate(-.6deg)}
.rg-home-arrow{display:block;color:var(--rg-blue);font-size:2rem;margin-top:24px}
.rg-guitar-stage{position:relative;min-height:520px;display:grid;place-items:center}
.rg-guitar{width:min(370px,72vw);transform:rotate(5deg);filter:drop-shadow(0 2px 0 rgba(0,0,0,.08))}
.rg-guitar path,.rg-guitar line,.rg-guitar ellipse,.rg-guitar rect{stroke:#1a1a1a;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rg-guitar .rg-hole{fill:#161616}
.rg-chords{position:absolute;left:0;top:80px;max-width:205px}
.rg-chords p{margin:0 0 8px;line-height:1.08}
.rg-chord-btn{border:1.6px solid rgba(20,88,216,.5);background:rgba(255,255,255,.8);color:var(--rg-blue);border-radius:50%;width:38px;height:38px;margin:2px;cursor:pointer}
.rg-chord-btn.is-active{background:var(--rg-blue);color:#fff}
.rg-strum-hint{display:inline-block;color:var(--rg-blue);margin-left:8px}
.rg-guitar-hit{position:absolute;inset:0;cursor:ns-resize}

.rg-category-hero{min-height:clamp(500px,58vh,720px);display:grid;grid-template-columns:minmax(320px,.9fr) minmax(430px,1.1fr);gap:clamp(38px,5vw,82px);align-items:center;padding:clamp(36px,5vh,70px) 0 clamp(50px,7vh,90px)}
.rg-category-copy h1{font-size:clamp(2rem,3.6vw,3.35rem);line-height:1.25;margin:0;font-weight:600;max-width:520px}
.rg-stage{position:relative;min-height:clamp(390px,42vw,560px)}
.rg-stage-caption{position:absolute;right:3%;top:2%;z-index:4;font-size:1.28rem;line-height:1.05;transform:rotate(2deg)}
.rg-stage-caption:after{content:"↘";display:block;margin-left:55px;font-size:1.9rem}
.rg-custom-media{position:absolute;inset:50px 4% 20px 4%;display:grid;place-items:center;pointer-events:none}
.rg-custom-media img,.rg-custom-media video{max-height:330px;object-fit:contain}
.rg-stage-canvas{position:absolute;inset:0}
.rg-stage[data-kind="think"] .rg-stage-canvas{color:var(--rg-purple)}
.rg-stage[data-kind="see"] .rg-stage-canvas{color:var(--rg-green)}
.rg-stage[data-kind="build"] .rg-stage-canvas{color:var(--rg-orange)}
.rg-stage[data-kind="play"] .rg-stage-canvas{color:var(--rg-pink)}
.rg-stage[data-kind="tool"] .rg-stage-canvas{color:var(--rg-tool)}

.rg-think-node{position:absolute;width:88px;height:88px;border:2px solid currentColor;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;text-align:center;padding:6px;cursor:pointer;z-index:3;transition:transform .16s,box-shadow .16s}
.rg-think-node:hover,.rg-think-node.is-active{transform:scale(1.08);box-shadow:0 0 0 5px color-mix(in srgb,currentColor 15%,transparent)}
.rg-think-node.center{width:110px;height:110px;border-width:3px}
.rg-think-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rg-think-lines line{stroke:currentColor;stroke-width:1.6;opacity:.68}

.rg-see-sketch{position:absolute;inset:45px 2% 10px;display:grid;place-items:center}
.rg-leaf-svg{width:min(520px,92%);overflow:visible}
.rg-leaf-svg *{stroke:#1b1b1b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rg-leaf-body{fill:#f7bd4a}
.rg-leaf-eye{fill:#fff}
.rg-leaf-blue{stroke:var(--rg-blue)!important}
.rg-magnifier{position:absolute;width:76px;height:76px;border:4px solid var(--rg-blue);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);display:none;background:rgba(255,255,255,.35);backdrop-filter:brightness(1.08)}
.rg-see-sketch:hover .rg-magnifier{display:block}

.rg-blocks{position:absolute;inset:55px 8% 30px;display:flex;align-items:center;justify-content:center;gap:8px}
.rg-block{width:78px;height:78px;border:3px solid currentColor;background:rgba(255,255,255,.88);display:grid;place-items:center;cursor:pointer;transition:.2s}
.rg-block:hover{transform:translateY(-18px) rotate(3deg)}
.rg-paper-plane{position:absolute;width:180px;height:130px;left:22%;top:42%;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.rg-paper-plane svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:3}
.rg-stage:hover .rg-paper-plane{transform:translate(160px,-80px) rotate(-12deg)}
.rg-tool-sketch{position:absolute;inset:50px 7% 25px;display:grid;place-items:center}
.rg-wrench{width:230px;transition:transform .25s;cursor:pointer}
.rg-wrench:hover{transform:rotate(15deg)}
.rg-wrench path,.rg-wrench circle{stroke:currentColor;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

.rg-section{padding:clamp(38px,5vh,72px) 0 clamp(50px,7vh,96px)}
.rg-section-number{width:60px;height:60px;border:3px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;position:relative;margin-bottom:24px}
.rg-section-number:after{content:"";position:absolute;inset:4px -4px -3px 2px;border:1.4px solid currentColor;border-radius:47% 53% 45% 55%;transform:rotate(-7deg)}
.rg-section-title{font-size:clamp(2rem,4vw,3.05rem);line-height:1;letter-spacing:-.05em;margin:0 0 17px;font-weight:500;color:currentColor}
.rg-section-intro{max-width:760px;font-size:clamp(1.2rem,2.1vw,1.8rem);line-height:1.45;margin:0 0 36px;color:var(--rg-ink)}
.rg-post-list{border-top:1.5px solid color-mix(in srgb,currentColor 45%,transparent)}
.rg-post-item{display:grid;grid-template-columns:18px minmax(0,1fr) auto 36px;gap:14px;align-items:center;min-height:clamp(78px,7vh,104px);border-bottom:1.5px solid color-mix(in srgb,currentColor 28%,transparent);transition:padding-left .16s,background .16s}
.rg-post-item:hover{padding-left:10px;background:color-mix(in srgb,currentColor 4%,transparent)}
.rg-post-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.rg-post-title{font-size:clamp(1.05rem,1.65vw,1.35rem);color:var(--rg-ink)}
.rg-post-date{color:#666;font-size:.98rem;white-space:nowrap}
.rg-post-arrow{font-size:1.7rem}
.rg-empty{color:#777;font-style:italic;padding:22px 0}

.rg-article{max-width:860px;margin:45px auto 80px;padding:0 8px}
.rg-article-kicker{color:var(--rg-blue);font-size:1.1rem;margin-bottom:10px}
.rg-article h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.05;margin:.15em 0 .25em}
.rg-article-meta{color:#666;margin-bottom:34px}
.rg-article-content{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:1.08rem;line-height:1.75}
.rg-article-content h2,.rg-article-content h3{font-family:var(--rg-hand);color:var(--rg-blue)}
.rg-article-content a{text-decoration:underline;color:var(--rg-blue)}
.rg-article-content blockquote{border-left:3px solid var(--rg-blue);margin-left:0;padding-left:22px}
.rg-article-nav{display:flex;justify-content:space-between;gap:24px;margin-top:55px;color:var(--rg-blue);font-family:var(--rg-hand);font-size:1.35rem}

.rg-footer{padding:40px 0 28px;text-align:center;color:var(--rg-blue)}
.rg-footer-nav{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-size:1.2rem}
.rg-footer small{display:block;margin-top:20px;color:#777}

.rg-accent-see{color:var(--rg-green)}
.rg-accent-think{color:var(--rg-purple)}
.rg-accent-build{color:var(--rg-orange)}
.rg-accent-play{color:var(--rg-pink)}
.rg-accent-tool{color:var(--rg-tool)}


/* Fluid viewport tuning */

@media (min-width:901px) and (max-width:1200px){
  .rg-shell{width:94vw;padding-inline:12px}
  .rg-home-hero,.rg-category-hero{grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);gap:34px}
  .rg-nav-label{font-size:clamp(1.35rem,2.4vw,2rem)}
  .rg-nav-icon,.rg-nav-icon svg{width:50px;height:50px}
}

@media(max-width:900px){
  .rg-home-hero,.rg-category-hero{grid-template-columns:1fr;gap:22px;min-height:auto}
  .rg-guitar-stage,.rg-stage{min-height:430px}
  .rg-chords{left:8%;top:34px}
}
@media(max-width:700px){
  body{
    background:
      linear-gradient(to right,transparent 0,transparent 23px,var(--rg-margin) 24px,var(--rg-margin) 26px,transparent 27px),
      repeating-linear-gradient(to bottom,var(--rg-paper) 0,var(--rg-paper) 35px,var(--rg-line) 36px,var(--rg-paper) 37px)
  }
  body.admin-bar .rg-site-header{top:46px}
  .rg-shell{width:calc(100% - 34px);margin-left:26px;margin-right:8px;padding-inline:4px}
  .rg-topbar{display:block;padding:18px 0 8px}
  .rg-brand{display:block;margin-bottom:10px}
  .rg-toplinks{gap:22px;flex-wrap:wrap}
  .rg-mainnav{grid-template-columns:repeat(5,minmax(66px,1fr));overflow-x:auto;gap:7px}
  .rg-nav-icon,.rg-nav-icon svg{width:42px;height:42px}
  .rg-nav-label{font-size:1.2rem}
  .rg-home-hero,.rg-category-hero{padding:30px 3px 48px}
  .rg-guitar-stage{min-height:470px}
  .rg-chords{left:0;top:8px}
  .rg-guitar{width:min(330px,82vw);margin-top:70px}
  .rg-stage{min-height:395px}
  .rg-think-node{width:68px;height:68px;font-size:.82rem}
  .rg-think-node.center{width:85px;height:85px}
  .rg-section{padding-left:3px;padding-right:3px}
  .rg-post-item{grid-template-columns:15px 1fr 28px;min-height:96px}
  .rg-post-date{grid-column:2;grid-row:2;font-size:.86rem}
  .rg-post-arrow{grid-column:3;grid-row:1/3}
  .rg-article{padding-left:3px;padding-right:3px}
}


/* ==========================================================
   ROOFGAZERS 2.0 — predictable screen-filling responsive layout
   No transform/zoom scaling. Content uses the browser viewport.
   ========================================================== */
html{font-size:16px}
body{font-size:18px}

.rg-shell{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:clamp(48px,10vw,180px);
  padding-right:clamp(48px,10vw,180px);
}

.rg-topbar{
  min-height:72px;
  gap:44px;
}
.rg-brand{font-size:2rem}
.rg-toplinks{font-size:1.15rem}

.rg-mainnav{
  width:100%;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(20px,4vw,70px);
  padding:12px 0 24px;
}
.rg-nav-icon,.rg-nav-icon svg{width:58px;height:58px}
.rg-nav-label{font-size:2rem}

.rg-home-hero,
.rg-category-hero{
  width:100%;
  min-height:0;
  height:auto;
  grid-template-columns:minmax(340px,42%) minmax(440px,58%);
  gap:clamp(40px,6vw,110px);
  padding:clamp(42px,6vh,72px) 0 clamp(54px,7vh,90px);
}

.rg-home-copy,
.rg-category-copy{
  max-width:560px;
}
.rg-home-copy h1,
.rg-category-copy h1{
  font-size:clamp(2.25rem,3.2vw,3.7rem);
  line-height:1.18;
}

.rg-guitar-stage,
.rg-stage{
  min-height:0;
  height:clamp(390px,45vh,540px);
}
.rg-guitar{width:clamp(280px,24vw,390px)}

.rg-section{
  width:100%;
  padding:clamp(32px,4vh,54px) 0 clamp(52px,7vh,86px);
}
.rg-section-title{font-size:clamp(2rem,3vw,3rem)}
.rg-section-intro{
  max-width:900px;
  font-size:clamp(1.25rem,1.6vw,1.65rem);
}
.rg-post-item{min-height:72px}

.rg-footer{
  padding-left:clamp(48px,10vw,180px);
  padding-right:clamp(48px,10vw,180px);
}

/* Standard laptop */
@media (min-width:901px) and (max-width:1400px){
  .rg-shell{
    padding-left:clamp(50px,7vw,100px);
    padding-right:clamp(50px,7vw,100px);
  }
  .rg-category-hero,.rg-home-hero{
    grid-template-columns:minmax(300px,42%) minmax(390px,58%);
    gap:45px;
    padding-top:38px;
    padding-bottom:55px;
  }
  .rg-guitar-stage,.rg-stage{height:410px}
  .rg-nav-label{font-size:1.75rem}
}

/* Tablet / narrow browser */
@media (max-width:900px){
  .rg-shell{
    width:100%;
    padding-left:42px;
    padding-right:24px;
    margin:0;
  }
  .rg-topbar{display:flex}
  .rg-mainnav{
    gap:12px;
    overflow-x:auto;
  }
  .rg-home-hero,.rg-category-hero{
    grid-template-columns:1fr;
    height:auto;
    gap:18px;
  }
  .rg-guitar-stage,.rg-stage{
    height:420px;
  }
}

/* Phone */
@media (max-width:620px){
  .rg-shell{
    width:100%;
    padding-left:32px;
    padding-right:12px;
    margin:0;
  }
  .rg-topbar{
    display:block;
    padding-top:16px;
  }
  .rg-brand{font-size:1.75rem}
  .rg-toplinks{font-size:1rem}
  .rg-mainnav{
    grid-template-columns:repeat(5,minmax(68px,1fr));
    gap:6px;
  }
  .rg-nav-icon,.rg-nav-icon svg{width:40px;height:40px}
  .rg-nav-label{font-size:1.15rem}
  .rg-home-hero,.rg-category-hero{
    padding:28px 0 44px;
  }
  .rg-home-copy h1,.rg-category-copy h1{
    font-size:2.15rem;
  }
  .rg-guitar-stage,.rg-stage{
    height:390px;
  }
  .rg-section{
    padding-top:26px;
  }
}


/* ==========================================================
   ROOFGAZERS 2.1 — LIVE SITE LAYOUT LOCK
   Keep the same visual scale as the Customizer preview.
   ========================================================== */
@media (min-width: 901px) {
  .rg-shell{
    width:min(1240px, calc(100vw - 72px)) !important;
    max-width:1240px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .rg-site-header .rg-shell{
    width:min(1240px, calc(100vw - 72px)) !important;
  }

  .rg-topbar{
    min-height:70px !important;
  }

  .rg-mainnav{
    width:100% !important;
    gap:28px !important;
  }

  .rg-home-hero,
  .rg-category-hero{
    width:100% !important;
    grid-template-columns: 42% 58% !important;
    gap:52px !important;
    padding-top:42px !important;
    padding-bottom:58px !important;
  }

  .rg-home-copy h1,
  .rg-category-copy h1{
    font-size:clamp(2.25rem, 3vw, 3.35rem) !important;
  }

  .rg-guitar-stage,
  .rg-stage{
    height:460px !important;
  }

  .rg-section{
    width:100% !important;
    padding-top:34px !important;
  }

  .rg-footer .rg-shell{
    width:min(1240px, calc(100vw - 72px)) !important;
  }
}

/* Large monitors should NOT shrink the content.
   Keep the same readable composition and simply add outer whitespace. */
@media (min-width: 1450px) {
  .rg-shell,
  .rg-site-header .rg-shell,
  .rg-footer .rg-shell{
    width:1240px !important;
  }
}

/* Standard laptops */
@media (min-width: 901px) and (max-width: 1150px) {
  .rg-shell,
  .rg-site-header .rg-shell,
  .rg-footer .rg-shell{
    width:calc(100vw - 48px) !important;
  }

  .rg-home-hero,
  .rg-category-hero{
    grid-template-columns: 40% 60% !important;
    gap:30px !important;
  }

  .rg-guitar-stage,
  .rg-stage{
    height:410px !important;
  }
}


/* ==========================================================
   ROOFGAZERS 2.2 — LARGE-SCALE FRONTEND
   ========================================================== */
@media (min-width:901px){
  body{font-size:22px !important}

  .rg-shell,
  .rg-site-header .rg-shell,
  .rg-footer .rg-shell{
    width:min(1380px, calc(100vw - 90px)) !important;
    max-width:1380px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .rg-topbar{min-height:92px !important;gap:56px !important}
  .rg-brand{font-size:42px !important}
  .rg-toplinks{gap:44px !important;font-size:24px !important}

  .rg-mainnav{gap:38px !important;padding:20px 0 34px !important}
  .rg-nav-icon,.rg-nav-icon svg{width:82px !important;height:82px !important}
  .rg-nav-dot{width:11px !important;height:11px !important;margin-bottom:7px !important}
  .rg-nav-label{font-size:42px !important}
  .rg-nav-underline{width:78px !important;height:4px !important;margin-top:10px !important}
  .rg-nav-arrow{font-size:30px !important}

  .rg-home-hero,.rg-category-hero{
    grid-template-columns:42% 58% !important;
    gap:72px !important;
    padding-top:54px !important;
    padding-bottom:72px !important;
  }

  .rg-home-copy,.rg-category-copy{max-width:650px !important}
  .rg-home-copy h1,.rg-category-copy h1{
    font-size:58px !important;
    line-height:1.15 !important;
  }

  .rg-home-arrow{font-size:42px !important;margin-top:26px !important}
  .rg-guitar-stage,.rg-stage{height:560px !important}
  .rg-guitar{width:420px !important}

  .rg-chords{max-width:300px !important;left:0 !important;top:70px !important}
  .rg-chords p{font-size:24px !important}
  .rg-chord-btn{width:48px !important;height:48px !important;font-size:20px !important}

  .rg-stage-caption{font-size:24px !important}
  .rg-leaf-svg{width:min(760px,96%) !important}
  .rg-think-node{width:110px !important;height:110px !important;font-size:22px !important}
  .rg-think-node.center{width:138px !important;height:138px !important}
  .rg-block{width:104px !important;height:104px !important;font-size:21px !important}
  .rg-paper-plane{width:240px !important}
  .rg-wrench{width:300px !important}

  .rg-section{padding-top:46px !important;padding-bottom:90px !important}
  .rg-section-number{width:72px !important;height:72px !important;font-size:28px !important;margin-bottom:26px !important}
  .rg-section-title{font-size:52px !important;margin-bottom:20px !important}
  .rg-section-intro{
    max-width:980px !important;
    font-size:28px !important;
    line-height:1.4 !important;
    margin-bottom:36px !important;
  }

  .rg-post-item{
    min-height:92px !important;
    grid-template-columns:22px minmax(0,1fr) auto 48px !important;
  }
  .rg-post-dot{width:10px !important;height:10px !important}
  .rg-post-title{font-size:25px !important}
  .rg-post-date{font-size:20px !important}
  .rg-post-arrow{font-size:34px !important}

  .rg-footer{padding-top:48px !important}
  .rg-footer-nav{font-size:24px !important;gap:30px !important}
  .rg-footer small{font-size:16px !important}
}

@media (min-width:1500px){
  .rg-shell,
  .rg-site-header .rg-shell,
  .rg-footer .rg-shell{
    width:1380px !important;
  }
}

@media (min-width:901px) and (max-width:1200px){
  .rg-brand{font-size:34px !important}
  .rg-toplinks{font-size:20px !important}
  .rg-nav-icon,.rg-nav-icon svg{width:66px !important;height:66px !important}
  .rg-nav-label{font-size:34px !important}
  .rg-home-copy h1,.rg-category-copy h1{font-size:46px !important}
  .rg-guitar-stage,.rg-stage{height:470px !important}
  .rg-guitar{width:350px !important}
  .rg-section-title{font-size:44px !important}
  .rg-section-intro{font-size:24px !important}
}

@media (max-width:900px){
  body{font-size:18px !important}
}


/* ==========================================================
   ROOFGAZERS 2.3 — INTERACTION TUNING
   Captions sit near their objects; guitar strings are pickable.
   ========================================================== */

/* Keep helper captions attached to the interactive object instead
   of floating at the far edge of the stage. */
.rg-stage-caption{
  right:auto !important;
  top:auto !important;
  z-index:8 !important;
  white-space:nowrap;
  pointer-events:none;
}

/* SEE — caption just above/right of the leaf */
.rg-stage[data-kind="see"] .rg-stage-caption{
  left:64% !important;
  top:17% !important;
  transform:rotate(2deg) !important;
}

/* THINK — caption above the network */
.rg-stage[data-kind="think"] .rg-stage-caption{
  left:66% !important;
  top:11% !important;
  transform:rotate(2deg) !important;
}

/* BUILD — caption above the blocks */
.rg-stage[data-kind="build"] .rg-stage-caption{
  left:61% !important;
  top:20% !important;
  transform:rotate(1deg) !important;
}

/* PLAY — caption travels with the paper plane */
.rg-stage[data-kind="play"] .rg-stage-caption{
  left:61% !important;
  top:20% !important;
  transform:rotate(2deg) !important;
}

/* TOOL — caption above the wrench */
.rg-stage[data-kind="tool"] .rg-stage-caption{
  left:61% !important;
  top:17% !important;
  transform:rotate(1deg) !important;
}

.rg-stage-caption:after{
  margin-left:28px !important;
  margin-top:-2px !important;
}

/* Make BUILD pieces truly draggable-looking and a little playful. */
.rg-blocks{z-index:3}
.rg-block{
  user-select:none;
  touch-action:none;
  cursor:grab !important;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.rg-block:active{cursor:grabbing !important}

/* PLAY plane reacts to pointer and caption stays visually close. */
.rg-paper-plane{
  z-index:4;
  transform-origin:50% 50%;
}

/* Guitar interaction layer */
.rg-guitar-stage{
  overflow:visible;
}
.rg-guitar{
  overflow:visible;
  position:relative;
  z-index:3;
}
.rg-guitar-hit{
  pointer-events:none !important;
}

/* Individual SVG string hit zones */
.rg-string-hit{
  stroke:transparent !important;
  stroke-width:18 !important;
  fill:none !important;
  pointer-events:stroke !important;
  cursor:pointer;
}
.rg-string-visible{
  pointer-events:none;
}

/* Musical note particles */
.rg-note-particle{
  position:fixed;
  left:0;
  top:0;
  z-index:99999;
  pointer-events:none;
  font-family:var(--rg-hand);
  font-size:clamp(28px,3vw,48px);
  font-weight:700;
  line-height:1;
  transform:translate(-50%,-50%);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  animation:rg-note-float 1150ms cubic-bezier(.16,.8,.32,1) forwards;
}
@keyframes rg-note-float{
  0%{
    opacity:0;
    transform:translate(-50%,-20%) scale(.65) rotate(-8deg);
  }
  15%{
    opacity:1;
  }
  70%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--drift-x)),calc(-50% - 125px)) scale(1.25) rotate(var(--spin));
  }
}

/* Small visual pulse on picked string */
.rg-string-flash{
  animation:rg-string-flash .28s ease-out;
}
@keyframes rg-string-flash{
  0%{stroke:#1458d8;stroke-width:5}
  100%{stroke:#1a1a1a;stroke-width:2.2}
}

/* Chord controls feel clickable */
.rg-chord-btn{
  position:relative;
  z-index:10;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.rg-chord-btn:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 4px 0 rgba(20,88,216,.12);
}
.rg-chord-btn:active{transform:translateY(0) scale(.98)}

/* Mobile/tablet caption positions */
@media(max-width:900px){
  .rg-stage[data-kind="see"] .rg-stage-caption,
  .rg-stage[data-kind="think"] .rg-stage-caption,
  .rg-stage[data-kind="build"] .rg-stage-caption,
  .rg-stage[data-kind="play"] .rg-stage-caption,
  .rg-stage[data-kind="tool"] .rg-stage-caption{
    left:auto !important;
    right:4% !important;
    top:7% !important;
  }
}


/* ==========================================================
   ROOFGAZERS 2.4 — SEE / THINK / BUILD INTERACTIONS
   Guitar, PLAY and TOOL remain unchanged from 2.3.
   ========================================================== */

/* SEE — true magnifier */
.rg-see-sketch{overflow:visible}
.rg-magnifier{
  width:112px !important;
  height:112px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:4px solid var(--rg-blue) !important;
  box-shadow:0 4px 0 rgba(20,88,216,.12);
  z-index:20;
}
.rg-magnifier:after{
  content:"";
  position:absolute;
  width:58px;
  height:5px;
  background:var(--rg-blue);
  right:-45px;
  bottom:-22px;
  transform:rotate(46deg);
  border-radius:999px;
}
.rg-magnifier-inner{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:50%;
}
.rg-magnifier-inner .rg-leaf-svg{
  position:absolute;
  width:auto !important;
  max-width:none !important;
  pointer-events:none;
  transform-origin:0 0;
}
.rg-ladybug,.rg-ant{pointer-events:none}

/* THINK — cable-and-bulb sketch */
.rg-circuit{
  position:absolute;
  inset:40px 5% 20px 5%;
  overflow:visible;
  color:var(--rg-purple);
}
.rg-cable-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:1;
}
.rg-cable-path{
  fill:none;
  stroke:var(--rg-purple);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:2 7;
}
.rg-bulb{
  position:absolute;
  width:118px;
  height:160px;
  z-index:4;
}
.rg-bulb-1{left:10%;top:8%}
.rg-bulb-2{left:41%;top:2%}
.rg-bulb-3{left:72%;top:10%}
.rg-bulb svg{
  width:100%;
  height:100%;
  overflow:visible;
  stroke:#1a1a1a;
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-bulb-glass{
  fill:rgba(255,255,255,.94);
  transition:fill .2s,filter .2s;
}
.rg-filament{transition:stroke .2s}
.rg-bulb.is-lit .rg-bulb-glass{
  fill:#fff5a8;
  filter:drop-shadow(0 0 10px #ffd84c) drop-shadow(0 0 22px rgba(255,216,76,.7));
}
.rg-bulb.is-lit .rg-filament{stroke:#f1a800}
.rg-bulb.is-lit:before,
.rg-bulb.is-lit:after{
  content:"";
  position:absolute;
  width:25px;
  height:3px;
  background:#f1b500;
  top:42px;
  border-radius:99px;
}
.rg-bulb.is-lit:before{left:-27px;transform:rotate(-18deg)}
.rg-bulb.is-lit:after{right:-27px;transform:rotate(18deg)}
.rg-socket{
  position:absolute;
  left:50%;
  bottom:2px;
  width:26px;
  height:18px;
  border:3px solid var(--rg-purple);
  border-radius:4px 4px 9px 9px;
  transform:translateX(-50%);
  background:#fff;
}
.rg-plug-bank{
  position:absolute;
  left:10%;
  right:10%;
  bottom:3%;
  display:flex;
  justify-content:space-around;
  z-index:6;
}
.rg-cable-plug{
  width:78px;
  height:48px;
  border:0;
  background:transparent;
  color:var(--rg-purple);
  cursor:grab;
  touch-action:none;
  padding:0;
  position:relative;
}
.rg-cable-plug:active{cursor:grabbing}
.rg-cable-plug svg{
  width:100%;
  height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-cable-plug.is-connected{
  color:#f1a800;
}
.rg-circuit.is-all-lit:after{
  content:"✦  ✧  ✦";
  position:absolute;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%) rotate(-4deg);
  color:#f1b500;
  font-size:40px;
  letter-spacing:12px;
  animation:rg-sparkle .8s ease-out both;
}
@keyframes rg-sparkle{
  from{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-4deg)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
}

/* BUILD — empty hand-drawn boxes that snap into stacks */
.rg-stack-zone{
  position:absolute !important;
  inset:48px 6% 22px !important;
  display:block !important;
  border-bottom:3px solid rgba(238,134,20,.35);
}
.rg-stack-block{
  position:absolute !important;
  width:96px !important;
  height:96px !important;
  bottom:0;
  padding:0;
  border:3px solid currentColor !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:none !important;
  cursor:grab !important;
  touch-action:none;
  transition:box-shadow .12s;
}
.rg-stack-block:nth-child(1){left:8%;transform:rotate(-2deg)}
.rg-stack-block:nth-child(2){left:30%;transform:rotate(1.5deg)}
.rg-stack-block:nth-child(3){left:53%;transform:rotate(-1deg)}
.rg-stack-block:nth-child(4){left:76%;transform:rotate(2deg)}
.rg-stack-block:hover{box-shadow:5px 6px 0 rgba(238,134,20,.12) !important}
.rg-stack-block.is-dragging{z-index:30;box-shadow:7px 9px 0 rgba(238,134,20,.15) !important}

@media(max-width:900px){
  .rg-circuit{inset:45px 1% 15px}
  .rg-bulb{width:88px;height:125px}
  .rg-stack-block{width:72px !important;height:72px !important}
  .rg-magnifier{width:92px !important;height:92px !important}
}


/* ==========================================================
   ROOFGAZERS 2.5 — PLAY HANDHELD + TOOLBOX
   Homepage guitar + SEE + THINK + BUILD preserved from v2.4.
   ========================================================== */

/* PLAY — hand-drawn handheld game */
.rg-handheld-game{
  position:absolute;
  inset:30px 2% 10px;
  display:grid;
  place-items:center;
  overflow:visible;
  color:var(--rg-pink);
}
.rg-console-svg{
  width:min(760px,98%);
  overflow:visible;
  stroke:#1a1a1a;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-console-body{fill:rgba(255,255,255,.94)}
.rg-console-screen-frame{fill:#fff}
.rg-console-screen{
  fill:rgba(233,104,145,.045);
  stroke:var(--rg-pink);
}
.rg-game-ground{stroke:var(--rg-pink);stroke-width:2}
.rg-game-star{fill:var(--rg-pink);stroke:none}
.rg-game-player{
  fill:#fff;
  stroke:var(--rg-pink);
  stroke-width:3;
  transition:transform .08s linear;
}
.rg-stick-base{
  fill:#fff;
  stroke:var(--rg-pink);
}
.rg-stick-knob{
  fill:rgba(233,104,145,.12);
  stroke:var(--rg-pink);
  transition:transform .08s linear;
}
.rg-button{
  fill:rgba(233,104,145,.08);
  stroke:var(--rg-pink);
}
.rg-stick-hit{
  position:absolute;
  width:92px;
  height:92px;
  border-radius:50%;
  cursor:grab;
  touch-action:none;
  /* matches the SVG joystick placement */
  left:calc(50% - min(380px,49%) + 67px);
  top:50%;
  transform:translateY(-80px);
  z-index:10;
}
.rg-stick-hit:active{cursor:grabbing}

/* Keep PLAY hint near joystick/console */
.rg-stage[data-kind="play"] .rg-stage-caption{
  left:16% !important;
  top:16% !important;
}

/* TOOL — open sketch toolbox with draggable tools */
.rg-toolbox-scene{
  position:absolute;
  inset:25px 3% 0;
  overflow:visible;
  color:var(--rg-tool);
}
.rg-toolbox-svg{
  position:absolute;
  left:50%;
  bottom:0;
  width:min(720px,96%);
  transform:translateX(-50%);
  overflow:visible;
  stroke:#1a1a1a;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.rg-toolbox-lid{
  fill:rgba(49,133,213,.035);
  stroke:var(--rg-tool);
}
.rg-toolbox-body{
  fill:rgba(255,255,255,.94);
  stroke:var(--rg-tool);
}
.rg-loose-tool{
  position:absolute;
  border:0;
  background:transparent;
  padding:0;
  width:82px;
  height:180px;
  cursor:grab;
  touch-action:none;
  color:var(--rg-tool);
  z-index:6;
  transform-origin:50% 85%;
  transition:filter .12s;
}
.rg-loose-tool:active{cursor:grabbing}
.rg-loose-tool.is-dragging{
  z-index:30;
  filter:drop-shadow(5px 7px 0 rgba(49,133,213,.15));
}
.rg-loose-tool svg{
  width:100%;
  height:100%;
  overflow:visible;
  stroke:currentColor;
  fill:rgba(255,255,255,.96);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-tool-hammer{left:23%;bottom:62px;transform:rotate(-10deg)}
.rg-tool-screwdriver{left:36%;bottom:74px;transform:rotate(6deg)}
.rg-tool-wrench2{left:50%;bottom:68px;transform:rotate(-4deg)}
.rg-tool-ruler{left:63%;bottom:70px;transform:rotate(8deg)}
.rg-tool-pliers{left:74%;bottom:62px;transform:rotate(-8deg)}

.rg-stage[data-kind="tool"] .rg-stage-caption{
  left:68% !important;
  top:13% !important;
}

@media(max-width:900px){
  .rg-stage[data-kind="play"] .rg-stage-caption,
  .rg-stage[data-kind="tool"] .rg-stage-caption{
    left:auto !important;
    right:4% !important;
    top:6% !important;
  }

  .rg-console-svg{width:100%}
  .rg-stick-hit{
    width:72px;
    height:72px;
    left:11%;
    top:46%;
    transform:none;
  }

  .rg-loose-tool{
    width:58px;
    height:130px;
  }
  .rg-toolbox-svg{width:100%}
}


/* ==========================================================
   ROOFGAZERS 2.6 — SOUND + INTERACTION POLISH
   ========================================================== */

/* helper text close to each interactive object */
.rg-stage[data-kind="see"] .rg-stage-caption{
  left:60% !important; top:11% !important;
}
.rg-stage[data-kind="think"] .rg-stage-caption{
  left:58% !important; top:13% !important;
}
.rg-stage[data-kind="build"] .rg-stage-caption{
  left:56% !important; top:13% !important;
}
.rg-stage[data-kind="play"] .rg-stage-caption{
  left:18% !important; top:12% !important;
}
.rg-stage[data-kind="tool"] .rg-stage-caption{
  left:65% !important; top:12% !important;
}
.rg-stage-caption:after{
  margin-left:22px !important;
  font-size:1.6em !important;
}

/* THINK — one bulb + one plug */
.rg-single-circuit{
  inset:35px 8% 15px 8% !important;
}
.rg-single-bulb{
  left:56% !important;
  top:8% !important;
  width:150px !important;
  height:200px !important;
}
.rg-single-plug-wrap{
  position:absolute;
  left:22%;
  bottom:11%;
  z-index:7;
}
.rg-single-plug{
  width:100px !important;
  height:58px !important;
}
.rg-single-bulb .rg-socket{
  width:31px;
  height:21px;
  bottom:0;
}
.rg-bulb-ray{
  position:absolute;
  width:34px;
  height:4px;
  border-radius:99px;
  background:#f1b500;
  opacity:0;
  transform-origin:0 50%;
  transition:opacity .16s;
}
.rg-single-bulb.is-lit .rg-bulb-ray{opacity:1}
.ray-a{left:-25px;top:38px;transform:rotate(-20deg)}
.ray-b{left:-31px;top:74px;transform:rotate(4deg)}
.ray-c{left:-18px;top:112px;transform:rotate(25deg)}
.ray-d{right:-31px;top:38px;transform:rotate(200deg)}
.ray-e{right:-35px;top:74px;transform:rotate(176deg)}
.ray-f{right:-20px;top:112px;transform:rotate(155deg)}
.rg-single-bulb.is-lit .rg-bulb-glass{
  fill:#fff7a8 !important;
  filter:
    drop-shadow(0 0 10px #ffd84c)
    drop-shadow(0 0 24px rgba(255,216,76,.85))
    drop-shadow(0 0 42px rgba(255,216,76,.5)) !important;
}
.rg-single-bulb.is-lit{
  animation:rg-bulb-pop .34s ease-out;
}
@keyframes rg-bulb-pop{
  0%{transform:scale(.92)}
  65%{transform:scale(1.07)}
  100%{transform:scale(1)}
}

/* BUILD — more physical stacking / collapse */
.rg-stack-zone{
  perspective:900px;
}
.rg-stack-block{
  transition:left .18s ease, top .18s ease, transform .22s ease !important;
}
.rg-stack-block.is-falling{
  transition:left .42s cubic-bezier(.2,.75,.35,1), top .42s cubic-bezier(.2,.75,.35,1), transform .42s ease !important;
}

/* TOOL — simpler box and only 3 tools */
.rg-simple-toolbox{
  inset:40px 8% 10px !important;
}
.rg-simple-toolbox-svg{
  width:min(620px,90%) !important;
}
.rg-simple-hammer{left:29% !important;bottom:52px !important;transform:rotate(-8deg)}
.rg-simple-screwdriver{left:47% !important;bottom:62px !important;transform:rotate(5deg)}
.rg-simple-wrench{left:64% !important;bottom:55px !important;transform:rotate(-5deg)}
.rg-simple-toolbox .rg-loose-tool{
  width:72px !important;
  height:155px !important;
}

/* Tiny feedback ripple for sound interactions */
.rg-sound-ripple{
  position:fixed;
  width:18px;
  height:18px;
  border:3px solid currentColor;
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  animation:rg-ripple .55s ease-out forwards;
}
@keyframes rg-ripple{
  from{opacity:.75;transform:translate(-50%,-50%) scale(.4)}
  to{opacity:0;transform:translate(-50%,-50%) scale(2.2)}
}

@media(max-width:900px){
  .rg-stage[data-kind="see"] .rg-stage-caption,
  .rg-stage[data-kind="think"] .rg-stage-caption,
  .rg-stage[data-kind="build"] .rg-stage-caption,
  .rg-stage[data-kind="play"] .rg-stage-caption,
  .rg-stage[data-kind="tool"] .rg-stage-caption{
    left:auto !important;
    right:4% !important;
    top:6% !important;
  }

  .rg-single-bulb{
    left:52% !important;
    width:110px !important;
    height:150px !important;
  }
  .rg-single-plug-wrap{
    left:14%;
    bottom:9%;
  }
}


/* ==========================================================
   ROOFGAZERS 2.7 — ABOUT + BOOKSHELF
   ========================================================== */

/* ABOUT */
.rg-about-page{
  padding-bottom:80px;
}
.rg-about-wrap{
  max-width:980px;
  margin:42px auto 70px;
}
.rg-about-copy h1{
  font-size:clamp(3rem,5vw,5.2rem);
  margin:0 0 24px;
  line-height:1;
}
.rg-about-content{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.08rem;
  line-height:1.75;
}
.rg-about-content p{
  max-width:820px;
}
.rg-about-content figure,
.rg-about-content .wp-block-image{
  margin:46px auto 18px;
  text-align:center;
  position:relative;
  overflow:visible;
}
.rg-about-content figure img,
.rg-about-content .wp-block-image img{
  width:min(390px,62vw);
  height:auto;
  transform-origin:50% 52%;
  animation:rg-logo-breathe 5.6s ease-in-out infinite;
  filter:drop-shadow(0 8px 0 rgba(139,98,232,.09));
  cursor:pointer;
}
.rg-about-content figure img:hover,
.rg-about-content .wp-block-image img:hover{
  animation:rg-logo-orbit .95s ease-in-out both;
}
@keyframes rg-logo-breathe{
  0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}
  50%{transform:translateY(-12px) rotate(1.5deg) scale(1.025)}
}
@keyframes rg-logo-orbit{
  0%{transform:translateY(0) rotate(0) scale(1)}
  35%{transform:translateY(-12px) rotate(-5deg) scale(1.05)}
  68%{transform:translateY(-8px) rotate(6deg) scale(1.07)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
.rg-logo-spark{
  position:fixed;
  pointer-events:none;
  z-index:99999;
  font-family:var(--rg-hand);
  font-size:28px;
  color:var(--rg-purple);
  transform:translate(-50%,-50%);
  animation:rg-logo-spark 900ms ease-out forwards;
}
@keyframes rg-logo-spark{
  from{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  to{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.4) rotate(110deg)}
}

/* BOOKSHELF */
.rg-bookshelf-page{
  padding-bottom:90px;
}
.rg-bookshelf-intro{
  max-width:980px;
  margin:42px auto 24px;
  position:relative;
}
.rg-bookshelf-intro h1{
  margin:0 0 12px;
  font-size:clamp(3rem,5vw,5.1rem);
  line-height:1;
}
.rg-bookshelf-intro p{
  margin:0;
  font-size:clamp(1.25rem,1.7vw,1.65rem);
  max-width:720px;
}
.rg-bookshelf-hint{
  display:inline-block;
  margin-top:14px;
  color:var(--rg-blue);
  transform:rotate(-2deg);
}
.rg-sketch-bookshelf{
  max-width:1050px;
  margin:30px auto 70px;
  position:relative;
}
.rg-shelf-frame{
  position:relative;
  padding:22px 54px 42px;
  min-height:680px;
}
.rg-shelf-side{
  position:absolute;
  top:10px;
  bottom:26px;
  width:18px;
  border:4px solid var(--rg-blue);
  border-radius:8px;
  background:rgba(255,255,255,.78);
}
.rg-shelf-side-left{left:24px;transform:rotate(-.6deg)}
.rg-shelf-side-right{right:24px;transform:rotate(.6deg)}
.rg-shelf-feet{
  position:absolute;
  bottom:8px;
  width:84px;
  height:14px;
  border:4px solid var(--rg-blue);
  border-radius:9px;
}
.rg-shelf-feet-left{left:18px;transform:rotate(-2deg)}
.rg-shelf-feet-right{right:18px;transform:rotate(2deg)}
.rg-shelf-row{
  position:relative;
  min-height:205px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
  padding:0 18px 26px;
}
.rg-shelf-board{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  height:18px;
  border:4px solid var(--rg-blue);
  border-radius:9px;
  background:rgba(255,255,255,.86);
  transform:rotate(-.25deg);
}
.rg-shelf-row:nth-child(2) .rg-shelf-board{transform:rotate(.22deg)}
.rg-shelf-row:nth-child(3) .rg-shelf-board{transform:rotate(-.18deg)}
.rg-book-card{
  width:150px;
  flex:0 0 150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  position:relative;
  z-index:4;
  transform-origin:50% 100%;
  transition:transform .2s ease, filter .2s ease;
  cursor:pointer;
  outline:none;
}
.rg-book-card:nth-of-type(2n){transform:rotate(1.4deg)}
.rg-book-card:nth-of-type(3n){transform:rotate(-1.8deg)}
.rg-book-card:hover,
.rg-book-card:focus{
  transform:translateY(-28px) rotate(0deg) scale(1.05);
  filter:drop-shadow(7px 10px 0 rgba(20,88,216,.10));
}
.rg-book-cover-wrap{
  width:132px;
  height:176px;
  padding:5px;
  border:3px solid var(--rg-blue);
  border-radius:4px 6px 5px 3px;
  background:#fff;
  position:relative;
}
.rg-book-cover-wrap:after{
  content:"";
  position:absolute;
  top:6px;
  bottom:6px;
  left:8px;
  width:2px;
  background:rgba(20,88,216,.25);
}
.rg-book-cover-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rg-book-label{
  max-width:145px;
  text-align:center;
  font-size:.96rem;
  line-height:1.1;
  color:var(--rg-blue);
}
.rg-empty-shelf-note{
  position:relative;
  z-index:3;
  align-self:center;
  color:#8a8a8a;
  font-style:italic;
  transform:rotate(-2deg);
}
.rg-book-pop{
  animation:rg-book-pop .28s ease-out;
}
@keyframes rg-book-pop{
  0%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-35px) scale(1.08)}
  100%{transform:translateY(-28px) scale(1.05)}
}

@media(max-width:900px){
  .rg-about-wrap,
  .rg-bookshelf-intro{
    margin-top:28px;
  }
  .rg-shelf-frame{
    padding-left:34px;
    padding-right:34px;
  }
  .rg-shelf-row{
    gap:10px;
    overflow-x:auto;
    justify-content:flex-start;
    padding-left:18px;
    padding-right:18px;
  }
  .rg-book-card{
    width:118px;
    flex-basis:118px;
  }
  .rg-book-cover-wrap{
    width:105px;
    height:145px;
  }
}


/* ==========================================================
   ROOFGAZERS 2.8 — MOVABLE LAYOUT CONTROLS
   ========================================================== */
.rg-home-copy,
.rg-guitar-stage,
.rg-category-copy,
.rg-stage-canvas,
.rg-stage-caption,
.rg-about-copy,
.rg-about-content figure,
.rg-about-content .wp-block-image,
.rg-bookshelf-intro,
.rg-sketch-bookshelf{
  transition:transform .18s ease, translate .18s ease;
  will-change:transform;
}

/* Keep position controls safe on smaller screens */
@media(max-width:700px){
  .rg-home-copy,
  .rg-guitar-stage,
  .rg-category-copy,
  .rg-stage-canvas,
  .rg-about-copy,
  .rg-about-content figure,
  .rg-about-content .wp-block-image,
  .rg-bookshelf-intro,
  .rg-sketch-bookshelf{
    transform:none !important;
  }
  .rg-stage-caption{
    translate:0 0 !important;
  }
}


/* ==========================================================
   ROOFGAZERS 2.9 — MULTI-SHELF BOOK LIBRARY
   48 slots total, 12 books per shelf page.
   ========================================================== */
.rg-bookshelf-carousel{
  max-width:1180px;
  margin:22px auto 80px;
  position:relative;
  padding:0 64px 56px;
}
.rg-shelf-pages{
  position:relative;
  min-height:730px;
}
.rg-shelf-page{
  position:absolute;
  inset:0;
  margin:0 !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(42px);
  transition:opacity .3s ease, transform .34s ease, visibility .3s;
}
.rg-shelf-page.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}
.rg-shelf-page.is-leaving-left{
  opacity:0;
  transform:translateX(-42px);
}
.rg-shelf-page.is-entering-left{
  transform:translateX(-42px);
}
.rg-shelf-set-title{
  color:var(--rg-blue);
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 4px 34px;
  font-size:1.2rem;
  transform:rotate(-1deg);
}
.rg-shelf-set-title small{
  font-size:.8rem;
  opacity:.65;
}
.rg-shelf-nav{
  position:absolute;
  top:49%;
  width:54px;
  height:54px;
  border:3px solid var(--rg-blue);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--rg-blue);
  font-size:32px;
  line-height:1;
  cursor:pointer;
  z-index:20;
  transition:transform .16s ease, background .16s ease;
}
.rg-shelf-nav:hover{
  transform:scale(1.08) rotate(-3deg);
  background:#fff;
}
.rg-shelf-prev{left:0}
.rg-shelf-next{right:0}
.rg-book-slot-empty{
  width:132px;
  height:176px;
  flex:0 0 132px;
  border:3px dashed rgba(20,88,216,.32);
  border-radius:5px;
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:rgba(20,88,216,.42);
  background:rgba(255,255,255,.36);
  margin:0 9px;
}
.rg-book-slot-empty span{
  font-size:2.4rem;
  line-height:1;
}
.rg-book-slot-empty small{
  font-size:.8rem;
  margin-top:5px;
}
.rg-shelf-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  margin-top:12px;
  color:var(--rg-blue);
}
.rg-shelf-dot{
  width:12px;
  height:12px;
  padding:0;
  border:2px solid var(--rg-blue);
  background:#fff;
  border-radius:50%;
  cursor:pointer;
}
.rg-shelf-dot.is-active{
  background:var(--rg-blue);
}
.rg-shelf-counter{
  margin-left:8px;
  font-size:1rem;
  min-width:62px;
}
.rg-next-shelf-hint{
  position:absolute;
  right:66px;
  bottom:5px;
  color:var(--rg-blue);
  transform:rotate(-2deg);
  font-size:1.15rem;
}
.rg-next-shelf-hint:after{
  content:"↗";
  display:inline-block;
  margin-left:7px;
}
@media(max-width:900px){
  .rg-bookshelf-carousel{
    padding-left:38px;
    padding-right:38px;
  }
  .rg-shelf-pages{
    min-height:700px;
  }
  .rg-shelf-nav{
    width:40px;
    height:40px;
    font-size:24px;
  }
  .rg-book-slot-empty{
    width:105px;
    height:145px;
    flex-basis:105px;
  }
  .rg-next-shelf-hint{
    right:42px;
  }
}


/* ==========================================================
   ROOFGAZERS 3.0 — REPLACEABLE CODED INTERACTIVE AREAS
   ========================================================== */
.rg-custom-stage,
.rg-custom-stage-canvas{
  position:relative;
  width:100%;
  height:100%;
  min-height:inherit;
}
.rg-custom-interactive{
  position:absolute;
  inset:0;
  overflow:visible;
  isolation:isolate;
}
.rg-custom-interactive > *{
  max-width:100%;
}
.rg-custom-interactive canvas,
.rg-custom-interactive svg{
  max-width:100%;
}
.rg-custom-interactive button,
.rg-custom-interactive [role="button"]{
  font-family:var(--rg-hand);
}


/* ==========================================================
   ROOFGAZERS 3.1 — MANUAL BOOKSHELF COUNT
   ========================================================== */
.rg-shelf-pagination:has(.rg-shelf-dot:only-child) .rg-shelf-counter{
  opacity:.55;
}


/* ==========================================================
   ROOFGAZERS 3.2 — DRAG TO ARRANGE BOOKS
   ========================================================== */
.rg-book{
  position:relative;
  translate:var(--book-x, 0px) var(--book-y, 0px);
  transition:translate .18s ease, filter .18s ease;
  z-index:2;
}
.rg-book:hover{
  z-index:20;
}
.rg-book-draggable .rg-book-cover{
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-drag:none;
}
.rg-book-draggable.is-arranging{
  z-index:100;
  transition:none;
}
.rg-book-draggable.is-arranging .rg-book-cover{
  cursor:grabbing;
}
.rg-book-draggable.is-saved .rg-book-cover{
  filter:drop-shadow(0 0 7px rgba(21,93,220,.28));
}
.rg-book-drag-editor-hint{
  font:inherit;
  font-size:.72em;
  opacity:.68;
  white-space:nowrap;
}
@media (max-width:700px){
  .rg-book{
    /* Preserve the authored arrangement while reducing extreme offsets on phones. */
    translate:clamp(-55px, var(--book-x, 0px), 55px) clamp(-35px, var(--book-y, 0px), 35px);
  }
}


/* ==========================================================
   ROOFGAZERS 3.4 — TOOL: UNSCREW THE SCREW
   ========================================================== */
.rg-unscrew-scene{
  position:absolute;
  inset:28px 4% 12px;
  overflow:visible;
  color:var(--rg-tool);
}
.rg-unscrew-board{
  position:absolute;
  left:50%;
  top:50%;
  width:min(700px,94%);
  transform:translate(-50%,-50%);
  overflow:visible;
  stroke:#1a1a1a;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-board-shape{
  fill:rgba(49,133,213,.04);
  stroke:var(--rg-tool);
}
.rg-screw-hole{
  fill:#fff;
  stroke:var(--rg-tool);
}
.rg-screw-shadow{
  fill:rgba(0,0,0,.06);
  stroke:none;
}

.rg-screw-wrap{
  position:absolute;
  left:50%;
  top:50%;
  width:78px;
  height:130px;
  transform:translate(-50%,-48%);
  transform-origin:50% 20%;
  z-index:5;
  transition:translate .12s linear;
}
.rg-screw{
  width:100%;
  height:100%;
  overflow:visible;
  stroke:#1a1a1a;
  fill:#fff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-screw-head{
  fill:rgba(255,255,255,.96);
  stroke:var(--rg-tool);
}
.rg-screw-slot{
  stroke:var(--rg-tool);
  stroke-width:4;
}
.rg-screwdriver-wrap{
  position:absolute;
  left:50%;
  top:8%;
  width:150px;
  height:310px;
  transform:translateX(-50%);
  transform-origin:50% 76%;
  z-index:10;
  touch-action:none;
}
.rg-screwdriver{
  width:100%;
  height:100%;
  overflow:visible;
  stroke:#1a1a1a;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-driver-handle{
  fill:rgba(49,133,213,.09);
  stroke:var(--rg-tool);
}
.rg-driver-shaft,.rg-driver-tip{
  stroke:var(--rg-tool);
}
.rg-driver-hit{
  position:absolute;
  left:34%;
  top:0;
  width:32%;
  height:86%;
  cursor:grab;
  touch-action:none;
}
.rg-driver-hit:active{cursor:grabbing}

.rg-unscrew-meter{
  position:absolute;
  left:50%;
  bottom:5%;
  width:220px;
  height:12px;
  transform:translateX(-50%) rotate(-1deg);
  border:2px solid var(--rg-tool);
  border-radius:99px;
  overflow:hidden;
  background:#fff;
}
.rg-unscrew-meter-fill{
  display:block;
  width:0%;
  height:100%;
  background:var(--rg-tool);
  transition:width .08s linear;
}
.rg-unscrew-complete{
  position:absolute;
  left:50%;
  bottom:10%;
  transform:translateX(-50%) rotate(-2deg);
  color:var(--rg-tool);
  font-size:1.4rem;
  opacity:0;
  transition:opacity .2s;
}
.rg-unscrew-scene.is-complete .rg-unscrew-complete{opacity:1}
.rg-unscrew-scene.is-complete .rg-unscrew-meter{opacity:.25}
.rg-unscrew-scene.is-complete .rg-screw-wrap{
  animation:rg-screw-pop .6s ease-out both;
}
@keyframes rg-screw-pop{
  0%{transform:translate(-50%,-48%) scale(1)}
  45%{transform:translate(-50%,-95%) scale(1.04)}
  100%{transform:translate(-50%,-150%) rotate(18deg) scale(.9)}
}

.rg-stage[data-kind="tool"] .rg-stage-caption{
  left:66% !important;
  top:14% !important;
}

@media(max-width:900px){
  .rg-unscrew-board{width:100%}
  .rg-screwdriver-wrap{
    width:120px;
    height:250px;
    top:11%;
  }
  .rg-screw-wrap{
    width:64px;
    height:110px;
  }
}

/* RoofGazers 3.5 theme backgrounds */
:root{--rg-page-background:#fff;}
html,body{background-color:var(--rg-page-background);}
body,.rg-shell,.rg-stage,.rg-sketch-bookshelf{transition:background-color .25s ease;}


/* ==========================================================
   ROOFGAZERS 3.6 — OBVIOUS INTERACTION HINTS
   Make every interactive object visibly invite a try.
   ========================================================== */

/* General helper hint */
.rg-stage-caption{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:7px 12px 8px !important;
  border:2px solid currentColor;
  border-radius:999px;
  background:color-mix(in srgb, var(--rg-page-background, #fff) 88%, white 12%);
  box-shadow:3px 4px 0 color-mix(in srgb, currentColor 15%, transparent);
  animation:rg-hint-bob 1.8s ease-in-out infinite;
  transform-origin:center;
  pointer-events:none;
  z-index:40 !important;
}
.rg-stage-caption:before{
  content:"TRY";
  display:inline-grid;
  place-items:center;
  min-width:35px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:currentColor;
  color:var(--rg-page-background, #fff);
  font-size:.65em;
  letter-spacing:.04em;
}
.rg-stage-caption:after{
  animation:rg-arrow-nudge .9s ease-in-out infinite alternate;
}
@keyframes rg-hint-bob{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
@keyframes rg-arrow-nudge{
  from{transform:translate(0,0)}
  to{transform:translate(8px,6px)}
}

/* Homepage guitar invitation */
.rg-chords{
  position:relative;
}
.rg-chords:before{
  content:"TRY IT";
  position:absolute;
  left:-8px;
  top:-34px;
  color:var(--rg-blue);
  border:2px solid var(--rg-blue);
  border-radius:999px;
  padding:3px 9px;
  font-size:.72em;
  background:var(--rg-page-background,#fff);
  transform:rotate(-4deg);
  animation:rg-hint-bob 1.8s ease-in-out infinite;
}
.rg-chord-btn{
  animation:rg-chord-invite 3.8s ease-in-out infinite;
}
.rg-chord-btn:nth-child(3){animation-delay:.12s}
.rg-chord-btn:nth-child(4){animation-delay:.24s}
.rg-chord-btn:nth-child(5){animation-delay:.36s}
.rg-chord-btn:nth-child(6){animation-delay:.48s}
.rg-chord-btn:nth-child(7){animation-delay:.60s}
@keyframes rg-chord-invite{
  0%,78%,100%{transform:translateY(0) scale(1)}
  84%{transform:translateY(-5px) scale(1.06)}
  90%{transform:translateY(0) scale(1)}
}
.rg-guitar-strings .rg-string-visible{
  animation:rg-string-glint 3.2s ease-in-out infinite;
}
@keyframes rg-string-glint{
  0%,70%,100%{stroke:#1a1a1a;stroke-width:2.2}
  78%{stroke:var(--rg-blue);stroke-width:3.7}
}

/* SEE: make the leaf/magnifier invitation obvious */
.rg-stage[data-kind="see"] .rg-see-sketch{
  cursor:zoom-in;
}
.rg-stage[data-kind="see"] .rg-leaf-svg{
  animation:rg-see-invite 4s ease-in-out infinite;
  transform-origin:50% 52%;
}
@keyframes rg-see-invite{
  0%,72%,100%{transform:scale(1)}
  80%{transform:scale(1.018) rotate(-.5deg)}
  88%{transform:scale(1) rotate(.4deg)}
}
.rg-stage[data-kind="see"] .rg-magnifier{
  box-shadow:0 0 0 0 rgba(20,88,216,.25);
  animation:rg-magnifier-pulse 1.8s ease-out infinite;
}
@keyframes rg-magnifier-pulse{
  0%{box-shadow:0 0 0 0 rgba(20,88,216,.30)}
  70%{box-shadow:0 0 0 14px rgba(20,88,216,0)}
  100%{box-shadow:0 0 0 0 rgba(20,88,216,0)}
}

/* THINK: plug wiggles toward the socket, bulb faintly breathes */
.rg-stage[data-kind="think"] .rg-single-plug{
  animation:rg-plug-invite 2.4s ease-in-out infinite;
}
@keyframes rg-plug-invite{
  0%,68%,100%{transform:translate(0,0) rotate(0)}
  76%{transform:translate(10px,-6px) rotate(-4deg)}
  84%{transform:translate(0,0) rotate(2deg)}
}
.rg-stage[data-kind="think"] .rg-single-bulb:not(.is-lit) .rg-bulb-glass{
  animation:rg-bulb-await 2.2s ease-in-out infinite;
}
@keyframes rg-bulb-await{
  0%,100%{fill:rgba(255,255,255,.94)}
  50%{fill:#fffde8}
}

/* BUILD: boxes visibly wobble as stackable pieces */
.rg-stage[data-kind="build"] .rg-stack-block:not(.is-dragging){
  animation:rg-box-invite 3s ease-in-out infinite;
}
.rg-stage[data-kind="build"] .rg-stack-block:nth-child(2){animation-delay:.18s}
.rg-stage[data-kind="build"] .rg-stack-block:nth-child(3){animation-delay:.36s}
.rg-stage[data-kind="build"] .rg-stack-block:nth-child(4){animation-delay:.54s}
@keyframes rg-box-invite{
  0%,70%,100%{translate:0 0}
  78%{translate:0 -8px}
  86%{translate:0 0}
}

/* PLAY: joystick pulses and points at itself */
.rg-stage[data-kind="play"] .rg-stick-knob{
  animation:rg-stick-invite 2.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes rg-stick-invite{
  0%,64%,100%{transform:translate(0,0)}
  72%{transform:translate(8px,-5px)}
  80%{transform:translate(-6px,6px)}
  88%{transform:translate(0,0)}
}
.rg-stage[data-kind="play"] .rg-stick-hit:after{
  content:"drag";
  position:absolute;
  left:50%;
  top:105%;
  transform:translateX(-50%) rotate(-4deg);
  color:var(--rg-pink);
  font-size:16px;
  pointer-events:none;
}

/* TOOL: screwdriver demonstrates a tiny turn */
.rg-stage[data-kind="tool"] .rg-screwdriver-wrap{
  animation:rg-driver-invite 2.8s ease-in-out infinite;
}
@keyframes rg-driver-invite{
  0%,65%,100%{rotate:0deg}
  75%{rotate:8deg}
  84%{rotate:-3deg}
  92%{rotate:0deg}
}
.rg-stage[data-kind="tool"] .rg-driver-hit:after{
  content:"turn ↻";
  position:absolute;
  left:50%;
  top:80%;
  transform:translateX(-50%) rotate(-4deg);
  color:var(--rg-tool);
  font-size:17px;
  white-space:nowrap;
  pointer-events:none;
}

/* Once the user interacts, calm down the idle prompts for that stage. */
.rg-stage.rg-has-interacted .rg-stage-caption,
.rg-stage.rg-has-interacted .rg-single-plug,
.rg-stage.rg-has-interacted .rg-stack-block,
.rg-stage.rg-has-interacted .rg-stick-knob,
.rg-stage.rg-has-interacted .rg-screwdriver-wrap,
.rg-guitar-stage.rg-has-interacted .rg-chord-btn,
.rg-guitar-stage.rg-has-interacted .rg-string-visible{
  animation:none !important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce){
  .rg-stage-caption,
  .rg-chord-btn,
  .rg-string-visible,
  .rg-leaf-svg,
  .rg-magnifier,
  .rg-single-plug,
  .rg-bulb-glass,
  .rg-stack-block,
  .rg-stick-knob,
  .rg-screwdriver-wrap{
    animation:none !important;
  }
}

@media(max-width:700px){
  .rg-stage-caption{
    font-size:15px !important;
    padding:5px 9px 6px !important;
  }
  .rg-stage-caption:before{
    height:19px;
    min-width:30px;
    font-size:.62em;
  }
}


/* ==========================================================
   ROOFGAZERS 3.7 — CLEANER HINTS
   The animated instruction pill is the only instruction.
   ========================================================== */
.rg-stage[data-kind="play"] .rg-stick-hit:after,
.rg-stage[data-kind="tool"] .rg-driver-hit:after{
  content:none !important;
  display:none !important;
}


/* ==========================================================
   ROOFGAZERS 3.7 — TOOL UNSCREW REDESIGN
   ========================================================== */
.rg-unscrew-scene-v2{
  position:absolute;
  inset:24px 3% 10px;
  overflow:visible;
}
.rg-unscrew-board-v2{
  position:absolute;
  left:50%;
  top:54%;
  width:min(760px,96%);
  transform:translate(-50%,-50%);
  stroke:#1a1a1a;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-board-grain{
  stroke:rgba(26,26,26,.36);
  stroke-width:2;
}
.rg-screw-seat{
  fill:rgba(255,255,255,.78);
  stroke:var(--rg-tool);
}
.rg-screw-hole-v2{
  fill:rgba(49,133,213,.08);
  stroke:var(--rg-tool);
}

.rg-screw-v2-wrap{
  position:absolute;
  left:50%;
  top:54%;
  width:92px;
  height:150px;
  transform:translate(-50%,-42%);
  transform-origin:50% 17%;
  z-index:7;
  pointer-events:none;
}
.rg-screw-v2{
  width:100%;
  height:100%;
  overflow:visible;
  stroke:#1a1a1a;
  fill:#fff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-screw-head-v2{
  fill:color-mix(in srgb, var(--rg-page-background,#fff) 82%, white 18%);
  stroke:var(--rg-tool);
  stroke-width:4;
}
.rg-screw-slot-v2{
  stroke:var(--rg-tool);
  stroke-width:5;
}
.rg-screw-shank-v2,
.rg-screw-thread-v2,
.rg-screw-point-v2{
  stroke:var(--rg-tool);
}

.rg-driver-v2-wrap{
  position:absolute;
  left:50%;
  top:7%;
  width:145px;
  height:300px;
  transform:translateX(-50%);
  transform-origin:50% 94%;
  z-index:12;
  touch-action:none;
}
.rg-driver-v2{
  width:100%;
  height:100%;
  overflow:visible;
  stroke:#1a1a1a;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-driver-handle-v2{
  fill:rgba(49,133,213,.10);
  stroke:var(--rg-tool);
}
.rg-driver-shaft-v2,
.rg-driver-tip-v2{
  stroke:var(--rg-tool);
  stroke-width:4;
}
.rg-driver-hit{
  position:absolute;
  left:20%;
  top:0;
  width:60%;
  height:100%;
  cursor:grab;
  touch-action:none;
}
.rg-driver-hit:active{cursor:grabbing}

.rg-turn-cue{
  position:absolute;
  left:50%;
  top:30%;
  width:170px;
  transform:translateX(-50%) rotate(-7deg);
  stroke:var(--rg-tool);
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.62;
  pointer-events:none;
  animation:rg-turn-cue-pulse 2.2s ease-in-out infinite;
}
@keyframes rg-turn-cue-pulse{
  0%,100%{opacity:.38;transform:translateX(-50%) rotate(-7deg) scale(.96)}
  50%{opacity:.82;transform:translateX(-50%) rotate(-7deg) scale(1.03)}
}
.rg-stage.rg-has-interacted .rg-turn-cue{animation:none;opacity:.22}

.rg-unscrew-scene-v2 .rg-unscrew-meter{
  bottom:4%;
  width:190px;
}
.rg-unscrew-scene-v2 .rg-unscrew-complete{
  bottom:9%;
}
.rg-unscrew-scene-v2.is-complete .rg-screw-v2-wrap{
  animation:rg-screw-v2-pop .62s ease-out both;
}
@keyframes rg-screw-v2-pop{
  0%{transform:translate(-50%,-42%) translateY(0) rotate(0)}
  55%{transform:translate(-50%,-42%) translateY(-65px) rotate(220deg)}
  100%{transform:translate(-50%,-42%) translateY(-112px) rotate(310deg) scale(.92)}
}

/* keep the main animated hint close to the action */
.rg-stage[data-kind="tool"] .rg-stage-caption{
  left:67% !important;
  top:12% !important;
}

@media(max-width:900px){
  .rg-driver-v2-wrap{width:118px;height:245px;top:10%}
  .rg-screw-v2-wrap{width:72px;height:125px}
  .rg-turn-cue{width:135px;top:31%}
}

/* RoofGazers 3.8 */
.rg-string-visible.rg-string-tremble{animation:rg-string-tremble-real .36s linear!important;transform-box:fill-box;transform-origin:center}
@keyframes rg-string-tremble-real{0%,100%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(4px)}32%{transform:translateX(-3px)}45%{transform:translateX(2.4px)}60%{transform:translateX(-1.7px)}75%{transform:translateX(1px)}88%{transform:translateX(-.4px)}}

.rg-house-build{position:absolute;inset:8px 1% 4px}.rg-house-ground{position:absolute;width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:3;stroke-linecap:round}.rg-house-guide{stroke:rgba(238,134,20,.22);stroke-dasharray:8 9}
.rg-house-site{position:absolute;left:50%;top:52%;width:300px;height:240px;transform:translate(-50%,-50%)}.rg-house-slot{position:absolute;border:2px dashed rgba(238,134,20,.22);border-radius:5px}.rg-house-slot-foundation{left:34px;bottom:13px;width:232px;height:48px}.rg-house-slot-wall-left{left:46px;bottom:57px;width:105px;height:133px}.rg-house-slot-wall-right{right:46px;bottom:57px;width:105px;height:133px}.rg-house-slot-roof{left:18px;top:-15px;width:264px;height:104px}
.rg-house-part{position:absolute;z-index:12;cursor:grab;touch-action:none;user-select:none}.rg-house-part svg{width:100%;height:100%;fill:color-mix(in srgb,var(--rg-page-background,#fff) 86%,#ee8614 14%);stroke:var(--rg-orange);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.rg-house-foundation{left:7%;bottom:8%;width:165px;height:65px;transform:rotate(-3deg)}.rg-house-wall-left{left:6%;top:13%;width:102px;height:132px;transform:rotate(-4deg)}.rg-house-wall-right{right:7%;top:17%;width:102px;height:132px;transform:rotate(4deg)}.rg-house-roof{right:4%;bottom:7%;width:205px;height:105px;transform:rotate(3deg)}.rg-house-part.is-placed{cursor:default}.rg-house-part.is-wrong{animation:rg-house-wrong .32s ease}@keyframes rg-house-wrong{25%{translate:-8px 0}50%{translate:8px 0}75%{translate:-4px 0}}.rg-house-finished{position:absolute;left:50%;top:12%;transform:translateX(-50%) rotate(-3deg);color:var(--rg-orange);font-size:1.5rem;opacity:0}.rg-house-build.is-complete .rg-house-finished{opacity:1}

.rg-paint-scene{position:absolute;inset:12px 2% 5px}.rg-paint-wall{position:absolute;width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:3}.rg-paint-wall-shape{fill:color-mix(in srgb,var(--rg-page-background,#fff) 95%,#3185d5 5%);stroke:var(--rg-tool)}.rg-paint-surface{position:absolute;left:17.2%;top:19.7%;width:65.4%;height:58.4%;clip-path:polygon(0 0,100% 0,98% 100%,2% 100%);overflow:hidden;pointer-events:none}.rg-paint-canvas{width:100%;height:100%}.rg-paint-roller-wrap{position:absolute;left:17%;top:18%;width:110px;height:185px;z-index:12;cursor:grab;touch-action:none}.rg-paint-roller{width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.rg-roller-head{fill:rgba(49,133,213,.16);stroke:var(--rg-tool)}.rg-roller-arm{stroke:var(--rg-tool)}.rg-roller-handle{fill:rgba(49,133,213,.12);stroke:var(--rg-tool)}.rg-paint-hit{position:absolute;inset:0;touch-action:none}.rg-paint-pot{position:absolute;right:8%;bottom:4%;width:90px;height:80px}.rg-paint-pot svg{width:100%;height:100%;fill:rgba(49,133,213,.12);stroke:var(--rg-tool);stroke-width:4}.rg-paint-pot-fill{stroke-width:8}.rg-paint-done{position:absolute;right:12%;top:13%;color:var(--rg-tool);font-size:1.45rem;opacity:0}.rg-paint-scene.is-complete .rg-paint-done{opacity:1}
.rg-stage[data-kind="build"] .rg-stage-caption{left:64%!important;top:12%!important}.rg-stage[data-kind="tool"] .rg-stage-caption{left:67%!important;top:11%!important}


/* ==========================================================
   ROOFGAZERS 3.9 — BETTER HOUSE + FIRE TOOL
   ========================================================== */

/* BUILD */
.rg-house-build-v2{position:absolute;inset:0;overflow:visible}
.rg-house-ground-v2{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#1c1c1c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rg-ground-line.faint{opacity:.35;stroke-width:2}
.rg-tree,.rg-bush{stroke:rgba(26,26,26,.42);stroke-width:2.5}
.rg-house-build-v2 .rg-house-guide{stroke:rgba(238,134,20,.20);stroke-dasharray:8 9;stroke-width:2.5}
.rg-house-site-v2{left:50%;top:55%;width:330px;height:260px;transform:translate(-50%,-50%)}
.rg-house-site-v2 .rg-house-slot-foundation{left:45px;bottom:10px;width:240px;height:52px}
.rg-house-site-v2 .rg-house-slot-wall-left{left:55px;bottom:62px;width:110px;height:148px}
.rg-house-site-v2 .rg-house-slot-wall-right{right:55px;bottom:62px;width:110px;height:148px}
.rg-house-site-v2 .rg-house-slot-roof{left:18px;top:-18px;width:294px;height:118px}
.rg-house-foundation-v2{left:4%;bottom:8%;width:175px;height:70px;transform:rotate(-3deg)}
.rg-house-wall-v2{width:112px;height:145px}
.rg-house-wall-left-v2{left:5%;top:9%;transform:rotate(-5deg)}
.rg-house-wall-right-v2{right:6%;top:12%;transform:rotate(5deg)}
.rg-house-roof-v2{right:3%;bottom:5%;width:220px;height:115px;transform:rotate(3deg)}
.rg-house-build-v2 .rg-house-part svg{
  fill:color-mix(in srgb,var(--rg-page-background,#fff) 84%,#ee8614 16%);
  stroke:var(--rg-orange);stroke-width:4;stroke-linecap:round;stroke-linejoin:round
}
.rg-house-build-v2 .rg-house-part.is-placed{
  filter:drop-shadow(0 4px 0 rgba(238,134,20,.08));
}
.rg-house-finished-v2{
  top:8%;
  display:flex;
  align-items:center;
  gap:8px;
}
.rg-house-finished-v2 svg{width:70px;fill:none;stroke:var(--rg-orange);stroke-width:3}
.rg-house-build-v2.is-complete .rg-house-finished-v2{
  animation:rg-house-finish-pop .55s ease-out both;
}
@keyframes rg-house-finish-pop{
  from{opacity:0;transform:translateX(-50%) scale(.8) rotate(-5deg)}
  to{opacity:1;transform:translateX(-50%) scale(1) rotate(-3deg)}
}

/* TOOL: FIRE STARTER */
.rg-fire-scene{position:absolute;inset:0;overflow:visible}
.rg-fire-ground{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:3;stroke-linecap:round}
.rg-fire-ground-soft{opacity:.35;stroke-width:2}
.rg-stick-pile{
  position:absolute;
  left:57%;
  top:48%;
  width:245px;
  height:160px;
  transform:translate(-50%,-50%);
  z-index:5;
}
.rg-stick-pile svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#1b1b1b;stroke-width:7;stroke-linecap:round}
.rg-ember-bed{fill:rgba(238,134,20,.06);stroke:rgba(26,26,26,.25);stroke-width:2}
.rg-flame{
  position:absolute;
  bottom:35px;
  border-radius:50% 50% 45% 55%;
  transform-origin:50% 100%;
  opacity:0;
}
.rg-flame-one{left:86px;width:60px;height:92px;background:#ff9e2f}
.rg-flame-two{left:111px;width:50px;height:72px;background:#ffd94f}
.rg-flame-three{left:69px;width:42px;height:66px;background:#ff6c35}
.rg-fire-glow{
  position:absolute;
  left:50%;bottom:20px;
  width:180px;height:110px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,48,.36),rgba(255,179,48,0) 70%);
  opacity:0;
}
.rg-fire-scene.is-lit .rg-flame{opacity:.95;animation:rg-flame-flicker .65s ease-in-out infinite alternate}
.rg-fire-scene.is-lit .rg-flame-two{animation-delay:.18s}
.rg-fire-scene.is-lit .rg-flame-three{animation-delay:.32s}
.rg-fire-scene.is-lit .rg-fire-glow{opacity:1;animation:rg-fire-glow 1.2s ease-in-out infinite alternate}
@keyframes rg-flame-flicker{
  from{transform:scaleY(.92) scaleX(1.04) rotate(-3deg)}
  to{transform:scaleY(1.08) scaleX(.92) rotate(3deg)}
}
@keyframes rg-fire-glow{from{opacity:.65;transform:translateX(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) scale(1.06)}}

.rg-fire-tool{
  position:absolute;
  left:14%;
  top:37%;
  width:260px;
  height:190px;
  transform:rotate(-7deg);
  z-index:12;
  cursor:grab;
  touch-action:none;
}
.rg-fire-tool:active{cursor:grabbing}
.rg-fire-tool svg{width:100%;height:100%;fill:none;stroke:var(--rg-tool);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.rg-fire-tool-body{fill:color-mix(in srgb,var(--rg-page-background,#fff) 88%,#3185d5 12%)}
.rg-fire-tool-trigger{fill:rgba(49,133,213,.12)}
.rg-fire-tool-hit{position:absolute;inset:0;touch-action:none}
.rg-spark-zone{position:absolute;left:47%;top:39%;width:150px;height:150px;border-radius:50%;pointer-events:none}
.rg-sparks{position:absolute;inset:0;pointer-events:none;z-index:30}
.rg-spark{
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  background:#ffd84c;
  box-shadow:0 0 9px rgba(255,216,76,.85);
  animation:rg-spark-fly .65s ease-out forwards;
}
@keyframes rg-spark-fly{
  from{opacity:1;translate:0 0;scale:1}
  to{opacity:0;translate:var(--sx) var(--sy);scale:.35}
}
.rg-fire-done{
  position:absolute;
  right:18%;top:14%;
  color:var(--rg-tool);
  font-size:1.45rem;
  transform:rotate(3deg);
  opacity:0;
}
.rg-fire-scene.is-lit .rg-fire-done{opacity:1}
.rg-stage[data-kind="tool"] .rg-stage-caption{left:65%!important;top:11%!important}

@media(max-width:850px){
  .rg-house-site-v2{transform:translate(-50%,-50%) scale(.82)}
  .rg-house-foundation-v2{width:135px}
  .rg-house-wall-v2{width:85px;height:115px}
  .rg-house-roof-v2{width:165px}
  .rg-fire-tool{width:200px;height:145px;left:8%}
  .rg-stick-pile{width:190px;height:130px;left:62%}
}


/* ==========================================================
   ROOFGAZERS 4.0 — THINK: UNTANGLE THE CABLE
   ========================================================== */
.rg-think-wire-scene{
  position:absolute;
  inset:0;
  overflow:visible;
}
.rg-think-wire-board{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#1c1c1c;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-think-bulb-glass{
  fill:rgba(255,255,255,.94);
  stroke:var(--rg-purple);
  stroke-width:4;
  transition:fill .2s,filter .2s;
}
.rg-think-filament{
  stroke:var(--rg-purple);
  stroke-width:4;
}
.rg-think-socket rect{
  fill:color-mix(in srgb,var(--rg-page-background,#fff) 88%,#8b62e8 12%);
  stroke:var(--rg-purple);
  stroke-width:4;
}
.rg-think-socket circle{
  fill:var(--rg-purple);
  stroke:none;
}
.rg-think-guide-path{
  stroke:rgba(139,98,232,.26);
  stroke-width:3;
  stroke-dasharray:7 8;
}
.rg-think-wire-scene.is-connected .rg-think-bulb-glass{
  fill:#fff7a8;
  filter:drop-shadow(0 0 12px #ffd84c) drop-shadow(0 0 26px rgba(255,216,76,.72));
}
.rg-think-wire-scene.is-connected .rg-think-filament{
  stroke:#f0a400;
}
.rg-think-live-cable{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
}
.rg-think-cable-shadow,
.rg-think-cable-path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-think-cable-shadow{
  stroke:rgba(26,26,26,.10);
  stroke-width:8;
}
.rg-think-cable-path{
  stroke:var(--rg-purple);
  stroke-width:4;
}
.rg-think-cable-source{
  position:absolute;
  left:4%;
  bottom:13%;
  width:270px;
  height:250px;
  z-index:6;
}
.rg-think-cable-source > svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.rg-tangled-wire{
  fill:none;
  stroke:var(--rg-purple);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}
.rg-think-plug{
  position:absolute;
  right:-5px;
  bottom:18px;
  width:90px;
  height:56px;
  cursor:grab;
  touch-action:none;
  z-index:10;
}
.rg-think-plug:active{cursor:grabbing}
.rg-think-plug svg{
  width:100%;
  height:100%;
  fill:color-mix(in srgb,var(--rg-page-background,#fff) 88%,#8b62e8 12%);
  stroke:var(--rg-purple);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-think-wire-scene:not(.is-connected) .rg-think-plug{
  animation:rg-think-plug-invite 2.4s ease-in-out infinite;
}
@keyframes rg-think-plug-invite{
  0%,70%,100%{transform:translate(0,0) rotate(0)}
  78%{transform:translate(12px,-8px) rotate(-4deg)}
  88%{transform:translate(3px,-2px) rotate(2deg)}
}
.rg-think-wire-scene.is-dragging .rg-tangled-wire{
  opacity:.35;
  transition:opacity .2s;
}
.rg-think-wire-scene.is-connected .rg-tangled-wire{
  opacity:.18;
}
.rg-think-wire-scene.is-connected .rg-think-plug{
  animation:none;
}
.rg-think-complete{
  position:absolute;
  right:12%;
  top:12%;
  color:var(--rg-purple);
  font-size:1.4rem;
  transform:rotate(2deg);
  opacity:0;
  transition:opacity .2s;
}
.rg-think-wire-scene.is-connected .rg-think-complete{
  opacity:1;
}
.rg-stage[data-kind="think"] .rg-stage-caption{
  left:60% !important;
  top:9% !important;
}

@media(max-width:850px){
  .rg-think-cable-source{width:215px;height:205px;left:1%;bottom:8%}
  .rg-think-plug{width:72px;height:46px}
  .rg-think-wire-board .rg-think-bulb{transform:translate(500px,80px) scale(.9)}
}


/* ==========================================================
   ROOFGAZERS 4.1 — ALL GUITAR STRINGS TREMBLE
   ========================================================== */
.rg-string-visible.rg-string-tremble{
  animation:rg-string-tremble-all .38s linear !important;
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes rg-string-tremble-all{
  0%{transform:translateX(0);stroke-width:2.2}
  8%{transform:translateX(-5px);stroke-width:3.6}
  17%{transform:translateX(4.5px);stroke-width:3.4}
  27%{transform:translateX(-3.8px);stroke-width:3.1}
  38%{transform:translateX(3px);stroke-width:2.9}
  50%{transform:translateX(-2.3px);stroke-width:2.7}
  63%{transform:translateX(1.6px);stroke-width:2.5}
  76%{transform:translateX(-1px);stroke-width:2.4}
  89%{transform:translateX(.45px);stroke-width:2.3}
  100%{transform:translateX(0);stroke-width:2.2}
}


/* ==========================================================
   ROOFGAZERS 4.2 — FIXED HINTS + SMOOTHER THINK + MATCH TOOL
   ========================================================== */

/* Hint stays visually fixed at its authored/adjusted position.
   No click state moves it. Only a subtle opacity pulse remains. */
.rg-stage-caption{
  animation:rg-hint-pulse-fixed 1.8s ease-in-out infinite !important;
  transform:none !important;
}
.rg-stage-caption:after{
  animation:none !important;
}
.rg-stage.rg-has-interacted .rg-stage-caption{
  animation:rg-hint-pulse-fixed 1.8s ease-in-out infinite !important;
}
@keyframes rg-hint-pulse-fixed{
  0%,100%{opacity:.88}
  50%{opacity:1}
}

/* THINK */
.rg-think-smooth-scene{position:absolute;inset:0;overflow:visible}
.rg-think-smooth-board{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rg-think-bulb-glass-v2{fill:rgba(255,255,255,.94);stroke:var(--rg-purple);stroke-width:4;transition:fill .2s,filter .2s}
.rg-think-filament-v2{stroke:var(--rg-purple);stroke-width:4}
.rg-think-socket-v2 rect{fill:color-mix(in srgb,var(--rg-page-background,#fff) 88%,#8b62e8 12%);stroke:var(--rg-purple);stroke-width:4}
.rg-think-socket-v2 circle{fill:var(--rg-purple);stroke:none}
.rg-think-guide-v2{stroke:rgba(139,98,232,.24);stroke-width:3;stroke-dasharray:8 9}
.rg-think-cable-svg-v2{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.rg-think-cable-v2,.rg-think-cable-shadow-v2{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rg-think-cable-shadow-v2{stroke:rgba(26,26,26,.09);stroke-width:9}
.rg-think-cable-v2{stroke:var(--rg-purple);stroke-width:4.5}
.rg-think-tangle-v2{position:absolute;left:4%;bottom:13%;width:250px;height:235px;z-index:3;transition:opacity .2s}
.rg-think-tangle-v2 svg{width:100%;height:100%;fill:none;stroke:var(--rg-purple);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.rg-think-plug-v2{position:absolute;left:27%;bottom:14%;width:92px;height:56px;z-index:9;cursor:grab;touch-action:none}
.rg-think-plug-v2:active{cursor:grabbing}
.rg-think-plug-v2 svg{width:100%;height:100%;fill:color-mix(in srgb,var(--rg-page-background,#fff) 88%,#8b62e8 12%);stroke:var(--rg-purple);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.rg-think-smooth-scene.is-dragging .rg-think-tangle-v2{opacity:.35}
.rg-think-smooth-scene.is-connected .rg-think-tangle-v2{opacity:.15}
.rg-think-smooth-scene.is-connected .rg-think-bulb-glass-v2{fill:#fff7a8;filter:drop-shadow(0 0 12px #ffd84c) drop-shadow(0 0 28px rgba(255,216,76,.72))}
.rg-think-smooth-scene.is-connected .rg-think-filament-v2{stroke:#f0a400}
.rg-think-connected-note{position:absolute;right:13%;top:12%;color:var(--rg-purple);font-size:1.35rem;opacity:0;transform:rotate(2deg)}
.rg-think-smooth-scene.is-connected .rg-think-connected-note{opacity:1}
.rg-stage[data-kind="think"] .rg-stage-caption{left:59%!important;top:8%!important}

/* SEE restored */
.rg-see-sketch{position:absolute;inset:45px 2% 10px;display:grid;place-items:center}
.rg-leaf-svg{width:min(520px,92%);overflow:visible}
.rg-see-sketch{cursor:zoom-in}
.rg-ladybug,.rg-ant{pointer-events:none}

/* TOOL: light a match */
.rg-match-scene{position:absolute;inset:0;overflow:visible}
.rg-match-ground{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:3;stroke-linecap:round}
.rg-match-ground-soft{opacity:.35;stroke-width:2}
.rg-match-box{position:absolute;left:9%;top:42%;width:245px;height:150px;z-index:4}
.rg-match-box svg{width:100%;height:100%;fill:none;stroke:var(--rg-tool);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.rg-match-box-body{fill:color-mix(in srgb,var(--rg-page-background,#fff) 88%,#3185d5 12%)}
.rg-match-striker{stroke:#b26a3d;stroke-width:11;stroke-dasharray:3 6}
.rg-match-stick{position:absolute;left:29%;top:24%;width:70px;height:250px;z-index:12;cursor:grab;touch-action:none;transform-origin:50% 92%}
.rg-match-stick:active{cursor:grabbing}
.rg-match-stick svg{width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:4;stroke-linecap:round}
.rg-match-wood{stroke:#b98758;stroke-width:8}
.rg-match-head{fill:#b94f39;stroke:#8c3429}
.rg-match-hit{position:absolute;inset:0}
.rg-match-flame-small{position:absolute;left:50%;top:-16px;width:42px;height:68px;transform:translateX(-50%);opacity:0;pointer-events:none}
.rg-match-flame-outer,.rg-match-flame-inner{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:50% 50% 46% 54%;transform-origin:50% 100%}
.rg-match-flame-outer{width:40px;height:65px;background:#ff8e32}
.rg-match-flame-inner{width:25px;height:43px;background:#ffd94f}
.rg-match-stick.is-lit .rg-match-flame-small{opacity:1}
.rg-match-stick.is-lit .rg-match-flame-outer,.rg-match-stick.is-lit .rg-match-flame-inner{animation:rg-match-flicker .6s ease-in-out infinite alternate}
@keyframes rg-match-flicker{from{scale:.92 1.04;rotate:-2deg}to{scale:1.04 .94;rotate:2deg}}
.rg-match-stick-pile{position:absolute;left:64%;top:53%;width:240px;height:160px;transform:translate(-50%,-50%);z-index:5}
.rg-match-stick-pile svg{width:100%;height:100%;fill:none;stroke:#1b1b1b;stroke-width:7;stroke-linecap:round}
.rg-match-ember-bed{fill:rgba(238,134,20,.06);stroke:rgba(26,26,26,.25);stroke-width:2}
.rg-match-fire{position:absolute;bottom:36px;border-radius:50% 50% 45% 55%;transform-origin:50% 100%;opacity:0}
.rg-match-fire-one{left:85px;width:60px;height:90px;background:#ff9e2f}
.rg-match-fire-two{left:111px;width:48px;height:70px;background:#ffd94f}
.rg-match-fire-three{left:69px;width:40px;height:64px;background:#ff6c35}
.rg-match-fire-glow{position:absolute;left:50%;bottom:18px;width:180px;height:110px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,179,48,.38),rgba(255,179,48,0) 70%);opacity:0}
.rg-match-scene.is-fire-lit .rg-match-fire{opacity:.95;animation:rg-match-fire-flicker .65s ease-in-out infinite alternate}
.rg-match-scene.is-fire-lit .rg-match-fire-two{animation-delay:.18s}
.rg-match-scene.is-fire-lit .rg-match-fire-three{animation-delay:.32s}
.rg-match-scene.is-fire-lit .rg-match-fire-glow{opacity:1}
@keyframes rg-match-fire-flicker{from{transform:scaleY(.92) scaleX(1.04) rotate(-3deg)}to{transform:scaleY(1.08) scaleX(.92) rotate(3deg)}}
.rg-match-sparks{position:absolute;inset:0;pointer-events:none;z-index:30}
.rg-match-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd84c;box-shadow:0 0 8px rgba(255,216,76,.85);animation:rg-match-spark .55s ease-out forwards}
@keyframes rg-match-spark{from{opacity:1;translate:0 0}to{opacity:0;translate:var(--sx) var(--sy)}}
.rg-match-done{position:absolute;right:17%;top:13%;color:var(--rg-tool);font-size:1.4rem;opacity:0;transform:rotate(3deg)}
.rg-match-scene.is-fire-lit .rg-match-done{opacity:1}
.rg-stage[data-kind="tool"] .rg-stage-caption{left:63%!important;top:10%!important}


/* ==========================================================
   ROOFGAZERS 4.3 — BUILD: SIMPLE STACKABLE SHAPES
   ========================================================== */
.rg-shape-stack-scene{
  position:absolute;
  inset:0;
  overflow:visible;
}
.rg-shape-stack-ground{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#1b1b1b;
  stroke-width:3;
  stroke-linecap:round;
}
.rg-stack-ground-soft{
  opacity:.32;
  stroke-width:2;
}
.rg-shape-stack-zone{
  position:absolute;
  left:50%;
  bottom:12%;
  width:270px;
  height:265px;
  transform:translateX(-50%);
  border-bottom:3px dashed rgba(238,134,20,.25);
  pointer-events:none;
}
.rg-stack-piece{
  position:absolute;
  z-index:10;
  cursor:grab;
  touch-action:none;
  user-select:none;
  transform-origin:center;
  filter:drop-shadow(3px 5px 0 rgba(238,134,20,.08));
  transition:filter .12s ease;
}
.rg-stack-piece:active{
  cursor:grabbing;
}
.rg-stack-piece.is-dragging{
  z-index:50;
  filter:drop-shadow(7px 9px 0 rgba(238,134,20,.14));
}
.rg-stack-piece.is-settling{
  transition:left .22s ease, top .22s ease, transform .22s ease;
}
.rg-stack-piece svg{
  width:100%;
  height:100%;
  overflow:visible;
  fill:color-mix(in srgb,var(--rg-page-background,#fff) 86%,#ee8614 14%);
  stroke:var(--rg-orange);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rg-stack-box{
  left:7%;
  top:16%;
  width:104px;
  height:104px;
  transform:rotate(-4deg);
}
.rg-stack-triangle{
  left:7%;
  bottom:10%;
  width:122px;
  height:104px;
  transform:rotate(3deg);
}
.rg-stack-circle{
  right:8%;
  top:14%;
  width:102px;
  height:102px;
  transform:rotate(4deg);
}
.rg-stack-stick{
  right:5%;
  bottom:10%;
  width:165px;
  height:66px;
  transform:rotate(-5deg);
}
.rg-stack-box-small{
  left:26%;
  top:4%;
  width:82px;
  height:82px;
  transform:rotate(5deg);
}
.rg-stack-stick-small{
  right:27%;
  top:4%;
  width:132px;
  height:54px;
  transform:rotate(3deg);
}
.rg-stack-success{
  position:absolute;
  left:50%;
  top:10%;
  transform:translateX(-50%) rotate(-3deg);
  color:var(--rg-orange);
  font-size:1.35rem;
  opacity:0;
  transition:opacity .2s;
}
.rg-shape-stack-scene.has-stack .rg-stack-success{
  opacity:1;
}
.rg-stage[data-kind="build"] .rg-stage-caption{
  left:62% !important;
  top:10% !important;
}

@media(max-width:850px){
  .rg-shape-stack-zone{
    width:210px;
    height:225px;
  }
  .rg-stack-box{width:82px;height:82px}
  .rg-stack-triangle{width:95px;height:82px}
  .rg-stack-circle{width:80px;height:80px}
  .rg-stack-stick{width:126px;height:52px}
  .rg-stack-box-small{width:64px;height:64px}
  .rg-stack-stick-small{width:102px;height:44px}
}


/* ==========================================================
   ROOFGAZERS 4.4 — NAVIGATION CLICK RELIABILITY
   ========================================================== */
.rg-site-header{
  position:relative !important;
  z-index:9999 !important;
  pointer-events:auto !important;
}
.rg-site-header .rg-shell,
.rg-mainnav,
.rg-navitem,
.rg-navitem *{
  pointer-events:auto !important;
}
.rg-mainnav{
  position:relative !important;
  z-index:10000 !important;
}
.rg-navitem{
  position:relative !important;
  z-index:10001 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:rgba(20,88,216,.12);
}
.rg-navitem:active{
  transform:translateY(-1px) scale(.985) !important;
}
.rg-navitem::before{
  content:"";
  position:absolute;
  inset:-8px -8px -10px;
  border-radius:16px;
  background:transparent;
  z-index:-1;
}
.rg-navitem:hover::before{
  background:rgba(20,88,216,.035);
}

/* Interactive canvases must never cover the header/nav even when artwork overflows. */
.rg-home-hero,
.rg-category-hero,
.rg-stage,
.rg-stage-canvas,
.rg-guitar-stage{
  z-index:1;
}


/* ==========================================================
   ROOFGAZERS 4.4 — TRUE SVG GUITAR STRING VIBRATION
   JavaScript changes SVG endpoints; this CSS is only fallback.
   ========================================================== */
.rg-string-visible{
  will-change:transform;
}
.rg-string-visible.rg-string-active{
  stroke:var(--rg-blue) !important;
  stroke-width:3.4 !important;
}

.rg-navitem.rg-nav-going{
  opacity:.55;
  transform:translateY(1px) scale(.98) !important;
}


/* ==========================================================
   ROOFGAZERS 4.6 — TARGETED FINAL PAGE FIXES
   ========================================================== */

/* BUILD: restore the original plain four-box interaction. */
.rg-stage[data-kind="build"] .rg-stack-zone{
  position:absolute !important;
  inset:48px 6% 22px !important;
  display:block !important;
  border-bottom:3px solid rgba(238,134,20,.35);
}
.rg-stage[data-kind="build"] .rg-stack-block{
  position:absolute !important;
  width:96px !important;
  height:96px !important;
  bottom:0;
  padding:0;
  border:3px solid var(--rg-orange) !important;
  background:color-mix(in srgb,var(--rg-page-background,#fff) 92%,white 8%) !important;
  box-shadow:none !important;
  cursor:grab !important;
  touch-action:none;
}
.rg-stage[data-kind="build"] .rg-stack-block:nth-child(1){left:8%}
.rg-stage[data-kind="build"] .rg-stack-block:nth-child(2){left:30%}
.rg-stage[data-kind="build"] .rg-stack-block:nth-child(3){left:53%}
.rg-stage[data-kind="build"] .rg-stack-block:nth-child(4){left:76%}
.rg-stage[data-kind="build"] .rg-stack-block.is-dragging{
  z-index:30;
  box-shadow:7px 9px 0 rgba(238,134,20,.15) !important;
}

/* PLAY: keep the joystick hit target directly on top of the visible stick. */
.rg-stage[data-kind="play"] .rg-stick-hit{
  pointer-events:auto !important;
  z-index:30 !important;
}

/* THINK: visually merge plug + socket when connected. */
.rg-think-smooth-scene.is-connected .rg-think-plug-v2{
  z-index:12;
}
.rg-think-smooth-scene.is-connected .rg-think-cable-v2{
  stroke-width:4.5;
}

/* TOOL: intentionally simple matchbox — body + one striker strip only. */
.rg-match-box-simple svg{
  overflow:visible;
}
.rg-match-box-simple .rg-match-box-body{
  fill:color-mix(in srgb,var(--rg-page-background,#fff) 90%,#3185d5 10%);
  stroke:var(--rg-tool);
  stroke-width:4;
}
.rg-match-box-simple .rg-match-striker{
  stroke:#b26a3d;
  stroke-width:10;
  stroke-dasharray:3 6;
}

@media(max-width:900px){
  .rg-stage[data-kind="build"] .rg-stack-block{
    width:72px !important;
    height:72px !important;
  }
}


/* ==========================================================
   ROOFGAZERS 4.7 — THINK GAP FIX + SIMPLE FIRE TOOL
   ========================================================== */

/* THINK: fixture is visually continuous and plug meets socket flush. */
.rg-think-fixture-wire{
  stroke:var(--rg-purple);
  stroke-width:4;
}
.rg-think-tight-scene .rg-think-socket-v2{
  transform:translate(594px,287px);
}
.rg-think-tight-scene.is-connected .rg-think-plug-v2{
  z-index:12;
}

/* TOOL: no matchbox — only a burning match and the pile. */
.rg-simple-fire-scene{
  position:absolute;
  inset:0;
  overflow:visible;
}
.rg-simple-fire-ground{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#1b1b1b;
  stroke-width:3;
  stroke-linecap:round;
}
.rg-simple-fire-ground-soft{
  opacity:.35;
  stroke-width:2;
}
.rg-burning-match{
  position:absolute;
  left:8%;
  top:45%;
  width:270px;
  height:115px;
  z-index:12;
  cursor:grab;
  touch-action:none;
  transform:rotate(-8deg);
}
.rg-burning-match:active{cursor:grabbing}
.rg-burning-match-svg{
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke-linecap:round;
}
.rg-burning-match-stick{
  stroke:#c18a4f;
  stroke-width:9;
}
.rg-burning-match-head{
  fill:#8d3f2f;
  stroke:#6f2f25;
  stroke-width:3;
}
.rg-burning-match-hit{
  position:absolute;
  inset:0;
  touch-action:none;
}
.rg-burning-match-flame{
  position:absolute;
  right:5px;
  top:-33px;
  width:55px;
  height:78px;
  pointer-events:none;
}
.rg-burning-flame-outer,
.rg-burning-flame-inner{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  border-radius:50% 50% 45% 55%;
  transform-origin:50% 100%;
  animation:rg-burning-match-flicker .6s ease-in-out infinite alternate;
}
.rg-burning-flame-outer{
  width:48px;
  height:75px;
  background:#ff8d32;
}
.rg-burning-flame-inner{
  width:28px;
  height:50px;
  background:#ffd94f;
  animation-delay:.16s;
}
@keyframes rg-burning-match-flicker{
  from{transform:translateX(-50%) scaleY(.92) scaleX(1.04) rotate(-2deg)}
  to{transform:translateX(-50%) scaleY(1.08) scaleX(.94) rotate(2deg)}
}

.rg-simple-stick-pile{
  position:absolute;
  left:64%;
  top:56%;
  width:245px;
  height:165px;
  transform:translate(-50%,-50%);
  z-index:5;
}
.rg-simple-stick-pile svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:#1b1b1b;
  stroke-width:7;
  stroke-linecap:round;
}
.rg-simple-ember-bed{
  fill:rgba(238,134,20,.06);
  stroke:rgba(26,26,26,.22);
  stroke-width:2;
}
.rg-simple-fire{
  position:absolute;
  bottom:35px;
  border-radius:50% 50% 45% 55%;
  transform-origin:50% 100%;
  opacity:0;
}
.rg-simple-fire-one{
  left:88px;
  width:60px;
  height:92px;
  background:#ff9e2f;
}
.rg-simple-fire-two{
  left:113px;
  width:48px;
  height:70px;
  background:#ffd94f;
}
.rg-simple-fire-three{
  left:70px;
  width:41px;
  height:66px;
  background:#ff6c35;
}
.rg-simple-fire-glow{
  position:absolute;
  left:50%;
  bottom:18px;
  width:180px;
  height:110px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,48,.38),rgba(255,179,48,0) 70%);
  opacity:0;
}
.rg-simple-fire-scene.is-fire-lit .rg-simple-fire{
  opacity:.95;
  animation:rg-simple-fire-flicker .65s ease-in-out infinite alternate;
}
.rg-simple-fire-scene.is-fire-lit .rg-simple-fire-two{animation-delay:.18s}
.rg-simple-fire-scene.is-fire-lit .rg-simple-fire-three{animation-delay:.32s}
.rg-simple-fire-scene.is-fire-lit .rg-simple-fire-glow{opacity:1}
@keyframes rg-simple-fire-flicker{
  from{transform:scaleY(.92) scaleX(1.04) rotate(-3deg)}
  to{transform:scaleY(1.08) scaleX(.92) rotate(3deg)}
}
.rg-simple-fire-done{
  position:absolute;
  right:17%;
  top:13%;
  color:var(--rg-tool);
  font-size:1.4rem;
  opacity:0;
  transform:rotate(3deg);
}
.rg-simple-fire-scene.is-fire-lit .rg-simple-fire-done{opacity:1}
.rg-stage[data-kind="tool"] .rg-stage-caption{
  left:63% !important;
  top:10% !important;
}

@media(max-width:850px){
  .rg-burning-match{
    width:210px;
    height:95px;
    left:4%;
  }
  .rg-simple-stick-pile{
    width:190px;
    height:135px;
    left:66%;
  }
}


/* ==========================================================
   ROOFGAZERS 4.8 — ORIGINAL THINK + MATCH-ONLY TOOL
   ========================================================== */

/* THINK: original single bulb layout */
.rg-original-think{
  inset:35px 8% 15px 8% !important;
}
.rg-original-think .rg-cable-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.rg-original-think .rg-cable-path{
  fill:none;
  stroke:var(--rg-purple);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:2 7;
}
.rg-single-bulb-connected{
  left:56% !important;
  top:8% !important;
  width:150px !important;
  height:210px !important;
}
.rg-single-bulb-connected svg{
  width:100%;
  height:100%;
  overflow:visible;
  stroke:#1a1a1a;
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-single-bulb-connected .rg-bulb-glass{
  fill:rgba(255,255,255,.94);
}
.rg-single-bulb-connected .rg-bulb-neck{
  stroke:var(--rg-purple);
  stroke-width:4;
}
.rg-single-bulb-connected .rg-socket-attached{
  position:absolute;
  left:50%;
  bottom:5px;
  width:31px;
  height:22px;
  border:3px solid var(--rg-purple);
  border-radius:4px 4px 9px 9px;
  transform:translateX(-50%);
  background:var(--rg-page-background,#fff);
}
.rg-single-plug-wrap{
  position:absolute;
  left:22%;
  bottom:11%;
  z-index:7;
}
.rg-single-plug{
  width:100px !important;
  height:58px !important;
}
.rg-single-plug svg{
  width:100%;
  height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-single-plug.is-connected{
  color:#f1a800;
}
.rg-single-bulb-connected.is-lit .rg-bulb-glass{
  fill:#fff7a8 !important;
  filter:
    drop-shadow(0 0 10px #ffd84c)
    drop-shadow(0 0 24px rgba(255,216,76,.85))
    drop-shadow(0 0 42px rgba(255,216,76,.5)) !important;
}
.rg-single-bulb-connected.is-lit .rg-filament{
  stroke:#f1a800;
}
.rg-bulb-ray{
  position:absolute;
  width:34px;
  height:4px;
  border-radius:99px;
  background:#f1b500;
  opacity:0;
  transform-origin:0 50%;
}
.rg-single-bulb-connected.is-lit .rg-bulb-ray{opacity:1}
.ray-a{left:-25px;top:38px;transform:rotate(-20deg)}
.ray-b{left:-31px;top:74px;transform:rotate(4deg)}
.ray-c{left:-18px;top:112px;transform:rotate(25deg)}
.ray-d{right:-31px;top:38px;transform:rotate(200deg)}
.ray-e{right:-35px;top:74px;transform:rotate(176deg)}
.ray-f{right:-20px;top:112px;transform:rotate(155deg)}
.rg-stage[data-kind="think"] .rg-stage-caption{
  left:59% !important;
  top:8% !important;
}

/* TOOL: one striker strip + one match only */
.rg-match-only-scene{
  position:absolute;
  inset:0;
  overflow:visible;
}
.rg-match-only-ground{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#1b1b1b;
  stroke-width:3;
  stroke-linecap:round;
}
.rg-match-strike-strip{
  position:absolute;
  left:46%;
  top:48%;
  width:300px;
  height:100px;
  transform:translate(-50%,-50%) rotate(-2deg);
  z-index:4;
}
.rg-match-strike-strip svg{
  width:100%;
  height:100%;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rg-match-strip-box{
  fill:color-mix(in srgb,var(--rg-page-background,#fff) 91%,#3185d5 9%);
  stroke:var(--rg-tool);
  stroke-width:4;
}
.rg-match-strip-line{
  stroke:#b26a3d;
  stroke-width:12;
  stroke-dasharray:3 7;
}
.rg-match-only-stick{
  position:absolute;
  left:23%;
  top:31%;
  width:80px;
  height:300px;
  z-index:12;
  cursor:grab;
  touch-action:none;
  transform:rotate(-7deg);
  transform-origin:50% 90%;
}
.rg-match-only-stick:active{cursor:grabbing}
.rg-match-only-stick svg{
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke-linecap:round;
}
.rg-match-only-wood{
  stroke:#bd8651;
  stroke-width:9;
}
.rg-match-only-head{
  fill:#a94735;
  stroke:#7e352a;
  stroke-width:3;
}
.rg-match-only-hit{
  position:absolute;
  inset:0;
  touch-action:none;
}
.rg-match-only-flame{
  position:absolute;
  left:50%;
  top:-30px;
  width:54px;
  height:78px;
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
}
.rg-match-only-scene.is-lit .rg-match-only-flame{
  opacity:1;
}
.rg-match-only-flame-outer,
.rg-match-only-flame-inner{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  border-radius:50% 50% 45% 55%;
  transform-origin:50% 100%;
  animation:rg-match-only-flicker .6s ease-in-out infinite alternate;
}
.rg-match-only-flame-outer{
  width:48px;
  height:75px;
  background:#ff8d32;
}
.rg-match-only-flame-inner{
  width:27px;
  height:49px;
  background:#ffd94f;
  animation-delay:.15s;
}
@keyframes rg-match-only-flicker{
  from{transform:translateX(-50%) scaleY(.92) scaleX(1.04) rotate(-2deg)}
  to{transform:translateX(-50%) scaleY(1.08) scaleX(.94) rotate(2deg)}
}
.rg-match-only-sparks{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:30;
}
.rg-match-only-spark{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffd84c;
  box-shadow:0 0 8px rgba(255,216,76,.85);
  animation:rg-match-only-spark-fly .55s ease-out forwards;
}
@keyframes rg-match-only-spark-fly{
  from{opacity:1;translate:0 0}
  to{opacity:0;translate:var(--sx) var(--sy)}
}
.rg-match-only-done{
  position:absolute;
  right:23%;
  top:18%;
  color:var(--rg-tool);
  font-size:1.4rem;
  opacity:0;
  transform:rotate(3deg);
}
.rg-match-only-scene.is-lit .rg-match-only-done{
  opacity:1;
}
.rg-stage[data-kind="tool"] .rg-stage-caption{
  left:61% !important;
  top:10% !important;
}

@media(max-width:850px){
  .rg-single-bulb-connected{
    width:120px !important;
    height:168px !important;
  }
  .rg-single-plug{
    width:82px !important;
    height:50px !important;
  }
  .rg-match-strike-strip{
    width:230px;
  }
  .rg-match-only-stick{
    width:65px;
    height:245px;
    left:16%;
  }
}


/* ==========================================================
   ROOFGAZERS 4.9 — TOOL: STRIKE MATCH -> MATCH STAYS ON FIRE
   ========================================================== */
.rg-match-strike-scene .rg-match-only-done{display:none !important}

.rg-match-strike-scene .rg-match-only-flame{
  top:-42px;
  width:64px;
  height:94px;
  opacity:0;
  filter:drop-shadow(0 0 8px rgba(255,157,35,.55));
  transition:opacity .08s ease;
}
.rg-match-strike-scene.is-lit .rg-match-only-flame{
  opacity:1 !important;
}
.rg-match-strike-scene.is-lit .rg-match-only-head{
  fill:#28221f;
  stroke:#171311;
}
.rg-match-strike-scene .rg-match-only-flame-outer{
  width:56px;
  height:90px;
  background:#ff7b22;
}
.rg-match-strike-scene .rg-match-only-flame-mid{
  position:absolute;
  left:50%;
  bottom:3px;
  width:38px;
  height:67px;
  transform:translateX(-50%);
  border-radius:50% 50% 45% 55%;
  transform-origin:50% 100%;
  background:#ffbd32;
  animation:rg-match-only-flicker .48s ease-in-out infinite alternate-reverse;
}
.rg-match-strike-scene .rg-match-only-flame-inner{
  width:22px;
  height:43px;
  bottom:5px;
  background:#fff4a8;
}
.rg-match-strike-scene.is-lit .rg-match-only-stick{
  filter:drop-shadow(0 -8px 14px rgba(255,153,34,.32));
}


/* ==========================================================
   ROOFGAZERS 5.0 — ARTICLE + ABOUT TYPOGRAPHY
   ========================================================== */

/* Published posts */
.single-post .rg-article-content,
.single-post .rg-article-content p,
.single-post .rg-article-content li,
.single-post .rg-article-content blockquote,
.single-post .rg-article-content figcaption,
.single-post .rg-article-content .wp-block-paragraph{
  font-family:var(--rg-hand) !important;
  font-size:1.65rem !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  letter-spacing:.01em;
}
.single-post .rg-article-content h1,
.single-post .rg-article-content h2,
.single-post .rg-article-content h3,
.single-post .rg-article-content h4,
.single-post .rg-article-content h5,
.single-post .rg-article-content h6{
  font-family:var(--rg-hand) !important;
  font-weight:400 !important;
  line-height:1.12;
}

/* About template: target its actual custom class directly */
.rg-about-page .rg-about-content,
.rg-about-page .rg-about-content p,
.rg-about-page .rg-about-content li,
.rg-about-page .rg-about-content blockquote,
.rg-about-page .rg-about-content figcaption,
.rg-about-page .rg-about-content .wp-block-paragraph{
  font-family:var(--rg-hand) !important;
  font-size:1.55rem !important;
  line-height:1.55 !important;
  font-weight:400 !important;
}
.rg-about-page .rg-about-content h1,
.rg-about-page .rg-about-content h2,
.rg-about-page .rg-about-content h3,
.rg-about-page .rg-about-content h4,
.rg-about-page .rg-about-content h5,
.rg-about-page .rg-about-content h6{
  font-family:var(--rg-hand) !important;
  font-weight:400 !important;
}

/* Standard pages that use page.php */
.rg-article .rg-article-content,
.rg-article .rg-article-content p,
.rg-article .rg-article-content li{
  font-family:var(--rg-hand);
}

@media(max-width:768px){
  .single-post .rg-article-content,
  .single-post .rg-article-content p,
  .single-post .rg-article-content li,
  .rg-about-page .rg-about-content,
  .rg-about-page .rg-about-content p,
  .rg-about-page .rg-about-content li{
    font-size:1.35rem !important;
  }
}
@media(max-width:480px){
  .single-post .rg-article-content,
  .single-post .rg-article-content p,
  .single-post .rg-article-content li,
  .rg-about-page .rg-about-content,
  .rg-about-page .rg-about-content p,
  .rg-about-page .rg-about-content li{
    font-size:1.22rem !important;
    line-height:1.5 !important;
  }
}


/* ==========================================================
   ROOFGAZERS 5.1 — QUIETER HERO MARK + TAB CLICK ANIMATIONS
   ========================================================== */

/* Decorative hero mark replaces the directional arrow.
   It reads as a doodle, not as a button/link. */
.rg-hero-mark{
  display:inline-block;
  margin-top:clamp(18px,2.2vh,30px);
  font-size:clamp(1.25rem,1.55vw,1.9rem);
  line-height:1;
  color:currentColor;
  opacity:.82;
  transform:rotate(-8deg);
  pointer-events:none;
  user-select:none;
}
.rg-hero-mark::after{
  content:"";
  display:inline-block;
  width:34px;
  height:2px;
  margin-left:8px;
  vertical-align:middle;
  border-radius:999px;
  background:currentColor;
  opacity:.36;
  transform:rotate(-5deg);
}

/* Clicking a section tab gives its icon a brief characterful response. */
.rg-navitem.rg-tab-animating{
  pointer-events:none;
}
.rg-navitem.rg-tab-animating .rg-nav-label{
  transform:translateY(2px);
}
.rg-navitem.rg-tab-animating .rg-nav-dot{
  animation:rg-tab-dot-pop .34s ease both;
}

/* SEE — eye rolls/rotates */
.rg-navitem.rg-see.rg-tab-animating .rg-nav-icon svg{
  animation:rg-tab-see .36s cubic-bezier(.3,.8,.3,1) both;
  transform-origin:center;
}
/* THINK — thought cloud lifts and settles */
.rg-navitem.rg-think.rg-tab-animating .rg-nav-icon svg{
  animation:rg-tab-think .38s ease both;
  transform-origin:center bottom;
}
/* BUILD — blocks give a tiny stack/bounce */
.rg-navitem.rg-build.rg-tab-animating .rg-nav-icon svg{
  animation:rg-tab-build .38s cubic-bezier(.25,.85,.35,1.3) both;
  transform-origin:center bottom;
}
/* PLAY — paper plane darts forward */
.rg-navitem.rg-play.rg-tab-animating .rg-nav-icon svg{
  animation:rg-tab-play .38s ease-in both;
  transform-origin:center;
}
/* TOOL — tool turns like it is being used */
.rg-navitem.rg-tool.rg-tab-animating .rg-nav-icon svg{
  animation:rg-tab-tool .38s ease both;
  transform-origin:35% 67%;
}

@keyframes rg-tab-see{
  0%{transform:rotate(0deg) scale(1)}
  45%{transform:rotate(18deg) scale(1.10)}
  100%{transform:rotate(360deg) scale(1)}
}
@keyframes rg-tab-think{
  0%{transform:translateY(0) scale(1)}
  42%{transform:translateY(-10px) scale(1.08)}
  72%{transform:translateY(2px) scale(.98)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes rg-tab-build{
  0%{transform:translateY(0) scale(1)}
  42%{transform:translateY(-8px) scale(.94,1.08)}
  72%{transform:translateY(2px) scale(1.05,.96)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes rg-tab-play{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  55%{transform:translate(13px,-9px) rotate(-8deg) scale(1.08)}
  100%{transform:translate(0,0) rotate(0deg) scale(1)}
}
@keyframes rg-tab-tool{
  0%{transform:rotate(0deg)}
  38%{transform:rotate(-22deg)}
  70%{transform:rotate(14deg)}
  100%{transform:rotate(0deg)}
}
@keyframes rg-tab-dot-pop{
  0%{transform:scale(1)}
  48%{transform:scale(1.65)}
  100%{transform:scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .rg-navitem.rg-tab-animating .rg-nav-icon svg,
  .rg-navitem.rg-tab-animating .rg-nav-dot{
    animation:none !important;
  }
}


/* ==========================================================
   ROOFGAZERS 5.2 — SUBTLE NATURAL NAV HOVER ANIMATIONS
   ========================================================== */

/* Smooth component-level motion rather than moving the whole icon. */
.rg-nav-icon svg,
.rg-nav-icon svg *{
  transform-box:fill-box;
  transform-origin:center;
}

/* SEE: only the pupil/iris looks around; the eye outline stays still. */
.rg-navitem.rg-see:hover .rg-eye-iris,
.rg-navitem.rg-see:focus-visible .rg-eye-iris{
  animation:rg-eye-look .95s ease-in-out infinite alternate;
}
.rg-navitem.rg-see:hover .rg-eye-pupil,
.rg-navitem.rg-see:focus-visible .rg-eye-pupil{
  animation:rg-pupil-look .95s ease-in-out infinite alternate;
}
@keyframes rg-eye-look{
  from{transform:translateX(-2.2px)}
  to{transform:translateX(2.2px)}
}
@keyframes rg-pupil-look{
  from{transform:translateX(-4px) translateY(.5px)}
  to{transform:translateX(4px) translateY(-.5px)}
}

/* THINK: cloud gently breathes; the thought dots rise very slightly. */
.rg-navitem.rg-think:hover .rg-thought-cloud,
.rg-navitem.rg-think:focus-visible .rg-thought-cloud{
  animation:rg-thought-breathe 1.45s ease-in-out infinite;
}
.rg-navitem.rg-think:hover .rg-thought-dot-a,
.rg-navitem.rg-think:focus-visible .rg-thought-dot-a{
  animation:rg-thought-dot 1.2s ease-in-out infinite alternate;
}
.rg-navitem.rg-think:hover .rg-thought-dot-b,
.rg-navitem.rg-think:focus-visible .rg-thought-dot-b{
  animation:rg-thought-dot 1.2s .15s ease-in-out infinite alternate;
}
@keyframes rg-thought-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
@keyframes rg-thought-dot{
  from{transform:translateY(0)}
  to{transform:translateY(-2px)}
}

/* BUILD: blocks give a tiny settling movement, one after another. */
.rg-navitem.rg-build:hover .rg-build-top,
.rg-navitem.rg-build:focus-visible .rg-build-top{
  animation:rg-block-settle 1.15s ease-in-out infinite;
}
.rg-navitem.rg-build:hover .rg-build-left,
.rg-navitem.rg-build:focus-visible .rg-build-left{
  animation:rg-block-settle 1.15s .10s ease-in-out infinite;
}
.rg-navitem.rg-build:hover .rg-build-right,
.rg-navitem.rg-build:focus-visible .rg-build-right{
  animation:rg-block-settle 1.15s .18s ease-in-out infinite;
}
@keyframes rg-block-settle{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-2.5px)}
}

/* PLAY: plane glides forward a little, then settles back. */
.rg-navitem.rg-play:hover .rg-play-plane,
.rg-navitem.rg-play:focus-visible .rg-play-plane{
  animation:rg-plane-glide 1.05s ease-in-out infinite;
}
@keyframes rg-plane-glide{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  45%{transform:translate(4px,-2.5px) rotate(-2deg)}
}

/* TOOL: wrench makes a small working turn rather than swinging wildly. */
.rg-navitem.rg-tool:hover .rg-tool-wrench,
.rg-navitem.rg-tool:focus-visible .rg-tool-wrench{
  animation:rg-tool-nudge 1.15s ease-in-out infinite;
  transform-origin:35% 68%;
}
@keyframes rg-tool-nudge{
  0%,100%{transform:rotate(0deg)}
  40%{transform:rotate(-5deg)}
  70%{transform:rotate(3deg)}
}

/* Click/tap: use one short, slightly stronger version of the same motion. */
.rg-navitem.rg-see.rg-tab-animating .rg-eye-pupil{animation:rg-pupil-click .32s ease both}
.rg-navitem.rg-think.rg-tab-animating .rg-thought-cloud{animation:rg-think-click .32s ease both}
.rg-navitem.rg-build.rg-tab-animating .rg-build-top{animation:rg-build-click .32s ease both}
.rg-navitem.rg-play.rg-tab-animating .rg-play-plane{animation:rg-play-click .32s ease both}
.rg-navitem.rg-tool.rg-tab-animating .rg-tool-wrench{animation:rg-tool-click .32s ease both}

@keyframes rg-pupil-click{
  0%{transform:translateX(0)}
  50%{transform:translateX(5px)}
  100%{transform:translateX(0)}
}
@keyframes rg-think-click{
  0%{transform:scale(1)}
  50%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
@keyframes rg-build-click{
  0%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}
@keyframes rg-play-click{
  0%{transform:translate(0,0)}
  60%{transform:translate(7px,-4px) rotate(-3deg)}
  100%{transform:translate(0,0)}
}
@keyframes rg-tool-click{
  0%{transform:rotate(0)}
  55%{transform:rotate(-8deg)}
  100%{transform:rotate(0)}
}

/* Remove the old whole-icon click animation from 5.1. */
.rg-navitem.rg-tab-animating .rg-nav-icon svg{
  animation:none !important;
}

@media(prefers-reduced-motion:reduce){
  .rg-navitem .rg-nav-icon svg *{
    animation:none !important;
  }
}


/* ==========================================================
   ROOFGAZERS 5.2.1 — PAGE + PRIVACY/LEGAL SUPPORT
   Keeps v5.2 aesthetics and animations unchanged.
   ========================================================== */

.rg-toplinks{
  flex-wrap:wrap;
}

.rg-footer-legal{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:9px;
  font-size:.82rem;
  color:var(--rg-blue);
  opacity:.72;
}

.rg-footer-legal a:hover,
.rg-footer-legal a:focus-visible{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}

.rg-contact-privacy-note{
  margin-top:18px !important;
  font-size:.82rem !important;
  line-height:1.45 !important;
  opacity:.68;
}

.rg-contact-privacy-note a{
  color:var(--rg-blue);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media(max-width:700px){
  .rg-toplinks{gap:12px 18px}
  .rg-footer-legal{font-size:.78rem}
}


/* ==========================================================
   ROOFGAZERS 5.2.2 — SWEDEN/EU PRIVACY + COOKIE SUPPORT
   ========================================================== */

.rg-footer-legal button{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.rg-cookie-consent[hidden]{display:none!important}

.rg-cookie-consent{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20000;
  padding:16px;
  pointer-events:none;
}

.rg-cookie-consent-inner{
  width:min(760px,calc(100vw - 32px));
  margin:0 auto;
  padding:20px 22px;
  border:2px solid var(--rg-blue);
  border-radius:20px 17px 22px 16px;
  background:var(--rg-page-background,#fff);
  box-shadow:5px 6px 0 rgba(20,88,216,.12);
  font-family:var(--rg-hand);
  pointer-events:auto;
}

.rg-cookie-consent-title{
  margin:0 0 6px!important;
  color:var(--rg-blue);
  font-size:1.1rem;
}

.rg-cookie-consent-inner p{
  margin:0 0 12px;
  line-height:1.45;
}

.rg-cookie-consent-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px 12px;
}

.rg-cookie-btn{
  border:2px solid var(--rg-blue);
  border-radius:12px 10px 13px 9px;
  padding:7px 13px;
  background:transparent;
  color:var(--rg-blue);
  font-family:var(--rg-hand);
  font-size:1rem;
  cursor:pointer;
}

.rg-cookie-accept{
  background:var(--rg-blue);
  color:#fff;
}

.rg-cookie-policy-link{
  display:inline-block;
  margin-top:11px;
  color:var(--rg-blue);
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:.9rem;
}

@media(max-width:600px){
  .rg-cookie-consent{
    padding:10px;
  }
  .rg-cookie-consent-inner{
    width:calc(100vw - 20px);
    padding:17px;
  }
  .rg-cookie-btn{
    flex:1 1 150px;
  }
}


/* ==========================================================
   ROOFGAZERS 5.2.3 — EQUAL COOKIE CHOICES
   Accept and reject are intentionally equal in visual weight.
   ========================================================== */

.rg-cookie-consent .rg-cookie-reject,
.rg-cookie-consent .rg-cookie-accept{
  background:transparent !important;
  color:var(--rg-blue) !important;
  border:2px solid var(--rg-blue) !important;
  border-radius:12px 10px 13px 9px !important;
  padding:8px 14px !important;
  min-height:42px;
  font-family:var(--rg-hand) !important;
  font-size:1rem !important;
  font-weight:400 !important;
  box-shadow:none !important;
  opacity:1 !important;
}

.rg-cookie-consent .rg-cookie-reject:hover,
.rg-cookie-consent .rg-cookie-accept:hover,
.rg-cookie-consent .rg-cookie-reject:focus-visible,
.rg-cookie-consent .rg-cookie-accept:focus-visible{
  background:rgba(20,88,216,.07) !important;
  color:var(--rg-blue) !important;
  transform:translateY(-1px);
  outline:none;
}

.rg-cookie-consent .rg-cookie-reject:focus-visible,
.rg-cookie-consent .rg-cookie-accept:focus-visible{
  box-shadow:0 0 0 3px rgba(20,88,216,.15) !important;
}

@media(min-width:601px){
  .rg-cookie-consent-actions .rg-cookie-reject,
  .rg-cookie-consent-actions .rg-cookie-accept{
    min-width:190px;
  }
}