/* ===== Design tokens ====================================================== */
:root{
  --lef-apricot: rgb(240,150,75);
  --lef-apricot-600: rgb(228,120,40);  /* darker for CTA */
  --text: #111;
  --muted: #6b7280;
  --bg: #faf9f7;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* === Header / Brand / Nav (restored) === */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}
.brand {
  font-family: 'Bebas Neue', Roboto, sans-serif;
  font-size: 28px;
  letter-spacing: 0.02em;
}
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav a {
  color: var(--muted);
  font-weight: 500;
  transition: color .2s ease;
}
.nav a:hover { color: var(--lef-apricot); }

/* === Pillars grid + cards (restored) === */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0 40px;
  list-style: none;
  padding: 0;
}
.pillar-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid #eee;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 160px;
}
.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff3eb;
  border: 1px solid #ffd3b3;
  color: #b35416;
  vertical-align: middle;
}

/* === Generic buttons (restored) === */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--lef-apricot);
  background: var(--lef-apricot);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.btn.secondary {
  background: transparent;
  color: var(--lef-apricot);
}
.btn.full { width: fit-content; align-self: flex-start; }

/* === Responsive fix for header on small screens (optional) === */
@media (max-width: 720px) {
  .header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nav { flex-wrap: wrap; gap: 12px; }
}


/* ===== Base =============================================================== */
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg); color: var(--text);
}
a{ color:inherit; text-decoration:none; }

.container{ max-width:1080px; margin:0 auto; padding:24px; }

/* Headings */
h1,h2,h3,h4{
  font-family:'Bebas Neue', Roboto, sans-serif;
  letter-spacing:.3px; line-height:1.1; margin:0 0 .3em;
}
h1{ font-size:48px; }
h1.page-title{
  font-weight:400; font-size:2.4rem; letter-spacing:.02em; color:#222; margin-bottom:.5rem;
}
h1.page-title span{ color:var(--lef-apricot); }
h2{ font-size:32px; margin-top:1.4em; }

/* ===== Layout grids ======================================================= */
.grid{ display:grid; gap:24px; margin-top:24px; list-style:none; padding:0;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
}

/* ===== Generic card ======================================================= */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  border:1px solid #eee;
  box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }

/* ===== Insight cards ====================================================== */
.card .meta{ font-size:.9rem; color:#6f6f6f; margin-bottom:.25rem; }
.card .card-title{ margin:4px 0 8px; line-height:1.1; letter-spacing:.01em;
  font-size:clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); font-weight:500;
}
.card .card-title a{ color:#111; }
.card .card-title a:hover{ text-decoration:underline; }
.card .summary{ margin:0 0 .75rem 0; line-height:1.5; color:var(--muted); font-size:.98rem; }

/* Tags */
.tags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-size:13px; font-weight:500; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(240,150,75,.3); background:rgba(240,150,75,.08);
  color:rgb(210,95,30); transition:all .2s;
}
.tag:hover{ background:var(--lef-apricot); color:#fff; border-color:var(--lef-apricot); }

/* ===== Right-edge vertical CTA =========================================== */
.card--with-edge-cta {
  position: relative;
  padding-right: 32px;              /* slimmer bar space */
  overflow: hidden;
  border-radius: var(--radius);
}

/* CTA strip */
.card--with-edge-cta .edge-cta {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 20px;                      /* thinner band */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  text-decoration: none;
  cursor: pointer;

  /* solid Deep Apricot tone, matching the button */
  background: var(--lef-apricot);
  border-left: 1px solid rgba(0,0,0,0.05);
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;

  color: #fff;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

/* label + arrow */
.edge-cta__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .95rem;
  opacity: 1;
}

.edge-cta__arrow {
  font-size: 1.4rem;
  line-height: 1;
  transform: translateY(-1px);
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}

/* Hover / Active */
.card--with-edge-cta .edge-cta:hover {
  background: rgb(230,130,60);       /* slightly darker hover tone */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
.card--with-edge-cta .edge-cta:hover .edge-cta__arrow {
  transform: translateY(-1px) translateX(2px);
  opacity: 1;
}
.card--with-edge-cta .edge-cta:active {
  transform: translateY(1px);
}

/* Responsive: smaller strip on mobile */
@media (max-width: 640px) {
  .card--with-edge-cta { padding-right: 56px; }
  .card--with-edge-cta .edge-cta { width: 50px; }
  .edge-cta__label { font-size: .9rem; }
}

/* ===== Search UI ========================================================== */
.search{ max-width:720px; margin:2rem auto; }

.searchbar{
  display:flex; align-items:center; gap:.5rem; max-width:700px;
  border:1px solid #ddd; border-radius:12px; padding:.5rem .75rem; background:#fff;
}
.searchbar input{
  flex:1 1 auto; border:0; outline:none; font:inherit; padding:0;
}
.searchbar input::-webkit-search-cancel-button{ -webkit-appearance:none; }

.q-appended{
  flex:0 0 auto; color:#8a8a8a; font-size:.9rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:45%;
}
.q-clear{
  flex:0 0 auto; background:transparent; border:0; padding:0 .25rem; line-height:1;
  font-size:1rem; color:#8a8a8a; cursor:pointer;
}
.q-clear:hover{ color:#444; }

/* Search results list */
.results{ display:grid; gap:1.2rem; margin-top:2rem; }
.result{ display:block; padding:1.4rem 1.6rem; border-radius:var(--radius); border:1px solid #eee; background:var(--card); box-shadow:var(--shadow); transition:all .2s ease; }
.result:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.result strong{ display:block; font-size:1.15rem; margin-bottom:.4rem; color:var(--text); font-weight:600; }
.result .desc{ font-size:.96rem; color:var(--muted); line-height:1.45; margin-bottom:.6rem; }
.result .meta{ font-size:.85rem; color:var(--muted); margin-bottom:.4rem; text-transform:lowercase; }

/* ===== Footer ============================================================= */
.footer{ margin:40px 0 20px; color:var(--muted); font-size:14px; text-align:center; }

/* ===== Responsive ========================================================= */
@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .card--with-edge-cta{ padding-right:64px; }
  .card--with-edge-cta .edge-cta{ width:56px; }
  .edge-cta__label{ font-size:.95rem; }
}