/* ==========================================================================
   HOME
   ========================================================================== */
.hero{
  padding-block:92px 130px;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.hero-copy h1{ margin-top:20px; }
.hero-copy .lede{ margin-top:35px; }
.hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-meta{
  display:flex; gap:34px; margin-top:56px; flex-wrap:wrap;
}
.hero-meta div strong{ display:block; font-family:var(--font-display); font-size:1.6rem; }
.hero-meta div span{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }

.hero-visual{ position:relative; }
.hero-visual .ph{ aspect-ratio:4/5; border-radius:var(--radius-lg); box-shadow:var(--shadow-lift); }
.hero-visual .float-card{
  position:absolute;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:16px 18px;
  box-shadow:var(--shadow-soft);
  font-size:0.86rem;
  display:flex; align-items:center; gap:12px;
}
.hero-visual .float-card.card-1{ top:-8%; left:-12%; }
.hero-visual .float-card.card-2{ bottom:8%; right:-14%; max-width:210px; }
.hero-visual .float-card .dot{ width:9px; height:9px; border-radius:50%; background:var(--brick); flex-shrink:0; }

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; padding-top:0; }
  /* Break the hero photo out of .container's side padding so it runs edge
     to edge, flush against the header above it — text below keeps padding. */
  .hero-visual{ order:-1; margin-left:-28px; margin-right:-28px; }
  .hero-visual .ph{ border-radius:0; box-shadow:none; }
  .hero-visual .float-card{ display:none; }
}
@media (max-width: 600px){
  .hero-visual{ margin-left:-20px; margin-right:-20px; }
}

@media (max-width: 1180px){
  .hero-copy{
    padding-left: 28px;
    padding-right: 28px;
  }
  .hero-visual .ph .specimen-tag{
    left: 47px;
    bottom: 20px;
  }
}

.pillars-section{ background:var(--brick-tint); }
.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.pillar-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:4px solid var(--brick);
  border-radius:var(--radius-lg);
  padding:38px 32px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.pillar-card.accent-gold{ border-top-color:var(--gold); }
.pillar-card.accent-ink{ border-top-color:var(--ink); }
.pillar-card .pillar-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  font-family:var(--font-mono); font-size:0.86rem; font-weight:700;
  color:var(--bg); background:var(--brick);
}
.pillar-card.accent-gold .pillar-badge{ background:var(--gold); }
.pillar-card.accent-ink .pillar-badge{ background:var(--ink); }
.pillar-card .pillar-label{
  display:block; margin-top:16px;
  font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-faint);
}
.pillar-card h3{ margin-top:10px; }
.pillar-card p{ margin-top:14px; color:var(--ink-soft); }
.pillar-card .btn{ margin-top:24px; }
@media (max-width: 860px){ .pillars{ grid-template-columns:1fr; } }

.work-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.work-thumb{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); height: 100%; display: block; background: var(--surface);}
.work-thumb .ph{ aspect-ratio:16/11; }
.work-thumb .cap{ padding:16px 18px;}
.work-thumb .cap h4{ font-size:1.4rem; line-height: 1.3; margin-top: 10px;}
.work-thumb .cap span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
@media (max-width: 860px){ .work-strip{ grid-template-columns:1fr; } }
@media (max-width: 860px){ 
  .feed .section-tight{padding: 20px 0 78px 0;} 
}
.feed-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.feed-strip .ph{ aspect-ratio:1/1; border-radius:var(--radius-md); }
@media (max-width: 700px){ .feed-strip{ grid-template-columns:repeat(2,1fr); } }

.blog .section{
  padding-top: 0px;
}
.blog.blog_detail .section{
  padding-top: 120px;
}
.blog-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
@media (max-width: 860px){ .blog-strip{ grid-template-columns:1fr; } }

.cta-band{
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--sage) 0%, #0B1B30 100%);
  color:var(--bg);
  padding:64px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.cta-band h2{ color:var(--bg); max-width:16ch; }
.cta-band .lede{ color:rgba(242, 236, 221,0.78); }
.cta-band .btn-primary{ background:var(--bg); color:var(--ink); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-hero{
  padding-block:100px 56px;
  text-align:center;
}
.about-hero h1{ max-width:16ch; margin:22px auto 0; }
.about-hero .lede{ margin:24px auto 0; }
.about-portrait{
  margin-top:64px;
  aspect-ratio:21/9;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
}

/* ---------- "The Story" — feature narrative with photo collage ---------- */
.story-feature{ padding-block:60px; }
.story-feature-head{ text-align:center; margin-bottom:70px; }
.story-feature-head .eyebrow{ justify-content:center; margin-bottom:16px; }
.story-feature-head .story-feature-title{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(2.6rem, 6vw, 4.2rem); color:var(--ink);
}
.story-feature-body{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; align-items:start; }
.story-collage{ position:relative; aspect-ratio:4/5; }
.collage-photo{
  position:absolute;
  border-radius:var(--radius-md);
  border:6px solid var(--surface);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.collage-photo.photo-1{ top:0; left:0; width:74%; aspect-ratio:4/5; transform:rotate(-6deg); z-index:1; }
.collage-photo.photo-2{ bottom:0; right:0; width:56%; aspect-ratio:4/5; transform:rotate(4deg); z-index:2; }
.collage-photo.photo-3{ top:36%; left:20%; width:52%; aspect-ratio:4/5; transform:rotate(-3deg); z-index:3; }
.collage-stamp{
  position:absolute; top:-18px; right:-6px; z-index:4;
  width:104px; height:104px; border-radius:50%;
  border:2px dashed var(--line-strong);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px;
  font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-faint); line-height:1.4;
  transform:rotate(-11deg);
  background:var(--bg);
}
.story-feature-text p{ font-size:1.1rem; color:var(--ink-soft); margin-top:20px; }
.story-feature-text p:first-child{ margin-top:0; }
@media (max-width: 900px){
  .story-feature-body{ grid-template-columns:1fr; }
  /* The 3 rotated photos are positioned for the desktop 4/5 box; on the
     shorter 16/10 mobile box they spill well past its bottom edge, and that
     spill scales with viewport width (everything's sized in %), so the
     clearance below has to scale with it too rather than being a fixed px. */
  .story-collage{ aspect-ratio:16/10; margin-bottom:clamp(150px, 26vw, 240px); }
}
@media (max-width: 520px){
  .story-collage{ aspect-ratio:4/5; margin-bottom:56px; }
}

/* ---------- "What I stand on" — dark mission statement ---------- */
.mission-block{
  padding:120px 0;
  text-align:center;
  background:
    radial-gradient(circle at 24% 20%, rgba(156,75,42,0.22), transparent 55%),
    radial-gradient(circle at 82% 82%, rgba(110,143,113,0.18), transparent 55%),
    var(--ink);
}
.mission-eyebrow{
  display:block;
  font-family:var(--font-body); font-weight:700; font-size:1.02rem;
  color:var(--bg); margin-bottom:24px;
}
.mission-statement{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.9rem, 4.2vw, 3.2rem); line-height:1.28;
  max-width:20ch; margin:0 auto; color:var(--bg);
}
.mission-statement em{ font-style:italic; color:var(--gold-tint); }

/* ---------- Testimonials — wide, center-focused auto-sliding carousel ---------- */
.testimonial-section{ background:var(--bg-alt); overflow:hidden; }
.testimonial-wrap{ position:relative; max-width:1600px; margin:0 auto; padding:0 28px; }
.testimonial-track{
  position:relative;
  display:flex;
  gap:26px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-top:4px;
  padding-bottom:12px;
  -ms-overflow-style:none;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.testimonial-track::-webkit-scrollbar{ display:none; }
.testimonial-card{
  scroll-snap-align:center;
  height: 100%;
  flex:0 0 clamp(280px, 42vw, 460px);
  padding: 50px 32px 80px 32px;
  border-top:4px solid var(--brick);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  opacity:0.4;
  transform:scale(0.94);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.testimonial-card.is-active{ opacity:1; transform:scale(1); }
.testimonial-card.accent-sage{ border-top-color:var(--sage); }
.testimonial-card.accent-gold{ border-top-color:var(--gold); }
.testimonial-card .mark{
  font-family:var(--font-display); font-size:2.2rem; color:var(--gold-soft);
  line-height:0.5; display:block; margin-bottom:20px;
}
.testimonial-card blockquote{ font-size:1.1rem; color:var(--ink); line-height:1.7;}
.testimonial-person{ display:flex; align-items:center; gap:12px; margin-top:36px; padding-left: 30px;}
.testimonial-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-soft);
  color:var(--ink);
  z-index:5;
  transition:background .2s, color .2s, transform .2s;
}
.testimonial-nav:hover{ background:var(--ink); color:var(--bg); transform:translateY(-50%) scale(1.06); }
.testimonial-prev{ left:0; }
.testimonial-next{ right:0; }
@media (max-width: 700px){
  .testimonial-nav{ width:38px; height:38px; }
  .testimonial-prev{ left:-6px; }
  .testimonial-next{ right:-6px; }

  .testimonial-track{
    padding: 0!important;
    gap: 0;
  }
  .testimonial-card .mark{
    margin-left: 40px;
  }
  .testimonial-card{
    padding: 40px 0px 60px 0px;
  }
  .testimonial-person{
    padding-left: 35px;
  }
}
.testimonial-person .ph{ width:44px; height:44px; border-radius:50%; flex-shrink:0; }
.testimonial-person .avatar-mono{ width:44px; height:44px; font-size:1rem; flex-shrink:0; }
.testimonial-person strong{ display:block; font-size:0.9rem; font-style:normal; }
.testimonial-person span{ font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
@media (max-width: 600px){ .testimonial-card{ flex-basis:78vw; } }

.timeline-section .section{ padding-block:50px 120px; }
.timeline{ position:relative; padding-left:0; }
.timeline::before{
  content:'';
  position:absolute;
  left:120px;
  top:8px; bottom:8px;
  width:1px;
  background:var(--line-strong);
}
.timeline-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:40px;
  padding:30px 0;
  position:relative;
}
.timeline-item::after{
  content:'';
  position:absolute;
  left:116px; top:36px;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--brick);
}
.timeline-item time{ font-family:var(--font-mono); font-size:0.85rem; color:var(--ink-soft); padding-top:2px; }
.timeline-item h4{ margin-bottom:8px; }
.timeline-item p{ color:var(--ink-soft); }
@media (max-width: 620px){
  .timeline::before{ left:5px; }
  /* Single column now, so nothing else pushes the text away from the dot
     and line the way the 120px date column did on desktop — give it its
     own left gutter instead of letting it start flush against them. */
  .timeline-item{ grid-template-columns:1fr; gap:6px; padding:22px 0 22px 28px; }
  .timeline-item::after{ left:1px; top:29px; }
  .timeline-item time{ padding-top:0; }
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
  padding:76px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stats-row .stat strong{ font-family:var(--font-display); font-size:clamp(2rem,4vw,3.2rem); display:block; }
.stats-row .stat span{ font-family:var(--font-mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); }
@media (max-width: 700px){ .stats-row{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   WORKS
   ========================================================================== */
.works-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:0;
}
.works-tab{
  display:inline-block;
  padding:14px 6px;
  margin-right:26px;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--ink-faint);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .25s, border-color .25s;
  background:none; border-top:none; border-left:none; border-right:none;
}
.works-tab:hover{ color:var(--ink-soft); }

.feed-tabs{ justify-content:center; }
.feed-tabs .works-tab{ padding-left:22px; padding-right:22px; }
.works-tab.active{ color:var(--ink); border-bottom-color:var(--brick); }

.works-panel{ padding-top:72px; }

/* --- Agency showcase: editorial header + card grid, no nested scroll panes --- */
.agency-showcase{ margin-bottom:72px; }
.agency-showcase:last-child{ margin-bottom:0; }
.agency-showcase + .agency-showcase{ padding-top:64px; border-top:1px solid var(--line); }

.agency-banner{ max-width:74ch; margin-bottom:40px; }
.agency-banner-top{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.agency-avatar{ width:64px; height:64px; border-radius:50%; flex-shrink:0; }
.agency-banner-top h2{ margin-top:4px; }
.agency-banner p.lede{ margin-top:0; }

.agency-meta-row{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin-top:24px;
}
.mini-stat{ display:flex; align-items:baseline; gap:7px; }
.mini-stat strong{ font-family:var(--font-display); font-size:1.5rem; }
.mini-stat span{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
.agency-tech-tags{ display:flex; gap:8px; flex-wrap:wrap; }

.agency-banner .btn{ margin-top:26px; }

.work-card .work-client-type{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.02em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-top:6px;
}
.work-card .work-stack{ display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.work-card .work-stack .tag{ font-size:0.68rem; }
.work-card .case-foot a{ color:var(--brick); }

/* --- Project detail: full-page case-study gallery, uncropped --- */
.project-gallery{
  margin-top:56px;
  display:flex; flex-direction:column; gap:36px;
  max-width:66ch;
}
.project-gallery-item{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
}
.project-gallery-item img{ display:block; width:100%; height:auto; }
.project-gallery-caption{
  padding:14px 20px;
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.02em;
  text-transform:uppercase; color:var(--ink-soft);
  border-top:1px solid var(--line);
}

/* --- Research / Investment grid panels --- */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.case-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.case-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.case-card .ph{ aspect-ratio:16/9; }
.case-card .case-body{ padding:26px 28px 30px; }
.case-card .case-tags{ display:flex; gap:8px; margin-bottom:14px; }
.case-card h3{ font-size:1.3rem; }
.case-card p{ color:var(--ink-soft); margin-top:12px; }
.case-card .case-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-soft); text-transform:uppercase; }
@media (max-width: 780px){ .case-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-wrap{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
}
.contact-side{
  background:var(--ink);
  color:var(--bg);
  padding:68px 54px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.contact-side h2{ color:var(--bg);}
.contact-side .lede{ color:rgba(242, 236, 221,0.72); margin-top:16px; }
.contact-detail{ margin-top:44px; display:flex; flex-direction:column; gap:22px; }
.contact-detail div span{ display:block; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(242, 236, 221,0.5); margin-bottom:6px; }
.contact-detail div strong{ font-family:var(--font-display); font-weight:500; font-size:1.15rem; }
.contact-side .footer-social{ margin-top:44px; }
.contact-side .footer-social a{ border-color:rgba(242, 236, 221,0.25); }

.contact-form{ padding:68px 58px; }
.field-section-label{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.98rem;
  color:var(--ink);
  margin-bottom:14px;
}
.field-checkbox-group{ display:flex; gap:10px; flex-wrap:wrap; }
.field-checkbox{ position:relative; }
.field-checkbox input{ position:absolute; opacity:0; }
.field-checkbox label{
  display:inline-flex; margin:0;
  padding:9px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong);
  font-family:var(--font-body); font-size:0.85rem; text-transform:none; letter-spacing:0;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .25s;
}
.field-checkbox input:checked + label{ background:var(--sage); color:var(--surface); border-color:var(--sage); }
.field-required{ color:var(--brick); }
.field-error{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:0.76rem; color:var(--brick); }
.field input.has-error, .field textarea.has-error, .field select.has-error{ border-color:var(--brick); }
.form-alert{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; margin-bottom:22px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--brick);
  background:var(--brick-tint);
  color:var(--ink);
  font-family:var(--font-body); font-size:0.9rem;
}
/* Honeypot: kept in the layout (not display:none) but clipped to nothing, so
   the bots that skip display:none fields still find and fill it. */
.hp-field{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:22px; }
.field label{ display:block; font-family:var(--font-mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%;
  background:var(--bg-alt);
  border:1.5px solid transparent;
  border-radius:var(--radius-sm);
  padding:13px 16px;
  color:var(--ink);
  transition:border-color .25s, background .25s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--surface);
}
.field textarea{ resize:vertical; min-height:130px; }
.field select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5C4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px;
  cursor:pointer;
}
.field-radio-group{ display:flex; gap:10px; flex-wrap:wrap; }
.field-radio{
  position:relative;
}
.field-radio input{ position:absolute; opacity:0; }
.field-radio label{
  display:inline-flex; margin:0;
  padding:9px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong);
  font-family:var(--font-body); font-size:0.85rem; text-transform:none; letter-spacing:0;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .25s;
}
.field-radio input:checked + label{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.form-note{ font-size:0.82rem; color:var(--ink-faint); margin-top:6px; }
.form-success{
  display:none;
  align-items:center; gap:12px;
  padding:16px 18px;
  border-radius:var(--radius-md);
  background:var(--sage-tint);
  color:var(--sage);
  font-size:0.92rem;
  margin-top:18px;
}
.form-success.show{ display:flex; }
@media (max-width: 900px){
  .contact-side,
  .contact-form{
    padding: 50px 30px;
  }
  .contact-wrap{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter-hero{
  text-align:center;
  padding-block:80px 40px;
}
.newsletter-form-card{
  width:100%;
  margin:36px auto 0;
  padding:44px 44px 40px;
  border:1px solid var(--line);
  border-top:4px solid var(--brick);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-lift);
  text-align:left;
}
.newsletter-trust{ margin-top:18px; font-size:0.82rem; color:var(--ink-faint); text-align:center; }

.perks-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.perk{ text-align:center; padding:10px; }
.perk .glyph-wrap{
  width:64px; height:64px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--brick-tint);
}
.perk:nth-child(2) .glyph-wrap{ background:var(--gold-tint); }
.perk .glyph{ width:26px; height:26px; color:var(--brick); }
.perk:nth-child(2) .glyph{ color:var(--gold); }
.perk:nth-child(3) .glyph{ color:var(--ink); }
@media (max-width: 780px){ .perks-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   PRIVACY / POLICY
   ========================================================================== */
.legal-layout{ display:grid; grid-template-columns:260px 1fr; gap:60px; align-items:start; }
.legal-toc{ position:sticky; top:110px; }
.legal-toc h4{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:16px; }
.legal-toc a{ display:block; padding:8px 0; font-size:0.9rem; color:var(--ink-soft); border-left:2px solid var(--line); padding-left:14px; transition:color .2s, border-color .2s; }
.legal-toc a:hover, .legal-toc a.active{ color:var(--ink); border-color:var(--brick); }
.legal-body h2{ font-size:1.5rem; margin-top:52px; margin-bottom:16px; scroll-margin-top:110px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color:var(--ink-soft); margin-top:14px; }
.legal-body ul{ margin-top:14px; padding-left:0; }
.legal-body ul li{ color:var(--ink-soft); padding-left:26px; position:relative; margin-top:10px; }
.legal-body ul li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.legal-updated{ font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-faint); }
@media (max-width: 860px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; display:flex; overflow-x:auto; gap:4px; padding-bottom:10px; }
  .legal-toc a{ border-left:none; border-bottom:2px solid var(--line); white-space:nowrap; padding:8px 12px; }
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-featured{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:44px;
  align-items:center;
  padding-bottom:70px;
  border-bottom:1px solid var(--line);
  margin-bottom:50px;
}
.blog-featured .ph{ aspect-ratio:4/3; border-radius:var(--radius-lg); }
.blog-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.blog-filter a{
  display:inline-flex;
  padding:9px 18px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong);
  background:none; font-size:0.85rem; color:var(--ink-soft);
  transition:all .25s;
}
.blog-filter a:hover{ border-color:var(--ink); color:var(--ink); }
.blog-filter a.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ==========================================================================
   Skeleton loading placeholders — shown while a section fetches its data
   from the server (infinite scroll, AJAX popups), Facebook/LinkedIn-style.
   ========================================================================== */
@keyframes skeleton-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
.skeleton{
  background:linear-gradient(90deg, var(--bg-alt) 25%, rgba(0,0,0,0.07) 37%, var(--bg-alt) 63%);
  background-size:400% 100%;
  animation:skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
.skeleton-card .ph{ aspect-ratio:4/3; border-radius:var(--radius-md); margin-bottom:18px; }
.skeleton-card .skeleton-meta{ height:14px; width:100px; margin-bottom:14px; }
.skeleton-card .skeleton-title{ height:20px; width:88%; margin-bottom:10px; }
.skeleton-card .skeleton-title-2{ height:20px; width:58%; margin-bottom:14px; }
.skeleton-card .skeleton-text{ height:14px; width:100%; margin-bottom:8px; }
.skeleton-card .skeleton-text.short{ width:65%; margin-bottom:0; }
.skeleton-tile{ aspect-ratio:1/1; border-radius:var(--radius-md); }

/* Inline "couldn't load" state — stays local to the section, never the whole page */
.load-more-error{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; text-align:center;
  padding:20px 24px;
  background:var(--brick-tint);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  color:var(--ink-soft);
  font-size:0.9rem;
}
.load-more-error button{
  font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:9px 18px; border:1.5px solid var(--ink); border-radius:var(--radius-sm);
  background:var(--ink); color:var(--bg); cursor:pointer; flex-shrink:0;
}
.load-more-error button:hover{ background:var(--brick); border-color:var(--brick); }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; }
.blog-card{ }
.blog-card .ph{ aspect-ratio:4/3; border-radius:var(--radius-md); margin-bottom:18px; }
.blog-card .meta{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.blog-card time{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; }
.blog-card h3{ font-size:1.3em; line-height: 1.4;}
.blog-card p{ color:var(--ink-soft); margin-top:10px;}
@media (max-width: 860px){ .blog-grid, .blog-featured{ grid-template-columns:1fr; } }

/* ---- Blog detail ---- */
.post-hero{ padding-block:88px 0; }
.post-meta-top{ display:flex; gap:14px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.post-hero h1{ max-width:22ch; }
.post-byline{ display:flex; align-items:center; gap:14px; margin-top:34px; }
.post-byline .avatar{ width:46px; height:46px; border-radius:50%; flex-shrink:0; }
.post-byline strong{ display:block; font-size:0.95rem; }
.post-byline span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; }
.post-cover{ aspect-ratio:16/8; border-radius:var(--radius-lg); margin:44px 0 0; }

.post-layout{ display:grid; grid-template-columns:80px 1fr 240px; gap:40px; padding-top:84px; align-items:start; }
.post-share{ position:sticky; top:110px; display:flex; flex-direction:column; gap:12px; text-align: center;margin-left: -40px;}
.post-share a{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition:all .25s;
  margin:0 auto;
}
.post-share a:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); transform:translateY(-2px); align-items: center;}
.post-share span{ font-family:var(--font-mono); font-size:0.62rem; text-align:center; color:var(--ink-faint); text-transform:uppercase; margin-top:4px; }

.post-body{ max-width:66ch; font-size:1.08rem; color:var(--ink); }

/* ==========================================================================
   Rich content — shared typography for CKEditor output (Blog posts, Feed
   trip stories, legal docs). Add class="rich-content" alongside a page's own
   container class to get this styling — keeps every place that renders
   {{ obj.field|safe }} looking the same and on-brand.
   ========================================================================== */
.rich-content{ color:var(--ink); }
.rich-content > *:first-child{ margin-top:0 !important; }

.rich-content p{ margin-top:22px; color:var(--ink-soft); line-height:1.8; }
.rich-content a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-soft); }
.rich-content a:hover{ color:var(--brick); }

.rich-content h2{ margin-top:52px; margin-bottom:8px; font-size:1.6rem; line-height:1.3; }
.rich-content h3{ margin-top:38px; margin-bottom:6px; font-size:1.25rem; line-height:1.35; }

.rich-content blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.4rem;
  line-height:1.5;
  border-left:3px solid var(--brick);
  padding:6px 0 6px 28px;
  margin:36px 0;
  color:var(--ink);
}
.rich-content blockquote p{ margin-top:0; color:inherit; }

.rich-content ul,
.rich-content ol{ margin-top:18px; padding-left:0; }
.rich-content ul li,
.rich-content ol li{ color:var(--ink-soft); padding-left:30px; position:relative; margin-top:10px; line-height:1.7; }
.rich-content ul li::before{ content:''; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.rich-content ol{ counter-reset:rich-ol; }
.rich-content ol li{ counter-increment:rich-ol; }
.rich-content ol li::before{
  content:counter(rich-ol);
  position:absolute; left:0; top:0;
  width:20px; height:20px;
  font-family:var(--font-mono); font-size:0.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); border-radius:50%; background:var(--gold-tint);
}
.rich-content li > ul,
.rich-content li > ol{ margin-top:8px; }

.rich-content hr{ border:none; border-top:1px solid var(--line-strong); margin:44px 0; }

/* Images — CKEditor wraps uploads in <figure class="image">, optionally with
   a <figcaption> and an inline resize width. */
.rich-content img{ max-width:100%; height:auto; display:block; border-radius:var(--radius-md); }
.rich-content figure.image{ margin:36px auto; max-width:100%; }
.rich-content figure.image img{ margin:0 auto; }
.rich-content figure.image figcaption{
  margin-top:10px; text-align:center;
  font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-faint);
}
.rich-content figure.image-style-side{ float:right; margin-left:28px; max-width:45%; }
.rich-content figure.image-style-align-left{ float:left; margin-right:28px; }
.rich-content figure.image-style-align-right{ float:right; margin-left:28px; }

/* Video embeds (YouTube, etc.) — CKEditor's media-embed figure, forced to a
   responsive 16:9 box regardless of the iframe's own inline sizing. */
.rich-content .media,
.rich-content figure.media{
  position:relative; margin:36px 0;
  aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden;
  background:var(--ink);
}
.rich-content .media iframe,
.rich-content figure.media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Code blocks — CKEditor outputs <pre><code class="language-xxx">…</code></pre>.
   The copy button is added client-side by main.js on any .rich-content. */
.rich-content pre{
  position:relative;
  margin:32px 0;
  padding:22px 24px;
  background:var(--ink);
  color:#f2ece1;
  border-radius:var(--radius-md);
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:0.86rem;
  line-height:1.65;
}
.rich-content pre code{ font-family:inherit; background:none; padding:0; color:inherit; }
.rich-content :not(pre) > code{
  font-family:var(--font-mono);
  font-size:0.88em;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:3px;
  padding:2px 6px;
  color:var(--brick);
}

/* Syntax highlighting (Prism.js, self-hosted) — on-brand palette instead of
   a stock theme, tuned for contrast against the dark .rich-content pre bg. */
.rich-content pre .token.comment,
.rich-content pre .token.prolog,
.rich-content pre .token.doctype,
.rich-content pre .token.cdata{ color:rgba(242,236,225,0.4); font-style:italic; }
.rich-content pre .token.punctuation{ color:rgba(242,236,225,0.55); }
.rich-content pre .token.property,
.rich-content pre .token.tag,
.rich-content pre .token.boolean,
.rich-content pre .token.number,
.rich-content pre .token.constant,
.rich-content pre .token.symbol,
.rich-content pre .token.deleted{ color:#ff8a5c; }
.rich-content pre .token.selector,
.rich-content pre .token.attr-name,
.rich-content pre .token.string,
.rich-content pre .token.char,
.rich-content pre .token.builtin,
.rich-content pre .token.inserted{ color:#9fd8a4; }
.rich-content pre .token.operator,
.rich-content pre .token.entity,
.rich-content pre .token.url,
.rich-content pre .token.variable{ color:#7fd0e0; }
.rich-content pre .token.atrule,
.rich-content pre .token.attr-value,
.rich-content pre .token.keyword{ color:#e8c07d; }
.rich-content pre .token.function,
.rich-content pre .token.class-name{ color:#f2c46d; }
.rich-content pre .token.regex,
.rich-content pre .token.important{ color:#ff8a5c; font-weight:700; }

.rich-content .code-copy-btn{
  position:absolute; top:12px; right:12px;
  display:flex; align-items:center; gap:5px;
  padding:6px 11px;
  background:rgba(242,236,225,0.1);
  border:1px solid rgba(242,236,225,0.22);
  border-radius:999px;
  color:rgba(242,236,225,0.85);
  font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.rich-content .code-copy-btn:hover{ background:rgba(242,236,225,0.2); color:#fff; }
.rich-content .code-copy-btn svg{ width:13px; height:13px; }
.rich-content .code-copy-btn.copied{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* "Beautiful link" preview card — inserted via the admin's link-card button */
.post-link-card{ display:block; margin:32px 0; }
.post-link-card a{
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.post-link-card a:hover{ border-color:var(--ink); box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.post-link-card-img{ width:180px; flex-shrink:0; object-fit:cover; border-radius:0; margin:0; background:var(--bg-alt); }
.post-link-card-body{ display:flex; flex-direction:column; justify-content:center; gap:6px; padding:20px 22px; min-width:0; }
.post-link-card-title{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); line-height:1.35; }
.post-link-card-desc{
  font-size:0.86rem; color:var(--ink-soft); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-link-card-domain{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-top:2px; }

@media (max-width:600px){
  .post-link-card a{ flex-direction:column; }
  .post-link-card-img{ width:100%; height:160px; }
  .rich-content figure.image-style-side,
  .rich-content figure.image-style-align-left,
  .rich-content figure.image-style-align-right{ float:none; margin-left:0; margin-right:0; max-width:100%; }
}

.post-toc{ position:sticky; top:110px; font-size:0.86rem; }
.post-toc h4{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:14px; }
.post-toc a{ display:block; padding:7px 18px; color:var(--ink-soft); border-left:2px solid var(--line);}
.post-toc a:hover{ color:var(--ink); border-color:var(--brick); }
.post-tags-box{ margin-top:36px; display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 1080px){
  .post-layout{ grid-template-columns:1fr; }
  .post-share{ position:static; flex-direction:row; }
  .post-toc{ position:static; order:-1; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); }
}

.author-box{
  margin-top:80px;
  padding:36px;
  border-radius:var(--radius-lg);
  background:var(--bg-alt);
  display:flex;
  gap:22px;
  align-items:center;
}
.author-box .ph{ width:84px; height:84px; border-radius:50%; flex-shrink:0; }
.author-box p{ color:var(--ink-soft); margin-top:8px; font-size:0.94rem; }

.next-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width: 860px){ .next-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FEED — Media grid (Instagram-style) + Tweets
   ========================================================================== */
.feed-section-head{ display:flex; align-items:baseline; gap:16px; margin:56px 0 26px; }
.feed-section-head:first-child{ margin-top:0; }
.feed-section-head h2{ font-size:1.5rem; }

/* ---------- Media grid ---------- */
.ig-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 5px;
  margin-top:5px;
}
.ig-grid-item{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--bg-alt);
  border:none; padding:0; margin:0; cursor:pointer;
  display:block;
}
.ig-grid-item img,
.ig-grid-item video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.ig-grid-item:hover img,
.ig-grid-item:hover video{ transform:scale(1.045); }
.ig-badge{
  position:absolute; top:10px; z-index:2;
  color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.ig-badge svg{ display:block; }
.ig-badge.ig-pin{ left:10px; width:18px; height:18px; }
.ig-badge.ig-stack,
.ig-badge.ig-play{ right:10px; width:18px; height:18px; }
@media (max-width: 700px){
  .ig-grid{ grid-template-columns:repeat(3, 1fr); gap:2px; }
}

/* ---------- Instagram-style AJAX preview modal ---------- */
.ig-modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,9,6,0.94);
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
}
.ig-modal.open{ display:flex; }
.ig-modal-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  max-width:1300px; width:100%; max-height:86vh;
  background:var(--ink);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.ig-modal-media{
  position:relative;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
  min-height:320px;
}
/* Same YouTube-style treatment as the trip gallery — a blurred, zoomed copy
   of the current slide fills the whole modal (including the empty space
   behind the info panel) instead of a flat black/ink void. */
.ig-modal-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(40px) brightness(0.5);
  transform:scale(1.15);
  display:none;
}
/* Same blur treatment, sourced from the video itself when there's no
   uploaded poster photo to use instead. */
.ig-modal-bg-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:blur(40px) brightness(0.5);
  transform:scale(1.15);
  display:none;
}
.ig-modal-stage{ position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; touch-action:pan-y; }
.ig-modal-stage img{ max-width:100%; max-height:86vh; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
/* Unlike img, a <video> paints its own box opaque black wherever
   object-fit:contain leaves it uncovered — so it can never let the blurred
   .ig-modal-bg show through if it's stretched to fill the stage. Sizing it
   to its own content (auto) instead keeps its box tight around the actual
   picture, leaving the real letterbox space transparent. */
.ig-modal-stage video{ max-width:100%; max-height:86vh; width:auto; height:auto; user-select:none; -webkit-user-drag:none; }
.ig-modal-skeleton{ width:80%; height:80%; border-radius:var(--radius-md); }

/* Minimal video player for the popup — tap to play/pause, mute toggle only */
.ig-video-wrap{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ig-video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:50px; height:50px; border-radius:50%;
  background:rgba(255, 255, 255, 0.5); border:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.ig-video-play svg{ width:30px; height:30px; margin-left:0px; fill: rgba(0, 0, 0, 0.5);}
.ig-video-wrap.is-playing .ig-video-play{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(0.85); }
.ig-video-mute{
  position:absolute; right:16px; bottom:16px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,0.55); border:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
}
.ig-video-mute svg{ width:17px; height:17px; }
.ig-modal-error{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:320px; text-align:center; padding:24px;
  color:rgba(242, 236, 221,0.85); font-size:0.92rem;
}
.ig-modal-error button{
  font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:10px 20px; border:1.5px solid var(--bg); border-radius:var(--radius-sm);
  background:transparent; color:var(--bg); cursor:pointer;
}
.ig-modal-error button:hover{ background:var(--bg); color:var(--ink); }
.ig-modal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,253,249,0.14); border:1px solid rgba(255,253,249,0.3);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.ig-modal-nav svg{ width:13px; height:13px; }
.ig-modal-prev{ left:16px; }
.ig-modal-next{ right:16px; }

/* Post-to-post navigation — sits at the outer edge of the whole overlay,
   distinct from the in-post image arrows above. */
.ig-post-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,253,249,0.1); border:1px solid rgba(255,253,249,0.28);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.ig-post-nav:hover{ background:rgba(255,253,249,0.22); }
.ig-post-prev{ left:24px; }
.ig-post-next{ right:24px; }
@media (max-width: 900px){
  .ig-post-nav{ width:38px; height:38px; }
  .ig-post-prev{ left:6px; }
  .ig-post-next{ right:6px; }
}
.ig-modal-dots{ position:absolute; z-index:2; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.ig-modal-dots .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.4); }
.ig-modal-dots .dot.active{ background:#fff; width:16px; border-radius:4px; }
.ig-modal-info{
  position:relative;
  z-index:1;
  background:rgba(10,9,6,0.72);
  padding:34px 30px;
  color:var(--bg);
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.ig-modal-header{ display:flex; align-items:center; gap:12px; }
.ig-modal-header .avatar-mono{ width:42px; height:42px; font-size:0.85rem; flex-shrink:0; }
.ig-modal-header strong{ display:block; font-size:0.95rem; }
.ig-modal-meta{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em; color:rgba(242,236,221,0.6); text-transform:uppercase; }
.ig-modal-title{ font-family:var(--font-display); font-size:1.2rem; margin-top:22px; }
.ig-modal-caption{ margin-top:14px; font-size:0.95rem; line-height:1.7; color:rgba(242,236,221,0.85); white-space:pre-line; }
.ig-modal-stats{
  display:flex; align-items:center; gap:8px; margin-top:22px;
  padding-top:18px; border-top:1px solid rgba(242,236,221,0.16);
  font-family:var(--font-mono); font-size:0.78rem; color:rgba(242,236,221,0.7); text-transform:uppercase; letter-spacing:0.04em;
}
.ig-modal-readmore{ margin-top:22px; align-self:flex-start; color:var(--bg); border-color:rgba(242,236,221,0.3); }
.ig-modal-readmore:hover{ background:var(--bg); color:var(--ink); }
.ig-modal-close{
  position:absolute; top:26px; right:30px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,253,249,0.12); border:1px solid rgba(255,253,249,0.3);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
@media (max-width: 780px){
  .ig-modal{ padding:0; }
  .ig-modal-inner{ grid-template-columns:1fr; max-height:100vh; border-radius:0; grid-template-rows:auto 1fr; }
  .ig-modal-media{ min-height:50vh; }
}

/* ---------- Tweets ---------- */
.tweet-list{ max-width:800px; margin:40px auto 0; display:flex; flex-direction:column; gap: 50px; }
.tweet-item{ position:relative; }
.tweet-pin-badge{
  position:absolute; top:0; left:-15px; z-index:2;
  transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--brick);
  border-radius:999px;
  padding: 10px 10px;
  font-family:var(--font-mono);
  font-size:0.75rem; 
  text-transform:uppercase; 
  letter-spacing:0.05em; font-weight: bold;
  color:var(--brick);
}
.tweet-card{
  display:flex; gap:20px;
  padding: 45px 30px;
  border: 3px solid var(--line);
  border-radius:var(--radius-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tweet-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.tweet-card.pinned{ 
  border: 1px solid var(--brick);
}
.tweet-card .avatar-mono{ width:42px; height:42px; font-size:0.85rem; flex-shrink:0; }
.tweet-body{ flex:1; min-width:0; }
.tweet-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tweet-head strong{ font-size:1rem; font-weight: 600;}
.tweet-location{ display:inline-flex; align-items:center; gap:4px; font-size:0.78rem; color:var(--ink-soft); }
.tweet-location svg{ width:12px; height:12px; }
.tweet-text{ margin-top:10px; font-size:1.2rem; font-family:var(--font-display); line-height:1.6; white-space:pre-line; }
.tweet-foot{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:25px; padding-top:25px; border-top:1px solid var(--line); }
.tweet-date{ font-family:var(--font-mono); font-size:0.74rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }
.tweet-hashtags{ display:flex; gap:8px; flex-wrap:wrap; }
.tweet-hashtags .tag{ 
  font-size:0.75rem; 
  background: var(--brick)!important; 
  color: var(--bg)!important;
}

/* ---------- Trip / mini-blog detail page (simple, social-post style) ---------- */
.post-card{ padding-block:96px 0; }
.post-card-inner{ max-width:50ch; margin:0 auto; padding-bottom:64px; }

.post-card-top{ display:flex; align-items:center; gap:14px; }
.post-card-back{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition:color .2s, border-color .2s;
}
.post-card-back:hover{ color:var(--ink); border-color:var(--ink); }
.post-card-back svg{ width:16px; height:16px; }
.post-card-id{ display:flex; flex-direction:column; gap:2px; }
.post-card-id strong{ font-size:0.98rem; }
.post-card-meta{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--ink-soft); }

.post-card-share{
  margin-left:auto; flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-soft); background:none;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.02em; text-transform:uppercase;
  transition:color .2s, border-color .2s;
}
.post-card-share:hover{ color:var(--ink); border-color:var(--ink); }
.post-card-share.copied{ color:var(--brick); border-color:var(--brick); }
.post-card-share svg{ width:15px; height:15px; }
@media (max-width:480px){ .post-card-share-label{ display:none; } .post-card-share{ padding:8px; } }

.post-card-title{ margin-top:26px; font-size:1.2rem; font-weight:600; line-height:1.4; }

.post-card-body{ margin-top:18px; font-size:1.05rem; }

/* Post cover — shown at its natural size (no crop, no lightbox), like a
   plain attached photo/video rather than a hero banner. */
.trip-cover{ margin:28px 0 0; border-radius:var(--radius-lg); overflow:hidden; }
.trip-cover img,
.trip-cover video{ display:block; width:100%; height:auto; }

.post-card-footer{
  display:flex; align-items:center; gap:6px;
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-size:0.82rem; color:var(--ink-soft);
}
.post-card-footer svg{ width:15px; height:15px; }

.trip-gallery{
  max-width:55ch;
  margin:0 auto 80px;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
@media (max-width: 600px){
  .trip-gallery{ padding:0 20px; }
}
.gallery-item{
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  cursor:zoom-in;
  border:1px solid var(--line);
  background:var(--bg-alt);
}
.gallery-item.wide{ grid-column:span 2; aspect-ratio:2/1; }

/* YouTube-style thumbnail: a blurred, cropped copy of the image fills the
   fixed box behind it; the real image sits centered on top, shown in full
   (object-fit:contain) instead of being cropped to fit the box. */
.gallery-item-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:blur(26px) brightness(0.75);
  transform:scale(1.2);
}
/* Same treatment, sourced from the video itself when there's no uploaded
   poster photo to use instead. */
.gallery-item-bg-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:blur(26px) brightness(0.75);
  transform:scale(1.2);
}
.gallery-item img.fill,
.gallery-item video.fill{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  background:transparent;
  transition:transform .6s var(--ease);
}
.gallery-item video.fill{
  object-fit: contain;
}
.gallery-item img.fill{
  object-fit:cover!important;
}
.gallery-item:hover img.fill,
.gallery-item:hover video.fill{ transform:scale(1.06); }

.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 16px 14px;
  background:linear-gradient(to top, rgba(24,42,32,0.85), transparent);
  color:#fff;
  font-size:0.82rem; line-height:1.4;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:translateY(0); }
.gallery-fig{
  display:block;
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--brick-tint);
  margin-bottom:3px;
}

@media (max-width: 700px){
  .gallery-caption{ opacity:1; transform:translateY(0); padding-top:24px; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:999;
  background:rgba(20,16,10,0.92);
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox .lb-inner{ max-width:860px; width:100%; }
.lightbox .ph{
  aspect-ratio:auto;
  width:auto;
  max-width:100%;
  border-radius:var(--radius-md);
  background:none;
  border:none;
}
.lightbox .ph img.fill,
.lightbox .ph video.fill{
  position:static;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius:var(--radius-md);
  display:block;
  margin:0 auto;
}
.lightbox .lb-close{
  position:absolute; top:26px; right:30px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,253,249,0.12); border:1px solid rgba(255,253,249,0.3);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-prev,
.lightbox .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,253,249,0.12); border:1px solid rgba(255,253,249,0.3);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-prev{ left:24px; }
.lightbox .lb-next{ right:24px; }
.lightbox .lb-caption{ color:rgba(242, 236, 221,0.75); text-align:center; margin-top:18px; font-size:0.88rem; }

@media (max-width: 560px){
  .lightbox{ padding:16px; }
  .lightbox .lb-prev,
  .lightbox .lb-next{ width:38px; height:38px; }
}

/* ==========================================================================
   Error pages — same "stamped specimen" motif as the rest of the site
   ========================================================================== */
.errpage{
  width: 100%;
  min-height:100vh;
}
.error-hero.container{
  margin: 0 auto!important;
}
.error-hero{
  padding-block: 150px 100px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin: 0 auto;
}
.error-stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(3.2rem, 11vw, 6.4rem);
  line-height:1;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--ink);
  padding:0.3em 0.5em;
  border-radius:var(--radius-md);
  transform:rotate(-2deg);
  box-shadow:var(--shadow-lift);
  margin-bottom:32px;
}
.error-stamp-gold{ border-color:var(--gold); box-shadow:7px 7px 0 var(--gold-tint); }
.error-stamp-sage{ border-color:var(--sage); box-shadow:7px 7px 0 var(--sage-tint); }
.error-stamp-brick{ border-color:var(--brick); box-shadow:7px 7px 0 var(--brick-tint); }
.error-hero .eyebrow{ justify-content:center; }
.error-hero h1{ margin-top:20px; max-width:18ch; }
.error-hero .lede{ margin:22px auto 0; text-align:center; }
.error-actions{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
}
@media (max-width: 560px){
  .error-hero{ padding-block:60px 72px; }
  .error-actions{ flex-direction:column; width:100%; }
  .error-actions .btn{ justify-content:center; }
}