/*
  Chugga Games: the company's home page, ported as it was from its Google Site (2026-09-29).
  Colours, faces and sizes are the ones that site used, read from the live page.
*/
@font-face{
  font-family:"Grandstander";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/Grandstander-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Manjari";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/Manjari-Bold.ttf) format("truetype");
}
:root{
  --page:#F1E1DD;
  --text:#1C1C1C;
  --heading:#CC4331;
  --brown:#734332;
  --light:#F9F9F9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:"Manjari","Trebuchet MS",sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:24px;
  -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid var(--heading);outline-offset:3px}

.banner{
  position:relative;
  min-height:340px;
  display:grid;
  place-items:center;
  padding:56px 16px 40px;
  /* The picture is dimmed, as the Google Site dimmed it, so the title reads. */
  background:linear-gradient(rgba(12,10,20,.5),rgba(12,10,20,.5)),#1B0F3B url(img/banner.webp) 50% 50%/cover no-repeat;
  color:var(--light);
}
.site-name{position:absolute;left:16px;top:18px;font-weight:400;font-size:20px;line-height:22px;color:var(--light);text-decoration:none}
.banner h1{
  margin:0;
  font-family:"Grandstander","Trebuchet MS",sans-serif;
  font-weight:800;
  font-size:clamp(52px,13vw,96px);
  line-height:1.38;
  text-align:center;
}

/* The fan art contest: a strip of the contest page's corkboard under the banner, in that page's colours. */
.contest{
  padding:24px 16px 28px;
  background:#B5793F url(slumber-realm-art-contest/media/cork.webp) 0 0/360px 360px;
  box-shadow:inset 0 8px 10px -6px rgba(20,10,0,.5);
  color:#10203A;
  font-family:"Grandstander","Trebuchet MS",sans-serif;
}
.contest-inner{max-width:1130px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 26px}
.contest h2{margin:0}
.contest h2 img{width:min(250px,70vw);rotate:-3deg;filter:drop-shadow(0 4px 5px rgba(20,10,0,.4))}
.contest-note{
  position:relative;
  max-width:420px;
  padding:20px 20px 14px;
  background:url(slumber-realm-art-contest/media/grain.webp) 0 0/256px 256px,#FBF8F0;
  box-shadow:0 5px 10px rgba(20,10,0,.42);
  rotate:1deg;
  font-weight:500;
  font-size:17px;
  line-height:1.45;
}
.contest-note p{margin:0 0 6px}
.contest-note .pin{position:absolute;top:-14px;left:50%;width:36px;height:36px;translate:-50% 0;color:#FF4FA3;overflow:visible}
.contest-date{font-weight:800;font-size:19px}
.contest-go{
  display:inline-block;
  padding:12px 22px 9px;
  border:3px solid #10203A;
  border-radius:999px;
  background:#8DF3EE;
  color:#10203A;
  font-weight:800;
  font-size:18px;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 4px 0 #10203A;
  white-space:nowrap;
}
.contest-go:hover{background:#5FF3D2}
.contest-go:focus-visible{outline-color:#10203A}

.wrap{max-width:1194px;margin:0 auto;padding:26px 16px 60px}
.wrap p{margin:0 0 16px}

.contents,.contents ul{list-style:none;margin:0;padding:0}
.contents{margin-bottom:38px}
.contents li{margin:0}
.contents a{display:inline-block;padding:9px 0;color:var(--brown)}
.contents ul{padding-left:10px}

.section{
  margin:48px 0 40px;
  font-family:"Grandstander","Trebuchet MS",sans-serif;
  font-weight:800;
  font-size:clamp(34px,8vw,45.33px);
  line-height:1.38;
  color:var(--heading);
  text-align:center;
  scroll-margin-top:12px;
}
.poster{display:block;width:min(558px,100%);margin:0 auto 56px}
.poster img{width:100%}

.social{list-style:none;margin:44px 0 0;padding:0;display:flex;justify-content:center;align-items:center;gap:12px}
.social a{display:grid;place-items:center;width:32px;height:32px}
.social img{max-width:32px;max-height:32px;width:auto}
.social .round{background:#5F6368;border-radius:50%}
.social .round img{width:28px;height:28px}
.social--centre{margin:44px 0 0}

.person{display:grid;gap:22px;margin:0 0 48px}
.portrait img{width:100%;aspect-ratio:362/350;object-fit:cover}
.about h3{
  margin:14px 0 28px;
  font-family:"Grandstander","Trebuchet MS",sans-serif;
  font-weight:800;
  font-size:24px;
  line-height:36px;
  color:var(--brown);
  scroll-margin-top:12px;
}
.about ul{margin:0 0 16px;padding-left:20px}
.about li{margin:0 0 6px}

@media (min-width:768px){
  .wrap{padding-inline:32px}
  .person{grid-template-columns:362px minmax(0,1fr);gap:37px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}