/*
 * The Schools Challenge: Start Shooting page.
 * Load after screenNEW.css and home.css.
 * Content-only override: header, navigation and footer are untouched.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

body#startshooting > #container {
  --tsc-navy:#192b6d;
  --tsc-blue:#2f5caa;
  --tsc-sky:#91c5ed;
  --tsc-pale:#edf6fc;
  --tsc-paper:#fff;
  --tsc-ink:#172243;
  --tsc-muted:#5e6981;
  --tsc-line:rgba(25,43,109,.16);
  --tsc-serif:'Playfair Display',Georgia,serif;
  --tsc-sans:'DM Sans',Arial,sans-serif;
  box-sizing:border-box;
  width:min(1000px,calc(100% - 2*clamp(18px,4vw,56px)))!important;
  max-width:1000px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:clamp(42px,6vw,70px) 0 clamp(55px,8vw,88px)!important;
  background:transparent!important;
  color:var(--tsc-ink);
  font:400 16px/1.7 var(--tsc-sans);
  -webkit-font-smoothing:antialiased;
}

body#startshooting > #container::before {
  content:'';
  position:fixed;
  z-index:-2;
  inset:0;
  background:linear-gradient(180deg,var(--tsc-pale) 0,#fff 720px);
}

body#startshooting > #container *,
body#startshooting > #container *::before,
body#startshooting > #container *::after { box-sizing:border-box; }

body#startshooting > #container a { color:var(--tsc-blue);font-weight:600;text-underline-offset:4px; }
body#startshooting > #container h1,
body#startshooting > #container h2,
body#startshooting > #container h3 { color:var(--tsc-navy);font-family:var(--tsc-serif)!important;font-weight:500!important;letter-spacing:-.025em; }

body#startshooting > #container > h1.indent20 {
  width:100%!important;
  max-width:850px;
  margin:0 auto 28px!important;
  padding:0!important;
  color:var(--tsc-navy)!important;
  font-size:clamp(2.5rem,5vw,4.25rem)!important;
  line-height:1.08!important;
  text-align:center!important;
}

/* Introductory invitation */
body#startshooting #startshootingleft {
  float:none!important;
  width:100%!important;
  max-width:850px!important;
  margin:0 auto clamp(32px,5vw,56px)!important;
  padding:clamp(28px,4vw,44px)!important;
  border:1px solid var(--tsc-line)!important;
  border-top:5px solid var(--tsc-navy)!important;
  background:#fff!important;
  box-shadow:0 12px 32px rgba(25,43,109,.075);
  text-align:center!important;
}

body#startshooting #startshootingleft h2 {
  margin:0 0 15px!important;
  padding:0!important;
  font-size:clamp(1.65rem,3vw,2.35rem)!important;
  line-height:1.18!important;
  text-align:center!important;
}

body#startshooting #startshootingleft p {
  max-width:720px;
  margin:0 auto!important;
  padding:0!important;
  color:var(--tsc-muted)!important;
  font:400 clamp(1rem,1.6vw,1.12rem)/1.72 var(--tsc-sans)!important;
  text-align:center!important;
}

body#startshooting #startshootingleft p strong { color:var(--tsc-navy);font-weight:700; }

/* Member and parent stories */
body#startshooting #startshootingright {
  float:none!important;
  width:100%!important;
  margin:0 0 28px!important;
  padding:clamp(28px,4vw,46px)!important;
  overflow:hidden;
  border:1px solid var(--tsc-line)!important;
  background:var(--tsc-pale)!important;
  box-shadow:0 9px 28px rgba(25,43,109,.05);
}

body#startshooting #startshootingright > h2 {
  clear:both;
  margin:30px 0 18px!important;
  padding:0 0 12px!important;
  border-bottom:2px solid var(--tsc-sky)!important;
  color:var(--tsc-navy)!important;
  font-size:clamp(1.45rem,2.5vw,2rem)!important;
  line-height:1.25!important;
  text-align:left!important;
}

body#startshooting #startshootingright > h2:first-child { margin-top:0!important; }

body#startshooting #startshootingright > img {
  float:left!important;
  width:clamp(170px,24vw,235px)!important;
  max-width:36%!important;
  height:auto!important;
  margin:0 25px 18px 0!important;
  border:6px solid #fff!important;
  border-radius:0!important;
  box-shadow:0 8px 22px rgba(25,43,109,.15);
  object-fit:cover;
}

body#startshooting #startshootingright > p {
  position:relative;
  overflow:hidden;
  margin:0 0 18px!important;
  padding:0!important;
  margin:0 0 20px!important;
  padding:24px 25px 24px 54px!important;
  border:1px solid var(--tsc-line)!important;
  border-left:5px solid var(--tsc-blue)!important;
  background:#fff!important;
  color:var(--tsc-muted)!important;
  font:400 15px/1.78 var(--tsc-sans)!important;
  text-align:left!important;
  box-shadow:0 7px 20px rgba(25,43,109,.055);
}

body#startshooting #startshootingright > p.pwithimage { min-height:185px; }
body#startshooting #startshootingright > p em { color:var(--tsc-ink);font-style:normal; }
body#startshooting #startshootingright > p::before {
  content:'“';
  position:absolute;
  top:13px;
  left:15px;
  color:var(--tsc-sky);
  font:600 3.2rem/1 var(--tsc-serif);
}
body#startshooting #startshootingright > br { display:none!important; }
body#startshooting #startshootingright > .clearallclass { clear:both!important;height:0!important;margin:0!important; }

/* Main lesson and Academy sections. The legacy HTML has no card wrappers,
   so the heading, image and copy are visually joined with matching surfaces. */
body#startshooting > #container > h2.indent20 {
  clear:both!important;
  width:100%!important;
  margin:24px 0 0!important;
  padding:clamp(21px,3vw,28px) clamp(22px,3.5vw,34px)!important;
  border:0!important;
  border-top:5px solid var(--tsc-navy)!important;
  background:#fff!important;
  color:var(--tsc-navy)!important;
  font-size:clamp(1.7rem,3vw,2.45rem)!important;
  line-height:1.16!important;
  text-align:left!important;
}

body#startshooting > #container > h2.indent20 br { display:none!important; }

body#startshooting > #container > .verticalimageblockleft {
  float:left!important;
  width:285px!important;
  min-height:205px;
  margin:0!important;
  padding:0 0 25px 30px!important;
  background:#fff!important;
}

body#startshooting > #container > .verticalimageblockleft img {
  display:block!important;
  width:100%!important;
  max-width:250px!important;
  height:auto!important;
  margin:0 0 12px!important;
  border:0!important;
  border-radius:0!important;
  object-fit:cover;
  box-shadow:0 8px 22px rgba(25,43,109,.12);
}

body#startshooting > #container > p.indent270,
body#startshooting > #container > h2.indent270,
body#startshooting > #container > ul.indent270 {
  width:auto!important;
  margin-left:285px!important;
  margin-right:0!important;
  padding-left:28px!important;
  padding-right:clamp(22px,3.5vw,34px)!important;
  background:#fff!important;
}

body#startshooting > #container > p.indent270 {
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:0!important;
  padding-bottom:15px!important;
  color:var(--tsc-muted)!important;
  font:400 15px/1.75 var(--tsc-sans)!important;
  text-align:left!important;
}

body#startshooting > #container > p.indent270 strong { color:var(--tsc-navy);font-weight:700; }

body#startshooting > #container > h2.indent270 {
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:18px!important;
  padding-bottom:12px!important;
  color:var(--tsc-navy)!important;
  font-size:clamp(1.3rem,2vw,1.6rem)!important;
  line-height:1.3!important;
  text-align:left!important;
}

body#startshooting > #container > ul.indent270 {
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:2px!important;
  padding-bottom:20px!important;
  list-style:none!important;
}

body#startshooting > #container > ul.indent270 li {
  position:relative;
  margin:0!important;
  padding:10px 0 10px 23px!important;
  border-bottom:1px solid var(--tsc-line);
  color:var(--tsc-muted)!important;
  font:400 14px/1.55 var(--tsc-sans)!important;
  list-style:none!important;
}

body#startshooting > #container > ul.indent270 li::marker { content:''!important; }
body#startshooting > #container > ul.indent270 li::before { content:'•';position:absolute;left:4px;top:10px;color:var(--tsc-blue);font-weight:700; }

body#startshooting > #container > .thicklinedivider {
  clear:both!important;
  width:100%!important;
  height:24px!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}

body#startshooting > #container > a[id] { display:block;position:relative;top:-15px;visibility:hidden; }
body#startshooting > #container > br { display:none!important; }
body#startshooting > #container > .clearallclass { clear:both!important;height:0!important;margin:0!important; }

/* Give alternating sections the site's second, pale-blue surface. */
body#startshooting > #container > .thicklinedivider + a + h2.indent20,
body#startshooting > #container > a#haveago + h2.indent20 { background:var(--tsc-pale)!important; }
body#startshooting > #container > a#haveago + h2.indent20 + .verticalimageblockleft,
body#startshooting > #container > a#haveago + h2.indent20 + .verticalimageblockleft ~ p.indent270 { background:var(--tsc-pale)!important; }
body#startshooting > #container > a#haveago + h2.indent20 + .verticalimageblockleft + p.indent270 {
  min-height:clamp(251px,calc(570px - 25vw),370px)!important;
  background:var(--tsc-pale)!important;
}
body#startshooting > #container > a#haveago + h2.indent20 + .verticalimageblockleft {
  min-height:clamp(251px,calc(570px - 25vw),370px)!important;
}

@media (max-width:700px) {
  body#startshooting > #container { width:calc(100% - 30px)!important;padding:38px 0 56px!important; }
  body#startshooting > #container > h1.indent20 { font-size:2.45rem!important; }
  body#startshooting #startshootingleft,
  body#startshooting #startshootingright { padding:25px 20px!important; }
  body#startshooting #startshootingright > img { float:none!important;width:100%!important;max-width:320px!important;margin:0 auto 18px!important; }
  body#startshooting #startshootingright > p.pwithimage { min-height:0; }
  body#startshooting #startshootingright > p { padding:22px 19px 22px 46px!important; }
  body#startshooting #startshootingright > p::before { left:12px; }
  body#startshooting > #container > h2.indent20 { padding:22px 20px!important; }
  body#startshooting > #container > .verticalimageblockleft { float:none!important;width:100%!important;min-height:0;padding:0 20px 20px!important; }
  body#startshooting > #container > a#haveago + h2.indent20 + .verticalimageblockleft,
  body#startshooting > #container > a#haveago + h2.indent20 + .verticalimageblockleft + p.indent270 { min-height:0!important; }
  body#startshooting > #container > .verticalimageblockleft img { width:100%!important;max-width:420px!important;margin:0 auto 12px!important; }
  body#startshooting > #container > p.indent270,
  body#startshooting > #container > h2.indent270,
  body#startshooting > #container > ul.indent270 { width:100%!important;margin-left:0!important;padding-left:20px!important;padding-right:20px!important; }
  body#startshooting > #container > p.indent270:last-of-type { padding-bottom:24px!important; }
}

@media (prefers-reduced-motion:reduce) {
  body#startshooting > #container *,body#startshooting > #container *::before,body#startshooting > #container *::after { transition:none!important; }
}