/* The rucksack button and drawer. Colours from the template's look, with fallbacks. */
.gs-ruck { position: fixed; right: 18px; bottom: 18px; z-index: 75; width: 138px; height: 144px; border: 0; background: none; padding: 0;
  cursor: pointer; transition: transform .2s; }
.gs-ruck img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .35)); user-select: none; -webkit-user-drag: none; }
.gs-ruck svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.gs-ruck__n { position: absolute; right: -4px; top: -2px; min-width: 26px; height: 26px; border-radius: 13px; background: var(--accent, #c8402c);
  color: #fff; font: 800 13px/26px var(--f-ui, serif); padding: 0 7px; display: none; }
.gs-ruck.has .gs-ruck__n { display: block; }
.gs-ruck__tip { position: absolute; right: 100%; top: 50%; margin-right: 10px; transform: translateY(-50%); background: #23211d; color: #fff;
  padding: 7px 11px; border-radius: 8px; font: 700 18px/1 var(--f-hand, cursive); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
body.gs-dragging .gs-ruck { pointer-events: none; transform: scale(1.18); }
body.gs-dragging .gs-ruck__tip { opacity: 1; }
.gs-ruck.hot { transform: scale(1.45) rotate(-6deg) !important; }
@media (hover: hover) { .gs-ruck:hover .gs-ruck__tip { opacity: 1; } }

.gs-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 88; width: min(420px, 100%); background: var(--paper, #f4efe5); color: var(--ink, #23211d);
  box-shadow: -20px 0 50px rgba(0, 0, 0, .4); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .35s cubic-bezier(.3, .8, .3, 1); }
.gs-drawer.on { transform: none; }
.gs-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.gs-drawer h2 { margin: 0; font: var(--head-weight, 400) 28px/1 var(--f-serif, Georgia, serif); }
.gs-drawer__x { border: 1px solid var(--line, #8a8274); background: none; color: inherit; border-radius: 50%; width: 36px; height: 36px; font-size: 20px; cursor: pointer; }
.gs-drawer__note { margin: 0 20px 10px; font: 400 15px/1.45 var(--f-serif, Georgia, serif); color: var(--muted, #5b5246); }
.gs-drawer__list { list-style: none; margin: 0; padding: 0 20px; overflow-y: auto; flex: 1; }
.gs-drawer__list li { display: grid; grid-template-columns: 96px 1fr 30px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line, rgba(0, 0, 0, .1)); }
.gs-drawer__list li.empty { display: block; font: 700 21px/1.25 var(--f-hand, cursive); color: var(--muted, #6b6457); border: 0; padding: 20px 0; }
.gs-drawer__list img { width: 96px; height: 66px; object-fit: cover; display: block; border-radius: 2px; }
.gs-drawer__t { display: block; font: 500 16px/1.2 var(--f-serif, Georgia, serif); margin-bottom: 6px; text-decoration: none; }
.gs-drawer__go { display: inline-block; font: 600 13px/1 var(--f-ui, serif); padding: 6px 10px; border-radius: 999px; text-decoration: none;
  border: 1px solid currentColor; }
.gs-drawer__go.sale { background: var(--sale, #ffcf4a); color: var(--sale-ink, #23211d); border-color: transparent; }
.gs-drawer__go.walk { background: var(--walk, #2f5d46); color: #fff; border-color: transparent; }
.gs-drawer__go.port { background: var(--port, #8f3b28); color: #fff; border-color: transparent; }
.gs-drawer__rm { border: 0; background: none; font-size: 22px; color: var(--muted, #8a8274); cursor: pointer; }
.gs-drawer__foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line, rgba(0, 0, 0, .1)); }
.gs-drawer__mail, .gs-drawer__clear { border: 1px solid var(--muted, #8a8274); background: transparent; border-radius: 999px; padding: 8px 14px;
  font: 500 14px/1 var(--f-ui, serif); color: inherit; text-decoration: none; cursor: pointer; }

.gs-toast { position: fixed; left: 50%; bottom: 26px; z-index: 95; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #23211d; color: #fff; padding: 10px 16px; border-radius: 8px; font: 700 19px/1.2 var(--f-hand, cursive); transition: .25s; max-width: calc(100vw - 140px); }
.gs-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the photo page's button */
.gs-keep { font: 600 .9rem/1 var(--f-ui, serif); padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--walk, #2f5d46);
  background: transparent; color: var(--walk, #2f5d46); cursor: pointer; margin: .4rem 0 1rem; }
.gs-keep.is-kept { background: var(--walk, #2f5d46); color: #fff; }
@media (max-width: 700px) { .gs-ruck { width: 92px; height: 96px; right: 10px; bottom: 10px; } }
.gs-photo__text > .gs-keep { justify-self: start; width: auto; }

/* Lightbox: the picture large, with the rucksack and the next steps */
.gs-lb { position: fixed; inset: 0; z-index: 90; background: rgba(12, 11, 10, .94); display: flex; align-items: center; justify-content: center; padding: 3.2rem 4.2rem 1.2rem; }
.gs-lb[hidden] { display: none; }
body.gs-lb-open { overflow: hidden; }
.gs-lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.gs-lb__img { max-width: 100%; max-height: calc(100vh - 11rem); max-height: calc(100svh - 11rem); object-fit: contain; display: block; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.gs-lb__cap { color: #f1eadb; text-align: center; display: grid; gap: .6rem; justify-items: center; }
.gs-lb__t { font: 400 1.35rem/1.2 var(--f-serif, Georgia, serif); }
.gs-lb__acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
/* lightbox buttons match the site's buttons (30 Oct 2026): the Crossings Dartmoor font on green, light on hover */
.gs-lb__keep, .gs-lb__main, .gs-lb__rand { font: 400 1.05rem/1.15 var(--f-title, var(--f-ui, serif)); letter-spacing: .05em; padding: .75rem 1.2rem .68rem; border: 0; border-radius: 3px; background: var(--btn, #6a7d61); color: #fff; cursor: pointer; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.gs-lb__keep:hover, .gs-lb__main:hover, .gs-lb__rand:hover { background: #f1eadb; color: #23211d; transform: translateY(-1px); }
.gs-lb__keep.is-kept { background: #2f5d46; box-shadow: inset 0 0 0 2px #a5c591; color: #fff; }
.gs-lb__more { font: 700 1.2rem/1.2 var(--f-hand, cursive); color: #b9b1a2; }
.gs-lb__more a { color: inherit; }
.gs-lb__more a:hover { color: #fff; }
.gs-lb__x, .gs-lb__nav { position: absolute; border: 0; background: rgba(255, 255, 255, .08); color: #f1eadb; cursor: pointer; border-radius: 50%; }
.gs-lb__x { top: .8rem; right: .9rem; width: 2.6rem; height: 2.6rem; font-size: 1.6rem; line-height: 1; }
.gs-lb__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; }
.gs-lb__prev { left: .8rem; } .gs-lb__next { right: .8rem; }
.gs-lb__x:hover, .gs-lb__nav:hover { background: rgba(255, 255, 255, .18); }
@media (max-width: 700px) {
  .gs-lb { padding: 3.2rem .6rem 1rem; }
  .gs-lb__nav { top: auto; bottom: .8rem; transform: none; }
}
.gs-lb__img { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.gs-lb__img:active { cursor: grabbing; }
.gs-lb__hint { font: 600 1rem/1 var(--f-hand, cursive); color: #8f8774; }

/* The copy of a picture that flies into the rucksack lives on <body>, outside the wall's CSS: give it the same picture rules. */
.gs-flyer { box-sizing: border-box; pointer-events: none; }
.gs-flyer.phc { background: var(--card, #fffdf7); padding: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.gs-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The one-time hello about the rucksack on the home page (30 Oct 2026): a note with a little tail pointing down at the rucksack */
.gs-ruckintro { position: fixed; z-index: 90; right: 22px; bottom: 176px; width: min(23rem, calc(100vw - 2.4rem)); padding: 1.15rem 1.3rem 1.2rem; background: #fbf8f1; color: #23211d; border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .08); opacity: 0; transform: translateY(14px) rotate(1.5deg); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.15); }
.gs-ruckintro.on { opacity: 1; transform: none; }
.gs-ruckintro::after { content: ""; position: absolute; right: 54px; bottom: -11px; width: 22px; height: 22px; background: #fbf8f1; transform: rotate(45deg); box-shadow: 4px 4px 6px rgba(0, 0, 0, .12); }
.gs-ruckintro h2 { margin: 0 1.6rem .5rem 0; font: 400 1.5rem/1.1 var(--f-title, serif); letter-spacing: .03em; color: #23211d; }
.gs-ruckintro p { margin: 0 0 .65rem; font: 400 1.02rem/1.45 var(--f-serif, serif); }
.gs-ruckintro__how { font-family: var(--f-hand, var(--f-serif, serif)); font-size: 1.35rem !important; line-height: 1.2 !important; color: #3d3a33; }
.gs-ruckintro__x { position: absolute; top: .35rem; right: .5rem; border: 0; background: none; font-size: 1.7rem; line-height: 1; padding: .2rem .5rem; cursor: pointer; color: #23211d; }
.gs-ruckintro__ok { font: 400 1.1rem/1.1 var(--f-title, serif); letter-spacing: .05em; padding: .65rem 1.3rem .6rem; border: 0; border-radius: 3px; background: var(--btn, #66795d); color: #fff; cursor: pointer; }
.gs-ruckintro__ok:hover, .gs-ruckintro__ok:focus-visible, .gs-ruckintro__x:focus-visible { outline: 3px solid var(--accent, #4a6e3a); outline-offset: 2px; }
@media (max-width: 760px) { .gs-ruckintro { right: 12px; bottom: 164px; } }
@media (prefers-reduced-motion: reduce) { .gs-ruckintro { transition: opacity .2s; transform: none; } }