:root {
  --background: #ffd4e5; --panel: #fff7ee; --ink: #36122b; --muted: #6b405c; --line: #ad5680;
  --focus: #89184e; --hero: #ff98c0; --hero-ink: #3c1430; --button: #601440; --button-ink: #fff5ef;
  --radius: 6px; --body-font: Arial, Helvetica, sans-serif; --display-font: Georgia, "Times New Roman", serif;
  --kiss: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2078%22%3E%3Cg%20fill%3D%22%23e51564%22%3E%3Cpath%20d%3D%22M3%2039C20%2025%2029%2013%2043%2014c8%201%2012%207%2017%209%206-2%209-9%2017-10%2015-3%2025%2012%2040%2025-18%207-30-2-42-4-7-1-12%203-16%203-6%200-10-4-17-3C30%2036%2017%2044%203%2039Z%22%2F%3E%3Cpath%20d%3D%22M4%2044c16%205%2029%201%2041%200%205%200%2011%204%2015%204%206%200%2010-5%2016-5%2010%200%2021%205%2040%201-19%2017-38%2024-56%2024C39%2068%2020%2061%204%2044Z%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%22.45%22%20stroke%3D%22%23ffb2cb%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22m24%2036%204-8m5%207%205-13m9%2013%203-13m9%2013%201-10m9%208-2-11m10%2011-2-13m10%2015-4-12m12%2014-4-9M26%2051l3%207m8-8%203%2013m7-13%204%2015m9-13v15m9-15-1%2013m9-16-2%2013m11-12-3%209%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --rose: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20108%20105%22%3E%3Cg%20stroke%3D%22%23672541%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M54%2077C25%2074%2017%2068%2012%2056c18-1%2032%205%2042%2021Zm5-3c13-16%2024-20%2037-17-5%2013-17%2020-37%2017Zm-3-4%202%2025%22%20fill%3D%22%239ca86c%22%2F%3E%3Cpath%20d%3D%22M55%2082c-17%204-25-4-27-14-10-2-15-10-11-19-6-10-2-18%208-22%202-11%2012-17%2022-14%209-8%2022-6%2030%201%2010%200%2018%207%2018%2017%208%207%207%2017%201%2024%201%2010-7%2019-17%2019-5%2010-17%2012-24%208Z%22%20fill%3D%22%23ff8eb9%22%2F%3E%3Cpath%20d%3D%22M31%2049c-7-9-1-21%2011-22%207-6%2017-7%2023-1%2013-1%2020%208%2017%2017%206%2012-3%2021-15%2022-9%206-24%201-30-5-3-2-5-6-6-11Z%22%20fill%3D%22%23ffbad4%22%2F%3E%3Cpath%20d%3D%22M41%2043c1-7%208-12%2015-10%206-2%2013%200%2016%206%202%206-2%2013-7%2017-10%205-21%201-24-8m3-4c6%203%208%205%2012%204%206%200%208-3%207-6-1-3-5-4-10-2m-28-4c1%2010%205%2012%2010%2016m38-22c5%203%208%209%207%2014m-12%2025c-9%202-17%200-24-6%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --cherries: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20124%20111%22%3E%3Cg%20stroke%3D%22%23fff6ed%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%20paint-order%3D%22stroke%22%3E%3Cpath%20d%3D%22M40%2070c7-24%2016-40%2031-54%201%2024%2010%2038%2016%2050%22%20fill%3D%22none%22%20stroke%3D%22%23335327%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M67%2023C70%207%2087%206%20101%2010c-9%2013-22%2016-34%2013Z%22%20fill%3D%22%237d943d%22%20stroke%3D%22%23355226%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M35%2064c-19-8-31%207-26%2024%206%2019%2028%2023%2043%2012%2013-10%2012-34-4-37-5-1-9%200-13%201Zm48-5c-14-6-29%203-28%2020%201%2017%2016%2026%2032%2022%2015-4%2024-21%2018-33-4-9-14-12-22-9Z%22%20fill%3D%22%23f32262%22%20stroke%3D%22%2376113b%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M17%2078c2-5%205-7%2010-8m35%205c2-5%204-8%209-9%22%20fill%3D%22none%22%20stroke%3D%22%23ffd5e3%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
body { isolation: isolate; background-image: radial-gradient(ellipse at 17% 3%, #ffaaca 0, transparent 35%), linear-gradient(130deg, #fff1f4, transparent 58%); }
body::before {
  content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .14;
  background: var(--kiss) 4px 8px / 112px 73px repeat;
  mask-image: linear-gradient(145deg, black, transparent 55%, black);
}
.header { background: #fff7ee; border-bottom: 2px solid #6e244b; }
.header-inner { padding-block: .8rem; }
.header .brand-mark, .login-art .brand-mark {
  background: #581b42; color: #fff6ec; border: 2px solid #fff4ed; outline: 1px solid #64294c;
  border-radius: 1px; transform: rotate(-7deg); font: italic 800 1.1rem Georgia, serif;
}
.header nav a { font-weight: 700; }
.header nav a[aria-current] { color: #93164f; text-decoration-thickness: 2px; }
.hero, .page-head, .login-art {
  background-image: linear-gradient(132deg, #ffe2efaa, transparent 56%), radial-gradient(#9c26551e .7px, transparent .9px);
  background-size: auto, 6px 6px;
}
.hero, .login-wrap { border: 2px solid #7b2854; box-shadow: 6px 7px 0 #9c4c7792; }
.hero-copy h1, .login-heading h1, .page-head h1 { font-weight: 900; }
.hero-copy h1, .page-head h1 { font-style: italic; }
.hero-copy h1 { font-size: clamp(3.25rem, 7vw, 6.6rem); }
.hero-copy .eyebrow, .page-head .eyebrow, .login-heading .eyebrow {
  width: max-content; max-width: 100%; padding: .3rem .48rem; color: #fff5ea; background: #3d142f;
  box-shadow: 2px 3px 0 #a84169; transform: rotate(-2deg);
}
.hero-art {
  background: #f79bbf url("/collage.svg") center center / cover no-repeat;
  border-left: 7px solid #fff3e4;
  min-height: 330px;
}
.login-art { position: relative; overflow: hidden; min-height: 550px; isolation: isolate; }
.login-art::after {
  content: ""; position: absolute; z-index: -1; width: 62%; height: 44%; right: -5%; bottom: -8%;
  background: url("/collage.svg") center / cover no-repeat; border: 6px solid #fff3e4; transform: rotate(-9deg);
  box-shadow: 4px 6px 0 #9c4c7775;
}
.login-heading { position: relative; z-index: 1; }
.login-heading h1 { color: #4b1739; font-size: clamp(2.9rem, 6vw, 6rem); }
.login-heading p:last-child { background: #fff4e9; color: #54233d; display: inline-block; padding: .4rem .55rem; transform: rotate(-2deg); box-shadow: 2px 3px 0 #9c4c7775; }
.login-content { color: #3e1b32; }
.login-content .eyebrow { color: #8a2354; }
.cut-word { display: inline-flex; gap: .018em; white-space: nowrap; vertical-align: middle; letter-spacing: -.055em; }
.cut-word + .cut-word { margin-left: .17em; }
.cut-letter {
  display: inline-grid; place-items: center; padding: .035em .08em .1em; line-height: .95;
  background: #fff7ed; color: #351129; font: 900 .79em/.95 Georgia, serif;
  box-shadow: 2px 3px 0 #54143863; transform: rotate(-5deg); text-transform: uppercase;
}
.cut-letter:nth-child(3n+2) { background: #3d1731; color: #fff3ea; font-family: Arial, sans-serif; transform: rotate(5deg) translateY(.05em); }
.cut-letter:nth-child(4n+3) { background: #fb56a0; color: #3c1430; font-style: italic; transform: rotate(-4deg) translateY(-.035em); }
.cut-letter:nth-child(5n+4) { transform: rotate(3deg); }
.eyebrow, .section-label > p, .tile-top span, .art-note, .footer { font-family: "Courier New", monospace; font-weight: 800; }
.tile {
  border: 1px solid #a95c82; border-top: 5px solid #d64a86; box-shadow: 3px 4px 0 #ae65905e;
  transition: transform .15s ease, background .15s ease;
}
.tile:hover { background: #fff0f4; border-color: #821d51; transform: translateY(-3px); }
.tile-top, .tile-link, .footer, .section-label > p { color: #811f51; }
.tile .tile-top .icon { width: 2rem; height: 2rem; padding: .3rem; border-radius: 50%; background: #fdd2e3; border: 1px solid #c36e98; }
.tile h3 { color: #3d1430; font-style: italic; }
.section-label h2 { font-style: italic; }
.course-tiles > .tile:nth-child(2), .tile-materials, .tile-help { border-top-color: #81386a; }
.page-head { border: 1px solid #9d3b65; box-shadow: 3px 4px 0 #9c4c775c; }
.resource, .empty { box-shadow: 2px 3px 0 #c67da143; }
.notice { color: #80214f; }
.ticket-reply { background: #ffe6ef; }
.sticker-field { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.sticker { position: absolute; display: block; width: 68px; height: 62px; filter: drop-shadow(2px 3px 0 #6a224644); animation: drift 7s ease-in-out infinite alternate; }
.sticker-27 { top: 17%; left: 1.2%; color: #7b2156; font: bold italic 2.8rem/1 Georgia, serif; text-shadow: -2px -2px #fff3e5, 2px -2px #fff3e5, 2px 2px #fff3e5, -2px 2px #fff3e5; --tilt: -13deg; }
.sticker-brat { top: 41%; right: 1.05%; width: auto; height: auto; padding: .08em .25em .17em; color: #fff4ec; background: #421a34; border: 3px solid #fff5eb; font: 900 italic 1.45rem/1 Georgia, serif; --tilt: 10deg; animation-delay: -2s; }
.sticker-cherries { right: 1.2%; top: 76%; background: var(--cherries) center / contain no-repeat; --tilt: 9deg; animation-delay: -4s; }
.sticker-kiss { left: .6%; top: 58%; background: var(--kiss) center / contain no-repeat; --tilt: -13deg; opacity: .88; animation-delay: -2s; }
.sticker-rose { bottom: 4%; left: 1.4%; background: var(--rose) center / contain no-repeat; --tilt: -6deg; animation-delay: -5s; }
.sticker-rose-two { right: 1%; top: 20%; width: 49px; height: 47px; background: var(--rose) center / contain no-repeat; --tilt: 15deg; animation-delay: -1s; }
@keyframes drift { from { transform: translateY(0) rotate(var(--tilt)); } to { transform: translateY(-14px) rotate(calc(var(--tilt) + 5deg)); } }
@media (max-width: 1050px) {
  .sticker { width: 39px; height: 38px; opacity: .72; }
  .sticker-27 { left: .25%; font-size: 1.7rem; }
  .sticker-brat { right: .2%; width: auto; height: auto; font-size: 1.02rem; }
  .sticker-rose-two { right: .3%; }
}
@media (max-width: 600px) {
  .hero-art { border-left: 0; border-top: 5px solid #fff3e4; min-height: 230px; }
  .login-art { min-height: 310px; }
  .sticker { width: 27px; height: 27px; }
  .sticker-brat { width: auto; height: auto; font-size: .8rem; border-width: 1px; }
  .sticker-27 { font-size: 1.45rem; }
  .sticker-rose-two, .sticker-kiss { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker { animation: none; transform: rotate(var(--tilt)); }
  .tile { transition: none; }
}