:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #342b32;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
body { background: #342b32; }

.laboratory {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100svh;
  overflow: clip;
}

.laboratory::before { content: ""; position: absolute; inset: -24px; background: url("laboratory-desktop.jpg") center / cover; filter: blur(18px); }

.artboard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.684svh);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  container-type: inline-size;
  isolation: isolate;
}

.laboratory-art, .laboratory-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.laboratory-art { position: absolute; inset: 0; z-index: -1; }
.laboratory-art img { object-fit: cover; }

.desk {
  position: absolute;
  top: auto;
  bottom: max(1.2cqw, calc(28.13995cqw - 48svh));
  left: 35.8%;
  width: 30.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendar {
  position: relative;
  width: 100%;
  padding: 1.25cqw .9cqw .65cqw;
  border: 1px solid #514c49;
  border-radius: .85cqw .85cqw .45cqw .45cqw;
  background: linear-gradient(127deg, #373637 0%, #252426 52%, #19191b 100%);
  box-shadow: .4cqw .7cqw .6cqw #43220e59, inset .1cqw .1cqw .16cqw #ffffff38, inset -.18cqw -.2cqw .2cqw #0008;
  transform: rotate(1deg);
}

.calendar-pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5cqw; }

.calendar-page {
  position: relative;
  padding: .4cqw .1cqw .5cqw;
  border-radius: .32cqw .32cqw .52cqw .52cqw;
  text-align: center;
  background: linear-gradient(110deg, #fff0df 0%, #f5d9be 63%, #e5b998 100%);
  box-shadow: 0 .18cqw .12cqw #0007, inset .06cqw .06cqw .07cqw #fff8;
  color: #171415;
}

.calendar-page::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 48%;
  border-top: 1px solid #9c6c4721;
  pointer-events: none;
}

.rings {
  position: absolute;
  z-index: 1;
  top: -.94cqw;
  left: 11%;
  width: 78%;
  height: 1.4cqw;
  background: repeating-linear-gradient(90deg, transparent 0% 10%, #483e37 10% 12%, #d2c9b7 12% 15%, #6e6255 15% 18%, transparent 18% 25%);
  filter: drop-shadow(.04cqw .08cqw .04cqw #0008);
  border-radius: .3cqw;
}

.number {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 4.1cqw;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.22cqw;
  line-height: 1.2;
  padding-right: .22cqw;
}

.unit { display: block; font-size: clamp(9px, .8cqw, 16px); font-weight: 700; letter-spacing: .09cqw; text-transform: uppercase; }
.calendar-caption { margin: .72cqw 0 .28cqw; text-align: center; color: #fff5e9; font-size: clamp(10px, .95cqw, 18px); font-weight: 500; letter-spacing: .04cqw; }
.chalk-line { display: block; margin: 0 auto; width: 39%; height: .21cqw; border-radius: 55% 35% 40% 60%; background: #86be10; transform: rotate(-2deg); }

.socials { display: flex; align-items: center; justify-content: center; gap: 1.08cqw; margin-top: 1cqw; }
.social {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.65cqw;
  min-width: 44px;
  aspect-ratio: 1;
  color: #fff;
  border-radius: 24%;
  box-shadow: .16cqw .3cqw .36cqw #48291040, inset .09cqw .09cqw .16cqw #ffffff4d, inset -.08cqw -.12cqw .17cqw #0002;
  transform: rotate(-7deg);
  transition: transform 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.social svg { display: block; width: 78%; height: 78%; }
.instagram { background: radial-gradient(circle at 28% 105%, #ffdf79 0% 14%, #fd7a36 31%, #ef2273 55%, #bd24c7 75%, #6e3ddd 100%); }
.youtube { background: linear-gradient(130deg, #ff3539, #e30010); transform: rotate(3deg); }
.facebook { background: linear-gradient(135deg, #338fff, #0866df 75%); transform: rotate(8deg); }
.social:hover, .social:focus-visible { transform: translateY(-.35cqw) rotate(0); box-shadow: .16cqw .55cqw .5cqw #48291050; }
.social:focus-visible { outline: 3px solid #a5df28; outline-offset: 5px; }
.social-tooltip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: 5px; background: #292528; color: #fff; font-size: 12px; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 150ms; }
.social:hover .social-tooltip, .social:focus-visible .social-tooltip { opacity: 1; }
.follow-note { margin: .32cqw 0 0; color: #191516; font-family: "Bradley Hand", "Comic Sans MS", cursive; font-size: 1.55cqw; line-height: 1.1; transform: rotate(-4deg); }
.follow-note span { display: inline-block; font-family: Arial, sans-serif; font-size: 1.8cqw; vertical-align: .08em; }
.noscript-note { max-width: 100%; padding: 8px; background: #fff5e9; color: #191516; border-radius: 6px; font-size: 14px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (orientation: portrait) {
  .laboratory::before { background-image: url("laboratory-mobile.jpg"); }
  .artboard { width: max(100vw, 56.28svh); aspect-ratio: 941 / 1672; }
  .desk { top: 53.3%; bottom: auto; left: 50%; width: min(65cqw, calc(100vw - 24px)); transform: translateX(-50%); }
  .calendar { padding: 2.5cqw 1.55cqw 1.2cqw; border-radius: 1.5cqw 1.5cqw .8cqw .8cqw; box-shadow: .7cqw 1.1cqw 1cqw #43220e59, inset .13cqw .13cqw .22cqw #ffffff38; transform: rotate(1.5deg); }
  .calendar-pages { gap: .85cqw; }
  .calendar-page { padding: .7cqw .12cqw .85cqw; border-radius: .65cqw .65cqw .9cqw .9cqw; }
  .rings { top: -1.85cqw; height: 2.8cqw; }
  .number { font-size: 8.4cqw; line-height: 1.23; letter-spacing: -.35cqw; padding-right: .35cqw; }
  .unit { font-size: clamp(9px, 1.9cqw, 15px); letter-spacing: .1cqw; }
  .calendar-caption { margin: 1.2cqw 0 .6cqw; font-size: clamp(10px, 2.15cqw, 16px); letter-spacing: .02cqw; }
  .chalk-line { height: .42cqw; }
  .socials { margin-top: 3.5cqw; gap: 3.1cqw; }
  .social { width: 9.8cqw; box-shadow: .4cqw .65cqw .9cqw #48291040, inset .15cqw .15cqw .3cqw #ffffff4d; }
  .follow-note { margin-top: 1.7cqw; font-size: 3.5cqw; }
  .follow-note span { font-size: 4.3cqw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .calendar-caption, .chalk-line, .follow-note { display: none; }
}