/*
  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;
}

.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}}