/* ===========================================================================
   Sullishak - one stylesheet for the whole site.
   Edit this file and re-run tools/build_site.py to see changes.
   =========================================================================== */

:root {
  --bg:         #f7f5f1;   /* warm off-white                */
  --panel:      #fffdfa;   /* cards, table rows             */
  --text:       #3f3a36;   /* driftwood grey                */
  --muted:      #6d645b;   /* captions, small print         */
  --link:       #3f7d6b;   /* sea glass                     */
  --link-hover: #2f6455;
  --accent:     #c0763b;   /* warm accent - offer boxes     */
  --accent-dark:#9d5c2a;
  --rule:       #ded7cc;   /* hairlines                     */
  --shade:      #efebe4;   /* soft fill                     */
  --mark:       #fdf3c9;   /* review markers                */
  --serif: Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 66ch;   /* comfortable reading width for the text itself       */
  --caption: 16px;   /* captions and other small print never go below this  */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.6 var(--sans);
  overflow-wrap: break-word;
  /* keep the footer at the bottom of the window on a short page */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* on a very narrow phone 17px keeps long words and the ledger from crowding */
@media (max-width: 380px) {
  body { font-size: 17px; }
}

img, video, iframe { max-width: 100%; }
img { height: auto; }

a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* --------------------------------------------------------------- header -- */

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  line-height: 1.2;
}
.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: .01em;
}
.brand-sub {
  display: block;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.menu-toggle {
  font: inherit;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 9px 14px;
  cursor: pointer;
}
.menu-toggle:hover { border-color: var(--link); color: var(--link); }
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
}
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after  { top: 6px; }

.site-nav { display: none; width: 100%; }
.site-nav.open { display: block; }
.site-nav ul {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.site-nav li { border-bottom: 1px solid var(--rule); }
.site-nav a {
  display: block;
  padding: 13px 2px;
  text-decoration: none;
  font-size: 18px;
}
.site-nav a.current, .site-nav a.in-section { color: var(--accent-dark); font-weight: 600; }

@media (min-width: 960px) {
  .menu-toggle { display: none; }
  .site-nav { display: block; width: auto; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 2px 2px; margin: 0; border: 0; }
  .site-nav li { border: 0; }
  .site-nav a {
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 16px;
    white-space: nowrap;
  }
  .site-nav a:hover { background: var(--shade); }
  .site-nav a.current { background: var(--shade); }
  .site-nav a.current::after, .site-nav a.in-section::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--accent);
    margin-top: 3px;
  }
}

/* ---------------------------------------------------------------- layout -- */

main { display: block; padding: 34px 0 56px; flex: 1 0 auto; }
.site-header, .site-footer { flex: 0 0 auto; }

.page-layout > .page { min-width: 0; }
.page-layout:not(.has-subnav) > .page { max-width: 880px; }

@media (min-width: 900px) {
  .page-layout.has-subnav {
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
    gap: 14px 44px;
    align-items: start;
  }
}

/* ------------------------------------------------------------- sub-nav --- */

/* On a phone the whole section list is one plainly labelled expandable
   list - no sideways scrolling strip.  From 900px up it is the sidebar,
   always open, and the summary line disappears. */

.subnav { margin: 0 0 26px; }

.subnav-summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 13px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  font-size: 17px;
  font-weight: 600;
  color: var(--link);
}
.subnav-summary::-webkit-details-marker { display: none; }
.subnav-summary::after {
  content: "\25be";       /* small triangle */
  float: right;
  margin-left: 12px;
  transition: transform .15s ease;
}
.subnav-details[open] > .subnav-summary::after { transform: rotate(180deg); display: inline-block; }
.subnav-details[open] > .subnav-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.subnav-body {
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--panel);
  padding: 8px 16px 16px;
}

/* on a phone the summary line already names the section */
.subnav-title { display: none; }
.subnav-group {
  font-size: var(--caption);
  font-weight: 650;
  color: var(--muted);
  margin: 16px 0 5px;
}
.subnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.subnav-list li { margin: 0 0 2px; }
.subnav-list a {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  /* 11px top and bottom makes a 44px tap target on a phone */
  padding: 11px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 16.5px;
  line-height: 1.35;
}
.subnav-list a:hover { background: var(--shade); }
.subnav-list a.current { background: var(--shade); color: var(--accent-dark); font-weight: 600; }
.subnav-list li.depth-1 { padding-left: 14px; }
.subnav-list li.depth-2 { padding-left: 28px; }
.subnav-year { color: var(--muted); font-size: var(--caption); font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .subnav {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
    border-right: 1px solid var(--rule);
    padding-right: 16px;
    padding-bottom: 8px;
    margin-bottom: 0;
    /* a long list scrolls inside the sidebar; the soft edge says so */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  }
  .subnav-summary { display: none; }
  .subnav-details::details-content { content-visibility: visible; block-size: auto; }
  .subnav-body { border: 0; background: none; padding: 0; }
  .subnav-list a { padding: 6px 8px; }
  .subnav-title {
    display: block;
    font-family: var(--serif);
    font-size: var(--caption);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
    font-weight: 600;
  }
  .subnav-title + .subnav-group { margin-top: 10px; }
}

/* ----------------------------------------------------------------- text -- */

.page-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.2;
  margin: 0 0 22px;
}

.series-meta {
  margin: -14px 0 22px;
  font-size: var(--caption);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.print-actions { margin: 0 0 24px; }

/* Text keeps a comfortable measure; photographs, galleries, tables and the
   landing-page links use the whole column they are in. */
.prose > * { max-width: var(--measure); }
.prose > .gallery,
.prose > .gallery-heading,
.prose > .gallery-year,
.prose > .then-now,
.prose > .figure-pair,
.prose > .figure-set,
.prose > .table-scroll,
.prose > .table-wrap,
.prose > .entrances,
.prose > .calendar-embed,
.prose > .barb-panel { max-width: none; }

.prose h2, .prose h3, .prose h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  margin: 2em 0 .5em;
}
.prose h2 { font-size: 27px; }
.prose h3 { font-size: 22px; }
.prose h4 { font-size: 19px; }
.prose p { margin: 0 0 1.1em; }
.prose strong { font-weight: 650; }

.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.7em; }
.prose li { margin: .35em 0; padding-left: .2em; }
.prose li > ul, .prose li > ol { margin: .35em 0; }
.prose ul { list-style: disc; }
.prose ul ul { list-style: circle; }
.prose ol { list-style: decimal; }

.prose blockquote {
  margin: 1.4em 0;
  padding: .2em 0 .2em 18px;
  border-left: 3px solid var(--rule);
  color: var(--muted);
  font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }

/* --------------------------------------------------------------- tables -- */

/* A table that is wider than the screen scrolls sideways inside its own box.
   The soft right edge and the line under it only appear when there really is
   something off to the right (static/site.js measures it), and they go away
   again once the reader has scrolled to the end. */
.table-wrap { position: relative; margin: 1.4em 0; }
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
  scrollbar-width: thin;
}
.table-wrap.is-overflowing > .table-scroll {
  box-shadow: inset -26px 0 20px -18px rgba(63, 58, 54, .85);
}
.table-wrap.is-overflowing.at-end > .table-scroll { box-shadow: none; }
.table-hint { display: none; }
.table-wrap.is-overflowing:not(.at-end) > .table-hint {
  display: block;
  margin: 0 0 .5em;
  font-size: var(--caption);
  line-height: 1.4;
  color: var(--accent-dark);
  font-weight: 650;
}
.table-scroll table { border-collapse: collapse; width: 100%; font-size: 16.5px; }
.table-scroll th, .table-scroll td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.table-scroll thead th { background: var(--shade); font-weight: 650; white-space: nowrap; }
.table-scroll tr:last-child td { border-bottom: 0; }
table.ledger td:last-child, table.ledger th:last-child { text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------- pictures -- */

figure { margin: 0; }

/* The link around each photograph carries an inline max-width: the picture's
   own size, reduced further for tall photos so a portrait never fills the
   whole screen.  That way small old scans are shown at their real size, never
   blown up - while the figure itself, and so the caption under it, may run
   wider than a small picture instead of being squeezed into its width. */
.photo {
  margin: 1.6em 0;
  max-width: 100%;
}
.photo > a { display: block; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--shade);
}
.photo figcaption, .gallery-item figcaption {
  margin-top: .5em;
  font-size: var(--caption);
  line-height: 1.5;
  color: var(--muted);
}
/* a caption reads badly in a 160px column and badly again right across the
   page, so it stops at a comfortable line of its own */
.photo figcaption { max-width: min(100%, 60ch); }

/* The hero carries its own max-width - the photograph's real size - so a
   small old scan is never blown up to fill the column. */
.hero { margin: 0 0 1.8em; }
.hero img { display: block; width: 100%; height: auto; border-radius: 3px; }

/* Two photographs side by side on a screen with room for them.  On a phone
   that would leave each picture about 170px wide with eleven lines of caption
   underneath, so below 620px they stack, one under the other, each the full
   width of the column with its own caption below it. */
.figure-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 1.6em 0;
  align-items: start;
}
.figure-pair .photo { margin: 0; }
@media (min-width: 620px) {
  .figure-pair { grid-template-columns: 1fr 1fr; gap: 18px; }
}
/* "Left:" / "Right:" only means something while the two pictures really are
   side by side.  Below 620px they are one above the other, so the word goes. */
.figure-pair figcaption .lr { font-weight: 600; }
@media (max-width: 619px) {
  .figure-pair figcaption .lr { display: none; }
}

/* A pair (or a small group) that shares one caption. */
.figure-set { margin: 1.6em 0; }
.figure-set > .figure-pair, .figure-set > .photo, .figure-set > .gallery { margin: 0; }
.figure-set > figcaption {
  margin-top: .5em;
  font-size: var(--caption);
  line-height: 1.5;
  color: var(--muted);
}

/* Thumbnails are never cropped: the whole photograph sits inside a cell of a
   fixed height, so portraits, letters and group photographs all show in full
   and the grid still lines up.  Tap or click for the full-size view. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin: 1.6em 0;
}
@media (min-width: 620px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
}
.gallery-item { min-width: 0; }
.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
}
.gallery-heading {
  font-family: var(--serif);
  font-size: 23px;
  margin: 0 0 .6em;
}
.gallery-lead { margin-top: 0; }
/* A photo folder whose files carry the year is shown year by year. */
.gallery-year {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 1.6em 0 .5em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.gallery-year:first-child { margin-top: 0; }
.gallery-year + .gallery { margin-top: 0; }
/* a year with one photograph should not leave a third of the row empty */
.gallery.gallery-years {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px 14px;
}
@media (min-width: 620px) {
  .gallery.gallery-years { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

a.lightbox-link, a.photo-link { display: block; }
a.lightbox-link:hover img, a.photo-link:hover img { filter: brightness(1.04); }

/* ------------------------------------------------- writer markup contract -- */

/* Then and now: the same view, old photograph and new, side by side on a
   screen with room and stacked on a phone.  Both pictures whole, never
   cropped, each keeping its own caption. */
.then-now {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 1.8em 0;
  align-items: start;
}
@media (min-width: 620px) {
  .then-now { grid-template-columns: 1fr 1fr; gap: 26px; }
}
.then-now > figure, .then-now .photo, .then-now .photo > a, .then-now .figure-pair {
  margin: 0;
  max-width: none !important;
  width: 100%;
}
.then-now img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--rule);
  background: var(--panel);
}
.then-now figcaption { font-size: var(--caption); line-height: 1.5; color: var(--muted); }
.then-now .date-line {
  margin: .35em 0 0;
  font-size: var(--caption);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .03em;
}

/* A dated note from Dave or Barb, set apart from the family's own writing. */
.note-box {
  margin: 1.7em 0;
  padding: 15px 20px;
  background: var(--shade);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--accent);
  border-radius: 0 5px 5px 0;
}
.note-box > :first-child { margin-top: 0; }
.note-box > :last-child { margin-bottom: 0; }
.note-box p { margin: 0 0 .8em; }
.note-box strong { color: var(--accent-dark); }

/* Equal-sized entrances on a landing page: two across, stacked on a phone. */
.entrances {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 1.8em 0;
}
@media (min-width: 620px) { .entrances { grid-template-columns: 1fr 1fr; gap: 20px; } }
.entrance {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-left: 5px solid var(--link);
  border-radius: 6px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
}
.entrance:hover, .entrance:focus {
  background: #fff;
  border-color: var(--link);
  border-left-color: var(--link-hover);
  color: var(--text);
}
.entrance strong {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--link);
}
.entrance span { font-size: var(--caption); line-height: 1.5; color: var(--muted); }
.entrance .epigraph { font-size: var(--caption); line-height: 1.5; color: var(--muted); }

/* Dave's offer, word for word, in a block of its own - same size as the
   text around it, just plainly separated from it. */
.protected-offer {
  margin: 1.8em 0;
  padding: 22px 24px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
}
.protected-offer > :first-child { margin-top: 0; }
.protected-offer > :last-child { margin-bottom: 0; }
.protected-offer strong { color: var(--accent-dark); }

/* Previous / next at the foot of a chapter or a project page. */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 2.6em 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.page-nav-link {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  text-decoration: none;
  color: var(--link);
}
.page-nav-link:hover { background: var(--shade); border-color: var(--link); }
.page-nav-index { flex: 0 1 auto; align-items: center; color: var(--muted); }
.page-nav-next { text-align: right; }
.page-nav-label { font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.page-nav-title { font-size: var(--caption); color: var(--muted); }

.offer-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 1.8em 0;
}
@media (min-width: 680px) { .offer-boxes { grid-template-columns: 1fr 1fr; } }
.offer-box {
  display: block;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--text);
}
.offer-box:hover { background: #fff7ef; color: var(--text); }
.offer-box h3 {
  font-family: var(--serif);
  color: var(--accent-dark);
  margin: 0 0 .4em;
  font-size: 22px;
  line-height: 1.25;
}
.offer-box p { margin: 0; font-size: var(--caption); }

.button, .button-accent {
  display: inline-block;
  background: var(--link);
  color: #fff !important;
  border: 0;
  border-radius: 5px;
  padding: 13px 22px;
  font: inherit;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--link-hover); }
.button-accent { background: var(--accent); }
.button-accent:hover { background: var(--accent-dark); }
.button-large { font-size: 19px; padding: 15px 30px; }

.video, .calendar-embed {
  position: relative;
  margin: 1.6em 0;
  background: var(--shade);
  border-radius: 4px;
  overflow: hidden;
}
.video { aspect-ratio: 16 / 9; }
.calendar-embed { aspect-ratio: 4 / 3; }
.video iframe, .calendar-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 700px) { .calendar-embed { aspect-ratio: 16 / 10; } }

.stay-form {
  margin: 1.6em 0;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.stay-form p { margin: 0 0 14px; }
.stay-form label {
  display: block;
  font-weight: 600;
  font-size: var(--caption);
  margin-bottom: 4px;
}
.stay-form input[type=text], .stay-form input[type=email], .stay-form input[type=tel],
.stay-form input[type=date], .stay-form input[type=number], .stay-form textarea,
.stay-form select {
  width: 100%;
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  margin-bottom: 14px;
}
.stay-form textarea { min-height: 110px; }
.stay-form input[type=hidden] + label { margin-top: 0; }

dl.timeline { margin: 1.6em 0; }
dl.timeline dt {
  font-family: var(--serif);
  font-weight: 650;
  font-size: 19px;
  color: var(--accent-dark);
  margin-top: 1.1em;
}
dl.timeline dd { margin: .2em 0 0; padding-left: 0; }
@media (min-width: 640px) {
  dl.timeline { display: grid; grid-template-columns: 5.5em 1fr; column-gap: 20px; }
  dl.timeline dt { margin-top: .9em; text-align: right; }
  dl.timeline dd { margin-top: .9em; }
}

.fill, mark.fill-marker {
  background: var(--mark);
  border: 1px solid #e6d38a;
  color: #5a4a18;
}
.fill {
  display: block;
  padding: 12px 15px;
  border-radius: 4px;
  margin: 1.3em 0;
  font-size: 16px;
}
mark.fill-marker { padding: 1px 4px; border-radius: 3px; }

/* ------------------------------------------------------------- lightbox -- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(30, 27, 24, .965);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; text-align: center; max-width: 100%; }
.lightbox-image {
  max-width: 94vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 3px;
  background: #1e1b18;
}
.lightbox-caption {
  color: #efe9e1;
  font-size: var(--caption);
  line-height: 1.5;
  margin-top: 14px;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
/* Big, easily hit controls - they are the only way out of the viewer. */
.lightbox button {
  position: absolute;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(0, 0, 0, .8); }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox.single .lightbox-prev, .lightbox.single .lightbox-next { display: none; }
body.lightbox-open { overflow: hidden; }

/* On a phone the arrows move to the bottom, out of the picture's way. */
@media (max-width: 620px) {
  .lightbox { padding: 3vmin 3vmin 96px; justify-content: flex-start; padding-top: 80px; }
  .lightbox-image { max-height: 62vh; }
  .lightbox-prev { left: 16px; top: auto; bottom: 18px; transform: none; }
  .lightbox-next { right: 16px; top: auto; bottom: 18px; transform: none; }
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--panel);
  padding: 18px 0 26px;
  margin-top: 40px;
}
.footer-line {
  margin: 0;
  font-size: var(--caption);
  line-height: 1.5;
  color: var(--muted);
}
/* The telephone number and the email address are the two things a guest
   actually taps, so they are given a finger-sized target (48px) rather than
   the 17px of a line of text. */
.footer-line a {
  color: var(--link);
  display: inline-block;
  padding: 12px 8px;
  margin: -8px 0;
  border-radius: 4px;
}
.footer-line a:hover, .footer-line a:focus { background: var(--shade); }

/* ---------------------------------------------------------------- print -- */

/* What goes on paper: the page's own words and pictures, plus the one line
   that says whose cabin this is and how to reach them.  Everything that only
   works on a screen - the menus, the calendar, the request form, the buttons,
   the photo viewer - is left off. */
@media print {
  /* on paper a caption should be smaller than the text, and black - the grey
     of the screen prints as a washed-out shadow */
  :root { --bg: #fff; --caption: 9pt; }
  figcaption, .photo figcaption, .gallery-item figcaption,
  .figure-set > figcaption, .then-now figcaption { color: #000; }
  body {
    background: #fff; color: #000; font-size: 11pt; line-height: 1.45;
    display: block; min-height: 0;
  }
  .site-header, .menu-toggle, .site-nav, .subnav, .skip-link, .lightbox,
  .video, .calendar-embed, .calendar, .cal-fallback, .cal-note,
  .stay-form, .form-status, .barb-gate, .barb-panel, .barb-bar,
  .page-nav, .print-actions, .table-hint,
  .button, .button-accent, .offer-boxes,
  button, form, iframe { display: none !important; }
  main { padding: 0; }

  /* the contact line stays: a printed page has to say who to telephone */
  .site-footer {
    display: block !important;
    background: none;
    border-top: 1px solid #999;
    margin-top: 16pt;
    padding: 6pt 0 0;
  }
  .footer-line { font-size: 9pt; color: #000; }
  .footer-line a {
    display: inline; padding: 0; margin: 0; color: #000;
    text-decoration: none; background: none;
  }
  .footer-line a::after { content: "" !important; }
  .wrap { max-width: none; padding: 0; }
  .page-layout.has-subnav { display: block; }
  .page-layout:not(.has-subnav) > .page, .prose, .prose > * { max-width: none; }
  .page-title { font-size: 24pt; }
  .series-meta { margin-top: 0; font-size: 9pt; }
  .prose h2 { font-size: 15pt; }
  .prose h3 { font-size: 13pt; }
  h1, h2, h3, h4, figure, tr { break-inside: avoid; page-break-inside: avoid; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery-item img { height: auto; border: 0; padding: 0; }
  .then-now, .figure-pair { grid-template-columns: 1fr 1fr; }
  .photo, .photo > a, .photo img { max-width: 100% !important; }
  .hero { max-width: 100% !important; }
  a { color: #000; text-decoration: underline; }
  /* show where links go when the page is on paper */
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .prose a[href^="/"]::after   { content: " (sullishak.net" attr(href) ")"; font-size: 9pt; }
  .prose a[href^="#"]::after, .prose a[href^="mailto"]::after, .prose a[href^="tel"]::after { content: ""; }
  /* a photograph is not a link on paper */
  .prose a.lightbox-link, .prose a.photo-link, .prose figure a { text-decoration: none; }
  .prose a.lightbox-link::after, .prose a.photo-link::after, .prose figure a::after { content: "" !important; }
  .note-box, .protected-offer { border: 1px solid #999; background: none; }
  .table-wrap { margin: 10pt 0; }
  .table-scroll { overflow: visible; border: 0; box-shadow: none !important; }
  .table-scroll table { font-size: 10pt; }
}

/* ------------------------------------------------- the guest book form -- */
/* Added by the merge editor, September 2026, for /guest-book/. The form
   reuses .stay-form for its boxes and labels; these rules only cover the
   two things .stay-form does not have: the "may we share it?" choice and
   the hint under it. Nothing above this line was changed. */

.guest-form fieldset.guest-permission {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
}
.guest-form fieldset.guest-permission legend {
  font-weight: 600;
  font-size: var(--caption);
  padding: 0 6px;
}
.guest-form label.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: inherit;
  line-height: 1.5;
  margin: 0 0 10px;
  /* a generous tap target on a phone */
  padding: 6px 0;
}
.guest-form label.choice:last-child { margin-bottom: 0; }
.guest-form label.choice input[type=radio] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
}
.guest-form .guest-hint {
  font-size: var(--caption);
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------- the paper guest book ------ */
/* The entries copied out of the book at the cabin: one soft card each, in a
   single column, at the same 18px as the text around them. */

.guest-entries {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 1.8em 0 2.2em;
}

.guest-entry {
  padding: 18px 22px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.guest-entry > :first-child { margin-top: 0; }
.guest-entry > :last-child { margin-bottom: 0; }
.guest-entry p { margin: 0 0 .8em; }

/* The date exactly as the writer put it, small and quiet above the words. */
.guest-date {
  font-size: var(--caption);
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  margin: 0 0 .7em;
}

/* Who signed it, over on the right. */
.guest-who {
  font-size: var(--caption);
  line-height: 1.5;
  color: var(--muted);
  text-align: right;
  margin: .9em 0 0;
}

@media print {
  .guest-entry { border: 1px solid #999; background: none; break-inside: avoid; }
}