/* A single visual shell for the home, the finished assessment and public reports.
   Keep the same logo artwork, crop, header proportions and responsive content width. */
.is-home .top,
.is-result .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:0;
  padding:10px 0 16px;
  margin:0 0 13px;
  border:0;
}
.is-home .brand,
.is-result .brand{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  color:#302159;
  text-decoration:none;
  font:900 clamp(28px,5.8vw,38px)/1 Arial,Helvetica,sans-serif;
  letter-spacing:-.075em;
}
.is-home .brand i,
.is-result .brand i{color:#7040ef;font-style:normal}
.is-home .brand .brand-icon,
.is-result .brand .brand-icon{
  display:block;
  position:relative;
  flex:none;
  width:58px;
  height:58px;
  padding:0;
  overflow:hidden;
  border:2.5px solid #24251d;
  border-radius:18px;
  background:#f8d4b7;
  transform:rotate(-6deg);
  box-shadow:3px 4px 0 #c49c84;
}
.is-home .brand .brand-icon img,
.is-result .brand .brand-icon img{
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  background:transparent;
  object-fit:contain;
  transform:scale(1.47) translateY(5%);
  transform-origin:center center;
}
.is-home .brand:hover .brand-icon,
.is-result .brand:hover .brand-icon{transform:rotate(0deg)}
.is-home .brand:active .brand-icon,
.is-result .brand:active .brand-icon{transform:rotate(4deg)}
.is-home .edition,
.is-result .edition{
  flex:none;
  border:1.5px solid #d1c3e5;
  border-radius:999px;
  background:#fffdfa;
  color:#5b4c80;
  box-shadow:none;
  font:700 11px/1.25 "Courier New",monospace;
  white-space:nowrap;
  letter-spacing:.025em;
  text-transform:uppercase;
  text-align:center;
  padding:9px 12px;
}
/* The colored top stripe is not present on the home. Don't reintroduce it
   when the user opens an archived or live result. */
body:has(.is-result)::before{display:none}

@media(min-width:980px){
  .is-home.wrap,
  .is-result.wrap{
    width:min(80%,1550px);
    max-width:none;
    padding-top:10px;
    padding-left:clamp(15px,1.6vw,28px);
    padding-right:clamp(15px,1.6vw,28px);
  }
  .is-home .top,
  .is-result .top{
    padding:7px 0 13px;
    margin:0 0 4px;
  }
}
@media(max-width:979px){
  .is-home.wrap,
  .is-result.wrap{
    width:100%;
    max-width:680px;
    padding-left:16px;
    padding-right:16px;
  }
}
@media(max-width:600px){
  .is-home .top,
  .is-result .top{padding:5px 0 9px;margin:0 0 17px}
  .is-home .brand,
  .is-result .brand{font-size:clamp(28px,7vw,34px);gap:9px}
  .is-home .brand .brand-icon,
  .is-result .brand .brand-icon{width:46px;height:46px;border-radius:14px}
  .is-home .edition,
  .is-result .edition{padding:8px 10px;font-size:10px}
}
@media(max-width:350px){
  .is-home .brand,
  .is-result .brand{font-size:27px;gap:7px}
  .is-home .edition,
  .is-result .edition{padding:7px 8px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .is-home .brand .brand-icon,
  .is-result .brand .brand-icon{transition:none}
}