/* Instagram feed (Wren, 2026-10-07). Phone first: every rule is the 390px
   phone until a min-width query says otherwise. Engine code: no client's
   colours live here. A theme maps its palette onto the --ig-* tokens (ink,
   ground, soft, paper, line, accent, font, font-ui) in its own stylesheet; unset,
   neutral fallbacks apply. The admin's per-site overrides arrive as
   --igf-bg / --igf-ink / --igf-accent.
   Box sizes come from aspect-ratio plus the img width/height attributes, so
   nothing shifts as pictures load. */

.igf{--igf-ink-c:var(--igf-ink,inherit);--igf-acc:var(--igf-accent,var(--ig-ink,#2B2B28));
  --igf-ring:var(--igf-accent,var(--ig-accent,var(--ig-ink,#2B2B28)));
  --igf-radius:var(--igf-r,var(--ig-radius,8px));color:var(--igf-ink-c);position:relative}
.igf--filled{background:var(--igf-bg);padding:16px;border-radius:var(--igf-radius)}
.igf-sec{padding:var(--ig-sec,64px) 0;border-top:1px solid var(--ig-line,rgba(0,0,0,.12));color:var(--igf-ink,inherit)}
.igf-sec--filled{background:var(--igf-bg);padding:var(--ig-sec,64px) 0;border-top:0}
.igf-sec .sec-head h2{color:inherit}
.igf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.igf-ico{display:block;flex:none}

/* ---- header: @handle and Follow ---- */
.igf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.igf-who{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:inherit;text-decoration:none;font-weight:600}
.igf-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--ig-paper,#EEECE7)}
.igf-ava-blank{display:grid;place-items:center;color:var(--igf-acc)}
.igf-handle{font-size:1rem;letter-spacing:.01em}
.igf-follow{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--igf-acc);color:var(--ig-ground,#fff);font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap;
  transition:filter .2s ease}
@media (hover:hover){.igf-follow:hover{filter:brightness(1.08)}}

/* ---- the tiles ---- */
.igf-list{list-style:none;margin:0;padding:0}
.igf-item{min-width:0;margin:0}
.igf-link{position:relative;display:block;color:inherit;text-decoration:none;border-radius:var(--igf-radius)}
.igf-media{position:relative;display:block;overflow:hidden;border-radius:var(--igf-radius);background:var(--ig-paper,#EEECE7)}
.igf-img,.igf-vid{display:block;width:100%;height:100%;object-fit:cover}
/* hover, tap and keyboard focus all say the same thing: a thin ring in the
   accent colour, drawn inside the picture's own edge. Nothing lifts, grows
   or glows; a touch screen gets it under the finger, never stuck after. */
.igf-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--igf-ring);transition:box-shadow .16s ease}
@media (hover:hover){.igf-link:hover .igf-media::after{box-shadow:inset 0 0 0 3px var(--igf-ring)}}
.igf-link:active .igf-media::after,.igf-link:focus-visible .igf-media::after{box-shadow:inset 0 0 0 3px var(--igf-ring)}
.igf-link{-webkit-tap-highlight-color:transparent}
.igf-vid{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.igf-vid.is-on{opacity:1}
.igf-link:focus-visible,.igf-follow:focus-visible,.igf-who:focus-visible,.igf-nav:focus-visible,.igf-scroller:focus-visible,.igf-foot-link:focus-visible{
  outline:2px solid var(--igf-acc);outline-offset:3px}
.igf-head--follow{justify-content:flex-end}
/* the kind of post: a small mark in the corner, nothing laid over the picture itself */
.igf-badge{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(20,20,18,.42);color:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.igf-badge-play .igf-ico{margin-left:2px}
.igf-cap{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--igf-clamp,2);overflow:hidden;overflow-wrap:anywhere}
.igf-below{padding:10px 2px 0}
.igf-below .igf-cap{font-size:.9375rem;line-height:1.45}
.igf-below .igf-date{margin:0 0 4px;font-size:.8125rem;color:var(--igf-ink,var(--ig-soft,inherit));opacity:.85}

/* ---- grid ---- */
.igf--grid .igf-list,.igf--highlight .igf-list{display:grid;gap:var(--igf-gap,8px);grid-template-columns:repeat(var(--igf-c1,2),minmax(0,1fr))}

/* ---- masonry: CSS columns, each picture keeps its own shape ---- */
.igf--masonry .igf-list{columns:var(--igf-c1,2);column-gap:var(--igf-gap,8px)}
.igf--masonry .igf-item{break-inside:avoid;padding-bottom:var(--igf-gap,8px)}   /* padding, not margin: WebKit carries a bottom margin over to the top of the next column */

/* ---- highlight: one large post beside four small ---- */
.igf--highlight .igf-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.igf--highlight .igf-big{grid-column:1/-1}

/* ---- strip: a row that swipes, steps by button or arrow key, and peeks the next post ---- */
.igf-scroller{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;border-radius:var(--igf-radius)}
.igf-scroller::-webkit-scrollbar{display:none}
.igf--strip .igf-list{display:grid;grid-auto-flow:column;gap:var(--igf-gap,8px);
  grid-auto-columns:calc((100% - var(--igf-c1,2) * var(--igf-gap,8px)) / (var(--igf-c1,2) + .3))}
.igf--strip .igf-item{scroll-snap-align:start}
.igf-ctrl{display:flex;justify-content:flex-end;gap:8px;margin:0 0 10px}
.igf-ctrl[hidden]{display:none}
.igf-nav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;
  background:transparent;color:inherit;cursor:pointer;opacity:.85;transition:opacity .2s,background .2s}
@media (hover:hover){.igf-nav:hover{opacity:1;background:rgba(127,127,127,.12)}}
.igf-nav:disabled{opacity:.3;cursor:default;background:none}

/* ---- footer row ---- */
.igf-foot{padding:28px 0;border-top:1px solid var(--ig-line,rgba(0,0,0,.12))}
.igf-foot-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 10px;color:inherit;text-decoration:none;font-weight:600}
.igf-foot .igf-media{border-radius:calc(var(--igf-radius) * .6)}

@media (min-width:640px){
  .igf--grid .igf-list{grid-template-columns:repeat(var(--igf-c2,3),minmax(0,1fr))}
  .igf--masonry .igf-list{columns:var(--igf-c2,3)}
  .igf--strip .igf-list{grid-auto-columns:calc((100% - var(--igf-c2,3) * var(--igf-gap,8px)) / (var(--igf-c2,3) + .3))}
}
@media (min-width:1024px){
  .igf--grid .igf-list{grid-template-columns:repeat(var(--igf-c3,4),minmax(0,1fr))}
  .igf--masonry .igf-list{columns:var(--igf-c3,4)}
  .igf--strip .igf-list{grid-auto-columns:calc((100% - (var(--igf-c3,4) - 1) * var(--igf-gap,8px)) / var(--igf-c3,4))}
  .igf--highlight .igf-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .igf--highlight .igf-big{grid-column:span 2;grid-row:span 2}
  .igf--highlight .igf-big .igf-media{height:100%}
  .igf--highlight .igf-big .igf-link{height:100%}
}

@media (prefers-reduced-motion:reduce){
  .igf-media::after,.igf-vid,.igf-follow,.igf-nav{transition:none}
  .igf-vid{display:none}
  .igf-scroller{scroll-behavior:auto}
}

/* ===== the on-page viewer (one <dialog>, built by instagram.js) =====
   Phone: full screen, the picture on a dark stage, the caption below, post
   buttons in a thumb bar at the bottom. 900px and up: a centred box, the
   picture left and a 380px caption panel right. Every control is 44px. */
html.igv-lock,html.igv-lock body{overflow:hidden}
.igv{--igv-ink:var(--ig-ink,#2B2B28);--igv-ground:var(--ig-ground,#FAF9F6);--igv-soft:var(--ig-soft,#666660);
  --igv-line:var(--ig-line,rgba(0,0,0,.12));--igv-stage:#121310;
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--igv-ink);font-family:var(--ig-font,inherit);overflow:hidden}
.igv[open]{display:grid;place-items:center}
.igv::backdrop{background:rgba(14,15,12,.86)}
.igv-box{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:100%;height:100%;background:var(--igv-ground);
  overflow:hidden;animation:igv-in .22s cubic-bezier(.2,.7,.2,1)}
@keyframes igv-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.igv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.igv-ico{display:block;flex:none}
.igv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0;margin:0;
  border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .2s ease,opacity .2s ease}
.igv-btn:focus-visible,.igv-out:focus-visible,.igv-handle:focus-visible{outline:2px solid var(--igv-ink);outline-offset:2px}
.igv-btn[hidden]{display:none}

/* top: "Post 3 of 8" and Close */
.igv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:max(4px,env(safe-area-inset-top)) 4px 4px 16px;border-bottom:1px solid var(--igv-line)}
.igv-count{margin:0;font-family:var(--ig-font-ui,inherit);font-size:.8125rem;letter-spacing:.04em;color:var(--igv-soft)}
.igv-close:hover{background:rgba(0,0,0,.06)}
.igv-close:focus-visible{outline-offset:-4px}

/* stage: slides side by side, snapped; a finger swipes them natively */
.igv-stage{position:relative;height:min(60dvh,125vw);background:var(--igv-stage);color:#fff}
.igv-stage.is-single{touch-action:pan-y}
.igv-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;outline:0}
.igv-track::-webkit-scrollbar{display:none}
.igv-slide{position:relative;flex:0 0 100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.igv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--igv-stage)}
.igv-s{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(18,19,16,.55);color:#fff}
.igv-s:hover{background:rgba(18,19,16,.8)}
.igv-s:focus-visible{outline-color:#fff}
.igv-s-prev{left:8px}.igv-s-next{right:8px}
.igv-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.igv-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .2s}
.igv-dot.is-on{background:#fff;transform:scale(1.25)}
.igv-stage:has(video) .igv-dots{bottom:auto;top:10px}

/* panel: who posted, the whole caption, the date, the way out to Instagram */
.igv-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.igv-who{padding:8px 16px 0}
.igv-who[hidden]{display:none}
.igv-handle{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:inherit;text-decoration:none;font-weight:600}
.igv-ava{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--ig-paper,#EEECE7)}
.igv-ava-blank{display:grid;place-items:center}
.igv-text{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 4px}
.igv-text[hidden]{display:none}
.igv-cap{margin:0;white-space:pre-line;overflow-wrap:anywhere;font-size:1rem;line-height:1.55}
.igv-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 16px 12px}
.igv-date{font-family:var(--ig-font-ui,inherit);font-size:.8125rem;color:var(--igv-soft)}
.igv-out{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  background:var(--igv-ink);color:var(--igv-ground);font-family:var(--ig-font-ui,inherit);font-weight:600;font-size:.875rem;text-decoration:none;white-space:nowrap}
.igv-out:hover{filter:brightness(1.12)}

/* bottom bar: previous and next post, in thumb reach */
.igv-bar{display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--igv-line)}
.igv-p{flex:1 1 0;padding:0 14px;border:1px solid var(--igv-line);font-family:var(--ig-font-ui,inherit);font-size:.875rem;font-weight:600}
.igv-p:hover{background:rgba(0,0,0,.05)}
.igv-p:disabled{opacity:.35;cursor:default;background:none}
.igv-one .igv-bar{display:none}

@media (min-width:900px){
  .igv-box{width:min(1180px,94vw);height:min(860px,90vh);border-radius:10px;
    grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr) auto}
  .igv-stage{grid-column:1;grid-row:1/-1;height:auto}
  .igv-top{grid-column:2;grid-row:1;padding-top:4px}
  .igv-panel{grid-column:2;grid-row:2}
  .igv-bar{grid-column:2;grid-row:3;padding-bottom:12px}
  .igv-s{width:48px;height:48px}
  .igv-s-prev{left:14px}.igv-s-next{right:14px}
}
@media (prefers-reduced-motion:reduce){
  .igv-box{animation:none}
  .igv-btn,.igv-dot{transition:none}
  .igv-track{scroll-behavior:auto}
}