/* Glavind Strachan trial template (2026-10-26). Colours and fonts come in swappable sets so Paul can compare them:
   body[data-look] = paper | granite | peat,  fonts: Alegreya (text), Crossings Dartmoor (titles), Caveat (quotes), see below. Try colours with ?try=1 on any page. */
:root, body[data-look="paper"] {
  --paper: #f4efe5; --ink: #23211d; --muted: #6b6457; --card: #fffdf7; --line: rgba(35, 33, 29, .16);
  --accent: #c8402c; --walk: #2f5d46; --sale: #ffcf4a; --sale-ink: #23211d; --port: #8f3b28; --hd-bg: rgba(244, 239, 229, .94);
  --wide: 1400px; --text: 46rem;
}
/* Granite (Paul's pick, 2026-10-26): moor-stone grey with a faint speckle, and the live site's sage green (#a5c591) for
   fills; a deeper shade of the same green for words, so links stay readable on the grey. */
body[data-look="granite"] {
  --paper: #e1e2de; --ink: #1d2124; --muted: #565d61; --card: #f3f4f1; --line: rgba(29, 33, 36, .16);
  --green: #a5c591; --accent: #4a6e3a; --walk: #4a6e3a; --sale: #a5c591; --sale-ink: #1d2124; --port: #5b4a63; --hd-bg: rgba(225, 226, 222, .94);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .13 0 0 0 0 .14 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
body[data-look="peat"] {
  --paper: #191815; --ink: #ebe5d8; --muted: #a39b8d; --card: #24221e; --line: rgba(235, 229, 216, .16);
  --accent: #e3a83c; --walk: #7fae8a; --sale: #e3a83c; --sale-ink: #191815; --port: #c97b5f; --hd-bg: rgba(25, 24, 21, .94);
}

:root {
  --f-serif: "Alegreya", Georgia, "Times New Roman", serif; --f-ui: "Alegreya", Georgia, "Times New Roman", serif; --f-hand: "Caveat", "Segoe Print", cursive;
  --head-weight: 400;
}
/* One text font for everything you read (Alegreya, hosted here), the Crossings Dartmoor font for titles, buttons and the byline, Caveat only for Paul's quotes and
   small handwritten asides. Alegreya has a small x-height, so the whole site is set about 6% larger than the browser default. */
html { font-size: 106%; }

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }   /* form controls follow the site's text font instead of the browser's own */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grain, none) var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--f-ui); overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--f-serif); font-weight: var(--head-weight); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
/* TITLE FONT (30 Oct 2026): "Crossings Dartmoor Tidy", traced from the map titles in Crossing's Guide to Dartmoor (free, SIL OFL; see media/fonts/OFL.txt).
   It is capitals only (lower case types as the same capitals) and has one weight, so headings use weight 400 and a slightly smaller size than the old serif. */
/* Alegreya and Caveat: SIL Open Font Licence, files in ../fonts (OFL-text-fonts.txt) */
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/alegreya-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/alegreya-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/alegreya-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/alegreya-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/caveat-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/caveat-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Crossings Dartmoor Tidy"; src: url(../fonts/CrossingsDartmoorTidy.woff2) format("woff2"), url(../fonts/CrossingsDartmoorTidy.ttf) format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --f-title: "Crossings Dartmoor Tidy", var(--f-serif), Georgia, serif; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-title); font-weight: 400; letter-spacing: .015em; line-height: 1.12; overflow-wrap: break-word;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.95rem); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--card); padding: .5rem 1rem; }

/* Header: name and five plain words. No hamburger: the words fit on a phone. */
.hd { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem;
  padding: .8rem clamp(1rem, 3vw, 2.5rem); background: var(--hd-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.hd__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.hd__name { font: var(--head-weight) 1.45rem/1 var(--f-serif); letter-spacing: -.01em; }
.hd__nav { margin-left: auto; position: relative; }
.hd__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .4rem; position: relative; z-index: 1; }
.hd__nav a { font: 500 1.02rem/1 var(--f-ui); text-decoration: none; padding: .5rem .75rem; display: inline-block; transition: color .25s; }
.hd__nav a:hover { color: var(--ink); }
.hd__nav li:first-child a { color: var(--accent); font-weight: 700; }   /* Prints */
.hd__nav .current > a, .hd__nav .active > a { box-shadow: inset 0 -2px 0 currentColor; }
.hd__nav ul ul { display: none; }
/* The green bar that follows the pointer along the words: square, flies in from the left, bounces (template.js springs it). */
.hd__follow { position: absolute; left: 0; top: 0; height: 0; width: 0; background: var(--green, var(--accent)); opacity: 0; pointer-events: none; z-index: 0; }
.hd__follow.on { opacity: 1; }
.hd__brand, .hd__nav { position: relative; z-index: 1; }
.hd__nav.following .current > a, .hd__nav.following .active > a { box-shadow: none; }

@media (max-width: 760px) {
  .hd { padding-top: .6rem; padding-bottom: .5rem; }
  .hd__nav { margin-left: 0; width: 100%; }
  .hd__nav ul { gap: 0; flex-wrap: nowrap; justify-content: space-between; }
  .hd__nav a { font-size: .92rem; padding: .45rem .4rem; }
}
@media (max-width: 420px) { .hd__nav a { font-size: .84rem; padding: .45rem .25rem; } }

/* The name behind the page: a giant outlined G and S in the corners that shrink as you scroll while the rest of each word
   writes itself in (template.js). Not on the home wall, which fills the screen. */
.names { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nm { position: absolute; white-space: nowrap; font: 400 36vw/.8 var(--f-title, var(--f-serif)); color: transparent; -webkit-text-stroke: 1.2px var(--line-strong, rgba(29, 33, 36, .32)); }
.nm span { display: inline-block; }
.nm--l { left: 1.5vw; top: 70px; }
.nm--r { bottom: 1vh; }
.main, .ft { position: relative; z-index: 1; }
@media (max-width: 760px) { .nm { -webkit-text-stroke-width: 1px; } }

/* Pictures in the words wipe up into view and settle; some drift at their own speed as you scroll (template.js). */
.js-wipe img { clip-path: inset(100% 0 0 0); transform: scale(1.18);
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.js-wipe.on img { clip-path: inset(0 0 0 0); transform: none; }
@media (prefers-reduced-motion: reduce) { .js-wipe img { clip-path: none; transform: none; transition: none; } }

/* A gallery in a post becomes a sideways strip: the page pins and the pictures slide across (template.js). Full width. */
.gs-side { position: relative; width: 100vw; margin: 3rem 0 3rem calc(50% - 50vw); }
.gs-side__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.gs-gallery.gs-gallery--side { display: flex; gap: 1.4rem; margin: 0; padding: 0 4vw; width: max-content; will-change: transform; }
.gs-gallery--side .gs-inline { flex: none; margin: 0; }
.gs-gallery.gs-gallery--side .gs-inline img { height: min(62vh, 640px); width: auto; max-width: none; aspect-ratio: auto; object-fit: initial; }
.gs-gallery--side .gs-inline:nth-child(even) { margin-top: 8vh; }
.gs-gallery--side figcaption { max-width: 30rem; }
/* big sets: two rows of smaller pictures, each with its caption under it. Every picture's width is worked out from its shape, so nothing depends on the images having loaded. */
.gs-gallery--rows { --gh: min(30vh, 340px); flex-direction: column; gap: 1.2rem; }
.gs-gallery__row { display: flex; gap: 1.2rem; align-items: flex-start; }
.gs-gallery.gs-gallery--side.gs-gallery--rows .gs-gallery__row .gs-inline { flex: none; width: calc(var(--gh) * var(--r, 1.5)); margin: 0; }
.gs-gallery.gs-gallery--side.gs-gallery--rows .gs-inline img { width: 100%; height: auto; aspect-ratio: var(--r, 1.5); object-fit: cover; max-width: 100%; }
.gs-gallery--rows figcaption { font-size: .9rem; line-height: 1.2; max-width: none; }
.gs-zoom img { cursor: zoom-in; }
@media (max-width: 760px) { .gs-gallery--rows { --gh: 22vh; } }
@media (max-width: 760px) { .gs-gallery.gs-gallery--side .gs-inline img { height: 46vh; } .gs-gallery--side .gs-inline:nth-child(even) { margin-top: 4vh; } }

/* No "Home" breadcrumb on the home page itself */
.view-home .mod-breadcrumbs__wrapper { display: none; }

/* The look switcher (only with ?try=1) */
.try { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; background: #151412; color: #f1eadb; border-radius: 10px; padding: .7rem .8rem;
  font: 500 .8rem/1.3 var(--f-ui, serif); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); max-width: calc(100vw - 2rem); }
.try p { margin: 0 0 .35rem; color: #b9b1a2; }
.try div { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.try button { font: inherit; border: 1px solid #4a4741; background: #24221e; color: inherit; border-radius: 1rem; padding: .25rem .65rem; cursor: pointer; }
.try button[aria-pressed="true"] { background: #f1eadb; color: #151412; }
.try .try__x { position: absolute; right: .4rem; top: .3rem; border: 0; background: none; font-size: 1rem; padding: 0 .3rem; }

/* Home page wall */
.gs-home__title { font-size: clamp(2.2rem, 5.5vw, 4.4rem); max-width: 18ch; margin-top: 1.5rem; }
.gs-home__lede { font: 400 1.25rem/1.55 var(--f-serif); max-width: 36rem; color: var(--muted); }
.gs-wall { columns: 3 300px; column-gap: 1.4rem; margin-top: 2.5rem; }
.gs-wall > li { margin-bottom: 1.6rem; }
.gs-wall__item img { border-radius: 2px; transition: opacity .2s; }
.gs-wall__item a:hover img { opacity: .88; }
.gs-wall__name { font: 700 1.2rem/1.2 var(--f-hand); color: var(--muted); }
.gs-card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 1.6rem 1.4rem; }
.gs-card__big { font: var(--head-weight) clamp(1.4rem, 2.2vw, 1.8rem)/1.15 var(--f-serif); }
.gs-card__small { font: 700 1.3rem/1.2 var(--f-hand); color: var(--muted); }
.gs-card--sale { background: var(--sale); color: var(--sale-ink); border-color: transparent; }
.gs-card--sale .gs-card__small { color: inherit; opacity: .75; }
.gs-card--walk { background: var(--walk); color: #fff; border-color: transparent; }
.gs-card--port { background: var(--port); color: #fff; border-color: transparent; }
.gs-card--walk .gs-card__small, .gs-card--port .gs-card__small { color: rgba(255, 255, 255, .85); }
.gs-card--ink { background: var(--ink); color: var(--paper); border-color: transparent; }
.gs-card--ink .gs-card__small { color: inherit; opacity: .7; }
.gs-card a:hover .gs-card__big { text-decoration: underline; text-underline-offset: 4px; }

/* Page */
.main { max-width: var(--wide); margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2.5rem) 4rem; min-height: 60vh; }
.mod-breadcrumbs__wrapper ol, .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.5rem; font-size: .85rem; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-right: .4rem; }
.breadcrumb a { text-decoration: none; }
.mod-breadcrumbs__here { display: none; }

/* System messages */
joomla-alert, .alert { display: block; margin: 0 0 1.5rem; padding: .9rem 1.2rem; border-radius: 6px; background: var(--card); border-left: 4px solid var(--walk); }
joomla-alert[type="danger"], joomla-alert[type="error"], .alert-danger { border-left-color: var(--accent); }
joomla-alert[type="warning"], .alert-warning { border-left-color: #c79a1c; }
joomla-alert .joomla-alert--close, joomla-alert button { float: right; background: none; border: 0; font-size: 1.3rem; cursor: pointer; }
joomla-alert .alert-heading { display: none; }

/* Buttons */
.btn, .gs-buy__button { display: inline-block; font: 400 1.12rem/1.15 var(--f-title); letter-spacing: .05em; padding: .8rem 1.5rem .72rem; border: 0; border-radius: 3px;
  background: var(--btn); color: #fff; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }   /* the title font, in sage (30 Oct 2026) */
.btn:hover, .gs-buy__button:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }

/* Photograph page */
.gs-photo { max-width: none; }
.gs-photo__figure { margin: 0 0 2.5rem; }
.gs-photo__img { width: 100%; max-height: 86vh; object-fit: contain; border-radius: 2px; }
.gs-photo__caption { font: 700 1.35rem/1.25 var(--f-hand); color: var(--muted); margin-top: .6rem; opacity: 1; }
.gs-photo__text { display: grid; grid-template-columns: minmax(0, var(--text)) minmax(0, 24rem); gap: 0 clamp(2rem, 5vw, 5rem); max-width: none; align-items: start; }
.gs-photo__text > * { grid-column: 1; }
.gs-photo__text > .gs-buy, .gs-photo__text > .gs-photo__book-wrap { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 6rem; margin-top: 0; }
.gs-photo__title { font-size: clamp(2rem, 4.5vw, 3.6rem); }
.gs-photo__description p { font: 400 1.2rem/1.65 var(--f-serif); }
.gs-photo__facts { font-size: .9rem; color: var(--muted); margin: 1.5rem 0; }
.gs-photo__facts dt { color: var(--ink); }
.gs-photo__nav { border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .95rem; }
.gs-photo__nav a { text-decoration: none; }
.gs-photo__book, .gs-photo__buy { display: inline-block; font: 700 1.6rem/1.1 var(--f-hand); color: var(--accent); }

@media (max-width: 900px) {
  .gs-photo__text { grid-template-columns: 1fr; }
  .gs-photo__text > .gs-buy { grid-column: 1; grid-row: auto; position: static; margin: 2rem 0; }
}

/* Tags */
ul.tags { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
ul.tags a, ul.tags .btn { display: inline-block; font: 600 .8rem/1 var(--f-ui); padding: .4rem .75rem; border-radius: 2rem; background: transparent;
  color: var(--ink); border: 1px solid var(--line); text-decoration: none; }
ul.tags a:hover { border-color: var(--accent); color: var(--accent); }

/* Buy box */
.gs-buy { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem 1.5rem; max-width: 26rem; box-shadow: 0 10px 30px -18px rgba(35, 33, 29, .35); }
.gs-buy__title { font: 300 1.9rem/1 var(--f-serif); margin-bottom: 1rem; }
.gs-buy__label { font-size: .85rem; }
.gs-buy__select, .gs-buy textarea { border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); padding: .55rem .6rem; }
.gs-buy__price [data-gs-price] { font: 400 2.2rem/1 var(--f-serif); }
.gs-buy__christmas { font: 700 1.3rem/1.2 var(--f-hand); color: var(--accent); }
.gs-buy__button { width: 100%; padding: 1rem; font-size: 1.05rem; }
.gs-buy__gift summary { cursor: pointer; font: 700 1.25rem/1.2 var(--f-hand); color: var(--walk); }

/* Share */
.gs-share__label { font: 700 1.3rem/1 var(--f-hand); }
.gs-share__btn { background: transparent; }

/* Category / categories grids: natural shapes, in columns */
.gs-cat__title { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.gs-cat__intro { font: 400 1.2rem/1.6 var(--f-serif); max-width: var(--text); margin-bottom: 2rem; }
.gs-grid { display: block; columns: 3 300px; column-gap: 1.2rem; }
.gs-grid__item { break-inside: avoid; margin-bottom: 1.6rem; }
.gs-cat__lead { max-width: var(--text); margin: 2.2rem auto 2rem; }
.gs-cat__lead .com-content-article__body > :first-child { margin-top: 0; }
.gs-grid__item img { aspect-ratio: var(--ar, auto); object-fit: initial; border-radius: 2px; transition: opacity .2s; }
.gs-grid__item a:hover img { opacity: .85; }
.gs-grid__name { font: 700 1.25rem/1.2 var(--f-hand); color: var(--muted); padding-top: .85rem; }
.gs-grid__badge { font: 700 1.15rem/1 var(--f-hand); background: none; color: var(--accent); padding: 0; }
.view-categories .gs-grid__item img { aspect-ratio: 4 / 3; object-fit: cover; }
.view-categories .gs-grid__name { font: 400 1.5rem/1.2 var(--f-serif); color: var(--ink); }

/* Pagination */
.pagination, ul.pagination { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 2rem 0; }
.pagination .page-link, .pagination a, .pagination span { display: inline-block; min-width: 2.2rem; text-align: center; padding: .4rem .6rem;
  border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.pagination .active .page-link, .pagination .active span { background: var(--ink); color: var(--paper); }
.pagination .disabled { opacity: .4; }
/* paging arrows: the icon font is not on this site, so give them words (to be swapped for Paul's drawn ones if he draws them) */
/* Previous / Next in Paul's own hand (images/handpaging, tools/make_handpaging.py): a mask over currentColor, so hover and dark mode colour it like the numbers */
.pagination .icon-angle-left::before, .pagination .icon-angle-right::before { content: ""; display: inline-block; vertical-align: middle; font-style: normal;
  background: currentColor; -webkit-mask: var(--gs-pg) no-repeat center / contain; mask: var(--gs-pg) no-repeat center / contain; }
.pagination .icon-angle-left::before { --gs-pg: url(../images/handpaging/previous.webp); width: 5.2em; height: 1.5em; }
.pagination .icon-angle-right::before { --gs-pg: url(../images/handpaging/next.webp); width: 3em; height: 1.45em; }
.pagination .icon-angle-double-left::before { content: "\00AB"; font-style: normal; }
.pagination .icon-angle-double-right::before { content: "\00BB"; font-style: normal; }
.pagination .page-link { min-height: 2.4rem; }
.pagination .active .page-link:has(.gs-hn-row) { background: none; color: inherit; box-shadow: inset 0 -3px 0 var(--accent); }
.pagination .page-link .gs-hn { height: 1.6em; }
.pagination .active span.gs-hn-row, .pagination .active span.gs-vh { background: none; color: inherit; }   /* the dark fill of the current page belongs to the link, not to the drawn digits inside it */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Thanks / error */
.gs-thanks, .err { max-width: var(--text); padding: 6vh 0; }
.gs-thanks p, .err p { font: 400 1.2rem/1.6 var(--f-serif); }

/* Blog list */
.com-content-category-blog h1, .com-content-category-blog .page-header h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.category-desc { font: 400 1.2rem/1.6 var(--f-serif); max-width: var(--text); margin-bottom: 2.5rem; }
.blog-items { display: grid; gap: 3rem; }
.blog-item { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2rem; align-items: start; max-width: 64rem; }
.blog-item .item-image { margin: 0; float: none; }
.blog-item .item-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.blog-item h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .3rem; }
.blog-item h2 a { text-decoration: none; }
.blog-item .item-content > p:not(.readmore) { font: 400 1.1rem/1.6 var(--f-serif); }
.blog-item .gs-inline, .blog-item .gs-gallery, .blog-item .gs-video { display: none; }
.readmore a, .readmore .btn { background: none; color: var(--accent); padding: 0; font: 700 1.35rem/1 var(--f-hand); }
.readmore a:hover { background: none; text-decoration: underline; }
@media (max-width: 760px) { .blog-item { grid-template-columns: 1fr; gap: 1rem; } }

/* Article */
.article-info { margin: 0 0 1.5rem; font-size: .9rem; color: var(--muted); }
.article-info dt, .article-info .visually-hidden { display: none; }
.article-info dd { margin: 0; }
.article-info [class^="icon-"] { display: none; }
.com-content-article { max-width: var(--text); margin: 0 auto; }
.com-content-article .page-header h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.com-content-article__body p, .com-content-article__body li { font: 400 1.12rem/1.7 var(--f-serif); }
.com-content-article__body h2, .com-content-article__body h3 { margin-top: 2.2rem; }
/* QUOTES (30 Oct 2026): every quote on the site wears Paul's hand-drawn quotation marks (pauls images/speech marks.png, cut by tools/make_handquotes.py).
   An opening pair hangs at the top left, a closing pair at the bottom right; the four drawings take turns down the page. Typed quote characters at the
   very start and end of a quote are removed by template.js so the marks are not doubled. */
#main blockquote, .gs-quote { position: relative; margin: 2.2rem 0; padding: 1.25rem 3.6rem 2.9rem 3.9rem; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#main blockquote::before, #main blockquote::after, .gs-quote::before, .gs-quote::after { content: ""; position: absolute; width: 2.6rem; height: 2.6rem; background: var(--accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
#main blockquote::before, .gs-quote::before { left: .85rem; top: .8rem; -webkit-mask-image: var(--qo); mask-image: var(--qo); -webkit-mask-position: left top; mask-position: left top; }
#main blockquote::after, .gs-quote::after { right: .85rem; bottom: .8rem; -webkit-mask-image: var(--qc); mask-image: var(--qc); -webkit-mask-position: right bottom; mask-position: right bottom; }
#main blockquote, .gs-quote { --qo: url(../images/handquotes/open-1.webp); --qc: url(../images/handquotes/close-1.webp); }
#main blockquote:nth-of-type(4n+2), .gs-quote:nth-of-type(4n+2) { --qo: url(../images/handquotes/open-2.webp); --qc: url(../images/handquotes/close-2.webp); }
#main blockquote:nth-of-type(4n+3), .gs-quote:nth-of-type(4n+3) { --qo: url(../images/handquotes/open-3.webp); --qc: url(../images/handquotes/close-3.webp); }
#main blockquote:nth-of-type(4n+4), .gs-quote:nth-of-type(4n+4) { --qo: url(../images/handquotes/open-4.webp); --qc: url(../images/handquotes/close-4.webp); }
#main blockquote p:last-child, .gs-quote p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { #main blockquote, .gs-quote { padding: 1rem 2.2rem 2.4rem 2.8rem; } #main blockquote::before, #main blockquote::after, .gs-quote::before, .gs-quote::after { width: 2rem; height: 2rem; } }
.com-content-article__body blockquote p, .gs-cat__body blockquote p, .gs-quote p { font: 700 1.6rem/1.3 var(--f-hand); color: var(--muted); }
.gs-quote cite, #main blockquote cite { display: block; margin-top: .5rem; font: 600 .95rem/1.3 var(--f-ui); font-style: normal; color: var(--muted); }

/* Pictures inside posts: wider than the words, from the photo library */
.gs-inline { margin: 2.2rem -6vw; }
.gs-inline img { display: block; width: 100%; height: auto; border-radius: 2px; }
.gs-inline figcaption { font: 700 1.25rem/1.25 var(--f-hand); color: var(--muted); margin-top: .5rem; }
.gs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .9rem; margin: 2.2rem -6vw; }
.gs-gallery .gs-inline { margin: 0; }
.gs-gallery .gs-inline img { aspect-ratio: 3 / 2; object-fit: cover; }
.gs-gallery figcaption { font-size: 1.05rem; }
.gs-video { position: relative; aspect-ratio: 16 / 9; margin: 2rem 0; }
.gs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) { .gs-inline, .gs-gallery { margin-left: 0; margin-right: 0; } }

/* Previous / next post */
.pagenavigation .pagination { justify-content: space-between; }
.pagenavigation a { border: 0; font: 700 1.3rem/1.2 var(--f-hand); }

/* Footer */
.ft { border-top: 1px solid var(--line); padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; text-align: center; }
.ft__line { font: 400 1.55rem/1.3 var(--f-title); letter-spacing: .05em; color: var(--muted); margin-bottom: .6rem; }
.ft__small { font-size: .8rem; color: var(--muted); margin: 0; }
.ft__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-bottom: 1rem; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: .4rem 1.2rem; flex-wrap: wrap; font-size: .92rem; }
.ft ul a { text-decoration: none; }
.ft ul a:hover { text-decoration: underline; }

/* Photo page: picture left, text and buying in ONE column on the right (the layout grid lives in com_gsimages site.css) */
@media (min-width: 900px) {
  .gs-photo__text { display: block; }
  .gs-photo__text > .gs-buy, .gs-photo__text > .gs-photo__book-wrap { position: static; }
  .gs-photo__figure { margin: 0; }
}

/* No sideways page scroll on phones: swing-in pictures and the sideways gallery strip start off to one side. */
html { overflow-x: clip; }

/* PAGES IMPORT: buttons and small print from the Squarespace pages */
.gs-button { margin: 1.2rem 0; }
.gs-button a { display: inline-block; padding: .6rem 1.2rem; border: 2px solid currentColor; text-decoration: none; font-weight: 600; }
.gs-button a:hover { background: var(--ink); color: var(--hd-bg, #fff); border-color: var(--ink); }
.gs-fine { font-size: .85em; opacity: .85; }

/* MENU AND PACKAGES (2026-10-28): seven top items with Contact as an outlined button, a Menu button on phones, footer social links, the Packages cards,
   and the hero picture (hidden unless switched on with ?hero=1). */
.hd__toggle { display: none; }
/* Contact is a plain link like the others (the outlined box was taken off, 29 Oct) */
.ft__social { margin: 0 0 1rem; }
.ft__social { gap: .4rem 1.1rem; }
.ft__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink, inherit); transition: color .15s, border-color .15s, transform .15s; }
.ft__social a:hover, .ft__social a:focus-visible { color: var(--accent); border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.ft__social svg { width: 1.35rem; height: 1.35rem; display: block; }
@media (max-width: 760px) {
  .hd__nav ul { flex-wrap: wrap; justify-content: flex-start; }
  .hd__toggle:not([hidden]) { display: inline-block; margin-left: auto; font: 600 1rem/1 var(--f-ui); padding: .55rem 1rem; border: 2px solid currentColor; border-radius: 2px; background: transparent; color: inherit; cursor: pointer; }
  .hd__toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .js-menu .hd__nav { display: none; }
  .js-menu.menu-open .hd__nav { display: block; }
  .js-menu .hd__nav ul { flex-direction: column; gap: .1rem; padding: .4rem 0 .6rem; }
  .js-menu .hd__nav a { display: block; font-size: 1.05rem; padding: .7rem .4rem; }
  .js-menu .hd__nav > ul > li:last-child > a { display: inline-block; margin: .4rem 0 0; padding: .55rem 1.2rem; }
}
.gs-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; max-width: 64rem; }
.gs-pkg { border: 1px solid var(--line, currentColor); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--card, transparent); }
.gs-pkg p { margin: 0; }
.gs-pkg__pic img { display: block; width: 8.5rem; max-width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; }
.gs-inline.gs-pkgpic { width: min(20rem, 80%); margin: 1.5rem 0; }
.gs-pkg__name { font: var(--head-weight, 400) 1.3rem/1.2 var(--f-serif); }
.gs-pkg__price { font: 700 1.6rem/1.1 var(--f-ui); }
.gs-pkg .gs-pkg__time { font: 400 .92rem/1.4 var(--f-ui); opacity: .85; }
.gs-pkg .gs-pkg__for { font: 400 .98rem/1.45 var(--f-ui); flex: 1; }
.gs-pkg__go a { display: inline-block; padding: .5rem 1.1rem; border: 2px solid currentColor; text-decoration: none; font-weight: 600; }
.gs-pkg__go a:hover { background: var(--ink); color: var(--hd-bg, #fff); border-color: var(--ink); }
.main a[id] { scroll-margin-top: 6rem; }
.gs-hero { margin: 0 0 1.5rem; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.gs-hero-off .gs-hero { display: none; }
body { overflow-x: clip; }
.gs-hero-page .main { padding-top: 0; }
.gs-hero-page .gs-cat { padding-top: 0; margin-top: 0; }
.gs-hero-page .mod-breadcrumbs__wrapper { display: none; }
.gs-hero__pic { position: relative; }
.gs-hero__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,var(--hero-scrim, .62)) 0%, rgba(0,0,0,calc(var(--hero-scrim, .62) * .4)) 38%, rgba(0,0,0,0) 65%); }
.gs-hero__pic .page-header, .gs-hero__pic .gs-cat__head, .gs-hero__pic > .gs-cat__title { position: absolute; z-index: 2; left: clamp(1rem, 3vw, 2.5rem); right: clamp(1rem, 3vw, 2.5rem); bottom: var(--hero-title-bottom, clamp(1rem, 4vw, 2.5rem)); transform: var(--hero-title-y, none); text-align: var(--hero-title-align, left); margin: 0; padding: 0; border: 0; }
.gs-hero__pic .page-header h1, .gs-hero__pic .gs-cat__title { margin: 0; color: var(--hero-title-colour, #fff); font-family: var(--hero-title-font, inherit); text-shadow: 0 2px 18px rgba(0,0,0,.55); font-size: var(--hero-title-size, clamp(2rem, 5.5vw, 4.4rem)); line-height: var(--hero-title-lh, 1.05); font-weight: var(--hero-title-weight, inherit); text-transform: var(--hero-title-case, none); letter-spacing: var(--hero-title-spacing, normal); }
.gs-hero img { width: 100%; height: auto; max-height: 82vh; object-fit: cover; object-position: 70% 55%; display: block; }
.gs-hero figcaption { font-size: .9rem; opacity: .85; margin: .5rem clamp(1rem, 3vw, 2.5rem) 0; }
/* per-article hero options (the Hero tab of the article editor sets data-hero-v / data-hero-h and a few variables on the figure) */
.gs-hero > .gs-hero__sub { display: none; }
.gs-hero[data-hero-v="top"] .page-header, .gs-hero[data-hero-v="top"] .gs-cat__title { top: clamp(1rem, 4vw, 2.5rem); bottom: auto; transform: none; }
.gs-hero[data-hero-v="middle"] .page-header, .gs-hero[data-hero-v="middle"] .gs-cat__title { top: 50%; bottom: auto; transform: translateY(-50%); }
.gs-hero[data-hero-v="bottom"] .page-header, .gs-hero[data-hero-v="bottom"] .gs-cat__title { bottom: clamp(1rem, 4vw, 2.5rem); top: auto; transform: none; }
.gs-hero[data-hero-h="left"] .page-header, .gs-hero[data-hero-h="left"] .gs-cat__title { text-align: left; }
.gs-hero[data-hero-h="centre"] .page-header, .gs-hero[data-hero-h="centre"] .gs-cat__title { text-align: center; }
.gs-hero[data-hero-h="right"] .page-header, .gs-hero[data-hero-h="right"] .gs-cat__title { text-align: right; }
.gs-hero[data-hero-v="top"] .gs-hero__pic::after { background: linear-gradient(to bottom, rgba(0,0,0,var(--hero-scrim, .62)) 0%, rgba(0,0,0,calc(var(--hero-scrim, .62) * .4)) 38%, rgba(0,0,0,0) 65%); }
.gs-hero[data-hero-v="middle"] .gs-hero__pic::after { background: rgba(0,0,0,calc(var(--hero-scrim, .62) * .55)); }
.gs-hero__pic .gs-hero__sub { display: block; margin-top: .45em; font: 400 calc(var(--hero-title-size, 3rem) * .3)/1.3 var(--f-serif, serif); letter-spacing: normal; text-transform: none; color: var(--hero-title-colour, #fff); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.gs-related-links { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.gs-related-links a { display: inline-block; padding: .45rem 1rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-weight: 500; }
.gs-related-links a:hover, .gs-related-links a:focus-visible { background: var(--ink); color: var(--hd-bg, #fff); border-color: var(--ink); }

/* SIGNATURE LOGO TRIAL (Paul's handwriting). Off unless switched on with ?logo=sig (remembered in this browser; ?logo=0 switches it off).
   The signature is a transparent mask over currentColor, so it takes the header text colour in any theme. The real text stays in the page
   (font-size 0 hides it visually only) and the link keeps its aria-label. 180 px wide: 1x file 180, 2x file 360, 3x file 500 (the source). */
.gs-sig .hd__name { display: block; width: 180px; height: 60px; font-size: 0; letter-spacing: 0; text-shadow: none; background-color: currentColor;
  -webkit-mask: url(../images/signature-180.png) no-repeat left center / contain; mask: url(../images/signature-180.png) no-repeat left center / contain; }
@media (min-resolution: 1.5dppx) { .gs-sig .hd__name { -webkit-mask-image: url(../images/signature-360.png); mask-image: url(../images/signature-360.png); } }
@media (min-resolution: 2.5dppx) { .gs-sig .hd__name { -webkit-mask-image: url(../images/signature-500.png); mask-image: url(../images/signature-500.png); } }
@media (max-width: 760px) { .gs-sig .hd__name { width: 132px; height: 44px; } }

/* NAV SKETCH TRIAL (Paul's pen sketch). Off unless switched on with ?sketch=1 (remembered in this browser; ?sketch=0 switches it off).
   The drawing sits behind the link it is on, faded, with its camera lens just UNDER the words, hanging a little over the page below (it is inside the header's stacking layer, so it is above the page but below the rucksack, its drawer and any menu); between visits it rests, fainter, behind the site name. template.js animates it. */
.hd__nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hd__sketch { --sk-h: 126px; position: absolute; left: 0; top: 0; height: var(--sk-h); width: calc(var(--sk-h) * 1.1125); pointer-events: none; z-index: 0;
  background: url(../images/nav-sketch-194.png) no-repeat center / contain; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
@media (min-resolution: 1.5dppx) { .hd__sketch { background-image: url(../images/nav-sketch-194.png); } }
body[data-look="peat"] .hd__sketch { filter: invert(1); }
.gs-sketch .hd { min-height: 72px; }
.gs-sketch .hd__follow { display: none; }
/* a soft halo in the header colour keeps the words clear of the ink lines */
.gs-sketch .hd__nav a, .gs-sketch .hd__name { text-shadow: 0 0 4px var(--hd-bg), 0 0 7px var(--hd-bg), 0 0 2px var(--hd-bg); }
/* Prints is the green link: darker green while the ink is behind it (contrast measured: 7.5 on plain, 3.8 on the darkest ink pixel, 7+ next to the letters thanks to the halo) */
.gs-sketch .hd__nav li:first-child a { color: #2f4d22; }
body[data-look="peat"].gs-sketch .hd__nav li:first-child a, .gs-sketch body[data-look="peat"] .hd__nav li:first-child a { color: var(--accent); }
@media (max-width: 760px) { .hd__sketch { display: none; } .gs-sketch .hd { min-height: 0; } }

/* FAQ accordion, used on the home page and on every page with an FAQ section (template.js animates it; without JavaScript the browser's own open/close still works, and every answer is always in the page) */
.gs-acc-list{max-width:52rem}
.gs-acc{border-bottom:1px solid var(--line,rgba(0,0,0,.2))}
.gs-acc:first-child{border-top:1px solid var(--line,rgba(0,0,0,.2))}
.gs-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem .25rem}
.gs-acc>summary::-webkit-details-marker{display:none}
.gs-acc-list .gs-acc>summary h3{margin:0;font:600 1.05rem/1.3 var(--f-ui);letter-spacing:0;transition:color .2s}
.gs-acc>summary:hover h3{color:var(--accent)}
.gs-acc>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gs-acc>summary::after{content:"";flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:linear-gradient(#fff,#fff) center/.85rem 2px no-repeat,linear-gradient(#fff,#fff) center/2px .85rem no-repeat,var(--accent,#4a6e3a);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.gs-acc[open]>summary::after{transform:rotate(135deg)}
.gs-acc__a{overflow:hidden}
.gs-acc__a p{margin:0 0 1.15rem;max-width:44rem;line-height:1.55}

/* Lists in page text (30 Oct 2026): no dots, the leaf ornament from the book's map titles, as on the home page */
.com-content-article__body ul:not([class]), .gs-cat__body ul:not([class]), .gs-cat__lead ul:not([class]) { list-style: none; padding-left: 0; }
.com-content-article__body ul:not([class]) > li, .gs-cat__body ul:not([class]) > li, .gs-cat__lead ul:not([class]) > li { position: relative; padding-left: 2.2rem; margin-bottom: .45rem; }
.com-content-article__body ul:not([class]) > li::before, .gs-cat__body ul:not([class]) > li::before, .gs-cat__lead ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 1.6rem; height: .66rem; background: var(--accent); -webkit-mask: url(../images/ornaments/leaf.webp) center / contain no-repeat; mask: url(../images/ornaments/leaf.webp) center / contain no-repeat; }

/* Price list in page text (Portraits): a menu-style list, name and price on one line, a sentence under each */
.gs-prices { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; border-top: 1px solid var(--line); }
.gs-prices li { border-bottom: 1px solid var(--line); }
.gs-prices a { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1.4rem; padding: 1rem .2rem; text-decoration: none; color: inherit; }
.gs-prices a:hover .n { color: var(--accent); }
.gs-prices .n { font: 400 1.25rem/1.2 var(--f-title); letter-spacing: .04em; }
.gs-prices .p { font: 700 1.2rem/1.2 var(--f-ui); color: var(--accent); text-align: right; white-space: nowrap; }
.gs-prices .d { grid-column: 1 / -1; color: var(--muted); line-height: 1.45; }
/* the buttons that came across from the old site's page text look like the site's buttons */
p.gs-button a { display: inline-block; margin: 0 .5rem .5rem 0; font: 400 1.12rem/1.15 var(--f-title); letter-spacing: .05em; padding: .8rem 1.5rem .72rem; border-radius: 3px; background: var(--btn); color: #fff; text-decoration: none; transition: background .2s, transform .2s; }
p.gs-button a:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
@media (max-width: 560px) { .gs-prices a { grid-template-columns: 1fr; } .gs-prices .p { text-align: left; } }

/* A page heading with a subtitle (30 Oct 2026): a short H1 plus the rest of the keywords as an H2, like the home page. Over a hero picture the block is
   positioned like a plain page title; without a hero it is just two lines at the top of the page. */
.gs-cat__head { margin: 0 0 1.4rem; }
.gs-cat__head .gs-cat__title { margin: 0; }
.gs-cat__sub { margin: .3rem 0 0; font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 400; letter-spacing: .04em; line-height: 1.2; color: var(--muted); }
.gs-hero__pic .gs-cat__head .gs-cat__title { position: static; }
.gs-hero__pic .gs-cat__head .gs-cat__title, .gs-hero__pic .gs-cat__sub { color: var(--hero-title-colour, #fff); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.gs-hero__pic .gs-cat__sub { font-size: clamp(1.05rem, 2.5vw, 2rem); margin-top: .5rem; }
.gs-hero__pic h2.gs-hero__sub { font-family: var(--f-title); font-weight: 400; letter-spacing: .04em; font-size: clamp(1.05rem, 2.5vw, 2rem); line-height: 1.2; margin: .5rem 0 0; }
.gs-prices--static li { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1.4rem; padding: 1rem .2rem; }
.gs-prices--static .p { font-size: 1.05rem; }
.gs-prints-about { max-width: 52rem; margin-top: 3rem; }
@media (max-width: 560px) { .gs-prices--static li { grid-template-columns: 1fr; } }

/* Banded page layout inside article text (30 Oct 2026): picture beside text, quote grid, list columns */
.gs-band { display: grid; gap: 1.6rem; align-items: start; margin: 2.2rem 0; }
.gs-band .gs-inline { margin: 0; }
.gs-band .gs-inline img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.gs-band__text > :first-child { margin-top: 0; }
@media (min-width: 800px) {
  .gs-band { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.4rem; }
  .gs-band--flip .gs-band__pic { order: 2; }
}
.gs-quotes { columns: 2 20rem; column-gap: 1.4rem; margin: 1.4rem 0; }
.gs-quotes blockquote { break-inside: avoid; margin: 0 0 1.2rem; }
.gs-cols { columns: 2 18rem; column-gap: 2.4rem; margin: 1.6rem 0; }
.gs-cols > * { break-inside: avoid; }

/* Package sections (30 Oct 2026): hand-lettered title picture beside the details, example shots as a tidy thumbnail grid */
.gs-pkgsec { margin: 3rem 0; }
.gs-pkgsec .gs-band .gs-inline.gs-pkgpic { width: 100%; margin: 0; }
.gs-pkgsec .gs-band .gs-inline.gs-pkgpic img { aspect-ratio: auto; object-fit: initial; }
.gs-price-line { font-family: var(--f-title); font-size: 1.9rem; line-height: 1.1; margin: .8rem 0 .2rem; color: var(--accent); }
.gs-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; margin: 1.6rem 0 0; }
.gs-thumbs .gs-inline { margin: 0; }
.gs-thumbs .gs-inline img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* Site search: magnifier in the header, search box in the footer (30 Oct 2026) */
.hd__search { position: absolute; top: .55rem; right: 1rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--ink, inherit); text-decoration: none; }
.hd__search svg { width: 1.35rem; height: 1.35rem; }
.hd__search:hover, .hd__search:focus-visible { color: var(--accent); }
.ft__search { display: flex; gap: .5rem; justify-content: center; margin: 0 auto 1.1rem; max-width: 32rem; }
.ft__search input { flex: 1; min-width: 0; font: inherit; padding: .6rem .8rem; border: 1px solid var(--line, currentColor); border-radius: 2px; background: color-mix(in srgb, var(--card, #fff) 80%, transparent); color: inherit; }
.ft__search button { font: 600 1rem/1 var(--f-title); letter-spacing: .02em; padding: .6rem 1.1rem; border: 2px solid var(--btn); background: var(--btn); color: #fff; border-radius: 2px; cursor: pointer; }
.ft__search input:focus-visible, .ft__search button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) { .hd__search { right: 5.6rem; } }

@media (min-width: 761px) { .hd { padding-right: 3.8rem; } }

/* PAGE TITLES (30 Oct 2026): smaller, on one line where they fit (template.js fits them), a little see-through; subtitles grey and subdued. */
.gs-cat__title, .gs-blog .gs-cat__title, .gs-blogsearch h1, .com-content-article .page-header h1, .com-content-category-blog h1,
.gs-hero__pic .page-header h1, .gs-hero__pic .gs-cat__title, .gs-hero__pic .gs-cat__head .gs-cat__title, .gs-home-hero__h1 {
  font-size: clamp(1.5rem, 3.6vw, 2.9rem) !important; line-height: 1.08 !important; letter-spacing: .02em; }
.gs-fit { white-space: nowrap !important; }
.gs-hero__pic .page-header h1, .gs-hero__pic .gs-cat__title, .gs-hero__pic .gs-cat__head .gs-cat__title, .gs-home-hero__h1 { color: rgba(255, 255, 255, .8) !important; }
.gs-cat__title, .gs-blogsearch h1, .com-content-article .page-header h1, .com-content-category-blog h1, .gs-blog .gs-cat__title { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.gs-cat__sub, .gs-hero__sub, .gs-home-hero__sub { color: var(--muted) !important; font-weight: 400; }
.gs-hero__pic .gs-cat__sub, .gs-hero__pic .gs-hero__sub, .gs-hero__pic h2.gs-hero__sub, .gs-home-hero__sub { color: rgba(222, 222, 222, .74) !important; font-size: clamp(1rem, 1.7vw, 1.4rem) !important; }

/* SAGE BUTTONS (30 Oct 2026): a quieter, greyer green for buttons (white text still reads at 4.7:1) */
:root { --btn: #66795d; }
body[data-look="peat"] { --btn: #7d9272; }

/* PAGING in the title font (30 Oct 2026): real numbers and words instead of the drawn ones */
.pagination { font-family: var(--f-title); letter-spacing: .04em; font-size: 1.15rem; }
.pagination .gs-hn-row { display: none !important; }
.pagination .gs-vh { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip-path: none !important; }
.pagination .icon-angle-left::before, .pagination .icon-angle-right::before { content: "Previous"; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; vertical-align: baseline; }
.pagination .icon-angle-right::before { content: "Next"; }
.pagination .active .page-link, .pagination .active .page-link:has(.gs-hn-row) { background: var(--btn) !important; color: #fff !important; box-shadow: none !important; }
.pagination .page-link:hover { color: var(--accent); }
.pagination .active .page-link:hover { color: #fff; }

/* The big page-title words behind the page (30 Oct 2026): a solid, faded fill instead of an outline */
.nm { color: color-mix(in srgb, var(--ink, #1d2124) 9%, transparent); -webkit-text-stroke: 0; }
body[data-look="peat"] .nm { color: color-mix(in srgb, #fff 8%, transparent); }
@media (max-width: 760px) { .nm { -webkit-text-stroke-width: 0; } }

/* A landscape picture in a band is a landscape: shown whole and wide, with the words above or below it, never cropped to a portrait (30 Oct 2026) */
.gs-band.gs-band--wide { grid-template-columns: 1fr; gap: 1.4rem; }
.gs-band--wide .gs-band__pic .gs-inline img { aspect-ratio: auto; object-fit: initial; width: 100%; height: auto; }
.gs-band--wide.gs-band--flip .gs-band__pic { order: 2; }
.gs-band--wide .gs-band__text { max-width: 46rem; }

/* THE DARTMOOR COLOURS (30 Oct 2026): Paul's colour chart (old Dartmoor paint card), measured from his scans. Use them as bases, lightened or darkened with color-mix. */
:root {
  --dm-lichen: #909191;   /* Lichen Grey */
  --dm-upland: #9f9279;   /* Upland Grey (olive) */
  --dm-old: #9f8d81;      /* Old Granite */
  --dm-trow: #aa888d;     /* Trowlsworthy Granite (mauve) */
  --dm-mist: #9d97a2;     /* Mist Grey (lilac) */
  --dm-slate: #7d7c7c;    /* Tavistock Slate Grey */
  --dm-buff: #a78378;     /* Moorland Buff (terracotta) */
  --dm-granite: #a39299;  /* Granite (pinkish) */
}

/* TILES in article text (30 Oct 2026): picture cards in the Dartmoor colours, like the home page's (Contact page). A card with a picture has a full-colour strip on top. */
.gs-tiles { list-style: none; margin: 1.6rem 0 1.8rem; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .gs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gs-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: -4vw; margin-right: -4vw; } }
.gs-tiles li { --tone: var(--dm-lichen); }
.gs-tiles li:nth-child(1) { --tone: var(--dm-lichen); }
.gs-tiles li:nth-child(2) { --tone: var(--dm-upland); }
.gs-tiles li:nth-child(3) { --tone: var(--dm-trow); }
.gs-tiles li:nth-child(4) { --tone: var(--dm-buff); }
.gs-tiles a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; overflow: hidden; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--tone) 80%, transparent);
  background: color-mix(in srgb, var(--tone) 62%, var(--card, #f3f4f1)); box-shadow: inset 0 5px 0 var(--tone); transition: transform .25s, box-shadow .25s, background .25s; }
.gs-tiles a:hover, .gs-tiles a:focus-visible { transform: translateY(-3px); background: color-mix(in srgb, var(--tone) 78%, var(--card, #f3f4f1)); box-shadow: inset 0 5px 0 var(--tone), 0 8px 24px rgba(0, 0, 0, .18); color: inherit; }
.gs-tiles img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 5px; }
.gs-tiles h3 { margin: .9rem 1rem .35rem; font-size: 1.15rem; color: color-mix(in srgb, var(--tone) 22%, var(--ink, #1d2124)); }
.gs-tiles p { margin: 0 1rem .8rem; font-size: .98rem; line-height: 1.45; color: color-mix(in srgb, var(--tone) 12%, var(--ink, #1d2124)); }
.gs-tiles .gs-tiles__go { margin: auto 1rem 1.1rem; font: 400 .85rem/1.25 var(--f-title); letter-spacing: .04em; color: color-mix(in srgb, var(--tone) 30%, var(--ink, #1d2124)); text-decoration: underline; text-underline-offset: 4px; }

/* Footer: more room between the social icons and "Weaving Light, Making Magic" (30 Oct 2026) */
footer.ft .ft__social { margin: 0 0 2.6rem; }
.ft__line { margin-top: 0; }