.rink {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-block: 40px 64px;
  color: var(--charcoal, #1e1c1a);
  font-family: var(--sans, sans-serif);
}
.rink[hidden], .rink [hidden] { display: none; }
.rink * { box-sizing: border-box; }
.rink .rink__map { min-width: 0; }
.rink .rink__stage {
  position: relative;
  height: 400px;
  overflow: hidden;
  isolation: isolate;
  background: var(--linen, #efe8dc);
  border-radius: 2px;
  perspective: 1100px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.rink .rink__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  aspect-ratio: 2;
  transform-style: preserve-3d;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.rink .rink__plane svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rink .rink__surface :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.rink .rink__surface { position: relative; }
.rink .rink__slab { position: absolute; inset: 0; transform: translateZ(-3px); }
.rink .rink__ice { fill: var(--ice, #fbf9f5); stroke: var(--charcoal, #1e1c1a); stroke-opacity: .28; stroke-width: .75; }
.rink .rink__edge { fill: #e8e2d7; stroke: var(--taupe-soft, #7a7268); stroke-width: .8; }
.rink .rink__inset { fill: none; stroke: var(--gold, #b89b64); opacity: .35; stroke-width: 1; }
.rink .rink__engraving { fill: none; stroke: var(--taupe-soft, #7a7268); stroke-width: 1; opacity: .35; }
.rink .rink__center { fill: none; stroke: var(--taupe-soft, #7a7268); opacity: .14; stroke-width: .75; }
.rink .rink__etch { opacity: .16; }
.rink .rink__trace { fill: none; stroke: var(--gold, #b89b64); stroke-width: 1.25; opacity: .7; }
.rink .rink__path { fill: none; stroke: var(--taupe, #6a6259); stroke-width: 1; opacity: .3; }
.rink .rink__contact { fill: var(--charcoal, #1e1c1a); opacity: .12; }
.rink .rink__overlay { position: absolute; inset: 0; pointer-events: none; }
.rink .rink__marker {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--charcoal, #1e1c1a);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease, cubic-bezier(.22, 1, .36, 1));
  font: 500 15px/1 var(--serif, serif);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.rink .rink__marker span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--charcoal, #1e1c1a);
  border-radius: 50%;
  background: var(--ivory, #f7f3ec);
  transform: scale(.85);
  transition: transform 300ms var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.rink .rink__marker.is-visible { opacity: 1; pointer-events: auto; }
.rink .rink__marker.is-visible span { transform: scale(1); }
.rink.is-revealed .rink__marker, .rink.is-revealed .rink__marker span { transition: none; }
.rink .rink__marker::after { content: ''; position: absolute; width: 6px; height: 1px; bottom: 2px; background: var(--gold, #b89b64); }
.rink .rink__marker[aria-pressed="true"] span { background: var(--charcoal, #1e1c1a); color: var(--ivory, #f7f3ec); }
.rink .rink__marker:focus-visible { z-index: 2; }
.rink :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--charcoal, #1e1c1a); outline-offset: 3px; }
.rink .rink__stage:focus-visible { outline-offset: -5px; }
.rink .rink__controls { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-block: 8px; }
.rink .rink__control {
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--charcoal, #1e1c1a);
  font: 600 12px/1.5 var(--sans, sans-serif);
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
}
.rink .rink__control:disabled { opacity: .5; cursor: default; }
.rink .rink__detail { min-width: 0; min-height: 360px; padding-block: 14px; align-self: start; }
.rink .rink__register { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.rink .rink__number { font: 500 44px/1 var(--serif, serif); color: var(--gold-deep, #8c7142); font-variant-numeric: lining-nums tabular-nums; }
.rink .rink__register::after { content: ''; height: 1px; flex: 1; background: var(--gold, #b89b64); }
.rink .rink__org { margin: 0 0 10px; color: var(--taupe, #6a6259); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rink .rink__title { margin: 0 0 12px; font: 500 32px/1.1 var(--serif, serif); font-optical-sizing: auto; text-wrap: balance; }
.rink .rink__meta { margin: 0 0 20px; font-size: 15px; color: var(--taupe, #6a6259); }
.rink .rink__desc { margin: 0 0 20px; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.rink .rink__links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0; font-size: 15px; }
.rink .rink__links a { color: var(--charcoal, #1e1c1a); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--gold, #b89b64); text-underline-offset: .22em; }
.rink .rink__links a:last-child { flex-basis: 100%; }
.rink .rink__links a:hover { text-decoration-color: var(--charcoal, #1e1c1a); }
.rink.is-dragging :is(.rink__stage, .rink__plane, .rink__marker) { cursor: grabbing; }
.rink.is-reduced :is(.rink__stage, .rink__plane) { cursor: default; }
@media (hover: hover) { .rink .rink__marker:hover span { border-width: 2px; } }
@media (max-width: 899px) {
  .rink { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rink .rink__stage { height: 380px; }
  .rink .rink__detail { max-width: 36rem; }
}
@media (max-width: 599px) {
  .rink { margin-block: 28px 48px; }
  .rink .rink__stage { height: 480px; }
  .rink .rink__plane { width: clamp(400px, calc(110vw + 47.5px), 470px); }
  .rink .rink__number { font-size: 34px; }
  .rink .rink__register { margin-bottom: 16px; }
  .rink .rink__title { font-size: 27px; line-height: 1.12; }
  .rink .rink__detail { min-height: 0; padding-block: 0; }
  .rink .rink__meta { margin-bottom: 12px; }
  .rink .rink__controls { justify-content: space-between; gap: 4px 10px; }
  .rink .rink__control { font-size: 11px; letter-spacing: .1em; }
}
@media print { .rink { display: none !important; } }