@charset "UTF-8";
/* ===================================================================
   discover.css — /experiences/ and /journal/ only.

   Loaded after ds.css and depends on its tokens. It REUSES the design
   system (.oh-card, .oh-chip, .oh-drawer, .oh-grid, .oh-empty …) and
   never redefines any of it. Every selector here is new, prefixed
   .oh-exp-m- (experiences marketplace) or .oh-jr- (journal), so it
   cannot collide with the explorer's existing .oh-exp- namespace.
   =================================================================== */

/* ==================================================================
   A. EXPERIENCES
   ================================================================== */

/* ---------------------------------------------------------- A1. hero */
.oh-exp-m-hero{
  padding-block:var(--oh-s7) var(--oh-s6);
  background:linear-gradient(180deg,var(--cream) 0%,var(--white) 100%);
}
.oh-exp-m-hero__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--oh-s6);align-items:center;
}
.oh-exp-m-hero__copy{display:flex;flex-direction:column;gap:var(--oh-s3);align-items:flex-start}
.oh-exp-m-hero__cta{display:flex;flex-wrap:wrap;gap:var(--oh-s2);margin:var(--oh-s2) 0 0}

.oh-exp-m-stats{
  display:flex;flex-wrap:wrap;gap:var(--oh-s5);
  margin:var(--oh-s2) 0 0;padding:var(--oh-s3) 0 0;list-style:none;
  border-top:1px solid var(--line);width:100%;
}
.oh-exp-m-stats li{display:flex;flex-direction:column;gap:2px;min-width:0}
.oh-exp-m-stats__n{
  font-family:var(--serif);font-size:clamp(26px,2.4vw,34px);line-height:1;color:var(--ink);
}
.oh-exp-m-stats__l{
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* three real term photographs, deliberately unequal */
.oh-exp-m-hero__art{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:var(--oh-s3);aspect-ratio:1/.92;min-height:0;
}
.oh-exp-m-hero__tile{
  position:relative;margin:0;overflow:hidden;min-width:0;min-height:0;
  border-radius:var(--oh-radius-lg);box-shadow:var(--oh-shadow-2);background:var(--card);
}
.oh-exp-m-hero__tile:first-child{grid-row:span 2}
.oh-exp-m-hero__tile img{width:100%;height:100%;object-fit:cover;display:block}
.oh-exp-m-hero__tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--oh-s4) var(--oh-s3) var(--oh-s2);
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(180deg,rgba(22,33,27,0),rgba(22,33,27,.72));
}

/* ------------------------------------------------------- A2. filters */
.oh-exp-m-filters{
  display:flex;flex-direction:column;gap:var(--oh-s3);
  margin-bottom:var(--oh-s5);padding-bottom:var(--oh-s4);
  border-bottom:1px solid var(--line);
}
.oh-exp-m-filters__row{display:flex;flex-direction:column;gap:var(--oh-s2)}
.oh-exp-m-chips .oh-chip{text-decoration:none}
.oh-exp-m-chip__n{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  margin-left:2px;border-radius:var(--oh-radius-pill);
  background:var(--tan);color:var(--green-d);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
}
.oh-chip--active .oh-exp-m-chip__n,
.oh-chip[aria-pressed="true"] .oh-exp-m-chip__n{background:rgba(254,253,251,.22);color:var(--cream)}

.oh-exp-m-filters__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--oh-s3);flex-wrap:wrap;
}
.oh-exp-m-filters__count{
  margin:0;font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--muted);
}
.oh-exp-m-filters__count strong{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------- A3. grid */
.oh-exp-m-grid[hidden]{display:none}
.oh-exp-m-card.is-out{display:none}
.oh-exp-m-card .oh-card__media{aspect-ratio:4/3}
.oh-exp-m-card__noimg{
  position:absolute;inset:0;
  background:linear-gradient(140deg,var(--tan) 0%,var(--card) 100%);
}

/* the image is the quick-view trigger; it must sit above the stretched
   title link that ds.css paints across the whole card at z-index 1 */
.oh-exp-m-open{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  padding:var(--oh-s4);border:0;cursor:pointer;
  background:transparent;color:var(--white);
  -webkit-appearance:none;appearance:none;
}
.oh-exp-m-open__label{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--oh-radius-pill);
  background:rgba(254,253,251,.94);color:var(--ink);
  font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  box-shadow:var(--oh-shadow-2);
  opacity:0;transform:translateY(10px);
  transition:opacity var(--oh-dur) var(--oh-ease),transform var(--oh-dur) var(--oh-ease);
}
.oh-exp-m-card:hover .oh-exp-m-open__label,
.oh-exp-m-card:focus-within .oh-exp-m-open__label{opacity:1;transform:translateY(0)}
.oh-exp-m-open:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--oh-focus)}

/* --------------------------------------------------------- A4. drawer */
.oh-exp-m-drawer__head{display:flex;flex-direction:column;gap:4px;min-width:0}
.oh-exp-m-drawer__sub{
  margin:0;font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--muted);
}
.oh-exp-m-drawer .oh-drawer__body{gap:var(--oh-s2)}
.oh-exp-m-row .oh-card__title{font-size:15px;line-height:1.4}
.oh-exp-m-row .oh-card__media{width:98px}
.oh-exp-m-row .oh-card__save{width:30px;height:30px;top:6px;right:6px}
.oh-exp-m-row .oh-card__save svg{width:15px;height:15px}
.oh-exp-m-drawer .oh-skel--card{height:96px}

/* ------------------------------------------------ A5. recently viewed */
.oh-exp-m-recent[hidden]{display:none}
.oh-exp-m-rail{display:flex;flex-direction:column;gap:var(--oh-s3)}
.oh-exp-m-recent .oh-rail__item{flex:0 0 clamp(230px,26vw,280px);width:clamp(230px,26vw,280px)}
.oh-exp-m-recent__card{height:100%}

/* ----------------------------------------------- A6. mobile furniture */
.oh-exp-m-bar{display:none}
.oh-exp-m-bar__n{
  font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--muted);white-space:nowrap;
}
.oh-exp-m-bar__n strong{color:var(--ink);font-weight:700}
.oh-exp-m-sheetwrap .oh-drawer__body{padding-top:var(--oh-s3)}
.oh-exp-m-sheetwrap .oh-exp-m-filters{border-bottom:0;margin-bottom:0;padding-bottom:0}

/* ==================================================================
   B. JOURNAL
   ================================================================== */

/* ---------------------------------------------------------- B1. hero */
.oh-jr-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:clamp(520px,82vh,860px);
  padding-block:var(--oh-s8) var(--oh-s6);
  background:var(--green-d);color:var(--cream);
}
.oh-jr-hero__art{position:absolute;inset:0;z-index:-2}
.oh-jr-hero__art img{width:100%;height:100%;object-fit:cover;display:block}
.oh-jr-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(22,33,27,.58) 0%,rgba(22,33,27,.20) 34%,rgba(22,33,27,.86) 100%),
    linear-gradient(90deg,rgba(22,33,27,.52) 0%,rgba(22,33,27,0) 62%);
}
.oh-jr-hero:not(.has-art){min-height:auto;padding-block:var(--oh-s7)}
.oh-jr-hero:not(.has-art)::after{background:none}

.oh-jr-hero__in{
  position:relative;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--oh-s6) var(--oh-s7);align-items:end;
}
.oh-jr-hero .oh-eyebrow{color:var(--tan)}
.oh-jr-hero__mast{display:flex;flex-direction:column;gap:var(--oh-s2);align-self:end}
.oh-jr-hero__h{
  font-family:var(--serif);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(42px,7.4vw,104px);line-height:.94;margin:0;color:var(--white);
  text-wrap:balance;
}
.oh-jr-hero__sub{
  margin:0;max-width:34ch;font-size:var(--oh-fs-lead);line-height:1.7;
  color:rgba(250,246,243,.84);
}

.oh-jr-hero__lead{
  display:flex;flex-direction:column;gap:var(--oh-s2);align-items:flex-start;
  padding:var(--oh-s4) var(--oh-s5);
  background:rgba(22,33,27,.42);border:1px solid rgba(250,246,243,.18);
  border-radius:var(--oh-radius-lg);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.oh-jr-hero__kicker{display:flex;align-items:center;gap:var(--oh-s2);margin:0;flex-wrap:wrap}
.oh-jr-hero__cat{
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tan);text-decoration:none;
}
.oh-jr-hero__cat:hover{color:var(--white)}
.oh-jr-hero__title{
  font-family:var(--serif);font-weight:500;margin:0;
  font-size:clamp(23px,2.5vw,34px);line-height:1.2;text-wrap:balance;
}
.oh-jr-hero__title a{color:var(--white);text-decoration:none}
.oh-jr-hero__title a:hover{text-decoration:underline;text-underline-offset:5px}
.oh-jr-hero__dek{
  margin:0;font-size:var(--oh-fs-base);line-height:1.7;color:rgba(250,246,243,.8);
  max-width:52ch;
}
.oh-jr-hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--oh-s3);margin:0;
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(250,246,243,.66);
}
.oh-jr-hero__act{display:flex;flex-wrap:wrap;gap:var(--oh-s2);margin:var(--oh-s1) 0 0}
.oh-jr-hero__act .oh-btn--ghost{background:transparent;color:var(--cream);border-color:rgba(250,246,243,.4)}
.oh-jr-hero__act .oh-btn--ghost:hover{background:rgba(250,246,243,.12);border-color:var(--cream)}
.oh-jr-hero__act .oh-jr-bm.is-saved{background:var(--cream);color:var(--green-d);border-color:var(--cream)}

.oh-jr-hero__scroll{grid-column:1/-1;margin:var(--oh-s4) 0 0}
.oh-jr-hero__scroll a{
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,243,.78);
  text-decoration:none;border-bottom:1px solid rgba(250,246,243,.4);padding-bottom:4px;
}
.oh-jr-hero__scroll a:hover{color:var(--white);border-color:var(--white)}

/* ------------------------------------------ B2. asymmetric feature */
.oh-jr-feature__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-areas:
    "tall wide"
    "tall a"
    "tall b";
  gap:var(--oh-s4) var(--oh-s5);
  align-items:start;
}
.oh-jr-feature__slot--tall{grid-area:tall}
.oh-jr-feature__slot--wide{grid-area:wide}
.oh-jr-feature__slot--a{grid-area:a}
.oh-jr-feature__slot--b{grid-area:b}

.oh-jr-feature__slot--tall .oh-card__media{aspect-ratio:4/5}
.oh-jr-feature__slot--tall .oh-card__title{font-size:clamp(22px,2vw,30px)}

/* MEASURED at 1440px: the lead column spans three rows (651 + 148 + 148),
   but a fixed 4/5 media left ~270px of dead space under it. Above the
   stacking breakpoint the lead photograph fills its column instead. */
@media (min-width:1081px){
  .oh-jr-feature__grid{align-items:stretch}
  .oh-jr-feature__slot--tall > .oh-jr-card{height:100%}
  .oh-jr-feature__slot--tall .oh-card__media{
    aspect-ratio:auto;flex:1 1 auto;min-height:clamp(420px,42vw,660px);
  }
}
.oh-jr-feature__slot--wide .oh-card__media{aspect-ratio:16/9}
.oh-jr-feature__slot--wide .oh-card__title{font-size:clamp(19px,1.5vw,23px)}

/* the two short rows read as a list, not as cards */
.oh-jr-card--compact{
  display:grid;grid-template-columns:120px minmax(0,1fr);
  gap:var(--oh-s3);align-items:center;
}
.oh-jr-card--compact .oh-card__media{
  aspect-ratio:1;border-radius:var(--oh-radius-sm);margin:0;
}
.oh-jr-card--compact .oh-card__body{padding:0}
.oh-jr-card--compact .oh-card__title{font-size:16px;line-height:1.4}
.oh-jr-card--compact .oh-card__save{width:32px;height:32px;top:7px;right:7px}
.oh-jr-card--compact .oh-card__save svg{width:15px;height:15px}

/* ------------------------------------------------ B3. archive + nav */
.oh-jr-nav{display:flex;flex-direction:column;gap:var(--oh-s3);margin-bottom:var(--oh-s5)}
.oh-jr-nav__head{margin-bottom:0}
.oh-jr-nav__chips .oh-chip{text-decoration:none}
.oh-jr-nav__n{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  margin-left:2px;border-radius:var(--oh-radius-pill);
  background:var(--tan);color:var(--green-d);font-size:10.5px;font-weight:700;
}
.oh-chip--active .oh-jr-nav__n,
.oh-chip[aria-pressed="true"] .oh-jr-nav__n{background:rgba(254,253,251,.22);color:var(--cream)}

.oh-jr-grid[hidden]{display:none}
.oh-jr-card.is-out{display:none}
/* `is-beyond` is the load-more gate. It only bites once ds.js has marked
   <html class="oh-js">, so a JS-less visitor sees all 106 stories. */
.oh-js .oh-jr-card.is-beyond{display:none}
.oh-jr-card .oh-card__media{aspect-ratio:3/2}
.oh-jr-card__noimg{
  position:absolute;inset:0;
  background:linear-gradient(140deg,var(--green-l) 0%,var(--bronze) 100%);
}
.oh-jr-card__cat{margin:0}
.oh-jr-card__cat a{
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);text-decoration:none;
  position:relative;z-index:2;
}
.oh-jr-card__cat a:hover{color:var(--green)}
.oh-jr-card__dest{margin:var(--oh-s1) 0 0}
.oh-jr-card__dest a{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 9px;border-radius:var(--oh-radius-pill);
  background:var(--card);border:1px solid var(--line);
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  color:var(--green-d);text-decoration:none;position:relative;z-index:2;
}
.oh-jr-card__dest a:hover{background:var(--green);border-color:var(--green);color:var(--cream)}
.oh-jr-card__dest svg{width:13px;height:13px;flex:none}

/* bookmark flag — reuses .oh-card__save geometry from ds.css */
.oh-jr-bm svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.oh-jr-bm.is-saved{color:var(--oh-save)}
.oh-jr-bm.is-saved svg{fill:currentColor}
.oh-jr-bm--inline{position:static;width:auto;height:auto;backdrop-filter:none;-webkit-backdrop-filter:none}

.oh-jr-more{
  display:flex;flex-direction:column;align-items:center;gap:var(--oh-s2);
  margin-top:var(--oh-s6);
}
.oh-jr-more__status{
  margin:0;font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--muted);
}
.oh-jr-more__status strong{color:var(--ink);font-weight:600}
.oh-jr-noscript{
  margin:var(--oh-s3) 0 0;text-align:center;font-size:var(--oh-fs-sm);color:var(--muted);
}

/* ==================================================================
   C. RESPONSIVE
   ================================================================== */
@media (max-width:1080px){
  .oh-exp-m-hero__in{grid-template-columns:minmax(0,1fr);gap:var(--oh-s5)}
  .oh-exp-m-hero__art{aspect-ratio:16/9}
  .oh-jr-hero__in{grid-template-columns:minmax(0,1fr);gap:var(--oh-s5)}
  .oh-jr-hero__sub{max-width:52ch}
  .oh-jr-feature__grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"tall" "wide" "a" "b";
  }
  .oh-jr-feature__slot--tall .oh-card__media{aspect-ratio:16/10}
}

@media (max-width:680px){
  .oh-exp-m-hero{padding-block:var(--oh-s6) var(--oh-s5)}
  .oh-exp-m-stats{gap:var(--oh-s4)}
  .oh-exp-m-hero__art{grid-template-rows:auto;aspect-ratio:auto}
  .oh-exp-m-hero__tile{aspect-ratio:1}
  .oh-exp-m-hero__tile:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:16/10}

  /* the desktop filter rail is replaced by the sticky bar + bottom sheet */
  .oh-exp-m-main > .oh-shell > .oh-exp-m-filters{display:none}
  .oh-exp-m-bar{display:flex}

  .oh-jr-hero{min-height:clamp(440px,74vh,640px)}
  .oh-jr-hero__lead{padding:var(--oh-s3) var(--oh-s4)}
  .oh-jr-card--compact{grid-template-columns:92px minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .oh-exp-m-open__label{transition:none}
}

/* The experience description on a hub card. Clamped to three lines so a
   long teaser cannot make one card taller than its neighbours. */
.oh-card__blurb{
  margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}