/* _golfl.css - HAND-WRITTEN. The golf listing on trial, /try/golf/{slug},
   23 September 2026, and its tuner. Loaded on that path alone
   (config/design.php), so none of it can reach /listings/{slug}.

   Everything is prefixed gl- except where it dresses the listing's own
   element for the trial (.p26 .hero video). Tokens are the site's own; the
   type is the listing's: Larken for names, Lora for the reading, Jost for the
   small words. Square edges, no shadows. The plan is docs/GOLF-LISTINGS.md. */

/* ---- the opening, on film ----
   The same box as the photograph it stands in for: _place.css draws
   `.p26 .hero img` absolutely, full-bleed, cover. */
.p26 .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- the holes ----
   An introduction like every other on the listing: the label on the margin,
   the words in the column. The holes stand in the column under it. */
.p26 .gl-list{list-style:none;margin:1.3em 0 0;padding:0;display:grid;gap:clamp(34px,4.5vh,52px)}
.p26 .gl-hole{margin:0}
.p26 .gl-pic{margin:0 0 16px;aspect-ratio:3/2;overflow:hidden;background:var(--stone)}
.p26 .gl-pic img,.p26 .gl-pic video{display:block;width:100%;height:100%;object-fit:cover}
.p26 .gl-name{margin:0;font-family:var(--face);font-weight:400;font-size:24px;line-height:1.25;color:var(--ink)}
.p26 .gl-n{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-55);margin-right:10px;vertical-align:.3em}
.p26 .gl-meta{margin:4px 0 0;font-family:var(--sans);font-size:14px;color:var(--ink-55)}
.p26 .gl-words{margin:10px 0 0;font-family:var(--serif);font-size:17.5px;line-height:1.72;color:var(--ink-75)}

/* A row: the same holes across the page's own column, under the introduction. */
.p26 .gl-rowband{padding:0 0 clamp(42px,6.5vh,86px);background:var(--paper)}
.p26 .gl-list.gl-row{margin:0;grid-template-columns:repeat(var(--gl-n,4),minmax(0,1fr));gap:clamp(20px,2vw,32px)}
@media (max-width: 1180px){.p26 .gl-list.gl-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 600px){.p26 .gl-list.gl-row{grid-template-columns:1fr}}
.p26 .gl-row .gl-name{font-size:21px}
.p26 .gl-row .gl-words{font-size:16px;line-height:1.65}

/* ---- the picture between the words and the holes ----
   Jack, 24 Sep: the page left a big space here. Wide is the page's column,
   the labels' edge (70 at 1440) to the far margin, like the map; reading is
   the words' own column (309). One shape, 16:7, so a film and a photograph
   stand the same. The introduction after it keeps its own air. */
.p26 .gl-between{background:var(--paper);padding:clamp(40px,6vh,80px) 0 0}
.p26 .gl-between-pic{margin:0;aspect-ratio:16/7;overflow:hidden;background:var(--stone)}
.p26 .gl-between-pic img,.p26 .gl-between-pic video{display:block;width:100%;height:100%;object-fit:cover}
.p26 .gl-between[data-size="reading"] .gl-between-pic{width:46ch;max-width:100%;margin-left:auto;margin-right:auto;
  aspect-ratio:3/2;font-family:var(--face);font-size:28px}
.p26 .gl-between + .intro{padding-top:clamp(56px,8vh,110px)}
@media (max-width: 860px){.p26 .gl-between-pic{aspect-ratio:3/2}}

/* ---- the pin flag (Jack, 24 Sep) ----
   After the yellow flag he sent: black hand-drawn line, crayon yellow, the
   hole's number on the cloth. The cloth waves while the pointer is on the
   hole; it holds still for anyone who asks for less motion. */
.p26 .gl-flag{display:block;width:56px;height:auto;overflow:visible}
.p26 .gl-flag-pole,.p26 .gl-flag-knob{fill:#C08C3D;stroke:var(--ink);stroke-width:3}
.p26 .gl-flag-fill{fill:#C08C3D;stroke:var(--ink);stroke-width:3.4;stroke-linejoin:round}
.p26 .gl-flag-seam{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:7 5;stroke-linecap:round;opacity:.75}
.p26 .gl-flag-n{font-family:var(--face);font-weight:500;font-size:31px;fill:var(--ink)}
.p26 .gl-flag-cloth{transform-box:view-box;transform-origin:26px 42px}
.p26 .gl-hole:hover .gl-flag-cloth{animation:gl-wave .9s ease-in-out infinite alternate}
@keyframes gl-wave{from{transform:skewY(-3deg) scaleX(.97)}to{transform:skewY(3deg) scaleX(1.02)}}
@media (prefers-reduced-motion: reduce){.p26 .gl-hole:hover .gl-flag-cloth{animation:none}}

/* Flag in the corner: planted in the photograph's top corner, the cloth
   standing above it. The list gives up the room the flag stands in. */
.p26 .gl-picwrap{position:relative}
.p26 .gl-flag-corner{position:absolute;left:12px;top:-30px;width:62px;z-index:1}
.p26 .gl-list[data-look="corner"]{padding-top:30px}
.p26 .gl-flag-inline{width:46px;margin:0 0 10px}

/* Flag first: a big flag beside the name. */
.p26 .gl-flaghead{display:flex;align-items:flex-end;gap:14px;margin:0 0 14px}
.p26 .gl-flaghead .gl-flag{width:68px;flex:none}
.p26 .gl-flaghead .gl-name{font-size:24px}
.p26 .gl-flaghead + .gl-pic{margin-top:4px}

/* Tee to flag: a dashed walk from the tee to the flag, as long as the hole
   is against the longest shown. */
.p26 .gl-yard{display:flex;align-items:flex-end;height:70px;margin:2px 0 12px}
.p26 .gl-yard-tee{flex:none;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);margin-bottom:0}
.p26 .gl-yard-line{position:relative;flex:0 0 calc((100% - 60px) * var(--gl-share, .6));border-bottom:2px dashed var(--ink-55);margin:0 2px 4px}
.p26 .gl-yard-n{position:absolute;left:0;bottom:6px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-55);white-space:nowrap}
.p26 .gl-flag-s{width:40px;flex:none;margin-left:-8px}

/* Scorecard: the holes as the columns of a card, hairlines between. */
.p26 .gl-list[data-look="scorecard"]{gap:0;border:1px solid var(--ink-20)}
.p26 .gl-list[data-look="scorecard"] .gl-hole{padding:18px 18px 22px;border-left:1px solid var(--ink-20)}
.p26 .gl-list[data-look="scorecard"] .gl-hole:first-child{border-left:0}
.p26 .gl-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 12px}
.p26 .gl-card-k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-card-top .gl-flag{width:58px}
.p26 .gl-card-nums{display:grid;grid-template-columns:1fr 1fr;margin:12px 0 0;border-top:1px solid var(--ink-20);border-bottom:1px solid var(--ink-20)}
.p26 .gl-card-nums div{padding:8px 0}
.p26 .gl-card-nums div + div{border-left:1px solid var(--ink-20);padding-left:12px}
.p26 .gl-card-nums dt{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-card-nums dd{margin:2px 0 0;font-family:var(--face);font-size:26px;color:var(--ink)}
@media (max-width: 1180px){
  .p26 .gl-list[data-look="scorecard"] .gl-hole{border-left:0;border-top:1px solid var(--ink-20)}
  .p26 .gl-list[data-look="scorecard"] .gl-hole:first-child{border-top:0}
}

/* ---- the card: all eighteen, as a real scorecard (Jack, 24 Sep) ----
   One strip, 1-9, Out, 10-18, In, Total, so nothing can fall out of line.
   Card stock in paper, the club's name on a forest band, hairlines, the
   label column in stone, the names on their side, the tee's colour as a
   swatch, and a blank row to write a score in. The highlights are a pale
   yellow tint, no drawing. On a narrow screen it scrolls inside its box. */
.p26 .gl-cardband{background:var(--paper);padding:0 0 clamp(42px,6.5vh,86px)}
.p26 .gl-scard{border:2px solid var(--forest);background:#FFFDF7}
.p26 .gl-scard-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 18px;
  background:var(--forest);color:var(--paper)}
.p26 .gl-scard-club{font-family:var(--face);font-size:24px;font-weight:400}
.p26 .gl-scard-sub{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-forest)}
.p26 .gl-sc-wrap{overflow-x:auto}
.p26 .gl-sc{width:100%;min-width:1160px;border-collapse:collapse;table-layout:fixed;font-family:var(--sans);font-size:15px;color:var(--ink)}
.p26 .gl-sc th,.p26 .gl-sc td{border:1px solid var(--ink-20);padding:0 2px;height:40px;text-align:center;vertical-align:middle}
.p26 .gl-sc tr > :first-child{border-left:0}
.p26 .gl-sc tr > :last-child{border-right:0}
.p26 .gl-sc tbody tr:last-child > *{border-bottom:0}
.p26 .gl-sc th[scope="row"]{width:196px;text-align:left;padding:4px 12px;line-height:1.3;background:var(--stone);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-sc thead th{height:46px;font-family:var(--face);font-size:20px;font-weight:400;border-top:0;border-bottom:2px solid var(--forest)}
.p26 .gl-sc thead a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.p26 .gl-sc .tot{width:64px;background:var(--stone);font-weight:600}
.p26 .gl-sc .tot.all{width:72px;border-left:2px solid var(--forest)}
.p26 .gl-sc thead .tot{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-sc .hi{background:#AFA065}
.p26 .gl-sc .nm td{height:118px;padding:8px 0}
.p26 .gl-sc-name{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12.5px;line-height:1.2;
  color:var(--ink-75);max-height:104px;white-space:normal;text-align:left}
/* every tee (24 Sep): a firmer line under the last one, before the pars */
.p26 .gl-sc .yd.last > *{border-bottom:2px solid var(--forest)}
.p26 .gl-sc .si td{color:var(--ink-55);font-size:13px}
.p26 .gl-sc .score td,.p26 .gl-sc .score th{height:48px}
.p26 .gl-sc-tee{display:inline-flex;align-items:center;gap:8px}
.p26 .gl-sc-tee i{width:12px;height:12px;border:1px solid var(--ink-55);flex:none}
.p26 .gl-sc-note{margin:14px 0 0;font-family:var(--sans);font-size:13px;color:var(--ink-55)}
.p26 .gl-hole:target{outline:2px solid var(--ink);outline-offset:4px}

/* ---- the highlights, no photographs: five more looks ---- */

/* Forest: the scorecard look on the forest ground, flags still yellow. */
.p26 .gl-list[data-look="forest"]{gap:0;border:1px solid #414042;background:var(--forest)}
.p26 .gl-list[data-look="forest"] .gl-hole{padding:18px 18px 22px;border-left:1px solid #414042}
.p26 .gl-list[data-look="forest"] .gl-hole:first-child{border-left:0}
.p26 .gl-list[data-look="forest"] .gl-name{color:var(--paper)}
.p26 .gl-list[data-look="forest"] .gl-words{color:var(--on-forest)}
.p26 .gl-list[data-look="forest"] .gl-card-k,.p26 .gl-list[data-look="forest"] .gl-card-nums dt{color:var(--on-forest-55)}
.p26 .gl-list[data-look="forest"] .gl-card-nums{border-color:#414042}
.p26 .gl-list[data-look="forest"] .gl-card-nums div + div{border-color:#414042}
.p26 .gl-list[data-look="forest"] .gl-card-nums dd{color:var(--paper)}
.p26 .gl-list[data-look="forest"] .gl-flag-pole,.p26 .gl-list[data-look="forest"] .gl-flag-knob,
.p26 .gl-list[data-look="forest"] .gl-flag-fill{stroke:#2b301d}

/* Tear-off stub: a card with a perforation under the flag and the name. */
.p26 .gl-list[data-look="stub"] .gl-hole{background:#FFFDF7;border:1.5px solid var(--ink)}
.p26 .gl-stub-top{position:relative;display:flex;align-items:flex-end;gap:14px;padding:18px 18px 16px;border-bottom:2px dashed var(--ink-35)}
.p26 .gl-stub-top::before,.p26 .gl-stub-top::after{content:"";position:absolute;bottom:-10px;width:18px;height:18px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink)}
.p26 .gl-stub-top::before{left:-10px}
.p26 .gl-stub-top::after{right:-10px}
.p26 .gl-stub-top .gl-flag{width:62px;flex:none}
.p26 .gl-stub-top .gl-name{margin-top:2px}
.p26 .gl-list[data-look="stub"] .gl-words{margin:0;padding:16px 18px 22px}

/* One a row: a ledger down the page, flag, name and numbers, then the words. */
.p26 .gl-list[data-look="ledger"]{display:grid;gap:0;margin:0;border-top:1px solid var(--ink-20)}
.p26 .gl-list[data-look="ledger"] .gl-hole{display:grid;grid-template-columns:72px 280px 1fr;gap:32px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--ink-20)}
.p26 .gl-list[data-look="ledger"] .gl-flag{width:60px}
.p26 .gl-led-head .gl-name{font-size:26px;margin-top:2px}
.p26 .gl-list[data-look="ledger"] .gl-words{margin:4px 0 0;max-width:60ch}

/* Big number: the hole's number large on a rule, the flag small beside it. */
.p26 .gl-num-top{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--ink);
  padding:0 0 8px;margin:0 0 14px}
.p26 .gl-num{font-family:var(--face);font-weight:400;font-size:min(92px, 28px + (92px - 28px) * 0.6);line-height:.85;color:var(--ink);letter-spacing:-.03em}
.p26 .gl-num-top .gl-flag{width:42px}

@media (max-width: 860px){
  .p26 .gl-list[data-look="ledger"] .gl-hole{grid-template-columns:56px 1fr;gap:16px}
  .p26 .gl-list[data-look="ledger"] .gl-words{grid-column:1 / -1}
  .p26 .gl-list[data-look="forest"] .gl-hole{border-left:0;border-top:1px solid #414042}
  .p26 .gl-list[data-look="forest"] .gl-hole:first-child{border-top:0}
}

/* ---- did you know ---- */
.p26 .gl-dyk{list-style:none;margin:0;padding:0}
.p26 .gl-dyk li{padding:22px 0;border-top:1px solid var(--ink-20)}
.p26 .gl-dyk li:first-child{border-top:0;padding-top:0}
.p26 .gl-t{margin:0;font-family:var(--face);font-weight:300;font-size:24px;line-height:1.4;color:var(--ink)}
.p26 .gl-b{margin:8px 0 0;font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--ink-75)}
.p26 .gl-q summary{cursor:pointer;list-style:none;font-family:var(--face);font-weight:300;font-size:24px;line-height:1.4;color:var(--ink)}
.p26 .gl-q summary::-webkit-details-marker{display:none}
.p26 .gl-q summary::after{content:"Answer";display:block;margin-top:8px;font-family:var(--sans);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);text-decoration:underline;text-underline-offset:4px}
.p26 .gl-q[open] summary::after{content:none}

/* ---- at a glance: the board (Jack, 24 Sep: the facts band "is just a bit
   boring - brain storm all this and come up with something better") ----
   The grey band and Playing it made one board, like the one by a first tee:
   the line and the button to book, the numbers large, then four panels a
   golfer reads before going: booking, the fees, what can be hired, the
   clubhouse. Forest is the same board on the scorecard's own green. */
.p26 .gl-glance{background:var(--paper);padding:clamp(48px,7vh,90px) 0}
.p26 .gl-gl-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;padding:0 0 26px}
.p26 .gl-gl-k{display:block;margin:0 0 12px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-gl-line{margin:0;max-width:34ch;font-family:var(--face);font-weight:300;font-size:min(clamp(24px,2.3vw,32px), 28px + (clamp(24px,2.3vw,32px) - 28px) * 0.6);line-height:1.3;color:var(--ink);text-wrap:pretty}
.p26 .gl-gl-line a{color:inherit}
.p26 .gl-gl-cta{display:flex;flex-wrap:wrap;gap:10px}
.p26 .gl-gl-stats{display:grid;grid-template-columns:repeat(var(--gl-s,4),minmax(0,1fr));margin:0;
  border-top:2px solid var(--forest);border-bottom:1px solid var(--ink-20)}
.p26 .gl-gl-stats > div{padding:18px 0 20px 22px;border-left:1px solid var(--ink-20)}
.p26 .gl-gl-stats > div:first-child{border-left:0;padding-left:0}
.p26 .gl-gl-stats dt{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-gl-stats dd{margin:6px 0 0;font-family:var(--face);font-weight:400;font-size:min(clamp(38px,4.4vw,64px), 28px + (clamp(38px,4.4vw,64px) - 28px) * 0.6);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.p26 .gl-gl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,2.6vw,40px);padding-top:28px}
.p26 .gl-gl-box h3{margin:0 0 12px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--moss)}
.p26 .gl-gl-box p{margin:0 0 10px;font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--ink-75)}
.p26 .gl-gl-box .gl-gl-big{font-family:var(--face);font-size:24px;line-height:1.2;color:var(--ink)}
.p26 .gl-gl-big a{color:inherit;text-decoration:none}
.p26 .gl-gl-list{list-style:none;margin:0;padding:0}
.p26 .gl-gl-list li{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-top:1px dotted var(--ink-35);
  font-family:var(--serif);font-size:15px;line-height:1.4;color:var(--ink-75)}
.p26 .gl-gl-list li:first-child{border-top:0;padding-top:0}
.p26 .gl-gl-list b{margin-left:auto;padding-left:10px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap}
.p26 .gl-glance.dark{background:var(--forest)}
.p26 .gl-glance.dark .gl-gl-k,.p26 .gl-glance.dark .gl-gl-stats dt{color:var(--on-forest-55)}
.p26 .gl-glance.dark .gl-gl-line,.p26 .gl-glance.dark .gl-gl-stats dd,.p26 .gl-glance.dark .gl-gl-box .gl-gl-big,
.p26 .gl-glance.dark .gl-gl-list b{color:var(--on-forest)}
.p26 .gl-glance.dark .gl-gl-box p,.p26 .gl-glance.dark .gl-gl-list li{color:var(--on-forest-55)}
.p26 .gl-glance.dark .gl-gl-box h3{color:#C9D3B8}
.p26 .gl-glance.dark .gl-gl-stats{border-top-color:var(--on-forest);border-bottom-color:rgba(241,237,232,.2)}
.p26 .gl-glance.dark .gl-gl-stats > div{border-left-color:rgba(241,237,232,.2)}
.p26 .gl-glance.dark .gl-gl-list li{border-top-color:rgba(241,237,232,.3)}
@media (max-width: 1180px){.p26 .gl-gl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}}
@media (max-width: 860px){
  .p26 .gl-gl-top{grid-template-columns:1fr}
  .p26 .gl-gl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p26 .gl-gl-stats > div{padding-left:0;border-left:0;border-top:1px solid var(--ink-20)}
  .p26 .gl-gl-stats > div:nth-child(-n+2){border-top:0}
  .p26 .gl-gl-stats > div:nth-child(even){padding-left:18px;border-left:1px solid var(--ink-20)}
  .p26 .gl-glance.dark .gl-gl-stats > div{border-color:rgba(241,237,232,.2)}
}
@media (max-width: 600px){.p26 .gl-gl-grid{grid-template-columns:1fr}}

/* ---- did you know, with our film ----
   Cards: each fact over its own film or photograph, which plays silent and
   loops. A fact with no picture of its own gets a question mark on stone
   rather than a borrowed frame. True or false can be answered. */
.p26 .gl-dykc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--gl-n,4),minmax(0,1fr));gap:clamp(20px,2vw,32px)}
.p26 .gl-dykc li{display:flex;flex-direction:column;border-top:2px solid var(--forest)}
.p26 .gl-dykc-pic{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.p26 .gl-dykc-pic img,.p26 .gl-dykc-pic video{display:block;width:100%;height:100%;object-fit:cover}
.p26 .gl-dykc-q{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--face);font-weight:300;font-size:min(120px, 28px + (120px - 28px) * 0.6);line-height:1;color:var(--ink-20)}
/* three or fewer stand wider, so they are cut lower */
.p26 .gl-dykc:not(:has(> li:nth-child(4))) .gl-dykc-pic{aspect-ratio:4/3}
.p26 .gl-dykc-q.yr{background:var(--forest);color:var(--on-forest);font-weight:400;font-size:min(clamp(56px,5.4vw,84px), 28px + (clamp(56px,5.4vw,84px) - 28px) * 0.6);letter-spacing:-.01em}
.p26 .gl-dykc-tag{position:absolute;left:0;top:0;padding:7px 10px;background:var(--forest);color:var(--on-forest);
  font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.p26 .gl-dykc-t{padding:16px 0 0}
.p26 .gl-dykc .gl-t{font-size:19px;line-height:1.4}
.p26 .gl-dykc .gl-b{font-size:15.5px;line-height:1.62}
.p26 .gl-quiz-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.p26 .gl-quiz-k{width:100%;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-quiz-btns button{min-height:40px;padding:0 16px;border:1px solid var(--ink-35);background:transparent;color:var(--ink);
  font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.p26 .gl-quiz-btns button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.p26 .gl-verdict{font-family:var(--sans);font-weight:600;color:var(--moss)}
.p26 .gl-verdict.no{color:var(--ink)}
@media (max-width: 1180px){.p26 .gl-dykc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width: 860px){.p26 .gl-dykc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 520px){.p26 .gl-dykc{grid-template-columns:1fr}.p26 .gl-dykc-pic{aspect-ratio:3/2}}

/* Stories: one at a time, the picture large, moving on every nine seconds
   until the reader touches it. */
.p26 .gl-stories{background:var(--paper);padding:clamp(48px,7vh,90px) 0}
.p26 .gl-st{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:stretch}
.p26 .gl-st-pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.p26 .gl-st-pic img,.p26 .gl-st-pic video{display:block;width:100%;height:100%;object-fit:cover;animation:gl-in .6s var(--ease)}
.p26 .gl-st-t{display:flex;flex-direction:column}
.p26 .gl-st-bars{display:flex;gap:5px;margin:14px 0 30px}
.p26 .gl-st-bars i{position:relative;flex:1;height:3px;background:var(--ink-20);overflow:hidden}
.p26 .gl-st-bars i.done::after,.p26 .gl-st-bars i.on::after{content:"";position:absolute;inset:0;background:var(--forest);transform-origin:left}
.p26 .gl-st-bars i.on::after{animation:gl-fill 9s linear forwards}
.p26 .gl-st-fact{animation:gl-in .5s var(--ease)}
.p26 .gl-st-fact .gl-t{font-size:min(clamp(24px,2.2vw,30px), 28px + (clamp(24px,2.2vw,30px) - 28px) * 0.6);line-height:1.3}
.p26 .gl-st-nav{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:28px;font-family:var(--sans);font-size:13px;color:var(--ink-55)}
.p26 .gl-st-nav button{width:48px;height:48px;border:1px solid var(--ink-35);background:transparent;color:var(--ink);font-size:18px;cursor:pointer}
.p26 .gl-st-nav button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@keyframes gl-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gl-in{from{opacity:0}to{opacity:1}}
@media (max-width: 860px){.p26 .gl-st{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.p26 .gl-st-bars i.on::after{animation:none}.p26 .gl-st-pic img,.p26 .gl-st-pic video,.p26 .gl-st-fact{animation:none}}

/* ---- from Location down: the list and the map as one thing ----
   Jack, 24 Sep: "the map needs to be linked to google map api", "all
   integrated with a very smart map", then of the first cut: ordnance for the
   colours and four more ideas, the icons "more our style", the course's
   yellow box "could be something better", the tabs "more our style", no
   hover border on the listings, and the alignment, spacing and usability
   better. Where it is is the page's own introduction (label on the margin,
   words in the column); the buttons are the house button; the words over the
   list are the explore page's row; the pins, the course's mark and the
   palette are on the tuner. */


/* the band the list and the map stand in, on the page's own column */
.p26 .gl-smband{background:var(--paper);padding:0 0 clamp(64px,9vh,110px)}
.p26 .gl-sm-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the words: the explore page's row (.ex-cat), a square of each kind's colour before it */
.p26 .gl-sm-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 26px;flex-wrap:wrap;padding:0 0 22px;margin:0 0 26px;border-bottom:1px solid var(--ink-20)}
.p26 .gl-sm-words{display:flex;flex-wrap:wrap;gap:6px 26px}
/* the quiet word: Lora italic, as the register has it */
.p26 .gl-sm-follow{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-55);cursor:pointer}
.p26 .gl-sm-follow input{appearance:none;width:15px;height:15px;margin:0;border:1px solid var(--ink-35);background:var(--paper);display:grid;place-items:center;cursor:pointer}
.p26 .gl-sm-follow input:checked{background:var(--ink);border-color:var(--ink)}
.p26 .gl-sm-follow input:checked::after{content:"";width:7px;height:4px;border:solid var(--paper);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translate(1px,-1px)}

/* the colour of each kind, on the pin, the word and nowhere else */
[data-k="stay"]{--k:#682114}
[data-k="golf"]{--k:#2B301D}
[data-k="food"]{--k:#C08C3D}
[data-k="see"]{--k:#A0BAD4}
[data-k="other"]{--k:#414042}

/* the list scrolls with the page; the map stays beside it, both from one top line */
.p26 .gl-sm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,2.4vw,36px);align-items:start}
.p26 .gl-sm-list .ex-face{--ex-cols:3;--ex-gap:20px;--ex-row:40px;--ex-say:14px}
.p26 .gl-sm-list .ex-grid{min-height:200px}
/* no border when lit (Jack, 24 Sep): the name is underlined, as a link's is */
.p26 .gl-sm-card.lit .ex-t b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.p26 .gl-sm-more{margin-top:34px}
.p26 .gl-sm-mapcol{position:sticky;top:calc(var(--bar,76px) + 20px)}
.p26 .gl-sm-map{width:100%;height:min(calc(100vh - 136px),800px);min-height:480px;background:var(--stone)}
.p26 .gl-sm-none{padding:24px 0;font-family:var(--serif);font-size:17px;color:var(--ink-75)}
.p26 .gl-sm-none p{margin:0 0 18px}
.p26 .gl-sm-fail{margin:10px 0 0;font-family:var(--sans);font-size:13px;color:var(--ink-55)}
/* back to the course, once the map has wandered */
.p26 .gl-sm-back{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;
  background:var(--paper);border:1px solid var(--ink-35);color:var(--ink);font:400 14px/1 var(--sans);cursor:pointer;box-shadow:0 2px 10px rgba(65,64,66,.12)}
.p26 .gl-sm-back::before{content:"\2190";font-size:15px}
.p26 .gl-sm-back:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---- the pins: four looks, every one square. Each pin carries every
   look's parts (the drawing i, the photograph img, the tag em, the name b)
   and the chosen look shows its own. The many - see and do, and the rest -
   stay small until they are asked for, so beds, courses and food read
   first. ---- */
.gl-pin{position:absolute;transform:translate(-50%,-50%);display:block;padding:0;border:0;background:none;cursor:pointer}
.gl-pin[hidden]{display:none}
.gl-pin > i,.gl-pin > img,.gl-pin > em{display:none}
.gl-pin > b{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);white-space:nowrap;padding:6px 9px;background:#414042;color:#F9F5EE;
  font:500 12px/1 'Jost',sans-serif;opacity:0;pointer-events:none;transition:opacity .15s}
.gl-pin:hover > b,.gl-pin.lit > b{opacity:1}
.gl-pin:hover,.gl-pin.lit{z-index:6}
.gl-pin[data-k="stay"],.gl-pin[data-k="golf"]{z-index:3}
.gl-pin[data-k="food"]{z-index:2}
.gl-pin svg{display:block}
/* squares: the kind's colour, its drawing in shell */
.gl-sm[data-pins="squares"] .gl-pin > i{display:grid;place-items:center;width:26px;height:26px;background:var(--k);color:#F9F5EE;
  box-shadow:0 0 0 2px #F9F5EE,0 2px 6px rgba(65,64,66,.28);transition:transform .15s}
.gl-sm[data-pins="squares"] .gl-pin > i svg{width:15px;height:15px}

/* photographs: the place itself in a mount of its kind's colour, like the link preview */
.gl-sm[data-pins="photos"] .gl-pin:not([data-k="see"]):not([data-k="other"]) > img{display:block;width:34px;height:34px;object-fit:cover;
  border:3px solid var(--k);box-shadow:0 2px 8px rgba(65,64,66,.3);transition:width .18s,height .18s}
.gl-sm[data-pins="photos"] .gl-pin:not([data-k="see"]):not([data-k="other"]):hover > img,
.gl-sm[data-pins="photos"] .gl-pin.lit:not([data-k="see"]):not([data-k="other"]) > img{width:64px;height:64px}
.gl-sm[data-pins="photos"][data-word="see"] .gl-pin[data-k="see"] > img{display:block;width:34px;height:34px;object-fit:cover;border:3px solid var(--k)}
.gl-sm[data-pins="photos"][data-word="see"] .gl-pin[data-k="see"] > i{display:none}

/* crayon: drawn by hand like the pin flag, a shell square with an ink line
   that wobbles, the drawing in the kind's colour */
.gl-sm[data-pins="crayon"] .gl-pin > i{display:grid;place-items:center;width:28px;height:28px;background:#FFFFF7;color:var(--k);
  border:2px solid #414042;filter:url(#gl-wob);box-shadow:3px 3px 0 var(--k);transition:transform .15s}
.gl-sm[data-pins="crayon"] .gl-pin > i svg{width:16px;height:16px}
.gl-sm[data-pins="crayon"] .gl-pin[data-k="see"] > i,.gl-sm[data-pins="crayon"] .gl-pin[data-k="other"] > i{width:11px;height:11px;border-width:1.5px;background:var(--k);box-shadow:none}

/* tags: a bed or a course carries its name, the rest are squares */
.gl-sm[data-pins="tags"] .gl-pin[data-k="stay"] > em,.gl-sm[data-pins="tags"] .gl-pin[data-k="golf"] > em{display:block;white-space:nowrap;padding:6px 9px 6px 8px;
  background:#FFFFF7;border-left:4px solid var(--k);box-shadow:0 2px 8px rgba(65,64,66,.22);font:500 10.5px/1 'Jost',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;font-style:normal;color:#414042}
.gl-sm[data-pins="tags"] .gl-pin[data-k="stay"] > b,.gl-sm[data-pins="tags"] .gl-pin[data-k="golf"] > b{display:none}
.gl-sm[data-pins="tags"] .gl-pin[data-k="stay"]:hover > em,.gl-sm[data-pins="tags"] .gl-pin[data-k="golf"]:hover > em,
.gl-sm[data-pins="tags"] .gl-pin.lit > em{background:#414042;color:#F9F5EE}
.gl-sm[data-pins="tags"] .gl-pin[data-k="food"] > i{display:block;width:13px;height:13px;background:var(--k);box-shadow:0 0 0 2px #F9F5EE}
.gl-sm[data-pins="tags"] .gl-pin[data-k="food"] > i svg{display:none}

.gl-sm[data-pins="squares"] .gl-pin:hover > i,.gl-sm[data-pins="squares"] .gl-pin.lit > i,
.gl-sm[data-pins="crayon"] .gl-pin:hover > i,.gl-sm[data-pins="crayon"] .gl-pin.lit > i{transform:scale(1.25)}

/* the many - see and do, and the rest - as small squares in every look,
   until the word See and do is chosen or one is pointed at */
.gl-sm:not([data-word="see"]) .gl-pin[data-k="see"]:not(.lit):not(:hover) > i,
.gl-sm .gl-pin[data-k="other"]:not(.lit):not(:hover) > i{display:block;width:10px;height:10px;background:var(--k);border:0;filter:none;
  box-shadow:0 0 0 2px #F9F5EE;transform:none}
.gl-sm:not([data-word="see"]) .gl-pin[data-k="see"]:not(.lit):not(:hover) > i svg,
.gl-sm .gl-pin[data-k="other"]:not(.lit):not(:hover) > i svg{display:none}
.gl-sm:not([data-word="see"]) .gl-pin[data-k="see"]:not(.lit):not(:hover) > img{display:none}
/* grown, in the looks that would otherwise have nothing to show for them */
.gl-sm[data-pins="photos"] .gl-pin[data-k="see"]:is(.lit,:hover) > img{display:block;width:64px;height:64px;object-fit:cover;border:3px solid var(--k)}
.gl-sm[data-pins="photos"] .gl-pin[data-k="see"]:is(.lit,:hover) > i{display:none}
.gl-sm[data-pins="tags"][data-word="see"] .gl-pin[data-k="see"] > i,.gl-sm[data-pins="tags"] .gl-pin[data-k="see"]:is(.lit,:hover) > i{display:grid;place-items:center;
  width:24px;height:24px;background:var(--k);color:#F9F5EE;box-shadow:0 0 0 2px #F9F5EE}
.gl-sm[data-pins="tags"] .gl-pin[data-k="see"] > i svg{width:14px;height:14px}

/* ---- the course's own mark: four ideas in place of the yellow box ---- */
.gl-sm-home{position:absolute;pointer-events:none;z-index:8}
.gl-sm-home > span{display:none}
.gl-sm-home > b{position:absolute;white-space:nowrap;font:400 17px/1 'Larken','Lora',serif;color:#414042}
/* the flag: Jack's crayon pin flag planted on the course, its name on a paper tag */
.gl-sm[data-home="flag"] .h-flag{display:block;position:absolute;left:-12px;top:-58px;width:46px}
.gl-sm[data-home="flag"] .h-flag svg{width:46px;height:auto;overflow:visible}
.gl-sm-home .f{fill:#C08C3D;stroke:#414042;stroke-width:3.4;stroke-linejoin:round}
.gl-sm-home .s{fill:none;stroke:#414042;stroke-width:1.3;stroke-dasharray:7 5;opacity:.75}
.gl-sm[data-home="flag"] .gl-sm-home > b{left:30px;top:-56px;padding:7px 10px;background:#FFFFF7;box-shadow:0 2px 10px rgba(65,64,66,.2)}
/* the plate: the name on the scorecard's forest, a notch pointing down at the course */
.gl-sm[data-home="plate"] .h-plate{display:block;position:absolute;left:0;top:-14px;transform:translate(-50%,-100%);padding:10px 14px 12px;background:#2B301D;color:#F1EDE8;text-align:center;white-space:nowrap}
.gl-sm[data-home="plate"] .h-plate::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#2B301D;transform:translateX(-50%) rotate(45deg)}
.gl-sm[data-home="plate"] .h-plate em{display:block;font:600 9.5px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:rgba(241,237,232,.62)}
.gl-sm[data-home="plate"] .h-plate strong{display:block;margin-top:6px;font:400 19px/1 'Larken','Lora',serif}
.gl-sm[data-home="plate"] .gl-sm-home > b{display:none}
.gl-sm[data-home="plate"] .gl-sm-home::after{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:#C08C3D;box-shadow:0 0 0 2px #2B301D}
/* the stamp: a photograph of the course, mounted and a little askew, its name beneath the point */
.gl-sm[data-home="stamp"] .h-stamp{display:block;position:absolute;left:0;top:-16px;transform:translate(-50%,-100%) rotate(-3deg);padding:5px;background:#FFFFF7;
  outline:1px solid #414042;box-shadow:0 8px 22px rgba(65,64,66,.3)}
.gl-sm[data-home="stamp"] .h-stamp img{display:block;width:84px;height:84px;object-fit:cover}
.gl-sm[data-home="stamp"] .gl-sm-home::after{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:#2B301D;box-shadow:0 0 0 2px #FFFFF7}
.gl-sm[data-home="stamp"] .gl-sm-home > b{left:0;top:14px;transform:translateX(-50%);padding:6px 9px;background:#FFFFF7;box-shadow:0 2px 10px rgba(65,64,66,.2)}
/* the beacon: a forest square sending out squares, the name beside it on the map itself */
.gl-sm[data-home="beacon"] .h-beacon{display:block;position:absolute;left:0;top:0}
.gl-sm[data-home="beacon"] .h-beacon i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:#2B301D;box-shadow:0 0 0 3px #FFFFF7}
.gl-sm[data-home="beacon"] .h-beacon i + i{background:none;box-shadow:none;border:1.5px solid #2B301D;animation:gl-beacon 2.6s ease-out infinite}
.gl-sm[data-home="beacon"] .h-beacon i + i + i{animation-delay:1.3s}
@keyframes gl-beacon{from{transform:scale(1);opacity:.9}to{transform:scale(4.2);opacity:0}}
@media (prefers-reduced-motion: reduce){.gl-sm[data-home="beacon"] .h-beacon i + i{animation:none;opacity:0}}
.gl-sm[data-home="beacon"] .gl-sm-home > b{left:26px;top:-15px;padding:7px 10px;background:#FFFFF7;box-shadow:0 2px 10px rgba(65,64,66,.2)}


/* the open card, above its pin */
.gl-sm-pop{position:absolute;transform:translate(-50%,calc(-100% - 24px));width:250px;background:#FFFFF7;box-shadow:0 12px 32px rgba(65,64,66,.28);z-index:9}
.gl-sm-pop[hidden]{display:none}
.gl-sm-pop a{display:block;color:#414042;text-decoration:none}
.gl-sm-pop figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#E4DED9}
.gl-sm-pop img{display:block;width:100%;height:100%;object-fit:cover}
.gl-sm-pop span{display:block;padding:12px 14px 14px}
.gl-sm-pop em{display:block;font:600 10px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:rgba(65,64,66,.55)}
.gl-sm-pop b{display:block;margin-top:6px;font:400 19px/1.2 'Larken','Lora',serif}
.gl-sm-pop u{display:block;margin-top:4px;font:400 14px/1.3 'Jost',sans-serif;text-decoration:none;color:rgba(65,64,66,.6)}
.gl-sm-pop a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}


@media (max-width: 1000px){
  .p26 .gl-sm-grid{grid-template-columns:1fr}
  .p26 .gl-sm-mapcol{position:relative;top:0;order:-1}
  .p26 .gl-sm-map{height:62vh;min-height:360px}
  .p26 .gl-sm-list .ex-face{--ex-cols:2}
}
@media (max-width: 700px){
  .p26 .gl-sm-words{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
}

/* ---- round three, 24 Sep: Jack's flag, no outlines, the name in our manner, the labels ---- */

/* his flag, the picture he sent, the number on its cloth in Larken */
.p26 .gl-flag-img{position:relative;display:block;container-type:inline-size}
.p26 .gl-flag-img img{display:block;width:100%;height:auto}
.p26 .gl-flag-img b{position:absolute;left:56%;top:32%;transform:translate(-50%,-50%);font:500 40cqw/1 var(--face);color:var(--ink)}
.gl-sm[data-home="flag"] .h-flag{left:-5px;top:-68px;width:46px}
.gl-sm[data-home="flag"] .h-flag img{display:block;width:46px;height:auto}
.gl-sm[data-home="flag"] .gl-sm-home > b{left:40px;top:-62px}

/* no outline on any picture on the map (Jack: "take the outline of all the images on the map") */
.gl-sm[data-pins="photos"] .gl-pin > img{border:0 !important;box-shadow:0 3px 10px rgba(65,64,66,.35)}
.gl-sm[data-home="stamp"] .h-stamp{padding:0;background:none;outline:0;transform:translate(-50%,-100%) rotate(-2deg);box-shadow:0 10px 24px rgba(65,64,66,.35)}
.gl-sm[data-home="stamp"] .h-stamp img{width:128px;height:96px}
.gl-sm[data-home="stamp"] .gl-sm-home::after{width:10px;height:10px;left:-5px;top:-5px;background:#414042;box-shadow:0 0 0 2px #FFFFF7}

/* the course's name, never on a white rectangle: on the picture, beside the mark on the map
   itself with a halo of the land's colour, or in small capitals as a caption is */
.gl-sm[data-name] .gl-sm-home > b{background:none;box-shadow:none;padding:0;
  text-shadow:0 0 2px #FFFFF7,1px 1px 0 #FFFFF7,-1px -1px 0 #FFFFF7,1px -1px 0 #FFFFF7,-1px 1px 0 #FFFFF7,0 0 6px #FFFFF7}
.gl-sm[data-name="small"] .gl-sm-home > b{font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase}
.gl-sm[data-look="specimen"][data-name] .gl-sm-home > b{text-shadow:0 0 2px #FFFFF7,1px 1px 0 #FFFFF7,-1px -1px 0 #FFFFF7,1px -1px 0 #FFFFF7,-1px 1px 0 #FFFFF7,0 0 8px #FFFFF7}
.gl-sm .h-stamp i{display:none}
.gl-sm[data-home="stamp"][data-name="photo"] .h-stamp i{display:block;position:absolute;left:0;right:0;bottom:0;padding:22px 9px 8px;font:400 15px/1.1 'Larken','Lora',serif;
  font-style:normal;color:#FFFFF7;background:linear-gradient(rgba(65,64,66,0),rgba(65,64,66,.75))}
.gl-sm[data-home="stamp"][data-name="photo"] .gl-sm-home > b{display:none}

/* the words over the list: the house button, the chosen one in its kept state */
.p26 .gl-sm-words{gap:10px}
.p26 .gl-sm-bar{padding:0 0 26px}

/* ---- the section labels, four ways (Jack, 24 Sep: "test changing the title which are left
   aligned eg welcome, the card, hole highlights etc") - only the introductions' own labels,
   so the board's and the stories' stay as they are ---- */
/* only where the introduction has its two columns; under 1181px it is one column already */
/* Not on an introduction (27 Sep): _place.css ranges every listing introduction left in one column, and
   this sheet loads after it, so its grid-column:2 threw the label and words into an implicit second track at
   786 of 1920 on every stay and estate page. Jack, on /listings/glen-dye: "alignment all off here". */
@media (min-width: 1181px){
.p26[data-labels="above"] .wl:not(.intro) .wl-in > .wl-label{grid-column:2;grid-row:1;margin:0 0 16px}
.p26[data-labels="above"] .wl:not(.intro) .wl-in > .wl-text{grid-column:2;grid-row:2}
.p26[data-labels="left"] .wl-in{grid-template-columns:minmax(0,1fr)}
.p26[data-labels="left"] .wl-in > .wl-label{grid-column:1;grid-row:1;margin:0 0 16px}
.p26[data-labels="left"] .wl-in > .wl-text{grid-column:1;grid-row:2}
.p26[data-labels="left"] .reads{padding-left:var(--edge);padding-right:var(--edge)}
.p26[data-labels="left"] .reads .col{margin-left:0}
.p26[data-labels="rule"] .wl.intro .wl-in{border-top:1px solid var(--ink-20);padding-top:22px}
.p26[data-labels="rule"] .wl-in > .wl-label{margin-top:4px}
}
/* over the words: the label on the words' own left edge, above them */
/* all on the left: the label and the words both from the page's left edge, the write-up too */
/* under a rule: on the margin as now, with a hairline across the page above each */

/* ---- the magazine, one bold band (Jack, 24 Sep: "i think this is weak, i think just maybe an overall
   advert for magazine with big bold beautiful video here") ----
   The Issue 9 film across the whole width, as tall as most of a screen; the forest deepening from the
   left, where the film is already in shadow, so the words sit in the dark and the candle and the
   pages stay bright on the right. One heading in Larken, large; the line; the house buttons in
   their forest colours. */
.p26 .gl-mag{position:relative;overflow:hidden;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;background:#2B301D}
.p26 .gl-mag-film{position:absolute;inset:0}
.p26 .gl-mag-film video,.p26 .gl-mag-film img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.p26 .gl-mag-veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(22,21,19,.88) 0%,rgba(22,21,19,.62) 34%,rgba(22,21,19,.12) 64%,rgba(22,21,19,0) 100%),
  linear-gradient(0deg,rgba(22,21,19,.55) 0%,rgba(22,21,19,0) 42%)}
.p26 .gl-mag > .in{position:relative;width:100%;padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(64px,10vh,120px)}
.p26 .gl-mag-t{max-width:560px}
.p26 .gl-mag-k{display:block;margin:0 0 22px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(241,237,232,.72)}
.p26 .gl-mag h2{margin:0;font:400 min(clamp(56px,7.4vw,118px), 28px + (clamp(56px,7.4vw,118px) - 28px) * 0.6)/.94 var(--face);letter-spacing:-.02em;color:#F9F5EE;text-wrap:balance}
.p26 .gl-mag p{margin:26px 0 34px;max-width:40ch;font:400 clamp(17px,1.35vw,20px)/1.6 var(--serif);color:rgba(241,237,232,.82);text-wrap:pretty}
.p26 .gl-mag-btns{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width: 760px){
  .p26 .gl-mag{min-height:680px}
  .p26 .gl-mag-film video,.p26 .gl-mag-film img{object-position:70% 50%}
  .p26 .gl-mag-veil{background:linear-gradient(0deg,rgba(22,21,19,.9) 0%,rgba(22,21,19,.7) 45%,rgba(22,21,19,.1) 80%)}
}

/* ---- the opening, as the stay's (Jack, 24 Sep, with Stormhouse South on screen: "can you
   make more like this now but with golf in mind of course, so the forest bar etc and sentence
   instead of dots") ----
   The facts as one italic sentence (B4) and the forest booking row under the photograph (A3),
   the stay's own rules from stay4-tokens.html (build-lodge.py -> _lodge.css) copied under their
   own names, at-rules and all; the golf row carries the green fees where the stay has its dates. */
.p26 .fx{margin-top:16px;color:var(--shell)}
.p26 .fx.b4{font:italic 400 clamp(19px,1.7vw,24px)/1.4 var(--serif);max-width:44ch;margin-top:14px}
.p26 .bkr{padding:30px 0}
.p26 .bkr-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 34px}
.p26 .bkr-lab{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);margin:0 0 12px}
.p26 .bkr-dates{display:flex;flex-wrap:wrap;gap:10px}
.p26 .bkr-dates a{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1px solid var(--ink-35);color:var(--ink);font-variant-numeric:tabular-nums;transition:background .2s,color .2s,border-color .2s}
.p26 .bkr-dates a:hover{background:var(--ink);color:var(--paper)}
.p26 .bkr-acts{display:flex;flex-wrap:wrap;gap:10px}
.p26 .bkr-go,.p26 .bkr-q{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.p26 .bkr-go{background:var(--fill,var(--forest));color:var(--on-forest);border:1px solid var(--fill,var(--forest))}
.p26 .bkr-go:hover{background:var(--moss)}
.p26 .bkr-q{background:transparent;color:var(--ink);border:1px solid var(--ink-35)}
.p26 .bkr-q:hover{border-color:var(--ink)}
.p26 .bkr.a3{background:var(--forest);color:var(--on-forest);padding:34px 0}
.p26 .bkr.a3 .bkr-lab{color:rgba(241,237,232,.62)}
.p26 .bkr.a3 .bkr-dates a{border-color:rgba(241,237,232,.5);color:var(--on-forest)}
.p26 .bkr.a3 .bkr-dates a:hover{background:var(--on-forest);color:var(--forest)}
.p26 .bkr.a3 .bkr-go{background:var(--on-forest);border-color:var(--on-forest);color:var(--forest)}
.p26 .bkr.a3 .bkr-q{color:var(--on-forest);border-color:rgba(241,237,232,.5)}
.p26 .bkr.a3 .bkr-q:hover{background:var(--on-forest);border-color:var(--on-forest);color:var(--forest)}
@media (max-width:760px){.p26 .bkr-row{flex-direction:column;align-items:flex-start}}
/* a long fee ("Scottish residents in a Scottish club, March and November") wraps on a phone rather than running off it */
@media (max-width:760px){.p26 .bkr-dates a{white-space:normal;text-align:left;line-height:1.35;padding-top:10px;padding-bottom:10px}.p26 .bkr-row > div,.p26 .bkr-dates{max-width:100%}}
/* on a phone a name tag in the picture's right half reads leftward from its point, so it stays on the screen */
@media (max-width:700px){.p26 .gl-spot.r,.gl-lbx .gl-spot.r{width:30px}.p26 .gl-spot.r .gl-spot-mark,.gl-lbx .gl-spot.r .gl-spot-mark{transform:translateX(calc(-100% + 30px))}.p26 [data-mark="tag"] .gl-spot-mark b{letter-spacing:.14em}}

/* ---- the picture you can look into (Jack, 24 Sep: "more height", "tool tips or fun things to
   give more info, maybe a tool tip over the house to give insights or look inside if we have it") ----
   The photograph at its own shape, the page's column wide. Square marks that breathe; a card
   beside the one pointed at; Look inside fades the frame through to the room, with a strip to step
   through it and Back outside. */
.p26 .gl-look{background:var(--paper);padding:clamp(40px,6vh,80px) 0 0}
.p26 .gl-look + .intro{padding-top:clamp(56px,8vh,110px)}
.p26 .gl-look-frame{position:relative;margin:0}
.p26 .gl-look-out{display:block;width:100%;height:auto}

/* the room, over the picture */
.p26 .gl-look-room{position:absolute;inset:0;overflow:hidden;background:#414042;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.p26 .gl-look-frame.is-in .gl-look-room{opacity:1;pointer-events:auto}
.p26 .gl-look-room > img,.p26 .gl-look-room > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:gl-look-in .7s var(--ease)}
@keyframes gl-look-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.p26 .gl-look-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:60px 20px 20px;
  background:linear-gradient(rgba(65,64,66,0),rgba(65,64,66,.6))}
.p26 .gl-look-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;background:rgba(65,64,66,.35);color:#F9F5EE;
  border:1px solid rgba(249,245,238,.7);font:400 14.5px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.p26 .gl-look-back::before{content:"\2190";font-size:16px}
.p26 .gl-look-back:hover{background:#F9F5EE;color:var(--ink)}
.p26 .gl-look-strip{display:flex;gap:8px}
.p26 .gl-look-strip button{position:relative;width:76px;height:57px;padding:0;border:2px solid transparent;background:none;cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s}
.p26 .gl-look-strip button.on,.p26 .gl-look-strip button:hover{opacity:1;border-color:#F9F5EE}
.p26 .gl-look-strip img{display:block;width:100%;height:100%;object-fit:cover}
.p26 .gl-look-strip i{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%);border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #F9F5EE}

/* the marks: a square of paper with a plus, breathing a square out until one is opened */
.p26 .gl-spot{position:absolute;z-index:2;transform:translate(-50%,-50%)}
.p26 .gl-spot.open{z-index:6}
.p26 .gl-spot-mark{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:rgba(255,255,247,.95);cursor:pointer;
  box-shadow:0 2px 12px rgba(65,64,66,.35);transition:background .2s,transform .2s}
.p26 .gl-spot-mark span{position:relative;width:12px;height:12px;transition:transform .25s var(--ease)}
.p26 .gl-spot-mark span::before,.p26 .gl-spot-mark span::after{content:"";position:absolute;background:var(--ink)}
.p26 .gl-spot-mark span::before{left:0;right:0;top:50%;height:1.5px;margin-top:-.75px}
.p26 .gl-spot-mark span::after{top:0;bottom:0;left:50%;width:1.5px;margin-left:-.75px}
.p26 .gl-spot-mark::after{content:"";position:absolute;inset:0;border:1.5px solid rgba(255,255,247,.9);animation:gl-breathe 2.8s ease-out infinite}
@keyframes gl-breathe{from{transform:scale(1);opacity:.9}to{transform:scale(2.1);opacity:0}}
.p26 .gl-spot:nth-child(2n) .gl-spot-mark::after{animation-delay:.9s}
.p26 .gl-spot:nth-child(3n) .gl-spot-mark::after{animation-delay:1.7s}
.p26 .gl-spot.open .gl-spot-mark{background:var(--ink)}
.p26 .gl-spot.open .gl-spot-mark span{transform:rotate(45deg)}
.p26 .gl-spot.open .gl-spot-mark span::before,.p26 .gl-spot.open .gl-spot-mark span::after{background:#FFFFF7}
.p26 .gl-spot.open .gl-spot-mark::after{animation:none;opacity:0}
.p26 .gl-spot-mark:focus-visible{outline:2px solid #FFFFF7;outline-offset:3px}

/* the marks, eight ways on the tuner; the breathing square is every one's, the plus is the first */
.p26 .gl-spot-mark b{font-style:normal;line-height:1;color:var(--ink);transition:color .2s}
.p26 .gl-spot-mark svg{width:15px;height:15px;color:var(--ink);transition:color .2s}
.p26 .gl-spot.open .gl-spot-mark b,.p26 .gl-spot.open .gl-spot-mark svg{color:#FFFFF7}
/* numbers: the key on a magazine's map, in Larken */
.p26 [data-mark="number"] .gl-spot-mark b{font:400 17px/1 var(--face)}
/* dot: a small forest square, the quietest */
.p26 [data-mark="dot"] .gl-spot-mark{width:16px;height:16px;background:var(--forest);box-shadow:0 0 0 3px rgba(255,255,247,.95),0 2px 10px rgba(65,64,66,.35)}
.p26 [data-mark="dot"] .gl-spot.open .gl-spot-mark{background:#C08C3D}
/* info: an italic i in Lora */
.p26 [data-mark="info"] .gl-spot-mark b{font:italic 500 18px/1 var(--serif);margin-top:1px}
/* flag: Jack's drawing, small, planted; no paper under it */
.p26 [data-mark="flag"] .gl-spot-mark{width:30px;height:40px;background:none;box-shadow:none}
.p26 [data-mark="flag"] .gl-spot-mark img{display:block;width:27px;height:auto;filter:drop-shadow(0 2px 4px rgba(65,64,66,.45));transition:transform .2s}
.p26 [data-mark="flag"] .gl-spot-mark:hover img,.p26 [data-mark="flag"] .gl-spot.open .gl-spot-mark img{transform:scale(1.15) rotate(-4deg)}
.p26 [data-mark="flag"] .gl-spot.open .gl-spot-mark{background:none}
/* name tags: what you will open, before you open it */
.p26 [data-mark="tag"] .gl-spot-mark{width:auto;height:auto;padding:8px 11px 7px}
.p26 [data-mark="tag"] .gl-spot-mark b{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
/* open square: an empty frame, like a viewfinder */
.p26 [data-mark="frame"] .gl-spot-mark{width:28px;height:28px;background:rgba(65,64,66,.12);box-shadow:inset 0 0 0 2px #FFFFF7,0 2px 10px rgba(65,64,66,.25)}
.p26 [data-mark="frame"] .gl-spot.open .gl-spot-mark{background:rgba(255,255,247,.95);box-shadow:inset 0 0 0 2px var(--ink)}
.p26 [data-mark="tag"] .gl-spot-card{left:0;top:calc(100% + 10px)}
/* the gap between a mark and its card is part of the card, so the pointer never leaves on its way across */
.p26 .gl-spot-card::before{content:"";position:absolute;left:-30px;right:-30px;top:-30px;bottom:-30px;z-index:-1}
.p26 [data-mark="tag"] .gl-spot.r .gl-spot-card{left:auto;right:0}
.p26 [data-mark="tag"] .gl-spot.low .gl-spot-card{top:auto;bottom:calc(100% + 10px)}

/* the card beside it: to the right of the mark, or to its left in the picture's right half; above it low down */
.p26 .gl-spot-card{position:absolute;left:28px;top:-14px;width:380px;padding:18px 20px 20px;background:#FFFFF7;box-shadow:0 18px 44px rgba(65,64,66,.32);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.p26 .gl-spot.r .gl-spot-card{left:auto;right:28px}
.p26 .gl-spot.low .gl-spot-card{top:auto;bottom:-14px}
.p26 .gl-spot.open .gl-spot-card{opacity:1;transform:none;pointer-events:auto}
.p26 .gl-spot-card em{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--ink-55)}
.p26 .gl-spot-card b{display:block;margin-top:8px;font:400 23px/1.15 var(--face);color:var(--ink)}
.p26 .gl-spot-card p{margin:10px 0 0;font:400 15px/1.62 var(--serif);color:var(--ink-75)}
.p26 .gl-spot-in{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:0 0 3px;background:none;border:0;border-bottom:1px solid var(--ink);
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.p26 .gl-spot-in span{font-size:14px;letter-spacing:0;transition:transform .2s}
.p26 .gl-spot-in:hover span{transform:translateX(3px)}

/* the line under it */
.p26 .gl-look-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0 0}
.p26 .gl-look-cap span:first-child{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-look-hint{font:italic 400 15px/1.4 var(--serif);color:var(--ink-55);text-align:right}

@media (prefers-reduced-motion: reduce){.p26 .gl-spot-mark::after{animation:none;opacity:0}.p26 .gl-look-room > img,.p26 .gl-look-room > video{animation:none}}
/* on a phone the card rises from the foot of the screen, so it is never cut off by the picture's edge */
@media (max-width: 700px){
  /* a transformed mark would hold its fixed card inside itself, so the mark is placed by margins here */
  .p26 .gl-spot{transform:none;margin:-15px 0 0 -15px}
  .p26 .gl-spot-card,.p26 .gl-spot.r .gl-spot-card,.p26 .gl-spot.low .gl-spot-card{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;z-index:90}
  .p26 .gl-look-strip button{width:52px;height:40px}
  .p26 .gl-look-bar{padding:40px 12px 12px;flex-wrap:wrap}
  .p26 .gl-look-cap{flex-direction:column;gap:4px}
  .p26 .gl-look-hint{text-align:left}
}

/* ---- the lightbox: the site's own (.lightbox in _listing.css), as Stormhouse South has it
   (Jack, 24 Sep: "can we use this light room please"), with the name tags on the photograph ---- */
.gl-lbx .gl-lbx-pic{position:relative;display:inline-block;line-height:0;animation:gl-lb-pic .2s ease-out}
@keyframes gl-lb-pic{from{opacity:0}to{opacity:1}}
/* the look-closer marks, inside the lightbox: the same name tags and cards, their rules unscoped from the page */
.gl-lbx .gl-spot{position:absolute;z-index:2;transform:translate(-50%,-50%)}
.gl-lbx .gl-spot.open{z-index:6}
.gl-lbx .gl-spot-mark{position:relative;display:grid;place-items:center;padding:8px 11px 7px;border:0;background:rgba(255,255,247,.95);cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.gl-lbx .gl-spot-mark b{font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:#414042}
.gl-lbx .gl-spot-mark::after{content:"";position:absolute;inset:0;border:1.5px solid rgba(255,255,247,.9);animation:gl-breathe 2.8s ease-out infinite}
.gl-lbx .gl-spot.open .gl-spot-mark{background:#414042}
.gl-lbx .gl-spot.open .gl-spot-mark b{color:#FFFFF7}
.gl-lbx .gl-spot.open .gl-spot-mark::after{animation:none;opacity:0}
.gl-lbx .gl-spot-card{position:absolute;left:0;top:calc(100% + 10px);width:340px;padding:18px 20px 20px;background:#FFFFF7;color:#414042;box-shadow:0 18px 44px rgba(0,0,0,.45);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .25s}
.gl-lbx .gl-spot-card::before{content:"";position:absolute;left:-30px;right:-30px;top:-30px;bottom:-30px;z-index:-1}
.gl-lbx .gl-spot.r .gl-spot-card{left:auto;right:0}
.gl-lbx .gl-spot.low .gl-spot-card{top:auto;bottom:calc(100% + 10px)}
.gl-lbx .gl-spot.open .gl-spot-card{opacity:1;transform:none;pointer-events:auto}
.gl-lbx .gl-spot-card em{display:block;font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:rgba(65,64,66,.55)}
.gl-lbx .gl-spot-card b{display:block;margin-top:8px;font:400 22px/1.15 'Larken','Lora',serif}
.gl-lbx .gl-spot-card p{margin:10px 0 0;font:400 15px/1.6 'Lora',serif;color:rgba(65,64,66,.78)}
.gl-lbx .gl-spot-in{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:0 0 3px;background:none;border:0;border-bottom:1px solid #414042;
  font:600 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#414042;cursor:pointer}
@media (prefers-reduced-motion: reduce){.gl-lbx .gl-lbx-pic{animation:none}.gl-lbx .gl-spot-mark::after{animation:none;opacity:0}}
@media (max-width: 760px){
  .gl-lbx .gl-spot{transform:none;margin:-14px 0 0 -30px}
  .gl-lbx .gl-spot-card,.gl-lbx .gl-spot.r .gl-spot-card,.gl-lbx .gl-spot.low .gl-spot-card{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;z-index:210}
}

/* ---- where to find out more (Jack, 24 Sep: "a resource section of places they can
   then look for more information") ----
   Three groups by what a reader goes to them for; each page a row: its name,
   one line on what is there, the site it is on (and PDF where it is one), an
   arrow for leaving the site. Still the page's sources, and it says so. */
.p26 .gl-more{background:var(--paper);padding:0 0 clamp(64px,9vh,110px)}
.p26 .gl-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,3vw,48px);align-items:start}
.p26 .gl-more-g h3{margin:0;padding:14px 0 6px;border-top:1px solid var(--ink);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-more-g ul{list-style:none;margin:0;padding:0}
.p26 .gl-more-g li{border-bottom:1px solid var(--ink-20)}
.p26 .gl-more-g a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:16px 0 17px;color:var(--ink);text-decoration:none}
.p26 .gl-more-g b{grid-column:1;font-family:var(--face);font-weight:400;font-size:20px;line-height:1.25}
.p26 .gl-more-g span{grid-column:1;margin-top:5px;font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-75)}
.p26 .gl-more-g small{grid-column:1;display:flex;align-items:center;gap:10px;margin-top:9px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gl-more-g small i{font-style:normal;padding:3px 5px 2px;border:1px solid var(--ink-35);letter-spacing:.12em;color:var(--ink-75)}
.p26 .gl-more-g em{grid-column:2;grid-row:1 / span 3;align-self:start;margin-top:2px;font-style:normal;font-size:19px;line-height:1;color:var(--ink-35);transition:transform .2s,color .2s}
.p26 .gl-more-g a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.p26 .gl-more-g a:hover em{color:var(--ink);transform:translate(2px,-2px)}
@media (max-width: 1000px){.p26 .gl-more-grid{grid-template-columns:1fr;gap:28px}}

/* ---- the tuner ---- */
/* Bottom left: the bottom right is the site's own bell. */
.gl-tuner{position:fixed;left:16px;bottom:16px;z-index:60;width:min(360px,calc(100vw - 32px));
  background:var(--paper);border:1px solid var(--ink-35);font-family:var(--sans);font-size:13px;color:var(--ink)}
.gl-tuner-h{display:block;width:100%;text-align:left;padding:10px 14px;background:var(--forest);color:var(--on-forest);
  border:0;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.gl-tuner-b{padding:12px 14px 10px}
.gl-tr{margin:0 0 10px}
.gl-tr > span{display:block;margin:0 0 5px;color:var(--ink-55);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.gl-tr > div{display:flex;flex-wrap:wrap;gap:5px}
.gl-tr button{padding:6px 9px;border:1px solid var(--ink-35);background:transparent;color:var(--ink);font:13px/1 var(--sans);cursor:pointer}
.gl-tr button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gl-tuner-f{margin:6px 0 0;font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-55);word-break:break-all}

@media (max-width: 860px){
  .p26 .gl-name{font-size:21px}
  .p26 .gl-t,.p26 .gl-q summary{font-size:20px}
  .gl-tuner{left:16px;right:88px;width:auto}
}

/* ---- MORE GOLF, 24 September ----------------------------------------------
   Jack: "link it all to the golf page". Our courses in the region and the
   collections this course is in, as cards; the region's golf page and /golf
   as the house buttons under them. The column is Find out more's. */
.p26 .gl-gm{padding:0 0 clamp(56px,7vw,96px)}
.p26 .gl-gm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
.p26 .gl-gm-card{display:block;text-decoration:none;color:inherit}
.p26 .gl-gm-pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--oat,#ece6dc);margin:0 0 12px}
.p26 .gl-gm-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.8,.24,1)}
.p26 .gl-gm-card:hover .gl-gm-pic img{transform:scale(1.03)}
.p26 .gl-gm-card small{display:block;margin:0 0 5px;font:500 10.5px/1.3 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-55,rgba(65,64,66,.55))}
.p26 .gl-gm-card b{display:block;font:400 19px/1.25 var(--face);letter-spacing:-.003em}
.p26 .gl-gm-card:hover b{color:var(--tweed,#682114)}
.p26 .gl-gm-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
@media (max-width:900px){
  .p26 .gl-gm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .p26 .gl-gm-card b{font-size:17px}
}

/* a source's label wraps under its address on a narrow screen rather than running off it (the site walk, 13 October 2026:
   HISTORIC ENVIRONMENT SCOTLAND ran to 383px on a 375px phone) */
.p26 .gl-more-g small{flex-wrap:wrap;row-gap:6px;min-width:0}
.p26 .gl-more-g small i{white-space:normal}