.board-page,
.board-section {
  padding: 24px;
}

.board-shell {
  width: min(100%, 1520px);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  padding: clamp(20px, 3.3vw, 48px);
  border: 1px solid rgba(74, 64, 84, 0.1);
  border-radius: 28px;
  background: rgba(255, 252, 246, 0.62);
  box-shadow: var(--shadow);
}

/* The board shares the site's ambient background instead of a separate white canvas. */
.board-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.board-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 20px;
}

.board-back,
.board-reset {
  width: max-content;
  margin-top: 8px;
  color: rgba(37, 35, 45, 0.6);
  font: 700 0.72rem/1 "Inter", sans-serif;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}

.board-back span {
  display: inline-block;
  margin-right: 6px;
  font-size: 1.05rem;
  transition: transform 180ms ease;
}@media (hover:hover) and (pointer:fine) {

.board-back:hover span {
  transform: translateX(-3px);
}}

.board-title-group {
  text-align: center;
}

.board-title-group p {
  margin: 0 0 6px;
  color: rgba(37, 35, 45, 0.48);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.board-title-group h1,
.board-title-group h2 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(3rem, 5.5vw, 5.7rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.8;
}

.board-reset {
  justify-self: end;
  padding: 9px 12px;
  border: 1px solid rgba(43, 39, 49, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}@media (hover:hover) and (pointer:fine) {

.board-reset:hover {
  color: #222029;
  background: rgba(255, 255, 255, 0.84);
  transform: translateY(-1px);
}}

.board-back:focus-visible,
.board-reset:focus-visible,
.board-item:focus-visible {
  outline: 3px solid rgba(94, 126, 255, 0.3);
  outline-offset: 5px;
}

.board-stage {
  position: relative;
  min-height: clamp(560px, 76vh, 840px);
  margin-top: clamp(28px, 5vw, 62px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(74, 64, 84, 0.1);
  border-radius: 20px;
  background: var(--bg);
  touch-action: pan-y;
}

.board-grid,
.board-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.board-grid {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(47, 41, 56, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 41, 56, 0.07) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}

.board-ambient::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
}

.board-ambient-a::before {
  width: 300px;
  height: 300px;
  top: 14%;
  left: 37%;
  background: radial-gradient(circle, rgba(255,255,255,.82), rgba(250,144,161,.16) 45%, transparent 72%);
}

.board-ambient-b::before {
  width: 260px;
  height: 260px;
  right: 7%;
  bottom: -2%;
  background: radial-gradient(circle, rgba(255,255,255,.72), rgba(171,188,255,.16) 45%, transparent 72%);
}

.board-instruction {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  color: rgba(37, 35, 45, 0.52);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

body .board-instruction { color:#aaa0a0 !important; }

.board-item {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--item-z);
  width: var(--item-width);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transform: translate3d(var(--item-x), var(--item-y), 0);
  will-change: transform;
}

.board-item:active {
  cursor: grabbing;
}

.board-item-art {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(40, 35, 48, 0.18);
  box-shadow: 0 18px 34px rgba(50, 43, 59, 0.12);
  transform: rotate(var(--item-rotation));
  transform-origin: 50% 50%;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.board-item.is-dragging .board-item-art {
  box-shadow: 0 26px 52px rgba(50, 43, 59, 0.2);
  transform: rotate(var(--item-rotation)) scale(1.025);
}

.board-item-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.48);
  pointer-events: none;
}

.board-placeholder {
  position: relative;
  display: grid;
  min-height: 100%;
  padding: 16px;
  text-align: left;
  align-content: space-between;
  gap: 20px;
}

.board-placeholder span,
.board-placeholder small {
  color: rgba(37, 35, 45, 0.54);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.board-placeholder strong {
  max-width: 11ch;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.55rem, 2.3vw, 2.45rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.86;
}

.board-item--photo .board-item-art { aspect-ratio: 4 / 3; background: #f5eee7; }
.board-item--paper .board-item-art { aspect-ratio: 4 / 5; background: #fffdf9; }
.board-item--note .board-item-art { aspect-ratio: 1 / 1; background: #fff4bd; }
.board-item--drawing .board-item-art { aspect-ratio: 5 / 4; background: #f5f2ed; }
.board-item--sticker .board-item-art { aspect-ratio: 1 / 1; border-radius: 44% 56% 51% 49% / 54% 42% 58% 46%; background: rgba(228, 212, 255, 0.78); }
.board-item--sticker .board-placeholder { text-align: center; place-content: center; }
.board-item--sticker .board-placeholder strong { margin: 0 auto; }
.board-item--ticket .board-item-art { aspect-ratio: 2 / 1; border-radius: 3px 3px 3px 3px; background: rgba(203, 228, 171, 0.86); }
.board-item--ticket .board-item-art::before { content: ""; position: absolute; top: 8%; bottom: 8%; left: 19%; border-left: 1px dashed rgba(37, 35, 45, 0.25); }
.board-item--card .board-item-art { aspect-ratio: 3 / 4; background: rgba(255, 220, 205, 0.76); }

.board-item-image {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  pointer-events: none;
}

.board-item.has-asset .board-item-art {
  aspect-ratio: auto;
}

.board-item--certificate-folder .board-item-art {
  aspect-ratio: 132 / 143;
  background: transparent;
  overflow: visible;
  border: 0;
  box-shadow: none;
}

.board-item--certificate-folder .board-item-art::after {
  display: none;
}

.certificate-folder-image,
.certificate-folder-source {
  position: absolute;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}

.certificate-folder-image {
  inset: 0 auto auto 0;
  width: auto;
  height: 100%;
}

.certificate-folder-hover {
  inset: -3px auto auto 0;
  width: auto;
  height: 108%;
  opacity: 0;
  transform: translate3d(2px, -2px, 0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}@media (hover:hover) and (pointer:fine) {

.board-item--certificate-folder:hover .certificate-folder-hover,
.board-item--certificate-folder:focus-visible .certificate-folder-hover,
.board-item--certificate-folder.is-folder-hover .certificate-folder-hover {
  opacity: 1;
  transform: translate3d(0, -2px, 0);
}}@media (hover:hover) and (pointer:fine) {

.board-item--certificate-folder:hover .certificate-folder-closed,
.board-item--certificate-folder:focus-visible .certificate-folder-closed,
.board-item--certificate-folder.is-folder-hover .certificate-folder-closed,
.board-item--certificate-folder.is-folder-opening .certificate-folder-closed {
  opacity: 0;
}}

.certificate-folder-closed {
  transition: opacity 180ms ease;
}

.certificate-folder-source {
  inset: auto;
  top: 3%;
  left: 50%;
  z-index: 3;
  width: 72%;
  height: auto;
  opacity: 0;
  transform: rotate(34deg);
  transform-origin: 0 0;
  transition: opacity 140ms ease;
}

.board-item--certificate-folder.is-folder-opening .certificate-folder-hover {
  opacity: 0;
}

.board-item--certificate-folder.is-folder-opening .certificate-folder-source {
  opacity: .98;
}

.board-item--certificate-folder.is-dragging .board-item-art {
  box-shadow: none;
  transform: rotate(var(--item-rotation)) scale(1.025);
}

.board-item--summer-folder .board-item-art {
  aspect-ratio: 945 / 1203;
  background: transparent;
  overflow: visible;
  border: 0;
  box-shadow: none;
}

.board-item--summer-folder {
  overflow: visible;
  clip-path: none;
  contain: none;
}

.board-item--summer-folder,
.board-item--summer-folder .board-item-art,
.board-item--summer-folder .summer-folder-image {
  -webkit-user-drag: none;
  overflow: visible !important;
}

.board-item--summer-folder .board-item-art::after {
  display: none;
}

.summer-folder-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
}
.board-item[data-item-id="masters-envelope"] .board-item-art { aspect-ratio:586/739; }
.board-item[data-item-id="masters-envelope"] .summer-folder-hover { top:auto; bottom:0; height:119.75%; object-position:bottom; transform-origin:50% 100%; }

.summer-folder-hover {
  opacity: 0;
  transform: translate3d(3px, -3px, 0) scale(1.075);
  transform-origin: 50% 50%;
  transition: opacity 210ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}@media (hover:hover) and (pointer:fine) {

.board-item--summer-folder:hover .summer-folder-hover,
.board-item--summer-folder:focus-visible .summer-folder-hover,
.board-item--summer-folder.is-summer-hover .summer-folder-hover {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.1);
}}@media (hover:hover) and (pointer:fine) {

.board-item--summer-folder:hover .summer-folder-closed,
.board-item--summer-folder:focus-visible .summer-folder-closed,
.board-item--summer-folder.is-summer-hover .summer-folder-closed,
.board-item--summer-folder.is-summer-opening .summer-folder-closed {
  opacity: 0;
}}

.summer-folder-closed {
  transform: translate3d(0, 9%, 0) scale(.924);
  transform-origin: 50% 50%;
  transition: opacity 210ms ease;
}

.board-item--summer-folder.is-summer-opening .summer-folder-hover {
  opacity: 0;
}

.board-item--summer-folder.is-dragging .board-item-art {
  box-shadow: none;
  background: transparent;
  border: 0;
  overflow: visible;
  transform: rotate(var(--item-rotation)) scale(1.025);
}

.board-item--summer-folder .summer-folder-image {
  filter:drop-shadow(0 12px 18px rgba(50,43,59,.16));
}
.board-item--summer-folder.is-dragging .summer-folder-image {
  filter:drop-shadow(0 18px 24px rgba(50,43,59,.2));
}

/* Keep the open artwork visible throughout a drag. */
.board-item--summer-folder.is-dragging .summer-folder-hover {
  opacity: 1;
}

.board-item--summer-folder.is-dragging .summer-folder-closed {
  opacity: 0;
}

.certificate-modal[hidden] {
  display: none;
}

.certificate-modal {
  position: fixed;
  z-index: 40;
  inset: 0;
}

.certificate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 18, .76);
  backdrop-filter: blur(0);
  opacity: 0;
  transition: opacity 360ms ease, backdrop-filter 360ms ease;
}

.certificate-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr);
  align-items: center;
  gap: clamp(24px, 5vw, 90px);
  width: 100%;
  min-height: 100%;
  padding: clamp(28px, 5vw, 80px);
  pointer-events: none;
}

.certificate-document,
.certificate-copy,
.certificate-close {
  pointer-events: auto;
}

.certificate-document {
  display: grid;
  place-items: center;
}

.certificate-modal-image {
  display: block;
  width: min(58vw, 900px);
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
  transform-origin: top left;
  transition: transform 680ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease;
}

.certificate-copy {
  max-width: 33ch;
  color: #fffdf8;
  opacity: 0;
  transform: translate3d(18px, 0, 0);
  transition: opacity 280ms ease 220ms, transform 420ms cubic-bezier(.16, 1, .3, 1) 220ms;
}

.certificate-label {
  margin: 0 0 15px;
  color: rgba(255, 253, 248, .62);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body .certificate-copy :is(h2,h3),
body .summer-copy :is(h2,h3) { color:var(--theme-surface,#fff8f2) !important; }
body .certificate-copy #certificate-translation,
body .summer-copy #summer-translation { color:#ded4cf !important; }
body .certificate-copy .certificate-label,
body .summer-copy .summer-label { color:#b8aaa8 !important; }
body .summer-copy .summer-meta { color:#c7bab5 !important; }
body .summer-copy .masters-dissertation-link { display:inline-block; margin-top:20px; font-size:.85rem; color:#f0b0a9 !important; text-decoration:underline; text-underline-offset:5px; }
body .summer-copy #summer-translation { margin:0; font-size:clamp(.88rem,1.2vw,1.03rem); line-height:1.65; }
body .certificate-close,body .summer-close { color:var(--theme-surface,#fff8f2) !important; }

.certificate-copy h2,
.certificate-copy h3 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(2.8rem, 4.6vw, 5.3rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .82;
}

.certificate-copy p:last-child {
  margin: 0;
  color: rgba(255, 253, 248, .78);
  font-size: clamp(.88rem, 1.3vw, 1.05rem);
  line-height: 1.65;
}

.certificate-rule {
  width: 72px;
  height: 1px;
  margin: 27px 0 24px;
  background: rgba(255, 253, 248, .42);
}

.certificate-close {
  position: absolute;
  z-index: 2;
  top: clamp(18px, 2.5vw, 40px);
  right: clamp(18px, 2.5vw, 40px);
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(255, 253, 248, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fffdf8;
  cursor: pointer;
  font: 300 2rem/1 "Inter", sans-serif;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 220ms ease 240ms, background 180ms ease, transform 220ms ease 240ms;
}@media (hover:hover) and (pointer:fine) {

.certificate-close:hover {
  background: rgba(255, 255, 255, .17);
}}

.certificate-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .74);
  outline-offset: 4px;
}

.certificate-modal.is-open .certificate-backdrop {
  opacity: 1;
  backdrop-filter: blur(10px);
}

.certificate-modal.is-open .certificate-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.certificate-modal.is-open .certificate-close {
  opacity: 1;
  transform: scale(1);
}

.board-page.certificate-modal-open,
body.certificate-modal-open {
  overflow: hidden;
}

.summer-modal[hidden] {
  display: none;
}

.summer-modal {
  position: fixed;
  z-index: 41;
  inset: 0;
}

.summer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 28, .79);
  backdrop-filter: blur(0);
  opacity: 0;
  transition: opacity 380ms ease, backdrop-filter 380ms ease;
}

.summer-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  width: 100%;
  min-height: 100%;
  padding: clamp(28px, 5vw, 78px);
  pointer-events: none;
}

.summer-stage-modal,
.summer-copy,
.summer-close {
  pointer-events: auto;
}

.summer-stage-modal {
  position: relative;
  width: min(57vw, 920px);
  max-width: 100%;
  aspect-ratio: 1.23 / 1;
  justify-self: center;
}

.summer-open-folder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(-7%, 4%, 0) scale(.9);
  filter: drop-shadow(0 28px 70px rgba(0, 0, 0, .35));
  transition: opacity 360ms ease 70ms, transform 720ms cubic-bezier(.16, 1, .3, 1) 40ms;
}

.summer-objects {
  position: absolute;
  z-index: 1;
  top: 6%;
  right: -6%;
  width: 88%;
  height: auto;
  opacity: 0;
  transform: translate3d(9%, 10%, 0) scale(.78) rotate(2deg);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .24));
  transition: opacity 350ms ease 220ms, transform 760ms cubic-bezier(.16, 1, .3, 1) 180ms;
}

.summer-copy {
  max-width: 31ch;
  color: #f5f3ee;
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  transition: opacity 300ms ease 300ms, transform 440ms cubic-bezier(.16, 1, .3, 1) 300ms;
}

.summer-label {
  margin: 0 0 15px;
  color: rgba(245, 243, 238, .64);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.summer-copy h2,
.summer-copy h3 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(2.7rem, 4.5vw, 5.1rem);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .86;
}

.summer-meta {
  margin: 17px 0 0;
  color: rgba(245, 243, 238, .7);
  font-size: clamp(.72rem, .94vw, .88rem);
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.35;
}

.summer-copy p:last-child {
  margin: 0;
  color: rgba(245, 243, 238, .78);
  font-size: clamp(.88rem, 1.2vw, 1.03rem);
  line-height: 1.65;
}

.summer-rule {
  width: 72px;
  height: 1px;
  margin: 27px 0 24px;
  background: rgba(245, 243, 238, .42);
}

.summer-close {
  position: absolute;
  z-index: 2;
  top: clamp(18px, 2.5vw, 40px);
  right: clamp(18px, 2.5vw, 40px);
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(245, 243, 238, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #f5f3ee;
  cursor: pointer;
  font: 300 2rem/1 "Inter", sans-serif;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 220ms ease 300ms, background 180ms ease, transform 220ms ease 300ms;
}@media (hover:hover) and (pointer:fine) {

.summer-close:hover {
  background: rgba(255, 255, 255, .17);
}}

.summer-close:focus-visible {
  outline: 3px solid rgba(245, 243, 238, .74);
  outline-offset: 4px;
}

.summer-modal.is-open .summer-backdrop {
  opacity: 1;
  backdrop-filter: blur(10px);
}

.summer-modal.is-open .summer-open-folder,
.summer-modal.is-open .summer-objects {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

/* The folder bridges the opening only; the final view is the objects themselves. */
.summer-modal.is-objects-only .summer-open-folder {
  opacity: 0;
  transform: translate3d(-4%, 4%, 0) scale(.98);
  transition-delay: 0ms;
}
.summer-modal[data-collection="masters-envelope"] .summer-open-folder { inset:13% 10% 7%; width:80%; height:80%; }
.board-item[data-item-id="masters-envelope"] .summer-folder-hover { width:90%; left:5%; height:107.8%; bottom:-4%; }
.board-item[data-item-id="ux-envelope"] .board-item-art { aspect-ratio:587/739; }
.board-item[data-item-id="ux-envelope"] .summer-folder-hover { top:auto; bottom:-4%; width:90%; left:5%; height:107.8%; object-position:bottom; transform-origin:50% 100%; }
.summer-modal[data-collection="ux-envelope"] .summer-open-folder { inset:13% 10% 7%; width:80%; height:80%; }
.summer-modal[data-collection="ux-envelope"] .summer-objects { top:14%; right:-4%; width:106%; }
.board-item[data-item-id="uruguay-folder"] .board-item-art { aspect-ratio:811/587; }
.board-item[data-item-id="eav-folder"] .board-item-art { aspect-ratio:613/741; }
.board-item[data-item-id="eav-folder"] .summer-folder-hover { top:auto; bottom:0; width:110.4%; left:-5.2%; height:108.4%; object-position:bottom; transform-origin:50% 100%; }
.board-item[data-item-id="space-mining-folder"] .board-item-art { aspect-ratio:811/587; }
.board-item[data-item-id="space-mining-folder"] .summer-folder-hover { top:auto; bottom:0; height:115.8%; object-position:bottom; transform-origin:50% 100%; }
.summer-modal:is([data-collection="eav-folder"],[data-collection="space-mining-folder"]) .summer-open-folder { inset:10%; width:80%; height:80%; }
.summer-modal:is([data-collection="eav-folder"],[data-collection="space-mining-folder"]) .summer-objects { top:14%; right:-4%; width:106%; }
.board-item[data-item-id="uruguay-folder"] .summer-folder-hover { top:auto; bottom:0; height:119.4%; object-position:bottom; transform-origin:50% 100%; }
.summer-modal[data-collection="uruguay-folder"] .summer-open-folder { inset:10%; width:80%; height:80%; }
.summer-modal[data-collection="uruguay-folder"] .summer-objects { top:14%; right:-4%; width:106%; }

.summer-modal.is-open .summer-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.summer-modal.is-open .summer-close {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .summer-dialog {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 18px;
    overflow-y: auto;
    padding: 70px 22px 34px;
  }

  .summer-stage-modal {
    width: min(94vw, 680px);
  }

  .summer-copy {
    max-width: min(91vw, 650px);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .board-page, .board-section { padding: 14px; }
  .board-shell { min-height: calc(100vh - 28px); padding: 22px 16px 16px; border-radius: 22px; }
  .board-header { grid-template-columns: 1fr auto; gap: 14px; }
  .board-title-group { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .board-back, .board-reset { grid-row: 2; margin-top: 0; }
  .board-back { grid-column: 1; }
  .board-reset { grid-column: 2; }
  .board-stage { min-height: 660px; margin-top: 26px; border-radius: 16px; }
  .board-instruction { left: 15px; bottom: 13px; font-size: 0.62rem; }
  .board-placeholder { padding: 11px; gap: 12px; }
  .board-placeholder strong { font-size: 1.45rem; }
  .board-placeholder span, .board-placeholder small { font-size: 0.48rem; }

  .certificate-dialog {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 23px;
    overflow-y: auto;
    padding: 72px 22px 34px;
  }

  .certificate-modal-image {
    width: min(91vw, 650px);
    max-height: 54vh;
  }

  .certificate-copy {
    max-width: min(91vw, 650px);
    justify-self: center;
    text-align: left;
  }

  .certificate-copy h2,
  .certificate-copy h3 {
    font-size: clamp(2.6rem, 12vw, 4.1rem);
  }

  .summer-dialog {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px;
    overflow-y: auto;
    padding: 70px 22px 34px;
  }

  .summer-stage-modal {
    width: min(106vw, 660px);
    max-width: none;
    margin-left: -8vw;
  }

  .summer-objects {
    top: 9%;
    right: -3%;
    width: 92%;
  }

  .summer-copy {
    max-width: min(91vw, 650px);
    justify-self: center;
  }

  .summer-copy h2,
  .summer-copy h3 {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-back span,
  .board-reset,
  .board-item-art,
  .certificate-folder-hover,
  .certificate-folder-closed,
  .certificate-folder-source,
  .summer-folder-hover,
  .summer-folder-closed,
  .certificate-backdrop,
  .certificate-modal-image,
  .certificate-copy,
  .certificate-close { transition: none; }
  .summer-backdrop,
  .summer-open-folder,
  .summer-objects,
  .summer-copy,
  .summer-close { transition: none; }
  .board-item.is-dragging .board-item-art { transform: rotate(var(--item-rotation)); }
}