/* ClaimYourCollege video hub, direction A: THE STUDY GUIDE.
   Built on the site's content stylesheet (/state-aid/style.css): same fonts, tokens, header,
   footer and square-cornered cards, widened to 1100px for the video grids. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/newsreader-var.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/instrument-sans-var.woff2') format('woff2');}
:root{--paper:#F6F1E8;--surface:#FFFFFF;--navy:#10243E;--navy-700:#0B1A2E;--ink:#1C2630;--ink2:#5C6873;--ink3:#3A4550;--line:#D6CCB8;--gold:#80612E;--gold-hair:#B58A49;--gold-bg:#EDE5D6;--green:#3A5C46;--amber:#8A5A3C;--red:#9A3F28;--gutter:20px;}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;color:var(--ink);font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:clip;
  background:radial-gradient(1100px 620px at 22% 8%,rgba(255,255,255,.92),rgba(255,255,255,0) 70%),radial-gradient(900px 700px at 82% 42%,rgba(181,138,73,.10),rgba(181,138,73,0) 72%),radial-gradient(1000px 800px at 60% 96%,rgba(16,36,62,.10),rgba(16,36,62,0) 70%),var(--paper);background-attachment:fixed;}
img,video{max-width:100%;height:auto;display:block;}
a{color:var(--navy);text-underline-offset:2px;}
a:hover{color:var(--gold);}
h1,h2,h3{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;letter-spacing:-.03em;font-weight:600;color:var(--navy);text-wrap:balance;margin:0;}
.vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:var(--paper);padding:8px 12px;font-weight:600;z-index:50;}
.skip:focus{left:16px;}

/* the site's content chrome */
.sa-wrap{max-width:1100px;margin:0 auto;padding:22px var(--gutter) 64px;}
.sa-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px;}
.sa-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);}
.sa-mark{width:38px;height:38px;border-radius:11px;background:var(--navy);color:#F6F1E8;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sa-brand-name{font-weight:600;font-size:15px;display:block;}
.sa-brand-sub{font-size:12px;color:var(--ink2);display:block;}
.sa-back{font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink2);border:1px solid var(--line);background:var(--surface);padding:8px 13px;white-space:nowrap;}
.sa-back:hover{color:var(--ink);}
.sa-crumbs{font-size:12.5px;color:var(--ink2);margin-bottom:18px;}
.sa-crumbs a{color:var(--ink2);}.sa-crumbs span{margin:0 5px;color:var(--line);}
.sa-crumbs span:last-child{margin:0;color:var(--ink2);}
.sa-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 10px;}
.sa-lede{font-size:16.5px;color:var(--ink3);margin:0 0 18px;max-width:58ch;}
.sa-foot{margin-top:56px;border-top:1px solid var(--line);padding-top:18px;font-size:12.5px;color:var(--ink2);line-height:1.7;}
.sa-foot a{color:var(--ink2);}
.sa-foot-nav{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.sa-foot-col{display:flex;flex-direction:column;gap:7px;}
.sa-foot-col b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:700;margin-bottom:2px;}
.sa-foot-col a{font-size:13px;color:#3A4550;text-decoration:none;}
.sa-foot-col a:hover{color:var(--gold);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;font-weight:600;font-size:15px;text-decoration:none;color:var(--navy);background:var(--surface);border:1px solid var(--line);transition:border-color .15s,background .15s,color .15s;}
.btn:hover{border-color:var(--gold-hair);color:var(--navy);}
.btn.primary{background:var(--navy);color:var(--paper);border-color:var(--navy);}
.btn.primary:hover{background:var(--navy-700);color:#fff;}
.cta{display:flex;flex-wrap:wrap;gap:10px;}

/* intro */
.intro{display:grid;gap:26px;margin-bottom:8px;}
h1{font-size:clamp(30px,4.2vw,44px);line-height:1.1;margin:0 0 14px;}
.facts{font-size:14px;color:var(--ink2);margin:0 0 18px;}
.facts b{color:var(--ink);font-weight:600;}
.loop{margin:0;}
.loop video,.loop img{width:100%;border:1px solid var(--line);background:var(--paper);}
.loop figcaption{font-size:13px;color:var(--ink2);margin-top:10px;line-height:1.5;}
.loop.tall video{aspect-ratio:5/6;}

/* section heads */
.sec{margin:46px 0 16px;padding-top:18px;border-top:1px solid var(--line);}
.sec h2{font-size:clamp(22px,3vw,28px);line-height:1.15;}
.sec .blurb{font-size:15px;color:var(--ink3);margin:6px 0 0;max-width:62ch;}
.sec .num{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:15px;letter-spacing:0;color:var(--navy);margin-right:8px;}

/* cards */
.grid{display:grid;gap:18px 14px;}
.grid.shorts{grid-template-columns:repeat(2,1fr);}
.grid.long{grid-template-columns:1fr;}
.vcard{display:flex;flex-direction:column;gap:6px;min-width:0;}
.vcard .play{display:block;text-decoration:none;}
.th{position:relative;display:block;overflow:hidden;background:var(--gold-bg);border:1px solid var(--line);aspect-ratio:9/16;transition:border-color .15s;}
.th.wide{aspect-ratio:16/9;}
.th img{width:100%;height:100%;object-fit:cover;}
.th .dur{position:absolute;right:8px;bottom:8px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.04em;background:var(--navy);color:var(--paper);padding:3px 6px;font-variant-numeric:tabular-nums;}
.th .pv{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:1;}
.th .pv.on{opacity:1;}
.vcard:hover .th,.vcard:focus-within .th{border-color:var(--gold-hair);}
.vcard h3{font-size:14.5px;line-height:1.3;letter-spacing:-.01em;font-weight:600;margin-top:4px;text-wrap:pretty;}
.vcard h3 a{text-decoration:none;color:var(--navy);}
.vcard h3 a:hover{color:var(--gold);}
.vcard .meta{font-size:12px;color:var(--ink2);margin:0;}
.vcard .desc{font-size:13.5px;color:var(--ink3);margin:0;line-height:1.5;}
.vcard .guide{font-size:13px;font-weight:600;color:var(--gold);text-decoration:none;margin-top:2px;}
.vcard .guide:after{content:" \2192";}
.vcard .guide:hover{text-decoration:underline;}
.vcard.long h3{font-size:17px;}
.vcard.long .th .dur{font-size:12px;}

/* filter bar */
.tools{position:sticky;top:var(--sn-h,0px);z-index:10;margin:40px calc(-1 * var(--gutter)) 8px;padding:12px var(--gutter) 10px;background:rgba(246,241,232,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.search{display:block;}
.search input{width:100%;padding:11px 12px;border:1px solid var(--navy);background:#fff;color:var(--ink);font:inherit;font-size:15px;border-radius:0;-webkit-appearance:none;}
.search input:focus{outline:2px solid var(--gold-hair);outline-offset:1px;}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;background:var(--surface);border:1px solid var(--line);padding:6px 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;border-radius:0;}
.chip small{font-size:11.5px;color:var(--ink2);margin-left:2px;}
.chip:hover{border-color:var(--gold-hair);}
.chip.on{background:var(--navy);border-color:var(--navy);color:var(--paper);}
.chip.on small{color:#C6D2DB;}
.count{margin:4px 0 0;font-size:12.5px;color:var(--ink2);display:flex;gap:12px;align-items:center;}
.clear{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--gold);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}

/* on phones a topic shows its first four Shorts; "Show all" opens the rest (filters open everything) */
.morebtn{display:none;margin:14px auto 0;background:var(--surface);border:1px solid var(--line);padding:9px 16px;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;}
.morebtn:hover{border-color:var(--gold-hair);}
@media (max-width:699px){
  .topic.collapsible:not(.open) .grid.shorts > :nth-child(n+5){display:none;}
  .topic.collapsible:not(.open) .morebtn{display:block;}
  .filtered .topic .grid.shorts > :nth-child(n+5){display:revert;}
  .filtered .topic .morebtn{display:none;}
}

/* decode */
.decode{display:grid;gap:22px;margin-top:56px;padding:22px;background:var(--surface);border:1px solid var(--line);}
.decode h2{font-size:clamp(24px,3vw,30px);line-height:1.15;margin-bottom:10px;}
.decode p{font-size:15.5px;color:var(--ink3);margin:0 0 12px;}
.decode .cta{margin-top:6px;}
.decode .loop video{border:0;}

/* more tiles */
.more{display:grid;gap:11px;margin-top:22px;}
.tile{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--line);padding:14px 16px;text-decoration:none;transition:border-color .15s,transform .1s;}
.tile:hover{border-color:var(--gold-hair);transform:translateY(-1px);}
.tile b{font-weight:600;color:var(--ink);font-size:15px;}
.tile span{font-size:12.5px;color:var(--ink2);line-height:1.5;}

/* reveals */
.js [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;}
.js [data-reveal].in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none;}}
[hidden]{display:none !important;}

@media (min-width:700px){
  .grid.shorts{grid-template-columns:repeat(4,1fr);}
  .grid.long{grid-template-columns:repeat(2,1fr);}
  .intro{grid-template-columns:1fr 380px;align-items:start;gap:40px;}
  .decode{grid-template-columns:300px 1fr;align-items:center;gap:32px;padding:28px;}
  .more{grid-template-columns:repeat(3,1fr);}
  .tools{display:grid;grid-template-columns:300px 1fr;gap:8px 18px;align-items:center;}
  .tools .count{grid-column:1 / -1;margin-top:0;}
  .chips{padding:0;}
}
@media (min-width:1000px){
  .grid.shorts{grid-template-columns:repeat(5,1fr);}
  .grid.long{grid-template-columns:repeat(4,1fr);}
  .intro{grid-template-columns:1fr 440px;}
}
@media (max-width:560px){.sa-wrap{padding:18px 16px 52px;}:root{--gutter:16px;}.sa-brand-sub{display:none;}}

/* focus: a visible ring on every control (the thumbnails are mouse-only; the title link is the keyboard target) */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.vcard h3 a:focus-visible{outline-offset:3px;}
.vcard:focus-within .th{border-color:var(--gold-hair);}

/* motion control (WCAG 2.2.2): one button pauses both loops and the hover previews */
.motion-toggle{margin-top:10px;background:var(--surface);border:1px solid var(--line);padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer;}
.motion-toggle:hover{border-color:var(--gold-hair);}
@media (prefers-reduced-motion:reduce){.motion-toggle{display:none;}}
.still .js [data-reveal],.still [data-reveal]{transition:none;}
/* A topic link (#css, a chip, the hero button) lands below the sticky header and the toolbar. */
html:has(.sn-top) section.topic[id],html:has(.sn-top) #browse{scroll-margin-top:calc(var(--sn-h,63px) + 160px);}
@media(min-width:900px){html:has(.sn-top) section.topic[id]{scroll-margin-top:calc(var(--sn-h,63px) + 130px);}}