/* ==========================================================================
   Ricochet Business Solutions, website course
   Brand: dark backgrounds, red #FF2D00 and #B91C00, black, grey.
   ========================================================================== */

:root{
  --black:#0A0A0A;
  --panel:#141414;
  --panel-2:#1C1C1C;
  --grey:#8C8C8C;
  --grey-light:#C9C9C9;
  --white:#F2F2F2;
  --red:#FF2D00;
  --red-deep:#B91C00;
  --line:rgba(242,242,242,.12);
  --display:"Archivo",Impact,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --shell:1180px;
  --gutter:clamp(20px,5vw,56px);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--red);}
a:hover{color:var(--white);}
::selection{background:var(--red);color:#fff;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.03;letter-spacing:-.02em;font-weight:800;}
.skip{position:absolute;left:-9999px;background:var(--red);color:#fff;padding:12px 18px;z-index:99;}
.skip:focus{left:12px;top:12px;}

/* masthead */
.top{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;}
.top__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);}
.top__brand img{height:40px;width:auto;}
.top__brand span{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);}
.top__nav{display:flex;gap:22px;}
.top__nav button{
  background:none;border:0;color:var(--grey-light);cursor:pointer;
  font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 0;border-bottom:1px solid transparent;
}
.top__nav button:hover,.top__nav button.is-on{color:var(--white);border-bottom-color:var(--red);}

/* hero */
.hero{position:relative;padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,86px);overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 78% 12%,rgba(255,45,0,.20) 0%,transparent 58%);}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:center;}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:900;text-transform:uppercase;}
.hero h1 em{font-style:normal;color:var(--red);}
.hero__sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--grey-light);margin:22px 0 0;max-width:46ch;}
.hero__logo{width:min(300px,70%);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));}
.badge{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:7px 14px;margin-bottom:24px;}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:34px;}
.hero__meta div{border-left:2px solid var(--red);padding-left:14px;}
.hero__meta strong{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;}
.hero__meta span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);}

/* sections */
.sec{padding:clamp(48px,7vw,92px) 0;border-top:1px solid var(--line);}
.sec__head{max-width:62ch;margin-bottom:clamp(28px,4vw,48px);}
.sec__head h2{font-size:clamp(1.8rem,4vw,2.9rem);text-transform:uppercase;}
.sec__head p{color:var(--grey-light);margin:18px 0 0;}
.kicker{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 16px;}
.introcopy p{color:var(--grey-light);max-width:68ch;margin:0 0 18px;}
.weeks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px);margin-top:36px;}
.weekcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:26px 24px;}
.weekcard__n{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);}
.weekcard h3{font-size:1.5rem;margin:10px 0 12px;text-transform:uppercase;}
.weekcard p{margin:0;color:var(--grey-light);font-size:15.5px;}

/* contents */
.toc{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tocitem{display:flex;gap:16px;align-items:baseline;text-align:left;cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--white);padding:18px 20px;font-family:var(--body);transition:border-color .2s ease,background .2s ease;}
.tocitem:hover{border-color:var(--red);background:var(--panel-2);}
.tocitem__num{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--red);}
.tocitem__text strong{display:block;font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;}
.tocitem__text em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}

/* lessons */
.lesson{display:none;padding:clamp(40px,6vw,76px) 0;border-top:1px solid var(--line);}
.lesson.is-open{display:block;}
.lesson__head{margin-bottom:clamp(30px,4vw,50px);}
.lesson__head h2{font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;}
.goal{margin:22px 0 0;color:var(--grey-light);max-width:60ch;border-left:2px solid var(--red);padding-left:16px;}
.goal span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);}
.block{margin-bottom:clamp(34px,4vw,52px);}
.block__title{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.block p{color:var(--grey-light);max-width:70ch;margin:0 0 18px;}

.terms{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.term{background:var(--panel);padding:20px 22px;}
.terms dt{font-family:var(--display);font-size:1.05rem;font-weight:800;margin:0 0 8px;}
.terms dd{margin:0;font-size:15px;color:var(--grey-light);line-height:1.6;}
.terms--glossary{grid-template-columns:1fr 1fr 1fr;}

.look{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:26px 24px;}
.look .block__title{border-bottom:0;padding-bottom:0;margin-bottom:14px;}
.look p{margin:0;}
.look__link{margin-top:16px !important;}

.tasks{margin:0;padding:0;list-style:none;}
.tasks li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);color:var(--grey-light);cursor:pointer;}
.tasks li:first-child{border-top:1px solid var(--line);}
.tickbox{flex:0 0 auto;width:18px;height:18px;margin-top:4px;border:1px solid var(--grey);display:block;}
.tasks li.is-done .tickbox{background:var(--red);border-color:var(--red);}
.tasks li.is-done span:last-child{color:var(--grey);text-decoration:line-through;}

.check{background:linear-gradient(120deg,var(--red-deep),var(--red));padding:26px 24px;}
.check .block__title{color:#fff;border-bottom-color:rgba(255,255,255,.3);}
.check p{color:#fff;margin:0;font-weight:500;}

/* ---------- figures ---------- */
.fig{margin:0 0 clamp(26px,3.4vw,42px);}
.fig__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.fig__hint{
  display:none;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin:0 0 10px;
}
.fig__frame{background:var(--panel);border:1px solid var(--line);padding:clamp(16px,2.4vw,30px);position:relative;}
.fig__frame svg{width:100%;height:auto;display:block;}
.fig__frame img{width:100%;}
.fig figcaption{font-size:14px;color:var(--grey);margin-top:14px;max-width:76ch;line-height:1.6;}
.fig figcaption b{color:var(--grey-light);font-weight:600;}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);}
.compare > div{background:var(--panel);position:relative;}
.compare img{width:100%;}
.taglabel{
  display:block;
  font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 14px;color:#fff;
}
.taglabel--bad{background:var(--red-deep);}
.taglabel--good{background:#1F7A45;}

.triptych{display:grid;grid-template-columns:1.6fr 1fr .55fr;gap:2px;background:var(--line);align-items:start;}
.triptych > div{background:var(--panel);position:relative;}
.triptych img{width:100%;}
.triptych .taglabel{background:#2b2b2b;color:var(--grey-light);}

/* annotated screenshot */
.anno{position:relative;line-height:0;}
.anno img{width:100%;}
.anno__mark{position:absolute;border:2px dashed var(--red);}
.anno__mark:first-of-type .anno__num{top:-13px;left:8px;}
.anno__num{
  position:absolute;top:-4px;left:-36px;
  width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;
  font-family:var(--display);font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.anno__key{margin:18px 0 0;padding:0;list-style:none;counter-reset:key;line-height:1.6;}
.anno__key li{
  counter-increment:key;position:relative;padding:11px 0 11px 40px;
  border-bottom:1px solid var(--line);color:var(--grey-light);font-size:14.5px;
}
.anno__key li::before{
  content:counter(key);position:absolute;left:0;top:10px;
  width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;
  font-family:var(--display);font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* where to look */
.hunts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);margin-top:34px;}
.hunt{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:26px 24px;}
.hunt h3{font-size:1.32rem;text-transform:uppercase;margin:0 0 12px;}
.hunt__blurb{color:var(--grey);font-size:14.5px;margin:0 0 20px;}
.hunt__list{margin:0;padding:0;list-style:none;}
.hunt__list li{padding:14px 0;border-top:1px solid var(--line);}
.hunt__list a{
  display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;
  text-decoration:none;color:var(--white);border-bottom:1px solid var(--red);
  padding-bottom:3px;margin-bottom:8px;width:fit-content;
}
.hunt__list a:hover{color:var(--red);}
.hunt__list span{display:block;font-size:14px;color:var(--grey-light);line-height:1.6;}

.starthere{
  background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:22px 24px;margin:0 0 26px;
}
.starthere h4{
  font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin:0 0 14px;
}
.starthere ol{margin:0;padding-left:20px;color:var(--grey-light);font-size:15px;}
.starthere li{margin-bottom:8px;}
.starthere p{margin:16px 0 0;font-size:13px;}

/* prompt block */
.prompt{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--red);}
.prompt__head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);}
.prompt__head h4{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0;}
.prompt pre{
  margin:0;padding:22px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.65;color:var(--grey-light);white-space:pre-wrap;
}
.copybtn{
  background:transparent;border:1px solid var(--red);color:var(--white);cursor:pointer;
  font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 16px;transition:background .2s ease;
}
.copybtn:hover{background:var(--red);color:#fff;}
.prompt__note{font-size:13.5px;color:var(--grey);padding:0 22px 20px;margin:0;}

.lessonnav{display:flex;justify-content:space-between;gap:14px;padding:34px 0 0;border-top:1px solid var(--line);}
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:15px 26px;border:1px solid var(--red);background:transparent;color:var(--white);text-decoration:none;transition:background .2s ease,color .2s ease;}
.btn:hover{background:var(--red);color:#fff;}
.btn--solid{background:var(--red);color:#fff;}
.btn--solid:hover{background:var(--red-deep);}
.btn[disabled]{opacity:.3;cursor:not-allowed;border-color:var(--grey);}

.footer{background:var(--panel);border-top:1px solid var(--line);padding:clamp(40px,6vw,70px) 0 30px;}
.footer__in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,4vw,48px);}
.footer img{height:56px;width:auto;margin-bottom:18px;}
.footer p{color:var(--grey);font-size:15px;margin:0 0 10px;max-width:44ch;}
.footer h4{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:0 0 16px;}
.footer ul{margin:0;padding:0;list-style:none;}
.footer li{margin-bottom:10px;color:var(--grey-light);font-size:15px;}
.footer__base{border-top:1px solid var(--line);margin-top:38px;padding-top:22px;font-size:12.5px;color:var(--grey);}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;}
  .hero__logo{width:min(220px,55%);order:-1;margin:0 0 8px;}
  .weeks,.toc,.terms,.terms--glossary,.footer__in,.hunts{grid-template-columns:1fr;}
  .top__nav{gap:14px;}
  .triptych{grid-template-columns:1fr;}
}
@media (max-width:820px){
  /* Diagrams and the annotated shot stop being readable below about 700px,
     so they keep their size and swipe sideways inside their own frame. */
  .fig--wide .fig__hint{display:block;}
  .fig--wide .fig__scroll > *{min-width:620px;}
  .fig--wide .fig__frame{padding:14px;}
  .fig--wide .fig__scroll{
    scrollbar-width:thin;
    scrollbar-color:var(--red) var(--panel-2);
  }
  .fig--wide .fig__scroll::-webkit-scrollbar{height:6px;}
  .fig--wide .fig__scroll::-webkit-scrollbar-thumb{background:var(--red);}
  .fig--wide .fig__scroll::-webkit-scrollbar-track{background:var(--panel-2);}
  .fig--wide .fig__frame::after{
    content:"";position:absolute;top:1px;right:1px;bottom:1px;width:38px;
    background:linear-gradient(90deg,rgba(20,20,20,0),rgba(20,20,20,.92));
    pointer-events:none;
  }
}

@media (max-width:620px){
  body{font-size:16.5px;}
  .top__brand span{display:none;}
  .lessonnav{flex-direction:column;}
  .btn{justify-content:center;}
  .compare{grid-template-columns:1fr;}
  .anno__mark{border-width:1px;}
  .anno__num{width:19px;height:19px;font-size:10.5px;top:-10px;left:-10px;}
  .anno__mark:first-of-type .anno__num{top:-10px;left:2px;}
}
@media print{
  .top,.lessonnav,.toc,.hero::before,.copybtn{display:none;}
  body{background:#fff;color:#000;}
  .lesson{display:block !important;page-break-after:always;border-top:0;}
  .term,.look,.weekcard,.fig__frame,.prompt{background:#f4f4f4;}
  .terms dd,.block p,.goal,.fig figcaption,.prompt pre{color:#222;}
  .check{background:#eee;}
  .check p{color:#000;}
}