/* GracePress Talk Bridge: the guestbook, as a real book. Light-mode design only; Dark Mode owns any inversion.
   Everything here is drawn with CSS and a few hand-drawn strokes: no images. */
.gpt-gb {
  --gb-paper: var(--nb-paper, #faf8f1);
  --gb-ink: var(--nb-ink, #292a26);
  --gb-pen: #2c3c52;
  --gb-muted: var(--nb-muted, #65645e);
  --gb-red: var(--nb-red, #974735);
  --gb-blue: var(--nb-blue, #315e72);
  --gb-cover: #2f4d5c;
  --gb-script: var(--nb-script, 'GP Notebook', 'Kalam', 'Comic Sans MS', cursive);
  --bk-pad: 12px;
  font-family: var(--nb-sans, Arial, Helvetica, sans-serif);
  color: var(--gb-ink);
  box-sizing: border-box;
  max-width: 1080px; margin: 0 auto;
}
.gpt-gb *, .gpt-gb *::before, .gpt-gb *::after { box-sizing: border-box; }
.gpt-gb [hidden] { display: none !important; }

/* ---------- Heading above the book ---------- */
.gpt-gb-head { margin: 0 0 18px; }
.gpt-gb-title { margin: 0 !important; padding: 0 !important; font: 400 clamp(34px, 5vw, 52px)/1.05 var(--gb-script) !important; color: var(--gb-blue) !important; letter-spacing: 0 !important; text-transform: none !important; transform: rotate(-1deg); transform-origin: left center; }
.gpt-gb-rule { display: block; margin: 2px 0 0 2px; color: var(--gb-red); overflow: visible; }
.gpt-gb-rule path { stroke-dasharray: 280; stroke-dashoffset: 280; animation: gpt-gb-draw 1.1s ease-out .25s forwards; }
.gpt-gb-intro { max-width: 640px; margin: 10px 0 0 !important; font: 400 22px/1.25 var(--gb-script); color: var(--gb-pen); }

/* ---------- The book: cloth cover, page edges, a spine shadow ---------- */
.gpt-bk {
  position: relative; padding: var(--bk-pad); perspective: 2600px; outline: none;
  background: var(--gb-cover); border-radius: 6px 10px 6px 8px;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px);
  box-shadow: 0 1px 0 #d9d2bd, 0 3px 0 #fff, 0 4px 0 #d9d2bd, 0 6px 0 #fff, 0 7px 0 #d9d2bd, 6px 14px 18px -6px rgba(41,42,38,.45);
}
.gpt-bk:focus-visible { outline: 2px solid var(--gb-blue); outline-offset: 4px; }
.gpt-bk-spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; background: var(--gb-paper); border-radius: 3px; overflow: hidden; }
.gpt-bk-slot { display: flex; min-width: 0; }
.gpt-bk-spine { position: absolute; top: var(--bk-pad); bottom: var(--bk-pad); left: 50%; width: 56px; transform: translateX(-50%); pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(41,42,38,.06) 30%, rgba(41,42,38,.22) 50%, rgba(41,42,38,.06) 70%, transparent); }

/* ---------- A page: red margin, blue rules, punch holes toward the spine ---------- */
.gpt-pg { position: relative; flex: 1 1 auto; min-width: 0; padding: 30px 40px 64px 64px; background-color: var(--gb-paper); }
.gpt-pg-r {
  background-image:
    radial-gradient(circle at 22px 14%, #d6cfbb 8px, rgba(0,0,0,.14) 9px, transparent 10px),
    radial-gradient(circle at 22px 50%, #d6cfbb 8px, rgba(0,0,0,.14) 9px, transparent 10px),
    radial-gradient(circle at 22px 86%, #d6cfbb 8px, rgba(0,0,0,.14) 9px, transparent 10px),
    linear-gradient(90deg, transparent 48px, rgba(151,71,53,.55) 48px, rgba(151,71,53,.55) 49px, transparent 49px, transparent 52px, rgba(151,71,53,.32) 52px, rgba(151,71,53,.32) 53px, transparent 53px),
    repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(49,94,114,.17) 35px, rgba(49,94,114,.17) 36px);
}
.gpt-pg-l {
  padding: 30px 64px 64px 40px;
  background-image:
    radial-gradient(circle at calc(100% - 22px) 14%, #d6cfbb 8px, rgba(0,0,0,.14) 9px, transparent 10px),
    radial-gradient(circle at calc(100% - 22px) 50%, #d6cfbb 8px, rgba(0,0,0,.14) 9px, transparent 10px),
    radial-gradient(circle at calc(100% - 22px) 86%, #d6cfbb 8px, rgba(0,0,0,.14) 9px, transparent 10px),
    linear-gradient(90deg, transparent 26px, rgba(151,71,53,.55) 26px, rgba(151,71,53,.55) 27px, transparent 27px, transparent 30px, rgba(151,71,53,.32) 30px, rgba(151,71,53,.32) 31px, transparent 31px),
    repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(49,94,114,.17) 35px, rgba(49,94,114,.17) 36px);
}
.gpt-pg-l::after, .gpt-pg-r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; }
.gpt-pg-l::after { right: 0; background: linear-gradient(90deg, transparent, rgba(41,42,38,.07)); }
.gpt-pg-r::after { left: 0; background: linear-gradient(270deg, transparent, rgba(41,42,38,.07)); }
.gpt-pg-in { display: flex; flex-direction: column; gap: 30px; }
.gpt-pg-num { position: absolute; bottom: 18px; font: 400 21px/1 var(--gb-script); color: var(--gb-muted); }
.gpt-pg-l .gpt-pg-num { left: 92px; }
.gpt-pg-r .gpt-pg-num { right: 92px; }
.gpt-pg-end { background-color: #e6d7b4; background-image: none; display: flex; align-items: center; justify-content: center; }
.gpt-pg-end::after { display: none; }
.gpt-pg-endtext { margin: 0; font: 400 34px/1.2 var(--gb-script); color: rgba(44,60,82,.55); transform: rotate(-4deg); }

/* ---------- A note card taped to the page ---------- */
.gpt-gb-note {
  position: relative; display: block; width: 88%; padding: 22px 20px 12px;
  border: 1px solid rgba(41,42,38,.5); border-radius: 2px 5px 2px 4px; box-shadow: 2px 4px 0 rgba(41,42,38,.15), 0 10px 14px -8px rgba(41,42,38,.3);
  transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0));
}
.gpt-gb-note:nth-child(even) { margin-left: auto; }
.gpt-gb-note-in { animation: gpt-gb-in .6s ease-out both; }
.gpt-gb-note::before { content: ""; position: absolute; top: -13px; width: 74px; height: 23px; background: rgba(223,205,150,.78); clip-path: polygon(0 14%, 5% 0, 95% 9%, 100% 88%, 93% 100%, 4% 90%); z-index: 1; }
.gpt-gb-tape-l::before { left: 16px; transform: rotate(-6deg); }
.gpt-gb-tape-r::before { right: 16px; transform: rotate(5deg); }
.gpt-gb-paper-0 { background: #fffdf4; }
.gpt-gb-paper-1 { background-color: #fbf8ee; background-image: linear-gradient(90deg, transparent 34px, rgba(151,71,53,.4) 34px, rgba(151,71,53,.4) 35px, transparent 35px), repeating-linear-gradient(180deg, transparent 0, transparent 26px, rgba(49,94,114,.2) 26px, rgba(49,94,114,.2) 27px); padding-left: 46px; }
.gpt-gb-paper-2 { background: linear-gradient(160deg, #ecdcba, #e2cfa6); }
.gpt-gb-body { margin: 0 !important; font: 400 22px/1.28 var(--gb-script); color: var(--gb-pen); white-space: pre-wrap; overflow-wrap: anywhere; }
.gpt-gb-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 6px; border-top: 1px dashed rgba(44,60,82,.3); }
.gpt-gb-who { font: 400 20px/1.1 var(--gb-script); color: var(--gb-red); overflow-wrap: anywhere; }
.gpt-gb-when { flex: 0 0 auto; font: 700 9px/1 var(--nb-sans, Arial, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-muted); transform: rotate(-3deg); }
.gpt-gb-hasreply { margin-bottom: 24px; }

/* ---------- The owners' reply: a yellow post-it stuck on the card ---------- */
.gpt-gb-postit {
  position: relative; width: 74%; margin: 14px -8px -36px auto; padding: 12px 14px 12px;
  background: linear-gradient(180deg, #fff6a8 0%, #ffef88 100%); transform: rotate(var(--ptilt, 2deg));
  box-shadow: 0 8px 10px -6px rgba(41,42,38,.4), 0 1px 0 rgba(41,42,38,.12);
  border-radius: 1px 1px 3px 14px / 1px 1px 3px 4px; z-index: 2;
}
.gpt-gb-postit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(180deg, rgba(0,0,0,.06), transparent); }
.gpt-gb-postit-text { margin: 0 !important; font: 400 20px/1.22 var(--gb-script); color: #6a2a1f; white-space: pre-wrap; overflow-wrap: anywhere; }
.gpt-gb-postit-who { display: block; margin-top: 6px; text-align: right; font: 400 17px/1 var(--gb-script); color: var(--gb-blue); }

/* ---------- The signing sheet on the last page ---------- */
.gpt-gb-write { margin-top: 34px; }
.gpt-gb-form { margin: 0; }
.gpt-gb-sheet { position: relative; padding: 10px 16px 6px; background: #fffdf4; border: 1.5px solid var(--gb-ink); border-radius: 2px 6px 2px 4px; box-shadow: 3px 4px 0 rgba(41,42,38,.16); transform: rotate(-.5deg); }
.gpt-gb-sheet::before { content: ""; position: absolute; left: -12px; top: -11px; width: 74px; height: 23px; background: rgba(223,205,150,.78); transform: rotate(-5deg); clip-path: polygon(0 12%, 4% 0, 96% 8%, 100% 90%, 94% 100%, 3% 88%); }
.gpt-gb-text {
  display: block; width: 100%; padding: 2px 0 0; margin: 0; resize: none; border: 0; outline: 0; background: transparent;
  font: 400 24px/36px var(--gb-script) !important; color: var(--gb-pen);
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(49,94,114,.28) 35px, rgba(49,94,114,.28) 36px);
}
.gpt-gb-text::placeholder, .gpt-gb-name::placeholder { color: #9b9686; }
.gpt-gb-signline { display: flex; align-items: baseline; gap: 8px; padding: 4px 0 4px; }
.gpt-gb-x { font: 400 24px/1 var(--gb-script); color: var(--gb-red); }
.gpt-gb-name { flex: 1 1 auto; min-width: 0; padding: 2px 4px; border: 0; border-bottom: 2px dashed rgba(44,60,82,.45); outline: 0; background: transparent; font: 400 24px/1.2 var(--gb-script) !important; color: var(--gb-pen); }
.gpt-gb-text:focus-visible, .gpt-gb-name:focus-visible { outline: 2px solid var(--gb-blue); outline-offset: 2px; }
.gpt-gb-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.gpt-gb-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.gpt-gb-error { margin: 0 !important; flex: 1 1 auto; min-height: 1em; font: 400 19px/1.1 var(--gb-script); color: var(--gb-red); }
.gpt-gb-count { font: 400 11px/1 var(--nb-sans, Arial, sans-serif); color: var(--gb-muted); }
.gpt-gb-count-max { color: var(--gb-red); font-weight: 700; }

/* the Sign button: paper and ink, like everything else on the page */
.gpt-gb-sign {
  flex: 0 0 auto; padding: 6px 16px 5px; cursor: pointer; color: var(--gb-blue); background: #fffdf4;
  border: 1.5px solid var(--gb-ink); border-radius: 3px 8px 2px 6px; box-shadow: 2px 3px 0 rgba(41,42,38,.2);
  transform: rotate(-1.2deg); transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.gpt-gb-sign-word { font: 400 25px/1.1 var(--gb-script); text-decoration: underline wavy rgba(151,71,53,.55); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.gpt-gb-sign:hover:not(:disabled) { background: #fff; transform: rotate(-2deg) translateY(-1px); box-shadow: 3px 5px 0 rgba(41,42,38,.22); }
.gpt-gb-sign:active:not(:disabled) { transform: rotate(-1deg) translateY(2px); box-shadow: 0 1px 0 rgba(41,42,38,.2); }
.gpt-gb-sign:focus-visible { outline: 2px solid var(--gb-blue); outline-offset: 3px; }
.gpt-gb-sign:disabled { cursor: default; opacity: .55; }

.gpt-gb-privacy { max-width: 760px; margin: 18px auto 0 !important; font: 400 11px/1.45 var(--nb-sans, Arial, sans-serif); color: var(--gb-muted); text-align: center; }

/* After signing: a stamped receipt where the form was */
.gpt-gb-signed .gpt-gb-form { display: none; }
.gpt-gb-slip { padding: 16px 20px 14px; background: #fffdf4; border: 2px dashed rgba(151,71,53,.65); border-radius: 3px; transform: rotate(-1deg); }
.gpt-gb-stamp { display: inline-block; padding: 1px 12px; font: 700 20px/1.3 Georgia, serif; letter-spacing: .24em; text-transform: uppercase; color: var(--gb-red); border: 3px double var(--gb-red); border-radius: 4px; transform: rotate(-6deg); animation: gpt-gb-stamp .38s cubic-bezier(.2,1.7,.4,1) both; }
.gpt-gb-slip-text { margin: 10px 0 0 !important; font: 400 23px/1.25 var(--gb-script); color: var(--gb-pen); }
.gpt-gb-again { margin-top: 6px; font-size: 20px; }
.gpt-gb-empty { margin: 8px 0 0 !important; font: 400 26px/1.2 var(--gb-script); color: var(--gb-muted); }

/* ---------- Turning pages: corners, links, go-to-page ---------- */
.gpt-bk-corner { position: absolute; bottom: var(--bk-pad); width: 70px; height: 70px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 4; }
.gpt-bk-corner-l { left: var(--bk-pad); }
.gpt-bk-corner-r { right: var(--bk-pad); }
.gpt-bk-corner::before { content: ""; position: absolute; bottom: 0; width: 26px; height: 26px; transition: width .18s ease, height .18s ease; }
.gpt-bk-corner-r::before { right: 0; background: linear-gradient(315deg, transparent 50%, #e9e2cc 50%, #cfc7ae 100%); border-top-left-radius: 4px; box-shadow: -3px -3px 6px rgba(41,42,38,.18); }
.gpt-bk-corner-l::before { left: 0; background: linear-gradient(45deg, transparent 50%, #e9e2cc 50%, #cfc7ae 100%); border-top-right-radius: 4px; box-shadow: 3px -3px 6px rgba(41,42,38,.18); }
.gpt-bk-corner:hover::before, .gpt-bk-corner:focus-visible::before { width: 52px; height: 52px; }
.gpt-bk-corner:focus-visible { outline: 2px solid var(--gb-blue); }
.gpt-bk-nav { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 22px; margin: 22px 0 0; }
.gpt-bk-where { font: 400 22px/1.1 var(--gb-script); color: var(--gb-pen); min-width: 150px; text-align: center; }
.gpt-bk-link { padding: 2px 6px; cursor: pointer; background: transparent; border: 0; font: 400 24px/1.1 var(--gb-script); color: var(--gb-blue); }
.gpt-bk-link:hover:not(:disabled) { color: var(--gb-red); text-decoration: underline wavy rgba(151,71,53,.6); text-underline-offset: 6px; }
.gpt-bk-link:focus-visible { outline: 2px solid var(--gb-blue); outline-offset: 2px; }
.gpt-bk-link:disabled { opacity: .35; cursor: default; }
.gpt-bk-go { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; }
.gpt-bk-go-label { font: 400 21px/1 var(--gb-script); color: var(--gb-muted); }
.gpt-bk-go-input { width: 64px; padding: 1px 4px; text-align: center; border: 0; border-bottom: 2px dashed rgba(44,60,82,.45); outline: 0; background: transparent; font: 400 24px/1.2 var(--gb-script); color: var(--gb-pen); -moz-appearance: textfield; }
.gpt-bk-go-input::-webkit-outer-spin-button, .gpt-bk-go-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gpt-bk-go-input:focus-visible { outline: 2px solid var(--gb-blue); outline-offset: 2px; }

/* ---------- The page turn ---------- */
.gpt-bk-leaf { position: absolute; top: var(--bk-pad); bottom: var(--bk-pad); width: calc(50% - var(--bk-pad)); z-index: 6; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.45,.1,.25,1); pointer-events: none; }
.gpt-bk-leaf-r { right: var(--bk-pad); transform-origin: left center; }
.gpt-bk-leaf-l { left: var(--bk-pad); transform-origin: right center; }
.gpt-bk-leaf-r.gpt-bk-turned { transform: rotateY(-180deg); }
.gpt-bk-leaf-l.gpt-bk-turned { transform: rotateY(180deg); }
.gpt-bk-face { position: absolute !important; inset: 0; width: 100%; height: 100%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gpt-bk-back { transform: rotateY(180deg); }
.gpt-bk-leaf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(41,42,38,0), rgba(41,42,38,.14)); opacity: 0; transition: opacity .72s ease; pointer-events: none; transform: translateZ(1px); }
.gpt-bk-leaf.gpt-bk-turned::after { opacity: 1; }
.gpt-bk-flipping .gpt-bk-corner { pointer-events: none; }

/* a narrow screen: one page at a time, the sheet slips away */
.gpt-bk-single .gpt-bk-spread { grid-template-columns: 1fr; min-height: 480px; }
.gpt-bk-single .gpt-bk-slot-l, .gpt-bk-single .gpt-bk-spine { display: none; }
.gpt-bk-leaf-single { position: absolute; top: var(--bk-pad); bottom: var(--bk-pad); left: var(--bk-pad); right: var(--bk-pad); z-index: 6; display: flex; pointer-events: none; }
.gpt-bk-leaf-single > .gpt-pg { box-shadow: 0 6px 18px rgba(41,42,38,.3); }
.gpt-bk-out-fwd { animation: gpt-bk-out-fwd .42s ease-in both; }
.gpt-bk-out-back { animation: gpt-bk-out-back .42s ease-in both; }

@keyframes gpt-gb-draw { to { stroke-dashoffset: 0; } }
@keyframes gpt-gb-in { from { opacity: 0; transform: rotate(calc(var(--tilt, 0deg) * 2.5)) translateY(18px); } to { opacity: 1; transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0)); } }
@keyframes gpt-gb-stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes gpt-bk-out-fwd { to { opacity: 0; transform: translateX(-14%) rotate(-3deg); } }
@keyframes gpt-bk-out-back { to { opacity: 0; transform: translateX(14%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .gpt-gb-rule path { animation: none; stroke-dashoffset: 0; }
  .gpt-gb-note-in, .gpt-gb-stamp { animation: none; }
  .gpt-gb-sign, .gpt-bk-corner::before { transition: none; }
}
@media (max-width: 760px) {
  .gpt-gb { --bk-pad: 8px; }
  .gpt-pg, .gpt-pg-l { padding: 24px 22px 60px 52px; }
  .gpt-pg-l { background-image: linear-gradient(90deg, transparent 36px, rgba(151,71,53,.55) 36px, rgba(151,71,53,.55) 37px, transparent 37px), repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(49,94,114,.17) 35px, rgba(49,94,114,.17) 36px); }
  .gpt-pg-r { background-image: linear-gradient(90deg, transparent 36px, rgba(151,71,53,.55) 36px, rgba(151,71,53,.55) 37px, transparent 37px), repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(49,94,114,.17) 35px, rgba(49,94,114,.17) 36px); }
  .gpt-pg::after { display: none; }
  .gpt-pg-r .gpt-pg-num { right: 70px; }
  .gpt-gb-note { width: 94%; }
  .gpt-gb-text, .gpt-gb-name { font-size: 20px !important; }
  .gpt-bk-nav { gap: 4px 14px; }
  .gpt-bk-go { flex-basis: 100%; justify-content: center; }
}