/* Ensure scrollbar gutter matches site background and remove default body margin */
html {
  background-color: var(--bg-body, var(--bg-main, #0b0b0b));
}

body {
  margin: 0;
}

/* Hide all scrollbars while preserving scroll functionality */
/* Firefox */
* {
  scrollbar-width: none;
}
/* IE/Edge (legacy) */
* {
  -ms-overflow-style: none;
}
/* WebKit (Chrome, Safari, new Edge) */
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
/* ===== Stacked Gallery: Remove paper layers and white frames (scoped) ===== */
/* Scope strictly to the stacked gallery grid */
.ws-wanders-grid,
.ws-wanders-grid .ws-wanders-grid-inner,
.ws-wanders-grid .ws-wander,
.ws-wanders-grid .ws-wander-stack,
.ws-wanders-grid .ws-wander-stack .stack-photo {
  overflow: visible !important; /* ensure box-shadows are not clipped */
}

/* Disable any pseudo-element “paper” layers on stack tiles */
.ws-wanders-grid .ws-wander-stack .stack-photo::before,
.ws-wanders-grid .ws-wander-stack .stack-photo::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Remove any paper styling/frames from the tile wrapper */
.ws-wanders-grid .ws-wander-stack .stack-photo {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  outline: 0; /* focus style handled on the link container */
}

/* Ensure the <img> itself has no background/frame */
.ws-wanders-grid .ws-wander-stack .stack-photo img {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Depth via shadows ONLY (front print) */
.ws-wanders-grid .ws-wander-stack .stack-photo.s3 {
  box-shadow:
    0 6px 12px -2px rgba(0, 0, 0, 0.06),
    0 26px 46px -8px rgba(50, 45, 40, 0.12) !important;
}

/*
Theme Name: Vibe Theme
Theme URI: https://wandersnaps.local
Author: Wandersnaps
Author URI: https://wandersnaps.local
Description: Modern, secure, and high-performance theme for Wandersnaps.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.2
Text Domain: vibe-theme
*/

/* --- CUSTOM SERIF (Martina Plantijn) --- */
@font-face {
  font-family: 'CustomSerif';
  src: url('./assets/fonts/TestMartinaPlantijn-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CustomSerif';
  src: url('./assets/fonts/TestMartinaPlantijn-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CustomSerif';
  src: url('./assets/fonts/TestMartinaPlantijn-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'CustomSerif';
  src: url('./assets/fonts/TestMartinaPlantijn-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* --- CUSTOM SANS (Söhne) --- */
@font-face {
  font-family: 'Söhne';
  src: url('./assets/fonts/TestSöhne-Extraleicht.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('./assets/fonts/TestSöhne-Leicht.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('./assets/fonts/TestSöhne-Buch.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('./assets/fonts/TestSöhne-Halbfett.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('./assets/fonts/TestSöhne-Fett.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('./assets/fonts/TestSöhne-Kräftig.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('./assets/fonts/TestSöhne-Extrafett.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* --- CUSTOM SANS (Untitled Sans) --- */
/* 
@font-face {
  font-family: 'Untitled Sans';
  src: url('./assets/fonts/TestUntitledSans-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('./assets/fonts/TestUntitledSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('./assets/fonts/TestUntitledSans-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('./assets/fonts/TestUntitledSans-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
*/

/* --- VARIABLE ASSIGNMENT --- */
 :root {
  --font-serif: 'CustomSerif', 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Design Tokens */
 :root {
  /* Theme mode tokens */
  --bg-main: #FAF9F6;
  --text-main: #161514; /* Warm Ink */
  --color-mid: #888888; /* secondary text/borders */

  /* Fonts */
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'CustomSerif', serif;
  --font-size-ui: clamp(14px, 0.9vw, 16px);
  /* Typography system */
  --place-size: clamp(4.5rem, 6vw, 8rem);
  --year-size: clamp(3.25rem, 4.5vw, 6rem);
  --ui-size: 1.125rem;
  --meta-size: 0.95rem;
  /* Canonical site title size (base for nav/info) */
  --site-title-size: var(--meta-size);
  --place-lh: 0.85;
  --year-lh: 0.95;
  --year-track: 0.04em;

  /* Font sizes (editorial scale) */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 0.9375rem;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: clamp(22px, 2.4vw, 26px);
  --fs-2xl: clamp(28px, 3.5vw, 36px);
  --fs-3xl: clamp(36px, 5vw, 48px);
  /* High-impact display size for hero/inline/pattern titles */
  --fs-display: var(--place-size);

  /* Line heights & weights */
  --lh-body: 1.57;
  --lh-heading: 1.15;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Colors */
  --color-bg: var(--bg-main);
  --color-surface: #f6f7f8;
  --color-text: var(--text-main);
  --color-muted: var(--color-mid);
  /* Aliases for clarity */
  --text-primary: var(--text-main);
  --text-secondary: var(--color-mid);
  --color-border: #e5e7eb;
  --color-accent: #1f2937;
  --color-accent-hover: #0f766e;
  --accent-red: #e11d48; /* brand red */

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  /* Shared gap between a title and its first inline thumbnail */
  --title-thumb-gap: 14px;

  /* Layout */
  --container-reading: 760px;
  --container-wide: 1200px;
  --radius: 12px;
  --sidebar-w: 240px;
  --page-padding: 64px;     /* global page side padding */
  --ws-topbar-h: 100px;     /* header height for vertical centering */
}

/* Modern CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: clamp(15px, 0.9375rem + 0.2vw, 16px);
  line-height: 1.57;
  /* Do NOT reserve extra gutter; prevents left/right shift/white bar */
  scrollbar-gutter: auto;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-main);
  background: var(--bg-main);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Keep vertical scrollbar space consistent across pages */
  overflow-y: scroll;
}

/* UI & Metadata Typography */
.site-title,
.site-description,
.ws-brand-title,
.ws-brand-tagline,
.main-navigation a,
.nav-menu a,
.ws-menu a,
.date-label,
.year-label,
.ws-year-label,
.entry-meta,
.article-meta,
.ws-footer p,
.copyright,
.info-toggle,
.info-link,
.ws-info a {
  font-size: var(--meta-size) !important;
  line-height: 1.4;
}

/* Dark Mode Overrides */
html.dark-mode {
  --bg-main: #161514; /* Warm Ink */
  --text-main: #F0EFEB;
  --color-mid: #B0AEA8; /* Muted text */
}

/* Smooth theme transition (applies only during explicit toggle) */
html.theme-animating,
html.theme-animating * {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, fill 0.28s ease, stroke 0.28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-animating,
  html.theme-animating * {
    transition: none !important;
  }
}

/* ===== Wanders Grid (3-column default; 4 on ultra-wide) ===== */
.ws-wanders-grid {
  width: 100%;
}
.front-page .ws-wanders-grid{
  /* Align grid to the header’s visual track:
     - Left edge with site title (page padding)
     - Right edge with theme toggle button (page padding from viewport edge) */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.page-places .ws-wanders-grid{
  /* Mirror front-page grid alignment on Places page */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.ws-wanders-grid-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* More breathing room between stacks without changing overall container width */
  column-gap: clamp(44px, 5vw, 88px);
  row-gap: clamp(42.67px, 3.55vw, 74.67px);
}
/* Places (full page): keep three columns on large desktops for consistency */
.page-places .ws-wanders-grid-inner{
  grid-template-columns: repeat(3, 1fr);
}
/* Card wrapper: square tile + caption */
.ws-wander-card{
  display:flex;
  flex-direction:column;
}
.ws-wander-caption{
  display:block;
  margin-top: clamp(28px, 2.6vw, 48px);
  align-self: center;
  text-align: center;
}
.ws-wander-card{ overflow: visible; }
.ws-wander-caption a{
  color:inherit;
  text-decoration:none;
}
.ws-wander-caption-text{
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  line-height: 1;
  color: var(--color-text, #eaeaea);
}
@media (max-width: 768px) {
  .ws-wander-caption-text {
    font-size: clamp(1.25rem, 1.56vw, 1.69rem);
  }
}
html.dark-mode .ws-wander-caption-text{ color: #ffffff; }
html:not(.dark-mode) .ws-wander-caption-text{ color: #111111; }
.ws-wander-caption-year{
  display:block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: var(--meta-size) !important; /* match site byline size */
  line-height: 1;
  color: var(--color-muted, #a0a0a0);
}
/* Hard guarantee: captions and years are always visible below stacks */
.ws-wander-caption,
.ws-wander-caption-year{
  visibility: visible !important;
  opacity: 1 !important;
}
/* Ensure captions never disappear on narrower viewports */
@media (max-width: 1280px){
  .ws-wander-caption{ display:block !important; opacity:1 !important; }
  .ws-wander-caption-year{ display:block !important; }
}
@media (max-width: 1280px) {
  .ws-wanders-grid-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .ws-wanders-grid-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ws-wanders-grid-inner { grid-template-columns: 1fr; }
}
/* Allow a fourth column only on extremely wide screens */
@media (min-width: 2560px) {
  .ws-wanders-grid-inner { grid-template-columns: repeat(4, 1fr); }
}

.ws-wander {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
.ws-wander-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}
.ws-wander-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  background-color: var(--bg-main);
  width: 100%;
  height: 100%;
}
/* Layout variants (three-image compositions) */
.ws-wander.layout-a .ws-wander-tiles { grid-template-areas: "a b" "a c"; }
.ws-wander.layout-b .ws-wander-tiles { grid-template-areas: "a a" "b c"; }
.ws-wander.layout-c .ws-wander-tiles { grid-template-areas: "b a" "c a"; }
.ws-wander.layout-d .ws-wander-tiles { grid-template-areas: "b c" "a a"; }

.ws-wander .tile { overflow: hidden; border-radius: 0; }
.ws-wander .t1 { grid-area: a; }
.ws-wander .t2 { grid-area: b; }
.ws-wander .t3 { grid-area: c; }

/* Internal corner rounding for non-outer corners */
.ws-wander.layout-a .t1 { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.ws-wander.layout-a .t2 { border-bottom-left-radius: 2px; }
.ws-wander.layout-a .t3 { border-top-left-radius: 2px; }

.ws-wander.layout-b .t1 { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
.ws-wander.layout-b .t2 { border-top-right-radius: 2px; }
.ws-wander.layout-b .t3 { border-top-left-radius: 2px; }

.ws-wander.layout-c .t1 { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.ws-wander.layout-c .t2 { border-bottom-right-radius: 2px; }
.ws-wander.layout-c .t3 { border-top-right-radius: 2px; }

.ws-wander.layout-d .t1 { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.ws-wander.layout-d .t2 { border-bottom-right-radius: 2px; }
.ws-wander.layout-d .t3 { border-bottom-left-radius: 2px; }

/* Ensure images fill their tiles (override inline thumbnail sizing) */
.ws-wander .ws-inline-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  opacity: 1;
  transition: opacity 200ms ease;
}

.ws-wander:hover .ws-inline-thumb-img { opacity: 1; }

/* Stacked “bundle” thumbnails (piled photos) */
.ws-wander-stack{
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  /* ensure shadows of rotated tiles are not clipped */
  overflow: visible;
  padding: 0;
}
.ws-wander-stack .stack-photo{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  background: transparent;
  border-radius: 0;
  /* allow pseudo-element paper edges and box-shadows to render fully */
  overflow: visible;
  box-shadow: none; /* set on front print only */
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, opacity .25s ease;
  will-change: transform;
  border: 0;
  padding: 0;
}
.ws-wander-stack .stack-photo .ws-inline-thumb-img{
  /* Maintain aspect ratio and fill the frame (no letterboxing) */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  /* Remove filter-based shadows to avoid muddy compositing with layers */
  filter: none !important;
  transition: opacity .28s ease, filter .28s ease;
}
/* Front print: apply consistent, soft box-shadows to the wrapper (not img) */
.ws-wander-stack .stack-photo.s3{
  box-shadow:
    0 6px 12px -2px rgba(0, 0, 0, 0.06),
    0 26px 46px -8px rgba(50, 45, 40, 0.12);
}
/* Simulate two subtle white paper sheets behind the top print */
.ws-wander-stack .stack-photo.s3::before,
.ws-wander-stack .stack-photo.s3::after{
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: inherit;
  z-index: -1;                  /* behind the front print wrapper */
  pointer-events: none;         /* never block clicks */
  border: 0;
  padding: 0;
  /* softer/lighter shadow than the main card */
  box-shadow:
    0 5px 10px -2px rgba(0, 0, 0, 0.045),
    0 22px 38px -8px rgba(60, 50, 45, 0.09);
  opacity: 1;
  transition: opacity .25s ease;
}
.ws-wander-stack .stack-photo.s3::before{
  transform: translate(-10px, 8px) rotate(-2deg);
}
.ws-wander-stack .stack-photo.s3::after{
  transform: translate(10px, 10px) rotate(2deg);
}
/* Variant system (CSS variables keep rotations/offsets subtle) */
.ws-wander.stack-a .ws-wander-stack{
  --p1-rot: -3deg; --p1-scale: .965; --p1-x: -4px; --p1-y: -4px;
  --p2-rot:  3deg; --p2-scale: .985; --p2-x:  3px; --p2-y:  2px;
  --p3-rot:  0deg; --p3-scale: 1;    --p3-x:  0px; --p3-y:  0px;
  --p4-rot: -2deg; --p4-scale: .95;  --p4-x: -6px; --p4-y:  6px;
  --p5-rot:  2deg; --p5-scale: .945; --p5-x:  6px; --p5-y: -6px;
}
.ws-wander.stack-b .ws-wander-stack{
  --p1-rot:  4deg; --p1-scale: .96;  --p1-x:  3px; --p1-y: -3px;
  --p2-rot: -3deg; --p2-scale: .985; --p2-x: -3px; --p2-y:  3px;
  --p3-rot:  0.5deg; --p3-scale: 1;  --p3-x:  0px; --p3-y:  0px;
  --p4-rot: -3.5deg; --p4-scale: .95;  --p4-x: -5px; --p4-y: -4px;
  --p5-rot:  3deg; --p5-scale: .945; --p5-x:  5px; --p5-y:  5px;
}
.ws-wander.stack-c .ws-wander-stack{
  --p1-rot: -4deg; --p1-scale: .96;  --p1-x: -3px; --p1-y:  3px;
  --p2-rot:  3.5deg; --p2-scale: .985; --p2-x:  4px; --p2-y: -2px;
  --p3-rot:  0deg; --p3-scale: 1;    --p3-x:  0px; --p3-y:  0px;
  --p4-rot:  3deg; --p4-scale: .95;  --p4-x:  6px; --p4-y: -6px;
  --p5-rot: -3deg; --p5-scale: .945; --p5-x: -6px; --p5-y:  6px;
}
.ws-wander.stack-d .ws-wander-stack{
  --p1-rot:  3.5deg; --p1-scale: .965; --p1-x:  4px; --p1-y:  0px;
  --p2-rot: -4deg; --p2-scale: .985; --p2-x: -4px; --p2-y:  2px;
  --p3-rot:  0deg; --p3-scale: 1;    --p3-x:  0px; --p3-y:  0px;
  --p4-rot:  2deg; --p4-scale: .95;  --p4-x:  6px; --p4-y:  6px;
  --p5-rot: -2deg; --p5-scale: .945; --p5-x: -6px; --p5-y: -6px;
}
/* Apply variables to each photo in the stack */
.ws-wander-stack .stack-photo:nth-child(1){
  transform: translate(calc(-50% + var(--p1-x, 0px)), calc(-50% + var(--p1-y, 0px))) rotate(var(--p1-rot, -3deg)) rotate(var(--stack-rot, 0deg)) rotate(var(--p1-rot-shift, 0deg)) scale(var(--p1-scale, .96));
  z-index: 1;
}
.ws-wander-stack .stack-photo:nth-child(2){
  transform: translate(calc(-50% + var(--p2-x, 0px)), calc(-50% + var(--p2-y, 0px))) rotate(var(--p2-rot, 3deg)) rotate(var(--stack-rot, 0deg)) rotate(var(--p2-rot-shift, 0deg)) scale(var(--p2-scale, .985));
  z-index: 2;
}
.ws-wander-stack .stack-photo:nth-child(3){
  transform: translate(calc(-50% + var(--p3-x, 0px)), calc(-50% + var(--p3-y, 0px))) rotate(var(--p3-rot, 0deg)) rotate(var(--stack-rot, 0deg)) rotate(var(--p3-rot-shift, 0deg)) scale(var(--p3-scale, 1));
  z-index: 3;
}
.ws-wander-stack .stack-photo:nth-child(4){
  transform: translate(calc(-50% + var(--p4-x, 0px)), calc(-50% + var(--p4-y, 0px))) rotate(var(--p4-rot, 0deg)) rotate(var(--stack-rot, 0deg)) rotate(var(--p4-rot-shift, 0deg)) scale(var(--p4-scale, .95));
  z-index: 0;
}
.ws-wander-stack .stack-photo:nth-child(5){
  transform: translate(calc(-50% + var(--p5-x, 0px)), calc(-50% + var(--p5-y, 0px))) rotate(var(--p5-rot, 0deg)) rotate(var(--stack-rot, 0deg)) rotate(var(--p5-rot-shift, 0deg)) scale(var(--p5-scale, .945));
  z-index: -1;
}

/* Mobile/tablet: neutralize scaling to prevent oversized stacks */
@media (max-width: 860px) {
  .ws-wander-stack{
    --p1-scale: 1 !important;
    --p2-scale: 1 !important;
    --p3-scale: 1 !important;
    --p4-scale: 1 !important;
    --p5-scale: 1 !important;
  }
}

/* Hover: subtle, natural rotational shift (2–4deg) */
.ws-wander.stack-a:hover .ws-wander-stack{
  --p1-rot-shift: 1.5deg;
  --p2-rot-shift: -1deg;
  --p3-rot-shift: 1deg;
}
.ws-wander.stack-b:hover .ws-wander-stack{
  --p1-rot-shift: -1deg;
  --p2-rot-shift: 1.5deg;
  --p3-rot-shift: -1deg;
}
.ws-wander.stack-c:hover .ws-wander-stack{
  --p1-rot-shift: 1deg;
  --p2-rot-shift: -1.5deg;
  --p3-rot-shift: 1deg;
}
.ws-wander.stack-d:hover .ws-wander-stack{
  --p1-rot-shift: -1.5deg;
  --p2-rot-shift: 1deg;
  --p3-rot-shift: -1deg;
}

/* Hover overlay + centered location reveal */
.ws-wander-link {
  position: relative;
  isolation: isolate; /* constrain blend to this link box */
}
.ws-wander-overlay{
  position: absolute;
  inset: 0;
  /* Softer dark grey tint matching text grey */
  background: rgba(17, 17, 17, 0.55);
  /* Use backdrop blur to avoid halo from layer blur */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: normal; /* solid dark overlay */
}
.ws-wander-location{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  opacity: 0;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 10px;
}
.ws-wander-location-text{
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.8rem);
  line-height: 1;
  color: #ffffff;
  text-shadow: none;
}
/* Year accent inside overlay and caption */
.ws-wander-year{
  color: var(--accent-red);
  font-family: var(--font-serif);
  font-weight: inherit;
}
html.dark-mode .ws-wander-location-text{
  color: #fff;
}
.ws-wander:hover .ws-wander-overlay{
  opacity: 1;
}
.ws-wander:hover .ws-wander-location{
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
/* Image count (top-right) — hidden by default, shown on hover */
.ws-wander-count{
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  will-change: opacity, transform;
  background: rgba(17, 17, 17, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: 9999px;
  padding: 6px 10px;
}
.ws-wander-count-text{
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--meta-size);
  line-height: 1;
  color: #ffffff;
}
/* Replace centered title with count when hovering the image stack */
.ws-wander:hover .ws-wander-count{ opacity: 1; transform: translateY(0); }
.ws-wander-link:hover .ws-wander-count{ opacity: 1; transform: translateY(0); }
.ws-wander:hover .ws-wander-location{ opacity: 0; transform: translate(-50%, -50%) translateY(8px); }
/* Also show overlay + count when hovering the caption/title area */
.ws-wander-card:hover .ws-wander-overlay{ opacity: 1; }
.ws-wander-card:hover .ws-wander-count{ opacity: 1; transform: translateY(0); }
.ws-wander-card:hover .ws-wander-location{ opacity: 0; transform: translate(-50%, -50%) translateY(8px); }
/* Mirror image focal/flattening behaviors on caption hover for visual consistency */
.ws-wander-card:hover .ws-wander-stack .stack-photo{ opacity: 0; }
.ws-wander-card:hover .ws-wander-stack .stack-photo:nth-child(3){ opacity: 1; }
.ws-wander-card:hover .ws-wander-stack:not(:has(.stack-photo:nth-child(3))) .stack-photo:nth-child(2){ opacity: 1; }
.ws-wander-card:hover .ws-wander-stack:not(:has(.stack-photo:nth-child(2))) .stack-photo:nth-child(1){ opacity: 1; }
/* Keep stacks visible when hovering caption area too */
.ws-wander-card:hover .ws-wander-stack,
.ws-wander-card:hover .ws-wander-stack .stack-photo{
  overflow: visible;
}
.ws-wander-card:hover .ws-wander-stack .stack-photo.s3{ box-shadow: none !important; }
.ws-wander-card:hover .ws-wander-stack .stack-photo.s3::before,
.ws-wander-card:hover .ws-wander-stack .stack-photo.s3::after{
  opacity: 0;
  box-shadow: none;
}
/* Neutralize rotations/offsets when hovering caption */
.ws-wander-card:hover .ws-wander-stack{
  --p1-x: 0px; --p1-y: 0px; --p1-rot: 0deg; --p1-rot-shift: 0deg; --p1-scale: 1;
  --p2-x: 0px; --p2-y: 0px; --p2-rot: 0deg; --p2-rot-shift: 0deg; --p2-scale: 1;
  --p3-x: 0px; --p3-y: 0px; --p3-rot: 0deg; --p3-rot-shift: 0deg; --p3-scale: 1;
  --p4-x: 0px; --p4-y: 0px; --p4-rot: 0deg; --p4-rot-shift: 0deg; --p4-scale: 1;
  --p5-x: 0px; --p5-y: 0px; --p5-rot: 0deg; --p5-rot-shift: 0deg; --p5-scale: 1;
  --stack-rot: 0deg !important;
}
/* On hover: show only the foremost available print.
   Prefer 3rd child (our designated front), else 2nd, else 1st. */
.ws-wander:hover .ws-wander-stack .stack-photo{
  opacity: 0;
}
.ws-wander:hover .ws-wander-stack .stack-photo:nth-child(3){
  opacity: 1;
}
.ws-wander:hover .ws-wander-stack:not(:has(.stack-photo:nth-child(3))) .stack-photo:nth-child(2){
  opacity: 1;
}
.ws-wander:hover .ws-wander-stack:not(:has(.stack-photo:nth-child(2))) .stack-photo:nth-child(1){
  opacity: 1;
}
/* Do not blur the image layers on hover; rely on overlay backdrop blur */
.ws-wander:hover .ws-wander-stack .stack-photo .ws-inline-thumb-img{
  opacity: 1 !important;
  filter: none !important;
}

/* Contain blur glow: clip stack contents during hover so no halo appears */
/* Keep stacks visible on hover as well */
.ws-wander:hover .ws-wander-stack,
.ws-wander:hover .ws-wander-stack .stack-photo{
  overflow: visible;
}

/* Fade out any stack drop-shadows on hover for a clean flat tint */
.ws-wander:hover .ws-wander-stack .stack-photo.s3{
  box-shadow: none !important;
}
.ws-wander:hover .ws-wander-stack .stack-photo.s3::before,
.ws-wander:hover .ws-wander-stack .stack-photo.s3::after{
  opacity: 0;
  box-shadow: none;
}

/* On hover: align all stack photos perfectly (no rotation/offsets) */
.ws-wander.stack-a:hover .ws-wander-stack,
.ws-wander.stack-b:hover .ws-wander-stack,
.ws-wander.stack-c:hover .ws-wander-stack,
.ws-wander.stack-d:hover .ws-wander-stack{
  --p1-x: 0px; --p1-y: 0px; --p1-rot: 0deg; --p1-rot-shift: 0deg; --p1-scale: 1;
  --p2-x: 0px; --p2-y: 0px; --p2-rot: 0deg; --p2-rot-shift: 0deg; --p2-scale: 1;
  --p3-x: 0px; --p3-y: 0px; --p3-rot: 0deg; --p3-rot-shift: 0deg; --p3-scale: 1;
  --p4-x: 0px; --p4-y: 0px; --p4-rot: 0deg; --p4-rot-shift: 0deg; --p4-scale: 1;
  --p5-x: 0px; --p5-y: 0px; --p5-rot: 0deg; --p5-rot-shift: 0deg; --p5-scale: 1;
  /* Override inline jitter rotation to fully align */
  --stack-rot: 0deg !important;
}

@media (prefers-reduced-motion: reduce){
  .ws-wander-stack .stack-photo{ transition: none; }
}

/* Universal application */
html,
body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh; /* Ensure bg covers full screen */
}

/* Force all text & links to inherit in dark mode */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode p,
html.dark-mode a,
html.dark-mode span,
html.dark-mode .pattern-title {
  color: var(--text-main) !important;
}

/* Explicitly ensure brand/title elements stay primary in dark mode */
html.dark-mode .ws-brand-title,
html.dark-mode .ws-brand-tagline,
html.dark-mode .site-title,
html.dark-mode .site-description {
  color: var(--text-main) !important;
  opacity: 1 !important;
}

/* Global heading defaults */
h1, h2 {
  font-family: var(--font-serif);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
}

/* Shared high-impact display heading utility and application */
.display-heading-xl,
.ws-hero h1,
.ws-inline-title,
.pattern-title,
.article-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--place-lh);
  letter-spacing: -0.01em;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  /* hover effects disabled */
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ws-container {
  max-width: var(--container-wide);
  margin-left: 0;
  margin-right: auto;
  padding: var(--space-xl) var(--space-md) var(--space-xl) 0;
}
/* Remove trailing right padding on front page so grid can truly align */
.front-page .ws-container{ padding-right: 0; }

.ws-page-header {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  position: relative; /* anchor for absolute-positioned toggle */
}

.ws-page-header h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
}

.ws-tagline {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.ws-hero {
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ws-hero h1 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.ws-hero p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-lg);
}

.ws-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.wp-block-post-template {
  gap: 10px;
}

.ws-post {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.ws-post-title {
  margin-top: 0;
  margin-bottom: 0.1em;
  font-size: var(--fs-lg);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* Clamp any inline images within titles to text height */
.ws-post-title img,
.ws-inline-title img,
.ws-inline-thumbs img {
  height: 0.72em !important;
  width: auto;
  object-fit: cover;
  vertical-align: baseline;
  display: inline-block;
  line-height: 1;
}

@media (max-width: 480px) {
  .ws-post-title {
    line-height: 1;
  }
}

.ws-post-excerpt {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* Article Template */
.article-container {
  max-width: var(--container-reading);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-md);
}

.article-header {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.article-meta {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.article-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.single .article-title {
  margin-bottom: 0;
}

.single .article-header.article-container {
  padding-left: 0;
  padding-bottom: 0;
}

.single article .article-container:not(.article-header) {
  padding-left: 0;
}

/* Exact spacing from title baseline to gallery top on single posts */
.single .article-header {
  margin-bottom: 28px;
}

/* Ensure article containers remain visible and spaced */
.single article .article-container:not(.article-header) {
  height: auto;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  overflow: visible;
}

.article-featured {
  margin: 0 0 var(--space-xl);
  border-radius: 0;
  overflow: hidden;
}

/* Wide hero separate from reading container */
.article-hero {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0 var(--space-md);
  margin-bottom: var(--space-xl);
}

.article-hero-media {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

.article-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.entry-content {
  font-size: var(--fs-lg);
}

.entry-content p {
  margin: 0 0 var(--space-lg);
}

.entry-content h2,
.entry-content h3 {
  font-family: var(--font-serif);
  line-height: var(--lh-heading);
  margin: var(--space-xl) 0 var(--space-sm);
}

.entry-content h2 { font-size: var(--fs-2xl); }
.entry-content h3 { font-size: var(--fs-xl); }

.entry-content img { border-radius: 0; }

.entry-content ul,
.entry-content ol {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-lg);
}

/* ===== Inline Archive (Homepage) ===== */
.ws-inline-archive {
  display: block;
}

.ws-year-block {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
}
.ws-inline-archive .ws-year-block { flex-wrap: wrap; gap: 20px; }

.ws-year-label {
  font-family: var(--font-sans);
  font-size: var(--year-size);
  font-weight: 300;
  letter-spacing: var(--year-track);
  line-height: var(--year-lh);
  color: var(--color-text);
  margin: 0 0 clamp(0.4rem, 1.2vw, 0.75rem);
  flex: 0 0 100%;
}
.ws-year-label .ws-year-slash { font-weight: 400; }
.ws-year-label .ws-year-text { font-weight: 900; color: var(--color-text); }

.ws-inline-row {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  margin: 0;
  /* Ensure the row itself aligns to the text baseline and uses title metrics */
  vertical-align: baseline;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--place-lh);
  letter-spacing: -0.01em;
  margin-bottom: clamp(0.2rem, 0.6vw, 0.4rem);
}

.ws-inline-title {
  display: inline;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--place-lh);
  letter-spacing: -0.01em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.ws-inline-title a { text-decoration: none; transition: color .2s ease; }
.ws-inline-archive .ws-inline-title a:hover {
  color: var(--color-accent-hover);
}
html.dark-mode .ws-inline-archive .ws-inline-title a:hover {
  color: var(--color-accent-hover) !important;
}

/* Slightly relax line-height when narrow screens force title wrapping */
@media (max-width: 700px) {
  :root {
    --place-lh: 0.88;
  }
}

.ws-inline-archive .ws-inline-title,
.ws-inline-archive .ws-inline-title a {
  font-family: var(--font-serif);
  font-weight: 300;
}

.ws-inline-thumbs {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-left: var(--title-thumb-gap);
  /* Match the title's font-size so 1em images equal the text block height */
  font-size: var(--fs-display);
  font-family: var(--font-serif);
  line-height: 1;
}

.ws-inline-count {
  display: inline-block;
  margin-left: var(--space-2xs);
  margin-top: 0;
  font-family: var(--font-sans);
  color: var(--color-muted);
  font-weight: var(--weight-regular);
  font-size: var(--meta-size);
  line-height: 1;
  letter-spacing: 0;
  align-self: flex-start;
  position: relative;
  top: 0;
  opacity: .75;
}
.ws-inline-count:hover { opacity: .9; }

.ws-inline-thumb {
  display: inline-block;
  line-height: 1;
}

.ws-inline-thumb-img {
  width: auto;
  height: 0.72em !important;
  object-fit: cover;
  border-radius: 0;
  vertical-align: baseline;
  align-self: baseline;
  margin: 0;
}
.ws-inline-thumbs .ws-inline-thumb-img:first-of-type { margin-left: 0; }

/* ===== Layout Shell (Sidebar + Content) ===== */
#page-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  /* Full-bleed container that never exceeds the visual viewport */
  background: transparent;
  --page-padding: 64px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  overflow: visible; /* allow full-bleed children like header to render */
}

.ws-sidebar {
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 100vh;
  padding: 48px;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  border-left: none;
  transform: translate3d(100%, 0, 0);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  backface-visibility: hidden;
  z-index: 100;
}

.ws-brand {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: 60px;
}

.ws-brand-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  line-height: 1.375rem;
  letter-spacing: 0;
}

.ws-brand-title {
  text-decoration: none;
}

.ws-brand-tagline {
  margin: 0;
  color: var(--text-main);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

/* Ensure brand/title elements are full-strength text color */
.ws-brand-title,
.ws-brand-tagline,
.site-title,
.site-description {
  color: var(--text-main) !important;
  opacity: 1 !important;
}

/* Strengthen WP core title if used */
.site-title {
  font-weight: 700;
  font-size: var(--site-title-size);
}

.ws-nav {
  margin: auto 0; /* vertically center between brand and info */
  padding-top: 0;
}

.ws-menu {
  font-family: var(--font-sans);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.ws-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: var(--meta-size);
  color: #B3B3B3;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

/* hover effects disabled for menu links */

.ws-menu a::before {
  content: "";
  width: 8px;
  height: 1.5px;
  background: currentColor;
  opacity: 0;
  transform: translateX(0);
  transition: opacity .2s ease, transform .2s ease;
}

.ws-menu .current-menu-item > a,
.ws-menu a[aria-current="page"],
.ws-menu a.is-active {
  color: var(--text-main);
  font-weight: 700;
}

.ws-menu .current-menu-item > a::before,
.ws-menu a[aria-current="page"]::before,
.ws-menu a.is-active::before {
  opacity: 1;
  transform: translateX(0);
}

.ws-info { margin-top: var(--space-xl); }

.ws-info a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: var(--meta-size);
  color: #B3B3B3;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
/* hover effects disabled for info links */
.ws-info a::before {
  content: "";
  width: 8px;
  height: 1.5px;
  background: currentColor;
  opacity: 0;
  transform: translateX(0);
  transition: opacity .2s ease, transform .2s ease;
}
.ws-info a[aria-current="page"],
.ws-info a.is-active {
  color: var(--text-main);
  font-weight: 700;
}
.ws-info a[aria-current="page"]::before,
.ws-info a.is-active::before {
  opacity: 1;
  transform: translateX(0);
}

/* Global Theme Toggle (fixed to top-right) */
#global-theme-toggle {
  position: fixed;
  top: calc((var(--ws-topbar-h) - 44px) / 2);
  right: calc(var(--page-padding) + 24px); /* push inside header content box */
  z-index: 100000; /* must be above lightbox overlay */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
	background: rgba(255, 255, 255, 0.8); /* match floating dock (nav) light bg */
  -webkit-backdrop-filter: blur(10px);   /* match floating dock blur */
  backdrop-filter: blur(10px);
  border: none; /* remove outline */
  color: var(--text-main, #000);
  /* Scope blending effects within this element only */
  isolation: isolate;
  /* Avoid blocking clicks under the circular container except the button */
  pointer-events: none;
}
#global-theme-toggle #theme-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  line-height: 0;
  /* Re-enable interactions on the button itself */
  pointer-events: auto;
}
#global-theme-toggle #theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  /* Use theme text color for icon strokes in all modes */
  color: var(--text-main);
  mix-blend-mode: normal;
}

/* Action buttons group (left of the theme toggle) */
#global-actions {
  position: static;              /* stay inside header-inner */
  display: flex;
  align-items: center;
  height: auto;
  gap: 24px;                     /* 16px + 8px spacing; About shifts left, toggle stays put */
  margin-left: auto;             /* push group to right side */
  flex: 0 0 auto;                /* never grow beyond container */
  min-width: 0;                  /* allow text to shrink/truncate if needed */
}

.ws-round-btn,
.ws-pill-btn {
  background: rgba(250, 249, 246, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: none;
  color: var(--text-main, #000);
}
.ws-round-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}
.ws-round-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  mix-blend-mode: difference;
  color: #fff;
}
/* About link: text-only, baseline-aligned, no glass background */
.ws-pill-btn {
  display: inline-flex;
  align-items: center; /* center text within the 44px group track */
  justify-content: center;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  /* Match site header title size for consistency */
  font-size: var(--site-title-size);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.375rem; /* match site title line height */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease;
}
/* Active state for About link */
.ws-pill-btn.is-active,
.ws-pill-btn[aria-current="page"] {
  color: var(--text-main) !important;
}
/* Dark mode: non-selected = token grey; selected = white */
html.dark-mode .ws-pill-btn.is-active,
html.dark-mode .ws-pill-btn[aria-current="page"] {
  color: #fff !important;
}

/* Hover behavior */
/* Light mode: brand red on hover */
html:not(.dark-mode) .ws-pill-btn:hover {
  color: var(--accent-red);
}
/* Ensure active pill also turns red on hover in light mode */
html:not(.dark-mode) .ws-pill-btn.is-active:hover,
html:not(.dark-mode) .ws-pill-btn[aria-current="page"]:hover {
  color: var(--accent-red) !important;
}

/* Dark mode: non-selected link = token grey; hover = white (smooth transition) */
html.dark-mode .ws-pill-btn,
body.dark-mode .ws-pill-btn {
  color: var(--color-mid) !important;
}
html.dark-mode .ws-pill-btn:hover,
body.dark-mode .ws-pill-btn:hover {
  color: #fff !important;
}

/* Dark mode glass override for action buttons */
html.dark-mode .ws-round-btn,
body.dark-mode .ws-round-btn,
html.dark-mode .ws-pill-btn,
body.dark-mode .ws-pill-btn {
  background: rgba(30, 30, 30, 0.8);
  border: none;
}
html.dark-mode .ws-round-btn,
body.dark-mode .ws-round-btn {
  color: #fff;
}

/* Hide action buttons while lightbox is open */
body.lightbox-open #global-actions {
  display: none !important;
}

/* Spin animation for reload button */
@keyframes ws-spin-once {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ws-round-btn.is-spinning svg {
  animation: ws-spin-once .6s linear 1;
}
@media (prefers-reduced-motion: reduce) {
  .ws-round-btn.is-spinning svg {
    animation: none;
  }
}

/* Dark mode glass override for toggle */
html.dark-mode #global-theme-toggle,
body.dark-mode #global-theme-toggle {
  background: rgba(17, 17, 17, 0.6); /* match floating dock (nav) dark bg */
  color: #fff;
  border: none; /* remove outline in dark mode as well */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ws-content {
  min-width: 0;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Make main grow to push footer to the bottom when content is short */
.ws-content > main {
  flex: 1 1 auto;
  padding-bottom: var(--space-3xl);
}

/* Footer stacked within content column, aligned with header text */
.ws-footer {
  padding: var(--space-2xl) 0;
  margin-top: auto;
  text-align: left; /* ensure footer text aligns with left gutter */
}

.ws-footer p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--meta-size);
  line-height: 1;
}

/* Sticky header inside content column */
.ws-topbar {
  position: sticky;
  top: 0;
  z-index: 10001;
  background: transparent;
  --ws-topbar-h: 100px;
  height: var(--ws-topbar-h);
  padding: 0;
}
.ws-topbar .ws-current-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--meta-size);
  line-height: 1;
  color: var(--accent-red);
  letter-spacing: normal;
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  white-space: nowrap;
}
.ws-topbar .ws-header-arrow {
  /* Keep equal spacing around the arrow:
     - Left side spacing comes from the branding row gap
     - Right side matches that gap */
  margin-inline: 0 0.6em;
}
.ws-topbar .ws-brand-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}
.ws-topbar .ws-brand-tagline {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}
/* Dark mode: current label uses muted grey, not primary text */
html.dark-mode .ws-topbar .ws-current-label {
  color: var(--color-muted) !important;
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.6em;
  width: 100%;
  overflow-x: clip; /* never let the right column visually spill out */
}
/* Ensure the header always provides a fixed vertical centering track */
.ws-topbar .header-inner {
  height: var(--ws-topbar-h);
  /* Full-bleed wrapper while keeping inner content aligned to page grid */
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--page-padding);
  /* Right padding aligns with grid; theme toggle now lives in-flow */
  padding-right: var(--page-padding);
  box-sizing: border-box;
  background: transparent;
}
/* (moved to end with !important to override deep reset) */
/* Ensure flex children can shrink to avoid overflow in nowrap rows */
.ws-topbar .header-inner > * { min-width: 0; }
.ws-topbar .site-branding {
  position: relative;
  display: inline-flex;           /* title + label on one row */
  align-items: center;            /* vertically center within header track */
  gap: 0.6em;
  height: 100%;
  white-space: nowrap;            /* prevent wrapping of the branding row */
}
.site-branding .site-title {
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--text-main);
  text-decoration: none;
}
/* Homepage-only byline layout and styling (inline to the right of title) */
.front-page .ws-site-byline,
.home .ws-site-byline {
  position: static;
  display: inline-block;
  margin: 0;
  /* Only use the branding row gap for spacing (half previous total) */
  margin-left: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  color: var(--accent-red);
  white-space: nowrap; /* never wrap tagline */
}
/* Light mode byline color override */
html:not(.dark-mode) .site-description.ws-site-byline {
  color: var(--accent-red) !important;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
}
.main-navigation li {
  display: inline-block;
}
.main-navigation li:not(:last-child)::after {
  content: '/';
  margin: 0 10px;
  color: var(--text-main);
  opacity: 0.5;
}
.main-navigation a,
.main-navigation button {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text-main);
  font-size: var(--meta-size);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Ensure nav-contained toggle behaves like a text link and not fixed */
.main-navigation #theme-toggle {
  position: static;
  top: auto;
  right: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-main);
  font: inherit;
  cursor: pointer;
}
.main-navigation a,
.main-navigation button,
.ws-menu a,
.info-toggle,
.info-link {
  font-size: var(--site-title-size) !important;
  line-height: 1.4;
}
.ws-topbar .nav-toggle {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 110;
  display: none;
}

/* Place the toggle inside the header div, right & vertically centered */
.ws-page-header .nav-toggle {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* Topbar layout: place toggle on the right */
.ws-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.ws-topbar .ws-page-header {
  flex: 1;
  display: grid;
  gap: 2px;
  padding-left: 72px; /* reserve space for nav toggle */
}
.ws-topbar .nav-toggle {
  margin-left: auto;
}

/* Backdrop for off-canvas */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 90; /* above sticky header, below sidebar */
}
.nav-open .backdrop {
  opacity: 1;
  pointer-events: auto;
}
.nav-open .ws-sidebar {
  transform: translate3d(0, 0, 0);
}
/* Prevent background scrolling when the off-canvas is open */
body.nav-open {
  overflow: hidden;
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  #page-grid { grid-template-columns: 1fr; }
  /* Off-canvas: left on mobile too */
  .ws-sidebar {
    left: auto;
    right: 0;
    width: min(85vw, 320px);
    padding: var(--space-xl) var(--space-md);
    border-right: 0;
    border-bottom: 0;
  }
  .ws-info { margin-top: var(--space-xl); position: static; left: auto; bottom: auto; }
  .ws-content { padding: 0; }
  .ws-topbar .nav-toggle { display: none; }
}

/* Mobile header layout fixes */
@media (max-width: 768px) {
  /* Mobile Header Breakout (full-bleed) */
  .ws-topbar .header-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* Hide byline, context label, and header arrow on mobile */
  .ws-site-byline,
  .ws-topbar .ws-header-arrow,
  .ws-topbar .ws-current-label {
    display: none !important;
  }
  /* Ensure site title is flush within the 90% container */
  .site-branding .site-title {
    margin: 0;
    padding: 0;
  }
  /* About button group: participate in header flex (no absolute/fixed pos) */
  #global-actions {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    height: auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  /* Ensure the About pill hugs the right edge with no extra spacing */
  #global-actions .ws-pill-btn {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  /* Reset any unintended left padding on branding wrapper */
  .ws-topbar .site-branding {
    padding-left: 0;
    margin-left: 0;
  }
}

/* Pin Info link to bottom-left of the sidebar */
.ws-info {
  position: absolute;
  left: auto;
  right: 48px;
  bottom: 48px;
}

/* Left-align reading containers within column 2 (not centered) */
.article-container {
  max-width: var(--container-reading);
  margin-left: 0;
  margin-right: auto;
}

.article-hero {
  max-width: var(--container-wide);
  margin-left: 0;
  margin-right: auto;
  position: relative;
}

/* Collapse empty article containers */
.article-container:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* ===== Hero Gallery (Single) ===== */
.gallery-slider {
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  height: 60vh;
  align-items: center;
}
.gallery-slide {
  flex: 0 0 auto;
  width: auto;
  max-width: 90vw;
  scroll-snap-align: start;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-slide-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Gallery nav controls */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.gallery-nav:focus { outline: 2px solid var(--color-border); outline-offset: 2px; }
.gallery-nav-prev { left: 8px; }
.gallery-nav-next { right: 8px; }

/* ===== Visual Index Active State ===== */
.ws-inline-row.is-current-article {
  opacity: .5;
}
.ws-inline-row.is-current-article .ws-inline-title,
.ws-inline-row.is-current-article .ws-inline-title a {
  text-decoration: line-through !important;
  color: var(--color-muted) !important;
}
.ws-inline-row.is-current-article .ws-inline-title a {
  pointer-events: none;
  cursor: default;
}
.ws-inline-row.is-current-article .ws-inline-thumb-img {
  opacity: .45;
  filter: grayscale(0%);
}
.ws-inline-row.is-current-article .ws-inline-thumbs a,
.ws-inline-row.is-current-article .ws-inline-thumb {
  pointer-events: none;
  cursor: default;
}

/* ===== Cinema Gallery (Single) ===== */
.cinema-gallery-container {
  position: relative;
  height: auto;
  width: 100%;
  max-width: none;
  margin: 0;
}
.cinema-gallery-container .gallery-slider {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  height: calc(95vh - var(--ws-topbar-h, 0px));
  gap: 4px;
  -webkit-overflow-scrolling: touch;
}
.cinema-gallery-container .gallery-slider > .gallery-slide {
  flex: 0 0 auto;
  width: auto;
  max-width: 90vw;
  height: 100%;
  scroll-snap-align: start;
}
.cinema-gallery-container .gallery-slider img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cinema-gallery-container .gallery-nav.prev { left: 8px; }
.cinema-gallery-container .gallery-nav.next { right: 8px; }

/* ===== Gallery Control Bar (below slider) ===== */
.gallery-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  margin-bottom: 48px;
}
.gallery-controls .nav-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gallery-controls .nav-buttons button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(28, 27, 25, 0.2);
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gallery-controls .gallery-pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 0;
}
.gallery-controls .gallery-pagination .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
}
.gallery-controls .gallery-pagination .dot.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
}

/* ===== Typography: Martina Plantijn Light 54/64 with -3% tracking (REM) ===== */
.ws-type-display,
.ws-hero-title {
  font-family: 'MartinaPlantijn', serif;
  font-weight: 300;
  font-size: 3.375rem;   /* 54px @ 16px root */
  line-height: 4rem;     /* 64px @ 16px root */
  letter-spacing: -0.03em; /* proportional tracking */
}

/* ===== Single: Spacing between Gallery and Article List ===== */
body.single .gallery-controls {
  margin-bottom: 0;
}
body.single .ws-container {
  padding-top: 80px;
}

/* ===== Single: “More places” section header ===== */
.ws-more-places-header {
  width: 100%;
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-lg);
}
.ws-more-places-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  text-align: center;
}

/* ===== Desktop Hover Preview (Inline Archive Thumbnails) ===== */
@media (hover: hover) and (pointer: fine) {
  .ws-hover-preview {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 300;
    max-width: min(42vw, 820px);
    max-height: 82vh;
    pointer-events: none; /* do not block underlying UI */
    opacity: 0;
    transition: opacity .12s ease;
  }
  .ws-hover-preview.is-visible {
    opacity: 1;
  }
  .ws-hover-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    border-radius: 0;
    /* soft dispersed dropshadow */
    box-shadow:
      0 10px 20px rgba(0,0,0,0.12),
      0 40px 80px rgba(0,0,0,0.10);
  }
}

@media (hover: none), (pointer: coarse) {
  .ws-hover-preview { display: none !important; }
}

/* ===== Patterns Index ===== */
.patterns-list-container {
  padding: 40px;
  max-width: 100%;
  display: flex;
  flex-direction: column; /* vertical stack */
  align-items: flex-start;
  gap: 0px; /* tight vertical stacking */
}
.pattern-row {
  display: inline-block; /* base; overridden below for flex row */
  text-decoration: none;
  margin-bottom: calc(1em - 4px); /* tiny gap between rows */
  width: 100%;
  --pattern-title-size: var(--fs-display);
}
.pattern-title {
  font-family: var(--font-serif);
  font-size: var(--pattern-title-size);
  line-height: 0.95;
  color: black;
  display: inline;
  width: auto;
  font-weight: 300;
  margin: 0;
  transition: color 0.2s ease;
  white-space: nowrap; /* prevent breaking like 'Black & White' */
}
.pattern-thumbnails {
  display: inline;
}
.pattern-thumb {
  height: 0.72em;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  margin-left: 4px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  filter: grayscale(0%);
  transition: transform 0.2s ease, filter 0.2s ease;
  align-self: baseline;
}
/* Hover effects disabled */

/* ===== Patterns List: Force Wanders Article List Styling Overrides ===== */
.patterns-list-container {
  text-align: left !important;
  max-width: 100% !important;
  padding: 48px 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0px !important;
  /* Lock to page grid gutter; no extra side indentation */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pattern-row {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  width: 100%;
  margin-bottom: calc(1em - 4px) !important;
  padding-bottom: 0.1em !important;
  /* No left indent; align with site title gutter */
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Title overrides for both explicit class and any h2 within a row */
.pattern-title,
.pattern-row h2,
.ws-inline-title,
.ws-inline-title a,
.ws-inline-row a,
.home-grid-title {
  font-family: var(--font-serif), serif;
  /* font-size controlled by Unified Magazine Scale rule */
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #000;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
/* Prevent wrapping of the textual part of the row */
.pattern-title,
.pattern-row h2,
.pattern-item h2 {
  white-space: nowrap !important;
}

.pattern-thumb {
  height: 0.72em !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  align-self: baseline !important;
  margin-left: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  filter: grayscale(0%) !important;
}

/* Make thumbnails scale to the headline size and space like Wanders */
.pattern-thumbnails {
  display: inline-flex !important;
  font-family: var(--font-serif) !important;
  align-items: baseline !important;
  gap: 0 !important;
  margin-left: 0px !important;
  font-size: var(--pattern-title-size) !important;
  line-height: 1 !important;
}
/* Decrease spacing between thumbnails only; keep title-to-first-image gap */
.pattern-thumbnails .pattern-thumb { margin-left: 2px !important; }
.pattern-thumbnails .pattern-thumb:first-child { margin-left: 0 !important; }

/* Cap-height lock for thumbnails where supported, fallback above remains 0.72em */
@supports (height: 1cap) {
  .pattern-thumbnails { font-size: var(--pattern-title-size) !important; }
  .pattern-thumb { height: 1cap !important; }
}
/* ===== Unified Magazine Scale: Shared class + application ===== */
/* Shared class for consistent title sizing across contexts */
.ws-title-scale {
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 8rem);
  line-height: 0.95;
}
/* Apply the shared scale to existing title selectors as well */
.ws-title-scale,
.ws-inline-title,
.ws-inline-title a,
.ws-inline-row a,
.pattern-title,
.pattern-row h2,
.home-grid-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 8rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  word-spacing: -0.05em;
  margin: 0;
}

/* ===== SHARED Typography & Image Sizing (Cap-Height Lock) ===== */
h2.home-grid-title,
.pattern-item h2 {
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 8rem);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.01em;
}

h2.home-grid-title img,
.pattern-item h2 img {
  height: 0.75em !important;
  width: auto;
  object-fit: cover;
  margin-left: 4px;
  vertical-align: baseline;
  position: relative;
  top: 0.02em;
  align-self: baseline;
}

h2.home-grid-title img:first-of-type,
.pattern-item h2 img:first-of-type {
  margin-left: 10px;
}

/* ===== Home + Patterns: Baseline-aligned headline containers ===== */
.ws-inline-title,
.ws-inline-title a,
.home-grid-title,
.home-grid-title a,
.pattern-title,
.pattern-row h2,
.pattern-item h2 {
  display: inline-flex !important;
  align-items: baseline !important;
  line-height: 1 !important;
}

/* Strict layout separation per context */
/* Patterns Page: force full-width flex row to stack vertically */
.pattern-item h2 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
  white-space: nowrap;
  margin-bottom: 0.2em;
  line-height: 1;
}
/* Wanders/Home Page titles behave like inline words with wrapping and spacing */
.home-grid-title {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-right: 0.6em;
  line-height: 0.95;
}

/* Wanders Container (wrapper) */
.home-grid,
.entry-content {
  display: block;
  text-align: left;
}
/* Containers full width to allow growth */
.ws-archive-grid,
.patterns-list-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Widen posts container so more text fits on one line */
.ws-container {
  width: 100% !important;
  max-width: 100% !important;
}


/* Increase vertical gap between year sections by 48px (subsequent blocks) */
.ws-inline-archive .ws-year-block + .ws-year-block {
  margin-top: calc(var(--space-2xl) + 48px) !important;
}

/* Increase horizontal spacing between inline posts by 4px (keep vertical gap) */
.ws-inline-archive .ws-year-block {
  column-gap: 20px !important;
  row-gap: clamp(0.6rem, 1.5vw, 1.1rem) !important;
}

/* Home/Blog: move posts down from the header by 68px */
.home .ws-container,
.blog .ws-container {
  padding-top: 68px;
}
/* Archives/Front Page: keep tighter spacing */
.archive .ws-container,
.front-page .ws-container {
  padding-top: calc(var(--space-xl) - 24px);
}

/* Top offset for gallery/article pages and Patterns route (below sticky header) */
.single .ws-content > main,
.page-patterns .ws-content > main,
.tax-pattern .ws-content > main {
  padding-top: var(--page-padding);
}

/* ===== Center-Mode Gallery ===== */
.gallery-track {
  display: flex;
  gap: 40px; /* Space between slides */
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Forces images to stop in the center */
  -webkit-overflow-scrolling: touch;
  padding: 0 50%; /* Let first/last items center on edges */
  align-items: center;
}

.gallery-item {
  flex: 0 0 70vw; /* 60–70% of viewport so sides can peek */
  height: 80vh; /* Tall vertical aspect */
  scroll-snap-align: center;
  object-fit: cover;
  opacity: 0.3; /* Default faded */
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.gallery-item.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ===== Peeking Carousel (Strict Center Mode) ===== */
.peeking-track {
  display: flex;
  gap: 2vw; /* Small gap between slides */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 20vw; /* CRITICAL: Centers the first/last items */
  box-sizing: border-box;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  align-items: center;
  min-height: 90vh; /* Ensure container accommodates tall items */
  height: auto; /* Allow growth to prevent overlap */
}

.peeking-item {
  flex: 0 0 auto;
  width: auto;
  max-width: 80vw;
  height: calc(100vh - 180px);
  scroll-snap-align: center; /* Snap to middle */
  opacity: 0.3; /* Default faded */
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: scale(0.9);
  will-change: opacity, transform;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peeking-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.peeking-item.is-active {
  opacity: 1 !important;
  transform: scale(1);
}

@media (max-width: 768px) {
  .peeking-track { padding: 0 10vw; }
  .peeking-item { flex: 0 0 80vw; }
}

/* ===== Peeking Gallery: Breakout + Safe Height Overrides ===== */
/* Full-bleed horizontal track that breaks out of container and keeps center padding */
.peeking-track {
  display: flex;
  align-items: center; /* vertically center slides within the track */
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 20vw;
  position: relative;
  left: auto;
  right: auto;
  box-sizing: border-box;
  overflow-x: auto;
  min-height: 90vh;
  height: auto;
}
/* Allow children to shrink to avoid horizontal overflow */
.peeking-track > * {
  min-width: 0;
}

/* Fit images above the fold: viewport height minus header and counter */
.peeking-item {
  height: calc(100vh - 180px);
}

/* Counter anchored bottom-left, aligned to peeking edge */
.slider-counter {
  position: fixed;
  bottom: 30px;
  left: calc(var(--vw, 100vw) / 2);
  margin-left: 0;
  transform: translate3d(-50%, 0, 0);
  z-index: 100;
  color: var(--text-main);
  opacity: 1;
  transition: opacity .12s ease-out;
}

/* Hidden state toggled by JS when gallery is off-screen */
.slider-counter.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.slider-counter #slide-current {
  font-weight: var(--weight-bold);
}

@media (prefers-reduced-motion: reduce) {
  .slider-counter {
    transition: none;
  }
}

/* (removed empty body rule) */

/* ===== Floating Dock Navigation (Bottom-Center) ===== */
.floating-dock {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate3d(-50%, 0, 0);
  margin-left: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: none;
  /* Dock geometry */
  --dock-radius: 9999px;
  --dock-padding: 4px;
  border-radius: var(--dock-radius);
  padding: var(--dock-padding);
  width: var(--dock-max-w, max-content);  /* lock to desktop size when known */
  max-width: none;                        /* never shrink content intrinsically */
  box-sizing: border-box;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.08);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
  will-change: transform, opacity;
}
html.dark-mode .floating-dock {
  background: rgba(17, 17, 17, 0.6);
  border: none;
}
.floating-dock.is-hidden {
  opacity: 0;
  transform: translate3d(-50%, 48px, 0);
  pointer-events: none;
}
.dock-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dock-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-weight: 600;
  font-size: calc(1em - 0.0625rem);
  text-decoration: none;
  padding: 10px 16px; /* ensure at least 16px horizontal padding */
  /* Concentric corners: inner radius = outer radius - padding */
  border-radius: calc(var(--dock-radius) - var(--dock-padding));
  transition: color 0.25s ease;
}
html.dark-mode .dock-menu a {
  color: var(--color-mid) !important;
}
.dock-menu a:hover {
  background: transparent;
  color: var(--text-main);
}
html.dark-mode .dock-menu a:hover {
  background: transparent;
  color: #fff !important;
}
.dock-menu a:focus-visible {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}

/* Selected/active state */
.dock-menu .current-menu-item > a,
.dock-menu .current_page_item > a,
.dock-menu .current-menu-parent > a,
.dock-menu .current-menu-ancestor > a,
.dock-menu a[aria-current="page"],
.dock-menu a[aria-current="true"],
.dock-menu a.is-active {
  background: rgba(255, 255, 255, 0.65);
  color: var(--text-main);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.05),
    0 8px 22px rgba(0, 0, 0, 0.03);
}
html.dark-mode .dock-menu .current-menu-item > a,
html.dark-mode .dock-menu .current_page_item > a,
html.dark-mode .dock-menu .current-menu-parent > a,
html.dark-mode .dock-menu .current-menu-ancestor > a,
html.dark-mode .dock-menu a[aria-current="page"],
html.dark-mode .dock-menu a[aria-current="true"],
html.dark-mode .dock-menu a.is-active {
  background: rgba(22, 21, 20, 0.65);
  color: #fff !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.10),
    0 8px 22px rgba(0, 0, 0, 0.06);
}

/* Mode toggle icon visibility per theme */
#global-theme-toggle .icon-sun { display: none; }
#global-theme-toggle .icon-moon { display: inline; }
html.dark-mode #global-theme-toggle .icon-sun { display: inline; }
html.dark-mode #global-theme-toggle .icon-moon { display: none; }

/* New in-header toggle location: ensure only one icon shows */
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: inline; }
html.dark-mode #theme-toggle .icon-sun { display: inline; }
html.dark-mode #theme-toggle .icon-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .floating-dock {
    transition: none;
  }
}

/* ===== Single: Grid + Fullscreen Lightbox Overlay ===== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}
.post-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
	/* Snaps-like reveal animation */
	opacity: 0;
	transform: translateY(20px);
	/* Use shared motion tokens for consistent reveal feel */
	transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
	will-change: opacity, transform;
}
.post-grid-item:focus-visible {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}
.post-grid-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.post-grid-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.post-grid-item {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--vw, 100svw);
  height: 100dvh;
  z-index: 99999;
  background: var(--bg-body, var(--bg-main, #fff));
  display: none; /* hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}
/* Top-right controls container (aligned with theme toggle) */
.gallery-overlay .gallery-controls {
  position: fixed;
  top: 28px;
  right: calc(var(--page-padding) + 24px);
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 100000;
}
.gallery-controls .control-button {
  appearance: none;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 9999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  cursor: pointer;
  line-height: 0;
}
.gallery-controls .control-button:focus-visible {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}
html.dark-mode .gallery-controls .control-button {
  background: rgba(17, 17, 17, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}
/* Ensure inner SVG uses consistent sizing */
.gallery-controls .control-button svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* Ensure the text glyph close icon is exactly 16x16 visually */
.gallery-overlay .gallery-controls .lightbox-close-btn {
  position: fixed;
  bottom: 40px;
  right: var(--page-padding);
  z-index: 100000;
  font-family: inherit;
  color: var(--text-main, #000);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline;
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: normal;
}
/* Bottom-left counter */
.lightbox-counter {
  position: fixed;
  bottom: 40px;
  left: var(--page-padding); /* align to site title left edge */
  z-index: 100000;
  color: var(--text-main);
  font-weight: var(--weight-medium);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
	border: none;
  border-radius: 9999px;
  padding: 8px 12px;
}
html.dark-mode .lightbox-counter {
  background: rgba(17, 17, 17, 0.5);
	border: none;
  border-color: rgba(255, 255, 255, 0.12);
}
/* Lock scroll and hide standard UI when lightbox is open */
body.lightbox-open {
  overflow: hidden;
}
body.lightbox-open .floating-dock,
body.lightbox-open .slider-counter {
  display: none !important;
}
/* Normalize peeking track inside overlay (no breakout margins) */
.gallery-overlay .peeking-track {
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 20vw;
}

.gallery-close-btn {
  position: fixed;
  bottom: 40px;
  right: var(--page-padding);
  z-index: 10000;
  appearance: none;
  font-family: inherit;
  color: var(--text-main, #000);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline;
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: normal;
}
.gallery-close-btn:focus-visible {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}
html.dark-mode .gallery-close-btn {
  background: none;
  border: none;
  color: var(--text-main);
}

/* ===== Tiny screens: single menu button + fullscreen overlay ===== */
/* Default button and overlay are hidden; enabled by tiny breakpoint below */
#mobile-menu-toggle {
  position: fixed;
  bottom: 40px;
  right: 2.5vw;
  width: 44px;
  height: 44px;
  z-index: 100001; /* above overlay so it can close */
  display: none;   /* shown only on tiny screens */
}
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
  color: var(--text-main);
  transition: opacity .2s ease;
  opacity: 0;
  padding: 0 var(--page-padding);
  box-sizing: border-box;
}
.mobile-menu-overlay.is-open {
  display: flex;
  opacity: 1;
}
.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: grid;
  gap: 16px;
}
.mobile-menu-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1;
  padding: 16px 20px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.08);
}
html.dark-mode .mobile-menu-list a {
  background: rgba(17,17,17,0.22);
  color: var(--text-main);
}
body.mobile-menu-open {
  overflow: hidden;
}

/* Mobile overrides removed: keep floating dock and top-right toggle consistent across all widths */

/* --- DEEP STRUCTURE RESET --- */

/* --- DEEP STRUCTURE RESET (Sibling-Aware) --- */

/* =========================================
   1. UNIVERSAL TYPOGRAPHY & IMAGE LOCK
   ========================================= */
/* The Text (H2) */
.home-grid-title,
.pattern-item h2,
.wp-block-post-title {
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 8rem) !important;
  line-height: 0.95 !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  margin: 0 !important;
  display: inline-block !important; /* Allow sitting next to images */
}

/* The Images (Sibling Selector Fix)
   Target images that share a container with the title */
.home-grid img,
.pattern-item img,
.wp-block-post a img {
  height: 0.65em !important; /* Strict Cap-Height Lock */
  width: auto !important;
  object-fit: cover !important;
  vertical-align: baseline !important;
  margin-left: 5px !important;
  display: inline-block !important;
  position: relative !important;
  bottom: -0.02em !important; /* Baseline micro-tweak */
}

/* First Image Gap Exception */
.home-grid img:first-of-type,
.pattern-item img:first-of-type {
  margin-left: 10px !important;
}

/* =========================================
   2. WANDERS PAGE: "Sentence Flow"
   ========================================= */
/* Kill the Grid on the Container */
body.home .wp-block-post-template,
body.home .wp-block-query ul {
  display: block !important;
  text-align: left !important;
}

/* Make the Wrapper (LI) behave like a word */
body.home .wp-block-post,
body.home .wp-block-query li {
  display: inline-block !important;
  width: auto !important;
  margin-right: 0.6em !important;
  margin-bottom: 0.2em !important;
}

/* Make the Content (Link) flow horizontally */
body.home .wp-block-post a {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
}

/* =========================================
   3. PATTERNS PAGE: "Vertical Stack"
   ========================================= */
/* Force Vertical Column */
body.page-template-patterns .wp-block-post-template,
body.page-template-patterns .wp-block-query ul {
  display: flex !important;
  flex-direction: column !important;
}

/* Force Full Width Rows */
body.page-template-patterns .wp-block-post,
body.page-template-patterns .wp-block-query li {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.1em !important;
}

/* Keep Text + Images on one line */
body.page-template-patterns .wp-block-post a,
.pattern-item {
  display: inline-flex !important;
  align-items: baseline !important;
  white-space: nowrap !important; /* Prevent text wrapping */
}

/* =========================================
   2. WANDERS PAGE (Home - Sentence Flow)
   ========================================= */
/* We must target the WP Block wrappers for the Home page */

/* 1. Unlock the List Item (The invisible box) */
body.home .wp-block-post,
body.home .wp-block-query li {
  display: inline-block !important; /* Allows "Canada" and "Seoul" to sit next to each other */
  width: auto !important;
  margin-right: 0.6em !important;
  margin-bottom: 0.2em !important;
  vertical-align: baseline !important;
}

/* 2. The Link inside the item */
body.home .wp-block-post a {
  display: inline-flex !important; /* Keeps Text + Images together */
  align-items: baseline !important;
  text-decoration: none !important;
}

/* 3. The Text */
body.home .wp-block-post-title,
body.home h2 {
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 8rem) !important;
  line-height: 0.95 !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  display: inline !important;
  margin: 0 !important;
}

/* 4. The Images */
body.home .wp-block-post img,
body.home .wp-block-post a img {
  height: 0.65em !important; /* Same Cap-Height Lock */
  width: auto !important;
  margin-left: 5px !important;
  align-self: baseline !important;
}

/* First Image Gap Home */
body.home .wp-block-post img:first-of-type,
body.home .wp-block-post a img:first-of-type {
  margin-left: 10px !important;
}

/* =========================================
   Deep Baseline: Patterns + Wanders Overrides
   ========================================= */
/* =========================================
   1. PATTERNS PAGE (The Vertical Stack)
   ========================================= */
/* The Parent Row */
.pattern-row {
  display: flex !important;
  width: 100% !important;
  align-items: baseline !important; /* Level 1: Align Title with Wrapper */
  text-decoration: none !important;
  margin-bottom: calc(1em - 4px) !important;
  padding-bottom: 0.1em !important;
  border-bottom: none !important;
}
/* The Title */
.pattern-title {
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 8rem) !important;
  line-height: 0.95 !important; /* Tight line-height is crucial for baseline calculation */
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  margin: 0 !important;
  white-space: nowrap !important;
  color: var(--text-main, #000) !important;
}
/* The Wrapper (THE FIX) */
.pattern-thumbnails {
  display: inline-flex !important; /* Shrink-wrap the images */
  align-items: baseline !important; /* Level 2: Align Images inside Wrapper */
  align-self: baseline !important; /* Align Wrapper to Title */
  margin-left: var(--title-thumb-gap) !important; /* The gap between Title and First Image */
}
/* The Images */
.pattern-thumbnails img {
  height: 0.75em !important; /* Cap-Height Lock */
  width: auto !important;
  align-self: baseline !important; /* Level 3: Sit on the line */
  object-fit: cover !important;
  margin-left: 2px !important; /* Gap between images */
  position: relative !important;
  top: 0.02em !important; /* Micro-nudge for visual perfection */
}
/* Remove the double-margin on the first image since the wrapper handles it */
.pattern-thumbnails img:first-of-type {
  margin-left: 0 !important;
}

/* ===== Patterns Overview: Force identical overlap behavior to post page ===== */
/* Place late in the file to override earlier spacing rules in this sheet */
.patterns-list-container .pattern-thumbnails {
  --thumb-overlap: 20px;
  --thumb-gap: 2px;
  --thumb-shift: var(--thumb-overlap);
  white-space: nowrap !important;
  overflow: hidden !important;
  position: relative;
  gap: 0 !important;
}
.patterns-list-container .pattern-thumbnails img.pattern-thumb {
  margin-left: calc(var(--thumb-gap) - var(--thumb-overlap)) !important;
  position: relative;
  transition: transform .18s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
}
.patterns-list-container .pattern-thumbnails img.pattern-thumb:first-child {
  margin-left: 0 !important;
}
.patterns-list-container .pattern-thumbnails:has(img.pattern-thumb:hover) img.pattern-thumb {
  transform: translateX(calc(-1 * var(--thumb-shift)));
}
.patterns-list-container .pattern-thumbnails img.pattern-thumb:hover ~ img.pattern-thumb {
  transform: translateX(var(--thumb-shift));
}
.patterns-list-container .pattern-thumbnails img.pattern-thumb:hover {
  transform: translateX(0) !important;
  z-index: 2;
}

/* ===== Overlapped Inline Thumbnails + Hover Focus (No Wrap + Fade Out) ===== */
/* Scope shared behavior to both Patterns rows and Inline Archive rows */
.pattern-thumbnails,
.ws-inline-thumbs {
  /* Stacking/interaction tokens */
  --thumb-overlap: 20px;                 /* requested ~20px overlap */
  --thumb-gap: 2px;                      /* 2px visual breathing space around focused */
  --thumb-shift: var(--thumb-overlap);   /* shift equals overlap → final gap ≈ 2px */
  /* Layout: never wrap; hide overflow to avoid line breaks */
  white-space: nowrap !important;
  overflow: hidden !important;
  align-items: baseline !important;
  position: relative;
  gap: 0 !important; /* remove flex gap so negative margins can overlap cleanly */
}
/* Base stacking: apply negative spacing so thumbnails overlap slightly */
.pattern-thumbnails img.pattern-thumb {
  margin-left: calc(var(--thumb-gap) - var(--thumb-overlap)) !important;
  transition: transform .18s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
  position: relative;
}
.pattern-thumbnails img.pattern-thumb:first-child {
  margin-left: 0 !important;
}
/* Inline Archive variant uses wrapper elements */
.ws-inline-thumbs .ws-inline-thumb {
  margin-left: calc(var(--thumb-gap) - var(--thumb-overlap)) !important;
  transition: transform .18s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
  position: relative;
}
.ws-inline-thumbs .ws-inline-thumb:first-child {
  margin-left: 0 !important;
}
/* Hover focus: move neighbors out of the way to create focus lane */
/* Patterns: shift all left by default, then push following siblings right */
.pattern-thumbnails:has(img.pattern-thumb:hover) img.pattern-thumb {
  transform: translateX(calc(-1 * var(--thumb-shift)));
}
.pattern-thumbnails img.pattern-thumb:hover ~ img.pattern-thumb {
  transform: translateX(var(--thumb-shift));
}
.pattern-thumbnails img.pattern-thumb:hover {
  transform: translateX(0) !important;
  z-index: 2;
}
/* Inline Archive: operate on wrapper siblings for robust behavior */
.ws-inline-thumbs:has(.ws-inline-thumb:hover) .ws-inline-thumb {
  transform: translateX(calc(-1 * var(--thumb-shift)));
}
.ws-inline-thumbs .ws-inline-thumb:hover ~ .ws-inline-thumb {
  transform: translateX(var(--thumb-shift));
}
.ws-inline-thumbs .ws-inline-thumb:hover {
  transform: translateX(0) !important;
  z-index: 2;
}
/* Smooth, quick, natural transitions */
@media (prefers-reduced-motion: reduce) {
  .pattern-thumbnails img.pattern-thumb,
  .ws-inline-thumbs .ws-inline-thumb {
    transition: none !important;
    transform: none !important;
  }
}
/* Edge fade when too many images; ensure no line breaks are ever shown */
@supports (mask-image: linear-gradient(to right, black, transparent)) {
  /* Apply right-edge fade ONLY when overflowing */
  .pattern-thumbnails.ws-has-overflow,
  .ws-inline-thumbs.ws-has-overflow {
    /* Avoid empty ruleset; ensure no implicit mask is applied here */
    mask-image: none;
  }
}

/* Conditional edge fades using pseudo-elements (safer cross-browser) */
.pattern-thumbnails.ws-has-overflow,
.ws-inline-thumbs.ws-has-overflow {
  position: relative;
}
.pattern-thumbnails.ws-has-overflow.ws-fade-right::after,
.ws-inline-thumbs.ws-has-overflow.ws-fade-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(24px, 8%, 120px);
  pointer-events: none;
  background: linear-gradient(to right, rgba(250,249,246,0), var(--bg-main, #FAF9F6));
  z-index: 10;
}
.pattern-thumbnails.ws-has-overflow.ws-fade-left::before,
.ws-inline-thumbs.ws-has-overflow.ws-fade-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(24px, 8%, 120px);
  pointer-events: none;
  background: linear-gradient(to left, rgba(250,249,246,0), var(--bg-main, #FAF9F6));
}
/* Dark mode background match */
html.dark-mode .pattern-thumbnails.ws-has-overflow.ws-fade-right::after,
html.dark-mode .ws-inline-thumbs.ws-has-overflow.ws-fade-right::after,
html.dark-mode .pattern-thumbnails.ws-has-overflow.ws-fade-left::before,
html.dark-mode .ws-inline-thumbs.ws-has-overflow.ws-fade-left::before {
  background: linear-gradient(to right, rgba(22,21,20,0), var(--bg-main, #161514));
}
html.dark-mode .pattern-thumbnails.ws-has-overflow.ws-fade-left::before,
html.dark-mode .ws-inline-thumbs.ws-has-overflow.ws-fade-left::before {
  background: linear-gradient(to left, rgba(22,21,20,0), var(--bg-main, #161514));
}

/* =========================================
   2. WANDERS PAGE (Home - Sentence Flow)
   ========================================= */
/* Keep the Home Page logic which was working better */
body.home .wp-block-post,
body.home .wp-block-query li {
  display: inline-block !important;
  margin-right: 0.6em !important;
  vertical-align: baseline !important;
}
body.home .wp-block-post a {
  display: inline-flex !important;
  align-items: baseline !important;
}
body.home .wp-block-post-title,
body.home h2 {
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 8rem) !important;
  line-height: 0.9 !important;
  display: inline !important;
}
body.home .wp-block-post img {
  height: 0.65em !important;
  align-self: baseline !important;
  margin-left: 5px !important;
}

/* ===== Disable hover transparency effects on posts/patterns ===== */
@media (hover: hover) {
  /* Ensure no dimming occurs when hovering containers */
  .ws-inline-archive:hover .ws-inline-row,
  .ws-inline-archive:hover .ws-inline-row *,
  .patterns-list-container:hover .pattern-row,
  .patterns-list-container:hover .pattern-row *,
  body.home .wp-block-post-template:hover .wp-block-post,
  body.home .wp-block-post-template:hover .wp-block-post * {
    opacity: 1 !important;
  }

  /* Ensure hovered items and their contents stay fully opaque */
  .ws-inline-row:hover,
  .ws-inline-row:hover *,
  .pattern-row:hover,
  .pattern-row:hover *,
  body.home .wp-block-post:hover,
  body.home .wp-block-post:hover * {
    opacity: 1 !important;
  }

  /* Neutralize any sibling-dimming patterns */
  .ws-inline-row:hover ~ .ws-inline-row,
  .ws-inline-row:hover ~ .ws-inline-row *,
  .pattern-row:hover ~ .pattern-row,
  .pattern-row:hover ~ .pattern-row *,
  body.home .wp-block-post:hover ~ .wp-block-post,
  body.home .wp-block-post:hover ~ .wp-block-post * {
    opacity: 1 !important;
  }
}

/* Fade-up reveal for Wander stacks (front page) */
.ws-wander-card {
  opacity: 0;
  transform: translateY(20px);
  /* Rise-in reveal using shared tokens (easing tuned site-wide) */
  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
  will-change: opacity, transform;
}
.ws-wander-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Fallback: always visible on Places and Single contexts (avoid hidden tiles if JS/lazyload stalls) */
.page-places .ws-wander-card,
.single .ws-wander-card{
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce){
  .ws-wander-card {
    transition: none;
    transform: none;
  }
}

/* Fade-up reveal for Inline Archive rows (homepage and inline lists) */
.ws-inline-row {
	opacity: 0;
	transform: translateY(20px);
	/* Rise-in reveal using shared tokens */
	transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
	will-change: opacity, transform;
}
.ws-inline-row.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
	.ws-inline-row {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

/* Mobile: ensure rows are visible immediately (robust fallback) */
@media (hover: none) and (pointer: coarse), (max-width: 768px){
  .ws-inline-row{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Fade-up reveal for Pattern rows (used on Patterns, Pattern taxonomy, and Tag archives) */
.pattern-row {
  opacity: 0;
  transform: translateY(20px);
  /* Extended reveal for larger rows — keep timing but centralize easing */
  transition: opacity var(--motion-duration-extended) var(--motion-ease-standard), transform var(--motion-duration-extended) var(--motion-ease-standard);
  transition-delay: .12s; /* small base delay so above-the-fold items animate on load */
  will-change: opacity, transform;
}
.pattern-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .pattern-row {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* Staggered reveal on Patterns page so consecutive rows animate visibly as you scroll */
.patterns-list-container .pattern-row:nth-child(1)  { transition-delay: .06s; }
.patterns-list-container .pattern-row:nth-child(2)  { transition-delay: .12s; }
.patterns-list-container .pattern-row:nth-child(3)  { transition-delay: .18s; }
.patterns-list-container .pattern-row:nth-child(4)  { transition-delay: .24s; }
.patterns-list-container .pattern-row:nth-child(5)  { transition-delay: .30s; }
.patterns-list-container .pattern-row:nth-child(6)  { transition-delay: .36s; }
.patterns-list-container .pattern-row:nth-child(7)  { transition-delay: .42s; }
.patterns-list-container .pattern-row:nth-child(8)  { transition-delay: .48s; }
.patterns-list-container .pattern-row:nth-child(9)  { transition-delay: .54s; }
.patterns-list-container .pattern-row:nth-child(10) { transition-delay: .60s; }
.patterns-list-container .pattern-row:nth-child(11) { transition-delay: .66s; }
.patterns-list-container .pattern-row:nth-child(12) { transition-delay: .72s; }

/* Dark mode: muted grey for wander caption year */
html.dark-mode .ws-wander-caption-year {
  color: var(--color-mid) !important;
}

/* Override: use JS-driven sequencing; remove nth-child delays globally */
.patterns-list-container .pattern-row { transition-delay: 0s !important; }

/* Mobile: disable animation for pattern rows to ensure robustness */
@media (hover: none) and (pointer: coarse), (max-width: 768px){
  .pattern-row{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --- Info Page CTA: Back to snaps --- */
.ws-cta-back {
  margin-top: var(--space-xl);
  font-size: var(--fs-lg); /* match body text size by default */
}
.ws-cta-back-link {
  font-family: var(--font-serif);
  font-size: inherit; /* match body size */
  color: var(--accent-red);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 160ms ease;
}
.ws-cta-back-link .ws-cta-arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
.ws-cta-back-link:hover .ws-cta-arrow {
  transform: translateX(8px);
}
.ws-cta-back-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Dark mode: muted grey instead of token red */
html.dark-mode .ws-cta-back-link {
  color: var(--color-muted) !important;
}

/* (removed legacy mobile/tablet hacks in favor of unified responsive waterfall) */

/* ===========================================================
   RESPONSIVE WATERFALL (Clean, unified strategy)
   1) Desktop (>1024px): untouched
   2) Tablet (769px–1024px): 2 columns, centered
   3) Mobile (<768px): 1 column, fluid
   =========================================================== */

/* --- 1. GLOBAL VARIABLES (The Source of Truth) --- */
:root {
  --site-gutter: 20px; /* Consistent padding for Header, Content, and Nav */
}

/* --- 2. TABLET RESET (1024px) --- */
@media (max-width: 1024px) {
  /* Fix the Main Grid */
  .page-grid, .ws-wanders-grid-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 Columns */
    gap: 40px !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure Cards are Fluid */
  .ws-wander {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important; /* Let content dictate height */
  }
}

/* --- 3. MOBILE RESET (768px) --- */
@media (max-width: 768px) {
  /* Force Single Column Stack */
  .page-grid, .ws-wanders-grid-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* Full width */
    gap: 80px !important; /* Space between posts */
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header alignment */
  .site-header, .site-branding {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The Card (Fluid & Clean) */
  .ws-wander {
    width: 100% !important;
    margin: 0 !important; /* Parent flex stretch handles width */
    overflow: visible !important; /* SHOW THE STACKS/FAN */
  }
  /* The Link (avoid fixed height on mobile) */
  .ws-wander-link {
    height: auto !important;
  }

  /* The Image (Strict 3:2 Landscape) */
  .ws-wander-figure, .ws-inline-thumb-img-wrapper {
    width: 100% !important;
    aspect-ratio: 3/2 !important;
    height: auto !important;
    overflow: hidden !important; /* Clip the photo, not the fan */
    position: relative;
  }

  /* The Text (Always Visible) */
  .ws-wander h3, .ws-wander-meta {
    display: block !important;
    text-align: center !important;
    margin-top: 1rem !important;
    width: 100%;
  }

  /* The Floating Nav (Aligned) - include project-specific elements too */
  .ws-toggle-bar, .floating-menu-container,
  #global-actions {
    left: var(--site-gutter) !important;
    right: var(--site-gutter) !important;
    width: auto !important;
  }
}

/* Ensure tile links fill their card area in grids */
.ws-wanders-grid .ws-wander-link{
  height: 100% !important;
}

/* --- 4. SAFETY --- */
/* Prevent horizontal scroll globally without hiding stacks */
html, body {
  overflow-x: clip !important; /* Hard cut any horizontal overflow */
  width: 100% !important;
  position: relative;
}
/* Ensure all boxes include padding/border in width calculations */
*, *::before, *::after { box-sizing: border-box; }
/* Aggressive containment of accidental overflow on common wrappers (exclude #page-grid for full-bleed header) */
#page, .site, .site-content, .site-main, .wrap, .content-area {
  max-width: 100% !important;
  overflow-x: clip !important;
}
/* --- EMERGENCY RESPONSIVE FIX (Max-Width: 1024px) --- */
/* We trigger this EARLY (at 1024px) to catch iPad Pro, Tablet, and Mobile in one safe net */
@media (max-width: 1024px) {

  /* 1. FORCE SINGLE COLUMN (Stabilize the Layout) */
  /* Stop the grid from trying to fit 2 columns in awkward middle sizes */
  /* Exclude #page-grid to preserve full-bleed header breakout */
  .page-grid, 
  .ws-wander-tiles, 
  .site-main {
    display: block !important; /* Simple block layout is hardest to break */
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 2. FIX THE VANISHING IMAGES (The Critical Fix) */
  /* The previous code collapsed these containers. We force them open. */
  .ws-wander-figure, 
  .ws-inline-thumb-img-wrapper,
  .ws-wander-stack {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important; /* Safety floor: prevent 0px height collapse */
    aspect-ratio: 3/2 !important; /* Force the shape */
    position: relative !important; /* Ensure absolute children position relative to this */
    overflow: visible !important; /* Let the stack effects show */
  }
}

/* === Unified Responsive Ladder (Override and simplify) === */
/* --- 1. GLOBAL OVERFLOW KILLER (Crucial) --- */
/* Scrollbar-safe viewport unit and gutter reservation */
:root {
  --vw: 100vw;
}
@supports (width: 100dvw) {
  :root { --vw: 100dvw; }
}
@supports (width: 100svw) {
  :root { --vw: 100svw; }
}
/* Avoid reserving extra gutter space which can reveal a light strip on the right */
html { scrollbar-gutter: auto; }
html, body {
  overflow-x: visible !important;
  width: 100% !important;
  position: relative;
  background-color: #1a1a1a;
}

/* Additional guardrails to prevent sub-pixel overflow on full-bleed wrappers */
.ws-topbar .header-inner,
.peeking-track,
.ws-content,
#page, .site, .site-content, .site-main, .wrap, .content-area {
  width: min(100%, var(--vw, 100vw)) !important;
  max-width: min(100%, var(--vw, 100vw)) !important;
}

/* --- 2. TABLET LAYOUT (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Container: Safe 2-Column Grid */
  .ws-wanders-grid-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 60px 40px !important; /* Vertical / Horizontal */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header: keep theme defaults (no overrides) */

  /* Cards: Fluid & Visible */
  .ws-wander {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important; /* SHOW Titles/Dates */
    margin-bottom: 0 !important;
  }
  
  /* Images: Strict 3:2 */
  .ws-wander-figure, .ws-inline-thumb-img-wrapper {
    aspect-ratio: 3/2 !important;
    width: 100% !important;
    display: block !important;
  }
}

/* --- 3. MOBILE LAYOUT (Max-Width 768px) --- */
@media (max-width: 768px) {
  /* Container: Single Column Stack */
  .ws-wanders-grid-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 80px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Center content area horizontally; do not affect header/menu */
  .ws-container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hard-center the wanders grid and its items on small screens */
  .ws-wanders-grid,
  .ws-wanders-grid-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  /* Center the grid column content so cards are not stretched */
  .page-places .ws-wanders-grid-inner {
    justify-items: center !important;
  }
  /* Center each card and give it a consistent visual width */
  .ws-wander-card {
    width: min(92vw, 560px) !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Header: keep theme defaults (no overrides) */

  /* Cards: Full Width Stack */
  .ws-wander {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Images: Strict 3:2 */
  .ws-wander-figure, .ws-inline-thumb-img-wrapper {
    aspect-ratio: 3/2 !important;
    width: 100% !important;
    display: block !important;
  }
}

/* (Revert header and page grid geometry to theme defaults; no overrides here) */

/* ===== Wanders Grid: Alignment and width fix ===== */
/* Center the inner grid within the page and align to gutters */
.ws-wanders-grid-inner {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  box-sizing: border-box;
}
/* Ensure consistent behavior on key routes */
.front-page .ws-wanders-grid-inner,
.page-places .ws-wanders-grid-inner {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/* (Removed Places route hard reset; center grid using standard gutters) */

/* ===== Wanders Grid: Safe-fit stacks (prevent breakout) ===== */
/* Center cards in their grid tracks and ensure rotated stacks fit the tile box. */
.ws-wanders-grid-inner{
  justify-items: stretch;
  align-items: start;
}
/* Keep each card self-contained for layout only (allow painting outside) */
.ws-wander{
  contain: layout;
  width: 100%;
}
/* Stretch wrapper to column width to avoid left inset */
.ws-wander-card{ width: 100%; }
/* Hard clip at the link/card level so rotated corners never spill */
/* Allow article to overflow so captions can render below the stack */
.ws-wanders-grid .ws-wander{
  overflow: visible !important;
}
/* Clip only at the interactive link level to contain rotated stack corners */
/* Remove clipping so stacked images can extend beyond the link bounds */
.ws-wanders-grid .ws-wander-link{
  overflow: visible !important;
}
/* Create a new paint containment layer for the interactive link */
/* Allow descendants to paint outside link bounds for stack edges */
.ws-wanders-grid .ws-wander-link{ contain: layout; display: block; }
/* Uniform stack scale so rotated corners never exceed the tile's bounds. */
.ws-wander-stack{
  /* Do not shrink stacks; rely on container clipping for safety */
  transform: scale(var(--stack-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (max-width: 1024px){
  .ws-wander-stack{ --stack-scale: 1; }
}
@media (max-width: 768px){
  .ws-wander-stack{ --stack-scale: 1; }
}

/* ===== Foundational Layout Reset (Header / Content / Footer) ===== */
/* Single responsibility: full-width header, content, footer; nav floats above. */
:root{
  --page-padding: 24px;
}
html, body{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}
#page-grid{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure small, consistent gutters across the site */
  --page-padding: 24px !important;
}
/* Remove legacy sidebar/backdrop from flow */
.ws-sidebar,
#page-grid > .backdrop{
  display: none !important;
}
/* Header: pure full width with side gutters; no breakout math */
.ws-topbar{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* Horizontal gutters come from .ws-content; avoid double insets here */
  padding: 20px 0 !important;
  box-sizing: border-box !important;
}
.ws-topbar .header-inner{
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 1 1 auto !important; /* stretch to full width in flex parent */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* Reserve space for the fixed theme toggle on large screens */
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
/* Reset extra right padding on small screens where the toggle isn't top-right */
@media (max-width: 700px) {
  .ws-topbar .header-inner{
    padding-right: 0 !important;  /* no fixed toggle overlap on small screens */
  }
}

/* Ensure brand and actions align exactly to ws-content gutters at all sizes */
.ws-topbar .site-branding{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.ws-topbar #global-actions{
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important; /* push to the right edge of header-inner */
}
/* Content: full width with gutters */
.ws-content{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: var(--page-padding) !important;
  padding-right: var(--page-padding) !important;
  box-sizing: border-box !important;
}
main{
  display: block;
  width: 100%;
}
/* Footer: full width with gutters */
footer, .site-footer{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 24px var(--page-padding) !important;
  box-sizing: border-box !important;
}
/* Eliminate legacy breakouts on peeking gallery and similar tracks */
.peeking-track{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: var(--page-padding) !important;
  padding-right: var(--page-padding) !important;
  box-sizing: border-box !important;
}
/* Media should never cause horizontal overflow */
img, video{
  max-width: 100%;
  height: auto;
}

/* --- Safe viewport width (exclude scrollbar) to prevent horizontal overflow --- */
:root {
  --vw: calc(100vw - (100vw - 100%));
}