/*
  Slumber Realm Fan Art Contest: the bedroom's Corkboard, with the contest pinned to it.

  Written for a 360 px phone first. The art in media/ is drawn by Tools/VideoRenderer
  and resized by ../../build.py; the torn edges in torn.css come from the same script.
*/
/* The site's own copy of Grandstander (Open Font License; fonts/OFL.txt). One variable file holds every weight. */
@font-face{
  font-family:"Grandstander";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/Grandstander-latin.woff2) format("woff2");
}
:root{
  --ink:#10203A;
  --paper:#FBF8F0;
  --cork:#B5793F;
  --mint:#5FF3D2;
  --gold:#F2D06B;
  --cream:#FFF6E8;
  --board-blue:#1B2C7C;
  --board-blue-edge:#3E8FC0;
  --button:#8DF3EE;
  --pencil:#22316E;
  --red:#C81E1E;
  --shadow:drop-shadow(0 6px 7px rgba(20,10,0,.42));
  --sheet-shadow:0 6px 12px rgba(20,10,0,.42);
}
*{box-sizing:border-box}
html{background:var(--cork);scroll-behavior:smooth;scroll-padding-top:16px;overflow-x:clip}
body{
  margin:0;
  overflow-x:clip;
  background:var(--cork) url(media/cork.webp) 0 0/360px 360px;
  color:var(--ink);
  font-family:"Grandstander","Trebuchet MS",sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
/* The board darkens toward its edges, as in the game. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(50,22,0,.42) 100%);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--pencil);text-underline-offset:.15em}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}

.board{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:22px 14px 40px}

/* ---------- pinned things: a shadow, a slight turn, a pin at the top ---------- */
/* Shadows are box shadows, not filters: a filter makes the browser draw a whole tall sheet off screen first. */
.pinned{position:relative;display:block;rotate:var(--r,0deg)}
.pin{position:absolute;z-index:2;top:-13px;left:50%;width:40px;height:40px;translate:-50% 0;color:var(--pin,#E11D1D);overflow:visible}
.pin--left{left:12%}
.pin--right{left:88%;top:-17px}
.sheet{
  position:relative;
  margin:0;
  padding:30px 20px 24px;
  background:url(media/grain.webp) 0 0/256px 256px,var(--sheet,var(--paper));
  box-shadow:var(--sheet-shadow);
}
/* A torn edge is a thin strip of the same paper hanging off the sheet, cut ragged. */
.torn-a::after,.torn-c::before{content:"";position:absolute;left:0;right:0;height:10px;background:inherit}
.torn-a::after{top:calc(100% - 1px);clip-path:var(--torn-a)}
.torn-c::before{bottom:calc(100% - 1px);clip-path:var(--torn-c)}

/* ---------- section headings: the game's lettering on a scrap of the Corkboard menu's torn blue paper ---------- */
.scrap{
  position:relative;
  width:fit-content;
  margin:0;
  padding:16px 26px 9px 30px;
  rotate:var(--r,-2deg);
  filter:var(--shadow);
  font-weight:700;
  font-size:clamp(22px,6.4vw,34px);
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--mint);
}
/* Two sheets, the lighter one showing at the edge, as on the title. */
.scrap::before,.scrap::after{content:"";position:absolute;z-index:-1}
.scrap::before{inset:0;background:var(--board-blue-edge);clip-path:var(--scrap-edge)}
.scrap::after{inset:4px;background:url(media/grain.webp) 0 0/256px 256px,var(--board-blue);clip-path:var(--scrap)}
.scrap span{position:relative;-webkit-text-stroke:.24em var(--ink);paint-order:stroke fill}
.scrap .pin{left:14px;top:-15px;width:34px;height:34px}

/* ---------- the top of the board ---------- */
.top{display:grid;gap:4px}
/* The key art as a print with a white border. */
.print{
  width:90%;
  margin:6px auto 0;
  padding:9px;
  background:url(media/grain.webp) 0 0/256px 256px,#FCFAF3;
  box-shadow:var(--sheet-shadow);
}
.print img{width:100%}
.print .pin--left{left:9%}
.print .pin--right{left:91%}
.title{margin:-14px -14px -22px;position:relative;z-index:1}
.title img{width:100%}
.strip{margin:0 6px;text-align:center}
.strip .sheet{padding:13px 30px 8px;font-weight:700;font-size:clamp(15px,4.4vw,24px);line-height:1.25;text-wrap:balance}
.tape{position:absolute;z-index:2;width:50px;top:50%}
.tape--left{left:-16px;translate:0 -50%;rotate:-38deg}
.tape--right{right:-16px;translate:0 -50%;rotate:40deg}

.snaps{display:flex;justify-content:center;margin:14px -8px 4px}
.snaps img{width:36%;margin:0 -1.2%;transform-origin:50% 8%}
.snaps img:nth-child(2){margin-top:12px}

.top-facts .scrap{margin:10px 0 22px 4px}
.notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.notes li:nth-child(2){margin-top:12px}
.note{
  aspect-ratio:1;
  padding:20% 9% 0 10%;
  background:url(media/grain.webp) 0 0/256px 256px,var(--note);
  box-shadow:var(--sheet-shadow);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:clamp(14px,4.15vw,23px);
  line-height:1.2;
  transform-origin:50% 0;
}
.note b{display:block;font-size:2.1em;line-height:1;margin-bottom:.12em}
.note .pin{width:34px;height:34px;top:-9px}
.note:hover span,.note:focus-visible span{text-decoration:underline}

/* On a phone the card sits under the tag and overlaps it, so the email address stays a readable size. */
.facts{display:grid;margin:26px 0 8px}
.pricetag{position:relative;width:60%;aspect-ratio:500/190;rotate:var(--r);filter:var(--shadow);z-index:1}
.card{width:80%;margin:-14px 0 0 auto}
.pricetag svg{position:absolute;inset:0;width:100%;height:100%}
.pricetag p{
  position:absolute;
  inset:0 6% 0 21%;
  margin:0;
  display:flex;
  align-items:center;
  font-weight:700;
  font-size:clamp(14px,4.2vw,22px);
  line-height:1.2;
  padding-top:.2em;
}
.card .sheet{
  padding:30px 12px 16px 16px;
  display:grid;
  gap:4px;
  font-weight:700;
  font-size:clamp(14px,4.1vw,18px);
  line-height:1.5;
  background-image:
    linear-gradient(#E2574C,#E2574C),
    repeating-linear-gradient(to bottom,transparent 0 calc(1.5em + 3px),#9FC4EA calc(1.5em + 3px) calc(1.5em + 5px)),
    url(media/grain.webp);
  background-size:100% 2px,100% calc(1.5em + 5px),256px 256px;
  background-position:0 22px,0 30px,0 0;
  background-repeat:no-repeat,repeat-y,repeat;
  background-color:#FDFDF8;
}
.card a{white-space:nowrap}
.hashtag{color:var(--red);font-weight:700;overflow-wrap:anywhere}

/* ---------- a link in the shape of the game's own buttons ---------- */
.steam{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.66em 1.1em .44em;
  background:var(--button);
  color:var(--ink);
  font-weight:700;
  font-size:1.12rem;
  line-height:1.1;
  text-decoration:none;
  border:3px solid var(--ink);
  border-radius:13px;
  box-shadow:0 5px 0 var(--ink),0 9px 10px rgba(20,10,0,.35);
}
.steam:hover{background:#B4F8F4}
.steam:active{translate:0 5px;box-shadow:none}
.steam-mark{flex:none;width:1.4em;height:1.4em;margin-top:-.22em}

/* ---------- the story, with the Steam link above it and the announcement video beside it ---------- */
.story{display:grid;margin-top:36px}
.steam-row{margin:0;text-align:center}
.intro{margin:32px 2px 0}
.poster{
  width:88%;
  margin:44px auto 0;
  padding:8px;
  background:url(media/grain.webp) 0 0/256px 256px,#FCFAF3;
  box-shadow:var(--sheet-shadow);
}
.poster video{display:block;width:100%;height:auto;background:#1B0F3B}
.tape--top{top:-15px;left:50%;width:92px;translate:-50% 0;rotate:-4deg}

/* ---------- sheets of copy ---------- */
.lined{
  background:
    linear-gradient(to right,transparent 0 32px,#F2A7A0 32px 34px,transparent 34px) 0 0/100% 100%,
    url(media/grain.webp) 0 0/256px 256px,
    var(--sheet,var(--paper));
  padding-left:46px;
}
.sheet h2{margin:0 0 .55em;font-size:1.42rem;font-weight:700;line-height:1.3;letter-spacing:.01em}
/* A highlighter swipe behind each heading. */
.sheet h2 span{
  background:linear-gradient(transparent 52%,var(--hl,#8FF0D6) 52% 90%,transparent 90%);
  padding:0 .2em;
  margin-left:-.2em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.sheet h3{margin:1.5em 0 .4em;font-size:1.16rem;font-weight:700;line-height:1.3;scroll-margin-top:20px}
.sheet p{margin:0 0 .8em}
.sheet p:last-child,.sheet ul:last-child{margin-bottom:0}
.sheet ul{margin:0 0 .9em;padding-left:1.25em}
.sheet li{margin:.22em 0}
.sheet li::marker{color:var(--red)}
.sheet strong{font-weight:700}

/* ---------- our accounts, each on a pin-back badge ---------- */
.badge{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75) 0 9%,transparent 10%),var(--badge);
  box-shadow:0 3px 0 var(--ink);
  color:var(--ink);
}
.badge svg{width:22px;height:22px}
.sheet ul.socials{list-style:none;margin:0 0 1.1em;padding:0;display:grid;gap:10px}
.socials li{margin:0}
.socials a{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;line-height:1.25;overflow-wrap:anywhere}
.socials a b{display:block}
.socials a:hover span:last-child,.socials a:focus-visible span:last-child{text-decoration:underline}
.badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.badges .badge{width:48px;height:48px;box-shadow:0 3px 0 var(--ink),0 8px 9px rgba(20,10,0,.35)}
.badges .badge:nth-child(odd){rotate:-5deg}
.badges li:nth-child(even) .badge{rotate:4deg}
.badge:active{translate:0 3px;box-shadow:none}
.n{
  display:inline-grid;
  place-items:center;
  width:1.7em;
  height:1.7em;
  margin-right:.25em;
  padding-top:.18em;
  border:2.5px solid var(--ink);
  border-radius:50%;
  background:var(--note);
  font-size:.95em;
  line-height:1;
  rotate:-5deg;
}
.copyline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:700;font-size:1.08rem}
.copy{
  font:inherit;
  font-size:.82rem;
  font-weight:700;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:4px;
  box-shadow:2px 2px 0 var(--ink);
  padding:3px 10px 0;
  min-height:32px;
  cursor:pointer;
}
.copy:active{translate:2px 2px;box-shadow:none}
.dates{margin:0 0 .9em}
.dates dt{margin-top:.6em}
.dates dd{margin:0;font-weight:700;font-size:1.12rem}
.prize{font-weight:700;font-size:1.12rem}
.and{margin:-.3em 0 .5em !important}

.details-h{margin:46px 0 26px 8px}
.details{display:grid}
.col>.pinned{margin:0 2px 34px}

.ready{position:relative;margin:26px 2px 0}
.ready-snap{position:absolute;z-index:3;right:-18px;top:-46px;width:34%;transform-origin:50% 8%}
.ready .sheet{padding-right:24px}
.ready h2{padding-right:30%}

footer{margin:48px 0 0;display:grid;justify-items:center;gap:22px}
footer p{margin:0;font-size:.85rem;font-weight:700;color:var(--cream);text-shadow:0 1px 2px rgba(40,18,0,.8)}

/* ---------- wider screens: the board spreads out ---------- */
@media (min-width:600px){
  .board{padding-inline:28px}
  .snaps img{width:30%}
  .notes{gap:18px}
  .facts{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:14px;align-items:center}
  .pricetag,.card{width:auto;margin:0}
}
@media (min-width:900px){
  body{font-size:17.5px}
  .top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;padding-top:10px}
  .title{margin:-14px -20px -22px}
  .strip .sheet{font-size:22px}
  .note{font-size:21px}
  .pricetag p{font-size:19px}
  .card .sheet{font-size:16px}
  .story{grid-template-columns:minmax(0,1fr) 380px;column-gap:48px;align-items:center;max-width:1064px;margin:56px auto 0}
  .steam-row{grid-column:1/-1}
  .poster{width:auto;margin:32px 0 0}
  .details{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px;align-items:start}
  .ready-snap{width:26%}
  .details-h{margin-top:60px}
}

/* ---------- pinned things sway a little, unless the visitor asked for less motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* A pinned thing swings from its pin, a couple of degrees either side of where it hangs. */
  .sway{animation:sway 4.6s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes sway{
    0%,100%{rotate:calc(var(--r,0deg) - 2deg)}
    50%{rotate:calc(var(--r,0deg) + 2deg)}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}