:root{
  --green:#123b32;
  --green2:#1e6b52;
  --white:#fff;
  --shadow:0 10px 30px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#102e28;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
}
.hub-page{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.hero-wrap{
  position:relative;
  width:min(100vw,1664px);
  line-height:0;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.hero-image{
  display:block;
  width:100%;
  height:auto;
}
.hotspots{
  position:absolute;
  inset:0;
}
.hotspot{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:15.8%;
  aspect-ratio:1;
  border-radius:50%;
  text-decoration:none;
  color:transparent;
  background:rgba(255,255,255,0);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  transform:translate(-50%,-50%);
}
.hotspot:hover,
.hotspot:focus-visible{
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 5px rgba(255,255,255,.9),0 0 35px rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(1.035);
  outline:none;
}
.hotspot span{
  font-size:0;
}

/* Positions measured from the actual 1536 × 1024 hero artwork. */
.music{left:50.1%;top:20.6%}
.photography{left:33.3%;top:28.4%}
.videography{left:66.5%;top:28.4%}
.wildlife{left:28.5%;top:51.2%}
.agriculture{left:71.4%;top:51.3%}
.camper{left:33.5%;top:73.0%}
.exercise{left:50.1%;top:75.7%}
.ideas{left:66.5%;top:72.9%}

/* Transparent hit areas for the top navigation shown in the artwork. */
.top-nav{
  position:absolute;
  left:31%;
  top:2.0%;
  width:40%;
  height:7%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3%;
}
.top-nav a{
  color:transparent;
  text-decoration:none;
  font-size:clamp(.65rem,1.25vw,1.05rem);
  line-height:1;
  padding:9px 14px;
  border-radius:12px;
}
.top-nav a:hover,
.top-nav a:focus-visible{
  background:rgba(255,255,255,.14);
  outline:2px solid rgba(255,255,255,.7);
}

/* Invisible anchor used by the artwork's Interests navigation. */
.interest-anchor{
  position:absolute;
  left:50%;
  top:6%;
  width:12%;
  height:6%;
}

/* The same hero artwork is retained on phones. */
.mobile-links{display:none}

picture{display:block}

@media(max-width:700px){
  .hub-page{
    display:block;
    min-height:100vh;
  }
  .hero-wrap{
    width:100%;
    max-width:none;
  }

  /* Mobile uses the square central crop of the hero artwork. */
  .hotspot{
    width:24%;
  }

  /* Reposition the clickable circles for the cropped mobile image. */
  .music{left:49.9%;top:20.2%}
  .photography{left:25.1%;top:28.5%}
  .videography{left:75.0%;top:28.5%}
  .wildlife{left:17.8%;top:51.1%}
  .agriculture{left:82.1%;top:51.1%}
  .camper{left:25.2%;top:73.1%}
  .exercise{left:49.9%;top:76.0%}
  .ideas{left:74.8%;top:72.9%}

  /* Keep the top menu visible because it is retained in the mobile crop. */
  .top-nav{
    display:flex;
    left:21%;
    top:1.2%;
    width:63%;
    height:8%;
    gap:1%;
  }
  .top-nav a{
    padding:6px 7px;
  }
}

@media(max-width:430px){
  .hotspot{
    width:24%;
  }
  .top-nav{
    left:20%;
    width:65%;
  }
}

@media(prefers-reduced-motion:reduce){
  .hotspot{transition:none}
}



/* =========================================================
   EXERCISE & MOBILITY PAGE
   The exercise programme deliberately keeps the original
   light, highly readable design. Only the site header and
   navigation use the My Interests Hub dark-green theme.
   ========================================================= */
.exercise-page{
  margin:0;
  background:#f5f7f9;
  color:#24303b;
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.55;
}
.exercise-site{min-height:100vh;background:#f5f7f9}
.site-page-header{
  position:sticky;top:0;z-index:20;
  min-height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px clamp(14px,4vw,42px);
  background:rgba(16,46,40,.97);
  color:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}
.site-home-link{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;text-decoration:none;font-weight:700;
  padding:9px 12px;border:1px solid rgba(255,255,255,.2);
  border-radius:12px;background:rgba(255,255,255,.07);
}
.site-home-link:hover,.site-home-link:focus-visible{background:rgba(255,255,255,.15);outline:2px solid rgba(255,255,255,.65);outline-offset:2px}
.site-page-title{display:flex;align-items:center;gap:10px;text-align:right}
.site-page-title strong,.site-page-title small{display:block}
.site-page-title small{font-size:.78rem;opacity:.72;margin-top:2px}
.site-page-icon{font-size:1.7rem}
.exercise-page-inner{max-width:900px;margin:0 auto;padding:24px 16px 50px}

/* Original exercise page styling, scoped so it cannot be changed by the hub. */
.exercise-page-inner .page{max-width:900px;margin:auto;padding-bottom:40px}
.exercise-page-inner .hero{background:linear-gradient(135deg,#294d84,#4777b5);color:#fff;padding:34px 22px 28px;text-align:center;border-radius:18px}
.exercise-page-inner .hero h1{margin:0 0 8px;font-size:clamp(1.8rem,6vw,3rem);line-height:1.1;color:#fff}
.exercise-page-inner .hero p{margin:0 auto;max-width:680px;font-size:1.05rem;opacity:.95;color:#fff}
.exercise-page-inner .container{padding:18px}
.exercise-page-inner .notice{background:#fff7e6;border:1px solid #efd59b;border-radius:18px;padding:16px;margin-bottom:18px;color:#24303b}
.exercise-page-inner .notice strong{color:#805515}
.exercise-page-inner .quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.exercise-page-inner .quick div{background:#fff;border:1px solid #dbe2e8;border-radius:15px;padding:14px;text-align:center;box-shadow:0 8px 24px rgba(25,40,55,.08);color:#24303b}
.exercise-page-inner .quick b{display:block;font-size:1.25rem;color:#315a9b}
.exercise-page-inner h2{font-size:1.35rem;margin:25px 0 12px;color:#24303b}
.exercise-page-inner .week{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.exercise-page-inner .week div{padding:13px 9px;border-radius:14px;text-align:center;border:1px solid #dbe2e8;background:#fff;color:#24303b}
.exercise-page-inner .week .active{background:#edf7f0;border-color:#b9d9c4}
.exercise-page-inner .week b{display:block}
.exercise-page-inner .watch{background:#edf7f0;border-left:4px solid #347a55;padding:12px 14px;border-radius:8px;margin:10px 0;color:#24303b}
.exercise-page-inner .exercise{background:#fff;border:1px solid #dbe2e8;border-radius:18px;margin:12px 0;box-shadow:0 8px 24px rgba(25,40,55,.08);overflow:hidden;color:#24303b}
.exercise-page-inner .exercise summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:12px;color:#24303b}
.exercise-page-inner .exercise summary::-webkit-details-marker{display:none}
.exercise-page-inner .num{min-width:36px;height:36px;border-radius:50%;background:#315a9b;color:#fff;display:grid;place-items:center}
.exercise-page-inner .exercise summary:after{content:"＋";margin-left:auto;color:#64717d;font-size:1.4rem}
.exercise-page-inner .exercise[open] summary:after{content:"−"}
.exercise-page-inner .exercise-content{padding:0 18px 18px;color:#24303b}
.exercise-page-inner .checkin-card{background:#fff;border:1px solid #dbe2e8;padding:16px;border-radius:18px;margin:12px 0}
.exercise-page-inner .exercise-content p,.exercise-page-inner .exercise-content li{color:#24303b}
.exercise-page-inner .badge{display:inline-block;background:#eaf1fb;color:#315a9b;border-radius:999px;padding:4px 9px;font-size:.82rem;font-weight:700;margin:0 5px 8px 0}
.exercise-page-inner .do{background:#f7f9fb;border-left:4px solid #315a9b;padding:12px 14px;border-radius:8px;margin:10px 0;color:#24303b}
.exercise-page-inner .stop{background:#fff0ee;border-left:4px solid #a33b32;padding:12px 14px;border-radius:8px;margin:10px 0;color:#24303b}
.exercise-page-inner .timer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.exercise-page-inner button{border:0;border-radius:10px;padding:10px 14px;background:#315a9b;color:#fff;font-weight:700;cursor:pointer}
.exercise-page-inner button.secondary{background:#e8edf2;color:#24303b}
.exercise-page-inner .time{font-size:1.25rem;font-weight:700;min-width:65px;color:#24303b}
.exercise-page-inner .progress{height:10px;background:#e5e9ed;border-radius:99px;overflow:hidden;margin:12px 0}
.exercise-page-inner .bar{height:100%;width:0;background:#347a55;transition:width .2s}
.exercise-page-inner .links a{display:block;padding:12px 14px;background:#fff;border:1px solid #dbe2e8;border-radius:12px;color:#315a9b;text-decoration:none;font-weight:700;margin:9px 0}
.exercise-page-inner .links a:hover,.exercise-page-inner .links a:focus-visible{background:#eaf1fb;border-color:#315a9b}
.exercise-page-inner .exercise-img{display:block;width:100%;max-width:620px;margin:0 auto 14px;border-radius:14px;border:1px solid #dbe2e8;box-shadow:0 5px 16px rgba(25,40,55,.08)}
.exercise-page-inner footer{font-size:.86rem;color:#64717d;padding:18px;text-align:center}

@media(max-width:620px){
 .site-page-header{align-items:flex-start;flex-direction:column;padding:10px 12px;gap:8px}
 .site-page-title{text-align:left}
 .exercise-page-inner{padding:12px 10px 34px}
 .exercise-page-inner .container{padding:12px}
 .exercise-page-inner .hero{padding:28px 16px 24px;border-radius:16px}
 .exercise-page-inner .quick{grid-template-columns:1fr}
 .exercise-page-inner .week{grid-template-columns:repeat(2,1fr)}
 .exercise-page-inner .exercise summary{font-size:1rem}
}
@media print{
 .site-page-header{position:static;background:#fff;color:#000;box-shadow:none;border-bottom:1px solid #ccc}
 .site-home-link{color:#000;border-color:#ccc}
 .exercise-page,.exercise-site{background:#fff}
 .exercise-page-inner .hero{color:#000;background:#fff;border-bottom:2px solid #333}
 .exercise-page-inner .hero h1,.exercise-page-inner .hero p,.exercise-page-inner h2{color:#000}
 .exercise-page-inner .timer,.exercise-page-inner .links{display:none}
 .exercise-page-inner .exercise{box-shadow:none;break-inside:avoid}
 .exercise-page-inner details{display:block}
 .exercise-page-inner details .exercise-content{display:block}
}