.student-poster-page {
  --poster-ink: #2b2026;
  --poster-orange: #ff9c51;
  --poster-yellow: #ffdb2e;
  --poster-blue: #9bcfe4;
}
.student-poster-page .website-hero {
  display: block;
  padding-block: 45px;
}
.student-poster-page .website-hero h1 {
  max-width: 19ch;
  font-size: clamp(3.5rem, 5.3vw, 6rem);
}
.student-poster-page .website-hero-copy {
  max-width: 920px;
}
.student-poster-page .website-hero-art {
  display: none;
}
.student-poster-workspace {
  padding: 55px 5% 80px;
  background: #f2eadb;
  border-block: 1px solid #baad98;
}
.student-poster-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 35px;
  align-items: end;
  max-width: 1380px;
  margin: 0 auto 32px;
}
.student-poster-intro h2 {
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  margin: 10px 0 0;
}
.student-poster-intro > p {
  font-size: 14px;
  line-height: 1.7;
  max-width: 48ch;
  margin: 0 0 4px auto;
}
.student-poster-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 36px;
  max-width: 1380px;
  margin: auto;
  align-items: start;
}
.student-poster-controls {
  display: grid;
  gap: 20px;
}
.student-poster-controls fieldset {
  margin: 0;
  padding: 24px;
  background: #fffaf0;
  border: 1px solid #bfb09a;
  min-width: 0;
  border-radius: 3px;
}
.student-poster-controls legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 19px;
  font:
    400 29px/1.1 "League Gothic",
    Impact,
    sans-serif;
}
.student-poster-controls label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
  margin-bottom: 7px;
  clear: both;
}
.student-poster-controls label > span:not(:only-child) {
  font-size: 10px;
  color: #6b5544;
  font-weight: 450;
  margin-left: 8px;
}
.student-poster-controls input[type="text"],
.student-poster-controls input[type="url"],
.student-poster-controls textarea {
  width: 100%;
  box-sizing: border-box;
  font:
    400 16px/1.6 Inter,
    sans-serif;
  border: 1px solid #a99880;
  border-radius: 3px;
  padding: 10px 12px;
  min-height: 44px;
  background: #fffdf7;
  color: #2b2026;
  margin-bottom: 20px;
  resize: vertical;
}
.student-poster-controls textarea {
  min-height: 90px;
  max-height: 180px;
}
.student-poster-controls input:focus-visible,
.student-poster-controls textarea:focus-visible {
  outline: 3px solid #397a9b;
  outline-offset: 3px;
}
.student-poster-controls fieldset > p,
.student-poster-actions > p {
  clear: both;
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
}
.student-poster-controls #poster-link-error {
  color: #8f3110;
  border-left: 3px solid #ac451d;
  padding-left: 12px;
  margin-top: 12px;
  font-weight: 600;
}
.student-poster-controls input[type="url"] {
  margin-bottom: 10px;
}
.student-poster-instrument-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 17px;
  clear: both;
}
.student-poster-instrument-options label {
  position: relative;
  cursor: pointer;
  margin: 0;
}
.student-poster-instrument-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.student-poster-instrument-options label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 7px;
  text-align: center;
  border: 1px solid #b4a58c;
  background: #fffdf8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.student-poster-instrument-options label:has(input:checked) > span {
  background: #ffdd3f;
  border-color: #2b2026;
  box-shadow: 2px 2px 0 #2b2026;
}
.student-poster-instrument-options label:has(input:focus-visible) {
  outline: 3px solid #397a9b;
  outline-offset: 3px;
}
.student-poster-style {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 13px;
}
.student-poster-style label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #b4a58c;
  padding: 13px 10px;
  margin: 0;
  background: #fffdf8;
  cursor: pointer;
}
.student-poster-style input {
  accent-color: #316d8a;
}
.student-poster-style label:has(input:checked) {
  background: #dcecf2;
  border-color: #526e7d;
}
.student-poster-actions {
  display: grid;
  gap: 15px;
}
.student-poster-actions .planner-reset {
  justify-self: center;
}
.student-poster-school-note {
  background: #e3eef2;
  border: 1px solid #a8bdc6;
  padding: 18px;
  font-size: 12px;
}
.student-poster-downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
  border: 1px solid #a9987d;
  background: #fff7df;
}
.student-poster-downloads strong {
  grid-column: 1/-1;
  font-size: 12px;
}
.student-poster-downloads p {
  grid-column: 1/-1;
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
}
.student-poster-downloads a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 650;
  text-underline-offset: 4px;
}
.student-poster-school-note p {
  font-size: 11px;
  line-height: 1.7;
  margin: 7px 0 0;
}
.student-poster-preview {
  min-width: 0;
}
.student-poster-preview-label {
  font-size: 9px !important;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: 0 0 14px !important;
}
.student-poster {
  background: #fff6df;
  color: #2b2026;
  border: 2px solid #2b2026;
  padding: 4.3%;
  aspect-ratio: 210/297;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 8px 8px 0 #2b2026;
  container-type: inline-size;
}
.student-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(#ce653c 0.7px, transparent 1px) 0 0/9px 9px;
  mask-image: linear-gradient(30deg, transparent 45%, #000);
  opacity: 0.15;
  pointer-events: none;
}
.student-poster-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1.5px solid #2b2026;
  padding-bottom: 14px;
}
.student-poster-header img {
  width: 34%;
  height: auto;
  display: block;
}
.student-poster-header > span {
  font:
    750 1.6cqw/1.4 Inter,
    sans-serif;
  text-align: right;
  letter-spacing: 0.08em;
}
.student-poster-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.student-poster .student-poster-school {
  font:
    750 2.6cqw/1.3 Inter,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin: 18px 0 15px;
  overflow-wrap: anywhere;
  max-width: 95%;
}
.student-poster-main h2 {
  font:
    400 18.8cqw/0.83 "League Gothic",
    Impact,
    sans-serif;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: #2b2026;
  position: relative;
}
.student-poster-main h2 em {
  font-style: normal;
  display: inline-block;
  position: relative;
  background: #ffda27;
  padding: 2px 14px 9px 7px;
  margin-left: -7px;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 #f7964e;
}
.student-poster .student-poster-pitch {
  font:
    550 2.55cqw/1.45 Inter,
    sans-serif;
  margin: 5px 0 12px;
  color: #3b2928;
}
.student-poster-art {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5%;
  min-height: 16cqw;
  padding: 13px 0;
  margin: 6px 0 12px;
}
.student-poster-art > span {
  display: grid;
  place-items: center;
  width: 14cqw;
  height: 14cqw;
  background: #a5d1e3;
  border: 1.5px solid #2b2026;
  box-shadow: 3px 3px 0 #2b2026;
  transform: rotate(-6deg);
}
.student-poster-art > span:nth-child(2) {
  background: #ffb278;
  transform: rotate(5deg) translateY(-5px);
}
.student-poster-art > span:nth-child(3) {
  background: #ffdd3c;
  transform: rotate(-3deg);
}
.student-poster-art svg {
  width: 9cqw;
  height: 9cqw;
}
.student-poster-art > i {
  position: absolute;
  right: 0;
  top: 5%;
  display: grid;
  place-content: center;
  width: 19cqw;
  height: 19cqw;
  font:
    850 2.45cqw/1.1 Inter,
    sans-serif;
  text-align: center;
  background: #ff9b50;
  transform: rotate(9deg);
  font-style: normal;
  clip-path: polygon(
    50% 0,
    62% 12%,
    79% 7%,
    84% 25%,
    100% 32%,
    91% 50%,
    100% 67%,
    82% 75%,
    78% 94%,
    61% 88%,
    50% 100%,
    38% 87%,
    20% 93%,
    16% 76%,
    0 68%,
    9% 50%,
    0 32%,
    17% 25%,
    21% 7%,
    39% 12%
  );
}
.student-poster-lineup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.student-poster-lineup li {
  font:
    650 1.8cqw/1.4 Inter,
    sans-serif;
  border: 1px solid #9d8060;
  padding: 4px 7px;
  margin: 0 !important;
  background: #fff9eb;
}
.student-poster-signup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 19px 22px;
  border: 1.5px solid #2b2026;
  background: #9ecfe2;
}
.student-poster-signup > div:first-child {
  flex: 1;
  min-width: 0;
}
.student-poster-signup-kicker {
  font:
    750 1.5cqw/1.4 Inter,
    sans-serif;
  letter-spacing: 0.08em;
}
.student-poster-signup h3 {
  font:
    400 5.5cqw/1.05 "League Gothic",
    Impact,
    sans-serif;
  margin: 9px 0 10px;
}
.student-poster .student-poster-signup p {
  font:
    650 2.6cqw/1.4 Inter,
    sans-serif;
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin: 0;
  color: #2b2026;
}
.student-poster-qr {
  flex: 0 0 23%;
  width: 23%;
  background: #fff;
  padding: 7px;
  text-align: center;
  border: 1px solid #2b2026;
}
.student-poster-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.student-poster-qr > span {
  display: block;
  font:
    750 1.15cqw/1.5 Inter,
    sans-serif;
  margin-top: 4px;
  color: #2b2026;
}
.student-poster-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-top: 15px;
}
.student-poster .student-poster-footer p {
  font:
    450 1.2cqw/1.6 Inter,
    sans-serif;
  color: #594336;
  margin: 0;
  max-width: 50%;
}
.student-poster-preview-note {
  font-size: 11px !important;
  text-align: center;
  margin: 19px 0 0 !important;
}
.student-poster[data-style="ink"] {
  background: #fff;
  box-shadow: none;
}
.student-poster[data-style="ink"] .student-poster-header img {
  filter: grayscale(1);
}
.student-poster[data-style="ink"]::before {
  display: none;
}
.student-poster[data-style="ink"] .student-poster-main h2 em {
  background: #fff;
  box-shadow: none;
  border-bottom: 2px solid #2b2026;
  transform: none;
}
.student-poster[data-style="ink"] .student-poster-art > span,
.student-poster[data-style="ink"] .student-poster-art > i,
.student-poster[data-style="ink"] .student-poster-signup,
.student-poster[data-style="ink"] .student-poster-lineup li {
  background: #fff;
}
.student-poster[data-style="ink"] .student-poster-art > i {
  border: 1px solid #2b2026;
  border-radius: 50%;
  clip-path: none;
}
@media (max-width: 1000px) {
  .student-poster-layout {
    grid-template-columns: minmax(255px, 0.75fr) minmax(0, 1fr);
    gap: 25px;
  }
  .student-poster-controls fieldset {
    padding: 20px;
  }
  .student-poster-instrument-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .student-poster-controls legend {
    font-size: 26px;
  }
}
@media (max-width: 760px) {
  .student-poster-workspace {
    padding: 35px 6% 55px;
  }
  .student-poster-intro {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .student-poster-intro > p {
    margin-left: 0;
    font-size: 13px;
  }
  .student-poster-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .student-poster-controls legend {
    font-size: 29px;
  }
  .student-poster-signup {
    padding: 13px;
    gap: 10px;
  }
  .student-poster-header {
    padding-bottom: 8px;
    gap: 10px;
  }
  .student-poster-main h2 {
    margin-bottom: 11px;
  }
  .student-poster .student-poster-school {
    margin: 12px 0;
  }
  .student-poster-art {
    padding: 5px 0;
    margin: 5px 0 12px;
  }
  .student-poster-lineup {
    gap: 4px;
    margin-bottom: 12px;
  }
  .student-poster-lineup li {
    padding: 2px 4px;
  }
  .student-poster-footer {
    gap: 10px;
    margin-top: 10px;
  }
  .student-poster {
    padding: 5%;
  }
  .student-poster-qr {
    padding: 4px;
  }
}
@media print {
  @page {
    size: A4 portrait;
    margin: 9mm;
  }
  :root {
    color-scheme: light !important;
  }
  html,
  body,
  .website-editorial,
  .place-main {
    background: #fff !important;
    color: #2b2026 !important;
  }
  .website-editorial {
    min-height: 0 !important;
  }
  .student-poster-page > :not(.student-poster-workspace),
  .student-poster-intro,
  .student-poster-controls,
  .student-poster-preview-label,
  .student-poster-preview-note,
  .mml-scroll-badge {
    display: none !important;
  }
  .student-poster-workspace {
    padding: 0 !important;
    border: 0 !important;
    background: white !important;
  }
  .student-poster-layout {
    display: block !important;
    max-width: none;
  }
  .student-poster {
    width: 192mm;
    height: 277mm;
    aspect-ratio: auto;
    box-sizing: border-box;
    padding: 8mm;
    border: 1px solid #2b2026;
    box-shadow: none;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .student-poster-signup {
    padding: 5mm;
  }
  .student-poster-footer {
    margin-top: 4mm;
  }
  .student-poster-header {
    padding-bottom: 4mm;
  }
  .student-poster-main h2 {
    font-size: 18.8cqw !important;
    line-height: 0.83 !important;
  }
  .student-poster .student-poster-school {
    font-size: 2.6cqw !important;
  }
  .student-poster .student-poster-pitch {
    font-size: 2.55cqw !important;
  }
  .student-poster .student-poster-signup p {
    font-size: 2.6cqw !important;
  }
  .student-poster .student-poster-lineup li {
    font-size: 1.8cqw !important;
  }
  .student-poster .student-poster-footer p {
    font-size: 8pt !important;
    line-height: 1.45;
  }
}