/* Callboard home: pinned INTERVALS card and dated posts. Builds on first-callboard.css (cork board frame). */
.board-home { padding: 24px clamp(16px, 4vw, 56px) 72px; min-height: 0; }
.board-home .board-label { position: relative; left: auto; top: auto; width: min(420px, 88%); margin: 0 auto 30px; }
.board-title { display: flex; flex-direction: column; align-items: center; text-align: center; color: #29251f; margin-bottom: 14px; }
.board-title strong { font: 700 clamp(34px, 6vw, 70px)/1 Georgia, serif; letter-spacing: .025em; }
.board-title span { margin-top: 12px; font: 700 clamp(11px, 1.3vw, 18px)/1.4 Arial, sans-serif; letter-spacing: .13em; }
.board-tags { display: flex; justify-content: center; gap: 12px; margin: 10px 0 34px; position: relative; z-index: 2; }
.board-tags a { padding: 8px 16px; background: #fffaf0; color: #29251f; font: 700 12px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: 2px 4px 7px rgba(48,32,20,.3); transform: rotate(-1deg); }
.board-tags a:nth-child(2) { transform: rotate(1.2deg); }
.board-tags a:hover, .board-tags a:focus-visible { background: #fff; outline: 2px solid #29251f; outline-offset: 2px; }

.board-feature { position: relative; z-index: 2; display: block; width: min(560px, 92%); margin: 0 auto 56px; padding: 18px 18px 0; text-decoration: none; color: inherit; transition: transform .18s ease, filter .18s ease; }
.board-feature img { display: block; width: 100%; height: auto; filter: drop-shadow(5px 9px 10px rgba(48,32,20,.35)); }
.board-feature-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; max-width: 100%; margin: -10px auto 0; padding: 14px 26px; position: relative; background: #174e4a; color: #f4efe3; font: 700 15px/1.2 Arial, sans-serif; letter-spacing: .04em; box-shadow: 3px 6px 10px rgba(48,32,20,.4); transition: background-color .15s; }
.board-feature-go b { transition: transform .15s; }
.board-feature:hover, .board-feature:focus-visible { transform: translateY(-4px) rotate(-.4deg); }
.board-feature:hover .board-feature-go, .board-feature:focus-visible .board-feature-go { background: #0f3835; }
.board-feature:hover .board-feature-go b, .board-feature:focus-visible .board-feature-go b { transform: translateX(5px); }
.board-feature:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

.board-posts { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 34px; align-items: flex-start; max-width: 1040px; margin: 0 auto; }
.post-note { position: relative; display: block; box-sizing: border-box; width: 300px; max-width: 100%; padding: 34px 22px 22px; background: var(--note-bg, #fffaf0); color: #29251f; text-decoration: none; box-shadow: 5px 9px 12px rgba(48,32,20,.29); transform: rotate(var(--note-rot, 0deg)); transition: transform .18s ease, box-shadow .18s ease; }
.post-note::before { content: ""; position: absolute; left: 50%; top: 11px; width: 21px; height: 21px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 32%, #91ad9c 0 13%, #46705b 45%, #284537 72%); box-shadow: 1px 3px 4px rgba(0,0,0,.35); }
.post-note:hover, .post-note:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: 7px 13px 16px rgba(48,32,20,.34); }
.post-note:focus-visible { outline: 3px solid #29251f; outline-offset: 4px; }
.post-note-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 14px; }
.post-note time { display: block; margin: 0 0 10px; color: #5f584c; font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.post-note h2 { margin: 0 0 12px; font: 700 clamp(20px, 2vw, 25px)/1.2 Georgia, serif; }
.post-note p { margin: 0 0 14px; font: 15px/1.55 Georgia, serif; }
.post-note-more { display: inline-block; font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
  .board-posts { gap: 32px; }
  .post-note { transform: none; width: 100%; }
  .board-feature { margin-bottom: 44px; }
  .board-feature-go { font-size: 14px; padding: 13px 18px; }
}
@media (prefers-reduced-motion: reduce) { .board-feature, .post-note, .board-feature-go b { transition: none; } }

/* Free layout: items sit where Alyssa placed them. x and width are percents of the canvas, y is pixels. */
.board-canvas { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; min-height: 400px; }
.bc-item { position: absolute; box-sizing: border-box; left: calc(var(--dx) * 1%); top: var(--dy); width: calc(var(--dw) * 1%); }
.bc-item .board-feature { width: 100%; margin: 0; }
.bc-item .post-note { width: 100%; }
.bc-note { position: relative; padding: 30px 20px 20px; background: var(--note-bg, #ffec70); color: #29251f; box-shadow: 5px 9px 12px rgba(48,32,20,.29); transform: rotate(-.8deg); font: 17px/1.5 Georgia, serif; }
.bc-note::before { content: ""; position: absolute; left: 50%; top: 9px; width: 18px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 32%, #91ad9c 0 13%, #46705b 45%, #284537 72%); box-shadow: 1px 3px 4px rgba(0,0,0,.35); }
.bc-body p { margin: 0 0 .7em; } .bc-body > :last-child { margin-bottom: 0; }
.bc-body h2, .bc-body h3 { margin: 0 0 .5em; font-family: Georgia, serif; line-height: 1.2; }
.bc-photo { display: block; width: 100%; height: auto; padding: 10px 10px 34px; background: #fffaf0; box-sizing: border-box; box-shadow: 5px 9px 12px rgba(48,32,20,.3); transform: rotate(1deg); }
@media (max-width: 640px) {
  .bc-item { left: calc(var(--mx) * 1%); top: var(--my); width: calc(var(--mw) * 1%); }
}

/* Studio edit mode (the page inside the Studio editor) */
.board-editing a { cursor: grab; }
.board-editing .bc-item { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.board-editing .bc-item:hover { outline: 2px dashed rgba(23,78,74,.65); outline-offset: 4px; }
.board-editing .bc-item.is-selected { outline: 3px solid #008C6A; outline-offset: 4px; z-index: 50; }
.board-editing .bc-item.is-dragging { cursor: grabbing; opacity: .92; z-index: 60; }
.board-editing .bc-item img { pointer-events: none; -webkit-user-drag: none; }
.board-editing .bc-item .bc-body[contenteditable="true"] { outline: 2px solid #174e4a; background: rgba(255,255,255,.55); cursor: text; user-select: text; -webkit-user-select: text; min-height: 1.5em; }
.bc-handle { position: absolute; right: -12px; bottom: -12px; width: 22px; height: 22px; border-radius: 50%; background: #008C6A; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: nwse-resize; z-index: 70; touch-action: none; }
.bc-bar { position: absolute; left: 0; bottom: calc(100% + 12px); display: flex; gap: 6px; align-items: center; padding: 6px; background: #29251f; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.35); z-index: 80; white-space: nowrap; cursor: default; }
.bc-bar button { font: 700 12px/1 Arial, sans-serif; padding: 7px 10px; border: 0; border-radius: 6px; background: #3b362d; color: #fff; cursor: pointer; }
.bc-bar button:hover { background: #008C6A; }
.bc-bar button.danger:hover { background: #a63a2b; }
.bc-bar .sw { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid #fff; }

.board-editing [data-head] { cursor: pointer; }
.board-editing [data-head]:hover { outline: 2px dashed rgba(23,78,74,.65); outline-offset: 6px; }
.board-editing [data-head].is-selected { outline: 3px solid #008C6A; outline-offset: 6px; }
.board-editing [data-head] [contenteditable="plaintext-only"], .board-editing [data-head] [contenteditable="true"], .board-editing [data-head][contenteditable="plaintext-only"], .board-editing [data-head][contenteditable="true"] { outline: 2px solid #174e4a; background: rgba(255,255,255,.5); cursor: text; user-select: text; -webkit-user-select: text; }
.board-editing .board-title { position: relative; }
.board-editing .board-label .bc-bar, .board-editing .board-title .bc-bar { text-transform: none; letter-spacing: 0; left: 50%; transform: translateX(-50%); top: calc(100% + 12px); bottom: auto; }