/* Shared styles for the "Using the Books" pages: parents.html, teachers.html, counselors.html
   Colors and fonts match index.html. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#F1F3EF;color:#15232A;font-family:'Newsreader',Georgia,serif;font-size:19px;line-height:1.6}
img{max-width:100%}
a{color:#1F6E64}a:hover{color:#12262E}
:focus-visible{outline:3px solid #D9A441;outline-offset:3px}
.sans{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif}
.skip{position:absolute;left:-999px;top:8px;background:#D9A441;color:#12262E;padding:10px 16px;border-radius:6px;z-index:10;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:600}
.skip:focus{left:16px}
.wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.narrow{max-width:820px}

/* header */
.site-head{background:#12262E;color:#F1F3EF}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
.brand{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800;font-size:22px;letter-spacing:-0.01em;color:#F1F3EF;text-decoration:none}
.brand:hover{color:#FFFFFF}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:16px}
.nav-links a{color:#DCE4E2;text-decoration:none}
.nav-links a:hover{color:#FFFFFF}
.nav-links a[aria-current="page"]{color:#E7C27A}
.nav-links .cta{background:#D9A441;color:#12262E;font-weight:600;padding:11px 18px;border-radius:6px}
.nav-links .cta:hover{color:#12262E;background:#E7C27A}

/* hero */
.hero{background:#12262E;color:#F1F3EF;position:relative;overflow:hidden}
.hero-inner{position:relative;padding-top:56px;padding-bottom:80px;display:flex;flex-direction:column;gap:24px}
.eyebrow{margin:0;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:600;font-size:16px;letter-spacing:0.04em;text-transform:uppercase;color:#E7C27A}
.hero h1{margin:0;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800;font-size:clamp(38px,5.4vw,72px);line-height:1.02;letter-spacing:-0.03em;text-wrap:balance;max-width:18ch}
.hero .lede{margin:0;font-size:clamp(20px,2vw,24px);line-height:1.5;color:#C9D5D3;max-width:44ch}
.hero .lede p{margin:0 0 12px}

/* audience switcher */
.switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.switch a{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:17px;font-weight:600;min-height:46px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;border:2px solid #4FB3A5;color:#F1F3EF;text-decoration:none}
.switch a:hover{background:#1C3640;color:#FFFFFF}
.switch a[aria-current="page"]{background:#4FB3A5;color:#12262E}

/* sections */
.sec{padding-top:88px;padding-bottom:16px}
.sec h2{margin:0 0 20px;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-0.02em;text-wrap:balance}
.sec h3{margin:0 0 10px;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800;font-size:24px;line-height:1.15}
.sec p{margin:0 0 16px}
.muted{color:#3E525A}
.short p{margin:0 0 10px}
.band{background:#E3E9E6;margin-top:88px;padding-bottom:88px}
.band .sec{padding-top:88px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.card{background:#FFFFFF;border-radius:14px;padding:26px;box-shadow:0 1px 0 #D6DEDB;display:flex;flex-direction:column;gap:10px}
.card p{margin:0}
.card .tag{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:15px;font-weight:600}
.card.gold{border-top:6px solid #D9A441}.card.gold .tag{color:#8A5E0E}
.card.teal{border-top:6px solid #4FB3A5}.card.teal .tag{color:#1F6E64}
.card.plum{border-top:6px solid #A895E0}.card.plum .tag{color:#5B4A93}
.card.navy{border-top:6px solid #12262E}.card.navy .tag{color:#12262E}

/* pull quote */
.pull{margin:8px 0 24px;padding:4px 0 4px 22px;border-left:5px solid #D9A441;font-style:italic;font-size:clamp(22px,2.2vw,28px);line-height:1.4}
.pull p{margin:0 0 8px}

/* lists */
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:16px}
.steps li{counter-increment:s;position:relative;padding-left:52px}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:50%;background:#12262E;color:#F1F3EF;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center}
.steps li strong{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif}
.dots{margin:0 0 16px;padding-left:22px}
.dots li{margin-bottom:8px}

/* graphic organizer: Steven's attachments and detachments */
.organizer{background:#FFFFFF;border-radius:14px;padding:26px;box-shadow:0 1px 0 #D6DEDB;margin-top:8px}
.org-head{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:10px}
.org-head div{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800;font-size:19px;padding:12px 16px;border-radius:8px;line-height:1.2}
.org-head .att{background:#4FB3A5;color:#12262E}
.org-head .det{background:#12262E;color:#F1F3EF}
.org-head span{display:block;font-weight:600;font-size:14px;opacity:0.85;margin-top:2px}
.org-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px 0;border-top:1px solid #DCE4E2}
.org-cell b{display:block;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:15px;letter-spacing:0.02em}
.org-cell.att b{color:#1F6E64}
.org-cell.det b{color:#12262E}
.org-cell q{font-size:17px}
.org-cell span{font-size:17px}
.org-shift{margin-top:14px;padding:18px;border-radius:10px;background:#F6EEDC;border:2px dashed #D9A441}
.org-shift h3{margin:0 0 8px;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800;font-size:20px}
.org-shift p{margin:0 0 6px;font-size:18px}
.org-note{margin:12px 0 0;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:14px;color:#3E525A}
@media (max-width:640px){
  .org-head,.org-row{grid-template-columns:1fr;gap:6px}
  .org-head .det{order:2}
  .org-row .org-cell.det{padding-left:12px;border-left:3px solid #12262E}
  .org-row .org-cell.att{padding-left:12px;border-left:3px solid #4FB3A5}
}

/* pairs table (seven secrets / detachment) */
.pairs{width:100%;border-collapse:collapse;background:#FFFFFF;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 #D6DEDB;font-size:18px}
.pairs th{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;text-align:left;padding:12px 16px;font-size:16px}
.pairs th.att{background:#4FB3A5;color:#12262E}
.pairs th.det{background:#12262E;color:#F1F3EF}
.pairs td{padding:10px 16px;border-top:1px solid #DCE4E2}
.pairs tr:last-child td{font-weight:600}

/* rating scale */
.scale{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:10px 0 18px}
.scale div{background:#FFFFFF;border:2px solid #CFD8D5;border-radius:8px;padding:8px 4px;text-align:center;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:13px;line-height:1.2}
.scale div b{display:block;font-size:22px}
.scale div:nth-child(n+5){border-color:#4FB3A5}
.scale div:nth-child(7){background:#4FB3A5}
@media (max-width:640px){.scale{grid-template-columns:repeat(4,1fr)}}

/* letter / copy block */
.letter{background:#FFFFFF;border:2px solid #CFD8D5;border-radius:14px;padding:28px;font-size:18px}
.letter p{margin:0 0 12px}
.copy-btn{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:600;font-size:16px;background:#12262E;color:#F1F3EF;border:0;padding:12px 18px;border-radius:6px;cursor:pointer;min-height:46px}
.copy-btn:hover{background:#1C3640}

/* callout */
.callout{background:#12262E;color:#DCE4E2;border-radius:14px;padding:28px}
.callout h3{color:#F1F3EF}
.callout a{color:#E7C27A}
.callout p{margin:0 0 12px}
.callout ul{margin:0;padding-left:22px}
.callout li{margin-bottom:10px}

/* books */
.book{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;background:#FFFFFF;border-radius:14px;padding:26px;box-shadow:0 1px 0 #D6DEDB}
.book img{width:120px;height:auto;flex:none;border-radius:2px 5px 5px 2px;display:block}
.book .body{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:8px}
.book .body p{margin:0}
.book h3{margin:0}
.buy{align-self:flex-start;margin-top:6px;background:#12262E;color:#F1F3EF !important;text-decoration:none;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:600;font-size:16px;padding:12px 18px;border-radius:6px}
.buy:hover{background:#1C3640}
.stack{display:flex;flex-direction:column;gap:20px}

/* other pages */
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.others a{display:block;background:#FFFFFF;border-radius:14px;padding:22px 24px;text-decoration:none;color:#15232A;box-shadow:0 1px 0 #D6DEDB;border-left:6px solid #4FB3A5}
.others a:hover{background:#FAFBF9}
.others b{display:block;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:22px;margin-bottom:4px}
.others span{color:#3E525A;font-size:17px}

/* footer */
.site-foot{background:#12262E;color:#DCE4E2;margin-top:96px}
.site-foot .wrap{padding-top:64px;padding-bottom:44px;display:flex;flex-direction:column;gap:32px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.foot-top h2{margin:0 0 10px;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800;font-size:30px;color:#F1F3EF}
.foot-top p{margin:0 0 10px}
.foot-mail{color:#E7C27A;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:600;font-size:19px}
.foot-cols{display:flex;flex-wrap:wrap;gap:48px;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:16px}
.foot-cols div{display:flex;flex-direction:column;gap:8px}
.foot-cols span{color:#9FB2B0}
.foot-cols a{color:#DCE4E2;text-decoration:none}
.site-foot a:hover{color:#FFFFFF}
.foot-line{margin:0;padding-top:22px;border-top:1px solid #2E4A54;font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-size:14px;color:#9FB2B0}

@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px}
  .hero-inner{padding-top:40px;padding-bottom:56px}
  .sec{padding-top:64px}
  .band{margin-top:64px;padding-bottom:64px}
  .band .sec{padding-top:64px}
  .card,.organizer,.book,.letter,.callout{padding:20px}
  .nav-links{gap:18px}
}
@media print{
  .site-head,.hero .switch,.site-foot,.others,.copy-btn,.skip{display:none !important}
  .hero{background:none;color:#15232A}
  .hero .lede{color:#15232A}
  body{background:#FFFFFF}
}

/* scale inside a narrow card: wrap to two rows */
.card .scale{grid-template-columns:repeat(4,1fr)}
.scale div{min-width:0}
.card .scale div{font-size:11.5px;padding:8px 1px}