/* ==========  Base / Reset ================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height:100%}

body {
  margin: 0;
  color: #111;
  background: #fff;
  line-height: 1.6;
  font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;      /* fallback */
  min-height: 100dvh;     /* modern mobile */

}

/* ==========  Variables ===================================================== */
:root{
  /* Layout */
  --max: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --edge: 44px;
  --rail: max(calc((50vw - var(--max)) / 2 + var(--pad)), var(--pad));

  /* Borders / hairlines */
  --hair: rgba(0,0,0,.08);
  --hairline: var(--hair);  /* keep compatibility with older rules */

  /* Header sizing */
  --header-h: 160px;

  /* Logo sizes */
  --logo-desktop: 30px;
  --logo-mobile: 25px;

  /* Footer */
  --footer-logo-h: 65px;
  --footer-logo-aspect: 3.5;
  --phone-logo-h: 60px;
  --col-gap: 48px;
  --links-gap: 24px;
  --stack-links-gap: 10px;
  --gap-vert-logo-links: 48px;
  --gap-vert-links-copy: 20px;
  --footer-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --footer-fg: #888;
  --footer-fg-strong: #111;
  --footer-fg-hover: #555;
  --footer-bg: #fff;
  --footer-border: rgba(0,0,0,.08);
  --fade: .24s;
  --page-gap: 64px; /*end of page gap to footer*/

  color-scheme: light;   /* force light UI controls/scrollbars */

}

/* Helpers */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--rail); }
.hairline { border-bottom: 1px solid var(--hair); }
.visually-hidden {
  position: absolute; height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
body{ padding-top: calc(var(--header-h) + 8px); }
a:link,
a:visited{ color: inherit; }
main.wrap, main.legal{padding-bottom: var(--page-gap);
flex: 1 0 auto;
}
@media (orientation: landscape) and (max-height: 520px){
  :root{
    --pad: max(8px, 2vw);          /* slimmer gutters = “cover-ish” feel */
  }
}



/* ==========  Header ======================================================== */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;                      /* solid */
  border-bottom: none;
  box-shadow: none;
}

/* Header layout: [menu] [center track] [search (collapses at top)] */
header .bar{
  display: grid;
  grid-template-columns: var(--edge) 1fr var(--edge);  /* right column hidden at top */
  align-items: center;
  height: 100%;
  padding-inline: var(--rail);
  position: relative;                          /* anchor for absolute logo */
}

/* Menu (two dashes) */
.menu-toggle {
  background: none; border: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; gap: 6px; padding: 8px; color: #555;
  -webkit-tap-highlight-color: transparent; appearance: none;
}
.menu-toggle:hover {color:#999}
.menu-toggle span { display: block; width: 20px; height: 2px; background: currentColor; }

/* Logo sizing */
.wordmark { cursor: pointer; -webkit-user-select: none; user-select: none; display: inline-flex; align-items: center; }
.wordmark img {
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
  display: block; height: var(--logo-desktop); width: auto;
}
@media (max-width: 767.98px){ .wordmark img{ height: var(--logo-mobile); } }

/* Logo position: centered */
.wordmark{
  position: absolute;
  right: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: none;
  z-index: 0;                        /* keep under the buttons */
}

/* the icon */
.search-toggle svg{
  display: block;
  stroke-width: 2.3;
  width: 25px;   /* tweak to 16/20 if you want */
  height: 25px;
}


/* --- Search button: minimal "Pace-like" icon --------------------------------
   Drawn with 1px strokes that inherit currentColor.
   Keep button empty in HTML: <button class="search-toggle" aria-label="Search"></button>
------------------------------------------------------------------------------- */
:root{
  /* Search icon tuning */
  --search-stroke: 1px;          /* set to 2px to match burger weight */
  --search-d-desktop: 16px;      /* ring diameter desktop */
  --search-d-mobile: 14px;       /* ring diameter mobile */
  --search-hlen-desktop: 6px;    /* handle length desktop */
  --search-hlen-mobile: 5px;     /* handle length mobile */
}

/* Search button — Pace-like icon */
.search-toggle{ position: relative; color:#999; }
.search-toggle:hover{ color:#555; }

/* Keep buttons above the logo */
.menu-toggle, .search-toggle{ z-index: 1; }

/* Hide the two dashes when drawer is open */
body.menu-open .menu-toggle{ visibility: hidden; }

/* ==========  Tabs (keep behavior) ========================================= */

/* remove gray tap rectangle on iOS */
.search-toggle, .search-close, .menu-toggle, .header a, .button, button, a{
  -webkit-tap-highlight-color: transparent;
}

/* avoid square outlines on icon buttons */
.search-toggle, .search-close{
  border-radius: 999px;
  outline: none;
}

/* hide intrusive outline on touch devices */
@media (hover: none) and (pointer: coarse){
  .menu-toggle:focus-visible,
  .search-toggle:focus-visible,
  .search-close:focus-visible{
    outline: none;
    box-shadow: none;
  }
}

/* keep keyboard focus visible on desktop */
@media (hover: hover) and (pointer: fine){
  .menu-toggle:focus-visible,
  .search-toggle:focus-visible,
  .search-close:focus-visible{
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,.2);
  }
}


/* === Hero (side-by-side, middles aligned) === */
.hero{
  padding: 8vh 0 6vh;

  display: grid;
  grid-template-columns: 1fr 1fr;   /* text | image */
  column-gap: 40px;
  align-items: center;              /* 🔑 middle of text = middle of image */
}

/* Heading: keep two words per line (only break at <br>) */
.hero h1{
  font-size: clamp(42px, 7vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  font-weight: 800;
  white-space: nowrap;   /* only break where you put <br> */
  overflow-wrap: normal;
  hyphens: none;
}

.hero p{
  color: #555;
  max-width: 56ch;
  margin: 0;
  font-size: clamp(16px, 2.2vw, 18px);
  opacity: .85;
}

/* Left column (text) */
.hero-content{
  grid-column: 1;
}

/* Right column (image) */
.hero-media{
  grid-column: 2;
  justify-self: end;     /* align to right gutter inside .wrap */
  width: 100%;           /* fill its half */
  max-width: none;
}

.hero-media picture{ display: block; }
.hero-media img{
  display: block;
  width: 100%;           /* uses intrinsic 1320x1760 aspect */
  height: auto;
  object-fit: cover;
}

/* ===== Mid-width tuning (avoid tiny image, keep title on two words/line) ===== */
/* 1) Slightly reduce H1 sooner so it doesn't force wrap; keep two-word lines */
@media (max-width: 1100px){
  .hero h1{ font-size: clamp(38px, 6.2vw, 54px); }
}

/* 2) Stack earlier (at ~980px) so the image never gets uncomfortably small */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;  /* stack */
    row-gap: 24px;
  }
  .hero-content{ grid-column: 1; }
  .hero-media{
    grid-column: 1;
    justify-self: start;
    width: 100%;                /* full width under text */
  }
}

/* (Optional) very small phones: one more gentle nudge */
@media (max-width: 360px){
  .hero h1{ font-size: clamp(32px, 9vw, 42px); }
}





/* ========== Drawer ======================================================= */
.drawer{ position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.drawer.open{ pointer-events: auto; }

/* Backdrop */
.drawer-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  opacity: 0; transition: opacity .28s ease;
  pointer-events: none;
}
.drawer.open .drawer-backdrop{ background: rgba(0,0,0,.04); opacity: 1; }

/* Panel */
.drawer-panel{
  box-sizing: border-box;
  position: absolute; top: 0; left: 0;
  height: 100dvh;
  width: clamp(300px, 25vw, 420px);
  background: #fff;
  border-right: 1px solid var(--hair);

  transform: translateX(-100%);
  transition: transform .30s ease;

  /* grid layout: center stack and handle group gap */
  display: grid;
  grid-auto-rows: max-content;
  place-content: center;            /* centers stack vertically + horizontally */
  justify-items: center;            /* center each item in column */
  align-items: start;

  /* inter-group spacing */
  --groups-gap: clamp(64px, 10dvh, 160px);
  row-gap: var(--groups-gap);

  /* spacing & width cap */
  --pad-x: 56px;
  padding-inline: var(--pad-x);
  padding-block: 0;
  --drawer-col-width: calc(100% - (var(--pad-x) * 2));

  /* typography hooks */
  --drawer-main-fs: clamp(32px, 4.8vmin, 40px);
  --drawer-sec-ratio: .50;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.drawer.open .drawer-panel{ transform: translateX(0); }

/* Groups */
.drawer-main{
  width: fit-content;
  max-width: var(--drawer-col-width);
  justify-self: start;     /* defines column width */
  text-align: left;
  display: flex; flex-direction: column; gap: 20px;
  margin: 0;                /* spacing handled by grid row-gap */
}
.drawer-secondary{
  justify-self: start;      /* align left edge with main */
  contain: inline-size;     /* prevent widening track */
  max-width: var(--drawer-col-width);
  text-align: left;
  display: flex; flex-direction: column; gap: 20px;
  margin: 0;
}

/* Links (base) */
.drawer-link{
  display: block; width: 100%;
  text-decoration: none;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: balance;
  overflow-wrap: normal; word-break: normal; hyphens: none; -webkit-hyphens: none;

  transform: translateY(10px);
  opacity: 0;
  transition: color .25s ease, opacity 1.5s ease, transform 1.5s ease;
}

/* Primary (big) */
.drawer-main .drawer-link{
  color:#111; font-weight:600;
  font-size: var(--drawer-main-fs);
}

/* Secondary */
.drawer-secondary .drawer-link{
  color:#999; font-weight:400;
  font-size: calc(var(--drawer-main-fs) * var(--drawer-sec-ratio));
}

/* Hover */
.drawer-main .drawer-link:hover,
.drawer-main .drawer-link:focus{ color:#999; opacity:.85; }
.drawer-secondary .drawer-link:hover,
.drawer-secondary .drawer-link:focus{ color:#555; opacity:1; }

/* Reveal */
.drawer.open .drawer-link{ opacity:1; transform:none; }

/* Stagger */
.drawer.open .drawer-main  .drawer-link:nth-child(1){ transition-delay:  40ms; }
.drawer.open .drawer-main  .drawer-link:nth-child(2){ transition-delay: 100ms; }
.drawer.open .drawer-main  .drawer-link:nth-child(3){ transition-delay: 160ms; }
.drawer.open .drawer-main  .drawer-link:nth-child(4){ transition-delay: 220ms; }

.drawer.open .drawer-secondary .drawer-link:nth-child(1){ transition-delay: 280ms; }
.drawer.open .drawer-secondary .drawer-link:nth-child(2){ transition-delay: 320ms; }
.drawer.open .drawer-secondary .drawer-link:nth-child(3){ transition-delay: 360ms; }
.drawer.open .drawer-secondary .drawer-link:nth-child(4){ transition-delay: 400ms; }

/* Close "X" */
.drawer-close{
  position: fixed; top: 10px; left: 10px; width: 40px; height: 40px;
  z-index: 10001; border: 0; background: transparent; color:#999; cursor: pointer;
  display: none; -webkit-tap-highlight-color: transparent;
}
.drawer-close::before,
.drawer-close::after{
  content:""; position:absolute; left:10px; right:10px; top:19px;
  height:2px; background: currentColor; transform-origin: center;
}
.drawer-close::before{ transform: rotate(45deg); }
.drawer-close::after { transform: rotate(-45deg); }
.drawer.open .drawer-close{ display:block; }

/* Full-width on phones / small landscape */
@media (max-width: 767.98px),
       (max-height: 520px) and (max-width: 1024px),
       (orientation: landscape) and (max-width: 1024px){
  .drawer-panel{
    width: 100vw; border-right: none;
    --pad-x: 32px; position: relative;
    --drawer-col-width: min(640px, calc(100vw - (var(--pad-x) * 2)));
    --groups-gap: clamp(48px, 8dvh, 140px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .drawer-link, .drawer.open .drawer-link{ transition: none; transform: none; opacity: 1; }
  .drawer-panel{ transition: none; }
}











/* ==========  Footer ======================================================== */
.site-footer{
  position: relative; left: 50%; right: 50%; width:100vw; 
  margin-left: -50vw; margin-right: -50vw; max-width:none;
  border-top: none;
  background: #f9f9f9;
  padding: 68px 20px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--footer-font);
  color: var(--footer-fg);
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--rail);
  display: grid;
  grid-template-columns: auto 1fr auto;      /* logo | links | copy */
  grid-template-areas: "logo links copy";
  align-items: center; column-gap: var(--col-gap); text-align: initial;
}
.footer-logo{
  grid-area: logo;
  display: inline-block;
  height: var(--footer-logo-h);
  width: calc(var(--footer-logo-h) * var(--footer-logo-aspect));
  background: url("footer-logo.png") no-repeat left center / contain;
  line-height: 0; user-select: none; -webkit-user-select: none;
}
.footer-nav{
  grid-area: links; justify-self: center; display: flex; gap: var(--links-gap); flex-wrap: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.footer-nav a{
  text-decoration: none; color: var(--footer-fg); opacity: .95; font-size: 16px; line-height: 1.2; white-space: nowrap;
  transition: color var(--fade) ease, opacity var(--fade) ease;
}
.footer-nav a:hover,
.footer-nav a:focus-visible{ color: var(--footer-fg-hover); opacity: 1; outline: none; }
.footer-nav a:active{ color: var(--footer-fg-strong); opacity: .9; }
.footer-copy{
  grid-area: copy; justify-self: end; color: var(--footer-fg); opacity: .95; font-size: 16px; line-height: 1.2; white-space: nowrap; margin: 0;
}
@media (min-width: 1200px){ .footer-inner{ column-gap: 64px; } .footer-nav{ gap: 28px; } }
@media (max-width: 1100px){
  .footer-inner{
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "links" "copy";
    row-gap: 0; justify-items: start;
  }
  .footer-logo { margin-bottom: var(--gap-vert-logo-links); }
  .footer-nav  { margin-bottom: var(--gap-vert-links-copy); }
  .footer-copy { margin-bottom: 0; }
  .footer-logo{ height: var(--footer-logo-h); width: calc(var(--footer-logo-h) * var(--footer-logo-aspect)); }
  .footer-nav{ justify-self: start; display: flex; gap: var(--links-gap); flex-wrap: nowrap; }
  .footer-copy{ justify-self: start; white-space: normal; }
}
@media (max-width: 360px){
  .footer-nav{ display: grid; gap: var(--stack-links-gap); width: 100%; }
  .footer-nav a{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px){
  .ig-slider{
    padding-inline: var(--pad);          /* same as page gutters */
    scroll-padding-inline: var(--pad);
  }
  .ig-track{ grid-auto-columns: 100%; gap: var(--gap); }
}
@media (max-width: 767.98px){
  .footer-logo{
    height: var(--phone-logo-h);
    width: calc(var(--phone-logo-h) * var(--footer-logo-aspect));
  }
}
@media (prefers-reduced-motion: reduce){
  .footer-nav a{ transition: none; }
}


/* =================== Search Overlay (Modal) ================================ */
#site-search[aria-hidden="true"]{ display:none; }
#site-search[aria-hidden="false"]{
  position: fixed; inset: 0; z-index: 3000;
  display: block;
}
.search-wrap{ position:absolute; inset:0; display:grid; grid-template-rows: auto 1fr; background:#fff; }

.search-bar{
  display:grid; grid-template-columns: 1fr var(--edge);
  align-items:center;
  padding: 18px var(--rail);
  border-bottom: 1px solid var(--hair);
}
.search-input{
  appearance:none; border:0; outline:0; background:transparent; width:100%;
  font-size: clamp(18px, 3.2vw, 22px); line-height: 1.2; color:#111;
}
.search-input::placeholder{ color:#999; }
.search-close{
  width: var(--edge); height: var(--edge);
  border: 0; background: transparent; cursor: pointer; color:#999;
  position: relative;
}
.search-close::before, .search-close::after{
  content:""; position:absolute; left: 12px; right: 12px; top: calc(50% - 1px);
  height: 2px; background: currentColor; transform-origin:center;
}
.search-close::before{ transform: rotate(45deg); }
.search-close::after { transform: rotate(-45deg); }

.search-body{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px var(--rail) 40px;
}

.search-status{ font-size:14px; color:#666; margin: 12px 0 18px; }
#site-search .search-list,
#site-search .search-item{
  list-style: none;
  margin: 0;
  padding: 0;
#site-search .search-list > li::marker,
#site-search .search-item::marker{ content: ""; display:none; }
}

.search-item a{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; text-decoration:none; color:#111; border-bottom:1px solid var(--hair);
}

.search-item a:hover{ color:#555; }
.result-title{ display:block; font-weight:600; font-size: 16px; margin-bottom:6px; }
.result-snippet{ display:block; font-size:14px; color:#444; }
mark{ background: #ffeb99; }

/* body scroll lock while search is open (drawer stays free) */
body.search-open{ overflow:hidden; }


/* 1) Two-dash (menu) hover/focus color */
.menu-toggle:hover,
.menu-toggle:focus-visible{
  color:#999;
}
/* make sure bars inherit currentColor (already set above, but reinforce) */
.menu-toggle span{ background: currentColor; }


/* 3) Keyboard focus hints (non-intrusive)
   Desktop only: keep keyboard focus visible; avoid tap squares on mobile */
@media (hover: hover) and (pointer: fine){
  .menu-toggle:focus-visible,
  .search-toggle:focus-visible{
    outline: 2px solid rgba(0,0,0,.2);
    outline-offset: 2px;
  }
}
/* Mobile/touch: remove tap outlines entirely */
@media (hover: none) and (pointer: coarse){
  .menu-toggle:focus,
  .menu-toggle:focus-visible,
  .search-toggle:focus,
  .search-toggle:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
}


/* === Header patch 2025-08-30 ============================================== */

/* Search button visibility */
.search-toggle{
  display: grid;
  place-items: center;
  width: var(--edge);
  height: var(--edge);
  border: 0;
  background: transparent;
  color: #999;
  cursor: pointer;
  margin-top: -3px;
  align-self: center;
  opacity: 1;
  pointer-events: auto;
  justify-self: end;
}

header.is-scrolled .search-toggle{
  opacity: 1;
  pointer-events: auto;
}




/* =================== LEGAL  =================== */
.legal{
  max-width: 720px;
  margin-inline: auto;
  padding-left:  calc(var(--rail) + env(safe-area-inset-left));
  padding-right: calc(var(--rail) + env(safe-area-inset-right));
  /* HEADER → TITLE GAP: change the +8px here (this one actually works) */
  padding-top: 8px;
  
  line-height: 1.65;
  font-size: 16px;      /* adjust page base size here if needed */
  color: #111;
}

/* Page title + meta (kept out of sticky; anchor-safe) */
.legal .page-header{
  margin: 0 0 10px;
  border: 0;
  position: static;
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* Sections — collapse-proof spacing + anchor-safe */
.legal .legal-section{
  margin: 0;                                /* no collapsing surprises */
  padding-block: 8px;                       /* inner air inside a section */
  scroll-margin-top: calc(var(--header-h) + 8px);
}



/* Title → first section gap (edit this to taste) */
.legal .legal-section:first-of-type{ margin-top: 10px; }

/* ONLY the gap BETWEEN sections (main knob) */
.legal .legal-section + .legal-section{ margin-top: 12px; }

/* tidy edges */
.legal .legal-section > :first-child{ margin-top: 0; }
.legal .legal-section > :last-child{  margin-bottom: 0; }





/* Terms/Legal pages: tighten list indent */
.legal ul,
.legal ol{
  padding-left: 18px;   /* default browsers ~40px; tune this number */
  margin-left: 0;       /* remove extra UA margin */
  list-style-position: outside;
}
.legal li{ margin-left: 0; }



/* Optional: focus ring without color/underline changes */
.legal a[href^="mailto:"]:focus-visible{
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}
/* LEGAL (all pages using <main class="legal">): tone body text under titles */
.legal .legal-section > p,
.legal .legal-section > ul,
.legal .legal-section > ol{
  color: #555;
}

/* (Optional) ensure nested list items inherit the same tone */
.legal .legal-section ul li,
.legal .legal-section ol li{
  color: #555;
}


/* LEGAL pages: mailto link looks like body text (#555),
   and on hover/focus it shifts to #999, no underline */
.legal a[href^="mailto:"]{
  color: #555;            /* same as the paragraph text */
  text-decoration: none;  /* no underline */
  border: 0;              /* remove global hairline */
  display: inline;        /* undo global block link */
  padding: 0;             /* undo global padding */
}
/* keep visited same as base */
.legal a[href^="mailto:"]:visited{
  color: #555;
}
/* hover/focus to #999 */
.legal a[href^="mailto:"]:hover,
.legal a[href^="mailto:"]:focus-visible{
  color: #999;
  text-decoration: none;
  border: 0;
}
/* (optional) active also #999 */
.legal a[href^="mailto:"]:active{
  color: #999;
}

.legal a[x-apple-data-detectors]{
  color: #555 !important;
  text-decoration: none !important;
}
/* LEGAL: unified heading sizes across Terms/Privacy/Contact */
.legal h1{
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 8px;
  font-weight: 700;
}

.legal h2{
  font-size: 24px;
  line-height: 1.25;
  margin: 10px 0 6px;
  font-weight: 600;
}

@media (max-width: 767.98px){
  .legal{
    padding-left:  calc(max(20px, var(--pad)) + env(safe-area-inset-left));
    padding-right: calc(max(20px, var(--pad)) + env(safe-area-inset-right));
  }
}






.legal img,
.legal video,
.legal iframe{ max-width: 100%; height: auto; }
.legal table{ width: 100%; border-collapse: collapse; }
.legal a, .legal code, .legal pre{
  word-break: break-word;
  overflow-wrap: anywhere; /* long URLs/strings won’t spill */
}


/* ====== Shared gallery grid ====== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Uniform tile frame (IG-like 3:4) */
.gallery-grid picture {
  display: block;
  aspect-ratio: 3 / 4;   /* change here if you want a different ratio later */
  overflow: hidden;
}
.gallery-grid picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
}
.gallery-grid img,
.gallery-grid picture {
  border: 0;
  outline: 0;
  background: transparent;
}

/* ====== Page-specific ordering ====== */
/* Gallery page: follow DOM (you already list newest → oldest) */
.gallery-page .gallery-grid { grid-auto-flow: row; }
.gallery-page .gallery-grid > * { order: 0; }  /* defensive no-op */

/* About page: also follow DOM (you list 1 → 6) */
.about-page .gallery-grid { grid-auto-flow: row; }







/* ====== Stories ====== */
:root{
  --story-media-w: clamp(320px, 26vw, 560px);
  --story-gap: 16px;
  --story-text-gap: 30px;
}

.stories-list{
  display: grid;
  row-gap: 56px;
  padding: 48px 0 0;
}

/* ---------- DESKTOP (>=900px): per-image alignment ---------- */
@media (min-width: 900px){
  .story{
    display: grid;
    grid-template-columns: 1fr 1fr;     /* left half | right half (midline at 50%) */
    grid-template-rows: auto auto;      /* row1 = img1+text1, row2 = img2+text2 */
    column-gap: 28px;
    row-gap: var(--story-gap);
    align-items: end;
  }
  .stories-list{
    row-gap: 300px; /* was 56px — tweak to taste (e.g., 72px, 96px, 120px) */
  }

  /* Let the image wrappers and text sit directly on the parent grid */
  .story .media{ display: contents; }
  .story .copy { display: contents; }

  /* Row placement (unchanged) */
  .story .ph1 { grid-column: 1; grid-row: 1; }
  .story .t1  { grid-column: 2; grid-row: 1; }
  .story .ph2 { grid-column: 1; grid-row: 2; }
  .story .t2  { grid-column: 2; grid-row: 2; }


  /* Center the images inside the LEFT half */
  .story .ph{
    justify-self: center;               /* centers in its half */
    width: var(--story-media-w);        /* clamped width (unchanged) */
  }
/* put images on the right (col 2), text on the left (col 1) */
  .story--flip .ph1 { grid-column: 2; grid-row: 1; }
  .story--flip .ph2 { grid-column: 2; grid-row: 2; }
  .story--flip .t1  { grid-column: 1; grid-row: 1; }
  .story--flip .t2  { grid-column: 1; grid-row: 2; }

  /* keep images centered in their half; anchor text to the midline */
  .story--flip .ph  { justify-self: center; }   /* same as normal */
  .story--flip .t1,
  .story--flip .t2  { justify-self: end; }      /* right edge = midline */
  
  /* Text at midline, bottom-aligned with its image */
  .story .t1,
  .story .t2{
    justify-self: start;                /* anchor to midline */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;          /* bottom-align with image */
    max-inline-size: 60ch;
  }

  /* Image framing (no per-image margins; gap comes from .story row-gap) */
  .story .ph picture{
    display:block;
    aspect-ratio: 3/4;
    overflow:hidden;
    margin: 0;                          /* <-- was '0 0 var(--story-gap)' */
  }
  /* removed: .story .ph2 picture { margin-bottom: 0; } */

  .story .ph picture img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  }
}


/* ---------- TABLET (<=900px): images side-by-side, text below ---------- */
@media (max-width: 900px){
  .story{
    display: grid;
    grid-template-columns: 1fr;         /* media on top, then copy */
    row-gap: 18px;
    --story-media-w: 560px;
  }

  /* Turn media into a real 2-col grid (this is the key flip) */
  .story .media{
    display: grid;
    grid-template-columns: 1fr 1fr;     /* two images side by side */
    gap: var(--story-gap);              /* gap BETWEEN the two images */
    inline-size: 100%;
  }

  /* Remove desktop-only margins used for stacked images */
  .story .ph picture{ margin: 0; }

  /* Text runs below */
  .story .copy{
    display: block;
    max-inline-size: none;
    width: 100%;
  }

  .story .ph picture{
    display:block; aspect-ratio:3/4; overflow:hidden;
  }
  .story .ph picture img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  }
  .story .copy .t + .t{
    margin-top: var(--story-text-gap);
  }

}

/* ---------- PHONE (<=600px): images stack again ---------- */
@media (max-width: 600px){
  .story .copy .t + .t{
    margin-top: 16px;
  }
  .story .media{
    grid-template-columns: 1fr;         /* one image per row */
  }
}
/* Colors & typography for story text */
:root{
  --story-title-color: #111;
  --story-body-color:  #555;
}

.story .copy .t > p:first-of-type{
  /* Title (the first <p> inside each .t) */
  color: var(--story-title-color);
  font-weight: 700;           /* bold */
  line-height: 1.25;          /* tighter title line-height */
  margin: 0 0 6px;            /* small gap before body */
}

.story .copy .t > p + p{
  /* Body (the paragraph(s) after the title) */
  color: var(--story-body-color);
  font-weight: 400;
  line-height: 1.6;
  margin: 0;                  /* keep tight with title gap controlled above */
}





/* Plain text button: always underlined, color shifts on hover */
/* Always-underlined, never blue */
.btn-text,
.btn-text:link,
.btn-text:visited,
.btn-text:hover,
.btn-text:focus,
.btn-text:active{
  color: #555;                  /* default + visited + active */
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* Hover/focus color (still not blue) */
.btn-text:hover,
.btn-text:focus{
  color: #999;
}

/* Optional: accessibility */
.btn-text:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}




/* --- Index 3-up slider --- */
.index-gallery{
  position: relative; z-index: auto;
  --gap: 16px;
  --ends: 0;       /* desktop/tablet: ends = gap */
}

.ig-slider{
  overflow: hidden;
  padding-inline: var(--ends);          /* ends controlled by --ends */
  scroll-padding-inline: var(--rail);   /* snap offset matches rail */
}

.ig-track{
  display: grid;
  grid-auto-flow: column;
  gap: var(--gap);
  padding: 0; margin: 0; list-style: none;

  grid-auto-columns: calc((100% - (var(--gap) * 2)) / 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.ig-tile{ scroll-snap-align: start; }
.ig-tile picture{ display:block; aspect-ratio: 3 / 4; overflow:hidden; }
.ig-tile img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.ig-track, .ig-tile, .ig-tile picture { min-width: 0; }

/* 2-up at ≤900px */
@media (max-width: 900px){
  .ig-track{ grid-auto-columns: calc((100% - var(--gap)) / 2); }
}

/* PHONE (≤600px): match your Gallery/Stories “edge-to-edge” feel */
@media (max-width: 600px){
  .index-gallery{ --ends: 0; }          /* 🔑 no extra end padding on phone */
  .ig-track{ grid-auto-columns: 100%; gap: var(--gap); }
}






/* Row under the images, aligned like the header: [edge][center][edge] */
.ig-controls{
  display: grid;
  grid-template-columns: var(--edge) 1fr var(--edge);
  align-items: center;
  margin-top: clamp(8px, 2vw, 14px);
}

/* Center the dots in the middle column */
.ig-dots{
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: 8px;
  pointer-events: none; /* purely indicative, not clickable */
}

/* Dot style: inactive #555, active #111 (clear on white background) */
.ig-dots .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #111;
  opacity: .65;
}
.ig-dots .dot.is-active{
  background: #999;
  opacity: 1;
}

/* phone sizing tweak */
@media (max-width: 600px){
  .ig-dots .dot{ width: 9px; height: 9px; }
}




/* === Index: make App section layout match Story === */
@media (min-width: 900px){
  .index-page section.app{
    display: grid;
    grid-template-columns: 1fr 1fr;  /* left | right (same as story) */
    column-gap: 40px;                /* match your story/hero gap */
    align-items: center;             /* middle-align like stories */
  }

  /* Put the app copy in the right column and match story text width */
  .index-page section.app .app-copy{
    grid-column: 2;
    max-inline-size: 56ch;           /* same readable width as story text */
    /* optional: ensure left column stays empty like a media slot */
  }
}

/* Mobile/tablet: stack like stories */
@media (max-width: 899.98px){
  .index-page section.app{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .index-page section.app .app-copy{
    grid-column: 1;
    max-inline-size: 100%;
  }
}






/* === ABOUT PAGE TYPOGRAPHY (unchanged from your intent) === */
.about h1{
  font-size: clamp(30px, 2.6vw, 36px);
  line-height: 1.15;
  color: #111;
  margin: 0 0 10px;
}
.about h2{
  color: #111;
  margin: 0; /* tighter space to the paragraph */
  font-size: 1.2rem;         
  font-weight: 700;           /* bold */
  color: #111;              /* same strong tone as main titles */
  line-height: 1.6;           /* align with paragraph rhythm */

}
.about p{ color: #555; }

/* === APP TYPOGRAPHY (App page + Index app section) === */
/* App page main title and subheads */
.app h1{
  font-size: clamp(30px, 2.6vw, 36px);
  line-height: 1.15;
  color: #111;
  margin: 0 0 10px;
}
.app h2{
  color: #111;
  margin: 0; /* tighter gap under secondary titles */
  margin-block: 0;
  font-size: 1.2rem;         
  font-weight: 700;           /* bold */
  color: #111;              /* same strong tone as main titles */
  line-height: 1.6;           /* align with paragraph rhythm */

}
.app p{ color: #555; }




/* On mobile, still stack cleanly */
@media (max-width: 899.98px){
  .index-page .story{
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .index-page .story .media{ grid-column: 1; }
  .index-page .story .copy { grid-column: 1; }
}



/* === App section on Index (match Stories) === */
.index-page .app{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* left | right halves */
  column-gap: 40px;                 /* same gap as stories */
  align-items: center;
  padding: 8vh 0;
}

/* App text: same placement + width as story copy */
.index-page .app-copy{
  grid-column: 2;                   /* right column */
  max-inline-size: 56ch;            /* match story text measure */
  justify-self: start;              /* align with column start */
}

/* Typography (unchanged) */
.index-page .app-copy h1{
  margin: 0 0 8px;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.index-page .app-copy p{
  margin: 0;
  color: #444;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
}

/* Optional kicker (same style as stories kicker) */
.index-page .app-kicker{
  margin: 0 0 8px;
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #888;
}

/* Mobile: stack full width like stories */
@media (max-width: 899.98px){
  .index-page .app{
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .index-page .app-copy{
    grid-column: 1;
    max-inline-size: 100%;
  }
}


/* === Index: uniform vertical rhythm (80px everywhere) === */

/* Use only section margin for between-sections spacing */
.index-page main > section + section {
  margin-top: 60px;
}

/* Stories block on index:
   - no extra top padding (so hero→stories is just 80px)
   - row gap between story cards = 80px
*/
.index-page .stories-list{
  padding-top: 0;
  row-gap: 60px;
}

/* Ensure desktop doesn’t revert to the old 300px rule */
@media (min-width: 900px){
  .index-page .stories-list{
    row-gap: 60px ;  /* wins over the original .stories-list rule */
  }
}


.stories-list [id], .gallery-grid [id] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .stories-list [id],
  .gallery-grid [id] { scroll-margin-top: 64px; }
}
/* search thumbnails */
.search-item a { display:flex; align-items:center; gap:12px; padding:10px 0; text-decoration:none; }
.search-thumb{ width:48px; height:48px; object-fit:cover; border-radius:6px; }
.search-thumb-wrap{ display:block; width:48px; height:48px; flex:0 0 48px; }
.result-title { font-weight:600; display:block; }
.result-type{ opacity:.6; font-size:12px; margin:0; display:block; }
.result-copy{ display:flex; flex-direction:column; min-width:0; }
.result-meta{ font-size:13px; color:#666; line-height:1.45; }
.result-tags{ display:inline; opacity:.9; }
.result-tags .tag{
  display:inline-block; border:1px solid var(--hair); border-radius:999px;
  padding:2px 8px; margin-right:6px; font-size:12px;
}
.result-blurb{ opacity:.85; }