/*
Theme Name: Heck and Back Teens
Author: Heck and Back
Version: 1.0.1
Description: Separate Teens first-draft theme with age-specific navigation and activities.
*/
:root{--accent:#483784;--paper:#fcf9ef;--wash:#e6e2f3;--pop:#ffe365;--soft:#bcebec;--font:'Trebuchet MS',sans-serif;--round:3px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:#27373d;font:17px/1.7 var(--font)}a{color:inherit}button,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #c0521d;outline-offset:4px}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:white;padding:12px;z-index:9}.top{background:var(--accent);color:white;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:14px}.brand{font:bold 25px Georgia,serif;text-decoration:none}.free{background:var(--pop);border-radius:20px;padding:3px 13px;color:#30313d;font-size:13px;white-space:nowrap}.hero{margin:0;position:relative}.hero img{display:block;width:100%;height:auto}.titlebar{padding:20px 30px;background:var(--wash);display:flex;align-items:center;justify-content:space-between;gap:14px}.titlebar strong{font-size:25px;color:var(--accent)}.titlebar span{font-size:15px}.shell{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1500px;margin:auto;min-height:560px}aside{background:var(--wash);padding:25px 16px}nav{display:grid;gap:8px}nav a{padding:12px 14px;text-decoration:none;border-radius:var(--round);font-weight:bold;line-height:1.45}nav a:hover{background:var(--pop)}nav a[aria-current=page]{background:var(--accent);color:white}.nav-caption{font-size:12px;text-transform:uppercase;letter-spacing:2px;padding:0 14px 10px}.side-note{margin:30px 14px;font:19px/1.5 Georgia,serif}main{padding:35px clamp(22px,4vw,60px) 55px;min-width:0}h1{font: bold clamp(32px,4vw,48px)/1.1 var(--font);color:var(--accent);margin:0 0 20px;max-width:820px}h2{font:bold 29px/1.2 var(--font);color:var(--accent);margin:0 0 18px}h3{font-size:20px;margin:0 0 9px}p{margin:0 0 18px}.intro{font-size:20px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:bold;color:var(--accent)}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px 0}.activity{display:block;text-decoration:none;background:var(--pop);padding:24px;border-radius:var(--round);border:2px solid transparent;transition:transform .15s}.activity:nth-child(3n+2){background:var(--soft)}.activity:nth-child(3n){background:var(--wash)}.activity:hover{transform:translateY(-3px);border-color:var(--accent)}.activity p{font-size:15px;margin:0}.arrow{font-size:24px;display:block;margin-top:12px}.notice{padding:18px 22px;background:var(--wash);border-radius:var(--round);margin:20px 0;font-size:15px}.notice p:last-child{margin-bottom:0}.action{border:0;background:var(--accent);color:white;padding:12px 22px;border-radius:var(--round);min-height:46px;margin:5px 6px 5px 0}.action.secondary{color:#27373d;background:var(--wash)}.action:disabled{opacity:.5;cursor:default}details{background:var(--wash);padding:18px 22px;border-radius:var(--round);margin:14px 0}summary{font-weight:bold;cursor:pointer}details p{margin:15px 0 0}blockquote{margin:25px 0;padding:18px 24px;border-left:5px solid var(--accent);background:var(--wash);font-size:22px}footer{background:var(--accent);color:white;padding:24px;text-align:center;font-size:14px}footer p{margin:0}.stage{background:white;border-radius:var(--round);padding:25px;margin:22px 0;border:2px solid var(--wash)}.match-target{font-size:75px;line-height:1.2;text-align:center;color:var(--accent);padding:25px}.choices{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.choices button{background:var(--pop);border:2px solid var(--accent);border-radius:var(--round);font-size:40px;width:85px;height:85px;color:var(--accent)}.status{min-height:35px;text-align:center;margin-top:18px}.garden{min-height:200px;background:linear-gradient(#edf9ff,#e9f5d7);padding:20px;display:flex;flex-wrap:wrap;align-content:flex-end;gap:8px;border-radius:var(--round)}.garden span{font-size:38px;line-height:1.2}.garden-buttons button{font-size:28px;min-width:65px}.story-number{font-size:13px;color:var(--accent);font-weight:bold}.story-text{font:24px/1.7 Georgia,serif}.quiet-field{min-height:270px;display:grid;place-items:center;background:var(--wash);overflow:hidden;border-radius:var(--round)}.sun{width:115px;height:115px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 25px var(--soft);animation:float 8s ease-in-out infinite}.sun.paused{animation-play-state:paused}@keyframes float{50%{transform:scale(1.3)}}textarea{width:100%;min-height:230px;padding:20px;border:2px solid var(--accent);border-radius:var(--round);resize:vertical;color:#26363d;background:white}body.teens .activity{border:2px solid #302a49;box-shadow:5px 5px 0 #302a49}body.teens .titlebar{border-bottom:4px solid #302a49}body.teens h1{text-transform:uppercase;letter-spacing:-1px}body.littles main{font-size:20px}body.littles .activity{padding:28px}body.littles .activity h3{font-size:24px}body.littles .side-note{font-size:23px}body.littles .hero{background:#ffdf87}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.sun{animation:none}.activity{transition:none}}@media(max-width:650px){.shell{grid-template-columns:1fr}.top{padding:13px 17px}.brand{font-size:21px}.titlebar{padding:15px 20px;flex-wrap:wrap}.titlebar span{font-size:13px}aside{padding:15px}.nav-caption,.side-note{display:none}nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}nav a{padding:11px;font-size:14px}main{padding:28px 20px 40px}.cards{grid-template-columns:1fr}.intro{font-size:18px}.story-text{font-size:21px}}