/* ============================================================================
   sketchbook: notes/lunar-manufacturing.html, a factory on the Moon pinned up
   like a studio story room. Paper, cork, index cards, pins and pencil.

   The drawings are inline SVG written by .claude/make_moon_board.py. They sketch
   themselves in once, as each one scrolls into view (a small script at the
   bottom of the page), and simply sit there for anyone who asks for less motion
   or has script turned off.
   ========================================================================== */

.sb-page {
  --paper: #f3eee2;
  --ink: #2a2724;
  --pencil: #5b554c;
  --red: #c4432c;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --type: 'Courier Prime', 'Courier New', monospace;
}

.sk { display: block; width: 100%; height: auto; }

/* --- paper ------------------------------------------------------------------ */

.sb-sheet {
  position: relative;
  background: var(--paper) url(/assets/moon/paper.jpg);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* the opening drawing sits on punched animation paper: two round peg holes and
   a slot, the way a sheet sits on an animator's peg bar */
.sb-hero { margin: 40px 0 0; padding: 46px 16px 14px; }

.sb-peg {
  position: absolute; top: 15px; width: 16px; height: 16px; border-radius: 50%;
  background: #000; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
.sb-peg-l { left: calc(50% - 236px); }
.sb-peg-r { left: calc(50% + 220px); }
.sb-peg-c { left: calc(50% - 24px); width: 48px; height: 15px; border-radius: 8px; }

.sb-slate {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px;
  font: 600 21px/1.25 var(--hand); color: var(--pencil);
  border-top: 1px solid rgba(42, 39, 36, 0.2); margin: 10px 4px 0; padding-top: 8px;
}

/* --- model sheet ------------------------------------------------------------ */

.sb-model { padding: 22px 26px 24px; margin: 24px 0 10px; }

.sb-model-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 20px;
  font-family: var(--hand); border-bottom: 2px solid var(--ink);
  padding-bottom: 6px; margin-bottom: 18px;
}
.sb-model-head b { font-size: 38px; font-weight: 700; line-height: 1; }
.sb-model-head span { font-size: 23px; color: var(--pencil); }
.sb-model-head span:last-child { margin-left: auto; }

.sb-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }

.sb-v { margin: 0; }
.sb-v figcaption { font: 500 20px/1.28 var(--hand); color: var(--ink); margin-top: 2px; }
.sb-v figcaption b { font-size: 24px; font-weight: 700; }

/* --- the red pencil --------------------------------------------------------- */

.sb-cut-in { position: absolute; opacity: 0; pointer-events: none; }

.sb-cut {
  display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
  margin: 6px 0 22px; font: 700 25px/1.2 var(--hand); color: #ff9c84;
}
/* a red pencil, drawn in CSS */
.sb-cut::before {
  content: ""; flex: none; width: 62px; height: 11px; border-radius: 2px 6px 6px 2px;
  background: linear-gradient(90deg, #e9d5a6 0 14%, var(--red) 14% 88%, #3a2a24 88%);
  transform: rotate(-14deg); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease;
}
.sb-cut:hover::before { transform: rotate(-24deg) translateY(-2px); }
.sb-cut-on { display: none; }
.sb-cut-in:checked + .sb-cut .sb-cut-off { display: none; }
.sb-cut-in:checked + .sb-cut .sb-cut-on { display: inline; }
.sb-cut-in:focus-visible + .sb-cut { outline: 1px solid var(--text); outline-offset: 6px; }

/* --- the cork board ----------------------------------------------------------- */

.sb-board {
  position: relative;
  background: #9b6e44 url(/assets/moon/cork.jpg);
  border: 14px solid #5a3d24;
  border-image: linear-gradient(135deg, #7a5532, #4a311c 38%, #6e4a2b 66%, #3b2715) 1;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.45), 0 22px 44px rgba(0, 0, 0, 0.6);
  padding: 46px 34px 18px;
}

.sb-key {
  position: relative; display: inline-block; margin: 0 0 34px;
  background: var(--paper) url(/assets/moon/paper.jpg); color: var(--ink);
  font: 600 21px/1.2 var(--hand); padding: 10px 16px 8px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4); transform: rotate(-1.5deg);
}
.sb-key span { position: relative; padding-left: 20px; margin-right: 18px; }
.sb-key span::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 10px; height: 10px;
  border-radius: 50%; border: 1.5px solid var(--ink);
}
.sb-key .k-must::before { background: var(--ink); }

.sb-stamp {
  display: none; position: absolute; top: 34px; right: 40px; z-index: 3;
  font: 700 34px/1 var(--hand); color: var(--red); background: rgba(243, 238, 226, 0.92);
  padding: 8px 16px 6px; border: 3px solid var(--red); border-radius: 8px;
  transform: rotate(6deg); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}
.sb-cut-in:checked ~ .sb-board .sb-stamp { display: block; }

.sb-scene {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 30px 36px; align-items: start; margin-bottom: 50px;
}
.sb-scene.flip .sb-panel { order: 2; }

.sb-panel {
  position: relative; margin: 0; padding: 10px 10px 6px;
  background: var(--paper) url(/assets/moon/paper.jpg);
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r, -1deg));
}
.sb-panel figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  font: 700 23px/1.2 var(--hand); color: var(--ink); padding: 4px 6px 0;
}
.sb-panel figcaption span { color: var(--pencil); font-weight: 600; }

.sb-pin {
  position: absolute; top: -9px; left: calc(50% - 9px); z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8) 0 2px, transparent 3px), var(--pc, #c8352a);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.45), inset -2px -3px 4px rgba(0, 0, 0, 0.28);
}

/* index cards: a red rule under the heading, blue rules for the notes */
.sb-card {
  position: relative; transform: rotate(var(--r, 1deg));
  padding: 8px 20px 14px 22px; color: var(--ink);
  background:
    linear-gradient(#fcf9f1, #fcf9f1) 0 0 / 100% 54px no-repeat,
    linear-gradient(rgba(214, 90, 80, 0.65), rgba(214, 90, 80, 0.65)) 0 54px / 100% 2px no-repeat,
    repeating-linear-gradient(#fcf9f1 0 25px, rgba(102, 150, 210, 0.38) 25px 26px) 0 56px;
  background-color: #fcf9f1;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.42);
}
.case-body .sb-card h3 { font: 700 32px/46px var(--hand); color: var(--ink); margin: 0 0 4px; }
.case-body .sb-card h3 small { font: 600 21px var(--hand); color: #8a8378; margin-left: 6px; }
.case-body .sb-card .sb-why { font: 400 13px/26px var(--type); color: #6b655c; margin: 0; max-width: none; }
.case-body .sb-card ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.case-body .sb-card li {
  position: relative; margin: 0; padding-left: 20px;
  font: 400 14px/26px var(--type); color: var(--ink);
}
.sb-card li::before {
  content: ""; position: absolute; left: 1px; top: 8px; width: 9px; height: 9px;
  border-radius: 50%; border: 1.5px solid var(--ink);
}
.sb-card li.must::before { background: var(--ink); }
.case-body .sb-card li.nice { color: #5d574e; }

.sb-cut-in:checked ~ .sb-board .sb-card li.nice {
  color: #a59e92;
  text-decoration: line-through wavy var(--red);
  text-decoration-thickness: 1.5px;
}
.sb-cut-in:checked ~ .sb-board .sb-card li.nice::before { border-color: #bdb5a8; }

/* --- prints and sticky notes ---------------------------------------------------- */

.sb-prints { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 52px; margin: 30px 0 22px; }

.sb-print {
  position: relative; display: block; width: 270px;
  background: #fbfaf6; padding: 12px 12px 10px;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.55);
  transform: rotate(var(--r, -2deg)); transition: transform 0.25s ease;
}
.sb-print:hover, .sb-print:focus-visible { transform: rotate(0deg) scale(1.03); outline: none; }
.sb-print img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sb-print span { display: block; text-align: center; font: 700 23px/1.2 var(--hand); color: var(--ink); padding-top: 10px; }
.sb-print span small { display: block; font-size: 19px; font-weight: 600; color: var(--pencil); }
.sb-print::before {
  content: ""; position: absolute; top: -13px; left: calc(50% - 48px);
  width: 96px; height: 28px; background: rgba(238, 228, 196, 0.6);
  transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.sb-stickies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 26px 0 14px; }

.sb-sticky {
  position: relative; min-height: 176px; padding: 20px 16px 22px;
  background: linear-gradient(180deg, #fbe88c, #f3d95f);
  color: #3a3120; font: 600 21px/1.24 var(--hand);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r, -1.5deg));
}
.sb-sticky::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px;
  background: rgba(0, 0, 0, 0.045);
}

/* --- the last panel -------------------------------------------------------------- */

.sb-end { padding: 12px 12px 8px; margin: 26px 0 30px; }

.case-body .sb-big {
  font: 700 36px/1.15 var(--hand); color: var(--text);
  max-width: 30ch; margin: 0 0 12px;
}

.sb-mail {
  display: inline-block; font: 700 30px/1.2 var(--hand); color: #ffb39f;
  border-bottom: 2px solid rgba(255, 179, 159, 0.4); padding-bottom: 2px;
  transition: border-color 0.15s ease;
}
.sb-mail:hover, .sb-mail:focus-visible { border-bottom-color: #ffb39f; outline: none; }

/* --- sketching in ------------------------------------------------------------------ */

.sk.sk-wait [data-p] { opacity: 0; }

@keyframes sk-draw { to { stroke-dashoffset: 0; } }
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }

/* the print head on the opening drawing keeps working once it is drawn */
.sk-live .sk-shuttle { animation: sk-shuttle 6s ease-in-out infinite alternate; }
@keyframes sk-shuttle { from { transform: translateX(-38px); } to { transform: translateX(30px); } }

@media (prefers-reduced-motion: reduce) {
  .sk-live .sk-shuttle { animation: none; }
  .sb-print, .sb-cut::before { transition: none; }
}

/* --- narrow ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .sb-hero { padding: 34px 6px 10px; margin-top: 30px; }
  .sb-peg { top: 11px; width: 12px; height: 12px; }
  .sb-peg-l { left: calc(50% - 118px); }
  .sb-peg-r { left: calc(50% + 106px); }
  .sb-peg-c { left: calc(50% - 18px); width: 36px; height: 11px; }
  .sb-slate { font-size: 17px; }

  .sb-model { padding: 16px 14px 18px; }
  .sb-model-head b { font-size: 30px; }
  .sb-model-head span:last-child { margin-left: 0; }
  .sb-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .sb-v figcaption { font-size: 18px; }

  .sb-board { border-width: 9px; padding: 30px 14px 8px; }
  .sb-stamp { top: 22px; right: 14px; font-size: 26px; }
  .sb-scene { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 42px; }
  .sb-scene.flip .sb-panel { order: 0; }
  .sb-card { padding: 6px 14px 12px 16px; }
  .case-body .sb-card li { font-size: 13.5px; }

  .sb-stickies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .sb-sticky { min-height: 150px; font-size: 19px; }
  .case-body .sb-big { font-size: 30px; }
}

@media (max-width: 460px) {
  .sb-model-grid { grid-template-columns: minmax(0, 1fr); }
  .sb-stickies { grid-template-columns: minmax(0, 1fr); }
  .sb-print { width: 240px; }
}