/* Page Réflexions — scoped so shared styles stay untouched. */
body.reflexions-page{
  background:var(--ivory);
  color:var(--ink);
}
body.reflexions-page .site-header{
  background:rgba(26,26,24,.92);
  backdrop-filter:blur(16px);
}
body.reflexions-page .close{color:var(--ice)}
body.reflexions-page .reflect-hero .kicker,
body.reflexions-page .reflect-thread .kicker{color:var(--gold-ink)}

.reflect-hero{padding:4.4rem 0 4.2rem}
.reflect-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2.5rem 3.5rem;
  align-items:center;
}
.reflect-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.15rem;
}
.reflect-hero h1{
  font-size:clamp(2.35rem,4vw,3.35rem);
  max-width:12em;
  margin:0;
}
.reflect-hero p:not(.kicker),
.reflect-thread p{
  margin:0;
  max-width:34rem;
  color:var(--muted-ink);
  font-size:.98rem;
  line-height:1.65;
}
.reflect-hero-photo{
  width:100%;
  height:auto;
  aspect-ratio:1024/575;
  object-fit:cover;
  border-radius:var(--radius);
}

.reflect-list{
  background:var(--ink);
  color:var(--ice);
  padding:4.6rem 0 4.8rem;
}
.reflect-list .kicker{color:var(--gold)}
.reflect-list h2{
  font-size:clamp(2.05rem,3.3vw,2.85rem);
  max-width:16ch;
  margin:1.15rem 0 0;
}
.reflect-grid{
  list-style:none;
  margin:2.2rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.reflect-grid > li{display:flex;min-width:0}
.reflect-card{
  display:flex;
  flex-direction:column;
  flex:1;
  width:100%;
  min-height:100%;
  color:inherit;
  background:var(--card);
  border:1px solid rgba(247,244,239,.1);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
.reflect-card:hover{
  border-color:rgba(196,180,150,.72);
  transform:translateY(-3px);
}
@media (prefers-reduced-motion:reduce){
  .reflect-card{transition:none}
  .reflect-card:hover{transform:none}
}
.reflect-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
.reflect-card h3{
  margin:0;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
}
.reflect-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.7rem;
  flex:1;
  padding:1.15rem 1.1rem 1.2rem;
}
.reflect-body p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.45;
}
.reflect-body p.reflect-more{margin-top:auto;color:var(--ice)}
a.reflect-card:hover .reflect-more{color:#fff}

.essay{padding:3.2rem 0 4.2rem}
.essay-layout{
  display:grid;
  grid-template-columns:9.2rem minmax(0,1fr);
  gap:2.2rem 3.2rem;
  align-items:start;
}
.essay-side{position:sticky;top:5.6rem}
.essay-side .idea-cat{
  color:var(--gold-ink);
  border-color:color-mix(in srgb, var(--gold-ink) 55%, transparent);
}
.essay-time,
.essay-share-label{
  margin:.4rem 0 0;
  color:var(--muted-ink);
  font-size:.86rem;
  line-height:1.4;
}
.essay-share-label{margin-top:1.35rem;color:var(--ink)}
.essay-share{display:flex;align-items:center;gap:.8rem;margin-top:.55rem}
.essay-share a,
.essay-share button{
  display:inline-flex;
  color:var(--ink);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.essay-share a:hover,
.essay-share button:hover,
.essay-share button.is-copied{color:var(--gold-ink)}
.essay-top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:1.2rem 2.2rem;
  align-items:center;
}
.essay-top > div:first-child{display:flex;flex-direction:column;justify-content:center}
.essay .kicker{color:var(--gold-ink)}
.essay h1{
  margin:.65rem 0 0;
  max-width:14em;
  font-size:clamp(1.9rem,2.15vw,2.35rem);
  line-height:1.12;
}
.essay-byline{
  margin:.8rem 0 0;
  color:var(--muted-ink);
  font-size:.92rem;
  line-height:1.4;
}
.essay-byline a{color:var(--ink)}
.essay-byline a:hover{color:var(--gold-ink)}
.essay-lead{
  margin:.85rem 0 0;
  max-width:34rem;
  color:rgba(26,26,24,.68);
  font-size:1rem;
  line-height:1.55;
}
.essay-photo-frame{
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
}
.essay-photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  margin:0;
}
.essay-intro{margin-top:1.7rem}
.essay-intro p,
.essay-section p{
  margin:0 0 .95rem;
  color:rgba(26,26,24,.78);
  font-size:1.02rem;
  line-height:1.7;
}
.essay-section{
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  gap:.3rem 1.15rem;
  margin-top:1.35rem;
  padding-top:1.45rem;
  border-top:1px solid rgba(26,26,24,.1);
}
.essay-num{
  margin:.22rem 0 0;
  color:var(--gold-ink);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
}
.essay-section h2{
  margin:0 0 .85rem;
  font-size:clamp(1.25rem,1.5vw,1.45rem);
  letter-spacing:-.03em;
  line-height:1.25;
}
.essay-section p.essay-note{
  background:#efe6d6;
  color:var(--ink);
  border-radius:var(--radius);
  padding:.95rem 1.05rem;
}
.essay-more{padding-top:4.4rem}

.reflect-thread{padding:4.6rem 0 5rem}
.reflect-thread-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:3.5rem;
  row-gap:1.15rem;
  align-items:start;
}
.reflect-thread h2{
  grid-column:1;
  grid-row:2;
  font-size:clamp(2.05rem,3.3vw,2.85rem);
  max-width:12em;
  margin:0;
}
.reflect-thread .kicker{grid-column:1;grid-row:1}
.reflect-thread-aside{
  grid-column:2;
  grid-row:2;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding-left:2rem;
  border-left:1px solid rgba(26,26,24,.12);
}

@media (max-width:980px){
  .reflect-hero-grid,
  .reflect-thread-grid{grid-template-columns:1fr;gap:2rem}
  .reflect-thread h2,
  .reflect-thread .kicker,
  .reflect-thread-aside{grid-column:1;grid-row:auto}
  .reflect-thread-aside{padding-left:0;border-left:0}
  .reflect-grid{grid-template-columns:1fr 1fr}
  .reflect-hero-photo{max-width:36rem}
  .essay-layout,.essay-top{grid-template-columns:1fr;gap:1.4rem}
  .essay-side{position:static}
  .essay-photo{aspect-ratio:16/10}
  .essay-section{grid-template-columns:1fr;gap:.35rem}
}
@media (max-width:640px){
  .reflect-hero{padding:3.2rem 0 2.8rem}
  .reflect-list,.reflect-thread{padding:3.2rem 0}
  .reflect-hero h1{font-size:2.2rem}
  .reflect-grid{grid-template-columns:1fr}
}